From 7467b63e5476fd44ff3cf23fc9f3c7f81ac5f038 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 6 Mar 2022 20:20:25 +0200
Subject: [PATCH] feat(cashflow): add ExchangeRateMutedField.

---
 src/components/Branches/BranchSelect.js       |  2 +-
 .../ExchangeRate/ExchangeRateMutedField.js    | 84 +++++++++++++++++++
 src/components/ExchangeRate/index.js          |  3 +-
 src/components/Warehouses/WarehouseSelect.js  |  2 +-
 .../MoneyInDialog/MoneyInDialogProvider.js    |  6 --
 .../MoneyInDialog/MoneyInFloatingActions.js   |  4 +-
 .../Dialogs/MoneyInDialog/MoneyInForm.js      |  2 +-
 .../MoneyInDialog/MoneyInForm.schema.js       |  2 +
 .../OtherIncome/OtherIncomeFormFields.js      | 48 ++++++++++-
 .../OwnerContributionFormFields.js            | 41 ++++-----
 .../TransferFromAccountFormFields.js          | 47 ++++++++++-
 src/containers/Dialogs/MoneyInDialog/utils.js |  7 ++
 .../MoneyOutDialog/MoneyOutDialogProvider.js  | 21 ++++-
 .../MoneyOutDialog/MoneyOutFloatingActions.js |  4 +-
 .../Dialogs/MoneyOutDialog/MoneyOutForm.js    |  1 +
 .../MoneyOutDialog/MoneyOutForm.schema.js     |  4 +-
 .../OtherExpense/OtherExpnseFormFields.js     | 47 ++++++++++-
 .../OwnerDrawings/OwnerDrawingsFormFields.js  | 45 +++++++++-
 .../TransferToAccountFormFields.js            | 46 +++++++++-
 .../Dialogs/MoneyOutDialog/utils.js           | 24 ++++++
 20 files changed, 382 insertions(+), 58 deletions(-)
 create mode 100644 src/components/ExchangeRate/ExchangeRateMutedField.js

