@calcom/atoms 2.7.2 → 2.8.1

package/src/booker/components/redirect-to-instant-meeting-modal.tsx

@@ -1,121 +0,0 @@
-// @ts-nocheck — Radix Dialog prop narrowing
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { Button } from "../../components/ui/button";
-import { Dialog, DialogContent } from "../../components/ui/dialog";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import dayjs from "../../vendor/dayjs";
-
-const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-  const message = "/o";
-  event.returnValue = message;
-  return message;
-};
-
-export const RedirectToInstantMeetingModal = ({
-  bookingUid,
-  onGoBack,
-  expiryTime,
-  instantVideoMeetingUrl,
-  orgName,
-}: {
-  bookingUid: string;
-  onGoBack: () => void;
-  expiryTime?: Date;
-  instantVideoMeetingUrl?: string;
-  orgName?: string | null;
-}) => {
-  const { t } = useLocale();
-  const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining());
-  const [hasInstantMeetingTokenExpired, setHasInstantMeetingTokenExpired] = useState(false);
-  const router = useRouter();
-
-  function calculateTimeRemaining() {
-    const now = dayjs();
-    const expiration = dayjs(expiryTime);
-    const duration = expiration.diff(now);
-    return Math.max(duration, 0);
-  }
-
-  useEffect(() => {
-    if (!expiryTime) return;
-
-    const timer = setInterval(() => {
-      setTimeRemaining(calculateTimeRemaining());
-      setHasInstantMeetingTokenExpired(expiryTime && new Date(expiryTime) < new Date());
-    }, 1000);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, [expiryTime]);
-
-  const formatTime = (milliseconds: number) => {
-    const duration = dayjs.duration(milliseconds);
-    const seconds = duration.seconds();
-    const minutes = duration.minutes();
-    return `${minutes}m ${seconds}s`;
-  };
-
-  useEffect(() => {
-    if (!expiryTime || hasInstantMeetingTokenExpired || !!instantVideoMeetingUrl) {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-      return;
-    }
-
-    window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-    };
-  }, [expiryTime, hasInstantMeetingTokenExpired, instantVideoMeetingUrl]);
-
-  useEffect(() => {
-    if (instantVideoMeetingUrl) {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-      router.push(instantVideoMeetingUrl);
-    }
-  }, [instantVideoMeetingUrl]);
-
-  return (
-    <Dialog open={!!bookingUid && !!expiryTime}>
-      <DialogContent enableOverflow className="py-8" data-testid="instant-meeting-modal">
-        <div>
-          {hasInstantMeetingTokenExpired ? (
-            <div>
-              <p className="font-medium">{t("please_book_a_time_sometime_later")}</p>
-              <Button
-                className="mt-4"
-                onClick={() => {
-                  onGoBack();
-                }}
-                color="primary"
-              >
-                {t("schedule_instead")}
-              </Button>
-            </div>
-          ) : (
-            <div className="text-center">
-              <p className="font-medium">{t("connecting_you_to_someone", { orgName })}</p>
-              <p className="font-bold">{t("please_do_not_close_this_tab")}</p>
-              <p className="mt-2 font-medium">
-                {t("please_schedule_future_call", {
-                  seconds: formatTime(timeRemaining),
-                })}
-              </p>
-
-              <div className="mt-4 h-[414px]">
-                <iframe
-                  title="instant-meeting"
-                  className="mx-auto h-full w-[276px] rounded-lg"
-                  src="https://cal.games/"
-                />
-              </div>
-            </div>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};

package/src/booker/components/scrollable-with-gradients.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
-
-interface ScrollGradients {
-  top: boolean;
-  bottom: boolean;
-}
-
-interface ScrollableWithGradientsProps {
-  children: ReactNode;
-  className?: string;
-  ariaLabel?: string;
-}
-
-const SCROLL_THRESHOLD = 5;
-
-export function ScrollableWithGradients({ children, className, ariaLabel }: ScrollableWithGradientsProps) {
-  const [gradients, setGradients] = useState<ScrollGradients>({ top: false, bottom: false });
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-
-  const updateGradients = useCallback(() => {
-    const node = scrollRef.current;
-    if (!node) return;
-
-    const { scrollTop, scrollHeight, clientHeight } = node;
-    const top = scrollTop > SCROLL_THRESHOLD;
-    const bottom = scrollTop + clientHeight < scrollHeight - SCROLL_THRESHOLD;
-
-    setGradients((prev) => (prev.top === top && prev.bottom === bottom ? prev : { top, bottom }));
-  }, []);
-
-  const setRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      scrollRef.current = node;
-      updateGradients();
-    },
-    [updateGradients]
-  );
-
-  useEffect(() => {
-    const node = scrollRef.current;
-    if (!node) return;
-
-    const resizeObserver = new ResizeObserver(updateGradients);
-    resizeObserver.observe(node);
-
-    return () => resizeObserver.disconnect();
-  }, [updateGradients]);
-
-  return (
-    <div className="relative">
-      <div
-        ref={setRef}
-        onScroll={updateGradients}
-        className={className}
-        tabIndex={0}
-        role="region"
-        aria-label={ariaLabel}
-      >
-        {children}
-      </div>
-      {gradients.top && (
-        <div
-          className="from-default pointer-events-none absolute left-0 right-0 top-0 h-8 bg-gradient-to-b to-transparent dark:from-[var(--cal-bg-muted)]"
-          aria-hidden="true"
-        />
-      )}
-      {gradients.bottom && (
-        <div
-          className="from-default pointer-events-none absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t to-transparent dark:from-[var(--cal-bg-muted)]"
-          aria-hidden="true"
-        />
-      )}
-    </div>
-  );
-}

