From 12a31b8dced47f6a1f28370b46a89569bf54d562 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Mon, 17 Jul 2023 13:40:21 +0200
Subject: [PATCH] chore: redirect from project to org billing pages

---
 .../BillingV2/Subscription/Subscription.tsx   | 31 +++++++++++++++++++
 .../Subscription/Subscription.tsx             |  4 +--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx
index bde2e625517..655ee5d6210 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx
@@ -5,6 +5,8 @@ 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'
+import ProjectBackupsStore from 'stores/project/ProjectBackupsStore'
 
 export interface SubscriptionProps {}
 
@@ -23,6 +25,35 @@ const Subscription = ({}: SubscriptionProps) => {
   const panel = router.query.panel
   const isOrgBilling = !!organization?.subscription_id
 
+  useEffect(() => {
+    if (isOrgBilling) {
+      const { ref, panel } = router.query
+      let redirectUri = `/org/${organization.slug}/billing`
+      switch (panel) {
+        case 'subscriptionPlan':
+          redirectUri = `/org/${organization.slug}/billing?panel=subscriptionPlan`
+          break
+        case 'costControl':
+          redirectUri = `/org/${organization.slug}/billing?panel=costControl`
+          break
+        case 'computeInstance':
+          redirectUri = `/project/${ref}/settings/addons?panel=computeInstance`
+          break
+        case 'pitr':
+          redirectUri = `/project/${ref}/settings/addons?panel=pitr`
+          break
+        case 'customDomain':
+          redirectUri = `/project/${ref}/settings/addons?panel=customDomain`
+          break
+      }
+
+      router.push(redirectUri)
+    }
+  }, [router, organization?.slug, isOrgBilling])
+
+  // 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)
   }
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
index 868b1de4937..c9a0cddd703 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
@@ -141,7 +141,7 @@ const Subscription = () => {
                     )
                   }
                 >
-                  <p className="text-sm text-scale-1000 mr-2">
+                  <div className="text-sm text-scale-1000 mr-2">
                     When this organization exceeds its{' '}
                     <Link href="#breakdown">
                       <a className="text-sm text-green-900 transition hover:text-green-1000">
@@ -160,7 +160,7 @@ const Subscription = () => {
                         over-usage, you can adjust your Cost Control settings.
                       </p>
                     )}
-                  </p>
+                  </div>
                 </Alert>
               )}