fix: auto-increment settings

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx

@@ -165,7 +165,11 @@ function ReceiptForm({
           <ReceiptItemsEntriesEditor />
           <ReceiptFormFooter />
           <ReceiptFormFloatingActions />
+
+          {/*---------- Dialogs ---------*/}
           <ReceiptFormDialogs />
+
+          {/*---------- Effects ---------*/}
           <ReceiptSyncIncrementSettingsToForm />
         </Form>
       </Formik>

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.tsx

@@ -10,9 +10,9 @@ export default function ReceiptFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the receipt number form submit confirm.
-  const handleReceiptNumberFormConfirm = ({ incrementNumber, manually }) => {
-    setFieldValue('receipt_number', incrementNumber || '');
-    setFieldValue('receipt_number_manually', manually);
+  const handleReceiptNumberFormConfirm = (settings) => {
+    setFieldValue('receipt_number', settings.transactionNumber);
+    setFieldValue('receipt_number_manually', settings.transactionNumber);
   };
 
   return (

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx

@@ -10,9 +10,10 @@ import {
   ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
-import { CLASSES } from '@/constants/classes';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import * as R from 'ramda';
 
+import { CLASSES } from '@/constants/classes';
 import {
   FFormGroup,
   AccountsSelect,
@@ -24,57 +25,102 @@ import {
   FormattedMessage as T,
   FeatureCan,
 } from '@/components';
-import withSettings from '@/containers/Settings/withSettings';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
 import { ProjectsSelect } from '@/containers/Projects/components';
 import {
   momentFormatter,
-  compose,
   tansformDateValue,
   handleDateChange,
   inputIntent,
 } from '@/utils';
 import { useReceiptFormContext } from './ReceiptFormProvider';
-import {
-  accountsFieldShouldUpdate,
-  customersFieldShouldUpdate,
-} from './utils';
+import { accountsFieldShouldUpdate, customersFieldShouldUpdate } from './utils';
 import {
   ReceiptExchangeRateInputField,
   ReceiptProjectSelectButton,
 } from './components';
 import { Features } from '@/constants';
+import withSettings from '@/containers/Settings/withSettings';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+const ReceiptFormReceiptNumberField = R.compose(
+  withDialogActions,
+  withSettings(({ receiptSettings }) => ({
+    receiptAutoIncrement: receiptSettings?.autoIncrement,
+  })),
+)(
+  ({
+    //#withDialogActions
+    openDialog,
+
+    // #withSettings
+    receiptAutoIncrement,
+  }) => {
+    const { values, setFieldValue } = useFormikContext();
+
+    const handleReceiptNumberChange = useCallback(() => {
+      openDialog('receipt-number-form', {});
+    }, [openDialog]);
+
+    const handleReceiptNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      if (values.receipt_number !== newValue && receiptAutoIncrement) {
+        openDialog('receipt-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      if (!receiptAutoIncrement) {
+        setFieldValue('receipt_number', newValue);
+        setFieldValue('receipt_number_manually', newValue);
+      }
+    };
+
+    return (
+      <FFormGroup
+        name={'receipt_number'}
+        label={<T id={'receipt'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <ControlGroup fill={true}>
+          <InputGroup
+            minimal={true}
+            value={values.receipt_number}
+            asyncControl={true}
+            onBlur={handleReceiptNoBlur}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleReceiptNumberChange,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: (
+                <T id={'setting_your_auto_generated_payment_receive_number'} />
+              ),
+              position: Position.BOTTOM_LEFT,
+            }}
+            inputProps={{
+              leftIcon: <Icon icon={'date-range'} />,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
+    );
+  },
+);
 
 /**
  * Receipt form header fields.
  */
-function ReceiptFormHeader({
-  //#withDialogActions
-  openDialog,
-
-  // #withSettings
-  receiptAutoIncrement,
-}) {
+export default function ReceiptFormHeader() {
   const { accounts, customers, projects } = useReceiptFormContext();
 
-  const handleReceiptNumberChange = useCallback(() => {
-    openDialog('receipt-number-form', {});
-  }, [openDialog]);
-
-  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',
-        },
-      });
-    }
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -170,45 +216,7 @@ function ReceiptFormHeader({
       </FastField>
 
       {/* ----------- Receipt number ----------- */}
-      <FastField name={'receipt_number'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'receipt'} />}
-            inline={true}
-            className={('form-group--receipt_number', CLASSES.FILL)}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="receipt_number" />}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                minimal={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handleReceiptNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleReceiptNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T
-                      id={'setting_your_auto_generated_payment_receive_number'}
-                    />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-                inputProps={{
-                  leftIcon: <Icon icon={'date-range'} />,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
+      <ReceiptFormReceiptNumberField />
 
       {/* ----------- Reference ----------- */}
       <FastField name={'reference_no'}>
@@ -245,13 +253,6 @@ function ReceiptFormHeader({
   );
 }
 
-export default compose(
-  withDialogActions,
-  withSettings(({ receiptSettings }) => ({
-    receiptAutoIncrement: receiptSettings?.autoIncrement,
-  })),
-)(ReceiptFormHeader);
-
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;