feat(design): fix issues in sidebar design.

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

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js

@@ -10,7 +10,7 @@ import { CLASSES } from 'common/classes';
 import { ERROR } from 'common/errors';
 import {
   EditReceiptFormSchema,
-  CreateReceiptFormSchema,   
+  CreateReceiptFormSchema,
 } from './ReceiptForm.schema';
 
 import { useReceiptFormContext } from './ReceiptFormProvider';
@@ -25,13 +25,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
 
 import { AppToaster } from 'components';
-import {
-  compose,
-  orderingLinesIndexes,
-  transactionNumber,
-} from 'utils';
-import { transformToEditForm, defaultReceipt } from './utils'
-
+import { compose, orderingLinesIndexes, transactionNumber } from 'utils';
+import { transformToEditForm, defaultReceipt } from './utils';
 
 /**
  * Receipt form.
@@ -40,6 +35,7 @@ function ReceiptForm({
   // #withSettings
   receiptNextNumber,
   receiptNumberPrefix,
+  receiptAutoIncrement,
   preferredDepositAccount,
 }) {
   const { formatMessage } = useIntl();
@@ -47,16 +43,15 @@ function ReceiptForm({
 
   // Receipt form context.
   const {
-    receiptId,
     receipt,
     editReceiptMutate,
     createReceiptMutate,
     submitPayload,
-    isNewMode
+    isNewMode,
   } = useReceiptFormContext();
 
   // The next receipt number.
-  const receiptNumber = transactionNumber(
+  const nextReceiptNumber = transactionNumber(
     receiptNumberPrefix,
     receiptNextNumber,
   );
@@ -67,12 +62,14 @@ function ReceiptForm({
         ? transformToEditForm(receipt)
         : {
             ...defaultReceipt,
-            receipt_number: receiptNumber,
+            ...(receiptAutoIncrement && {
+              receipt_number: nextReceiptNumber,
+            }),
             deposit_account_id: parseInt(preferredDepositAccount),
             entries: orderingLinesIndexes(defaultReceipt.entries),
           }),
     }),
-    [receipt, preferredDepositAccount, receiptNumber],
+    [receipt, preferredDepositAccount, nextReceiptNumber, receiptAutoIncrement],
   );
 
   // Transform response error to fields.
@@ -107,9 +104,12 @@ function ReceiptForm({
       return;
     }
     const form = {
-      ...values,
+      ...omit(values, ['receipt_number_manually', 'receipt_number']),
+      ...(values.receipt_number_manually) && ({
+        receipt_number: values.receipt_number,
+      }),
       closed: submitPayload.status,
-      entries: entries.map((entry) => ({ ...omit(entry, ['total']), })),
+      entries: entries.map((entry) => ({ ...omit(entry, ['total']) })),
     };
     // Handle the request success.
     const onSuccess = (response) => {
@@ -135,13 +135,16 @@ function ReceiptForm({
     };
 
     // Handle the request error.
-    const onError = ({response:{data:{errors}}}) => {
-      if(errors){
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
         handleErrors(errors, { setErrors });
       }
       setSubmitting(false);
     };
-
     if (!isNewMode) {
       editReceiptMutate([receipt.id, form]).then(onSuccess).catch(onError);
     } else {
@@ -182,6 +185,7 @@ export default compose(
   withSettings(({ receiptSettings }) => ({
     receiptNextNumber: receiptSettings?.nextNumber,
     receiptNumberPrefix: receiptSettings?.numberPrefix,
+    receiptAutoIncrement: receiptSettings?.autoIncrement,
     preferredDepositAccount: receiptSettings?.preferredDepositAccount,
   })),
 )(ReceiptForm);

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import ReceiptNumberDialog from 'containers/Dialogs/ReceiptNumberDialog';
-import { transactionNumber } from 'utils';
 
 /**
  * Receipt form dialogs.
@@ -10,11 +9,9 @@ export default function ReceiptFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the receipt number form submit confirm.
-  const handleReceiptNumberFormConfirm = (values) => {
-    setFieldValue(
-      'receipt_number',
-      transactionNumber(values.number_prefix, values.next_number),
-    );
+  const handleReceiptNumberFormConfirm = ({ incrementNumber, manually }) => {
+    setFieldValue('receipt_number', incrementNumber || '');
+    setFieldValue('receipt_number_manually', manually);
   };
 
   return (

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js

@@ -5,12 +5,10 @@ import {
   Position,
   ControlGroup,
 } from '@blueprintjs/core';
-
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 import { FastField, ErrorMessage } from 'formik';
-
 import { CLASSES } from 'common/classes';
 import {
   AccountsSelectList,
@@ -19,17 +17,17 @@ import {
   Icon,
   InputPrependButton,
 } from 'components';
-
+import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import {
   momentFormatter,
   compose,
   tansformDateValue,
-  saveInvoke,
   handleDateChange,
   inputIntent,
 } from 'utils';
 import { useReceiptFormContext } from './ReceiptFormProvider';
+import { useObserveReceiptNoSettings } from './utils';
 
 /**
  * Receipt form header fields.
@@ -40,6 +38,11 @@ function ReceiptFormHeader({
 
   // #ownProps
   onReceiptNumberChanged,
+
+  // #withSettings
+  receiptAutoIncrement,
+  receiptNextNumber,
+  receiptNumberPrefix,
 }) {
   const { accounts, customers } = useReceiptFormContext();
 
@@ -47,10 +50,25 @@ function ReceiptFormHeader({
     openDialog('receipt-number-form', {});
   }, [openDialog]);
 
-  const handleReceiptNumberChanged = (event) => {
-    saveInvoke(onReceiptNumberChanged, event.currentTarget.value);
+  const handleReceiptNoBlur = (form, field) => (event) => {
+    const newValue = event.target.value;
+
+    if (field.value !== newValue && receiptAutoIncrement) {
+      openDialog('receipt-number-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
   };
 
+  // Synsc receipt number settings with the form.
+  useObserveReceiptNoSettings(
+    receiptNumberPrefix,
+    receiptNextNumber,
+  );
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -129,7 +147,7 @@ function ReceiptFormHeader({
 
       {/* ----------- Receipt number ----------- */}
       <FastField name={'receipt_number'}>
