From c7232bbdbec23f9f9feffc8e9a5e38480dcf2e01 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Sun, 6 Mar 2022 20:51:27 +0800
Subject: [PATCH] Fix current plan label

---
 .../interfaces/Billing/PlanSelection/Plans/Plans.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx b/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx
index ebf2c8d3942..3d315a8502e 100644
--- a/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx
+++ b/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx
@@ -36,6 +36,11 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
   return (
     <div className="flex justify-between space-x-4">
       {plans.map((plan) => {
+        const isCurrentPlan =
+          plan.id === currentPlan?.prod_id ||
+          (plan.id === STRIPE_PRODUCT_IDS.PRO && currentPlan?.prod_id === STRIPE_PRODUCT_IDS.PRO) ||
+          (plan.id === STRIPE_PRODUCT_IDS.PRO && currentPlan?.prod_id === STRIPE_PRODUCT_IDS.PAYG)
+
         return (
           <div
             key={plan.name}
@@ -49,12 +54,7 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
             {plan.id === STRIPE_PRODUCT_IDS.PRO && <AnimatedGradientBackground />}
 
             {/* Label to show current subscription (Pro and PAYG are treated as the same plan on the UI) */}
-            {plan.id === currentPlan?.prod_id ||
-              (plan.id === STRIPE_PRODUCT_IDS.PRO &&
-                (currentPlan?.prod_id === STRIPE_PRODUCT_IDS.PRO ||
-                  currentPlan?.prod_id === STRIPE_PRODUCT_IDS.PAYG) && (
-                  <CurrentSubscriptionBanner />
-                ))}
+            {isCurrentPlan && <CurrentSubscriptionBanner />}
 
             <div className="mb-8">
               <div className="flex items-center space-x-4">