feat(webapp): send mail notififcation of sale transactions

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

@@ -2,25 +2,27 @@
 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';
+import { PaymentMailDialogFormContent } from './PaymentMailDialogFormContent';
+import { transformToForm } from '@/utils';
 
 const initialFormValues = {
   from: [],
   to: [],
   subject: '',
-  message: '',
+  body: '',
+  attachPayment: true,
 };
 
 interface PaymentMailFormValue {
   from: string[];
   to: string[];
   subject: string;
-  message: string;
+  body: string;
+  attachPayment: boolean;
 }
 
 export function PaymentMailDialogFormRoot({
@@ -57,7 +59,7 @@ export function PaymentMailDialogFormRoot({
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm onClose={handleClose} />
+      <PaymentMailDialogFormContent onClose={handleClose} />
     </Formik>
   );
 }

packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogFormContent.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 PaymentMailDialogFormContentProps {
+  onClose?: () => void;
+}
+
+export function PaymentMailDialogFormContent({
+  onClose,
+}: PaymentMailDialogFormContentProps) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    saveInvoke(onClose);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
+
+        <AttachFormGroup name={'attachPayment'} inline>
+          <FSwitch name={'attachPayment'} label={'Attach Payment'} />
+        </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;
+`;