feat(webapp): the mail notifications dialogs

packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx

@@ -1,27 +1,26 @@
 // @ts-nocheck
 import { Formik } from 'formik';
 import * as R from 'ramda';
-import { castArray } from 'lodash';
 import { useEstimateMailDialogBoot } from './EstimateMailDialogBoot';
-import { transformToForm } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { useSendSaleEstimateMail } from '@/hooks/query';
 import { EstimateMailDialogFormContent } from './EstimateMailDialogFormContent';
+import {
+  initialMailNotificationValues,
+  MailNotificationFormValues,
+  transformMailFormToInitialValues,
+  transformMailFormToRequest,
+} from '@/containers/SendMailNotification/utils';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from '@/components';
 
 const initialFormValues = {
-  from: [],
-  to: [],
-  subject: '',
-  body: '',
+  ...initialMailNotificationValues,
   attachEstimate: true,
 };
 
-interface EstimateMailFormValues {
-  from: string[];
-  to: string[];
-  subject: string;
-  body: string;
+interface EstimateMailFormValues extends MailNotificationFormValues {
   attachEstimate: boolean;
 }
 
@@ -32,21 +31,31 @@ function EstimateMailDialogFormRoot({
   const { mutateAsync: sendEstimateMail } = useSendSaleEstimateMail();
   const { mailOptions, saleEstimateId } = useEstimateMailDialogBoot();
 
-  const initialValues = {
-    ...initialFormValues,
-    ...transformToForm(mailOptions, initialFormValues),
-    from: mailOptions.from ? castArray(mailOptions.from) : [],
-    to: mailOptions.to ? castArray(mailOptions.to) : [],
-  };
+  const initialValues = transformMailFormToInitialValues(
+    mailOptions,
+    initialFormValues,
+  );
   // Handle the form submitting.
   const handleSubmit = (values: EstimateMailFormValues, { setSubmitting }) => {
+    const reqValues = transformMailFormToRequest(values);
+
     setSubmitting(true);
-    sendEstimateMail([saleEstimateId, values])
+    sendEstimateMail([saleEstimateId, reqValues])
       .then(() => {
+        AppToaster.show({
+          message: 'The mail notification has been sent successfully.',
+          intent: Intent.SUCCESS,
+        });
+        closeDialog(DialogsName.EstimateMail);
         setSubmitting(false);
       })
       .catch((error) => {
         setSubmitting(false);
+        closeDialog(DialogsName.EstimateMail);
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
       });
   };
 

packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogFormContent.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { FFormGroup, FSwitch } from '@/components';
 import { MailNotificationForm } from '@/containers/SendMailNotification';
 import { saveInvoke } from '@/utils';
+import { useEstimateMailDialogBoot } from './EstimateMailDialogBoot';
 
 interface EstimateMailDialogFormContentProps {
   onClose?: () => void;
@@ -14,6 +15,7 @@ export function EstimateMailDialogFormContent({
   onClose,
 }: EstimateMailDialogFormContentProps) {
   const { isSubmitting } = useFormikContext();
+  const { mailOptions } = useEstimateMailDialogBoot();
 
   const handleClose = () => {
     saveInvoke(onClose);
@@ -22,8 +24,10 @@ export function EstimateMailDialogFormContent({
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
-        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
-
+        <MailNotificationForm
+          fromAddresses={mailOptions.from_addresses}
+          toAddresses={mailOptions.to_addresses}
+        />
         <AttachFormGroup name={'attachEstimate'} inline>
           <FSwitch name={'attachEstimate'} label={'Attach Estimate'} />
         </AttachFormGroup>

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

@@ -1,28 +1,27 @@
 // @ts-nocheck
 import { Formik } from 'formik';
-import { castArray } from 'lodash';
 import * as R from 'ramda';
+import { Intent } from '@blueprintjs/core';
 import { useInvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
-import { transformToForm } from '@/utils';
 import { DialogsName } from '@/constants/dialogs';
+import { AppToaster } from '@/components';
 import { useSendSaleInvoiceMail } from '@/hooks/query';
-import { InvoiceMailDialogFormContent } from './InvoiceMailDialogFormContent';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { InvoiceMailDialogFormContent } from './InvoiceMailDialogFormContent';
 import { InvoiceMailFormSchema } from './InvoiceMailDialogForm.schema';
+import {
+  MailNotificationFormValues,
+  initialMailNotificationValues,
+  transformMailFormToRequest,
+  transformMailFormToInitialValues,
+} from '@/containers/SendMailNotification/utils';
 
 const initialFormValues = {
-  from: [],
-  to: [],
-  subject: '',
-  body: '',
+  ...initialMailNotificationValues,
   attachInvoice: true,
 };
 
-interface InvoiceMailFormValues {
-  from: string[];
-  to: string[];
-  subject: string;
-  body: string;
+interface InvoiceMailFormValues extends MailNotificationFormValues {
   attachInvoice: boolean;
 }
 
@@ -33,20 +32,29 @@ function InvoiceMailDialogFormRoot({
   const { mailOptions, saleInvoiceId } = useInvoiceMailDialogBoot();
   const { mutateAsync: sendInvoiceMail } = useSendSaleInvoiceMail();
 
-  const initialValues = {
-    ...initialFormValues,
-    ...transformToForm(mailOptions, initialFormValues),
-    from: mailOptions.from ? castArray(mailOptions.from) : [],
-    to: mailOptions.to ? castArray(mailOptions.to) : [],
-  };
+  const initialValues = transformMailFormToInitialValues(
+    mailOptions,
+    initialFormValues,
+  );
   // Handle the form submitting.
   const handleSubmit = (values: InvoiceMailFormValues, { setSubmitting }) => {
+    const reqValues = transformMailFormToRequest(values);
+
     setSubmitting(true);
-    sendInvoiceMail([saleInvoiceId, values])
+    sendInvoiceMail([saleInvoiceId, reqValues])
       .then(() => {
+        AppToaster.show({
+          message: 'The mail notification has been sent successfully.',
+          intent: Intent.SUCCESS,
+        });
+        closeDialog(DialogsName.InvoiceMail);
         setSubmitting(false);
       })
       .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
         setSubmitting(false);
       });
   };

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

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { FFormGroup, FSwitch } from '@/components';
 import { MailNotificationForm } from '@/containers/SendMailNotification';
 import { saveInvoke } from '@/utils';
+import { useInvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
 
 interface SendMailNotificationFormProps {
   onClose?: () => void;
@@ -14,6 +15,7 @@ export function InvoiceMailDialogFormContent({
   onClose,
 }: SendMailNotificationFormProps) {
   const { isSubmitting } = useFormikContext();
+  const { mailOptions } = useInvoiceMailDialogBoot();
 
   const handleClose = () => {
     saveInvoke(onClose);
@@ -22,8 +24,10 @@ export function InvoiceMailDialogFormContent({
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
-        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
-
+        <MailNotificationForm
+          fromAddresses={mailOptions.from_addresses}
+          toAddresses={mailOptions.to_addresses}
+        />
         <AttachFormGroup name={'attachInvoice'} inline>
           <FSwitch name={'attachInvoice'} label={'Attach Invoice'} />
         </AttachFormGroup>

packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx

@@ -1,27 +1,26 @@
 // @ts-nocheck
 import { Formik, FormikBag } from 'formik';
-import { castArray } from 'lodash';
 import * as R from 'ramda';
+import { Intent } from '@blueprintjs/core';
 import { usePaymentMailDialogBoot } from './PaymentMailDialogBoot';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 import { useSendPaymentReceiveMail } from '@/hooks/query';
 import { PaymentMailDialogFormContent } from './PaymentMailDialogFormContent';
-import { transformToForm } from '@/utils';
+import {
+  MailNotificationFormValues,
+  initialMailNotificationValues,
+  transformMailFormToRequest,
+  transformMailFormToInitialValues,
+} from '@/containers/SendMailNotification/utils';
+import { AppToaster } from '@/components';
 
 const initialFormValues = {
-  from: [],
-  to: [],
-  subject: '',
-  body: '',
+  ...initialMailNotificationValues,
   attachPayment: true,
 };
 
-interface PaymentMailFormValue {
-  from: string[];
-  to: string[];
-  subject: string;
-  body: string;
+interface PaymentMailFormValue extends MailNotificationFormValues {
   attachPayment: boolean;
 }
 
@@ -32,24 +31,34 @@ export function PaymentMailDialogFormRoot({
   const { mailOptions, paymentId } = usePaymentMailDialogBoot();
   const { mutateAsync: sendPaymentMail } = useSendPaymentReceiveMail();
 
-  const initialValues = {
-    ...initialFormValues,
-    ...transformToForm(mailOptions, initialFormValues),
-    from: mailOptions.from ? castArray(mailOptions.from) : [],
-    to: mailOptions.to ? castArray(mailOptions.to) : [],
-  };
+  const initialValues = transformMailFormToInitialValues(
+    mailOptions,
+    initialFormValues,
+  );
   // Handles the form submitting.
   const handleSubmit = (
     values: PaymentMailFormValue,
     { setSubmitting }: FormikBag<PaymentMailFormValue>,
   ) => {
+    const reqValues = transformMailFormToRequest(values);
+
     setSubmitting(true);
-    sendPaymentMail([paymentId, values])
+    sendPaymentMail([paymentId, reqValues])
       .then(() => {
+        AppToaster.show({
+          message: 'The mail notification has been sent successfully.',
+          intent: Intent.SUCCESS,
+        });
         setSubmitting(false);
+        closeDialog(DialogsName.PaymentMail);
       })
-      .catch((error) => {
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
         setSubmitting(false);
+        closeDialog(DialogsName.PaymentMail);
       });
   };
 

packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogFormContent.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { FFormGroup, FSwitch } from '@/components';
 import { MailNotificationForm } from '@/containers/SendMailNotification';
 import { saveInvoke } from '@/utils';
+import { usePaymentMailDialogBoot } from './PaymentMailDialogBoot';
 
 interface PaymentMailDialogFormContentProps {
   onClose?: () => void;
@@ -13,6 +14,7 @@ interface PaymentMailDialogFormContentProps {
 export function PaymentMailDialogFormContent({
   onClose,
 }: PaymentMailDialogFormContentProps) {
+  const { mailOptions } = usePaymentMailDialogBoot();
   const { isSubmitting } = useFormikContext();
 
   const handleClose = () => {
@@ -22,8 +24,10 @@ export function PaymentMailDialogFormContent({
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
-        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
-
+        <MailNotificationForm
+          fromAddresses={mailOptions.from_addresses}
+          toAddresses={mailOptions.to_addresses}
+        />
         <AttachFormGroup name={'attachPayment'} inline>
           <FSwitch name={'attachPayment'} label={'Attach Payment'} />
         </AttachFormGroup>

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

@@ -1,26 +1,25 @@
 // @ts-nocheck
 import { Formik, FormikBag } from 'formik';
-import { castArray } from 'lodash';
 import * as R from 'ramda';
+import { Intent } from '@blueprintjs/core';
 import { useReceiptMailDialogBoot } from './ReceiptMailDialogBoot';
-import { transformToForm } from '@/utils';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 import { useSendSaleReceiptMail } from '@/hooks/query';
 import { ReceiptMailDialogFormContent } from './ReceiptMailDialogFormContent';
+import {
+  initialMailNotificationValues,
+  MailNotificationFormValues,
+  transformMailFormToInitialValues,
+  transformMailFormToRequest,
+} from '@/containers/SendMailNotification/utils';
+import { AppToaster } from '@/components';
 
 const initialFormValues = {
-  from: [],
-  to: [],
-  subject: '',
-  body: '',
+  ...initialMailNotificationValues,
   attachReceipt: true,
 };
-interface ReceiptMailFormValues {
-  from: string[];
-  to: string[];
-  subject: string;
-  body: string;
+interface ReceiptMailFormValues extends MailNotificationFormValues {
   attachReceipt: boolean;
 }
 
@@ -28,26 +27,37 @@ function ReceiptMailDialogFormRoot({ closeDialog }) {
   const { mailOptions, saleReceiptId } = useReceiptMailDialogBoot();
   const { mutateAsync: sendReceiptMail } = useSendSaleReceiptMail();
 
-  const initialValues = {
-    ...initialFormValues,
-    ...transformToForm(mailOptions, initialFormValues),
-    from: mailOptions.from ? castArray(mailOptions.from) : [],
-    to: mailOptions.to ? castArray(mailOptions.to) : [],
-  };
+  // Transformes mail options to initial form values.
+  const initialValues = transformMailFormToInitialValues(
+    mailOptions,
+    initialFormValues,
+  );
+  // Handle the form submitting.
   const handleSubmit = (
     values: ReceiptMailFormValues,
     { setSubmitting }: FormikBag<ReceiptMailFormValues>,
   ) => {
+    const reqValues = transformMailFormToRequest(values);
+
     setSubmitting(true);
-    sendReceiptMail([saleReceiptId, values])
+    sendReceiptMail([saleReceiptId, reqValues])
       .then(() => {
+        AppToaster.show({
+          message: 'The mail notification has been sent successfully.',
+          intent: Intent.SUCCESS,
+        });
+        closeDialog(DialogsName.ReceiptMail);
         setSubmitting(false);
       })
-      .catch((error) => {
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.DANGER,
+        });
         setSubmitting(false);
       });
   };
-
+  // Handle the close button click.
   const handleClose = () => {
     closeDialog(DialogsName.ReceiptMail);
   };

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

@@ -4,6 +4,7 @@ import { Button, Classes, Intent } from '@blueprintjs/core';
 import styled from 'styled-components';
 import { FFormGroup, FSwitch } from '@/components';
 import { MailNotificationForm } from '@/containers/SendMailNotification';
+import { useReceiptMailDialogBoot } from './ReceiptMailDialogBoot';
 import { saveInvoke } from '@/utils';
 
 interface SendMailNotificationFormProps {
@@ -13,6 +14,7 @@ interface SendMailNotificationFormProps {
 export function ReceiptMailDialogFormContent({
   onClose,
 }: SendMailNotificationFormProps) {
+  const { mailOptions } = useReceiptMailDialogBoot();
   const { isSubmitting } = useFormikContext();
 
   const handleClose = () => {
@@ -22,8 +24,10 @@ export function ReceiptMailDialogFormContent({
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
-        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
-
+        <MailNotificationForm
+          fromAddresses={mailOptions.from_addresses}
+          toAddresses={mailOptions.to_addresses}
+        />
         <AttachFormGroup name={'attachReceipt:'} inline>
           <FSwitch name={'attachReceipt:'} label={'Attach Receipt'} />
         </AttachFormGroup>