mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 21:00:31 +00:00
WIP: billing /style
This commit is contained in:
elforjani3
94
client/src/containers/Subscriptions/BillingForm.js
Normal file
94
client/src/containers/Subscriptions/BillingForm.js
Normal file
@@ -0,0 +1,94 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
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 { compose } from 'utils';
|
||||
|
||||
function BillingForm({
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
|
||||
//#withBillingActions
|
||||
requestSubmitBilling,
|
||||
}) {
|
||||
// const defaultPlan = useMemo(() => ({
|
||||
// plan_slug: [
|
||||
// { id: 0, name: 'Basic', value: 'basic' },
|
||||
// { id: 0, name: 'Pro', value: 'pro' },
|
||||
// ],
|
||||
// }));
|
||||
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle(formatMessage({ id: 'billing' }));
|
||||
}, [changePageTitle, formatMessage]);
|
||||
|
||||
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: 'basic',
|
||||
license_code: '',
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema: validationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
|
||||
onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
|
||||
requestSubmitBilling(values)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_biling_has_been_successfully_created',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
console.log(formik.values, 'formik');
|
||||
return (
|
||||
<div className={'billing-form'}>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<MeteredBillingTabs formik={formik} planId={formik.values.plan_slug} />
|
||||
<div className={'subscribe-button'}>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
loading={formik.isSubmitting}
|
||||
>
|
||||
<T id={'subscribe'} />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDashboardActions, withBillingActions)(BillingForm);
|
||||
164
client/src/containers/Subscriptions/BillingTab.js
Normal file
164
client/src/containers/Subscriptions/BillingTab.js
Normal file
@@ -0,0 +1,164 @@
|
||||
import React, {
|
||||
useState,
|
||||
useMemo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
} from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { PaymentMethodTabs } from './SubscriptionTabs';
|
||||
|
||||
function BillingTab({ formik }) {
|
||||
const [plan, setPlan] = useState();
|
||||
const planRef = useRef(null);
|
||||
const billingRef = useRef(null);
|
||||
|
||||
const handlePlan = () => {
|
||||
const plans = planRef.current.querySelectorAll('a');
|
||||
const planSelected = planRef.current.querySelector('.plan-selected');
|
||||
|
||||
plans.forEach((el) => {
|
||||
el.addEventListener('click', () => {
|
||||
planSelected.classList.remove('plan-selected');
|
||||
el.classList.add('plan-selected');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleBilling = () => {
|
||||
const billingPriod = billingRef.current.querySelectorAll('a');
|
||||
const billingSelected = billingRef.current.querySelector(
|
||||
'.billing-selected',
|
||||
);
|
||||
billingPriod.forEach((el) => {
|
||||
el.addEventListener('click', () => {
|
||||
billingSelected.classList.remove('billing-selected');
|
||||
el.classList.add('billing-selected');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handlePlan();
|
||||
handleBilling();
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<section>
|
||||
<h1 className={'bg-title'}>
|
||||
<T id={'a_select_a_plan'} />
|
||||
</h1>
|
||||
<p className={'bg-message '}>
|
||||
<T id={'please_enter_your_preferred_payment_method'} />
|
||||
</p>
|
||||
<div className={'billing-form__plan-container'} ref={planRef}>
|
||||
<a
|
||||
id={'basic-plan'}
|
||||
className={`plan-wrapper plan-selected`}
|
||||
onClick={() =>
|
||||
setPlan({ ...formik.setFieldValue('plan_slug', 'basic') })
|
||||
}
|
||||
>
|
||||
<div className={'plan-header'}>
|
||||
<div className={'plan-name'}>
|
||||
<T id={'Basic'} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={'plan-description'}>
|
||||
<ul>
|
||||
<li>Sales/purchases module.</li>
|
||||
<li>Expense module.</li>
|
||||
<li>Inventory module.</li>
|
||||
<li>Unlimited status pages.</li>
|
||||
<li>Unlimited status pages.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={'plan-price'}>
|
||||
<span className={'amount'}>1200 LYD</span>
|
||||
<span className={'period'}>
|
||||
<T id={'year_per'} />
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
id={'pro-plan'}
|
||||
className={`plan-wrapper`}
|
||||
onClick={() =>
|
||||
setPlan({ ...formik.setFieldValue('plan_slug', 'pro') })
|
||||
}
|
||||
>
|
||||
<div className={'plan-header'}>
|
||||
<div className={'plan-name'}>
|
||||
<T id={'pro'} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={'plan-description'}>
|
||||
<ul>
|
||||
<li>Sales/purchases module.</li>
|
||||
<li>Expense module.</li>
|
||||
<li>Inventory module.</li>
|
||||
<li>Unlimited status pages.</li>
|
||||
<li>Unlimited status pages.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={'plan-price'}>
|
||||
<span className={'amount'}>1200 LYD</span>
|
||||
<span className={'period'}>
|
||||
<T id={'year_per'} />
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1 className={'bg-title'}>
|
||||
<T id={'b_choose_your_billing'} />
|
||||
</h1>
|
||||
<p className={'bg-message'}>
|
||||
<T id={'please_enter_your_preferred_payment_method'} />
|
||||
</p>
|
||||
<div className={'payment-method-continer'} ref={billingRef}>
|
||||
<a
|
||||
href={'#'}
|
||||
id={'monthly'}
|
||||
className={'period-container billing-selected'}
|
||||
>
|
||||
<span className={'bg-period'}>
|
||||
<T id={'monthly'} />
|
||||
</span>
|
||||
<div className={'plan-price'}>
|
||||
<span className={'amount'}>1200 LYD</span>
|
||||
<span className={'period'}>
|
||||
<T id={'year'} />
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href={'#'} id={'yearly'} className={'period-container'}>
|
||||
<span className={'bg-period'}>
|
||||
<T id={'yearly'} />
|
||||
</span>
|
||||
<div className={'plan-price'}>
|
||||
<span className={'amount'}>1200 LYD</span>
|
||||
<span className={'period'}>
|
||||
<T id={'year'} />
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1 className={'bg-title'}>
|
||||
<T id={'c_payment_methods'} />
|
||||
</h1>
|
||||
<p className={'bg-message'}>
|
||||
<T id={'please_enter_your_preferred_payment_method'} />
|
||||
</p>
|
||||
<PaymentMethodTabs formik={formik} />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BillingTab;
|
||||
35
client/src/containers/Subscriptions/LicenseTab.js
Normal file
35
client/src/containers/Subscriptions/LicenseTab.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { InputGroup, FormGroup, Intent } from '@blueprintjs/core';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
|
||||
function LicenseTab({
|
||||
formik: { errors, touched, setFieldValue, getFieldProps },
|
||||
}) {
|
||||
return (
|
||||
<div className={'license-container'}>
|
||||
<h4>
|
||||
<T id={'license_code'} />
|
||||
</h4>
|
||||
<p className={'bg-message'}>
|
||||
<T id={'cards_will_be_charged'} />
|
||||
</p>
|
||||
|
||||
<FormGroup
|
||||
label={<T id={'license_number'} />}
|
||||
intent={errors.license_code && touched.license_code && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage name="license_code" {...{ errors, touched }} />
|
||||
}
|
||||
className={'form-group-license_code'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.license_code && touched.license_code && Intent.DANGER}
|
||||
{...getFieldProps('license_code')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LicenseTab;
|
||||
55
client/src/containers/Subscriptions/SubscriptionTabs.js
Normal file
55
client/src/containers/Subscriptions/SubscriptionTabs.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Tabs, Tab } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import BillingTab from './BillingTab';
|
||||
import LicenseTab from './LicenseTab';
|
||||
|
||||
export const MeteredBillingTabs = ({ formik }) => {
|
||||
const [animate, setAnimate] = useState(true);
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Tabs animate={animate} large={true}>
|
||||
<Tab
|
||||
title={formatMessage({ id: 'billing' })}
|
||||
id={'billing'}
|
||||
panel={<BillingTab formik={formik} />}
|
||||
/>
|
||||
<Tab
|
||||
title={formatMessage({ id: 'usage' })}
|
||||
id={'usage'}
|
||||
disabled={true}
|
||||
// panel={'Usage'}
|
||||
/>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PaymentMethodTabs = ({ formik }) => {
|
||||
const [animate, setAnimate] = useState(true);
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Tabs animate={animate} large={true}>
|
||||
<Tab
|
||||
title={formatMessage({ id: 'license' })}
|
||||
id={'license'}
|
||||
panel={<LicenseTab formik={formik} />}
|
||||
/>
|
||||
<Tab
|
||||
title={formatMessage({ id: 'credit_card' })}
|
||||
id={'credit_card'}
|
||||
disabled={true}
|
||||
/>
|
||||
<Tab
|
||||
title={formatMessage({ id: 'paypal' })}
|
||||
id={'paypal'}
|
||||
disabled={true}
|
||||
/>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { submitBilling } from 'store/billing/Billing.action';
|
||||
|
||||
export const mapDispatchToProps = (dispatch) => ({
|
||||
requestSubmitBilling: (form) => dispatch(submitBilling({ form })),
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps);
|
||||
Reference in New Issue
Block a user