fix: confirmation modal on paid org creation (supabase#39857)

kevcodez · joshenlim · web-flow · commit 03c1cc0500c4 · 2025-10-25T17:54:45.000+08:00
* fix: confirmation modal org creation

The button when confirming org creation was not working as it was just returning early.

The submit handler is triggered both on initially clicking the "Create organization" button and on the confirmation button, but it always early returns if the customer has other free plan orgs with projects, so it doesn't let the customer submit the form
12:44
How to reproduce:
- Create a free plan org with an active project
- Create a new paid plan organization
- Confirmation modal appears
- Clicking the button just closes the modal and does not create the org as there is an early return in the onSubmit handler

Moved away from ConfirmationModal to an inline info instead

* Update NewOrgForm.tsx

* Nit refactor

---------

Co-authored-by: Joshen Lim &lt;joshenlimek@gmail.com&gt;
diff --git a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
@@ -2,10 +2,9 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Elements } from '@stripe/react-stripe-js'
 import type { PaymentIntentResult, PaymentMethod, StripeElementsOptions } from '@stripe/stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
-import _ from 'lodash'
+import { groupBy } from 'lodash'
 import { HelpCircle } from 'lucide-react'
 import { useTheme } from 'next-themes'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { parseAsBoolean, parseAsString, useQueryStates } from 'nuqs'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -16,6 +15,10 @@ import { z } from 'zod'
 import { LOCAL_STORAGE_KEYS } from 'common'
 import { getStripeElementsAppearanceOptions } from 'components/interfaces/Billing/Payment/Payment.utils'
 import { PaymentConfirmation } from 'components/interfaces/Billing/Payment/PaymentConfirmation'
+import {
+  NewPaymentMethodElement,
+  type PaymentMethodElementRef,
+} from 'components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement'
 import SpendCapModal from 'components/interfaces/Billing/SpendCapModal'
 import { InlineLink } from 'components/ui/InlineLink'
 import Panel from 'components/ui/Panel'
