fix: clean up ivnoice mail receipt preview component

packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceMailReceiptPreviewConnected..tsx

@@ -1,45 +0,0 @@
-import { useMemo } from 'react';
-import { css } from '@emotion/css';
-import { Box, } from '@/components';
-import { InvoiceMailReceiptPreview } from '../InvoiceCustomize/InvoiceMailReceiptPreview';
-import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
-import { InvoiceSendMailPreviewWithHeader } from './InvoiceSendMailHeaderPreview';
-import { useSendInvoiceMailMessage } from './_hooks';
-
-export function InvoiceMailReceiptPreviewConneceted() {
-  const mailMessage = useSendInvoiceMailMessage();
-  const { invoiceMailState } = useInvoiceSendMailBoot();
-
-  const items = useMemo(
-    () =>
-      invoiceMailState?.entries?.map((entry: any) => ({
-        quantity: entry.quantity,
-        total: entry.totalFormatted,
-        label: entry.name,
-      })),
-    [invoiceMailState?.entries],
-  );
-
-  return (
-    <InvoiceSendMailPreviewWithHeader>
-      <Box px={4} pt={8} pb={16}>
-        <InvoiceMailReceiptPreview
-          companyName={invoiceMailState?.companyName}
-          companyLogoUri={invoiceMailState?.companyLogoUri}
-
-          primaryColor={invoiceMailState?.primaryColor}
-          total={invoiceMailState?.totalFormatted}
-          dueDate={invoiceMailState?.dueDateFormatted}
-          dueAmount={invoiceMailState?.dueAmountFormatted}
-
-          invoiceNumber={invoiceMailState?.invoiceNo}
-          items={items}
-          message={mailMessage}
-          className={css`
-            margin: 0 auto;
-          `}
-        />
-      </Box>
-    </InvoiceSendMailPreviewWithHeader>
-  );
-}

packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceMailReceiptPreviewConnected.tsx

@@ -0,0 +1,64 @@
+import { useMemo, ComponentType } from 'react';
+import { css } from '@emotion/css';
+import { Box } from '@/components';
+import {
+  InvoiceMailReceiptPreview,
+  InvoiceMailReceiptPreviewProps,
+} from '../InvoiceCustomize/InvoiceMailReceiptPreview';
+import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
+import { InvoiceSendMailPreviewWithHeader } from './InvoiceSendMailHeaderPreview';
+import { useSendInvoiceMailMessage } from './_hooks';
+
+export function InvoiceMailReceiptPreviewConnected() {
+  return (
+    <InvoiceSendMailPreviewWithHeader>
+      <Box px={4} pt={8} pb={16}>
+        <InvoiceMailReceiptPreviewWithProps
+          className={css`
+            margin: 0 auto;
+          `}
+        />
+      </Box>
+    </InvoiceSendMailPreviewWithHeader>
+  );
+}
+
+/**
+ * Injects props from invoice mail state into the InvoiceMailReceiptPreview component.
+ */
+const withInvoiceMailReceiptPreviewProps = <
+  P extends InvoiceMailReceiptPreviewProps,
+>(
+  WrappedComponent: ComponentType<P & InvoiceMailReceiptPreviewProps>,
+) => {
+  return function WithInvoiceMailReceiptPreviewProps(props: P) {
+    const message = useSendInvoiceMailMessage();
+    const { invoiceMailState } = useInvoiceSendMailBoot();
+
+    const items = useMemo(
+      () =>
+        invoiceMailState?.entries?.map((entry: any) => ({
+          quantity: entry.quantity,
+          total: entry.totalFormatted,
+          label: entry.name,
+        })),
+      [invoiceMailState?.entries],
+    );
+
+    const mailReceiptPreviewProps = {
+      companyName: invoiceMailState?.companyName,
+      companyLogoUri: invoiceMailState?.companyLogoUri,
+      primaryColor: invoiceMailState?.primaryColor,
+      total: invoiceMailState?.totalFormatted,
+      dueDate: invoiceMailState?.dueDateFormatted,
+      dueAmount: invoiceMailState?.dueAmountFormatted,
+      invoiceNumber: invoiceMailState?.invoiceNo,
+      items,
+      message,
+    };
+    return <WrappedComponent {...mailReceiptPreviewProps} {...props} />;
+  };
+};
+
+export const InvoiceMailReceiptPreviewWithProps =
+  withInvoiceMailReceiptPreviewProps(InvoiceMailReceiptPreview);

packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer.tsx

@@ -1,7 +1,8 @@
+// @ts-nocheck
+import React from 'react';
 import * as R from 'ramda';
 import { Drawer, DrawerSuspense } from '@/components';
 import withDrawers from '@/containers/Drawer/withDrawers';
-import React from 'react';
 
 const InvoiceSendMailContent = React.lazy(() =>
   import('./InvoiceSendMailContent').then((module) => ({

packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailPreview.tsx

@@ -3,9 +3,9 @@ import { css } from '@emotion/css';
 import { Tab, Tabs } from '@blueprintjs/core';
 import { Stack } from '@/components';
 
-const InvoiceMailReceiptPreviewConneceted = lazy(() =>
+const InvoiceMailReceiptPreviewConnected = lazy(() =>
-  import('./InvoiceMailReceiptPreviewConnected.').then((module) => ({
+  import('./InvoiceMailReceiptPreviewConnected').then((module) => ({
-    default: module.InvoiceMailReceiptPreviewConneceted,
+    default: module.InvoiceMailReceiptPreviewConnected,
   })),
 );
 const InvoiceSendPdfPreviewConnected = lazy(() =>
@@ -51,7 +51,7 @@ export function InvoiceSendMailPreview() {
           title={'Payment page'}
           panel={
             <Suspense>
-              <InvoiceMailReceiptPreviewConneceted />
+              <InvoiceMailReceiptPreviewConnected />
             </Suspense>
           }
         />