QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-21 07:10:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix : setupSubScription & BillingForm & setupOrganizationForm

Browse Source
This commit is contained in:
elforjani3
2020-10-12 17:40:39 +02:00
parent ecc814ab61
commit 5b95ea4047
8 changed files with 101 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
client/src/containers/Preferences/General/General.js
View File

@@ -40,7 +40,6 @@ function GeneralPreferences({
}) { }) {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const [selectedItems, setSelectedItems] = useState({}); const [selectedItems, setSelectedItems] = useState({});
const [timeZone, setTimeZone] = useState('');
const fetchHook = useQuery( const fetchHook = useQuery(
['settings'], ['settings'],
@@ -65,67 +64,89 @@ function GeneralPreferences({
{ id: 1, name: 'Libyan Dinar ', value: 'LYD' }, { id: 1, name: 'Libyan Dinar ', value: 'LYD' },
]; ];
// @todo @mohamed - Translate the months.
// eg. > `${formatMessage({ id: 'january' })} - ${formatMessage({ id: 'december' })}`
const fiscalYear = [ const fiscalYear = [
{ {
id: 0, id: 0,
name: `${formatMessage({ id: 'january' })} - ${formatMessage({ id: 'december' })}`, name: `${formatMessage({ id: 'january' })} - ${formatMessage({
id: 'december',
})}`,
value: 'january', value: 'january',
}, },
{ {
id: 1, id: 1,
name: `${formatMessage({ id: 'february' })} - ${formatMessage({ id: 'january' })}`, name: `${formatMessage({ id: 'february' })} - ${formatMessage({
id: 'january',
})}`,
value: 'february', value: 'february',
}, },
{ {
id: 2, id: 2,
name: `${formatMessage({ id: 'march' })} - ${formatMessage({ id: 'february' })}`, name: `${formatMessage({ id: 'march' })} - ${formatMessage({
id: 'february',
})}`,
value: 'March', value: 'March',
}, },
{ {
id: 3, id: 3,
name: `${formatMessage({ id: 'april' })} - ${formatMessage({ id: 'march' })}`, name: `${formatMessage({ id: 'april' })} - ${formatMessage({
id: 'march',
})}`,
value: 'april', value: 'april',
}, },
{ {
id: 4, id: 4,
name: `${formatMessage({ id: 'may' })} - ${formatMessage({ id: 'april' })}`, name: `${formatMessage({ id: 'may' })} - ${formatMessage({
id: 'april',
})}`,
value: 'may', value: 'may',
}, },
{ {
id: 5, id: 5,
name: `${formatMessage({ id: 'june' })} - ${formatMessage({ id: 'may' })}`, name: `${formatMessage({ id: 'june' })} - ${formatMessage({
id: 'may',
})}`,
value: 'june', value: 'june',
}, },
{ {
id: 6, id: 6,
name: `${formatMessage({ id: 'july' })} - ${formatMessage({ id: 'june' })}`, name: `${formatMessage({ id: 'july' })} - ${formatMessage({
id: 'june',
})}`,
value: 'july', value: 'july',
}, },
{ {
id: 7, id: 7,
name: `${formatMessage({ id: 'august' })} - ${formatMessage({ id: 'july' })}`, name: `${formatMessage({ id: 'august' })} - ${formatMessage({
id: 'july',
})}`,
value: 'August', value: 'August',
}, },
{ {
id: 8, id: 8,
name: `${formatMessage({ id: 'september' })} - ${formatMessage({ id: 'august' })}`, name: `${formatMessage({ id: 'september' })} - ${formatMessage({
id: 'august',
})}`,
value: 'september', value: 'september',
}, },
{ {
id: 9, id: 9,
name: `${formatMessage({ id: 'october' })} - ${formatMessage({ id: 'november' })}`, name: `${formatMessage({ id: 'october' })} - ${formatMessage({
id: 'november',
})}`,
value: 'october', value: 'october',
}, },
{ {
id: 10, id: 10,
name: `${formatMessage({ id: 'november' })} - ${formatMessage({ id: 'october' })}`, name: `${formatMessage({ id: 'november' })} - ${formatMessage({
id: 'october',
})}`,
value: 'november', value: 'november',
}, },
{ {
id: 11, id: 11,
name: `${formatMessage({ id: 'december' })} - ${formatMessage({ id: 'november' })}`, name: `${formatMessage({ id: 'december' })} - ${formatMessage({
id: 'november',
})}`,
value: 'december', value: 'december',
}, },
]; ];
@@ -185,9 +206,9 @@ function GeneralPreferences({
language: Yup.string() language: Yup.string()
.required() .required()
.label(formatMessage({ id: 'language' })), .label(formatMessage({ id: 'language' })),
// time_zone: Yup.string() time_zone: Yup.string()
// .required() .required()
// .label(formatMessage({ id: 'time_zone' })), .label(formatMessage({ id: 'time_zone_' })),
date_format: Yup.string() date_format: Yup.string()
.required() .required()
.label(formatMessage({ id: 'date_format_' })), .label(formatMessage({ id: 'date_format_' })),
@@ -230,15 +251,8 @@ function GeneralPreferences({
}, },
}); });
// @todo @mohamed remove duplicate functions.
const onItemRenderer = (item, { handleClick }) => ( const onItemRenderer = (item, { handleClick }) => (
<MenuItem <MenuItem key={item.id} text={item.name} onClick={handleClick} />
key={item.id}
text={item.name}
onClick={handleClick}
/>
); );
const currencyItem = (item, { handleClick }) => ( const currencyItem = (item, { handleClick }) => (
@@ -280,8 +294,12 @@ function GeneralPreferences({
} }
}; };
const handleTimezoneChange = (timezone) => setTimeZone(timezone); const handleTimezoneChange = useCallback(
(timezone) => {
setFieldValue('time_zone', timezone);
},
[setFieldValue],
);
return ( return (
<div <div
className={classNames({ className={classNames({
@@ -437,7 +455,7 @@ function GeneralPreferences({
} }
> >
<TimezonePicker <TimezonePicker
value={timeZone} value={values.time_zone}
onChange={handleTimezoneChange} onChange={handleTimezoneChange}
valueDisplayFormat="composite" valueDisplayFormat="composite"
placeholder={<T id={'select_time_zone'} />} placeholder={<T id={'select_time_zone'} />}

21
client/src/containers/Setup/SetupOrganizationForm.js
View File

@@ -26,10 +26,7 @@ import withOrganizationActions from 'containers/Organization/withOrganizationAct
import { compose, optionsMapToArray } from 'utils'; import { compose, optionsMapToArray } from 'utils';
function SetupOrganizationForm({ function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
requestSubmitOptions,
requestSeedTenant
}) {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const [selected, setSelected] = useState(); const [selected, setSelected] = useState();
const history = useHistory(); const history = useHistory();
@@ -180,11 +177,10 @@ function SetupOrganizationForm({
const options = optionsMapToArray(values).map((option) => { const options = optionsMapToArray(values).map((option) => {
return { key: option.key, ...option, group: 'organization' }; return { key: option.key, ...option, group: 'organization' };
}); });
console.log(options, 'Op');
requestSubmitOptions({ options }) requestSubmitOptions({ options })
.then((response) => { .then((response) => {
requestSeedTenant().then(() => { setSubmitting(false);
setSubmitting(false);
});
}) })
.catch((erros) => { .catch((erros) => {
setSubmitting(false); setSubmitting(false);
@@ -306,8 +302,7 @@ function SetupOrganizationForm({
itemPredicate={filterItems} itemPredicate={filterItems}
selectedItem={values.base_currency} selectedItem={values.base_currency}
selectedItemProp={'value'} selectedItemProp={'value'}
// defaultText={<T id={'select_base_currency'} />} defaultText={<T id={'select_base_currency'} />}
defaultText={'LYD - Libyan Dinar'}
labelProp={'name'} labelProp={'name'}
/> />
</FormGroup> </FormGroup>
@@ -337,8 +332,7 @@ function SetupOrganizationForm({
itemPredicate={filterItems} itemPredicate={filterItems}
selectedItem={values.language} selectedItem={values.language}
selectedItemProp={'value'} selectedItemProp={'value'}
defaultText={'English'} defaultText={<T id={'select_language'} />}
// defaultText={<T id={'select_language'} />}
labelProp={'name'} labelProp={'name'}
/> />
</FormGroup> </FormGroup>
@@ -367,8 +361,7 @@ function SetupOrganizationForm({
itemPredicate={filterItems} itemPredicate={filterItems}
selectedItem={values.fiscal_year} selectedItem={values.fiscal_year}
selectedItemProp={'value'} selectedItemProp={'value'}
defaultText={'January - December'} defaultText={<T id={'select_fiscal_year'} />}
// defaultText={<T id={'select_fiscal_year'} />}
labelProp={'name'} labelProp={'name'}
/> />
</FormGroup> </FormGroup>
@@ -407,7 +400,7 @@ function SetupOrganizationForm({
intent={Intent.PRIMARY} intent={Intent.PRIMARY}
loading={isSubmitting} loading={isSubmitting}
type="submit" type="submit"
// loading={isSubmitting} loading={isSubmitting}
> >
<T id={'save_continue'} /> <T id={'save_continue'} />
</Button> </Button>

52
client/src/containers/Setup/SetupSubscriptionForm.js
View File

@@ -1,33 +1,61 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import * as Yup from 'yup'; import * as Yup from 'yup';
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import { FormattedMessage as T } from 'react-intl'; import { FormattedMessage as T, useIntl } from 'react-intl';
import { Button, Intent } from '@blueprintjs/core'; import { Button, Intent } from '@blueprintjs/core';
import BillingTab from 'containers/Subscriptions/BillingTab'; import BillingPlans from 'containers/Subscriptions/billingPlans';
import BillingPeriods from 'containers/Subscriptions/billingPeriods';
import { BillingPaymentmethod } from 'containers/Subscriptions/billingPaymentmethod';
import withBillingActions from 'containers/Subscriptions/withBillingActions';
import { compose } from 'utils';
/** /**
* Subscription step of wizard setup. * Subscription step of wizard setup.
*/ */
export default function SetupSubscriptionForm({ function SetupSubscriptionForm({
//#withBillingActions
requestSubmitBilling,
}) { }) {
const ValidationSchema = Yup.object().shape({}); const { formatMessage } = useIntl();
const initialValues = useMemo(() => ({}), []); const validationSchema = Yup.object().shape({
plan_slug: Yup.string()
.required()
.label(formatMessage({ id: 'plan_slug' })),
license_code: Yup.string().trim(),
});
const initialValues = useMemo(
() => ({
plan_slug: '',
license_code: '',
}),
[],
);
const formik = useFormik({ const formik = useFormik({
enableReinitialize: true, enableReinitialize: true,
validationSchema: ValidationSchema, validationSchema: validationSchema,
initialValues: { initialValues: {
...initialValues, ...initialValues,
}, },
onSubmit: (values, { setSubmitting, setErrors }) => {}, onSubmit: (values, { setSubmitting, setErrors }) => {
requestSubmitBilling(values)
.then((response) => {
setSubmitting(false);
})
.catch((errors) => {
setSubmitting(false);
});
},
}); });
return ( return (
<div className={'register-subscription-form'}> <div className={'register-subscription-form'}>
<form className={'billing-form'}> <form onSubmit={formik.handleSubmit} className={'billing-form'}>
<BillingTab formik={formik} /> <BillingPlans title={'a_select_a_plan'} formik={formik} />
<BillingPeriods title={'b_choose_your_billing'} formik={formik} />
<BillingPaymentmethod title={'c_payment_methods'} formik={formik} />
<div className={'subscribe-button'}> <div className={'subscribe-button'}>
<Button <Button
intent={Intent.PRIMARY} intent={Intent.PRIMARY}
@@ -41,3 +69,5 @@ export default function SetupSubscriptionForm({
</div> </div>
); );
} }
export default compose(withBillingActions)(SetupSubscriptionForm);

37
client/src/containers/Subscriptions/BillingForm.js
View File

@@ -3,16 +3,9 @@ import * as Yup from 'yup';
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import { Button, Intent } from '@blueprintjs/core'; import { Button, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl'; import { FormattedMessage as T, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
import { pick } from 'lodash';
import AppToaster from 'components/AppToaster';
import ErrorMessage from 'components/ErrorMessage';
import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { MeteredBillingTabs, PaymentMethodTabs } from './SubscriptionTabs'; import { MeteredBillingTabs, PaymentMethodTabs } from './SubscriptionTabs';
import withBillingActions from './withBillingActions'; import withBillingActions from './withBillingActions';
import withRegisterOrganizationActions from 'containers/Authentication/withRegisterOrganizationActions';
import { compose } from 'utils'; import { compose } from 'utils';
function BillingForm({ function BillingForm({
@@ -21,17 +14,7 @@ function BillingForm({
//#withBillingActions //#withBillingActions
requestSubmitBilling, requestSubmitBilling,
//#withRegisterOrganizationActions
requestBuildTenant,
}) { }) {
// const defaultPlan = useMemo(() => ({
// plan_slug: [
// { name: 'Basic', value: 'basic' },
// { name: 'Pro', value: 'pro' },
// ],
// }));
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
useEffect(() => { useEffect(() => {
@@ -43,14 +26,12 @@ function BillingForm({
.required() .required()
.label(formatMessage({ id: 'plan_slug' })), .label(formatMessage({ id: 'plan_slug' })),
license_code: Yup.string().trim(), license_code: Yup.string().trim(),
period: Yup.string(),
}); });
const initialValues = useMemo( const initialValues = useMemo(
() => ({ () => ({
plan_slug: 'basic', plan_slug: 'free',
license_code: '', license_code: '',
period: '',
}), }),
[], [],
); );
@@ -64,15 +45,7 @@ function BillingForm({
onSubmit: (values, { setSubmitting, resetForm, setErrors }) => { onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
requestSubmitBilling(values) requestSubmitBilling(values)
.then((response) => { .then((response) => {
requestBuildTenant().then(() => { setSubmitting(false);
setSubmitting(false);
});
// AppToaster.show({
// message: formatMessage({
// id: 'the_biling_has_been_successfully_created',
// }),
// intent: Intent.SUCCESS,
// });
}) })
.catch((errors) => { .catch((errors) => {
setSubmitting(false); setSubmitting(false);
@@ -98,8 +71,4 @@ function BillingForm({
); );
} }
export default compose( export default compose(withDashboardActions, withBillingActions)(BillingForm);
withDashboardActions,
withRegisterOrganizationActions,
withBillingActions,
)(BillingForm);

1
client/src/containers/Subscriptions/BillingTab.js
View File

@@ -4,7 +4,6 @@ import BillingPeriods from 'containers/Subscriptions/billingPeriods';
import { BillingPaymentmethod } from 'containers/Subscriptions/billingPaymentmethod'; import { BillingPaymentmethod } from 'containers/Subscriptions/billingPaymentmethod';
function BillingTab({ formik }) { function BillingTab({ formik }) {
console.log(formik.values, 'val');
return ( return (
<div> <div>
<BillingPlans title={'a_select_a_plan'} formik={formik} /> <BillingPlans title={'a_select_a_plan'} formik={formik} />

2
client/src/containers/Subscriptions/billingPlans.js
View File

@@ -76,7 +76,7 @@ function BillingPlans({ formik, title, selected = 1 }) {
slug={plan.slug} slug={plan.slug}
price={plan.price} price={plan.price}
currency={plan.currency} currency={plan.currency}
onSelected={() => formik.setFieldValue('plan_slug', plan.name)} onSelected={() => formik.setFieldValue('plan_slug', plan.slug)}
selected={selected == index + 1} selected={selected == index + 1}
/> />
))} ))}

2
client/src/lang/en/index.js
View File

@@ -398,7 +398,7 @@ export default {
cost_account_: 'Cost account', cost_account_: 'Cost account',
inventory_account_: 'Inventory account', inventory_account_: 'Inventory account',
view_name_: 'View name', view_name_: 'View name',
time_zone: 'Time zone', time_zone_: 'Time zone',
location: 'Location', location: 'Location',
the_items_has_been_successfully_deleted: the_items_has_been_successfully_deleted:
'The items have been successfully deleted.', 'The items have been successfully deleted.',

2
client/src/store/billing/Billing.action.js
View File

@@ -4,7 +4,7 @@ import t from 'store/types';
export const submitBilling = ({ form }) => { export const submitBilling = ({ form }) => {
return (dispatch) => return (dispatch) =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
ApiService.post('payment', form) ApiService.post('subscription/license/payment', form)
.then((response) => { .then((response) => {
resolve(response); resolve(response);
}) })