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

Merge branch 'master' of https://github.com/abouolia/Bigcapital

Browse Source
This commit is contained in:
elforjani3
2020-11-06 01:17:30 +02:00
parent fbb17fa3cd cc1de9c897
commit 703b730fd3
46 changed files with 1220 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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,
@@ -234,6 +237,7 @@ function BillForm({
setSubmitting(false);
saveBillSubmit({ action: 'update', ...payload });
resetForm();
changePageSubtitle('');
})
.catch((errors) => {
handleErrors(errors, { setErrors });
@@ -301,10 +305,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,
@@ -48,6 +49,10 @@ function BillFormHeader({
[setFieldValue],
);
const handleBillNumberBlur = (event) => {
onBillNumberChanged && onBillNumberChanged(event.currentTarget.value);
};
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<div className={'page-form__primary-section'}>
@@ -135,6 +140,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');
@@ -67,8 +60,6 @@ function PaymentMadeFormHeader({
},
[setFieldValue],
);
const triggerFullAmountChanged = (value) => {
onFullAmountChanged && onFullAmountChanged(value);
};
@@ -96,147 +87,159 @@ 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 }} />
}
>
<ContactSelecetList
contactsList={vendorItems}
selectedContactId={values.vendor_id}
defaultSelectText={ <T id={'select_vender_account'} /> }
onContactSelected={onChangeSelect('vendor_id')}
// 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>
{/* ------------ 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'}
<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 }} />
}
>
Receive full amount (
<Money amount={payableFullAmount} currency={'USD'} />)
</a>
</FormGroup>
<ContactSelecetList
contactsList={vendorItems}
selectedContactId={values.vendor_id}
defaultSelectText={ <T id={'select_vender_account'} /> }
onContactSelected={onChangeSelect('vendor_id')}
disabled={!isNewMode}
/>
</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 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
}
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>
{/* ------------ 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 }} />
{/* ------------ 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 }}
/>
}
>
<InputGroup
>
<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>
);
@@ -250,7 +253,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

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

307
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,7 +10,6 @@ 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';
@@ -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');
@@ -61,18 +55,6 @@ function PaymentReceiveFormHeader({
[setFieldValue],
);
const handleCusomterRenderer = useCallback(
(custom, { handleClick }) => (
<MenuItem
key={custom.id}
text={custom.display_name}
onClick={handleClick}
/>
),
[],
);
const onChangeSelect = useCallback(
(filedName) => {
return (item) => {
@@ -105,148 +87,168 @@ 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 }} />
}
>
<ContactSelecetList
contactsList={customers}
selectedContactId={values.customer_id}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={onChangeSelect('customer_id')}
/>
</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}
minimal={true}
value={values.full_amount}
{...getFieldProps('full_amount')}
onBlur={handleFullAmountBlur}
/>
<a
onClick={handleReceiveFullAmountClick}
href="#"
className={'receive-full-amount'}
<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 }} />
}
>
Receive full amount (
<Money amount={receivableFullAmount} currency={'USD'} />)
</a>
</FormGroup>
<ContactSelecetList
contactsList={customers}
selectedContactId={values.customer_id}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={onChangeSelect('customer_id')}
/>
</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
{/* ------------- 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
}
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
{/* ------------ 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
}
minimal={true}
{...getFieldProps('reference_no')}
/>
</FormGroup>
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>
);
@@ -259,7 +261,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);
};