fix: plan redirect from pricing page (supabase#37231)

Author: kevcodez

apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx

@@ -68,11 +68,13 @@ interface NewOrgFormProps {
   onPlanSelected: (plan: string) => void
 }
 
+const plans = ['FREE', 'PRO', 'TEAM'] as const
+
 const formSchema = z.object({
   plan: z
     .string()
     .transform((val) => val.toUpperCase())
-    .pipe(z.enum(['FREE', 'PRO', 'TEAM', 'ENTERPRISE'] as const)),
+    .pipe(z.enum(plans)),
   name: z.string().min(1),
   kind: z
     .string()
@@ -149,9 +151,10 @@ const NewOrgForm = ({ onPaymentMethodReset, setupIntent, onPlanSelected }: NewOr
 
     if (typeof name === 'string') updateForm('name', name)
     if (typeof kind === 'string') updateForm('kind', kind)
-    if (typeof plan === 'string') {
-      updateForm('plan', plan)
-      onPlanSelected(plan)
+    if (typeof plan === 'string' && plans.includes(plan.toUpperCase() as (typeof plans)[number])) {
+      const uppercasedPlan = plan.toUpperCase() as (typeof plans)[number]
+      updateForm('plan', uppercasedPlan)
+      onPlanSelected(uppercasedPlan)
     }
     if (typeof size === 'string') updateForm('size', size)
     if (typeof spend_cap === 'string') updateForm('spend_cap', spend_cap === 'true')
@@ -251,8 +254,7 @@ const NewOrgForm = ({ onPaymentMethodReset, setupIntent, onPlanSelected }: NewOr
         | 'tier_payg'
         | 'tier_pro'
         | 'tier_free'
-        | 'tier_team'
-        | 'tier_enterprise',
+        | 'tier_team',
       ...(formState.kind == 'COMPANY' ? { size: formState.size } : {}),
       payment_method: paymentMethodId,
       billing_name: dbTier === 'FREE' ? undefined : customerData?.billing_name,

apps/www/components/Pricing/PricingComparisonTable.tsx

@@ -66,6 +66,7 @@ const MobileHeader = ({
             })
           }
           size="medium"
+          planId={selectedPlan.planId}
         />
       ) : (
         <Button asChild size="medium" type={plan === 'Enterprise' ? 'default' : 'primary'} block>
@@ -415,6 +416,7 @@ const PricingComparisonTable = ({
                               })
                             }
                             size="tiny"
+                            planId={plan.planId}
                           />
                         ) : (
                           <Button

apps/www/components/Pricing/PricingPlans.tsx

@@ -73,7 +73,11 @@ const PricingPlans = ({ organizations, hasExistingOrganizations }: PricingPlansP
                     {plan.description}
                   </p>
                   {isUpgradablePlan && hasExistingOrganizations ? (
-                    <UpgradePlan organizations={organizations} onClick={sendPricingEvent} />
+                    <UpgradePlan
+                      planId={plan.planId}
+                      organizations={organizations}
+                      onClick={sendPricingEvent}
+                    />
                   ) : (
                     <Button
                       block

apps/www/components/Pricing/UpgradePlan.tsx

@@ -1,6 +1,7 @@
 import { Check, ChevronsUpDown, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
+import { PlanId } from 'shared-data/plans'
 
 import {
   Button,
@@ -32,9 +33,10 @@ interface UpgradePlanProps {
   organizations?: Organization[]
   onClick?: () => void
   size?: ButtonProps['size']
+  planId: PlanId
 }
 
-const UpgradePlan = ({ organizations = [], onClick, size = 'large' }: UpgradePlanProps) => {
+const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: UpgradePlanProps) => {
   const [open, setOpen] = useState(false)
   const [value, setValue] = useState('')
 
@@ -142,7 +144,7 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large' }: UpgradePla
             <Link
               href={
                 value === 'new-organization'
-                  ? `/dashboard/new`
+                  ? `/dashboard/new?plan=${planId}`
                   : `/dashboard/org/${value}/billing?panel=subscriptionPlan`
               }
             >