refactor: implementing new formatted amount hooks

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx

@@ -13,14 +13,12 @@ import {
   useInvoiceAdjustmentAmountFormatted,
   useInvoiceAggregatedTaxRates,
   useInvoiceDiscountAmountFormatted,
+  useInvoiceDueAmountFormatted,
+  useInvoicePaidAmountFormatted,
+  useInvoiceSubtotalFormatted,
+  useInvoiceTotalFormatted,
 } from './utils';
 import { TaxType } from '@/interfaces/TaxRates';
-import {
-  InvoiceDueAmountFormatted,
-  InvoicePaidAmountFormatted,
-  InvoiceSubTotalFormatted,
-  InvoiceTotalFormatted,
-} from './components';
 import { AdjustmentTotalLine } from './AdjustmentTotalLine';
 import { DiscountTotalLine } from './DiscountTotalLine';
 
@@ -32,6 +30,10 @@ export function InvoiceFormFooterRight() {
   const taxEntries = useInvoiceAggregatedTaxRates();
   const adjustmentAmount = useInvoiceAdjustmentAmountFormatted();
   const discountAmount = useInvoiceDiscountAmountFormatted();
+  const totalFormatted = useInvoiceTotalFormatted();
+  const subtotalFormatted = useInvoiceSubtotalFormatted();
+  const paidAmountFormatted = useInvoicePaidAmountFormatted();
+  const dueAmountFormatted = useInvoiceDueAmountFormatted();
 
   return (
     <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
@@ -43,7 +45,7 @@ export function InvoiceFormFooterRight() {
               : 'Subtotal'}
           </>
         }
-        value={<InvoiceSubTotalFormatted />}
+        value={subtotalFormatted}
       />
       <DiscountTotalLine
         currencyCode={currency_code}
@@ -61,18 +63,18 @@ export function InvoiceFormFooterRight() {
       ))}
       <TotalLine
         title={`Total (${currency_code})`}
-        value={<InvoiceTotalFormatted />}
+        value={totalFormatted}
         borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />
       <TotalLine
         title={<T id={'invoice_form.label.payment_amount'} />}
-        value={<InvoicePaidAmountFormatted />}
+        value={paidAmountFormatted}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
         title={<T id={'invoice_form.label.due_amount'} />}
-        value={<InvoiceDueAmountFormatted />}
+        value={dueAmountFormatted}
         textStyle={TotalLineTextStyle.Bold}
       />
     </InvoiceTotalLines>

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx

@@ -116,47 +116,3 @@ export const InvoiceExchangeRateSync = R.compose(withDialogActions)(
     return null;
   },
 );
-
-/**
- *Renders the invoice formatted total.
- * @returns {JSX.Element}
- */
-export const InvoiceTotalFormatted = () => {
-  const currencyCode = useInvoiceCurrencyCode();
-  const total = useInvoiceTotal();
-
-  return <FormatNumber value={total} currency={currencyCode} />;
-};
-
-/**
- * Renders the invoice formatted subtotal.
- * @returns {JSX.Element}
- */
-export const InvoiceSubTotalFormatted = () => {
-  const currencyCode = useInvoiceCurrencyCode();
-  const subTotal = useInvoiceSubtotal();
-
-  return <FormatNumber value={subTotal} currency={currencyCode} />;
-};
-
-/**
- * Renders the invoice formatted due amount.
- * @returns {JSX.Element}
- */
-export const InvoiceDueAmountFormatted = () => {
-  const currencyCode = useInvoiceCurrencyCode();
-  const dueAmount = useInvoiceDueAmount();
-
-  return <FormatNumber value={dueAmount} currency={currencyCode} />;
-};
-
-/**
- * Renders the invoice formatted paid amount.
- * @returns {JSX.Element}
- */
-export const InvoicePaidAmountFormatted = () => {
-  const currencyCode = useInvoiceCurrencyCode();
-  const paidAmount = useInvoicePaidAmount();
-
-  return <FormatNumber value={paidAmount} currency={currencyCode} />;
-};

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx

@@ -12,6 +12,7 @@ import {
   repeatValue,
   defaultFastFieldShouldUpdate,
   formattedAmount,
+  toSafeNumber,
 } from '@/utils';
 import { ERROR } from '@/constants/errors';
 import { AppToaster } from '@/components';
@@ -305,6 +306,17 @@ export const useInvoiceSubtotal = () => {
   return React.useMemo(() => getEntriesTotal(entries), [entries]);
 };
 
+/**
+ * Retrieves the invoice subtotal formatted.
+ * @returns {string}
+ */
+export const useInvoiceSubtotalFormatted = () => {
+  const subtotal = useInvoiceSubtotal();
+  const { values } = useFormikContext();
+
+  return formattedAmount(subtotal, values.currency_code);
+};
+
 /**
  * Retrieves the invoice discount amount.
  * @returns {number}
@@ -438,13 +450,26 @@ export const useInvoiceTotal = () => {
   const totalTaxAmount = useInvoiceTotalTaxAmount();
   const isExclusiveTax = useIsInvoiceTaxExclusive();
   const discountAmount = useInvoiceDiscountAmount();
+  const adjustmentAmount = useInvoiceAdjustmentAmount();
 
   return R.compose(
     R.when(R.always(isExclusiveTax), R.add(totalTaxAmount)),
     R.subtract(R.__, discountAmount),
+    R.subtract(R.__, adjustmentAmount),
   )(subtotal);
 };
 
+/**
+ * Retrieves the invoice total formatted.
+ * @returns {string}
+ */
+export const useInvoiceTotalFormatted = () => {
+  const total = useInvoiceTotal();
+  const { values } = useFormikContext();
+
+  return formattedAmount(total, values.currency_code);
+};
+
 /**
  * Retrieves the paid amount of the invoice.
  * @returns {number}
@@ -452,7 +477,18 @@ export const useInvoiceTotal = () => {
 export const useInvoicePaidAmount = () => {
   const { invoice } = useInvoiceFormContext();
 
-  return invoice?.payment_amount || 0;
+  return toSafeNumber(invoice?.payment_amount);
+};
+
+/**
+ * Retrieves the paid amount of the invoice formatted.
+ * @returns {string}
+ */
+export const useInvoicePaidAmountFormatted = () => {
+  const paidAmount = useInvoicePaidAmount();
+  const { values } = useFormikContext();
+
+  return formattedAmount(paidAmount, values.currency_code);
 };
 
 /**
@@ -466,6 +502,17 @@ export const useInvoiceDueAmount = () => {
   return Math.max(total - paidAmount, 0);
 };
 
+/**
+ * Retrieves the invoice due amount formatted.
+ * @returns {string}
+ */
+export const useInvoiceDueAmountFormatted = () => {
+  const dueAmount = useInvoiceDueAmount();
+  const { values } = useFormikContext();
+
+  return formattedAmount(dueAmount, values.currency_code);
+};
+
 /**
  * Detrmines whether the tax is inclusive.
  * @returns {boolean}