Merge pull request #15830 from supabase/chore/redirect-org-subscription-pages

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)
   }

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>
               )}