@ticketboothapp/booking 1.2.123 → 1.2.125

package/src/components/booking/ChangeBookingItineraryPanel.tsx

@@ -0,0 +1,115 @@
+import type { RefObject } from 'react';
+import { format, parseISO } from 'date-fns';
+import type {
+  Availability,
+  ItineraryDisplayStep,
+  PickupLocation,
+  ProductOption,
+  ReturnOption,
+} from '../../lib/booking-api';
+import { ItineraryBox } from './ItineraryBox';
+import { ItineraryPlaceholder } from './ItineraryPlaceholder';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+
+export interface ChangeBookingItineraryPanelProps {
+  selectedDate: string;
+  hideItineraryBox: boolean;
+  activeOptions: ProductOption[];
+  destinationsCount: number;
+  selectedAvailability: Availability | null;
+  selectedReturnOption: ReturnOption | null;
+  pickupLocationId: string | null;
+  pickupLocationSkipped: boolean;
+  pickupLocationsCount: number;
+  quantities: Record<string, number>;
+  email: string;
+  firstName: string;
+  lastName: string;
+  getItineraryItems: () => ItineraryDisplayStep[] | null;
+  isItinerarySticky: boolean;
+  stickyTopPx?: number;
+  isMobile: boolean;
+  useWindowScroll: boolean;
+  showTooltip: boolean;
+  selectedPickupLocation?: PickupLocation | null;
+  itineraryRef: RefObject<HTMLDivElement | null>;
+  t: TranslationFn;
+  onTooltipToggle: () => void;
+  onTooltipShow: (show: boolean) => void;
+}
+
+export function ChangeBookingItineraryPanel({
+  selectedDate,
+  hideItineraryBox,
+  activeOptions,
+  destinationsCount,
+  selectedAvailability,
+  selectedReturnOption,
+  pickupLocationId,
+  pickupLocationSkipped,
+  pickupLocationsCount,
+  quantities,
+  email,
+  firstName,
+  lastName,
+  getItineraryItems,
+  isItinerarySticky,
+  stickyTopPx,
+  isMobile,
+  useWindowScroll,
+  showTooltip,
+  selectedPickupLocation,
+  itineraryRef,
+  t,
+  onTooltipToggle,
+  onTooltipShow,
+}: ChangeBookingItineraryPanelProps) {
+  if (!selectedDate || hideItineraryBox) return null;
+
+  const hasItineraryAny =
+    activeOptions.some((option) => option.itinerary?.length) && destinationsCount > 0;
+  if (!hasItineraryAny) return null;
+
+  const formattedDate = format(parseISO(selectedDate), 'MMM d');
+  if (!selectedAvailability) {
+    return <ItineraryPlaceholder formattedDate={formattedDate} t={t} />;
+  }
+
+  const itineraryItems = getItineraryItems();
+  if (!itineraryItems || itineraryItems.length === 0) return null;
+
+  const hasTickets = Object.values(quantities).some((qty) => qty > 0);
+  const hasPickupChoice =
+    Boolean(pickupLocationId) || pickupLocationSkipped || pickupLocationsCount === 0;
+  const isBookingComplete = Boolean(
+    selectedAvailability &&
+      selectedReturnOption &&
+      hasPickupChoice &&
+      hasTickets &&
+      email.trim() !== '' &&
+      firstName.trim() !== '' &&
+      lastName.trim() !== '',
+  );
+
+  return (
+    <ItineraryBox
+      selectedDate={selectedDate}
+      formattedDate={formattedDate}
+      itineraryItems={itineraryItems}
+      isBookingComplete={isBookingComplete}
+      isItinerarySticky={isItinerarySticky}
+      stickyTopPx={stickyTopPx}
+      isMobile={isMobile}
+      useWindowScroll={useWindowScroll}
+      showTooltip={showTooltip}
+      selectedPickupLocation={selectedPickupLocation}
+      pickupLocationSkipped={pickupLocationSkipped}
+      pickupLocationsCount={pickupLocationsCount}
+      itineraryRef={itineraryRef}
+      t={t}
+      onTooltipToggle={onTooltipToggle}
+      onTooltipShow={onTooltipShow}
+    />
+  );
+}

