From 3e2997d7454054bfdc38bef496c13333d63d731e Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Wed, 24 Jul 2024 22:33:26 +0200 Subject: [PATCH] feat: logic of excess amount confirmation --- .../PaymentForm/PaymentMadeForm.tsx | 27 +++++++++----- .../PaymentMadeFormFooterRight.tsx | 13 ++++++- .../PaymentForm/PaymentMadeFormHeader.tsx | 11 +++--- .../PaymentMadeFormHeaderFields.tsx | 6 ++-- .../PaymentForm/PaymentMadeFormProvider.tsx | 7 +++- .../PaymentMadeExcessDialogContent.tsx | 22 +++++++++--- .../PaymentMades/PaymentForm/utils.tsx | 35 +++++++++++++++++-- .../PaymentReceiveForm/PaymentReceiveForm.tsx | 20 ++++++----- .../PaymentReceiveFormFootetRight.tsx | 12 ++++++- .../PaymentReceiveFormHeader.tsx | 10 ++---- .../PaymentReceiveFormProvider.tsx | 7 +++- .../ExcessPaymentDialogContent.tsx | 34 +++++++++++++----- .../PaymentReceiveForm/utils.tsx | 32 +++++++++++++++++ 13 files changed, 185 insertions(+), 51 deletions(-) diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.tsx index b563dbee9..72b2e033c 100644 --- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; import classNames from 'classnames'; -import { Formik, Form } from 'formik'; +import { Formik, Form, FormikHelpers } from 'formik'; import { Intent } from '@blueprintjs/core'; import { sumBy, defaultTo } from 'lodash'; import { useHistory } from 'react-router-dom'; @@ -33,6 +33,7 @@ import { transformToEditForm, transformErrors, transformFormToRequest, + getPaymentExcessAmountFromValues, } from './utils'; /** @@ -59,6 +60,7 @@ function PaymentMadeForm({ submitPayload, createPaymentMadeMutate, editPaymentMadeMutate, + isExcessConfirmed, } = usePaymentMadeFormContext(); // Form initial values. @@ -81,13 +83,11 @@ function PaymentMadeForm({ // Handle the form submit. const handleSubmitForm = ( values, - { setSubmitting, resetForm, setFieldError }, + { setSubmitting, resetForm, setFieldError }: FormikHelpers, ) => { setSubmitting(true); - // Total payment amount of entries. - const totalPaymentAmount = sumBy(values.entries, 'payment_amount'); - if (totalPaymentAmount <= 0) { + if (values.amount <= 0) { AppToaster.show({ message: intl.get('you_cannot_make_payment_with_zero_total_amount'), intent: Intent.DANGER, @@ -95,6 +95,16 @@ function PaymentMadeForm({ setSubmitting(false); return; } + const excessAmount = getPaymentExcessAmountFromValues(values); + + // Show the confirmation popup if the excess amount bigger than zero and + // has not been confirmed yet. + if (excessAmount > 0 && !isExcessConfirmed) { + openDialog('payment-made-excessed-payment'); + setSubmitting(false); + + return; + } // Transformes the form values to request body. const form = transformFormToRequest(values); @@ -124,11 +134,12 @@ function PaymentMadeForm({ } setSubmitting(false); }; - if (!isNewMode) { - editPaymentMadeMutate([paymentMadeId, form]).then(onSaved).catch(onError); + return editPaymentMadeMutate([paymentMadeId, form]) + .then(onSaved) + .catch(onError); } else { - createPaymentMadeMutate(form).then(onSaved).catch(onError); + return createPaymentMadeMutate(form).then(onSaved).catch(onError); } }; diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterRight.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterRight.tsx index 640901bd0..5f1de27df 100644 --- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterRight.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormFooterRight.tsx @@ -1,17 +1,23 @@ // @ts-nocheck import React from 'react'; import styled from 'styled-components'; +import { useFormikContext } from 'formik'; import { T, TotalLines, TotalLine, TotalLineBorderStyle, TotalLineTextStyle, + FormatNumber, } from '@/components'; -import { usePaymentMadeTotals } from './utils'; +import { usePaymentMadeExcessAmount, usePaymentMadeTotals } from './utils'; export function PaymentMadeFormFooterRight() { const { formattedSubtotal, formattedTotal } = usePaymentMadeTotals(); + const excessAmount = usePaymentMadeExcessAmount(); + const { + values: { currency_code: currencyCode }, + } = useFormikContext(); return ( @@ -25,6 +31,11 @@ export function PaymentMadeFormFooterRight() { value={formattedTotal} textStyle={TotalLineTextStyle.Bold} /> + } + textStyle={TotalLineTextStyle.Regular} + /> ); } diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.tsx index 7c9fd5c47..a683ae81d 100644 --- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.tsx @@ -1,12 +1,12 @@ // @ts-nocheck -import React, { useMemo } from 'react'; +import React from 'react'; import classNames from 'classnames'; import { useFormikContext } from 'formik'; -import { sumBy } from 'lodash'; import { CLASSES } from '@/constants/classes'; import { Money, FormattedMessage as T } from '@/components'; import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields'; +import { usePaymentmadeTotalAmount } from './utils'; /** * Payment made header form. @@ -14,11 +14,10 @@ import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields'; function PaymentMadeFormHeader() { // Formik form context. const { - values: { entries, currency_code }, + values: { currency_code }, } = useFormikContext(); - // Calculate the payment amount of the entries. - const amountPaid = useMemo(() => sumBy(entries, 'payment_amount'), [entries]); + const totalAmount = usePaymentmadeTotalAmount(); return (
@@ -31,7 +30,7 @@ function PaymentMadeFormHeader() {

- +

diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx index 6a72e9968..caf9561c3 100644 --- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx @@ -68,7 +68,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) { const fullAmount = safeSumBy(newEntries, 'payment_amount'); setFieldValue('entries', newEntries); - setFieldValue('full_amount', fullAmount); + setFieldValue('amount', fullAmount); }; // Handles the full-amount field blur. @@ -129,14 +129,14 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) { className={('form-group--full-amount', Classes.FILL)} intent={inputIntent({ error, touched })} labelInfo={} - helperText={} + helperText={} > { - setFieldValue('full_amount', value); + setFieldValue('amount', value); }} onBlurValue={onFullAmountBlur} /> diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.tsx index f5d0c50d3..6a33713a7 100644 --- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.tsx @@ -1,5 +1,5 @@ // @ts-nocheck -import React, { createContext, useContext } from 'react'; +import React, { createContext, useContext, useState } from 'react'; import { Features } from '@/constants'; import { useFeatureCan } from '@/hooks/state'; import { @@ -71,6 +71,8 @@ function PaymentMadeFormProvider({ query, paymentMadeId, ...props }) { const isFeatureLoading = isBranchesLoading; + const [isExcessConfirmed, setIsExcessConfirmed] = useState(false); + // Provider payload. const provider = { paymentMadeId, @@ -98,6 +100,9 @@ function PaymentMadeFormProvider({ query, paymentMadeId, ...props }) { setSubmitPayload, setPaymentVendorId, + + isExcessConfirmed, + setIsExcessConfirmed, }; return ( diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/dialogs/PaymentMadeExcessDialog/PaymentMadeExcessDialogContent.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/dialogs/PaymentMadeExcessDialog/PaymentMadeExcessDialogContent.tsx index a498bd04a..7078b3434 100644 --- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/dialogs/PaymentMadeExcessDialog/PaymentMadeExcessDialogContent.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/dialogs/PaymentMadeExcessDialog/PaymentMadeExcessDialogContent.tsx @@ -23,14 +23,24 @@ const Schema = Yup.object().shape({ const DEFAULT_ACCOUNT_SLUG = 'depreciation-expense'; function ExcessPaymentDialogContentRoot({ dialogName, closeDialog }) { - const { setFieldValue } = useFormikContext(); + const { + setFieldValue, + submitForm, + } = useFormikContext(); + const { setIsExcessConfirmed } = usePaymentMadeFormContext(); const handleSubmit = ( values: ExcessPaymentValues, { setSubmitting }: FormikHelpers, ) => { - closeDialog(dialogName); setFieldValue(values.accountId); + setSubmitting(true); + setIsExcessConfirmed(true); + + return submitForm().then(() => { + setSubmitting(false); + closeDialog(dialogName); + }); }; // Handle close button click. @@ -66,7 +76,7 @@ interface ExcessPaymentDialogContentFormProps { function ExcessPaymentDialogContentForm({ onClose, }: ExcessPaymentDialogContentFormProps) { - const { submitForm } = useFormikContext(); + const { submitForm, isSubmitting } = useFormikContext(); const { accounts } = usePaymentMadeFormContext(); const handleCloseBtn = () => { @@ -94,7 +104,11 @@ function ExcessPaymentDialogContentForm({
- diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx index fd469ce88..8b8323939 100644 --- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx @@ -37,7 +37,7 @@ export const defaultPaymentMadeEntry = { // Default initial values of payment made. export const defaultPaymentMade = { - full_amount: '', + amount: '', vendor_id: '', payment_account_id: '', payment_date: moment(new Date()).format('YYYY-MM-DD'), @@ -53,10 +53,10 @@ export const defaultPaymentMade = { export const transformToEditForm = (paymentMade, paymentMadeEntries) => { const attachments = transformAttachmentsToForm(paymentMade); + const appliedAmount = safeSumBy(paymentMadeEntries, 'payment_amount'); return { ...transformToForm(paymentMade, defaultPaymentMade), - full_amount: safeSumBy(paymentMadeEntries, 'payment_amount'), entries: [ ...paymentMadeEntries.map((paymentMadeEntry) => ({ ...transformToForm(paymentMadeEntry, defaultPaymentMadeEntry), @@ -177,6 +177,30 @@ export const usePaymentMadeTotals = () => { }; }; +export const usePaymentmadeTotalAmount = () => { + const { + values: { amount }, + } = useFormikContext(); + + return amount; +}; + +export const usePaymentMadeAppliedAmount = () => { + const { + values: { entries }, + } = useFormikContext(); + + // Retrieves the invoice entries total. + return React.useMemo(() => sumBy(entries, 'payment_amount'), [entries]); +}; + +export const usePaymentMadeExcessAmount = () => { + const appliedAmount = usePaymentMadeAppliedAmount(); + const totalAmount = usePaymentmadeTotalAmount(); + + return Math.abs(totalAmount - appliedAmount); +}; + /** * Detarmines whether the bill has foreign customer. * @returns {boolean} @@ -191,3 +215,10 @@ export const usePaymentMadeIsForeignCustomer = () => { ); return isForeignCustomer; }; + +export const getPaymentExcessAmountFromValues = (values) => { + const appliedAmount = sumBy(values.entries, 'payment_amount'); + const totalAmount = values.amount; + + return Math.abs(totalAmount - appliedAmount); +}; diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx index 3b552e1fb..6f57e8666 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx @@ -1,5 +1,5 @@ // @ts-nocheck -import React, { useMemo } from 'react'; +import React, { useMemo, useRef } from 'react'; import { sumBy, isEmpty, defaultTo } from 'lodash'; import intl from 'react-intl-universal'; import classNames from 'classnames'; @@ -37,6 +37,7 @@ import { transformFormToRequest, transformErrors, resetFormState, + getExceededAmountFromValues, } from './utils'; import { PaymentReceiveSyncIncrementSettingsToForm } from './components'; @@ -54,7 +55,7 @@ function PaymentReceiveForm({ organization: { base_currency }, // #withDialogActions - openDialog + openDialog, }) { const history = useHistory(); @@ -67,6 +68,7 @@ function PaymentReceiveForm({ submitPayload, editPaymentReceiveMutate, createPaymentReceiveMutate, + isExcessConfirmed, } = usePaymentReceiveFormContext(); // Payment receive number. @@ -98,19 +100,21 @@ function PaymentReceiveForm({ preferredDepositAccount, ], ); - // Handle form submit. const handleSubmitForm = ( values, { setSubmitting, resetForm, setFieldError }, ) => { setSubmitting(true); + const exceededAmount = getExceededAmountFromValues(values); - if (true) { + // Show the confirm popup if the excessed amount bigger than zero and + // excess confirmation has not been confirmed yet. + if (exceededAmount > 0 && !isExcessConfirmed) { + setSubmitting(false); openDialog('payment-received-excessed-payment'); return; } - // Transformes the form values to request body. const form = transformFormToRequest(values); @@ -146,11 +150,11 @@ function PaymentReceiveForm({ }; if (paymentReceiveId) { - editPaymentReceiveMutate([paymentReceiveId, form]) + return editPaymentReceiveMutate([paymentReceiveId, form]) .then(onSaved) .catch(onError); } else { - createPaymentReceiveMutate(form).then(onSaved).catch(onError); + return createPaymentReceiveMutate(form).then(onSaved).catch(onError); } }; return ( @@ -200,5 +204,5 @@ export default compose( preferredDepositAccount: paymentReceiveSettings?.preferredDepositAccount, })), withCurrentOrganization(), - withDialogActions + withDialogActions, )(PaymentReceiveForm); diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx index d35d7c6a7..2cee6c9f7 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFootetRight.tsx @@ -7,11 +7,16 @@ import { TotalLine, TotalLineBorderStyle, TotalLineTextStyle, + FormatNumber, } from '@/components'; -import { usePaymentReceiveTotals } from './utils'; +import { + usePaymentReceiveTotals, + usePaymentReceivedTotalExceededAmount, +} from './utils'; export function PaymentReceiveFormFootetRight() { const { formattedSubtotal, formattedTotal } = usePaymentReceiveTotals(); + const exceededAmount = usePaymentReceivedTotalExceededAmount(); return ( @@ -25,6 +30,11 @@ export function PaymentReceiveFormFootetRight() { value={formattedTotal} textStyle={TotalLineTextStyle.Bold} /> + } + textStyle={TotalLineTextStyle.Regular} + /> ); } diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.tsx index d7e44fadf..c6d08f074 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.tsx @@ -30,15 +30,9 @@ function PaymentReceiveFormHeader() { function PaymentReceiveFormBigTotal() { // Formik form context. const { - values: { currency_code, entries }, + values: { currency_code, amount }, } = useFormikContext(); - // Calculates the total payment amount from due amount. - const paymentFullAmount = useMemo( - () => sumBy(entries, 'payment_amount'), - [entries], - ); - return (
@@ -46,7 +40,7 @@ function PaymentReceiveFormBigTotal() {

- +

diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.tsx index 8c08abd3e..c6f5a4729 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.tsx @@ -1,5 +1,5 @@ // @ts-nocheck -import React, { createContext, useContext } from 'react'; +import React, { createContext, useContext, useState } from 'react'; import { Features } from '@/constants'; import { useFeatureCan } from '@/hooks/state'; import { DashboardInsider } from '@/components'; @@ -74,6 +74,8 @@ function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) { const { mutateAsync: editPaymentReceiveMutate } = useEditPaymentReceive(); const { mutateAsync: createPaymentReceiveMutate } = useCreatePaymentReceive(); + const [isExcessConfirmed, setIsExcessConfirmed] = useState(false); + // Provider payload. const provider = { paymentReceiveId, @@ -97,6 +99,9 @@ function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) { editPaymentReceiveMutate, createPaymentReceiveMutate, + + isExcessConfirmed, + setIsExcessConfirmed, }; return ( diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/dialogs/ExcessPaymentDialog/ExcessPaymentDialogContent.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/dialogs/ExcessPaymentDialog/ExcessPaymentDialogContent.tsx index 21313cb59..dcfec7e2f 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/dialogs/ExcessPaymentDialog/ExcessPaymentDialogContent.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/dialogs/ExcessPaymentDialog/ExcessPaymentDialogContent.tsx @@ -7,6 +7,7 @@ import { Form, Formik, FormikHelpers, useFormikContext } from 'formik'; import { AccountsSelect, FFormGroup } from '@/components'; import { usePaymentReceiveFormContext } from '../../PaymentReceiveFormProvider'; import withDialogActions from '@/containers/Dialog/withDialogActions'; +import { usePaymentReceivedTotalExceededAmount } from '../../utils'; interface ExcessPaymentValues { accountId: string; @@ -23,15 +24,23 @@ const Schema = Yup.object().shape({ const DEFAULT_ACCOUNT_SLUG = 'depreciation-expense'; export function ExcessPaymentDialogContentRoot({ dialogName, closeDialog }) { - const { setFieldValue } = useFormikContext(); + const { setFieldValue, submitForm } = useFormikContext(); + const { setIsExcessConfirmed } = usePaymentReceiveFormContext(); const initialAccountId = useDefaultExcessPaymentDeposit(); + const exceededAmount = usePaymentReceivedTotalExceededAmount(); const handleSubmit = ( values: ExcessPaymentValues, { setSubmitting }: FormikHelpers, ) => { - closeDialog(dialogName); + setSubmitting(true); + setIsExcessConfirmed(true); setFieldValue('unearned_revenue_account_id', values.accountId); + + submitForm().then(() => { + closeDialog(dialogName); + setSubmitting(false); + }); }; const handleClose = () => { closeDialog(dialogName); @@ -47,7 +56,10 @@ export function ExcessPaymentDialogContentRoot({ dialogName, closeDialog }) { onSubmit={handleSubmit} >
- + ); @@ -57,9 +69,9 @@ export const ExcessPaymentDialogContent = R.compose(withDialogActions)( ExcessPaymentDialogContentRoot, ); -function ExcessPaymentDialogContentForm({ onClose }) { +function ExcessPaymentDialogContentForm({ onClose, exceededAmount }) { const { accounts } = usePaymentReceiveFormContext(); - const { submitForm } = useFormikContext(); + const { submitForm, isSubmitting } = useFormikContext(); const handleCloseBtn = () => { onClose && onClose(); @@ -69,8 +81,9 @@ function ExcessPaymentDialogContentForm({ onClose }) { <>

- Would you like to record the excess amount of $1000 as advanced - payment from the customer. + Would you like to record the excess amount of{' '} + {exceededAmount} as advanced payment from the + customer.

- diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx index 58326ca81..66337e793 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx @@ -250,6 +250,30 @@ export const usePaymentReceiveTotals = () => { }; }; +export const usePaymentReceivedTotalAppliedAmount = () => { + const { + values: { entries }, + } = useFormikContext(); + + // Retrieves the invoice entries total. + return React.useMemo(() => sumBy(entries, 'payment_amount'), [entries]); +}; + +export const usePaymentReceivedTotalAmount = () => { + const { + values: { amount }, + } = useFormikContext(); + + return amount; +}; + +export const usePaymentReceivedTotalExceededAmount = () => { + const totalAmount = usePaymentReceivedTotalAmount(); + const totalApplied = usePaymentReceivedTotalAppliedAmount(); + + return Math.abs(totalAmount - totalApplied); +}; + /** * Detarmines whether the payment has foreign customer. * @returns {boolean} @@ -274,3 +298,11 @@ export const resetFormState = ({ initialValues, values, resetForm }) => { }, }); }; + + +export const getExceededAmountFromValues = (values) => { + const totalApplied = sumBy(values.entries, 'payment_amount'); + const totalAmount = values.amount; + + return totalAmount - totalApplied; +} \ No newline at end of file