feat(design): fix issues in sidebar design.

feat(sales): reference number auto-increment optimizations.
fix(payments): payment receive/made statement.

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import { useIntl } from 'react-intl';
-import { sumBy, pick, isEmpty } from 'lodash';
+import { omit, sumBy, pick, isEmpty } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
@@ -23,13 +23,10 @@ import {
   CreatePaymentReceiveFormSchema,
 } from './PaymentReceiveForm.schema';
 import { AppToaster } from 'components';
-import { compose } from 'utils';
+import { transactionNumber, compose } from 'utils';
 
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
-import {
-  defaultPaymentReceive,
-  transformToEditForm,
-} from './utils';
+import { defaultPaymentReceive, transformToEditForm } from './utils';
 
 /**
  * Payment Receive form.
@@ -38,6 +35,7 @@ function PaymentReceiveForm({
   // #withSettings
   paymentReceiveNextNumber,
   paymentReceiveNumberPrefix,
+  paymentReceiveAutoIncrement,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
@@ -54,10 +52,10 @@ function PaymentReceiveForm({
   } = usePaymentReceiveFormContext();
 
   // Payment receive number.
-  const paymentReceiveNumber = paymentReceiveNumberPrefix
-    ? `${paymentReceiveNumberPrefix}-${paymentReceiveNextNumber}`
-    : paymentReceiveNextNumber;
-
+  const nextPaymentNumber = transactionNumber(
+    paymentReceiveNumberPrefix,
+    paymentReceiveNextNumber
+  );
   // Form initial values.
   const initialValues = useMemo(
     () => ({
@@ -65,10 +63,17 @@ function PaymentReceiveForm({
         ? transformToEditForm(paymentReceiveEditPage, paymentEntriesEditPage)
         : {
             ...defaultPaymentReceive,
-            payment_receive_no: paymentReceiveNumber,
+            ...(paymentReceiveAutoIncrement && {
+              payment_receive_no: nextPaymentNumber,
+            }),
           }),
     }),
-    [paymentReceiveEditPage, paymentReceiveNumber, paymentEntriesEditPage],
+    [
+      paymentReceiveEditPage,
+      nextPaymentNumber,
+      paymentEntriesEditPage,
+      paymentReceiveAutoIncrement,
+    ],
   );
 
   // Handle form submit.
@@ -98,7 +103,13 @@ function PaymentReceiveForm({
       setSubmitting(false);
       return;
     }
-    const form = { ...values, entries };
+    const form = {
+      ...omit(values, ['payment_receive_no_manually', 'payment_receive_no']),
+      ...(values.payment_receive_no_manually) && ({
+        payment_receive_no: values.payment_receive_no,
+      }),
+      entries
+    };
 
     // Handle request response success.
     const onSaved = (response) => {
@@ -120,7 +131,11 @@ function PaymentReceiveForm({
       }
     };
     // Handle request response errors.
-    const onError = ({ response: { data: { errors } } }) => {
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
       const getError = (errorType) => errors.find((e) => e.type === errorType);
 
       if (getError('PAYMENT_RECEIVE_NO_EXISTS')) {
@@ -179,5 +194,6 @@ export default compose(
   withSettings(({ paymentReceiveSettings }) => ({
     paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
     paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
+    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
   })),
 )(PaymentReceiveForm);

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberDialog';
-import { transactionNumber } from 'utils';
 
 /**
  * Payment receive form dialogs.
@@ -9,11 +8,9 @@ import { transactionNumber } from 'utils';
 export default function PaymentReceiveFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
-  const handleUpdatePaymentNumber = (values) => {
-    setFieldValue(
-      'payment_receive_no',
-      transactionNumber(values.number_prefix, values.next_number),
-    );
+  const handleUpdatePaymentNumber = ({ incrementNumber, manually }) => {
+    setFieldValue('payment_receive_no', incrementNumber);
+    setFieldValue('payment_receive_no_manually', manually)
   };
 
   return (

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.js

@@ -1,7 +1,7 @@
 import React, { createContext, useContext } from 'react';
 import { DashboardInsider } from 'components';
 import {
-  useSettings,
+  useSettingsPaymentReceives,
   usePaymentReceiveEditPage,
   useAccounts,
   useCustomers,
@@ -34,7 +34,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
   const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
 
   // Fetch payment made settings.
-  const fetchSettings = useSettings();
+  const fetchSettings = useSettingsPaymentReceives();
 
   // Fetches customers list.
   const {

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js

@@ -36,7 +36,11 @@ import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
 
-import { amountPaymentEntries, fullAmountPaymentEntries } from './utils';
+import {
+  useObservePaymentNoSettings,
+  amountPaymentEntries,
+  fullAmountPaymentEntries,
+} from './utils';
 import { toSafeInteger } from 'lodash';
 
 /**
@@ -47,6 +51,11 @@ function PaymentReceiveHeaderFields({
 
   // #withDialogActions
   openDialog,
+
+  // #withSettings
+  paymentReceiveAutoIncrement,
+  paymentReceiveNumberPrefix,
+  paymentReceiveNextNumber,
 }) {
   // Payment receive form context.
   const { customers, accounts, isNewMode } = usePaymentReceiveFormContext();
@@ -63,7 +72,6 @@ function PaymentReceiveHeaderFields({
   const totalDueAmount = useMemo(() => safeSumBy(entries, 'due_amount'), [
     entries,
   ]);
-
   // Handle receive full-amount link click.
   const handleReceiveFullAmountClick = () => {
     const newEntries = fullAmountPaymentEntries(entries);
@@ -72,18 +80,36 @@ function PaymentReceiveHeaderFields({
     setFieldValue('entries', newEntries);
     setFieldValue('full_amount', fullAmount);
   };
-
   // Handles the full-amount field blur.
   const onFullAmountBlur = (value) => {
     const newEntries = amountPaymentEntries(toSafeInteger(value), entries);
     setFieldValue('entries', newEntries);
   };
-
   // Handle click open payment receive number dialog.
   const handleClickOpenDialog = () => {
     openDialog('payment-receive-number-form');
   };
 
+  // Handle payment number field blur.
+  const handlePaymentNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && paymentReceiveAutoIncrement) {
+      openDialog('payment-receive-number-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+
+  // Syncs payment receive number from settings to the form.
+  useObservePaymentNoSettings(
+    paymentReceiveNumberPrefix,
+    paymentReceiveNextNumber,
+  );
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ------------- Customer name ------------- */}
@@ -194,7 +220,9 @@ function PaymentReceiveHeaderFields({
               <InputGroup
                 intent={inputIntent({ error, touched })}
                 minimal={true}
-                {...field}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handlePaymentNoBlur(form, field)}
               />
               <InputPrependButton
                 buttonProps={{
@@ -263,8 +291,11 @@ function PaymentReceiveHeaderFields({
 }
 
 export default compose(
-  withSettings(({ organizationSettings }) => ({
+  withSettings(({ organizationSettings, paymentReceiveSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
+    paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
+    paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
+    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
   })),
   withDialogActions,
 )(PaymentReceiveHeaderFields);

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.js

@@ -1,5 +1,7 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
 import moment from 'moment';
-import { transformToForm, safeSumBy } from 'utils';
+import { transactionNumber, transformToForm, safeSumBy } from 'utils';
 
 // Default payment receive entry.
 export const defaultPaymentReceiveEntry = {
@@ -18,7 +20,7 @@ export const defaultPaymentReceive = {
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
   reference_no: '',
   payment_receive_no: '',
-  description: '',
+  statement: '',
   full_amount: '',
   entries: [],
 };
@@ -81,4 +83,16 @@ export const fullAmountPaymentEntries = (entries) => {
     ...item,
     payment_amount: item.due_amount,
   }));
-}
+}
+
+/**
+ * Syncs payment receive number settings with form.
+ */
+ export const useObservePaymentNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const invoiceNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('payment_receive_no', invoiceNo);
+  }, [setFieldValue, prefix, nextNumber]);
+};