From ad5a6b3eb9a41a0142f9d5567a4e12acb43faaaa Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Mon, 30 Nov 2020 12:22:47 +0200
Subject: [PATCH] feat: calculate total amount of form entries.

---
 client/src/components/PageFormBigNumber.js    |  3 +-
 .../containers/Entries/ItemsEntriesTable.js   |  1 -
 .../containers/Expenses/ExpenseFormHeader.js  | 18 ++++++++----
 .../Purchases/Bill/BillFormHeader.js          | 18 ++++++++++--
 .../Sales/Estimate/EstimateFormHeader.js      | 20 +++++++++++--
 .../containers/Sales/Invoice/InvoiceForm.js   |  2 +-
 .../Sales/Invoice/InvoiceFormHeader.js        | 17 ++++++++---
 .../Sales/Receipt/ReceiptFormHeader.js        | 28 +++++++++++--------
 8 files changed, 77 insertions(+), 30 deletions(-)

diff --git a/client/src/components/PageFormBigNumber.js b/client/src/components/PageFormBigNumber.js
index c8cbb1c29..c32f52b5c 100644
--- a/client/src/components/PageFormBigNumber.js
+++ b/client/src/components/PageFormBigNumber.js
@@ -10,9 +10,8 @@ export default function PageFormBigNumber({ label, amount, currencyCode }) {
     <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">
-          <Money amount={0} currency={'LYD'} />
+          <Money amount={amount} currency={currencyCode} />
         </h1>
       </div>
     </div>
diff --git a/client/src/containers/Entries/ItemsEntriesTable.js b/client/src/containers/Entries/ItemsEntriesTable.js
index 94732613d..6bf128c04 100644
--- a/client/src/containers/Entries/ItemsEntriesTable.js
+++ b/client/src/containers/Entries/ItemsEntriesTable.js
@@ -1,5 +1,4 @@
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
-import { omit } from 'lodash';
 import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import classNames from 'classnames';
diff --git a/client/src/containers/Expenses/ExpenseFormHeader.js b/client/src/containers/Expenses/ExpenseFormHeader.js
index 5c7ab8f6c..1e9122607 100644
--- a/client/src/containers/Expenses/ExpenseFormHeader.js
+++ b/client/src/containers/Expenses/ExpenseFormHeader.js
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
 
 import { CLASSES } from 'common/classes';
 
@@ -8,15 +10,21 @@ import { PageFormBigNumber } from 'components';
 
 // Expense form header.
 export default function ExpenseFormHeader() {
+  const { values } = useFormikContext();
+
+  // Calculates the expense entries amount.
+  const totalExpenseAmount = useMemo(() => sumBy(values.categories, 'amount'), [
+    values.categories,
+  ]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <ExpenseFormHeaderFields />
-
       <PageFormBigNumber
         label={'Expense Amount'}
-        amount={0}
+        amount={totalExpenseAmount}
         currencyCode={'LYD'}
       />
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/client/src/containers/Purchases/Bill/BillFormHeader.js b/client/src/containers/Purchases/Bill/BillFormHeader.js
index 951c034fe..cae61d061 100644
--- a/client/src/containers/Purchases/Bill/BillFormHeader.js
+++ b/client/src/containers/Purchases/Bill/BillFormHeader.js
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
 
 import { CLASSES } from 'common/classes';
 
@@ -10,11 +12,21 @@ import { PageFormBigNumber } from 'components';
  * Fill form header.
  */
 export default function BillFormHeader({ onBillNumberChanged }) {
+  const { values } = useFormikContext();
+
+  // Calculate the total due amount of bill entries.
+  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
+    values.entries,
+  ]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <BillFormHeaderFields onBillNumberChanged={onBillNumberChanged} />
-
-      <PageFormBigNumber label={'Due Amount'} amount={0} currencyCode={'LYD'} />
+      <PageFormBigNumber
+        label={'Due Amount'}
+        amount={totalDueAmount}
+        currencyCode={'LYD'}
+      />
     </div>
   );
 }
diff --git a/client/src/containers/Sales/Estimate/EstimateFormHeader.js b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
index 8e97a427f..20b4d57f1 100644
--- a/client/src/containers/Sales/Estimate/EstimateFormHeader.js
+++ b/client/src/containers/Sales/Estimate/EstimateFormHeader.js
@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { compose } from 'utils';
 import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
+
 import { CLASSES } from 'common/classes';
 
 import { PageFormBigNumber } from 'components';
@@ -10,17 +13,28 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import EstimateFormHeaderFields from './EstimateFormHeaderFields';
 
+// Estimate form top header.
 function EstimateFormHeader({
   // #ownProps
   onEstimateNumberChanged,
 }) {
+  const { values } = useFormikContext();
+
+  // Calculate the total due amount of bill entries.
+  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
+    values.entries,
+  ]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <EstimateFormHeaderFields
         onEstimateNumberChanged={onEstimateNumberChanged}
       />
-
-      <PageFormBigNumber label={'Amount'} amount={0} currencyCode={'LYD'} />
+      <PageFormBigNumber
+        label={'Amount'}
+        amount={totalDueAmount}
+        currencyCode={'LYD'}
+      />
     </div>
   );
 }
diff --git a/client/src/containers/Sales/Invoice/InvoiceForm.js b/client/src/containers/Sales/Invoice/InvoiceForm.js
index 646f0f05f..ae682266c 100644
--- a/client/src/containers/Sales/Invoice/InvoiceForm.js
+++ b/client/src/containers/Sales/Invoice/InvoiceForm.js
@@ -229,7 +229,7 @@ function InvoiceForm({
     },
     [changePageSubtitle],
   );
-  
+
   return (
     <div className={classNames(
       CLASSES.PAGE_FORM,
diff --git a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
index fc6d36e93..671dc262f 100644
--- a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
+++ b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js
@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
+
 import { CLASSES } from 'common/classes';
 
 import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
@@ -12,17 +15,23 @@ export default function InvoiceFormHeader({
   // #ownProps
   onInvoiceNumberChanged,
 }) {
+  const { values } = useFormikContext();
+
+  // Calculate the total due amount of invoice entries.
+  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
+    values.entries,
+  ]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <InvoiceFormHeaderFields
         onInvoiceNumberChanged={onInvoiceNumberChanged}
       />
-
       <PageFormBigNumber
         label={'Due Amount'}
-        amount={0}
+        amount={totalDueAmount}
         currencyCode={'LYD'}
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
index 694ec9244..5b1c9796d 100644
--- a/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipt/ReceiptFormHeader.js
@@ -1,28 +1,34 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import { sumBy } from 'lodash';
+import { useFormikContext } from 'formik';
 
-import { Money } from 'components';
 import { CLASSES } from 'common/classes';
 import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';
 
+import { PageFormBigNumber } from 'components';
+
 export default function ReceiptFormHeader({
   // #ownProps
   onReceiptNumberChanged,
 }) {
+  const { values } = useFormikContext();
+
+  // Calculate the total due amount of bill entries.
+  const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
+    values.entries,
+  ]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <ReceiptFormHeaderFields
         onReceiptNumberChanged={onReceiptNumberChanged}
       />
-
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
-        <div class="big-amount">
-          <span class="big-amount__label">Due Amount</span>
-          <h1 class="big-amount__number">
-            <Money amount={0} currency={'LYD'} />
-          </h1>
-        </div>
-      </div>
+      <PageFormBigNumber
+        label={'Due Amount'}
+        amount={totalDueAmount}
+        currencyCode={'LYD'}
+      />
     </div>
   );
 }