From aa39aab93aaf8cdae165c815a0bc18888bc9ff0f Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Mon, 21 Feb 2022 14:56:55 +0200
Subject: [PATCH] fix(Billing): display payment methods only if subscription is
 not active.

---
 .../Subscriptions/BillingPaymentMethod.js     | 15 ++++++++++++
 .../Subscriptions/BillingPlansForm.js         | 24 +++++++++++++++++--
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/containers/Subscriptions/BillingPaymentMethod.js

diff --git a/src/containers/Subscriptions/BillingPaymentMethod.js b/src/containers/Subscriptions/BillingPaymentMethod.js
new file mode 100644
index 000000000..5c180cf38
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/containers/Subscriptions/BillingPlansForm.js b/src/containers/Subscriptions/BillingPlansForm.js
index 6eed7a77c..b26cfc89e 100644
--- a/src/containers/Subscriptions/BillingPlansForm.js
+++ b/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);