QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 13:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Billing & subscription

Browse Source
This commit is contained in:
elforjani3
2020-10-12 15:56:40 +02:00
parent 06286e6c18
commit 95a46e9475
6 changed files with 244 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,163 +1,15 @@
import React, {
useState,
useMemo,
useCallback,
useEffect,
useRef,
} from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { PaymentMethodTabs } from './SubscriptionTabs';
import React from 'react';
import BillingPlans from 'containers/Subscriptions/billingPlans';
import BillingPeriods from 'containers/Subscriptions/billingPeriods';
import { BillingPaymentmethod } from 'containers/Subscriptions/billingPaymentmethod';
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();
});
console.log(formik.values, 'val');
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={'#!'}
formik={formik}
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>
<BillingPlans title={'a_select_a_plan'} formik={formik} />
<BillingPeriods title={'b_choose_your_billing'} formik={formik} />
<BillingPaymentmethod title={'c_payment_methods'} formik={formik} />
</div>
);
}