diff --git a/client/src/common/subscriptionModels.js b/client/src/common/subscriptionModels.js
new file mode 100644
index 000000000..d6f2b530f
--- /dev/null
+++ b/client/src/common/subscriptionModels.js
@@ -0,0 +1,41 @@
+export const plans = [
+ {
+ name: 'basic',
+ description: [
+ 'Sales/purchases module.',
+ 'Expense module.',
+ 'Inventory module.',
+ 'Unlimited status pages.',
+ 'Unlimited status pages.',
+ ],
+ price: '1200',
+ slug: 'free',
+ currency: 'LYD',
+ },
+ {
+ name: 'pro',
+ description: [
+ 'Sales/purchases module.',
+ 'Expense module.',
+ 'Inventory module.',
+ 'Unlimited status pages.',
+ 'Unlimited status pages.',
+ ],
+ price: '1200',
+ slug: 'free',
+ currency: 'LYD',
+ },
+];
+
+export const paymentmethod = [
+ {
+ period: 'monthly',
+ price: '1200',
+ currency: 'LYD',
+ },
+ {
+ period: 'yearly',
+ price: '1200',
+ currency: 'LYD',
+ },
+];
diff --git a/client/src/containers/Subscriptions/BillingForm.js b/client/src/containers/Subscriptions/BillingForm.js
index 458803c8b..bb29c3d70 100644
--- a/client/src/containers/Subscriptions/BillingForm.js
+++ b/client/src/containers/Subscriptions/BillingForm.js
@@ -12,6 +12,7 @@ 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({
@@ -20,11 +21,14 @@ function BillingForm({
//#withBillingActions
requestSubmitBilling,
+
+ //#withRegisterOrganizationActions
+ requestBuildTenant,
}) {
// const defaultPlan = useMemo(() => ({
// plan_slug: [
- // { id: 0, name: 'Basic', value: 'basic' },
- // { id: 0, name: 'Pro', value: 'pro' },
+ // { name: 'Basic', value: 'basic' },
+ // { name: 'Pro', value: 'pro' },
// ],
// }));
@@ -39,12 +43,14 @@ function BillingForm({
.required()
.label(formatMessage({ id: 'plan_slug' })),
license_code: Yup.string().trim(),
+ period: Yup.string(),
});
const initialValues = useMemo(
() => ({
plan_slug: 'basic',
license_code: '',
+ period: '',
}),
[],
);
@@ -58,13 +64,15 @@ function BillingForm({
onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
requestSubmitBilling(values)
.then((response) => {
- AppToaster.show({
- message: formatMessage({
- id: 'the_biling_has_been_successfully_created',
- }),
- intent: Intent.SUCCESS,
+ requestBuildTenant().then(() => {
+ setSubmitting(false);
});
- setSubmitting(false);
+ // AppToaster.show({
+ // message: formatMessage({
+ // id: 'the_biling_has_been_successfully_created',
+ // }),
+ // intent: Intent.SUCCESS,
+ // });
})
.catch((errors) => {
setSubmitting(false);
@@ -90,4 +98,8 @@ function BillingForm({
);
}
-export default compose(withDashboardActions, withBillingActions)(BillingForm);
+export default compose(
+ withDashboardActions,
+ withRegisterOrganizationActions,
+ withBillingActions,
+)(BillingForm);
diff --git a/client/src/containers/Subscriptions/BillingTab.js b/client/src/containers/Subscriptions/BillingTab.js
index 2e7b9319b..74dbcb4cc 100644
--- a/client/src/containers/Subscriptions/BillingTab.js
+++ b/client/src/containers/Subscriptions/BillingTab.js
@@ -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 (
);
}
diff --git a/client/src/containers/Subscriptions/billingPaymentmethod.js b/client/src/containers/Subscriptions/billingPaymentmethod.js
new file mode 100644
index 000000000..0539a3858
--- /dev/null
+++ b/client/src/containers/Subscriptions/billingPaymentmethod.js
@@ -0,0 +1,17 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { PaymentMethodTabs } from './SubscriptionTabs';
+
+export const BillingPaymentmethod = ({ formik, title }) => {
+ return (
+
+ );
+};
diff --git a/client/src/containers/Subscriptions/billingPeriods.js b/client/src/containers/Subscriptions/billingPeriods.js
new file mode 100644
index 000000000..944a66566
--- /dev/null
+++ b/client/src/containers/Subscriptions/billingPeriods.js
@@ -0,0 +1,68 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import classNames from 'classnames';
+import { paymentmethod } from 'common/subscriptionModels';
+
+function BillingPeriod({ price, period, currency, onSelected, selected }) {
+ return (
+
+
+
+
+
+
+ {price} {currency}
+
+
+
+
+
+
+ );
+}
+function BillingPeriods({ formik, title, selected = 1 }) {
+ const billingRef = useRef(null);
+
+ useEffect(() => {
+ 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');
+ });
+ });
+ });
+
+ return (
+
+
+
+
+
+
+
+
+ {paymentmethod.map((pay, index) => (
+ formik.setFieldValue('period', pay.period)}
+ selected={selected == index + 1}
+ />
+ ))}
+
+
+ );
+}
+
+export default BillingPeriods;
diff --git a/client/src/containers/Subscriptions/billingPlans.js b/client/src/containers/Subscriptions/billingPlans.js
new file mode 100644
index 000000000..af9842fe8
--- /dev/null
+++ b/client/src/containers/Subscriptions/billingPlans.js
@@ -0,0 +1,89 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import classNames from 'classnames';
+import { plans } from 'common/subscriptionModels';
+
+function BillingPlan({
+ name,
+ description,
+ price,
+ slug,
+ currency,
+ onSelected,
+ selected,
+}) {
+ return (
+ onSelected(slug)}
+ >
+
+
+
+ {description.map((desc, index) => (
+ - {desc}
+ ))}
+
+
+
+ {' '}
+ {price} {currency}
+
+
+
+
+
+
+ );
+}
+
+function BillingPlans({ formik, title, selected = 1 }) {
+ const planRef = useRef(null);
+
+ useEffect(() => {
+ 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');
+ });
+ });
+ });
+
+ return (
+
+
+
+
+
+
+
+
+ {plans.map((plan, index) => (
+ formik.setFieldValue('plan_slug', plan.name)}
+ selected={selected == index + 1}
+ />
+ ))}
+
+
+ );
+}
+
+export default BillingPlans;
+