mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 05:40:31 +00:00
Fix : setupSubScription & BillingForm & setupOrganizationForm
This commit is contained in:
@@ -40,7 +40,6 @@ function GeneralPreferences({
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const [selectedItems, setSelectedItems] = useState({});
|
||||
const [timeZone, setTimeZone] = useState('');
|
||||
|
||||
const fetchHook = useQuery(
|
||||
['settings'],
|
||||
@@ -65,67 +64,89 @@ function GeneralPreferences({
|
||||
{ id: 1, name: 'Libyan Dinar ', value: 'LYD' },
|
||||
];
|
||||
|
||||
// @todo @mohamed - Translate the months.
|
||||
// eg. > `${formatMessage({ id: 'january' })} - ${formatMessage({ id: 'december' })}`
|
||||
const fiscalYear = [
|
||||
{
|
||||
id: 0,
|
||||
name: `${formatMessage({ id: 'january' })} - ${formatMessage({ id: 'december' })}`,
|
||||
name: `${formatMessage({ id: 'january' })} - ${formatMessage({
|
||||
id: 'december',
|
||||
})}`,
|
||||
value: 'january',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: `${formatMessage({ id: 'february' })} - ${formatMessage({ id: 'january' })}`,
|
||||
name: `${formatMessage({ id: 'february' })} - ${formatMessage({
|
||||
id: 'january',
|
||||
})}`,
|
||||
value: 'february',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: `${formatMessage({ id: 'march' })} - ${formatMessage({ id: 'february' })}`,
|
||||
name: `${formatMessage({ id: 'march' })} - ${formatMessage({
|
||||
id: 'february',
|
||||
})}`,
|
||||
value: 'March',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: `${formatMessage({ id: 'april' })} - ${formatMessage({ id: 'march' })}`,
|
||||
name: `${formatMessage({ id: 'april' })} - ${formatMessage({
|
||||
id: 'march',
|
||||
})}`,
|
||||
value: 'april',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: `${formatMessage({ id: 'may' })} - ${formatMessage({ id: 'april' })}`,
|
||||
name: `${formatMessage({ id: 'may' })} - ${formatMessage({
|
||||
id: 'april',
|
||||
})}`,
|
||||
value: 'may',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: `${formatMessage({ id: 'june' })} - ${formatMessage({ id: 'may' })}`,
|
||||
name: `${formatMessage({ id: 'june' })} - ${formatMessage({
|
||||
id: 'may',
|
||||
})}`,
|
||||
value: 'june',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: `${formatMessage({ id: 'july' })} - ${formatMessage({ id: 'june' })}`,
|
||||
name: `${formatMessage({ id: 'july' })} - ${formatMessage({
|
||||
id: 'june',
|
||||
})}`,
|
||||
value: 'july',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: `${formatMessage({ id: 'august' })} - ${formatMessage({ id: 'july' })}`,
|
||||
name: `${formatMessage({ id: 'august' })} - ${formatMessage({
|
||||
id: 'july',
|
||||
})}`,
|
||||
value: 'August',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: `${formatMessage({ id: 'september' })} - ${formatMessage({ id: 'august' })}`,
|
||||
name: `${formatMessage({ id: 'september' })} - ${formatMessage({
|
||||
id: 'august',
|
||||
})}`,
|
||||
value: 'september',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: `${formatMessage({ id: 'october' })} - ${formatMessage({ id: 'november' })}`,
|
||||
name: `${formatMessage({ id: 'october' })} - ${formatMessage({
|
||||
id: 'november',
|
||||
})}`,
|
||||
value: 'october',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: `${formatMessage({ id: 'november' })} - ${formatMessage({ id: 'october' })}`,
|
||||
name: `${formatMessage({ id: 'november' })} - ${formatMessage({
|
||||
id: 'october',
|
||||
})}`,
|
||||
value: 'november',
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: `${formatMessage({ id: 'december' })} - ${formatMessage({ id: 'november' })}`,
|
||||
name: `${formatMessage({ id: 'december' })} - ${formatMessage({
|
||||
id: 'november',
|
||||
})}`,
|
||||
value: 'december',
|
||||
},
|
||||
];
|
||||
@@ -185,9 +206,9 @@ function GeneralPreferences({
|
||||
language: Yup.string()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'language' })),
|
||||
// time_zone: Yup.string()
|
||||
// .required()
|
||||
// .label(formatMessage({ id: 'time_zone' })),
|
||||
time_zone: Yup.string()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'time_zone_' })),
|
||||
date_format: Yup.string()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'date_format_' })),
|
||||
@@ -230,15 +251,8 @@ function GeneralPreferences({
|
||||
},
|
||||
});
|
||||
|
||||
// @todo @mohamed remove duplicate functions.
|
||||
|
||||
|
||||
const onItemRenderer = (item, { handleClick }) => (
|
||||
<MenuItem
|
||||
key={item.id}
|
||||
text={item.name}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
<MenuItem key={item.id} text={item.name} onClick={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 (
|
||||
<div
|
||||
className={classNames({
|
||||
@@ -437,7 +455,7 @@ function GeneralPreferences({
|
||||
}
|
||||
>
|
||||
<TimezonePicker
|
||||
value={timeZone}
|
||||
value={values.time_zone}
|
||||
onChange={handleTimezoneChange}
|
||||
valueDisplayFormat="composite"
|
||||
placeholder={<T id={'select_time_zone'} />}
|
||||
|
||||
@@ -26,10 +26,7 @@ import withOrganizationActions from 'containers/Organization/withOrganizationAct
|
||||
|
||||
import { compose, optionsMapToArray } from 'utils';
|
||||
|
||||
function SetupOrganizationForm({
|
||||
requestSubmitOptions,
|
||||
requestSeedTenant
|
||||
}) {
|
||||
function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
|
||||
const { formatMessage } = useIntl();
|
||||
const [selected, setSelected] = useState();
|
||||
const history = useHistory();
|
||||
@@ -180,11 +177,10 @@ function SetupOrganizationForm({
|
||||
const options = optionsMapToArray(values).map((option) => {
|
||||
return { key: option.key, ...option, group: 'organization' };
|
||||
});
|
||||
console.log(options, 'Op');
|
||||
requestSubmitOptions({ options })
|
||||
.then((response) => {
|
||||
requestSeedTenant().then(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((erros) => {
|
||||
setSubmitting(false);
|
||||
@@ -306,8 +302,7 @@ function SetupOrganizationForm({
|
||||
itemPredicate={filterItems}
|
||||
selectedItem={values.base_currency}
|
||||
selectedItemProp={'value'}
|
||||
// defaultText={<T id={'select_base_currency'} />}
|
||||
defaultText={'LYD - Libyan Dinar'}
|
||||
defaultText={<T id={'select_base_currency'} />}
|
||||
labelProp={'name'}
|
||||
/>
|
||||
</FormGroup>
|
||||
@@ -337,8 +332,7 @@ function SetupOrganizationForm({
|
||||
itemPredicate={filterItems}
|
||||
selectedItem={values.language}
|
||||
selectedItemProp={'value'}
|
||||
defaultText={'English'}
|
||||
// defaultText={<T id={'select_language'} />}
|
||||
defaultText={<T id={'select_language'} />}
|
||||
labelProp={'name'}
|
||||
/>
|
||||
</FormGroup>
|
||||
@@ -367,8 +361,7 @@ function SetupOrganizationForm({
|
||||
itemPredicate={filterItems}
|
||||
selectedItem={values.fiscal_year}
|
||||
selectedItemProp={'value'}
|
||||
defaultText={'January - December'}
|
||||
// defaultText={<T id={'select_fiscal_year'} />}
|
||||
defaultText={<T id={'select_fiscal_year'} />}
|
||||
labelProp={'name'}
|
||||
/>
|
||||
</FormGroup>
|
||||
@@ -407,7 +400,7 @@ function SetupOrganizationForm({
|
||||
intent={Intent.PRIMARY}
|
||||
loading={isSubmitting}
|
||||
type="submit"
|
||||
// loading={isSubmitting}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
<T id={'save_continue'} />
|
||||
</Button>
|
||||
|
||||
@@ -1,33 +1,61 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
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 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.
|
||||
*/
|
||||
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({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ValidationSchema,
|
||||
validationSchema: validationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: (values, { setSubmitting, setErrors }) => {},
|
||||
onSubmit: (values, { setSubmitting, setErrors }) => {
|
||||
requestSubmitBilling(values)
|
||||
.then((response) => {
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className={'register-subscription-form'}>
|
||||
<form className={'billing-form'}>
|
||||
<BillingTab formik={formik} />
|
||||
|
||||
<form onSubmit={formik.handleSubmit} className={'billing-form'}>
|
||||
<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'}>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
@@ -41,3 +69,5 @@ export default function SetupSubscriptionForm({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withBillingActions)(SetupSubscriptionForm);
|
||||
|
||||
@@ -3,16 +3,9 @@ import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { Button, Intent } from '@blueprintjs/core';
|
||||
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 { MeteredBillingTabs, PaymentMethodTabs } from './SubscriptionTabs';
|
||||
import withBillingActions from './withBillingActions';
|
||||
import withRegisterOrganizationActions from 'containers/Authentication/withRegisterOrganizationActions';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function BillingForm({
|
||||
@@ -21,17 +14,7 @@ function BillingForm({
|
||||
|
||||
//#withBillingActions
|
||||
requestSubmitBilling,
|
||||
|
||||
//#withRegisterOrganizationActions
|
||||
requestBuildTenant,
|
||||
}) {
|
||||
// const defaultPlan = useMemo(() => ({
|
||||
// plan_slug: [
|
||||
// { name: 'Basic', value: 'basic' },
|
||||
// { name: 'Pro', value: 'pro' },
|
||||
// ],
|
||||
// }));
|
||||
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -43,14 +26,12 @@ function BillingForm({
|
||||
.required()
|
||||
.label(formatMessage({ id: 'plan_slug' })),
|
||||
license_code: Yup.string().trim(),
|
||||
period: Yup.string(),
|
||||
});
|
||||
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
plan_slug: 'basic',
|
||||
plan_slug: 'free',
|
||||
license_code: '',
|
||||
period: '',
|
||||
}),
|
||||
[],
|
||||
);
|
||||
@@ -64,15 +45,7 @@ function BillingForm({
|
||||
onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
|
||||
requestSubmitBilling(values)
|
||||
.then((response) => {
|
||||
requestBuildTenant().then(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
// AppToaster.show({
|
||||
// message: formatMessage({
|
||||
// id: 'the_biling_has_been_successfully_created',
|
||||
// }),
|
||||
// intent: Intent.SUCCESS,
|
||||
// });
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
@@ -98,8 +71,4 @@ function BillingForm({
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDashboardActions,
|
||||
withRegisterOrganizationActions,
|
||||
withBillingActions,
|
||||
)(BillingForm);
|
||||
export default compose(withDashboardActions, withBillingActions)(BillingForm);
|
||||
|
||||
@@ -4,7 +4,6 @@ import BillingPeriods from 'containers/Subscriptions/billingPeriods';
|
||||
import { BillingPaymentmethod } from 'containers/Subscriptions/billingPaymentmethod';
|
||||
|
||||
function BillingTab({ formik }) {
|
||||
console.log(formik.values, 'val');
|
||||
return (
|
||||
<div>
|
||||
<BillingPlans title={'a_select_a_plan'} formik={formik} />
|
||||
|
||||
@@ -76,7 +76,7 @@ function BillingPlans({ formik, title, selected = 1 }) {
|
||||
slug={plan.slug}
|
||||
price={plan.price}
|
||||
currency={plan.currency}
|
||||
onSelected={() => formik.setFieldValue('plan_slug', plan.name)}
|
||||
onSelected={() => formik.setFieldValue('plan_slug', plan.slug)}
|
||||
selected={selected == index + 1}
|
||||
/>
|
||||
))}
|
||||
|
||||
@@ -398,7 +398,7 @@ export default {
|
||||
cost_account_: 'Cost account',
|
||||
inventory_account_: 'Inventory account',
|
||||
view_name_: 'View name',
|
||||
time_zone: 'Time zone',
|
||||
time_zone_: 'Time zone',
|
||||
location: 'Location',
|
||||
the_items_has_been_successfully_deleted:
|
||||
'The items have been successfully deleted.',
|
||||
|
||||
@@ -4,7 +4,7 @@ import t from 'store/types';
|
||||
export const submitBilling = ({ form }) => {
|
||||
return (dispatch) =>
|
||||
new Promise((resolve, reject) => {
|
||||
ApiService.post('payment', form)
|
||||
ApiService.post('subscription/license/payment', form)
|
||||
.then((response) => {
|
||||
resolve(response);
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user