feat: billing page in dashboard and setup.

client/src/containers/Setup/SetupSubscriptionForm.js

@@ -1,98 +1,15 @@
-import React, { useMemo } from 'react';
-import * as Yup from 'yup';
-import { useFormik } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { Button, Intent } from '@blueprintjs/core';
-import { withWizard } from 'react-albus';
+import React from 'react';
+import { Form } from 'formik';
 
-import 'style/pages/Setup/Billing.scss';
-
-import BillingPlans from 'containers/Subscriptions/billingPlans';
-import BillingPeriods from 'containers/Subscriptions/billingPeriods';
-import { BillingPaymentmethod } from 'containers/Subscriptions/billingPaymentmethod';
-
-import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptionsActions';
-import withBillingActions from 'containers/Subscriptions/withBillingActions';
-
-import { compose } from 'utils';
+import BillingPlansForm from 'containers/Subscriptions/BillingPlansForm';
 
 /**
  * Subscription step of wizard setup.
  */
-function SetupSubscriptionForm({
-  // #withBillingActions
-  requestSubmitBilling,
-
-  // #withWizard
-  wizard,
-
-  // #withSubscriptionsActions
-  requestFetchSubscriptions
-}) {
-  const { formatMessage } = useIntl();
-  const validationSchema = Yup.object().shape({
-    plan_slug: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'plan_slug' })),
-    license_code: Yup.string()
-      .min(10)
-      .max(10)
-      .required()
-      .label(formatMessage({ id: 'license_code_' }))
-      .trim(),
-  });
-
-  const initialValues = useMemo(
-    () => ({
-      plan_slug: '',
-      license_code: '',
-    }),
-    [],
-  );
-
-  const formik = useFormik({
-    enableReinitialize: true,
-    validationSchema: validationSchema,
-    initialValues: {
-      ...initialValues,
-    },
-    onSubmit: (values, { setSubmitting, setErrors }) => {
-      requestSubmitBilling(values)
-        .then((response) => {
-          return requestFetchSubscriptions();
-        })
-        .then(() => {
-          wizard.next();
-          setSubmitting(false);
-        })
-        .catch((errors) => {
-          setSubmitting(false);
-        });
-    },
-  });
+export default function SetupSubscriptionForm() {
   return (
-    <div className={'register-subscription-form'}>
-      <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}
-            type="submit"
-            loading={formik.isSubmitting}
-          >
-            <T id={'subscribe'} />
-          </Button>
-        </div>
-      </form>
-    </div>
+    <Form>
+      <BillingPlansForm />
+    </Form>
   );
 }
-
-export default compose(
-  withBillingActions,
-  withWizard,
-  withSubscriptionsActions,
-)(SetupSubscriptionForm);