re-structure to monorepo.

This commit is contained in:
a.bouhuolia
2023-02-03 01:02:31 +02:00
parent 8242ec64ba
commit 7a0a13f9d5
10400 changed files with 46966 additions and 17223 deletions

View File

@@ -0,0 +1,37 @@
// @ts-nocheck
import * as Yup from 'yup';
import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from '@/constants/dataTypes';
const Schema = Yup.object().shape({
vendor_id: Yup.string()
.label(intl.get('vendor_name_'))
.required(),
payment_date: Yup.date()
.required()
.label(intl.get('payment_date_')),
payment_number: Yup.string()
.nullable()
.max(DATATYPES_LENGTH.STRING)
.label(intl.get('payment_no_')),
payment_account_id: Yup.number()
.required()
.label(intl.get('payment_account_')),
reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
// statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
branch_id: Yup.string(),
exchange_rate: Yup.number(),
entries: Yup.array().of(
Yup.object().shape({
payment_amount: Yup.number().nullable(),
bill_id: Yup.number()
.nullable()
.when(['payment_amount'], {
is: (payment_amount) => payment_amount,
then: Yup.number().required(),
}),
}),
),
});
export const CreateQuickPaymentMadeFormSchema = Schema;

View File

@@ -0,0 +1,44 @@
// @ts-nocheck
import React from 'react';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from '@/components';
import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose } from '@/utils';
function QuickPaymentMadeFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
const { dialogName } = useQuickPaymentMadeContext();
// 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}
loading={isSubmitting}
style={{ minWidth: '75px' }}
type="submit"
>
{<T id={'make_payment'} />}
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(QuickPaymentMadeFloatingActions);

View File

