@calcom/atoms 2.8.0 → 2.8.2

package/src/booker/store.ts

@@ -1,831 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-"use client";
-
-import { useEffect } from "react";
-import { v4 as uuidv4 } from "uuid";
-import { createWithEqualityFn } from "zustand/traditional";
-import { BOOKER_NUMBER_OF_DAYS_TO_LOAD } from "../constants";
-import type { BookerLayout, BookerState, GetBookingType } from "../contracts";
-import { BookerLayouts } from "../contracts";
-import dayjs from "../vendor/dayjs";
-import { getQueryParam, removeQueryParam, updateQueryParam } from "../vendor/query-param";
-import { getBookingDuration } from "./utils/get-booking-duration";
-
-const _iso_3166_1_alpha_2_codes = [
-  "ad",
-  "ae",
-  "af",
-  "ag",
-  "ai",
-  "al",
-  "am",
-  "ao",
-  "aq",
-  "ar",
-  "as",
-  "at",
-  "au",
-  "aw",
-  "ax",
-  "az",
-  "ba",
-  "bb",
-  "bd",
-  "be",
-  "bf",
-  "bg",
-  "bh",
-  "bi",
-  "bj",
-  "bl",
-  "bm",
-  "bn",
-  "bo",
-  "bq",
-  "br",
-  "bs",
-  "bt",
-  "bv",
-  "bw",
-  "by",
-  "bz",
-  "ca",
-  "cc",
-  "cd",
-  "cf",
-  "cg",
-  "ch",
-  "ci",
-  "ck",
-  "cl",
-  "cm",
-  "cn",
-  "co",
-  "cr",
-  "cu",
-  "cv",
-  "cw",
-  "cx",
-  "cy",
-  "cz",
-  "de",
-  "dj",
-  "dk",
-  "dm",
-  "do",
-  "dz",
-  "ec",
-  "ee",
-  "eg",
-  "eh",
-  "er",
-  "es",
-  "et",
-  "fi",
-  "fj",
-  "fk",
-  "fm",
-  "fo",
-  "fr",
-  "ga",
-  "gb",
-  "gd",
-  "ge",
-  "gf",
-  "gg",
-  "gh",
-  "gi",
-  "gl",
-  "gm",
-  "gn",
-  "gp",
-  "gq",
-  "gr",
-  "gs",
-  "gt",
-  "gu",
-  "gw",
-  "gy",
-  "hk",
-  "hm",
-  "hn",
-  "hr",
-  "ht",
-  "hu",
-  "id",
-  "ie",
-  "il",
-  "im",
-  "in",
-  "io",
-  "iq",
-  "ir",
-  "is",
-  "it",
-  "je",
-  "jm",
-  "jo",
-  "jp",
-  "ke",
-  "kg",
-  "kh",
-  "ki",
-  "km",
-  "kn",
-  "kp",
-  "kr",
-  "kw",
-  "ky",
-  "kz",
-  "la",
-  "lb",
-  "lc",
-  "li",
-  "lk",
-  "lr",
-  "ls",
-  "lt",
-  "lu",
-  "lv",
-  "ly",
-  "ma",
-  "mc",
-  "md",
-  "me",
-  "mf",
-  "mg",
-  "mh",
-  "mk",
-  "ml",
-  "mm",
-  "mn",
-  "mo",
-  "mp",
-  "mq",
-  "mr",
-  "ms",
-  "mt",
-  "mu",
-  "mv",
-  "mw",
-  "mx",
-  "my",
-  "mz",
-  "na",
-  "nc",
-  "ne",
-  "nf",
-  "ng",
-  "ni",
-  "nl",
-  "no",
-  "np",
-  "nr",
-  "nu",
-  "nz",
-  "om",
-  "pa",
-  "pe",
-  "pf",
-  "pg",
-  "ph",
-  "pk",
-  "pl",
-  "pm",
-  "pn",
-  "pr",
-  "ps",
-  "pt",
-  "pw",
-  "py",
-  "qa",
-  "re",
-  "ro",
-  "rs",
-  "ru",
-  "rw",
-  "sa",
-  "sb",
-  "sc",
-  "sd",
-  "se",
-  "sg",
-  "sh",
-  "si",
-  "sj",
-  "sk",
-  "sl",
-  "sm",
-  "sn",
-  "so",
-  "sr",
-  "ss",
-  "st",
-  "sv",
-  "sx",
-  "sy",
-  "tc",
-  "td",
-  "tf",
-  "tg",
-  "th",
-  "tj",
-  "tk",
-  "tl",
-  "tm",
-  "tn",
-  "to",
-  "tr",
-  "tt",
-  "tv",
-  "tw",
-  "tz",
-  "ua",
-  "ug",
-  "um",
-  "us",
-  "uy",
-  "uz",
-  "va",
-  "vc",
-  "ve",
-  "vg",
-  "vi",
-  "vn",
-  "vu",
-  "wf",
-  "ws",
-  "ye",
-  "yt",
-  "za",
-  "zm",
-  "zw",
-] as const;
-
-export type CountryCode = (typeof _iso_3166_1_alpha_2_codes)[number];
-
-/**
- * Arguments passed into store initializer, containing
- * the event data.
- */
-export type StoreInitializeType = {
-  username: string;
-  eventSlug: string;
-  // Month can be undefined if it's not passed in as a prop.
-  eventId: number | undefined;
-  // Webapp callers pass `bookerLayout.defaultLayout` which is `string | undefined`
-  // (typed loosely on the consumer side). Atoms's runtime defaults to MONTH_VIEW
-  // when undefined, so accept both.
-  layout: BookerLayout | string | undefined;
-  month?: string;
-  bookingUid?: string | null;
-  isTeamEvent?: boolean;
-  bookingData?: GetBookingType | null | undefined;
-  verifiedEmail?: string | null;
-  rescheduleUid?: string | null;
-  rescheduledBy?: string | null;
-  seatReferenceUid?: string;
-  durationConfig?: number[] | null;
-  org?: string | null;
-  isInstantMeeting?: boolean;
-  timezone?: string | null;
-  teamMemberEmail?: string | null;
-  crmOwnerRecordType?: string | null;
-  crmAppSlug?: string | null;
-  crmRecordId?: string | null;
-  pendingCrmTraceId?: string | null;
-  isPlatform?: boolean;
-  allowUpdatingUrlParams?: boolean;
-  defaultPhoneCountry?: CountryCode;
-};
-
-type SeatedEventData = {
-  seatsPerTimeSlot?: number | null;
-  attendees?: number;
-  bookingUid?: string;
-  showAvailableSeatsCount?: boolean | null;
-};
-
-export type BookerStore = {
-  /**
-   * Event details. These are stored in store for easier
-   * access in child components.
-   */
-  username: string | null;
-  eventSlug: string | null;
-  eventId: number | null;
-  /**
-   * Verified booker email.
-   * Needed in case user turns on Requires Booker Email Verification for an event
-   */
-  verifiedEmail: string | null;
-  setVerifiedEmail: (email: string | null) => void;
-  /**
-   * Verification code for email verification.
-   * Stored after successful verification to be included in booking request
-   */
-  verificationCode: string | null;
-  setVerificationCode: (code: string | null) => void;
-  /**
-   * Current month being viewed. Format is YYYY-MM.
-   */
-  month: string | null;
-  setMonth: (month: string | null) => void;
-  /**
-   * Current state of the booking process
-   * the user is currently in. See enum for possible values.
-   */
-  state: BookerState;
-  setState: (state: BookerState) => void;
-  /**
-   * The booker component supports different layouts,
-   * this value tracks the current layout.
-   */
-  layout: BookerLayout;
-  setLayout: (layout: BookerLayout) => void;
-  /**
-   * Date selected by user (exact day). Format is YYYY-MM-DD.
-   */
-  selectedDate: string | null;
-  setSelectedDate: (params: {
-    date: string | null;
-    omitUpdatingParams?: boolean;
-    preventMonthSwitching?: boolean;
-  }) => void;
-  addToSelectedDate: (days: number) => void;
-  /**
-   * Multiple Selected Dates and Times
-   */
-  selectedDatesAndTimes: { [key: string]: { [key: string]: string[] } } | null;
-  setSelectedDatesAndTimes: (selectedDatesAndTimes: { [key: string]: { [key: string]: string[] } }) => void;
-  /**
-   * Multiple duration configuration
-   */
-  durationConfig: number[] | null;
-  /**
-   * Selected event duration in minutes.
-   */
-  selectedDuration: number | null;
-  setSelectedDuration: (duration: number | null) => void;
-  /**
-   * Selected timeslot user has chosen. This is a date string
-   * containing both the date + time.
-   */
-  selectedTimeslot: string | null;
-  setSelectedTimeslot: (timeslot: string | null) => void;
-  tentativeSelectedTimeslots: string[];
-  setTentativeSelectedTimeslots: (slots: string[]) => void;
-  /**
-   * Number of recurring events to create.
-   */
-  recurringEventCount: number | null;
-  setRecurringEventCount(count: number | null): void;
-  /**
-   * Input occurrence count.
-   */
-  recurringEventCountQueryParam: number | null;
-  setRecurringEventCountQueryParam(count: number | null): void;
-  /**
-   * The number of days worth of schedules to load.
-   */
-  dayCount: number | null;
-  setDayCount: (dayCount: number | null) => void;
-  /**
-   * If booking is being rescheduled or it has seats, it receives a rescheduleUid with rescheduledBy or bookingUid
-   * the current booking details are passed in. The `bookingData`
-   * object is something that's fetched server side.
-   */
-  rescheduleUid: string | null;
-  setRescheduleUid: (rescheduleUid: string | null) => void;
-  rescheduledBy: string | null;
-  bookingUid: string | null;
-  bookingData: GetBookingType | null;
-  setBookingData: (bookingData: GetBookingType | null | undefined) => void;
-
-  /**
-   * Method called by booker component to set initial data.
-   */
-  initialize: (data: StoreInitializeType) => void;
-  /**
-   * Stored form state, used when user navigates back and
-   * forth between timeslots and form. Gets cleared on submit
-   * to prevent sticky data.
-   */
-  formValues: Record<string, any>;
-  setFormValues: (values: Record<string, any>) => void;
-  /**
-   * Force event being a team event, so we only query for team events instead
-   * of also include 'user' events and return the first event that matches with
-   * both the slug and the event slug.
-   */
-  isTeamEvent: boolean;
-  seatedEventData: SeatedEventData;
-  setSeatedEventData: (seatedEventData: SeatedEventData) => void;
-
-  isInstantMeeting?: boolean;
-
-  org?: string | null;
-  setOrg: (org: string | null | undefined) => void;
-
-  timezone: string | null;
-  setTimezone: (timezone: string | null) => void;
-
-  teamMemberEmail?: string | null;
-  crmOwnerRecordType?: string | null;
-  crmAppSlug?: string | null;
-  crmRecordId?: string | null;
-  pendingCrmTraceId?: string | null;
-  isPlatform?: boolean;
-  allowUpdatingUrlParams?: boolean;
-  defaultPhoneCountry?: CountryCode | null;
-  /**
-   * Client-generated identifier used to correlate availability and booking
-   * requests that belong to a single booker lifecycle. Regenerated on each
-   * mount/refresh and sent on each request as the `_bookerCorrelationId`
-   * URL query param (the underscore prefix is the convention for internal,
-   * non-public-API query params — kept off the state field name) so related
-   * requests can be grouped in logs via the request URL.
-   */
-  bookerCorrelationId: string;
-  /**
-   * Whether the two-step slot selection modal/dialog is visible
-   */
-  isSlotSelectionModalVisible: boolean;
-  setIsSlotSelectionModalVisible: (visible: boolean) => void;
-};
-
-/**
- * Creates a new booker store instance
- */
-export const createBookerStore = () =>
-  createWithEqualityFn<BookerStore>((set, get) => ({
-    state: "loading",
-    setState: (state: BookerState) => set({ state }),
-    layout: BookerLayouts.MONTH_VIEW,
-    setLayout: (layout: BookerLayout) => {
-      // If we switch to a large layout and don't have a date selected yet,
-      // we selected it here, so week title is rendered properly.
-      if (["week_view", "column_view"].includes(layout) && !get().selectedDate) {
-        set({ selectedDate: dayjs().format("YYYY-MM-DD") });
-      }
-      if (!get().isPlatform || get().allowUpdatingUrlParams) {
-        updateQueryParam("layout", layout);
-      }
-      return set({ layout });
-    },
-    selectedDate: getQueryParam("date") || null,
-    setSelectedDate: ({ date: selectedDate, omitUpdatingParams = false, preventMonthSwitching = false }) => {
-      // unset selected date
-      if (!selectedDate) {
-        removeQueryParam("date");
-        return;
-      }
-
-      const currentSelection = dayjs(get().selectedDate);
-      const newSelection = dayjs(selectedDate);
-      set({ selectedDate });
-      if (!omitUpdatingParams && (!get().isPlatform || get().allowUpdatingUrlParams)) {
-        updateQueryParam("date", selectedDate ?? "");
-      }
-
-      // Setting month make sure small calendar in fullscreen layouts also updates.
-      // preventMonthSwitching is true in monthly view
-      if (!preventMonthSwitching && newSelection.month() !== currentSelection.month()) {
-        set({ month: newSelection.format("YYYY-MM") });
-        if (!omitUpdatingParams && (!get().isPlatform || get().allowUpdatingUrlParams)) {
-          updateQueryParam("month", newSelection.format("YYYY-MM"));
-        }
-      }
-    },
-    selectedDatesAndTimes: null,
-    setSelectedDatesAndTimes: (selectedDatesAndTimes) => {
-      set({ selectedDatesAndTimes });
-    },
-    addToSelectedDate: (days: number) => {
-      const currentSelection = dayjs(get().selectedDate);
-      let newSelection = currentSelection.add(days, "day");
-
-      // If newSelection is before the current date, set it to today
-      if (newSelection.isBefore(dayjs(), "day")) {
-        newSelection = dayjs();
-      }
-
-      const newSelectionFormatted = newSelection.format("YYYY-MM-DD");
-
-      if (newSelection.month() !== currentSelection.month()) {
-        set({ month: newSelection.format("YYYY-MM") });
-        if (!get().isPlatform || get().allowUpdatingUrlParams) {
-          updateQueryParam("month", newSelection.format("YYYY-MM"));
-        }
-      }
-
-      set({ selectedDate: newSelectionFormatted });
-      if (!get().isPlatform || get().allowUpdatingUrlParams) {
-        updateQueryParam("date", newSelectionFormatted);
-      }
-    },
-    username: null,
-    eventSlug: null,
-    eventId: null,
-    rescheduledBy: null,
-    verifiedEmail: null,
-    setVerifiedEmail: (email: string | null) => {
-      set({ verifiedEmail: email });
-    },
-    verificationCode: null,
-    setVerificationCode: (code: string | null) => {
-      set({ verificationCode: code });
-    },
-    month:
-      getQueryParam("month") ||
-      (getQueryParam("date") && dayjs(getQueryParam("date")).isValid()
-        ? dayjs(getQueryParam("date")).format("YYYY-MM")
-        : null) ||
-      dayjs().format("YYYY-MM"),
-    setMonth: (month: string | null) => {
-      if (!month) {
-        removeQueryParam("month");
-        return;
-      }
-      set({ month, selectedTimeslot: null });
-      if (!get().isPlatform || get().allowUpdatingUrlParams) {
-        updateQueryParam("month", month ?? "");
-      }
-      get().setSelectedDate({ date: null });
-    },
-    dayCount: BOOKER_NUMBER_OF_DAYS_TO_LOAD > 0 ? BOOKER_NUMBER_OF_DAYS_TO_LOAD : null,
-    setDayCount: (dayCount: number | null) => {
-      set({ dayCount });
-    },
-    isTeamEvent: false,
-    seatedEventData: {
-      seatsPerTimeSlot: undefined,
-      attendees: undefined,
-      bookingUid: undefined,
-      showAvailableSeatsCount: true,
-    },
-    setSeatedEventData: (seatedEventData: SeatedEventData) => {
-      set({ seatedEventData });
-      if (!get().isPlatform || get().allowUpdatingUrlParams) {
-        updateQueryParam("bookingUid", seatedEventData.bookingUid ?? "null");
-      }
-    },
-    // This is different from timeZone in timePreferencesStore, because timeZone in timePreferencesStore is the preferred timezone of the booker,
-    // it is the timezone configured through query param. So, this is in a way the preference of the person who shared the link.
-    // it is the timezone configured through query param. So, this is in a way the preference of the person who shared the link.
-    timezone: getQueryParam("cal.tz") ?? null,
-    setTimezone: (timezone: string | null) => {
-      set({ timezone });
-    },
-    initialize: ({
-      username,
-      eventSlug,
-      month,
-      eventId,
-      rescheduleUid = null,
-      rescheduledBy = null,
-      bookingUid = null,
-      bookingData = null,
-      layout,
-      isTeamEvent,
-      durationConfig,
-      org,
-      isInstantMeeting,
-      timezone = null,
-      teamMemberEmail,
-      crmOwnerRecordType,
-      crmAppSlug,
-      crmRecordId,
-      pendingCrmTraceId,
-      isPlatform = false,
-      allowUpdatingUrlParams = true,
-      defaultPhoneCountry,
-    }: StoreInitializeType) => {
-      const selectedDateInStore = get().selectedDate;
-
-      if (
-        get().username === username &&
-        get().eventSlug === eventSlug &&
-        get().month === month &&
-        get().eventId === eventId &&
-        get().rescheduleUid === rescheduleUid &&
-        get().bookingUid === bookingUid &&
-        get().bookingData?.responses.email === bookingData?.responses.email &&
-        get().layout === layout &&
-        get().timezone === timezone &&
-        get().rescheduledBy === rescheduledBy &&
-        get().teamMemberEmail === teamMemberEmail &&
-        get().crmOwnerRecordType === crmOwnerRecordType &&
-        get().crmAppSlug === crmAppSlug &&
-        get().crmRecordId === crmRecordId &&
-        get().pendingCrmTraceId === pendingCrmTraceId
-      )
-        return;
-      let selectedDuration: number | null = get().selectedDuration;
-      if (durationConfig?.includes(Number(getQueryParam("duration")))) {
-        selectedDuration = Number(getQueryParam("duration"));
-      } else if (rescheduleUid && bookingData && durationConfig) {
-        selectedDuration = getBookingDuration(bookingData.startTime, bookingData.endTime, durationConfig);
-        if (!selectedDuration && durationConfig.length > 0) {
-          selectedDuration = durationConfig[0];
-        }
-      } else {
-        removeQueryParam("duration");
-      }
-
-      set({
-        username,
-        eventSlug,
-        eventId,
-        org,
-        rescheduleUid,
-        rescheduledBy,
-        bookingUid,
-        bookingData,
-        layout: layout || BookerLayouts.MONTH_VIEW,
-        isTeamEvent: isTeamEvent || false,
-        durationConfig,
-        selectedDuration,
-        timezone,
-        // Preselect today's date in week / column view, since they use this to show the week title.
-        selectedDate:
-          selectedDateInStore ||
-          (["week_view", "column_view"].includes(layout) ? dayjs().format("YYYY-MM-DD") : null),
-        teamMemberEmail,
-        crmOwnerRecordType,
-        crmAppSlug,
-        crmRecordId,
-        pendingCrmTraceId,
-        isPlatform,
-        allowUpdatingUrlParams,
-        defaultPhoneCountry,
-      });
-
-      // Unset selected timeslot if user is rescheduling. This could happen
-      // if the user reschedules a booking right after the confirmation page.
-      // In that case the time would still be store in the store, this way we
-      // force clear this.
-      if (rescheduleUid && bookingData) {
-        set({ selectedTimeslot: null });
-      }
-      if (month) set({ month });
-
-      if (isInstantMeeting) {
-        const month = dayjs().format("YYYY-MM");
-        const selectedDate = dayjs().format("YYYY-MM-DD");
-        const selectedTimeslot = new Date().toISOString();
-        set({
-          month,
-          selectedDate,
-          selectedTimeslot,
-          isInstantMeeting,
-        });
-
-        if (!isPlatform || allowUpdatingUrlParams) {
-          updateQueryParam("month", month);
-          updateQueryParam("date", selectedDate ?? "");
-          updateQueryParam("slot", selectedTimeslot ?? "", false);
-        }
-      }
-      //removeQueryParam("layout");
-    },
-    durationConfig: null,
-    selectedDuration: null,
-    setSelectedDuration: (selectedDuration: number | null) => {
-      set({ selectedDuration });
-      if (!get().isPlatform || get().allowUpdatingUrlParams) {
-        updateQueryParam("duration", selectedDuration ?? "");
-      }
-    },
-    setBookingData: (bookingData: GetBookingType | null | undefined) => {
-      set({ bookingData: bookingData ?? null });
-    },
-    setRescheduleUid: (rescheduleUid: string | null) => {
-      set({ rescheduleUid });
-    },
-    recurringEventCount: null,
-    setRecurringEventCount: (recurringEventCount: number | null) => set({ recurringEventCount }),
-    recurringEventCountQueryParam: Number(getQueryParam("recurringEventCount")) || null,
-    setRecurringEventCountQueryParam: (recurringEventCountQueryParam: number | null) => {
-      // Guard: only update state if value is valid (not NaN or null)
-      if (recurringEventCountQueryParam !== null && !isNaN(recurringEventCountQueryParam)) {
-        set({ recurringEventCountQueryParam });
-        if (!get().isPlatform || get().allowUpdatingUrlParams) {
-          updateQueryParam("recurringEventCount", recurringEventCountQueryParam);
-        }
-      }
-      // If invalid, don't update state or URL - just ignore the call
-    },
-    rescheduleUid: null,
-    bookingData: null,
-    bookingUid: null,
-    selectedTimeslot: getQueryParam("slot") || null,
-    tentativeSelectedTimeslots: [],
-    setTentativeSelectedTimeslots: (tentativeSelectedTimeslots: string[]) => {
-      set({ tentativeSelectedTimeslots });
-    },
-    setSelectedTimeslot: (selectedTimeslot: string | null) => {
-      set({ selectedTimeslot });
-      if (!get().isPlatform || get().allowUpdatingUrlParams) {
-        updateQueryParam("slot", selectedTimeslot ?? "", false);
-      }
-    },
-    formValues: {},
-    setFormValues: (formValues: Record<string, any>) => {
-      set({ formValues });
-    },
-    org: null,
-    setOrg: (org: string | null | undefined) => {
-      set({ org });
-    },
-    isPlatform: false,
-    allowUpdatingUrlParams: true,
-    defaultPhoneCountry: null,
-    bookerCorrelationId: uuidv4(),
-    isSlotSelectionModalVisible: false,
-    setIsSlotSelectionModalVisible: (isSlotSelectionModalVisible: boolean) => {
-      set({ isSlotSelectionModalVisible });
-    },
-  }));
-
-/**
- * Default global store instance for backward compatibility
- */
-export const useBookerStore = createBookerStore();
-
-export const useInitializeBookerStore = ({
-  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,
-  defaultPhoneCountry,
-}: StoreInitializeType) => {
-  const initializeStore = useBookerStore((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,
-      defaultPhoneCountry,
-    });
-  }, [
-    initializeStore,
-    org,
-    username,
-    eventSlug,
-    month,
-    eventId,
-    rescheduleUid,
-    rescheduledBy,
-    bookingData,
-    layout,
-    isTeamEvent,
-    verifiedEmail,
-    durationConfig,
-    isInstantMeeting,
-    timezone,
-    teamMemberEmail,
-    crmOwnerRecordType,
-    crmAppSlug,
-    crmRecordId,
-    pendingCrmTraceId,
-    isPlatform,
-    allowUpdatingUrlParams,
-    defaultPhoneCountry,
-  ]);
-};