feat: Payment invoice preview drawer

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