mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 21:00:31 +00:00
re-structure to monorepo.
This commit is contained in:
a.bouhuolia
@@ -0,0 +1,22 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
|
||||
import '@/style/pages/RefundVendorCredit/RefundVendorCredit.scss';
|
||||
|
||||
import { RefundVendorCreditFormProvider } from './RefundVendorCreditFormProvider';
|
||||
import RefundVendorCreditForm from './RefundVendorCreditForm';
|
||||
|
||||
export default function RefundVendorCreditDialogContent({
|
||||
// #ownProps
|
||||
dialogName,
|
||||
vendorCreditId,
|
||||
}) {
|
||||
return (
|
||||
<RefundVendorCreditFormProvider
|
||||
vendorCreditId={vendorCreditId}
|
||||
dialogName={dialogName}
|
||||
>
|
||||
<RefundVendorCreditForm />
|
||||
</RefundVendorCreditFormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import { Intent, Button, Classes } from '@blueprintjs/core';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { FormattedMessage as T } from '@/components';
|
||||
|
||||
import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
|
||||
import withDialogActions from '@/containers/Dialog/withDialogActions';
|
||||
import { compose } from '@/utils';
|
||||
|
||||
/**
|
||||
* Refund vendor flaoting actions.
|
||||
*/
|
||||
function RefundVendorCreditFloatingActions({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
// Formik context.
|
||||
const { isSubmitting } = useFormikContext();
|
||||
// refund vendor credit dialog context.
|
||||
const { dialogName } = useRefundVendorCreditContext();
|
||||
|
||||
// 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: '120px' }}
|
||||
type="submit"
|
||||
>
|
||||
<T id={'refund'} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogActions)(RefundVendorCreditFloatingActions);
|
||||
@@ -0,0 +1,16 @@
|
||||
// @ts-nocheck
|
||||
import * as Yup from 'yup';
|
||||
import intl from 'react-intl-universal';
|
||||
import { DATATYPES_LENGTH } from '@/constants/dataTypes';
|
||||
|
||||
const Schema = Yup.object().shape({
|
||||
date: Yup.date().required().label(intl.get('date')),
|
||||
amount: Yup.number().required(),
|
||||
reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
|
||||
deposit_account_id: Yup.number()
|
||||
.required()
|
||||
.label(intl.get('deposit_account_')),
|
||||
description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
|
||||
exchange_rate: Yup.number(),
|
||||
});
|
||||
export const CreateVendorRefundCreditFormSchema = Schema;
|
||||
@@ -0,0 +1,80 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import moment from 'moment';
|
||||
import { Formik } from 'formik';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
import { omit } from 'lodash';
|
||||
|
||||
import { AppToaster } from '@/components';
|
||||
import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
|
||||
import { CreateVendorRefundCreditFormSchema } from './RefundVendorCreditForm.schema';
|
||||
import RefundVendorCreditFormContent from './RefundVendorCreditFormContent';
|
||||
|
||||
import withDialogActions from '@/containers/Dialog/withDialogActions';
|
||||
import { compose } from '@/utils';
|
||||
|
||||
const defaultInitialValues = {
|
||||
deposit_account_id: '',
|
||||
date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
reference_no: '',
|
||||
description: '',
|
||||
amount: '',
|
||||
exchange_rate: 1,
|
||||
};
|
||||
|
||||
/**
|
||||
* Refund Vendor credit form.
|
||||
*/
|
||||
function RefundVendorCreditForm({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
const { vendorCredit, dialogName, createRefundVendorCreditMutate } =
|
||||
useRefundVendorCreditContext();
|
||||
|
||||
// Initial form values
|
||||
const initialValues = {
|
||||
...defaultInitialValues,
|
||||
...vendorCredit,
|
||||
};
|
||||
|
||||
// Handles the form submit.
|
||||
const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
|
||||
const form = {
|
||||
...omit(values, ['currency_code', 'credits_remaining']),
|
||||
};
|
||||
|
||||
// Handle request response success.
|
||||
const onSaved = (response) => {
|
||||
AppToaster.show({
|
||||
message: intl.get('refund_vendor_credit.dialog.success_message'),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
closeDialog(dialogName);
|
||||
};
|
||||
// Handle request response errors.
|
||||
const onError = ({
|
||||
response: {
|
||||
data: { errors },
|
||||
},
|
||||
}) => {
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
createRefundVendorCreditMutate([vendorCredit.id, form])
|
||||
.then(onSaved)
|
||||
.catch(onError);
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
validationSchema={CreateVendorRefundCreditFormSchema}
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
component={RefundVendorCreditFormContent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogActions)(RefundVendorCreditForm);
|
||||
@@ -0,0 +1,14 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import { Form } from 'formik';
|
||||
import RefundVendorCreditFormFields from './RefundVendorCreditFormFields';
|
||||
import RefundVendorCreditFloatingActions from './RefundVendorCreditFloatingActions';
|
||||
|
||||
export default function RefundVendorCreditFormContent() {
|
||||
return (
|
||||
<Form>
|
||||
<RefundVendorCreditFormFields />
|
||||
<RefundVendorCreditFloatingActions />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import styled from 'styled-components';
|
||||
import { FastField, ErrorMessage, useFormikContext } from 'formik';
|
||||
import {
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
TextArea,
|
||||
Position,
|
||||
ControlGroup,
|
||||
} from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import { CLASSES } from '@/constants/classes';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { isEqual } from 'lodash';
|
||||
import {
|
||||
Icon,
|
||||
Col,
|
||||
Row,
|
||||
If,
|
||||
FieldRequiredHint,
|
||||
AccountsSuggestField,
|
||||
InputPrependText,
|
||||
MoneyInputGroup,
|
||||
FormattedMessage as T,
|
||||
ExchangeRateMutedField,
|
||||
BranchSelect,
|
||||
BranchSelectButton,
|
||||
FeatureCan,
|
||||
} from '@/components';
|
||||
import {
|
||||
inputIntent,
|
||||
momentFormatter,
|
||||
tansformDateValue,
|
||||
handleDateChange,
|
||||
compose,
|
||||
} from '@/utils';
|
||||
import { useAutofocus } from '@/hooks';
|
||||
import { Features, ACCOUNT_TYPE } from '@/constants';
|
||||
import { useSetPrimaryBranchToForm } from './utils';
|
||||
import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
|
||||
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
|
||||
|
||||
/**
|
||||
* Refund Vendor credit form fields.
|
||||
*/
|
||||
function RefundVendorCreditFormFields({
|
||||
// #withCurrentOrganization
|
||||
organization: { base_currency },
|
||||
}) {
|
||||
const { accounts, branches } = useRefundVendorCreditContext();
|
||||
const { values } = useFormikContext();
|
||||
|
||||
const amountFieldRef = 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}>
|
||||
{/* ------------- Refund date ------------- */}
|
||||
<FastField name={'refund_date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'refund_vendor_credit.dialog.refund_date'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames('form-group--select-list', CLASSES.FILL)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="refund_date" />}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(value)}
|
||||
onChange={handleDateChange((formattedDate) => {
|
||||
form.setFieldValue('refund_date', formattedDate);
|
||||
})}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
inputProps={{
|
||||
leftIcon: <Icon icon={'date-range'} />,
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
|
||||
<Col xs={5}>
|
||||
{/* ------------ Form account ------------ */}
|
||||
<FastField name={'deposit_account_id'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={
|
||||
<T id={'refund_vendor_credit.dialog.deposit_to_account'} />
|
||||
}
|
||||
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.BANK,
|
||||
ACCOUNT_TYPE.CASH,
|
||||
ACCOUNT_TYPE.FIXED_ASSET,
|
||||
]}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* ------------- Amount ------------- */}
|
||||
<FastField name={'amount'}>
|
||||
{({
|
||||
form: { values, setFieldValue },
|
||||
field: { value },
|
||||
meta: { error, touched },
|
||||
}) => (
|
||||
<FormGroup
|
||||
label={<T id={'refund_vendor_credit.dialog.amount'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames('form-group--amount', CLASSES.FILL)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="amount" />}
|
||||
>
|
||||
<ControlGroup>
|
||||
<InputPrependText text={values.currency_code} />
|
||||
<MoneyInputGroup
|
||||
value={value}
|
||||
minimal={true}
|
||||
onChange={(amount) => {
|
||||
setFieldValue('amount', amount);
|
||||
}}
|
||||
intent={inputIntent({ error, touched })}
|
||||
inputRef={(ref) => (amountFieldRef.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.date}
|
||||
exchangeRate={values.exchange_rate}
|
||||
/>
|
||||
</If>
|
||||
|
||||
{/* ------------ Reference No. ------------ */}
|
||||
<FastField name={'reference_no'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'reference_no'} />}
|
||||
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={'description'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'refund_vendor_credit.dialog.description'} />}
|
||||
className={'form-group--description'}
|
||||
>
|
||||
<TextArea growVertically={true} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withCurrentOrganization())(RefundVendorCreditFormFields);
|
||||
|
||||
export const BranchRowDivider = styled.div`
|
||||
height: 1px;
|
||||
background: #ebf1f6;
|
||||
margin-bottom: 13px;
|
||||
`;
|
||||
@@ -0,0 +1,73 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import { DialogContent } from '@/components';
|
||||
import { pick } from 'lodash';
|
||||
import { Features } from '@/constants';
|
||||
import { useFeatureCan } from '@/hooks/state';
|
||||
import {
|
||||
useAccounts,
|
||||
useVendorCredit,
|
||||
useBranches,
|
||||
useCreateRefundVendorCredit,
|
||||
} from '@/hooks/query';
|
||||
|
||||
const RefundVendorCreditContext = React.createContext();
|
||||
|
||||
function RefundVendorCreditFormProvider({
|
||||
vendorCreditId,
|
||||
dialogName,
|
||||
query,
|
||||
...props
|
||||
}) {
|
||||
// Features guard.
|
||||
const { featureCan } = useFeatureCan();
|
||||
const isBranchFeatureCan = featureCan(Features.Branches);
|
||||
|
||||
// Handle fetch accounts data.
|
||||
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
|
||||
|
||||
// Fetches the branches list.
|
||||
const {
|
||||
data: branches,
|
||||
isLoading: isBranchesLoading,
|
||||
isSuccess: isBranchesSuccess,
|
||||
} = useBranches(query, { enabled: isBranchFeatureCan });
|
||||
|
||||
// Handle fetch vendor credit details.
|
||||
const { data: vendorCredit, isLoading: isVendorCreditLoading } =
|
||||
useVendorCredit(vendorCreditId, {
|
||||
enabled: !!vendorCreditId,
|
||||
});
|
||||
|
||||
// Create refund vendor credit mutations.
|
||||
const { mutateAsync: createRefundVendorCreditMutate } =
|
||||
useCreateRefundVendorCredit();
|
||||
|
||||
// State provider.
|
||||
const provider = {
|
||||
vendorCredit: {
|
||||
...pick(vendorCredit, ['id', 'credits_remaining', 'currency_code']),
|
||||
amount: vendorCredit.credits_remaining,
|
||||
},
|
||||
accounts,
|
||||
branches,
|
||||
dialogName,
|
||||
isBranchesSuccess,
|
||||
createRefundVendorCreditMutate,
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogContent
|
||||
isLoading={
|
||||
isAccountsLoading || isVendorCreditLoading || isBranchesLoading
|
||||
}
|
||||
>
|
||||
<RefundVendorCreditContext.Provider value={provider} {...props} />
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
const useRefundVendorCreditContext = () =>
|
||||
React.useContext(RefundVendorCreditContext);
|
||||
|
||||
export { RefundVendorCreditFormProvider, useRefundVendorCreditContext };
|
||||
@@ -0,0 +1,39 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
|
||||
|
||||
import withDialogRedux from '@/components/DialogReduxConnect';
|
||||
import { compose } from '@/utils';
|
||||
|
||||
const RefundVendorCreditDialogContent = React.lazy(() =>
|
||||
import('./RefundVendorCreditDialogContent'),
|
||||
);
|
||||
|
||||
/**
|
||||
* Refund vendor credit dialog.
|
||||
*/
|
||||
function RefundVendorCreditDialog({
|
||||
dialogName,
|
||||
payload: { vendorCreditId },
|
||||
isOpen,
|
||||
}) {
|
||||
return (
|
||||
<Dialog
|
||||
name={dialogName}
|
||||
title={<T id={'refund_vendor_credit.dialog.label'} />}
|
||||
isOpen={isOpen}
|
||||
canEscapeJeyClose={true}
|
||||
autoFocus={true}
|
||||
className={'dialog--refund-vendor-credit'}
|
||||
>
|
||||
<DialogSuspense>
|
||||
<RefundVendorCreditDialogContent
|
||||
dialogName={dialogName}
|
||||
vendorCreditId={vendorCreditId}
|
||||
/>
|
||||
</DialogSuspense>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogRedux())(RefundVendorCreditDialog);
|
||||
@@ -0,0 +1,21 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { first } from 'lodash';
|
||||
|
||||
import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
|
||||
|
||||
export const useSetPrimaryBranchToForm = () => {
|
||||
const { setFieldValue } = useFormikContext();
|
||||
const { branches, isBranchesSuccess } = useRefundVendorCreditContext();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isBranchesSuccess) {
|
||||
const primaryBranch = branches.find((b) => b.primary) || first(branches);
|
||||
|
||||
if (primaryBranch) {
|
||||
setFieldValue('branch_id', primaryBranch.id);
|
||||
}
|
||||
}
|
||||
}, [isBranchesSuccess, setFieldValue, branches]);
|
||||
};
|
||||
Reference in New Issue
Block a user