From a25ab3964765520430f6cb6fc8a512ada5699382 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Wed, 4 Dec 2024 13:23:40 +0200 Subject: [PATCH] refactor: replace journal total calculations with new formatted amount hooks --- .../MakeJournal/MakeJournalEntriesHeader.tsx | 17 +--- .../MakeJournalFormFooterRight.tsx | 10 ++- .../Accounting/MakeJournal/utils.tsx | 90 +++++++++++++------ .../InvoiceDetailHeader.tsx | 2 - 4 files changed, 74 insertions(+), 45 deletions(-) diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx index fe3cf3cd3..174c66854 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx @@ -1,11 +1,10 @@ // @ts-nocheck import React from 'react'; import classNames from 'classnames'; -import { useFormikContext } from 'formik'; import { CLASSES } from '@/constants/classes'; -import { safeSumBy } from '@/utils'; import { PageFormBigNumber, FormattedMessage as T } from '@/components'; import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields'; +import { useManualJournalTotalFormatted } from './utils'; export default function MakeJournalEntriesHeader() { return ( @@ -21,19 +20,9 @@ export default function MakeJournalEntriesHeader() { * @returns {React.ReactNode} */ function MakeJournalHeaderBigNumber() { - const { - values: { entries, currency_code }, - } = useFormikContext(); - const totalCredit = safeSumBy(entries, 'credit'); - const totalDebit = safeSumBy(entries, 'debit'); - - const total = Math.max(totalCredit, totalDebit); + const totalFormatted = useManualJournalTotalFormatted(); return ( - } - amount={total} - currencyCode={currency_code} - /> + } amount={totalFormatted} /> ); } diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx index 3aecd7e3d..59c8f6e0d 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFooterRight.tsx @@ -8,10 +8,14 @@ import { TotalLineBorderStyle, TotalLineTextStyle, } from '@/components'; -import { useJournalTotals } from './utils'; +import { + useManualJournalSubtotalFormatted, + useManualJournalTotalFormatted, +} from './utils'; export function MakeJournalFormFooterRight() { - const { formattedSubtotal, formattedTotal } = useJournalTotals(); + const formattedSubtotal = useManualJournalSubtotalFormatted(); + const formattedTotal = useManualJournalTotalFormatted(); return ( @@ -29,7 +33,7 @@ export function MakeJournalFormFooterRight() { ); } -const MakeJouranlTotalLines =styled(TotalLines)` +const MakeJouranlTotalLines = styled(TotalLines)` width: 100%; color: #555555; `; diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx index 72d0e8023..bd17c58af 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx @@ -226,35 +226,73 @@ export const useSetPrimaryBranchToForm = () => { }, [isBranchesSuccess, setFieldValue, branches]); }; -/** - * Retreives the Journal totals. - */ -export const useJournalTotals = () => { - const { - values: { entries, currency_code: currencyCode }, - } = useFormikContext(); +export const useManualJournalCreditTotal = () => { + const { values } = useFormikContext(); + const totalCredit = safeSumBy(values.entries, 'credit'); - // Retrieves the invoice entries total. - const totalCredit = safeSumBy(entries, 'credit'); - const totalDebit = safeSumBy(entries, 'debit'); + return totalCredit; +}; - const total = Math.max(totalCredit, totalDebit); - - // 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], - ); +export const useManualJournalCreditTotalFormatted = () => { + const totalCredit = useManualJournalCreditTotal(); + const { values } = useFormikContext(); - return { - formattedTotal, - formattedSubtotal, - }; + return formattedAmount(totalCredit, values.currency_code); +}; + +export const useManualJournalDebitTotal = () => { + const { values } = useFormikContext(); + const totalDebit = safeSumBy(values.entries, 'debit'); + + return totalDebit; +}; + +export const useManualJournalDebitTotalFormatted = () => { + const totalDebit = useManualJournalDebitTotal(); + const { values } = useFormikContext(); + + return formattedAmount(totalDebit, values.currency_code); +}; + +export const useManualJournalSubtotal = () => { + const totalCredit = useManualJournalCreditTotal(); + const totalDebit = useManualJournalDebitTotal(); + + return Math.max(totalCredit, totalDebit); +}; + +export const useManualJournalSubtotalFormatted = () => { + const subtotal = useManualJournalSubtotal(); + const { values } = useFormikContext(); + + return formattedAmount(subtotal, values.currency_code); +}; + +export const useManualJournalTotalDifference = () => { + const totalCredit = useManualJournalCreditTotal(); + const totalDebit = useManualJournalDebitTotal(); + + return Math.abs(totalCredit - totalDebit); +}; + +export const useManualJournalTotalDifferenceFormatted = () => { + const difference = useManualJournalTotalDifference(); + const { values } = useFormikContext(); + + return formattedAmount(difference, values.currency_code); +}; + +export const useManualJournalTotal = () => { + const total = useManualJournalSubtotal(); + + return total; +}; + +export const useManualJournalTotalFormatted = () => { + const total = useManualJournalTotal(); + const { values } = useFormikContext(); + + return formattedAmount(total, values.currency_code); }; /** diff --git a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx index 9231132a8..ea27e90c1 100644 --- a/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx +++ b/packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.tsx @@ -5,12 +5,10 @@ import styled from 'styled-components'; import { defaultTo } from 'lodash'; import { - ButtonLink, Row, Col, DetailsMenu, DetailItem, - FormatDate, CommercialDocHeader, CommercialDocTopHeader, CustomerDrawerLink,