From 05126253db739c6dcae6f05c79344def75543b3f Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Sun, 20 Mar 2022 11:03:48 +0200
Subject: [PATCH] fix(InvoiceForm): control display exchange rate input for
 foreign customers.

---
 .../InvoiceForm/InvoiceFormHeaderFields.js    | 22 ++++-----------
 .../Sales/Invoices/InvoiceForm/components.js  | 28 +++++++++++++++++++
 .../Sales/Invoices/InvoiceForm/utils.js       | 16 +++++++++++
 src/hooks/state/organizations.js              |  7 ++++-
 4 files changed, 56 insertions(+), 17 deletions(-)
 create mode 100644 src/containers/Sales/Invoices/InvoiceForm/components.js

diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
index 00e99a23d..0019fdce2 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
+++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
@@ -15,7 +15,6 @@ import {
   FormattedMessage as T,
   Col,
   Row,
-  If,
   CustomerDrawerLink,
 } from 'components';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
@@ -30,14 +29,13 @@ import {
   FieldRequiredHint,
   Icon,
   InputPrependButton,
-  ExchangeRateInputGroup,
 } from 'components';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
+import { InvoiceExchangeRateInputField } from './components';
 
 import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { inputIntent, handleDateChange } from 'utils';
-import InvoiceCurrencyTag from './InvoiceFormCurrencyTag';
 
 /**
  * Invoice form header fields.
@@ -52,8 +50,7 @@ function InvoiceFormHeaderFields({
   invoiceNextNumber,
 }) {
   // Invoice form context.
-  const { customers, isForeignCustomer, baseCurrency } =
-    useInvoiceFormContext();
+  const { customers } = useInvoiceFormContext();
 
   // Handle invoice number changing.
   const handleInvoiceNumberChange = () => {
@@ -75,8 +72,6 @@ function InvoiceFormHeaderFields({
   // Syncs invoice number settings with form.
   useObserveInvoiceNoSettings(invoiceNumberPrefix, invoiceNextNumber);
 
-  const handleCustomerLinkClick = (customerId) => (event) => {};
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -121,15 +116,10 @@ function InvoiceFormHeaderFields({
       </FastField>
 
       {/* ----------- Exchange rate ----------- */}
-      <If condition={isForeignCustomer}>
-        <ExchangeRateInputGroup
-          fromCurrency={baseCurrency}
-          toCurrency={'LYD'}
-          name={'exchange_rate'}
-          formGroupProps={{ label: ' ', inline: true }}
-        />
-      </If>
-
+      <InvoiceExchangeRateInputField
+        name={'exchange_rate'}
+        formGroupProps={{ label: ' ', inline: true }}
+      />
       <Row>
         <Col xs={6}>
           {/* ----------- Invoice date ----------- */}
diff --git a/src/containers/Sales/Invoices/InvoiceForm/components.js b/src/containers/Sales/Invoices/InvoiceForm/components.js
new file mode 100644
index 000000000..d7c404d8a
--- /dev/null
+++ b/src/containers/Sales/Invoices/InvoiceForm/components.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { ExchangeRateInputGroup } from 'components';
+import { useCurrentOrganization } from 'hooks/state';
+import { useInvoiceIsForeignCustomer } from './utils';
+
+/**
+ * Invoice exchange rate input field.
+ * @returns {JSX.Element}
+ */
+export function InvoiceExchangeRateInputField({ ...props }) {
+  const currentOrganization = useCurrentOrganization();
+  const { values } = useFormikContext();
+
+  const isForeignCustomer = useInvoiceIsForeignCustomer();
+
+  // Can't continue if the customer is not foreign.
+  if (!isForeignCustomer) {
+    return null;
+  }
+  return (
+    <ExchangeRateInputGroup
+      fromCurrency={values.currency_code}
+      toCurrency={currentOrganization.base_currency}
+      {...props}
+    />
+  );
+}
diff --git a/src/containers/Sales/Invoices/InvoiceForm/utils.js b/src/containers/Sales/Invoices/InvoiceForm/utils.js
index 30a8c4066..09e48b630 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/utils.js
+++ b/src/containers/Sales/Invoices/InvoiceForm/utils.js
@@ -14,6 +14,7 @@ import intl from 'react-intl-universal';
 import { defaultFastFieldShouldUpdate } from 'utils';
 import { ERROR } from 'common/errors';
 import { AppToaster } from 'components';
+import { useCurrentOrganization } from 'hooks/state';
 import { getEntriesTotal } from 'containers/Entries/utils';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import {
@@ -210,3 +211,18 @@ export const useInvoiceTotal = () => {
   // Calculate the total due amount of invoice entries.
   return React.useMemo(() => getEntriesTotal(entries), [entries]);
 };
+
+/**
+ * Detarmines whether the invoice has foreign customer.
+ * @returns {boolean}
+ */
+export const useInvoiceIsForeignCustomer = () => {
+  const { values } = useFormikContext();
+  const currentOrganization = useCurrentOrganization();
+
+  const isForeignCustomer = React.useMemo(
+    () => values.currency_code !== currentOrganization.base_currency,
+    [values.currency_code, currentOrganization.base_currency],
+  );
+  return isForeignCustomer;
+};
diff --git a/src/hooks/state/organizations.js b/src/hooks/state/organizations.js
index 56647c500..7d1fe0a59 100644
--- a/src/hooks/state/organizations.js
+++ b/src/hooks/state/organizations.js
@@ -1,6 +1,7 @@
 import { useCallback } from "react";
-import { useDispatch } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { setOrganizations } from 'store/organizations/organizations.actions';
+import { getCurrentOrganizationFactory } from 'store/authentication/authentication.selectors';
 
 export const useSetOrganizations = () => {
   const dispatch = useDispatch();
@@ -8,4 +9,8 @@ export const useSetOrganizations = () => {
   return useCallback((organizations) => {
     dispatch(setOrganizations(organizations))    
   }, [dispatch]);
+};
+
+export const useCurrentOrganization = () => {
+  return useSelector(getCurrentOrganizationFactory())
 };
\ No newline at end of file