feat: add send mail icon

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

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

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

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