re-structure to monorepo.

packages/webapp/src/containers/Subscriptions/BillingPeriod.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { get } from 'lodash';
+
+
+import '@/style/pages/Subscription/PlanPeriodRadio.scss';
+
+import withPlan from '@/containers/Subscriptions/withPlan';
+
+import { saveInvoke, compose } from '@/utils';
+
+/**
+ * Billing period.
+ */
+function BillingPeriod({
+  // #ownProps
+  label,
+  value,
+  selectedOption,
+  onSelected,
+  period,
+
+  // #withPlan
+  price,
+  currencyCode,
+}) {
+  const handlePeriodClick = () => {
+    saveInvoke(onSelected, value);
+  };
+  return (
+    <div
+      id={`plan-period-${period}`}
+      className={classNames(
+        {
+          'is-selected': value === selectedOption,
+        },
+        'period-radio',
+      )}
+      onClick={handlePeriodClick}
+    >
+      <span className={'period-radio__label'}>{label}</span>
+
+      <div className={'period-radio__price'}>
+        <span className={'period-radio__amount'}>
+          {price} {currencyCode}
+        </span>
+        <span className={'period-radio__period'}>{label}</span>
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  withPlan(({ plan }, state, { period }) => ({
+    price: get(plan, `price.${period}`),
+    currencyCode: get(plan, 'currencyCode'),
+  })),
+)(BillingPeriod);