refactor: replace journal total calculations with new formatted amount hooks

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 (
-    <PageFormBigNumber
-      label={<T id={'amount'} />}
-      amount={total}
-      currencyCode={currency_code}
-    />
+    <PageFormBigNumber label={<T id={'amount'} />} amount={totalFormatted} />
   );
 }

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 (
     <MakeJouranlTotalLines>
@@ -29,7 +33,7 @@ export function MakeJournalFormFooterRight() {
   );
 }
 
-const MakeJouranlTotalLines =styled(TotalLines)`
+const MakeJouranlTotalLines = styled(TotalLines)`
   width: 100%;
   color: #555555;
 `;

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

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,