feat: wip send invoice mail preview

packages/webapp/src/containers/ElementCustomize/ElementCustomizeFields.tsx

@@ -37,8 +37,10 @@ export function ElementCustomizeFieldsMain() {
     <Stack spacing={0} className={styles.mainFields}>
       <ElementCustomizeHeader label={'Customize'} />
 
-      <Stack spacing={0} style={{ flex: '1 1 auto', overflow: 'auto' }}>
-        <Box style={{ flex: '1 1' }}>{CustomizeTabPanel}</Box>
+      <Stack spacing={0} flex="1 1 auto" overflow="auto">
+        <Box flex={'1 1'} overflow="auto">
+          {CustomizeTabPanel}
+        </Box>
         <ElementCustomizeFooterActions />
       </Stack>
     </Stack>

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

@@ -0,0 +1,33 @@
+import { Box } from '@/components';
+import { InvoiceMailReceiptPreview } from '../InvoiceCustomize/InvoiceMailReceiptPreview';
+import { css } from '@emotion/css';
+import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
+import { useMemo } from 'react';
+
+export function InvoiceMailReceiptPreviewConneceted() {
+  const { invoice } = useInvoiceSendMailBoot();
+
+  const items = useMemo(
+    () =>
+      invoice.entries.map((entry: any) => ({
+        quantity: entry.quantity,
+        total: entry.rate_formatted,
+        label: entry.item.name,
+      })),
+    [invoice.entries],
+  );
+
+  return (
+    <Box px={4} pt={8} pb={16}>
+      <InvoiceMailReceiptPreview
+        total={invoice.total_formatted}
+        dueDate={invoice.due_date_formatted}
+        invoiceNumber={invoice.invoice_no}
+        items={items}
+        className={css`
+          margin: 0 auto;
+        `}
+      />
+    </Box>
+  );
+}

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

@@ -1,7 +1,13 @@
+// @ts-nocheck
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
+import { useInvoice } from '@/hooks/query';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 
-interface InvoiceSendMailBootValues {}
+interface InvoiceSendMailBootValues {
+  invoice: any;
+  isInvoiceLoading: boolean;
+}
 interface InvoiceSendMailBootProps {
   children: React.ReactNode;
 }
@@ -10,12 +16,22 @@ const InvoiceSendMailContentBootContext =
   createContext<InvoiceSendMailBootValues>({} as InvoiceSendMailBootValues);
 
 export const InvoiceSendMailBoot = ({ children }: InvoiceSendMailBootProps) => {
-  const isLoading = false;
+  const {
+    payload: { invoiceId },
+  } = useDrawerContext();
+
+  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
+    enabled: !!invoiceId,
+  });
+  const isLoading = isInvoiceLoading;
 
   if (isLoading) {
     return <Spinner size={20} />;
   }