package/src/booker/components/seats-availability-text.tsx

@@ -1,43 +0,0 @@
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-
-type Props = {
-  /**
-   * Whether to show the exact number of seats available or not.
-   * @default true
-   */
-  showExact: boolean;
-  /**
-   * Shows available seats count as either whole number or fraction.
-   * Applies only when `showExact` is `true`.
-   * @default "whole"
-   */
-  variant?: "whole" | "fraction";
-  bookedSeats: number;
-  totalSeats: number;
-};
-
-export const SeatsAvailabilityText = ({
-  showExact = true,
-  bookedSeats,
-  totalSeats,
-  variant = "whole",
-}: Props) => {
-  const { t } = useLocale();
-  const availableSeats = totalSeats - bookedSeats;
-  const isHalfFull = bookedSeats / totalSeats >= 0.5;
-  const isNearlyFull = bookedSeats / totalSeats >= 0.83;
-
-  return (
-    <span className="truncate">
-      {showExact
-        ? `${availableSeats}${variant === "fraction" ? ` / ${totalSeats}` : ""} ${t("seats_available", {
-            count: availableSeats,
-          })}`
-        : isNearlyFull
-          ? t("seats_nearly_full")
-          : isHalfFull
-            ? t("seats_half_full")
-            : t("seats_available", { count: availableSeats })}
-    </span>
-  );
-};

package/src/booker/components/section.tsx

@@ -1,51 +0,0 @@
-// @ts-nocheck — framer-motion MotionProps narrowing
-"use client";
-
-import type { MotionProps } from "framer-motion";
-import { m } from "framer-motion";
-import type { ReactNode } from "react";
-import { forwardRef } from "react";
-
-import type { BookerLayout } from "../../contracts/booker";
-import { cn } from "../../lib/utils";
-import { useBookerStoreContext } from "../booker-store-provider";
-
-type BookerAreas = "calendar" | "main" | "meta" | "timeslots" | "header";
-type GridArea = BookerAreas | ({ [key in BookerLayout]?: BookerAreas } & { default: BookerAreas });
-
-type BookerSectionProps = {
-  children: ReactNode;
-  area: GridArea;
-  visible?: boolean;
-  className?: string;
-} & MotionProps;
-
-const gridAreaClassNameMap: { [key in BookerAreas]: string } = {
-  calendar: "[grid-area:calendar]",
-  main: "[grid-area:main]",
-  meta: "[grid-area:meta]",
-  timeslots: "[grid-area:timeslots]",
-  header: "[grid-area:header]",
-};
-
-export const BookerSection = forwardRef<HTMLDivElement, BookerSectionProps>(function BookerSection(
-  { children, area, visible, className, ...props },
-  ref
-) {
-  const layout = useBookerStoreContext((state) => state.layout);
-  let gridClassName: string;
-
-  if (typeof area === "string") {
-    gridClassName = gridAreaClassNameMap[area];
-  } else {
-    gridClassName = gridAreaClassNameMap[area[layout] || area.default];
-  }
-
-  if (!visible && typeof visible !== "undefined") return null;
-
-  return (
-    <m.div ref={ref} className={cn(gridClassName, className)} layout {...props}>
-      {children}
-    </m.div>
-  );
-});

