feat: billing page in dashboard and setup.

client/src/containers/Subscriptions/BillingPeriodsInput.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Field } from 'formik';
+import BillingPeriod from './BillingPeriod';
+
+import withPlans from './withPlans';
+
+import { compose } from 'utils';
+
+/**
+ * Billing periods.
+ */
+function BillingPeriods({ title, description, plansPeriods }) {
+  return (
+    <section class="billing-plans__section">
+      <h1 class="title">{title}</h1>
+      <div class="description">
+        <p className="paragraph">{description}</p>
+      </div>
+
+      <Field name={'period'}>
+        {({ form: { setFieldValue, values } }) => (
+          <div className={'plan-periods'}>
+            {plansPeriods.map((period) => (
+              <BillingPeriod
+                planSlug={values.plan_slug}
+                period={period.slug}
+                label={period.label}
+                value={period.slug}
+                onSelected={(value) => setFieldValue('period', value)}
+                selectedOption={values.period}
+              />
+            ))}
+          </div>
+        )}
+      </Field>
+    </section>
+  );
+}
+
+export default compose(withPlans(({ plansPeriods }) => ({ plansPeriods })))(
+  BillingPeriods,
+);