fix(webapp): No currency in amount field on money in/out dialogs

2026-02-17 13:20:31 +00:00 · 2023-06-27 21:32:04 +02:00
parent c98fe00f88
commit 6373862044
28 changed files with 519 additions and 740 deletions
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInContentFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInContentFields.tsx
@@ -1,18 +1,22 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useFormikContext } from 'formik';

 import OwnerContributionFormFields from './OwnerContribution/OwnerContributionFormFields';
 import OtherIncomeFormFields from './OtherIncome/OtherIncomeFormFields';
 import TransferFromAccountFormFields from './TransferFromAccount/TransferFromAccountFormFields';
+import { MoneyInFieldsProvider } from './MoneyInFieldsProvider';

 /**
- *
- * @param param0
- * @returns
+ * Money-in dialog content.
+ * Switches between fields based on the given transaction type.
+ * @returns {JSX.Element}
 */
-export default function MoneyInContentFields({ accountType }) {
-  const handleTransactionType = () => {
-    switch (accountType) {
+export default function MoneyInContentFields() {
+  const { values } = useFormikContext();
+
+  const transactionFields = useMemo(() => {
+    switch (values.transaction_type) {
      case 'owner_contribution':
        return <OwnerContributionFormFields />;

@@ -24,6 +28,10 @@ export default function MoneyInContentFields({ accountType }) {
      default:
        break;
    }
-  };
-  return <React.Fragment>{handleTransactionType()}</React.Fragment>;
+  }, [values.transaction_type]);
+
+  // Cannot continue if transaction type or account is not selected.
+  if (!values.transaction_type || !values.cashflow_account_id) return null;
+
+  return <MoneyInFieldsProvider>{transactionFields}</MoneyInFieldsProvider>;
 }
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogContent.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogContent.tsx
@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-
 import { MoneyInDialogProvider } from './MoneyInDialogProvider';
 import MoneyInForm from './MoneyInForm';

--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogProvider.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogProvider.tsx
@@ -1,11 +1,10 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useState } from 'react';
 import { DialogContent } from '@/components';
 import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import {
  useCreateCashflowTransaction,
-  useAccount,
  useAccounts,
  useBranches,
  useCashflowAccounts,
@@ -18,22 +17,21 @@ const MoneyInDialogContent = React.createContext();
 * Money in dialog provider.
 */
 function MoneyInDialogProvider({
-  accountId,
+  accountId: defaultAccountId,
  accountType,
  dialogName,
  ...props
 }) {
+  // Holds the selected account id.
+  const [accountId, setAccountId] = useState<number | null>(defaultAccountId);
+
+  // Detarmines whether the feature is enabled.
  const { featureCan } = useFeatureCan();
  const isBranchFeatureCan = featureCan(Features.Branches);

  // Fetches accounts list.
  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();

-  // Fetches the specific account details.
-  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
-    enabled: !!accountId,
-  });
-
  // Fetches the branches list.
  const {
    data: branches,
@@ -41,10 +39,11 @@ function MoneyInDialogProvider({
    isSuccess: isBranchesSuccess,
  } = useBranches({}, { enabled: isBranchFeatureCan });

-  // Fetch cash flow list .
+  // Fetch cash flow list.
  const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
    useCashflowAccounts({}, { keepPreviousData: true });

+  // Mutation create cashflow transaction.
  const { mutateAsync: createCashflowTransactionMutate } =
    useCreateCashflowTransaction();

@@ -57,9 +56,12 @@ function MoneyInDialogProvider({
  // Provider data.
  const provider = {
    accounts,
-    account,
    branches,
+
    accountId,
+    defaultAccountId,
+    setAccountId,
+
    accountType,
    isAccountsLoading,
    isBranchesSuccess,
@@ -77,8 +79,7 @@ function MoneyInDialogProvider({
    isAccountsLoading ||
    isCashFlowAccountsLoading ||
    isBranchesLoading ||
-    isSettingsLoading ||
-    isAccountLoading;
+    isSettingsLoading;

  return (
    <DialogContent isLoading={isLoading}>
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInExchangeRateField.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInExchangeRateField.tsx
@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React from 'react';
+import { ExchangeRateMutedField } from '@/components';
+import { useForeignAccount } from './utils';
+import { useFormikContext } from 'formik';
+import { useMoneyInFieldsContext } from './MoneyInFieldsProvider';
+
+export function MoneyInExchangeRateField() {
+  const { account } = useMoneyInFieldsContext();
+  const { values } = useFormikContext();
+
+  const isForeigAccount = useForeignAccount();
+
+  if (!isForeigAccount) return null;
+
+  return (
+    <ExchangeRateMutedField
+      name={'exchange_rate'}
+      fromCurrency={values.currency_code}
+      toCurrency={account.currency_code}
+      formGroupProps={{ label: '', inline: false }}
+      date={values.date}
+      exchangeRate={values.exchange_rate}
+    />
+  );
+}
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFieldsProvider.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFieldsProvider.tsx
@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import { useAccount } from '@/hooks/query';
+import { useMoneyInDailogContext } from './MoneyInDialogProvider';
+
+const MoneyInFieldsContext = React.createContext();
+
+/**
+ * Money in dialog provider.
+ */
+function MoneyInFieldsProvider({ ...props }) {
+  const { accountId } = useMoneyInDailogContext();
+
+  // Fetches the specific account details.
+  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
+    enabled: !!accountId,
+  });
+  // Provider data.
+  const provider = {
+    account,
+  };
+  const isLoading = isAccountLoading;
+
+  return (
+    <DialogContent isLoading={isLoading}>
+      <MoneyInFieldsContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useMoneyInFieldsContext = () => React.useContext(MoneyInFieldsContext);
+
+export { MoneyInFieldsProvider, useMoneyInFieldsContext };
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInForm.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInForm.tsx
@@ -53,7 +53,6 @@ function MoneyInForm({
    accountId,
    accountType,
    createCashflowTransactionMutate,
-    submitPayload,
  } = useMoneyInDailogContext();

  // transaction number.
@@ -61,7 +60,6 @@ function MoneyInForm({
    transactionNumberPrefix,
    transactionNextNumber,
  );
-
  // Initial form values.
  const initialValues = {
    ...defaultInitialValues,
@@ -95,15 +93,13 @@ function MoneyInForm({
  };

  return (
-    <div>
-      <Formik
-        validationSchema={CreateMoneyInFormSchema}
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
-      >
-        <MoneyInFormContent />
-      </Formik>
-    </div>
+    <Formik
+      validationSchema={CreateMoneyInFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <MoneyInFormContent />
+    </Formik>
  );
 }

--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormFields.tsx
@@ -12,17 +12,13 @@ import { useMoneyInDailogContext } from './MoneyInDialogProvider';
 * Money in form fields.
 */
 function MoneyInFormFields() {
-  const { values } = useFormikContext();
-
  // Money in dialog context.
-  const { accountId } = useMoneyInDailogContext();
+  const { defaultAccountId } = useMoneyInDailogContext();

  return (
    <div className={Classes.DIALOG_BODY}>
-      <If condition={!accountId}>
-        <TransactionTypeFields />
-      </If>
-      <MoneyInContentFields accountType={values.transaction_type} />
+      {!defaultAccountId && <TransactionTypeFields />}
+      <MoneyInContentFields />
    </div>
  );
 }
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx
@@ -1,10 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 import {
  Classes,
  FormGroup,
-  InputGroup,
  TextArea,
  Position,
  ControlGroup,
@@ -18,14 +17,15 @@ import {
  FieldRequiredHint,
  Col,
  Row,
-  If,
  FeatureCan,
  BranchSelect,
  BranchSelectButton,
-  ExchangeRateMutedField,
+  FInputGroup,
+  FFormGroup,
+  FTextArea,
+  FMoneyInputGroup,
 } from '@/components';
 import { DateInput } from '@blueprintjs/datetime';
-import { useAutofocus } from '@/hooks';
 import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';

 import {
@@ -36,22 +36,18 @@ import {
 } from '@/utils';

 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
-import {
-  useSetPrimaryBranchToForm,
-  useForeignAccount,
-  BranchRowDivider,
-} from '../utils';
+import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
+import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';

 /**
 * Other income form fields.
 */
 export default function OtherIncomeFormFields() {
  // Money in dialog context.
-  const { accounts, account, branches } = useMoneyInDailogContext();
-  const { values } = useFormikContext();
-  const amountFieldRef = useAutofocus();
-  const isForeigAccount = useForeignAccount();
+  const { accounts, branches } = useMoneyInDailogContext();
+  const { account } = useMoneyInFieldsContext();

  // Sets the primary branch to form.
  useSetPrimaryBranchToForm();
@@ -61,17 +57,14 @@ export default function OtherIncomeFormFields() {
      <FeatureCan feature={Features.Branches}>
        <Row>
          <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup name={'amount'} label={<T id={'branch'} />}>
              <BranchSelect
                name={'branch_id'}
                branches={branches}
                input={BranchSelectButton}
                popoverProps={{ minimal: true }}
              />
-            </FormGroup>
+            </FFormGroup>
          </Col>
        </Row>
        <BranchRowDivider />
@@ -111,48 +104,26 @@ export default function OtherIncomeFormFields() {
          <MoneyInOutTransactionNoField />
        </Col>
      </Row>
-      {/*------------ amount -----------*/}
-      <FastField name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
+
+      {/*------------ Amount -----------*/}
+      <Row>
+        <Col xs={10}>
+          <FFormGroup
+            name={'amount'}
            label={<T id={'amount'} />}
            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-            className={'form-group--amount'}
          >
            <ControlGroup>
              <InputPrependText text={account.currency_code} />
-
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
+              <FMoneyInputGroup name={'amount'} minimal={true} />
            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
+          </FFormGroup>
+        </Col>
+      </Row>
+
+      {/*------------ Exchange rate -----------*/}
+      <MoneyInExchangeRateField />

-      <If condition={isForeigAccount}>
-        {/*------------ exchange rate -----------*/}
-        <ExchangeRateMutedField
-          name={'exchange_rate'}
-          fromCurrency={values.currency_code}
-          toCurrency={account.currency_code}
-          formGroupProps={{ label: '', inline: false }}
-          date={values.date}
-          exchangeRate={values.exchange_rate}
-        />
-      </If>
      <Row>
        <Col xs={5}>
          {/*------------ other income account -----------*/}
@@ -182,43 +153,24 @@ export default function OtherIncomeFormFields() {
            )}
          </FastField>
        </Col>
+
        <Col xs={5}>
          {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'reference_no'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="reference_no" />}
-                className={'form-group--reference-no'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup label={<T id={'reference_no'} />} name={'reference_no'}>
+            <FInputGroup name={'reference_no'} />
+          </FFormGroup>
        </Col>
      </Row>
-      {/*------------ description -----------*/}
-      <FastField name={'description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'description'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+
+      {/*------------ Description -----------*/}
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
    </React.Fragment>
  );
 }
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx
@@ -1,14 +1,7 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
-import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';

 import {
@@ -24,9 +17,12 @@ import {
  BranchSelect,
  BranchSelectButton,
  FeatureCan,
+  FFormGroup,
+  FMoneyInputGroup,
+  FTextArea,
+  FInputGroup,
 } from '@/components';
 import { DateInput } from '@blueprintjs/datetime';
-import { useAutofocus } from '@/hooks';
 import { ACCOUNT_TYPE, CLASSES, Features } from '@/constants';
 import {
  inputIntent,
@@ -41,6 +37,7 @@ import {
  BranchRowDivider,
 } from '../../MoneyInDialog/utils';
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';

 /**
 /**
@@ -48,12 +45,11 @@ import { MoneyInOutTransactionNoField } from '../../_components';
 */
 export default function OwnerContributionFormFields() {
  // Money in dialog context.
-  const { accounts, account, branches } = useMoneyInDailogContext();
+  const { accounts, branches } = useMoneyInDailogContext();
+  const { account } = useMoneyInFieldsContext();

  const { values } = useFormikContext();

-  const amountFieldRef = useAutofocus();
-
  const isForeigAccount = useForeignAccount();

  // Sets the primary branch to form.
@@ -64,21 +60,19 @@ export default function OwnerContributionFormFields() {
      <FeatureCan feature={Features.Branches}>
        <Row>
          <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
              <BranchSelect
                name={'branch_id'}
                branches={branches}
                input={BranchSelectButton}
                popoverProps={{ minimal: true }}
              />
-            </FormGroup>
+            </FFormGroup>
          </Col>
        </Row>
        <BranchRowDivider />
      </FeatureCan>
+
      <Row>
        <Col xs={5}>
          {/*------------ Date -----------*/}
@@ -113,36 +107,23 @@ export default function OwnerContributionFormFields() {
          <MoneyInOutTransactionNoField />
        </Col>
      </Row>
-      {/*------------ amount -----------*/}
-      <Field name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
+
+      {/*------------ Amount -----------*/}
+      <Row>
+        <Col xs={10}>
+          <FFormGroup
+            name={'amount'}
            label={<T id={'amount'} />}
            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-            className={'form-group--amount'}
          >
            <ControlGroup>
-              <InputPrependText text={account?.currency_code} />
-
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
+              <InputPrependText text={account?.currency_code || '--'} />
+              <FMoneyInputGroup name={'amount'} minimal={true} />
            </ControlGroup>
-          </FormGroup>
-        )}
-      </Field>
+          </FFormGroup>
+        </Col>
+      </Row>
+
      <If condition={isForeigAccount}>
        {/*------------ exchange rate -----------*/}
        <ExchangeRateMutedField
@@ -181,43 +162,24 @@ export default function OwnerContributionFormFields() {
            )}
          </FastField>
        </Col>
+
        <Col xs={5}>
          {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'reference_no'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="reference_no" />}
-                className={'form-group--reference-no'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
+            <FInputGroup name={'reference_no'} />
+          </FFormGroup>
        </Col>
      </Row>
+
      {/*------------ description -----------*/}
-      <FastField name={'description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'description'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FFormGroup>
    </React.Fragment>
  );
 }
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransactionTypeFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransactionTypeFields.tsx
@@ -10,6 +10,8 @@ import {
  ListSelect,
  Col,
  Row,
+  FFormGroup,
+  FSelect,
 } from '@/components';
 import { inputIntent } from '@/utils';
 import { CLASSES, getAddMoneyInOptions } from '@/constants';
@@ -21,7 +23,7 @@ import { useMoneyInDailogContext } from './MoneyInDialogProvider';
 */
 export default function TransactionTypeFields() {
  // Money in dialog context.
-  const { cashflowAccounts } = useMoneyInDailogContext();
+  const { cashflowAccounts, setAccountId } = useMoneyInDailogContext();

  // Retrieves the add money in button options.
  const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []);
@@ -29,6 +31,23 @@ export default function TransactionTypeFields() {
  return (
    <div className="trasnaction-type-fileds">
      <Row>
+        <Col xs={5}>
+          {/*------------ Transaction type -----------*/}
+          <FFormGroup
+            name={'transaction_type'}
+            label={<T id={'transaction_type'} />}
+            labelInfo={<FieldRequiredHint />}
+          >
+            <FSelect
+              name={'transaction_type'}
+              items={addMoneyInOptions}
+              popoverProps={{ minimal: true }}
+              valueAccessor={'value'}
+              textAccessor={'name'}
+            />
+          </FFormGroup>
+        </Col>
+
        <Col xs={5}>
          {/*------------ Current account -----------*/}
          <FastField name={'cashflow_account_id'}>
@@ -46,9 +65,10 @@ export default function TransactionTypeFields() {
              >
                <AccountsSuggestField
                  accounts={cashflowAccounts}
-                  onAccountSelected={({ id }) =>
-                    form.setFieldValue('cashflow_account_id', id)
-                  }
+                  onAccountSelected={({ id }) => {
+                    form.setFieldValue('cashflow_account_id', id);
+                    setAccountId(id);
+                  }}
                  inputProps={{
                    intent: inputIntent({ error, touched }),
                  }}
@@ -56,39 +76,6 @@ export default function TransactionTypeFields() {
              </FormGroup>
            )}
          </FastField>
-          {/*------------ Transaction type -----------*/}
-        </Col>
-        <Col xs={5}>
-          <Field name={'transaction_type'}>
-            {({
-              form: { values, setFieldValue },
-              field: { value },
-              meta: { error, touched },
-            }) => (
-              <FormGroup
-                label={<T id={'transaction_type'} />}
-                labelInfo={<FieldRequiredHint />}
-                helperText={<ErrorMessage name="transaction_type" />}
-                intent={inputIntent({ error, touched })}
-                className={classNames(
-                  CLASSES.FILL,
-                  'form-group--transaction_type',
-                )}
-              >
-                <ListSelect
-                  items={addMoneyInOptions}
-                  onItemSelect={(type) => {
-                    setFieldValue('transaction_type', type.value);
-                  }}
-                  filterable={false}
-                  selectedItem={value}
-                  selectedItemProp={'value'}
-                  textProp={'name'}
-                  popoverProps={{ minimal: true }}
-                />
-              </FormGroup>
-            )}
-          </Field>
        </Col>
      </Row>
    </div>
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx
@@ -1,33 +1,27 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
  FormattedMessage as T,
  AccountsSuggestField,
  InputPrependText,
-  MoneyInputGroup,
  FieldRequiredHint,
  Col,
  Row,
-  If,
-  ExchangeRateMutedField,
  FeatureCan,
  BranchSelect,
  BranchSelectButton,
+  FMoneyInputGroup,
+  FInputGroup,
+  FFormGroup,
+  FTextArea,
 } from '@/components';
-import { useAutofocus } from '@/hooks';
+import { MoneyInOutTransactionNoField } from '../../_components';
+import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';
 import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
-
 import {
  inputIntent,
  momentFormatter,
@@ -35,25 +29,19 @@ import {
  handleDateChange,
 } from '@/utils';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
+import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
 import {
  useSetPrimaryBranchToForm,
-  useForeignAccount,
  BranchRowDivider,
 } from '../../MoneyInDialog/utils';

-import { MoneyInOutTransactionNoField } from '../../_components';
-
 /**
 * Transfer from account form fields.
 */
 export default function TransferFromAccountFormFields() {
  // Money in dialog context.
-  const { accounts, account, branches } = useMoneyInDailogContext();
-
-  const isForeigAccount = useForeignAccount();
-  const amountFieldRef = useAutofocus();
-
-  const { values } = useFormikContext();
+  const { accounts, branches } = useMoneyInDailogContext();
+  const { account } = useMoneyInFieldsContext();

  // Sets the primary branch to form.
  useSetPrimaryBranchToForm();
@@ -63,17 +51,14 @@ export default function TransferFromAccountFormFields() {
      <FeatureCan feature={Features.Branches}>
        <Row>
          <Col xs={5}>
-            <FormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
              <BranchSelect
                name={'branch_id'}
                branches={branches}
                input={BranchSelectButton}
                popoverProps={{ minimal: true }}
              />
-            </FormGroup>
+            </FFormGroup>
          </Col>
        </Row>
        <BranchRowDivider />
@@ -112,50 +97,27 @@ export default function TransferFromAccountFormFields() {
          <MoneyInOutTransactionNoField />
        </Col>
      </Row>
-      {/*------------ amount -----------*/}
-      <FastField name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
+      {/*------------ Amount -----------*/}
+      <Row>
+        <Col xs={10}>
          <FormGroup
            label={<T id={'amount'} />}
            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-            className={'form-group--amount'}
          >
            <ControlGroup>
-              <InputPrependText text={account.currency_code} />
-
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
+              <InputPrependText text={account.currency_code || '--'} />
+              <FMoneyInputGroup name={'amount'} minimal={true} />
            </ControlGroup>
          </FormGroup>
-        )}
-      </FastField>
-      <If condition={isForeigAccount}>
-        {/*------------ exchange rate -----------*/}
-        <ExchangeRateMutedField
-          name={'exchange_rate'}
-          fromCurrency={values.currency_code}
-          toCurrency={account.currency_code}
-          formGroupProps={{ label: '', inline: false }}
-          date={values.date}
-          exchangeRate={values.exchange_rate}
-        />
-      </If>
+        </Col>
+      </Row>
+
+      {/*------------ Exchange rate -----------*/}
+      <MoneyInExchangeRateField />
+
      <Row>
        <Col xs={5}>
-          {/*------------ transfer from account -----------*/}
+          {/*------------ Transfer from account -----------*/}
          <FastField name={'credit_account_id'}>
            {({ form, field, meta: { error, touched } }) => (
              <FormGroup
@@ -185,43 +147,24 @@ export default function TransferFromAccountFormFields() {
            )}
          </FastField>
        </Col>
+
        <Col xs={5}>
          {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'reference_no'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="reference_no" />}
-                className={'form-group--reference-no'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
+            <FInputGroup name={'reference_no'} />
+          </FFormGroup>
        </Col>
      </Row>
-      {/*------------ description -----------*/}
-      <FastField name={'description'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'description'} />}
-          >
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+
+      {/*------------ Description -----------*/}
+      <FormGroup name={'description'} label={<T id={'description'} />}>
+        <FTextArea
+          name={'description'}
+          growVertically={true}
+          large={true}
+          fill={true}
+        />
+      </FormGroup>
    </React.Fragment>
  );
 }
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/index.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/index.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Dialog, DialogSuspense } from '@/components';
 import withDialogRedux from '@/components/DialogReduxConnect';
-
 import { compose } from '@/utils';

 const MoneyInDialogContent = React.lazy(() => import('./MoneyInDialogContent'));
--- a/packages/webapp/src/containers/CashFlow/MoneyInDialog/utils.tsx
+++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/utils.tsx
@@ -6,6 +6,7 @@ import { transactionNumber } from '@/utils';
 import { isEqual, isNull, first } from 'lodash';

 import { useMoneyInDailogContext } from './MoneyInDialogProvider';
+import { useMoneyInFieldsContext } from './MoneyInFieldsProvider';

 export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
  const { setFieldValue } = useFormikContext();
@@ -33,7 +34,7 @@ export const useSetPrimaryBranchToForm = () => {

 export const useForeignAccount = () => {
  const { values } = useFormikContext();
-  const { account } = useMoneyInDailogContext();
+  const { account } = useMoneyInFieldsContext();

  return (
    !isEqual(account.currency_code, values.currency_code) &&