feat: Payment invoice preview drawer

packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx

@@ -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

packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx

@@ -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} />
+    </>
   );
 }

packages/webapp/src/containers/PaymentPortal/drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewContent.tsx

@@ -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>
+    </>
+  );
+}

packages/webapp/src/containers/PaymentPortal/drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewDrawer.tsx

@@ -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,
+);

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx

@@ -73,13 +73,13 @@ export interface InvoicePaperTemplateProps {
   balanceDue?: string;
 
   // Footer
-  termsConditionsLabel: string;
-  showTermsConditions: boolean;
-  termsConditions: string;
+  termsConditionsLabel?: string;
+  showTermsConditions?: boolean;
+  termsConditions?: string;
 
-  statementLabel: string;
-  showStatement: boolean;
-  statement: string;
+  statementLabel?: string;
+  showStatement?: boolean;
+  statement?: string;
 
   lines?: Array<PapaerLine>;
   taxes?: Array<PaperTax>;

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.tsx

@@ -20,6 +20,7 @@ import {
 import { useProjects } from '@/containers/Projects/hooks';
 import { useTaxRates } from '@/hooks/query/taxRates';
 import { useGetPdfTemplates } from '@/hooks/query/pdf-templates';
+import { useGetPaymentServices } from '@/hooks/query/payment-services';
 
 const InvoiceFormContext = createContext();
 
@@ -60,6 +61,10 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
   const { data: brandingTemplates, isLoading: isBrandingTemplatesLoading } =
     useGetPdfTemplates({ resource: 'SaleInvoice' });
 
+  // Fetches the payment services.
+  const { data: paymentServices, isLoading: isPaymentServicesLoading } =
+    useGetPaymentServices();
+
   const newInvoice = !isEmpty(estimate)
     ? transformToEditForm({
         ...pick(estimate, ['customer_id', 'currency_code', 'entries']),
@@ -110,7 +115,10 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
 
   // Determines whether the warehouse and branches are loading.
   const isFeatureLoading =
-    isWarehouesLoading || isBranchesLoading || isProjectsLoading || isBrandingTemplatesLoading;
+    isWarehouesLoading ||
+    isBranchesLoading ||
+    isProjectsLoading ||
+    isBrandingTemplatesLoading;
 
   const provider = {
     invoice,