@calcom/atoms 2.7.2 → 2.8.1

package/src/booker/booker-store-provider.tsx

@@ -1,117 +0,0 @@
-"use client";
-
-import { createContext, type ReactNode, useContext, useEffect, useRef } from "react";
-import type { StoreApi } from "zustand";
-import { useStore } from "zustand";
-
-import { type BookerStore, createBookerStore, type StoreInitializeType } from "./store";
-
-export const BookerStoreContext = createContext<StoreApi<BookerStore> | null>(null);
-
-export interface BookerStoreProviderProps {
-  children: ReactNode;
-}
-
-export const BookerStoreProvider = ({ children }: BookerStoreProviderProps) => {
-  // React 19 made `useRef` require an initial value (no zero-arg overload).
-  const storeRef = useRef<StoreApi<BookerStore> | null>(null);
-  if (!storeRef.current) {
-    storeRef.current = createBookerStore();
-  }
-
-  return <BookerStoreContext.Provider value={storeRef.current}>{children}</BookerStoreContext.Provider>;
-};
-
-export const useBookerStoreContext = <T,>(
-  selector: (store: BookerStore) => T,
-  equalityFn?: (a: T, b: T) => boolean
-): T => {
-  const bookerStoreContext = useContext(BookerStoreContext);
-
-  if (!bookerStoreContext) {
-    throw new Error("useBookerStoreContext must be used within BookerStoreProvider");
-  }
-
-  return useStore(bookerStoreContext, selector, equalityFn);
-};
-
-export const useInitializeBookerStoreContext = ({
-  username,
-  eventSlug,
-  month,
-  eventId,
-  rescheduleUid = null,
-  rescheduledBy = null,
-  bookingData = null,
-  verifiedEmail = null,
-  layout,
-  isTeamEvent,
-  durationConfig,
-  org,
-  isInstantMeeting,
-  timezone = null,
-  teamMemberEmail,
-  crmOwnerRecordType,
-  crmAppSlug,
-  crmRecordId,
-  pendingCrmTraceId,
-  isPlatform = false,
-  allowUpdatingUrlParams = true,
-}: StoreInitializeType) => {
-  const bookerStoreContext = useContext(BookerStoreContext);
-
-  if (!bookerStoreContext) {
-    throw new Error("useInitializeBookerStoreContext must be used within BookerStoreProvider");
-  }
-
-  const initializeStore = useStore(bookerStoreContext, (state) => state.initialize);
-
-  useEffect(() => {
-    initializeStore({
-      username,
-      eventSlug,
-      month,
-      eventId,
-      rescheduleUid,
-      rescheduledBy,
-      bookingData,
-      layout,
-      isTeamEvent,
-      org,
-      verifiedEmail,
-      durationConfig,
-      isInstantMeeting,
-      timezone,
-      teamMemberEmail,
-      crmOwnerRecordType,
-      crmAppSlug,
-      crmRecordId,
-      pendingCrmTraceId,
-      isPlatform,
-      allowUpdatingUrlParams,
-    });
-  }, [
-    initializeStore,
-    org,
-    username,
-    eventSlug,
-    month,
-    eventId,
-    rescheduleUid,
-    rescheduledBy,
-    bookingData,
-    layout,
-    isTeamEvent,
-    verifiedEmail,
-    durationConfig,
-    isInstantMeeting,
-    timezone,
-    teamMemberEmail,
-    crmOwnerRecordType,
-    crmAppSlug,
-    crmRecordId,
-    pendingCrmTraceId,
-    isPlatform,
-    allowUpdatingUrlParams,
-  ]);
-};

package/src/booker/components/available-time-slots.tsx

