@calcom/atoms 2.8.0 → 2.8.2

package/src/booker/hooks/use-check-overlap-with-overlay.ts

@@ -1,49 +0,0 @@
-import type { Dayjs } from "dayjs";
-
-import dayjs from "../../vendor/dayjs";
-import { useOverlayCalendarStore } from "../components/overlay-calendar/store";
-
-function getCurrentTime(date: Date) {
-  const hours = date.getHours().toString().padStart(2, "0");
-  const minutes = date.getMinutes().toString().padStart(2, "0");
-  return `${hours}:${minutes}`;
-}
-
-export function useCheckOverlapWithOverlay({
-  start,
-  selectedDuration,
-  offset,
-}: {
-  start: Dayjs;
-  selectedDuration: number | null;
-  offset: number;
-}) {
-  const overlayBusyDates = useOverlayCalendarStore((state) => state.overlayBusyDates);
-
-  let overlappingTimeStart: string | null = null;
-  let overlappingTimeEnd: string | null = null;
-
-  const isOverlapping =
-    overlayBusyDates &&
-    overlayBusyDates.some((busyDate) => {
-      const busyDateStart = dayjs(busyDate.start);
-      const busyDateEnd = dayjs(busyDate.end);
-      const selectedEndTime = dayjs(start.add(offset, "hours")).add(selectedDuration ?? 0, "minute");
-
-      const overlaps =
-        (selectedEndTime.isSame(busyDateStart) || selectedEndTime.isAfter(busyDateStart)) &&
-        start.add(offset, "hours") < busyDateEnd &&
-        selectedEndTime > busyDateStart;
-
-      overlappingTimeStart = overlaps ? getCurrentTime(busyDateStart.toDate()) : null;
-      overlappingTimeEnd = overlaps ? getCurrentTime(busyDateEnd.toDate()) : null;
-
-      return overlaps;
-    });
-
-  return { isOverlapping, overlappingTimeStart, overlappingTimeEnd } as {
-    isOverlapping: boolean;
-    overlappingTimeStart: string | null;
-    overlappingTimeEnd: string | null;
-  };
-}

package/src/booker/hooks/use-initialize-week-start.ts

@@ -1,20 +0,0 @@
-import { useEffect } from "react";
-
-import dayjs from "../../vendor/dayjs";
-import { useBookerStoreContext } from "../booker-store-provider";
-import { useSlotsViewOnSmallScreen } from "./embed-stubs";
-
-export const useInitializeWeekStart = (isPlatform: boolean, isCalendarView: boolean) => {
-  const slotsViewOnSmallScreen = useSlotsViewOnSmallScreen();
-  const today = dayjs();
-  const weekStart = today.startOf("week").format("YYYY-MM-DD");
-  const setSelectedDate = useBookerStoreContext((state) => state.setSelectedDate);
-
-  useEffect(() => {
-    if (slotsViewOnSmallScreen) return;
-
-    if (isPlatform && isCalendarView) {
-      setSelectedDate({ date: weekStart, omitUpdatingParams: true });
-    }
-  }, []);
-};

package/src/booker/hooks/use-is-quick-availability-check-feature-enabled.ts

