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

packages/webapp/src/containers/Sales/Estimates/EstimateForm/components.tsx

@@ -1,24 +1,30 @@
 // @ts-nocheck
-import React, { useEffect } from 'react';
+import React, { useRef } from 'react';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import * as R from 'ramda';
 import { useFormikContext } from 'formik';
 import { ExchangeRateInputGroup } from '@/components';
 import { useCurrentOrganization } from '@/hooks/state';
-import { useEstimateIsForeignCustomer } from './utils';
-import withSettings from '@/containers/Settings/withSettings';
+import { useEstimateIsForeignCustomer, useEstimateTotals } from './utils';
 import { transactionNumber } from '@/utils';
 import { useUpdateEffect } from '@/hooks';
+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';
 
 /**
  * Estimate exchange rate input field.
  * @returns {JSX.Element}
  */
-export function EstimateExchangeRateInputField({ ...props }) {
+function EstimateExchangeRateInputFieldRoot({ ...props }) {
   const currentOrganization = useCurrentOrganization();
   const { values } = useFormikContext();
-
   const isForeignCustomer = useEstimateIsForeignCustomer();
 
   // Can't continue if the customer is not foreign.
@@ -27,13 +33,26 @@ export function EstimateExchangeRateInputField({ ...props }) {
   }
   return (
     <ExchangeRateInputGroup
+      name={'exchange_rate'}
       fromCurrency={values.currency_code}
       toCurrency={currentOrganization.base_currency}
+      formGroupProps={{ label: ' ', inline: true }}
+      withPopoverRecalcConfirm
       {...props}
     />
   );
 }
 
+/**
+ * Renders the estimate exchange rate input field with exchange rate
+ * with item entries price re-calc once exchange rate change.
+ * @returns {JSX.Element}
+ */
+export const EstimateExchangeRateInputField = R.compose(
+  withExchangeRateFetchingLoading,
+  withExchangeRateItemEntriesPriceRecalc,
+)(EstimateExchangeRateInputFieldRoot);
+
 /**
  * Estimate project select.
  * @returns {JSX.Element}
@@ -72,3 +91,32 @@ export const EstimateIncrementSyncSettingsToForm = R.compose(
 
   return null;
 });
+
+/**
+ * Syncs the auto exchange rate to the estimate form and shows up popup to user
+ * as an indication the entries rates have been changed.
+ * @returns {React.ReactNode}
+ */
+export const EstimateSyncAutoExRateToForm = R.compose(withDialogActions)(
+  ({
+    // #withDialogActions
+    openDialog,
+  }) => {
+    const { total } = useEstimateTotals();
+    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;
+  },
+);