@ticketboothapp/booking 1.2.123 → 1.2.124

package/src/components/booking/useChangeBookingSelection.ts

@@ -0,0 +1,362 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { parseISO } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import type { Dispatch, SetStateAction } from 'react';
+import type { Availability, ProductOption, ReturnOption } from '../../lib/booking-api';
+import {
+  getAvailabilityOptionId,
+  getMinutesFromMidnightInTimezone,
+  parseAvailabilityDateTime,
+  pickOutboundMatchingPreviousSelection,
+  pickReturnMatchingPreviousSelection,
+} from './change-booking-flow-helpers';
+
+type ChangeSelectionInitialValues = {
+  dateTime?: string | null;
+  returnAvailabilityId?: string | null;
+  returnDateTime?: string | null;
+};
+
+type UseChangeBookingSelectionParams = {
+  availabilities: Availability[];
+  selectedDate: string;
+  timesForSelectedDate: Availability[];
+  timesForSelectedDateSelectionKey: string;
+  activeOptions: ProductOption[];
+  activeOptionIdsKey: string;
+  optionsMap: Map<string, ProductOption>;
+  selectedAvailability: Availability | null;
+  selectedReturnOption: ReturnOption | null;
+  initialValues?: ChangeSelectionInitialValues | null;
+  companyTimezone: string;
+  isAdmin: boolean;
+  getSelectableTimesForDate?: (date: string) => Availability[];
+  isAvailabilitySelectable?: (availability: Availability) => boolean;
+  validateSelectedReturnOption?: boolean;
+  setSelectedAvailability: Dispatch<SetStateAction<Availability | null>>;
+  setSelectedReturnOption: Dispatch<SetStateAction<ReturnOption | null>>;
+  setImplicitReturnBaselineId: Dispatch<SetStateAction<string | null>>;
+  setError: Dispatch<SetStateAction<string>>;
+};
+
+export function useChangeBookingTimesForSelectedDate(
+  selectedDate: string,
+  availabilitiesByDate: Record<string, Availability[]>,
+): {
+  timesForSelectedDate: Availability[];
+  timesForSelectedDateSelectionKey: string;
+} {
+  const timesForSelectedDate = useMemo(() => {
+    return selectedDate ? availabilitiesByDate[selectedDate] || [] : [];
+  }, [selectedDate, availabilitiesByDate]);
+
+  const timesForSelectedDateSelectionKey = useMemo(
+    () =>
+      timesForSelectedDate
+        .map(
+          (avail) =>
+            `${avail.dateTime}|${getAvailabilityOptionId(avail)}|${avail.vacancies ?? 0}`,
+        )
+        .join('||'),
+    [timesForSelectedDate],
+  );
+
+  return { timesForSelectedDate, timesForSelectedDateSelectionKey };
+}
+
+export function useChangeBookingSelection({
+  availabilities,
+  selectedDate,
+  timesForSelectedDate,
+  timesForSelectedDateSelectionKey,
+  activeOptions,
+  activeOptionIdsKey,
+  optionsMap,
+  selectedAvailability,
+  selectedReturnOption,
+  initialValues,
+  companyTimezone,
+  isAdmin,
+  getSelectableTimesForDate,
+  isAvailabilitySelectable,
+  validateSelectedReturnOption = false,
+  setSelectedAvailability,
+  setSelectedReturnOption,
+  setImplicitReturnBaselineId,
+  setError,
+}: UseChangeBookingSelectionParams): {
+  handleDateSelect: (date: string) => void;
+  handleTimeSelect: (availability: Availability) => void;
+  clearChangeBookingSelectionAnchors: () => void;
+} {
+  const changeFlowOutboundAnchorRef = useRef<{
+    productOptionId: string | null;
+    minutesFromMidnight: number;
+  } | null>(null);
+  const changeFlowReturnAnchorRef = useRef<{
+    returnLocation: string;
+    minutesFromMidnight: number;
+  } | null>(null);
+
+  useEffect(() => {
+    if (!selectedDate || timesForSelectedDate.length === 0 || selectedAvailability) return;
+    const selectableTimesForDate = getSelectableTimesForDate?.(selectedDate) ?? timesForSelectedDate;
+    if (selectableTimesForDate.length === 0) return;
+
+    // On the booking's calendar day, the initial-resolution effect owns the booked pickup match.
+    if (initialValues?.dateTime?.trim()) {
+      try {
+        const bookingDay = formatInTimeZone(
+          parseAvailabilityDateTime(initialValues.dateTime.trim()),
+          companyTimezone,
+          'yyyy-MM-dd',
+        );
+        if (selectedDate === bookingDay) return;
+      } catch {
+        /* fall through */
+      }
+    }
+
+    const anchor = changeFlowOutboundAnchorRef.current;
+    if (anchor) {
+      const matched = pickOutboundMatchingPreviousSelection(
+        selectableTimesForDate,
+        anchor,
+        companyTimezone,
+        optionsMap,
+        isAdmin,
+      );
+      changeFlowOutboundAnchorRef.current = null;
+      if (matched) {
+        setSelectedAvailability(matched);
+        setError('');
+        return;
+      }
+    }
+
+    const mostPopularOption = activeOptions.find((opt) => opt.mostPopular);
+    const candidate = mostPopularOption
+      ? selectableTimesForDate.find(
+          (avail) =>
+            getAvailabilityOptionId(avail) === mostPopularOption.optionId &&
+            avail.vacancies > 0,
+        )
+      : null;
+    const fallback = selectableTimesForDate.find((avail) => avail.vacancies > 0);
+    const toSelect = candidate ?? fallback;
+    if (toSelect) {
+      setSelectedAvailability(toSelect);
+      setError('');
+    }
+  }, [
+    selectedDate,
+    timesForSelectedDate,
+    timesForSelectedDateSelectionKey,
+    activeOptions,
+    activeOptionIdsKey,
+    selectedAvailability,
+    initialValues?.dateTime,
+    companyTimezone,
+    getSelectableTimesForDate,
+    optionsMap,
+    isAdmin,
+    setSelectedAvailability,
+    setError,
+  ]);
+
+  useEffect(() => {
+    if (!selectedAvailability || availabilities.length === 0) return;
+    const updatedAvailability = availabilities.find(
+      (avail) =>
+        avail.dateTime === selectedAvailability.dateTime &&
+        getAvailabilityOptionId(avail) === getAvailabilityOptionId(selectedAvailability),
+    );
+    if (!updatedAvailability) return;
+
+    setSelectedAvailability(updatedAvailability);
+
+    if (selectedReturnOption && updatedAvailability.returnOptions) {
+      const updatedReturnOption = updatedAvailability.returnOptions.find(
+        (opt) => opt.returnAvailabilityId === selectedReturnOption.returnAvailabilityId,
+      );
+      if (updatedReturnOption) {
+        setSelectedReturnOption(updatedReturnOption);
+      }
+    }
+  }, [
+    availabilities,
+    selectedAvailability,
+    selectedReturnOption,
+    setSelectedAvailability,
+    setSelectedReturnOption,
+  ]);
+
+  const selectedAvailabilityOptionId = selectedAvailability
+    ? getAvailabilityOptionId(selectedAvailability)
+    : '';
+
+  useEffect(() => {
+    const hasApiReturnHint =
+      Boolean(initialValues?.returnAvailabilityId?.trim()) ||
+      Boolean(initialValues?.returnDateTime?.trim());
+    if (hasApiReturnHint) {
+      setImplicitReturnBaselineId(null);
+      return;
+    }
+    setImplicitReturnBaselineId(null);
+  }, [
+    selectedAvailability?.dateTime,
+    selectedAvailabilityOptionId,
+    initialValues?.returnAvailabilityId,
+    initialValues?.returnDateTime,
+    setImplicitReturnBaselineId,
+  ]);
+
+  useEffect(() => {
+    if (!selectedAvailability?.returnOptions?.length || selectedReturnOption) return;
+    const sorted = [...selectedAvailability.returnOptions].sort(
+      (a, b) => parseISO(a.dateTime).getTime() - parseISO(b.dateTime).getTime(),
+    );
+    const initialReturnIdForSelect = initialValues?.returnAvailabilityId?.trim();
+    const initialReturnDtForSelect = initialValues?.returnDateTime?.trim();
+
+    const returnAnchor = changeFlowReturnAnchorRef.current;
+    if (returnAnchor) {
+      const fromAnchor = pickReturnMatchingPreviousSelection(
+        sorted,
+        returnAnchor,
+        companyTimezone,
+        isAdmin,
+      );
+      changeFlowReturnAnchorRef.current = null;
+      if (fromAnchor) {
+        setSelectedReturnOption(fromAnchor);
+        const hasApiReturnHintFromAnchor =
+          Boolean(initialReturnIdForSelect) || Boolean(initialReturnDtForSelect);
+        if (!hasApiReturnHintFromAnchor) {
+          setImplicitReturnBaselineId((prev) => prev ?? fromAnchor.returnAvailabilityId);
+        }
+        return;
+      }
+    }
+
+    const preferBooked =
+      initialReturnIdForSelect
+        ? sorted.find((opt) => opt.returnAvailabilityId === initialReturnIdForSelect)
+        : undefined;
+    const preferByDateTime =
+      initialReturnDtForSelect && !preferBooked
+        ? sorted.find((opt) => {
+            try {
+              return (
+                parseAvailabilityDateTime(opt.dateTime).getTime() ===
+                parseAvailabilityDateTime(initialReturnDtForSelect).getTime()
+              );
+            } catch {
+              return false;
+            }
+          })
+        : undefined;
+    const firstAvailable = sorted.find((opt) => opt.vacancies > 0);
+    const toSelect = preferBooked ?? preferByDateTime ?? firstAvailable;
+    if (toSelect) {
+      setSelectedReturnOption(toSelect);
+      const hasApiReturnHintToSelect =
+        Boolean(initialReturnIdForSelect) || Boolean(initialReturnDtForSelect);
+      if (!hasApiReturnHintToSelect) {
+        setImplicitReturnBaselineId((prev) => prev ?? toSelect.returnAvailabilityId);
+      }
+    }
+  }, [
+    selectedAvailability,
+    selectedReturnOption,
+    companyTimezone,
+    isAdmin,
+    initialValues?.returnAvailabilityId,
+    initialValues?.returnDateTime,
+    setSelectedReturnOption,
+    setImplicitReturnBaselineId,
+  ]);
+
+  useEffect(() => {
+    if (!validateSelectedReturnOption || !selectedReturnOption) return;
+    const returnOptions = selectedAvailability?.returnOptions ?? [];
+    if (returnOptions.length === 0) {
+      setSelectedReturnOption(null);
+      return;
+    }
+    const updatedReturnOption = returnOptions.find(
+      (opt) => opt.returnAvailabilityId === selectedReturnOption.returnAvailabilityId,
+    );
+    if (!updatedReturnOption) {
+      setSelectedReturnOption(null);
+    }
+  }, [
+    validateSelectedReturnOption,
+    selectedAvailability?.returnOptions,
+    selectedReturnOption,
+    setSelectedReturnOption,
+  ]);
+
+  const handleDateSelect = useCallback(
+    (date: string) => {
+      if (date === selectedDate) return;
+      if (selectedAvailability) {
+        changeFlowOutboundAnchorRef.current = {
+          productOptionId: getAvailabilityOptionId(selectedAvailability) || null,
+          minutesFromMidnight: getMinutesFromMidnightInTimezone(
+            selectedAvailability.dateTime,
+            companyTimezone,
+          ),
+        };
+        if (selectedReturnOption) {
+          changeFlowReturnAnchorRef.current = {
+            returnLocation: selectedReturnOption.returnLocation,
+            minutesFromMidnight: getMinutesFromMidnightInTimezone(
+              selectedReturnOption.dateTime,
+              companyTimezone,
+            ),
+          };
+        } else {
+          changeFlowReturnAnchorRef.current = null;
+        }
+      }
+      setSelectedAvailability(null);
+      setSelectedReturnOption(null);
+    },
+    [
+      selectedDate,
+      selectedAvailability,
+      selectedReturnOption,
+      companyTimezone,
+      setSelectedAvailability,
+      setSelectedReturnOption,
+    ],
+  );
+
+  const handleTimeSelect = useCallback(
+    (availability: Availability) => {
+      if (isAvailabilitySelectable && !isAvailabilitySelectable(availability)) return;
+      setSelectedAvailability(availability);
+      setSelectedReturnOption(null);
+      setError('');
+    },
+    [
+      isAvailabilitySelectable,
+      setSelectedAvailability,
+      setSelectedReturnOption,
+      setError,
+    ],
+  );
+
+  const clearChangeBookingSelectionAnchors = useCallback(() => {
+    changeFlowOutboundAnchorRef.current = null;
+    changeFlowReturnAnchorRef.current = null;
+  }, []);
+
+  return {
+    handleDateSelect,
+    handleTimeSelect,
+    clearChangeBookingSelectionAnchors,
+  };
+}

