Fix: Billing & subscription

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);

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 (
     <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>
   );
 }

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 (
+    <section>
+      <h1 className={'bg-title'}>
+        <T id={title} />
+      </h1>
+      <p className={'bg-message'}>
+        <T id={'please_enter_your_preferred_payment_method'} />
+      </p>
+      <PaymentMethodTabs formik={formik} />
+    </section>
+  );
+};

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 (
+    <a
+      href={'#!'}
+      id={'monthly'}
+      className={`period-container ${classNames({
+        'billing-selected': selected,
+      })} `}
+    >
+      <span className={'bg-period'}>
+        <T id={period} />
+      </span>
+      <div className={'plan-price'}>
+        <span className={'amount'}>
+          {price} {currency}
+        </span>
+        <span className={'period'}>
+          <T id={'year'} />
+        </span>
+      </div>
+    </a>
+  );
+}
+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 (
+    <section>
+      <h1 className={'bg-title'}>
+        <T id={title} />
+      </h1>
+      <p className={'bg-message'}>
+        <T id={'please_enter_your_preferred_payment_method'} />
+      </p>
+      <div className={'payment-method-continer'} ref={billingRef}>
+        {paymentmethod.map((pay, index) => (
+          <BillingPeriod
+            period={pay.period}
+            price={pay.price}
+            currency={pay.currency}
+             onSelected={()=>formik.setFieldValue('period', pay.period)}
+            selected={selected == index + 1}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default BillingPeriods;

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 (
+    <a
+      id={'basic-plan'}
+      className={`plan-wrapper ${classNames({
+        'plan-selected': selected,
+      })} `}
+      onClick={() => onSelected(slug)}
+    >
+      <div className={'plan-header'}>
+        <div className={'plan-name'}>
+          <T id={name} />
+        </div>
+      </div>
+      <div className={'plan-description'}>
+        <ul>
+          {description.map((desc, index) => (
+            <li>{desc}</li>
+          ))}
+        </ul>
+      </div>
+      <div className={'plan-price'}>
+        <span className={'amount'}>
+          {' '}
+          {price} {currency}
+        </span>
+        <span className={'period'}>
+          <T id={'year_per'} />
+        </span>
+      </div>
+    </a>
+  );
+}
+
+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 (
+    <section>
+      <h1 className={'bg-title'}>
+        <T id={title} />
+      </h1>
+      <p className={'bg-message '}>
+        <T id={'please_enter_your_preferred_payment_method'} />
+      </p>
+      <div className={'billing-form__plan-container'} ref={planRef}>
+        {plans.map((plan, index) => (
+          <BillingPlan
+            name={plan.name}
+            description={plan.description}
+            slug={plan.slug}
+            price={plan.price}
+            currency={plan.currency}
+            onSelected={() => formik.setFieldValue('plan_slug', plan.name)}
+            selected={selected == index + 1}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default BillingPlans;
+