fix: auto-increment cashflow transactions

packages/webapp/src/components/DialogsContainer.tsx

@@ -17,8 +17,8 @@ import AllocateLandedCostDialog from '@/containers/Dialogs/AllocateLandedCostDia
 import InvoicePdfPreviewDialog from '@/containers/Dialogs/InvoicePdfPreviewDialog';
 import EstimatePdfPreviewDialog from '@/containers/Dialogs/EstimatePdfPreviewDialog';
 import ReceiptPdfPreviewDialog from '@/containers/Dialogs/ReceiptPdfPreviewDialog';
-import MoneyInDialog from '@/containers/Dialogs/MoneyInDialog';
+import MoneyInDialog from '@/containers/CashFlow/MoneyInDialog';
-import MoneyOutDialog from '@/containers/Dialogs/MoneyOutDialog';
+import MoneyOutDialog from '@/containers/CashFlow/MoneyOutDialog';
 import BadDebtDialog from '@/containers/Dialogs/BadDebtDialog';
 import NotifyInvoiceViaSMSDialog from '@/containers/Dialogs/NotifyInvoiceViaSMSDialog';
 import NotifyReceiptViaSMSDialog from '@/containers/Dialogs/NotifyReceiptViaSMSDialog';

packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInContentFields.tsx

@@ -1,9 +1,15 @@
 // @ts-nocheck
 import React from 'react';
+
 import OwnerContributionFormFields from './OwnerContribution/OwnerContributionFormFields';
 import OtherIncomeFormFields from './OtherIncome/OtherIncomeFormFields';
 import TransferFromAccountFormFields from './TransferFromAccount/TransferFromAccountFormFields';
 
