Merge branch 'develop' into big-44-auto-re-calculate-the-items-rate-once-changing-the-invoice

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx

@@ -4,7 +4,7 @@ import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { sumBy, isEmpty } from 'lodash';
+import { sumBy, isEmpty, defaultTo } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -44,6 +44,8 @@ function InvoiceForm({
   invoiceNextNumber,
   invoiceNumberPrefix,
   invoiceAutoIncrementMode,
+  invoiceCustomerNotes,
+  invoiceTermsConditions,
 
   // #withCurrentOrganization
   organization: { base_currency },
@@ -79,6 +81,8 @@ function InvoiceForm({
           }),
           entries: orderingLinesIndexes(defaultInvoice.entries),
           currency_code: base_currency,
+          invoice_message: defaultTo(invoiceCustomerNotes, ''),
+          terms_conditions: defaultTo(invoiceTermsConditions, ''),
           ...newInvoice,
         }),
   };
@@ -193,6 +197,8 @@ export default compose(
     invoiceNextNumber: invoiceSettings?.nextNumber,
     invoiceNumberPrefix: invoiceSettings?.numberPrefix,
     invoiceAutoIncrementMode: invoiceSettings?.autoIncrement,
+    invoiceCustomerNotes: invoiceSettings?.customerNotes,
+    invoiceTermsConditions: invoiceSettings?.termsConditions,
   })),
   withCurrentOrganization(),
 )(InvoiceForm);

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx

