feat: estimate send mail drawer

packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreview.tsx

@@ -1,7 +1,27 @@
-
+import { Suspense } from 'react';
+import { SendMailViewPreviewTabs } from '../SendMailViewDrawer/SendMailViewPreviewTabs';
+import { Tab } from '@blueprintjs/core';
+import { EstimateSendPdfPreviewConnected } from './EstimateSendPdfPreviewConnected';
 
 export function EstimateSendMailPreviewTabs() {
   return (
-    <h1>asdfsdf</h1>
-  )
-}
+    <SendMailViewPreviewTabs>
+      <Tab
+        id={'payment-page'}
+        title={'Payment page'}
+        panel={
+          <Suspense>{/* <InvoiceMailReceiptPreviewConnected /> */}</Suspense>
+        }
+      />
+      <Tab
+        id="pdf-document"
+        title={'PDF document'}
+        panel={
+          <Suspense>
+            <EstimateSendPdfPreviewConnected />
+          </Suspense>
+        }
+      />
+    </SendMailViewPreviewTabs>
+  );
+}

packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreviewHeader.tsx

@@ -0,0 +1,13 @@
+import { SendViewPreviewHeader } from '../SendMailViewDrawer/SendMailViewPreviewHeader';
+
+export function EstimateSendMailPreviewHeader() {
+  return (
+    <SendViewPreviewHeader
+      companyName="A"
+      customerName="A"
+      subject={'adsfsdf'}
+      from={['a.bouhuolia@gmail.com']}
+      to={['a.bouhuolia@gmail.com']}
+    />
+  );
+}

packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendPdfPreviewConnected.tsx

@@ -0,0 +1,31 @@
+import { Spinner } from '@blueprintjs/core';
+import { Stack } from '@/components';
+import { useGetSaleEstimateHtml } from '@/hooks/query';
+import { EstimateSendMailPreviewHeader } from './EstimateSendMailPreviewHeader';
+import { SendMailViewPreviewPdfIframe } from '../SendMailViewDrawer/SendMailViewPreviewPdfIframe';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+
+export function EstimateSendPdfPreviewConnected() {
+  return (
+    <Stack>
+      <EstimateSendMailPreviewHeader />
+
+      <Stack px={4} py={6}>
+        <EstimateSendPdfPreviewIframe />
+      </Stack>
+    </Stack>
+  );
+}
+
+function EstimateSendPdfPreviewIframe() {
+  const { payload } = useDrawerContext();
+  const { data, isLoading } = useGetSaleEstimateHtml(payload?.estimateId);
+
+  if (isLoading && data) {
+    return <Spinner size={20} />;
+  }
+
+  const iframeSrcDoc = data?.htmlContent;
+
+  return <SendMailViewPreviewPdfIframe srcDoc={iframeSrcDoc} />;
+}