+/**
+ *
+ * @param param0
+ * @returns
+ */
 export default function MoneyInContentFields({ accountType }) {
   const handleTransactionType = () => {
     switch (accountType) {
@@ -19,6 +25,5 @@ export default function MoneyInContentFields({ accountType }) {
         break;
     }
   };
-
   return <React.Fragment>{handleTransactionType()}</React.Fragment>;
 }

packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormContent.tsx

@@ -5,6 +5,7 @@ import { Form } from 'formik';
 import MoneyInFormFields from './MoneyInFormFields';
 import MoneyInFormDialog from './MoneyInFormDialog';
 import MoneyInFloatingActions from './MoneyInFloatingActions';
+import { MoneyInOutSyncIncrementSettingsToForm } from '../_components';
 
 /**
  * Money In form content.
@@ -15,6 +16,7 @@ export default function MoneyInFormContent() {
       <MoneyInFormFields />
       <MoneyInFormDialog />
       <MoneyInFloatingActions />
+      <MoneyInOutSyncIncrementSettingsToForm />
     </Form>
   );
 }

packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormDialog.tsx

@@ -11,12 +11,9 @@ export default function MoneyInFormDialog() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the transaction number form submit confirm.
-  const handleTransactionNumberFormConfirm = ({
+  const handleTransactionNumberFormConfirm = (settings) => {
-    incrementNumber,
+    setFieldValue('transaction_number', settings.transactionNumber);
-    manually,
+    setFieldValue('transaction_number_manually', settings.transactionNumber);
-  }) => {
-    setFieldValue('transaction_number', incrementNumber || '');
-    setFieldValue('transaction_number_manually', manually);
   };
   return (
     <React.Fragment>

packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx

@@ -16,14 +16,12 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
-  Icon,
   Col,
   Row,
   If,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
-  InputPrependButton,
   ExchangeRateMutedField,
 } from '@/components';
 import { DateInput } from '@blueprintjs/datetime';
@@ -35,65 +33,26 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from '@/utils';
 
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
-  useObserveTransactionNoSettings,
   useSetPrimaryBranchToForm,
   useForeignAccount,
   BranchRowDivider,
 } from '../utils';
-import withSettings from '@/containers/Settings/withSettings';
+import { MoneyInOutTransactionNoField } from '../../_components';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 /**
  * Other income form fields.
  */
-function OtherIncomeFormFields({
+export default function OtherIncomeFormFields() {
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  transactionAutoIncrement,
-  transactionNumberPrefix,
-  transactionNextNumber,
-}) {
   // Money in dialog context.
   const { accounts, account, branches } = useMoneyInDailogContext();
-
   const { values } = useFormikContext();
-
   const amountFieldRef = useAutofocus();
-
   const isForeigAccount = useForeignAccount();
 
-  // Handle tranaction number changing.
-  const handleTransactionNumberChange = () => {
-    openDialog('transaction-number-form');
-  };
-
-  // Handle transaction no. field blur.
-  const handleTransactionNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && transactionAutoIncrement) {
-      openDialog('transaction-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
-  // Syncs transaction number settings with form.
-  useObserveTransactionNoSettings(
-    transactionNumberPrefix,
-    transactionNextNumber,
-  );
-
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
 
@@ -149,42 +108,7 @@ function OtherIncomeFormFields({
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
-          <Field name={'transaction_number'}>
+          <MoneyInOutTransactionNoField />
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'transaction_number'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="transaction_number" />}
-                className={'form-group--transaction_number'}
-              >
-                <ControlGroup fill={true}>
-                  <InputGroup
-                    minimal={true}
-                    value={field.value}
-                    asyncControl={true}
-                    onBlur={handleTransactionNoBlur(form, field)}
-                  />
-                  <InputPrependButton
-                    buttonProps={{
-                      onClick: handleTransactionNumberChange,
-                      icon: <Icon icon={'settings-18'} />,
-                    }}
-                    tooltip={true}
-                    tooltipProps={{
-                      content: (
-                        <T
-                          id={
-                            'cash_flow.setting_your_auto_generated_transaction_number'
-                          }
-                        />
-                      ),
-                      position: Position.BOTTOM_LEFT,
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </Field>
         </Col>
       </Row>
       {/*------------ amount -----------*/}
@@ -298,12 +222,3 @@ function OtherIncomeFormFields({
     </React.Fragment>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withSettings(({ cashflowSetting }) => ({
-    transactionAutoIncrement: cashflowSetting?.autoIncrement,
-    transactionNextNumber: cashflowSetting?.nextNumber,
-    transactionNumberPrefix: cashflowSetting?.numberPrefix,
-  })),
-)(OtherIncomeFormFields);

packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx

@@ -17,11 +17,9 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
-  Icon,
   Col,
   Row,
   If,
-  InputPrependButton,
   ExchangeRateMutedField,
   BranchSelect,
   BranchSelectButton,
@@ -35,31 +33,20 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from '@/utils';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
-  useObserveTransactionNoSettings,
   useSetPrimaryBranchToForm,
   useForeignAccount,
   BranchRowDivider,
 } from '../../MoneyInDialog/utils';
-import withSettings from '@/containers/Settings/withSettings';
+import { MoneyInOutTransactionNoField } from '../../_components';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 /**
 /**
  * Owner contribution form fields.
  */
-function OwnerContributionFormFields({
+export default function OwnerContributionFormFields() {
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  transactionAutoIncrement,
-  transactionNumberPrefix,
-  transactionNextNumber,
-}) {
   // Money in dialog context.
   const { accounts, account, branches } = useMoneyInDailogContext();
 
@@ -69,31 +56,6 @@ function OwnerContributionFormFields({
 
   const isForeigAccount = useForeignAccount();
 
-  // Handle tranaction number changing.
-  const handleTransactionNumberChange = () => {
-    openDialog('transaction-number-form');
-  };
-
-  // Handle transaction no. field blur.
-  const handleTransactionNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && transactionAutoIncrement) {
-      openDialog('transaction-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
-  // Syncs transaction number settings with form.
-  useObserveTransactionNoSettings(
-    transactionNumberPrefix,
-    transactionNextNumber,
-  );
-
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
 
@@ -148,42 +110,7 @@ function OwnerContributionFormFields({
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
-          <Field name={'transaction_number'}>
+          <MoneyInOutTransactionNoField />
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'transaction_number'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="transaction_number" />}
-                className={'form-group--transaction_number'}
-              >
-                <ControlGroup fill={true}>
-                  <InputGroup
-                    minimal={true}
-                    value={field.value}
-                    asyncControl={true}
-                    onBlur={handleTransactionNoBlur(form, field)}
-                  />
-                  <InputPrependButton
-                    buttonProps={{
-                      onClick: handleTransactionNumberChange,
-                      icon: <Icon icon={'settings-18'} />,
-                    }}
-                    tooltip={true}
-                    tooltipProps={{
-                      content: (
-                        <T
-                          id={
-                            'cash_flow.setting_your_auto_generated_transaction_number'
-                          }
-                        />
-                      ),
-                      position: Position.BOTTOM_LEFT,
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </Field>
         </Col>
       </Row>
       {/*------------ amount -----------*/}
@@ -294,12 +221,3 @@ function OwnerContributionFormFields({
     </React.Fragment>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withSettings(({ cashflowSetting }) => ({
-    transactionAutoIncrement: cashflowSetting?.autoIncrement,
-    transactionNextNumber: cashflowSetting?.nextNumber,
-    transactionNumberPrefix: cashflowSetting?.numberPrefix,
-  })),
-)(OwnerContributionFormFields);

packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx

@@ -17,11 +17,9 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
-  Icon,
   Col,
   Row,
   If,
-  InputPrependButton,
   ExchangeRateMutedField,
   FeatureCan,
   BranchSelect,
@@ -35,30 +33,20 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from '@/utils';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
-  useObserveTransactionNoSettings,
   useSetPrimaryBranchToForm,
   useForeignAccount,
   BranchRowDivider,
 } from '../../MoneyInDialog/utils';
-import withSettings from '@/containers/Settings/withSettings';
+
-import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { MoneyInOutTransactionNoField } from '../../_components';
 
 /**
  * Transfer from account form fields.
  */
-function TransferFromAccountFormFields({
+export default function TransferFromAccountFormFields() {
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  transactionAutoIncrement,
-  transactionNumberPrefix,
-  transactionNextNumber,
-}) {
   // Money in dialog context.
   const { accounts, account, branches } = useMoneyInDailogContext();
 
@@ -67,33 +55,9 @@ function TransferFromAccountFormFields({
 
   const { values } = useFormikContext();
 
-  // Handle tranaction number changing.
-  const handleTransactionNumberChange = () => {
-    openDialog('transaction-number-form');
-  };
-
-  // Handle transaction no. field blur.
-  const handleTransactionNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && transactionAutoIncrement) {
-      openDialog('transaction-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
 
-  // Syncs transaction number settings with form.
-  useObserveTransactionNoSettings(
-    transactionNumberPrefix,
-    transactionNextNumber,
-  );
   return (
     <React.Fragment>
       <FeatureCan feature={Features.Branches}>
@@ -145,42 +109,7 @@ function TransferFromAccountFormFields({
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
-          <Field name={'transaction_number'}>
+          <MoneyInOutTransactionNoField />
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'transaction_number'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="transaction_number" />}
-                className={'form-group--transaction_number'}
-              >
-                <ControlGroup fill={true}>
-                  <InputGroup
-                    minimal={true}
-                    value={field.value}
-                    asyncControl={true}
-                    onBlur={handleTransactionNoBlur(form, field)}
-                  />
-                  <InputPrependButton
-                    buttonProps={{
-                      onClick: handleTransactionNumberChange,
-                      icon: <Icon icon={'settings-18'} />,
-                    }}
-                    tooltip={true}
-                    tooltipProps={{
-                      content: (
-                        <T
-                          id={
-                            'cash_flow.setting_your_auto_generated_transaction_number'
-                          }
-                        />
-                      ),
-                      position: Position.BOTTOM_LEFT,
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </Field>
         </Col>
       </Row>
       {/*------------ amount -----------*/}
@@ -296,12 +225,3 @@ function TransferFromAccountFormFields({
     </React.Fragment>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withSettings(({ cashflowSetting }) => ({
-    transactionAutoIncrement: cashflowSetting?.autoIncrement,
-    transactionNextNumber: cashflowSetting?.nextNumber,
-    transactionNumberPrefix: cashflowSetting?.numberPrefix,
-  })),
-)(TransferFromAccountFormFields);

packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutContentFields.tsx

@@ -20,7 +20,6 @@ function MoneyOutContentFields({ accountType }) {
         break;
     }
   };
-
   return <React.Fragment>{handleTransactionType()}</React.Fragment>;
 }
 

packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormContent.tsx

@@ -3,8 +3,10 @@ import React from 'react';
 import { Form } from 'formik';
 
 import MoneyOutFormFields from './MoneyOutFormFields';
-import MoneyOutFormDialog from './MoneyOutFormDialog'
+import MoneyOutFormDialog from './MoneyOutFormDialog';
 import MoneyOutFloatingActions from './MoneyOutFloatingActions';
+import { MoneyInOutSyncIncrementSettingsToForm } from '../_components';
+
 /**
  * Money out form content.
  */
@@ -14,6 +16,7 @@ export default function MoneyOutFormContent() {
       <MoneyOutFormFields />
       <MoneyOutFormDialog />
       <MoneyOutFloatingActions />
+      <MoneyInOutSyncIncrementSettingsToForm />
     </Form>
   );
 }

packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx

@@ -16,11 +16,9 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
-  Icon,
   Col,
   Row,
   If,
-  InputPrependButton,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
@@ -35,31 +33,21 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from '@/utils';
 import { CLASSES } from '@/constants/classes';
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 import {
-  useObserveTransactionNoSettings,
   useSetPrimaryBranchToForm,
   useForeignAccount,
   BranchRowDivider,
 } from '../utils';
-import withSettings from '@/containers/Settings/withSettings';
+
-import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { MoneyInOutTransactionNoField } from '../../_components';
 
 /**
  * Other expense form fields.
  */
-function OtherExpnseFormFields({
+export default function OtherExpnseFormFields() {
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  transactionAutoIncrement,
-  transactionNumberPrefix,
-  transactionNextNumber,
-}) {
   // Money in dialog context.
   const { accounts, account, branches } = useMoneyOutDialogContext();
 
@@ -68,31 +56,6 @@ function OtherExpnseFormFields({
 
   const amountFieldRef = useAutofocus();
 
-  // Handle tranaction number changing.
-  const handleTransactionNumberChange = () => {
-    openDialog('transaction-number-form');
-  };
-
-  // Handle transaction no. field blur.
-  const handleTransactionNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && transactionAutoIncrement) {
-      openDialog('transaction-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
-  // Syncs transaction number settings with form.
-  useObserveTransactionNoSettings(
-    transactionNumberPrefix,
-    transactionNextNumber,
-  );
-
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
 
@@ -147,42 +110,7 @@ function OtherExpnseFormFields({
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
-          <Field name={'transaction_number'}>
+          <MoneyInOutTransactionNoField />
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'transaction_number'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="transaction_number" />}
-                className={'form-group--transaction_number'}
-              >
-                <ControlGroup fill={true}>
-                  <InputGroup
-                    minimal={true}
-                    value={field.value}
-                    asyncControl={true}
-                    onBlur={handleTransactionNoBlur(form, field)}
-                  />
-                  <InputPrependButton
-                    buttonProps={{
-                      onClick: handleTransactionNumberChange,
-                      icon: <Icon icon={'settings-18'} />,
-                    }}
-                    tooltip={true}
-                    tooltipProps={{
-                      content: (
-                        <T
-                          id={
-                            'cash_flow.setting_your_auto_generated_transaction_number'
-                          }
-                        />
-                      ),
-                      position: Position.BOTTOM_LEFT,
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </Field>
         </Col>
       </Row>
       {/*------------ amount -----------*/}
@@ -296,12 +224,3 @@ function OtherExpnseFormFields({
     </React.Fragment>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withSettings(({ cashflowSetting }) => ({
-    transactionAutoIncrement: cashflowSetting?.autoIncrement,
-    transactionNextNumber: cashflowSetting?.nextNumber,
-    transactionNumberPrefix: cashflowSetting?.numberPrefix,
-  })),
-)(OtherExpnseFormFields);

packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx

@@ -17,8 +17,6 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
-  InputPrependButton,
-  Icon,
   If,
   Col,
   Row,
@@ -34,30 +32,19 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from '@/utils';
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 import {
-  useObserveTransactionNoSettings,
   useSetPrimaryBranchToForm,
   useForeignAccount,
   BranchRowDivider,
 } from '../../MoneyOutDialog/utils';
-import withSettings from '@/containers/Settings/withSettings';
+import { MoneyInOutTransactionNoField } from '../../_components';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 
 /**
  * Owner drawings form fields.
  */
-function OwnerDrawingsFormFields({
+export default function OwnerDrawingsFormFields() {
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  transactionAutoIncrement,
-  transactionNumberPrefix,
-  transactionNextNumber,
-}) {
   // Money out dialog context.
   const { accounts, account, branches } = useMoneyOutDialogContext();
   const { values } = useFormikContext();
@@ -65,31 +52,6 @@ function OwnerDrawingsFormFields({
 
   const amountFieldRef = useAutofocus();
 
-  // Handle tranaction number changing.
-  const handleTransactionNumberChange = () => {
-    openDialog('transaction-number-form');
-  };
-
-  // Handle transaction no. field blur.
-  const handleTransactionNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && transactionAutoIncrement) {
-      openDialog('transaction-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
-  // Syncs transaction number settings with form.
-  useObserveTransactionNoSettings(
-    transactionNumberPrefix,
-    transactionNextNumber,
-  );
-
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
 
@@ -144,42 +106,7 @@ function OwnerDrawingsFormFields({
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
-          <Field name={'transaction_number'}>
+          <MoneyInOutTransactionNoField />
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'transaction_number'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="transaction_number" />}
-                className={'form-group--transaction_number'}
-              >
-                <ControlGroup fill={true}>
-                  <InputGroup
-                    minimal={true}
-                    value={field.value}
-                    asyncControl={true}
-                    onBlur={handleTransactionNoBlur(form, field)}
-                  />
-                  <InputPrependButton
-                    buttonProps={{
-                      onClick: handleTransactionNumberChange,
-                      icon: <Icon icon={'settings-18'} />,
-                    }}
-                    tooltip={true}
-                    tooltipProps={{
-                      content: (
-                        <T
-                          id={
-                            'cash_flow.setting_your_auto_generated_transaction_number'
-                          }
-                        />
-                      ),
-                      position: Position.BOTTOM_LEFT,
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </Field>
         </Col>
       </Row>
       {/*------------ amount -----------*/}
@@ -291,12 +218,3 @@ function OwnerDrawingsFormFields({
     </React.Fragment>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withSettings(({ cashflowSetting }) => ({
-    transactionAutoIncrement: cashflowSetting?.autoIncrement,
-    transactionNextNumber: cashflowSetting?.nextNumber,
-    transactionNumberPrefix: cashflowSetting?.numberPrefix,
-  })),
-)(OwnerDrawingsFormFields);

packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx

@@ -48,19 +48,12 @@ import {
 } from '../utils';
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { MoneyInOutTransactionNoField } from '../../_components';
 
 /**
  * Transfer to account form fields.
  */
-function TransferToAccountFormFields({
+export default function TransferToAccountFormFields() {
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  transactionAutoIncrement,
-  transactionNumberPrefix,
-  transactionNextNumber,
-}) {
   // Money in dialog context.
   const { accounts, account, branches } = useMoneyOutDialogContext();
   const { values } = useFormikContext();
@@ -68,31 +61,6 @@ function TransferToAccountFormFields({
 
   const accountRef = useAutofocus();
 
-  // Handle tranaction number changing.
-  const handleTransactionNumberChange = () => {
-    openDialog('transaction-number-form');
-  };
-
-  // Handle transaction no. field blur.
-  const handleTransactionNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && transactionAutoIncrement) {
-      openDialog('transaction-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
-  // Syncs transaction number settings with form.
-  useObserveTransactionNoSettings(
-    transactionNumberPrefix,
-    transactionNextNumber,
-  );
-
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
 
@@ -147,42 +115,7 @@ function TransferToAccountFormFields({
         </Col>
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
-          <Field name={'transaction_number'}>
+          <MoneyInOutTransactionNoField />
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'transaction_number'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="transaction_number" />}
-                className={'form-group--transaction_number'}
-              >
-                <ControlGroup fill={true}>
-                  <InputGroup
-                    minimal={true}
-                    value={field.value}
-                    asyncControl={true}
-                    onBlur={handleTransactionNoBlur(form, field)}
-                  />
-                  <InputPrependButton
-                    buttonProps={{
-                      onClick: handleTransactionNumberChange,
-                      icon: <Icon icon={'settings-18'} />,
-                    }}
-                    tooltip={true}
-                    tooltipProps={{
-                      content: (
-                        <T
-                          id={
-                            'cash_flow.setting_your_auto_generated_transaction_number'
-                          }
-                        />
-                      ),
-                      position: Position.BOTTOM_LEFT,
-                    }}
-                  />
-                </ControlGroup>
-              </FormGroup>
-            )}
-          </Field>
         </Col>
       </Row>
       {/*------------ amount -----------*/}
@@ -298,11 +231,3 @@ function TransferToAccountFormFields({
     </React.Fragment>
   );
 }
-export default compose(
-  withDialogActions,
-  withSettings(({ cashflowSetting }) => ({
-    transactionAutoIncrement: cashflowSetting?.autoIncrement,
-    transactionNextNumber: cashflowSetting?.nextNumber,
-    transactionNumberPrefix: cashflowSetting?.numberPrefix,
-  })),
-)(TransferToAccountFormFields);

packages/webapp/src/containers/CashFlow/_components.tsx

@@ -0,0 +1,127 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { InputGroup, Position, ControlGroup } from '@blueprintjs/core';
+import * as R from 'ramda';
+
+import {
+  FFormGroup,
+  Icon,
+  InputPrependButton,
+  FormattedMessage as T,
+} from '@/components';
+import { useUpdateEffect } from '@/hooks';
+
+import withSettings from '@/containers/Settings/withSettings';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+/**
+ * Syncs cashflow auto-increment settings to the form once update.
+ */
+export const MoneyInOutSyncIncrementSettingsToForm = R.compose(
+  withDialogActions,
+  withSettings(({ cashflowSetting }) => ({
+    transactionAutoIncrement: cashflowSetting?.autoIncrement,
+    transactionNextNumber: cashflowSetting?.nextNumber,
+    transactionNumberPrefix: cashflowSetting?.numberPrefix,
+  })),
+)(
+  ({
+    // #withSettings
+    transactionAutoIncrement,
+    transactionNextNumber,
+    transactionNumberPrefix,
+  }) => {
+    const { setFieldValue } = useFormikContext();
+
+    useUpdateEffect(() => {
+      // Do not update if the invoice auto-increment is disabled.
+      if (!transactionAutoIncrement) return null;
+
+      const transactionNumber = transactionNumber(
+        transactionNumberPrefix,
+        transactionNextNumber,
+      );
+      setFieldValue('transaction_number', transactionNumber);
+    }, [setFieldValue, transactionNumberPrefix, transactionNextNumber]);
+
+    return null;
+  },
+);
+
+/**
+ * Money In/Out transaction number field.
+ */
+export const MoneyInOutTransactionNoField = R.compose(
+  withDialogActions,
+  withSettings(({ cashflowSetting }) => ({
+    transactionAutoIncrement: cashflowSetting?.autoIncrement,
+    transactionNextNumber: cashflowSetting?.nextNumber,
+    transactionNumberPrefix: cashflowSetting?.numberPrefix,
+  })),
+)(
+  ({
+    // #withDialogActions
+    openDialog,
+
+    // #withSettings
+    transactionAutoIncrement,
+  }) => {
+    const { values, setFieldValue } = useFormikContext();
+
+    // Handle tranaction number changing.
+    const handleTransactionNumberChange = () => {
+      openDialog('transaction-number-form');
+    };
+    // Handle transaction no. field blur.
+    const handleTransactionNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      if (values.transaction_number !== newValue && transactionAutoIncrement) {
+        openDialog('transaction-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      if (!transactionAutoIncrement) {
+        setFieldValue('transaction_number', values.transaction_number);
+        setFieldValue('transaction_number_manually', values.transaction_number);
+      }
+    };
+
+    return (
+      <FFormGroup
+        name={'transaction_number'}
+        label={<T id={'transaction_number'} />}
+      >
+        <ControlGroup fill={true}>
+          <InputGroup
+            minimal={true}
+            value={values.transaction_number}
+            asyncControl={true}
+            onBlur={handleTransactionNoBlur}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleTransactionNumberChange,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: (
+                <T
+                  id={
+                    'cash_flow.setting_your_auto_generated_transaction_number'
+                  }
+                />
+              ),
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
+    );
+  },
+);

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

@@ -10,7 +10,7 @@ import {
   ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import * as R from 'ramda';
 
 import {