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

View File

@@ -147,6 +147,12 @@ export function useDueInvoices(customerId, props) {
}),
{
select: (res) => res.data.sales_invoices,
initialDataUpdatedAt: 0,
initialData: {
data: {
sales_invoices: [],
},
},
...props,
},
);

View File

@@ -131,6 +131,12 @@ export function usePaymentMadeNewPageEntries(vendorId, props) {
}),
{
select: (res) => res.data.entries,
initialDataUpdatedAt: 0,
initialData: {
data: {
entries: [],
}
},
...props,
},
);

View File

@@ -861,7 +861,7 @@ export default {
deliver_and_new: 'Deliver and new',
deliver_continue_editing: 'Deliver (continue editing)',
due_in: 'Due in {due} day.',
day_partially_paid: 'Partially paid, {currencySign}{due} due.',
day_partially_paid: 'Partially paid, {due} due.',
overdue_by: 'Overdue by {overdue} day.',
paid: 'Paid',
your_account_has_been_locked:

View File

@@ -6,11 +6,11 @@ import {
const initialState = {
tableState: {
pageSize: 12,
pageIndex: 1,
pageIndex: 0,
sortBy: [],
},
};
export default createReducer(initialState, {
...createTableStateReducers('PAYMENT_MADES'),
});

View File

@@ -44,9 +44,6 @@ body.hide-scrollbar .Pane2{
overflow: hidden;
}
.bp3-fill{
.bp3-popover-wrapper,
.bp3-popover-target {
@@ -96,8 +93,10 @@ body.hide-scrollbar .Pane2{
}
.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter{
background-color: #0066ff;
}
.bp3-overlay-backdrop{
background-color: rgba(0,10,30, .7);
}

View File

@@ -67,6 +67,19 @@ body.page-payment-made-edit{
}
.table{
.th,
.td {
&.amount,
&.due_amount,
&.payment_amount {
&,
input {
text-align: right;
}
}
}
.tr{
.td:first-of-type,
.th:first-of-type{

View File

@@ -70,11 +70,8 @@ body.page-payment-receive-edit{
}
.table {
.th,
.td {
&.invoice_amount,
&.amount_due,
&.payment_amount {
@@ -87,7 +84,6 @@ body.page-payment-receive-edit{
}
.tr {
.td:first-of-type,
.th:first-of-type {