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

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