From dcddadb0bfde5bfc369bfe978c336978228d96cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Mon, 31 Jul 2023 18:13:47 +0200
Subject: [PATCH] Update Subscription.tsx

---
 .../BillingV2/Subscription/Subscription.tsx       | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx
index d0c42f0c4ab..44d6b61b008 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx
@@ -5,10 +5,11 @@ import CostControl from './CostControl/CostControl'
 import SubscriptionTier from './Tier/SubscriptionTier'
 import { SUBSCRIPTION_PANEL_KEYS, useSubscriptionPageStateSnapshot } from 'state/subscription-page'
 import { useSelectedOrganization } from 'hooks'
+import { useEffect } from 'react'
 
-export interface SubscriptionProps {}
+export interface SubscriptionProps { }
 
-const Subscription = ({}: SubscriptionProps) => {
+const Subscription = ({ }: SubscriptionProps) => {
   const router = useRouter()
   const organization = useSelectedOrganization()
   const snap = useSubscriptionPageStateSnapshot()
@@ -23,13 +24,15 @@ const Subscription = ({}: SubscriptionProps) => {
   const panel = router.query.panel
   const isOrgBilling = !!organization?.subscription_id
 
+  useEffect(() => {
+    if (panel && typeof panel === 'string' && allowedValues.includes(panel)) {
+      snap.setPanelKey(panel as SUBSCRIPTION_PANEL_KEYS)
+    }
+  }, [panel])
+
   // No need to bother rendering, we'll redirect anyway
   if (isOrgBilling) return null
 
-  if (panel && typeof panel === 'string' && allowedValues.includes(panel)) {
-    snap.setPanelKey(panel as SUBSCRIPTION_PANEL_KEYS)
-  }
-
   return (
     <>
       <div className="border-b">