package/src/components/booking/ChangeBookingQuoteStatusPlaceholder.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+
+export interface ChangeBookingQuoteStatusPlaceholderParams {
+  suppressSelfServeCurrencyUi: boolean;
+  hasSelectedAvailability: boolean;
+  totalQuantity: number;
+  selfServePricingConfirmed: boolean;
+  changeQuoteLoading: boolean;
+  changeQuoteFetchError?: string | null;
+  quoteCanProceed?: boolean;
+  quoteBlockedReason?: string | null;
+  blockedDetails?: ReactNode;
+  t: (key: string) => string;
+}
+
+export function buildChangeBookingQuoteStatusPlaceholder({
+  suppressSelfServeCurrencyUi,
+  hasSelectedAvailability,
+  totalQuantity,
+  selfServePricingConfirmed,
+  changeQuoteLoading,
+  changeQuoteFetchError,
+  quoteCanProceed,
+  quoteBlockedReason,
+  blockedDetails,
+  t,
+}: ChangeBookingQuoteStatusPlaceholderParams): ReactNode | undefined {
+  if (!suppressSelfServeCurrencyUi || !hasSelectedAvailability || totalQuantity <= 0) return undefined;
+  if (selfServePricingConfirmed) return undefined;
+  if (changeQuoteLoading) {
+    return (
+      <div className="rounded-lg border border-stone-200 bg-stone-50 px-4 py-3 text-sm text-stone-600">
+        {t('booking.updatingPrice') !== 'booking.updatingPrice' ? t('booking.updatingPrice') : <>Getting confirmed price&hellip;</>}
+      </div>
+    );
+  }
+  if (changeQuoteFetchError) {
+    return (
+      <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">
+        {changeQuoteFetchError}
+      </div>
+    );
+  }
+  if (quoteCanProceed === false) {
+    return (
+      <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
+        <div>{quoteBlockedReason ?? 'This booking change is not available.'}</div>
+        {blockedDetails}
+      </div>
+    );
+  }
+  return (
+    <div className="rounded-lg border border-stone-200 bg-stone-50 px-4 py-3 text-sm text-stone-600">
+      Prices update once your selection is confirmed with our booking system.
+    </div>
+  );
+}

package/src/components/booking/ChangeBookingSelectionControlsPanel.tsx

