QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 05:40:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: payment receive and made form.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-11-05 12:16:28 +02:00
parent 1738a333c7
commit 69e7612b62
42 changed files with 1100 additions and 750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/common/classes.js
View File

@@ -8,6 +8,9 @@ const CLASSES = {
PAGE_FORM: 'page-form',
PAGE_FORM_HEADER: 'page-form__header',
PAGE_FORM_HEADER_PRIMARY: 'page-form__primary-section',
PAGE_FORM_HEADER_FIELDS: 'page-form__header-fields',
PAGE_FORM_HEADER_BIG_NUMBERS: 'page-form__big-numbers',
PAGE_FORM_FOOTER: 'page-form__footer',
PAGE_FORM_FLOATING_ACTIONS: 'page-form__floating-actions',

18
client/src/containers/Purchases/Bill/BillForm.js
View File

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

6
client/src/containers/Purchases/Bill/BillFormHeader.js
View File

@@ -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>

11
client/src/containers/Purchases/Bill/withBills.js
View File

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

1
client/src/containers/Purchases/PaymentMades/PaymentMade.js
View File

@@ -83,6 +83,7 @@ function PaymentMade({
>
<PaymentMadeForm
paymentMadeId={paymentMadeId}
mode={paymentMadeId ? 'edit' : 'new'}
/>
</DashboardInsider>
);

32
client/src/containers/Purchases/PaymentMades/PaymentMadeFooter.js Normal file
View File

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

175
client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js
View File

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

288
client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
View File

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

106
client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js
View File

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

10
client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js
View File

@@ -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: '',

7
client/src/containers/Purchases/PaymentMades/withPaymentMade.js
View File

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

1
client/src/containers/Sales/Invoice/InvoiceForm.js
View File

@@ -98,7 +98,6 @@ function InvoiceForm({
.required()
.label(formatMessage({ id: 'due_date_' })),
invoice_no: Yup.string()
.required()
.label(formatMessage({ id: 'invoice_no_' })),
reference_no: Yup.string().min(1).max(255),
status: Yup.string().required(),

1
client/src/containers/Sales/Invoice/InvoiceFormHeader.js
View File

@@ -170,7 +170,6 @@ function InvoiceFormHeader({
label={<T id={'invoice_no'} />}
inline={true}
className={classNames('form-group--invoice-no', CLASSES.FILL)}
labelInfo={<FieldRequiredHint />}
intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
helperText={
<ErrorMessage name="invoice_no" {...{ errors, touched }} />

12
client/src/containers/Sales/Invoice/withInvoices.js
View File

@@ -4,9 +4,7 @@ import {
getInvoiceCurrentPageFactory,
getInvoicePaginationMetaFactory,
getInvoiceTableQueryFactory,
getCustomerReceivableInvoicesFactory,
getPaymentReceivableInvoicesFactory,
getPaymentReceiveReceivableInvoicesFactory
getCustomerReceivableInvoicesEntriesFactory
} from 'store/Invoice/invoices.selector';
export default (mapState) => {
@@ -15,10 +13,7 @@ export default (mapState) => {
const getInvoicesPaginationMeta = getInvoicePaginationMetaFactory();
const getInvoiceTableQuery = getInvoiceTableQueryFactory();
// const getPaymentReceivableInvoices = getPaymentReceivableInvoicesFactory();
// const getCustomerReceivableInvoices = getCustomerReceivableInvoicesFactory();
const getPaymentReceiveReceivableInvoices = getPaymentReceiveReceivableInvoicesFactory();
const getCustomerReceivableInvoicesEntries = getCustomerReceivableInvoicesEntriesFactory();
const mapStateToProps = (state, props) => {
const query = getInvoiceTableQuery(state, props);
@@ -30,8 +25,7 @@ export default (mapState) => {
invoicesTableQuery: query,
invoicesPageination: getInvoicesPaginationMeta(state, props, query),
invoicesLoading: state.salesInvoices.loading,
paymentReceiveReceivableInvoices: getPaymentReceiveReceivableInvoices(state, props),
customerInvoiceEntries: getCustomerReceivableInvoicesEntries(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};

188
client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
View File

@@ -10,7 +10,7 @@ import * as Yup from 'yup';
import { useFormik } from 'formik';
import moment from 'moment';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { pick, sumBy } from 'lodash';
import { pick, sumBy, omit } from 'lodash';
import { Intent, Alert } from '@blueprintjs/core';
import classNames from 'classnames';
@@ -18,6 +18,7 @@ import { CLASSES } from 'common/classes';
import PaymentReceiveHeader from './PaymentReceiveFormHeader';
import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
import withMediaActions from 'containers/Media/withMediaActions';
import withPaymentReceivesActions from './withPaymentReceivesActions';
@@ -26,23 +27,54 @@ import { AppToaster } from 'components';
import { compose } from 'utils';
// Default payment receive entry.
const defaultPaymentReceiveEntry = {
id: null,
payment_amount: null,
invoice_id: null,
due_amount: null,
};
// Form initial values.
const defaultInitialValues = {
customer_id: '',
deposit_account_id: '',
payment_date: moment(new Date()).format('YYYY-MM-DD'),
reference_no: '',
payment_receive_no: '',
description: '',
full_amount: '',
entries: [],
};
function PaymentReceiveForm({
// #ownProps
paymentReceiveId,
mode, //edit, new
//#WithPaymentReceiveActions
requestSubmitPaymentReceive,
requestEditPaymentReceive,
// #withPaymentReceive
// #withPaymentReceiveDetail
paymentReceive,
paymentReceiveEntries,
}) {
const [amountChangeAlert, setAmountChangeAlert] = useState(false);
const [clearLinesAlert, setClearLinesAlert] = useState(false);
const [fullAmount, setFullAmount] = useState(null);
const [clearFormAlert, setClearFormAlert] = useState(false);
const { formatMessage } = useIntl();
const [localPaymentEntries, setLocalPaymentEntries] = useState(paymentReceiveEntries);
useEffect(() => {
if (localPaymentEntries !== paymentReceiveEntries) {
setLocalPaymentEntries(paymentReceiveEntries);
}
}, [localPaymentEntries, paymentReceiveEntries]);
// Form validation schema.
const validationSchema = Yup.object().shape({
customer_id: Yup.string()
@@ -55,9 +87,9 @@ function PaymentReceiveForm({
.required()
.label(formatMessage({ id: 'deposit_account_' })),
full_amount: Yup.number().nullable(),
payment_receive_no: Yup.number()
.required()
.label(formatMessage({ id: 'payment_receive_no_' })),
payment_receive_no: Yup.number().label(
formatMessage({ id: 'payment_receive_no_' }),
),
reference_no: Yup.string().min(1).max(255).nullable(),
description: Yup.string().nullable(),
entries: Yup.array().of(
@@ -74,36 +106,6 @@ function PaymentReceiveForm({
}),
),
});
// Default payment receive.
const defaultPaymentReceive = useMemo(
() => ({
invoice_id: '',
invoice_date: moment(new Date()).format('YYYY-MM-DD'),
invoice_no: '',
balance: '',
due_amount: '',
payment_amount: '',
}),
[],
);
const defaultPaymentReceiveEntry = {
id: null,
payment_amount: null,
invoice_id: null,
};
// Form initial values.
const defaultInitialValues = useMemo(
() => ({
customer_id: '',
deposit_account_id: '',
payment_date: moment(new Date()).format('YYYY-MM-DD'),
reference_no: '',
payment_receive_no: '',
description: '',
entries: [],
}),
[],
);
// Form initial values.
const initialValues = useMemo(
@@ -112,8 +114,11 @@ function PaymentReceiveForm({
? {
...pick(paymentReceive, Object.keys(defaultInitialValues)),
entries: [
...paymentReceive.entries.map((paymentReceive) => ({
...pick(paymentReceive, Object.keys(defaultPaymentReceive)),
...paymentReceiveEntries.map((paymentReceiveEntry) => ({
...pick(
paymentReceiveEntry,
Object.keys(defaultPaymentReceiveEntry),
),
})),
],
}
@@ -121,7 +126,7 @@ function PaymentReceiveForm({
...defaultInitialValues,
}),
}),
[paymentReceive, defaultInitialValues, defaultPaymentReceive],
[paymentReceive, paymentReceiveEntries],
);
// Handle form submit.
@@ -135,7 +140,7 @@ function PaymentReceiveForm({
const entries = values.entries
.filter((entry) => entry.invoice_id && entry.payment_amount)
.map((entry) => ({
...pick(entry, Object.keys(defaultPaymentReceiveEntry)),
...omit(entry, ['due_amount']),
}));
// Calculates the total payment amount of entries.
@@ -148,6 +153,7 @@ function PaymentReceiveForm({
intent: Intent.WARNING,
}),
});
setSubmitting(false);
return;
}
const form = { ...values, entries };
@@ -196,6 +202,7 @@ function PaymentReceiveForm({
handleSubmit,
isSubmitting,
touched,
resetForm,
} = useFormik({
enableReinitialize: true,
validationSchema,
@@ -205,14 +212,29 @@ function PaymentReceiveForm({
onSubmit: handleSubmitForm,
});
const transformDataTableToEntries = (dataTable) => {
return dataTable.map((data) => ({
...pick(data, Object.keys(defaultPaymentReceiveEntry)),
}));
};
// Handle update data.
const handleUpdataData = useCallback(
(entries) => {
setFieldValue('entries', entries);
setFieldValue('entries', transformDataTableToEntries(entries));
},
[setFieldValue],
);
// Handle fetch success of customer invoices entries.
const handleFetchEntriesSuccess = useCallback(
(entries) => {
setFieldValue('entries', transformDataTableToEntries(entries));
},
[setFieldValue],
);
// Handles full amount change.
const handleFullAmountChange = useCallback(
(value) => {
if (value !== fullAmount) {
@@ -241,22 +263,51 @@ function PaymentReceiveForm({
setFullAmount(amountChangeAlert);
setAmountChangeAlert(false);
};
// Reset entries payment amount.
const resetEntriesPaymentAmount = (entries) => {
return entries.map((entry) => ({ ...entry, payment_amount: 0 }));
};
// Handle confirm clear all lines.
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, setClearLinesAlert, values.entries, localPaymentEntries]);
// Handle footer clear button click.
const handleClearBtnClick = () => {
setClearFormAlert(true);
};
// Handle cancel button click of clear form alert.
const handleCancelClearFormAlert = () => {
setClearFormAlert(false);
};
// Handle confirm button click of clear form alert.
const handleConfirmCancelClearFormAlert = () => {
resetForm();
setClearFormAlert(false);
setFullAmount(null);
};
// Calculates the total receivable amount from due amount.
const receivableFullAmount = useMemo(
() => sumBy(values.entries, 'due_amount'),
[values.entries],
);
const fullAmountReceived = useMemo(
() => sumBy(values.entries, 'payment_amount'),
[values.entries],
);
return (
<div className={classNames(
CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_PAYMENT_RECEIVE
)}>
<div
className={classNames(
CLASSES.PAGE_FORM,
CLASSES.PAGE_FORM_PAYMENT_RECEIVE,
)}
>
<form onSubmit={handleSubmit}>
<PaymentReceiveHeader
errors={errors}
@@ -267,15 +318,18 @@ function PaymentReceiveForm({
paymentReceiveId={paymentReceiveId}
customerId={values.customer_id}
onFullAmountChanged={handleFullAmountChange}
receivableFullAmount={receivableFullAmount}
amountReceived={fullAmountReceived}
/>
<PaymentReceiveItemsTable
paymentReceiveId={paymentReceiveId}
customerId={values.customer_id}
fullAmount={fullAmount}
onUpdateData={handleUpdataData}
paymentEntries={values.entries}
paymentReceiveEntries={localPaymentEntries}
errors={errors?.entries}
onClickClearAllLines={handleClearAllLines}
onFetchEntriesSuccess={handleFetchEntriesSuccess}
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
@@ -285,8 +339,12 @@ function PaymentReceiveForm({
onCancel={handleCancelAmountChangeAlert}
onConfirm={handleConfirmAmountChangeAlert}
>
<p>Are you sure to discard full amount?</p>
<p>
Changing full amount will change all credits and payment were
applied, Is this okay?
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'ok'} />}
@@ -295,12 +353,31 @@ function PaymentReceiveForm({
onCancel={handleCancelClearLines}
onConfirm={handleConfirmClearLines}
>
<p>Are you sure to discard full amount?</p>
<p>
Clearing the table lines will delete all credits and payment were
applied, Is this okay?
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'ok'} />}
intent={Intent.WARNING}
isOpen={clearFormAlert}
onCancel={handleCancelClearFormAlert}
onConfirm={handleConfirmCancelClearFormAlert}
>
<p>Are you sure you want to clear this transaction?</p>
</Alert>
<PaymentReceiveFormFooter
getFieldProps={getFieldProps}
/>
<PaymentReceiveFloatingActions
isSubmitting={isSubmitting}
paymentReceiveId={paymentReceiveId}
onClearClick={handleClearBtnClick}
/>
</form>
</div>
@@ -313,7 +390,8 @@ export default compose(
// withPaymentReceives(({ paymentReceivesItems }) => ({
// paymentReceivesItems,
// })),
withPaymentReceiveDetail(({ paymentReceive }) => ({
withPaymentReceiveDetail(({ paymentReceive, paymentReceiveEntries }) => ({
paymentReceive,
paymentReceiveEntries,
})),
)(PaymentReceiveForm);

32
client/src/containers/Sales/PaymentReceive/PaymentReceiveFormFooter.js Normal file
View File

@@ -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 receive form footer.
*/
export default function PaymentReceiveFormFooter({
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>
);
}

308
client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
View File

@@ -1,4 +1,4 @@
import React, { useMemo, useCallback, useState } from 'react';
import React, { useMemo, useCallback } from 'react';
import {
FormGroup,
InputGroup,
@@ -10,10 +10,9 @@ import {
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl';
import moment from 'moment';
import { sumBy } from 'lodash';
import classNames from 'classnames';
import { CLASSES } from 'common/classes'
import { CLASSES } from 'common/classes';
import { momentFormatter, compose, tansformDateValue } from 'utils';
import {
AccountsSelectList,
@@ -24,7 +23,6 @@ import {
Money,
} from 'components';
import withInvoices from 'containers/Sales/Invoice/withInvoices';
import withCustomers from 'containers/Customers/withCustomers';
import withAccounts from 'containers/Accounts/withAccounts';
@@ -37,7 +35,8 @@ function PaymentReceiveFormHeader({
values,
onFullAmountChanged,
paymentReceiveId,
customerId,
receivableFullAmount,
amountReceived,
//#withCustomers
customers,
@@ -48,11 +47,6 @@ function PaymentReceiveFormHeader({
// #withInvoices
receivableInvoices,
}) {
// Compute the total receivable amount.
const receivableFullAmount = useMemo(
() => sumBy(receivableInvoices, 'due_amount'),
[receivableInvoices],
);
const handleDateChange = useCallback(
(date_filed) => (date) => {
const formatted = moment(date).format('YYYY-MM-DD');
@@ -118,149 +112,174 @@ function PaymentReceiveFormHeader({
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
{/* ------------- Customer name ------------- */}
<FormGroup
label={<T id={'customer_name'} />}
inline={true}
className={classNames('form-group--select-list', CLASSES.FILL)}
labelInfo={<FieldRequiredHint />}
intent={errors.customer_id && touched.customer_id && Intent.DANGER}
helperText={
<ErrorMessage name={'customer_id'} {...{ errors, touched }} />
}
>
<ListSelect
items={customers}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={handleCusomterRenderer}
itemPredicate={handleFilterCustomer}
popoverProps={{ minimal: true }}
onItemSelect={onChangeSelect('customer_id')}
selectedItem={values.customer_id}
selectedItemProp={'id'}
defaultText={<T id={'select_customer_account'} />}
labelProp={'display_name'}
/>
</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
intent={
errors.full_amount && touched.full_amount && Intent.DANGER
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
{/* ------------- Customer name ------------- */}
<FormGroup
label={<T id={'customer_name'} />}
inline={true}
className={classNames('form-group--select-list', CLASSES.FILL)}
labelInfo={<FieldRequiredHint />}
intent={errors.customer_id && touched.customer_id && Intent.DANGER}
helperText={
<ErrorMessage name={'customer_id'} {...{ errors, touched }} />
}
minimal={true}
value={values.full_amount}
{...getFieldProps('full_amount')}
onBlur={handleFullAmountBlur}
/>
>
<ListSelect
items={customers}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={handleCusomterRenderer}
itemPredicate={handleFilterCustomer}
popoverProps={{ minimal: true }}
onItemSelect={onChangeSelect('customer_id')}
selectedItem={values.customer_id}
selectedItemProp={'id'}
defaultText={<T id={'select_customer_account'} />}
labelProp={'display_name'}
/>
</FormGroup>
<a onClick={handleReceiveFullAmountClick} href="#" className={'receive-full-amount'}>
Receive full amount (<Money amount={receivableFullAmount} currency={'USD'} />)
</a>
</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 receive no. ------------ */}
<FormGroup
label={<T id={'payment_receive_no'} />}
inline={true}
className={('form-group--payment_receive_no', CLASSES.FILL)}
labelInfo={<FieldRequiredHint />}
intent={
errors.payment_receive_no &&
touched.payment_receive_no &&
Intent.DANGER
}
helperText={
<ErrorMessage name="payment_receive_no" {...{ 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}
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={receivableFullAmount} currency={'USD'} />)
</a>
</FormGroup>
{/* ------------ Payment receive no. ------------ */}
<FormGroup
label={<T id={'payment_receive_no'} />}
inline={true}
className={('form-group--payment_receive_no', CLASSES.FILL)}
labelInfo={<FieldRequiredHint />}
intent={
errors.payment_receive_no &&
touched.payment_receive_no &&
Intent.DANGER
}
minimal={true}
{...getFieldProps('payment_receive_no')}
/>
</FormGroup>
{/* ------------ Deposit account ------------ */}
<FormGroup
label={<T id={'deposit_to'} />}
className={classNames(
'form-group--deposit_account_id',
'form-group--select-list',
CLASSES.FILL,
)}
inline={true}
labelInfo={<FieldRequiredHint />}
intent={
errors.deposit_account_id &&
touched.deposit_account_id &&
Intent.DANGER
}
helperText={
<ErrorMessage
name={'deposit_account_id'}
{...{ errors, touched }}
helperText={
<ErrorMessage
name="payment_receive_no"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.payment_receive_no &&
touched.payment_receive_no &&
Intent.DANGER
}
minimal={true}
{...getFieldProps('payment_receive_no')}
/>
}
>
<AccountsSelectList
accounts={depositAccounts}
labelInfo={<FieldRequiredHint />}
onAccountSelected={onChangeSelect('deposit_account_id')}
defaultSelectText={<T id={'select_deposit_account'} />}
selectedAccountId={values.deposit_account_id}
/>
</FormGroup>
</FormGroup>
{/* ------------ Reference No. ------------ */}
<FormGroup
label={<T id={'reference'} />}
inline={true}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={errors.reference_no && touched.reference_no && Intent.DANGER}
helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
>
<InputGroup
intent={errors.reference_no && touched.reference_no && Intent.DANGER}
minimal={true}
{...getFieldProps('reference_no')}
/>
</FormGroup>
{/* ------------ Deposit account ------------ */}
<FormGroup
label={<T id={'deposit_to'} />}
className={classNames(
'form-group--deposit_account_id',
'form-group--select-list',
CLASSES.FILL,
)}
inline={true}
labelInfo={<FieldRequiredHint />}
intent={
errors.deposit_account_id &&
touched.deposit_account_id &&
Intent.DANGER
}
helperText={
<ErrorMessage
name={'deposit_account_id'}
{...{ errors, touched }}
/>
}
>
<AccountsSelectList
accounts={depositAccounts}
labelInfo={<FieldRequiredHint />}
onAccountSelected={onChangeSelect('deposit_account_id')}
defaultSelectText={<T id={'select_deposit_account'} />}
selectedAccountId={values.deposit_account_id}
/>
</FormGroup>
{/* ------------ Reference No. ------------ */}
<FormGroup
label={<T id={'reference'} />}
inline={true}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={
errors.reference_no && touched.reference_no && Intent.DANGER
}
helperText={
<ErrorMessage name="reference" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.reference_no && touched.reference_no && Intent.DANGER
}
minimal={true}
{...getFieldProps('reference_no')}
/>
</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={amountReceived} currency={'USD'} />
</h1>
</div>
</div>
</div>
</div>
);
@@ -273,7 +292,4 @@ export default compose(
withAccounts(({ accountsList }) => ({
accountsList,
})),
withInvoices(({ paymentReceiveReceivableInvoices }) => ({
receivableInvoices: paymentReceiveReceivableInvoices,
})),
)(PaymentReceiveFormHeader);

13
client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js
View File

@@ -3,13 +3,14 @@ import { useParams } from 'react-router-dom';
import { useIntl } from 'react-intl';
import { useQuery } from 'react-query';
import { DashboardInsider } from 'components'
import DashboardInsider from 'components/Dashboard/DashboardInsider';
// import PaymentReceiveForm from './PaymentReceiveForm';
import PaymentReceiveForm from './PaymentReceiveForm';
import withDashboardActions from "containers/Dashboard/withDashboardActions";
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import withPaymentReceivesActions from './withPaymentReceivesActions';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import { compose } from 'utils';
@@ -28,7 +29,7 @@ function PaymentReceiveFormPage({
requestFetchOptions,
// #withPaymentReceivesActions
requestFetchPaymentReceive
requestFetchPaymentReceive,
// #withCustomersActions
requestFetchCustomers
@@ -37,6 +38,8 @@ function PaymentReceiveFormPage({
const { formatMessage } = useIntl();
useEffect(() => {
console.log(paymentReceiveId, 'X');
if (paymentReceiveId) {
changePageTitle(formatMessage({ id: 'edit_payment_receive' }));
} else {
@@ -72,9 +75,9 @@ function PaymentReceiveFormPage({
fetchSettings.isFetching ||
fetchCustomers.isFetching
}>
{/* <PaymentReceiveForm
<PaymentReceiveForm
paymentReceiveId={paymentReceiveId}
/> */}
/>
</DashboardInsider>
)
}

91
client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTable.js
View File

@@ -1,11 +1,9 @@
import React, { useState, useMemo, useEffect, useCallback } from 'react';
import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { Icon, CloudLoadingIndicator } from 'components';
import { CloudLoadingIndicator } from 'components';
import { useQuery } from 'react-query';
import { omit } from 'lodash';
import { compose, formattedAmount } from 'utils';
import { compose } from 'utils';
import withInvoices from '../Invoice/withInvoices';
import PaymentReceiveItemsTableEditor from './PaymentReceiveItemsTableEditor';
@@ -18,55 +16,45 @@ function PaymentReceiveItemsTable({
customerId,
fullAmount,
onUpdateData,
paymentEntries = [],// { invoice_id: number, payment_amount: number, id?: number }
paymentReceiveEntries = [],
errors,
onClickClearAllLines,
onFetchEntriesSuccess,
// #withInvoices
paymentReceiveReceivableInvoices,
// #withPaymentReceive
receivableInvoices,
customerInvoiceEntries,
// #withPaymentReceiveActions
requestFetchDueInvoices
}) {
const isNewMode = !paymentReceiveId;
const [tableData, setTableData] = useState([]);
const [localAmount, setLocalAmount] = useState(fullAmount);
const computedTableData = useMemo(() => {
const entriesTable = new Map(
paymentEntries.map((e) => [e.invoice_id, e]),
);
return receivableInvoices.map((invoice) => {
const entry = entriesTable.get(invoice.id);
return {
invoice,
id: null,
payment_amount: 0,
...(entry || {}),
};
});
}, [
receivableInvoices,
paymentEntries,
// Detarmines takes payment receive invoices entries from customer receivable
// invoices or associated payment receive invoices.
const computedTableData = useMemo(() => [
...(!isNewMode ? (paymentReceiveEntries || []) : []),
...(isNewMode ? (customerInvoiceEntries || []) : []),
], [
isNewMode,
paymentReceiveEntries,
customerInvoiceEntries,
]);
const [tableData, setTableData] = useState(computedTableData);
const [localEntries, setLocalEntries] = useState(computedTableData);
const [localAmount, setLocalAmount] = useState(fullAmount);
useEffect(() => {
setTableData(computedTableData);
}, [computedTableData]);
if (computedTableData !== localEntries) {
setTableData(computedTableData);
setLocalEntries(computedTableData);
}
}, [computedTableData, localEntries]);
// Triggers `onUpdateData` prop event.
const triggerUpdateData = useCallback((entries) => {
const _data = entries.map((entry) => ({
invoice_id: entry?.invoice?.id,
...omit(entry, ['invoice']),
due_amount: entry?.invoice?.due_amount,
}))
onUpdateData && onUpdateData(_data);
onUpdateData && onUpdateData(entries);
}, [onUpdateData]);
useEffect(() => {
@@ -74,7 +62,7 @@ function PaymentReceiveItemsTable({
let _fullAmount = fullAmount;
const newTableData = tableData.map((data) => {
const amount = Math.min(data?.invoice?.due_amount, _fullAmount);
const amount = Math.min(data?.due_amount, _fullAmount);
_fullAmount -= Math.max(amount, 0);
return {
@@ -93,6 +81,7 @@ function PaymentReceiveItemsTable({
triggerUpdateData,
]);
// Fetches customer receivable invoices.
const fetchCustomerDueInvoices = useQuery(
['customer-due-invoices', customerId],
(key, _customerId) => requestFetchDueInvoices(_customerId),
@@ -103,14 +92,30 @@ function PaymentReceiveItemsTable({
'There is no receivable invoices for this customer that can be applied for this payment' :
'Please select a customer to display all open invoices for it.';
const triggerOnFetchInvoicesSuccess = useCallback((bills) => {
onFetchEntriesSuccess && onFetchEntriesSuccess(bills);
}, [onFetchEntriesSuccess])
// Handle update data.
const handleUpdateData = useCallback((rows) => {
triggerUpdateData(rows);
}, []);
setTableData(rows);
}, [triggerUpdateData]);
useEffect(() => {
const enabled = isNewMode && customerId;
console.log(tableData, 'XX');
if (!fetchCustomerDueInvoices.isFetching && enabled) {
triggerOnFetchInvoicesSuccess(computedTableData);
}
}, [
isNewMode,
customerId,
fetchCustomerDueInvoices.isFetching,
computedTableData,
triggerOnFetchInvoicesSuccess,
]);
return (
<CloudLoadingIndicator isLoading={fetchCustomerDueInvoices.isFetching}>
<PaymentReceiveItemsTableEditor
@@ -125,8 +130,8 @@ function PaymentReceiveItemsTable({
}
export default compose(
withInvoices(({ paymentReceiveReceivableInvoices }) => ({
receivableInvoices: paymentReceiveReceivableInvoices,
withInvoices(({ customerInvoiceEntries }) => ({
customerInvoiceEntries,
})),
withInvoiceActions,
)(PaymentReceiveItemsTable);

11
client/src/containers/Sales/PaymentReceive/PaymentReceiveItemsTableEditor.js
View File

@@ -69,7 +69,7 @@ export default function PaymentReceiveItemsTableEditor ({
},
{
Header: formatMessage({ id: 'Date' }),
id: 'invoice.invoice_date',
id: 'invoice_date',
accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
Cell: CellRenderer(EmptyDiv, 'invoice_date'),
disableSortBy: true,
@@ -79,14 +79,17 @@ export default function PaymentReceiveItemsTableEditor ({
{
Header: formatMessage({ id: 'invocie_number' }),
accessor: (row) => `#${row?.invoice?.invoice_no}`,
accessor: (row) => {
const invNumber = row?.invoice_no || row?.id;
return `#INV-${invNumber}`;
},
Cell: CellRenderer(EmptyDiv, 'invoice_no'),
disableSortBy: true,
className: '',
},
{
Header: formatMessage({ id: 'invoice_amount' }),
accessor: 'invoice.balance',
accessor: 'balance',
Cell: CellRenderer(DivFieldCell, 'balance'),
disableSortBy: true,
width: 100,
@@ -94,7 +97,7 @@ export default function PaymentReceiveItemsTableEditor ({
},
{
Header: formatMessage({ id: 'amount_due' }),
accessor: 'invoice.due_amount',
accessor: 'due_amount',
Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
disableSortBy: true,
width: 150,

103
client/src/containers/Sales/PaymentReceive/PaymentReceives.js
View File

@@ -1,103 +0,0 @@
import React, { useCallback, useState, useEffect, useMemo } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { useQuery } from 'react-query';
import PaymentReceiveForm from './PaymentReceiveForm';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withItemsActions from 'containers/Items/withItemsActions';
import withPaymentReceivesActions from './withPaymentReceivesActions';
import withInvoiceActions from '../Invoice/withInvoiceActions';
import withInvoices from '../Invoice/withInvoices';
import { compose } from 'utils';
function PaymentReceives({
//#withwithAccountsActions
requestFetchAccounts,
//#withCustomersActions
requestFetchCustomers,
//#withItemsActions
requestFetchItems,
//#withPaymentReceivesActions
requestFetchPaymentReceive,
//#withInvoicesActions
requestFetchDueInvoices,
}) {
const history = useHistory();
const { id } = useParams();
const [customerId, setCustomerId] = useState(null);
const [payload, setPayload] = useState(false);
// Handle fetch accounts data
const fetchAccounts = useQuery('accounts-list', (key) =>
requestFetchAccounts(),
);
// Handle fetch Items data table or list
const fetchItems = useQuery('items-list', () => requestFetchItems({}));
// Handle fetch customers data table or list
const fetchCustomers = useQuery('customers-list', () =>
requestFetchCustomers({}),
);
const fetchPaymentReceive = useQuery(
['payment-receive', id],
(key, _id) => requestFetchPaymentReceive(_id),
{ enabled: !!id },
);
const fetchDueInvoices = useQuery(
['due-invoies', customerId],
(key, query) => requestFetchDueInvoices(query),
{ enabled: !!customerId },
);
const handleFormSubmit = useCallback(
(payload) => {
payload.redirect && history.push('/payment-receives');
},
[history],
);
const handleCancel = useCallback(() => {
history.goBack();
}, [history]);
const handleCustomerChange = (customerId) => {
setCustomerId(customerId);
};
return (
<DashboardInsider
loading={
fetchCustomers.isFetching ||
fetchItems.isFetching ||
fetchAccounts.isFetching ||
fetchPaymentReceive.isFetching
}
name={'payment-receive'}
>
<PaymentReceiveForm
onFormSubmit={handleFormSubmit}
paymentReceiveId={id}
onCancelForm={handleCancel}
onCustomerChange={handleCustomerChange}
/>
</DashboardInsider>
);
}
export default compose(
withCustomersActions,
withItemsActions,
withAccountsActions,
withPaymentReceivesActions,
withInvoiceActions,
)(PaymentReceives);

5
client/src/containers/Sales/PaymentReceive/withPaymentReceiveDetail.js
View File

@@ -1,15 +1,16 @@
import { connect } from 'react-redux';
import {
getPaymentReceiveByIdFactory,
getPaymentReceiveInvoices,
getPaymentReceiveEntriesFactory,
} from 'store/PaymentReceive/paymentReceive.selector';
export default () => {
const getPaymentReceiveById = getPaymentReceiveByIdFactory();
const getPaymentReceiveEntries = getPaymentReceiveEntriesFactory();
const mapStateToProps = (state, props) => ({
paymentReceive: getPaymentReceiveById(state, props),
paymentReceiveInvoices: getPaymentReceiveInvoices(state, props),
paymentReceiveEntries: getPaymentReceiveEntries(state, props),
});
return connect(mapStateToProps);
};

3
client/src/lang/en/index.js
View File

@@ -787,5 +787,6 @@ export default {
invoice_number_is_not_unqiue: 'Invoice number is not unqiue',
sale_receipt_number_not_unique: 'Receipt number is not unique',
sale_invoice_number_is_exists: 'Sale invoice number is exists',
bill_number_exists:'Bill number exists'
bill_number_exists:'Bill number exists',
ok: 'Ok!',
};

4
client/src/routes/dashboard.js
View File

@@ -280,14 +280,14 @@ export default [
{
path: `/payment-receive/:id/edit`,
component: LazyLoader({
loader: () => import('containers/Sales/PaymentReceive/PaymentReceives'),
loader: () => import('containers/Sales/PaymentReceive/PaymentReceiveFormPage'),
}),
breadcrumb: 'Edit',
},
{
path: `/payment-receive/new`,
component: LazyLoader({
loader: () => import('containers/Sales/PaymentReceive/PaymentReceives'),
loader: () => import('containers/Sales/PaymentReceive/PaymentReceiveFormPage'),
}),
breadcrumb: 'New Payment Receive',
},

8
client/src/store/Bills/bills.reducer.js
View File

@@ -17,6 +17,7 @@ const initialState = {
byVendorId: [],
byBillPayamentId: [],
},
byBillPayamentId: {},
};
const defaultBill = {
@@ -133,6 +134,13 @@ const reducer = createReducer(initialState, {
_data.push(bill.id);
});
state.payable.byBillPayamentId[billPaymentId] = _data;
},
[t.BILLS_BY_PAYMENT_ID]: (state, action) => {
const { bills, billPaymentId } = action.payload;
const billsIds = bills.map((bill) => bill.id);
state.byBillPayamentId[billPaymentId] = billsIds;
}
});

60
client/src/store/Bills/bills.selectors.js
View File

@@ -1,28 +1,21 @@
import { createSelector } from '@reduxjs/toolkit';
import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
// Retreive bills table query.
const billTableQuery = (state) => state.bills.tableQuery;
const billPageSelector = (state, props, query) => {
const viewId = state.bills.currentViewId;
return state.bills.views?.[viewId]?.pages?.[query.page];
};
// Retreive bills items.
const billItemsSelector = (state) => state.bills.items;
/**
* Retrieve bill details.
* @return {IBill}
*/
// Retrieve bill details.
const billByIdSelector = (state, props) => state.bills.items[props.billId];
/**
* Retrieve vendor due bills ids.
* @return {number[]}
*/
// Retrieve vendor due bills ids.
const billsPayableVendorSelector = (state, props) => state.bills.payable.byVendorId[props.vendorId];
const billsPayableByPaymentMadeSelector = (state, props) => {
return state.bills.payable.byBillPayamentId[props.paymentMadeId];
}
const billPaginationSelector = (state, props) => {
const viewId = state.bills.currentViewId;
@@ -60,12 +53,17 @@ export const getBillByIdFactory = () =>
return bill;
});
/**
* Retrieve bills datatable pagination meta.
*/
export const getBillPaginationMetaFactory = () =>
createSelector(billPaginationSelector, (billPage) => {
return billPage?.paginationMeta || {};
});
/**
* Retrieve vendor payable bills.
*/
export const getVendorPayableBillsFactory = () =>
createSelector(
billItemsSelector,
@@ -77,28 +75,24 @@ export const getVendorPayableBillsFactory = () =>
},
);
export const getPayableBillsByPaymentMadeFactory = () =>
createSelector(
billItemsSelector,
billsPayableByPaymentMadeSelector,
(billsItems, payableBillsIds) => {
return Array.isArray(payableBillsIds)
? pickItemsFromIds(billsItems, payableBillsIds) || []
: [];
},
);
export const getPaymentMadeFormPayableBillsFactory = () =>
/**
* Retrieve vendor payable bills entries.
*/
export const getVendorPayableBillsEntriesFactory = () =>
createSelector(
billItemsSelector,
billsPayableVendorSelector,
billsPayableByPaymentMadeSelector,
(billsItems, vendorBillsIds, paymentMadeBillsIds) => {
const billsIds = [
...(vendorBillsIds || []),
...(paymentMadeBillsIds || [])
];
return pickItemsFromIds(billsItems, billsIds);
},
(billsItems, payableBillsIds) => {
const bills = Array.isArray(payableBillsIds)
? pickItemsFromIds(billsItems, payableBillsIds) || []
: [];
return bills.map((bill) => ({
...bill,
bill_id: bill.id,
total_payment_amount: bill.payment_amount,
id: null,
payment_amount: null,
}));
}
);

2
client/src/store/Bills/bills.type.js
View File

@@ -10,7 +10,7 @@ export default {
BILLS_PAGE_SET: 'BILLS_PAGE_SET',
BILLS_ITEMS_SET: 'BILLS_ITEMS_SET',
BILL_NUMBER_CHANGED: 'BILL_NUMBER_CHANGED',
BILLS_PAYABLE_BY_PAYMENT_ID: 'BILLS_PAYABLE_BY_PAYMENT_ID',
BILLS_PAYABLE_BY_VENDOR_ID: 'BILLS_PAYABLE_BY_VENDOR_ID',
BILLS_BY_PAYMENT_ID: 'BILLS_BY_PAYMENT_ID',
};

1
client/src/store/Invoice/invoices.actions.js
View File

@@ -72,7 +72,6 @@ export const fetchInvoicesTable = ({ query } = {}) => {
customViewId: response.data.customViewId || -1,
},
});
dispatch({
type: t.INVOICES_ITEMS_SET,
payload: {

10
client/src/store/Invoice/invoices.reducer.js
View File

@@ -16,7 +16,8 @@ const initialState = {
receivable: {
byCustomerId: [],
byPaymentReceiveId: [],
}
},
byPaymentReceiveId: {},
};
const defaultInvoice = {
@@ -115,6 +116,13 @@ const reducer = createReducer(initialState, {
state.receivable.byCustomerId[customerId] = saleInvoiceIds
},
[t.INVOICES_BY_PAYMENT_ID]: (state, action) => {
const { paymentReceiveId, saleInvoices } = action.payload;
const saleInvoiceIds = saleInvoices.map((saleInvoice) => saleInvoice.id);
state.byPaymentReceiveId[paymentReceiveId] = saleInvoiceIds;
},
});
export default createTableQueryReducers('sales_invoices', reducer);

45
client/src/store/Invoice/invoices.selector.js
View File

@@ -19,12 +19,8 @@ const invoicesPageSelector = (state, props, query) => {
const viewId = state.salesInvoices.currentViewId;
return state.salesInvoices.views?.[viewId]?.pages?.[query.page];
};
const invoicesItemsSelector = (state) => state.salesInvoices.items;
const invoicesReceiableCustomerSelector = (state, props) => state.salesInvoices.receivable.byCustomerId[props.customerId];
const paymentReceivableInvoicesSelector = (state, props) => state.salesInvoices.receivable.byPaymentReceiveId[props.paymentReceiveId];
export const getInvoiceTableQueryFactory = () =>
createSelector(
@@ -59,39 +55,22 @@ export const getInvoicePaginationMetaFactory = () =>
return invoicePage?.paginationMeta || {};
});
// export const getCustomerReceivableInvoicesFactory = () =>
// createSelector(
// invoicesItemsSelector,
// invoicesReceiableCustomerSelector,
// (invoicesItems, invoicesIds) => {
// return Array.isArray(invoicesIds)
// ? (pickItemsFromIds(invoicesItems, invoicesIds) || [])
// : [];
// },
// );
// export const getPaymentReceivableInvoicesFactory = () =>
// createSelector(
// invoicesItemsSelector,
// paymentReceivableInvoicesSelector,
// (invoicesItems, invoicesIds) => {
// return Array.isArray(invoicesIds)
// ? (pickItemsFromIds(invoicesItems, invoicesIds) || [])
// : [];
// },
// );
export const getPaymentReceiveReceivableInvoicesFactory = () =>
export const getCustomerReceivableInvoicesEntriesFactory = () =>
createSelector(
invoicesItemsSelector,
invoicesReceiableCustomerSelector,
paymentReceivableInvoicesSelector,
(invoicesItems, customerInvoicesIds, paymentInvoicesIds) => {
(invoicesItems, customerInvoicesIds) => {
const invoicesIds = [
...(customerInvoicesIds || []),
...(paymentInvoicesIds || []),
];
return pickItemsFromIds(invoicesItems, invoicesIds);
const invoices = pickItemsFromIds(invoicesItems, invoicesIds);
return invoices.map((invoice) => ({
...invoice,
invoice_id: invoice.id,
total_payment_amount: invoice.payment_amount,
id: null,
payment_amount: 0,
}));
},
);
)

3
client/src/store/Invoice/invoices.types.js
View File

@@ -13,5 +13,6 @@ export default {
RELOAD_INVOICES: 'RELOAD_INVOICES',
INVOICES_RECEIVABLE_BY_PAYMENT_ID: 'INVOICES_RECEIVABLE_BY_PAYMENT_ID',
INVOICES_RECEIVABLE_BY_CUSTOMER_ID: 'INVOICES_RECEIVABLE_BY_CUSTOMER_ID'
INVOICES_RECEIVABLE_BY_CUSTOMER_ID: 'INVOICES_RECEIVABLE_BY_CUSTOMER_ID',
INVOICES_BY_PAYMENT_ID: 'INVOICES_BY_PAYMENT_ID'
};

19
client/src/store/PaymentMades/paymentMade.actions.js
View File

@@ -109,17 +109,30 @@ export const fetchPaymentMade = ({ id }) => {
paymentMade: response.data.bill_payment,
},
});
dispatch({
type: t.BILLS_ITEMS_SET,
payload: {
bills: response.data.payable_bills,
},
});
dispatch({
type: t.BILLS_PAYABLE_BY_PAYMENT_ID,
payload: {
billPaymentId: id,
bills: response.data.bill_payment.payable_bills,
billPaymentId: response.data.bill_payment.id,
bills: response.data.payable_bills,
},
});
dispatch({
type: t.BILLS_ITEMS_SET,
payload: {
bills: response.data.bill_payment.payable_bills,
bills: response.data.payment_bills,
},
});
dispatch({
type: t.BILLS_BY_PAYMENT_ID,
payload: {
billPaymentId: response.data.bill_payment.id,
bills: response.data.payment_bills,
},
});
resovle(response);

50
client/src/store/PaymentMades/paymentMade.selector.js
View File

@@ -1,7 +1,6 @@
import { createSelector } from '@reduxjs/toolkit';
import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
import { transformToObject } from 'utils';
const paymentMadeTableQuery = (state) => state.paymentMades.tableQuery;
@@ -10,21 +9,19 @@ const paymentMadesPageSelector = (state, props, query) => {
return state.paymentMades.views?.[viewId]?.pages?.[query.page];
};
const paymentMadesItemsSelector = (state) => {
return state.paymentMades.items;
};
const paymentMadesItemsSelector = (state) => state.paymentMades.items;
const PaymentMadePaginationSelector = (state, props) => {
const viewId = state.paymentMades.currentViewId;
return state.paymentMades.views?.[viewId];
};
const paymentMadesIds = (state, props) => {
return state.paymentMades.items[props.paymentMadeId];
};
const paymentMadeById = (state, props) => state.paymentMades.items[props.paymentMadeId];
const paymentMadeEntries = (state, props) => props.paymentMadeEntries;
const billsItemsSelector = (state, props) => state.bills.items;
const billsPayableByPaymentMadeSelector = (state, props) => state.bills.payable.byBillPayamentId[props.paymentMadeId];
const paymentMadeBillsSelector = (state, props) => state.bills.byBillPayamentId[props.paymentMadeId];
export const getPaymentMadeCurrentPageFactory = () =>
createSelector(
@@ -54,7 +51,7 @@ export const getPaymentMadePaginationMetaFactory = () =>
});
export const getPaymentMadeByIdFactory = () =>
createSelector(paymentMadesIds, (payment_Made) => {
createSelector(paymentMadeById, (payment_Made) => {
return payment_Made;
});
@@ -68,4 +65,37 @@ export const getPaymentMadeEntriesDataFactory = () =>
...entry, ...(billsItems[entry.bill_id] || {}),
})) : [];
}
)
);
export const getPaymentMadeEntriesFactory = () =>
createSelector(
billsItemsSelector,
billsPayableByPaymentMadeSelector,
paymentMadeBillsSelector,
paymentMadeById,
(
billsItems,
paymentPayableBillsIds,
paymentMadeBillsIds,
paymentMade,
) => {
const billsIds = [
...(paymentPayableBillsIds || []),
...(paymentMadeBillsIds || []),
];
const bills = pickItemsFromIds(billsItems, billsIds);
const billEntries = transformToObject((paymentMade?.entries || []), 'bill_id');
return bills.map((bill) => {
const paymentMadeEntry = (billEntries?.[bill.id] || {});
return {
...bill,
bill_id: bill.id,
total_payment_amount: bill.payment_amount,
id: paymentMadeEntry?.id,
payment_amount: paymentMadeEntry?.payment_amount,
};
});
},
);

21
client/src/store/PaymentReceive/paymentReceive.actions.js
View File

@@ -56,20 +56,33 @@ export const fetchPaymentReceive = ({ id }) => {
type: t.PAYMENT_RECEIVE_SET,
payload: {
id,
paymentReceive: response.data.paymentReceive,
paymentReceive: response.data.payment_receive,
},
});
dispatch({
type: t.INVOICES_ITEMS_SET,
payload: {
sales_invoices: response.data.sale_invoice.receivable_invoices,
sales_invoices: response.data.receivable_invoices,
},
});
dispatch({
type: t.INVOICES_ITEMS_SET,
payload: {
sales_invoices: response.data.payment_invoices,
},
});
dispatch({
type: t.INVOICES_RECEIVABLE_BY_PAYMENT_ID,
payload: {
paymentReceiveid: response.data.id,
saleInvoices: response.data.sale_invoice.receivable_invoices,
paymentReceiveId: response.data.payment_receive.id,
saleInvoices: response.data.receivable_invoices,
},
});
dispatch({
type: t.INVOICES_BY_PAYMENT_ID,
payload: {
paymentReceiveId: response.data.payment_receive.id,
saleInvoices: response.data.payment_invoices,
},
});
resovle(response);

94
client/src/store/PaymentReceive/paymentReceive.selector.js
View File

@@ -1,14 +1,32 @@
import { createSelector } from '@reduxjs/toolkit';
import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
import { transformToObject } from 'utils';
const paymentReceivesPageSelector = (state, props, query) => {
const viewId = state.paymentReceives.currentViewId;
return state.paymentReceives.views?.[viewId]?.pages?.[query.page];
};
const paymentReceivesItemsSelector = (state) => {
return state.paymentReceives.items;
const paymentReceivesItemsSelector = (state) => state.paymentReceives.items;
const paymentReceiveTableQuery = (state) => state.paymentReceives.tableQuery;
const PaymentReceivePaginationSelector = (state, props) => {
const viewId = state.paymentReceives.currentViewId;
return state.paymentReceives.views?.[viewId];
};
const invoicesItemsSelector = (state) => state.salesInvoices.items;
const payemntReceiveById = (state, props) =>
state.paymentReceives.items[props.paymentReceiveId];
const invoicesReceivableByPaymentReceiveSelector = (state, props) =>
state.salesInvoices.receivable.byPaymentReceiveId[props.paymentReceiveId];
const paymentReceiveInvoicesSelector = (state, props) =>
state.salesInvoices.byPaymentReceiveId[props.paymentReceiveId];
const paymentReceiveByIdSelector = (state, props) =>
state.paymentReceives.items[props.paymentReceiveId];
export const getPaymentReceiveCurrentPageFactory = () =>
createSelector(
@@ -21,8 +39,6 @@ export const getPaymentReceiveCurrentPageFactory = () =>
},
);
const paymentReceiveTableQuery = (state) => state.paymentReceives.tableQuery;
export const getPaymentReceiveTableQuery = createSelector(
paginationLocationQuery,
paymentReceiveTableQuery,
@@ -34,48 +50,19 @@ export const getPaymentReceiveTableQuery = createSelector(
},
);
const PaymentReceivePaginationSelector = (state, props) => {
const viewId = state.paymentReceives.currentViewId;
return state.paymentReceives.views?.[viewId];
};
export const getPaymentReceivePaginationMetaFactory = () =>
createSelector(PaymentReceivePaginationSelector, (Page) => {
return Page?.paginationMeta || {};
});
const invoicesItems = (state) => {
return state.salesInvoices.items;
};
const payemntReceiveById = (state, props) => {
return state.paymentReceives.items[props.paymentReceiveId];
};
export const getPaymentReceiveByIdFactory = () =>
createSelector(payemntReceiveById, (payment_receive) => {
return payment_receive;
});
const paymentReceiveInvoicesIdss = (state, props) => {
return state.paymentReceives.items[props.paymentReceiveInvoices]
};
// const invoicesItems = (state) => {
// return state.sales_invoices.items;
// };
// export const = createSelector(
// paymentReceiveInvoicesIds,
// invoicesItems,
// (ids, items) => {},
// );
export const getPaymentReceiveInvoices = createSelector(
payemntReceiveById,
invoicesItems,
invoicesItemsSelector,
(paymentRecieve, items) => {
return typeof paymentRecieve === 'object'
? pickItemsFromIds(
@@ -85,3 +72,42 @@ export const getPaymentReceiveInvoices = createSelector(
: [];
},
);
/**
* Retrieve payment receive invoices entries.
*/
export const getPaymentReceiveEntriesFactory = () =>
createSelector(
invoicesItemsSelector,
invoicesReceivableByPaymentReceiveSelector,
paymentReceiveInvoicesSelector,
paymentReceiveByIdSelector,
(
invoicesItems,
paymentReceivableInvoicesIds,
paymentReceiveInvoicesIds,
paymentReceive,
) => {
const invoicesIds = [
...(paymentReceivableInvoicesIds || []),
...(paymentReceiveInvoicesIds || []),
];
const invoices = pickItemsFromIds(invoicesItems, invoicesIds);
const invoicesEntries = transformToObject(
paymentReceive?.entries || [],
'invoice_id',
);
return invoices.map((invoice) => {
const paymentReceiveEntry = invoicesEntries?.[invoice.id] || {};
return {
...invoice,
invoice_id: invoice.id,
total_payment_amount: invoice.payment_amount,
id: paymentReceiveEntry?.id,
payment_amount: paymentReceiveEntry?.payment_amount,
};
});
},
);

34
client/src/style/App.scss
View File

@@ -217,6 +217,10 @@ body.authentication {
margin: -20px;
padding-bottom: 6px;
}
&__header-fields{
width: 85%;
}
&__footer{
padding: 15px;
margin: 15px 0 0 0;
@@ -429,4 +433,34 @@ body.authentication {
&:not(.is-loading) .bp3-spinner{
display: none;
}
}
.big-amount{
&__label{
color: #5d6f90;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
&__number{
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400;
margin-top: 6px;
color: #343463;
line-height: 1;
font-size: 34px;
}
}
.bp3-alert{
.bp3-alert-footer{
.bp3-button{
min-width: 70px;
}
}
}

14
client/src/style/pages/payment-made.scss
View File

@@ -26,9 +26,15 @@
}
#{$self}__primary-section{
display: flex;
padding-bottom: 2px;
}
#{$self}__big-numbers{
margin-left: auto;
padding-right: 10px;
}
.datatable-editor{
.table .tbody{
@@ -56,6 +62,14 @@
}
#{$self}__footer{
.form-group--statement{
max-width: 500px;
width: 100%;
textarea{
width: 100%;
min-height: 70px;
}
}
}
}

14
client/src/style/pages/payment-receive.scss
View File

@@ -26,9 +26,15 @@
}
#{$self}__primary-section{
display: flex;
padding-bottom: 2px;
}
#{$self}__big-numbers{
margin-left: auto;
padding-right: 10px;
}
.datatable-editor{
.table .tbody{
@@ -56,6 +62,14 @@
}
#{$self}__footer{
.form-group--statement{
max-width: 500px;
width: 100%;
textarea{
width: 100%;
min-height: 70px;
}
}
}
}

12
client/src/utils.js
View File

@@ -262,3 +262,15 @@ export const flatToNestedArray = (
export const orderingLinesIndexes = (lines, attribute = 'index') => {
return lines.map((line, index) => ({ ...line, [attribute]: index + 1 }));
};
export const transformToObject = (arr, key) => {
return arr.reduce(function(acc, cur, i) {
acc[key ? cur[key] : i] = cur;
return acc;
}, {});
}
export const itemsStartWith = (items, char) => {
return items.filter((item) => item.indexOf(char) === 0);
};

1
server/src/interfaces/SaleInvoice.ts
View File

@@ -6,6 +6,7 @@ export interface ISaleInvoice {
paymentAmount: number,
invoiceDate: Date,
dueDate: Date,
dueAmount: number,
entries: IItemEntry[],
}

16
server/src/services/Purchases/BillPayments.ts
View File

@@ -172,13 +172,23 @@ export default class BillPaymentsService {
* @param {NextFunction} next
* @return {void}
*/
private async validateBillsDueAmount(tenantId: number, billPaymentEntries: IBillPaymentEntryDTO[]) {
private async validateBillsDueAmount(
tenantId: number,
billPaymentEntries: IBillPaymentEntryDTO[],
oldPaymentEntries: IBillPaymentEntry[] = []
) {
const { Bill } = this.tenancy.models(tenantId);
const billsIds = billPaymentEntries.map((entry: IBillPaymentEntryDTO) => entry.billId);
const storedBills = await Bill.query().whereIn('id', billsIds);
const storedBillsMap = new Map(
storedBills.map((bill: any) => [bill.id, bill]),
storedBills
.map((bill) => {
const oldEntries = oldPaymentEntries.filter(entry => entry.billId === bill.id);
const oldPaymentAmount = sumBy(oldEntries, 'paymentAmount') || 0;
return [bill.id, { ...bill, dueAmount: bill.dueAmount + oldPaymentAmount }];
}),
);
interface invalidPaymentAmountError{
index: number,
@@ -328,7 +338,7 @@ export default class BillPaymentsService {
await this.validateBillsExistance(tenantId, billPaymentObj.entries, billPaymentDTO.vendorId);
// Validates the bills due payment amount.
await this.validateBillsDueAmount(tenantId, billPaymentObj.entries);
await this.validateBillsDueAmount(tenantId, billPaymentObj.entries, oldBillPayment.entries);
// Validate the payment number uniquiness.
if (billPaymentObj.paymentNumber) {

17
server/src/services/Sales/PaymentsReceives.ts
View File

@@ -12,6 +12,7 @@ import {
IPaginationMeta,
IPaymentReceive,
IPaymentReceiveDTO,
IPaymentReceiveEntry,
IPaymentReceiveEntryDTO,
IPaymentReceivesFilter,
ISaleInvoice
@@ -158,14 +159,24 @@ export default class PaymentReceiveService {
* @param {Response} res -
* @param {Function} next -
*/
async validateInvoicesPaymentsAmount(tenantId: number, paymentReceiveEntries: IPaymentReceiveEntryDTO[]) {
async validateInvoicesPaymentsAmount(
tenantId: number,
paymentReceiveEntries: IPaymentReceiveEntryDTO[],
oldPaymentEntries: IPaymentReceiveEntry[] = [],
) {
const { SaleInvoice } = this.tenancy.models(tenantId);
const invoicesIds = paymentReceiveEntries.map((e: IPaymentReceiveEntryDTO) => e.invoiceId);
const storedInvoices = await SaleInvoice.query().whereIn('id', invoicesIds);
const storedInvoicesMap = new Map(
storedInvoices.map((invoice: ISaleInvoice) => [invoice.id, invoice])
storedInvoices
.map((invoice: ISaleInvoice) => {
const oldEntries = oldPaymentEntries.filter(entry => entry.invoiceId);
const oldPaymentAmount = sumBy(oldEntries, 'paymentAmount') || 0,
return [invoice.id, { ...invoice, dueAmount: invoice.dueAmount + oldPaymentAmount }];
})
);
const hasWrongPaymentAmount: any[] = [];
@@ -301,7 +312,7 @@ export default class PaymentReceiveService {
await this.validateInvoicesIDsExistance(tenantId, paymentReceiveDTO.customerId, paymentReceiveDTO.entries);
// Validate invoice payment amount.
await this.validateInvoicesPaymentsAmount(tenantId, paymentReceiveDTO.entries);
await this.validateInvoicesPaymentsAmount(tenantId, paymentReceiveDTO.entries, oldPaymentReceive.entries);
// Update the payment receive transaction.
const paymentReceive = await PaymentReceive.query()