mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 13:20:31 +00:00
refactoring: WIP payment receive and made form.
This commit is contained in:
a.bouhuolia
@@ -1,479 +0,0 @@
|
||||
import React, { useMemo, useCallback, useEffect, useState } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import moment from 'moment';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { pick, sumBy, omit } from 'lodash';
|
||||
import { Intent, Alert } from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
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';
|
||||
import withPaymentReceiveDetail from './withPaymentReceiveDetail';
|
||||
import withPaymentReceives from './withPaymentReceives';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import {
|
||||
EditPaymentReceiveFormSchema,
|
||||
CreatePaymentReceiveFormSchema,
|
||||
} from './PaymentReceiveForm.schema';
|
||||
import { AppToaster } from 'components';
|
||||
|
||||
import { compose, defaultToTransform } from 'utils';
|
||||
|
||||
import 'style/pages/PaymentReceive/PageForm.scss'
|
||||
|
||||
/**
|
||||
* Payment Receive form.
|
||||
*/
|
||||
function PaymentReceiveForm({
|
||||
// #ownProps
|
||||
paymentReceiveId,
|
||||
mode, //edit, new
|
||||
|
||||
//#WithPaymentReceiveActions
|
||||
requestSubmitPaymentReceive,
|
||||
requestEditPaymentReceive,
|
||||
setPaymentReceiveNumberChanged,
|
||||
|
||||
// #withPaymentReceiveDetail
|
||||
paymentReceive,
|
||||
paymentReceiveEntries,
|
||||
|
||||
// #withSettings
|
||||
paymentReceiveNextNumber,
|
||||
paymentReceiveNumberPrefix,
|
||||
|
||||
// #withPaymentReceives
|
||||
paymentReceiveNumberChanged,
|
||||
|
||||
// #withDashboardAction
|
||||
changePageTitle,
|
||||
changePageSubtitle,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
|
||||
const [amountChangeAlert, setAmountChangeAlert] = useState(false);
|
||||
const [clearLinesAlert, setClearLinesAlert] = useState(false);
|
||||
const [fullAmount, setFullAmount] = useState(null);
|
||||
const [clearFormAlert, setClearFormAlert] = useState(false);
|
||||
const [submitPayload, setSubmitPayload] = useState({});
|
||||
|
||||
const { formatMessage } = useIntl();
|
||||
const [localPaymentEntries, setLocalPaymentEntries] = useState(
|
||||
paymentReceiveEntries,
|
||||
);
|
||||
const isNewMode = !paymentReceiveId;
|
||||
|
||||
const paymentReceiveNumber = paymentReceiveNumberPrefix
|
||||
? `${paymentReceiveNumberPrefix}-${paymentReceiveNextNumber}`
|
||||
: paymentReceiveNextNumber;
|
||||
|
||||
useEffect(() => {
|
||||
const transactionNumber = !isNewMode
|
||||
? paymentReceive.payment_receive_no
|
||||
: paymentReceiveNumber;
|
||||
|
||||
if (paymentReceive && paymentReceiveId) {
|
||||
changePageTitle(formatMessage({ id: 'edit_payment_receive' }));
|
||||
changePageSubtitle(`No. ${paymentReceive.payment_receive_no}`);
|
||||
} else {
|
||||
changePageTitle(formatMessage({ id: 'payment_receive' }));
|
||||
}
|
||||
changePageSubtitle(
|
||||
defaultToTransform(transactionNumber, `No. ${transactionNumber}`, ''),
|
||||
);
|
||||
}, [
|
||||
isNewMode,
|
||||
changePageTitle,
|
||||
changePageSubtitle,
|
||||
paymentReceive,
|
||||
paymentReceiveId,
|
||||
formatMessage,
|
||||
paymentReceiveNumber,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (localPaymentEntries !== paymentReceiveEntries) {
|
||||
setLocalPaymentEntries(paymentReceiveEntries);
|
||||
}
|
||||
}, [localPaymentEntries, paymentReceiveEntries]);
|
||||
|
||||
// Form validation schema.
|
||||
const validationSchema = isNewMode
|
||||
? CreatePaymentReceiveFormSchema
|
||||
: EditPaymentReceiveFormSchema;
|
||||
|
||||
// Default payment receive entry.
|
||||
const defaultPaymentReceiveEntry = {
|
||||
id: '',
|
||||
payment_amount: '',
|
||||
invoice_id: '',
|
||||
due_amount: '',
|
||||
};
|
||||
|
||||
// Form initial values.
|
||||
const defaultInitialValues = {
|
||||
customer_id: '',
|
||||
deposit_account_id: '',
|
||||
payment_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
reference_no: '',
|
||||
payment_receive_no: paymentReceiveNumber,
|
||||
description: '',
|
||||
full_amount: '',
|
||||
entries: [],
|
||||
};
|
||||
|
||||
// Form initial values.
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
...(paymentReceive
|
||||
? {
|
||||
...pick(paymentReceive, Object.keys(defaultInitialValues)),
|
||||
entries: [
|
||||
...paymentReceiveEntries.map((paymentReceiveEntry) => ({
|
||||
...pick(
|
||||
paymentReceiveEntry,
|
||||
Object.keys(defaultPaymentReceiveEntry),
|
||||
),
|
||||
})),
|
||||
],
|
||||
}
|
||||
: {
|
||||
...defaultInitialValues,
|
||||
}),
|
||||
}),
|
||||
[paymentReceive, paymentReceiveEntries],
|
||||
);
|
||||
|
||||
// Handle form submit.
|
||||
const handleSubmitForm = (
|
||||
values,
|
||||
{ setSubmitting, resetForm, setFieldError },
|
||||
) => {
|
||||
setSubmitting(true);
|
||||
|
||||
// Filters entries that have no `invoice_id` and `payment_amount`.
|
||||
const entries = values.entries
|
||||
.filter((entry) => entry.invoice_id && entry.payment_amount)
|
||||
.map((entry) => ({
|
||||
...omit(entry, ['due_amount']),
|
||||
}));
|
||||
|
||||
// Calculates the total payment amount of entries.
|
||||
const totalPaymentAmount = sumBy(entries, 'payment_amount');
|
||||
|
||||
if (totalPaymentAmount <= 0) {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'you_cannot_make_payment_with_zero_total_amount',
|
||||
}),
|
||||
intent: Intent.DANGER,
|
||||
});
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
const form = { ...values, entries };
|
||||
|
||||
// Handle request response success.
|
||||
const onSaved = (response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: paymentReceiveId
|
||||
? 'the_payment_receive_transaction_has_been_edited'
|
||||
: 'the_payment_receive_transaction_has_been_created',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
|
||||
if (submitPayload.redirect) {
|
||||
history.push('/payment-receives');
|
||||
}
|
||||
if (submitPayload.resetForm) {
|
||||
resetForm();
|
||||
}
|
||||
};
|
||||
// Handle request response errors.
|
||||
const onError = (errors) => {
|
||||
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' }),
|
||||
);
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
if (paymentReceiveId) {
|
||||
requestEditPaymentReceive(paymentReceiveId, form)
|
||||
.then(onSaved)
|
||||
.catch(onError);
|
||||
} else {
|
||||
requestSubmitPaymentReceive(form).then(onSaved).catch(onError);
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
errors,
|
||||
values,
|
||||
setFieldValue,
|
||||
getFieldProps,
|
||||
setValues,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
touched,
|
||||
resetForm,
|
||||
submitForm,
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: handleSubmitForm,
|
||||
});
|
||||
|
||||
const transformDataTableToEntries = (dataTable) => {
|
||||
return dataTable.map((data) => ({
|
||||
...pick(data, Object.keys(defaultPaymentReceiveEntry)),
|
||||
}));
|
||||
};
|
||||
|
||||
// Handle update data.
|
||||
const handleUpdataData = useCallback(
|
||||
(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) {
|
||||
setAmountChangeAlert(value);
|
||||
}
|
||||
},
|
||||
[fullAmount, setAmountChangeAlert],
|
||||
);
|
||||
|
||||
// Handle clear all lines button click.
|
||||
const handleClearAllLines = useCallback(() => {
|
||||
setClearLinesAlert(true);
|
||||
}, [setClearLinesAlert]);
|
||||
|
||||
// Handle cancel button click of clear lines alert
|
||||
const handleCancelClearLines = useCallback(() => {
|
||||
setClearLinesAlert(false);
|
||||
}, [setClearLinesAlert]);
|
||||
|
||||
// Handle cancel button of amount change alert.
|
||||
const handleCancelAmountChangeAlert = () => {
|
||||
setAmountChangeAlert(false);
|
||||
};
|
||||
// Handle confirm button of amount change alert.
|
||||
const handleConfirmAmountChangeAlert = () => {
|
||||
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(() => {
|
||||
setLocalPaymentEntries(resetEntriesPaymentAmount(localPaymentEntries));
|
||||
setFieldValue('entries', resetEntriesPaymentAmount(values.entries));
|
||||
setClearLinesAlert(false);
|
||||
}, [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],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (paymentReceiveNumberChanged) {
|
||||
setFieldValue('payment_receive_no', paymentReceiveNumber);
|
||||
changePageSubtitle(
|
||||
defaultToTransform(
|
||||
paymentReceiveNumber,
|
||||
`No. ${paymentReceiveNumber}`,
|
||||
'',
|
||||
),
|
||||
);
|
||||
setPaymentReceiveNumberChanged(false);
|
||||
}
|
||||
}, [
|
||||
paymentReceiveNumber,
|
||||
paymentReceiveNumberChanged,
|
||||
setFieldValue,
|
||||
changePageSubtitle,
|
||||
setPaymentReceiveNumberChanged,
|
||||
]);
|
||||
|
||||
const handlePaymentReceiveNumberChanged = useCallback(
|
||||
(payment_receive_no) => {
|
||||
changePageSubtitle(
|
||||
defaultToTransform(payment_receive_no, `No.${payment_receive_no}`, ''),
|
||||
);
|
||||
},
|
||||
[changePageSubtitle],
|
||||
);
|
||||
|
||||
const handleSubmitClick = useCallback(
|
||||
(event, payload) => {
|
||||
setSubmitPayload({ ...payload });
|
||||
},
|
||||
[setSubmitPayload],
|
||||
);
|
||||
|
||||
const handleCancelClick = useCallback(() => {
|
||||
history.goBack();
|
||||
}, [history]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
CLASSES.PAGE_FORM,
|
||||
CLASSES.PAGE_FORM_STRIP_STYLE,
|
||||
CLASSES.PAGE_FORM_PAYMENT_RECEIVE,
|
||||
)}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<PaymentReceiveHeader
|
||||
errors={errors}
|
||||
touched={touched}
|
||||
setFieldValue={setFieldValue}
|
||||
getFieldProps={getFieldProps}
|
||||
values={values}
|
||||
paymentReceiveId={paymentReceiveId}
|
||||
customerId={values.customer_id}
|
||||
onFullAmountChanged={handleFullAmountChange}
|
||||
receivableFullAmount={receivableFullAmount}
|
||||
amountReceived={fullAmountReceived}
|
||||
onPaymentReceiveNumberChanged={handlePaymentReceiveNumberChanged}
|
||||
/>
|
||||
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
|
||||
<PaymentReceiveItemsTable
|
||||
paymentReceiveId={paymentReceiveId}
|
||||
customerId={values.customer_id}
|
||||
fullAmount={fullAmount}
|
||||
onUpdateData={handleUpdataData}
|
||||
paymentReceiveEntries={localPaymentEntries}
|
||||
errors={errors?.entries}
|
||||
onClickClearAllLines={handleClearAllLines}
|
||||
onFetchEntriesSuccess={handleFetchEntriesSuccess}
|
||||
/>
|
||||
</div>
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'ok'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={amountChangeAlert}
|
||||
onCancel={handleCancelAmountChangeAlert}
|
||||
onConfirm={handleConfirmAmountChangeAlert}
|
||||
>
|
||||
<p>
|
||||
<T
|
||||
id={'changing_full_amount_will_change_all_credits_and_payment'}
|
||||
/>
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'ok'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={clearLinesAlert}
|
||||
onCancel={handleCancelClearLines}
|
||||
onConfirm={handleConfirmClearLines}
|
||||
>
|
||||
<p>
|
||||
<T id={'clearing_the_table_lines_will_delete_all_credits'} />
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'ok'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={clearFormAlert}
|
||||
onCancel={handleCancelClearFormAlert}
|
||||
onConfirm={handleConfirmCancelClearFormAlert}
|
||||
>
|
||||
<p>
|
||||
<T id={'are_you_sure_you_want_to_clear_this_transaction'} />
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<PaymentReceiveFormFooter getFieldProps={getFieldProps} />
|
||||
|
||||
<PaymentReceiveFloatingActions
|
||||
isSubmitting={isSubmitting}
|
||||
paymentReceiveId={paymentReceiveId}
|
||||
onClearClick={handleClearBtnClick}
|
||||
onSubmitClick={handleSubmitClick}
|
||||
onCancelClick={handleCancelClick}
|
||||
onSubmitForm={submitForm}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withPaymentReceivesActions,
|
||||
withDashboardActions,
|
||||
withMediaActions,
|
||||
withPaymentReceiveDetail(({ paymentReceive, paymentReceiveEntries }) => ({
|
||||
paymentReceive,
|
||||
paymentReceiveEntries,
|
||||
})),
|
||||
withSettings(({ paymentReceiveSettings }) => ({
|
||||
paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
|
||||
paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
|
||||
})),
|
||||
withPaymentReceives(({ paymentReceiveNumberChanged }) => ({
|
||||
paymentReceiveNumberChanged,
|
||||
})),
|
||||
)(PaymentReceiveForm);
|
||||
@@ -1,304 +0,0 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import {
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
Position,
|
||||
ControlGroup,
|
||||
} from '@blueprintjs/core';
|
||||
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import moment from 'moment';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
|
||||
import {
|
||||
AccountsSelectList,
|
||||
ContactSelecetList,
|
||||
ErrorMessage,
|
||||
FieldRequiredHint,
|
||||
Icon,
|
||||
InputPrependButton,
|
||||
MoneyInputGroup,
|
||||
InputPrependText,
|
||||
Hint,
|
||||
Money,
|
||||
} from 'components';
|
||||
|
||||
import withCustomers from 'containers/Customers/withCustomers';
|
||||
import withAccounts from 'containers/Accounts/withAccounts';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
function PaymentReceiveFormHeader({
|
||||
// #useFormik
|
||||
errors,
|
||||
touched,
|
||||
setFieldValue,
|
||||
getFieldProps,
|
||||
values,
|
||||
onFullAmountChanged,
|
||||
paymentReceiveId,
|
||||
receivableFullAmount,
|
||||
amountReceived,
|
||||
|
||||
//#withCustomers
|
||||
customers,
|
||||
|
||||
//#withAccouts
|
||||
accountsList,
|
||||
|
||||
//#withSettings
|
||||
baseCurrency,
|
||||
|
||||
// #withInvoices
|
||||
receivableInvoices,
|
||||
// #ownProps
|
||||
onPaymentReceiveNumberChanged,
|
||||
|
||||
//#withDialogActions
|
||||
openDialog,
|
||||
}) {
|
||||
const handleDateChange = useCallback(
|
||||
(date_filed) => (date) => {
|
||||
const formatted = moment(date).format('YYYY-MM-DD');
|
||||
setFieldValue(date_filed, formatted);
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
const onChangeSelect = useCallback(
|
||||
(filedName) => {
|
||||
return (item) => {
|
||||
setFieldValue(filedName, item.id);
|
||||
};
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
const triggerFullAmountChanged = (value) => {
|
||||
onFullAmountChanged && onFullAmountChanged(value);
|
||||
};
|
||||
|
||||
// Handle full amount changed event.
|
||||
const handleFullAmountBlur = (event) => {
|
||||
triggerFullAmountChanged(event.currentTarget.value);
|
||||
};
|
||||
// Handle link click of receive full amount.
|
||||
const handleReceiveFullAmountClick = () => {
|
||||
setFieldValue('full_amount', receivableFullAmount);
|
||||
triggerFullAmountChanged(receivableFullAmount);
|
||||
};
|
||||
|
||||
const handlePaymentReceiveNumberChange = useCallback(() => {
|
||||
openDialog('payment-receive-number-form', {});
|
||||
}, [openDialog]);
|
||||
|
||||
const handlePaymentReceiveNumberChanged = (event) => {
|
||||
saveInvoke(onPaymentReceiveNumberChanged, event.currentTarget.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
|
||||
<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 }} />
|
||||
}
|
||||
>
|
||||
<ContactSelecetList
|
||||
contactsList={customers}
|
||||
selectedContactId={values.customer_id}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={onChangeSelect('customer_id')}
|
||||
popoverFill={true}
|
||||
/>
|
||||
</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 }}
|
||||
inputProps={{
|
||||
leftIcon: (<Icon icon={'date-range'} />),
|
||||
}}
|
||||
/>
|
||||
</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 }} />
|
||||
}
|
||||
>
|
||||
<ControlGroup>
|
||||
<InputPrependText text={baseCurrency} />
|
||||
<MoneyInputGroup
|
||||
value={values.full_amount}
|
||||
inputGroupProps={{
|
||||
medium: true,
|
||||
onBlur: { handleFullAmountBlur },
|
||||
...getFieldProps('full_amount'),
|
||||
}}
|
||||
/>
|
||||
</ControlGroup>
|
||||
|
||||
<a
|
||||
onClick={handleReceiveFullAmountClick}
|
||||
href="#"
|
||||
className={'receive-full-amount'}
|
||||
>
|
||||
Receive full amount (
|
||||
<Money amount={receivableFullAmount} currency={baseCurrency} />)
|
||||
</a>
|
||||
</FormGroup>
|
||||
|
||||
{/* ------------ Payment receive no. ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_receive_no'} />}
|
||||
inline={true}
|
||||
className={('form-group--payment_receive_no', CLASSES.FILL)}
|
||||
intent={
|
||||
errors.payment_receive_no &&
|
||||
touched.payment_receive_no &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage
|
||||
name="payment_receive_no"
|
||||
{...{ errors, touched }}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ControlGroup fill={true}>
|
||||
<InputGroup
|
||||
intent={
|
||||
errors.payment_receive_no &&
|
||||
touched.payment_receive_no &&
|
||||
Intent.DANGER
|
||||
}
|
||||
minimal={true}
|
||||
{...getFieldProps('payment_receive_no')}
|
||||
onBlur={handlePaymentReceiveNumberChanged}
|
||||
/>
|
||||
<InputPrependButton
|
||||
buttonProps={{
|
||||
onClick: handlePaymentReceiveNumberChange,
|
||||
icon: <Icon icon={'settings-18'} />,
|
||||
}}
|
||||
tooltip={true}
|
||||
tooltipProps={{
|
||||
content: 'Setting your auto-generated Payment Receive number',
|
||||
position: Position.BOTTOM_LEFT,
|
||||
}}
|
||||
/>
|
||||
</ControlGroup>
|
||||
</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={accountsList}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
onAccountSelected={onChangeSelect('deposit_account_id')}
|
||||
defaultSelectText={<T id={'select_deposit_account'} />}
|
||||
selectedAccountId={values.deposit_account_id}
|
||||
filterByTypes={['current_asset']}
|
||||
/>
|
||||
</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={baseCurrency} />
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withCustomers(({ customers }) => ({
|
||||
customers,
|
||||
})),
|
||||
withAccounts(({ accountsList }) => ({
|
||||
accountsList,
|
||||
})),
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
baseCurrency: organizationSettings?.baseCurrency,
|
||||
})),
|
||||
withDialogActions,
|
||||
)(PaymentReceiveFormHeader);
|
||||
@@ -1,98 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { useQuery } from 'react-query';
|
||||
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
|
||||
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';
|
||||
|
||||
/**
|
||||
* Payment receive form page.
|
||||
*/
|
||||
function PaymentReceiveFormPage({
|
||||
// #withDashboardAction
|
||||
changePageTitle,
|
||||
|
||||
// #withAccountsActions
|
||||
requestFetchAccounts,
|
||||
|
||||
// #withSettingsActions
|
||||
requestFetchOptions,
|
||||
|
||||
// #withPaymentReceivesActions
|
||||
requestFetchPaymentReceive,
|
||||
|
||||
// #withCustomersActions
|
||||
requestFetchCustomers,
|
||||
|
||||
// #withDashboardActions
|
||||
setSidebarShrink,
|
||||
resetSidebarPreviousExpand,
|
||||
setDashboardBackLink,
|
||||
}) {
|
||||
const { id: paymentReceiveId } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
// Shrink the sidebar by foce.
|
||||
setSidebarShrink();
|
||||
// Show the back link on dashboard topbar.
|
||||
setDashboardBackLink(true);
|
||||
|
||||
return () => {
|
||||
// Reset the sidebar to the previous status.
|
||||
resetSidebarPreviousExpand();
|
||||
// Hide the back link on dashboard topbar.
|
||||
setDashboardBackLink(false);
|
||||
};
|
||||
}, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
|
||||
|
||||
// Fetches payment recevie details.
|
||||
const fetchPaymentReceive = useQuery(
|
||||
['payment-receive', paymentReceiveId],
|
||||
(key, _id) => requestFetchPaymentReceive(_id),
|
||||
{ enabled: paymentReceiveId },
|
||||
);
|
||||
|
||||
// Handle fetch accounts data.
|
||||
const fetchAccounts = useQuery('accounts-list', (key) =>
|
||||
requestFetchAccounts(),
|
||||
);
|
||||
|
||||
// Fetch payment made settings.
|
||||
const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
|
||||
|
||||
// Fetches customers list.
|
||||
const fetchCustomers = useQuery(['customers-list'], () =>
|
||||
requestFetchCustomers(),
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={
|
||||
fetchPaymentReceive.isFetching ||
|
||||
fetchAccounts.isFetching ||
|
||||
// fetchSettings.isFetching ||
|
||||
fetchCustomers.isFetching
|
||||
}
|
||||
name={'payment-receive-form'}
|
||||
>
|
||||
<PaymentReceiveForm paymentReceiveId={paymentReceiveId} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDashboardActions,
|
||||
withAccountsActions,
|
||||
withSettingsActions,
|
||||
withPaymentReceivesActions,
|
||||
withCustomersActions,
|
||||
)(PaymentReceiveFormPage);
|
||||
@@ -10,52 +10,51 @@ import {
|
||||
MenuItem,
|
||||
} from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import classNames from 'classnames';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
import { saveInvoke } from 'utils';
|
||||
import { Icon } from 'components';
|
||||
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
|
||||
|
||||
/**
|
||||
* Payment receive floating actions bar.
|
||||
*/
|
||||
export default function PaymentReceiveFormFloatingActions({
|
||||
isSubmitting,
|
||||
onSubmitClick,
|
||||
onCancelClick,
|
||||
onClearClick,
|
||||
onSubmitForm,
|
||||
paymentReceiveId,
|
||||
}) {
|
||||
export default function PaymentReceiveFormFloatingActions() {
|
||||
|
||||
// Payment receive form context.
|
||||
const { setSubmitPayload, isNewMode } = usePaymentReceiveFormContext();
|
||||
|
||||
// Formik form context.
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
// History context.
|
||||
const history = useHistory();
|
||||
|
||||
// Handle submit button click.
|
||||
const handleSubmitBtnClick = (event) => {
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: true,
|
||||
});
|
||||
setSubmitPayload({ redirect: true, });
|
||||
};
|
||||
|
||||
// Handle clear button click.
|
||||
const handleClearBtnClick = (event) => {
|
||||
onClearClick && onClearClick(event);
|
||||
|
||||
};
|
||||
|
||||
// Handle cancel button click.
|
||||
const handleCancelBtnClick = (event) => {
|
||||
onCancelClick && onCancelClick(event);
|
||||
saveInvoke(onCancelClick, event);
|
||||
history.goBack();
|
||||
};
|
||||
|
||||
// Handle submit & new button click.
|
||||
const handleSubmitAndNewClick = (event) => {
|
||||
onSubmitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
resetForm: true,
|
||||
});
|
||||
setSubmitPayload({ redirect: false, resetForm: true, });
|
||||
};
|
||||
|
||||
// Handle submit & continue editing button click.
|
||||
const handleSubmitContinueEditingBtnClick = (event) => {
|
||||
onSubmitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
publish: true,
|
||||
});
|
||||
setSubmitPayload({ redirect: false, publish: true });
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -67,7 +66,7 @@ export default function PaymentReceiveFormFloatingActions({
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
onClick={handleSubmitBtnClick}
|
||||
text={paymentReceiveId ? <T id={'edit'} /> : <T id={'save'} />}
|
||||
text={!isNewMode ? <T id={'edit'} /> : <T id={'save'} />}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
@@ -93,13 +92,15 @@ export default function PaymentReceiveFormFloatingActions({
|
||||
/>
|
||||
</Popover>
|
||||
</ButtonGroup>
|
||||
|
||||
{/* ----------- Clear & Reset----------- */}
|
||||
<Button
|
||||
className={'ml1'}
|
||||
disabled={isSubmitting}
|
||||
onClick={handleClearBtnClick}
|
||||
text={paymentReceiveId ? <T id={'reset'} /> : <T id={'clear'} />}
|
||||
text={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
|
||||
/>
|
||||
|
||||
{/* ----------- Cancel ----------- */}
|
||||
<Button
|
||||
className={'ml1'}
|
||||
@@ -108,4 +109,4 @@ export default function PaymentReceiveFormFloatingActions({
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Formik, Form } from 'formik';
|
||||
|
||||
import { useIntl } from 'react-intl';
|
||||
import { pick, sumBy, omit, isEmpty } from 'lodash';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import PaymentReceiveHeader from './PaymentReceiveFormHeader';
|
||||
// import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
|
||||
import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
|
||||
import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
|
||||
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import {
|
||||
EditPaymentReceiveFormSchema,
|
||||
CreatePaymentReceiveFormSchema,
|
||||
} from './PaymentReceiveForm.schema';
|
||||
import { AppToaster } from 'components';
|
||||
import { compose } from 'utils';
|
||||
|
||||
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
|
||||
import {
|
||||
defaultPaymentReceive,
|
||||
defaultPaymentReceiveEntry,
|
||||
transformToEditForm,
|
||||
} from './utils';
|
||||
|
||||
import 'style/pages/PaymentReceive/PageForm.scss';
|
||||
|
||||
/**
|
||||
* Payment Receive form.
|
||||
*/
|
||||
function PaymentReceiveForm({
|
||||
// #withSettings
|
||||
paymentReceiveNextNumber,
|
||||
paymentReceiveNumberPrefix,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
// Payment receive form context.
|
||||
const {
|
||||
isNewMode,
|
||||
paymentReceive,
|
||||
paymentReceiveId,
|
||||
submitPayload,
|
||||
editPaymentReceiveMutate,
|
||||
createPaymentReceiveMutate,
|
||||
} = usePaymentReceiveFormContext();
|
||||
|
||||
// Payment receive number.
|
||||
const paymentReceiveNumber = paymentReceiveNumberPrefix
|
||||
? `${paymentReceiveNumberPrefix}-${paymentReceiveNextNumber}`
|
||||
: paymentReceiveNextNumber;
|
||||
|
||||
// Form validation schema.
|
||||
const validationSchema = isNewMode
|
||||
? CreatePaymentReceiveFormSchema
|
||||
: EditPaymentReceiveFormSchema;
|
||||
|
||||
// Form initial values.
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
...(!isEmpty(paymentReceive)
|
||||
? {
|
||||
...transformToEditForm(paymentReceive, []),
|
||||
}
|
||||
: {
|
||||
...paymentReceive,
|
||||
payment_receive_no: paymentReceiveNumber,
|
||||
}),
|
||||
}),
|
||||
[paymentReceive, paymentReceiveNumber],
|
||||
);
|
||||
|
||||
// Handle form submit.
|
||||
const handleSubmitForm = (
|
||||
values,
|
||||
{ setSubmitting, resetForm, setFieldError },
|
||||
) => {
|
||||
setSubmitting(true);
|
||||
|
||||
// Filters entries that have no `invoice_id` and `payment_amount`.
|
||||
const entries = values.entries
|
||||
.filter((entry) => entry.invoice_id && entry.payment_amount)
|
||||
.map((entry) => ({
|
||||
...omit(entry, ['due_amount']),
|
||||
}));
|
||||
|
||||
// Calculates the total payment amount of entries.
|
||||
const totalPaymentAmount = sumBy(entries, 'payment_amount');
|
||||
|
||||
if (totalPaymentAmount <= 0) {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'you_cannot_make_payment_with_zero_total_amount',
|
||||
}),
|
||||
intent: Intent.DANGER,
|
||||
});
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
const form = { ...values, entries };
|
||||
|
||||
// Handle request response success.
|
||||
const onSaved = (response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: paymentReceiveId
|
||||
? 'the_payment_receive_transaction_has_been_edited'
|
||||
: 'the_payment_receive_transaction_has_been_created',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
|
||||
if (submitPayload.redirect) {
|
||||
history.push('/payment-receives');
|
||||
}
|
||||
if (submitPayload.resetForm) {
|
||||
resetForm();
|
||||
}
|
||||
};
|
||||
// Handle request response errors.
|
||||
const onError = (errors) => {
|
||||
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' }),
|
||||
);
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
if (paymentReceiveId) {
|
||||
editPaymentReceiveMutate([paymentReceiveId, form])
|
||||
.then(onSaved)
|
||||
.catch(onError);
|
||||
} else {
|
||||
createPaymentReceiveMutate(form).then(onSaved).catch(onError);
|
||||
}
|
||||
};
|
||||
|
||||
const transformDataTableToEntries = (dataTable) => {
|
||||
return dataTable.map((data) => ({
|
||||
...pick(data, Object.keys(defaultPaymentReceiveEntry)),
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
CLASSES.PAGE_FORM,
|
||||
CLASSES.PAGE_FORM_STRIP_STYLE,
|
||||
CLASSES.PAGE_FORM_PAYMENT_RECEIVE,
|
||||
)}
|
||||
>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmitForm}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
<Form>
|
||||
<PaymentReceiveHeader />
|
||||
<PaymentReceiveFormFooter />
|
||||
<PaymentReceiveFloatingActions />
|
||||
</Form>
|
||||
</Formik>
|
||||
|
||||
{/* <form onSubmit={handleSubmit}> */}
|
||||
{/* <PaymentReceiveHeader
|
||||
errors={errors}
|
||||
touched={touched}
|
||||
setFieldValue={setFieldValue}
|
||||
getFieldProps={getFieldProps}
|
||||
values={values}
|
||||
paymentReceiveId={paymentReceiveId}
|
||||
customerId={values.customer_id}
|
||||
onFullAmountChanged={handleFullAmountChange}
|
||||
receivableFullAmount={receivableFullAmount}
|
||||
amountReceived={fullAmountReceived}
|
||||
onPaymentReceiveNumberChanged={handlePaymentReceiveNumberChanged}
|
||||
/>
|
||||
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
|
||||
<PaymentReceiveItemsTable
|
||||
paymentReceiveId={paymentReceiveId}
|
||||
customerId={values.customer_id}
|
||||
fullAmount={fullAmount}
|
||||
onUpdateData={handleUpdataData}
|
||||
paymentReceiveEntries={localPaymentEntries}
|
||||
errors={errors?.entries}
|
||||
onClickClearAllLines={handleClearAllLines}
|
||||
onFetchEntriesSuccess={handleFetchEntriesSuccess}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<PaymentReceiveFloatingActions
|
||||
isSubmitting={isSubmitting}
|
||||
paymentReceiveId={paymentReceiveId}
|
||||
onClearClick={handleClearBtnClick}
|
||||
onSubmitClick={handleSubmitClick}
|
||||
onCancelClick={handleCancelClick}
|
||||
onSubmitForm={submitForm}
|
||||
/> */}
|
||||
{/* </form> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withSettings(({ paymentReceiveSettings }) => ({
|
||||
paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
|
||||
paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
|
||||
})),
|
||||
)(PaymentReceiveForm);
|
||||
@@ -2,31 +2,31 @@ import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { FormGroup, TextArea } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { FastField } from 'formik';
|
||||
import { Row, Col } from 'components';
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
/**
|
||||
* Payment receive form footer.
|
||||
*/
|
||||
export default function PaymentReceiveFormFooter({
|
||||
getFieldProps,
|
||||
}) {
|
||||
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>
|
||||
<FastField name={'statement'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'statement'} />}
|
||||
className={'form-group--statement'}
|
||||
>
|
||||
<TextArea growVertically={true} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { sumBy } from 'lodash';
|
||||
import { useFormikContext } from 'formik';
|
||||
import classNames from 'classnames';
|
||||
import { Money } from 'components';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Payment receive form header.
|
||||
*/
|
||||
function PaymentReceiveFormHeader({
|
||||
// #withSettings
|
||||
baseCurrency,
|
||||
}) {
|
||||
// Formik form context.
|
||||
const { values } = useFormikContext();
|
||||
|
||||
// Calculates the total receivable amount from due amount.
|
||||
const receivableFullAmount = useMemo(
|
||||
() => sumBy(values.entries, 'due_amount'),
|
||||
[values.entries],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
|
||||
<PaymentReceiveHeaderFields />
|
||||
|
||||
<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={receivableFullAmount} currency={baseCurrency} />
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
baseCurrency: organizationSettings?.baseCurrency,
|
||||
})),
|
||||
)(PaymentReceiveFormHeader);
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import { PaymentReceiveFormProvider } from './PaymentReceiveFormProvider';
|
||||
import PaymentReceiveForm from './PaymentReceiveForm';
|
||||
|
||||
/**
|
||||
* Payment receive form page.
|
||||
*/
|
||||
export default function PaymentReceiveFormPage() {
|
||||
const { id: paymentReceiveId } = useParams();
|
||||
|
||||
return (
|
||||
<PaymentReceiveFormProvider paymentReceiveId={paymentReceiveId}>
|
||||
<PaymentReceiveForm paymentReceiveId={paymentReceiveId} />
|
||||
</PaymentReceiveFormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import React, { createContext, useContext } from 'react';
|
||||
import { DashboardInsider } from 'components';
|
||||
import {
|
||||
useSettings,
|
||||
usePaymentReceive,
|
||||
useAccounts,
|
||||
useCustomers,
|
||||
useCreatePaymentReceive,
|
||||
useEditPaymentReceive
|
||||
} from 'hooks/query';
|
||||
|
||||
// Payment receive form context.
|
||||
const PaymentReceiveFormContext = createContext();
|
||||
|
||||
/**
|
||||
* Payment receive form provider.
|
||||
*/
|
||||
function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
|
||||
// Fetches payment recevie details.
|
||||
const {
|
||||
data: paymentReceive,
|
||||
isLoading: isPaymentLoading,
|
||||
isFetching: isPaymentFetching,
|
||||
} = usePaymentReceive(paymentReceiveId, {
|
||||
enabled: !!paymentReceiveId,
|
||||
});
|
||||
|
||||
// Handle fetch accounts data.
|
||||
const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
|
||||
|
||||
// Fetch payment made settings.
|
||||
const fetchSettings = useSettings();
|
||||
|
||||
// Fetches customers list.
|
||||
const {
|
||||
data: { customers },
|
||||
isFetching: isCustomersFetching,
|
||||
} = useCustomers();
|
||||
|
||||
const [submitPayload, setSubmitPayload] = React.useState({});
|
||||
const isNewMode = !paymentReceiveId;
|
||||
|
||||
// Create and edit payment receive mutations.
|
||||
const { mutateAsync: editPaymentReceiveMutate } = useEditPaymentReceive();
|
||||
const { mutateAsync: createPaymentReceiveMutate } = useCreatePaymentReceive();
|
||||
|
||||
// Provider payload.
|
||||
const provider = {
|
||||
paymentReceive,
|
||||
accounts,
|
||||
customers,
|
||||
|
||||
isPaymentLoading,
|
||||
isPaymentFetching,
|
||||
isAccountsFetching,
|
||||
isCustomersFetching,
|
||||
|
||||
submitPayload,
|
||||
setSubmitPayload,
|
||||
isNewMode,
|
||||
|
||||
editPaymentReceiveMutate,
|
||||
createPaymentReceiveMutate
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={
|
||||
isPaymentLoading ||
|
||||
isAccountsFetching ||
|
||||
isCustomersFetching
|
||||
}
|
||||
name={'payment-receive-form'}
|
||||
>
|
||||
<PaymentReceiveFormContext.Provider value={provider} {...props} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
const usePaymentReceiveFormContext = () =>
|
||||
useContext(PaymentReceiveFormContext);
|
||||
|
||||
export { PaymentReceiveFormProvider, usePaymentReceiveFormContext };
|
||||
@@ -0,0 +1,223 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Position,
|
||||
ControlGroup,
|
||||
} from '@blueprintjs/core';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { FastField, useFormikContext } from 'formik';
|
||||
import { sumBy } from 'lodash';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import classNames from 'classnames';
|
||||
import { momentFormatter, tansformDateValue, inputIntent } from 'utils';
|
||||
import {
|
||||
AccountsSelectList,
|
||||
ContactSelecetList,
|
||||
ErrorMessage,
|
||||
FieldRequiredHint,
|
||||
Icon,
|
||||
InputPrependButton,
|
||||
MoneyInputGroup,
|
||||
InputPrependText,
|
||||
Hint,
|
||||
Money,
|
||||
} from 'components';
|
||||
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
|
||||
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Payment receive header fields.
|
||||
*/
|
||||
function PaymentReceiveHeaderFields({ baseCurrency }) {
|
||||
// Payment receive form context.
|
||||
const { customers, accounts, isNewMode } = usePaymentReceiveFormContext();
|
||||
|
||||
// Formik form context.
|
||||
const { values } = useFormikContext();
|
||||
|
||||
const fullAmountReceived = useMemo(
|
||||
() => sumBy(values.entries, 'payment_amount'),
|
||||
[values.entries],
|
||||
);
|
||||
|
||||
const handleReceiveFullAmountClick = () => {};
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
|
||||
{/* ------------- Customer name ------------- */}
|
||||
<FastField name={'customer_id'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'customer_name'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--select-list', CLASSES.FILL)}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'customer_id'} />}
|
||||
>
|
||||
<ContactSelecetList
|
||||
contactsList={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(value) => {
|
||||
form.setFieldValue('customer_id', value);
|
||||
}}
|
||||
popoverFill={true}
|
||||
disabled={!isNewMode}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ------------- Payment date ------------- */}
|
||||
<FastField name={'payment_date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'payment_date'} />}
|
||||
inline={true}
|
||||
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('payment_date')}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
inputProps={{
|
||||
leftIcon: <Icon icon={'date-range'} />,
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ------------ Full amount ------------ */}
|
||||
<FastField name={'customer_name'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'full_amount'} />}
|
||||
inline={true}
|
||||
className={('form-group--full-amount', CLASSES.FILL)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
labelInfo={<Hint />}
|
||||
helperText={<ErrorMessage name="full_amount" />}
|
||||
>
|
||||
<ControlGroup>
|
||||
<InputPrependText text={baseCurrency} />
|
||||
<MoneyInputGroup
|
||||
inputGroupProps={{
|
||||
medium: true,
|
||||
...field,
|
||||
}}
|
||||
/>
|
||||
</ControlGroup>
|
||||
|
||||
<a
|
||||
onClick={handleReceiveFullAmountClick}
|
||||
href="#"
|
||||
className={'receive-full-amount'}
|
||||
>
|
||||
Receive full amount (
|
||||
<Money amount={fullAmountReceived} currency={baseCurrency} />)
|
||||
</a>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ------------ Payment receive no. ------------ */}
|
||||
<FastField name={'payment_receive_no'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'payment_receive_no'} />}
|
||||
inline={true}
|
||||
className={('form-group--payment_receive_no', CLASSES.FILL)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="payment_receive_no" />}
|
||||
>
|
||||
<ControlGroup fill={true}>
|
||||
<InputGroup
|
||||
intent={inputIntent({ error, touched })}
|
||||
minimal={true}
|
||||
{...field}
|
||||
/>
|
||||
<InputPrependButton
|
||||
buttonProps={{
|
||||
// onClick: handlePaymentReceiveNumberChange,
|
||||
icon: <Icon icon={'settings-18'} />,
|
||||
}}
|
||||
tooltip={true}
|
||||
tooltipProps={{
|
||||
content: 'Setting your auto-generated Payment Receive number',
|
||||
position: Position.BOTTOM_LEFT,
|
||||
}}
|
||||
/>
|
||||
</ControlGroup>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ------------ 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,
|
||||
)}
|
||||
inline={true}
|
||||
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>
|
||||
|
||||
{/* ------------ Reference No. ------------ */}
|
||||
<FastField name={'customer_name'}>
|
||||
{({ form, 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" />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={inputIntent({ error, touched })}
|
||||
minimal={true}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
baseCurrency: organizationSettings?.baseCurrency,
|
||||
})),
|
||||
withDialogActions,
|
||||
)(PaymentReceiveHeaderFields);
|
||||
@@ -0,0 +1,33 @@
|
||||
import moment from 'moment';
|
||||
import { transformToForm } from 'utils';
|
||||
|
||||
// Default payment receive entry.
|
||||
export const defaultPaymentReceiveEntry = {
|
||||
id: '',
|
||||
payment_amount: '',
|
||||
invoice_id: '',
|
||||
due_amount: '',
|
||||
};
|
||||
|
||||
// Form initial values.
|
||||
export const defaultPaymentReceive = {
|
||||
customer_id: '',
|
||||
deposit_account_id: '',
|
||||
payment_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
reference_no: '',
|
||||
payment_receive_no: '',
|
||||
description: '',
|
||||
full_amount: '',
|
||||
entries: [],
|
||||
};
|
||||
|
||||
export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => {
|
||||
return {
|
||||
...transformToForm(paymentReceive, defaultPaymentReceive),
|
||||
entries: [
|
||||
...paymentReceiveEntries.map((paymentReceiveEntry) => ({
|
||||
...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry),
|
||||
})),
|
||||
],
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user