feat: add send mail icon

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

@@ -23,6 +23,7 @@ function InvoiceMailDialog({
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}
+      style={{ width: 600 }}
     >
       <DialogSuspense>
         <InvoiceMailDialogContent

packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogBoot.tsx

@@ -26,6 +26,7 @@ function InvoiceMailDialogBoot({
     useSaleInvoiceDefaultOptions(invoiceId);
 
   const provider = {
+    saleInvoiceId: invoiceId,
     mailOptions,
     isMailOptionsLoading,
   };

packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx

@@ -1,8 +1,13 @@
+// @ts-nocheck
 import { Formik } from 'formik';
 import { castArray } from 'lodash';
+import * as R from 'ramda';
 import { SendMailNotificationForm } from '@/containers/SendMailNotification';
 import { useInvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
 import { transformToForm } from '@/utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
+import { useSendSaleInvoiceMail } from '@/hooks/query';
 
 const initialFormValues = {
   from: [],
@@ -10,8 +15,21 @@ const initialFormValues = {
   subject: '',
   message: '',
 };
-export function InvoiceMailDialogForm() {
-  const { mailOptions } = useInvoiceMailDialogBoot();
+
+interface InvoiceMailFormValues {
+  from: string[];
+  to: string[];
+  subject: string;
+  message: string;
+  attachInvoice: boolean;
+}
+
+function InvoiceMailDialogFormRoot({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mailOptions, saleInvoiceId } = useInvoiceMailDialogBoot();
+  const { mutateAsync: sendInvoiceMail } = useSendSaleInvoiceMail();
 
   const initialValues = {
     ...initialFormValues,
@@ -19,11 +37,29 @@ export function InvoiceMailDialogForm() {
     from: mailOptions.from ? castArray(mailOptions.from) : [],
     to: mailOptions.to ? castArray(mailOptions.to) : [],
   };
-  const handleSubmit = () => {};
+  // Handle the form submitting.
+  const handleSubmit = (values: InvoiceMailFormValues, { setSubmitting }) => {
+    setSubmitting(true);
+    sendInvoiceMail([saleInvoiceId, values])
+      .then(() => {
+        setSubmitting(false);
+      })
+      .catch(() => {
+        setSubmitting(false);
+      });
+  };
+  // Handle the close button click.
+  const handleClose = () => {
+    closeDialog(DialogsName.InvoiceMail);
+  };
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm />
+      <SendMailNotificationForm onClose={handleClose} />
     </Formik>
   );
 }
+
+export const InvoiceMailDialogForm = R.compose(withDialogActions)(
+  InvoiceMailDialogFormRoot,
+);

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx

@@ -26,6 +26,7 @@ import { useInvoicesListContext } from './InvoicesListProvider';
 
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Invoices datatable.
@@ -98,6 +99,11 @@ function InvoicesDataTable({
     openDialog('invoice-pdf-preview', { invoiceId: id });
   };
 
+  // Handle send mail invoice.
+  const handleSendMailInvoice = ({ id }) => {
+    openDialog(DialogsName.InvoiceMail, { invoiceId: id });
+  };
+
   // Handle cell click.
   const handleCellClick = (cell, event) => {
     openDrawer(DRAWERS.INVOICE_DETAILS, { invoiceId: cell.row.original.id });
@@ -157,6 +163,7 @@ function InvoicesDataTable({
           onViewDetails: handleViewDetailInvoice,
           onPrint: handlePrintInvoice,
           onConvert: handleConvertToCreitNote,
+          onSendMail: handleSendMailInvoice
         }}
       />
     </DashboardContentTable>

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx

@@ -128,6 +128,7 @@ export function ActionsMenu({
     onQuick,
     onViewDetails,
     onPrint,
+    onSendMail
   },
   row: { original },
 }) {
@@ -150,7 +151,6 @@ export function ActionsMenu({
           text={intl.get('invoice.convert_to_credit_note')}
           onClick={safeCallback(onConvert, original)}
         />
-
         <If condition={!original.is_delivered}>
           <MenuItem
             icon={<Icon icon="send" iconSize={16} />}
@@ -169,6 +169,11 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
+        <MenuItem
+          icon={<Icon icon={'envelope'} iconSize={16} />}
+          text={'Send Mail'}
+          onClick={safeCallback(onSendMail, original)}
+        />
         <MenuItem
           icon={<Icon icon={'print-16'} iconSize={16} />}
           text={intl.get('print')}