@ticketboothapp/booking 1.2.111 → 1.2.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.111",
+  "version": "1.2.112",
   "private": false,
   "sideEffects": [
     "**/*.css",

package/src/components/booking/Calendar.tsx

@@ -163,6 +163,13 @@ function parseAvailabilityDateTime(value: string): Date {
   return parseISO(hasExplicitOffset ? value : `${value}Z`);
 }
 
+function getInitialVisibleDateStr(earliestDate: Date | null, timezone: string): string {
+  const todayStr = formatInTimeZone(new Date(), timezone, 'yyyy-MM-dd');
+  if (!earliestDate) return todayStr;
+  const earliestDateStr = formatInTimeZone(earliestDate, timezone, 'yyyy-MM-dd');
+  return todayStr > earliestDateStr ? todayStr : earliestDateStr;
+}
+
 // ============ Date Cell Component ============
 
 interface DateCellProps {
@@ -476,19 +483,13 @@ export function Calendar({
   const hasInitializedRef = useRef(false);
   const [currentStartDateStr, setCurrentStartDateStr] = useState(() => {
     hasInitializedRef.current = true;
-    if (earliestDate) {
-      const dateStr = formatInTimeZone(earliestDate, timezone, 'yyyy-MM-dd');
-      return getSundayOfWeek(dateStr, timezone);
-    }
-    const nowStr = formatInTimeZone(new Date(), timezone, 'yyyy-MM-dd');
-    return getSundayOfWeek(nowStr, timezone);
+    return getSundayOfWeek(getInitialVisibleDateStr(earliestDate, timezone), timezone);
   });
 
   // Only update if earliestDate changes AND we haven't initialized yet
   useEffect(() => {
     if (!hasInitializedRef.current && earliestDate) {
-      const dateStr = formatInTimeZone(earliestDate, timezone, 'yyyy-MM-dd');
-      setCurrentStartDateStr(getSundayOfWeek(dateStr, timezone));
+      setCurrentStartDateStr(getSundayOfWeek(getInitialVisibleDateStr(earliestDate, timezone), timezone));
       hasInitializedRef.current = true;
     }
   }, [earliestDate, timezone]);

package/src/components/booking/NewBookingFlow.tsx

@@ -406,6 +406,20 @@ function parseAvailabilityDateTime(value: string): Date {
   return parseISO(hasExplicitOffset ? value : `${value}Z`);
 }
 
+function getInitialAvailabilityRangeStart(companyTimezone: string): Date {
+  const todayStr = formatInTimeZone(new Date(), companyTimezone, 'yyyy-MM-dd');
+  const seasonStartStr = formatInTimeZone(EARLIEST_AVAILABILITY_DATE, companyTimezone, 'yyyy-MM-dd');
+  const seasonEndStr = formatInTimeZone(LATEST_AVAILABILITY_DATE, companyTimezone, 'yyyy-MM-dd');
+  const initialDateStr =
+    todayStr < seasonStartStr
+      ? seasonStartStr
+      : todayStr > seasonEndStr
+        ? seasonStartStr
+        : todayStr;
+
+  return fromZonedTime(parseISO(`${initialDateStr}T00:00:00.000`), companyTimezone);
+}
+
 function deriveDefaultQuantitiesFromAvailabilities(
   availabilities: Availability[]
 ): Record<string, number> | null {
@@ -928,13 +942,14 @@ export function NewBookingFlow({
     activeOptionIdsKey,
   ]);
 
-  // Initialize visible range when unset (anchor at season open for fast first paint).
+  // Initialize visible range around today during the season, falling back to season open outside it.
   useEffect(() => {
     if (!visibleRange) {
-      const initialEnd = addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS + VISIBLE_RANGE_BUFFER_WEEKS);
-      setVisibleRange({ start: EARLIEST_AVAILABILITY_DATE, end: initialEnd });
+      const initialStart = getInitialAvailabilityRangeStart(companyTimezone);
+      const initialEnd = addWeeks(initialStart, INITIAL_FETCH_WEEKS + VISIBLE_RANGE_BUFFER_WEEKS);
+      setVisibleRange({ start: initialStart, end: initialEnd });
     }
-  }, [visibleRange]);
+  }, [companyTimezone, visibleRange]);
 
   // Fetch availabilities for visible range + buffer
   useEffect(() => {