@@ -0,0 +1,157 @@
+import type { AddOn, Availability, ProductOption, ReturnOption } from '../../lib/booking-api';
+import type { AddOnSelection } from './AddOnsSection';
+import type { Currency } from './CurrencySwitcher';
+import { ChangeBookingTicketsAndAddOnsPanel } from './ChangeBookingTicketsAndAddOnsPanel';
+import { PickupTimeSelector, type PickupTimeInfo } from './PickupTimeSelector';
+import { ReturnTimeSelector } from './ReturnTimeSelector';
+import type { TicketRate } from './TicketSelector';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+type AddOnSelectionsChangeHandler = (
+  selections: AddOnSelection[] | ((prev: AddOnSelection[]) => AddOnSelection[]),
+) => void;
+
+export interface ChangeBookingSelectionControlsPanelProps {
+  selectedDate: string;
+  selectedAvailability: Availability | null;
+  pickupTimes: PickupTimeInfo[];
+  optionsMap: Map<string, ProductOption>;
+  hasAnyMostPopular: boolean;
+  isAdmin: boolean;
+  pickupLocationSkipped: boolean;
+  t: TranslationFn;
+  onTimeSelect: (availability: Availability) => void;
+  returnOptions: ReturnOption[];
+  selectedReturnOption: ReturnOption | null;
+  selectedReturnOptionForDisplay: ReturnOption | null;
+  onSelectedReturnOptionChange: (option: ReturnOption) => void;
+  getStaySummary: (returnDateTime: Date) => string | null;
+  pricing: TicketRate[];
+  quantities: Record<string, number>;
+  totalQuantity: number;
+  selectedVacancies: number;
+  companyTimezone: string;
+  pickupVacancies: number;
+  returnVacancies: number | null;
+  currency: Currency;
+  locale: string;
+  isSimplifiedPricingView: boolean;
+  onQuantityChange: (category: string, delta: number) => void;
+  minimumQuantities?: Record<string, number>;
+  applyReceiptPaidFloors: boolean;
+  ticketUnitFloorByCategory?: Map<string, number>;
+  addOns: AddOn[];
+  addOnSelections: AddOnSelection[];
+  onAddOnSelectionsChange: AddOnSelectionsChangeHandler;
+  minimumTotalByAddOnId?: Map<string, number>;
+  suppressUnitPrices?: boolean;
+  suppressReturnPerPersonPrices?: boolean;
+  suppressAddOnPrices?: boolean;
+}
+
+export function ChangeBookingSelectionControlsPanel({
+  selectedDate,
+  selectedAvailability,
+  pickupTimes,
+  optionsMap,
+  hasAnyMostPopular,
+  isAdmin,
+  pickupLocationSkipped,
+  t,
+  onTimeSelect,
+  returnOptions,
+  selectedReturnOption,
+  selectedReturnOptionForDisplay,
+  onSelectedReturnOptionChange,
+  getStaySummary,
+  pricing,
+  quantities,
+  totalQuantity,
+  selectedVacancies,
+  companyTimezone,
+  pickupVacancies,
+  returnVacancies,
+  currency,
+  locale,
+  isSimplifiedPricingView,
+  onQuantityChange,
+  minimumQuantities,
+  applyReceiptPaidFloors,
+  ticketUnitFloorByCategory,
+  addOns,
+  addOnSelections,
+  onAddOnSelectionsChange,
+  minimumTotalByAddOnId,
+  suppressUnitPrices = false,
+  suppressReturnPerPersonPrices = false,
+  suppressAddOnPrices = false,
+}: ChangeBookingSelectionControlsPanelProps) {
+  return (
+    <>
+      {selectedDate ? (
+        <PickupTimeSelector
+          pickupTimes={pickupTimes}
+          selectedDateTime={selectedAvailability?.dateTime ?? null}
+          selectedTicketCount={totalQuantity}
+          optionsMap={optionsMap}
+          hasAnyMostPopular={hasAnyMostPopular}
+          isAdmin={isAdmin}
+          pickupLocationSkipped={pickupLocationSkipped}
+          t={t}
+          onTimeSelect={onTimeSelect}
+        />
+      ) : null}
+
+      {selectedAvailability?.returnOptions && selectedAvailability.returnOptions.length > 0 ? (
+        <ReturnTimeSelector
+          returnOptions={returnOptions}
+          selectedReturnOption={selectedReturnOptionForDisplay}
+          selectedTicketCount={totalQuantity}
+          companyTimezone={companyTimezone}
+          currency={currency}
+          locale={locale}
+          isAdmin={isAdmin}
+          t={t}
+          onReturnSelect={(option) => {
+            const raw = selectedAvailability.returnOptions?.find(
+              (opt) => opt.returnAvailabilityId === option.returnAvailabilityId,
+            );
+            onSelectedReturnOptionChange(raw ?? option);
+          }}
+          getStaySummary={getStaySummary}
+          suppressPerPersonPrices={suppressReturnPerPersonPrices}
+        />
+      ) : null}
+
+      {selectedAvailability ? (
+        <ChangeBookingTicketsAndAddOnsPanel
+          selectedAvailability={selectedAvailability}
+          pricing={pricing}
+          quantities={quantities}
+          totalQuantity={totalQuantity}
+          selectedVacancies={selectedVacancies}
+          companyTimezone={companyTimezone}
+          pickupVacancies={pickupVacancies}
+          selectedReturnOption={selectedReturnOption}
+          returnVacancies={returnVacancies}
+          currency={currency}
+          locale={locale}
+          isAdmin={isAdmin}
+          isSimplifiedPricingView={isSimplifiedPricingView}
+          t={t}
+          onQuantityChange={onQuantityChange}
+          minimumQuantities={minimumQuantities}
+          applyReceiptPaidFloors={applyReceiptPaidFloors}
+          ticketUnitFloorByCategory={ticketUnitFloorByCategory}
+          suppressUnitPrices={suppressUnitPrices}
+          addOns={addOns}
+          addOnSelections={addOnSelections}
+          onAddOnSelectionsChange={onAddOnSelectionsChange}
+          minimumTotalByAddOnId={minimumTotalByAddOnId}
+          suppressAddOnPrices={suppressAddOnPrices}
+        />
+      ) : null}
+    </>
+  );
+}