@@ -1,45 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-
-/**
- * Returns whether the current visitor falls inside the quick-availability
- * percentage rollout. atoms standalone consumers default to `percentage = 0`
- * (always off) since atoms doesn't ship a feature-flag service. The webapp
- * wrapper injects `percentage = PUBLIC_QUICK_AVAILABILITY_ROLLOUT` (and
- * forces 100 in E2E mode) so the booker still gates the check correctly.
- */
-export type UseIsQuickAvailabilityCheckFeatureEnabledOptions = {
-  /** Percentage of visitors for which the feature is enabled (0-100). */
-  percentage?: number;
-  /** Cookie name used to derive a deterministic visitor id. */
-  cookieName?: string;
-};
-
-const readCookie = (name: string): string | undefined => {
-  if (typeof document === "undefined") return undefined;
-  return document.cookie
-    .split(";")
-    .find((cookie) => cookie.trim().startsWith(`${name}=`))
-    ?.split("=")[1];
-};
-
-const isWithinPercentage = (percentage: number, cookieName: string): boolean => {
-  // 100% rollout — short-circuit so contexts without cookies (e.g. embeds)
-  // still see the feature.
-  if (percentage >= 100) return true;
-  if (percentage <= 0) return false;
-  const visitorId = readCookie(cookieName);
-  if (!visitorId) return false;
-  // Deterministic 0-99 derived from the last 4 hex chars of the visitor id.
-  const lastFour = visitorId.slice(-4);
-  const bucket = parseInt(lastFour, 16) % 100;
-  return bucket < percentage;
-};
-
-export const useIsQuickAvailabilityCheckFeatureEnabled = ({
-  percentage = 0,
-  cookieName = "uid",
-}: UseIsQuickAvailabilityCheckFeatureEnabledOptions = {}): boolean => {
-  return useMemo(() => isWithinPercentage(percentage, cookieName), [percentage, cookieName]);
-};

package/src/booker/hooks/use-local-set.tsx

@@ -1,70 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { localStorage } from "../../vendor/webstorage";
-
-export interface HasExternalId {
-  externalId: string;
-}
-
-export function useLocalSet<T extends HasExternalId>(key: string, initialValue: T[]) {
-  const [set, setSet] = useState<Set<T>>(() => {
-    const storedValue = localStorage.getItem(key);
-    return storedValue ? new Set(JSON.parse(storedValue)) : new Set(initialValue);
-  });
-
-  useEffect(() => {
-    localStorage.setItem(key, JSON.stringify(Array.from(set)));
-  }, [key, set]);
-
-  const addValue = (value: T) => {
-    setSet((prevSet) => new Set(prevSet).add(value));
-  };
-
-  const removeById = (id: string) => {
-    setSet((prevSet) => {
-      const updatedSet = new Set(prevSet);
-      updatedSet.forEach((item) => {
-        if (item.externalId === id) {
-          updatedSet.delete(item);
-        }
-      });
-      return updatedSet;
-    });
-  };
-
-  const toggleValue = (value: T): Set<T> => {
-    let newSet = new Set<T>();
-    setSet((prevSet) => {
-      const updatedSet = new Set<T>(prevSet);
-      let itemFound = false;
-
-      updatedSet.forEach((item) => {
-        if (item.externalId === value.externalId) {
-          itemFound = true;
-          updatedSet.delete(item);
-        }
-      });
-
-      if (!itemFound) {
-        updatedSet.add(value);
-      }
-
-      newSet = updatedSet;
-
-      return updatedSet;
-    });
-
-    return newSet;
-  };
-
-  const hasItem = (value: T) => {
-    return Array.from(set).some((item) => item.externalId === value.externalId);
-  };
-
-  const clearSet = () => {
-    setSet(() => new Set());
-    localStorage.removeItem(key);
-  };
-
-  return { set, addValue, removeById, toggleValue, hasItem, clearSet };
-}

package/src/booker/hooks/use-non-empty-schedule-days.ts

@@ -1,23 +0,0 @@
-import { useMemo } from "react";
-
-import type { Slots } from "../../contracts";
-
-const getNonEmptyScheduleDays = (slots?: Slots): string[] => {
-  if (typeof slots === "undefined") return [];
-
-  const nonEmptyDays: string[] = [];
-  Object.keys(slots).forEach((date) => {
-    if (
-      slots[date].some(
-        (slot) => !(slot?.away && !slot.toUser && !slot.showNotePublicly) && slots[date].length > 0
-      )
-    ) {
-      nonEmptyDays.push(date);
-    }
-  });
-  return nonEmptyDays;
-};
-
-export const useNonEmptyScheduleDays = (slots?: Slots) => {
-  return useMemo(() => getNonEmptyScheduleDays(slots), [slots]);
-};

