From b4fd6f3442ac65fa2273e029330acaeef85c685e Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Wed, 18 Dec 2024 14:05:17 -0500 Subject: [PATCH] chore: bring back removed onboarding steps (#18254) * add connected-calendar and connected-video steps back * adapt test * fix name --- .../[[...step]]/onboarding-view.tsx | 55 ++++++++----------- apps/web/playwright/onboarding.e2e.ts | 36 +++++------- 2 files changed, 38 insertions(+), 53 deletions(-) diff --git a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx index 17fd6d9a8b..1fdcfebfea 100644 --- a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx +++ b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx @@ -11,7 +11,6 @@ import { classNames } from "@calcom/lib"; import { APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback"; -import { IdentityProvider } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc"; import type { inferSSRProps } from "@calcom/types/inferSSRProps"; import { Button, StepCard, Steps } from "@calcom/ui"; @@ -26,11 +25,17 @@ import UserProfile from "@components/getting-started/steps-views/UserProfile"; import { UserSettings } from "@components/getting-started/steps-views/UserSettings"; const INITIAL_STEP = "user-settings"; -const BASE_STEPS = ["user-settings", "setup-availability", "user-profile"] as const; -const EXTRA_STEPS = ["connected-calendar", "connected-video"] as const; -type StepType = (typeof BASE_STEPS)[number] | (typeof EXTRA_STEPS)[number]; +const BASE_STEPS = [ + "user-settings", + "connected-calendar", + "connected-video", + "setup-availability", + "user-profile", +] as const; -const getStepsAndHeadersForUser = (identityProvider: IdentityProvider, t: TFunction) => { +type StepType = (typeof BASE_STEPS)[number]; + +const getStepsAndHeadersForUser = (t: TFunction) => { const baseHeaders: { title: string; subtitle: string[]; @@ -40,6 +45,16 @@ const getStepsAndHeadersForUser = (identityProvider: IdentityProvider, t: TFunct title: t("welcome_to_cal_header", { appName: APP_NAME }), subtitle: [t("we_just_need_basic_info"), t("edit_form_later_subtitle")], }, + { + title: t("connect_your_calendar"), + subtitle: [t("connect_your_calendar_instructions")], + skipText: t("connect_calendar_later"), + }, + { + title: t("connect_your_video_app"), + subtitle: [t("connect_your_video_app_instructions")], + skipText: t("set_up_later"), + }, { title: t("set_availability"), subtitle: [ @@ -53,33 +68,9 @@ const getStepsAndHeadersForUser = (identityProvider: IdentityProvider, t: TFunct }, ]; - const additionalHeaders: { - title: string; - subtitle: string[]; - skipText?: string; - }[] = [ - { - title: t("connect_your_calendar"), - subtitle: [t("connect_your_calendar_instructions")], - skipText: t("connect_calendar_later"), - }, - { - title: t("connect_your_video_app"), - subtitle: [t("connect_your_video_app_instructions")], - skipText: t("set_up_later"), - }, - ]; - - if (identityProvider === IdentityProvider.GOOGLE) { - return { - steps: [...BASE_STEPS] as StepType[], - headers: [...baseHeaders], - }; - } - return { - steps: [...BASE_STEPS.slice(0, 1), ...EXTRA_STEPS, ...BASE_STEPS.slice(1)] as StepType[], - headers: [baseHeaders[0], ...additionalHeaders, ...baseHeaders.slice(1)], + steps: [...BASE_STEPS], + headers: [...baseHeaders], }; }; @@ -119,7 +110,7 @@ const OnboardingPage = (props: PageProps) => { // } // ); // } - const { steps, headers } = getStepsAndHeadersForUser(user.identityProvider, t); + const { steps, headers } = getStepsAndHeadersForUser(t); const stepTransform = (step: StepType) => { const stepIndex = steps.indexOf(step as (typeof steps)[number]); diff --git a/apps/web/playwright/onboarding.e2e.ts b/apps/web/playwright/onboarding.e2e.ts index 5fbd67dfc6..94aecd6fac 100644 --- a/apps/web/playwright/onboarding.e2e.ts +++ b/apps/web/playwright/onboarding.e2e.ts @@ -40,35 +40,29 @@ test.describe("Onboarding", () => { .click(); await page.locator("button[type=submit]").click(); - if (identityProvider === IdentityProvider.GOOGLE) { - await expect(page).toHaveURL(/.*setup-availability/); - } else { - await expect(page).toHaveURL(/.*connected-calendar/); - } + await expect(page).toHaveURL(/.*connected-calendar/); const userComplete = await user.self(); expect(userComplete.name).toBe("new user 2"); }); - if (identityProvider !== IdentityProvider.GOOGLE) { - await test.step("step 2 - Connected Calendar", async () => { - const isDisabled = await page.locator("button[data-testid=save-calendar-button]").isDisabled(); - await expect(isDisabled).toBe(true); - // tests skip button, we don't want to test entire flow. - await page.locator("button[data-testid=skip-step]").click(); + await test.step("step 2 - Connected Calendar", async () => { + const isDisabled = await page.locator("button[data-testid=save-calendar-button]").isDisabled(); + await expect(isDisabled).toBe(true); + // tests skip button, we don't want to test entire flow. + await page.locator("button[data-testid=skip-step]").click(); - await expect(page).toHaveURL(/.*connected-video/); - }); + await expect(page).toHaveURL(/.*connected-video/); + }); - await test.step("step 3 - Connected Video", async () => { - const isDisabled = await page.locator("button[data-testid=save-video-button]").isDisabled(); - await expect(isDisabled).toBe(true); - // tests skip button, we don't want to test entire flow. - await page.locator("button[data-testid=skip-step]").click(); + await test.step("step 3 - Connected Video", async () => { + const isDisabled = await page.locator("button[data-testid=save-video-button]").isDisabled(); + await expect(isDisabled).toBe(true); + // tests skip button, we don't want to test entire flow. + await page.locator("button[data-testid=skip-step]").click(); - await expect(page).toHaveURL(/.*setup-availability/); - }); - } + await expect(page).toHaveURL(/.*setup-availability/); + }); await test.step("step 4 - Setup Availability", async () => { const isDisabled = await page.locator("button[data-testid=save-availability]").isDisabled();