fix(Billing): display payment methods only if subscription is not active.

src/containers/Subscriptions/BillingPaymentMethod.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { T } from 'components';
+import { PaymentMethodTabs } from './SubscriptionTabs';
+
+export default ({ formik, title, description }) => {
+  return (
+    <section class="billing-plans__section">
+      <h1 className="title"><T id={'setup.plans.payment_methods.title'} /></h1>
+      <p className="paragraph"><T id={'setup.plans.payment_methods.description' } /></p>
+
+      <PaymentMethodTabs formik={formik} />
+    </section>
+  );
+};

src/containers/Subscriptions/BillingPlansForm.js

@@ -1,10 +1,13 @@
 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 BillingPaymentMethod from './BillingPaymentMethod';
+
+import withSubscriptions from './withSubscriptions';
 
 /**
  * Billing plans form.
@@ -14,7 +17,24 @@ export default function BillingPlansForm() {
     <div class="billing-plans">
       <BillingPlansInput />
       <BillingPeriodsInput />
-      {/* <BillingPaymentMethod /> */}
+      <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);