refactor: implementing new formatted amount hooks

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}