QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 06:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Payment invoice preview drawer

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-19 12:45:06 +02:00
parent 809973730f
commit 16eaacd4bc
8 changed files with 93 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
View File

@@ -3,10 +3,17 @@ import clsx from 'classnames';
import { Box, Group, Stack } from '@/components';
import styles from './PaymentPortal.module.scss';
import { usePaymentPortalBoot } from './PaymentPortalBoot';
import { useDrawerActions } from '@/hooks/state';
import { DRAWERS } from '@/constants/drawers';
export function PaymentPortal() {
const { openDrawer } = useDrawerActions();
const { sharableLinkMeta } = usePaymentPortalBoot();
const handleInvoicePreviewBtnClick = () => {
openDrawer(DRAWERS.PAYMENT_INVOICE_PREVIEW);
};
return (
<Box className={styles.root}>
<Stack spacing={0} className={styles.body}>
@@ -85,6 +92,7 @@ export function PaymentPortal() {
Download Invoice
</Button>
<Button
onClick={handleInvoicePreviewBtnClick}
className={clsx(styles.footerButton, styles.viewInvoiceButton)}
>
View Invoice

16
packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx
View File

@@ -3,15 +3,21 @@ import { PaymentPortal } from './PaymentPortal';
import { PaymentPortalBoot } from './PaymentPortalBoot';
import BodyClassName from 'react-body-classname';
import styles from './PaymentPortal.module.scss';
import { PaymentInvoicePreviewDrawer } from './drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewDrawer';
import { DRAWERS } from '@/constants/drawers';
export default function PaymentPortalPage() {
const { linkId } = useParams<{ linkId: string }>();
return (
<BodyClassName className={styles.rootBodyPage}>
<PaymentPortalBoot linkId={linkId}>
<PaymentPortal />
</PaymentPortalBoot>
</BodyClassName>
<>
<BodyClassName className={styles.rootBodyPage}>
<PaymentPortalBoot linkId={linkId}>
<PaymentPortal />
</PaymentPortalBoot>
</BodyClassName>
<PaymentInvoicePreviewDrawer name={DRAWERS.PAYMENT_INVOICE_PREVIEW} />
</>
);
}

17
packages/webapp/src/containers/PaymentPortal/drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewContent.tsx Normal file
View File

@@ -0,0 +1,17 @@
// @ts-nocheck
import { Box, DrawerBody, DrawerHeaderContent } from '@/components';
import { InvoicePaperTemplate } from '@/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate';
export function PaymentInvoicePreviewContent() {
return (
<>
<DrawerHeaderContent title={'Invoice'} />
<DrawerBody>
<Box style={{ paddingTop: 20, paddingBottom: 20 }}>
<InvoicePaperTemplate />
</Box>
</DrawerBody>
</>
);
}

37
packages/webapp/src/containers/PaymentPortal/drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewDrawer.tsx Normal file
View File

@@ -0,0 +1,37 @@
// @ts-nocheck
import React from 'react';
import * as R from 'ramda';
import { Drawer, DrawerSuspense } from '@/components';
import withDrawers from '@/containers/Drawer/withDrawers';
import { PaymentInvoicePreviewContent } from './PaymentInvoicePreviewContent';
import { Position } from '@blueprintjs/core';
/**
*
* @returns {React.ReactNode}
*/
function PaymentInvoicePreviewDrawerRoot({
name,
// #withDrawer
isOpen,
payload,
}) {
return (
<Drawer
isOpen={isOpen}
name={name}
size={'100%'}
style={{ background: '#F6F7F9' }}
position={Position.TOP}
payload={payload}
>
<DrawerSuspense>
<PaymentInvoicePreviewContent />
</DrawerSuspense>
</Drawer>
);
}
export const PaymentInvoicePreviewDrawer = R.compose(withDrawers())(
PaymentInvoicePreviewDrawerRoot,
);