feat: implement auto entries rates re-calculation after change the exchange rate

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx

@@ -34,7 +34,7 @@ import {
   transformFormValuesToRequest,
   resetFormState,
 } from './utils';
-import { ReceiptSyncIncrementSettingsToForm } from './components';
+import { ReceiptSyncAutoExRateToForm, ReceiptSyncIncrementSettingsToForm } from './components';
 
 /**
  * Receipt form.
@@ -171,6 +171,7 @@ function ReceiptForm({
 
           {/*---------- Effects ---------*/}
           <ReceiptSyncIncrementSettingsToForm />
+          <ReceiptSyncAutoExRateToForm />
         </Form>
       </Formik>
     </div>

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx

@@ -33,6 +33,7 @@ import {
   ReceiptProjectSelectButton,
 } from './components';
 import { ReceiptFormReceiptNumberField } from './ReceiptFormReceiptNumberField';
+import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
 
 /**
  * Receipt form header fields.
@@ -46,10 +47,7 @@ export default function ReceiptFormHeader() {
       <ReceiptFormCustomerSelect />
 
       {/* ----------- Exchange rate ----------- */}
-      <ReceiptExchangeRateInputField
-        name={'exchange_rate'}
-        formGroupProps={{ label: ' ', inline: true }}
-      />
+      <ReceiptExchangeRateInputField />
 
       {/* ----------- Deposit account ----------- */}
       <FFormGroup
@@ -148,6 +146,16 @@ function ReceiptFormCustomerSelect() {
   const { setFieldValue, values } = useFormikContext();
   const { customers } = useReceiptFormContext();
 
+  const updateEntries = useCustomerUpdateExRate();
+
+  // Handles the customer item change.
+  const handleItemChange = (customer) => {
+    setFieldValue('customer_id', customer.id);
+    setFieldValue('currency_code', customer?.currency_code);
+
+    updateEntries(customer);
+  };
+
   return (
     <FFormGroup
       name={'customer_id'}
@@ -162,10 +170,7 @@ function ReceiptFormCustomerSelect() {
         name={'customer_id'}
         items={customers}
         placeholder={<T id={'select_customer_account'} />}
-        onItemChange={(customer) => {
-          setFieldValue('customer_id', customer.id);
-          setFieldValue('currency_code', customer?.currency_code);
-        }}
+        onItemChange={handleItemChange}
         popoverFill={true}
         allowCreate={true}
         fastField={true}

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.tsx

@@ -6,6 +6,7 @@ import '@/style/pages/SaleReceipt/PageForm.scss';
 
 import ReceiptFrom from './ReceiptForm';
 import { ReceiptFormProvider } from './ReceiptFormProvider';
+import { AutoExchangeRateProvider } from '@/containers/Entries/AutoExchangeProvider';
 
 /**
  * Receipt form page.
@@ -16,7 +17,9 @@ export default function ReceiptFormPage() {
 
   return (
     <ReceiptFormProvider receiptId={idInt}>
-      <ReceiptFrom />
+      <AutoExchangeRateProvider>
+        <ReceiptFrom />
+      </AutoExchangeRateProvider>
     </ReceiptFormProvider>
   );
 }

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/components.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useRef } from 'react';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
@@ -7,20 +7,26 @@ import * as R from 'ramda';
 
 import { ExchangeRateInputGroup } from '@/components';
 import { useCurrentOrganization } from '@/hooks/state';
-import { useReceiptIsForeignCustomer } from './utils';
+import { useReceiptIsForeignCustomer, useReceiptTotals } from './utils';
 import { useUpdateEffect } from '@/hooks';
-import withSettings from '@/containers/Settings/withSettings';
 import { transactionNumber } from '@/utils';
+import withSettings from '@/containers/Settings/withSettings';
+import {
+  useSyncExRateToForm,
+  withExchangeRateFetchingLoading,
+  withExchangeRateItemEntriesPriceRecalc,
+} from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Receipt exchange rate input field.
  * @returns {JSX.Element}
  */
-export function ReceiptExchangeRateInputField({ ...props }) {
+function ReceiptExchangeRateInputFieldRoot({ ...props }) {
   const currentOrganization = useCurrentOrganization();
-  const { values } = useFormikContext();
-
   const isForeignCustomer = useReceiptIsForeignCustomer();
+  const { values } = useFormikContext();
 
   // Can't continue if the customer is not foreign.
   if (!isForeignCustomer) {
@@ -28,13 +34,21 @@ export function ReceiptExchangeRateInputField({ ...props }) {
   }
   return (
     <ExchangeRateInputGroup
+      name={'exchange_rate'}
       fromCurrency={values.currency_code}
       toCurrency={currentOrganization.base_currency}
+      formGroupProps={{ label: ' ', inline: true }}
+      withPopoverRecalcConfirm
       {...props}
     />
   );
 }
 
+export const ReceiptExchangeRateInputField = R.compose(
+  withExchangeRateFetchingLoading,
+  withExchangeRateItemEntriesPriceRecalc,
+)(ReceiptExchangeRateInputFieldRoot);
+
 /**
  * Receipt project select.
  * @returns {JSX.Element}
@@ -73,3 +87,31 @@ export const ReceiptSyncIncrementSettingsToForm = R.compose(
 
   return null;
 });
+
+/**
+ * Syncs the auto exchange rate to the receipt form and shows up popup to user
+ * as an indication the entries rates have been changed.
+ * @returns {React.ReactNode}
+ */
+export const ReceiptSyncAutoExRateToForm = R.compose(withDialogActions)(
+  ({
+    // #withDialogActions
+    openDialog,
+  }) => {
+    const { total } = useReceiptTotals();
+    const timeout = useRef();
+
+    useSyncExRateToForm({
+      onSynced: () => {
+        // If the total bigger then zero show alert to the user after adjusting entries.
+        if (total > 0) {
+          clearTimeout(timeout.current);
+          timeout.current = setTimeout(() => {
+            openDialog(DialogsName.InvoiceExchangeRateChangeNotice);
+          }, 500);
+        }
+      },
+    });
+    return null;
+  },
+);