package/src/booker/hooks/use-overlay-calendar.ts

@@ -1,94 +0,0 @@
-import { useEffect, useState } from "react";
-import { shallow } from "zustand/shallow";
-import type { EventBusyDate } from "../../contracts";
-import dayjs from "../../vendor/dayjs";
-import { useTimePreferences } from "../../vendor/time-preferences";
-import { useOverlayCalendarStore } from "../components/overlay-calendar/store";
-import type { ToggledConnectedCalendars } from "../types";
-import { useLocalSet } from "./use-local-set";
-
-type OverlayCalendarConnectedCalendar = {
-  calendars?: {
-    externalId: string;
-    primary: boolean | null;
-  }[];
-  credentialId: number;
-};
-
-export const useOverlayCalendar = ({
-  connectedCalendars,
-  overlayBusyDates,
-  onToggleCalendar,
-}: {
-  overlayBusyDates?: EventBusyDate[];
-  onToggleCalendar: (calendarsToLoad: Set<ToggledConnectedCalendars>) => void;
-  connectedCalendars: OverlayCalendarConnectedCalendar[];
-}): {
-  isOpenOverlayContinueModal: boolean;
-  isOpenOverlaySettingsModal: boolean;
-  handleCloseContinueModal: (val: boolean) => void;
-  handleCloseSettingsModal: (val: boolean) => void;
-  handleToggleConnectedCalendar: (externalCalendarId: string, credentialId: number) => void;
-  checkIsCalendarToggled: (externalId: string, credentialId: number) => boolean;
-} => {
-  const { set, toggleValue, hasItem } = useLocalSet<ToggledConnectedCalendars>(
-    "toggledConnectedCalendars",
-    []
-  );
-  const [initalised, setInitalised] = useState(false);
-  const [continueWithProvider, setContinueWithProvider] = useOverlayCalendarStore(
-    (state) => [state.continueWithProviderModal, state.setContinueWithProviderModal],
-    shallow
-  );
-  const [calendarSettingsOverlay, setCalendarSettingsOverlay] = useOverlayCalendarStore(
-    (state) => [state.calendarSettingsOverlayModal, state.setCalendarSettingsOverlayModal],
-    shallow
-  );
-  const setOverlayBusyDates = useOverlayCalendarStore((state) => state.setOverlayBusyDates);
-  const { timezone } = useTimePreferences();
-
-  useEffect(() => {
-    if (overlayBusyDates) {
-      const nowDate = dayjs();
-      const usersTimezoneDate = nowDate.tz(timezone);
-      const offset = (usersTimezoneDate.utcOffset() - nowDate.utcOffset()) / 60;
-
-      const offsettedArray = overlayBusyDates.map((item) => ({
-        ...item,
-        start: dayjs(item.start).add(offset, "hours").toDate(),
-        end: dayjs(item.end).add(offset, "hours").toDate(),
-      }));
-      setOverlayBusyDates(offsettedArray);
-    }
-  }, [overlayBusyDates]);
-
-  useEffect(() => {
-    if (connectedCalendars && set.size === 0 && !initalised) {
-      connectedCalendars.forEach((item) => {
-        item.calendars?.forEach((cal) => {
-          const id = { credentialId: item.credentialId, externalId: cal.externalId };
-          if (cal.primary) {
-            toggleValue(id);
-          }
-        });
-      });
-      setInitalised(true);
-    }
-  }, [hasItem, set, initalised]);
-
-  const handleToggleConnectedCalendar = (externalCalendarId: string, credentialId: number): void => {
-    const calendarsToLoad = toggleValue({ credentialId, externalId: externalCalendarId });
-    setOverlayBusyDates([]);
-    onToggleCalendar(calendarsToLoad);
-  };
-
-  return {
-    isOpenOverlayContinueModal: continueWithProvider,
-    isOpenOverlaySettingsModal: calendarSettingsOverlay,
-    handleCloseContinueModal: (val: boolean) => setContinueWithProvider(val),
-    handleCloseSettingsModal: (val: boolean) => setCalendarSettingsOverlay(val),
-    handleToggleConnectedCalendar,
-    checkIsCalendarToggled: (externalId: string, credentialId: number) =>
-      hasItem({ credentialId, externalId }),
-  };
-};

