This commit is contained in:
a.bouhuolia
2021-03-13 15:36:42 +02:00
19 changed files with 588 additions and 11 deletions

View File

@@ -10,6 +10,7 @@ import InventoryAdjustmentDialog from 'containers/Dialogs/InventoryAdjustmentFor
import PaymentViaVoucherDialog from 'containers/Dialogs/PaymentViaVoucherDialog';
import KeyboardShortcutsDialog from 'containers/Dialogs/keyboardShortcutsDialog';
import ContactDuplicateDialog from 'containers/Dialogs/ContactDuplicateDialog';
import QuickPaymentReceiveFormDialog from 'containers/Dialogs/QuickPaymentReceiveFormDialog';
/**
* Dialogs container.
*/
@@ -25,6 +26,7 @@ export default function DialogsContainer() {
<PaymentViaVoucherDialog dialogName={'payment-via-voucher'} />
<KeyboardShortcutsDialog dialogName={'keyboard-shortcuts'} />
<ContactDuplicateDialog dialogName={'contact-duplicate'} />
<QuickPaymentReceiveFormDialog dialogName={'quick-payment-receive'}/>
</div>
);
}

View File

@@ -0,0 +1,35 @@
import * as Yup from 'yup';
import { formatMessage } from 'services/intl';
import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({
customer_id: Yup.string()
.label(formatMessage({ id: 'customer_name_' }))
.required(),
payment_receive_no: Yup.string()
.required()
.nullable()
.max(DATATYPES_LENGTH.STRING)
.label(formatMessage({ id: 'payment_receive_no_' })),
payment_date: Yup.date()
.required()
.label(formatMessage({ id: 'payment_date_' })),
deposit_account_id: Yup.number()
.required()
.label(formatMessage({ id: 'deposit_account_' })),
reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
// statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
entries: Yup.array().of(
Yup.object().shape({
payment_amount: Yup.number().nullable(),
invoice_id: Yup.number()
.nullable()
.when(['payment_amount'], {
is: (payment_amount) => payment_amount,
then: Yup.number().required(),
}),
}),
),
});
export const CreateQuickPaymentReceiveFormSchema = Schema;

View File

@@ -0,0 +1,42 @@
import React from 'react';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'react-intl';
import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
function QuickPaymentReceiveFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
// quick payment receive dialog context.
const { dialogName } = useQuickPaymentReceiveContext();
// Handle close button click.
const handleCancelBtnClick = () => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
disabled={isSubmitting}
style={{ minWidth: '75px' }}
type="submit"
>
{<T id={'make_payment'} />}
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(QuickPaymentReceiveFloatingActions);

View File

