bookito-widget 0.42.16-beta.2 → 0.42.16-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bookito-widget",
-  "version": "0.42.16-beta.2",
+  "version": "0.42.16-beta.21",
   "main": "dist/bookito-widget.umd.js",
   "license": "MIT",
   "module": "build/esm/index.js",

package/src/BookitoEventDetail/index.tsx

@@ -1,9 +1,8 @@
-import { getImageFormatUrl, useBookitoSettings } from '@carlito/api';
-import { LocalizedEventData } from '@carlito/bookito-client';
+import { getImageFormatUrl, useApp, useBookitoSettings } from '@carlito/api';
+import { LocalizedEventData, isEventBookable } from '@carlito/bookito-client';
 import { Trans } from 'react-i18next';
 import { BookingForm } from '../BookitoForm/NewBookingForm';
-import { isEventBookable } from '../BookitoForm/helper';
-import { BookitoWidgetViewMode } from '../types';
+import { BookitoWidgetViewMode, ResolvedOccurrence } from '../types';
 import { useMemo } from 'react';
 
 export type Props = {
@@ -13,6 +12,8 @@ export type Props = {
   availableOnDates: string[];
   isModalView?: boolean;
   viewMode?: BookitoWidgetViewMode;
+  /** Server-resolved occurrence for `date` (resolveOccurrences=true). */
+  resolvedOccurrence?: ResolvedOccurrence;
 };
 
 function BookitoEventDetail({
@@ -22,8 +23,10 @@ function BookitoEventDetail({
   date,
   isModalView = false,
   viewMode,
+  resolvedOccurrence,
 }: Props) {
   const { description, bannerImg, title } = event;
+  const { timezone } = useApp();
 
   const { bookitoSettings } = useBookitoSettings({ hotelId: authId });
   const { isBookable } = useMemo(
@@ -32,8 +35,9 @@ function BookitoEventDetail({
         event,
         onDate: date,
         settings: bookitoSettings,
+        timezone,
       }),
-    [bookitoSettings, date, event]
+    [bookitoSettings, date, event, timezone]
   );
 
   let isBookableEvent = isBookable;
@@ -81,6 +85,8 @@ function BookitoEventDetail({
             authId={authId}
             availableOnDates={availableOnDates}
             shouldPreselectDateInCalendar={shouldPreselectDateInCalendar ?? !isModalView}
+            resolvedOccurrence={resolvedOccurrence}
+            timezone={timezone}
           />
         ) : (
           <p className="bookito-event-detail__description text-sm lg:text-base leading-relaxed ">

package/src/BookitoEventModal/index.tsx

@@ -1,7 +1,5 @@
-import { useBookitoSettings } from '@carlito/api';
+import { useBookitoSettings, useHotelDate } from '@carlito/api';
 import { SupportedLanguages, useListLocalizedEvents } from '@carlito/bookito-client';
-import { useLayoutEffect } from 'react';
-import { useTranslation } from 'react-i18next';
 import BookitoEventDetail from '../BookitoEventDetail';
 import Modal from '../Modal';
 import ModalLoader from './ModalLoader';
@@ -14,31 +12,21 @@ export type BookitoEventModalProps = {
   openModal: boolean;
 };
 
-const BOOKABLE_DAYS_IN_ADVANCE = 90;
-const defaultToDate = new Date();
-
-defaultToDate.setDate(defaultToDate.getDate() + BOOKABLE_DAYS_IN_ADVANCE);
-
 function BookitoEventModal(props: BookitoEventModalProps) {
-  const { i18n } = useTranslation();
-  useLayoutEffect(() => {
-    if (props?.language) {
-      i18n.changeLanguage(props?.language);
-    }
-  }, [props?.language, i18n]);
-
   const bookitoSettings = useBookitoSettings({
     hotelId: props.authId,
   });
 
+  const daysBookableInAdvance = bookitoSettings.bookitoSettings?.daysBookableInAdvance ?? 90;
+  const toDate = useHotelDate({ days: daysBookableInAdvance });
+
   const { data, isLoading } = useListLocalizedEvents(
     {
       authId: props.authId,
       id: props.eventId,
-      toDate: defaultToDate.toISOString(),
-      daysBookableInAdvance: (
-        bookitoSettings.bookitoSettings?.daysBookableInAdvance ?? 90
-      ).toString(),
+      toDate: toDate.toISOString(),
+      daysBookableInAdvance: daysBookableInAdvance.toString(),
+      resolveOccurrences: true,
     },
     props.openModal && Boolean(bookitoSettings.bookitoSettings)
   );
@@ -49,6 +37,20 @@ function BookitoEventModal(props: BookitoEventModalProps) {
     ? new Date(data?.availableOnDates?.[0])
     : new Date();
 
+  // First server-resolved occurrence for this event (resolveOccurrences=true), used as the
+  // preselected occurrence in the booking form so no client RRULE runs.
+  const resolvedOccurrence = (() => {
+    if (!data?.dates) return undefined;
+    const sortedByDay = Object.entries(data.dates).sort(
+      ([a], [b]) => new Date(a).getTime() - new Date(b).getTime()
+    );
+    for (const [, day] of sortedByDay) {
+      const occurrence = day.events.find((e) => e.id === props.eventId)?.occurrences?.[0];
+      if (occurrence) return occurrence;
+    }
+    return undefined;
+  })();
+
   return props.openModal ? (
     <Modal onCloseModal={props.onCloseModal}>
       {isLoading && <ModalLoader />}
@@ -59,6 +61,7 @@ function BookitoEventModal(props: BookitoEventModalProps) {
           authId={props.authId}
           availableOnDates={data.availableOnDates || []}
           isModalView={true}
+          resolvedOccurrence={resolvedOccurrence}
         />
       )}
     </Modal>

package/src/BookitoForm/EventInfo.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { findOccurrenceForDate, LocalizedEventData } from '@carlito/bookito-client';
+import { LocalizedEventData } from '@carlito/bookito-client';
 import humanizeDuration, { SupportedLanguage } from 'humanize-duration';
-import { applyTimeOfDate } from '@carlito/date-utils';
-import { isEventAllDay } from './helper';
 import { Trans } from 'react-i18next';
 import { formatPrice, useApp } from '@carlito/api';
 

package/src/BookitoForm/NewBookingForm.tsx

@@ -8,18 +8,13 @@ import {
 } from '@carlito/shared-ui';
 import { analyticsEvent } from '@carlito/app-analytics';
 import { SUPPORTED_LANGUAGE_CODES } from '@carlito/intl';
-import {
-  extractApiErrorCodes,
-  findOccurrenceForDate,
-  LocalizedEventData,
-} from '@carlito/bookito-client';
+import { extractApiErrorCodes, LocalizedEventData } from '@carlito/bookito-client';
 import { useGetHotelConfiguration } from '@carlito/hub-react';
 import { Formik } from 'formik';
 import EventInfo from './EventInfo';
 import FormSubmitButton from './FormSubmitButton';
-import { applyTimeOfDate } from '@carlito/date-utils';
-import { isEventAllDay } from './helper';
 import { useTranslation } from 'react-i18next';
+import { ResolvedOccurrence } from '../types';
 
 function getUserLanguage() {
   const browserLanguages = [...navigator.languages];
@@ -40,6 +35,9 @@ export type BookingFormProps = {
   authId: string;
   availableOnDates: string[];
   shouldPreselectDateInCalendar?: boolean;
+  /** Server-resolved occurrence for the preselected date (resolveOccurrences=true). */
+  resolvedOccurrence?: ResolvedOccurrence;
+  timezone?: string;
 };
 
 export function BookingForm({
@@ -48,17 +46,21 @@ export function BookingForm({
   authId,
   availableOnDates,
   shouldPreselectDateInCalendar = true,
+  resolvedOccurrence,
+  timezone,
 }: BookingFormProps) {
   const userLanguage = getUserLanguage();
 
   const { t } = useTranslation();
-  const occurrence = findOccurrenceForDate(onDate, event) ?? event?.occurrences[0];
-  const startDateTime = applyTimeOfDate(onDate, new Date(occurrence.startDateTime));
-  const isAllDay = event ? isEventAllDay(startDateTime, event) : undefined;
+  // Occurrence times come from the server-resolved occurrence (resolveOccurrences=true) —
+  // no client RRULE. When absent, the calendar simply isn't preselected.
+  const startDateTime = resolvedOccurrence ? new Date(resolvedOccurrence.startDateTime) : undefined;
+  const durationMs = resolvedOccurrence?.durationMs;
+  const isAllDay = resolvedOccurrence?.isAllDay;
   const overallDuration =
     (event?.timeBookability === 'custom'
       ? event?.timeBookabilitySettings?.timeBlockDurationMs
-      : occurrence?.durationMs) ?? occurrence.durationMs;
+      : durationMs) ?? undefined;
 
   const initialValues: Partial<BookitoBookingFormValues> = useMemo(() => {
     return {
@@ -123,6 +125,7 @@ export function BookingForm({
                 activeLanguage={userLanguage}
                 event={event}
                 hotelId={authId}
+                timezone={timezone}
                 isTimeSlotEnabled={isTimeSlotEnabled}
                 availableOnDates={availableOnDates}
                 renderQuantityControls={({

package/src/BookitoWidget/index.tsx

@@ -17,8 +17,8 @@ import ExperienceCardHolder from '../CardHolder';
 import Modal from '../Modal';
 import CarlitoLogo from '../assets/carlito-logo.svg';
 import styles from '../index.module.css';
-import { BookitoWidgetViewMode } from '../types';
-import { useApp } from '@carlito/api';
+import { BookitoWidgetViewMode, ResolvedOccurrence } from '../types';
+import { useApp, useHotelDate } from '@carlito/api';
 const { getCssModuleClassName } = cssModuleClassNames(styles);
 
 // Helper function to extract actual data from InfiniteData or return the data directly
@@ -44,15 +44,17 @@ export type BookitoWidgetProps = {
   excludeNonBookable?: boolean;
 };
 
-type SelectedEvent = { event: LocalizedEventData; date: Date };
-
-const dateToday = new Date();
-dateToday.setHours(0, 0, 0, 0);
+type SelectedEvent = {
+  event: LocalizedEventData;
+  date: Date;
+  occurrence?: ResolvedOccurrence;
+};
 
 const BookitoWidget = (props: BookitoWidgetProps) => {
   const { viewMode = 'Date' } = props;
   const { i18n } = useTranslation();
   const { timezone } = useApp();
+  const dateToday = useHotelDate();
   const [canFetchCategoryList, setFetchingCategoryList] = useState(false);
   const [categoryTitle, setCategoryTitle] = useState('');
 
@@ -87,6 +89,7 @@ const BookitoWidget = (props: BookitoWidgetProps) => {
     authId: props?.authId,
     categoryId: props?.categoryId,
     excludeNonBookable: props.excludeNonBookable,
+    resolveOccurrences: true,
   });
 
   const listEventCategoriesQuery = useListLocalizedEventCategories(
@@ -153,11 +156,30 @@ const BookitoWidget = (props: BookitoWidgetProps) => {
       return null;
     }
 
+    // Earliest server-resolved occurrence per event across the loaded range
+    // (resolveOccurrences=true), so the flat list renders times without client RRULE.
+    const occurrencesByEventId: Record<string, ResolvedOccurrence> = {};
+    if (eventsData.dates) {
+      const sortedDays = Object.entries(eventsData.dates).sort(
+        ([a], [b]) => new Date(a).getTime() - new Date(b).getTime()
+      );
+      for (const [, day] of sortedDays) {
+        for (const entry of day.events) {
+          const occurrence = entry.occurrences?.[0];
+          if (occurrence && !occurrencesByEventId[entry.id]) {
+            occurrencesByEventId[entry.id] = occurrence;
+          }
+        }
+      }
+    }
+
     return (
       <ExperienceCardHolder
-        onDate={dateToday}
         events={eventsData.events}
-        openModal={(event) => setSelectedEvent({ event, date: dateToday })}
+        occurrences={occurrencesByEventId}
+        openModal={(event) =>
+          setSelectedEvent({ event, date: dateToday, occurrence: occurrencesByEventId[event.id] })
+        }
       />
     );
   };
@@ -192,6 +214,16 @@ const BookitoWidget = (props: BookitoWidgetProps) => {
         return null;
       }
 
+      // Server-resolved occurrence per event for this day (resolveOccurrences=true),
+      // so Cards render times without client RRULE.
+      const occurrencesByEventId: Record<string, ResolvedOccurrence> = {};
+      for (const entry of events) {
+        const occurrence = entry.occurrences?.[0];
+        if (occurrence) {
+          occurrencesByEventId[entry.id] = occurrence;
+        }
+      }
+
       // Interpret dateStr as local date in hotel's timezone
       const date = DateTime.fromISO(dateStr, { zone: timezone }).startOf('day').toJSDate();
 
@@ -203,13 +235,16 @@ const BookitoWidget = (props: BookitoWidgetProps) => {
                 weekday: 'long',
                 month: 'long',
                 day: 'numeric',
+                timeZone: timezone,
               })
             )}
           </span>
           <ExperienceCardHolder
-            onDate={date}
             events={eventsToRender}
-            openModal={(event) => setSelectedEvent({ event, date })}
+            occurrences={occurrencesByEventId}
+            openModal={(event) =>
+              setSelectedEvent({ event, date, occurrence: occurrencesByEventId[event.id] })
+            }
           />
         </div>
       );
@@ -254,6 +289,7 @@ const BookitoWidget = (props: BookitoWidgetProps) => {
             authId={props?.authId}
             availableOnDates={getAvailabilityDates(selectedEvent.event.id)}
             viewMode={viewMode}
+            resolvedOccurrence={selectedEvent.occurrence}
           />
         </Modal>
       )}

package/src/BookitoWidgetProvider/BookitoWidgetProvider.tsx

@@ -11,7 +11,7 @@ const BookitoWidgetProvider: React.FC<{
 }> = (props) => {
   return (
     <ApolloProvider client={client}>
-      <AppProvider hotelId={props.hotelId}>
+      <AppProvider defaultLanguage={props.language} hotelId={props.hotelId}>
         <ContentLanguageProvider
           skipHotelLanguages={true}
           browserLocale={props.language ?? (i18n.language as SupportedLocalesCode)}

package/src/Card/index.tsx

@@ -1,37 +1,45 @@
 import { LocalizedEventData } from '@carlito/bookito-client';
 import { LineClamper } from '@carlito/dashboard-ui';
-import { applyTimeOfDate } from '@carlito/date-utils';
 import { useApp } from '@carlito/api';
 import classNames from 'classnames';
-import { isEventAllDay } from '../BookitoForm/helper';
-import formatPrice, { findOccurrenceForDate } from '../utils';
+import formatPrice from '../utils';
+import { ResolvedOccurrence } from '../types';
 
-type CardProps = { event: LocalizedEventData; openModal: () => void; onDate: Date };
+type CardProps = {
+  event: LocalizedEventData;
+  openModal: () => void;
+  occurrence?: ResolvedOccurrence;
+};
 
-const ExperienceCard = ({ event, openModal, onDate }: CardProps) => {
+const ExperienceCard = ({ event, openModal, occurrence }: CardProps) => {
   const { title, basePrice, description, bannerImg } = event;
-  const { hotelCurrency } = useApp();
-
-  const occurrence = findOccurrenceForDate(onDate, event) ?? event.occurrences[0];
+  const { hotelCurrency, timezone } = useApp();
 
-  const startDateTime = applyTimeOfDate(onDate, new Date(occurrence.startDateTime));
-  const endDateTime = new Date(startDateTime);
-  endDateTime.setTime(endDateTime.getTime() + occurrence.durationMs);
+  // Times come straight from the server-resolved occurrence (resolveOccurrences=true):
+  // startDateTime is an absolute instant and isAllDay is precomputed — no client RRULE.
+  // When no occurrence is supplied the time block is simply hidden.
+  const startDateTime = occurrence ? new Date(occurrence.startDateTime) : undefined;
+  const endDateTime =
+    startDateTime && occurrence
+      ? new Date(startDateTime.getTime() + occurrence.durationMs)
+      : undefined;
 
-  const startDateTimeStr = startDateTime.toLocaleString(undefined, {
+  const startDateTimeStr = startDateTime?.toLocaleString(undefined, {
     hour: '2-digit',
     minute: '2-digit',
+    timeZone: timezone,
   });
 
-  const endDateTimeStr = endDateTime.toLocaleString(undefined, {
+  const endDateTimeStr = endDateTime?.toLocaleString(undefined, {
     hour: '2-digit',
     minute: '2-digit',
+    timeZone: timezone,
   });
 
-  const isAllDay = isEventAllDay(onDate, event);
+  const isAllDay = occurrence?.isAllDay ?? false;
 
   const shouldShowPrice = Boolean(basePrice?.amount);
-  const shouldShowTimes = !isAllDay;
+  const shouldShowTimes = !isAllDay && Boolean(startDateTimeStr && endDateTimeStr);
 
   return (
     <div

package/src/CardHolder/index.tsx

@@ -1,13 +1,15 @@
 import { LocalizedEventData } from '@carlito/bookito-client';
 import ExperienceCard from '../Card';
+import { ResolvedOccurrence } from '../types';
 
 type Props = {
   events: LocalizedEventData[];
   openModal(event: LocalizedEventData): void;
-  onDate: Date;
+  /** Server-resolved occurrence per event id (resolveOccurrences=true). */
+  occurrences?: Record<string, ResolvedOccurrence>;
 };
 
-const ExperienceCardHolder = ({ events, openModal, onDate }: Props) => {
+const ExperienceCardHolder = ({ events, openModal, occurrences }: Props) => {
   return (
     <div
       className="bookito-widget__events-list flex max-h-[200px]"
@@ -20,7 +22,7 @@ const ExperienceCardHolder = ({ events, openModal, onDate }: Props) => {
           key={event.id}
           event={event}
           openModal={() => openModal(event)}
-          onDate={onDate}
+          occurrence={occurrences?.[event.id]}
         />
       ))}
     </div>

package/src/calendar-styles.css

@@ -4,3 +4,19 @@
   border: none;
   background: none;
 }
+.calendar-tile {
+  flex: 0 0 2.8rem !important;
+  height: 2.8rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.calendar-tile.active {
+  border: 1px solid var(--theme-color-primary) !important;
+}
+
+.react-calendar__month-view__weekdays,
+.react-calendar__month-view__days {
+  justify-content: space-around;
+  row-gap: 5px;
+}

package/src/types.ts

@@ -1 +1,8 @@
+import { ConditionallyLocalizedListEventsResponse } from '@carlito/bookito-client';
+
 export type BookitoWidgetViewMode = 'List' | 'Date';
+
+/** Server-resolved occurrence (resolveOccurrences=true): `dates[].events[].occurrences[]`. */
+export type ResolvedOccurrence = NonNullable<
+  ConditionallyLocalizedListEventsResponse<true>['dates'][string]['events'][number]['occurrences']
+>[number];

package/src/utils/index.tsx

@@ -1,6 +1,3 @@
-import { LocalizedEventData, getRRuleConfiguration } from '@carlito/bookito-client';
-import { RRule } from 'rrule';
-
 export default function formatPrice(cost: number, locale = 'de-DE', currency: string = 'EUR') {
   return new Intl.NumberFormat(locale, {
     style: 'currency',
@@ -8,47 +5,3 @@ export default function formatPrice(cost: number, locale = 'de-DE', currency: st
     currencyDisplay: 'narrowSymbol',
   }).format(cost);
 }
-
-export function findOccurrenceForDate(
-  targetDate: Date,
-  event: Pick<LocalizedEventData, 'occurrences'>
-) {
-  for (const occurrence of event.occurrences) {
-    const startDateTime = new Date(occurrence.startDateTime);
-
-    if (
-      startDateTime.getDate() === targetDate.getDate() &&
-      startDateTime.getMonth() === targetDate.getMonth() &&
-      startDateTime.getFullYear() === targetDate.getFullYear()
-    ) {
-      return occurrence;
-    }
-
-    if (occurrence.repetition) {
-      const rruleConfig = getRRuleConfiguration(
-        {
-          ...occurrence.repetition,
-          repeatUntil: occurrence.repetition.repeatUntil
-            ? new Date(occurrence.repetition.repeatUntil)
-            : undefined,
-        },
-        {
-          dtStart: startDateTime,
-        }
-      );
-
-      const rule = new RRule(rruleConfig);
-
-      const dates = rule.between(
-        new Date(targetDate.getFullYear(), targetDate.getMonth(), targetDate.getDate()),
-        new Date(targetDate.getFullYear(), targetDate.getMonth(), targetDate.getDate(), 23, 59, 59),
-        true
-      );
-
-      if (dates.length > 0) {
-        return occurrence;
-      }
-    }
-  }
-  return null;
-}