re-structure to monorepo.

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

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+
+import '@/style/pages/Subscription/BillingPlans.scss';
+
+import BillingPlansInput from './BillingPlansInput';
+import BillingPeriodsInput from './BillingPeriodsInput';
+import BillingPaymentMethod from './BillingPaymentMethod';
+
+import withSubscriptions from './withSubscriptions';
+
+/**
+ * Billing plans form.
+ */
+export default function BillingPlansForm() {
+  return (
+    <div class="billing-plans">
+      <BillingPlansInput />
+      <BillingPeriodsInput />
+      <BillingPaymentMethodWhenSubscriptionInactive />
+    </div>
+  );
+}
+
+/**
+ * Billing payment methods when subscription is inactive.
+ * @returns {JSX.Element}
+ */
+function BillingPaymentMethodWhenSubscriptionInactiveJSX({
+  // # withSubscriptions
+  isSubscriptionActive,
+
+  ...props
+}) {
+  return !isSubscriptionActive ? <BillingPaymentMethod {...props} /> : null;
+}
+
+const BillingPaymentMethodWhenSubscriptionInactive = R.compose(
+  withSubscriptions(({ isSubscriptionActive }) => ({ isSubscriptionActive })),
+)(BillingPaymentMethodWhenSubscriptionInactiveJSX);