-  const value = {};
+  const value = {
+    invoice,
+    isInvoiceLoading,
+  };
 
   return (
     <InvoiceSendMailContentBootContext.Provider value={value}>

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

@@ -1,13 +1,107 @@
-import { Button, Intent } from "@blueprintjs/core";
-import { useFormikContext } from "formik";
-import { FFormGroup, FInputGroup, Group, Stack } from "@/components";
-import { useDrawerContext } from "@/components/Drawer/DrawerProvider";
-import { useDrawerActions } from "@/hooks/state";
+// @ts-nocheck
+import { Button, Intent, MenuItem } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import {
+  FFormGroup,
+  FInputGroup,
+  FMultiSelect,
+  Group,
+  Stack,
+} from '@/components';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { useDrawerActions } from '@/hooks/state';
+
+const commonAddressSelect = {
+  placeholder: '',
+  labelAccessor: '',
+  valueAccessor: 'mail',
+
+  tagAccessor: (item) => `<${item.label}> (${item.mail})`,
+  textAccessor: (item) => `<${item.label}> (${item.mail})`,
+};
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={'Now contact address'}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => ({ name });
 
 export function InvoiceSendMailFields() {
+  const allowCreate = true;
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
   return (
-    <Stack bg="white" flex={'1'} spacing={0} borderRight="1px solid #dcdcdd">
+    <Stack
+      bg="white"
+      flex={'1'}
+      maxHeight="100%"
+      spacing={0}
+      borderRight="1px solid #dcdcdd"
+    >
       <Stack overflow="auto" flex="1" p={'30px'}>
+        <FFormGroup label={'to'} name={'To'}>
+          <Stack spacing={0}>
+            <FMultiSelect
+              items={[]}
+              name={'to'}
+              popoverProps={{ minimal: true, fill: true }}
+              tagInputProps={{
+                tagProps: { round: true, minimal: true, large: true },
+                large: true,
+                rightElement: (
+                  <Group>
+                    <a href="#">CC</a>
+                    <a href="#">BCC</a>
+                  </Group>
+                ),
+              }}
+              fill={true}
+              createNewItemRenderer={maybeCreateNewItemRenderer}
+              createNewItemFromQuery={maybeCreateNewItemFromQuery}
+              {...commonAddressSelect}
+            />
+            <FMultiSelect
+              items={[]}
+              name={'cc'}
+              popoverProps={{ minimal: true, fill: true }}
+              tagInputProps={{
+                tagProps: { round: true, minimal: true, large: true },
+                large: true,
+              }}
+              fill={true}
+              createNewItemRenderer={maybeCreateNewItemRenderer}
+              createNewItemFromQuery={maybeCreateNewItemFromQuery}
+              {...commonAddressSelect}
+            />
+            <FMultiSelect
+              items={[]}
+              name={'bcc'}
+              popoverProps={{ minimal: true, fill: true }}
+              tagInputProps={{
+                tagProps: { round: true, minimal: true, large: true },
+                large: true,
+              }}
+              fill={true}
+              createNewItemRenderer={maybeCreateNewItemRenderer}
+              createNewItemFromQuery={maybeCreateNewItemFromQuery}
+              {...commonAddressSelect}
+            />
+          </Stack>
+        </FFormGroup>
+
         <FFormGroup label={'Submit'} name={'subject'}>
           <FInputGroup name={'subject'} large />
         </FFormGroup>

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

@@ -5,8 +5,9 @@ import { css } from '@emotion/css';
 const initialValues = {
   subject: '',
   message: '',
-  to: '',
-  cc: '',
+  to: [],
+  cc: [],
+  bcc: []
 };
 interface InvoiceSendMailFormValues {
   subject: string;

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

@@ -1,12 +1,12 @@
-import { Tab, Tabs } from "@blueprintjs/core";
-import { css } from "@emotion/css";
-import { Box, Stack } from "@/components";
-import { InvoiceMailReceiptPreview } from "../InvoiceCustomize/InvoiceMailReceiptPreview";
-import { InvoicePaperTemplate } from "../InvoiceCustomize/InvoicePaperTemplate";
+import { Tab, Tabs } from '@blueprintjs/core';
+import { css } from '@emotion/css';
+import { Stack } from '@/components';
+import { InvoiceMailReceiptPreviewConneceted } from './InvoiceMailReceiptPreviewConnected.';
+import { InvoiceSendPdfPreviewConnected } from './InvoiceSendPdfPreviewConnected';
 
 export function InvoiceSendMailPreview() {
   return (
-    <Stack bg="#F5F5F5" flex={'1'} minWidth="850px">
+    <Stack bg="#F5F5F5" flex={'1'} maxHeight={'100%'} minWidth="850px">
       <Tabs
         id={'preview'}
         defaultSelectedTabId={'payment-page'}
@@ -39,28 +39,12 @@ export function InvoiceSendMailPreview() {
         <Tab
           id={'payment-page'}
           title={'Payment page'}
-          panel={
-            <Box px={4} pt={8} pb={16}>
-              <InvoiceMailReceiptPreview
-                className={css`
-                  margin: 0 auto;
-                `}
-              />
-            </Box>
-          }
+          panel={<InvoiceMailReceiptPreviewConneceted />}
         />
         <Tab
           id="pdf-document"
           title={'PDF document'}
-          panel={
-            <Box px={4} py={6}>
-              <InvoicePaperTemplate
-                className={css`
-                  margin: 0 auto;
-                `}
-              />
-            </Box>
-          }
+          panel={<InvoiceSendPdfPreviewConnected />}
         />
       </Tabs>
     </Stack>

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

@@ -0,0 +1,27 @@
+import { Box } from "@/components";
+import { InvoicePaperTemplate } from "../InvoiceCustomize/InvoicePaperTemplate";
+import { css } from "@emotion/css";
+import { useInvoiceSendMailBoot } from "./InvoiceSendMailContentBoot";
+
+export function InvoiceSendPdfPreviewConnected() {
+  const { invoice } = useInvoiceSendMailBoot();
+
+  return (
+    <Box px={4} py={6}>
+      <InvoicePaperTemplate
+        dueDate={invoice.due_date_formatted}
+        dateIssue={invoice.invoice_date_formatted}
+        invoiceNumber={invoice.invoice_no}
+        total={invoice.total_formatted}
+        subtotal={invoice.subtotal}
+        discount={''}
+        paymentMade={''}
+        balanceDue={invoice.due_amount_Formatted}
+        statement={invoice.statement}
+        className={css`
+          margin: 0 auto;
+        `}
+      />
+    </Box>
+  );
+}