fix(web): update vercel completion request and redirect (#6349)

.cursorignore

@@ -0,0 +1,2 @@
+# Add directories or file patterns to ignore during indexing (e.g. foo/ or *.csv)
+apps/api/src/metadata.ts

apps/web/src/ee/clerk/EnterpriseAuthRoutes.tsx

@@ -6,19 +6,19 @@ import OrganizationListPage from './pages/OrganizationListPage';
 import QuestionnairePage from './pages/QuestionnairePage';
 import SignInPage from './pages/SignInPage';
 import SignUpPage from './pages/SignUpPage';
-import { useVercelIntegration, useVercelParams } from '../../hooks';
+import { useEffectOnce, useVercelIntegration, useVercelParams } from '../../hooks';
 import { useEffect } from 'react';
 
 export const EnterpriseAuthRoutes = () => {
   const { isSignedIn } = useAuth();
   const { startVercelSetup } = useVercelIntegration();
   const { isFromVercel } = useVercelParams();
 
-  useEffect(() => {
+  useEffectOnce(() => {
     if (isSignedIn && isFromVercel) {
       startVercelSetup();
     }
-  }, [isSignedIn, isFromVercel, startVercelSetup]);
+  }, !!(isSignedIn && isFromVercel));
 
   const EnterprisePublicAuthLayout = () => {
     return (

apps/web/src/ee/clerk/components/QuestionnaireForm.tsx

@@ -37,15 +37,8 @@ export function QuestionnaireForm() {
   const { startVercelSetup } = useVercelIntegration();
   const segment = useSegment();
   const location = useLocation();
-  const { initializeWebContainer } = useContainer();
   const [_, setParams] = useSearchParams();
 
-  useEffectOnce(() => {
-    if (isSupported) {
-      initializeWebContainer();
-    }
-  }, isPlaygroundOnboardingEnabled);
-
   const { mutateAsync: updateOrganizationMutation } = useMutation<{ _id: string }, IResponseError, any>(
     (data: UpdateExternalOrganizationDto) => updateClerkOrgMetadata(data)
   );
@@ -102,18 +95,28 @@ export function QuestionnaireForm() {
 
         setParams(searchParams);
 
-        setTimeout(() => {
-          startVercelSetup();
-        }, 1000);
-
-        return;
+        await new Promise<void>((resolve) => {
+          setTimeout(async () => {
+            try {
+              await startVercelSetup();
+
+              return;
+            } catch (e) {
+              // eslint-disable-next-line no-console
+              console.error(e);
+            } finally {
+              localStorage.removeItem('vercel_redirect_data');
+              resolve();
+            }
+          }, 1000);
+        });
       } else {
         localStorage.removeItem('vercel_redirect_data');
       }
     }
 
     if (isV2Enabled) {
-      navigate(ROUTES.DASHBOARD_ONBOARDING);
+      navigate(ROUTES.GET_STARTED);
 
       return;
     }

apps/web/src/hooks/useVercelIntegration.ts

@@ -17,7 +17,7 @@ export function useVercelIntegration() {
 
   const navigate = useNavigate();
 
-  const { mutate, isLoading } = useMutation(vercelIntegrationSetup, {
+  const { mutateAsync, isLoading } = useMutation(vercelIntegrationSetup, {
     onSuccess: () => {
       if (next && configurationId) {
         navigate(`/partner-integrations/vercel/link-projects?configuration_id=${configurationId}&next=${next}`);
@@ -30,13 +30,13 @@ export function useVercelIntegration() {
     },
   });
 
-  const startVercelSetup = useCallback(() => {
+  async function startVercelSetup() {
     if (!canStartSetup || !code || !configurationId) {
       return;
     }
 
-    mutate({ vercelIntegrationCode: code, configurationId });
-  }, [canStartSetup, code, mutate, configurationId]);
+    await mutateAsync({ vercelIntegrationCode: code, configurationId });
+  }
 
   return {
     isLoading,

apps/web/src/pages/get-started/tabs/Setup.tsx

@@ -34,71 +34,6 @@ export const buildGuides = [
           return <CodeSnippet command={`cd my-novu-app && npm run dev`} />;
         },
       },
-      {
-        title: 'Create a workflow',
-        content: () => {
-          return (
-            <div>
-              <TextElement>
-                To define a new workflow you will use the <Code>@novu/framework</Code> Typescript SDK.
-                <br />
-                In a new file let's define a workflow with a simple email step.
-                <br /> <br />
-              </TextElement>
-
-              <CodeEditor
-                height="300px"
-                readonly
-                setCode={() => {}}
-                code={`import { workflow } from '@novu/framework';
-
-export const myWorkflow = workflow('my-workflow', async ({ step }) => {
-  await step.email('step', async (controls) => {
-    return {
-      subject: controls.subject,
-      body: '<h1>Hello World</h1>',
-    }
-  }, {
-    controlSchema: z.object({
-      subject: z.string().default('Hello World'),
-    })
-  })
-});`}
-              />
-
-              <HStack gap="50" className={css({ color: 'typography.text.secondary', mt: '12px' })}>
-                <IconOutlineMenuBook />
-                <a href="https://docs.novu.co/workflow/introduction" target={'_blank'}>
-                  Learn more on building workflows
-                </a>
-              </HStack>
-            </div>
-          );
-        },
-      },
-      {
-        title: 'Expose your workflow',
-        content: () => {
-          return (
-            <>
-              <TextElement>
-                Once a workflow has been created, we would need to expose it to the <code>serve</code> function so that
-                it will be visible on the Novu Studio.
-              </TextElement>
-              <br /> <br />
-              <CodeEditor
-                height="100px"
-                readonly
-                setCode={() => {}}
-                code={`import { serve } from '@novu/framework/next';
-import { myWorkflow } from '../../novu/workflows';
-
-export const { GET, POST, OPTIONS } = serve({ workflows: [myWorkflow] });`}
-              />
-            </>
-          );
-        },
-      },
       {
         title: 'Run Novu Studio',
         content: () => {

apps/web/src/pages/playground/onboarding/PlaygroundTourGuide.tsx

@@ -49,7 +49,7 @@ export function TourGuideComponent({
               <Accordion.Control>SMS</Accordion.Control>
               <Accordion.Panel>
                 An SMS Step can be added to your workflow by using the following snippet:
-                <Code block style={{ marginTop: '10px' }}>
+                <Code block style={{ marginTop: '10px', fontSize: '14px' }}>
                   {`await step.sms('sms-step', () => {
   return {
     body: 'Hello, world!',
@@ -62,7 +62,7 @@ export function TourGuideComponent({
               <Accordion.Control>Inbox</Accordion.Control>
               <Accordion.Panel>
                 An Inbox Step can be added to your workflow by using the following snippet:
-                <Code block style={{ marginTop: '10px' }}>
+                <Code block style={{ marginTop: '10px', fontSize: '14px' }}>
                   {`await step.inApp('inApp-step', () => {
   return {
     body: 'Hello, world!',
@@ -75,7 +75,7 @@ export function TourGuideComponent({
               <Accordion.Control>Digest</Accordion.Control>
               <Accordion.Panel>
                 A Digest Step can be added to your workflow by using the following snippet:
-                <Code block style={{ marginTop: '10px' }}>
+                <Code block style={{ marginTop: '10px', fontSize: '14px' }}>
                   {`const { events } = await step.digest('digest-step', async () => {
     return {
         amount: 1,
@@ -89,7 +89,7 @@ export function TourGuideComponent({
               <Accordion.Control>Delay</Accordion.Control>
               <Accordion.Panel>
                 A Delay Step can be added to your workflow by using the following snippet:
-                <Code block style={{ marginTop: '10px' }}>
+                <Code block style={{ marginTop: '10px', fontSize: '14px' }}>
                   {`await step.delay('delay-step', () => {
   return {
     amount: 1,