@@ -333,8 +333,8 @@ export const useInvoiceAggregatedTaxRates = () => {
   const { taxRates } = useInvoiceFormContext();
 
   const aggregateTaxRates = React.useMemo(
-    () => aggregateItemEntriesTaxRates(taxRates),
-    [taxRates],
+    () => aggregateItemEntriesTaxRates(values.currency_code, taxRates),
+    [values.currency_code, taxRates],
   );
   // Calculate the total tax amount of invoice entries.
   return React.useMemo(() => {

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

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog, DialogSuspense } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const InvoiceMailDialogContent = React.lazy(
+  () => import('./InvoiceMailDialogContent'),
+);
+
+/**
+ * Invoice mail dialog.
+ */
+function InvoiceMailDialog({
+  dialogName,
+  payload: { invoiceId = null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={'Invoice Mail'}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      style={{ width: 600 }}
+    >
+      <DialogSuspense>
+        <InvoiceMailDialogContent
+          dialogName={dialogName}
+          invoiceId={invoiceId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(InvoiceMailDialog);

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

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { useSaleInvoiceDefaultOptions } from '@/hooks/query';
+import { DialogContent } from '@/components';
+
+interface InvoiceMailDialogBootValues {
+  invoiceId: number;
+  mailOptions: any;
+}
+
+const InvoiceMailDialagBoot = createContext<InvoiceMailDialogBootValues>();
+
+interface InvoiceMailDialogBootProps {
+  invoiceId: number;
+  children: React.ReactNode;
+}
+
+/**
+ * Invoice mail dialog boot provider.
+ */
+function InvoiceMailDialogBoot({
+  invoiceId,
+  ...props
+}: InvoiceMailDialogBootProps) {
+  const { data: mailOptions, isLoading: isMailOptionsLoading } =
+    useSaleInvoiceDefaultOptions(invoiceId);
+
+  const provider = {
+    saleInvoiceId: invoiceId,
+    mailOptions,
+    isMailOptionsLoading,
+  };
+
+  return (
+    <DialogContent isLoading={isMailOptionsLoading}>
+      <InvoiceMailDialagBoot.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useInvoiceMailDialogBoot = () =>
+  React.useContext<InvoiceMailDialogBootValues>(InvoiceMailDialagBoot);
+
+export { InvoiceMailDialogBoot, useInvoiceMailDialogBoot };

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

@@ -0,0 +1,17 @@
+import { InvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
+import { InvoiceMailDialogForm } from './InvoiceMailDialogForm';
+
+interface InvoiceMailDialogContentProps {
+  dialogName: string;
+  invoiceId: number;
+}
+export default function InvoiceMailDialogContent({
+  dialogName,
+  invoiceId,
+}: InvoiceMailDialogContentProps) {
+  return (
+    <InvoiceMailDialogBoot invoiceId={invoiceId}>
+      <InvoiceMailDialogForm />
+    </InvoiceMailDialogBoot>
+  );
+}

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

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

@@ -0,0 +1,79 @@
+// @ts-nocheck
+import { Formik } from 'formik';
+import * as R from 'ramda';
+import { Intent } from '@blueprintjs/core';
+import { useInvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
+import { DialogsName } from '@/constants/dialogs';
+import { AppToaster } from '@/components';
+import { useSendSaleInvoiceMail } from '@/hooks/query';
+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 = {
+  ...initialMailNotificationValues,
+  attachInvoice: true,
+};
+
+interface InvoiceMailFormValues extends MailNotificationFormValues {
+  attachInvoice: boolean;
+}
+
+function InvoiceMailDialogFormRoot({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mailOptions, saleInvoiceId } = useInvoiceMailDialogBoot();
+  const { mutateAsync: sendInvoiceMail } = useSendSaleInvoiceMail();
+
+  const initialValues = transformMailFormToInitialValues(
+    mailOptions,
+    initialFormValues,
+  );
+  // Handle the form submitting.
+  const handleSubmit = (values: InvoiceMailFormValues, { setSubmitting }) => {
+    const reqValues = transformMailFormToRequest(values);
+
+    setSubmitting(true);
+    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);
+      });
+  };
+  // Handle the close button click.
+  const handleClose = () => {
+    closeDialog(DialogsName.InvoiceMail);
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={InvoiceMailFormSchema}
+      onSubmit={handleSubmit}
+    >
+      <InvoiceMailDialogFormContent onClose={handleClose} />
+    </Formik>
+  );
+}
+
+export const InvoiceMailDialogForm = R.compose(withDialogActions)(
+  InvoiceMailDialogFormRoot,
+);

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

@@ -0,0 +1,66 @@
+// @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';
+import { useInvoiceMailDialogBoot } from './InvoiceMailDialogBoot';
+
+interface SendMailNotificationFormProps {
+  onClose?: () => void;
+}
+
+export function InvoiceMailDialogFormContent({
+  onClose,
+}: SendMailNotificationFormProps) {
+  const { isSubmitting } = useFormikContext();
+  const { mailOptions } = useInvoiceMailDialogBoot();
+
+  const handleClose = () => {
+    saveInvoke(onClose);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <MailNotificationForm
+          fromAddresses={mailOptions.from_addresses}
+          toAddresses={mailOptions.to_addresses}
+        />
+        <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;
+`;

packages/webapp/src/containers/Sales/Invoices/InvoiceMailDialog/index.ts

@@ -0,0 +1 @@
+export * from './InvoiceMailDialog';

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.tsx

@@ -26,6 +26,7 @@ import { useInvoicesListContext } from './InvoicesListProvider';
 
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Invoices datatable.
@@ -98,6 +99,11 @@ function InvoicesDataTable({
     openDialog('invoice-pdf-preview', { invoiceId: id });
   };
 
+  // Handle send mail invoice.
+  const handleSendMailInvoice = ({ id }) => {
+    openDialog(DialogsName.InvoiceMail, { invoiceId: id });
+  };
+
   // Handle cell click.
   const handleCellClick = (cell, event) => {
     openDrawer(DRAWERS.INVOICE_DETAILS, { invoiceId: cell.row.original.id });
@@ -157,6 +163,7 @@ function InvoicesDataTable({
           onViewDetails: handleViewDetailInvoice,
           onPrint: handlePrintInvoice,
           onConvert: handleConvertToCreitNote,
+          onSendMail: handleSendMailInvoice
         }}
       />
     </DashboardContentTable>

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/components.tsx

@@ -128,6 +128,7 @@ export function ActionsMenu({
     onQuick,
     onViewDetails,
     onPrint,
+    onSendMail
   },
   row: { original },
 }) {
@@ -150,7 +151,6 @@ export function ActionsMenu({
           text={intl.get('invoice.convert_to_credit_note')}
           onClick={safeCallback(onConvert, original)}
         />
-
         <If condition={!original.is_delivered}>
           <MenuItem
             icon={<Icon icon="send" iconSize={16} />}
@@ -169,6 +169,11 @@ export function ActionsMenu({
         </If>
       </Can>
       <Can I={SaleInvoiceAction.View} a={AbilitySubject.Invoice}>
+        <MenuItem
+          icon={<Icon icon={'envelope'} iconSize={16} />}
+          text={'Send Mail'}
+          onClick={safeCallback(onSendMail, original)}
+        />
         <MenuItem
           icon={<Icon icon={'print-16'} iconSize={16} />}
           text={intl.get('print')}