import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"; import { useSession } from "next-auth/react"; import Link from "next/link"; import { useRouter } from "next/router"; import type { ComponentProps } from "react"; import React, { Suspense, useEffect, useState } from "react"; import Shell from "@calcom/features/shell/Shell"; import { classNames } from "@calcom/lib"; import { HOSTED_CAL_FEATURES, WEBAPP_URL } from "@calcom/lib/constants"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { IdentityProvider } from "@calcom/prisma/enums"; import { MembershipRole, UserPermissionRole } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; import useAvatarQuery from "@calcom/trpc/react/hooks/useAvatarQuery"; import type { VerticalTabItemProps } from "@calcom/ui"; import { Badge, Button, ErrorBoundary, Skeleton, useMeta, VerticalTabItem } from "@calcom/ui"; import { User, Key, CreditCard, Terminal, Users, Loader, Lock, ArrowLeft, ChevronDown, ChevronRight, Plus, Menu, Building, } from "@calcom/ui/components/icon"; const tabs: VerticalTabItemProps[] = [ { name: "my_account", href: "/settings/my-account", icon: User, children: [ { name: "profile", href: "/settings/my-account/profile" }, { name: "general", href: "/settings/my-account/general" }, { name: "calendars", href: "/settings/my-account/calendars" }, { name: "conferencing", href: "/settings/my-account/conferencing" }, { name: "appearance", href: "/settings/my-account/appearance" }, // TODO // { name: "referrals", href: "/settings/my-account/referrals" }, ], }, { name: "security", href: "/settings/security", icon: Key, children: [ { name: "password", href: "/settings/security/password" }, { name: "impersonation", href: "/settings/security/impersonation" }, { name: "2fa_auth", href: "/settings/security/two-factor-auth" }, ], }, { name: "billing", href: "/settings/billing", icon: CreditCard, children: [{ name: "manage_billing", href: "/settings/billing" }], }, { name: "developer", href: "/settings/developer", icon: Terminal, children: [ // { name: "webhooks", href: "/settings/developer/webhooks" }, { name: "api_keys", href: "/settings/developer/api-keys" }, // TODO: Add profile level for embeds // { name: "embeds", href: "/v2/settings/developer/embeds" }, ], }, { name: "organization", href: "/settings/organizations", icon: Building, children: [ { name: "profile", href: "/settings/organizations/profile", }, { name: "general", href: "/settings/organizations/general", }, { name: "members", href: "/settings/organizations/members", }, { name: "appearance", href: "/settings/organizations/appearance", }, { name: "billing", href: "/settings/organizations/billing", }, ], }, { name: "teams", href: "/settings/teams", icon: Users, children: [], }, { name: "admin", href: "/settings/admin", icon: Lock, children: [ // { name: "features", href: "/settings/admin/flags" }, { name: "license", href: "/auth/setup?step=1" }, { name: "impersonation", href: "/settings/admin/impersonation" }, { name: "apps", href: "/settings/admin/apps/calendar" }, { name: "users", href: "/settings/admin/users" }, { name: "organizations", href: "/settings/admin/organizations" }, ], }, ]; tabs.find((tab) => { // Add "SAML SSO" to the tab if (tab.name === "security" && !HOSTED_CAL_FEATURES) { tab.children?.push({ name: "sso_configuration", href: "/settings/security/sso" }); } }); // The following keys are assigned to admin only const adminRequiredKeys = ["admin"]; const organizationRequiredKeys = ["organization"]; const useTabs = () => { const session = useSession(); const { data: user } = trpc.viewer.me.useQuery(); const { data: avatar } = useAvatarQuery(); const isAdmin = session.data?.user.role === UserPermissionRole.ADMIN; tabs.map((tab) => { if (tab.href === "/settings/my-account") { tab.name = user?.name || "my_account"; tab.icon = undefined; tab.avatar = avatar?.avatar || WEBAPP_URL + "/" + session?.data?.user?.username + "/avatar.png"; } else if ( tab.href === "/settings/security" && user?.identityProvider === IdentityProvider.GOOGLE && !user?.twoFactorEnabled ) { tab.children = tab?.children?.filter( (childTab) => childTab.href !== "/settings/security/two-factor-auth" ); } return tab; }); // check if name is in adminRequiredKeys return tabs.filter((tab) => { if (organizationRequiredKeys.includes(tab.name)) return !!session.data?.user?.organizationId; if (isAdmin) return true; return !adminRequiredKeys.includes(tab.name); }); }; const BackButtonInSidebar = ({ name }: { name: string }) => { return ( {name} ); }; interface SettingsSidebarContainerProps { className?: string; navigationIsOpenedOnMobile?: boolean; } const SettingsSidebarContainer = ({ className = "", navigationIsOpenedOnMobile, }: SettingsSidebarContainerProps) => { const { t } = useLocale(); const router = useRouter(); const tabsWithPermissions = useTabs(); const [teamMenuState, setTeamMenuState] = useState<{ teamId: number | undefined; teamMenuOpen: boolean }[]>(); const { data: teams } = trpc.viewer.teams.list.useQuery(); const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery(); useEffect(() => { if (teams) { const teamStates = teams?.map((team) => ({ teamId: team.id, teamMenuOpen: String(team.id) === router.query.id, })); setTeamMenuState(teamStates); setTimeout(() => { const tabMembers = Array.from(document.getElementsByTagName("a")).filter( (bottom) => bottom.dataset.testid === "vertical-tab-Members" )[1]; tabMembers?.scrollIntoView({ behavior: "smooth" }); }, 100); } }, [router.query.id, teams]); return ( ); }; const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) => { const { t } = useLocale(); const router = useRouter(); return ( <> ); }; export default function SettingsLayout({ children, ...rest }: { children: React.ReactNode } & ComponentProps) { const router = useRouter(); const state = useState(false); const { t } = useLocale(); const [sideContainerOpen, setSideContainerOpen] = state; useEffect(() => { const closeSideContainer = () => { if (window.innerWidth >= 1024) { setSideContainerOpen(false); } }; window.addEventListener("resize", closeSideContainer); return () => { window.removeEventListener("resize", closeSideContainer); }; }, []); useEffect(() => { if (sideContainerOpen) { setSideContainerOpen(!sideContainerOpen); } }, [router.asPath]); return ( {/* Mobile backdrop */} {sideContainerOpen && ( )} } drawerState={state} MobileNavigationContainer={null} TopNavContainer={ setSideContainerOpen(!sideContainerOpen)} /> }>
}>{children}
); } export const getLayout = (page: React.ReactElement) => {page}; function ShellHeader() { const { meta } = useMeta(); const { t, isLocaleReady } = useLocale(); return (
{meta.backButton && ( )}
{meta.title && isLocaleReady ? (

{t(meta.title)}

) : (
)} {meta.description && isLocaleReady ? (

{t(meta.description)}

) : (
)}
{meta.CTA}
); }