@@ -1,245 +0,0 @@
-// @ts-nocheck — loose schedule shape + BookerEvent contract
-"use client";
-
-import { useCallback, useMemo, useRef } from "react";
-import type { BookerEvent } from "../../contracts";
-import { BookerLayouts } from "../../contracts/booker";
-import { cn } from "../../lib/utils";
-import dayjs from "../../vendor/dayjs";
-import { getQueryParam } from "../../vendor/query-param";
-import { localStorage } from "../../vendor/webstorage";
-import { useBookerStoreContext } from "../booker-store-provider";
-import type { IUseBookingLoadingStates } from "../hooks/use-bookings-types";
-import { useNonEmptyScheduleDays } from "../hooks/use-non-empty-schedule-days";
-import { useSlotsForAvailableDates } from "../hooks/use-slots-for-date";
-import type { Slot } from "../types";
-
-import { AvailableTimes, AvailableTimesSkeleton } from "./available-times";
-import { AvailableTimesHeader } from "./available-times-header";
-
-type ScheduleData = {
-  data?: { slots?: Record<string, Slot[]> } | null;
-  invalidate?: () => void;
-};
-
-type AvailableTimeSlotsProps = {
-  extraDays?: number;
-  limitHeight?: boolean;
-  schedule?: ScheduleData;
-  isLoading: boolean;
-  seatsPerTimeSlot?: number | null;
-  showAvailableSeatsCount?: boolean | null;
-  event: {
-    data?: Pick<BookerEvent, "length" | "bookingFields" | "price" | "currency" | "metadata"> | null;
-  };
-  customClassNames?: {
-    availableTimeSlotsContainer?: string;
-    availableTimeSlotsTitle?: string;
-    availableTimeSlotsHeaderContainer?: string;
-    availableTimeSlotsTimeFormatToggle?: string;
-    availableTimes?: string;
-  };
-  confirmStepClassNames?: {
-    confirmButton?: string;
-  };
-  loadingStates: IUseBookingLoadingStates;
-  isVerificationCodeSending: boolean;
-  renderConfirmNotVerifyEmailButtonCond: boolean;
-  onSubmit: (timeSlot?: string) => void;
-  skipConfirmStep: boolean;
-  shouldRenderCaptcha?: boolean;
-  watchedCfToken?: string;
-  unavailableTimeSlots: string[];
-  confirmButtonDisabled?: boolean;
-  onAvailableTimeSlotSelect: (time: string) => void;
-  hideAvailableTimesHeader?: boolean;
-  isPlatform?: boolean;
-  invalidateAvailableSlotsOnBookingForm?: boolean;
-};
-
-export const AvailableTimeSlots = ({
-  extraDays,
-  limitHeight,
-  showAvailableSeatsCount,
-  schedule,
-  isLoading,
-  customClassNames,
-  skipConfirmStep,
-  seatsPerTimeSlot,
-  onSubmit,
-  unavailableTimeSlots,
-  confirmButtonDisabled,
-  confirmStepClassNames,
-  onAvailableTimeSlotSelect,
-  hideAvailableTimesHeader = false,
-  isPlatform = false,
-  invalidateAvailableSlotsOnBookingForm = false,
-  ...props
-}: AvailableTimeSlotsProps) => {
-  const selectedDate = useBookerStoreContext((state) => state.selectedDate);
-
-  const setSeatedEventData = useBookerStoreContext((state) => state.setSeatedEventData);
-  const date = selectedDate || dayjs().format("YYYY-MM-DD");
-  const [layout] = useBookerStoreContext((state) => [state.layout]);
-  const isColumnView = layout === BookerLayouts.COLUMN_VIEW;
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const { setTentativeSelectedTimeslots, tentativeSelectedTimeslots } = useBookerStoreContext((state) => ({
-    setTentativeSelectedTimeslots: state.setTentativeSelectedTimeslots,
-    tentativeSelectedTimeslots: state.tentativeSelectedTimeslots,
-  }));
-
-  const onTentativeTimeSelect = ({
-    time,
-  }: {
-    time: string;
-    attendees: number;
-    seatsPerTimeSlot?: number | null;
-    bookingUid?: string;
-  }) => {
-    setTentativeSelectedTimeslots([time]);
-  };
-
-  const scheduleData = schedule?.data;
-
-  const nonEmptyScheduleDays = useNonEmptyScheduleDays(scheduleData?.slots);
-  const nonEmptyScheduleDaysFromSelectedDate = nonEmptyScheduleDays.filter(
-    (slot) => dayjs(selectedDate).diff(slot, "day") <= 0
-  );
-
-  const dates = useMemo(() => {
-    if (!extraDays) return [date];
-    if (nonEmptyScheduleDaysFromSelectedDate.length > 0) {
-      return nonEmptyScheduleDaysFromSelectedDate.slice(0, extraDays);
-    }
-    return [];
-  }, [date, extraDays, nonEmptyScheduleDaysFromSelectedDate]);
-
-  const { slotsPerDay, toggleConfirmButton } = useSlotsForAvailableDates(dates, scheduleData?.slots);
-
-  const overlayCalendarToggled =
-    getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
-
-  const onTimeSelect = useCallback(
-    (time: string, attendees: number, seatsPerTimeSlot?: number | null, bookingUid?: string) => {
-      if (invalidateAvailableSlotsOnBookingForm) {
-        schedule?.invalidate?.();
-      }
-      setTentativeSelectedTimeslots([]);
-      if (seatsPerTimeSlot) {
-        setSeatedEventData({
-          seatsPerTimeSlot,
-          attendees,
-          bookingUid,
-          showAvailableSeatsCount,
-        });
-      }
-
-      onAvailableTimeSlotSelect(time);
-
-      const isTimeSlotAvailable = !unavailableTimeSlots.includes(time);
-      if (skipConfirmStep && isTimeSlotAvailable) {
-        onSubmit(time);
-      }
-      return;
-    },
-    [
-      onSubmit,
-      setSeatedEventData,
-      skipConfirmStep,
-      showAvailableSeatsCount,
-      unavailableTimeSlots,
-      schedule,
-      setTentativeSelectedTimeslots,
-      onAvailableTimeSlotSelect,
-    ]
-  );
-
-  const handleSlotClick = useCallback(
-    (selectedSlot: Slot, isOverlapping: boolean) => {
-      if ((overlayCalendarToggled && isOverlapping) || skipConfirmStep) {
-        toggleConfirmButton(selectedSlot);
-      } else {
-        onTimeSelect(
-          selectedSlot.time,
-          selectedSlot?.attendees || 0,
-          seatsPerTimeSlot,
-          selectedSlot.bookingUid
-        );
-      }
-    },
-    [overlayCalendarToggled, onTimeSelect, seatsPerTimeSlot, skipConfirmStep, toggleConfirmButton]
-  );
-
-  return (
-    <>
-      <div
-        className={cn(
-          `flex`,
-          hideAvailableTimesHeader && "hidden",
-          `${customClassNames?.availableTimeSlotsContainer}`
-        )}
-      >
-        {isLoading ? (
-          <div className="mb-3 h-8" />
-        ) : (
-          slotsPerDay.length > 0 &&
-          slotsPerDay.map((slots) => {
-            const isOOODay = slots.slots.length > 0 && slots.slots[0]?.away;
-            return (
-              <AvailableTimesHeader
-                customClassNames={{
-                  availableTimeSlotsHeaderContainer: customClassNames?.availableTimeSlotsHeaderContainer,
-                  availableTimeSlotsTitle: customClassNames?.availableTimeSlotsTitle,
-                  availableTimeSlotsTimeFormatToggle: customClassNames?.availableTimeSlotsTimeFormatToggle,
-                }}
-                key={slots.date}
-                date={dayjs(slots.date)}
-                showTimeFormatToggle={!isColumnView && !isOOODay}
-                availableMonth={
-                  dayjs(selectedDate).format("MM") !== dayjs(slots.date).format("MM")
-                    ? dayjs(slots.date).format("MMM")
-                    : undefined
-                }
-              />
-            );
-          })
-        )}
-      </div>
-
-      <div
-        ref={containerRef}
-        className={cn(
-          limitHeight && "no-scrollbar grow overflow-auto md:h-[400px]",
-          !limitHeight && "flex h-full w-full flex-row gap-4",
-          `${customClassNames?.availableTimeSlotsContainer}`
-        )}
-      >
-        {isLoading &&
-          Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)}
-        {!isLoading &&
-          slotsPerDay.length > 0 &&
-          slotsPerDay.map((slots) => (
-            <div key={slots.date} className="no-scrollbar overflow-x-hidden! h-full w-full overflow-y-auto">
-              <AvailableTimes
-                className={customClassNames?.availableTimeSlotsContainer}
-                customClassNames={customClassNames?.availableTimes}
-                showTimeFormatToggle={!isColumnView}
-                onTimeSelect={onTimeSelect}
-                isPlatform={isPlatform}
-                onTentativeTimeSelect={onTentativeTimeSelect}
-                unavailableTimeSlots={unavailableTimeSlots}
-                slots={slots.slots}
-                showAvailableSeatsCount={showAvailableSeatsCount}
-                skipConfirmStep={skipConfirmStep}
-                seatsPerTimeSlot={seatsPerTimeSlot}
-                handleSlotClick={handleSlotClick}
-                confirmButtonDisabled={confirmButtonDisabled}
-                confirmStepClassNames={confirmStepClassNames}
-                {...props}
-              />
-            </div>
-          ))}
-      </div>
-    </>
-  );
-};

