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

2026-02-17 05:10:31 +00:00 · 2024-12-03 17:53:37 +02:00
parent 542763ddf5
commit 3a19518440
21 changed files with 128 additions and 133 deletions
--- a/packages/webapp/src/components/PageForm/PageFormBigNumber.tsx
+++ b/packages/webapp/src/components/PageForm/PageFormBigNumber.tsx
@@ -2,18 +2,22 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
-import { Money } from '@/components';

 import '@/style/components/BigAmount.scss';

-export function PageFormBigNumber({ label, amount, currencyCode }) {
+interface PageFormBigNumberProps {
+  label: string;
+  amount: string | number;
+}
+export function PageFormBigNumber({
+  label,
+  amount,
+}: PageFormBigNumberProps) {
  return (
    <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
      <div class="big-amount">
        <span class="big-amount__label">{label}</span>
-        <h1 class="big-amount__number">
-          <Money amount={amount} currency={currencyCode} />
-        </h1>
+        <h1 class="big-amount__number">{amount}</h1>
      </div>
    </div>
  );
--- a/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailTableFooter.tsx
@@ -42,6 +42,12 @@ export function BillDetailTableFooter() {
            textStyle={TotalLineTextStyle.Regular}
          />
        )}
+        {bill.adjustment > 0 && (
+          <TotalLine
+            title={'Adjustment'}
+            value={bill.adjustment_formatted}
+          />
+        )}
        <TotalLine
          title={<T id={'bill.details.total'} />}
          value={bill.total_formatted}
--- a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx
@@ -30,7 +30,7 @@ export default function CreditNoteDetailHeader() {
      <CommercialDocTopHeader>
        <DetailsMenu>
          <AmountItem label={intl.get('amount')}>
-            <span class="big-number">{creditNote.formatted_amount}</span>
+            <span class="big-number">{creditNote.total_formatted}</span>
          </AmountItem>

          <StatusItem>
--- a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx
@@ -21,6 +21,7 @@ export default function CreditNoteDetailTableFooter() {
        <TotalLine
          title={<T id={'credit_note.drawer.label_subtotal'} />}
          value={creditNote.formatted_subtotal}
+          borderStyle={TotalLineBorderStyle.SingleDark}
        />
        {creditNote.discount_amount > 0 && (
          <TotalLine
@@ -30,7 +31,12 @@ export default function CreditNoteDetailTableFooter() {
                : 'Discount'
            }
            value={creditNote.discount_amount_formatted}
-            borderStyle={TotalLineBorderStyle.Dark}
+          />
+        )}
+        {creditNote.adjustment > 0 && (
+          <TotalLine
+            title={'Adjustment'}
+            value={creditNote.adjustment_formatted}
          />
        )}
        <TotalLine
--- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTableFooter.tsx
@@ -37,6 +37,13 @@ export function InvoiceDetailTableFooter() {
            textStyle={TotalLineTextStyle.Regular}
          />
        )}
+        {invoice.adjustment > 0 && (
+          <TotalLine
+            title="Adjustment"
+            value={invoice.adjustment_formatted}
+            textStyle={TotalLineTextStyle.Regular}
+          />
+        )}
        {invoice.taxes.map((taxRate) => (
          <TotalLine
            key={taxRate.id}
@@ -45,7 +52,6 @@ export function InvoiceDetailTableFooter() {
            textStyle={TotalLineTextStyle.Regular}
          />
        ))}
-
        <TotalLine
          title={<T id={'invoice.details.total'} />}
          value={invoice.total_formatted}
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx
@@ -31,7 +31,7 @@ export default function ReceiptDetailHeader() {
      <CommercialDocTopHeader>
        <DetailsMenu>
          <AmountReceiptItem label={intl.get('amount')}>
-            <h3 class="big-number">{receipt.formatted_amount}</h3>
+            <h3 class="big-number">{receipt.total_formatted}</h3>
          </AmountReceiptItem>

          <StatusReceiptItem>
--- a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx
@@ -23,7 +23,7 @@ export default function ReceiptDetailTableFooter() {
      <ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
        <TotalLine
          title={<T id={'receipt.details.subtotal'} />}
-          value={receipt.formatted_subtotal}
+          value={receipt.subtotal_formatted}
        />
        {receipt.discount_amount > 0 && (
          <TotalLine
@@ -36,9 +36,16 @@ export default function ReceiptDetailTableFooter() {
            textStyle={TotalLineTextStyle.Regular}
          />
        )}
+        {receipt.adjustment > 0 && (
+          <TotalLine
+            title={'Adjustment'}
+            value={receipt.adjustment_formatted}
+            textStyle={TotalLineTextStyle.Regular}
+          />
+        )}
        <TotalLine
          title={<T id={'receipt.details.total'} />}
-          value={receipt.formatted_amount}
+          value={receipt.total_formatted}
          borderStyle={TotalLineBorderStyle.DoubleDark}
          textStyle={TotalLineTextStyle.Bold}
        />
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx
+++ b/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>
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.tsx
+++ b/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>
  );
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx
+++ b/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);
 };

 /**
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx
@@ -1,13 +1,12 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
-import { sumBy } from 'lodash';
-import { useFormikContext } from 'formik';
 import { CLASSES } from '@/constants/classes';
 import { PageFormBigNumber } from '@/components';

 import BillFormHeaderFields from './BillFormHeaderFields';
+import { useBillTotalFormatted } from './utils';

 /**
 * Fill form header.
@@ -22,19 +21,10 @@ function BillFormHeader() {
 }

 function BillFormBigTotal() {
-  const {
-    values: { currency_code, entries },
-  } = useFormikContext();
-
-  // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => sumBy(entries, 'amount'), [entries]);
+  const totalFormatted = useBillTotalFormatted();

  return (
-    <PageFormBigNumber
-      label={intl.get('due_amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
+    <PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
  );
 }

--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx
@@ -325,7 +325,7 @@ export const useBillSubtotal = () => {
 */
 export const useBillSubtotalFormatted = () => {
  const subtotal = useBillSubtotal();
-  const { values} = useFormikContext();
+  const { values } = useFormikContext();

  return formattedAmount(subtotal, values.currency_code);
 };
@@ -336,8 +336,12 @@ export const useBillSubtotalFormatted = () => {
 */
 export const useBillDiscountAmount = () => {
  const { values } = useFormikContext();
+  const subtotal = useBillSubtotal();
+  const discount = toSafeNumber(values.discount);

-  return toSafeNumber(values.discount);
+  return values?.discount_type === 'percentage'
+    ? (subtotal * discount) / 100
+    : discount;
 };

 /**
@@ -384,7 +388,6 @@ export const useBillTotalTaxAmount = () => {
      .filter((entry) => entry.tax_amount)
      .sumBy('tax_amount')
      .value();
-
  }, [values.entries]);
 };

--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx
@@ -2,33 +2,23 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
-import { useFormikContext } from 'formik';
 import { CLASSES } from '@/constants/classes';
 import VendorCreditNoteFormHeaderFields from './VendorCreditNoteFormHeaderFields';
-
-import { getEntriesTotal } from '@/containers/Entries/utils';
 import { PageFormBigNumber } from '@/components';
-
+import { useVendorCreditTotalFormatted } from './utils';

 /**
 * Vendor Credit note header.
 */
 function VendorCreditNoteFormHeader() {
-  const { values:{entries ,currency_code} } = useFormikContext();
-
-  // Calculate the total amount.
-  const totalAmount = React.useMemo(
-    () => getEntriesTotal(entries),
-    [entries],
-  );
+  const totalFormatted = useVendorCreditTotalFormatted();

  return (
    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
      <VendorCreditNoteFormHeaderFields />
      <PageFormBigNumber
        label={intl.get('vendor_credits.label.amount_to_credit')}
-        amount={totalAmount}
-        currencyCode={currency_code}
+        amount={totalFormatted}
      />
    </div>
  );
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx
@@ -206,8 +206,12 @@ export const useVendorCreditSubtotal = () => {
 */
 export const useVendorCreditDiscountAmount = () => {
  const { values } = useFormikContext();
+  const subtotal = useVendorCreditSubtotal();
+  const discount = toSafeNumber(values.discount);

-  return toSafeNumber(values.discount);
+  return values.discount_type === 'percentage'
+    ? (subtotal * discount) / 100
+    : discount;
 };

 /**
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx
@@ -1,11 +1,9 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { useFormikContext } from 'formik';
 import CreditNoteFormHeaderFields from './CreditNoteFormHeaderFields';
-
-import { getEntriesTotal } from '@/containers/Entries/utils';
 import { Group, PageFormBigNumber } from '@/components';
+import { useCreditNoteTotalFormatted } from './utils';

 /**
 * Credit note header.
@@ -31,18 +29,12 @@ function CreditNoteFormHeader() {
 * @returns {React.ReactNode}
 */
 function CreditNoteFormBigNumber() {
-  const {
-    values: { entries, currency_code },
-  } = useFormikContext();
-
-  // Calculate the total amount.
-  const totalAmount = React.useMemo(() => getEntriesTotal(entries), [entries]);
+  const totalFormatted = useCreditNoteTotalFormatted();

  return (
    <PageFormBigNumber
      label={intl.get('credit_note.label_amount_to_credit')}
-      amount={totalAmount}
-      currencyCode={currency_code}
+      amount={totalFormatted}
    />
  );
 }
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx
@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from 'react';
+import { useFormikContext } from 'formik';
 import EstimateNumberDialog from '@/containers/Dialogs/EstimateNumberDialog';

 /**
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx
@@ -1,12 +1,10 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import intl from 'react-intl-universal';
-import { useFormikContext } from 'formik';
-import { x } from '@xstyled/emotion';

 import EstimateFormHeaderFields from './EstimateFormHeaderFields';
-import { getEntriesTotal } from '@/containers/Entries/utils';
 import { Group, PageFormBigNumber } from '@/components';
+import { useEstimateTotalFormatted } from './utils';

 // Estimate form top header.
 function EstimateFormHeader() {
@@ -29,19 +27,10 @@ function EstimateFormHeader() {
 * @returns {React.ReactNode}
 */
 function EstimateFormBigTotal() {
-  const {
-    values: { entries, currency_code },
-  } = useFormikContext();
-
-  // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]);
+  const totalFormatted = useEstimateTotalFormatted();

  return (
-    <PageFormBigNumber
-      label={intl.get('amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
+    <PageFormBigNumber label={intl.get('amount')} amount={totalFormatted} />
  );
 }

--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx
@@ -245,6 +245,7 @@ export const useEstimateSubtotalFormatted = () => {
 */
 export const useEstimateDiscount = () => {
  const { values } = useFormikContext();
+  const subtotal = useEstimateSubtotal();
  const discount = toSafeNumber(values.discount);

  return values?.discount_type === 'percentage'
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx
@@ -1,10 +1,9 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { useFormikContext } from 'formik';
 import { Group, PageFormBigNumber } from '@/components';
 import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
-import { useInvoiceDueAmount } from './utils';
+import { useInvoiceTotalFormatted } from './utils';

 /**
 * Invoice form header section.
@@ -29,19 +28,11 @@ function InvoiceFormHeader() {
 * @returns {React.ReactNode}
 */
 function InvoiceFormBigTotal() {
-  const {
-    values: { currency_code },
-  } = useFormikContext();
-
  // Calculate the total due amount of invoice entries.
-  const totalDueAmount = useInvoiceDueAmount();
+  const totalFormatted = useInvoiceTotalFormatted();

  return (
-    <PageFormBigNumber
-      label={intl.get('due_amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
+    <PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
  );
 }
 export default InvoiceFormHeader;
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
@@ -324,7 +324,7 @@ export const useInvoiceSubtotalFormatted = () => {
 export const useInvoiceDiscountAmount = () => {
  const { values } = useFormikContext();
  const subtotal = useInvoiceSubtotal();
-  const discount = parseFloat(values.discount);
+  const discount = toSafeNumber(values.discount);

  return values?.discount_type === 'percentage'
    ? (subtotal * discount) / 100
@@ -350,7 +350,7 @@ export const useInvoiceDiscountAmountFormatted = () => {
 */
 export const useInvoiceAdjustmentAmount = () => {
  const { values } = useFormikContext();
-  const adjustment = parseFloat(values.adjustment);
+  const adjustment = toSafeNumber(values.adjustment);

  return adjustment;
 };
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
@@ -1,10 +1,9 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import intl from 'react-intl-universal';
-import { useFormikContext } from 'formik';
 import { Group, PageFormBigNumber } from '@/components';
 import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
-import { getEntriesTotal } from '@/containers/Entries/utils';
+import { useReceiptTotalFormatted } from './utils';

 /**
 * Receipt form header section.
@@ -35,19 +34,10 @@ function ReceiptFormHeader({
 * @returns {React.ReactNode}
 */
 function ReceiptFormHeaderBigTotal() {
-  const {
-    values: { currency_code, entries },
-  } = useFormikContext();
-
-  // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]);
+  const totalFormatted = useReceiptTotalFormatted();

  return (
-    <PageFormBigNumber
-      label={intl.get('due_amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
+    <PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
  );
 }