feat: add send mail icon

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

packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogBoot.tsx

@@ -27,6 +27,7 @@ function ReceiptMailDialogBoot({
     useSaleReceiptDefaultOptions(receiptId);
 
   const provider = {
+    saleReceiptId: receiptId,
     mailOptions,
     isMailOptionsLoading,
   };

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,
+);

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}

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>

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')}