fix: update financial forms to use new formatted amount utilities and add adjustment fields

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx

@@ -8,21 +8,25 @@ import {
   TotalLineBorderStyle,
   TotalLineTextStyle,
 } from '@/components';
-import { useExpensesTotals } from './utils';
+import {
+  useExpenseSubtotalFormatted,
+  useExpenseTotalFormatted,
+} from './utils';
 
 export function ExpenseFormFooterRight() {
-  const { formattedSubtotal, formattedTotal } = useExpensesTotals();
+  const totalFormatted = useExpenseTotalFormatted();
+  const subtotalFormatted = useExpenseSubtotalFormatted();
 
   return (
     <ExpensesTotalLines>
       <TotalLine
         title={<T id={'expense.label.subtotal'} />}
-        value={formattedSubtotal}
+        value={subtotalFormatted}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
         title={<T id={'expense.label.total'} />}
-        value={formattedTotal}
+        value={totalFormatted}
         textStyle={TotalLineTextStyle.Bold}
       />
     </ExpensesTotalLines>

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.tsx

@@ -1,34 +1,23 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import { sumBy } from 'lodash';
-import { useFormikContext } from 'formik';
 import { FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
 
-
 import ExpenseFormHeaderFields from './ExpenseFormHeaderFields';
 import { PageFormBigNumber } from '@/components';
+import { useExpenseTotalFormatted } from './utils';
 
 // Expense form header.
 export default function ExpenseFormHeader() {
-  const {
-    values: { currency_code, categories },
-  } = useFormikContext();
-
-  // Calculates the expense entries amount.
-  const totalExpenseAmount = useMemo(
-    () => sumBy(categories, 'amount'),
-    [categories],
-  );
+  const totalFormatted = useExpenseTotalFormatted();
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <ExpenseFormHeaderFields />
       <PageFormBigNumber
         label={<T id={'expense_amount'} />}
-        amount={totalExpenseAmount}
-        currencyCode={currency_code}
+        amount={totalFormatted}
       />
     </div>
   );

packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx

@@ -166,30 +166,52 @@ export const useSetPrimaryBranchToForm = () => {
 };
 
 /**
- * Retreives the Journal totals.
+ * Retrieves the expense subtotal.
+ * @returns {number}
  */
-export const useExpensesTotals = () => {
+export const useExpenseSubtotal = () => {
   const {
-    values: { categories, currency_code: currencyCode },
+    values: { categories },
   } = useFormikContext();
 
-  const total = sumBy(categories, 'amount');
+  // Calculates the expense entries amount.
+  return React.useMemo(() => sumBy(categories, 'amount'), [categories]);
+};
 
-  // Retrieves the formatted total money.
-  const formattedTotal = React.useMemo(
-    () => formattedAmount(total, currencyCode),
-    [total, currencyCode],
-  );
-  // Retrieves the formatted subtotal.
-  const formattedSubtotal = React.useMemo(
-    () => formattedAmount(total, currencyCode, { money: false }),
-    [total, currencyCode],
-  );
+/**
+ * Retrieves the expense subtotal formatted.
+ * @returns {string}
+ */
+export const useExpenseSubtotalFormatted = () => {
+  const subtotal = useExpenseSubtotal();
+  const {
+    values: { currency_code },
+  } = useFormikContext();
 
-  return {
-    formattedTotal,
-    formattedSubtotal,
-  };
+  return formattedAmount(subtotal, currency_code);
+};
+
+/**
+ * Retrieves the expense total.
+ * @returns {number}
+ */
+export const useExpenseTotal = () => {
+  const subtotal = useExpenseSubtotal();
+
+  return subtotal;
+};
+
+/**
+ * Retrieves the expense total formatted.
+ * @returns {string}
+ */
+export const useExpenseTotalFormatted = () => {
+  const total = useExpenseTotal();
+  const {
+    values: { currency_code },
+  } = useFormikContext();
+
+  return formattedAmount(total, currency_code);
 };
 
 /**