@ticketboothapp/booking 1.2.122 → 1.2.124

package/src/components/booking/useChangeBookingItineraryUiState.ts

@@ -0,0 +1,133 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { Availability } from '../../lib/booking-api';
+
+export interface UseChangeBookingItineraryUiStateOptions {
+  selectedDate: string;
+  selectedAvailability: Availability | null;
+  useWindowScroll?: boolean;
+  stickyTopPx?: number;
+}
+
+export function useChangeBookingItineraryUiState({
+  selectedDate,
+  selectedAvailability,
+  useWindowScroll = false,
+  stickyTopPx = 0,
+}: UseChangeBookingItineraryUiStateOptions) {
+  const [isItinerarySticky, setIsItinerarySticky] = useState(false);
+  const isItineraryStickyRef = useRef(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const itineraryRef = useRef<HTMLDivElement>(null);
+  const lastStickyChangeRef = useRef<number>(0);
+
+  const toggleTooltip = useCallback(() => {
+    setShowTooltip((prev) => !prev);
+  }, []);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 640);
+    };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  useEffect(() => {
+    if (!showTooltip) return;
+
+    const handleClickOutside = (e: MouseEvent | TouchEvent) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('[data-tooltip-icon]')) {
+        setShowTooltip(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [showTooltip]);
+
+  useEffect(() => {
+    const el = itineraryRef.current;
+    if (!el) return;
+
+    const findScrollParent = (node: HTMLElement): HTMLElement | null => {
+      let parent = node.parentElement;
+      while (parent) {
+        const { overflowY } = getComputedStyle(parent);
+        if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') return parent;
+        parent = parent.parentElement;
+      }
+      return null;
+    };
+
+    const scrollParent = findScrollParent(el);
+    const scrollTarget =
+      useWindowScroll || !scrollParent
+        ? (typeof window !== 'undefined' ? window : null)
+        : scrollParent;
+
+    let ticking = false;
+    const cooldownMs = 600;
+    const atTopBand = 48;
+
+    const updateStickyState = () => {
+      if (!itineraryRef.current) return;
+
+      const rect = itineraryRef.current.getBoundingClientRect();
+      const currentTop = rect.top;
+      const wasSticky = isItineraryStickyRef.current;
+      const containerTop =
+        scrollParent && !useWindowScroll ? scrollParent.getBoundingClientRect().top : 0;
+      const topInset = Math.max(0, stickyTopPx ?? 0);
+      const stickLine = containerTop + topInset;
+      const enterStickyThreshold = stickLine + 1;
+      const nextSticky = wasSticky
+        ? currentTop >= stickLine - atTopBand && currentTop <= stickLine + atTopBand
+        : currentTop <= enterStickyThreshold;
+
+      if (nextSticky !== wasSticky) {
+        const now = Date.now();
+        if (now - lastStickyChangeRef.current < cooldownMs) return;
+
+        lastStickyChangeRef.current = now;
+        isItineraryStickyRef.current = nextSticky;
+        setIsItinerarySticky(nextSticky);
+      }
+    };
+
+    const handleScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          updateStickyState();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    if (scrollTarget) {
+      scrollTarget.addEventListener('scroll', handleScroll, { passive: true });
+      updateStickyState();
+      return () => scrollTarget.removeEventListener('scroll', handleScroll);
+    }
+    return undefined;
+  }, [selectedDate, selectedAvailability, useWindowScroll, stickyTopPx]);
+
+  return {
+    isItinerarySticky,
+    isMobile,
+    showTooltip,
+    setShowTooltip,
+    toggleTooltip,
+    itineraryRef,
+  };
+}

package/src/components/booking/useChangeBookingPickupItinerary.ts

@@ -0,0 +1,472 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { parseISO } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import type {
+  Availability,
+  ItineraryDisplayStep,
+  PickupLocation,
+  Product,
+  ProductOption,
+  ReturnOption,
+} from '../../lib/booking-api';
+import { ItineraryStepType as StepType } from '../../lib/booking-api';
+import {
+  isAvailabilityAfterPublicBookingCutoff,
+  isDateAfterPublicBookingCutoff,
+  parseBookingCutoffDateTime,
+} from '../../lib/booking/booking-cutoffs';
+import { getAvailabilityOptionId } from './change-booking-flow-helpers';
+
+export interface PickupTimeInfo extends Availability {
+  pickupTime: string;
+  displayTime: string;
+  originalTime: string;
+  displayTimeRange?: string;
+}
+
+type PublicBookingCutoffConfig = {
+  now: Date;
+  minutes?: number | null;
+  onSelectedAvailabilityExpired?: () => void;
+};
+
+type UseChangeBookingPickupItineraryParams = {
+  product: Pick<Product, 'destinations' | 'pickupLocations'>;
+  activeOptions: ProductOption[];
+  optionsMap: Map<string, ProductOption>;
+  selectedDate: string;
+  timesForSelectedDate: Availability[];
+  availabilitiesByDate: Record<string, Availability[]>;
+  selectedAvailability: Availability | null;
+  selectedReturnOption: ReturnOption | null;
+  pickupLocationId: string | null;
+  pickupLocationSkipped: boolean;
+  companyTimezone: string;
+  changeFlowSeatCreditForOutboundAvailability: (availability: Availability) => number;
+  publicBookingCutoff?: PublicBookingCutoffConfig;
+};
+
+type UseChangeBookingPickupItineraryResult = {
+  selectedPickupLocation: PickupLocation | undefined;
+  maxTimeOffsetMinutes: number;
+  pickupTimes: PickupTimeInfo[];
+  hasAnyMostPopular: boolean;
+  getPickupCutoffEligibleTimesForDate: (date: string) => Availability[];
+  isPublicSelectableAvailability: (availability: Availability, now?: Date) => boolean;
+  calculateStaySummary: (returnDateTime: Date) => string | null;
+  computeItineraryDisplay: () => ItineraryDisplayStep[] | null;
+  computeItineraryDisplayForStorage: () => ItineraryDisplayStep[] | null;
+};
+
+function formatDurationHours(durationHours: number): string {
+  const hours = Math.floor(durationHours);
+  const minutes = Math.round((durationHours - hours) * 60);
+  if (hours === 0 && minutes === 0) return '0 min';
+  if (hours === 0) return `${minutes} min`;
+  if (minutes === 0) return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+  return `${hours} ${hours === 1 ? 'hour' : 'hours'} ${minutes} min`;
+}
+
+export function useChangeBookingPickupItinerary({
+  product,
+  activeOptions,
+  optionsMap,
+  selectedDate,
+  timesForSelectedDate,
+  availabilitiesByDate,
+  selectedAvailability,
+  selectedReturnOption,
+  pickupLocationId,
+  pickupLocationSkipped,
+  companyTimezone,
+  changeFlowSeatCreditForOutboundAvailability,
+  publicBookingCutoff,
+}: UseChangeBookingPickupItineraryParams): UseChangeBookingPickupItineraryResult {
+  const selectedPickupLocation = useMemo(
+    () => product.pickupLocations?.find((loc) => loc.id === pickupLocationId),
+    [product.pickupLocations, pickupLocationId],
+  );
+
+  const maxTimeOffsetMinutes = useMemo(() => {
+    if (!product.pickupLocations || product.pickupLocations.length === 0) return 0;
+    return Math.max(...product.pickupLocations.map((loc) => loc.pickupTimeOffsetMinutes ?? 0));
+  }, [product.pickupLocations]);
+
+  const hasPublicBookingCutoff = Boolean(publicBookingCutoff);
+  const publicCutoffNow = publicBookingCutoff?.now;
+  const publicCutoffMinutes = publicBookingCutoff?.minutes ?? null;
+  const onSelectedAvailabilityExpired = publicBookingCutoff?.onSelectedAvailabilityExpired;
+
+  const isAvailabilityPickupAfterPublicBookingCutoff = useCallback(
+    (availability: Availability, now: Date = publicCutoffNow ?? new Date()): boolean => {
+      if (!hasPublicBookingCutoff) return true;
+      const offsetMinutes = pickupLocationSkipped
+        ? 0
+        : (selectedPickupLocation?.pickupTimeOffsetMinutes ?? 0);
+      const availabilityTime = parseBookingCutoffDateTime(availability.dateTime);
+      const pickupTime =
+        offsetMinutes > 0 && selectedPickupLocation
+          ? new Date(availabilityTime.getTime() + offsetMinutes * 60 * 1000)
+          : availabilityTime;
+      return isDateAfterPublicBookingCutoff(pickupTime, now, publicCutoffMinutes);
+    },
+    [
+      pickupLocationSkipped,
+      hasPublicBookingCutoff,
+      publicCutoffMinutes,
+      publicCutoffNow,
+      selectedPickupLocation,
+    ],
+  );
+
+  const getPickupCutoffEligibleTimesForDate = useCallback(
+    (date: string): Availability[] => {
+      const times = availabilitiesByDate[date] ?? [];
+      if (!hasPublicBookingCutoff) return times;
+      return times.filter((avail) => isAvailabilityPickupAfterPublicBookingCutoff(avail));
+    },
+    [availabilitiesByDate, hasPublicBookingCutoff, isAvailabilityPickupAfterPublicBookingCutoff],
+  );
+
+  const isPublicSelectableAvailability = useCallback(
+    (availability: Availability, now: Date = publicCutoffNow ?? new Date()): boolean => {
+      if (!hasPublicBookingCutoff) return true;
+      if (!isAvailabilityAfterPublicBookingCutoff(availability, now, publicCutoffMinutes)) return false;
+      if (!isAvailabilityPickupAfterPublicBookingCutoff(availability, now)) return false;
+      const availabilityDate = formatInTimeZone(
+        parseBookingCutoffDateTime(availability.dateTime),
+        companyTimezone,
+        'yyyy-MM-dd',
+      );
+      const optionId = getAvailabilityOptionId(availability);
+      return getPickupCutoffEligibleTimesForDate(availabilityDate).some(
+        (candidate) =>
+          candidate.dateTime === availability.dateTime &&
+          getAvailabilityOptionId(candidate) === optionId,
+      );
+    },
+    [
+      companyTimezone,
+      getPickupCutoffEligibleTimesForDate,
+      isAvailabilityPickupAfterPublicBookingCutoff,
+      hasPublicBookingCutoff,
+      publicCutoffMinutes,
+      publicCutoffNow,
+    ],
+  );
+
+  useEffect(() => {
+    if (!hasPublicBookingCutoff || !selectedAvailability) return;
+    if (!isPublicSelectableAvailability(selectedAvailability)) {
+      onSelectedAvailabilityExpired?.();
+    }
+  }, [
+    hasPublicBookingCutoff,
+    isPublicSelectableAvailability,
+    onSelectedAvailabilityExpired,
+    selectedAvailability,
+  ]);
+
+  const pickupTimes = useMemo((): PickupTimeInfo[] => {
+    if (!selectedDate || !timesForSelectedDate.length) return [];
+
+    const offsetMinutes = pickupLocationSkipped
+      ? 0
+      : (selectedPickupLocation?.pickupTimeOffsetMinutes ?? 0);
+
+    return timesForSelectedDate
+      .filter((avail) => isAvailabilityPickupAfterPublicBookingCutoff(avail))
+      .map((avail) => {
+        const availabilityTime = hasPublicBookingCutoff
+          ? parseBookingCutoffDateTime(avail.dateTime)
+          : parseISO(avail.dateTime);
+        const vacancyCredit = changeFlowSeatCreditForOutboundAvailability(avail);
+        const adjustedVacancies = Math.max(0, avail.vacancies ?? 0) + vacancyCredit;
+        const pickupTime =
+          offsetMinutes > 0 && selectedPickupLocation
+            ? new Date(availabilityTime.getTime() + offsetMinutes * 60 * 1000)
+            : availabilityTime;
+        const displayTime = formatInTimeZone(pickupTime, companyTimezone, 'h:mm a');
+        const originalTime = formatInTimeZone(availabilityTime, companyTimezone, 'h:mm a');
+
+        let displayTimeRange: string | undefined;
+        if (pickupLocationSkipped && maxTimeOffsetMinutes > 0) {
+          const latestPickupTime = new Date(
+            availabilityTime.getTime() + maxTimeOffsetMinutes * 60 * 1000,
+          );
+          const latestTimeStr = formatInTimeZone(latestPickupTime, companyTimezone, 'h:mm a');
+          displayTimeRange = `${originalTime} - ${latestTimeStr}`;
+        }
+
+        return {
+          ...avail,
+          vacancies: adjustedVacancies,
+          pickupTime: pickupTime.toISOString(),
+          displayTime,
+          originalTime,
+          displayTimeRange,
+        };
+      });
+  }, [
+    changeFlowSeatCreditForOutboundAvailability,
+    companyTimezone,
+    isAvailabilityPickupAfterPublicBookingCutoff,
+    maxTimeOffsetMinutes,
+    pickupLocationSkipped,
+    hasPublicBookingCutoff,
+    selectedDate,
+    selectedPickupLocation,
+    timesForSelectedDate,
+  ]);
+
+  const hasAnyMostPopular = useMemo(() => {
+    if (pickupTimes.length <= 1) return false;
+    return pickupTimes.some((time) => {
+      if (!time.productOptionId) return false;
+      const option = optionsMap.get(time.productOptionId);
+      return option?.mostPopular;
+    });
+  }, [optionsMap, pickupTimes]);
+
+  const getEffectiveItinerary = useCallback(
+    (option: ProductOption, date: Date): ProductOption['itinerary'] => {
+      if (!option.itinerary) return undefined;
+      const monthDay = formatInTimeZone(date, companyTimezone, 'MM-dd');
+      for (const override of option.itineraryOverrides ?? []) {
+        if (monthDay >= override.startDate && monthDay <= override.endDate) {
+          return override.itinerary;
+        }
+      }
+      return option.itinerary;
+    },
+    [companyTimezone],
+  );
+
+  const calculateStaySummary = useCallback(
+    (returnDateTime: Date): string | null => {
+      if (!selectedAvailability) return null;
+      const availabilityProductOptionId =
+        getAvailabilityOptionId(selectedAvailability) ||
+        (activeOptions.length === 1 ? activeOptions[0]?.optionId : undefined);
+      const selectedOption = activeOptions.find((opt) => opt.optionId === availabilityProductOptionId);
+      if (!selectedOption) return null;
+
+      const tourStartTime = parseISO(selectedAvailability.dateTime);
+      const itinerary = getEffectiveItinerary(selectedOption, tourStartTime);
+      const hasItinerary =
+        itinerary && itinerary.length > 0 && product.destinations && product.destinations.length > 0;
+      if (!hasItinerary || !product.destinations || !itinerary) return null;
+
+      const destinationMap = new Map(product.destinations.map((destination) => [destination.name, destination]));
+      let lastDepartureTime = tourStartTime;
+      const stays: Array<{ destinationName: string; durationHours: number }> = [];
+
+      itinerary.forEach((itineraryItem, index) => {
+        const destination = destinationMap.get(itineraryItem.destinationName);
+        if (!destination) return;
+        const arrivalTime = new Date(
+          lastDepartureTime.getTime() + itineraryItem.travelTimeFromPreviousHours * 60 * 60 * 1000,
+        );
+        const isLastDestination = index === itinerary.length - 1;
+
+        if (isLastDestination) {
+          const timeDiffHours = (returnDateTime.getTime() - arrivalTime.getTime()) / (1000 * 60 * 60);
+          if (timeDiffHours > 0) {
+            stays.push({ destinationName: destination.name, durationHours: timeDiffHours });
+          }
+        } else if (itinerary.length > 1 && itineraryItem.durationHours && itineraryItem.durationHours > 0) {
+          stays.push({ destinationName: destination.name, durationHours: itineraryItem.durationHours });
+        }
+
+        lastDepartureTime =
+          itineraryItem.durationHours && !isLastDestination
+            ? new Date(arrivalTime.getTime() + itineraryItem.durationHours * 60 * 60 * 1000)
+            : arrivalTime;
+      });
+
+      if (stays.length === 0) return null;
+      return stays
+        .map((stay) => `${formatDurationHours(stay.durationHours)} at ${stay.destinationName}`)
+        .join(' + ');
+    },
+    [activeOptions, getEffectiveItinerary, product.destinations, selectedAvailability],
+  );
+
+  const computeItineraryDisplay = useCallback((): ItineraryDisplayStep[] | null => {
+    if (!selectedAvailability) return null;
+    const availabilityProductOptionId =
+      getAvailabilityOptionId(selectedAvailability) ||
+      (activeOptions.length === 1 ? activeOptions[0]?.optionId : undefined);
+    const selectedOption = activeOptions.find((opt) => opt.optionId === availabilityProductOptionId);
+    if (!selectedOption) return null;
+    const tourStartTime = parseISO(selectedAvailability.dateTime);
+    const itinerary = getEffectiveItinerary(selectedOption, tourStartTime);
+    const hasItinerary =
+      itinerary && itinerary.length > 0 && product.destinations && product.destinations.length > 0;
+    if (!hasItinerary || !product.destinations || !itinerary) return null;
+
+    const itineraryItems: ItineraryDisplayStep[] = [];
+    const destinationMap = new Map(product.destinations.map((destination) => [destination.name, destination]));
+    const pickupOffsetMinutes = pickupLocationSkipped
+      ? 0
+      : (selectedPickupLocation?.pickupTimeOffsetMinutes ?? 0);
+    const actualPickupTime =
+      pickupOffsetMinutes > 0
+        ? new Date(tourStartTime.getTime() + pickupOffsetMinutes * 60 * 1000)
+        : tourStartTime;
+    const pickupTimeDisplay =
+      pickupLocationSkipped && maxTimeOffsetMinutes > 0
+        ? `${formatInTimeZone(tourStartTime, companyTimezone, 'h:mm a')} - ${formatInTimeZone(
+            new Date(tourStartTime.getTime() + maxTimeOffsetMinutes * 60 * 1000),
+            companyTimezone,
+            'h:mm a',
+          )}`
+        : formatInTimeZone(actualPickupTime, companyTimezone, 'h:mm a');
+    const pickupPlace =
+      pickupLocationSkipped || !selectedPickupLocation ? 'your_pickup_location' : selectedPickupLocation.name;
+
+    itineraryItems.push({ stepType: StepType.pickup, time: pickupTimeDisplay, place: pickupPlace });
+
+    let lastDepartureTime = tourStartTime;
+    itinerary.forEach((itineraryItem, index) => {
+      const destination = destinationMap.get(itineraryItem.destinationName);
+      if (!destination) return;
+      const arrivalTime = new Date(
+        lastDepartureTime.getTime() + itineraryItem.travelTimeFromPreviousHours * 60 * 60 * 1000,
+      );
+      itineraryItems.push({
+        stepType: StepType.arrive,
+        time: formatInTimeZone(arrivalTime, companyTimezone, 'h:mm a'),
+        place: destination.name,
+      });
+      const departureTime = itineraryItem.durationHours
+        ? new Date(arrivalTime.getTime() + itineraryItem.durationHours * 60 * 60 * 1000)
+        : arrivalTime;
+      const hasMoreDestinations = index < itinerary.length - 1;
+      if (itineraryItem.durationHours && hasMoreDestinations) {
+        itineraryItems.push({
+          stepType: StepType.depart,
+          time: formatInTimeZone(departureTime, companyTimezone, 'h:mm a'),
+          place: destination.name,
+        });
+      }
+      lastDepartureTime = departureTime;
+    });
+
+    const returnDateTime = selectedReturnOption ? parseISO(selectedReturnOption.dateTime) : lastDepartureTime;
+    const lastDestination =
+      itinerary.length > 0 ? destinationMap.get(itinerary[itinerary.length - 1].destinationName) : null;
+    const lastDestName =
+      itinerary.length > 0
+        ? destinationMap.get(itinerary[itinerary.length - 1].destinationName)?.name ?? null
+        : null;
+    const getDropOffMinutes = (loc: { travelMinutesFromDestination?: Record<string, number> }) => {
+      if (lastDestName && loc.travelMinutesFromDestination?.[lastDestName] != null) {
+        return loc.travelMinutesFromDestination[lastDestName];
+      }
+      return 0;
+    };
+    const hasDropOffEstimate = (loc: { travelMinutesFromDestination?: Record<string, number> }) =>
+      Boolean(lastDestName && loc.travelMinutesFromDestination?.[lastDestName] != null);
+    const dropOffPlace =
+      pickupLocationSkipped || !selectedPickupLocation ? 'your_pickup_location' : selectedPickupLocation.name;
+
+    if (selectedReturnOption) {
+      itineraryItems.push({
+        stepType: StepType.depart,
+        time: formatInTimeZone(returnDateTime, companyTimezone, 'h:mm a'),
+        place: lastDestination?.name ?? 'the_destination',
+      });
+    } else if (lastDestination) {
+      itineraryItems.push({
+        stepType: StepType.depart,
+        time: formatInTimeZone(returnDateTime, companyTimezone, 'h:mm a'),
+        place: lastDestination.name,
+      });
+    }
+
+    if (selectedPickupLocation && hasDropOffEstimate(selectedPickupLocation)) {
+      const dropOffOffsetMinutes = getDropOffMinutes(selectedPickupLocation);
+      const dropOffTime = new Date(returnDateTime.getTime() + dropOffOffsetMinutes * 60 * 1000);
+      itineraryItems.push({
+        stepType: StepType.drop_off,
+        time: formatInTimeZone(dropOffTime, companyTimezone, 'h:mm a'),
+        place: dropOffPlace,
+      });
+    } else if (pickupLocationSkipped || !selectedPickupLocation) {
+      itineraryItems.push({ stepType: StepType.drop_off, time: 'TBD', place: dropOffPlace });
+    } else if (product.pickupLocations?.length) {
+      const dropOffOffsets = product.pickupLocations.map(getDropOffMinutes);
+      const [minOffset, maxOffset] = [Math.min(...dropOffOffsets), Math.max(...dropOffOffsets)];
+      const earliestDropOff = new Date(returnDateTime.getTime() + minOffset * 60 * 1000);
+      const latestDropOff = new Date(returnDateTime.getTime() + maxOffset * 60 * 1000);
+      itineraryItems.push({
+        stepType: StepType.drop_off,
+        time:
+          minOffset === maxOffset
+            ? formatInTimeZone(earliestDropOff, companyTimezone, 'h:mm a')
+            : `${formatInTimeZone(earliestDropOff, companyTimezone, 'h:mm a')} - ${formatInTimeZone(
+                latestDropOff,
+                companyTimezone,
+                'h:mm a',
+              )}`,
+        place: dropOffPlace,
+      });
+    } else {
+      itineraryItems.push({ stepType: StepType.drop_off, time: 'TBD', place: dropOffPlace });
+    }
+
+    return itineraryItems;
+  }, [
+    activeOptions,
+    companyTimezone,
+    getEffectiveItinerary,
+    maxTimeOffsetMinutes,
+    pickupLocationSkipped,
+    product,
+    selectedAvailability,
+    selectedPickupLocation,
+    selectedReturnOption,
+  ]);
+
+  const computeItineraryDisplayForStorage = useCallback((): ItineraryDisplayStep[] | null => {
+    const base = computeItineraryDisplay();
+    if (!base || base.length === 0) return base;
+    const pickupUnknown =
+      pickupLocationSkipped ||
+      (!selectedPickupLocation && product.pickupLocations && product.pickupLocations.length > 0);
+    if (!pickupUnknown) return base;
+    const tourStartTime = selectedAvailability ? parseISO(selectedAvailability.dateTime) : null;
+    if (!tourStartTime) return base;
+    const rangeMinutes = maxTimeOffsetMinutes > 0 ? maxTimeOffsetMinutes : 60;
+    const latestPickupTime = new Date(tourStartTime.getTime() + rangeMinutes * 60 * 1000);
+    const startStr = formatInTimeZone(tourStartTime, companyTimezone, 'h:mm a');
+    const endStr = formatInTimeZone(latestPickupTime, companyTimezone, 'h:mm a');
+    const pickupRangeTime = startStr === endStr ? startStr : `${startStr} - ${endStr}`;
+    return base.map((step, index) =>
+      index === 0 && step.stepType === StepType.pickup && step.place === 'your_pickup_location'
+        ? { ...step, time: pickupRangeTime }
+        : step,
+    );
+  }, [
+    companyTimezone,
+    computeItineraryDisplay,
+    maxTimeOffsetMinutes,
+    pickupLocationSkipped,
+    product.pickupLocations,
+    selectedAvailability,
+    selectedPickupLocation,
+  ]);
+
+  return {
+    selectedPickupLocation,
+    maxTimeOffsetMinutes,
+    pickupTimes,
+    hasAnyMostPopular,
+    getPickupCutoffEligibleTimesForDate,
+    isPublicSelectableAvailability,
+    calculateStaySummary,
+    computeItineraryDisplay,
+    computeItineraryDisplayForStorage,
+  };
+}