fix: payment receive and made.

This commit is contained in:
a.bouhuolia
2021-03-09 17:47:01 +02:00
parent 2494a33d21
commit 59f8010122
31 changed files with 395 additions and 349 deletions

View File

@@ -1,38 +1,37 @@
import React, { useMemo, useCallback } from 'react';
import React, { useCallback } from 'react';
import { CloudLoadingIndicator } from 'components';
import { Button } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { DataTableEditable } from 'components';
import { usePaymentMadeEntriesTableColumns } from './components';
import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
import { compose, updateTableRow, safeSumBy } from 'utils';
import withAlertActions from 'containers/Alert/withAlertActions';
import { usePaymentMadeInnerContext } from './PaymentMadeInnerProvider';
import { compose, updateTableRow } from 'utils';
import { useFormikContext } from 'formik';
/**
* Payment made items table.
*/
function PaymentMadeEntriesTable({
export default function PaymentMadeEntriesTable({
onUpdateData,
entries,
// #withAlertsActions
openAlert,
}) {
const { paymentVendorId, isDueBillsFetching } = usePaymentMadeFormContext();
// Payment made inner context.
const { isNewEntriesFetching } = usePaymentMadeInnerContext();
// Payment entries table columns.
const columns = usePaymentMadeEntriesTableColumns();
// Formik context.
const { values: { vendor_id } } = useFormikContext();
// Handle update data.
const handleUpdateData = useCallback(
(rowIndex, columnId, value) => {
const newRows = compose(updateTableRow(rowIndex, columnId, value))(
entries,
);
onUpdateData(newRows);
},
[onUpdateData, entries],
@@ -40,14 +39,14 @@ function PaymentMadeEntriesTable({
// Detarmines the right no results message before selecting vendor and aftering
// selecting vendor id.
const noResultsMessage = paymentVendorId
const noResultsMessage = vendor_id
? '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={isDueBillsFetching}>
<CloudLoadingIndicator isLoading={isNewEntriesFetching}>
<DataTableEditable
progressBarLoading={isDueBillsFetching}
progressBarLoading={isNewEntriesFetching}
className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
columns={columns}
data={entries}
@@ -61,6 +60,4 @@ function PaymentMadeEntriesTable({
/>
</CloudLoadingIndicator>
);
}
export default compose(withAlertActions)(PaymentMadeEntriesTable);
}

View File

@@ -17,7 +17,6 @@ export default function PaymentMadeFormBody() {
/>
)}
</FastField>
</div>
)
}

View File

@@ -1,8 +1,8 @@
import { useFormikContext } from 'formik';
import { isEmpty } from 'lodash';
import React, { createContext, useContext, useEffect } from 'react';
import { usePaymentMadeNewPageEntries } from 'hooks/query';
import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
import { transformToNewPageEntries } from './utils';
const PaymentMadeInnerContext = createContext();
@@ -10,6 +10,7 @@ const PaymentMadeInnerContext = createContext();
* Payment made inner form provider.
*/
function PaymentMadeInnerProvider({ ...props }) {
// Payment made form context.
const { isNewMode } = usePaymentMadeFormContext();
// Formik context.
@@ -27,16 +28,16 @@ function PaymentMadeInnerProvider({ ...props }) {
});
useEffect(() => {
if (!isNewEntriesFetching && !isEmpty(newPageEntries)) {
setFieldValue('entries', newPageEntries)
if (!isNewEntriesFetching && newPageEntries && isNewMode) {
setFieldValue('entries', transformToNewPageEntries(newPageEntries));
}
}, [isNewEntriesFetching, newPageEntries, setFieldValue]);
}, [isNewEntriesFetching, newPageEntries, isNewMode, setFieldValue]);
// Provider payload.
const provider = {
newPageEntries,
isNewEntriesLoading,
isNewEntriesFetching
isNewEntriesFetching,
};
return <PaymentMadeInnerContext.Provider value={provider} {...props} />;

View File

@@ -72,6 +72,7 @@ export function usePaymentMadeEntriesTableColumns() {
Cell: BillDateCell,
disableSortBy: true,
width: 250,
className: 'bill_date',
},
{
Header: formatMessage({ id: 'bill_number' }),
@@ -85,7 +86,7 @@ export function usePaymentMadeEntriesTableColumns() {
Cell: MoneyTableCell,
Footer: AmountFooterCell,
disableSortBy: true,
className: '',
className: 'amount',
},
{
Header: formatMessage({ id: 'amount_due' }),
@@ -93,7 +94,7 @@ export function usePaymentMadeEntriesTableColumns() {
Cell: MoneyTableCell,
Footer: DueAmountFooterCell,
disableSortBy: true,
className: '',
className: 'due_amount',
},
{
Header: formatMessage({ id: 'payment_amount' }),
@@ -101,7 +102,7 @@ export function usePaymentMadeEntriesTableColumns() {
Cell: MoneyFieldCell,
Footer: PaymentAmountFooterCell,
disableSortBy: true,
className: '',
className: 'payment_amount',
},
],
[formatMessage],

View File

@@ -32,7 +32,18 @@ export const transformToEditForm = (paymentMade, paymentMadeEntries) => {
entries: [
...paymentMadeEntries.map((paymentMadeEntry) => ({
...transformToForm(paymentMadeEntry, defaultPaymentMadeEntry),
payment_amount: paymentMadeEntry.payment_amount || '',
})),
],
};
};
/**
* Transform the new page entries.
*/
export const transformToNewPageEntries = (entries) => {
return entries.map((entry) => ({
...transformToForm(entry, defaultPaymentMadeEntry),
payment_amount: '',
}));
}

View File

@@ -54,8 +54,7 @@ export const statusAccessor = (row) => {
<T
id={'day_partially_paid'}
values={{
due: round(row.due_amount, 2),
currencySign: '$',
due: <Money amount={row.due_amount} currency={'USD'} />,
}}
/>
</span>

View File

@@ -6,6 +6,8 @@ import { Intent } from '@blueprintjs/core';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import 'style/pages/PaymentReceive/PageForm.scss';
import { CLASSES } from 'common/classes';
import PaymentReceiveHeader from './PaymentReceiveFormHeader';
import PaymentReceiveFormBody from './PaymentReceiveFormBody';
@@ -29,8 +31,6 @@ import {
transformToEditForm,
} from './utils';
import 'style/pages/PaymentReceive/PageForm.scss';
/**
* Payment Receive form.
*/

View File

@@ -30,7 +30,6 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
} = usePaymentReceiveEditPage(paymentReceiveId, {
enabled: !!paymentReceiveId,
});
// Handle fetch accounts data.
const { data: accounts, isFetching: isAccountsFetching } = useAccounts();

View File

@@ -29,10 +29,10 @@ function PaymentReceiveInnerProvider({ ...props }) {
});
useEffect(() => {
if (!isDueInvoicesFetching && !isEmpty(dueInvoices)) {
if (!isDueInvoicesFetching && dueInvoices && isNewMode) {
setFieldValue('entries', transformInvoicesNewPageEntries(dueInvoices));
}
}, [isDueInvoicesFetching, dueInvoices, setFieldValue]);
}, [isDueInvoicesFetching, dueInvoices, isNewMode, setFieldValue]);
// Provider payload.
const provider = {

View File

@@ -1,38 +1,34 @@
import React, { useCallback } from 'react';
import { Button } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { CloudLoadingIndicator } from 'components';
import classNames from 'classnames';
import { useFormikContext } from 'formik';
import { CLASSES } from 'common/classes';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import { usePaymentReceiveInnerContext } from './PaymentReceiveInnerProvider';
import { DataTableEditable } from 'components';
import { usePaymentReceiveEntriesColumns } from './components';
import { compose, updateTableRow, safeSumBy } from 'utils';
import withAlertActions from 'containers/Alert/withAlertActions';
import { compose, updateTableRow } from 'utils';
/**
* Payment receive items table.
*/
function PaymentReceiveItemsTable({
export default function PaymentReceiveItemsTable({
entries,
onUpdateData,
// #withDialogActions
openAlert
}) {
// Payment receive form context.
const {
isDueInvoicesFetching,
paymentCustomerId,
} = usePaymentReceiveFormContext();
} = usePaymentReceiveInnerContext();
// Payment receive entries form context.
const columns = usePaymentReceiveEntriesColumns();
// Formik context.
const { values: { customer_id } } = useFormikContext();
// No results message.
const noResultsMessage = paymentCustomerId
const noResultsMessage = customer_id
? '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.';
@@ -62,6 +58,4 @@ function PaymentReceiveItemsTable({
/>
</CloudLoadingIndicator>
);
}
export default compose(withAlertActions)(PaymentReceiveItemsTable);
}

View File

@@ -32,6 +32,7 @@ export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => ({
entries: [
...paymentReceiveEntries.map((paymentReceiveEntry) => ({
...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry),
payment_amount: paymentReceiveEntry.payment_amount || '',
})),
],
});
@@ -47,7 +48,7 @@ export const transformInvoicesNewPageEntries = (invoices) => [
due_amount: invoice.due_amount,
date: invoice.invoice_date,
amount: invoice.balance,
payment_amount: 0,
payment_amount: '',
invoice_no: invoice.invoice_no,
total_payment_amount: invoice.payment_amount,
})),

View File

@@ -114,13 +114,6 @@ export function usePaymentReceivesColumns() {
width: 140,
className: 'payment_receive_no',
},
{
id: 'reference_no',
Header: formatMessage({ id: 'reference_no' }),
accessor: 'reference_no',
width: 140,
className: 'reference_no',
},
{
id: 'deposit_account',
Header: formatMessage({ id: 'deposit_account' }),
@@ -128,6 +121,13 @@ export function usePaymentReceivesColumns() {
width: 140,
className: 'deposit_account_id',
},
{
id: 'reference_no',
Header: formatMessage({ id: 'reference_no' }),
accessor: 'reference_no',
width: 140,
className: 'reference_no',
},
{
id: 'actions',
Header: '',

View File

@@ -34,6 +34,7 @@ export function ActionsMenu({
/>
<If condition={!receipt.is_closed}>
<MenuItem
icon={<Icon icon={'check'} iconSize={18} />}
text={formatMessage({ id: 'mark_as_closed' })}
onClick={safeCallback(onClose, receipt)}
/>