package/src/booker/components/slot-selection-modal-header.tsx

@@ -1,116 +0,0 @@
-// @ts-nocheck — loose BookerEvent + TimezoneSelect contract
-"use client";
-
-import type { ComponentType } from "react";
-import { useMemo } from "react";
-import { shallow } from "zustand/shallow";
-import { Button } from "../../components/ui/button";
-import { Icon } from "../../components/ui/icon";
-import type { BookerEvent } from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import dayjs from "../../vendor/dayjs";
-import { useTimePreferences } from "../../vendor/time-preferences";
-import { CURRENT_TIMEZONE } from "../../vendor/timezone-constants";
-import { useBookerStoreContext } from "../booker-store-provider";
-import type { Timezone } from "../types";
-
-import { EventDetailBlocks, EventDetails } from "./event-meta/details";
-
-type SlotSelectionModalHeaderProps = {
-  onClick: () => void;
-  event?: Pick<
-    BookerEvent,
-    | "length"
-    | "metadata"
-    | "lockTimeZoneToggleOnBookingPage"
-    | "lockedTimeZone"
-    | "isDynamic"
-    | "currency"
-    | "price"
-    | "locations"
-    | "requiresConfirmation"
-    | "recurringEvent"
-    | "enablePerHostLocations"
-  > | null;
-  isPlatform?: boolean;
-  TimezoneSelect?: ComponentType<Record<string, unknown>>;
-  timeZones?: Timezone[];
-  selectedDate: string | null;
-};
-
-export const SlotSelectionModalHeader = ({
-  onClick,
-  event,
-  TimezoneSelect: TimezoneSelectProp,
-  timeZones,
-  selectedDate,
-}: SlotSelectionModalHeaderProps): JSX.Element => {
-  const { i18n } = useLocale();
-  const [setTimezone] = useTimePreferences((state) => [state.setTimezone]);
-  const [timezone, setBookerStoreTimezone] = useBookerStoreContext(
-    (state) => [state.timezone, state.setTimezone],
-    shallow
-  );
-  const TimezoneSelect = TimezoneSelectProp;
-
-  const formattedDate = useMemo(() => {
-    if (!selectedDate) return { dayOfWeek: "", fullDate: "" };
-
-    const date = dayjs(selectedDate);
-    const dayOfWeek = date.locale(i18n.language).format("dddd");
-    const fullDate = date.locale(i18n.language).format("MMMM D, YYYY");
-
-    return { dayOfWeek, fullDate };
-  }, [selectedDate, i18n.language]);
-
-  return (
-    <div className="two-step-slot-selection-modal-header sticky top-0 z-10 -mx-4 mt-0 mb-4 flex flex-col border-subtle border-b bg-default px-8 pb-4">
-      <div className="flex flex-col gap-2 pt-8">
-        <div className="flex flex-col">
-          <span className="font-semibold text-emphasis text-lg">
-            <Button
-              color="minimal"
-              StartIcon="arrow-left"
-              className="mb-2 ml-[-42px] w-[40px]"
-              onClick={onClick}
-            />{" "}
-            {formattedDate.dayOfWeek}
-          </span>
-          <span className="text-default text-sm">{formattedDate.fullDate}</span>
-        </div>
-
-        {event && <EventDetails event={event} blocks={[EventDetailBlocks.DURATION]} />}
-
-        <div className="mb-0 flex items-center gap-2 text-default text-sm">
-          <Icon name="globe" className="h-4 w-4 shrink-0 text-subtle" />
-          {TimezoneSelect && (
-            <span className="-mt-[2px] flex h-6 min-w-32 max-w-full items-center justify-start">
-              <TimezoneSelect
-                timeZones={timeZones}
-                menuPosition="fixed"
-                classNames={{
-                  control: () =>
-                    "min-h-0! p-0 w-full border-0 bg-transparent focus-within:ring-0 shadow-none!",
-                  menu: () => "w-64! max-w-[90vw] mb-1",
-                  singleValue: () => "text-text py-1",
-                  indicatorsContainer: () => "ml-auto",
-                  container: () => "max-w-full",
-                }}
-                value={
-                  event?.lockTimeZoneToggleOnBookingPage
-                    ? event.lockedTimeZone || CURRENT_TIMEZONE
-                    : timezone || CURRENT_TIMEZONE
-                }
-                onChange={({ value }: { value: string }) => {
-                  setTimezone(value);
-                  setBookerStoreTimezone(value);
-                }}
-                isDisabled={event?.lockTimeZoneToggleOnBookingPage}
-              />
-            </span>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/booker/components/time-format-toggle.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import { ToggleGroup } from "../../components/ui/toggle-group";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { TimeFormat } from "../../vendor/time-format";
-import { useTimePreferences } from "../../vendor/time-preferences";
-
-export const TimeFormatToggle = ({ customClassName }: { customClassName?: string }) => {
-  const timeFormat = useTimePreferences((state) => state.timeFormat);
-  const setTimeFormat = useTimePreferences((state) => state.setTimeFormat);
-  const { t } = useLocale();
-
-  return (
-    <ToggleGroup
-      customClassNames={customClassName}
-      onValueChange={(newFormat) => {
-        if (newFormat && newFormat !== timeFormat) setTimeFormat(newFormat as TimeFormat);
-      }}
-      defaultValue={timeFormat}
-      value={timeFormat}
-      aria-label={t("time_format")}
-      options={[
-        { value: TimeFormat.TWELVE_HOUR, label: t("12_hour_short") },
-        { value: TimeFormat.TWENTY_FOUR_HOUR, label: t("24_hour_short") },
-      ]}
-    />
-  );
-};

package/src/booker/components/unavailable.tsx

@@ -1,30 +0,0 @@
-import type { ReactNode } from "react";
-
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-
-const UnAvailableMessage = ({ children, title }: { children: ReactNode; title: string }) => (
-  <div className="mx-auto w-full max-w-2xl">
-    <div className="border-subtle bg-default dark:bg-cal-muted overflow-hidden rounded-lg border p-10">
-      <h2 className="font-heading mb-4 text-3xl">{title}</h2>
-      {children}
-    </div>
-  </div>
-);
-
-export const Away = () => {
-  const { t } = useLocale();
-  return (
-    <UnAvailableMessage title={`😴 ${t("user_away")}`}>
-      <p className="max-w-[50ch]">{t("user_away_description")}</p>
-    </UnAvailableMessage>
-  );
-};
-
-export const NotFound = () => {
-  const { t } = useLocale();
-  return (
-    <UnAvailableMessage title={t("404_page_not_found")}>
-      <p className="max-w-[50ch]">{t("booker_event_not_found")}</p>
-    </UnAvailableMessage>
-  );
-};

package/src/booker/components/unpublished-entity.tsx

@@ -1,30 +0,0 @@
-import { Avatar } from "../../components/ui/avatar";
-import { EmptyScreen } from "../../components/ui/empty-screen";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { getPlaceholderAvatar } from "../../vendor/avatar-url";
-
-export type UnpublishedEntityProps = {
-  teamSlug?: string | null;
-  orgSlug?: string | null;
-  logoUrl?: string | null;
-  name?: string | null;
-};
-
-export function UnpublishedEntity(props: UnpublishedEntityProps) {
-  const { t } = useLocale();
-  const slug = props.orgSlug || props.teamSlug;
-  return (
-    <div className="m-8 flex items-center justify-center">
-      <EmptyScreen
-        avatar={<Avatar alt={slug ?? ""} imageSrc={getPlaceholderAvatar(props.logoUrl, slug)} size="lg" />}
-        headline={t("team_is_unpublished", {
-          team: props.name,
-          interpolation: {
-            escapeValue: false,
-          },
-        })}
-        description={t(`${props.orgSlug ? "org" : "team"}_is_unpublished_description`)}
-      />
-    </div>
-  );
-}

package/src/booker/components/verify-code-dialog.tsx

@@ -1,131 +0,0 @@
-// @ts-nocheck — react-digit-input shape + dialog prop narrowing
-"use client";
-
-import type { Dispatch, SetStateAction } from "react";
-import { useCallback, useEffect, useState } from "react";
-import useDigitInput from "react-digit-input";
-import { Button } from "../../components/ui/button";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "../../components/ui/dialog";
-import { Icon } from "../../components/ui/icon";
-import { Label } from "../../components/ui/label";
-import { Input } from "../../components/ui/text-field";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { useBookerStoreContext } from "../booker-store-provider";
-
-export const VerifyCodeDialog = ({
-  isOpenDialog,
-  setIsOpenDialog,
-  email,
-  isUserSessionRequiredToVerify = true,
-  verifyCodeWithSessionNotRequired,
-  verifyCodeWithSessionRequired,
-  resetErrors,
-  setIsPending,
-  isPending,
-  error,
-  isPlatform: _isPlatform = false,
-}: {
-  isOpenDialog: boolean;
-  setIsOpenDialog: Dispatch<SetStateAction<boolean>>;
-  email: string;
-  isUserSessionRequiredToVerify?: boolean;
-  verifyCodeWithSessionNotRequired: (code: string, email: string) => void;
-  verifyCodeWithSessionRequired: (code: string, email: string) => void;
-  resetErrors: () => void;
-  isPending: boolean;
-  setIsPending: (status: boolean) => void;
-  error: string;
-  isPlatform?: boolean;
-}) => {
-  const { t } = useLocale();
-  const [value, setValue] = useState("");
-  const [hasVerified, setHasVerified] = useState(false);
-  const setVerificationCode = useBookerStoreContext((state) => state.setVerificationCode);
-
-  const digits = useDigitInput({
-    acceptedCharacters: /^[0-9]$/,
-    length: 6,
-    value,
-    onChange: useCallback((v: string) => {
-      resetErrors();
-      setValue(v);
-    }, []),
-  });
-
-  const verifyCode = useCallback(() => {
-    resetErrors();
-    setIsPending(true);
-    if (isUserSessionRequiredToVerify) {
-      verifyCodeWithSessionRequired(value, email);
-    } else {
-      verifyCodeWithSessionNotRequired(value, email);
-    }
-    setVerificationCode(value);
-    setHasVerified(true);
-  }, [
-    resetErrors,
-    setIsPending,
-    isUserSessionRequiredToVerify,
-    verifyCodeWithSessionRequired,
-    value,
-    email,
-    verifyCodeWithSessionNotRequired,
-    setVerificationCode,
-  ]);
-
-  useEffect(() => {
-    if (hasVerified || error || isPending || !/^\d{6}$/.test(value.trim())) return;
-    verifyCode();
-  }, [error, isPending, value, hasVerified]);
-
-  useEffect(() => setValue(""), [isOpenDialog]);
-
-  const digitClassName = "h-12 w-12 text-xl! text-center";
-
-  return (
-    <Dialog
-      open={isOpenDialog}
-      onOpenChange={() => {
-        resetErrors();
-      }}
-    >
-      <DialogContent className="sm:max-w-md">
-        <div className="flex flex-row">
-          <div className="w-full">
-            <DialogHeader title={t("verify_your_email")} subtitle={t("enter_digit_code", { email })} />
-            <Label htmlFor="code">{t("code")}</Label>
-            <div className="flex flex-row justify-between">
-              <Input
-                className={digitClassName}
-                name="2fa1"
-                inputMode="decimal"
-                {...digits[0]}
-                autoFocus
-                autoComplete="one-time-code"
-              />
-              <Input className={digitClassName} name="2fa2" inputMode="decimal" {...digits[1]} />
-              <Input className={digitClassName} name="2fa3" inputMode="decimal" {...digits[2]} />
-              <Input className={digitClassName} name="2fa4" inputMode="decimal" {...digits[3]} />
-              <Input className={digitClassName} name="2fa5" inputMode="decimal" {...digits[4]} />
-              <Input className={digitClassName} name="2fa6" inputMode="decimal" {...digits[5]} />
-            </div>
-            {error && (
-              <div className="mt-2 flex items-center gap-x-2 text-sm text-red-700">
-                <div>
-                  <Icon name="info" className="h-3 w-3" />
-                </div>
-                <p>{error}</p>
-              </div>
-            )}
-            <DialogFooter noSticky>
-              <DialogClose onClick={() => setIsOpenDialog(false)} />
-              <Button type="submit" onClick={verifyCode} loading={isPending}>
-                {t("submit")}
-              </Button>
-            </DialogFooter>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};