package/src/components/booking/ChangeBookingTicketsAndAddOnsPanel.tsx

@@ -0,0 +1,102 @@
+import type { AddOn, Availability, ReturnOption } from '../../lib/booking-api';
+import { AddOnsSection, type AddOnSelection } from './AddOnsSection';
+import type { Currency } from './CurrencySwitcher';
+import { TicketSelector, type TicketRate } from './TicketSelector';
+
+type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
+
+type AddOnSelectionsChangeHandler = (
+  selections: AddOnSelection[] | ((prev: AddOnSelection[]) => AddOnSelection[]),
+) => void;
+
+export interface ChangeBookingTicketsAndAddOnsPanelProps {
+  selectedAvailability: Availability;
+  pricing: TicketRate[];
+  quantities: Record<string, number>;
+  totalQuantity: number;
+  selectedVacancies: number;
+  companyTimezone: string;
+  pickupVacancies: number;
+  selectedReturnOption?: ReturnOption | null;
+  returnVacancies: number | null;
+  currency: Currency;
+  locale: string;
+  isAdmin: boolean;
+  isSimplifiedPricingView: boolean;
+  t: TranslationFn;
+  onQuantityChange: (category: string, delta: number) => void;
+  minimumQuantities?: Record<string, number>;
+  applyReceiptPaidFloors: boolean;
+  ticketUnitFloorByCategory?: Map<string, number>;
+  addOns: AddOn[];
+  addOnSelections: AddOnSelection[];
+  onAddOnSelectionsChange: AddOnSelectionsChangeHandler;
+  minimumTotalByAddOnId?: Map<string, number>;
+  suppressUnitPrices?: boolean;
+  suppressAddOnPrices?: boolean;
+}
+
+export function ChangeBookingTicketsAndAddOnsPanel({
+  selectedAvailability,
+  pricing,
+  quantities,
+  totalQuantity,
+  selectedVacancies,
+  companyTimezone,
+  pickupVacancies,
+  selectedReturnOption,
+  returnVacancies,
+  currency,
+  locale,
+  isAdmin,
+  isSimplifiedPricingView,
+  t,
+  onQuantityChange,
+  minimumQuantities,
+  applyReceiptPaidFloors,
+  ticketUnitFloorByCategory,
+  addOns,
+  addOnSelections,
+  onAddOnSelectionsChange,
+  minimumTotalByAddOnId,
+  suppressUnitPrices = false,
+  suppressAddOnPrices = false,
+}: ChangeBookingTicketsAndAddOnsPanelProps) {
+  return (
+    <>
+      <TicketSelector
+        pricing={pricing}
+        quantities={quantities}
+        totalQuantity={totalQuantity}
+        selectedVacancies={selectedVacancies}
+        companyTimezone={companyTimezone}
+        pickupDateTime={selectedAvailability.dateTime}
+        pickupVacancies={pickupVacancies}
+        returnDateTime={selectedReturnOption?.dateTime ?? null}
+        returnVacancies={returnVacancies}
+        resourceCount={selectedReturnOption ? null : (selectedAvailability.resourceCount ?? null)}
+        currency={currency}
+        locale={locale}
+        isAdmin={isAdmin}
+        isSimplifiedPricingView={isSimplifiedPricingView}
+        t={t}
+        onQuantityChange={onQuantityChange}
+        minimumQuantities={minimumQuantities}
+        ticketUnitFloorByCategory={applyReceiptPaidFloors ? ticketUnitFloorByCategory : undefined}
+        suppressUnitPrices={suppressUnitPrices}
+      />
+
+      {totalQuantity > 0 && addOns.length > 0 ? (
+        <AddOnsSection
+          addOns={addOns}
+          addOnSelections={addOnSelections}
+          currency={currency}
+          locale={locale}
+          onSelectionsChange={onAddOnSelectionsChange}
+          minimumTotalByAddOnId={minimumTotalByAddOnId}
+          suppressPrices={suppressAddOnPrices}
+        />
+      ) : null}
+    </>
+  );
+}