@@ -0,0 +1,84 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import { Formik } from 'formik';
import { Intent } from '@blueprintjs/core';
import { pick } from 'lodash';
import { AppToaster } from '@/components';
import { CreateQuickPaymentMadeFormSchema } from './QuickPaymentMade.schema';
import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
import QuickPaymentMadeFormContent from './QuickPaymentMadeFormContent';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { defaultPaymentMade, transformErrors } from './utils';
import { compose } from '@/utils';
/**
* Quick payment made form.
*/
function QuickPaymentMadeForm({
// #withDialogActions
closeDialog,
}) {
const {
bill,
dialogName,
createPaymentMadeMutate,
} = useQuickPaymentMadeContext();
// Initial form values
const initialValues = {
...defaultPaymentMade,
...bill,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
const entries = [values]
.filter((entry) => entry.id && entry.payment_amount)
.map((entry) => ({
bill_id: entry.id,
...pick(entry, ['payment_amount']),
}));
const form = {
...values,
vendor_id: values?.vendor?.id,
entries,
};
// Handle request response success.
const onSuccess = () => {
AppToaster.show({
message: intl.get('the_payment_made_has_been_created_successfully'),
intent: Intent.SUCCESS,
});
closeDialog(dialogName);
};
// Handle request response errors.
const onError = ({
response: {
data: { errors },
},
}) => {
if (errors) {
transformErrors(errors, { setFieldError });
}
setSubmitting(false);
};
createPaymentMadeMutate(form).then(onSuccess).catch(onError);
};
return (
<Formik
validationSchema={CreateQuickPaymentMadeFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={QuickPaymentMadeFormContent}
/>
);
}
export default compose(withDialogActions)(QuickPaymentMadeForm);

View File

@@ -0,0 +1,16 @@
// @ts-nocheck
import React from 'react';
import { Form } from 'formik';
import QuickPaymentMadeFormFields from './QuickPaymentMadeFormFields';
import QuickPaymentMadeFloatingActions from './QuickPaymentMadeFloatingActions';
/**
* Quick payment made form content.
*/
export default function QuickPaymentMadeFormContent() {
return (
<Form>
<QuickPaymentMadeFormFields />
<QuickPaymentMadeFloatingActions />
</Form>
);
}

View File

@@ -0,0 +1,22 @@
// @ts-nocheck
import React from 'react';
import '@/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss';
import { QuickPaymentMadeFormProvider } from './QuickPaymentMadeFormProvider';
import QuickPaymentMadeForm from './QuickPaymentMadeForm';
/**
* Quick payment made form dialog content.
*/
export default function QuickPaymentMadeFormDialogContent({
// #ownProps
dialogName,
bill,
}) {
return (
<QuickPaymentMadeFormProvider billId={bill} dialogName={dialogName}>
<QuickPaymentMadeForm />
</QuickPaymentMadeFormProvider>
);
}

View File

@@ -0,0 +1,267 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import styled from 'styled-components';
import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { isEqual } from 'lodash';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { useAutofocus } from '@/hooks';
import classNames from 'classnames';
import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
import { DateInput } from '@blueprintjs/datetime';
import {
FieldRequiredHint,
Col,
Row,
FormattedMessage as T,
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
Icon,
If,
FeatureCan,
ExchangeRateMutedField,
BranchSelect,
BranchSelectButton,
} from '@/components';
import {
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from '@/utils';
import { useSetPrimaryBranchToForm } from './utils';
import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
import { compose } from '@/utils';
/**
* Quick payment made form fields.
*/
function QuickPaymentMadeFormFields({
// #withCurrentOrganization
organization: { base_currency },
}) {
const { accounts, branches, baseCurrency } = useQuickPaymentMadeContext();
// Intl context.
const { values } = useFormikContext();
const paymentMadeFieldRef = useAutofocus();
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
return (
<div className={Classes.DIALOG_BODY}>
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</Col>
</Row>
<BranchRowDivider />
</FeatureCan>
<Row>
<Col xs={5}>
{/* ------------- Vendor name ------------- */}
<FastField name={'vendor_id'}>
{({ from, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'vendor_name'} />}
className={classNames('form-group--select-list', CLASSES.FILL)}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'vendor'} />}
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
disabled={true}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={5}>
{/* ------------ Payment number. ------------ */}
<FastField name={'payment_number'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'payment_no'} />}
className={('form-group--payment_number', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="payment_number" />}
>
<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) => (paymentMadeFieldRef.current = ref)}
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
<If condition={!isEqual(base_currency, values.currency_code)}>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={base_currency}
toCurrency={values.currency_code}
formGroupProps={{ label: '', inline: false }}
date={values.payment_date}
exchangeRate={values.exchange_rate}
/>
</If>
<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}>
{/* ------------ payment account ------------ */}
<FastField name={'payment_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'payment_account'} />}
className={classNames(
'form-group--payment_account_id',
'form-group--select-list',
CLASSES.FILL,
)}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'payment_account_id'} />}
>
<AccountsSuggestField
accounts={accounts}
onAccountSelected={({ id }) =>
form.setFieldValue('payment_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'}>
{({ 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(withCurrentOrganization())(QuickPaymentMadeFormFields);
export const BranchRowDivider = styled.div`
height: 1px;
background: #ebf1f6;
margin-bottom: 15px;
`;

View File

@@ -0,0 +1,69 @@
// @ts-nocheck
import React from 'react';
import { DialogContent } from '@/components';
import {
useBill,
useAccounts,
useBranches,
useCreatePaymentMade,
} from '@/hooks/query';
import { Features } from '@/constants';
import { useFeatureCan } from '@/hooks/state';
import { pick } from 'lodash';
const QuickPaymentMadeContext = React.createContext();
/**
* Quick payment made dialog provider.
*/
function QuickPaymentMadeFormProvider({ query, billId, dialogName, ...props }) {
// Features guard.
const { featureCan } = useFeatureCan();
const isBranchFeatureCan = featureCan(Features.Branches);
// Handle fetch bill details.
const { isLoading: isBillLoading, data: bill } = useBill(billId, {
enabled: !!billId,
});
// Handle fetch accounts data.
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
// Create payment made mutations.
const { mutateAsync: createPaymentMadeMutate } = useCreatePaymentMade();
// Fetches the branches list.
const {
data: branches,
isLoading: isBranchesLoading,
isSuccess: isBranchesSuccess,
} = useBranches(query, { enabled: isBranchFeatureCan });
// State provider.
const provider = {
bill: {
...pick(bill, ['id', 'due_amount', 'vendor', 'currency_code']),
vendor_id: bill?.vendor?.display_name,
payment_amount: bill?.due_amount,
},
accounts,
branches,
dialogName,
createPaymentMadeMutate,
isBranchesSuccess,
};
return (
<DialogContent
isLoading={isAccountsLoading || isBillLoading || isBranchesLoading}
>
<QuickPaymentMadeContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useQuickPaymentMadeContext = () =>
React.useContext(QuickPaymentMadeContext);
export { QuickPaymentMadeFormProvider, useQuickPaymentMadeContext };

View File

@@ -0,0 +1,38 @@
// @ts-nocheck
import React, { lazy } from 'react';
import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { compose } from '@/utils';
const QuickPaymentMadeFormDialogContent = lazy(
() => import('./QuickPaymentMadeFormDialogContent'),
);
/**
* Quick payment made form dialog.
*/
function QuickPaymentMadeFormDialog({
dialogName,
payload = { billId: null },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'quick_made_payment'} />}
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
className={'dialog--quick-payment-receive'}
>
<DialogSuspense>
<QuickPaymentMadeFormDialogContent
bill={payload.billId}
dialogName={dialogName}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(QuickPaymentMadeFormDialog);

View File

@@ -0,0 +1,59 @@
// @ts-nocheck
import React from 'react';
import moment from 'moment';
import intl from 'react-intl-universal';
import { first } from 'lodash';
import { Intent } from '@blueprintjs/core';
import { AppToaster } from '@/components';
import { useFormikContext } from 'formik';
import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
// Default initial values of payment made.
export const defaultPaymentMade = {
vendor_id: '',
payment_account_id: '',
payment_date: moment(new Date()).format('YYYY-MM-DD'),
reference: '',
payment_number: '',
// statement: '',
exchange_rate: 1,
branch_id: '',
entries: [{ bill_id: '', payment_amount: '' }],
};
export const transformErrors = (errors, { setFieldError }) => {
const getError = (errorType) => errors.find((e) => e.type === errorType);
if (getError('PAYMENT.NUMBER.NOT.UNIQUE')) {
setFieldError('payment_number', intl.get('payment_number_is_not_unique'));
}
if (getError('INVALID_BILL_PAYMENT_AMOUNT')) {
setFieldError(
'payment_amount',
intl.get('the_payment_amount_bigger_than_invoice_due_amount'),
);
}
if (getError('WITHDRAWAL_ACCOUNT_CURRENCY_INVALID')) {
AppToaster.show({
message: intl.get(
'payment_made.error.withdrawal_account_currency_invalid',
),
intent: Intent.DANGER,
});
}
};
export const useSetPrimaryBranchToForm = () => {
const { setFieldValue } = useFormikContext();
const { branches, isBranchesSuccess } = useQuickPaymentMadeContext();
React.useEffect(() => {
if (isBranchesSuccess) {
const primaryBranch = branches.find((b) => b.primary) || first(branches);
if (primaryBranch) {
setFieldValue('branch_id', primaryBranch.id);
}
}
}, [isBranchesSuccess, setFieldValue, branches]);
};