feat: calculate total amount of form entries.

This commit is contained in:
Ahmed Bouhuolia
2020-11-30 12:22:47 +02:00
parent 28e95a5aa4
commit ad5a6b3eb9
8 changed files with 77 additions and 30 deletions

View File

@@ -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>
);
}

View File

@@ -229,7 +229,7 @@ function InvoiceForm({
},
[changePageSubtitle],
);
return (
<div className={classNames(
CLASSES.PAGE_FORM,

View File

@@ -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>
);
}
}

View File

@@ -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>
);
}