re-structure to monorepo.

packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscriptionForm.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import React from 'react';
+
+import SubscriptionPlansSection from './SubscriptionPlansSection';
+import SubscriptionPeriodsSection from './SubscriptionPeriodsSection';
+import SubscriptionPaymentMethodsSection from './SubscriptionPaymentsMethodsSection';
+
+
+export default function SetupSubscriptionForm() {
+  return (
+    <div class="billing-plans">
+      <SubscriptionPlansSection />
+      <SubscriptionPeriodsSection />
+      <SubscriptionPaymentMethodsSection />
+    </div>
+  );
+}

packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPaymentsMethodsSection.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import React from 'react';
+import { T } from '@/components';
+
+import { PaymentMethodTabs } from '../../Subscriptions/SubscriptionTabs';
+
+export default ({ formik, title, description }) => {
+  return (
+    <section class="billing-plans__section">
+      <h1 className="title">
+        <T id={'setup.plans.payment_methods.title'} />
+      </h1>
+      <p className="paragraph">
+        <T id={'setup.plans.payment_methods.description'} />
+      </p>
+
+      <PaymentMethodTabs formik={formik} />
+    </section>
+  );
+};

packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPeriodsSection.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+import { Field } from 'formik';
+import * as R from 'ramda';
+
+import { T, SubscriptionPeriods } from '@/components';
+
+import withPlan from '../../Subscriptions/withPlan';
+
+const SubscriptionPeriodsEnhanced = R.compose(
+  withPlan(({ plan }) => ({ plan })),
+)(({ plan, ...restProps }) => {
+  // Can't continue if the current plan of the form not selected.
+  if (!plan) {
+    return null;
+  }
+  return <SubscriptionPeriods periods={plan.periods} {...restProps} />;
+});
+
+/**
+ * Billing periods.
+ */
+export default function SubscriptionPeriodsSection() {
+  return (
+    <section class="billing-plans__section">
+      <h1 class="title">
+        <T id={'setup.plans.select_period.title'} />
+      </h1>
+      <div class="description">
+        <p className="paragraph">
+          <T id={'setup.plans.select_period.description'} />
+        </p>
+      </div>
+
+      <Field name={'period'}>
+        {({ form: { setFieldValue, values }, field: { value } }) => (
+          <SubscriptionPeriodsEnhanced
+            planSlug={values.plan_slug}
+            selectedPeriod={value}
+            onPeriodSelect={(period) => {
+              setFieldValue('period', period);
+            }}
+          />
+        )}
+      </Field>
+    </section>
+  );
+}

packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansSection.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React from 'react';
+import { Field } from 'formik';
+
+import { T, SubscriptionPlans } from '@/components';
+
+import { compose } from '@/utils';
+import withPlans from '../../Subscriptions/withPlans';
+
+/**
+ * Billing plans.
+ */
+function SubscriptionPlansSection({ plans }) {
+  return (
+    <section class="billing-plans__section">
+      <h1 class="title">
+        <T id={'setup.plans.select_plan.title'} />
+      </h1>
+      <div class="description">
+        <p className="paragraph">
+          <T id={'setup.plans.select_plan.description'} />
+        </p>
+      </div>
+
+      <Field name={'plan_slug'}>
+        {({ form: { setFieldValue }, field: { value } }) => (
+          <SubscriptionPlans
+            value={value}
+            plans={plans}
+            onSelect={(value) => {
+              setFieldValue('plan_slug', value);
+            }}
+          />
+        )}
+      </Field>
+    </section>
+  );
+}
+
+export default compose(withPlans(({ plans }) => ({ plans })))(
+  SubscriptionPlansSection,
+);