@@ -0,0 +1,86 @@
import React from 'react';
import { Formik } from 'formik';
import { Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { pick } from 'lodash';
import { AppToaster } from 'components';
import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
import { CreateQuickPaymentReceiveFormSchema } from './QuickPaymentReceive.schema';
import QuickPaymentReceiveFormContent from './QuickPaymentReceiveFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { defaultInitialValues, transformErrors } from './utils';
import { compose } from 'utils';
/**
* Quick payment receive form.
*/
function QuickPaymentReceiveForm({
// #withDialogActions
closeDialog,
}) {
const { formatMessage } = useIntl();
const {
dialogName,
invoice,
createPaymentReceiveMutate,
} = useQuickPaymentReceiveContext();
// Initial form values
const initialValues = {
...defaultInitialValues,
...invoice,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
const entries = [values]
.filter((entry) => entry.id && entry.payment_amount)
.map((entry) => ({
invoice_id: entry.id,
...pick(entry, ['payment_amount']),
}));
const form = {
...values,
customer_id: values.customer.id,
entries,
};
// Handle request response success.
const onSaved = (response) => {
AppToaster.show({
message: formatMessage({
id: 'the_payment_receive_transaction_has_been_created',
}),
intent: Intent.SUCCESS,
});
closeDialog(dialogName);
};
// Handle request response errors.
const onError = ({
response: {
data: { errors },
},
}) => {
if (errors) {
transformErrors(errors, { setFieldError });
}
setSubmitting(false);
};
createPaymentReceiveMutate(form).then(onSaved).catch(onError);
};
return (
<Formik
validationSchema={CreateQuickPaymentReceiveFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={QuickPaymentReceiveFormContent}
/>
);
}
export default compose(withDialogActions)(QuickPaymentReceiveForm);

View File

@@ -0,0 +1,16 @@
import React from 'react';
import { Form } from 'formik';
import QuickPaymentReceiveFormFields from './QuickPaymentReceiveFormFields';
import QuickPaymentReceiveFloatingActions from './QuickPaymentReceiveFloatingActions';
/**
* Quick payment receive form content.
*/
export default function QuickPaymentReceiveFormContent() {
return (
<Form>
<QuickPaymentReceiveFormFields />
<QuickPaymentReceiveFloatingActions />
</Form>
);
}

View File

@@ -0,0 +1,24 @@
import React from 'react';
import 'style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss';
import { QuickPaymentReceiveFormProvider } from './QuickPaymentReceiveFormProvider';
import QuickPaymentReceiveForm from './QuickPaymentReceiveForm';
/**
* Quick payment receive form dialog content.
*/
export default function QuickPaymentReceiveFormDialogContent({
// #ownProps
dialogName,
invoice,
}) {
return (
<QuickPaymentReceiveFormProvider
invoiceId={invoice}
dialogName={dialogName}
>
<QuickPaymentReceiveForm />
</QuickPaymentReceiveFormProvider>
);
}

View File

@@ -0,0 +1,200 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { FormattedMessage as T } from 'react-intl';
import { useAutofocus } from 'hooks';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { DateInput } from '@blueprintjs/datetime';
import { FieldRequiredHint, Col, Row } from 'components';
import {
AccountsSelectList,
InputPrependText,
MoneyInputGroup,
Icon,
} from 'components';
import {
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from 'utils';
import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
/**
* Quick payment receive form fields.
*/
export default function QuickPaymentReceiveFormFields({}) {
const { accounts } = useQuickPaymentReceiveContext();
const paymentReceiveFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
<Row>
<Col xs={5}>
{/* ------------- Customer name ------------- */}
<FastField name={'customer_id'}>
{({ from, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'customer_name'} />}
className={classNames('form-group--select-list', CLASSES.FILL)}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'customer_id'} />}
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
disabled={true}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={5}>
{/* ------------ Payment receive no. ------------ */}
<FastField name={'payment_receive_no'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'payment_no'} />}
labelInfo={<FieldRequiredHint />}
className={('form-group--payment_receive_no', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="payment_receive_no" />}
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
{/*------------ Amount Received -----------*/}
<FastField name={'payment_amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'amount_received'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--payment_amount', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="payment_amount" />}
>
<ControlGroup>
<InputPrependText text={values.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('payment_amount', amount);
}}
intent={inputIntent({ error, touched })}
inputRef={(ref) => (paymentReceiveFieldRef.current = ref)}
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
<Row>
<Col xs={5}>
{/* ------------- Payment date ------------- */}
<FastField name={'payment_date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'payment_date'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--select-list', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="payment_date" />}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('payment_date', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
}}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={5}>
{/* ------------ Deposit account ------------ */}
<FastField name={'deposit_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'deposit_to'} />}
className={classNames(
'form-group--deposit_account_id',
'form-group--select-list',
CLASSES.FILL,
)}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'deposit_account_id'} />}
>
<AccountsSelectList
accounts={accounts}
labelInfo={<FieldRequiredHint />}
onAccountSelected={(account) => {
form.setFieldValue('deposit_account_id', account.id);
}}
defaultSelectText={<T id={'select_deposit_account'} />}
selectedAccountId={value}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
{/* ------------ Reference No. ------------ */}
<FastField name={'reference_no'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reference'} />}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference" />}
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
{...field}
/>
</FormGroup>
)}
</FastField>
{/* --------- Statement --------- */}
<FastField name={'statement'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'statement'} />}
className={'form-group--statement'}
>
<TextArea growVertically={true} {...field} />
</FormGroup>
)}
</FastField>
</div>
);
}

View File

