feat(webapp): send mail notififcation of sale transactions

2026-02-17 05:10:31 +00:00 · 2023-12-28 17:53:51 +02:00
parent a676e09537
commit dc762567b5
15 changed files with 987 additions and 208 deletions
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialog.tsx
+++ b/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}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogContent.tsx
+++ b/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';

--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogForm.tsx
+++ b/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>
  );
 }
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateMailDialog/EstimateMailDialogFormContent.tsx
+++ b/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;
+`;
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.schema.ts
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.schema.ts
@@ -0,0 +1,9 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+
+export const InvoiceMailFormSchema = Yup.object().shape({
+  from: Yup.array().required().min(1).max(5).label('From address'),
+  to: Yup.array().required().min(1).max(5).label('To address'),
+  subject: Yup.string().required().label('Mail subject'),
+  body: Yup.string().required().label('Mail body'),
+});
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogForm.tsx
@@ -2,25 +2,27 @@
 import { Formik } from 'formik';
 import { castArray } from 'lodash';
 import * as R from 'ramda';
-import { SendMailNotificationForm } from '@/containers/SendMailNotification';
 import { useInvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
 import { transformToForm } from '@/utils';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { DialogsName } from '@/constants/dialogs';
 import { useSendSaleInvoiceMail } from '@/hooks/query';
+import { InvoiceMailDialogFormContent } from './InvoiceMailDialogFormContent';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { InvoiceMailFormSchema } from './InvoiceMailDialogForm.schema';

 const initialFormValues = {
  from: [],
  to: [],
  subject: '',
-  message: '',
+  body: '',
+  attachInvoice: true,
 };

 interface InvoiceMailFormValues {
  from: string[];
  to: string[];
  subject: string;
-  message: string;
+  body: string;
  attachInvoice: boolean;
 }

@@ -54,8 +56,12 @@ function InvoiceMailDialogFormRoot({
  };

  return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm onClose={handleClose} />
+    <Formik
+      initialValues={initialValues}
+      validationSchema={InvoiceMailFormSchema}
+      onSubmit={handleSubmit}
+    >
+      <InvoiceMailDialogFormContent onClose={handleClose} />
    </Formik>
  );
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogFormContent.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/InvoiceMailDialogFormContent.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 SendMailNotificationFormProps {
+  onClose?: () => void;
+}
+
+export function InvoiceMailDialogFormContent({
+  onClose,
+}: SendMailNotificationFormProps) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    saveInvoke(onClose);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
+
+        <AttachFormGroup name={'attachInvoice'} inline>
+          <FSwitch name={'attachInvoice'} label={'Attach Invoice'} />
+        </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;
+`;
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogForm.tsx
+++ b/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>
  );
 }
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialogFormContent.tsx
+++ b/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;
+`;
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogForm.tsx
@@ -2,24 +2,26 @@
 import { Formik, FormikBag } from 'formik';
 import { castArray } from 'lodash';
 import * as R from 'ramda';
-import { SendMailNotificationForm } from '@/containers/SendMailNotification';
 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';

 const initialFormValues = {
  from: [],
  to: [],
  subject: '',
-  message: '',
+  body: '',
+  attachReceipt: true,
 };
 interface ReceiptMailFormValues {
  from: string[];
  to: string[];
  subject: string;
-  message: string;
+  body: string;
+  attachReceipt: boolean;
 }

 function ReceiptMailDialogFormRoot({ closeDialog }) {
@@ -52,7 +54,7 @@ function ReceiptMailDialogFormRoot({ closeDialog }) {

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <SendMailNotificationForm onClose={handleClose} />
+      <ReceiptMailDialogFormContent onClose={handleClose} />
    </Formik>
  );
 }
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogFormContent.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialogFormContent.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 SendMailNotificationFormProps {
+  onClose?: () => void;
+}
+
+export function ReceiptMailDialogFormContent({
+  onClose,
+}: SendMailNotificationFormProps) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    saveInvoke(onClose);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <MailNotificationForm fromAddresses={[]} toAddresses={[]} />
+
+        <AttachFormGroup name={'attachReceipt:'} inline>
+          <FSwitch name={'attachReceipt:'} label={'Attach Receipt'} />
+        </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;
+`;