-        {({ field, meta: { error, touched } }) => (
+        {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'receipt'} />}
             inline={true}
@@ -141,8 +159,9 @@ function ReceiptFormHeader({
             <ControlGroup fill={true}>
               <InputGroup
                 minimal={true}
-                {...field}
-                onBlur={handleReceiptNumberChanged}
+                value={field.value}
+                asyncControl={true}
+                onBlur={handleReceiptNoBlur(form, field)}
               />
               <InputPrependButton
                 buttonProps={{
@@ -183,4 +202,9 @@ function ReceiptFormHeader({
 
 export default compose(
   withDialogActions,
+  withSettings(({ receiptSettings }) => ({
+    receiptAutoIncrement: receiptSettings?.autoIncrement,
+    receiptNextNumber: receiptSettings?.nextNumber,
+    receiptNumberPrefix: receiptSettings?.numberPrefix,
+  })),
 )(ReceiptFormHeader);

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js

@@ -3,7 +3,7 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useReceipt,
   useAccounts,
-  useSettings,
+  useSettingsReceipts,
   useCustomers,
   useItems,
   useCreateReceipt,
@@ -39,7 +39,7 @@ function ReceiptFormProvider({ receiptId, ...props }) {
   } = useItems({ page_size: 10000 });
 
   // Fetch receipt settings.
-  const { isLoading: isSettingLoading } = useSettings();
+  const { isLoading: isSettingLoading } = useSettingsReceipts();
 
   const { mutateAsync: createReceiptMutate } = useCreateReceipt();
   const { mutateAsync: editReceiptMutate } = useEditReceipt();

client/src/containers/Sales/Receipts/ReceiptForm/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;
 
@@ -39,3 +41,13 @@ export const transformToEditForm = (receipt) => ({
     ),
   ],
 });
+
+
+export const useObserveReceiptNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const receiptNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('receipt_number', receiptNo);
+  }, [setFieldValue, prefix, nextNumber]);
+}

client/src/containers/Sales/Receipts/ReceiptsLanding/components.js

@@ -114,8 +114,7 @@ export function useReceiptsTableColumns() {
       {
         id: 'receipt_number',
         Header: formatMessage({ id: 'receipt_number' }),
-        accessor: (row) =>
-          row.receipt_number ? `#${row.receipt_number}` : null,
+        accessor: 'receipt_number',
         width: 140,
         className: 'receipt_number',
       },
@@ -138,7 +137,7 @@ export function useReceiptsTableColumns() {
         Header: formatMessage({ id: 'status' }),
         accessor: StatusAccessor,
         width: 140,
-        className: 'amount',
+        className: 'status',
       },
       {
         id: 'reference_no',