chrone: sperate client and server to different repos.

src/components/Subscriptions/index.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { T } from 'components';
+import { saveInvoke } from 'utils';
+
+import 'style/pages/Subscription/PlanRadio.scss';
+import 'style/pages/Subscription/PlanPeriodRadio.scss';
+
+export function SubscriptionPlans({ value, plans, onSelect }) {
+  const handleSelect = (value) => {
+    onSelect && onSelect(value);
+  };
+
+  return (
+    <div className={'plan-radios'}>
+      {plans.map((plan) => (
+        <SubscriptionPlan
+          name={plan.name}
+          description={plan.description}
+          slug={plan.slug}
+          price={plan.price}
+          currencyCode={plan.currencyCode}
+          value={plan.slug}
+          onSelected={handleSelect}
+          selectedOption={value}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function SubscriptionPlan({
+  name,
+  description,
+  price,
+  currencyCode,
+
+  value,
+  selectedOption,
+  onSelected,
+}) {
+  const handlePlanClick = () => {
+    saveInvoke(onSelected, value);
+  };
+  return (
+    <div
+      id={'basic-plan'}
+      className={classNames('plan-radio', {
+        'is-selected': selectedOption === value,
+      })}
+      onClick={handlePlanClick}
+    >
+      <div className={'plan-radio__header'}>
+        <div className={'plan-radio__name'}>{name}</div>
+      </div>
+
+      <div className={'plan-radio__description'}>
+        <ul>
+          {description.map((line) => (
+            <li>{line}</li>
+          ))}
+        </ul>
+      </div>
+
+      <div className={'plan-radio__price'}>
+        <span className={'plan-radio__amount'}>
+          {price} {currencyCode}
+        </span>
+        <span className={'plan-radio__period'}>
+          <T id={'monthly'} />
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Subscription periods.
+ */
+export function SubscriptionPeriods({ periods, selectedPeriod, onPeriodSelect }) {
+  const handleSelected = (value) => {
+    saveInvoke(onPeriodSelect, value);
+  };
+
+  return (
+    <div className={'plan-periods'}>
+      {periods.map((period) => (
+        <SubscriptionPeriod
+          period={period.slug}
+          label={period.label}
+          onSelected={handleSelected}
+          price={period.price}
+          selectedPeriod={selectedPeriod}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Billing period.
+ */
+export function SubscriptionPeriod({
+  // #ownProps
+  label,
+  selectedPeriod,
+  onSelected,
+  period,
+  price,
+  currencyCode,
+}) {
+  const handlePeriodClick = () => {
+    saveInvoke(onSelected, period);
+  };
+  return (
+    <div
+      id={`plan-period-${period}`}
+      className={classNames(
+        { 'is-selected': period === selectedPeriod },
+        '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>
+  );
+}