refactor: update estimate and receipt forms to use new subtotal and total formatting utilities

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

@@ -6,13 +6,15 @@ import { T, TotalLines, TotalLine, TotalLineTextStyle } from '@/components';
 import {
   useEstimateAdjustmentFormatted,
   useEstimateDiscountFormatted,
-  useEstimateTotals,
+  useEstimateSubtotalFormatted,
+  useEstimateTotalFormatted,
 } from './utils';
 import { AdjustmentTotalLine } from '../../Invoices/InvoiceForm/AdjustmentTotalLine';
 import { DiscountTotalLine } from '../../Invoices/InvoiceForm/DiscountTotalLine';
 
 export function EstimateFormFooterRight() {
-  const { formattedSubtotal, formattedTotal } = useEstimateTotals();
+  const subtotalFormatted = useEstimateSubtotalFormatted();
+  const totalFormatted = useEstimateTotalFormatted();
   const {
     values: { currency_code },
   } = useFormikContext();
@@ -23,7 +25,7 @@ export function EstimateFormFooterRight() {
     <EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
         title={<T id={'estimate_form.label.subtotal'} />}
-        value={formattedSubtotal}
+        value={subtotalFormatted}
       />
       <DiscountTotalLine
         currencyCode={currency_code}
@@ -32,7 +34,7 @@ export function EstimateFormFooterRight() {
       <AdjustmentTotalLine adjustmentAmount={adjustmentAmount} />
       <TotalLine
         title={<T id={'estimate_form.label.total'} />}
-        value={formattedTotal}
+        value={totalFormatted}
         textStyle={TotalLineTextStyle.Bold}
       />
     </EstimateTotalLines>

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

@@ -10,6 +10,7 @@ import {
   repeatValue,
   transformToForm,
   formattedAmount,
+  toSafeNumber,
 } from '@/utils';
 import { useEstimateFormContext } from './EstimateFormProvider';
 import {
@@ -272,9 +273,11 @@ export const useEstimateSubtotalFormatted = () => {
  */
 export const useEstimateDiscount = () => {
   const { values } = useFormikContext();
-  const discountAmount = parseFloat(values.discount);
+  const discount = toSafeNumber(values.discount);
 
-  return discountAmount;
+  return values?.discount_type === 'percentage'
+    ? (subtotal * discount) / 100
+    : discount;
 };
 
 /**
@@ -296,7 +299,7 @@ export const useEstimateDiscountFormatted = () => {
  */
 export const useEstimateAdjustment = () => {
   const { values } = useFormikContext();
-  const adjustmentAmount = parseFloat(values.adjustment);
+  const adjustmentAmount = toSafeNumber(values.adjustment);
 
   return adjustmentAmount;
 };

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

@@ -12,23 +12,23 @@ import {
 import {
   useReceiptAdjustmentFormatted,
   useReceiptDiscountAmountFormatted,
+  useReceiptSubtotalFormatted,
+  useReceiptTotalFormatted,
   useReceiptTotals,
 } from './utils';
 import { DiscountTotalLine } from '../../Invoices/InvoiceForm/DiscountTotalLine';
 import { AdjustmentTotalLine } from '../../Invoices/InvoiceForm/AdjustmentTotalLine';
 
 export function ReceiptFormFooterRight() {
-  const {
+  const { formattedDueTotal, formattedPaymentTotal } = useReceiptTotals();
-    formattedSubtotal,
-    formattedTotal,
-    formattedDueTotal,
-    formattedPaymentTotal,
-  } = useReceiptTotals();
 
   const {
     values: { currency_code },
   } = useFormikContext();
 
+  const subtotalFormatted = useReceiptSubtotalFormatted();
+  const totalFormatted = useReceiptTotalFormatted();
+
   const discountAmount = useReceiptDiscountAmountFormatted();
   const adjustmentAmount = useReceiptAdjustmentFormatted();
 
@@ -36,7 +36,7 @@ export function ReceiptFormFooterRight() {
     <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
         title={<T id={'receipt_form.label.subtotal'} />}
-        value={formattedSubtotal}
+        value={subtotalFormatted}
       />
       <DiscountTotalLine
         currencyCode={currency_code}
@@ -45,7 +45,7 @@ export function ReceiptFormFooterRight() {
       <AdjustmentTotalLine adjustmentAmount={adjustmentAmount} />
       <TotalLine
         title={<T id={'receipt_form.label.total'} />}
-        value={formattedTotal}
+        value={totalFormatted}
         borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />

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

@@ -268,14 +268,40 @@ export const useReceiptSubtotal = () => {
   return subtotal;
 };
 
+/**
+ * Retrieves the formatted subtotal.
+ * @returns {string}
+ */
+export const useReceiptSubtotalFormatted = () => {
+  const subtotal = useReceiptSubtotal();
+  const { values } = useFormikContext();
+
+  return formattedAmount(subtotal, values.currency_code, { money: true });
+};
+
+/**
+ * Retrieves the receipt discount amount.
+ * @returns {number}
+ */
+export const useReceiptDiscountAmount = () => {
+  const { values } = useFormikContext();
+  const subtotal = useReceiptSubtotal();
+  const discount = toSafeNumber(values.discount);
+
+  return values?.discount_type === 'percentage'
+    ? (subtotal * discount) / 100
+    : discount;
+};
+
 /**
  * Retrieves the formatted discount amount.
  * @returns {string}
  */
 export const useReceiptDiscountAmountFormatted = () => {
   const { values } = useFormikContext();
+  const discount = useReceiptDiscountAmount();
 
-  return formattedAmount(values.discount, values.currency_code);
+  return formattedAmount(discount, values.currency_code);
 };
 
 /**