feat: estimate, receipt, credit note mail preview

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

@@ -2,9 +2,9 @@ import { Group, Stack } from '@/components';
 import { Classes } from '@blueprintjs/core';
 import { InvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
 import { InvoiceSendMailForm } from './InvoiceSendMailForm';
-import { InvoiceSendMailHeader } from './InvoiceSendMailHeader';
 import { InvoiceSendMailPreview } from './InvoiceSendMailPreview';
 import { InvoiceSendMailFields } from './InvoiceSendMailFields';
+import { SendMailViewHeader } from '../../Estimates/SendMailViewDrawer/SendMailViewHeader';
 
 export function InvoiceSendMailContent() {
   return (
@@ -12,7 +12,7 @@ export function InvoiceSendMailContent() {
       <InvoiceSendMailBoot>
         <InvoiceSendMailForm>
           <Stack spacing={0} flex={1} overflow="hidden">
-            <InvoiceSendMailHeader label={'Send Invoice Mail'} />
+            <SendMailViewHeader label={'Send Invoice Mail'} />
 
             <Group flex={1} overflow="auto" spacing={0} alignItems={'stretch'}>
               <InvoiceSendMailFields />

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

@@ -8,157 +8,17 @@ import {
   FCheckbox,
   FFormGroup,
   FInputGroup,
-  FMultiSelect,
-  FSelect,
-  FTextArea,
   Group,
-  Icon,
   Stack,
 } from '@/components';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
-import { useInvoiceMailItems, useSendInvoiceFormatArgsOptions } from './_hooks';
-import { InvoiceSendMailFormValues } from './_types';
-
-// Create new account renderer.
-const createNewItemRenderer = (
-  query: string,
-  active: boolean,
-  handleClick: React.MouseEventHandler<HTMLElement>,
-) => {
-  return (
-    <MenuItem
-      icon="add"
-      text={'Now contact address'}
-      active={active}
-      onClick={handleClick}
-    />
-  );
-};
-
-// Create new item from the given query string.
-const createNewItemFromQuery = (text: string): SelectOptionProps => ({ text });
-
-const styleEmailButton = css`
-  &.bp4-button.bp4-small {
-    width: auto;
-    margin: 0;
-    min-height: 26px;
-    line-height: 26px;
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 12px;
-  }
-`;
-
-const fieldsWrapStyle = css`
-  > :not(:first-of-type) .bp4-input {
-    border-top-color: transparent;
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-  }
-  > :not(:last-of-type) .bp4-input {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
+import { useInvoiceMailItems, } from './_hooks';
+import { SendMailViewToAddressField } from '../../Estimates/SendMailViewDrawer/SendMailViewToAddressField';
+import { SendMailViewMessageField } from '../../Estimates/SendMailViewDrawer/SendMailViewMessageField';
 
 export function InvoiceSendMailFields() {
-  const [showCCField, setShowCCField] = useState<boolean>(false);
-  const [showBccField, setShowBccField] = useState<boolean>(false);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const { values, setFieldValue } =
-    useFormikContext<InvoiceSendMailFormValues>();
   const items = useInvoiceMailItems();
-  const argsOptions = useSendInvoiceFormatArgsOptions();
-
-  const handleClickCcBtn = (event: React.MouseEvent<HTMLElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    setShowCCField(true);
-  };
-
-  const handleClickBccBtn = (event: React.MouseEvent<HTMLElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    setShowBccField(true);
-  };
-
-  const handleCreateToItemSelect = (value: SelectOptionProps) => {
-    setFieldValue('to', [...values?.to, value?.text]);
-  };
-
-  const handleCreateCcItemSelect = (value: SelectOptionProps) => {
-    setFieldValue('cc', [...values?.cc, value?.text]);
-  };
-
-  const handleCreateBccItemSelect = (value: SelectOptionProps) => {
-    setFieldValue('bcc', [...values?.bcc, value?.text]);
-  };
-
-  const rightElementsToField = useMemo(
-    () => (
-      <Group
-        spacing={0}
-        paddingRight={'7px'}
-        paddingTop={'7px'}
-        fontWeight={500}
-        color={'#000'}
-      >
-        <Button
-          onClick={handleClickCcBtn}
-          minimal
-          small
-          className={styleEmailButton}
-        >
-          CC
-        </Button>
-
-        <Button
-          onClick={handleClickBccBtn}
-          minimal
-          small
-          className={styleEmailButton}
-        >
-          BCC
-        </Button>
-      </Group>
-    ),
-    [],
-  );
-
-  const handleTextareaChange = useCallback(
-    (item: SelectOptionProps) => {
-      const textarea = textareaRef.current;
-      if (!textarea) return;
-
-      const { selectionStart, selectionEnd, value: text } = textarea;
-      const insertText = `{${item.value}}`;
-      const message =
-        text.substring(0, selectionStart) +
-        insertText +
-        text.substring(selectionEnd);
-
-      setFieldValue('message', message);
-
-      // Move the cursor to the end of the inserted text
-      setTimeout(() => {
-        textarea.selectionStart = textarea.selectionEnd =
-          selectionStart + insertText.length;
-        textarea.focus();
-      }, 0);
-    },
-    [setFieldValue],
-  );
-
-  const handleTagInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    // Prevent the form from submitting when the user presses the Enter key
-    if (e.key === 'Enter') {
-      e.preventDefault();
-    }
-  };
 
   return (
     <Stack
@@ -170,130 +30,16 @@ export function InvoiceSendMailFields() {
       borderRight="1px solid #dcdcdd"
     >
       <Stack spacing={0} overflow="auto" flex="1" p={'30px'}>
-        <FFormGroup label={'To'} name={'to'}>
-          <Stack spacing={0} className={fieldsWrapStyle}>
-            <FMultiSelect
-              items={items}
-              name={'to'}
-              placeholder={'To'}
-              popoverProps={{ minimal: true, fill: true }}
-              tagInputProps={{
-                tagProps: { round: true, minimal: true, large: true },
-                rightElement: rightElementsToField,
-                large: true,
-                inputProps: {
-                  onKeyDown: handleTagInputKeyDown,
-                },
-              }}
-              createNewItemRenderer={createNewItemRenderer}
-              createNewItemFromQuery={createNewItemFromQuery}
-              onCreateItemSelect={handleCreateToItemSelect}
-              resetOnQuery
-              resetOnSelect
-              fill
-              fastField
-            />
-            {showCCField && (
-              <FMultiSelect
-                items={items}
-                name={'cc'}
-                placeholder={'Cc'}
-                popoverProps={{ minimal: true, fill: true }}
-                tagInputProps={{
-                  tagProps: { round: true, minimal: true, large: true },
-                  large: true,
-                  inputProps: {
-                    onKeyDown: handleTagInputKeyDown,
-                  },
-                }}
-                createNewItemRenderer={createNewItemRenderer}
-                createNewItemFromQuery={createNewItemFromQuery}
-                onCreateItemSelect={handleCreateCcItemSelect}
-                resetOnQuery
-                resetOnSelect
-                fill
-                fastField
-              />
-            )}
-            {showBccField && (
-              <FMultiSelect
-                items={items}
-                name={'bcc'}
-                placeholder={'Bcc'}
-                popoverProps={{ minimal: true, fill: true }}
-                tagInputProps={{
-                  tagProps: { round: true, minimal: true, large: true },
-                  large: true,
-                  inputProps: {
-                    onKeyDown: handleTagInputKeyDown,
-                  },
-                }}
-                createNewItemRenderer={createNewItemRenderer}
-                createNewItemFromQuery={createNewItemFromQuery}
-                onCreateItemSelect={handleCreateBccItemSelect}
-                resetOnQuery
-                resetOnSelect
-                fill
-                fastField
-              />
-            )}
-          </Stack>
-        </FFormGroup>
-
+        <SendMailViewToAddressField
+          toMultiSelectProps={{ items }}
+          ccMultiSelectProps={{ items }}
+          bccMultiSelectProps={{ items }}
+        />
         <FFormGroup label={'Submit'} name={'subject'}>
           <FInputGroup name={'subject'} large fastField />
         </FFormGroup>
 
-        <FFormGroup label={'Message'} name={'message'}>
-          <Stack spacing={0}>
-            <Group
-              border={'1px solid #ced4da'}
-              borderBottom={0}
-              borderRadius={'3px 3px 0 0'}
-            >
-              <FSelect
-                selectedItem={'customerName'}
-                name={'item'}
-                items={argsOptions}
-                onItemChange={handleTextareaChange}
-                popoverProps={{
-                  fill: false,
-                  position: Position.BOTTOM_LEFT,
-                  minimal: true,
-                  inputProps: {
-                    onKeyDown: handleTagInputKeyDown,
-                  },
-                }}
-                input={() => (
-                  <Button
-                    minimal
-                    rightIcon={
-                      <Icon icon={'caret-down-16'} color={'#8F99A8'} />
-                    }
-                  >
-                    Insert Variable
-                  </Button>
-                )}
-                fill={false}
-                fastField
-              />
-            </Group>
-
-            <FTextArea
-              inputRef={textareaRef}
-              name={'message'}
-              large
-              fill
-              fastField
-              className={css`
-                resize: vertical;
-                min-height: 300px;
-                border-top-right-radius: 0px;
-                border-top-left-radius: 0px;
-              `}
-            />
-          </Stack>
-        </FFormGroup>
+        <SendMailViewMessageField />
 
         <Group>
           <FCheckbox name={'attachPdf'} label={'Attach PDF'} />

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

@@ -1,50 +0,0 @@
-import { Button, Classes } from '@blueprintjs/core';
-import { x } from '@xstyled/emotion';
-import { Group, Icon } from '@/components';
-import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
-import { useDrawerActions } from '@/hooks/state';
-
-interface ElementCustomizeHeaderProps {
-  label?: string;
-  children?: React.ReactNode;
-  closeButton?: boolean;
-}
-
-export function InvoiceSendMailHeader({
-  label,
-  closeButton = true,
-}: ElementCustomizeHeaderProps) {
-  const { name } = useDrawerContext();
-  const { closeDrawer } = useDrawerActions();
-
-  const handleClose = () => {
-    closeDrawer(name);
-  };
-  return (
-    <Group
-      p={'10px'}
-      pl={'30px'}
-      bg="white"
-      alignItems={'center'}
-      boxShadow={'0 1px 0 rgba(17, 20, 24, .15)'}
-      zIndex={1}
-      style={{ position: 'relative' }}
-    >
-      {label && (
-        <x.h1 margin={0} fontSize={20} fontWeight={500} color={'#666'}>
-          {label}
-        </x.h1>
-      )}
-      {closeButton && (
-        <Button
-          aria-label="Close"
-          className={Classes.DIALOG_CLOSE_BUTTON}
-          icon={<Icon icon={'smallCross'} color={'#000'} />}
-          minimal={true}
-          onClick={handleClose}
-          style={{ marginLeft: 'auto' }}
-        />
-      )}
-    </Group>
-  );
-}

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

@@ -1,7 +1,6 @@
 import { lazy, Suspense } from 'react';
-import { css } from '@emotion/css';
-import { Tab, Tabs } from '@blueprintjs/core';
-import { Stack } from '@/components';
+import { Tab, } from '@blueprintjs/core';
+import { SendMailViewPreviewTabs } from '../../Estimates/SendMailViewDrawer/SendMailViewPreviewTabs';
 
 const InvoiceMailReceiptPreviewConnected = lazy(() =>
   import('./InvoiceMailReceiptPreviewConnected').then((module) => ({
@@ -16,55 +15,25 @@ const InvoiceSendPdfPreviewConnected = lazy(() =>
 
 export function InvoiceSendMailPreview() {
   return (
-    <Stack bg="#F5F5F5" flex={'1'} maxHeight={'100%'} minWidth="850px">
-      <Tabs
-        id={'preview'}
-        defaultSelectedTabId={'payment-page'}
-        className={css`
-          overflow: hidden;
-          flex: 1 1;
-          display: flex;
-          flex-direction: column;
-
-          .bp4-tab-list {
-            padding: 0 20px;
-            background: #fff;
-            border-bottom: 1px solid #dcdcdd;
-          }
-          .bp4-tab {
-            line-height: 40px;
-          }
-          .bp4-tab:not([aria-selected='true']) {
-            color: #5f6b7c;
-          }
-          .bp4-tab-indicator-wrapper .bp4-tab-indicator {
-            height: 2px;
-          }
-          .bp4-tab-panel {
-            margin: 0;
-            overflow: auto;
-          }
-        `}
-      >
-        <Tab
-          id={'payment-page'}
-          title={'Payment page'}
-          panel={
-            <Suspense>
-              <InvoiceMailReceiptPreviewConnected />
-            </Suspense>
-          }
-        />
-        <Tab
-          id="pdf-document"
-          title={'PDF document'}
-          panel={
-            <Suspense>
-              <InvoiceSendPdfPreviewConnected />
-            </Suspense>
-          }
-        />
-      </Tabs>
-    </Stack>
+    <SendMailViewPreviewTabs>
+      <Tab
+        id={'payment-page'}
+        title={'Payment page'}
+        panel={
+          <Suspense>
+            <InvoiceMailReceiptPreviewConnected />
+          </Suspense>
+        }
+      />
+      <Tab
+        id="pdf-document"
+        title={'PDF document'}
+        panel={
+          <Suspense>
+            <InvoiceSendPdfPreviewConnected />
+          </Suspense>
+        }
+      />
+    </SendMailViewPreviewTabs>
   );
 }

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

@@ -4,6 +4,7 @@ import { Stack } from '@/components';
 import { InvoiceSendMailPreviewWithHeader } from './InvoiceSendMailHeaderPreview';
 import { useInvoiceHtml } from '@/hooks/query';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { SendMailViewPreviewPdfIframe } from '../../Estimates/SendMailViewDrawer/SendMailViewPreviewPdfIframe';
 
 export function InvoiceSendPdfPreviewConnected() {
   return (
@@ -24,18 +25,5 @@ function InvoiceSendPdfPreviewIframe() {
   }
   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;
-      `}
-    />
-  );
+  return <SendMailViewPreviewPdfIframe srcDoc={iframeSrcDoc} />;
 }