package/src/booker/hooks/use-should-show-arrows.ts

@@ -1,33 +0,0 @@
-import type { UIEvent } from "react";
-import { useEffect, useRef, useState } from "react";
-
-export function useShouldShowArrows() {
-  const ref = useRef<HTMLUListElement>(null);
-  const [showArrowScroll, setShowArrowScroll] = useState({
-    left: false,
-    right: false,
-  });
-
-  useEffect(() => {
-    const appCategoryList = ref.current;
-    if (appCategoryList) {
-      const isAtStart = appCategoryList.scrollLeft <= 0;
-      const isAtEnd = appCategoryList.scrollWidth <= appCategoryList.clientWidth + appCategoryList.scrollLeft;
-      setShowArrowScroll({
-        left: !isAtStart,
-        right: !isAtEnd,
-      });
-    }
-  }, [ref.current?.scrollWidth, ref.current?.clientWidth]);
-
-  const calculateScroll = (e: UIEvent<HTMLUListElement>) => {
-    const target = e.currentTarget;
-    const isAtEnd = target.scrollWidth <= target.clientWidth + target.scrollLeft + 1;
-    setShowArrowScroll({
-      left: target.scrollLeft > 0,
-      right: !isAtEnd,
-    });
-  };
-
-  return { ref, calculateScroll, leftVisible: showArrowScroll.left, rightVisible: showArrowScroll.right };
-}

package/src/booker/hooks/use-skip-confirm-step.ts

@@ -1,79 +0,0 @@
-// @ts-nocheck — generic form ref, callers may use their own form value shape
-"use client";
-
-import { useEffect, useState } from "react";
-import type { UseFormReturn } from "react-hook-form";
-import type { BookerEvent } from "../../contracts";
-import { useBookerStore } from "../store";
-
-type BookerState = "loading" | "selecting_date" | "selecting_time" | "booking";
-
-/**
- * Decides whether the booker can skip the confirm step (jump straight from
- * timeslot selection to a successful booking) when the user has already
- * filled all required fields via prefill / session.
- *
- * Atoms standalone consumers can't run the full bookingResponses zod schema
- * (it depends on `@calcom/features/bookings/lib/getBookingResponsesSchema`
- * which drags in Prisma + form-builder), so by default the hook returns
- * `false` (always show the confirm step). The webapp wrapper injects
- * `shouldSkipForResponses` — an async checker that runs the schema's
- * `safeParseAsync` against the current form responses.
- */
-export type UseSkipConfirmStepOptions = {
-  shouldSkipForResponses?: (responses: unknown) => Promise<boolean>;
-};
-
-export const useSkipConfirmStep = (
-  bookingForm: UseFormReturn<any>,
-  bookerState: BookerState,
-  isInstantMeeting: boolean,
-  isWeekView: boolean,
-  bookingFields?: BookerEvent["bookingFields"],
-  locations?: BookerEvent["locations"],
-  options: UseSkipConfirmStepOptions = {}
-) => {
-  const [canSkip, setCanSkip] = useState(false);
-  const rescheduleUid = useBookerStore((state) => state.rescheduleUid);
-  const { shouldSkipForResponses } = options;
-  const bookingFormValues = bookingForm?.getValues?.() ?? {};
-
-  useEffect(() => {
-    let cancelled = false;
-    const checkSkipStep = async () => {
-      if (!bookingFields || (locations && locations.length > 1)) {
-        if (!cancelled) setCanSkip(false);
-        return;
-      }
-      // No injected resolver — atoms's safe default.
-      if (!shouldSkipForResponses) {
-        if (!cancelled) setCanSkip(false);
-        return;
-      }
-      try {
-        const ok = await shouldSkipForResponses(bookingFormValues.responses);
-        if (!cancelled) setCanSkip(ok);
-      } catch {
-        if (!cancelled) setCanSkip(false);
-      }
-    };
-    const isSkipConfirmStepSupported = !isInstantMeeting && !isWeekView;
-    if (bookerState === "selecting_time" && isSkipConfirmStepSupported) {
-      checkSkipStep();
-    }
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    bookingFormValues,
-    bookingFields,
-    rescheduleUid,
-    bookerState,
-    isWeekView,
-    isInstantMeeting,
-    locations,
-    shouldSkipForResponses,
-  ]);
-
-  return canSkip;
-};

