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 (
{/* ----------- Customer name ----------- */}
@@ -121,15 +116,10 @@ function InvoiceFormHeaderFields({
{/* ----------- Exchange rate ----------- */}
-
-
-
-
+
{/* ----------- 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 (
+
+ );
+}
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