Feat/chunk availability

apps/web/modules/bookings/components/AvailableTimeSlots.tsx

@@ -10,8 +10,10 @@ import { useNonEmptyScheduleDays } from "@calcom/features/schedules/lib/use-sche
 import { useSlotsForAvailableDates } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
 import { PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM } from "@calcom/lib/constants";
 import { localStorage } from "@calcom/lib/webstorage";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
 import classNames from "@calcom/ui/classNames";
+import { Button } from "@calcom/ui/components/button";
 
 import { AvailableTimesHeader } from "@calcom/web/modules/bookings/components/AvailableTimesHeader";
 import type { useScheduleForEventReturnType } from "@calcom/features/bookings/Booker/utils/event";
@@ -50,6 +52,7 @@ type AvailableTimeSlotsProps = {
   unavailableTimeSlots: string[];
   confirmButtonDisabled?: boolean;
   onAvailableTimeSlotSelect: (time: string) => void;
+  onLoadNextRoundRobinChunk?: () => void;
 };
 
 /**
@@ -74,8 +77,10 @@ export const AvailableTimeSlots = ({
   confirmButtonDisabled,
   confirmStepClassNames,
   onAvailableTimeSlotSelect,
+  onLoadNextRoundRobinChunk,
   ...props
 }: AvailableTimeSlotsProps) => {
+  const { t } = useLocale();
   const selectedDate = useBookerStoreContext((state) => state.selectedDate);
 
   const setSeatedEventData = useBookerStoreContext((state) => state.setSeatedEventData);
@@ -108,6 +113,7 @@ export const AvailableTimeSlots = ({
   };
 
   const scheduleData = schedule?.data;
+  const roundRobinChunkInfo = scheduleData?.roundRobinChunkInfo;
 
   const nonEmptyScheduleDays = useNonEmptyScheduleDays(scheduleData?.slots);
   const nonEmptyScheduleDaysFromSelectedDate = nonEmptyScheduleDays.filter(
@@ -184,15 +190,60 @@ export const AvailableTimeSlots = ({
     [overlayCalendarToggled, onTimeSelect, seatsPerTimeSlot, skipConfirmStep, toggleConfirmButton]
   );
 
+  const showLoadMoreButton =
+    roundRobinChunkInfo?.hasMoreNonFixedHosts && onLoadNextRoundRobinChunk;
+
+  const renderLoadMoreButton = () => {
+    if (!showLoadMoreButton) return null;
+
+    const totalLoadedHosts =
+      roundRobinChunkInfo.chunkOffset * roundRobinChunkInfo.chunkSize +
+      roundRobinChunkInfo.loadedNonFixedHosts;
+    const totalHosts = roundRobinChunkInfo.totalNonFixedHosts || roundRobinChunkInfo.totalHosts || 0;
+    const progressPercentage =
+      totalHosts > 0 ? Math.min(100, Math.round((totalLoadedHosts / totalHosts) * 100)) : 0;
+    const circumference = 2 * Math.PI * 8;
+    const dashArray = (progressPercentage / 100) * circumference;
+
+    const ProgressIcon = (
+      <svg width="20" height="20" viewBox="0 0 20 20" className="text-emphasis" aria-hidden>
+        <circle cx="10" cy="10" r="8" stroke="rgba(255,255,255,0.35)" strokeWidth="2" fill="none" />
+        <circle
+          cx="10"
+          cy="10"
+          r="8"
+          stroke="#FFFFFF"
+          strokeWidth="2"
+          fill="none"
+          strokeDasharray={`${dashArray} ${circumference}`}
+          strokeLinecap="round"
+          transform="rotate(-90 10 10)"
+        />
+      </svg>
+    );
+
+    return (
+      <Button
+        type="button"
+        color="primary"
+        className="w-full justify-center gap-2"
+        onClick={onLoadNextRoundRobinChunk}
+        disabled={isLoading || schedule?.isFetching}
+        CustomStartIcon={ProgressIcon}
+        aria-label={t("round_robin_load_next_hosts")}>
+        {t("round_robin_load_next_hosts")}
+      </Button>
+    );
+  };
+
   return (
-    <>
+    <div className="relative flex h-full flex-col">
       <div className={classNames(`flex`, `${customClassNames?.availableTimeSlotsContainer}`)}>
         {isLoading ? (
           <div className="mb-3 h-8" />
         ) : (
           slotsPerDay.length > 0 &&
           slotsPerDay.map((slots) => {
-            // Check if this day is OOO - since OOO is date-level, just check the first slot
             const isOOODay = slots.slots.length > 0 && slots.slots[0]?.away;
             return (
               <AvailableTimesHeader
@@ -220,9 +271,10 @@ export const AvailableTimeSlots = ({
         className={classNames(
           limitHeight && "no-scrollbar grow overflow-auto md:h-[400px]",
           !limitHeight && "flex h-full w-full flex-row gap-4",
+          showLoadMoreButton && "pb-14",
           `${customClassNames?.availableTimeSlotsContainer}`
         )}>
-        {isLoading && // Shows exact amount of days as skeleton.
+        {isLoading &&
           Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)}
         {!isLoading &&
           slotsPerDay.length > 0 &&
@@ -247,6 +299,12 @@ export const AvailableTimeSlots = ({
             </div>
           ))}
       </div>
-    </>
+
+      {showLoadMoreButton && (
+        <div className="sticky right-0 bottom-0 left-0 border-subtle border-t bg-default px-4 py-3">
+          {renderLoadMoreButton()}
+        </div>
+      )}
+    </div>
   );
 };

apps/web/modules/bookings/components/Booker.tsx

@@ -89,6 +89,7 @@ const BookerComponent = ({
   eventMetaChildren,
   roundRobinHideOrgAndTeam,
   showNoAvailabilityDialog,
+  onLoadNextRoundRobinChunk,
 }: BookerProps & WrappedBookerProps) => {
   const searchParams = useCompatSearchParams();
   const isPlatformBookerEmbed = useIsPlatformBookerEmbed();
@@ -540,6 +541,7 @@ const BookerComponent = ({
                 watchedCfToken={watchedCfToken}
                 confirmButtonDisabled={confirmButtonDisabled}
                 confirmStepClassNames={customClassNames?.confirmStep}
+                onLoadNextRoundRobinChunk={onLoadNextRoundRobinChunk}
               />
             </BookerSection>
           </AnimatePresence>

apps/web/modules/bookings/components/BookerWebWrapper.tsx

@@ -21,6 +21,7 @@ import { useBookerLayout } from "@calcom/features/bookings/Booker/components/hoo
 import { useBookingForm } from "@calcom/features/bookings/Booker/components/hooks/useBookingForm";
 import { useBookings } from "@calcom/features/bookings/Booker/components/hooks/useBookings";
 import { useCalendars } from "@calcom/features/bookings/Booker/components/hooks/useCalendars";
+import { useRoundRobinChunking } from "@calcom/features/bookings/Booker/components/hooks/useRoundRobinChunking";
 import { useSlots } from "@calcom/features/bookings/Booker/components/hooks/useSlots";
 import { useVerifyCode } from "@calcom/features/bookings/Booker/components/hooks/useVerifyCode";
 import { useVerifyEmail } from "@calcom/features/bookings/Booker/components/hooks/useVerifyEmail";
@@ -93,7 +94,10 @@ const BookerWebWrapperComponent = (props: BookerWebWrapperAtomProps) => {
   });
 
   const [dayCount] = useBookerStoreContext((state) => [state.dayCount, state.setDayCount], shallow);
-
+  const [roundRobinChunkSettings, setRoundRobinChunkSettings] = useBookerStoreContext(
+    (state) => [state.roundRobinChunkSettings, state.setRoundRobinChunkSettings],
+    shallow
+  );
   const { data: session } = useSession();
   const routerQuery = useRouterQuery();
   const hasSession = !!session;
@@ -155,6 +159,21 @@ const BookerWebWrapperComponent = (props: BookerWebWrapperAtomProps) => {
     useApiV2: props.useApiV2,
     bookerLayout,
     ...(props.entity.orgSlug ? { orgSlug: props.entity.orgSlug } : {}),
+    roundRobinChunkSettings: roundRobinChunkSettings ?? undefined,
+  });
+  const { roundRobinChunkInfo, handleLoadNextRoundRobinChunk } =
+    useRoundRobinChunking({
+      roundRobinChunkInfo: schedule.data?.roundRobinChunkInfo,
+      isFetching: schedule.isFetching,
+      roundRobinChunkSettings,
+      setRoundRobinChunkSettings,
+      resetDeps: [
+      props.username,
+      props.eventSlug,
+      props.entity.orgSlug,
+      props.entity.eventTypeId,
+      event.data?.id,
+    ],
   });
   const bookings = useBookings({
     event,
@@ -256,6 +275,9 @@ const BookerWebWrapperComponent = (props: BookerWebWrapperAtomProps) => {
       event={event}
       bookerLayout={bookerLayout}
       schedule={schedule}
+      onLoadNextRoundRobinChunk={
+        roundRobinChunkInfo?.hasMoreNonFixedHosts ? handleLoadNextRoundRobinChunk : undefined
+      }
       verifyCode={verifyCode}
       isPlatform={false}
       areInstantMeetingParametersSet={areInstantMeetingParametersSet}

apps/web/public/static/locales/en/common.json

@@ -4357,5 +4357,7 @@
   "error_enabling_feature": "Error enabling feature. Please try again.",
   "set_organizer_as_contact_owner": "Set booking organizer as contact owner",
   "overwrite_existing_contact_owner": "Overwrite existing contact owner",
-  "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS":"↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
+  "round_robin_load_next_hosts": "Load more availability",
+  "round_robin_reset_hosts": "Reset host selection",
+  "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/features/bookings/Booker/__tests__/test-utils.tsx

@@ -72,6 +72,10 @@ const createMockStore = (initialState?: Partial<BookerStore>): StoreApi<BookerSt
     allowUpdatingUrlParams: true,
     verificationCode: null,
     setVerificationCode: vi.fn(),
+    roundRobinChunkSettings: null,
+    setRoundRobinChunkSettings: vi.fn(),
+    roundRobinChunkInfo: null,
+    setRoundRobinChunkInfo: vi.fn(),
     ...initialState,
   };
 

packages/features/bookings/Booker/components/hooks/useRoundRobinChunking.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect } from "react";
+import type { DependencyList } from "react";
+
+import type { RoundRobinChunkSettings } from "@calcom/features/bookings/Booker/store";
+import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
+import type { RoundRobinChunkInfo } from "@calcom/lib/types/roundRobinChunkInfo";
+
+type UseRoundRobinChunkingOptions = {
+  roundRobinChunkInfo?: RoundRobinChunkInfo | null;
+  isFetching: boolean;
+  resetDeps?: DependencyList;
+  roundRobinChunkSettings: RoundRobinChunkSettings | null;
+  setRoundRobinChunkSettings: (settings: RoundRobinChunkSettings | null) => void;
+};
+
+export const useRoundRobinChunking = ({
+  roundRobinChunkInfo,
+  isFetching,
+  resetDeps = [],
+  roundRobinChunkSettings,
+  setRoundRobinChunkSettings,
+}: UseRoundRobinChunkingOptions) => {
+  const setRoundRobinChunkInfo = useBookerStoreContext((state) => state.setRoundRobinChunkInfo);
+
+  useEffect(() => {
+    setRoundRobinChunkInfo(roundRobinChunkInfo ?? null);
+  }, [roundRobinChunkInfo, setRoundRobinChunkInfo]);
+
+  useEffect(() => {
+    setRoundRobinChunkSettings(null);
+    setRoundRobinChunkInfo(null);
+  }, [setRoundRobinChunkInfo, setRoundRobinChunkSettings, ...resetDeps]);
+
+  const handleLoadNextRoundRobinChunk = useCallback(() => {
+    if (!roundRobinChunkInfo?.hasMoreNonFixedHosts || isFetching) return;
+    const currentOffset = roundRobinChunkSettings?.chunkOffset ?? roundRobinChunkInfo.chunkOffset ?? 0;
+    setRoundRobinChunkSettings({
+      manual: true,
+      chunkOffset: currentOffset + 1,
+    });
+  }, [roundRobinChunkInfo, roundRobinChunkSettings, isFetching, setRoundRobinChunkSettings]);
+
+  return {
+    roundRobinChunkSettings,
+    roundRobinChunkInfo: roundRobinChunkInfo ?? null,
+    isManualRoundRobinChunking: roundRobinChunkSettings?.manual ?? false,
+    handleLoadNextRoundRobinChunk,
+  };
+};

packages/features/bookings/Booker/store.ts

@@ -3,14 +3,11 @@
 import { useEffect } from "react";
 import { createWithEqualityFn } from "zustand/traditional";
 
-
-
 import dayjs from "@calcom/dayjs";
 import { BOOKER_NUMBER_OF_DAYS_TO_LOAD } from "@calcom/lib/constants";
+import type { RoundRobinChunkInfo } from "@calcom/lib/types/roundRobinChunkInfo";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
 
-
-
 import type { GetBookingType } from "../lib/get-booking";
 import type { BookerState, BookerLayout } from "./types";
 import { updateQueryParam, getQueryParam, removeQueryParam } from "./utils/query-param";
@@ -84,6 +81,11 @@ type SeatedEventData = {
   showAvailableSeatsCount?: boolean | null;
 };
 
+export type RoundRobinChunkSettings = {
+  manual: boolean;
+  chunkOffset: number;
+};
+
 export type BookerStore = {
   /**
    * Event details. These are stored in store for easier
@@ -215,6 +217,10 @@ export type BookerStore = {
   isPlatform?: boolean;
   allowUpdatingUrlParams?: boolean;
   defaultPhoneCountry?: CountryCode | null;
+  roundRobinChunkSettings: RoundRobinChunkSettings | null;
+  setRoundRobinChunkSettings: (settings: RoundRobinChunkSettings | null) => void;
+  roundRobinChunkInfo: RoundRobinChunkInfo | null;
+  setRoundRobinChunkInfo: (info: RoundRobinChunkInfo | null) => void;
 };
 
 /**
@@ -495,6 +501,11 @@ export const createBookerStore = () =>
     },
     isPlatform: false,
     allowUpdatingUrlParams: true,
+    roundRobinChunkSettings: null,
+    setRoundRobinChunkSettings: (settings: RoundRobinChunkSettings | null) =>
+      set({ roundRobinChunkSettings: settings }),
+    roundRobinChunkInfo: null,
+    setRoundRobinChunkInfo: (info: RoundRobinChunkInfo | null) => set({ roundRobinChunkInfo: info }),
     defaultPhoneCountry: null,
   }));
 

packages/features/bookings/Booker/types.ts

@@ -133,6 +133,7 @@ export type WrappedBookerPropsMain = {
   isBookingDryRun?: boolean;
   renderCaptcha?: boolean;
   confirmButtonDisabled?: boolean;
+  onLoadNextRoundRobinChunk?: () => void;
 };
 
 export type WrappedBookerPropsForPlatform = WrappedBookerPropsMain & {

packages/features/bookings/Booker/utils/event.ts

@@ -71,6 +71,7 @@ export const useScheduleForEvent = ({
   isTeamEvent,
   useApiV2 = true,
   bookerLayout,
+  roundRobinChunkSettings,
 }: {
   username?: string | null;
   eventSlug?: string | null;
@@ -92,6 +93,10 @@ export const useScheduleForEvent = ({
     extraDays: number;
     columnViewExtraDays: { current: number };
   };
+  roundRobinChunkSettings?: {
+    manual: boolean;
+    chunkOffset: number;
+  };
 }) => {
   const { timezone } = useBookerTime();
   const [usernameFromStore, eventSlugFromStore, monthFromStore, durationFromStore] = useBookerStoreContext(
@@ -117,6 +122,8 @@ export const useScheduleForEvent = ({
     teamMemberEmail,
     useApiV2: useApiV2,
     bookerLayout,
+    roundRobinManualChunking: roundRobinChunkSettings?.manual,
+    roundRobinChunkOffset: roundRobinChunkSettings?.chunkOffset,
   });
 
   return {
@@ -125,6 +132,7 @@ export const useScheduleForEvent = ({
     isError: schedule?.isError,
     isSuccess: schedule?.isSuccess,
     isLoading: schedule?.isLoading,
+    isFetching: schedule?.isFetching,
     invalidate: schedule?.invalidate,
     dataUpdatedAt: schedule?.dataUpdatedAt,
   };

packages/features/bookings/lib/bookingCreateBodySchema.ts

@@ -31,7 +31,6 @@ export const bookingCreateBodySchema = z.object({
   rrHostSubsetIds: z.array(z.number()).nullish(),
   crmAppSlug: z.string().nullish().optional(),
   cfToken: z.string().nullish().optional(),
-
   /**
    * Holds the corrected responses of the Form for a booking, provided during rerouting
    */

packages/features/schedules/lib/use-schedule/useApiV2AvailableSlots.ts

@@ -10,10 +10,15 @@ import type { GetAvailableSlotsResponse } from "@calcom/trpc/server/routers/view
 
 export const QUERY_KEY = "get-available-slots";
 
+type GetAvailableSlotsInputWithChunks = GetAvailableSlotsInput_2024_04_15 & {
+  roundRobinManualChunking?: boolean;
+  roundRobinChunkOffset?: number;
+};
+
 export const useApiV2AvailableSlots = ({
   enabled,
   ...rest
-}: GetAvailableSlotsInput_2024_04_15 & { enabled: boolean }) => {
+}: GetAvailableSlotsInputWithChunks & { enabled: boolean }) => {
   const availableSlots = useQuery({
     queryKey: [
       QUERY_KEY,
@@ -28,6 +33,8 @@ export const useApiV2AvailableSlots = ({
       rest.skipContactOwner,
       rest.teamMemberEmail,
       rest.embedConnectVersion ?? false,
+      rest.roundRobinManualChunking ?? false,
+      rest.roundRobinChunkOffset ?? 0,
     ],
     queryFn: () => {
       return axios