@@ -41,16 +44,9 @@ import {
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
   Switch,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
 } from 'ui'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import {
-  NewPaymentMethodElement,
-  type PaymentMethodElementRef,
-} from '../../Billing/Payment/PaymentMethods/NewPaymentMethodElement'
+import { UpgradeExistingOrganizationCallout } from './UpgradeExistingOrganizationCallout'
 
 const ORG_KIND_TYPES = {
   PERSONAL: 'Personal',
@@ -132,12 +128,9 @@ export const NewOrgForm = ({
   // in onSubmit below, which isn't a critical functionality imo so am okay for now. But ideally perhaps this data can
   // be computed on the API and returned in /profile or something (since this data is on the account level)
   const projectsByOrg = useMemo(() => {
-    return _.groupBy(projects, 'organization_slug')
+    return groupBy(projects, 'organization_slug')
   }, [projects])
 
-  const [isOrgCreationConfirmationModalVisible, setIsOrgCreationConfirmationModalVisible] =
-    useState(false)
-
   const stripeOptionsPaymentMethod: StripeElementsOptions = useMemo(
     () =>
       ({
@@ -198,6 +191,11 @@ export const NewOrgForm = ({
   const [showSpendCapHelperModal, setShowSpendCapHelperModal] = useState(false)
   const [paymentIntentSecret, setPaymentIntentSecret] = useState<string | null>(null)
 
+  const hasFreeOrgWithProjects = useMemo(
+    () => freeOrgs.some((it) => projectsByOrg[it.slug]?.length > 0),
+    [freeOrgs, projectsByOrg]
+  )
+
   const { mutate: createOrganization } = useOrganizationCreateMutation({
     onSuccess: async (org) => {
       if ('pending_payment_intent_secret' in org && org.pending_payment_intent_secret) {
@@ -299,13 +297,6 @@ export const NewOrgForm = ({
   const paymentRef = useRef<PaymentMethodElementRef | null>(null)
 
   const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (formValues) => {
-    const hasFreeOrgWithProjects = freeOrgs.some((it) => projectsByOrg[it.slug]?.length > 0)
-
-    if (hasFreeOrgWithProjects && formValues.plan !== 'FREE') {
-      setIsOrgCreationConfirmationModalVisible(true)
-      return
-    }
-
     setNewOrgLoading(true)
 
     if (formValues.plan === 'FREE') {
@@ -478,15 +469,7 @@ export const NewOrgForm = ({
                       description={
                         <>
                           Which plan fits your organization's needs best?{' '}
-                          <InlineLink
-                            href="https://supabase.com/pricing"
-                            target="_blank"
-                            rel="noreferrer"
-                            className="text-inherit hover:text-foreground transition-colors"
-                          >
-                            Learn more
-                          </InlineLink>
-                          .
+                          <InlineLink href="https://supabase.com/pricing">Learn more</InlineLink>.
                         </>
                       }
                     >
@@ -569,86 +552,13 @@ export const NewOrgForm = ({
                 </Elements>
               </Panel.Content>
             )}
+
+            {hasFreeOrgWithProjects && form.getValues('plan') !== 'FREE' && (
+              <UpgradeExistingOrganizationCallout />
+            )}
           </div>
         </Panel>
 
-        <ConfirmationModal
-          size="large"
-          loading={newOrgLoading}
-          visible={isOrgCreationConfirmationModalVisible}
-          title="Confirm organization creation"
-          confirmLabel="Create new organization"
-          onCancel={() => setIsOrgCreationConfirmationModalVisible(false)}
-          onConfirm={async () => {
-            await onSubmit(form.getValues())
-            setIsOrgCreationConfirmationModalVisible(false)
-          }}
-          variant={'warning'}
-        >
-          <p className="text-sm text-foreground-light">
-            Supabase{' '}
-            <InlineLink
-              href="https://supabase.com/docs/guides/platform/billing-on-supabase"
-              target="_blank"
-              rel="noreferrer"
-              className="text-inherit hover:text-foreground transition-colors"
-            >
-              bills per organization
-            </InlineLink>
-            . If you want to upgrade your existing projects, upgrade your existing organization
-            instead.
-          </p>
-
-          <ul className="mt-4 divide-y divide-border-muted border-t border-t-border-muted">
-            {freeOrgs
-              .filter((it) => projectsByOrg[it.slug]?.length > 0)
-              .map((org) => {
-                const orgProjects = projectsByOrg[org.slug].map((it) => it.name)
-
-                return (
-                  <li
-                    key={`org_${org.slug}`}
-                    className="pt-3 [&:not(:last-child)]:pb-3 flex items-center justify-between"
-                  >
-                    <div className="flex flex-col">
-                      <h3 className="text-sm">{org.name}</h3>
-
-                      <div className="text-foreground-lighter text-xs">
-                        {orgProjects.length <= 2 ? (
-                          <span>{orgProjects.join(' and ')}</span>
-                        ) : (
-                          <div>
-                            {orgProjects.slice(0, 2).join(', ')} and{' '}
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <span className="underline decoration-dotted">
-                                  {orgProjects.length - 2} other{' '}
-                                  {orgProjects.length === 3 ? 'project' : 'project'}
-                                </span>
-                              </TooltipTrigger>
-                              <TooltipContent>
-                                <ul className="list-disc list-inside">
-                                  {orgProjects.slice(2).map((project) => (
-                                    <li>{project}</li>
-                                  ))}
-                                </ul>
-                              </TooltipContent>
-                            </Tooltip>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    <Button asChild type="default" size="tiny">
-                      <Link href={`/org/${org.slug}/billing?panel=subscriptionPlan`}>
-                        Change plan
-                      </Link>
-                    </Button>
-                  </li>
-                )
-              })}
-          </ul>
-        </ConfirmationModal>
-
         {stripePromise && paymentIntentSecret && paymentMethod && (
           <Elements stripe={stripePromise} options={stripeOptionsConfirm}>
             <PaymentConfirmation
diff --git a/apps/studio/components/interfaces/Organization/NewOrg/UpgradeExistingOrganizationCallout.tsx b/apps/studio/components/interfaces/Organization/NewOrg/UpgradeExistingOrganizationCallout.tsx
@@ -0,0 +1,29 @@
+import { InlineLink } from 'components/ui/InlineLink'
+import Panel from 'components/ui/Panel'
+import { Admonition } from 'ui-patterns'
+
+export const UpgradeExistingOrganizationCallout = () => {
+  return (
+    <Panel.Content>
+      <Admonition
+        type="default"
+        title="Looking to upgrade an existing project?"
+        description={
+          <div>
+            <p className="text-sm text-foreground-light">
+              Supabase{' '}
+              <InlineLink href="https://supabase.com/docs/guides/platform/billing-on-supabase">
+                bills per organization
+              </InlineLink>
+              . If you want to upgrade your existing projects,{' '}
+              <InlineLink href="/org/_/billing?panel=subscriptionPlan">
+                upgrade your existing organization
+              </InlineLink>{' '}
+              instead.
+            </p>
+          </div>
+        }
+      />
+    </Panel.Content>
+  )
+}
diff --git a/apps/studio/pages/new/[slug].tsx b/apps/studio/pages/new/[slug].tsx
@@ -43,7 +43,6 @@ import {
   ProjectCreateVariables,
   useProjectCreateMutation,
 } from 'data/projects/project-create-mutation'
-import { useTrack } from 'lib/telemetry/track'
 import { useCustomContent } from 'hooks/custom-content/useCustomContent'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
@@ -63,6 +62,7 @@ import {
 } from 'lib/constants'
 import passwordStrength from 'lib/password-strength'
 import { generateStrongPassword } from 'lib/project'
+import { useTrack } from 'lib/telemetry/track'
 import { AWS_REGIONS, type CloudProvider } from 'shared-data'
 import type { NextPageWithLayout } from 'types'
 import {
@@ -772,18 +772,12 @@ const Wizard: NextPageWithLayout = () => {
                                     The size for your dedicated database. You can change this later.
                                     Learn more about{' '}
                                     <InlineLink
-                                      target="_blank"
-                                      rel="noopener noreferrer"
-                                      className="text-inherit hover:text-foreground transition-colors"
                                       href={`${DOCS_URL}/guides/platform/compute-add-ons`}
                                     >
                                       compute add-ons
                                     </InlineLink>{' '}
                                     and{' '}
                                     <InlineLink
-                                      target="_blank"
-                                      rel="noopener noreferrer"
-                                      className="text-inherit hover:text-foreground transition-colors"
                                       href={`${DOCS_URL}/guides/platform/manage-your-usage/compute`}
                                     >
                                       compute billing
