feat(design): fix issues in sidebar design.

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

client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js

@@ -22,7 +22,7 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { AppToaster } from 'components';
 import { ERROR } from 'common/errors';
-import { compose, orderingLinesIndexes } from 'utils';
+import { compose, transactionNumber, orderingLinesIndexes } from 'utils';
 import { useEstimateFormContext } from './EstimateFormProvider';
 import { transformToEditForm, defaultEstimate } from './utils';
 
@@ -33,6 +33,7 @@ function EstimateForm({
   // #withSettings
   estimateNextNumber,
   estimateNumberPrefix,
+  estimateIncrementMode,
 }) {
   const { formatMessage } = useIntl();
   const history = useHistory();
@@ -44,24 +45,25 @@ function EstimateForm({
     editEstimateMutate,
   } = useEstimateFormContext();
 
-  const estimateNumber = estimateNumberPrefix
-    ? `${estimateNumberPrefix}-${estimateNextNumber}`
-    : estimateNextNumber;
+  const estimateNumber = transactionNumber(
+    estimateNumberPrefix,
+    estimateNextNumber,
+  );
 
   // Initial values in create and edit mode.
   const initialValues = useMemo(
     () => ({
       ...(!isEmpty(estimate)
-        ? {
-            ...transformToEditForm(estimate),
-          }
+        ? { ...transformToEditForm(estimate) }
         : {
             ...defaultEstimate,
-            estimate_number: estimateNumber,
+            ...(estimateIncrementMode) && ({
+              estimate_number: estimateNumber,
+            }),
             entries: orderingLinesIndexes(defaultEstimate.entries),
           }),
     }),
-    [estimate, estimateNumber],
+    [estimate, estimateNumber, estimateIncrementMode],
   );
 
   // Transform response errors to fields.
@@ -98,7 +100,10 @@ function EstimateForm({
       return;
     }
     const form = {
-      ...values,
+      ...omit(values, ['estimate_number_manually', 'estimate_number']),
+      ...(values.estimate_number_manually) && ({
+        estimate_number: values.estimate_number,
+      }),
       delivered: submitPayload.deliver,
       entries: entries.map((entry) => ({ ...omit(entry, ['total']) })),
     };
@@ -134,7 +139,6 @@ function EstimateForm({
       }
       setSubmitting(false);
     };
-
     if (!isNewMode) {
       editEstimateMutate([estimate.id, form]).then(onSuccess).catch(onError);
     } else {
@@ -174,5 +178,6 @@ export default compose(
   withSettings(({ estimatesSettings }) => ({
     estimateNextNumber: estimatesSettings?.nextNumber,
     estimateNumberPrefix: estimatesSettings?.numberPrefix,
+    estimateIncrementMode: estimatesSettings?.autoIncrement,
   })),
 )(EstimateForm);

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import EstimateNumberDialog from 'containers/Dialogs/EstimateNumberDialog';
-import { transactionNumber } from 'utils';
 
 /**
  * Estimate form dialogs.
@@ -10,11 +9,9 @@ export default function EstimateFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the invoice number form submit confirm.
-  const handleEstimateNumberFormConfirm = (values) => {
-    setFieldValue(
-      'estimate_number',
-      transactionNumber(values.number_prefix, values.next_number),
-    );
+  const handleEstimateNumberFormConfirm = ({ incrementNumber, manually }) => {
+    setFieldValue('estimate_number', incrementNumber || '');
+    setFieldValue('estimate_number_manually', manually);
   };
 
   return (

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js

@@ -8,7 +8,13 @@ import {
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
 import { FastField, ErrorMessage } from 'formik';
-import { momentFormatter, compose, tansformDateValue } from 'utils';
+import {
+  momentFormatter,
+  compose,
+  tansformDateValue,
+  inputIntent,
+  handleDateChange,
+} from 'utils';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
@@ -19,8 +25,9 @@ import {
 } from 'components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from 'containers/Settings/withSettings';
 
-import { inputIntent, handleDateChange } from 'utils';
+import { useObserveEstimateNoSettings } from './utils';
 import { useEstimateFormContext } from './EstimateFormProvider';
 
 /**
@@ -29,6 +36,11 @@ import { useEstimateFormContext } from './EstimateFormProvider';
 function EstimateFormHeader({
   // #withDialogActions
   openDialog,
+
+  // #withSettings
+  estimateAutoIncrement,
+  estimateNumberPrefix,
+  estimateNextNumber,
 }) {
   const { customers } = useEstimateFormContext();
 
@@ -36,6 +48,22 @@ function EstimateFormHeader({
     openDialog('estimate-number-form', {});
   };
 
+  const handleEstimateNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && estimateAutoIncrement) {
+      openDialog('estimate-number-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
+  };
+
+  // Syncs estimate number settings with the form.
+  useObserveEstimateNoSettings(estimateNumberPrefix, estimateNextNumber);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -131,7 +159,9 @@ function EstimateFormHeader({
             <ControlGroup fill={true}>
               <InputGroup
                 minimal={true}
-                {...field}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handleEstimateNoBlur(form, field)}
               />
               <InputPrependButton
                 buttonProps={{
@@ -169,4 +199,9 @@ function EstimateFormHeader({
 
 export default compose(
   withDialogActions,
+  withSettings(({ estimatesSettings }) => ({
+    estimateNextNumber: estimatesSettings?.nextNumber,
+    estimateNumberPrefix: estimatesSettings?.numberPrefix,
+    estimateAutoIncrement: estimatesSettings?.autoIncrement,
+  })),
 )(EstimateFormHeader);

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormProvider.js

@@ -4,7 +4,7 @@ import {
   useEstimate,
   useCustomers,
   useItems,
-  useSettings,
+  useSettingsEstimates,
   useCreateEstimate,
   useEditEstimate
 } from 'hooks/query';
@@ -32,7 +32,7 @@ function EstimateFormProvider({ estimateId, ...props }) {
   } = useCustomers({ page_size: 10000 });
 
   // Handle fetch settings.
-  useSettings();
+  useSettingsEstimates();
 
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState({});

client/src/containers/Sales/Estimates/EstimateForm/utils.js

@@ -1,5 +1,7 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
 import moment from 'moment';
-import { repeatValue, transformToForm } from 'utils';
+import { transactionNumber, repeatValue, transformToForm } from 'utils';
 
 export const MIN_LINES_NUMBER = 4;
 
@@ -35,4 +37,16 @@ export const transformToEditForm = (estimate) => ({
       Math.max(MIN_LINES_NUMBER - estimate.entries.length, 0),
     ),
   ],
-});
+});
+
+/**
+ * Syncs estimate number of the settings with the context form.
+ */
+export const useObserveEstimateNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const estimateNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('estimate_number', estimateNo);
+  }, [setFieldValue, prefix, nextNumber]);
+}