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

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx

@@ -38,7 +38,10 @@ import {
 
 import withSettings from '@/containers/Settings/withSettings';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
-import { CreditNoteSyncIncrementSettingsToForm } from './components';
+import {
+  CreditNoteExchangeRateSync,
+  CreditNoteSyncIncrementSettingsToForm,
+} from './components';
 
 /**
  * Credit note form.
@@ -169,6 +172,7 @@ function CreditNoteForm({
 
           {/*-------- Effects --------*/}
           <CreditNoteSyncIncrementSettingsToForm />
+          <CreditNoteExchangeRateSync />
         </Form>
       </Formik>
     </div>

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx

@@ -26,6 +26,7 @@ import {
   inputIntent,
   handleDateChange,
 } from '@/utils';
+import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
 
 /**
  * Credit note form header fields.
@@ -37,10 +38,8 @@ export default function CreditNoteFormHeaderFields({}) {
       <CreditNoteCustomersSelect />
 
       {/* ----------- Exchange rate ----------- */}
-      <CreditNoteExchangeRateInputField
-        name={'exchange_rate'}
-        formGroupProps={{ label: ' ', inline: true }}
-      />
+      <CreditNoteExchangeRateInputField />
+
       {/* ----------- Credit note date ----------- */}
       <FastField name={'credit_note_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
@@ -93,8 +92,18 @@ export default function CreditNoteFormHeaderFields({}) {
  */
 function CreditNoteCustomersSelect() {
   // Credit note form context.
-  const { customers } = useCreditNoteFormContext();
   const { setFieldValue, values } = useFormikContext();
+  const { customers } = useCreditNoteFormContext();
+
+  const updateEntries = useCustomerUpdateExRate();
+
+  // Handles item change.
+  const handleItemChange = (customer) => {
+    setFieldValue('customer_id', customer.id);
+    setFieldValue('currency_code', customer?.currency_code);
+
+    updateEntries(customer);
+  };
 
   return (
     <FFormGroup
@@ -110,10 +119,7 @@ function CreditNoteCustomersSelect() {
         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/CreditNotes/CreditNoteForm/CreditNoteFormPage.tsx

@@ -6,6 +6,7 @@ import '@/style/pages/CreditNote/PageForm.scss';
 
 import CreditNoteForm from './CreditNoteForm';
 import { CreditNoteFormProvider } from './CreditNoteFormProvider';
+import { AutoExchangeRateProvider } from '@/containers/Entries/AutoExchangeProvider';
 
 /**
  * Credit note form page.
@@ -16,7 +17,9 @@ export default function CreditNoteFormPage() {
 
   return (
     <CreditNoteFormProvider creditNoteId={idAsInteger}>
-      <CreditNoteForm />
+      <AutoExchangeRateProvider>
+        <CreditNoteForm />
+      </AutoExchangeRateProvider>
     </CreditNoteFormProvider>
   );
 }

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/components.tsx

@@ -1,21 +1,27 @@
 // @ts-nocheck
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useFormikContext } from 'formik';
 import * as R from 'ramda';
 import { ExchangeRateInputGroup } from '@/components';
 import { useCurrentOrganization } from '@/hooks/state';
-import { useCreditNoteIsForeignCustomer } from './utils';
+import { useCreditNoteIsForeignCustomer, useCreditNoteTotals } from './utils';
 import withSettings from '@/containers/Settings/withSettings';
 import { transactionNumber } from '@/utils';
+import {
+  useSyncExRateToForm,
+  withExchangeRateFetchingLoading,
+  withExchangeRateItemEntriesPriceRecalc,
+} from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
- * credit exchange rate input field.
+ * Credit note exchange rate input field.
  * @returns {JSX.Element}
  */
-export function CreditNoteExchangeRateInputField({ ...props }) {
+function CreditNoteExchangeRateInputFieldRoot({ ...props }) {
   const currentOrganization = useCurrentOrganization();
   const { values } = useFormikContext();
-
   const isForeignCustomer = useCreditNoteIsForeignCustomer();
 
   // Can't continue if the customer is not foreign.
@@ -24,13 +30,21 @@ export function CreditNoteExchangeRateInputField({ ...props }) {
   }
   return (
     <ExchangeRateInputGroup
+      name={'exchange_rate'}
       fromCurrency={values.currency_code}
       toCurrency={currentOrganization.base_currency}
+      formGroupProps={{ label: ' ', inline: true }}
+      withPopoverRecalcConfirm
       {...props}
     />
   );
 }
 
+export const CreditNoteExchangeRateInputField = R.compose(
+  withExchangeRateFetchingLoading,
+  withExchangeRateItemEntriesPriceRecalc,
+)(CreditNoteExchangeRateInputFieldRoot);
+
 /**
  * Syncs credit note auto-increment settings to form.
  * @return {React.ReactNode}
@@ -56,3 +70,28 @@ export const CreditNoteSyncIncrementSettingsToForm = R.compose(
 
   return null;
 });
+
+/**
+ * Syncs the realtime exchange rate to the credit note form and shows up popup to the user
+ * as an indication the entries rates have been re-calculated.
+ * @returns {React.ReactNode}
+ */
+export const CreditNoteExchangeRateSync = R.compose(withDialogActions)(
+  ({ openDialog }) => {
+    const { total } = useCreditNoteTotals();
+    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;
+  },
+);