feat(cashflow): add ExchangeRateMutedField.

src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField, Field, ErrorMessage } from 'formik';
+import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
 import {
   Classes,
   FormGroup,
@@ -19,10 +19,15 @@ import {
   Col,
   Row,
   InputPrependButton,
+  FeatureCan,
+  BranchSelect,
+  BranchSelectButton,
+  ExchangeRateMutedField,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
+import { Features } from 'common';
 
 import {
   inputIntent,
@@ -33,7 +38,11 @@ import {
 } from 'utils';
 import { CLASSES } from 'common/classes';
 import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
-import { useObserveTransactionNoSettings } from '../utils';
+import {
+  useObserveTransactionNoSettings,
+  useSetPrimaryBranchToForm,
+  BranchRowDivider,
+} from '../utils';
 import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
@@ -50,7 +59,9 @@ function OtherExpnseFormFields({
   transactionNextNumber,
 }) {
   // Money in dialog context.
-  const { accounts } = useMoneyOutDialogContext();
+  const { accounts, account, branches } = useMoneyOutDialogContext();
+
+  const { values } = useFormikContext();
 
   const amountFieldRef = useAutofocus();
 
@@ -79,8 +90,29 @@ function OtherExpnseFormFields({
     transactionNextNumber,
   );
 
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
   return (
     <React.Fragment>
+      <FeatureCan feature={Features.Branches}>
+        <Row>
+          <Col xs={5}>
+            <FormGroup
+              label={<T id={'branch'} />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
+              <BranchSelect
+                name={'branch_id'}
+                branches={branches}
+                input={BranchSelectButton}
+                popoverProps={{ minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+      </FeatureCan>
+      <BranchRowDivider />
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -181,6 +213,15 @@ function OtherExpnseFormFields({
         )}
       </FastField>
 
+      {/*------------ exchange rate -----------*/}
+      <ExchangeRateMutedField
+        name={'exchange_rate'}
+        fromCurrency={values?.currency_code}
+        toCurrency={account?.currency_code}
+        formGroupProps={{ label: '', inline: false }}
+        exchangeRate={values.exchange_rate}
+      />
+
       <Row>
         <Col xs={5}>
           {/*------------ other expense account -----------*/}