diff --git a/apps/web/playwright/dynamic-booking-pages.e2e.ts b/apps/web/playwright/dynamic-booking-pages.e2e.ts index 279fd453aa..5a63b406f1 100644 --- a/apps/web/playwright/dynamic-booking-pages.e2e.ts +++ b/apps/web/playwright/dynamic-booking-pages.e2e.ts @@ -2,27 +2,18 @@ import { expect } from "@playwright/test"; import { test } from "./lib/fixtures"; import { - bookFirstEvent, bookTimeSlot, selectFirstAvailableTimeSlotNextMonth, selectSecondAvailableTimeSlotNextMonth, } from "./lib/testUtils"; -test.describe.configure({ mode: "parallel" }); +test("dynamic booking", async ({ page, users }) => { + const pro = await users.create(); + await pro.login(); + const free = await users.create({ plan: "FREE" }); + await page.goto(`/${pro.username}+${free.username}`); -test.describe("dynamic booking", () => { - test.beforeEach(async ({ page, users }) => { - const pro = await users.create(); - await pro.login(); - const free = await users.create({ plan: "FREE" }); - await page.goto(`/${pro.username}+${free.username}`); - }); - - test.afterEach(async ({ users }) => { - await users.deleteAll(); - }); - - test("book an event first day in next month", async ({ page }) => { + await test.step("book an event first day in next month", async () => { // Click first event type await page.click('[data-testid="event-type-link"]'); await selectFirstAvailableTimeSlotNextMonth(page); @@ -30,9 +21,7 @@ test.describe("dynamic booking", () => { await expect(page.locator("[data-testid=success-page]")).toBeVisible(); }); - test("can reschedule a booking", async ({ page }) => { - await bookFirstEvent(page); - + await test.step("can reschedule a booking", async () => { // Logged in await page.goto("/bookings/upcoming"); await page.locator('[data-testid="edit_booking"]').nth(0).click(); @@ -54,9 +43,7 @@ test.describe("dynamic booking", () => { await expect(page.locator("[data-testid=success-page]")).toBeVisible(); }); - test("Can cancel the recently created booking", async ({ page }) => { - await bookFirstEvent(page); - + await test.step("Can cancel the recently created booking", async () => { await page.goto("/bookings/upcoming"); await page.locator('[data-testid="cancel"]').first().click(); await page.waitForNavigation({ @@ -72,4 +59,6 @@ test.describe("dynamic booking", () => { }, }); }); + + await users.deleteAll(); }); diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 1d2caa4f9a..498ed65e2d 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -1189,6 +1189,8 @@ "add_new_form": "Add new form", "form_description": "Create your form to route a booker", "copy_link_to_form": "Copy link to form", + "add_a_team": "Add a team", + "saml_config": "SAML Config", "add_webhook_description": "Receive meeting data in real-time when something happens in Cal.com", "triggers_when": "Triggers when", "test_webhook": "Please ping test before creating.", @@ -1203,7 +1205,6 @@ "api_key_update_failed": "Error updating API key name", "embeds_title": "HTML iframe embed", "embeds_description": "Embed all your event types on your website", - "pending_payment": "Pending payment", "create_first_api_key": "Create your first API key", "create_first_api_key_description": "API keys allow other apps to communicate with Cal.com", "back_to_signin": "Back to sign in", diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx index fe1b4fefed..3c9bad4b1f 100644 --- a/packages/ui/v2/core/layouts/SettingsLayout.tsx +++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx @@ -1,8 +1,11 @@ +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"; import { useSession } from "next-auth/react"; -import React, { ComponentProps, useState } from "react"; +import React, { ComponentProps, useEffect, useState } from "react"; import { classNames } from "@calcom/lib"; +import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { trpc } from "@calcom/trpc/react"; import Button from "@calcom/ui/v2/core/Button"; import ErrorBoundary from "../../../ErrorBoundary"; @@ -10,7 +13,7 @@ import { Icon } from "../../../Icon"; import { useMeta } from "../Meta"; import Shell from "../Shell"; import { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem"; -import VerticalTabs, { VerticalTabItem } from "../navigation/tabs/VerticalTabs"; +import { VerticalTabItem } from "../navigation/tabs/VerticalTabs"; const tabs: VerticalTabItemProps[] = [ { @@ -91,18 +94,164 @@ const useTabs = () => { }; const SettingsSidebarContainer = ({ className = "" }) => { + const { t } = useLocale(); const tabsWithPermissions = useTabs(); + const [teamMenuState, setTeamMenuState] = + useState<{ teamId: number | undefined; teamMenuOpen: boolean }[]>(); + + const { data: teams } = trpc.useQuery(["viewer.teams.list"]); + + useEffect(() => { + if (teams) { + const teamStates = teams?.map((team) => ({ teamId: team.id, teamMenuOpen: false })); + setTeamMenuState(teamStates); + } + }, [teams]); + return ( - -
- - + ); }; diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx index 5e8a2f6751..6cafd1e14d 100644 --- a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx +++ b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx @@ -19,6 +19,7 @@ export type VerticalTabItemProps = { className?: string; isChild?: boolean; hidden?: boolean; + disableChevron?: boolean; } & ( | { /** If you want to change query param tabName as per current tab */ @@ -32,7 +33,15 @@ export type VerticalTabItemProps = { } ); -const VerticalTabItem: FC = ({ name, href, tabName, info, isChild, ...props }) => { +const VerticalTabItem: FC = ({ + name, + href, + tabName, + info, + isChild, + disableChevron, + ...props +}) => { const router = useRouter(); const { t } = useLocale(); let newHref = ""; @@ -73,12 +82,14 @@ const VerticalTabItem: FC = ({ name, href, tabName, info, props.className )} aria-current={isCurrent ? "page" : undefined}> - {props.icon && } + {props.icon && ( + + )}

{t(name)}

{info &&

{t(info)}

}
- {isCurrent && ( + {!disableChevron && isCurrent && (