Merge branch 'feature/multi-dimensions' of https://github.com/bigcapitalhq/client into feature/multi-dimensions

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 } =
+  const { customers } = useInvoiceFormContext();
-    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}>
+      <InvoiceExchangeRateInputField
-        <ExchangeRateInputGroup
+        name={'exchange_rate'}
-          fromCurrency={baseCurrency}
+        formGroupProps={{ label: ' ', inline: true }}
-          toCurrency={'LYD'}
+      />
-          name={'exchange_rate'}
-          formGroupProps={{ label: ' ', inline: true }}
-        />
-      </If>
-
       <Row>
         <Col xs={6}>
           {/* ----------- Invoice date ----------- */}

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}
+    />
+  );
+}

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;
+};

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())
 };