QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 22:00: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

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