diff --git a/packages/webapp/src/components/PageForm/PageFormBigNumber.tsx b/packages/webapp/src/components/PageForm/PageFormBigNumber.tsx index 5508b8fdb..914cc95a0 100644 --- 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 (
{label} -

- -

+

{amount}

); diff --git a/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailTableFooter.tsx b/packages/webapp/src/containers/Drawers/BillDrawer/BillDetailTableFooter.tsx index 458705217..558d0f1ca 100644 --- 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 && ( + + )} } value={bill.total_formatted} diff --git a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx index ffb1f7985..c5bec8978 100644 --- 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() { - {creditNote.formatted_amount} + {creditNote.total_formatted} diff --git a/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx b/packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx index 881ac1def..ddb828370 100644 --- 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() { } value={creditNote.formatted_subtotal} + borderStyle={TotalLineBorderStyle.SingleDark} /> {creditNote.discount_amount > 0 && ( + )} + {creditNote.adjustment > 0 && ( + )} )} + {invoice.adjustment > 0 && ( + + )} {invoice.taxes.map((taxRate) => ( ))} - } value={invoice.total_formatted} diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.tsx index a55d47ee6..21bd0a923 100644 --- 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() { -

{receipt.formatted_amount}

+

{receipt.total_formatted}

 diff --git a/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx b/packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTableFooter.tsx index d142f0775..ee799c2a7 100644 --- 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() { } - value={receipt.formatted_subtotal} + value={receipt.subtotal_formatted} /> {receipt.discount_amount > 0 && ( )} + {receipt.adjustment > 0 && ( + + )} } - value={receipt.formatted_amount} + value={receipt.total_formatted} borderStyle={TotalLineBorderStyle.DoubleDark} textStyle={TotalLineTextStyle.Bold} /> diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx index 31b1172d5..0eb41999e 100644 --- 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 ( } - value={formattedSubtotal} + value={subtotalFormatted} borderStyle={TotalLineBorderStyle.None} /> } - value={formattedTotal} + value={totalFormatted} textStyle={TotalLineTextStyle.Bold} /> diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.tsx index 97dbd2399..858b0bc35 100644 --- 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 (
} - amount={totalExpenseAmount} - currencyCode={currency_code} + amount={totalFormatted} />
); diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx index e411d810a..19cb5ab0a 100644 --- 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); }; /** diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx index b3439fa4c..d4e5149d4 100644 --- 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 ( - + ); } diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx index 80de66529..35296368a 100644 --- 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]); }; diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeader.tsx index 4ae780e45..9c1b66a5a 100644 --- 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 (
); diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx index 3dc3c0a72..e796d85d3 100644 --- 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; }; /** diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx index 06ed4837d..9a3f450e1 100644 --- 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 ( ); } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx index 33f8dbe3e..aa1c165a1 100644 --- 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'; /** diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx index ac62fc4da..a8d924784 100644 --- 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 ( - + ); } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx index 5c3307b0b..3669bf868 100644 --- 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' diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx index 78a6e7b2f..ae63a1012 100644 --- 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 ( - + ); } export default InvoiceFormHeader; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx index 844415483..93fb58841 100644 --- 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; }; diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx index 9c6d8ac2e..997e4f66f 100644 --- 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 ( - + ); }