feat: add send mail icon

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

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

@@ -26,6 +26,7 @@ function EstimateMailDialogBoot({
     useSaleEstimateDefaultOptions(estimateId);
 
   const provider = {
+    saleEstimateId: estimateId,
     mailOptions,
     isMailOptionsLoading,
   };

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