package/src/components/booking/useChangeBookingSelectionDetails.ts

@@ -0,0 +1,200 @@
+import { useMemo } from 'react';
+import type { Availability, ReturnOption } from '../../lib/booking-api';
+import { normalizeProductOptionIdForChangeFlow } from '../../lib/booking/product-option-id';
+import type { ChangeBookingFlowProps } from './booking-flow-types';
+import {
+  getAvailabilityOptionId,
+  parseAvailabilityDateTime,
+} from './change-booking-flow-helpers';
+
+type AddOnSelection = { addOnId: string; variantId?: string; quantity?: number };
+
+export interface ChangeBookingSelectionDetails {
+  hasChangesFromInitial: boolean;
+  hasOperationalChangesFromInitial: boolean;
+  dateChanged: boolean;
+  ticketsChanged: boolean;
+  productChanged: boolean;
+  optionChanged: boolean;
+  pickupChanged: boolean;
+  countsChanged: boolean;
+  addOnsChanged: boolean;
+  returnChanged: boolean;
+}
+
+export interface UseChangeBookingSelectionDetailsParams {
+  initialValues: ChangeBookingFlowProps['initialValues'];
+  selectedAvailability: Availability | null;
+  selectedReturnOption: ReturnOption | null;
+  implicitReturnBaselineId: string | null;
+  pickupLocationId: string | null;
+  quantities: Record<string, number>;
+  addOnSelections: AddOnSelection[];
+  initialAddOnMinQtyByKey: Map<string, number>;
+  changeFlowResolvedInitialProductOptionId: string | null;
+  productChanged?: boolean;
+}
+
+function emptyChangeSelectionDetails(): ChangeBookingSelectionDetails {
+  return {
+    hasChangesFromInitial: false,
+    hasOperationalChangesFromInitial: false,
+    dateChanged: false,
+    ticketsChanged: false,
+    productChanged: false,
+    optionChanged: false,
+    pickupChanged: false,
+    countsChanged: false,
+    addOnsChanged: false,
+    returnChanged: false,
+  };
+}
+
+function normalizePickupId(value: string | null | undefined): string | null {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : null;
+}
+
+function normalizeCounts(items: Array<{ category: string; count: number }> | null | undefined): Map<string, number> {
+  const map = new Map<string, number>();
+  for (const item of items ?? []) {
+    const key = item.category?.trim();
+    if (!key) continue;
+    map.set(key, Math.max(0, Number(item.count) || 0));
+  }
+  return map;
+}
+
+export function useChangeBookingSelectionDetails({
+  initialValues,
+  selectedAvailability,
+  selectedReturnOption,
+  implicitReturnBaselineId,
+  pickupLocationId,
+  quantities,
+  addOnSelections,
+  initialAddOnMinQtyByKey,
+  changeFlowResolvedInitialProductOptionId,
+  productChanged = false,
+}: UseChangeBookingSelectionDetailsParams): ChangeBookingSelectionDetails {
+  return useMemo(() => {
+    if (!initialValues || !selectedAvailability) {
+      return emptyChangeSelectionDetails();
+    }
+
+    const initialMs = initialValues.dateTime ? parseAvailabilityDateTime(initialValues.dateTime).getTime() : null;
+    const selectedMs = parseAvailabilityDateTime(selectedAvailability.dateTime).getTime();
+    const dateChanged = initialMs != null && initialMs !== selectedMs;
+
+    const initialOpt =
+      changeFlowResolvedInitialProductOptionId ??
+      (initialValues.productOptionId?.trim() || null);
+    const selectedOpt = normalizeProductOptionIdForChangeFlow(getAvailabilityOptionId(selectedAvailability));
+    const optionChanged = Boolean(
+      selectedOpt != null && initialOpt != null && initialOpt !== selectedOpt
+    );
+
+    const pickupChanged =
+      normalizePickupId(initialValues.pickupLocationId ?? null) !==
+      normalizePickupId(pickupLocationId ?? null);
+
+    const initialCounts = normalizeCounts(initialValues.bookingItems ?? null);
+    const currentCounts = new Map<string, number>();
+    for (const [category, count] of Object.entries(quantities)) {
+      const key = category?.trim();
+      if (!key) continue;
+      currentCounts.set(key, Math.max(0, Number(count) || 0));
+    }
+
+    const allCountKeys = new Set([...initialCounts.keys(), ...currentCounts.keys()]);
+    let countsChanged = false;
+    for (const key of allCountKeys) {
+      if ((initialCounts.get(key) ?? 0) !== (currentCounts.get(key) ?? 0)) {
+        countsChanged = true;
+        break;
+      }
+    }
+
+    const currentAddOnQtyByKey = new Map<string, number>();
+    for (const sel of addOnSelections) {
+      const key = `${sel.addOnId.trim()}::${sel.variantId?.trim() || ''}`;
+      currentAddOnQtyByKey.set(key, (currentAddOnQtyByKey.get(key) ?? 0) + Math.max(1, Number(sel.quantity) || 1));
+    }
+
+    const allAddOnKeys = new Set([...initialAddOnMinQtyByKey.keys(), ...currentAddOnQtyByKey.keys()]);
+    let addOnsChanged = false;
+    for (const key of allAddOnKeys) {
+      if ((initialAddOnMinQtyByKey.get(key) ?? 0) !== (currentAddOnQtyByKey.get(key) ?? 0)) {
+        addOnsChanged = true;
+        break;
+      }
+    }
+
+    const hasReturnOptions = (selectedAvailability?.returnOptions?.length ?? 0) > 0;
+    const initialReturnId = initialValues.returnAvailabilityId?.trim() || null;
+    const initialReturnDt = initialValues.returnDateTime?.trim() || null;
+    const selectedReturnId = selectedReturnOption?.returnAvailabilityId?.trim() || null;
+    const selectedReturnDt = selectedReturnOption?.dateTime?.trim() || null;
+    let returnChanged = false;
+
+    if (hasReturnOptions && selectedReturnOption) {
+      if (initialReturnId && selectedReturnId) {
+        if (initialReturnId === selectedReturnId) {
+          returnChanged = false;
+        } else if (initialReturnDt && selectedReturnDt) {
+          // Some refreshes can rotate return availability IDs for the same departure time.
+          returnChanged =
+            parseAvailabilityDateTime(initialReturnDt).getTime() !==
+            parseAvailabilityDateTime(selectedReturnDt).getTime();
+        } else {
+          returnChanged = true;
+        }
+      } else if (initialReturnDt && selectedReturnDt) {
+        returnChanged =
+          parseAvailabilityDateTime(initialReturnDt).getTime() !==
+          parseAvailabilityDateTime(selectedReturnDt).getTime();
+      } else if (implicitReturnBaselineId != null && selectedReturnId != null) {
+        returnChanged = implicitReturnBaselineId !== selectedReturnId;
+      }
+    }
+
+    return {
+      hasChangesFromInitial:
+        dateChanged ||
+        productChanged ||
+        optionChanged ||
+        pickupChanged ||
+        countsChanged ||
+        addOnsChanged ||
+        returnChanged,
+      // Operational gating ignores option-id noise and considers only user-visible booking deltas.
+      hasOperationalChangesFromInitial:
+        dateChanged ||
+        productChanged ||
+        pickupChanged ||
+        countsChanged ||
+        addOnsChanged ||
+        returnChanged,
+      dateChanged,
+      // Tickets line corresponds to product/option + ticket counts; add-ons and pickup affect itinerary, not the ticket label.
+      ticketsChanged: Boolean(productChanged || optionChanged || countsChanged),
+      productChanged,
+      optionChanged,
+      pickupChanged,
+      countsChanged,
+      addOnsChanged,
+      returnChanged,
+    };
+  }, [
+    initialValues,
+    selectedAvailability,
+    selectedReturnOption,
+    implicitReturnBaselineId,
+    pickupLocationId,
+    quantities,
+    addOnSelections,
+    initialAddOnMinQtyByKey,
+    changeFlowResolvedInitialProductOptionId,
+    productChanged,
+  ]);
+}