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

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">
+        <h1 class="big-amount__number">{amount}</h1>
-          <Money amount={amount} currency={currencyCode} />
-        </h1>
       </div>
     </div>
   );

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}

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>

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

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}

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>

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}
         />

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>

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 {
+  const totalFormatted = useExpenseTotalFormatted();
-    values: { currency_code, categories },
-  } = useFormikContext();
-
-  // Calculates the expense entries amount.
-  const totalExpenseAmount = useMemo(
-    () => sumBy(categories, 'amount'),
-    [categories],
-  );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <ExpenseFormHeaderFields />
       <PageFormBigNumber
         label={<T id={'expense_amount'} />}
-        amount={totalExpenseAmount}
+        amount={totalFormatted}
-        currencyCode={currency_code}
       />
     </div>
   );

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(
+ * Retrieves the expense subtotal formatted.
-    () => formattedAmount(total, currencyCode),
+ * @returns {string}
-    [total, currencyCode],
+ */
-  );
+export const useExpenseSubtotalFormatted = () => {
-  // Retrieves the formatted subtotal.
+  const subtotal = useExpenseSubtotal();
-  const formattedSubtotal = React.useMemo(
+  const {
-    () => formattedAmount(total, currencyCode, { money: false }),
+    values: { currency_code },
-    [total, currencyCode],
+  } = useFormikContext();
-  );
 
-  return {
+  return formattedAmount(subtotal, currency_code);
-    formattedTotal,
+};
-    formattedSubtotal,
+
-  };
+/**
+ * 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);
 };
 
 /**

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 {
+  const totalFormatted = useBillTotalFormatted();
-    values: { currency_code, entries },
-  } = useFormikContext();
-
-  // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => sumBy(entries, 'amount'), [entries]);
 
   return (
-    <PageFormBigNumber
+    <PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
-      label={intl.get('due_amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
   );
 }
 

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]);
 };
 

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();
+  const totalFormatted = useVendorCreditTotalFormatted();
-
-  // Calculate the total amount.
-  const totalAmount = React.useMemo(
-    () => getEntriesTotal(entries),
-    [entries],
-  );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <VendorCreditNoteFormHeaderFields />
       <PageFormBigNumber
         label={intl.get('vendor_credits.label.amount_to_credit')}
-        amount={totalAmount}
+        amount={totalFormatted}
-        currencyCode={currency_code}
       />
     </div>
   );

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;
 };
 
 /**

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 {
+  const totalFormatted = useCreditNoteTotalFormatted();
-    values: { entries, currency_code },
-  } = useFormikContext();
-
-  // Calculate the total amount.
-  const totalAmount = React.useMemo(() => getEntriesTotal(entries), [entries]);
 
   return (
     <PageFormBigNumber
       label={intl.get('credit_note.label_amount_to_credit')}
-      amount={totalAmount}
+      amount={totalFormatted}
-      currencyCode={currency_code}
     />
   );
 }

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';
 
 /**

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 {
+  const totalFormatted = useEstimateTotalFormatted();
-    values: { entries, currency_code },
-  } = useFormikContext();
-
-  // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]);
 
   return (
-    <PageFormBigNumber
+    <PageFormBigNumber label={intl.get('amount')} amount={totalFormatted} />
-      label={intl.get('amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
   );
 }
 

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'

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
+    <PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
-      label={intl.get('due_amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
   );
 }
 export default InvoiceFormHeader;

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;
 };

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 {
+  const totalFormatted = useReceiptTotalFormatted();
-    values: { currency_code, entries },
-  } = useFormikContext();
-
-  // Calculate the total due amount of bill entries.
-  const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]);
 
   return (
-    <PageFormBigNumber
+    <PageFormBigNumber label={intl.get('due_amount')} amount={totalFormatted} />
-      label={intl.get('due_amount')}
-      amount={totalDueAmount}
-      currencyCode={currency_code}
-    />
   );
 }