feat: getting invoice preview on send mail view

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

@@ -1,18 +1,41 @@
+import { Spinner } from '@blueprintjs/core';
 import { css } from '@emotion/css';
-import { Box } from '@/components';
-import { InvoicePaperTemplate } from '../InvoiceCustomize/InvoicePaperTemplate';
+import { Stack } from '@/components';
 import { InvoiceSendMailPreviewWithHeader } from './InvoiceSendMailHeaderPreview';
+import { useInvoiceHtml } from '@/hooks/query';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 
 export function InvoiceSendPdfPreviewConnected() {
   return (
     <InvoiceSendMailPreviewWithHeader>
-      <Box px={4} py={6}>
-        <InvoicePaperTemplate
-          className={css`
-            margin: 0 auto;
-          `}
-        />
-      </Box>
+      <Stack px={4} py={6}>
+        <InvoiceSendPdfPreviewIframe />
+      </Stack>
     </InvoiceSendMailPreviewWithHeader>
   );
 }
+
+function InvoiceSendPdfPreviewIframe() {
+  const { payload } = useDrawerContext();
+  const { data, isLoading } = useInvoiceHtml(payload?.invoiceId);
+
+  if (isLoading && data) {
+    return <Spinner size={20} />;
+  }
+  const iframeSrcDoc = data?.htmlContent;
+
+  return (
+    <iframe
+      title={'invoice-pdf-preview'}
+      srcDoc={iframeSrcDoc}
+      className={css`
+        height: 1123px;
+        width: 794px;
+        border: 0;
+        border-radius: 5px;
+        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
+        margin: 0 auto;
+      `}
+    />
+  );
+}

packages/webapp/src/hooks/query/invoices.tsx

@@ -201,6 +201,34 @@ export function usePdfInvoice(invoiceId) {
   });
 }
 
+interface GetInvoiceHtmlResponse {
+  htmlContent: string;
+}
+/**
+ * Retrieves the invoice html content.
+ * @param {number} invoiceId
+ * @param {UseQueryOptions<GetInvoiceHtmlResponse>} options
+ * @returns {UseQueryResult<GetInvoiceHtmlResponse>} 
+ */
+export const useInvoiceHtml = (
+  invoiceId: number,
+  options?: UseQueryOptions<GetInvoiceHtmlResponse>,
+): UseQueryResult<GetInvoiceHtmlResponse> => {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetInvoiceHtmlResponse>(
+    ['SALE_INVOICE_HTML', invoiceId],
+    () =>
+      apiRequest
+        .get(`sales/invoices/${invoiceId}`, {
+          headers: {
+            Accept: 'application/json+html',
+          },
+        })
+        .then((res) => transformToCamelCase(res.data)),
+  );
+};
+
 /**
  * Retrieve due invoices of the given customer id.
  * @param {number} customerId - Customer id.