337 lines
13 KiB
TypeScript
337 lines
13 KiB
TypeScript
import type { User as UserAuth } from "next-auth";
|
|
import { useSession } from "next-auth/react";
|
|
import dynamic from "next/dynamic";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
import { classNames } from "@calcom/lib";
|
|
import { IS_CALCOM, IS_VISUAL_REGRESSION_TESTING, ENABLE_PROFILE_SWITCHER } from "@calcom/lib/constants";
|
|
import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
|
|
import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
|
|
import { useCopy } from "@calcom/lib/hooks/useCopy";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { useNotifications } from "@calcom/lib/hooks/useNotifications";
|
|
import {
|
|
Avatar,
|
|
Button,
|
|
ButtonOrLink,
|
|
Credits,
|
|
Icon,
|
|
SkeletonText,
|
|
Tooltip,
|
|
Logo,
|
|
showToast,
|
|
} from "@calcom/ui";
|
|
|
|
import { KBarTrigger } from "../kbar/Kbar";
|
|
import type { LayoutProps } from "./Shell";
|
|
import { Navigation } from "./navigation/Navigation";
|
|
import { type NavigationItemType } from "./navigation/NavigationItem";
|
|
import { ProfileDropdown } from "./user-dropdown/ProfileDropdown";
|
|
import { UserDropdown } from "./user-dropdown/UserDropdown";
|
|
|
|
// need to import without ssr to prevent hydration errors
|
|
const Tips = dynamic(() => import("@calcom/features/tips").then((mod) => mod.Tips), {
|
|
ssr: false,
|
|
});
|
|
|
|
export type SideBarContainerProps = {
|
|
bannersHeight: number;
|
|
isPlatformUser?: boolean;
|
|
};
|
|
|
|
export type SideBarProps = {
|
|
bannersHeight: number;
|
|
user?: UserAuth | null;
|
|
isPlatformUser?: boolean;
|
|
};
|
|
|
|
export function SideBarContainer({ bannersHeight, isPlatformUser = false }: SideBarContainerProps) {
|
|
const { status, data } = useSession();
|
|
|
|
// Make sure that Sidebar is rendered optimistically so that a refresh of pages when logged in have SideBar from the beginning.
|
|
// This improves the experience of refresh on app store pages(when logged in) which are SSG.
|
|
// Though when logged out, app store pages would temporarily show SideBar until session status is confirmed.
|
|
if (status !== "loading" && status !== "authenticated") return null;
|
|
return <SideBar isPlatformUser={isPlatformUser} bannersHeight={bannersHeight} user={data?.user} />;
|
|
}
|
|
|
|
export function SideBar({ bannersHeight, user }: SideBarProps) {
|
|
const { fetchAndCopyToClipboard } = useCopy();
|
|
const { t, isLocaleReady } = useLocale();
|
|
const pathname = usePathname();
|
|
const isPlatformPages = pathname?.startsWith("/settings/platform");
|
|
const [isReferalLoading, setIsReferalLoading] = useState(false);
|
|
|
|
const publicPageUrl = `${getBookerBaseUrlSync(user?.org?.slug ?? null)}/${user?.username}`;
|
|
|
|
const sidebarStylingAttributes = {
|
|
maxHeight: `calc(100vh - ${bannersHeight}px)`,
|
|
top: `${bannersHeight}px`,
|
|
};
|
|
|
|
// Todo: extract this to a hook
|
|
const bottomNavItems: NavigationItemType[] = [
|
|
{
|
|
name: "view_public_page",
|
|
href: publicPageUrl,
|
|
icon: "external-link",
|
|
target: "__blank",
|
|
},
|
|
{
|
|
name: "copy_public_page_link",
|
|
href: "",
|
|
onClick: (e: { preventDefault: () => void }) => {
|
|
e.preventDefault();
|
|
navigator.clipboard.writeText(publicPageUrl);
|
|
showToast(t("link_copied"), "success");
|
|
},
|
|
icon: "copy",
|
|
},
|
|
IS_CALCOM
|
|
? {
|
|
name: "copy_referral_link",
|
|
href: "",
|
|
onClick: (e: { preventDefault: () => void }) => {
|
|
e.preventDefault();
|
|
setIsReferalLoading(true);
|
|
// Create an artificial delay to show the loading state so it doesnt flicker if this request is fast
|
|
setTimeout(() => {
|
|
fetchAndCopyToClipboard(
|
|
fetch("/api/generate-referral-link", {
|
|
method: "POST",
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res) => res.shortLink),
|
|
{
|
|
onSuccess: () => showToast(t("link_copied"), "success"),
|
|
onFailure: () => showToast("Copy to clipboard failed", "error"),
|
|
}
|
|
);
|
|
setIsReferalLoading(false);
|
|
}, 1000);
|
|
},
|
|
icon: "gift",
|
|
isLoading: isReferalLoading,
|
|
}
|
|
: null,
|
|
{
|
|
name: "settings",
|
|
href: user?.org ? `/settings/organizations/profile` : "/settings/my-account/profile",
|
|
icon: "settings",
|
|
},
|
|
].filter(Boolean) as NavigationItemType[];
|
|
|
|
return (
|
|
<div className="relative">
|
|
<aside
|
|
style={!isPlatformPages ? sidebarStylingAttributes : {}}
|
|
className={classNames(
|
|
"bg-muted border-muted fixed left-0 hidden h-full w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:sticky md:flex lg:w-56 lg:px-3",
|
|
!isPlatformPages && "max-h-screen"
|
|
)}>
|
|
<div className="flex h-full flex-col justify-between py-3 lg:pt-4">
|
|
<header className="todesktop:-mt-3 todesktop:flex-col-reverse todesktop:[-webkit-app-region:drag] items-center justify-between md:hidden lg:flex">
|
|
{user?.org ? (
|
|
!ENABLE_PROFILE_SWITCHER ? (
|
|
<Link href="/settings/organizations/profile" className="w-full px-1.5">
|
|
<div className="flex items-center gap-2 font-medium">
|
|
<Avatar
|
|
alt={`${user.org.name} logo`}
|
|
imageSrc={getPlaceholderAvatar(user.org.logoUrl, user.org.name)}
|
|
size="xsm"
|
|
/>
|
|
<p className="text line-clamp-1 text-sm">
|
|
<span>{user.org.name}</span>
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<ProfileDropdown />
|
|
)
|
|
) : (
|
|
<div data-testid="user-dropdown-trigger" className="todesktop:mt-4 w-full">
|
|
<span className="hidden lg:inline">
|
|
<UserDropdown />
|
|
</span>
|
|
<span className="hidden md:inline lg:hidden">
|
|
<UserDropdown small />
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="flex w-full justify-end rtl:space-x-reverse">
|
|
<button
|
|
color="minimal"
|
|
onClick={() => window.history.back()}
|
|
className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
|
|
<Icon
|
|
name="arrow-left"
|
|
className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0"
|
|
/>
|
|
</button>
|
|
<button
|
|
color="minimal"
|
|
onClick={() => window.history.forward()}
|
|
className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
|
|
<Icon
|
|
name="arrow-right"
|
|
className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0"
|
|
/>
|
|
</button>
|
|
{!!user?.org && (
|
|
<div data-testid="user-dropdown-trigger" className="flex items-center">
|
|
<UserDropdown small />
|
|
</div>
|
|
)}
|
|
<KBarTrigger />
|
|
</div>
|
|
</header>
|
|
{/* logo icon for tablet */}
|
|
<Link href="/event-types" className="text-center md:inline lg:hidden">
|
|
<Logo small icon />
|
|
</Link>
|
|
<Navigation isPlatformNavigation={isPlatformPages} />
|
|
</div>
|
|
|
|
{!isPlatformPages && (
|
|
<div>
|
|
<Tips />
|
|
{bottomNavItems.map((item, index) => (
|
|
<Tooltip side="right" content={t(item.name)} className="lg:hidden" key={item.name}>
|
|
<ButtonOrLink
|
|
id={item.name}
|
|
href={item.href || undefined}
|
|
aria-label={t(item.name)}
|
|
target={item.target}
|
|
className={classNames(
|
|
"text-left",
|
|
"[&[aria-current='page']]:bg-emphasis text-default justify-right group flex items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
|
|
"[&[aria-current='page']]:text-emphasis mt-0.5 w-full text-sm",
|
|
isLocaleReady ? "hover:bg-emphasis hover:text-emphasis" : "",
|
|
index === 0 && "mt-3"
|
|
)}
|
|
onClick={item.onClick}>
|
|
{!!item.icon && (
|
|
<Icon
|
|
name={item.isLoading ? "rotate-cw" : item.icon}
|
|
className={classNames(
|
|
"h-4 w-4 flex-shrink-0 [&[aria-current='page']]:text-inherit",
|
|
"me-3 md:mx-auto lg:ltr:mr-2 lg:rtl:ml-2",
|
|
item.isLoading && "animate-spin"
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
{isLocaleReady ? (
|
|
<span className="hidden w-full justify-between lg:flex">
|
|
<div className="flex">{t(item.name)}</div>
|
|
</span>
|
|
) : (
|
|
<SkeletonText className="h-[20px] w-full" />
|
|
)}
|
|
</ButtonOrLink>
|
|
</Tooltip>
|
|
))}
|
|
{!IS_VISUAL_REGRESSION_TESTING && <Credits />}
|
|
</div>
|
|
)}
|
|
</aside>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ShellMain(props: LayoutProps) {
|
|
const router = useRouter();
|
|
const { isLocaleReady, t } = useLocale();
|
|
|
|
const { buttonToShow, isLoading, enableNotifications, disableNotifications } = useNotifications();
|
|
|
|
return (
|
|
<>
|
|
{(props.heading || !!props.backPath) && (
|
|
<div
|
|
className={classNames(
|
|
"flex items-center md:mb-6 md:mt-0",
|
|
props.smallHeading ? "lg:mb-7" : "lg:mb-8",
|
|
props.hideHeadingOnMobile ? "mb-0" : "mb-6"
|
|
)}>
|
|
{!!props.backPath && (
|
|
<Button
|
|
variant="icon"
|
|
size="sm"
|
|
color="minimal"
|
|
onClick={() =>
|
|
typeof props.backPath === "string" ? router.push(props.backPath as string) : router.back()
|
|
}
|
|
StartIcon="arrow-left"
|
|
aria-label="Go Back"
|
|
className="rounded-md ltr:mr-2 rtl:ml-2"
|
|
data-testid="go-back-button"
|
|
/>
|
|
)}
|
|
{props.heading && (
|
|
<header
|
|
className={classNames(props.large && "py-8", "flex w-full max-w-full items-center truncate")}>
|
|
{props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
|
|
<div
|
|
className={classNames("w-full truncate ltr:mr-4 rtl:ml-4 md:block", props.headerClassName)}>
|
|
{props.heading && (
|
|
<h3
|
|
className={classNames(
|
|
"font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis inline truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
|
|
props.smallHeading ? "text-base" : "text-xl",
|
|
props.hideHeadingOnMobile && "hidden"
|
|
)}>
|
|
{!isLocaleReady ? <SkeletonText invisible /> : props.heading}
|
|
</h3>
|
|
)}
|
|
{props.subtitle && (
|
|
<p className="text-default hidden text-sm md:block" data-testid="subtitle">
|
|
{!isLocaleReady ? <SkeletonText invisible /> : props.subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{props.beforeCTAactions}
|
|
{props.CTA && (
|
|
<div
|
|
className={classNames(
|
|
props.backPath
|
|
? "relative"
|
|
: "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-20 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
|
|
"flex-shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
|
|
)}>
|
|
{isLocaleReady && props.CTA}
|
|
</div>
|
|
)}
|
|
{props.actions && props.actions}
|
|
{/* TODO: temporary hide push notifications {props.heading === "Bookings" && buttonToShow && (
|
|
<Button
|
|
color="primary"
|
|
onClick={buttonToShow === ButtonState.ALLOW ? enableNotifications : disableNotifications}
|
|
loading={isLoading}
|
|
disabled={buttonToShow === ButtonState.DENIED}
|
|
tooltipSide="bottom"
|
|
tooltip={
|
|
buttonToShow === ButtonState.DENIED ? t("you_have_denied_notifications") : undefined
|
|
}>
|
|
{t(
|
|
buttonToShow === ButtonState.DISABLE
|
|
? "disable_browser_notifications"
|
|
: "allow_browser_notifications"
|
|
)}
|
|
</Button>
|
|
)} */}
|
|
</header>
|
|
)}
|
|
</div>
|
|
)}
|
|
{props.afterHeading && <>{props.afterHeading}</>}
|
|
<div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col")}>
|
|
{props.children}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|