import { SelectorIcon } from "@heroicons/react/outline"; import { CalendarIcon, ClockIcon, CogIcon, ExternalLinkIcon, LinkIcon, LogoutIcon, ViewGridIcon, MoonIcon, MapIcon, ArrowLeftIcon, } from "@heroicons/react/solid"; import { signOut, useSession } from "next-auth/react"; import Link from "next/link"; import { useRouter } from "next/router"; import React, { Fragment, ReactNode, useEffect, useState } from "react"; import { Toaster } from "react-hot-toast"; 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 { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants"; import { shouldShowOnboarding } from "@lib/getting-started"; import { useLocale } from "@lib/hooks/useLocale"; 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 pkg from "../package.json"; import { useViewerI18n } from "./I18nLanguageHandler"; import Logo from "./Logo"; export function useMeQuery() { const meQuery = trpc.useQuery(["viewer.me"], { retry(failureCount) { return failureCount > 3; }, }); return meQuery; } function useRedirectToLoginIfUnauthenticated() { const { data: session, status } = useSession(); const loading = status === "loading"; const router = useRouter(); useEffect(() => { if (router.pathname.startsWith("/apps")) { return; } if (!loading && !session) { router.replace({ pathname: "/auth/login", query: { callbackUrl: `${NEXT_PUBLIC_BASE_URL}/${location.pathname}${location.search}`, }, }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [loading, session]); return { loading: loading && !session, }; } function useRedirectToOnboardingIfNeeded() { const router = useRouter(); const query = useMeQuery(); const user = query.data; const [isRedirectingToOnboarding, setRedirecting] = useState(false); useEffect(() => { user && setRedirecting(shouldShowOnboarding(user)); }, [router, 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}
}
); } export default function Shell(props: { 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; }) { const { t } = useLocale(); const router = useRouter(); const { loading } = useRedirectToLoginIfUnauthenticated(); const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded(); const telemetry = useTelemetry(); 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"), }, ]; useEffect(() => { telemetry.withJitsu((jitsu) => { return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.asPath)); }); }, [telemetry, router.asPath]); const pageTitle = typeof props.heading === "string" ? props.heading : props.title; const query = useMeQuery(); const user = query.data; const i18n = useViewerI18n(); const { status } = useSession(); if (i18n.status === "loading" || isRedirectingToOnboarding || loading) { // show spinner whilst i18n is loading to avoid language flicker return (
); } 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"} -{user && user.plan}
)}
{/* show top navigation for md and smaller (tablet and phones) */} {status === "authenticated" && ( )}
{!!props.backPath && (
)} {props.heading && props.subtitle && (
{props.HeadingLeftIcon &&
{props.HeadingLeftIcon}
}

{props.heading}

{props.subtitle}

{props.CTA &&
{props.CTA}
}
)}
{props.children}
{/* show bottom navigation for md and smaller (tablet and phones) */} {status === "authenticated" && ( )} {/* add padding to content for mobile navigation*/}
); } 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"> ); }