import { SelectorIcon } from "@heroicons/react/outline"; import { ArrowLeftIcon, CalendarIcon, ClockIcon, CogIcon, ExternalLinkIcon, LinkIcon, LogoutIcon, MapIcon, MoonIcon, ViewGridIcon, } from "@heroicons/react/solid"; import { UserPlan } from "@prisma/client"; import { SessionContextValue, signOut, useSession } from "next-auth/react"; import Link from "next/link"; import { useRouter } from "next/router"; import React, { Fragment, ReactNode, useEffect } from "react"; import { Toaster } from "react-hot-toast"; import { useIsEmbed } from "@calcom/embed-core"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import Button from "@calcom/ui/Button"; import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@calcom/ui/Dropdown"; import LicenseBanner from "@ee/components/LicenseBanner"; import TrialBanner from "@ee/components/TrialBanner"; import HelpMenuItem from "@ee/components/support/HelpMenuItem"; import classNames from "@lib/classNames"; import { WEBAPP_URL } from "@lib/config/constants"; import { shouldShowOnboarding } from "@lib/getting-started"; import useMeQuery from "@lib/hooks/useMeQuery"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry"; import { trpc } from "@lib/trpc"; import CustomBranding from "@components/CustomBranding"; import Loader from "@components/Loader"; import { HeadSeo } from "@components/seo/head-seo"; import ImpersonatingBanner from "@components/ui/ImpersonatingBanner"; import pkg from "../package.json"; import { useViewerI18n } from "./I18nLanguageHandler"; import Logo from "./Logo"; function useRedirectToLoginIfUnauthenticated(isPublic = false) { const { data: session, status } = useSession(); const loading = status === "loading"; const router = useRouter(); useEffect(() => { if (isPublic) { return; } if (!loading && !session) { router.replace({ pathname: "/auth/login", query: { callbackUrl: `${WEBAPP_URL}${location.pathname}${location.search}`, }, }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [loading, session, isPublic]); return { loading: loading && !session, session, }; } function useRedirectToOnboardingIfNeeded() { const router = useRouter(); const query = useMeQuery(); const user = query.data; const isRedirectingToOnboarding = user && shouldShowOnboarding(user); useEffect(() => { if (isRedirectingToOnboarding) { router.replace({ pathname: "/getting-started", }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isRedirectingToOnboarding]); return { isRedirectingToOnboarding, }; } export function ShellSubHeading(props: { title: ReactNode; subtitle?: ReactNode; actions?: ReactNode; className?: string; }) { return (

{props.title}

{props.subtitle &&

{props.subtitle}

}
{props.actions &&
{props.actions}
}
); } const Layout = ({ status, plan, ...props }: LayoutProps & { status: SessionContextValue["status"]; plan?: UserPlan; isLoading: boolean }) => { const isEmbed = useIsEmbed(); const router = useRouter(); const { t } = useLocale(); const navigation = [ { name: t("event_types_page_title"), href: "/event-types", icon: LinkIcon, current: router.asPath.startsWith("/event-types"), }, { name: t("bookings"), href: "/bookings/upcoming", icon: CalendarIcon, current: router.asPath.startsWith("/bookings"), }, { name: t("availability"), href: "/availability", icon: ClockIcon, current: router.asPath.startsWith("/availability"), }, { name: t("apps"), href: "/apps", icon: ViewGridIcon, current: router.asPath.startsWith("/apps"), child: [ { name: t("app_store"), href: "/apps", current: router.asPath === "/apps", }, { name: t("installed_apps"), href: "/apps/installed", current: router.asPath === "/apps/installed", }, ], }, { name: t("settings"), href: "/settings/profile", icon: CogIcon, current: router.asPath.startsWith("/settings"), }, ]; const pageTitle = typeof props.heading === "string" ? props.heading : props.title; return ( <>
{status === "authenticated" && (
{/* logo icon for tablet */}
© {new Date().getFullYear()} Cal.com, Inc. v.{pkg.version + "-"} {process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com" ? "h" : "sh"} -{plan}
)}
{/* show top navigation for md and smaller (tablet and phones) */} {status === "authenticated" && ( )}
{!!props.backPath && (
)} {props.heading && (
{props.HeadingLeftIcon &&
{props.HeadingLeftIcon}
}
{props.isLoading ? ( <>
) : ( <>

{props.heading}

{props.subtitle}

)}
{props.CTA &&
{props.CTA}
}
)}
{!props.isLoading ? props.children : props.customLoader}
{/* show bottom navigation for md and smaller (tablet and phones) */} {status === "authenticated" && ( )} {/* add padding to content for mobile navigation*/}
); }; const MemoizedLayout = React.memo(Layout); type LayoutProps = { centered?: boolean; title?: string; heading?: ReactNode; subtitle?: ReactNode; children: ReactNode; CTA?: ReactNode; large?: boolean; HeadingLeftIcon?: ReactNode; backPath?: string; // renders back button to specified path // use when content needs to expand with flex flexChildrenContainer?: boolean; isPublic?: boolean; customLoader?: ReactNode; }; export default function Shell(props: LayoutProps) { const router = useRouter(); const { loading, session } = useRedirectToLoginIfUnauthenticated(props.isPublic); const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded(); const telemetry = useTelemetry(); useEffect(() => { telemetry.withJitsu((jitsu) => { return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.asPath)); }); }, [telemetry, router.asPath]); const query = useMeQuery(); const user = query.data; const i18n = useViewerI18n(); const { status } = useSession(); const isLoading = i18n.status === "loading" || query.status === "loading" || isRedirectingToOnboarding || loading; if (isLoading) { return (
); } if (!session && !props.isPublic) return null; return ( <> ); } function UserDropdown({ small }: { small?: boolean }) { const { t } = useLocale(); const query = useMeQuery(); const user = query.data; const mutation = trpc.useMutation("viewer.away", { onSettled() { utils.invalidateQueries("viewer.me"); }, }); const utils = trpc.useContext(); return ( { mutation.mutate({ away: !user?.away }); utils.invalidateQueries("viewer.me"); }} className="flex min-w-max cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"> {user?.username && ( {t("view_public_page")} )} {t("join_our_slack")} {t("visit_roadmap")} signOut({ callbackUrl: "/auth/logout" })} className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"> ); }