@@ -0,0 +1,48 @@
import React, { useContext, createContext } from 'react';
import { pick } from 'lodash';
import { DialogContent } from 'components';
import { useAccounts, useInvoice, useCreatePaymentReceive } from 'hooks/query';
const QuickPaymentReceiveContext = createContext();
/**
* Quick payment receive dialog provider.
*/
function QuickPaymentReceiveFormProvider({ invoiceId, dialogName, ...props }) {
// Handle fetch accounts data.
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
// Handle fetch invoice data.
const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
enabled: !!invoiceId,
});
// Create and edit payment receive mutations.
const { mutateAsync: createPaymentReceiveMutate } = useCreatePaymentReceive();
// State provider.
const provider = {
accounts,
invoice: {
...pick(invoice, ['id', 'due_amount', 'customer', 'currency_code']),
customer_id: invoice?.customer?.display_name,
payment_amount: invoice.due_amount,
},
isAccountsLoading,
dialogName,
createPaymentReceiveMutate,
};
return (
<DialogContent isLoading={isAccountsLoading || isInvoiceLoading}>
<QuickPaymentReceiveContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useQuickPaymentReceiveContext = () =>
useContext(QuickPaymentReceiveContext);
export { QuickPaymentReceiveFormProvider, useQuickPaymentReceiveContext };

View File

@@ -0,0 +1,38 @@
import React, { lazy } from 'react';
import { FormattedMessage as T } from 'react-intl';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'redux';
const QuickPaymentReceiveFormDialogContent = lazy(() =>
import('./QuickPaymentReceiveFormDialogContent'),
);
/**
* Quick payment receive form dialog.
*/
function QuickPaymentReceiveFormDialog({
dialogName,
payload = { invoiceId: null },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'quick_receive_payment'} />}
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
className={'dialog--quick-payment-receive'}
>
<DialogSuspense>
<QuickPaymentReceiveFormDialogContent
dialogName={dialogName}
invoice={payload.invoiceId}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(QuickPaymentReceiveFormDialog);

View File

@@ -0,0 +1,29 @@
import moment from 'moment';
import { formatMessage } from 'services/intl';
export const defaultInitialValues = {
customer_id: '',
deposit_account_id: '',
payment_receive_no: '',
payment_date: moment(new Date()).format('YYYY-MM-DD'),
reference_no: '',
// statement: '',
entries: [{ invoice_id: '', payment_amount: '' }],
};
export const transformErrors = (errors, { setFieldError }) => {
const getError = (errorType) => errors.find((e) => e.type === errorType);
if (getError('PAYMENT_RECEIVE_NO_EXISTS')) {
setFieldError(
'payment_receive_no',
formatMessage({ id: 'payment_number_is_not_unique' }),
);
}
if (getError('PAYMENT_RECEIVE_NO_REQUIRED')) {
setFieldError(
'payment_receive_no',
formatMessage({ id: 'payment_receive_number_required' }),
);
}
};

View File

@@ -51,7 +51,7 @@ export const ItemCodeAccessor = (row) =>
export const QuantityOnHandCell = ({ cell: { value } }) => {
return isNumber(value) ? (
<span className={'quantity_on_hand'}>{value}</span>
<span className={value < 0 ? 'quantity_on_hand' : null}>{value}</span>
) : null;
};

View File

@@ -178,14 +178,14 @@ function InvoiceFormHeaderFields({
</Field>
{/* ----------- Reference ----------- */}
<FastField name={'reference'}>
<FastField name={'reference_no'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reference'} />}
inline={true}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference" />}
helperText={<ErrorMessage name="reference_no" />}
>
<InputGroup minimal={true} {...field} />
</FormGroup>

View File

@@ -14,6 +14,7 @@ import withInvoiceActions from './withInvoiceActions';
import withSettings from 'containers/Settings/withSettings';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { useInvoicesTableColumns, ActionsMenu } from './components';
import { useInvoicesListContext } from './InvoicesListProvider';
@@ -36,6 +37,9 @@ function InvoicesDataTable({
// #withDrawerActions
openDrawer,
// #withDialogAction
openDialog,
}) {
const history = useHistory();
@@ -71,6 +75,10 @@ function InvoicesDataTable({
openDrawer('invoice-drawer', { invoiceId: id });
};
// handle quick payment receive.
const handleQuickPaymentReceive = ({ id }) => {
openDialog('quick-payment-receive', { invoiceId: id });
};
// Handles fetch data once the table state change.
const handleDataTableFetchData = useCallback(
({ pageSize, pageIndex, sortBy }) => {
@@ -114,6 +122,7 @@ function InvoicesDataTable({
onDeliver: handleDeliverInvoice,
onEdit: handleEditInvoice,
onDrawer: handleDrawerInvoice,
onQuick: handleQuickPaymentReceive,
baseCurrency,
}}
/>
@@ -125,6 +134,7 @@ export default compose(
withInvoiceActions,
withAlertsActions,
withDrawerActions,
withDialogActions,
withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency,

View File

@@ -104,7 +104,7 @@ export const handleDeleteErrors = (errors) => {
};
export function ActionsMenu({
payload: { onEdit, onDeliver, onDelete, onDrawer },
payload: { onEdit, onDeliver, onDelete, onDrawer, onQuick },
row: { original },
}) {
const { formatMessage } = useIntl();
@@ -128,6 +128,13 @@ export function ActionsMenu({
onClick={safeCallback(onDeliver, original)}
/>
</If>
<If condition={!original.is_fully_paid}>
<MenuItem
icon={<Icon icon="quick-payment-16" iconSize={16} />}
text={formatMessage({ id: 'add_payment' })}
onClick={safeCallback(onQuick, original)}
/>
</If>
<MenuItem
icon={<Icon icon={'receipt-24'} iconSize={16} />}
text={formatMessage({ id: 'invoice_paper' })}
@@ -179,7 +186,9 @@ export function useInvoicesTableColumns() {
{
id: 'balance',
Header: formatMessage({ id: 'balance' }),
accessor: (r) => <Money amount={r.balance} currency={r.currency_code} />,
accessor: (r) => (
<Money amount={r.balance} currency={r.currency_code} />
),
width: 110,
className: 'balance',
},

View File

@@ -54,7 +54,7 @@ function PaymentReceiveForm({
// Payment receive number.
const nextPaymentNumber = transactionNumber(
paymentReceiveNumberPrefix,
paymentReceiveNextNumber
paymentReceiveNextNumber,
);
// Form initial values.
const initialValues = useMemo(
@@ -105,10 +105,10 @@ function PaymentReceiveForm({
}
const form = {
...omit(values, ['payment_receive_no_manually', 'payment_receive_no']),
...(values.payment_receive_no_manually) && ({
...(values.payment_receive_no_manually && {
payment_receive_no: values.payment_receive_no,
}),
entries
entries,
};
// Handle request response success.
@@ -144,6 +144,12 @@ function PaymentReceiveForm({
formatMessage({ id: 'payment_number_is_not_unique' }),
);
}
if (getError('PAYMENT_RECEIVE_NO_REQUIRED')) {
setFieldError(
'payment_receive_no',
formatMessage({ id: 'payment_receive_number_required' }),
);
}
setSubmitting(false);
};

View File

@@ -18,7 +18,7 @@ const Schema = Yup.object().shape({
.max(DATATYPES_LENGTH.STRING)
.label(formatMessage({ id: 'payment_receive_no_' })),
reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
entries: Yup.array().of(
Yup.object().shape({
id: Yup.number().nullable(),

View File

@@ -1001,4 +1001,10 @@ export default {
invoice_number: 'Invoice number',
invoice_date: 'Invoice date',
invoice_amount: 'Invoice amount',
make_payment: 'Make Payment',
add_payment: 'Add Payment',
quick_receive_payment: 'Quick Receive Payment',
amount_received: 'Amount Received',
payment_no: 'Payment No.',
payment_receive_number_required: 'Payment receive number required',
};

View File

@@ -159,7 +159,7 @@ export default {
],
viewBox: '0 0 309.09 42.89',
},
"mini-bigcapital": {
'mini-bigcapital': {
path: [
'M56,3.16,61.33,8.5,31.94,37.9l-5.35-5.35Z',
'M29.53,6.94l5.35,5.34L5.49,41.67.14,36.33l15.8-15.8Z',
@@ -424,5 +424,11 @@ export default {
'M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z',
],
viewBox: '0 0 16 16',
}
},
'quick-payment-16': {
path: [
'M19,14V6c0-1.1-0.9-2-2-2H3C1.9,4,1,4.9,1,6v8c0,1.1,0.9,2,2,2h14C18.1,16,19,15.1,19,14z M17,14H3V6h14V14z M10,7 c-1.66,0-3,1.34-3,3s1.34,3,3,3s3-1.34,3-3S11.66,7,10,7z M23,7v11c0,1.1-0.9,2-2,2H4c0-1,0-0.9,0-2h17V7C22.1,7,22,7,23,7z',
],
viewBox: '0 0 24 24',
},
};

View File

@@ -0,0 +1,20 @@
.dialog--quick-payment-receive {
.bp3-form-group {
margin-bottom: 15px;
}
.form-group {
&--statement {
.bp3-form-content {
textarea {
width: 100%;
min-width: 100%;
font-size: 14px;
}
}
}
}
.bp3-dialog-footer {
padding-top: 10px;
}
}