diff --git a/src/components/Branches/BranchSelect.js b/src/components/Branches/BranchSelect.js
index 3735af5d3..b07358ccc 100644
--- a/src/components/Branches/BranchSelect.js
+++ b/src/components/Branches/BranchSelect.js
@@ -35,7 +35,7 @@ const branchItemRenderer = (branch, { handleClick, modifiers, query }) => {
     <MenuItem
       active={modifiers.active}
       disabled={modifiers.disabled}
-      label={branch.code.toString()}
+      label={branch.code}
       key={branch.id}
       onClick={handleClick}
       text={text}
diff --git a/src/components/ExchangeRate/ExchangeRateMutedField.js b/src/components/ExchangeRate/ExchangeRateMutedField.js
new file mode 100644
index 000000000..10bd7fbe3
--- /dev/null
+++ b/src/components/ExchangeRate/ExchangeRateMutedField.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import {
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  FormGroup,
+  Position,
+  Menu,
+  Classes,
+} from '@blueprintjs/core';
+import {
+  If,
+  ExchangeRateInputGroup,
+  Icon,
+  FormattedMessage as T,
+} from 'components';
+import { isEqual, isUndefined } from 'lodash';
+
+export function ExchangeRateMutedField({
+  name,
+  toCurrency,
+  fromCurrency,
+  exchangeRate,
+  ...ExchangeRateprops
+}) {
+  if (isEqual(toCurrency, fromCurrency) && !isUndefined(toCurrency)) {
+    return null;
+  }
+
+  const content = (
+    <Menu>
+      <ExchangeRateInputGroup
+        name={name}
+        fromCurrency={fromCurrency}
+        toCurrency={toCurrency}
+        {...ExchangeRateprops}
+      />
+    </Menu>
+  );
+
+  return (
+    <ExchangeRateFormGroup
+      label={`As on ${moment(new Date()).format('YYYY-MM-DD')},`}
+    >
+      <Popover
+        content={content}
+        interactionKind={PopoverInteractionKind.CLICK}
+        position={Position.RIGHT_TOP}
+        modifiers={{
+          offset: { offset: '0, 4' },
+        }}
+        minimal={true}
+      >
+        <ExchangeRateButton
+          className={Classes.MINIMAL}
+          rightIcon={<Icon icon="pen-18" />}
+        >
+          1 {fromCurrency} = {exchangeRate} {toCurrency}
+        </ExchangeRateButton>
+      </Popover>
+    </ExchangeRateFormGroup>
+  );
+}
+
+const ExchangeRateFormGroup = styled(FormGroup)`
+  .bp3-label {
+    font-size: 12px !important;
+    opacity: 0.7;
+    line-height: 0.1rem;
+  }
+`;
+
+const ExchangeRateButton = styled(Button)`
+  .bp3-button-text {
+    display: flex;
+    font-size: 13px;
+    font-weight: 500;
+    color: #0d244a;
+  }
+  padding: 0;
+`;
diff --git a/src/components/ExchangeRate/index.js b/src/components/ExchangeRate/index.js
index ea982a466..039d6732e 100644
--- a/src/components/ExchangeRate/index.js
+++ b/src/components/ExchangeRate/index.js
@@ -1 +1,2 @@
-export * from './ExchangeRateInput';
\ No newline at end of file
+export * from './ExchangeRateInput';
+export * from './ExchangeRateMutedField'
\ No newline at end of file
diff --git a/src/components/Warehouses/WarehouseSelect.js b/src/components/Warehouses/WarehouseSelect.js
index dd0af73dc..cb9470d95 100644
--- a/src/components/Warehouses/WarehouseSelect.js
+++ b/src/components/Warehouses/WarehouseSelect.js
@@ -40,7 +40,7 @@ const warehouseItemRenderer = (
     <MenuItem
       active={modifiers.active}
       disabled={modifiers.disabled}
-      label={warehouse.name.toString()}
+      label={warehouse.code}
       key={warehouse.id}
       onClick={handleClick}
       text={text}
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js
index d0535ec07..f339bd58c 100644
--- a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js
@@ -8,7 +8,6 @@ import {
   useCashflowAccounts,
   useSettingCashFlow,
 } from 'hooks/query';
-import { isEqual, isUndefined } from 'lodash';
 
 const MoneyInDialogContent = React.createContext();
 
@@ -49,10 +48,6 @@ function MoneyInDialogProvider({
   // Submit payload.
   const [submitPayload, setSubmitPayload] = React.useState({});
 
-  // Determines whether the foreign currency.
-  const isForeignCurrency = (toCurrency, fromCurrency) =>
-    !isEqual(toCurrency, fromCurrency) && !isUndefined(toCurrency);
-
   //  provider.
   const provider = {
     accounts,
@@ -70,7 +65,6 @@ function MoneyInDialogProvider({
 
     createCashflowTransactionMutate,
     setSubmitPayload,
-    isForeignCurrency,
   };
 
   return (
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInFloatingActions.js b/src/containers/Dialogs/MoneyInDialog/MoneyInFloatingActions.js
index b33647f0f..3e786fe7b 100644
--- a/src/containers/Dialogs/MoneyInDialog/MoneyInFloatingActions.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInFloatingActions.js
@@ -48,7 +48,7 @@ function MoneyInFloatingActions({
         >
           <T id={'close'} />
         </Button>
-        <Button
+        {/* <Button
           disabled={isSubmitting}
           loading={isSubmitting && !submitPayload.publish}
           style={{ minWidth: '75px' }}
@@ -56,7 +56,7 @@ function MoneyInFloatingActions({
           onClick={handleSubmitDraftBtnClick}
         >
           {<T id={'save_as_draft'} />}
-        </Button>
+        </Button> */}
 
         <Button
           intent={Intent.PRIMARY}
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
index a8f27aec5..7f4788391 100644
--- a/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
@@ -32,6 +32,7 @@ const defaultInitialValues = {
   description: '',
   branch_id: '',
   publish: '',
+  exchange_rate: 1,
 };
 
 function MoneyInForm({
@@ -69,7 +70,6 @@ function MoneyInForm({
       transaction_number: transactionNo,
     }),
     cashflow_account_id: accountId,
-    exchange_rate: 1,
   };
 
   // Handles the form submit.
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js
index cd072f78c..3ef47ce5c 100644
--- a/src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js
@@ -11,6 +11,8 @@ const Schema = Yup.object().shape({
   credit_account_id: Yup.number().required(),
   cashflow_account_id: Yup.string().required(),
   branch_id: Yup.string(),
+  exchange_rate: Yup.number(),
+
   description: Yup.string()
     .min(3)
     .max(DATATYPES_LENGTH.TEXT)
diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
index e8446a008..03aecd55f 100644
--- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.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,
@@ -7,6 +7,7 @@ import {
   TextArea,
   Position,
   ControlGroup,
+  Button,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import {
@@ -18,7 +19,11 @@ import {
   Icon,
   Col,
   Row,
+  FeatureCan,
+  BranchSelect,
+  BranchSelectButton,
   InputPrependButton,
+  ExchangeRateMutedField,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
@@ -32,8 +37,13 @@ import {
   compose,
 } from 'utils';
 import { CLASSES } from 'common/classes';
+import { Features } from 'common';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
-import { useObserveTransactionNoSettings } from '../utils';
+import {
+  useObserveTransactionNoSettings,
+  useSetPrimaryBranchToForm,
+  BranchRowDivider,
+} from '../utils';
 import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
@@ -50,7 +60,9 @@ function OtherIncomeFormFields({
   transactionNextNumber,
 }) {
   // Money in dialog context.
-  const { accounts } = useMoneyInDailogContext();
+  const { accounts, account, branches } = useMoneyInDailogContext();
+
+  const { values } = useFormikContext();
 
   const amountFieldRef = useAutofocus();
 
@@ -79,8 +91,30 @@ function OtherIncomeFormFields({
     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 +215,14 @@ function OtherIncomeFormFields({
         )}
       </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 income account -----------*/}
diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
index f2d9105fe..976e95665 100644
--- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
@@ -7,10 +7,9 @@ import {
   TextArea,
   Position,
   ControlGroup,
-  Button,
 } from '@blueprintjs/core';
-import styled from 'styled-components';
 import classNames from 'classnames';
+
 import {
   FormattedMessage as T,
   AccountsSuggestField,
@@ -20,10 +19,10 @@ import {
   Icon,
   Col,
   Row,
-  If,
   InputPrependButton,
-  ExchangeRateInputGroup,
+  ExchangeRateMutedField,
   BranchSelect,
+  BranchSelectButton,
   FeatureCan,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
@@ -42,6 +41,7 @@ import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
   useObserveTransactionNoSettings,
   useSetPrimaryBranchToForm,
+  BranchRowDivider,
 } from '../utils';
 import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -60,8 +60,7 @@ function OwnerContributionFormFields({
   transactionNextNumber,
 }) {
   // Money in dialog context.
-  const { accounts, account, branches, isForeignCurrency } =
-    useMoneyInDailogContext();
+  const { accounts, account, branches } = useMoneyInDailogContext();
 
   const { values } = useFormikContext();
 
@@ -98,7 +97,7 @@ function OwnerContributionFormFields({
   return (
     <React.Fragment>
       <FeatureCan feature={Features.Branches}>
-        <BranchFieldsRow>
+        <Row>
           <Col xs={5}>
             <FormGroup
               label={<T id={'branch'} />}
@@ -112,8 +111,9 @@ function OwnerContributionFormFields({
               />
             </FormGroup>
           </Col>
-        </BranchFieldsRow>
+        </Row>
       </FeatureCan>
+      <BranchRowDivider />
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -213,20 +213,16 @@ function OwnerContributionFormFields({
           </FormGroup>
         )}
       </Field>
+
       {/*------------ exchange rate -----------*/}
-      {/* <If
-        condition={isForeignCurrency(
-          account?.currency_code,
-          values?.currency_code,
-        )}
-      > */}
-      <ExchangeRateInputGroup
+      <ExchangeRateMutedField
+        name={'exchange_rate'}
         fromCurrency={values?.currency_code}
         toCurrency={account?.currency_code}
-        name={'exchange_rate'}
-        formGroupProps={{ label: ' ', inline: false }}
+        formGroupProps={{ label: '', inline: false }}
+        exchangeRate={values.exchange_rate}
       />
-      {/* </If> */}
+
       <Row>
         <Col xs={5}>
           {/*------------ equity account -----------*/}
@@ -303,12 +299,3 @@ export default compose(
     transactionNumberPrefix: cashflowSetting?.numberPrefix,
   })),
 )(OwnerContributionFormFields);
-
-function BranchSelectButton({ label }) {
-  return <Button text={label} minimal={false} />;
-}
-
-const BranchFieldsRow = styled(Row)`
-  margin-bottom: 10px;
-  border-bottom: 1px solid #e9e9e9;
-`;
diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
index 64bd3f338..aaa06773e 100644
--- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.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,7 +19,12 @@ import {
   Col,
   Row,
   InputPrependButton,
+  ExchangeRateMutedField,
+  FeatureCan,
+  BranchSelect,
+  BranchSelectButton,
 } from 'components';
+import { Features } from 'common';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
@@ -33,7 +38,11 @@ import {
 } from 'utils';
 import { CLASSES } from 'common/classes';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
-import { useObserveTransactionNoSettings } from '../utils';
+import {
+  useObserveTransactionNoSettings,
+  useSetPrimaryBranchToForm,
+  BranchRowDivider,
+} from '../utils';
 import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
@@ -50,10 +59,12 @@ function TransferFromAccountFormFields({
   transactionNextNumber,
 }) {
   // Money in dialog context.
-  const { accounts } = useMoneyInDailogContext();
+  const { accounts, account, branches } = useMoneyInDailogContext();
 
   const amountFieldRef = useAutofocus();
 
+  const { values } = useFormikContext();
+
   // Handle tranaction number changing.
   const handleTransactionNumberChange = () => {
     openDialog('transaction-number-form');
@@ -73,6 +84,9 @@ function TransferFromAccountFormFields({
     }
   };
 
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
   // Syncs transaction number settings with form.
   useObserveTransactionNoSettings(
     transactionNumberPrefix,
@@ -80,6 +94,24 @@ function TransferFromAccountFormFields({
   );
   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 -----------*/}
@@ -180,6 +212,15 @@ function TransferFromAccountFormFields({
         )}
       </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}>
           {/*------------ transfer from account -----------*/}
diff --git a/src/containers/Dialogs/MoneyInDialog/utils.js b/src/containers/Dialogs/MoneyInDialog/utils.js
index 19bb99c6d..3898928a0 100644
--- a/src/containers/Dialogs/MoneyInDialog/utils.js
+++ b/src/containers/Dialogs/MoneyInDialog/utils.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import { useFormikContext } from 'formik';
 import { transactionNumber } from 'utils';
 import { sumBy, setWith, toSafeInteger, get, first } from 'lodash';
@@ -28,3 +29,9 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+export const BranchRowDivider = styled.div`
+  height: 1px;
+  background: #ebf1f6;
+  margin-bottom: 15px;
+`;
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js
index 648dacc2c..497cc6bd9 100644
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { DialogContent } from 'components';
 import {
   useAccounts,
+  useAccount,
+  useBranches,
   useCreateCashflowTransaction,
   useCashflowAccounts,
   useSettingCashFlow,
@@ -16,6 +18,17 @@ 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,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches();
   // Fetch cash flow list .
   const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
     useCashflowAccounts({}, { keepPreviousData: true });
@@ -32,9 +45,12 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
   //  provider.
   const provider = {
     accounts,
+    account,
     accountId,
     accountType,
+    branches,
     isAccountsLoading,
+    isBranchesSuccess,
 
     cashflowAccounts,
 
@@ -48,7 +64,10 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
   return (
     <DialogContent
       isLoading={
-        isAccountsLoading || isCashFlowAccountsLoading || isSettingsLoading
+        isAccountsLoading ||
+        isCashFlowAccountsLoading ||
+        isBranchesLoading ||
+        isSettingsLoading
       }
     >
       <MoneyInDialogContent.Provider value={provider} {...props} />
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js
index cd7b987e7..226cf4090 100644
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js
@@ -50,7 +50,7 @@ function MoneyOutFloatingActions({
         >
           <T id={'close'} />
         </Button>
-        <Button
+        {/* <Button
           disabled={isSubmitting}
           loading={isSubmitting && !submitPayload.publish}
           style={{ minWidth: '75px' }}
@@ -58,7 +58,7 @@ function MoneyOutFloatingActions({
           onClick={handleSubmitDraftBtnClick}
         >
           {<T id={'save_as_draft'} />}
-        </Button>
+        </Button> */}
 
         <Button
           intent={Intent.PRIMARY}
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
index a19aa9ea1..0b2d3be87 100644
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
@@ -30,6 +30,7 @@ const defaultInitialValues = {
   credit_account_id: '',
   description: '',
   publish: '',
+  exchange_rate: 1,
 };
 
 function MoneyOutForm({
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js
index 94926a71a..8dcc9e796 100644
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js
@@ -10,11 +10,13 @@ const Schema = Yup.object().shape({
   reference_no: Yup.string(),
   credit_account_id: Yup.number().required(),
   cashflow_account_id: Yup.string().required(),
+  branch_id: Yup.string(),
+  exchange_rate: Yup.number(),
   description: Yup.string()
     .min(3)
     .max(DATATYPES_LENGTH.TEXT)
     .label(intl.get('description')),
-    publish: Yup.boolean(),
+  publish: Yup.boolean(),
 });
 
 export const CreateMoneyOutSchema = Schema;
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
index c1ab6813c..089c8e743 100644
--- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
+++ b/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 -----------*/}
diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
index 7f0feb21d..c59fb030a 100644
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.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 {
   Icon,
   Col,
   Row,
+  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,
   momentFormatter,
@@ -32,7 +37,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';
 
@@ -49,7 +58,8 @@ function OwnerDrawingsFormFields({
   transactionNextNumber,
 }) {
   // Money out dialog context.
-  const { accounts } = useMoneyOutDialogContext();
+  const { accounts, account, branches } = useMoneyOutDialogContext();
+  const { values } = useFormikContext();
 
   const amountFieldRef = useAutofocus();
 
@@ -78,8 +88,29 @@ function OwnerDrawingsFormFields({
     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 -----------*/}
@@ -180,6 +211,14 @@ function OwnerDrawingsFormFields({
         )}
       </Field>
 
+      {/*------------ 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}>
           {/*------------ equitty account -----------*/}
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
index 94d2bff33..628322f51 100644
--- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.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,6 +19,10 @@ import {
   Col,
   Row,
   InputPrependButton,
+  FeatureCan,
+  BranchSelect,
+  BranchSelectButton,
+  ExchangeRateMutedField,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
@@ -31,9 +35,14 @@ import {
   handleDateChange,
   compose,
 } from 'utils';
+import { Features } from 'common';
 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,8 @@ function TransferToAccountFormFields({
   transactionNextNumber,
 }) {
   // Money in dialog context.
-  const { accounts } = useMoneyOutDialogContext();
+  const { accounts, account, branches } = useMoneyOutDialogContext();
+  const { values } = useFormikContext();
 
   const accountRef = useAutofocus();
 
@@ -79,8 +89,29 @@ function TransferToAccountFormFields({
     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 +212,15 @@ function TransferToAccountFormFields({
         )}
       </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}>
           {/*------------ transfer from account -----------*/}
diff --git a/src/containers/Dialogs/MoneyOutDialog/utils.js b/src/containers/Dialogs/MoneyOutDialog/utils.js
index 5781d03d6..a9724f60c 100644
--- a/src/containers/Dialogs/MoneyOutDialog/utils.js
+++ b/src/containers/Dialogs/MoneyOutDialog/utils.js
@@ -1,6 +1,10 @@
 import React from 'react';
+import styled from 'styled-components';
 import { useFormikContext } from 'formik';
 import { transactionNumber } from 'utils';
+import { first } from 'lodash';
+
+import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
 
 export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
   const { setFieldValue } = useFormikContext();
@@ -10,3 +14,23 @@ export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
     setFieldValue('transacttion_numner', TransactionNo);
   }, [setFieldValue, prefix, nextNumber]);
 };
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useMoneyOutDialogContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};
+export const BranchRowDivider = styled.div`
+  height: 1px;
+  background: #ebf1f6;
+  margin-bottom: 15px;
+`;