package/src/booker/components/available-times-header.tsx

@@ -1,79 +0,0 @@
-"use client";
-
-import type { Dayjs } from "dayjs";
-import { shallow } from "zustand/shallow";
-import { BookerLayouts } from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import dayjs from "../../vendor/dayjs";
-import { nameOfDay } from "../../vendor/weekday";
-import { useBookerStoreContext } from "../booker-store-provider";
-import { TimeFormatToggle } from "./time-format-toggle";
-
-type AvailableTimesHeaderProps = {
-  date: Dayjs;
-  showTimeFormatToggle?: boolean;
-  availableMonth?: string | undefined;
-  customClassNames?: {
-    availableTimeSlotsHeaderContainer?: string;
-    availableTimeSlotsTitle?: string;
-    availableTimeSlotsTimeFormatToggle?: string;
-  };
-};
-
-export const AvailableTimesHeader = ({
-  date,
-  showTimeFormatToggle = true,
-  availableMonth,
-  customClassNames,
-}: AvailableTimesHeaderProps) => {
-  const { i18n } = useLocale();
-  const [layout] = useBookerStoreContext((state) => [state.layout], shallow);
-  const isColumnView = layout === BookerLayouts.COLUMN_VIEW;
-  const isMonthView = layout === BookerLayouts.MONTH_VIEW;
-  const isToday = dayjs().isSame(date, "day");
-
-  return (
-    <header
-      className={cn(
-        `dark:bg-cal-muted dark:before:bg-cal-muted mb-3 flex w-full flex-row items-center font-medium`,
-        "bg-default before:bg-default",
-        customClassNames?.availableTimeSlotsHeaderContainer
-      )}
-    >
-      <span
-        className={cn(
-          isColumnView && "w-full text-center",
-          isColumnView ? "text-subtle text-xs uppercase" : "text-emphasis font-semibold"
-        )}
-      >
-        <span
-          className={cn(
-            isToday && !customClassNames?.availableTimeSlotsTitle && "!text-default",
-            customClassNames?.availableTimeSlotsTitle
-          )}
-        >
-          {nameOfDay(i18n.language, Number(date.format("d")), "short")}
-        </span>
-        <span
-          className={cn(
-            isColumnView && isToday && "bg-brand-default text-brand ml-2",
-            "inline-flex items-center justify-center rounded-3xl px-1 pt-0.5 font-medium",
-            isMonthView
-              ? `text-default text-sm ${customClassNames?.availableTimeSlotsTitle ?? ""}`
-              : `text-xs ${customClassNames?.availableTimeSlotsTitle ?? ""}`
-          )}
-        >
-          {date.format("DD")}
-          {availableMonth && `, ${availableMonth}`}
-        </span>
-      </span>
-
-      {showTimeFormatToggle && (
-        <div className="ml-auto rtl:mr-auto">
-          <TimeFormatToggle customClassName={customClassNames?.availableTimeSlotsTimeFormatToggle} />
-        </div>
-      )}
-    </header>
-  );
-};