mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 05:10:31 +00:00
fix: payment receive and made.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
@@ -17,7 +17,6 @@ export default function PaymentMadeFormBody() {
|
||||
/>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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} />;
|
||||
|
||||
@@ -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],
|
||||
|
||||
@@ -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: '',
|
||||
}));
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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.
|
||||
*/
|
||||
|
||||
@@ -30,7 +30,6 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
|
||||
} = usePaymentReceiveEditPage(paymentReceiveId, {
|
||||
enabled: !!paymentReceiveId,
|
||||
});
|
||||
|
||||
// Handle fetch accounts data.
|
||||
const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
|
||||
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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,
|
||||
})),
|
||||
|
||||
@@ -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: '',
|
||||
|
||||
@@ -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)}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user