feat: wip send invoice mail receipt

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx

@@ -19,7 +19,12 @@ function CreditNoteCustomizeDrawerRoot({
   payload,
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} payload={payload} size={'100%'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      payload={payload}
+      size={'calc(100% - 10px)'}
+    >
       <DrawerSuspense>
         <CreditNoteCustomizeDrawerBody />
       </DrawerSuspense>

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx

@@ -20,7 +20,12 @@ function EstimateCustomizeDrawerRoot({
   payload,
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} payload={payload} size={'100%'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      payload={payload}
+      size={'calc(100% - 10px)'}
+    >
       <DrawerSuspense>
         <EstimateCustomizeDrawerBody />
       </DrawerSuspense>

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer.tsx

@@ -17,7 +17,12 @@ function InvoiceCustomizeDrawerRoot({
   payload,
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'100%'} payload={payload}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      payload={payload}
+      size={'calc(100% - 10px)'}
+    >
       <DrawerSuspense>
         <InvoiceCustomize />
       </DrawerSuspense>

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeMailReceiptPreview.tsx

@@ -1,8 +1,8 @@
 import * as R from 'ramda';
+import { useFormikContext } from 'formik';
 import { InvoicePaymentPagePreviewProps } from '@/containers/PaymentPortal/InvoicePaymentPagePreview';
 import { InvoiceCustomizeFormValues } from './types';
 import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
-import { useFormikContext } from 'formik';
 import { InvoiceMailReceiptPreview } from './InvoiceMailReceiptPreview';
 import { Box } from '@/components';
 

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

@@ -23,7 +23,12 @@ function InvoiceSendMailDrawerRoot({
   payload,
 }: InvoiceSendMailDrawerProps) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'100%'} payload={payload}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      payload={payload}
+      size={'calc(100% - 10px)'}
+    >
       <DrawerSuspense>
         <InvoiceSendMailContent />
       </DrawerSuspense>

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

@@ -1,11 +1,11 @@
 // @ts-nocheck
-import { useRef, useState } from 'react';
 import { Button, Intent, MenuItem, Position } from '@blueprintjs/core';
+import { useRef, useState, useMemo, useCallback } from 'react';
 import { useFormikContext } from 'formik';
+import { SelectOptionProps } from '@blueprintjs-formik/select';
 import { css } from '@emotion/css';
-import { x } from '@xstyled/emotion';
-import { unique, chain } from 'lodash';
 import {
+  FCheckbox,
   FFormGroup,
   FInputGroup,
   FMultiSelect,
@@ -17,7 +17,6 @@ import {
 } from '@/components';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
-import { SelectOptionProps } from '@blueprintjs-formik/select';
 import { useInvoiceMailItems } from './_hooks';
 
 // Create new account renderer.
@@ -62,7 +61,7 @@ const fieldsWrapStyle = css`
 export function InvoiceSendMailFields() {
   const [showCCField, setShowCCField] = useState<boolean>(false);
   const [showBccField, setShowBccField] = useState<boolean>(false);
-  const textareaRef = useRef(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const { values, setFieldValue } = useFormikContext();
   const items = useInvoiceMailItems();
@@ -92,7 +91,7 @@ export function InvoiceSendMailFields() {
     setFieldValue('bcc', [...values?.bcc, value?.name]);
   };
 
-  const rightElementsToField = (
+  const rightElementsToField = useMemo(() => (
     <Group
       spacing={0}
       paddingRight={'7px'}
@@ -118,16 +117,14 @@ export function InvoiceSendMailFields() {
         BCC
       </Button>
     </Group>
-  );
+  ), []);
 
-  const handleTextareaChange = () => {
+  const handleTextareaChange = useCallback((item: SelectOptionProps) => {
     const textarea = textareaRef.current;
     if (!textarea) return;
 
-    const { selectionStart, selectionEnd } = textarea;
-    const insertText = '{Variable}';
-
-    // Insert the text at the cursor position
+    const { selectionStart, selectionEnd, value: text } = textarea;
+    const insertText = item.value;
     const message =
       text.substring(0, selectionStart) +
       insertText +
@@ -139,10 +136,9 @@ export function InvoiceSendMailFields() {
     setTimeout(() => {
       textarea.selectionStart = textarea.selectionEnd =
         selectionStart + insertText.length;
-
       textarea.focus();
     }, 0);
-  };
+  }, [setFieldValue]);
 
   return (
     <Stack
@@ -228,7 +224,7 @@ export function InvoiceSendMailFields() {
               <FSelect
                 selectedItem={'customerName'}
                 name={'item'}
-                items={[{ value: 'customerName', text: 'Customer Name' }]}
+                items={[{ value: 'CustomerName', text: 'Customer Name' }]}
                 onItemChange={handleTextareaChange}
                 popoverProps={{
                   fill: false,
@@ -251,20 +247,24 @@ export function InvoiceSendMailFields() {
             </Group>
 
             <FTextArea
-              ref={textareaRef}
+              inputRef={textareaRef}
               name={'message'}
               large
               fill
               fastField
               className={css`
                 resize: vertical;
-                min-height: 200px;
+                min-height: 300px;
                 border-top-right-radius: 0px;
                 border-top-left-radius: 0px;
               `}
             />
           </Stack>
         </FFormGroup>
+
+        <Group>
+          <FCheckbox name={'attachPdf'} label={'Attach PDF'} />
+        </Group>
       </Stack>
 
       <InvoiceSendMailFooter />

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

@@ -10,12 +10,13 @@ import { useDrawerActions } from '@/hooks/state';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { transformToForm } from '@/utils';
 
-const initialValues = {
+const initialValues: InvoiceSendMailFormValues = {
   subject: '',
   message: '',
   to: [],
   cc: [],
   bcc: [],
+  attachPdf: true,
 };
 
 interface InvoiceSendMailFormProps {
@@ -28,7 +29,7 @@ export function InvoiceSendMailForm({ children }: InvoiceSendMailFormProps) {
   const { name } = useDrawerContext();
   const { closeDrawer } = useDrawerActions();
 
-  const _initialValues = {
+  const _initialValues: InvoiceSendMailFormValues = {
     ...initialValues,
     ...transformToForm(invoiceMailOptions, initialValues),
   };

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

@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import { x } from '@xstyled/emotion';
 import { Box, Group, Stack } from '@/components';
 import React from 'react';
@@ -27,17 +26,15 @@ export function InvoiceSendMailHeaderPreview() {
         <Group display="flex" alignItems="center" gap={15}>
           <x.abbr
             role="presentation"
-            className={css`
-              background-color: #daa3e4;
-              color: #3f1946;
-              fill: #daa3e4;
-              height: 40px;
-              width: 40px;
-              line-height: 40px;
-              text-align: center;
-              border-radius: 40px;
-              font-size: 14px;
-            `}
+            w={'40px'}
+            h={'40px'}
+            bg={'#daa3e4'}
+            fill={'#daa3e4'}
+            color={'#3f1946'}
+            lineHeight={'40px'}
+            textAlign={'center'}
+            borderRadius={'40px'}
+            fontSize={'14px'}
           >
             A
           </x.abbr>

packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/_types.ts

@@ -4,4 +4,5 @@ export interface InvoiceSendMailFormValues {
   to: string[];
   cc: string[];
   bcc: string[];
+  attachPdf: boolean;
 }

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawer.tsx

@@ -19,7 +19,12 @@ function ReceiptCustomizeDrawerRoot({
   payload,
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'100%'} payload={payload}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      payload={payload}
+      size={'calc(100% - 10px)'}
+    >
       <DrawerSuspense>
         <ReceiptCustomizeDrawerBody />
       </DrawerSuspense>

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

@@ -320,7 +320,7 @@ export function useInvoicePaymentTransactions(invoiceId, props) {
   );
 }
 
-interface SendSaleInvoiceMailValues {
+export interface SendSaleInvoiceMailValues {
   id: number;
   values: {
     subject: string;
@@ -331,7 +331,7 @@ interface SendSaleInvoiceMailValues {
     attachInvoice?: boolean;
   };
 }
-interface SendSaleInvoiceMailResponse {}
+export interface SendSaleInvoiceMailResponse { }
 /**
  * Sends the sale invoice mail.
  * @param {UseMutationOptions<SendSaleInvoiceMailValues, Error, SendSaleInvoiceMailResponse>}