🚸 (billing) Add precheckout form

Collects required company name and email and create the customer before redirecting to checkout

apps/builder/src/features/dashboard/components/DashboardPage.tsx

@@ -1,8 +1,11 @@
 import { Seo } from '@/components/Seo'
 import { useUser } from '@/features/account'
+import {
+  PreCheckoutModal,
+  PreCheckoutModalProps,
+} from '@/features/billing/components/PreCheckoutModal'
 import { TypebotDndProvider, FolderContent } from '@/features/folders'
 import { useWorkspace } from '@/features/workspace'
-import { trpc } from '@/lib/trpc'
 import { Stack, VStack, Spinner, Text } from '@chakra-ui/react'
 import { Plan } from 'db'
 import { useRouter } from 'next/router'
@@ -12,15 +15,11 @@ import { DashboardHeader } from './DashboardHeader'
 
 export const DashboardPage = () => {
   const [isLoading, setIsLoading] = useState(false)
-  const { query, push } = useRouter()
+  const { query } = useRouter()
   const { user } = useUser()
   const { workspace } = useWorkspace()
-  const { mutate: createCheckoutSession } =
-    trpc.billing.createCheckoutSession.useMutation({
-      onSuccess: (data) => {
-        push(data.checkoutUrl)
-      },
-    })
+  const [preCheckoutPlan, setPreCheckoutPlan] =
+    useState<PreCheckoutModalProps['selectedSubscription']>()
 
   useEffect(() => {
     const { subscribePlan, chats, storage } = query as {
@@ -30,22 +29,28 @@ export const DashboardPage = () => {
     }
     if (workspace && subscribePlan && user && workspace.plan === 'FREE') {
       setIsLoading(true)
-      createCheckoutSession({
+      setPreCheckoutPlan({
         plan: subscribePlan as 'PRO' | 'STARTER',
         workspaceId: workspace.id,
         additionalChats: chats ? parseInt(chats) : 0,
         additionalStorage: storage ? parseInt(storage) : 0,
-        returnUrl: window.location.href,
         currency: guessIfUserIsEuropean() ? 'eur' : 'usd',
-        prefilledEmail: user.email ?? undefined,
       })
     }
-  }, [createCheckoutSession, query, user, workspace])
+  }, [query, user, workspace])
 
   return (
     <Stack minH="100vh">
       <Seo title={workspace?.name ?? 'My typebots'} />
       <DashboardHeader />
+      {!workspace?.stripeId && (
+        <PreCheckoutModal
+          selectedSubscription={preCheckoutPlan}
+          existingEmail={user?.email ?? undefined}
+          existingCompany={workspace?.name ?? undefined}
+          onClose={() => setPreCheckoutPlan(undefined)}
+        />
+      )}
       <TypebotDndProvider>
         {isLoading ? (
           <VStack w="full" justifyContent="center" pt="10" spacing={6}>