chore: Refactoring all import directories to alias and all .js|.jsx renamed to be .ts|.tsx

src/containers/Subscriptions/BillingPeriodsInput.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Field } from 'formik';
+import * as R from 'ramda';
+
+import { T, SubscriptionPeriods } from '@/components';
+
+import withPlan from './withPlan';
+
+/**
+ * Sunscription periods enhanced.
+ */
+const SubscriptionPeriodsEnhanced = R.compose(
+  withPlan(({ plan }) => ({ plan })),
+)(({ plan, ...restProps }) => {
+  if (!plan) return null;
+
+  return <SubscriptionPeriods periods={plan.periods} {...restProps} />;
+});
+
+/**
+ * Billing periods.
+ */
+export default function BillingPeriods() {
+  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'}>
+        {({ field: { value }, form: { values, setFieldValue } }) => (
+          <SubscriptionPeriodsEnhanced
+            selectedPeriod={value}
+            planSlug={values.plan_slug}
+            onPeriodSelect={(period) => {
+              setFieldValue('period', period);
+            }}
+          />
+        )}
+      </Field>
+    </section>
+  );
+}