From c46948049cdc4a58e0237f2c1cddb16df8bc9b66 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 26 Dec 2023 22:57:41 +0200
Subject: [PATCH] feat: add send mail icon

---
 .../EstimateDetailActionsBar.tsx              |  14 +-
 .../InvoiceDetailActionsBar.tsx               |   6 +-
 .../PaymentReceiveActionsBar.tsx              |  14 +-
 .../ReceiptDetailActionBar.tsx                |  15 +-
 .../EstimateMailDialog/EstimateMailDialog.tsx |   2 +
 .../EstimateMailDialogBoot.tsx                |   1 +
 .../EstimateMailDialogForm.tsx                |  44 +++++-
 .../EstimatesLanding/EstimatesDataTable.tsx   |   7 +
 .../Estimates/EstimatesLanding/components.tsx |   6 +
 .../InvoiceMailDialog/InvoiceMailDialog.tsx   |   1 +
 .../InvoiceMailDialogBoot.tsx                 |   1 +
 .../InvoiceMailDialogForm.tsx                 |  44 +++++-
 .../InvoicesLanding/InvoicesDataTable.tsx     |   7 +
 .../Invoices/InvoicesLanding/components.tsx   |   7 +-
 .../PaymentMailDialog/PaymentMailDialog.tsx   |   1 +
 .../PaymentMailDialogForm.tsx                 |  48 ++++++-
 .../PaymentsLanding/PaymentReceivesTable.tsx  |  15 +-
 .../PaymentsLanding/components.tsx            |  12 +-
 .../ReceiptMailDialog/ReceiptMailDialog.tsx   |   1 +
 .../ReceiptMailDialogBoot.tsx                 |   1 +
 .../ReceiptMailDialogForm.tsx                 |  43 +++++-
 .../ReceiptsLanding/ReceiptActionsBar.tsx     |   1 -
 .../ReceiptsLanding/ReceiptsTable.tsx         |   7 +
 .../Receipts/ReceiptsLanding/components.tsx   |   7 +-
 .../SendMailNotificationForm.tsx              | 134 ++++++++++++++----
 packages/webapp/src/static/json/icons.tsx     |  12 +-
 26 files changed, 369 insertions(+), 82 deletions(-)

diff --git a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
index 65821afd8..3ba5b0d02 100644
--- a/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx
@@ -84,20 +84,18 @@ function EstimateDetailActionsBar({
           <NavbarDivider />
         </Can>
         <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="envelope" />}
+            text={'Send Mail'}
+            onClick={handleMailEstimate}
+          />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="print-16" />}
             text={<T id={'print'} />}
             onClick={handlePrintEstimate}
           />
-        </Can>
-
-        <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
-          <Button
-            className={Classes.MINIMAL}
-            text={'Mail'}
-            onClick={handleMailEstimate}
-          />
           <NavbarDivider />
         </Can>
         <Can I={SaleEstimateAction.Delete} a={AbilitySubject.Estimate}>
diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx
index 36ca2bcd1..4a2482165 100644
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx
@@ -123,18 +123,18 @@ function InvoiceDetailActionsBar({
         </Can>
         <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
           <Button
-            text={'Mail'}
+            text={'Send Mail'}
+            icon={<Icon icon="envelope" />}
             onClick={handleMailInvoice}
             className={Classes.MINIMAL}
           />
-        </Can>
-        <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="print-16" />}
             text={<T id={'print'} />}
             onClick={handlePrintInvoice}
           />
+          <NavbarDivider />
         </Can>
         <Can I={SaleInvoiceAction.Delete} a={AbilitySubject.Invoice}>
           <Button
diff --git a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
index 9438444bc..6cfa62edc 100644
--- a/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
+++ b/packages/webapp/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.tsx
@@ -86,19 +86,19 @@ function PaymentReceiveActionsBar({
           <NavbarDivider />
         </Can>
         <Can I={PaymentReceiveAction.View} a={AbilitySubject.PaymentReceive}>
+          <Button
+            className={Classes.MINIMAL}
+            text={'Send Mail'}
+            icon={<Icon icon="envelope" />}
+            onClick={handleMailPaymentReceive}
+          />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="print-16" />}
             text={<T id={'print'} />}
             onClick={handlePrintPaymentReceive}
           />
-        </Can>
-        <Can I={PaymentReceiveAction.View} a={AbilitySubject.PaymentReceive}>
-          <Button
-            className={Classes.MINIMAL}
-            text={'Mail'}
-            onClick={handleMailPaymentReceive}
-          />
+          <NavbarDivider />
         </Can>
         <Can I={PaymentReceiveAction.Delete} a={AbilitySubject.PaymentReceive}>
           <Button
diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
index b6367565c..9ca00216a 100644
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.tsx
@@ -63,7 +63,7 @@ function ReceiptDetailActionBar({
   };
   const handleReceiptMail = () => {
     openDialog(DialogsName.ReceiptMail, { receiptId });
-  }
+  };
 
   return (
     <DrawerActionsBar>
@@ -78,6 +78,12 @@ function ReceiptDetailActionBar({
           <NavbarDivider />
         </Can>
         <Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
+          <Button
+            className={Classes.MINIMAL}
+            text={'Send Mail'}
+            icon={<Icon icon="envelope" />}
+            onClick={handleReceiptMail}
+          />
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="print-16" />}
@@ -85,13 +91,6 @@ function ReceiptDetailActionBar({
             onClick={safeCallback(onPrintReceipt)}
           />
         </Can>
-        <Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
-          <Button
-            className={Classes.MINIMAL}
-            text={'Mail'}
-            onClick={handleReceiptMail}
-          />
-        </Can>
         <Can I={SaleReceiptAction.Delete} a={AbilitySubject.Receipt}>
           <Button
             className={Classes.MINIMAL}
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx
index 06432de17..de6082222 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx
@@ -23,6 +23,7 @@ function EstimateMailDialog({
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}
+      style={{ width: 600 }}
     >
       <DialogSuspense>
         <EstimateMailDialogContent
@@ -33,4 +34,5 @@ function EstimateMailDialog({
     </Dialog>
   );
 }
+
 export default compose(withDialogRedux())(EstimateMailDialog);
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogBoot.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogBoot.tsx
index d47fb3c99..d68afb4c5 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogBoot.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogBoot.tsx
@@ -26,6 +26,7 @@ function EstimateMailDialogBoot({
     useSaleEstimateDefaultOptions(estimateId);
 
   const provider = {
+    saleEstimateId: estimateId,
     mailOptions,
     isMailOptionsLoading,
   };
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx
index 1e8f01801..448b604c9 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx
@@ -1,8 +1,13 @@
+// @ts-nocheck
 import { Formik } from 'formik';
+import * as R from 'ramda';
+import { castArray } from 'lodash';
 import { useEstimateMailDialogBoot } from './EstimateMailDialogBoot';
 import { transformToForm } from '@/utils';
 import { SendMailNotificationForm } from '@/containers/SendMailNotification';
-import { castArray } from 'lodash';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
+import { useSendSaleEstimateMail } from '@/hooks/query';
 
 const initialFormValues = {
   from: [],
@@ -11,8 +16,20 @@ const initialFormValues = {
   message: '',
 };
 
-export function EstimateMailDialogForm() {
-  const { mailOptions } = useEstimateMailDialogBoot();
+interface EstimateMailFormValues {
+  from: string[];
+  to: string[];
+  subject: string;
+  message: string;
+  attachEstimate: boolean;
+}
+
+function EstimateMailDialogFormRoot(
+  // #withDialogClose
+  closeDialog,
+) {
+  const { mutateAsync: sendEstimateMail } = useSendSaleEstimateMail();
+  const { mailOptions, saleEstimateId } = useEstimateMailDialogBoot();
 
   const initialValues = {
     ...initialFormValues,
@@ -20,12 +37,29 @@ export function EstimateMailDialogForm() {
     from: mailOptions.from ? castArray(mailOptions.from) : [],
     to: mailOptions.to ? castArray(mailOptions.to) : [],
   };
+  // Handle the form submitting.
+  const handleSubmit = (values: EstimateMailFormValues, { setSubmitting }) => {
+    setSubmitting(true);
+    sendEstimateMail([saleEstimateId, values])
+      .then(() => {
+        setSubmitting(false);
+      })
+      .catch((error) => {
+        setSubmitting(false);
+      });
+  };
 
-  const handleSubmit = () => {};
+  const handleClose = () => {
+    closeDialog(DialogsName.EstimateMail);
+  };
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm />
+      <SendMailNotificationForm onClose={handleClose} />
     </Formik>
   );
 }
+
+export const EstimateMailDialogForm = R.compose(withDialogActions)(
+  EstimateMailDialogFormRoot,
+);
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx
index 402771604..dec1d548c 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.tsx
@@ -22,6 +22,7 @@ import { useEstimatesListContext } from './EstimatesListProvider';
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Estimates datatable.
@@ -100,6 +101,11 @@ function EstimatesDataTable({
     openDrawer(DRAWERS.ESTIMATE_DETAILS, { estimateId: cell.row.original.id });
   };
 
+  // Handle mail send estimate.
+  const handleMailSendEstimate = ({ id }) => {
+    openDialog(DialogsName.EstimateMail, { estimateId: id });
+  }
+
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
     useMemorizedColumnsWidths(TABLES.ESTIMATES);
@@ -153,6 +159,7 @@ function EstimatesDataTable({
           onConvert: handleConvertToInvoice,
           onViewDetails: handleViewDetailEstimate,
           onPrint: handlePrintEstimate,
+          onSendMail: handleMailSendEstimate,
         }}
       />
     </DashboardContentTable>
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx
index a596a419a..5edfd9051 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/components.tsx
@@ -64,6 +64,7 @@ export function ActionsMenu({
     onConvert,
     onViewDetails,
     onPrint,
+    onSendMail
   },
 }) {
   return (
@@ -129,6 +130,11 @@ export function ActionsMenu({
         </Choose>
       </Can>
       <Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
+        <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')}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialog.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialog.tsx
index dab608e3f..63430ce10 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialog.tsx
+++ b/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
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogBoot.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogBoot.tsx
index 474019b33..ae16a0cf2 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogBoot.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogBoot.tsx
@@ -26,6 +26,7 @@ function InvoiceMailDialogBoot({
     useSaleInvoiceDefaultOptions(invoiceId);
 
   const provider = {
+    saleInvoiceId: invoiceId,
     mailOptions,
     isMailOptionsLoading,
   };
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx
index 113b15dce..fed8bee61 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx
+++ b/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,
+);
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx
index c2f5a78df..75ba9b7f6 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx
+++ b/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>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
index c5ebc3aee..2739ad9e5 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx
+++ b/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')}
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog.tsx
index 7e4e3e6ac..6da51d03e 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog.tsx
@@ -23,6 +23,7 @@ function PaymentMailDialog({
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}
+      style={{ width: 600 }}
     >
       <DialogSuspense>
         <PaymentMailDialogContent
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx
index 01f1a95ab..395aff4f2 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx
@@ -1,8 +1,13 @@
-import { Formik } from 'formik';
+// @ts-nocheck
+import { Formik, FormikBag } from 'formik';
 import { castArray } from 'lodash';
+import * as R from 'ramda';
 import { SendMailNotificationForm } from '@/containers/SendMailNotification';
 import { usePaymentMailDialogBoot } from './PaymentMailDialogBoot';
 import { transformToForm } from '@/utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
+import { useSendPaymentReceiveMail } from '@/hooks/query';
 
 const initialFormValues = {
   from: [],
@@ -10,8 +15,20 @@ const initialFormValues = {
   subject: '',
   message: '',
 };
-export function PaymentMailDialogForm() {
-  const { mailOptions } = usePaymentMailDialogBoot();
+
+interface PaymentMailFormValue {
+  from: string[];
+  to: string[];
+  subject: string;
+  message: string;
+}
+
+export function PaymentMailDialogFormRoot({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mailOptions, paymentId } = usePaymentMailDialogBoot();
+  const { mutateAsync: sendPaymentMail } = useSendPaymentReceiveMail();
 
   const initialValues = {
     ...initialFormValues,
@@ -19,11 +36,32 @@ export function PaymentMailDialogForm() {
     from: mailOptions.from ? castArray(mailOptions.from) : [],
     to: mailOptions.to ? castArray(mailOptions.to) : [],
   };
-  const handleSubmit = () => {};
+  // Handles the form submitting.
+  const handleSubmit = (
+    values: PaymentMailFormValue,
+    { setSubmitting }: FormikBag<PaymentMailFormValue>,
+  ) => {
+    setSubmitting(true);
+    sendPaymentMail([paymentId, values])
+      .then(() => {
+        setSubmitting(false);
+      })
+      .catch((error) => {
+        setSubmitting(false);
+      });
+  };
+
+  const handleClose = () => {
+    closeDialog(DialogsName.PaymentMail);
+  };
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm />
+      <SendMailNotificationForm onClose={handleClose} />
     </Formik>
   );
 }
+
+export const PaymentMailDialogForm = R.compose(withDialogActions)(
+  PaymentMailDialogFormRoot,
+);
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.tsx
index 15a8346df..82e7f7cb5 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.tsx
@@ -17,12 +17,14 @@ import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
 
 import { usePaymentReceivesColumns, ActionsMenu } from './components';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { DRAWERS } from '@/constants/drawers';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Payment receives datatable.
@@ -31,15 +33,15 @@ function PaymentReceivesDataTable({
   // #withPaymentReceivesActions
   setPaymentReceivesTableState,
 
-  // #withPaymentReceives
-  paymentReceivesTableState,
-
   // #withAlertsActions
   openAlert,
 
   // #withDrawerActions
   openDrawer,
 
+  // #withDialogActions
+  openDialog,
+
   // #withSettings
   paymentReceivesTableSize,
 }) {
@@ -73,6 +75,11 @@ function PaymentReceivesDataTable({
     openDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS, { paymentReceiveId: id });
   };
 
+  // Handle mail send payment receive.
+  const handleSendMailPayment = ({ id }) => {
+    openDialog(DialogsName.PaymentMail, { paymentReceiveId: id });
+  };
+
   // Handle cell click.
   const handleCellClick = (cell, event) => {
     openDrawer(DRAWERS.PAYMENT_RECEIVE_DETAILS, {
@@ -129,6 +136,7 @@ function PaymentReceivesDataTable({
           onDelete: handleDeletePaymentReceive,
           onEdit: handleEditPaymentReceive,
           onViewDetails: handleViewDetailPaymentReceive,
+          onSendMail: handleSendMailPayment,
         }}
       />
     </DashboardContentTable>
@@ -139,6 +147,7 @@ export default compose(
   withPaymentReceivesActions,
   withAlertsActions,
   withDrawerActions,
+  withDialogActions,
   withPaymentReceives(({ paymentReceivesTableState }) => ({
     paymentReceivesTableState,
   })),
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/components.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/components.tsx
index 4af4f14ba..fd6aec581 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentsLanding/components.tsx
@@ -15,14 +15,17 @@ import {
 import { FormatDateCell, Money, Icon, Can } from '@/components';
 import { safeCallback } from '@/utils';
 import { CLASSES } from '@/constants/classes';
-import { PaymentReceiveAction, AbilitySubject } from '@/constants/abilityOption';
+import {
+  PaymentReceiveAction,
+  AbilitySubject,
+} from '@/constants/abilityOption';
 
 /**
  * Table actions menu.
  */
 export function ActionsMenu({
   row: { original: paymentReceive },
-  payload: { onEdit, onDelete, onViewDetails },
+  payload: { onEdit, onDelete, onViewDetails, onSendMail },
 }) {
   return (
     <Menu>
@@ -31,6 +34,11 @@ export function ActionsMenu({
         text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, paymentReceive)}
       />
+      <MenuItem
+        icon={<Icon icon={'envelope'} iconSize={16} />}
+        text={'Send Mail'}
+        onClick={safeCallback(onSendMail, paymentReceive)}
+      />
       <Can I={PaymentReceiveAction.Edit} a={AbilitySubject.PaymentReceive}>
         <MenuDivider />
         <MenuItem
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog.tsx
index f78f42773..a64ad5531 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog.tsx
@@ -23,6 +23,7 @@ function ReceiptMailDialog({
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}
+      style={{ width: 600 }}
     >
       <DialogSuspense>
         <ReceiptMailDialogContent
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogBoot.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogBoot.tsx
index 93522e03c..09eeb55f1 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogBoot.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogBoot.tsx
@@ -27,6 +27,7 @@ function ReceiptMailDialogBoot({
     useSaleReceiptDefaultOptions(receiptId);
 
   const provider = {
+    saleReceiptId: receiptId,
     mailOptions,
     isMailOptionsLoading,
   };
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx
index eb4488244..76b8cef7b 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx
@@ -1,8 +1,13 @@
-import { Formik } from 'formik';
+// @ts-nocheck
+import { Formik, FormikBag } from 'formik';
 import { castArray } from 'lodash';
+import * as R from 'ramda';
 import { SendMailNotificationForm } from '@/containers/SendMailNotification';
 import { useReceiptMailDialogBoot } from './ReceiptMailDialogBoot';
 import { transformToForm } from '@/utils';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
+import { useSendSaleReceiptMail } from '@/hooks/query';
 
 const initialFormValues = {
   from: [],
@@ -10,8 +15,16 @@ const initialFormValues = {
   subject: '',
   message: '',
 };
-export function ReceiptMailDialogForm() {
-  const { mailOptions } = useReceiptMailDialogBoot();
+interface ReceiptMailFormValues {
+  from: string[];
+  to: string[];
+  subject: string;
+  message: string;
+}
+
+function ReceiptMailDialogFormRoot({ closeDialog }) {
+  const { mailOptions, saleReceiptId } = useReceiptMailDialogBoot();
+  const { mutateAsync: sendReceiptMail } = useSendSaleReceiptMail();
 
   const initialValues = {
     ...initialFormValues,
@@ -19,11 +32,31 @@ export function ReceiptMailDialogForm() {
     from: mailOptions.from ? castArray(mailOptions.from) : [],
     to: mailOptions.to ? castArray(mailOptions.to) : [],
   };
-  const handleSubmit = () => {};
+  const handleSubmit = (
+    values: ReceiptMailFormValues,
+    { setSubmitting }: FormikBag<ReceiptMailFormValues>,
+  ) => {
+    setSubmitting(true);
+    sendReceiptMail([saleReceiptId, values])
+      .then(() => {
+        setSubmitting(false);
+      })
+      .catch((error) => {
+        setSubmitting(false);
+      });
+  };
+
+  const handleClose = () => {
+    closeDialog(DialogsName.ReceiptMail);
+  };
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm />
+      <SendMailNotificationForm onClose={handleClose} />
     </Formik>
   );
 }
+
+export const ReceiptMailDialogForm = R.compose(withDialogActions)(
+  ReceiptMailDialogFormRoot,
+);
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx
index 828ff5a70..7517cf104 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx
@@ -140,7 +140,6 @@ function ReceiptActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
-
         <NavbarDivider />
         <DashboardRowsHeightButton
           initialValue={receiptsTableSize}
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.tsx
index 4b50f624e..e6f81b386 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.tsx
@@ -24,6 +24,7 @@ import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useReceiptsTableColumns, ActionsMenu } from './components';
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { DRAWERS } from '@/constants/drawers';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Sale receipts datatable.
@@ -86,6 +87,11 @@ function ReceiptsDataTable({
     openDialog('receipt-pdf-preview', { receiptId: id });
   };
 
+  // Handle send mail receipt.
+  const handleSendMailReceipt = ({ id }) => {
+    openDialog(DialogsName.ReceiptMail, { receiptId: id });
+  };
+
   // Local storage memorizing columns widths.
   const [initialColumnsWidths, , handleColumnResizing] =
     useMemorizedColumnsWidths(TABLES.RECEIPTS);
@@ -141,6 +147,7 @@ function ReceiptsDataTable({
           onClose: handleCloseReceipt,
           onViewDetails: handleViewDetailReceipt,
           onPrint: handlePrintInvoice,
+          onSendMail: handleSendMailReceipt,
         }}
       />
     </DashboardContentTable>
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
index 4d843937e..e76b2d9c6 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/components.tsx
@@ -24,7 +24,7 @@ import { SaleReceiptAction, AbilitySubject } from '@/constants/abilityOption';
  * @returns {React.JSX}
  */
 export function ActionsMenu({
-  payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
+  payload: { onEdit, onDelete, onClose, onSendMail, onViewDetails, onPrint },
   row: { original: receipt },
 }) {
   return (
@@ -51,6 +51,11 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={SaleReceiptAction.View} a={AbilitySubject.Receipt}>
+        <MenuItem
+          icon={<Icon icon={'envelope'} iconSize={16} />}
+          text={'Send Mail'}
+          onClick={safeCallback(onSendMail, receipt)}
+        />
         <MenuItem
           icon={<Icon icon={'print-16'} iconSize={16} />}
           text={intl.get('print')}
diff --git a/packages/webapp/src/containers/SendMailNotification/SendMailNotificationForm.tsx b/packages/webapp/src/containers/SendMailNotification/SendMailNotificationForm.tsx
index 00d4b0faf..a23b108af 100644
--- a/packages/webapp/src/containers/SendMailNotification/SendMailNotificationForm.tsx
+++ b/packages/webapp/src/containers/SendMailNotification/SendMailNotificationForm.tsx
@@ -1,36 +1,118 @@
 // @ts-nocheck
-import { Form } from 'formik';
+import { Form, useFormikContext } from 'formik';
 import { FFormGroup, FInputGroup, FMultiSelect } from '@/components';
+import styled from 'styled-components';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import { saveInvoke } from '@/utils';
+
+interface SendMailNotificationFormProps {
+  onClose?: () => void;
+}
+
+export function SendMailNotificationForm({
+  onClose,
+}: SendMailNotificationFormProps) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    saveInvoke(onClose);
+  };
 
-export function SendMailNotificationForm() {
   return (
     <Form>
-      <FFormGroup label={'From'} name={'from'} inline={true} fastField={true}>
-        <FMultiSelect
-          items={[]}
-          name={'from'}
-          placeholder=""
-          popoverProps={{ minimal: true }}
-        />
-      </FFormGroup>
+      <div className={Classes.DIALOG_BODY}>
+        <HeaderBox>
+          <FFormGroup
+            label={'From'}
+            name={'from'}
+            inline={true}
+            fastField={true}
+          >
+            <FMultiSelect
+              items={[]}
+              name={'from'}
+              placeholder=""
+              popoverProps={{ minimal: true, fill: true }}
+              fill={true}
+            />
+          </FFormGroup>
 
-      <FFormGroup label={'To'} name={'to'} inline={true} fastField={true}>
-        <FMultiSelect
-          items={[]}
-          name={'to'}
-          placeholder=""
-          popoverProps={{ minimal: true }}
-        />
-      </FFormGroup>
+          <FFormGroup label={'To'} name={'to'} inline={true} fastField={true}>
+            <FMultiSelect
+              items={[]}
+              name={'to'}
+              placeholder=""
+              popoverProps={{ minimal: true, fill: true }}
+              fill={true}
+            />
+          </FFormGroup>
 
-      <FFormGroup
-        label={'Subject'}
-        name={'subject'}
-        inline={true}
-        fastField={true}
-      >
-        <FInputGroup name={'subject'} />
-      </FFormGroup>
+          <FFormGroup
+            label={'Subject'}
+            name={'subject'}
+            inline={true}
+            fastField={true}
+          >
+            <FInputGroup name={'subject'} fill={true} />
+          </FFormGroup>
+        </HeaderBox>
+      </div>
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button
+            disabled={isSubmitting}
+            onClick={handleClose}
+            style={{ minWidth: '65px' }}
+          >
+            Close
+          </Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            loading={isSubmitting}
+            style={{ minWidth: '75px' }}
+            type="submit"
+          >
+            Send
+          </Button>
+        </div>
+      </div>
     </Form>
   );
 }
+
+const HeaderBox = styled('div')`
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  border: 1px solid #dddfe9;
+  padding: 15px;
+
+  .bp4-form-group {
+    margin: 0;
+    padding-top: 12px;
+    padding-bottom: 12px;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid #dddfe9;
+    }
+    &:first-of-type {
+      padding-top: 0;
+    }
+    &:last-of-type {
+      padding-bottom: 0;
+    }
+  }
+
+  .bp4-form-content {
+    flex: 1 0;
+  }
+
+  .bp4-label {
+    min-width: 65px;
+    color: #738091;
+  }
+
+  .bp4-input {
+  }
+`;
diff --git a/packages/webapp/src/static/json/icons.tsx b/packages/webapp/src/static/json/icons.tsx
index b13e9ffa5..e60213bb8 100644
--- a/packages/webapp/src/static/json/icons.tsx
+++ b/packages/webapp/src/static/json/icons.tsx
@@ -561,8 +561,14 @@ export default {
   },
   'content-copy': {
     path: [
-      'M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z'
+      'M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z',
     ],
-    viewBox: '0 0 16 16'
-  }
+    viewBox: '0 0 16 16',
+  },
+  envelope: {
+    path: [
+      'M0 4.01v11.91l6.27-6.27L0 4.01zm18.91-1.03H1.09L10 10.97l8.91-7.99zm-5.18 6.66L20 15.92V4.01l-6.27 5.63zm-3.23 2.9c-.13.12-.31.19-.5.19s-.37-.07-.5-.19l-2.11-1.89-6.33 6.33h17.88l-6.33-6.33-2.11 1.89z',
+    ],
+    viewBox: '0 0 20 20',
+  },
 };