feat(webapp): send mail notififcation of sale transactions

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

@@ -19,7 +19,7 @@ function EstimateMailDialog({
   return (
     <Dialog
       name={dialogName}
-      title={'Estiomate Mail'}
+      title={'Estimate Mail'}
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { EstimateMailDialogBoot } from './EstimateMailDialogBoot';
 import { EstimateMailDialogForm } from './EstimateMailDialogForm';
 

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

@@ -4,30 +4,31 @@ import * as R from 'ramda';
 import { castArray } from 'lodash';
 import { useEstimateMailDialogBoot } from './EstimateMailDialogBoot';
 import { transformToForm } from '@/utils';
-import { SendMailNotificationForm } from '@/containers/SendMailNotification';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { useSendSaleEstimateMail } from '@/hooks/query';
+import { EstimateMailDialogFormContent } from './EstimateMailDialogFormContent';
 
 const initialFormValues = {
   from: [],
   to: [],
   subject: '',
-  message: '',
+  body: '',
+  attachEstimate: true,
 };
 
 interface EstimateMailFormValues {
   from: string[];
   to: string[];
   subject: string;
-  message: string;
+  body: string;
   attachEstimate: boolean;
 }
 
-function EstimateMailDialogFormRoot(
+function EstimateMailDialogFormRoot({
   // #withDialogClose
   closeDialog,
-) {
+}) {
   const { mutateAsync: sendEstimateMail } = useSendSaleEstimateMail();
   const { mailOptions, saleEstimateId } = useEstimateMailDialogBoot();
 
@@ -55,7 +56,7 @@ function EstimateMailDialogFormRoot(
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm onClose={handleClose} />
+      <EstimateMailDialogFormContent onClose={handleClose} />
     </Formik>
   );
 }

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

@@ -0,0 +1,62 @@
+// @ts-nocheck
+import { Form, useFormikContext } from 'formik';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+import { FFormGroup, FSwitch } from '@/components';
+import { MailNotificationForm } from '@/containers/SendMailNotification';
+import { saveInvoke } from '@/utils';
+
+interface EstimateMailDialogFormContentProps {
+  onClose?: () => void;
+}
+
+export function EstimateMailDialogFormContent({
+  onClose,
+}: EstimateMailDialogFormContentProps) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    saveInvoke(onClose);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
+
+        <AttachFormGroup name={'attachEstimate'} inline>
+          <FSwitch name={'attachEstimate'} label={'Attach Estimate'} />
+        </AttachFormGroup>
+      </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 AttachFormGroup = styled(FFormGroup)`
+  background: #f8f9fb;
+  margin-top: 0.6rem;
+  padding: 4px 14px;
+  border-radius: 5px;
+  border: 1px solid #dcdcdd;
+`;