package/src/components/booking/CheckoutModal.tsx

@@ -15,6 +15,15 @@ export interface CheckoutModalLineItem {
   breakdown: PriceBreakdownType | null;
 }
 
+export interface CheckoutModalSummaryOverride {
+  lines: PriceSummaryLine[];
+  subtotal?: number;
+  taxAmount?: number;
+  discountAmount?: number;
+  discountLabel?: string | null;
+  fullTotalAmount?: number;
+}
+
 export interface CheckoutModalProps {
   open: boolean;
   onClose: () => void;
@@ -37,6 +46,7 @@ export interface CheckoutModalProps {
   total: number;
   promoDiscountAmount?: number;
   discountLabel?: string | null;
+  summaryOverride?: CheckoutModalSummaryOverride;
   totalQuantity: number;
   isTaxIncludedInPrice: boolean;
   taxRate?: number;
@@ -161,6 +171,7 @@ export function CheckoutModal({
   totalQuantity,
   promoDiscountAmount = 0,
   discountLabel,
+  summaryOverride,
   isTaxIncludedInPrice,
   taxRate = 0,
   currency,
@@ -182,6 +193,57 @@ export function CheckoutModal({
   if (customerLastName?.trim()) manageParams.set('lastName', customerLastName.trim());
   if (!successUrlOverride) manageParams.set('booking_complete', '1');
   const successUrl = successUrlOverride ?? `${baseUrl}/manage-booking?${manageParams.toString()}`;
+  const summaryLines: PriceSummaryLine[] =
+    summaryOverride?.lines ??
+    [
+      ...ticketLines.map(({ line, breakdown }): PriceSummaryLine => ({
+        kind: 'ticket',
+        category: line.category,
+        qty: line.qty,
+        itemTotal: line.itemTotal,
+        breakdown,
+      })),
+      ...(returnPriceAdjustment !== 0
+        ? [
+            {
+              kind: 'line' as const,
+              label: `${t('booking.returnOption')} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
+              amount: returnPriceAdjustment,
+              type: 'return',
+            },
+          ]
+        : []),
+      ...(cancellationPolicyFee > 0
+        ? [
+            {
+              kind: 'line' as const,
+              label: cancellationPolicyLabel ?? t('booking.flexibleCancellation') ?? 'Flexible cancellation',
+              amount: cancellationPolicyFee,
+              type: 'cancellation',
+            },
+          ]
+        : []),
+      ...feeLineItems.map((fee) => {
+        const isMoraineLakeRoadAccessFee = fee.name.toLowerCase().includes('moraine') && (fee.name.toLowerCase().includes('access') || fee.name.toLowerCase().includes('road') || fee.name.toLowerCase().includes('license'));
+        const showQuantityLabel = fee.showQuantityLabel !== false;
+        return {
+          kind: 'line' as const,
+          label: showQuantityLabel
+            ? `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`
+            : fee.name,
+          amount: fee.totalAmount,
+          type: 'fee',
+          tooltip: isMoraineLakeRoadAccessFee
+            ? "Since 2025, Parks Canada charges a per-trip fee for License of Occupation. Based on our capacity, this per-person fee contributes towards Parks Canada's Moraine Lake Road operations."
+            : undefined,
+        };
+      }),
+    ];
+  const summarySubtotal = summaryOverride?.subtotal ?? subtotal;
+  const summaryTaxAmount = summaryOverride?.taxAmount ?? (!isTaxIncludedInPrice && tax > 0 ? tax : 0);
+  const summaryDiscountAmount = summaryOverride?.discountAmount ?? promoDiscountAmount ?? 0;
+  const summaryDiscountLabel = summaryOverride?.discountLabel ?? discountLabel;
+  const summaryFullTotalAmount = summaryOverride?.fullTotalAmount ?? subtotal;
 
   const hasFiredBeginCheckout = useRef(false);
   /** Ensures we only fire expiry close once per modal open (avoids Strict Mode / repeated 0 remainingMs). */
@@ -304,61 +366,18 @@ export function CheckoutModal({
           {/* Order summary — shared PriceSummary component */}
           <div className="mt-4 min-w-0">
             <PriceSummary
-              lines={[
-                ...ticketLines.map(({ line, breakdown }): PriceSummaryLine => ({
-                  kind: 'ticket',
-                  category: line.category,
-                  qty: line.qty,
-                  itemTotal: line.itemTotal,
-                  breakdown,
-                })),
-                ...(returnPriceAdjustment !== 0
-                  ? [
-                      {
-                        kind: 'line' as const,
-                        label: `${t('booking.returnOption')} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
-                        amount: returnPriceAdjustment,
-                        type: 'return',
-                      },
-                    ]
-                  : []),
-                ...(cancellationPolicyFee > 0
-                  ? [
-                      {
-                        kind: 'line' as const,
-                        label: cancellationPolicyLabel ?? t('booking.flexibleCancellation') ?? 'Flexible cancellation',
-                        amount: cancellationPolicyFee,
-                        type: 'cancellation',
-                      },
-                    ]
-                  : []),
-                ...feeLineItems.map((fee) => {
-                  const isMoraineLakeRoadAccessFee = fee.name.toLowerCase().includes('moraine') && (fee.name.toLowerCase().includes('access') || fee.name.toLowerCase().includes('road') || fee.name.toLowerCase().includes('license'));
-                  const showQuantityLabel = fee.showQuantityLabel !== false;
-                  return {
-                    kind: 'line' as const,
-                    label: showQuantityLabel
-                      ? `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`
-                      : fee.name,
-                    amount: fee.totalAmount,
-                    type: 'fee',
-                    tooltip: isMoraineLakeRoadAccessFee
-                      ? "Since 2025, Parks Canada charges a per-trip fee for License of Occupation. Based on our capacity, this per-person fee contributes towards Parks Canada's Moraine Lake Road operations."
-                      : undefined,
-                  };
-                }),
-              ]}
+              lines={summaryLines}
               total={total}
               currency={currency}
               locale={locale}
-              subtotal={subtotal !== total ? subtotal : undefined}
-              discountAmount={promoDiscountAmount ?? 0}
-              discountLabel={discountLabel}
-              taxAmount={!isTaxIncludedInPrice && tax > 0 ? tax : 0}
+              subtotal={summarySubtotal !== total ? summarySubtotal : undefined}
+              discountAmount={summaryDiscountAmount}
+              discountLabel={summaryDiscountLabel}
+              taxAmount={summaryTaxAmount}
               taxRate={taxRate}
               size="sm"
               t={t}
-              depositMode={isDepositPayment && subtotal > total ? { totalLabel: t('booking.deposit') || 'Deposit', balanceAmount: subtotal - total, fullTotalAmount: subtotal } : undefined}
+              depositMode={isDepositPayment && summaryFullTotalAmount > total ? { totalLabel: t('booking.deposit') || 'Deposit', balanceAmount: summaryFullTotalAmount - total, fullTotalAmount: summaryFullTotalAmount } : undefined}
               hideSubtotal={isDepositPayment}
               extraBetweenTaxAndTotal={
                 changeTotals ? (