Onboarding wizard and verif email (#10346)

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -15,6 +15,7 @@ import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 
 interface IUserSettingsProps {
   nextStep: () => void;
+  hideUsername?: boolean;
 }
 
 const UserSettings = (props: IUserSettingsProps) => {
@@ -66,8 +67,8 @@ const UserSettings = (props: IUserSettingsProps) => {
   return (
     <form onSubmit={onSubmit}>
       <div className="space-y-6">
-        {/* Username textfield */}
-        <UsernameAvailabilityField />
+        {/* Username textfield: when not coming from signup */}
+        {!props.hideUsername && <UsernameAvailabilityField />}
 
         {/* Full name textfield */}
         <div className="w-full">

apps/web/pages/api/auth/signup.ts

@@ -198,13 +198,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         id: foundToken.id,
       },
     });
+  } else {
+    await sendEmailVerification({
+      email: userEmail,
+      username,
+      language,
+    });
   }
 
-  await sendEmailVerification({
-    email: userEmail,
-    username,
-    language,
-  });
-
   res.status(201).json({ message: "Created user" });
 }

apps/web/pages/getting-started/[[...step]].tsx

@@ -42,6 +42,7 @@ const stepTransform = (step: (typeof steps)[number]) => {
 
 const stepRouteSchema = z.object({
   step: z.array(z.enum(steps)).default([INITIAL_STEP]),
+  from: z.string().optional(),
 });
 
 // TODO: Refactor how steps work to be contained in one array/object. Currently we have steps,initalsteps,headers etc. These can all be in one place
@@ -52,6 +53,7 @@ const OnboardingPage = () => {
 
   const result = stepRouteSchema.safeParse(router.query);
   const currentStep = result.success ? result.data.step[0] : INITIAL_STEP;
+  const from = result.success ? result.data.from : "";
 
   const headers = [
     {
@@ -141,7 +143,9 @@ const OnboardingPage = () => {
             </div>
             <StepCard>
               <Suspense fallback={<Loader />}>
-                {currentStep === "user-settings" && <UserSettings nextStep={() => goToIndex(1)} />}
+                {currentStep === "user-settings" && (
+                  <UserSettings nextStep={() => goToIndex(1)} hideUsername={from === "signup"} />
+                )}
                 {currentStep === "connected-calendar" && <ConnectedCalendars nextStep={() => goToIndex(2)} />}
 
                 {currentStep === "connected-video" && <ConnectedVideoStep nextStep={() => goToIndex(3)} />}

apps/web/pages/signup.tsx

@@ -78,9 +78,11 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
         const verifyOrGettingStarted = flags["email-verification"] ? "auth/verify-email" : "getting-started";
         await signIn<"credentials">("credentials", {
           ...data,
-          callbackUrl: router.query.callbackUrl
-            ? `${WEBAPP_URL}/${router.query.callbackUrl}`
-            : `${WEBAPP_URL}/${verifyOrGettingStarted}`,
+          callbackUrl: `${
+            router.query.callbackUrl
+              ? `${WEBAPP_URL}/${router.query.callbackUrl}`
+              : `${WEBAPP_URL}/${verifyOrGettingStarted}`
+          }?from=signup`,
         });
       })
       .catch((err) => {