feat: add auto increment/ money in.

src/containers/Dialogs/MoneyInDialog/MoneyInForm.js

@@ -14,10 +14,11 @@ import { CreateMoneyInFormSchema } from './MoneyInForm.schema';
 
 import { useMoneyInDailogContext } from './MoneyInDialogProvider';
 
+import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 
-import { compose } from 'utils';
+import { compose, transactionNumber } from 'utils';
 
 const defaultInitialValues = {
   date: moment(new Date()).format('YYYY-MM-DD'),
@@ -37,6 +38,11 @@ function MoneyInForm({
 
   // #withCurrentOrganization
   organization: { base_currency },
+
+  // #withSettings
+  transactionNextNumber,
+  transactionNumberPrefix,
+  transactionIncrementMode,
 }) {
   const {
     dialogName,
@@ -46,11 +52,20 @@ function MoneyInForm({
     submitPayload,
   } = useMoneyInDailogContext();
 
+  // transaction number.
+  const transactionNo = transactionNumber(
+    transactionNumberPrefix,
+    transactionNextNumber,
+  );
+
   // Initial form values.
   const initialValues = {
     ...defaultInitialValues,
     currency_code: base_currency,
     transaction_type: accountType,
+    ...(transactionIncrementMode && {
+      transaction_number: transactionNo,
+    }),
     cashflow_account_id: accountId,
   };
 
@@ -91,4 +106,9 @@ function MoneyInForm({
 export default compose(
   withDialogActions,
   withCurrentOrganization(),
+  withSettings(({ cashflowSetting }) => ({
+    transactionNextNumber: cashflowSetting?.nextNumber,
+    transactionNumberPrefix: cashflowSetting?.numberPrefix,
+    transactionIncrementMode: cashflowSetting?.autoIncrement,
+  })),
 )(MoneyInForm);

src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Form } from 'formik';
 
 import MoneyInFormFields from './MoneyInFormFields';
+import MoneyInFormDialog from './MoneyInFormDialog';
 import MoneyInFloatingActions from './MoneyInFloatingActions';
 
 /**
@@ -11,6 +12,7 @@ export default function MoneyInFormContent() {
   return (
     <Form>
       <MoneyInFormFields />
+      <MoneyInFormDialog />
       <MoneyInFloatingActions />
     </Form>
   );

src/containers/Dialogs/MoneyInDialog/MoneyInFormDialog.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+
+import TransactionNumberDialog from '../../Dialogs/TransactionNumberDialog';
+
+/**
+ * Moneny in / transaction number form dialog.
+ */
+export default function MoneyInFormDialog() {
+  const { setFieldValue } = useFormikContext();
+
+  // Update the form once the transaction number form submit confirm.
+  const handleTransactionNumberFormConfirm = ({
+    incrementNumber,
+    manually,
+  }) => {
+    setFieldValue('transaction_number', incrementNumber || '');
+    setFieldValue('transaction_number_manually', manually);
+  };
+  return (
+    <React.Fragment>
+      <TransactionNumberDialog
+        dialogName={'transaction-number-form'}
+        onConfirm={handleTransactionNumberFormConfirm}
+      />
+    </React.Fragment>
+  );
+}

src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js

@@ -15,8 +15,10 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
+  Icon,
   Col,
   Row,
+  InputPrependButton,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
@@ -27,19 +29,56 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
+  compose,
 } from 'utils';
 import { CLASSES } from 'common/classes';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
+import { useObserveTransactionNoSettings } from '../utils';
+import withSettings from 'containers/Settings/withSettings';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 /**
  * Other income form fields.
  */
-function OtherIncomeFormFields() {
+function OtherIncomeFormFields({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  transactionAutoIncrement,
+  transactionNumberPrefix,
+  transactionNextNumber,
+}) {
   // Money in dialog context.
   const { accounts } = useMoneyInDailogContext();
 
   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,
+  );
+
   return (
     <React.Fragment>
       <Row>
@@ -81,10 +120,31 @@ function OtherIncomeFormFields() {
                 helperText={<ErrorMessage name="transaction_number" />}
                 className={'form-group--transaction_number'}
               >
-                <InputGroup
+                <ControlGroup fill={true}>
-                  intent={inputIntent({ error, touched })}
+                  <InputGroup
-                  {...field}
+                    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>
             )}
           </FastField>
@@ -191,4 +251,11 @@ function OtherIncomeFormFields() {
   );
 }
 
-export default OtherIncomeFormFields;
+export default compose(
+  withDialogActions,
+  withSettings(({ cashflowSetting }) => ({
+    transactionAutoIncrement: cashflowSetting?.autoIncrement,
+    transactionNextNumber: cashflowSetting?.nextNumber,
+    transactionNumberPrefix: cashflowSetting?.numberPrefix,
+  })),
+)(OtherIncomeFormFields);

src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js

@@ -15,8 +15,10 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
+  Icon,
   Col,
   Row,
+  InputPrependButton,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
@@ -26,18 +28,57 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
+  compose
 } from 'utils';
 import { CLASSES } from 'common/classes';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
+import { useObserveTransactionNoSettings } from '../utils';
+import withSettings from 'containers/Settings/withSettings';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
+/**
 /**
  * Owner contribution form fields.
  */
-function OwnerContributionFormFields() {
+function OwnerContributionFormFields({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  transactionAutoIncrement,
+  transactionNumberPrefix,
+  transactionNextNumber,
+}) {
   // Money in dialog context.
   const { accounts } = useMoneyInDailogContext();
 
   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,
+  );
+
   return (
     <React.Fragment>
       <Row>
@@ -79,10 +120,31 @@ function OwnerContributionFormFields() {
                 helperText={<ErrorMessage name="transaction_number" />}
                 className={'form-group--transaction_number'}
               >
-                <InputGroup
+                <ControlGroup fill={true}>
-                  intent={inputIntent({ error, touched })}
+                  <InputGroup
-                  {...field}
+                    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>
             )}
           </FastField>
@@ -187,4 +249,11 @@ function OwnerContributionFormFields() {
   );
 }
 
-export default OwnerContributionFormFields;
+export default compose(
+  withDialogActions,
+  withSettings(({ cashflowSetting }) => ({
+    transactionAutoIncrement: cashflowSetting?.autoIncrement,
+    transactionNextNumber: cashflowSetting?.nextNumber,
+    transactionNumberPrefix: cashflowSetting?.numberPrefix,
+  })),
+)(OwnerContributionFormFields);

src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js

@@ -15,8 +15,10 @@ import {
   InputPrependText,
   MoneyInputGroup,
   FieldRequiredHint,
+  Icon,
   Col,
   Row,
+  InputPrependButton,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
@@ -27,19 +29,55 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
+  compose,
 } from 'utils';
 import { CLASSES } from 'common/classes';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
+import { useObserveTransactionNoSettings } from '../utils';
+import withSettings from 'containers/Settings/withSettings';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 /**
  * Transfer from account form fields.
  */
-function TransferFromAccountFormFields() {
+function TransferFromAccountFormFields({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  transactionAutoIncrement,
+  transactionNumberPrefix,
+  transactionNextNumber,
+}) {
   // Money in dialog context.
   const { accounts } = useMoneyInDailogContext();
 
   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,
+  );
   return (
     <React.Fragment>
       <Row>
@@ -81,10 +119,31 @@ function TransferFromAccountFormFields() {
                 helperText={<ErrorMessage name="transaction_number" />}
                 className={'form-group--transaction_number'}
               >
-                <InputGroup
+                <ControlGroup fill={true}>
-                  intent={inputIntent({ error, touched })}
+                  <InputGroup
-                  {...field}
+                    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>
             )}
           </FastField>
@@ -194,4 +253,11 @@ function TransferFromAccountFormFields() {
   );
 }
 
-export default TransferFromAccountFormFields;
+export default compose(
+  withDialogActions,
+  withSettings(({ cashflowSetting }) => ({
+    transactionAutoIncrement: cashflowSetting?.autoIncrement,
+    transactionNextNumber: cashflowSetting?.nextNumber,
+    transactionNumberPrefix: cashflowSetting?.numberPrefix,
+  })),
+)(TransferFromAccountFormFields);

src/containers/Dialogs/MoneyInDialog/utils.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { transactionNumber } from 'utils';
+
+export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const TransactionNo = transactionNumber(prefix, nextNumber);
+    setFieldValue('transacttion_numner', TransactionNo);
+  }, [setFieldValue, prefix, nextNumber]);
+};