Merge pull request #179 from bigcapitalhq/abouhuolia/big-29-no-currency-in-amount-field-on-money-inout-dialogs

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

packages/webapp/src/constants/sidebarMenu.tsx

@@ -25,6 +25,7 @@ import {
   CashflowAction,
   PreferencesAbility,
 } from '@/constants/abilityOption';
+import { DialogsName } from './dialogs';
 
 export const SidebarMenu = [
   // ---------------
@@ -114,7 +115,7 @@ export const SidebarMenu = [
                 text: <T id={'sidebar.new_item_category'} />,
                 href: '/items/categories/new',
                 type: ISidebarMenuItemType.Dialog,
-                dialogName: 'item-category-form',
+                dialogName: DialogsName.ItemCategoryForm,
                 permission: {
                   subject: AbilitySubject.Item,
                   ability: ItemAction.Create,
@@ -458,7 +459,7 @@ export const SidebarMenu = [
             text: <T id={'sidebar.add_money_in'} />,
             href: '/cashflow-accounts',
             type: ISidebarMenuItemType.Dialog,
-            dialogName: 'money-in',
+            dialogName: DialogsName.MoneyInForm,
             permission: {
               subject: AbilitySubject.Cashflow,
               ability: CashflowAction.Create,
@@ -468,6 +469,7 @@ export const SidebarMenu = [
             text: <T id={'sidebar.add_money_out'} />,
             href: '/cashflow-accounts',
             type: ISidebarMenuItemType.Dialog,
+            dialogName: DialogsName.MoneyOutForm,
             permission: {
               subject: AbilitySubject.Cashflow,
               ability: CashflowAction.Create,
@@ -477,6 +479,7 @@ export const SidebarMenu = [
             text: <T id={'sidebar.add_cash_account'} />,
             href: '/cashflow-accounts',
             type: ISidebarMenuItemType.Dialog,
+            dialogName: DialogsName.AccountForm,
             permission: {
               subject: AbilitySubject.Cashflow,
               ability: CashflowAction.Create,
@@ -486,6 +489,7 @@ export const SidebarMenu = [
             text: <T id={'sidebar.add_bank_account'} />,
             href: '/cashflow-accounts',
             type: ISidebarMenuItemType.Dialog,
+            dialogName: DialogsName.AccountForm,
             permission: {
               subject: AbilitySubject.Cashflow,
               ability: CashflowAction.Create,

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';
 
 /**
- *
+ * Money-in dialog content.
- * @param param0
+ * Switches between fields based on the given transaction type.
- * @returns
+ * @returns {JSX.Element}
  */
-export default function MoneyInContentFields({ accountType }) {
+export default function MoneyInContentFields() {
-  const handleTransactionType = () => {
+  const { values } = useFormikContext();
-    switch (accountType) {
+
+  const transactionFields = useMemo(() => {
+    switch (values.transaction_type) {
       case 'owner_contribution':
         return <OwnerContributionFormFields />;
 
@@ -24,6 +28,10 @@ export default function MoneyInContentFields({ accountType }) {
       default:
         break;
     }
-  };
+  }, [values.transaction_type]);
-  return <React.Fragment>{handleTransactionType()}</React.Fragment>;
+
+  // Cannot continue if transaction type or account is not selected.
+  if (!values.transaction_type || !values.cashflow_account_id) return null;
+
+  return <MoneyInFieldsProvider>{transactionFields}</MoneyInFieldsProvider>;
 }

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';
 

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 of the dialog.
+  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 ||
+    isSettingsLoading;
-    isAccountLoading;
 
   return (
     <DialogContent isLoading={isLoading}>

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}
+    />
+  );
+}

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 };

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
-      <Formik
+      validationSchema={CreateMoneyInFormSchema}
-        validationSchema={CreateMoneyInFormSchema}
+      initialValues={initialValues}
-        initialValues={initialValues}
+      onSubmit={handleFormSubmit}
-        onSubmit={handleFormSubmit}
+    >
-      >
+      <MoneyInFormContent />
-        <MoneyInFormContent />
+    </Formik>
-      </Formik>
-    </div>
   );
 }
 

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}>
+      {!defaultAccountId && <TransactionTypeFields />}
-        <TransactionTypeFields />
+      <MoneyInContentFields />
-      </If>
-      <MoneyInContentFields accountType={values.transaction_type} />
     </div>
   );
 }

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 {
+import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
-  useSetPrimaryBranchToForm,
-  useForeignAccount,
-  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 { accounts, branches } = useMoneyInDailogContext();
-  const { values } = useFormikContext();
+  const { account } = useMoneyInFieldsContext();
-  const amountFieldRef = useAutofocus();
-  const isForeigAccount = useForeignAccount();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -61,17 +57,14 @@ export default function OtherIncomeFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
+            <FFormGroup name={'amount'} label={<T id={'branch'} />}>
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
@@ -113,48 +106,25 @@ export default function OtherIncomeFormFields() {
         </Col>
       </Row>
 
-      {/*------------ amount -----------*/}
+      {/*------------ Amount -----------*/}
-      <FastField name={'amount'}>
+      <Row>
-        {({
+        <Col xs={10}>
-          form: { values, setFieldValue },
+          <FFormGroup
-          field: { value },
+            name={'amount'}
-          meta: { error, touched },
-        }) => (
-          <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} />
-
+              <FMoneyInputGroup name={'amount'} minimal={true} />
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
             </ControlGroup>
-          </FormGroup>
+          </FFormGroup>
-        )}
+        </Col>
-      </FastField>
+      </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 -----------*/}
@@ -184,43 +154,24 @@ export default function OtherIncomeFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
+          <FFormGroup label={<T id={'reference_no'} />} name={'reference_no'}>
-            {({ form, field, meta: { error, touched } }) => (
+            <FInputGroup name={'reference_no'} />
-              <FormGroup
+          </FFormGroup>
-                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>
         </Col>
       </Row>
-      {/*------------ description -----------*/}
+
-      <FastField name={'description'}>
+      {/*------------ Description -----------*/}
-        {({ field, meta: { error, touched } }) => (
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
-          <FormGroup
+        <FTextArea
-            label={<T id={'description'} />}
+          name={'description'}
-            className={'form-group--description'}
+          growVertically={true}
-            intent={inputIntent({ error, touched })}
+          large={true}
-            helperText={<ErrorMessage name={'description'} />}
+          fill={true}
-          >
+        />
-            <TextArea
+      </FFormGroup>
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
     </React.Fragment>
   );
 }

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

@@ -1,32 +1,24 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
-import {
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
 import classNames from 'classnames';
-
+import { DateInput } from '@blueprintjs/datetime';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   InputPrependText,
-  MoneyInputGroup,
   FieldRequiredHint,
   Col,
   Row,
-  If,
-  ExchangeRateMutedField,
   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,
@@ -37,10 +29,11 @@ import {
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
   useSetPrimaryBranchToForm,
-  useForeignAccount,
   BranchRowDivider,
 } from '../../MoneyInDialog/utils';
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
+import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';
 
 /**
 /**
@@ -48,13 +41,8 @@ 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.
   useSetPrimaryBranchToForm();
@@ -64,21 +52,19 @@ export default function OwnerContributionFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
+            <FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
       </FeatureCan>
+
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -113,47 +99,26 @@ export default function OwnerContributionFormFields() {
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
-      {/*------------ amount -----------*/}
+
-      <Field name={'amount'}>
+      {/*------------ Amount -----------*/}
-        {({
+      <Row>
-          form: { values, setFieldValue },
+        <Col xs={10}>
-          field: { value },
+          <FFormGroup
-          meta: { error, touched },
+            name={'amount'}
-        }) => (
-          <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} />
+              <InputPrependText text={account?.currency_code || '--'} />
-
+              <FMoneyInputGroup name={'amount'} minimal={true} />
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
             </ControlGroup>
-          </FormGroup>
+          </FFormGroup>
-        )}
+        </Col>
-      </Field>
+      </Row>
-      <If condition={isForeigAccount}>
+
-        {/*------------ exchange rate -----------*/}
+      {/*------------ Exchange rate -----------*/}
-        <ExchangeRateMutedField
+      <MoneyInExchangeRateField />
-          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}>
           {/*------------ equity account -----------*/}
@@ -181,43 +146,24 @@ export default function OwnerContributionFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
-            {({ form, field, meta: { error, touched } }) => (
+            <FInputGroup name={'reference_no'} />
-              <FormGroup
+          </FFormGroup>
-                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>
         </Col>
       </Row>
-      {/*------------ description -----------*/}
+
-      <FastField name={'description'}>
+      {/*------------ Description -----------*/}
-        {({ field, meta: { error, touched } }) => (
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
-          <FormGroup
+        <FTextArea
-            label={<T id={'description'} />}
+          name={'description'}
-            className={'form-group--description'}
+          growVertically={true}
-            intent={inputIntent({ error, touched })}
+          large={true}
-            helperText={<ErrorMessage name={'description'} />}
+          fill={true}
-          >
+        />
-            <TextArea
+      </FFormGroup>
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
     </React.Fragment>
   );
 }

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 }) =>
+                  onAccountSelected={({ id }) => {
-                    form.setFieldValue('cashflow_account_id', 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>

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 {
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  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 { accounts, branches } = useMoneyInDailogContext();
-
+  const { account } = useMoneyInFieldsContext();
-  const isForeigAccount = useForeignAccount();
-  const amountFieldRef = useAutofocus();
-
-  const { values } = useFormikContext();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -63,17 +51,14 @@ export default function TransferFromAccountFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
+            <FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
               <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 -----------*/}
+      {/*------------ Amount -----------*/}
-      <FastField name={'amount'}>
+      <Row>
-        {({
+        <Col xs={10}>
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
           <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} />
+              <InputPrependText text={account.currency_code || '--'} />
-
+              <FMoneyInputGroup name={'amount'} minimal={true} />
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
             </ControlGroup>
           </FormGroup>
-        )}
+        </Col>
-      </FastField>
+      </Row>
-      <If condition={isForeigAccount}>
+
-        {/*------------ exchange rate -----------*/}
+      {/*------------ Exchange rate -----------*/}
-        <ExchangeRateMutedField
+      <MoneyInExchangeRateField />
-          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}>
-          {/*------------ 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'}>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
-            {({ form, field, meta: { error, touched } }) => (
+            <FInputGroup name={'reference_no'} />
-              <FormGroup
+          </FFormGroup>
-                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>
         </Col>
       </Row>
-      {/*------------ description -----------*/}
+
-      <FastField name={'description'}>
+      {/*------------ Description -----------*/}
-        {({ field, meta: { error, touched } }) => (
+      <FormGroup name={'description'} label={<T id={'description'} />}>
-          <FormGroup
+        <FTextArea
-            label={<T id={'description'} />}
+          name={'description'}
-            className={'form-group--description'}
+          growVertically={true}
-            intent={inputIntent({ error, touched })}
+          large={true}
-            helperText={<ErrorMessage name={'description'} />}
+          fill={true}
-          >
+        />
-            <TextArea
+      </FormGroup>
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
     </React.Fragment>
   );
 }

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'));

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) &&

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

@@ -1,13 +1,22 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useFormikContext } from 'formik';
 
 import OtherExpnseFormFields from './OtherExpense/OtherExpnseFormFields';
 import OwnerDrawingsFormFields from './OwnerDrawings/OwnerDrawingsFormFields';
 import TransferToAccountFormFields from './TransferToAccount/TransferToAccountFormFields';
+import { MoneyOutFieldsProvider } from './MoneyOutFieldsProvider';
 
-function MoneyOutContentFields({ accountType }) {
+/**
-  const handleTransactionType = () => {
+ * Money out content fields.
-    switch (accountType) {
+ * Switches between form fields based on the given transaction type.
+ * @returns {JSX.Element}
+ */
+function MoneyOutContentFields() {
+  const { values } = useFormikContext();
+
+  const transactionType = useMemo(() => {
+    switch (values.transaction_type) {
       case 'OwnerDrawing':
         return <OwnerDrawingsFormFields />;
 
@@ -19,8 +28,12 @@ function MoneyOutContentFields({ accountType }) {
       default:
         break;
     }
-  };
+  }, [values.transaction_type]);
-  return <React.Fragment>{handleTransactionType()}</React.Fragment>;
+
+  // Cannot continue if transaction type or account is not selected.
+  if (!values.transaction_type || !values.cashflow_account_id) return null;
+
+  return <MoneyOutFieldsProvider>{transactionType}</MoneyOutFieldsProvider>;
 }
 
 export default MoneyOutContentFields;

packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutDialogProvider.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 {
   useAccounts,
-  useAccount,
   useBranches,
   useCreateCashflowTransaction,
   useCashflowAccounts,
@@ -17,7 +16,15 @@ const MoneyInDialogContent = React.createContext();
 /**
  * Money out dialog provider.
  */
-function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
+function MoneyOutProvider({
+  accountId: defaultAccountId,
+  accountType,
+  dialogName,
+  ...props
+}) {
+  // Holds the selected account id of the dialog.
+  const [accountId, setAccountId] = useState<number | null>(defaultAccountId);
+
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
@@ -25,11 +32,6 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
   // 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,6 +43,7 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
   const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
     useCashflowAccounts({}, { keepPreviousData: true });
 
+  // Mutation to create a new cashflow account.
   const { mutateAsync: createCashflowTransactionMutate } =
     useCreateCashflowTransaction();
 
@@ -52,9 +55,11 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
 
   // Provider data.
   const provider = {
-    accounts,
-    account,
     accountId,
+    setAccountId,
+    defaultAccountId,
+
+    accounts,
     accountType,
     branches,
     isAccountsLoading,
@@ -73,8 +78,7 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
     isAccountsLoading ||
     isCashFlowAccountsLoading ||
     isBranchesLoading ||
-    isSettingsLoading ||
+    isSettingsLoading;
-    isAccountLoading;
 
   return (
     <DialogContent isLoading={isLoading}>

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

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { useForeignAccount } from './utils';
+import { ExchangeRateMutedField } from '@/components';
+import { useMoneyOutFieldsContext } from './MoneyOutFieldsProvider';
+
+/**
+ * Money-out exchange rate field.
+ * @returns {JSX.Element}
+ */
+export function MoneyOutExchangeRateField() {
+  const { values } = useFormikContext();
+
+  const { account } = useMoneyOutFieldsContext();
+  const isForeigAccount = useForeignAccount();
+
+  // Cannot continue if the account is not foreign account.
+  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}
+    />
+  );
+}

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

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import React from 'react';
+import { DialogContent } from '@/components';
+import { useAccount } from '@/hooks/query';
+import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
+
+const MoneyOutFieldsContext = React.createContext();
+
+/**
+ * Money out fields dialog provider.
+ */
+function MoneyOutFieldsProvider({ ...props }) {
+  const { accountId } = useMoneyOutDialogContext();
+
+  // 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}>
+      <MoneyOutFieldsContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useMoneyOutFieldsContext = () => React.useContext(MoneyOutFieldsContext);
+
+export { MoneyOutFieldsProvider, useMoneyOutFieldsContext };

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

@@ -24,18 +24,16 @@ function MoneyOutFloatingActions({
     useMoneyOutDialogContext();
 
   // handle submit as draft button click.
-  const handleSubmitDraftBtnClick = (event) => {
+  const handleSubmitDraftBtnClick = () => {
     setSubmitPayload({ publish: false });
     submitForm();
   };
-
   // Handle submit  button click.
-  const handleSubmittBtnClick = (event) => {
+  const handleSubmittBtnClick = () => {
     setSubmitPayload({ publish: true });
   };
-
   // Handle close button click.
-  const handleCloseBtnClick = (event) => {
+  const handleCloseBtnClick = () => {
     closeDialog(dialogName);
   };
 

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

@@ -92,15 +92,13 @@ function MoneyOutForm({
       });
   };
   return (
-    <div>
+    <Formik
-      <Formik
+      validationSchema={CreateMoneyOutSchema}
-        validationSchema={CreateMoneyOutSchema}
+      initialValues={initialValues}
-        initialValues={initialValues}
+      onSubmit={handleFormSubmit}
-        onSubmit={handleFormSubmit}
+    >
-      >
+      <MoneyOutFormContent />
-        <MoneyOutFormContent />
+    </Formik>
-      </Formik>
-    </div>
   );
 }
 

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

@@ -17,6 +17,7 @@ export default function MoneyOutFormDialog() {
     setFieldValue('transaction_number', incrementNumber || '');
     setFieldValue('transaction_number_manually', manually);
   };
+
   return (
     <React.Fragment>
       <TransactionNumberDialog

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

@@ -1,28 +1,18 @@
 // @ts-nocheck
 import React from 'react';
-import { useFormikContext } from 'formik';
 import { Classes } from '@blueprintjs/core';
 
-import { If } from '@/components';
-
 import MoneyOutContentFields from './MoneyOutContentFields';
 import TransactionTypeFields from './TransactionTypeFields';
-import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
 
 /**
  * Money out form fields.
  */
 function MoneyOutFormFields() {
-  // Money in dialog context.
-  const { accountId } = useMoneyOutDialogContext();
-
-  const { values } = useFormikContext();
   return (
     <div className={Classes.DIALOG_BODY}>
-      <If condition={!accountId}>
+      <TransactionTypeFields />
-        <TransactionTypeFields />
+      <MoneyOutContentFields />
-      </If>
-      <MoneyOutContentFields accountType={values.transaction_type} />
     </div>
   );
 }

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

@@ -1,33 +1,25 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
-import {
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   InputPrependText,
-  MoneyInputGroup,
   FieldRequiredHint,
   Col,
   Row,
-  If,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
-  ExchangeRateMutedField,
+  FTextArea,
+  FFormGroup,
+  FInputGroup,
+  FMoneyInputGroup,
 } from '@/components';
 import { DateInput } from '@blueprintjs/datetime';
-import { useAutofocus } from '@/hooks';
 import { Features, ACCOUNT_TYPE } from '@/constants';
-
 import {
   inputIntent,
   momentFormatter,
@@ -36,25 +28,18 @@ import {
 } from '@/utils';
 import { CLASSES } from '@/constants/classes';
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
-import {
+import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
-  useSetPrimaryBranchToForm,
-  useForeignAccount,
-  BranchRowDivider,
-} from '../utils';
-
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { MoneyOutExchangeRateField } from '../MoneyOutExchangeRateField';
+import { useMoneyOutFieldsContext } from '../MoneyOutFieldsProvider';
 
 /**
  * Other expense form fields.
  */
 export default function OtherExpnseFormFields() {
   // Money in dialog context.
-  const { accounts, account, branches } = useMoneyOutDialogContext();
+  const { accounts, branches } = useMoneyOutDialogContext();
-
+  const { account } = useMoneyOutFieldsContext();
-  const isForeigAccount = useForeignAccount();
-  const { values } = useFormikContext();
-
-  const amountFieldRef = useAutofocus();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -64,21 +49,19 @@ export default function OtherExpnseFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
+            <FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
       </FeatureCan>
+
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -113,47 +96,27 @@ export default function OtherExpnseFormFields() {
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
+
       {/*------------ amount -----------*/}
-      <FastField name={'amount'}>
+
-        {({
+      <Row>
-          form: { values, setFieldValue },
+        <Col xs={10}>
-          field: { value },
+          <FFormGroup
-          meta: { error, touched },
+            name={'amount'}
-        }) => (
-          <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} />
-
+              <FMoneyInputGroup name={'amount'} minimal={true} />
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
             </ControlGroup>
-          </FormGroup>
+          </FFormGroup>
-        )}
+        </Col>
-      </FastField>
+      </Row>
-      <If condition={isForeigAccount}>
+
-        {/*------------ exchange rate -----------*/}
+      {/*------------ Exchange rate -----------*/}
-        <ExchangeRateMutedField
+      <MoneyOutExchangeRateField />
-          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 expense account -----------*/}
@@ -183,44 +146,24 @@ export default function OtherExpnseFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
-            {({ form, field, meta: { error, touched } }) => (
+            <FInputGroup name={'reference_no'} />
-              <FormGroup
+          </FFormGroup>
-                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>
         </Col>
       </Row>
 
       {/*------------ description -----------*/}
-      <FastField name={'description'}>
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
-        {({ field, meta: { error, touched } }) => (
+        <FTextArea
-          <FormGroup
+          name={'description'}
-            label={<T id={'description'} />}
+          growVertically={true}
-            className={'form-group--description'}
+          large={true}
-            intent={inputIntent({ error, touched })}
+          fill={true}
-            helperText={<ErrorMessage name={'description'} />}
+        />
-          >
+      </FFormGroup>
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
     </React.Fragment>
   );
 }

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

@@ -1,31 +1,24 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import {
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   InputPrependText,
-  MoneyInputGroup,
   FieldRequiredHint,
-  If,
   Col,
   Row,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
-  ExchangeRateMutedField,
+  FFormGroup,
+  FTextArea,
+  FInputGroup,
+  FMoneyInputGroup,
 } from '@/components';
-import { useAutofocus } from '@/hooks';
 import { CLASSES, Features, ACCOUNT_TYPE } from '@/constants';
 import {
   inputIntent,
@@ -36,21 +29,19 @@ import {
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 import {
   useSetPrimaryBranchToForm,
-  useForeignAccount,
   BranchRowDivider,
 } from '../../MoneyOutDialog/utils';
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { useMoneyOutFieldsContext } from '../MoneyOutFieldsProvider';
+import { MoneyOutExchangeRateField } from '../MoneyOutExchangeRateField';
 
 /**
  * Owner drawings form fields.
  */
 export default function OwnerDrawingsFormFields() {
   // Money out dialog context.
-  const { accounts, account, branches } = useMoneyOutDialogContext();
+  const { accounts, branches } = useMoneyOutDialogContext();
-  const { values } = useFormikContext();
+  const { account } = useMoneyOutFieldsContext();
-  const isForeigAccount = useForeignAccount();
-
-  const amountFieldRef = useAutofocus();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -60,21 +51,19 @@ export default function OwnerDrawingsFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
+            <FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
       </FeatureCan>
+
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -109,48 +98,27 @@ export default function OwnerDrawingsFormFields() {
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
-      {/*------------ amount -----------*/}
+
-      <Field name={'amount'}>
+      {/*------------ Amount -----------*/}
-        {({
+
-          form: { values, setFieldValue },
+      <Row>
-          field: { value },
+        <Col xs={10}>
-          meta: { error, touched },
-        }) => (
           <FormGroup
+            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} />
-
+              <FMoneyInputGroup name={'amount'} minimal={true} />
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-                intent={inputIntent({ error, touched })}
-              />
             </ControlGroup>
           </FormGroup>
-        )}
+        </Col>
-      </Field>
+      </Row>
+
+      {/*------------ Exchange rate -----------*/}
+      <MoneyOutExchangeRateField />
 
-      <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}>
           {/*------------ equitty account -----------*/}
@@ -177,44 +145,24 @@ export default function OwnerDrawingsFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
-            {({ form, field, meta: { error, touched } }) => (
+            <FInputGroup name={'reference_no'} />
-              <FormGroup
+          </FFormGroup>
-                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>
         </Col>
       </Row>
 
       {/*------------ description -----------*/}
-      <FastField name={'description'}>
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
-        {({ field, meta: { error, touched } }) => (
+        <FTextArea
-          <FormGroup
+          name={'description'}
-            label={<T id={'description'} />}
+          growVertically={true}
-            className={'form-group--description'}
+          large={true}
-            intent={inputIntent({ error, touched })}
+          fill={true}
-            helperText={<ErrorMessage name={'description'} />}
+        />
-          >
+      </FFormGroup>
-            <TextArea
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
     </React.Fragment>
   );
 }

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

@@ -1,22 +1,21 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
-import { FastField, Field, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 import { FormGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   FieldRequiredHint,
-  ListSelect,
   Col,
   Row,
+  FSelect,
+  FFormGroup,
 } from '@/components';
-
 import { inputIntent } from '@/utils';
-import { CLASSES } from '@/constants/classes';
 import { getAddMoneyOutOptions } from '@/constants/cashflowOptions';
-
 import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
+import { CLASSES } from '@/constants/classes';
 
 /**
  * Transaction type fields.
@@ -27,9 +26,32 @@ function TransactionTypeFields() {
 
   const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []);
 
+  // Money in dialog context.
+  const { defaultAccountId, setAccountId } = useMoneyOutDialogContext();
+
+  // Cannot continue if the default account id is defined.
+  if (defaultAccountId) return null;
+
   return (
     <div className="trasnaction-type-fileds">
       <Row>
+        {/*------------ Transaction type -----------*/}
+        <Col xs={5}>
+          <FFormGroup
+            name={'transaction_type'}
+            label={<T id={'transaction_type'} />}
+            labelInfo={<FieldRequiredHint />}
+          >
+            <FSelect
+              name={'transaction_type'}
+              items={addMoneyOutOptions}
+              popoverProps={{ minimal: true }}
+              valueAccessor={'value'}
+              textAccessor={'name'}
+            />
+          </FFormGroup>
+        </Col>
+
         <Col xs={5}>
           {/*------------ Current account -----------*/}
           <FastField name={'cashflow_account_id'}>
@@ -47,9 +69,10 @@ function TransactionTypeFields() {
               >
                 <AccountsSuggestField
                   accounts={cashflowAccounts}
-                  onAccountSelected={({ id }) =>
+                  onAccountSelected={({ id }) => {
-                    form.setFieldValue('cashflow_account_id', id)
+                    form.setFieldValue('cashflow_account_id', id);
-                  }
+                    setAccountId(id);
+                  }}
                   inputProps={{
                     intent: inputIntent({ error, touched }),
                   }}
@@ -57,39 +80,6 @@ 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={addMoneyOutOptions}
-                  onItemSelect={(type) => {
-                    setFieldValue('transaction_type', type.value);
-                  }}
-                  filterable={false}
-                  selectedItem={value}
-                  selectedItemProp={'value'}
-                  textProp={'name'}
-                  popoverProps={{ minimal: true }}
-                />
-              </FormGroup>
-            )}
-          </Field>
         </Col>
       </Row>
     </div>

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

@@ -1,65 +1,46 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
-import {
+import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
   FormattedMessage as T,
   AccountsSuggestField,
   InputPrependText,
-  MoneyInputGroup,
   FieldRequiredHint,
-  Icon,
   Col,
   Row,
-  If,
-  InputPrependButton,
   FeatureCan,
   BranchSelect,
   BranchSelectButton,
-  ExchangeRateMutedField,
+  FFormGroup,
+  FTextArea,
+  FMoneyInputGroup,
+  FInputGroup,
 } from '@/components';
 import { DateInput } from '@blueprintjs/datetime';
-import { useAutofocus } from '@/hooks';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
-
 import {
   inputIntent,
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose,
 } from '@/utils';
 import { Features } from '@/constants';
 import { CLASSES } from '@/constants/classes';
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
-import {
+import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
-  useObserveTransactionNoSettings,
-  useSetPrimaryBranchToForm,
-  useForeignAccount,
-  BranchRowDivider,
-} from '../utils';
-import withSettings from '@/containers/Settings/withSettings';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { MoneyInOutTransactionNoField } from '../../_components';
+import { MoneyOutExchangeRateField } from '../MoneyOutExchangeRateField';
+import { useMoneyOutFieldsContext } from '../MoneyOutFieldsProvider';
 
 /**
  * Transfer to account form fields.
  */
 export default function TransferToAccountFormFields() {
   // Money in dialog context.
-  const { accounts, account, branches } = useMoneyOutDialogContext();
+  const { accounts, branches } = useMoneyOutDialogContext();
-  const { values } = useFormikContext();
+  const { account } = useMoneyOutFieldsContext();
-  const isForeigAccount = useForeignAccount();
-
-  const accountRef = useAutofocus();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -69,21 +50,19 @@ export default function TransferToAccountFormFields() {
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FormGroup
+            <FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
-            </FormGroup>
+            </FFormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
       </FeatureCan>
+
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -113,52 +92,32 @@ export default function TransferToAccountFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
-      {/*------------ amount -----------*/}
+
-      <FastField name={'amount'}>
+      {/*------------ Amount -----------*/}
-        {({
+      <Row>
-          form: { values, setFieldValue },
+        <Col xs={10}>
-          field: { value },
+          <FFormGroup
-          meta: { error, touched },
+            name={'amount'}
-        }) => (
-          <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} />
-
+              <FMoneyInputGroup name={'amount'} minimal={true} />
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                inputRef={accountRef}
-                intent={inputIntent({ error, touched })}
-              />
             </ControlGroup>
-          </FormGroup>
+          </FFormGroup>
-        )}
+        </Col>
-      </FastField>
+      </Row>
-      <If condition={isForeigAccount}>
+
-        {/*------------ exchange rate -----------*/}
+      {/*------------ Exchange rate -----------*/}
-        <ExchangeRateMutedField
+      <MoneyOutExchangeRateField />
-          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}>
           {/*------------ transfer from account -----------*/}
@@ -191,43 +150,24 @@ export default function TransferToAccountFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Reference -----------*/}
-          <FastField name={'reference_no'}>
+          <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
-            {({ form, field, meta: { error, touched } }) => (
+            <FInputGroup name={'reference_no'} />
-              <FormGroup
+          </FFormGroup>
-                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>
         </Col>
       </Row>
-      {/*------------ description -----------*/}
+
-      <FastField name={'description'}>
+      {/*------------ Description -----------*/}
-        {({ field, meta: { error, touched } }) => (
+      <FFormGroup name={'description'} label={<T id={'description'} />}>
-          <FormGroup
+        <FTextArea
-            label={<T id={'description'} />}
+          name={'description'}
-            className={'form-group--description'}
+          growVertically={true}
-            intent={inputIntent({ error, touched })}
+          large={true}
-            helperText={<ErrorMessage name={'description'} />}
+          fill={true}
-          >
+        />
-            <TextArea
+      </FFormGroup>
-              growVertically={true}
-              large={true}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
     </React.Fragment>
   );
 }

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

@@ -6,6 +6,7 @@ import { transactionNumber } from '@/utils';
 import { first, isEqual, isNull } from 'lodash';
 
 import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
+import { useMoneyOutFieldsContext } from './MoneyOutFieldsProvider';
 
 export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
   const { setFieldValue } = useFormikContext();
@@ -33,7 +34,7 @@ export const useSetPrimaryBranchToForm = () => {
 
 export const useForeignAccount = () => {
   const { values } = useFormikContext();
-  const { account } = useMoneyOutDialogContext();
+  const { account } = useMoneyOutFieldsContext();
 
   return (
     !isEqual(account.currency_code, values.currency_code) &&

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

@@ -38,11 +38,11 @@ export const MoneyInOutSyncIncrementSettingsToForm = R.compose(
       // Do not update if the invoice auto-increment is disabled.
       if (!transactionAutoIncrement) return null;
 
-      const transactionNumber = transactionNumber(
+      const newTransactionNumber = transactionNumber(
         transactionNumberPrefix,
         transactionNextNumber,
       );
-      setFieldValue('transaction_number', transactionNumber);
+      setFieldValue('transaction_number', newTransactionNumber);
     }, [setFieldValue, transactionNumberPrefix, transactionNextNumber]);
 
     return null;

packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss

@@ -1,34 +1,14 @@
 .dialog--money-in,
 .dialog--money-out {
-  .bp3-form-group {
-    margin-bottom: 15px;
-
-    label.bp3-label {
-      font-size: 13px;
-      margin-bottom: 3px;
-    }
-  }
-  .form-group {
-    &--description {
-      .bp3-form-content {
-        textarea {
-          width: 100%;
-          min-width: 100%;
-          font-size: 14px;
-        }
-      }
-    }
-    &--reference-no,
-    &--amount,
-    &--credit_account_id {
-      max-width: 380px;
-    }
-  }
 
   .trasnaction-type-fileds {
     margin-bottom: 18px;
-    padding: 16px 0px 12px 0px;
+    padding: 0 0px 16px 0px;
     border-bottom: 2px solid #e9e9e9;
+
+    .bp3-form-group{
+      margin-bottom: 0;
+    }
   }
 
   .bp3-dialog-footer {