mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-15 12:20:31 +00:00
chrone: sperate client and server to different repos.
This commit is contained in:
a.bouhuolia
@@ -0,0 +1,35 @@
|
||||
import * as Yup from 'yup';
|
||||
import intl from 'react-intl-universal';
|
||||
import { DATATYPES_LENGTH } from 'common/dataTypes';
|
||||
|
||||
const Schema = Yup.object().shape({
|
||||
customer_id: Yup.string()
|
||||
.label(intl.get('customer_name_'))
|
||||
.required(),
|
||||
payment_receive_no: Yup.string()
|
||||
.required()
|
||||
.nullable()
|
||||
.max(DATATYPES_LENGTH.STRING)
|
||||
.label(intl.get('payment_receive_no_')),
|
||||
payment_date: Yup.date()
|
||||
.required()
|
||||
.label(intl.get('payment_date_')),
|
||||
deposit_account_id: Yup.number()
|
||||
.required()
|
||||
.label(intl.get('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;
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import { Intent, Button, Classes } from '@blueprintjs/core';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
|
||||
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);
|
||||
@@ -0,0 +1,111 @@
|
||||
import React from 'react';
|
||||
import { Formik } from 'formik';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
import intl from 'react-intl-universal';
|
||||
import { pick, defaultTo, omit } from 'lodash';
|
||||
|
||||
import { AppToaster } from 'components';
|
||||
import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
|
||||
import { CreateQuickPaymentReceiveFormSchema } from './QuickPaymentReceive.schema';
|
||||
import QuickPaymentReceiveFormContent from './QuickPaymentReceiveFormContent';
|
||||
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import { defaultInitialValues, transformErrors } from './utils';
|
||||
import { compose, transactionNumber } from 'utils';
|
||||
|
||||
/**
|
||||
* Quick payment receive form.
|
||||
*/
|
||||
function QuickPaymentReceiveForm({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
|
||||
// #withSettings
|
||||
paymentReceiveAutoIncrement,
|
||||
paymentReceiveNumberPrefix,
|
||||
paymentReceiveNextNumber,
|
||||
preferredDepositAccount
|
||||
}) {
|
||||
|
||||
const {
|
||||
dialogName,
|
||||
invoice,
|
||||
createPaymentReceiveMutate,
|
||||
} = useQuickPaymentReceiveContext();
|
||||
|
||||
// Payment receive number.
|
||||
const nextPaymentNumber = transactionNumber(
|
||||
paymentReceiveNumberPrefix,
|
||||
paymentReceiveNextNumber,
|
||||
);
|
||||
|
||||
// Initial form values
|
||||
const initialValues = {
|
||||
...defaultInitialValues,
|
||||
...(paymentReceiveAutoIncrement && {
|
||||
payment_receive_no: nextPaymentNumber,
|
||||
}),
|
||||
deposit_account_id: defaultTo(preferredDepositAccount, ''),
|
||||
...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 = {
|
||||
...omit(values, ['payment_receive_no']),
|
||||
...(!paymentReceiveAutoIncrement && {
|
||||
payment_receive_no: values.payment_receive_no,
|
||||
}),
|
||||
customer_id: values.customer.id,
|
||||
entries,
|
||||
};
|
||||
|
||||
// Handle request response success.
|
||||
const onSaved = (response) => {
|
||||
AppToaster.show({
|
||||
message: intl.get('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,
|
||||
withSettings(({ paymentReceiveSettings }) => ({
|
||||
paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
|
||||
paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
|
||||
paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
|
||||
preferredDepositAccount: paymentReceiveSettings?.depositAccount,
|
||||
})),
|
||||
)(QuickPaymentReceiveForm);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
import React from 'react';
|
||||
import { FastField, ErrorMessage } from 'formik';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
import intl from 'react-intl-universal';
|
||||
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 {
|
||||
AccountsSuggestField,
|
||||
InputPrependText,
|
||||
MoneyInputGroup,
|
||||
Icon,
|
||||
} from 'components';
|
||||
import { ACCOUNT_TYPE } from 'common/accountTypes';
|
||||
import {
|
||||
inputIntent,
|
||||
momentFormatter,
|
||||
tansformDateValue,
|
||||
handleDateChange,
|
||||
compose
|
||||
} from 'utils';
|
||||
import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
|
||||
/**
|
||||
* Quick payment receive form fields.
|
||||
*/
|
||||
function QuickPaymentReceiveFormFields({
|
||||
paymentReceiveAutoIncrement
|
||||
}) {
|
||||
const { accounts } = useQuickPaymentReceiveContext();
|
||||
|
||||
// Intl context.
|
||||
|
||||
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}
|
||||
disabled={paymentReceiveAutoIncrement}
|
||||
/>
|
||||
</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'} />}
|
||||
>
|
||||
<AccountsSuggestField
|
||||
selectedAccountId={value}
|
||||
accounts={accounts}
|
||||
onAccountSelected={({ id }) =>
|
||||
form.setFieldValue('deposit_account_id', id)
|
||||
}
|
||||
inputProps={{
|
||||
placeholder: intl.get('select_account'),
|
||||
}}
|
||||
filterByTypes={[
|
||||
ACCOUNT_TYPE.CASH,
|
||||
ACCOUNT_TYPE.BANK,
|
||||
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withSettings(({ paymentReceiveSettings }) => ({
|
||||
paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
|
||||
})),
|
||||
)(QuickPaymentReceiveFormFields)
|
||||
@@ -0,0 +1,50 @@
|
||||
import React, { useContext, createContext } from 'react';
|
||||
import { pick } from 'lodash';
|
||||
import { DialogContent } from 'components';
|
||||
import { useAccounts, useInvoice, useSettingsPaymentReceives, 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();
|
||||
|
||||
// Fetch payment made settings.
|
||||
const { isLoading: isSettingsLoading } = useSettingsPaymentReceives();
|
||||
|
||||
// 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,
|
||||
isSettingsLoading,
|
||||
dialogName,
|
||||
|
||||
createPaymentReceiveMutate,
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogContent isLoading={isAccountsLoading || isInvoiceLoading}>
|
||||
<QuickPaymentReceiveContext.Provider value={provider} {...props} />
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
const useQuickPaymentReceiveContext = () =>
|
||||
useContext(QuickPaymentReceiveContext);
|
||||
|
||||
export { QuickPaymentReceiveFormProvider, useQuickPaymentReceiveContext };
|
||||
@@ -0,0 +1,38 @@
|
||||
import React, { lazy } from 'react';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
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);
|
||||
@@ -0,0 +1,35 @@
|
||||
import moment from 'moment';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
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',
|
||||
intl.get('payment_number_is_not_unique'),
|
||||
);
|
||||
}
|
||||
if (getError('PAYMENT_RECEIVE_NO_REQUIRED')) {
|
||||
setFieldError(
|
||||
'payment_receive_no',
|
||||
intl.get('payment_receive_number_required'),
|
||||
);
|
||||
}
|
||||
if (getError('INVALID_PAYMENT_AMOUNT')) {
|
||||
setFieldError(
|
||||
'payment_amount',
|
||||
intl.get('the_payment_amount_bigger_than_invoice_due_amount'),
|
||||
);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user