package/src/booker/hooks/use-slots-for-date.ts

@@ -1,51 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-
-import type { Slots } from "../../contracts";
-import type { Slot } from "../types";
-
-/** Slots for a specific YYYY-MM-DD date from a schedule cache. */
-export const useSlotsForDate = (date: string | null, slots?: Slots) => {
-  return useMemo(() => {
-    if (!date || typeof slots === "undefined") return [];
-    return slots[date] || [];
-  }, [date, slots]);
-};
-
-/**
- * Slots grouped per day. `toggleConfirmButton` flips the
- * `showConfirmButton` tentative flag for the clicked slot (used by
- * the AvailableTimes "skip confirm step" flow).
- */
-export const useSlotsForAvailableDates = (dates: (string | null)[], slots?: Slots) => {
-  const [slotsPerDay, setSlotsPerDay] = useState<{ date: string | null; slots: Slots[string] }[]>([]);
-
-  const toggleConfirmButton = useCallback((selectedSlot: Slot) => {
-    setSlotsPerDay((prevSlotsPerDay) =>
-      prevSlotsPerDay.map(({ date, slots: daySlots }) => ({
-        date,
-        slots: daySlots.map((slot) => ({
-          ...slot,
-          showConfirmButton: slot.time === selectedSlot.time ? !selectedSlot?.showConfirmButton : false,
-        })),
-      }))
-    );
-  }, []);
-
-  useEffect(() => {
-    if (slots === undefined) {
-      setSlotsPerDay([]);
-      return;
-    }
-
-    const updatedSlots = dates
-      .filter((date) => date !== null)
-      .map((date) => ({
-        slots: slots[`${date}`] || [],
-        date,
-      }));
-
-    setSlotsPerDay(updatedSlots);
-  }, [JSON.stringify(dates), JSON.stringify(slots)]);
-
-  return { slotsPerDay, setSlotsPerDay, toggleConfirmButton } as const;
-};

package/src/booker/hooks/use-stable-timezone.ts

@@ -1,13 +0,0 @@
-import { useRef } from "react";
-
-export function useStableTimezone(
-  timezone: string,
-  restrictionSchedule?: { id: number | null; useBookerTimezone: boolean }
-): string {
-  const initialRef = useRef(timezone);
-  const shouldPin =
-    restrictionSchedule?.id != null &&
-    restrictionSchedule.id > 0 &&
-    restrictionSchedule.useBookerTimezone === false;
-  return shouldPin ? initialRef.current : timezone;
-}

package/src/booker/hooks/use-times-for-schedule.ts

