feat: new org onboarding wizard

apps/api/v1/pages/api/teams/_post.ts

@@ -2,6 +2,7 @@ import type { NextApiRequest } from "next";
 
 import { getStripeCustomerIdFromUserId } from "@calcom/app-store/stripepayment/lib/customer";
 import stripe from "@calcom/app-store/stripepayment/lib/server";
+import { IS_PRODUCTION } from "@calcom/lib/constants";
 import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
@@ -197,8 +198,9 @@ const generateTeamCheckoutSession = async ({
     customer_update: {
       address: "auto",
     },
+    // Disabled when testing locally as usually developer doesn't setup Tax in Stripe Test mode
     automatic_tax: {
-      enabled: true,
+      enabled: IS_PRODUCTION,
     },
     metadata: {
       pendingPaymentTeamId,

apps/web/pages/settings/organizations/[id]/add-teams.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { redirect, useRouter } from "next/navigation";
-
 import { AddNewTeamsForm } from "@calcom/features/ee/organizations/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Meta, WizardLayout } from "@calcom/ui";
@@ -22,16 +20,8 @@ const AddNewTeamsPage = () => {
 };
 
 AddNewTeamsPage.getLayout = (page: React.ReactElement) => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const router = useRouter();
-
   return (
-    <WizardLayout
-      currentStep={5}
-      maxSteps={5}
-      isOptionalCallback={() => {
-        router.push(`/event-types`);
-      }}>
+    <WizardLayout currentStep={5} maxSteps={5}>
       {page}
     </WizardLayout>
   );
@@ -41,12 +31,7 @@ AddNewTeamsPage.PageWrapper = PageWrapper;
 
 export const WrapperAddNewTeamsPage = (page: React.ReactElement) => {
   return (
-    <WizardLayoutAppDir
-      currentStep={5}
-      maxSteps={5}
-      isOptionalCallback={() => {
-        redirect(`/event-types`);
-      }}>
+    <WizardLayoutAppDir currentStep={5} maxSteps={5}>
       {page}
     </WizardLayoutAppDir>
   );

apps/web/pages/settings/organizations/new/index.tsx

@@ -10,12 +10,12 @@
 
 import PageWrapper from "@components/PageWrapper";
 
 const CreateNewOrganizationPage = ({ querySlug }: inferSSRProps<typeof getServerSideProps>) => {
   const { t } = useLocale();
   return (
     <LicenseRequired>
       <Meta title={t("set_up_your_organization")} description={t("organizations_description")} />
-      <CreateANewOrganizationForm slug={querySlug} />
+      <CreateANewOrganizationForm />
     </LicenseRequired>
   );
 };

apps/web/playwright/fixtures/users.ts

@@ -107,17 +107,22 @@
     isOrgVerified,
     hasSubteam,
     organizationId,
+    isDnsSetup,
+    index,
   }: {
     user: { id: number; email: string; username: string | null; role?: MembershipRole };
     isUnpublished?: boolean;
     isOrg?: boolean;
     isOrgVerified?: boolean;
+    isDnsSetup?: boolean;
     hasSubteam?: true;
     organizationId?: number | null;
+    index?: number;
   },
   workerInfo: WorkerInfo
 ) => {
-  const slug = `${isOrg ? "org" : "team"}-${workerInfo.workerIndex}-${Date.now()}`;
+  const slugIndex = index ? `-count-${index}` : "";
+  const slug = `${isOrg ? "org" : "team"}-${workerInfo.workerIndex}-${Date.now()}${slugIndex}`;
   const data: PrismaType.TeamCreateInput = {
     name: `user-id-${user.id}'s ${isOrg ? "Org" : "Team"}`,
     isOrganization: isOrg,
@@ -128,9 +133,9 @@
   if (isOrg) {
     data.organizationSettings = {
       create: {
-        isOrganizationVerified: !!isOrgVerified,
         orgAutoAcceptEmail: user.email.split("@")[1],
-        isOrganizationConfigured: false,
+        isOrganizationVerified: !!isOrgVerified,
+        isOrganizationConfigured: isDnsSetup,
       },
     };
   }
@@ -211,6 +216,7 @@
       scenario: {
         seedRoutingForms?: boolean;
         hasTeam?: true;
+        numberOfTeams?: number;
         teamRole?: MembershipRole;
         teammates?: CustomUserOpts[];
         schedulingType?: SchedulingType;
@@ -219,6 +225,7 @@
         teamEventLength?: number;
         isOrg?: boolean;
         isOrgVerified?: boolean;
+        isDnsSetup?: boolean;
         hasSubteam?: true;
         isUnpublished?: true;
       } = {}
@@ -382,103 +389,108 @@
         include: userIncludes,
       });
       if (scenario.hasTeam) {
-        const team = await createTeamAndAddUser(
-          {
-            user: {
-              id: user.id,
-              email: user.email,
-              username: user.username,
-              role: scenario.teamRole || "OWNER",
-            },
-            isUnpublished: scenario.isUnpublished,
-            isOrg: scenario.isOrg,
-            isOrgVerified: scenario.isOrgVerified,
-            hasSubteam: scenario.hasSubteam,
-            organizationId: opts?.organizationId,
-          },
-          workerInfo
-        );
-        store.teams.push(team);
-        const teamEvent = await createTeamEventType(user, team, scenario);
-        if (scenario.teammates) {
-          // Create Teammate users
-          const teamMates = [];
-          for (const teammateObj of scenario.teammates) {
-            const teamUser = await prisma.user.create({
-              data: createUser(workerInfo, teammateObj),
-            });
-
-            // Add teammates to the team
-            await prisma.membership.create({
-              data: {
-                teamId: team.id,
-                userId: teamUser.id,
-                role: MembershipRole.MEMBER,
-                accepted: true,
-              },
-            });
-
-            // Add teammate to the host list of team event
-            await prisma.host.create({
-              data: {
-                userId: teamUser.id,
-                eventTypeId: teamEvent.id,
-                isFixed: scenario.schedulingType === SchedulingType.COLLECTIVE ? true : false,
+        const numberOfTeams = scenario.numberOfTeams || 1;
+        for (let i = 0; i < numberOfTeams; i++) {
+          const team = await createTeamAndAddUser(
+            {
+              user: {
+                id: user.id,
+                email: user.email,
+                username: user.username,
+                role: scenario.teamRole || "OWNER",
               },
-            });
-
-            const teammateFixture = createUserFixture(
-              await prisma.user.findUniqueOrThrow({
-                where: { id: teamUser.id },
-                include: userIncludes,
-              }),
-              store.page
-            );
-            teamMates.push(teamUser);
-            store.users.push(teammateFixture);
-          }
-          // Add Teammates to OrgUsers
-          if (scenario.isOrg) {
-            const orgProfilesCreate = teamMates
-              .map((teamUser) => ({
-                user: {
-                  connect: {
-                    id: teamUser.id,
-                  },
+              isUnpublished: scenario.isUnpublished,
+              isOrg: scenario.isOrg,
+              isOrgVerified: scenario.isOrgVerified,
+              isDnsSetup: scenario.isDnsSetup,
+              hasSubteam: scenario.hasSubteam,
+              organizationId: opts?.organizationId,
+            },
+            workerInfo
+          );
+          store.teams.push(team);
+          const teamEvent = await createTeamEventType(user, team, scenario);
+          if (scenario.teammates) {
+            // Create Teammate users
+            const teamMates = [];
+            for (const teammateObj of scenario.teammates) {
+              const teamUser = await prisma.user.create({
+                data: createUser(workerInfo, teammateObj),
+              });
+
+              // Add teammates to the team
+              await prisma.membership.create({
+                data: {
+                  teamId: team.id,
+                  userId: teamUser.id,
+                  role: MembershipRole.MEMBER,
+                  accepted: true,
                 },
-                uid: v4(),
-                username: teamUser.username || teamUser.email.split("@")[0],
-              }))
-              .concat([
-                {
-                  user: { connect: { id: user.id } },
-                  uid: v4(),
-                  username: user.username || user.email.split("@")[0],
+              });
+
+              // Add teammate to the host list of team event
+              await prisma.host.create({
+                data: {
+                  userId: teamUser.id,
+                  eventTypeId: teamEvent.id,
+                  isFixed: scenario.schedulingType === SchedulingType.COLLECTIVE ? true : false,
                 },
-              ]);
+              });
+
+              const teammateFixture = createUserFixture(
+                await prisma.user.findUniqueOrThrow({
+                  where: { id: teamUser.id },
+                  include: userIncludes,
+                }),
+                store.page
+              );
+              teamMates.push(teamUser);
+              store.users.push(teammateFixture);
+            }
+            // Add Teammates to OrgUsers
+            if (scenario.isOrg) {
+              const orgProfilesCreate = teamMates
+                .map((teamUser) => ({
+                  user: {
+                    connect: {
+                      id: teamUser.id,
+                    },
+                  },
+                  uid: v4(),
+                  username: teamUser.username || teamUser.email.split("@")[0],
+                }))
+                .concat([
+                  {
+                    user: { connect: { id: user.id } },
+                    uid: v4(),
+                    username: user.username || user.email.split("@")[0],
+                  },
+                ]);
 
-            const existingProfiles = await prisma.profile.findMany({
-              where: {
-                userId: _user.id,
-              },
-            });
+              const existingProfiles = await prisma.profile.findMany({
+                where: {
+                  userId: _user.id,
+                },
+              });
 
-            await prisma.team.update({
-              where: {
-                id: team.id,
-              },
-              data: {
-                orgProfiles: _user.profiles.length
-                  ? {
-                      connect: _user.profiles.map((profile) => ({ id: profile.id })),
-                    }
-                  : {
-                      create: orgProfilesCreate.filter(
-                        (profile) => !existingProfiles.map((p) => p.userId).includes(profile.user.connect.id)
-                      ),
-                    },
-              },
-            });
+              await prisma.team.update({
+                where: {
+                  id: team.id,
+                },
+                data: {
+                  orgProfiles: _user.profiles.length
+                    ? {
+                        connect: _user.profiles.map((profile) => ({ id: profile.id })),
+                      }
+                    : {
+                        create: orgProfilesCreate.filter(
+                          (profile) =>
+                            !existingProfiles.map((p) => p.userId).includes(profile.user.connect.id)
+                        ),
+                      },
+                },
+              });
+            }
           }
         }
       }
@@ -842,7 +854,7 @@
 ) {
   const csrfToken = await page
     .context()
     .request.get("/api/auth/csrf")
     .then((response) => response.json())
     .then((json) => json.csrfToken);
   const data = {
@@ -877,7 +889,7 @@
   await page.fill('[name="name"]', "Stripe Stripeson");
   await page.fill('[name="email"]', "test@example.com");
 
   await Promise.all([page.waitForURL("/payment/*"), page.press('[name="email"]', "Enter")]);
 
   await makePaymentUsingStripe(page);
 }

apps/web/playwright/lib/testUtils.ts

@@ -196,7 +196,7 @@
     previewLink = `/forms/${formId}`;
   }
 
   await page.goto(`${previewLink}${queryString ? `?${queryString}` : ""}`);
 
   // HACK: There seems to be some issue with the inputs to the form getting reset if we don't wait.
   await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -347,6 +347,8 @@
   await page.fill("[name=cardExpiry]", "12/30");
   await page.fill("[name=cardCvc]", "111");
   await page.fill("[name=billingName]", "Stripe Stripeson");
+  await page.selectOption("[name=billingCountry]", "US");
+  await page.fill("[name=billingPostalCode]", "12345");
   await page.click(".SubmitButton--complete-Shimmer");
 }