feat(cashflow): exchange rate muted.

2026-02-16 12:50:38 +00:00 · 2022-03-07 16:38:14 +02:00
parent 51c7a0fcd8
commit d12e35f649
11 changed files with 136 additions and 89 deletions
--- a/src/components/ExchangeRate/ExchangeRateMutedField.js
+++ b/src/components/ExchangeRate/ExchangeRateMutedField.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import moment from 'moment';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 import {
@@ -8,42 +7,32 @@ import {
  PopoverInteractionKind,
  FormGroup,
  Position,
-  Menu,
  Classes,
 } from '@blueprintjs/core';
-import {
-  If,
-  ExchangeRateInputGroup,
-  Icon,
-  FormattedMessage as T,
-} from 'components';
-import { isEqual, isUndefined } from 'lodash';
+import { ExchangeRateInputGroup, Icon } from 'components';

 export function ExchangeRateMutedField({
  name,
  toCurrency,
  fromCurrency,
+  date,
  exchangeRate,
-  ...ExchangeRateprops
+  exchangeRateFieldProps,
+  popoverProps,
 }) {
-  if (isEqual(toCurrency, fromCurrency) && !isUndefined(toCurrency)) {
-    return null;
-  }
  const content = (
    <ExchangeRateFormGroupContent>
      <ExchangeRateInputGroup
        name={name}
        fromCurrency={fromCurrency}
        toCurrency={toCurrency}
-        {...ExchangeRateprops}
+        {...exchangeRateFieldProps}
      />
    </ExchangeRateFormGroupContent>
  );

  return (
-    <ExchangeRateFormGroup
-      label={`As on ${moment(new Date()).format('YYYY-MM-DD')},`}
-    >
+    <ExchangeRateFormGroup label={`As on ${date},`}>
      <Popover
        content={content}
        interactionKind={PopoverInteractionKind.CLICK}
@@ -51,6 +40,7 @@ export function ExchangeRateMutedField({
        modifiers={{
          offset: { offset: '0, 4' },
        }}
+        {...popoverProps}
        minimal={true}
        usePortal={false}
        target={<div />}
--- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
@@ -19,6 +19,7 @@ import {
  Icon,
  Col,
  Row,
+  If,
  FeatureCan,
  BranchSelect,
  BranchSelectButton,
@@ -42,6 +43,7 @@ import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
  useObserveTransactionNoSettings,
  useSetPrimaryBranchToForm,
+  useForeignAccount,
  BranchRowDivider,
 } from '../utils';
 import withSettings from 'containers/Settings/withSettings';
@@ -66,6 +68,8 @@ function OtherIncomeFormFields({

  const amountFieldRef = useAutofocus();

+  const isForeigAccount = useForeignAccount();
+  
  // Handle tranaction number changing.
  const handleTransactionNumberChange = () => {
    openDialog('transaction-number-form');
@@ -112,7 +116,7 @@ function OtherIncomeFormFields({
            </FormGroup>
          </Col>
        </Row>
-      <BranchRowDivider />
+        <BranchRowDivider />
      </FeatureCan>

      <Row>
@@ -199,7 +203,7 @@ function OtherIncomeFormFields({
            className={'form-group--amount'}
          >
            <ControlGroup>
-              <InputPrependText text={values.currency_code} />
+              <InputPrependText text={account.currency_code} />

              <MoneyInputGroup
                value={value}
@@ -215,14 +219,17 @@ 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}
-      />
+      <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 -----------*/}
--- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
@@ -19,6 +19,7 @@ import {
  Icon,
  Col,
  Row,
+  If,
  InputPrependButton,
  ExchangeRateMutedField,
  BranchSelect,
@@ -41,6 +42,7 @@ import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
  useObserveTransactionNoSettings,
  useSetPrimaryBranchToForm,
+  useForeignAccount,
  BranchRowDivider,
 } from '../utils';
 import withSettings from 'containers/Settings/withSettings';
@@ -66,6 +68,8 @@ function OwnerContributionFormFields({

  const amountFieldRef = useAutofocus();

+  const isForeigAccount = useForeignAccount();
+
  // Handle tranaction number changing.
  const handleTransactionNumberChange = () => {
    openDialog('transaction-number-form');
@@ -213,16 +217,17 @@ function OwnerContributionFormFields({
          </FormGroup>
        )}
      </Field>
-
-      {/*------------ exchange rate -----------*/}
-      <ExchangeRateMutedField
-        name={'exchange_rate'}
-        fromCurrency={values?.currency_code}
-        toCurrency={account?.currency_code}
-        formGroupProps={{ label: '', inline: false }}
-        exchangeRate={values.exchange_rate}
-      />
-
+      <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}>
          {/*------------ equity account -----------*/}
--- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
@@ -18,6 +18,7 @@ import {
  Icon,
  Col,
  Row,
+  If,
  InputPrependButton,
  ExchangeRateMutedField,
  FeatureCan,
@@ -41,6 +42,7 @@ import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 import {
  useObserveTransactionNoSettings,
  useSetPrimaryBranchToForm,
+  useForeignAccount,
  BranchRowDivider,
 } from '../utils';
 import withSettings from 'containers/Settings/withSettings';
@@ -61,6 +63,7 @@ function TransferFromAccountFormFields({
  // Money in dialog context.
  const { accounts, account, branches } = useMoneyInDailogContext();

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

  const { values } = useFormikContext();
@@ -196,7 +199,7 @@ function TransferFromAccountFormFields({
            className={'form-group--amount'}
          >
            <ControlGroup>
-              <InputPrependText text={values.currency_code} />
+              <InputPrependText text={account.currency_code} />

              <MoneyInputGroup
                value={value}
@@ -211,16 +214,17 @@ function TransferFromAccountFormFields({
          </FormGroup>
        )}
      </FastField>
-
-      {/*------------ exchange rate -----------*/}
-      <ExchangeRateMutedField
-        name={'exchange_rate'}
-        fromCurrency={values?.currency_code}
-        toCurrency={account?.currency_code}
-        formGroupProps={{ label: '', inline: false }}
-        exchangeRate={values.exchange_rate}
-      />
-
+      <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}>
          {/*------------ transfer from account -----------*/}
--- a/src/containers/Dialogs/MoneyInDialog/utils.js
+++ b/src/containers/Dialogs/MoneyInDialog/utils.js
@@ -2,7 +2,7 @@ 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';
+import { isEqual, isUndefined, isNull, first } from 'lodash';

 import { useMoneyInDailogContext } from './MoneyInDialogProvider';

@@ -30,6 +30,16 @@ export const useSetPrimaryBranchToForm = () => {
  }, [isBranchesSuccess, setFieldValue, branches]);
 };

+export const useForeignAccount = () => {
+  const { values } = useFormikContext();
+  const { account } = useMoneyInDailogContext();
+
+  return (
+    !isEqual(account.currency_code, values.currency_code) &&
+    !isNull(account.currency_code)
+  );
+};
+
 export const BranchRowDivider = styled.div`
  height: 1px;
  background: #ebf1f6;
--- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
@@ -18,6 +18,7 @@ import {
  Icon,
  Col,
  Row,
+  If,
  InputPrependButton,
  FeatureCan,
  BranchSelect,
@@ -41,6 +42,7 @@ import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 import {
  useObserveTransactionNoSettings,
  useSetPrimaryBranchToForm,
+  useForeignAccount,
  BranchRowDivider,
 } from '../utils';
 import withSettings from 'containers/Settings/withSettings';
@@ -61,6 +63,7 @@ function OtherExpnseFormFields({
  // Money in dialog context.
  const { accounts, account, branches } = useMoneyOutDialogContext();

+  const isForeigAccount = useForeignAccount();
  const { values } = useFormikContext();

  const amountFieldRef = useAutofocus();
@@ -197,7 +200,7 @@ function OtherExpnseFormFields({
            className={'form-group--amount'}
          >
            <ControlGroup>
-              <InputPrependText text={values.currency_code} />
+              <InputPrependText text={account.currency_code} />

              <MoneyInputGroup
                value={value}
@@ -212,16 +215,17 @@ function OtherExpnseFormFields({
          </FormGroup>
        )}
      </FastField>
-
-      {/*------------ exchange rate -----------*/}
-      <ExchangeRateMutedField
-        name={'exchange_rate'}
-        fromCurrency={values?.currency_code}
-        toCurrency={account?.currency_code}
-        formGroupProps={{ label: '', inline: false }}
-        exchangeRate={values.exchange_rate}
-      />
-
+      <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 expense account -----------*/}
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
@@ -17,6 +17,7 @@ import {
  FieldRequiredHint,
  InputPrependButton,
  Icon,
+  If,
  Col,
  Row,
  FeatureCan,
@@ -40,6 +41,7 @@ import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 import {
  useObserveTransactionNoSettings,
  useSetPrimaryBranchToForm,
+  useForeignAccount,
  BranchRowDivider,
 } from '../utils';
 import withSettings from 'containers/Settings/withSettings';
@@ -60,6 +62,7 @@ function OwnerDrawingsFormFields({
  // Money out dialog context.
  const { accounts, account, branches } = useMoneyOutDialogContext();
  const { values } = useFormikContext();
+  const isForeigAccount = useForeignAccount();

  const amountFieldRef = useAutofocus();

@@ -195,7 +198,7 @@ function OwnerDrawingsFormFields({
            className={'form-group--amount'}
          >
            <ControlGroup>
-              <InputPrependText text={values.currency_code} />
+              <InputPrependText text={account.currency_code} />

              <MoneyInputGroup
                value={value}
@@ -211,14 +214,17 @@ 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}
-      />
+      <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 -----------*/}
--- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
@@ -18,6 +18,7 @@ import {
  Icon,
  Col,
  Row,
+  If,
  InputPrependButton,
  FeatureCan,
  BranchSelect,
@@ -41,6 +42,7 @@ import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
 import {
  useObserveTransactionNoSettings,
  useSetPrimaryBranchToForm,
+  useForeignAccount,
  BranchRowDivider,
 } from '../utils';
 import withSettings from 'containers/Settings/withSettings';
@@ -61,6 +63,7 @@ function TransferToAccountFormFields({
  // Money in dialog context.
  const { accounts, account, branches } = useMoneyOutDialogContext();
  const { values } = useFormikContext();
+  const isForeigAccount = useForeignAccount();

  const accountRef = useAutofocus();

@@ -196,7 +199,7 @@ function TransferToAccountFormFields({
            className={'form-group--amount'}
          >
            <ControlGroup>
-              <InputPrependText text={values.currency_code} />
+              <InputPrependText text={account.currency_code} />

              <MoneyInputGroup
                value={value}
@@ -211,16 +214,17 @@ function TransferToAccountFormFields({
          </FormGroup>
        )}
      </FastField>
-
-      {/*------------ exchange rate -----------*/}
-      <ExchangeRateMutedField
-        name={'exchange_rate'}
-        fromCurrency={values?.currency_code}
-        toCurrency={account?.currency_code}
-        formGroupProps={{ label: '', inline: false }}
-        exchangeRate={values.exchange_rate}
-      />
-
+      <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}>
          {/*------------ transfer from account -----------*/}
--- a/src/containers/Dialogs/MoneyOutDialog/utils.js
+++ b/src/containers/Dialogs/MoneyOutDialog/utils.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { useFormikContext } from 'formik';
 import { transactionNumber } from 'utils';
-import { first } from 'lodash';
+import { first, isEqual, isNull } from 'lodash';

 import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';

@@ -29,6 +29,16 @@ export const useSetPrimaryBranchToForm = () => {
    }
  }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+export const useForeignAccount = () => {
+  const { values } = useFormikContext();
+  const { account } = useMoneyOutDialogContext();
+
+  return (
+    !isEqual(account.currency_code, values.currency_code) &&
+    !isNull(account.currency_code)
+  );
+};
 export const BranchRowDivider = styled.div`
  height: 1px;
  background: #ebf1f6;
--- a/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceive.schema.js
+++ b/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceive.schema.js
@@ -3,22 +3,20 @@ import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';

 const Schema = Yup.object().shape({
-  customer_id: Yup.string()
-    .label(intl.get('customer_name_'))
-    .required(),
+  customer_id: Yup.string().label(intl.get('customer_name_')).required(),
  payment_receive_no: Yup.string()
    .required()
    .nullable()
    .max(DATATYPES_LENGTH.STRING)
    .label(intl.get('payment_receive_no_')),
-  payment_date: Yup.date()
-    .required()
-    .label(intl.get('payment_date_')),
+  payment_date: Yup.date().required().label(intl.get('payment_date_')),
  deposit_account_id: Yup.number()
    .required()
    .label(intl.get('deposit_account_')),
  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
  // statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+  branch_id: Yup.string(),
+  exchange_rate: Yup.number(),
  entries: Yup.array().of(
    Yup.object().shape({
      payment_amount: Yup.number().nullable(),
--- a/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormDialogContent.js
+++ b/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormDialogContent.js
@@ -2,23 +2,32 @@ import React from 'react';

 import 'style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss';

-import { QuickPaymentReceiveFormProvider } from './QuickPaymentReceiveFormProvider';
 import QuickPaymentReceiveForm from './QuickPaymentReceiveForm';
+import { QuickPaymentReceiveFormProvider } from './QuickPaymentReceiveFormProvider';
+
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';

 /**
 * Quick payment receive form dialog content.
 */
-export default function QuickPaymentReceiveFormDialogContent({
+function QuickPaymentReceiveFormDialogContent({
  // #ownProps
  dialogName,
  invoice,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
  return (
    <QuickPaymentReceiveFormProvider
      invoiceId={invoice}
      dialogName={dialogName}
+      baseCurrency={base_currency}
    >
      <QuickPaymentReceiveForm />
    </QuickPaymentReceiveFormProvider>
  );
 }
+export default compose(withCurrentOrganization())(
+  QuickPaymentReceiveFormDialogContent,
+);