mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-19 06:10:31 +00:00
feat: payment receive and made form.
This commit is contained in:
Ahmed Bouhuolia
@@ -13,10 +13,12 @@ import classNames from 'classnames';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { pick } from 'lodash';
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
import BillFormHeader from './BillFormHeader';
|
||||
import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
|
||||
import BillFloatingActions from './BillFloatingActions';
|
||||
import BillFormFooter from './BillFormFooter';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withMediaActions from 'containers/Media/withMediaActions';
|
||||
import withBillActions from './withBillActions';
|
||||
@@ -41,6 +43,7 @@ function BillForm({
|
||||
|
||||
//#withDashboard
|
||||
changePageTitle,
|
||||
changePageSubtitle,
|
||||
|
||||
//#withBillDetail
|
||||
bill,
|
||||
@@ -235,6 +238,7 @@ function BillForm({
|
||||
setSubmitting(false);
|
||||
saveBillSubmit({ action: 'update', ...payload });
|
||||
resetForm();
|
||||
changePageSubtitle('');
|
||||
})
|
||||
.catch((errors) => {
|
||||
handleErrors(errors, { setErrors });
|
||||
@@ -302,10 +306,22 @@ function BillForm({
|
||||
orderingIndex([...formik.values.entries, defaultBill]),
|
||||
);
|
||||
};
|
||||
|
||||
const handleBillNumberChanged = useCallback((billNumber) => {
|
||||
changePageSubtitle(billNumber);
|
||||
}, []);
|
||||
|
||||
// Clear page subtitle once unmount bill form page.
|
||||
useEffect(() => () => {
|
||||
changePageSubtitle('');
|
||||
}, [changePageSubtitle]);
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_BILL)}>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<BillFormHeader formik={formik} />
|
||||
<BillFormHeader
|
||||
formik={formik}
|
||||
onBillNumberChanged={handleBillNumberChanged} />
|
||||
|
||||
<EstimatesItemsTable
|
||||
formik={formik}
|
||||
|
||||
@@ -27,6 +27,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
function BillFormHeader({
|
||||
formik: { errors, touched, setFieldValue, getFieldProps, values },
|
||||
onBillNumberChanged,
|
||||
|
||||
//#withVendors
|
||||
vendorItems,
|
||||
@@ -73,6 +74,10 @@ function BillFormHeader({
|
||||
}
|
||||
};
|
||||
|
||||
const handleBillNumberBlur = (event) => {
|
||||
onBillNumberChanged && onBillNumberChanged(event.currentTarget.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
|
||||
<div className={'page-form__primary-section'}>
|
||||
@@ -166,6 +171,7 @@ function BillFormHeader({
|
||||
intent={errors.bill_number && touched.bill_number && Intent.DANGER}
|
||||
minimal={true}
|
||||
{...getFieldProps('bill_number')}
|
||||
onBlur={handleBillNumberBlur}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
|
||||
@@ -5,8 +5,7 @@ import {
|
||||
getBillPaginationMetaFactory,
|
||||
getBillTableQueryFactory,
|
||||
getVendorPayableBillsFactory,
|
||||
getPayableBillsByPaymentMadeFactory,
|
||||
getPaymentMadeFormPayableBillsFactory
|
||||
getVendorPayableBillsEntriesFactory,
|
||||
} from 'store/Bills/bills.selectors';
|
||||
|
||||
export default (mapState) => {
|
||||
@@ -14,8 +13,7 @@ export default (mapState) => {
|
||||
const getBillsPaginationMeta = getBillPaginationMetaFactory();
|
||||
const getBillTableQuery = getBillTableQueryFactory();
|
||||
const getVendorPayableBills = getVendorPayableBillsFactory();
|
||||
const getPayableBillsByPaymentMade = getPayableBillsByPaymentMadeFactory();
|
||||
const getPaymentMadeFormPayableBills = getPaymentMadeFormPayableBillsFactory();
|
||||
const getVendorPayableBillsEntries = getVendorPayableBillsEntriesFactory();
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const tableQuery = getBillTableQuery(state, props);
|
||||
@@ -29,9 +27,8 @@ export default (mapState) => {
|
||||
billsPageination: getBillsPaginationMeta(state, props, tableQuery),
|
||||
billsLoading: state.bills.loading,
|
||||
nextBillNumberChanged: state.bills.nextBillNumberChanged,
|
||||
|
||||
// vendorPayableBills: getVendorPayableBills(state, props),
|
||||
paymentMadePayableBills: getPaymentMadeFormPayableBills(state, props),
|
||||
vendorPayableBills: getVendorPayableBills(state, props),
|
||||
vendorPayableBillsEntries: getVendorPayableBillsEntries(state, props),
|
||||
};
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
|
||||
@@ -83,6 +83,7 @@ function PaymentMade({
|
||||
>
|
||||
<PaymentMadeForm
|
||||
paymentMadeId={paymentMadeId}
|
||||
mode={paymentMadeId ? 'edit' : 'new'}
|
||||
/>
|
||||
</DashboardInsider>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { FormGroup, TextArea } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { Row, Col } from 'components';
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
/**
|
||||
* Payment made form footer.
|
||||
*/
|
||||
export default function PaymentMadeFooter({
|
||||
getFieldProps
|
||||
}) {
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
|
||||
<Row>
|
||||
<Col md={8}>
|
||||
{/* --------- Statement --------- */}
|
||||
<FormGroup
|
||||
label={<T id={'statement'} />}
|
||||
className={'form-group--statement'}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
{...getFieldProps('description')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,30 +1,52 @@
|
||||
import React, { useMemo, useState, useCallback } from 'react';
|
||||
import React, { useMemo, useState, useCallback, useEffect } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import moment from 'moment';
|
||||
import { Intent, Alert } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { pick, sumBy } from 'lodash';
|
||||
import { pick, sumBy, omit } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { AppToaster } from 'components';
|
||||
import PaymentMadeHeader from './PaymentMadeFormHeader';
|
||||
import PaymentMadeItemsTable from './PaymentMadeItemsTable';
|
||||
import PaymentMadeFloatingActions from './PaymentMadeFloatingActions';
|
||||
import PaymentMadeItemsTable from './PaymentMadeItemsTable';
|
||||
import PaymentMadeFooter from './PaymentMadeFooter';
|
||||
|
||||
import withMediaActions from 'containers/Media/withMediaActions';
|
||||
import withPaymentMadeActions from './withPaymentMadeActions';
|
||||
import withPaymentMadeDetail from './withPaymentMadeDetail';
|
||||
import withPaymentMade from './withPaymentMade';
|
||||
import { AppToaster } from 'components';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
|
||||
import { compose, orderingLinesIndexes } from 'utils';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
const ERRORS = {
|
||||
PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
|
||||
};
|
||||
|
||||
// Default payment made entry values.
|
||||
const defaultPaymentMadeEntry = {
|
||||
bill_id: '',
|
||||
payment_amount: '',
|
||||
id: null,
|
||||
due_amount: null,
|
||||
};
|
||||
// Default initial values.
|
||||
const defaultInitialValues = {
|
||||
full_amount: '',
|
||||
vendor_id: '',
|
||||
payment_account_id: '',
|
||||
payment_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
reference: '',
|
||||
payment_number: '',
|
||||
description: '',
|
||||
entries: [],
|
||||
};
|
||||
|
||||
/**
|
||||
* Payment made form component.
|
||||
*/
|
||||
@@ -40,6 +62,13 @@ function PaymentMadeForm({
|
||||
// #withPaymentMadeDetail
|
||||
paymentMade,
|
||||
|
||||
// #withBills
|
||||
paymentMadeEntries,
|
||||
|
||||
// #withDashboardActions
|
||||
changePageSubtitle,
|
||||
|
||||
// #ownProps
|
||||
paymentMadeId,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
@@ -50,6 +79,14 @@ function PaymentMadeForm({
|
||||
const [clearFormAlert, setClearFormAlert] = useState(false);
|
||||
const [fullAmount, setFullAmount] = useState(null);
|
||||
|
||||
const [localPaymentEntries, setLocalPaymentEntries] = useState(paymentMadeEntries);
|
||||
|
||||
useEffect(() => {
|
||||
if (localPaymentEntries !== paymentMadeEntries) {
|
||||
setLocalPaymentEntries(paymentMadeEntries);
|
||||
}
|
||||
}, [localPaymentEntries, paymentMadeEntries])
|
||||
|
||||
// Yup validation schema.
|
||||
const validationSchema = Yup.object().shape({
|
||||
vendor_id: Yup.string()
|
||||
@@ -62,7 +99,6 @@ function PaymentMadeForm({
|
||||
.required()
|
||||
.label(formatMessage({ id: 'payment_account_' })),
|
||||
payment_number: Yup.string()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'payment_no_' })),
|
||||
reference: Yup.string().min(1).max(255).nullable(),
|
||||
description: Yup.string(),
|
||||
@@ -81,27 +117,6 @@ function PaymentMadeForm({
|
||||
),
|
||||
});
|
||||
|
||||
// Default payment made entry values.
|
||||
const defaultPaymentMadeEntry = useMemo(
|
||||
() => ({ bill_id: '', payment_amount: '', id: null }),
|
||||
[],
|
||||
);
|
||||
|
||||
// Default initial values.
|
||||
const defaultInitialValues = useMemo(
|
||||
() => ({
|
||||
full_amount: '',
|
||||
vendor_id: '',
|
||||
payment_account_id: '',
|
||||
payment_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
reference: '',
|
||||
payment_number: '',
|
||||
description: '',
|
||||
entries: [],
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
// Form initial values.
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
@@ -110,7 +125,7 @@ function PaymentMadeForm({
|
||||
...pick(paymentMade, Object.keys(defaultInitialValues)),
|
||||
full_amount: sumBy(paymentMade.entries, 'payment_amount'),
|
||||
entries: [
|
||||
...paymentMade.entries.map((paymentMadeEntry) => ({
|
||||
...paymentMadeEntries.map((paymentMadeEntry) => ({
|
||||
...pick(paymentMadeEntry, Object.keys(defaultPaymentMadeEntry)),
|
||||
})),
|
||||
],
|
||||
@@ -120,7 +135,7 @@ function PaymentMadeForm({
|
||||
entries: orderingLinesIndexes(defaultInitialValues.entries),
|
||||
}),
|
||||
}),
|
||||
[paymentMade, defaultInitialValues, defaultPaymentMadeEntry],
|
||||
[paymentMade, paymentMadeEntries],
|
||||
);
|
||||
|
||||
const handleSubmitForm = (
|
||||
@@ -130,9 +145,11 @@ function PaymentMadeForm({
|
||||
setSubmitting(true);
|
||||
|
||||
// Filters entries that have no `bill_id` or `payment_amount`.
|
||||
const entries = values.entries.filter((item) => {
|
||||
return !item.bill_id || item.payment_amount;
|
||||
});
|
||||
const entries = values.entries
|
||||
.filter((item) => !item.bill_id || item.payment_amount)
|
||||
.map((entry) => ({
|
||||
...omit(entry, ['due_amount']),
|
||||
}));
|
||||
// Total payment amount of entries.
|
||||
const totalPaymentAmount = sumBy(entries, 'payment_amount');
|
||||
|
||||
@@ -159,6 +176,7 @@ function PaymentMadeForm({
|
||||
});
|
||||
setSubmitting(false);
|
||||
resetForm();
|
||||
changePageSubtitle('');
|
||||
};
|
||||
|
||||
const onError = (errors) => {
|
||||
@@ -213,10 +231,26 @@ function PaymentMadeForm({
|
||||
setAmountChangeAlert(false);
|
||||
};
|
||||
|
||||
const transformPaymentEntries = (entries) => {
|
||||
return entries.map((entry) => ({
|
||||
...pick(entry, Object.keys(defaultPaymentMadeEntry)),
|
||||
}));
|
||||
};
|
||||
// Handle update data.
|
||||
const handleUpdataData = useCallback(
|
||||
(entries) => {
|
||||
setFieldValue('entries', entries);
|
||||
setFieldValue('entries', transformPaymentEntries(entries));
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
const resetEntriesPaymentAmount = (entries) => {
|
||||
return entries.map((entry) => ({ ...entry, payment_amount: 0 }));
|
||||
}
|
||||
// Handle fetch success of vendor bills entries.
|
||||
const handleFetchEntriesSuccess = useCallback(
|
||||
(entries) => {
|
||||
setFieldValue('entries', transformPaymentEntries(entries));
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
@@ -236,26 +270,22 @@ function PaymentMadeForm({
|
||||
}, [setClearLinesAlert]);
|
||||
|
||||
const handleConfirmClearLines = useCallback(() => {
|
||||
setFieldValue(
|
||||
'entries',
|
||||
values.entries.map((entry) => ({
|
||||
...entry,
|
||||
payment_amount: 0,
|
||||
})),
|
||||
);
|
||||
setLocalPaymentEntries(resetEntriesPaymentAmount(localPaymentEntries));
|
||||
setFieldValue('entries', resetEntriesPaymentAmount(values.entries));
|
||||
|
||||
setClearLinesAlert(false);
|
||||
}, [setFieldValue, setClearLinesAlert, values.entries]);
|
||||
}, [setFieldValue, localPaymentEntries, values.entries]);
|
||||
|
||||
// Handle clear button click.
|
||||
const handleClearBtnClick = useCallback(() => {
|
||||
setClearFormAlert(true);
|
||||
}, []);
|
||||
|
||||
//
|
||||
// Handle cancel button clear
|
||||
const handleCancelClearFormAlert = () => {
|
||||
setClearFormAlert(false);
|
||||
};
|
||||
|
||||
// Handle confirm button click of clear form alert.
|
||||
const handleConfirmCancelClearFormAlert = () => {
|
||||
setValues({
|
||||
...defaultInitialValues,
|
||||
@@ -268,6 +298,24 @@ function PaymentMadeForm({
|
||||
});
|
||||
setClearFormAlert(false);
|
||||
};
|
||||
// Payable full amount.
|
||||
const payableFullAmount = useMemo(() => sumBy(values.entries, 'due_amount'), [
|
||||
values.entries,
|
||||
]);
|
||||
|
||||
const handlePaymentNoChanged = (paymentNumber) => {
|
||||
changePageSubtitle(paymentNumber);
|
||||
};
|
||||
|
||||
// Clear page subtitle before once page leave.
|
||||
useEffect(() => () => {
|
||||
changePageSubtitle('')
|
||||
}, [changePageSubtitle]);
|
||||
|
||||
const fullAmountPaid = useMemo(
|
||||
() => sumBy(values.entries, 'payment_amount'),
|
||||
[values.entries],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -282,50 +330,65 @@ function PaymentMadeForm({
|
||||
setFieldValue={setFieldValue}
|
||||
getFieldProps={getFieldProps}
|
||||
values={values}
|
||||
payableFullAmount={payableFullAmount}
|
||||
onFullAmountChanged={handleFullAmountChange}
|
||||
onPaymentNumberChanged={handlePaymentNoChanged}
|
||||
amountPaid={fullAmountPaid}
|
||||
/>
|
||||
<PaymentMadeItemsTable
|
||||
fullAmount={fullAmount}
|
||||
paymentEntries={values.entries}
|
||||
paymentEntries={localPaymentEntries}
|
||||
vendorId={values.vendor_id}
|
||||
paymentMadeId={paymentMadeId}
|
||||
onUpdateData={handleUpdataData}
|
||||
onClickClearAllLines={handleClearAllLines}
|
||||
errors={errors?.entries}
|
||||
onFetchEntriesSuccess={handleFetchEntriesSuccess}
|
||||
vendorPayableBillsEntrie={[]}
|
||||
/>
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'ok'} />}
|
||||
intent={Intent.WARNING}
|
||||
intent={Intent.DANGER}
|
||||
isOpen={amountChangeAlert}
|
||||
onCancel={handleCancelAmountChangeAlert}
|
||||
onConfirm={handleConfirmAmountChangeAlert}
|
||||
>
|
||||
<p>Are you sure to discard full amount?</p>
|
||||
<p>
|
||||
Changing full amount will change all credit and payment were
|
||||
applied, Is this okay?
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'ok'} />}
|
||||
intent={Intent.WARNING}
|
||||
intent={Intent.DANGER}
|
||||
isOpen={clearLinesAlert}
|
||||
onCancel={handleCancelClearLines}
|
||||
onConfirm={handleConfirmClearLines}
|
||||
>
|
||||
<p>Are you sure to discard full amount?</p>
|
||||
<p>
|
||||
Clearing the table lines will delete all credits and payments were
|
||||
applied. Is this okay?
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'ok'} />}
|
||||
intent={Intent.WARNING}
|
||||
intent={Intent.DANGER}
|
||||
isOpen={clearFormAlert}
|
||||
onCancel={handleCancelClearFormAlert}
|
||||
onConfirm={handleConfirmCancelClearFormAlert}
|
||||
>
|
||||
<p>Are you sure to clear form data.</p>
|
||||
<p>Are you sure you want to clear this transaction?</p>
|
||||
</Alert>
|
||||
|
||||
<PaymentMadeFooter
|
||||
getFieldProps={getFieldProps}
|
||||
/>
|
||||
|
||||
<PaymentMadeFloatingActions
|
||||
isSubmitting={isSubmitting}
|
||||
onCancelClick={handleCancelClick}
|
||||
@@ -347,11 +410,15 @@ export default compose(
|
||||
withPaymentMadeActions,
|
||||
withMediaActions,
|
||||
withPaymentMadeDetail(),
|
||||
withPaymentMade(({ nextPaymentNumberChanged }) => ({
|
||||
nextPaymentNumberChanged,
|
||||
})),
|
||||
withPaymentMade(
|
||||
({ nextPaymentNumberChanged, paymentMadeEntries }, state, props) => ({
|
||||
nextPaymentNumberChanged,
|
||||
paymentMadeEntries,
|
||||
}),
|
||||
),
|
||||
withSettings(({ billPaymentSettings }) => ({
|
||||
paymentNextNumber: billPaymentSettings?.next_number,
|
||||
paymentNumberPrefix: billPaymentSettings?.number_prefix,
|
||||
})),
|
||||
withDashboardActions,
|
||||
)(PaymentMadeForm);
|
||||
|
||||
@@ -23,7 +23,6 @@ import {
|
||||
Hint,
|
||||
} from 'components';
|
||||
|
||||
import withBills from '../Bill/withBills';
|
||||
import withVender from 'containers/Vendors/withVendors';
|
||||
import withAccounts from 'containers/Accounts/withAccounts';
|
||||
|
||||
@@ -32,7 +31,9 @@ import withAccounts from 'containers/Accounts/withAccounts';
|
||||
*/
|
||||
function PaymentMadeFormHeader({
|
||||
paymentMadeId,
|
||||
vendorId,
|
||||
payableFullAmount,
|
||||
onPaymentNumberChanged,
|
||||
amountPaid = 0,
|
||||
|
||||
// #useFormik
|
||||
errors,
|
||||
@@ -49,17 +50,9 @@ function PaymentMadeFormHeader({
|
||||
|
||||
//#withAccouts
|
||||
accountsList,
|
||||
|
||||
// #withBills
|
||||
paymentMadePayableBills,
|
||||
}) {
|
||||
const isNewMode = !paymentMadeId;
|
||||
|
||||
const payableFullAmount = useMemo(
|
||||
() => sumBy(paymentMadePayableBills, 'due_amount'),
|
||||
[paymentMadePayableBills],
|
||||
);
|
||||
|
||||
const handleDateChange = useCallback(
|
||||
(date_filed) => (date) => {
|
||||
const formatted = moment(date).format('YYYY-MM-DD');
|
||||
@@ -119,150 +112,166 @@ function PaymentMadeFormHeader({
|
||||
triggerFullAmountChanged(payableFullAmount);
|
||||
};
|
||||
|
||||
const handlePaymentNumberBlur = (event) => {
|
||||
onPaymentNumberChanged && onPaymentNumberChanged(event.currentTarget.value)
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
|
||||
{/* ------------ Vendor name ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'vendor_name'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--select-list', Classes.FILL)}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={errors.vendor_id && touched.vendor_id && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<ListSelect
|
||||
items={vendorItems}
|
||||
noResults={<MenuItem disabled={true} text="No results." />}
|
||||
itemRenderer={handleVenderRenderer}
|
||||
itemPredicate={handleFilterVender}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onChangeSelect('vendor_id')}
|
||||
selectedItem={values.vendor_id}
|
||||
selectedItemProp={'id'}
|
||||
defaultText={<T id={'select_vender_account'} />}
|
||||
labelProp={'display_name'}
|
||||
buttonProps={{ disabled: !isNewMode }}
|
||||
disabled={!isNewMode}
|
||||
/>
|
||||
</FormGroup>
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
|
||||
{/* ------------ Vendor name ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'vendor_name'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--select-list', Classes.FILL)}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={errors.vendor_id && touched.vendor_id && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<ListSelect
|
||||
items={vendorItems}
|
||||
noResults={<MenuItem disabled={true} text="No results." />}
|
||||
itemRenderer={handleVenderRenderer}
|
||||
itemPredicate={handleFilterVender}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onChangeSelect('vendor_id')}
|
||||
selectedItem={values.vendor_id}
|
||||
selectedItemProp={'id'}
|
||||
defaultText={<T id={'select_vender_account'} />}
|
||||
labelProp={'display_name'}
|
||||
buttonProps={{ disabled: !isNewMode }}
|
||||
disabled={!isNewMode}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* ------------ Payment date ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_date'} />}
|
||||
inline={true}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames('form-group--select-list', Classes.FILL)}
|
||||
intent={errors.payment_date && touched.payment_date && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage name="payment_date" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(values.payment_date)}
|
||||
onChange={handleDateChange('payment_date')}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
{/* ------------ Payment date ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_date'} />}
|
||||
inline={true}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames('form-group--select-list', Classes.FILL)}
|
||||
intent={errors.payment_date && touched.payment_date && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage name="payment_date" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(values.payment_date)}
|
||||
onChange={handleDateChange('payment_date')}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* ------------ Full amount ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'full_amount'} />}
|
||||
inline={true}
|
||||
className={('form-group--full-amount', Classes.FILL)}
|
||||
intent={
|
||||
errors.full_amount && touched.full_amount && Intent.DANGER
|
||||
}
|
||||
labelInfo={<Hint />}
|
||||
helperText={
|
||||
<ErrorMessage name="full_amount" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<InputGroup
|
||||
{/* ------------ Full amount ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'full_amount'} />}
|
||||
inline={true}
|
||||
className={('form-group--full-amount', Classes.FILL)}
|
||||
intent={
|
||||
errors.full_amount && touched.full_amount && Intent.DANGER
|
||||
}
|
||||
minimal={true}
|
||||
value={values.full_amount}
|
||||
{...getFieldProps('full_amount')}
|
||||
onBlur={handleFullAmountBlur}
|
||||
/>
|
||||
labelInfo={<Hint />}
|
||||
helperText={
|
||||
<ErrorMessage name="full_amount" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
errors.full_amount && touched.full_amount && Intent.DANGER
|
||||
}
|
||||
minimal={true}
|
||||
value={values.full_amount}
|
||||
{...getFieldProps('full_amount')}
|
||||
onBlur={handleFullAmountBlur}
|
||||
/>
|
||||
|
||||
<a onClick={handleReceiveFullAmountClick} href="#" className={'receive-full-amount'}>
|
||||
Receive full amount (<Money amount={payableFullAmount} currency={'USD'} />)
|
||||
</a>
|
||||
</FormGroup>
|
||||
<a onClick={handleReceiveFullAmountClick} href="#" className={'receive-full-amount'}>
|
||||
Receive full amount (<Money amount={payableFullAmount} currency={'USD'} />)
|
||||
</a>
|
||||
</FormGroup>
|
||||
|
||||
{/* ------------ Payment number ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_no'} />}
|
||||
inline={true}
|
||||
className={('form-group--payment_number', Classes.FILL)}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={
|
||||
errors.payment_number && touched.payment_number && Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage name="payment_number" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<InputGroup
|
||||
{/* ------------ Payment number ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_no'} />}
|
||||
inline={true}
|
||||
className={('form-group--payment_number', Classes.FILL)}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={
|
||||
errors.payment_number && touched.payment_number && Intent.DANGER
|
||||
}
|
||||
minimal={true}
|
||||
{...getFieldProps('payment_number')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* ------------ Payment account ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_account'} />}
|
||||
className={classNames(
|
||||
'form-group--payment_account_id',
|
||||
'form-group--select-list',
|
||||
Classes.FILL,
|
||||
)}
|
||||
inline={true}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={
|
||||
errors.payment_account_id &&
|
||||
touched.payment_account_id &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage
|
||||
name={'payment_account_id'}
|
||||
{...{ errors, touched }}
|
||||
helperText={
|
||||
<ErrorMessage name="payment_number" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
errors.payment_number && touched.payment_number && Intent.DANGER
|
||||
}
|
||||
minimal={true}
|
||||
{...getFieldProps('payment_number')}
|
||||
onBlur={handlePaymentNumberBlur}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<AccountsSelectList
|
||||
accounts={paymentAccounts}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
onAccountSelected={onChangeSelect('payment_account_id')}
|
||||
defaultSelectText={<T id={'select_payment_account'} />}
|
||||
selectedAccountId={values.payment_account_id}
|
||||
/>
|
||||
</FormGroup>
|
||||
</FormGroup>
|
||||
|
||||
{/* ------------ Reference ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'reference'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--reference', Classes.FILL)}
|
||||
intent={errors.reference && touched.reference && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
|
||||
>
|
||||
<InputGroup
|
||||
{/* ------------ Payment account ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_account'} />}
|
||||
className={classNames(
|
||||
'form-group--payment_account_id',
|
||||
'form-group--select-list',
|
||||
Classes.FILL,
|
||||
)}
|
||||
inline={true}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={
|
||||
errors.payment_account_id &&
|
||||
touched.payment_account_id &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage
|
||||
name={'payment_account_id'}
|
||||
{...{ errors, touched }}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<AccountsSelectList
|
||||
accounts={paymentAccounts}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
onAccountSelected={onChangeSelect('payment_account_id')}
|
||||
defaultSelectText={<T id={'select_payment_account'} />}
|
||||
selectedAccountId={values.payment_account_id}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* ------------ Reference ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'reference'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--reference', Classes.FILL)}
|
||||
intent={errors.reference && touched.reference && Intent.DANGER}
|
||||
minimal={true}
|
||||
{...getFieldProps('reference')}
|
||||
/>
|
||||
</FormGroup>
|
||||
helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.reference && touched.reference && Intent.DANGER}
|
||||
minimal={true}
|
||||
{...getFieldProps('reference')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
|
||||
<div class="big-amount">
|
||||
<span class="big-amount__label">Amount Received</span>
|
||||
<h1 class="big-amount__number">
|
||||
<Money amount={amountPaid} currency={'USD'} />
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -276,7 +285,4 @@ export default compose(
|
||||
withAccounts(({ accountsList }) => ({
|
||||
accountsList,
|
||||
})),
|
||||
withBills(({ paymentMadePayableBills }) => ({
|
||||
paymentMadePayableBills,
|
||||
})),
|
||||
)(PaymentMadeFormHeader);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import { useQuery } from 'react-query';
|
||||
import { omit } from 'lodash';
|
||||
import { CloudLoadingIndicator } from 'components'
|
||||
import { isEmpty } from 'lodash';
|
||||
import { CloudLoadingIndicator } from 'components';
|
||||
import PaymentMadeItemsTableEditor from './PaymentMadeItemsTableEditor';
|
||||
|
||||
import withPaymentMadeActions from './withPaymentMadeActions';
|
||||
@@ -22,48 +22,51 @@ function PaymentMadeItemsTable({
|
||||
paymentEntries = [], // { bill_id: number, payment_amount: number, id?: number }
|
||||
onClickClearAllLines,
|
||||
errors,
|
||||
onFetchEntriesSuccess,
|
||||
|
||||
// #withBillActions
|
||||
requestFetchDueBills,
|
||||
|
||||
// #withBills
|
||||
paymentMadePayableBills,
|
||||
|
||||
// #withPaymentMadeDetail
|
||||
paymentMade,
|
||||
vendorPayableBillsEntries,
|
||||
}) {
|
||||
const [tableData, setTableData] = useState([]);
|
||||
const [localAmount, setLocalAmount] = useState(fullAmount);
|
||||
|
||||
const isNewMode = !paymentMadeId;
|
||||
|
||||
const triggerUpdateData = useCallback((entries) => {
|
||||
const _data = entries.map((entry) => ({
|
||||
bill_id: entry?.bill?.id,
|
||||
...omit(entry, ['bill']),
|
||||
}))
|
||||
onUpdateData && onUpdateData(_data);
|
||||
}, [onUpdateData]);
|
||||
// Detarmines takes vendor payable bills entries in create mode
|
||||
// or payment made entries in edit mode.
|
||||
const computedTableEntries = useMemo(
|
||||
() =>
|
||||
!isEmpty(paymentEntries)
|
||||
? paymentEntries
|
||||
: (vendorPayableBillsEntries || []),
|
||||
[vendorPayableBillsEntries, paymentEntries],
|
||||
);
|
||||
const [tableData, setTableData] = useState(computedTableEntries);
|
||||
const [localEntries, setLocalEntries] = useState(computedTableEntries);
|
||||
|
||||
// Merges payment entries with payable bills.
|
||||
const computedTableData = useMemo(() => {
|
||||
const entriesTable = new Map(
|
||||
paymentEntries.map((e) => [e.bill_id, e]),
|
||||
);
|
||||
return paymentMadePayableBills.map((bill) => {
|
||||
const entry = entriesTable.get(bill.id);
|
||||
return {
|
||||
bill,
|
||||
id: null,
|
||||
payment_number: 0,
|
||||
...(entry || {}),
|
||||
}
|
||||
});
|
||||
}, [paymentEntries, paymentMadePayableBills]);
|
||||
const [localAmount, setLocalAmount] = useState(fullAmount);
|
||||
|
||||
// Triggers `onUpdateData` event that passes changed entries.
|
||||
const triggerUpdateData = useCallback(
|
||||
(entries) => {
|
||||
onUpdateData && onUpdateData(entries);
|
||||
},
|
||||
[onUpdateData],
|
||||
);
|
||||
|
||||
const triggerOnFetchBillsSuccess = useCallback(
|
||||
(bills) => {
|
||||
onFetchEntriesSuccess && onFetchEntriesSuccess(bills);
|
||||
},
|
||||
[onFetchEntriesSuccess],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setTableData(computedTableData);
|
||||
}, [computedTableData]);
|
||||
if (computedTableEntries !== localEntries) {
|
||||
setTableData(computedTableEntries);
|
||||
setLocalEntries(computedTableEntries);
|
||||
}
|
||||
}, [computedTableEntries, localEntries]);
|
||||
|
||||
// Handle mapping `fullAmount` prop to `localAmount` state.
|
||||
useEffect(() => {
|
||||
@@ -98,14 +101,34 @@ function PaymentMadeItemsTable({
|
||||
{ enabled: isNewMode && vendorId },
|
||||
);
|
||||
|
||||
// Handle update data.
|
||||
const handleUpdateData = (rows) => {
|
||||
triggerUpdateData(rows);
|
||||
};
|
||||
useEffect(() => {
|
||||
const enabled = isNewMode && vendorId;
|
||||
|
||||
const noResultsMessage = (vendorId) ?
|
||||
'There is no payable bills for this vendor that can be applied for this payment' :
|
||||
'Please select a vendor to display all open bills for it.';
|
||||
if (!fetchVendorDueBills.isFetching && enabled) {
|
||||
triggerOnFetchBillsSuccess(computedTableEntries);
|
||||
}
|
||||
}, [
|
||||
vendorId,
|
||||
isNewMode,
|
||||
fetchVendorDueBills.isFetching,
|
||||
computedTableEntries,
|
||||
triggerOnFetchBillsSuccess,
|
||||
]);
|
||||
|
||||
// Handle update data.
|
||||
const handleUpdateData = useCallback(
|
||||
(rows) => {
|
||||
setTableData(rows);
|
||||
triggerUpdateData(rows);
|
||||
},
|
||||
[setTableData, triggerUpdateData],
|
||||
);
|
||||
|
||||
// Detarmines the right no results message before selecting vendor and aftering
|
||||
// selecting vendor id.
|
||||
const noResultsMessage = vendorId
|
||||
? 'There is no payable bills for this vendor that can be applied for this payment'
|
||||
: 'Please select a vendor to display all open bills for it.';
|
||||
|
||||
return (
|
||||
<CloudLoadingIndicator isLoading={fetchVendorDueBills.isFetching}>
|
||||
@@ -123,7 +146,8 @@ function PaymentMadeItemsTable({
|
||||
export default compose(
|
||||
withPaymentMadeActions,
|
||||
withBillActions,
|
||||
withBills(({ paymentMadePayableBills }) => ({
|
||||
withBills(({ paymentMadePayableBills, vendorPayableBillsEntries }) => ({
|
||||
paymentMadePayableBills,
|
||||
vendorPayableBillsEntries,
|
||||
})),
|
||||
)(PaymentMadeItemsTable);
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function PaymentMadeItemsTableEditor({
|
||||
noResultsMessage
|
||||
}) {
|
||||
const transformedData = useMemo(() => {
|
||||
const rows = data;
|
||||
const rows = [ ...data ];
|
||||
const totalRow = {
|
||||
due_amount: sumBy(data, 'due_amount'),
|
||||
payment_amount: sumBy(data, 'payment_amount'),
|
||||
@@ -74,27 +74,27 @@ export default function PaymentMadeItemsTableEditor({
|
||||
{
|
||||
Header: formatMessage({ id: 'Date' }),
|
||||
id: 'bill_date',
|
||||
accessor: (r) => moment(r.bill?.bill_date).format('YYYY MMM DD'),
|
||||
accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
|
||||
Cell: CellRenderer(EmptyDiv, 'bill_date'),
|
||||
disableSortBy: true,
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'bill_number' }),
|
||||
accessor: (row) => `#${row.bill?.bill_number}`,
|
||||
accessor: (row) => `#${row?.bill_number}`,
|
||||
Cell: CellRenderer(EmptyDiv, 'bill_number'),
|
||||
disableSortBy: true,
|
||||
className: 'bill_number',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'bill_amount' }),
|
||||
accessor: r => r.bill?.amount,
|
||||
accessor: 'amount',
|
||||
Cell: CellRenderer(DivFieldCell, 'amount'),
|
||||
disableSortBy: true,
|
||||
className: '',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'amount_due' }),
|
||||
accessor: r => r.bill?.due_amount,
|
||||
accessor: 'due_amount',
|
||||
Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
|
||||
disableSortBy: true,
|
||||
className: '',
|
||||
|
||||
@@ -5,11 +5,14 @@ import {
|
||||
getPaymentMadeCurrentPageFactory,
|
||||
getPaymentMadePaginationMetaFactory,
|
||||
getPaymentMadeTableQuery,
|
||||
getPaymentMadeEntriesFactory
|
||||
} from 'store/PaymentMades/paymentMade.selector';
|
||||
|
||||
export default (mapState) => {
|
||||
const getPyamentMadesItems = getPaymentMadeCurrentPageFactory();
|
||||
const getPyamentMadesPaginationMeta = getPaymentMadePaginationMetaFactory();
|
||||
const getPaymentMadeEntries = getPaymentMadeEntriesFactory();
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const query = getPaymentMadeTableQuery(state, props);
|
||||
const mapped = {
|
||||
@@ -23,8 +26,8 @@ export default (mapState) => {
|
||||
query,
|
||||
),
|
||||
paymentMadesLoading: state.paymentMades.loading,
|
||||
nextPaymentNumberChanged:
|
||||
state.paymentMades.nextPaymentNumberChanged,
|
||||
nextPaymentNumberChanged: state.paymentMades.nextPaymentNumberChanged,
|
||||
paymentMadeEntries: getPaymentMadeEntries(state, props),
|
||||
};
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user