refactor: implementing new formatted amount hooks

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

@@ -185,6 +185,7 @@ export const useCreditNoteSubtotal = () => {
   const {
     values: { entries },
   } = useFormikContext();
+
   const total = React.useMemo(() => getEntriesTotal(entries), [entries]);
 
   return total;

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

@@ -13,13 +13,13 @@ import { AdjustmentTotalLine } from '../../Invoices/InvoiceForm/AdjustmentTotalL
 import { DiscountTotalLine } from '../../Invoices/InvoiceForm/DiscountTotalLine';
 
 export function EstimateFormFooterRight() {
-  const subtotalFormatted = useEstimateSubtotalFormatted();
-  const totalFormatted = useEstimateTotalFormatted();
   const {
     values: { currency_code },
   } = useFormikContext();
-  const discountAmount = useEstimateDiscountFormatted();
-  const adjustmentAmount = useEstimateAdjustmentFormatted();
+  const subtotalFormatted = useEstimateSubtotalFormatted();
+  const totalFormatted = useEstimateTotalFormatted();
+  const discountAmountFormatted = useEstimateDiscountFormatted();
+  const adjustmentAmountFormatted = useEstimateAdjustmentFormatted();
 
   return (
     <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
@@ -29,9 +29,9 @@ export function EstimateFormFooterRight() {
       />
       <DiscountTotalLine
         currencyCode={currency_code}
-        discountAmount={discountAmount}
+        discountAmount={discountAmountFormatted}
       />
-      <AdjustmentTotalLine adjustmentAmount={adjustmentAmount} />
+      <AdjustmentTotalLine adjustmentAmount={adjustmentAmountFormatted} />
       <TotalLine
         title={<T id={'estimate_form.label.total'} />}
         value={totalFormatted}

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

@@ -6,7 +6,7 @@ import * as R from 'ramda';
 import { useFormikContext } from 'formik';
 import { ExchangeRateInputGroup } from '@/components';
 import { useCurrentOrganization } from '@/hooks/state';
-import { useEstimateIsForeignCustomer, useEstimateTotals } from './utils';
+import { useEstimateIsForeignCustomer, useEstimateSubtotal } from './utils';
 import { transactionNumber } from '@/utils';
 import { useUpdateEffect } from '@/hooks';
 import withSettings from '@/containers/Settings/withSettings';
@@ -102,13 +102,13 @@ export const EstimateSyncAutoExRateToForm = R.compose(withDialogActions)(
     // #withDialogActions
     openDialog,
   }) => {
-    const { total } = useEstimateTotals();
+    const subtotal = useEstimateSubtotal();
     const timeout = useRef();
 
     useSyncExRateToForm({
       onSynced: () => {
         // If the total bigger then zero show alert to the user after adjusting entries.
-        if (total > 0) {
+        if (subtotal > 0) {
           clearTimeout(timeout.current);
           timeout.current = setTimeout(() => {
             openDialog(DialogsName.InvoiceExchangeRateChangeNotice);

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import * as R from 'ramda';
 import intl from 'react-intl-universal';
 import moment from 'moment';
@@ -64,6 +64,7 @@ export const defaultEstimate = {
   entries: [...repeatValue(defaultEstimateEntry, MIN_LINES_NUMBER)],
   attachments: [],
   pdf_template_id: '',
+  adjustment: '',
   discount: '',
   discount_type: 'amount',
 };
@@ -210,35 +211,6 @@ export const useSetPrimaryBranchToForm = () => {
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
 
-/**
- * Retreives the estimate totals.
- */
-export const useEstimateTotals = () => {
-  const {
-    values: { entries, currency_code: currencyCode },
-  } = useFormikContext();
-
-  // Retrieves the invoice entries total.
-  const total = React.useMemo(() => getEntriesTotal(entries), [entries]);
-
-  // 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],
-  );
-
-  return {
-    total,
-    formattedTotal,
-    formattedSubtotal,
-  };
-};
-
 /**
  * Retrieves the estimate subtotal.
  * @returns {number}
@@ -249,9 +221,9 @@ export const useEstimateSubtotal = () => {
   } = useFormikContext();
 
   // Retrieves the invoice entries total.
-  const total = React.useMemo(() => getEntriesTotal(entries), [entries]);
+  const subtotal = useMemo(() => getEntriesTotal(entries), [entries]);
 
-  return total;
+  return subtotal;
 };
 
 /**

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}

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooterRight.tsx

@@ -12,20 +12,22 @@ import {
 import {
   useReceiptAdjustmentFormatted,
   useReceiptDiscountAmountFormatted,
+  useReceiptDueAmountFormatted,
+  useReceiptPaidAmountFormatted,
   useReceiptSubtotalFormatted,
   useReceiptTotalFormatted,
-  useReceiptTotals,
 } from './utils';
 import { DiscountTotalLine } from '../../Invoices/InvoiceForm/DiscountTotalLine';
 import { AdjustmentTotalLine } from '../../Invoices/InvoiceForm/AdjustmentTotalLine';
 
 export function ReceiptFormFooterRight() {
-  const { formattedDueTotal, formattedPaymentTotal } = useReceiptTotals();
-
   const {
     values: { currency_code },
   } = useFormikContext();
 
+  const paidAmountFormatted = useReceiptPaidAmountFormatted();
+  const dueAmountFormatted = useReceiptDueAmountFormatted();
+
   const subtotalFormatted = useReceiptSubtotalFormatted();
   const totalFormatted = useReceiptTotalFormatted();
 
@@ -51,12 +53,12 @@ export function ReceiptFormFooterRight() {
       />
       <TotalLine
         title={<T id={'receipt_form.label.payment_amount'} />}
-        value={formattedPaymentTotal}
+        value={paidAmountFormatted}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
         title={<T id={'receipt_form.label.due_amount'} />}
-        value={formattedDueTotal}
+        value={dueAmountFormatted}
         textStyle={TotalLineTextStyle.Bold}
       />
     </ReceiptTotalLines>

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/components.tsx

@@ -7,7 +7,7 @@ import * as R from 'ramda';
 
 import { ExchangeRateInputGroup } from '@/components';
 import { useCurrentOrganization } from '@/hooks/state';
-import { useReceiptIsForeignCustomer, useReceiptTotals } from './utils';
+import { useReceiptIsForeignCustomer, useReceiptTotal } from './utils';
 import { useUpdateEffect } from '@/hooks';
 import { transactionNumber } from '@/utils';
 import withSettings from '@/containers/Settings/withSettings';
@@ -98,7 +98,7 @@ export const ReceiptSyncAutoExRateToForm = R.compose(withDialogActions)(
     // #withDialogActions
     openDialog,
   }) => {
-    const { total } = useReceiptTotals();
+    const total = useReceiptTotal();
     const timeout = useRef();
 
     useSyncExRateToForm({

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx

@@ -202,57 +202,6 @@ export const useSetPrimaryBranchToForm = () => {
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
 
-/**
- * Retreives the Receipt totals.
- */
-export const useReceiptTotals = () => {
-  const {
-    values: { entries, currency_code: currencyCode },
-  } = useFormikContext();
-
-  // Retrieves the invoice entries total.
-  const total = React.useMemo(() => getEntriesTotal(entries), [entries]);
-
-  // 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 payment total.
-  const paymentTotal = React.useMemo(() => 0, []);
-
-  // Retireves the formatted payment total.
-  const formattedPaymentTotal = React.useMemo(
-    () => formattedAmount(paymentTotal, currencyCode),
-    [paymentTotal, currencyCode],
-  );
-  // Retrieves the formatted due total.
-  const dueTotal = React.useMemo(
-    () => total - paymentTotal,
-    [total, paymentTotal],
-  );
-  // Retrieves the formatted due total.
-  const formattedDueTotal = React.useMemo(
-    () => formattedAmount(dueTotal, currencyCode),
-    [dueTotal, currencyCode],
-  );
-
-  return {
-    total,
-    paymentTotal,
-    dueTotal,
-    formattedTotal,
-    formattedSubtotal,
-    formattedPaymentTotal,
-    formattedDueTotal,
-  };
-};
-
 /**
  * Retrieves the receipt subtotal.
  * @returns {number}
@@ -349,6 +298,47 @@ export const useReceiptTotalFormatted = () => {
   return formattedAmount(total, values.currency_code);
 };
 
+/**
+ * Retrieves the receipt paid amount.
+ * @returns {number}
+ */
+export const useReceiptPaidAmount = () => {
+  return toSafeNumber(0);
+};
+
+/**
+ * Retrieves the formatted receipt paid amount.
+ * @returns {string}
+ */
+export const useReceiptPaidAmountFormatted = () => {
+  const paidAmount = useReceiptPaidAmount();
+  const { values } = useFormikContext();
+
+  return formattedAmount(paidAmount, values.currency_code);
+};
+
+/**
+ * Retrieves the receipt due amount.
+ * @returns {number}
+ */
+export const useReceiptDueAmount = () => {
+  const total = useReceiptTotal();
+  const paidAmount = useReceiptPaidAmount();
+
+  return total - paidAmount;
+};
+
+/**
+ * Retrieves the formatted receipt due amount.
+ * @returns {string}
+ */
+export const useReceiptDueAmountFormatted = () => {
+  const dueAmount = useReceiptDueAmount();
+  const { values } = useFormikContext();
+
+  return formattedAmount(dueAmount, values.currency_code);
+};
+
 /**
  * Detarmines whether the receipt has foreign customer.
  * @returns {boolean}