@@ -1,123 +0,0 @@
-import { shallow } from "zustand/shallow";
-import type { BookerState } from "../../contracts";
-import dayjs from "../../vendor/dayjs";
-import { useBookerStoreContext } from "../booker-store-provider";
-import { getPrefetchMonthCount } from "../utils/get-prefetch-month-count";
-import { isPrefetchNextMonthEnabled } from "../utils/is-prefetch-next-month-enabled";
-
-type UseScheduleWithCacheArgs = {
-  username?: string | null;
-  eventSlug?: string | null;
-  eventId?: number | null;
-  month?: string | null;
-  timezone?: string | null;
-  selectedDate?: string | null;
-  duration?: number | null;
-  dayCount?: number | null;
-  rescheduleUid?: string | null;
-  isTeamEvent?: boolean;
-  orgSlug?: string;
-  teamMemberEmail?: string | null;
-  useApiV2?: boolean;
-  enabled?: boolean;
-  bookerLayout?: {
-    layout: string;
-    extraDays: number;
-    columnViewExtraDays: { current: number };
-  };
-};
-
-type UseTimesForScheduleProps = Pick<
-  UseScheduleWithCacheArgs,
-  "month" | "dayCount" | "selectedDate" | "bookerLayout"
->;
-
-interface UsePrefetchParams {
-  date: string;
-  month: string | null;
-  bookerLayout?: {
-    layout: string;
-    extraDays: number;
-    columnViewExtraDays: { current: number };
-  };
-  bookerState: BookerState;
-}
-
-const usePrefetch = ({ date, month, bookerLayout, bookerState }: UsePrefetchParams) => {
-  if (!bookerLayout) {
-    return null;
-  }
-
-  const dateMonth = dayjs(date).month();
-  const monthAfterAdding1Month = dayjs(date).add(1, "month").month();
-  const monthAfterAddingExtraDays = dayjs(date).add(bookerLayout.extraDays, "day").month();
-  const monthAfterAddingExtraDaysColumnView = dayjs(date)
-    .add(bookerLayout.columnViewExtraDays.current, "day")
-    .month();
-
-  const prefetchNextMonth = isPrefetchNextMonthEnabled(
-    bookerLayout.layout,
-    date,
-    dateMonth,
-    monthAfterAddingExtraDays,
-    monthAfterAddingExtraDaysColumnView,
-    month,
-    bookerLayout.extraDays
-  );
-
-  if (!prefetchNextMonth) {
-    return null;
-  }
-
-  const monthCount = getPrefetchMonthCount(
-    bookerLayout.layout,
-    bookerState,
-    monthAfterAdding1Month,
-    monthAfterAddingExtraDaysColumnView,
-    prefetchNextMonth
-  );
-
-  return { monthsToPrefetch: monthCount ?? 1 };
-};
-
-export const useTimesForSchedule = ({
-  month: monthFromProps,
-  selectedDate,
-  dayCount,
-  bookerLayout,
-}: UseTimesForScheduleProps): [string, string] => {
-  const [monthFromStore, bookerState] = useBookerStoreContext((state) => [state.month, state.state], shallow);
-  const month = monthFromStore ?? monthFromProps ?? null;
-  const date = dayjs(selectedDate).format("YYYY-MM-DD");
-  const prefetchData = usePrefetch({
-    date,
-    month,
-    bookerLayout,
-    bookerState,
-  });
-
-  const now = dayjs();
-  const monthDayjs = month ? dayjs(month) : now;
-
-  let startTime;
-  let endTime;
-
-  if (!!dayCount && dayCount > 0) {
-    if (selectedDate) {
-      startTime = dayjs(selectedDate).toISOString();
-      endTime = dayjs(selectedDate).add(dayCount, "day").toISOString();
-    } else if (monthDayjs.month() === now.month()) {
-      startTime = now.startOf("day").toISOString();
-      endTime = now.startOf("day").add(dayCount, "day").toISOString();
-    } else {
-      startTime = monthDayjs.startOf("month").toISOString();
-      endTime = monthDayjs.startOf("month").add(dayCount, "day").toISOString();
-    }
-  } else {
-    const monthsToPrefetch = prefetchData?.monthsToPrefetch;
-    const lastMonthToPrefetchDayjs = monthsToPrefetch ? monthDayjs.add(monthsToPrefetch, "month") : null;
-    startTime = monthDayjs.startOf("month").toISOString();
-    endTime = (lastMonthToPrefetchDayjs ? lastMonthToPrefetchDayjs : monthDayjs).endOf("month").toISOString();
-  }
-  return [startTime, endTime];
-};