feat(InvoiceFormat): invoice footer totals.

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.js

@@ -8,33 +8,38 @@ import {
   TotalLineBorderStyle,
   TotalLineTextStyle,
 } from 'components';
-import { useInvoiceTotal } from './utils';
+import { useInvoiceTotals } from './utils';
 
 export function InvoiceFormFooterRight() {
   // Calculate the total due amount of invoice entries.
-  const totalInvoice = useInvoiceTotal();
+  const {
+    formattedSubtotal,
+    formattedTotal,
+    formattedDueTotal,
+    formattedPaymentTotal,
+  } = useInvoiceTotals();
 
   return (
     <InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
         title={<T id={'invoice.details.subtotal'} />}
-        value={'$5000.00'}
+        value={formattedSubtotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
         title={<T id={'invoice.details.total'} />}
-        value={'$5000.00'}
+        value={formattedTotal}
         borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />
       <TotalLine
         title={<T id={'invoice.details.payment_amount'} />}
-        value={'$0.00'}
+        value={formattedPaymentTotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
         title={<T id={'invoice.details.due_amount'} />}
-        value={'$5000.00'}
+        value={formattedDueTotal}
         textStyle={TotalLineTextStyle.Bold}
       />
     </InvoiceTotalLines>

src/containers/Sales/Invoices/InvoiceForm/utils.js

@@ -11,7 +11,7 @@ import {
 import { useFormikContext } from 'formik';
 import intl from 'react-intl-universal';
 
-import { defaultFastFieldShouldUpdate } from 'utils';
+import { formattedAmount, defaultFastFieldShouldUpdate } from 'utils';
 import { ERROR } from 'common/errors';
 import { AppToaster } from 'components';
 import { useCurrentOrganization } from 'hooks/state';
@@ -212,6 +212,57 @@ export const useInvoiceTotal = () => {
   return React.useMemo(() => getEntriesTotal(entries), [entries]);
 };
 
+/**
+ * Retreives the invoice totals.
+ */
+export const useInvoiceTotals = () => {
+  const {
+    values: { entries, currency_code: currencyCode },
+  } = useFormikContext();
+
+  // Retrieves the invoice entries total.
+  const total = React.useMemo(() => getEntriesTotal(entries), [entries]);
+
+  // 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 payment total.
+  const paymentTotal = React.useMemo(() => 0, []);
+
+  // Retireves the formatted payment total.
+  const formattedPaymentTotal = React.useMemo(
+    () => formattedAmount(paymentTotal, currencyCode),
+    [paymentTotal, currencyCode],
+  );
+  // Retrieves the formatted due total.
+  const dueTotal = React.useMemo(
+    () => total - paymentTotal,
+    [total, paymentTotal],
+  );
+  // Retrieves the formatted due total.
+  const formattedDueTotal = React.useMemo(
+    () => formattedAmount(dueTotal, currencyCode),
+    [dueTotal, currencyCode],
+  );
+
+  return {
+    total,
+    paymentTotal,
+    dueTotal,
+    formattedTotal,
+    formattedSubtotal,
+    formattedPaymentTotal,
+    formattedDueTotal,
+  };
+};
+
 /**
  * Detarmines whether the invoice has foreign customer.
  * @returns {boolean}