commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

chore: bring back removed onboarding steps (#18254)

Browse Source 
* add connected-calendar and connected-video steps back

* adapt test

* fix name
This commit is contained in:
Benny Joo
2024-12-18 20:05:17 +01:00
committed by GitHub
parent 0a7a0e3687
commit b4fd6f3442
2 changed files with 38 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
+23 -32
View File
@@ -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]);
apps/web/playwright/onboarding.e2e.ts
+15 -21
View File
@@ -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();