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

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 {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { FormGroup, 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 {
-  useSetPrimaryBranchToForm,
-  useForeignAccount,
-  BranchRowDivider,
-} from '../utils';
-
+import { useSetPrimaryBranchToForm, 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 isForeigAccount = useForeignAccount();
-  const { values } = useFormikContext();
-
-  const amountFieldRef = useAutofocus();
+  const { accounts, branches } = useMoneyOutDialogContext();
+  const { account } = useMoneyOutFieldsContext();
 
   // Sets the primary branch to form.
   useSetPrimaryBranchToForm();
@@ -64,21 +49,19 @@ export default function OtherExpnseFormFields() {
       <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,47 +96,27 @@ export default function OtherExpnseFormFields() {
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
+
       {/*------------ amount -----------*/}
-      <FastField name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
+
+      <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>
-      <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>
+          </FFormGroup>
+        </Col>
+      </Row>
+
+      {/*------------ Exchange rate -----------*/}
+      <MoneyOutExchangeRateField />
+
       <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'}>
-            {({ 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>
   );
 }