@ticketboothapp/booking 0.1.11 → 0.1.12

package/src/components/BookingDetails.tsx

@@ -1,89 +1,56 @@
 'use client';
 
-import { useState } from 'react';
-import Link from 'next/link';
+import React, { useState, useCallback, useRef, useEffect, useLayoutEffect } from 'react';
+import dynamic from 'next/dynamic';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
 import { formatCurrencyAmount } from '@/lib/currency';
 import { formatBookingRefForDisplay } from '@/lib/booking-ref';
-import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
-import { type Currency } from './CurrencySwitcher';
-import { useTranslations } from '@/lib/i18n';
-import { getStepLabel } from '@/lib/itinerary-labels';
-import { createBalancePaymentIntent, createManagePaymentIntent, type ItineraryDisplayStep } from '@/lib/api';
+import type { Currency } from '@/lib/currency';
+import GetYourGuideIcon from '@/assets/icons/partner-logos/getyourguide.svg';
+import PhoneInputWithCountryComponent from '@/components/PhoneInputWithCountry';
+import {
+  updateContactDetails,
+  createBalancePaymentIntent,
+  createManagePaymentIntent,
+  cancelBookingPublic,
+  respondToItineraryReview,
+  type CommunicationMethod,
+  type UpdateContactPayload,
+} from '@/lib/booking-api';
+import Button, { ButtonHoverColor } from '@/components/button';
+import ChangeBookingDialog from '@/components/booking/ChangeBookingDialog';
+import { manageBookingChangeSuccessMessage } from '@/lib/manage-booking-post-checkout';
+import type { ChangeFlowSelectionPreview } from '@/components/booking/BookingFlow';
 import { ENV } from '@/lib/env';
+import { storePendingPurchase } from '@/lib/analytics';
+import { useCompanyTimezone } from '@/contexts/CompanyContext';
+import { getItineraryStepLabel } from '@/lib/booking/itinerary-display';
+import styles from './BookingDetails.module.css';
+import { PostBookingDependentAddOnUpsell } from '@/components/PostBookingDependentAddOnUpsell';
+import defaultStrings from '@/strings';
 
 const stripePromise = ENV.STRIPE_PUBLISHABLE_KEY ? loadStripe(ENV.STRIPE_PUBLISHABLE_KEY) : null;
 
-function isPickupOrDropOffStep(step: { stepType?: string }): boolean {
-  return step.stepType === 'pickup' || step.stepType === 'drop_off';
-}
-
-function BalancePaymentForm({
-  successUrl,
-  onClose,
-  t,
-  balanceAmount,
-  currency,
-}: {
-  successUrl: string;
-  onClose: () => void;
-  t: (key: string) => string;
-  balanceAmount: number;
-  currency: Currency;
-}) {
-  const stripe = useStripe();
-  const elements = useElements();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+/** Class added to html/body to lock scroll while cancel overlay is visible (see BookingDetails.module.css :global). */
+const CANCEL_OVERLAY_SCROLL_LOCK_CLASS = 'cancel-overlay-scroll-lock';
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!stripe || !elements) return;
-    setLoading(true);
-    setError(null);
-    const { error: submitError } = await elements.submit();
-    if (submitError) {
-      setError(submitError.message ?? 'Validation failed');
-      setLoading(false);
-      return;
-    }
-    const { error: confirmError } = await stripe.confirmPayment({
-      elements,
-      confirmParams: { return_url: successUrl },
-    });
-    if (confirmError) {
-      setError(confirmError.message ?? 'Payment failed');
-    }
-    setLoading(false);
-  };
+const COMMUNICATION_OPTIONS: { value: CommunicationMethod; label: string }[] = [
+  { value: 'EMAIL', label: 'Email' },
+  { value: 'WHATSAPP', label: 'WhatsApp' },
+  { value: 'SMS', label: 'SMS' },
+];
 
+function WhatsAppIconSmall({ className }: { className?: string }) {
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <PaymentElement />
-      {error && (
-        <p className="text-sm text-red-600" role="alert">{error}</p>
-      )}
-      <div className="flex gap-3 pt-2">
-        <button
-          type="button"
-          onClick={onClose}
-          className="flex-1 py-3 px-4 border border-stone-300 text-stone-700 rounded-lg hover:bg-stone-50"
-        >
-          {t('common.cancel') || 'Cancel'}
-        </button>
-        <button
-          type="submit"
-          disabled={!stripe || loading}
-          className="flex-1 py-3 px-4 bg-emerald-600 text-white font-semibold rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          {loading ? 'Paying...' : `Pay remaining balance (${formatCurrencyAmount(balanceAmount, currency)})`}
-        </button>
-      </div>
-    </form>
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
+    </svg>
   );
 }
 
+const PickupLocationDialog = dynamic(() => import('@/components/PickupLocationDialog'), { ssr: false });
+
 export interface ReceiptLineItem {
   type: string;
   label: string;
@@ -110,8 +77,8 @@ export interface PaymentMethodUsage {
   currency: string;
   displayLabel?: string | null;
   reference?: string | null;
+  /** ISO 8601 timestamp when payment/refund was processed */
   paidAt?: string | null;
-  paymentType?: string | null; // DEPOSIT | BALANCE | FULL
 }
 
 export interface PaymentPlan {
@@ -133,10 +100,18 @@ export interface PaymentDisplay {
 
 export interface CancellationPolicySnapshot {
   label: string;
+  /** Window (in hours before booking start) to make changes to date/time etc. */
+  changeWindowHoursBefore?: number | null;
+  /** Legacy: hoursBeforeBooking + refundPercentage */
   tiers?: Array<{
     hoursBeforeBooking: number;
     refundPercentage: number;
   }>;
+  /** Refund tiers: hours before booking + refund percent (e.g. from API/DynamoDB) */
+  refundTiers?: Array<{
+    hoursBefore: number;
+    refundPercent: number;
+  }>;
 }
 
 export interface Customer {
@@ -144,396 +119,2139 @@ export interface Customer {
   lastName?: string | null;
   email?: string | null;
   phoneNumber?: string | null;
+  /** WhatsApp number if different from phone (for WhatsApp messaging) */
+  whatsAppNumber?: string | null;
+}
+
+/** Dependent add-on rows from public/authenticated booking API */
+export interface DependentAddOnBookingDisplay {
+  dependentAddOnBookingId: string;
+  slotStart: string;
+  slotEnd: string;
+  quantity: number;
+  /** Assigned photographer / resource label from booking API when present */
+  resourceName?: string | null;
+  status?: string;
+  unitPrice?: number;
+  currency?: string;
+  /** Sum charged (e.g. from Stripe), including tax when applicable; from API `totalAmountPaid`. */
+  totalAmountPaid?: number;
+  dependentAddOnProductOptionId?: string | null;
+}
+
+export interface ItineraryDisplayStep {
+  /** Optional - API may send label; otherwise we build from stepType + place */
+  label?: string | null;
+  time?: string | null;
+  stepType?: string | null;
+  /** Location name (e.g. "The Kenrick Hotel Banff", "Moraine Lake"). Backend sends this; we build display from stepType + place */
+  place?: string | null;
+}
+
+export interface BookingItem {
+  category: string; // e.g. "ADULT", "CHILD", "INFANT"
+  count: number;
 }
 
 export interface BookingData {
   bookingReference: string;
+  /** GetYourGuide booking reference when booked via them */
+  gygBookingReference?: string | null;
   productId: string;
+  /** Inventory availability slot id when the API persists it; best key for matching change-booking departure. */
+  availabilityId?: string | null;
+  /** Booked product option id (distinct from parent productId); used for change-booking preselection. Never a parent `p_` id. */
+  productOptionId?: string | null;
+  /** When the API exposes it, preferred resolved option id (same semantic as productOptionId). */
+  resolvedProductOptionId?: string | null;
+  companyId?: string | null;
+  productName?: string | null;
   status: string;
-  productType?: string | null; // "STANDARD" | "PRIVATE_SHUTTLE" - for deposit receipt UI
   customer?: Customer | null;
   receipt: Receipt;
   payment: PaymentDisplay;
+  dateTime?: string | null; // ISO 8601 format - availability date/time
+  /**
+   * Earliest committed departure used for refund/self-serve change cutoffs.
+   * When present and earlier than dateTime, policies follow this time (e.g. after rescheduling to a later trip).
+   */
+  policyAnchorDateTime?: string | null;
+  bookingItems?: BookingItem[] | null; // e.g. [{category: "ADULT", count: 2}, {category: "CHILD", count: 1}]
+  /** Persisted add-on selections on the booking (when returned by API). */
+  addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
   pickupLocationId?: string | null;
+  /** Booked return leg (round-trip); used for change-booking “return time changed” detection. */
+  returnAvailabilityId?: string | null;
+  /** ISO return datetime when return availability id is not on the payload. */
+  returnDateTime?: string | null;
   travelerHotel?: string | null;
   cancellationPolicyId?: string | null;
   cancellationPolicySnapshot?: CancellationPolicySnapshot | null;
+  /** Pre-computed cancel window + refund (only when CONFIRMED and within policy) */
+  cancellationInfo?: {
+    canCancel: boolean;
+    refundPercent: number;
+    refundAmount: number;
+    currency: string;
+    refundTiers: Array<{ hoursBefore: number; refundPercent: number }>;
+  } | null;
   communicationPreference?: string[] | null;
   itineraryDisplay?: ItineraryDisplayStep[] | null;
   createdAt: string;
+  /** "STANDARD" | "PRIVATE_SHUTTLE" - from API */
+  productType?: string | null;
+  /** For private shuttles: passenger count (capacity), optional duration, whether count is being reviewed, and requested count (from planningNotes) for display */
+  privateShuttleDetails?: { passengerCount: number; calculatedDurationMinutes?: number; passengerCountBeingReviewed?: boolean; requestedPassengerCount?: number } | null;
+  /** Private shuttle draft + guest approval workflow */
+  draftItinerary?: {
+    destinations?: string[];
+    planningNotes?: string | null;
+    approvedAt?: string | null;
+    reviewStatus?: 'DRAFT' | 'READY_FOR_REVIEW' | 'APPROVED' | 'CHANGES_REQUESTED' | null;
+    guestChangeRequestComment?: string | null;
+    submittedForReviewAt?: string | null;
+  } | null;
+  /** Calculated total duration in minutes (from reservation; for private shuttle total hours display) */
+  calculatedDurationMinutes?: number | null;
+  /** ISO 8601 timestamp when the booking was cancelled (from API) */
+  cancelledAt?: string | null;
+  /** ISO 8601 timestamp when the booking was last updated (used for "Cancelled at" when cancelledAt not available) */
+  updatedAt?: string | null;
+  /** Photo sessions / other products booked as add-ons to this shuttle booking */
+  dependentAddOnBookings?: DependentAddOnBookingDisplay[] | null;
+  /** Whether public self-serve change booking is allowed for this booking. */
+  canChange?: boolean | null;
+  /** Optional backend-provided reason when self-serve change is blocked. */
+  changeBlockedReason?: string | null;
+  /** Optional explicit cutoff datetime for self-serve changes. */
+  changeByDateTime?: string | null;
+  /** Optional summary of the most recent booking change. */
+  lastChangeSummary?: {
+    changedAt?: string | null;
+    amountPaid?: number | null;
+    currency?: string | null;
+    summary?: string | null;
+  } | null;
 }
 
 export interface BookingDetailsProps {
   booking: BookingData;
   currency: Currency;
-  /** When provided, show a refresh button in the balance-due section (e.g. after returning from Stripe) */
-  onRefetch?: () => void;
+  /** When true, shows "Booking Cancelled" title, same booking info, and Cancelled at; hides interactive sections. */
+  isCancelled?: boolean;
+  /** Force-hide the Change Booking section regardless of other eligibility checks. */
+  hideChangeBookingSection?: boolean;
+  /** Called when pickup location is updated (e.g. from dialog). Parent can refresh booking state. */
+  onBookingUpdate?: (booking: BookingData) => void;
+  /** After DAP checkout: show success banner until user leaves (parent sets from dap_success=1). */
+  showAddOnPurchaseHighlight?: boolean;
+  /**
+   * Where to show the dependent add-on upsell on manage-booking: post-checkout first load (`top`) or
+   * return visits (`bottom`). `null` hides it.
+   */
+  dependentAddOnUpsellPlacement?: 'top' | 'bottom' | null;
+  onRefetch?: () => void | Promise<void>;
+  /** One-shot success line from /manage-booking after paid change + URL clean (see manage-booking-post-checkout). */
+  manageFlashMessage?: string | null;
+  /** Full-screen light overlay while manage-booking parent refetches (e.g. after change dialog closes). */
+  bookingRefreshPending?: boolean;
+}
+
+function PaymentForm({
+  successUrl,
+  onClose,
+  payLabel,
+  amount,
+  currency,
+}: {
+  successUrl: string;
+  onClose: () => void;
+  payLabel: string;
+  amount: number;
+  currency: Currency;
+}) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!stripe || !elements) return;
+    setLoading(true);
+    setError(null);
+    const { error: submitError } = await elements.submit();
+    if (submitError) {
+      setError(submitError.message ?? 'Validation failed');
+      setLoading(false);
+      return;
+    }
+    // Store before redirect so success page can fire purchase event
+    storePendingPurchase(amount, currency);
+    const { error: confirmError } = await stripe.confirmPayment({
+      elements,
+      confirmParams: { return_url: successUrl },
+    });
+    if (confirmError) {
+      setError(confirmError.message ?? 'Payment failed');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={styles.paymentForm}>
+      <PaymentElement />
+      {error && (
+        <p className={styles.paymentFormError} role="alert">{error}</p>
+      )}
+      <div className={styles.paymentFormActions}>
+        <button type="button" onClick={onClose} className={styles.paymentFormCancel}>
+          Cancel
+        </button>
+        <button type="submit" disabled={!stripe || loading} className={styles.paymentFormSubmit}>
+          {loading ? 'Paying...' : `${payLabel} (${formatCurrencyAmount(amount, currency)})`}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function isPickupOrDropOffStep(step: { stepType?: string | null }): boolean {
+  return step.stepType === 'pickup' || step.stepType === 'drop_off';
+}
+
+/** Refund entries from payment.methodUsages (type REFUND or negative amount). */
+function getRefundEntries(methodUsages: PaymentMethodUsage[] | undefined): PaymentMethodUsage[] {
+  if (!methodUsages?.length) return [];
+  return methodUsages.filter(
+    (m) => m.type === 'REFUND' || (typeof m.amount === 'number' && m.amount < 0)
+  );
+}
+
+/** Format dateTime to show the date in MST (Mountain). Converts UTC to local day. */
+function formatBookingDate(dateTime: string | null | undefined): string {
+  if (!dateTime) return '';
+  try {
+    const date = new Date(dateTime);
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      timeZone: 'America/Denver',
+    });
+  } catch {
+    return dateTime;
+  }
+}
+
+/** Format date for charge date display (e.g. "March 15, 2026"). */
+function formatChargeDate(dateTime: string | null | undefined): string {
+  if (!dateTime) return '';
+  try {
+    const date = new Date(dateTime);
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      timeZone: 'America/Denver',
+    });
+  } catch {
+    return dateTime;
+  }
+}
+
+/** Format booking items to readable string (e.g. "2 adults, 1 child"). */
+function formatBookingItems(items: BookingItem[] | null | undefined): string {
+  if (!items || items.length === 0) return '';
+  
+  const categoryLabels: Record<string, string> = {
+    'ADULT': 'adult',
+    'CHILD': 'child',
+    'INFANT': 'infant',
+    'SENIOR': 'senior',
+    'STUDENT': 'student',
+  };
+  
+  const formatted = items
+    .filter(item => item.count > 0)
+    .map(item => {
+      const label = categoryLabels[item.category] || item.category.toLowerCase();
+      return `${item.count} ${label}${item.count !== 1 ? 's' : ''}`;
+    });
+  
+  if (formatted.length === 0) return '';
+  if (formatted.length === 1) return formatted[0];
+  if (formatted.length === 2) return `${formatted[0]} and ${formatted[1]}`;
+  return `${formatted.slice(0, -1).join(', ')}, and ${formatted[formatted.length - 1]}`;
+}
+
+/** Get pickup time from first itinerary step (pickup). May be single time, range (e.g. "8:00 AM - 9:00 AM"), or TBD. */
+function getPickupTimeFromItinerary(itinerary: ItineraryDisplayStep[] | null | undefined): string {
+  if (!itinerary?.length) return '—';
+  const pickupStep = itinerary.find(s => s.stepType === 'pickup');
+  const t = pickupStep?.time?.trim();
+  return t || 'TBD';
+}
+
+/** Get dropoff time from last itinerary step (drop_off). May be time or TBD. */
+function getDropoffTimeFromItinerary(itinerary: ItineraryDisplayStep[] | null | undefined): string {
+  if (!itinerary?.length) return '—';
+  const dropOffStep = [...itinerary].reverse().find(s => s.stepType === 'drop_off');
+  const t = dropOffStep?.time?.trim();
+  return t || 'TBD';
+}
+
+/** Format duration minutes to "X hours" or "X h Y min". */
+function formatDurationMinutes(minutes: number): string {
+  if (minutes < 60) return `${minutes} min`;
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  return m === 0 ? `${h} ${h === 1 ? 'hour' : 'hours'}` : `${h} h ${m} min`;
+}
+
+/** Format ISO date/time for display (e.g. "March 15, 2026, 2:30 PM"). */
+function formatDateTime(dateTime: string | null | undefined): string {
+  if (!dateTime) return '—';
+  try {
+    const date = new Date(dateTime);
+    return date.toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      timeZone: 'America/Denver',
+    });
+  } catch {
+    return dateTime;
+  }
+}
+
+/** Session calendar date for DAP add-on (from slot start, company TZ). */
+function formatAddOnSessionDate(iso: string | undefined, timeZone: string): string {
+  if (!iso?.trim()) return '—';
+  try {
+    return new Date(iso).toLocaleDateString('en-US', {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      timeZone,
+    });
+  } catch {
+    return iso;
+  }
+}
+
+/** Time-of-day only for DAP add-on (company TZ). */
+function formatAddOnSessionTime(iso: string | undefined, timeZone: string): string {
+  if (!iso?.trim()) return '—';
+  try {
+    return new Date(iso).toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      timeZone,
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function BookingAddOnsSection({
+  addOns,
+  showPurchaseHighlight,
+  timeZone,
+}: {
+  addOns: DependentAddOnBookingDisplay[];
+  showPurchaseHighlight: boolean;
+  timeZone: string;
+}) {
+  if (addOns.length === 0 && !showPurchaseHighlight) return null;
+  return (
+    <div id="booking-add-ons" className={styles.section}>
+      <h2 className={styles.sectionTitle}>
+        <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+        </svg>
+        Trip add-ons
+      </h2>
+      {showPurchaseHighlight && (
+        <div className={styles.addOnSuccessBanner} role="status">
+          <svg className={styles.addOnSuccessBannerIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+          <p className={styles.addOnSuccessBannerText}>
+            <strong>Payment received.</strong> Your add-on is linked to this booking. Details appear below once processing
+            finishes (usually within a few seconds).
+          </p>
+        </div>
+      )}
+      {addOns.length === 0 && showPurchaseHighlight ? (
+        <p className={styles.addOnCardMeta}>
+          If nothing appears here after a minute, refresh this page or contact us with your booking reference.
+        </p>
+      ) : null}
+      {addOns.map((addon) => (
+        <div key={addon.dependentAddOnBookingId} className={styles.addOnCard}>
+          <h3 className={styles.addOnCardTitle}>Photo session add-on</h3>
+          <p className={styles.addOnCardMeta}>
+            <strong>Date:</strong> {formatAddOnSessionDate(addon.slotStart, timeZone)}
+          </p>
+          <p className={styles.addOnCardMeta}>
+            <strong>Time:</strong>{' '}
+            {formatAddOnSessionTime(addon.slotStart, timeZone)} –{' '}
+            {formatAddOnSessionTime(addon.slotEnd, timeZone)}
+          </p>
+          {addon.status ? (
+            <p className={styles.addOnCardMeta}>
+              <strong>Status:</strong> {addon.status}
+            </p>
+          ) : null}
+          {addon.totalAmountPaid != null && addon.currency ? (
+            <p className={styles.addOnCardMeta}>
+              <strong>Total:</strong>{' '}
+              {formatCurrencyAmount(addon.totalAmountPaid, addon.currency.toUpperCase() as Currency)}
+            </p>
+          ) : addon.unitPrice != null && addon.currency ? (
+            <p className={styles.addOnCardMeta}>
+              <strong>Price:</strong>{' '}
+              {formatCurrencyAmount(addon.unitPrice * addon.quantity, addon.currency.toUpperCase() as Currency)}
+            </p>
+          ) : null}
+          {addon.resourceName ? (
+            <p className={styles.addOnCardMeta}>
+              <strong>Photographer:</strong> {addon.resourceName}
+            </p>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** Format "cancel by" date/time from booking start and hours before. */
+function formatCancelByDate(bookingDateTime: string | null | undefined, hoursBefore: number): string {
+  if (!bookingDateTime) return '';
+  try {
+    const start = new Date(bookingDateTime);
+    const cancelBy = new Date(start.getTime() - hoursBefore * 60 * 60 * 1000);
+    return cancelBy.toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  } catch {
+    return '';
+  }
+}
+
+export type ItineraryReviewStatus = 'DRAFT' | 'READY_FOR_REVIEW' | 'APPROVED' | 'CHANGES_REQUESTED';
+
+export function effectiveItineraryReviewStatus(draft: BookingData['draftItinerary']): ItineraryReviewStatus {
+  if (!draft) return 'DRAFT';
+  const rs = draft.reviewStatus;
+  if (rs === 'READY_FOR_REVIEW' || rs === 'APPROVED' || rs === 'CHANGES_REQUESTED') return rs;
+  if (draft.approvedAt?.trim()) return 'APPROVED';
+  return 'DRAFT';
+}
+
+function policyAnchorIsEarlierThanTrip(anchor: string | null | undefined, trip: string | null | undefined): boolean {
+  const a = anchor?.trim();
+  const t = trip?.trim();
+  if (!a || !t) return false;
+  const am = Date.parse(a);
+  const tm = Date.parse(t);
+  if (Number.isNaN(am) || Number.isNaN(tm)) return false;
+  return am < tm;
+}
+
+/**
+ * Mirrors backend policy-cutoff base selection:
+ * - prefer earliest of anchor/current while future
+ * - if anchor is already past but current trip is still future, use current
+ */
+function effectivePolicyDateTimeForCutoffs(booking: BookingData): string | null {
+  const anchor = booking.policyAnchorDateTime?.trim() || booking.dateTime?.trim();
+  const current = booking.dateTime?.trim();
+  if (!anchor || !current) return null;
+  const anchorMs = Date.parse(anchor);
+  const currentMs = Date.parse(current);
+  if (Number.isNaN(anchorMs) || Number.isNaN(currentMs)) return null;
+  const nowMs = Date.now();
+  const earlierMs = Math.min(anchorMs, currentMs);
+  if (earlierMs > nowMs) return earlierMs === anchorMs ? anchor : current;
+  if (anchorMs < nowMs && currentMs > nowMs) return current;
+  return null;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- currency kept for API; display uses booking.receipt.currency
-export function BookingDetails({ booking, currency, onRefetch }: BookingDetailsProps) {
-  const { t } = useTranslations();
-  const { receipt, payment, itineraryDisplay, cancellationPolicySnapshot, communicationPreference } = booking;
-  const [showBalanceModal, setShowBalanceModal] = useState(false);
-  const [balanceClientSecret, setBalanceClientSecret] = useState<string | null>(null);
-  const [balanceLoading, setBalanceLoading] = useState(false);
-  const [balanceError, setBalanceError] = useState<string | null>(null);
-  const [paymentModalLabel, setPaymentModalLabel] = useState<string>('Pay remaining balance');
-
-  const isDepositPaid = payment.status === 'DEPOSIT_PAID';
-  const isAwaitingPayment = payment.status === 'AWAITING_PAYMENT';
-  const balanceAmount = payment.plan?.balanceAmount ?? 0;
-  const depositAmount = payment.plan?.depositAmount ?? 0;
-  const hasBalanceDue = isDepositPaid && balanceAmount > 0;
-  const hasPaymentDue = isAwaitingPayment && (depositAmount > 0 || balanceAmount > 0);
-
-  const handlePayBalance = async () => {
+export default function BookingDetails({
+  booking,
+  currency,
+  isCancelled = false,
+  hideChangeBookingSection = false,
+  onBookingUpdate,
+  onRefetch,
+  showAddOnPurchaseHighlight = false,
+  dependentAddOnUpsellPlacement = null,
+  manageFlashMessage,
+  bookingRefreshPending = false,
+}: BookingDetailsProps) {
+  const companyTimeZone = useCompanyTimezone();
+  const { receipt, itineraryDisplay, cancellationPolicySnapshot, cancellationInfo } = booking;
+  const privateShuttleReviewStatus =
+    booking.productType === 'PRIVATE_SHUTTLE' ? effectiveItineraryReviewStatus(booking.draftItinerary) : null;
+  const dependentAddOns = booking.dependentAddOnBookings ?? [];
+  const [pickupDialogOpen, setPickupDialogOpen] = useState(false);
+  const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const [paymentClientSecret, setPaymentClientSecret] = useState<string | null>(null);
+  const [paymentModalLabel, setPaymentModalLabel] = useState('');
+  const [paymentLoading, setPaymentLoading] = useState<'deposit' | 'full' | 'balance' | null>(null);
+  const [paymentError, setPaymentError] = useState<string | null>(null);
+  const [contactCommPref, setContactCommPref] = useState<CommunicationMethod[]>(
+    () => {
+      const prefs = booking.communicationPreference?.filter((c): c is CommunicationMethod =>
+        ['EMAIL', 'WHATSAPP', 'SMS'].includes(c)
+      ) ?? [];
+      return prefs.length > 0 ? prefs : ['EMAIL'];
+    }
+  );
+  const [contactEmail, setContactEmail] = useState(booking.customer?.email ?? '');
+  const [contactPhone, setContactPhone] = useState(booking.customer?.phoneNumber ?? '');
+  const [contactWhatsApp, setContactWhatsApp] = useState(
+    booking.customer?.whatsAppNumber ?? booking.customer?.phoneNumber ?? ''
+  );
+  const [contactSaving, setContactSaving] = useState(false);
+  const [contactError, setContactError] = useState<string | null>(null);
+  const [cancelling, setCancelling] = useState(false);
+  const [cancelError, setCancelError] = useState<string | null>(null);
+  const [cancelConfirmOpen, setCancelConfirmOpen] = useState(false);
+  const [showCancelOverlay, setShowCancelOverlay] = useState(false);
+  const [changeFlowMessage, setChangeFlowMessage] = useState<string | null>(null);
+  const [changeFlowSuccessMessage, setChangeFlowSuccessMessage] = useState<string | null>(null);
+  const [changeDialogOpen, setChangeDialogOpen] = useState(false);
+  /** Set on successful change; banner is shown in onClose after refetch so it survives parent re-renders. */
+  const pendingChangeSuccessPreviewRef = useRef<ChangeFlowSelectionPreview | null | undefined>(undefined);
+  const didCancelThisSessionRef = useRef(false);
+  const [itineraryReviewSubmitting, setItineraryReviewSubmitting] = useState(false);
+  const [itineraryReviewError, setItineraryReviewError] = useState<string | null>(null);
+  const [requestChangesComment, setRequestChangesComment] = useState('');
+  const [itineraryRequestChangesOpen, setItineraryRequestChangesOpen] = useState(false);
+
+  const [isEmbeddedInIframe, setIsEmbeddedInIframe] = useState(false);
+  useLayoutEffect(() => {
+    if (typeof window === 'undefined') return;
+    setIsEmbeddedInIframe(window.parent !== window.self);
+  }, []);
+
+  useEffect(() => {
+    if (privateShuttleReviewStatus !== 'READY_FOR_REVIEW') {
+      setItineraryRequestChangesOpen(false);
+    }
+  }, [privateShuttleReviewStatus]);
+  const isGygBooking = Boolean(booking.gygBookingReference?.trim());
+  const isPrivateShuttleBooking = booking.productType === 'PRIVATE_SHUTTLE';
+  const effectivePolicyDateTime = effectivePolicyDateTimeForCutoffs(booking);
+  const changeDeadlineMs = (() => {
+    if (booking.changeByDateTime) {
+      const parsed = Date.parse(booking.changeByDateTime);
+      return Number.isNaN(parsed) ? null : parsed;
+    }
+    const hoursBefore = booking.cancellationPolicySnapshot?.changeWindowHoursBefore;
+    if (hoursBefore == null || !effectivePolicyDateTime) return null;
+    const bookingStartMs = Date.parse(effectivePolicyDateTime);
+    if (Number.isNaN(bookingStartMs)) return null;
+    return bookingStartMs - hoursBefore * 60 * 60 * 1000;
+  })();
+  const isPastChangeDeadline =
+    changeDeadlineMs != null ? Date.now() > changeDeadlineMs : false;
+  const shouldShowChangeBookingSection =
+    !hideChangeBookingSection &&
+    !isCancelled &&
+    !isGygBooking &&
+    !isPrivateShuttleBooking &&
+    !isPastChangeDeadline;
+
+  useEffect(() => {
+    if (isCancelled && didCancelThisSessionRef.current) {
+      didCancelThisSessionRef.current = false;
+      setShowCancelOverlay(false);
+    }
+  }, [isCancelled]);
+
+  useEffect(() => {
+    const msg = manageFlashMessage?.trim();
+    if (!msg) return;
+    setChangeFlowSuccessMessage((prev) => prev || msg);
+    if (typeof window !== 'undefined') {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, [manageFlashMessage]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const { documentElement, body } = document;
+    const classList = [documentElement.classList, body.classList];
+    if (showCancelOverlay || bookingRefreshPending) {
+      classList.forEach((c) => c.add(CANCEL_OVERLAY_SCROLL_LOCK_CLASS));
+    } else {
+      classList.forEach((c) => c.remove(CANCEL_OVERLAY_SCROLL_LOCK_CLASS));
+    }
+    return () => {
+      classList.forEach((c) => c.remove(CANCEL_OVERLAY_SCROLL_LOCK_CLASS));
+    };
+  }, [showCancelOverlay, bookingRefreshPending]);
+
+  const openPickupDialog = useCallback(() => setPickupDialogOpen(true), []);
+
+  const closePickupDialog = useCallback(() => setPickupDialogOpen(false), []);
+
+  const closePaymentModal = useCallback(() => {
+    setShowPaymentModal(false);
+    setPaymentClientSecret(null);
+    setPaymentError(null);
+    setPaymentModalLabel('');
+  }, []);
+
+  const handlePayDeposit = useCallback(async () => {
     const ref = formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference;
     const ln = booking.customer?.lastName?.trim();
     if (!ln) {
-      setBalanceError('Last name is required to pay balance');
+      setPaymentError('Last name is required');
       return;
     }
-    setBalanceLoading(true);
-    setBalanceError(null);
+    setPaymentLoading('deposit');
+    setPaymentError(null);
     try {
-      const res = await createBalancePaymentIntent(ref, ln);
-      setBalanceClientSecret(res.clientSecret);
-      setPaymentModalLabel('Pay remaining balance');
-      setShowBalanceModal(true);
+      const res = await createManagePaymentIntent(ref, ln, 'deposit');
+      setPaymentClientSecret(res.clientSecret);
+      setPaymentModalLabel('Pay deposit');
+      setShowPaymentModal(true);
     } catch (err) {
-      setBalanceError(err instanceof Error ? err.message : 'Failed to start payment');
+      setPaymentError(err instanceof Error ? err.message : 'Failed to start payment');
     } finally {
-      setBalanceLoading(false);
+      setPaymentLoading(null);
     }
-  };
+  }, [booking.bookingReference, booking.customer?.lastName]);
 
-  const handlePayDeposit = async () => {
+  const handlePayFull = useCallback(async () => {
     const ref = formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference;
     const ln = booking.customer?.lastName?.trim();
     if (!ln) {
-      setBalanceError('Last name is required');
+      setPaymentError('Last name is required');
       return;
     }
-    setBalanceLoading(true);
-    setBalanceError(null);
+    setPaymentLoading('full');
+    setPaymentError(null);
     try {
-      const res = await createManagePaymentIntent(ref, ln, 'deposit');
-      setBalanceClientSecret(res.clientSecret);
-      setPaymentModalLabel('Pay deposit');
-      setShowBalanceModal(true);
+      const res = await createManagePaymentIntent(ref, ln, 'full');
+      setPaymentClientSecret(res.clientSecret);
+      setPaymentModalLabel('Pay full balance');
+      setShowPaymentModal(true);
     } catch (err) {
-      setBalanceError(err instanceof Error ? err.message : 'Failed to start payment');
+      setPaymentError(err instanceof Error ? err.message : 'Failed to start payment');
     } finally {
-      setBalanceLoading(false);
+      setPaymentLoading(null);
     }
-  };
+  }, [booking.bookingReference, booking.customer?.lastName]);
 
-  const handlePayFull = async () => {
+  const handlePayBalance = useCallback(async () => {
     const ref = formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference;
     const ln = booking.customer?.lastName?.trim();
     if (!ln) {
-      setBalanceError('Last name is required');
+      setPaymentError('Last name is required');
       return;
     }
-    setBalanceLoading(true);
-    setBalanceError(null);
+    setPaymentLoading('balance');
+    setPaymentError(null);
     try {
-      const res = await createManagePaymentIntent(ref, ln, 'full');
-      setBalanceClientSecret(res.clientSecret);
-      setPaymentModalLabel('Pay full balance');
-      setShowBalanceModal(true);
+      const res = await createBalancePaymentIntent(ref, ln);
+      setPaymentClientSecret(res.clientSecret);
+      setPaymentModalLabel('Pay balance');
+      setShowPaymentModal(true);
     } catch (err) {
-      setBalanceError(err instanceof Error ? err.message : 'Failed to start payment');
+      setPaymentError(err instanceof Error ? err.message : 'Failed to start payment');
+    } finally {
+      setPaymentLoading(null);
+    }
+  }, [booking.bookingReference, booking.customer?.lastName]);
+
+  // Sync contact state when booking changes (e.g. after save)
+  React.useEffect(() => {
+    const prefs = booking.communicationPreference?.filter((c): c is CommunicationMethod =>
+      ['EMAIL', 'WHATSAPP', 'SMS'].includes(c)
+    ) ?? [];
+    setContactCommPref(prefs.length > 0 ? prefs : ['EMAIL']);
+    setContactEmail(booking.customer?.email ?? '');
+    setContactPhone(booking.customer?.phoneNumber ?? '');
+    setContactWhatsApp(booking.customer?.whatsAppNumber ?? booking.customer?.phoneNumber ?? '');
+  }, [booking]);
+
+  const toggleCommPref = useCallback((method: CommunicationMethod) => {
+    setContactCommPref((prev) =>
+      prev.includes(method) ? prev.filter((m) => m !== method) : [...prev, method]
+    );
+  }, []);
+
+  const handleSaveContact = useCallback(async () => {
+    const lastName = booking.customer?.lastName ?? '';
+    if (!lastName.trim()) {
+      setContactError('Last name is required to update contact details');
+      return;
+    }
+    const emailTrimmed = contactEmail.trim();
+    if (!emailTrimmed) {
+      setContactError('Email is required');
+      return;
+    }
+    if (contactCommPref.length === 0) {
+      setContactError('Please select at least one preferred communication method');
+      return;
+    }
+    if (contactCommPref.includes('SMS') && !contactPhone.trim()) {
+      setContactError('Phone number is required when SMS is selected');
+      return;
+    }
+    if (contactCommPref.includes('WHATSAPP') && !contactWhatsApp.trim()) {
+      setContactError('WhatsApp number is required when WhatsApp is selected');
+      return;
+    }
+    setContactSaving(true);
+    setContactError(null);
+    try {
+      const payload: UpdateContactPayload = {
+        communicationPreference: contactCommPref.length > 0 ? contactCommPref : undefined,
+        email: emailTrimmed,
+        phoneNumber: contactPhone.trim() || null,
+        whatsAppNumber: contactWhatsApp.trim() || null,
+      };
+      const updated = await updateContactDetails(booking.bookingReference, lastName, payload);
+      const updatedBooking = updated as BookingData;
+      // Sync local state from API response immediately so UI reflects saved values
+      if (updatedBooking.customer) {
+        const c = updatedBooking.customer as { email?: string; phoneNumber?: string; phone_number?: string; whatsAppNumber?: string; whats_app_number?: string };
+        setContactEmail(c.email ?? '');
+        setContactPhone(c.phoneNumber ?? c.phone_number ?? '');
+        setContactWhatsApp(c.whatsAppNumber ?? c.whats_app_number ?? c.phoneNumber ?? c.phone_number ?? '');
+      }
+      if (updatedBooking.communicationPreference?.length) {
+        const prefs = updatedBooking.communicationPreference.filter((c): c is CommunicationMethod => ['EMAIL', 'WHATSAPP', 'SMS'].includes(c));
+        setContactCommPref(prefs.length > 0 ? prefs : ['EMAIL']);
+      }
+      onBookingUpdate?.(updatedBooking);
+    } catch (e) {
+      setContactError(e instanceof Error ? e.message : 'Failed to update contact details');
+    } finally {
+      setContactSaving(false);
+    }
+  }, [booking, contactCommPref, contactEmail, contactPhone, contactWhatsApp, onBookingUpdate]);
+
+  const handleApproveItinerary = useCallback(async () => {
+    const lastName = booking.customer?.lastName?.trim();
+    if (!lastName) {
+      setItineraryReviewError('Last name is required. Open this page from your manage-booking link.');
+      return;
+    }
+    setItineraryReviewSubmitting(true);
+    setItineraryReviewError(null);
+    try {
+      const data = await respondToItineraryReview(booking.bookingReference, lastName, 'approve');
+      onBookingUpdate?.(data as BookingData);
+      onRefetch?.();
+    } catch (e) {
+      setItineraryReviewError(e instanceof Error ? e.message : 'Request failed');
     } finally {
-      setBalanceLoading(false);
+      setItineraryReviewSubmitting(false);
+    }
+  }, [booking.bookingReference, booking.customer?.lastName, onBookingUpdate, onRefetch]);
+
+  const handleRequestItineraryChanges = useCallback(async () => {
+    const c = requestChangesComment.trim();
+    if (!c) {
+      setItineraryReviewError('Please describe what you would like changed.');
+      return;
+    }
+    const lastName = booking.customer?.lastName?.trim();
+    if (!lastName) {
+      setItineraryReviewError('Last name is required. Open this page from your manage-booking link.');
+      return;
+    }
+    setItineraryReviewSubmitting(true);
+    setItineraryReviewError(null);
+    try {
+      const data = await respondToItineraryReview(booking.bookingReference, lastName, 'request_changes', c);
+      onBookingUpdate?.(data as BookingData);
+      setRequestChangesComment('');
+      onRefetch?.();
+    } catch (e) {
+      setItineraryReviewError(e instanceof Error ? e.message : 'Request failed');
+    } finally {
+      setItineraryReviewSubmitting(false);
+    }
+  }, [booking.bookingReference, booking.customer?.lastName, onBookingUpdate, onRefetch, requestChangesComment]);
+
+  const handleCancelBooking = useCallback(async () => {
+    const ref = formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference;
+    const ln = booking.customer?.lastName?.trim();
+    if (!ln) {
+      setCancelError('Last name is required');
+      return;
     }
+    setCancelError(null);
+    if (typeof window !== 'undefined') window.scrollTo(0, 0);
+    setCancelConfirmOpen(false);
+    setShowCancelOverlay(true);
+    setCancelling(true);
+    try {
+      await cancelBookingPublic(ref, ln);
+      didCancelThisSessionRef.current = true;
+      await onRefetch?.();
+    } catch (err) {
+      setShowCancelOverlay(false);
+      setCancelError(err instanceof Error ? err.message : 'Failed to cancel booking');
+    } finally {
+      setCancelling(false);
+    }
+  }, [booking.bookingReference, booking.customer?.lastName, onRefetch]);
+
+  const openCancelConfirmDialog = useCallback(() => {
+    setCancelError(null);
+    setCancelConfirmOpen(true);
+  }, []);
+
+  const closeCancelConfirmDialog = useCallback(() => {
+    setCancelConfirmOpen(false);
+    setCancelError(null);
+  }, []);
+
+  const headerIcon = isCancelled ? (
+    <div className={styles.cancelledIcon}>
+      <svg className={styles.cancelledSvg} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </div>
+  ) : (
+    <div className={styles.checkmarkIcon}>
+      <svg className={styles.checkmarkSvg} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+      </svg>
+    </div>
+  );
+
+  const managePrint = defaultStrings.manageBooking as {
+    printSummary: string;
+    printSummaryAria: string;
   };
+  const printSummaryControl = (
+    <div className={styles.printSummaryWrap}>
+      <button
+        type="button"
+        className={styles.printSummaryButton}
+        onClick={() => {
+          if (typeof window !== 'undefined') window.print();
+        }}
+        aria-label={managePrint.printSummaryAria}
+      >
+        <svg
+          className={styles.printSummaryIcon}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <polyline points="6 9 6 2 18 2 18 9" />
+          <path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2" />
+          <rect x="6" y="14" width="12" height="8" />
+        </svg>
+        {managePrint.printSummary}
+      </button>
+    </div>
+  );
+
+  const bookingDetailsBlock = (
+    <div className={styles.bookingDetails}>
+          {booking.customer?.firstName && booking.customer?.lastName && (
+            <div className={styles.bookingDetailRow}>
+              <span className={styles.bookingDetailLabel}>Name:</span>
+              <span className={styles.bookingDetailValue}>{booking.customer.firstName} {booking.customer.lastName}</span>
+            </div>
+          )}
+          {booking.dateTime && (
+            <div className={styles.bookingDetailRow}>
+              <span className={styles.bookingDetailLabel}>Date:</span>
+              <span className={styles.bookingDetailValue}>{formatBookingDate(booking.dateTime)}</span>
+            </div>
+          )}
+          {booking.productName && (
+            <div className={styles.bookingDetailRow}>
+              <span className={styles.bookingDetailLabel}>Tour:</span>
+              <span className={styles.bookingDetailValue}>{booking.productName}</span>
+            </div>
+          )}
+          {(() => {
+            const isPrivateShuttle = booking.productType === 'PRIVATE_SHUTTLE';
+            const passengerCount = booking.privateShuttleDetails?.passengerCount;
+            const requestedPassengerCount = booking.privateShuttleDetails?.requestedPassengerCount;
+            const displayCount = requestedPassengerCount ?? passengerCount;
+            const isBeingReviewed = booking.privateShuttleDetails?.passengerCountBeingReviewed === true;
+            if (isPrivateShuttle && displayCount != null) {
+              return (
+                <div className={styles.bookingDetailRow}>
+                  <span className={styles.bookingDetailLabel}>Guests:</span>
+                  <span className={styles.bookingDetailValue}>
+                    {displayCount} {displayCount === 1 ? 'passenger' : 'passengers'}
+                    {isBeingReviewed && (
+                      <span className="text-amber-600 text-sm ml-1">(being reviewed)</span>
+                    )}
+                  </span>
+                </div>
+              );
+            }
+            if (booking.bookingItems && booking.bookingItems.length > 0) {
+              return (
+                <div className={styles.bookingDetailRow}>
+                  <span className={styles.bookingDetailLabel}>Guests:</span>
+                  <span className={styles.bookingDetailValue}>{formatBookingItems(booking.bookingItems)}</span>
+                </div>
+              );
+            }
+            return null;
+          })()}
+          {booking.itineraryDisplay && booking.itineraryDisplay.length > 0 && (() => {
+            const isPrivateShuttleForTooltip = booking.productType === 'PRIVATE_SHUTTLE';
+            const hasPickupStep = booking.itineraryDisplay!.some((s) => s.stepType === 'pickup');
+            const hasDropoffStep = booking.itineraryDisplay!.some((s) => s.stepType === 'drop_off');
+            const showPickupTooltip = !isCancelled && !isPrivateShuttleForTooltip && !booking.pickupLocationId && hasPickupStep;
+            const showDropoffTooltip = !isCancelled && !isPrivateShuttleForTooltip && !booking.pickupLocationId && hasDropoffStep;
+            const tooltipContent = (
+              <>
+                Approximate time - will be finalized when you{' '}
+                <a href="#pickup-details" className={styles.timeTooltipLink}>select your pickup location</a>.
+              </>
+            );
+            return (
+              <>
+                <div className={styles.bookingDetailRow}>
+                  <span className={styles.bookingDetailLabel}>Pickup time:</span>
+                  <span className={styles.bookingDetailValue}>
+                    {getPickupTimeFromItinerary(booking.itineraryDisplay)}
+                    {showPickupTooltip && (
+                      <span className={styles.timeTooltipWrap}>
+                        <span className={styles.timeTooltipIcon} aria-label="Approximate time; will be finalized when you select a pickup location in the Pickup Details section below">
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                            <path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                        </span>
+                        <span className={styles.timeTooltip} role="tooltip">{tooltipContent}</span>
+                      </span>
+                    )}
+                  </span>
+                </div>
+                <div className={styles.bookingDetailRow}>
+                  <span className={styles.bookingDetailLabel}>Dropoff time:</span>
+                  <span className={styles.bookingDetailValue}>
+                    {getDropoffTimeFromItinerary(booking.itineraryDisplay)}
+                    {showDropoffTooltip && (
+                      <span className={styles.timeTooltipWrap}>
+                        <span className={styles.timeTooltipIcon} aria-label="Approximate time; will be finalized when you select a pickup location in the Pickup Details section below">
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                            <path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                        </span>
+                        <span className={styles.timeTooltip} role="tooltip">{tooltipContent}</span>
+                      </span>
+                    )}
+                  </span>
+                </div>
+                {booking.productType === 'PRIVATE_SHUTTLE' && (() => {
+                  const duration = booking.calculatedDurationMinutes ?? booking.privateShuttleDetails?.calculatedDurationMinutes;
+                  if (duration == null || duration <= 0) return null;
+                  return (
+                    <div className={styles.bookingDetailRow}>
+                      <span className={styles.bookingDetailLabel}>Total hours:</span>
+                      <span className={styles.bookingDetailValue}>
+                        {formatDurationMinutes(duration)}
+                      </span>
+                    </div>
+                  );
+                })()}
+              </>
+            );
+          })()}
+          {isCancelled && (
+            <div className={styles.bookingDetailRow}>
+              <span className={styles.bookingDetailLabel}>Cancelled at:</span>
+              <span className={styles.bookingDetailValue}>{formatDateTime(booking.cancelledAt ?? booking.updatedAt)}</span>
+            </div>
+          )}
+        </div>
+  );
+
+  if (isCancelled) {
+    const paymentStatus = (booking.payment?.status ?? '').toUpperCase();
+    const hasRemainingBalance = (booking.payment?.plan?.balanceAmount ?? 0) > 0;
+    const treatedAsFullyPaid = paymentStatus === 'FULLY_PAID' || (paymentStatus === 'DEPOSIT_PAID' && !hasRemainingBalance);
+    const statusLabel = paymentStatus === 'REFUNDED' ? 'Refunded' : treatedAsFullyPaid ? 'Fully paid' : 'Cancelled';
+    const statusPillClass = paymentStatus === 'REFUNDED' || treatedAsFullyPaid ? styles.paymentStatusPillPaid : styles.paymentStatusPillAwaiting;
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.section}>
+          <div className={styles.headerContent}>
+            {headerIcon}
+            <div>
+              <h1 className={styles.title}>Booking Cancelled</h1>
+              <p className={styles.reference}>Via Via booking reference: {formatBookingRefForDisplay(booking.bookingReference)}</p>
+              {!isEmbeddedInIframe ? printSummaryControl : null}
+            </div>
+          </div>
+          {bookingDetailsBlock}
+        </div>
+
+        <BookingAddOnsSection
+          addOns={dependentAddOns}
+          showPurchaseHighlight={showAddOnPurchaseHighlight}
+          timeZone={companyTimeZone}
+        />
+
+        {/* Payment Summary (receipt) for cancelled bookings */}
+        <div className={styles.section}>
+          <div className={styles.paymentSummaryHeader}>
+            <h2 className={styles.sectionTitle}>
+              <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              Payment Summary
+            </h2>
+            <span className={`${styles.paymentStatusPill} ${statusPillClass}`}>{statusLabel}</span>
+          </div>
+          <div className={styles.priceSummary}>
+            {receipt.lineItems.map((item, index) => (
+              <div key={index} className={styles.priceLine}>
+                <span className={styles.priceLabel}>
+                  {item.label}
+                  {item.quantity && item.quantity > 1 && !/\sx\s*\d+$/i.test(item.label) && ` × ${item.quantity}`}
+                </span>
+                <span className={styles.priceAmount}>
+                  {formatCurrencyAmount(item.amount, receipt.currency as Currency)}
+                </span>
+              </div>
+            ))}
+            {receipt.taxAmount > 0 && (() => {
+              const lineItemsIncludeTax = receipt.lineItems.some((item) => {
+                const lbl = (item.label ?? '').toLowerCase();
+                const type = (item.type ?? '').toLowerCase();
+                return /\b(gst|tax|hst|pst|vat)\b/.test(lbl) || /\b(gst|tax|hst|pst|vat)\b/.test(type);
+              });
+              if (lineItemsIncludeTax) return null;
+              return (
+                <>
+                  <div className={styles.priceLine}>
+                    <span className={styles.priceLabel}>Subtotal</span>
+                    <span className={styles.priceAmount}>
+                      {formatCurrencyAmount(receipt.subtotalBeforeTax, receipt.currency as Currency)}
+                    </span>
+                  </div>
+                  <div className={styles.priceLine}>
+                    <span className={styles.priceLabel}>Tax</span>
+                    <span className={styles.priceAmount}>
+                      {formatCurrencyAmount(receipt.taxAmount, receipt.currency as Currency)}
+                    </span>
+                  </div>
+                </>
+              );
+            })()}
+            <div className={`${styles.priceLine} ${styles.totalLine}`}>
+              <span className={styles.totalLabel}>Total</span>
+              <span className={styles.totalAmount}>
+                {formatCurrencyAmount(receipt.totalAmount, receipt.currency as Currency)}
+              </span>
+            </div>
+            {booking.payment?.status === 'DEPOSIT_PAID' && (booking.payment?.plan?.balanceAmount ?? 0) > 0 && (booking.payment?.plan?.depositAmount ?? 0) > 0 && (
+              <div className={styles.priceLine}>
+                <span className={styles.priceLabel}>Deposit paid</span>
+                <span className={styles.priceAmount}>
+                  -{formatCurrencyAmount(booking.payment!.plan!.depositAmount!, receipt.currency as Currency)}
+                </span>
+              </div>
+            )}
+            {getRefundEntries(booking.payment?.methodUsages).map((entry, index) => (
+              <div key={index} className={styles.priceLine}>
+                <span className={styles.priceLabel}>
+                  {entry.displayLabel?.trim() || 'Refund'}
+                  {entry.paidAt && ` (${formatDateTime(entry.paidAt)})`}
+                </span>
+                <span className={styles.priceAmount}>
+                  {formatCurrencyAmount(entry.amount, (entry.currency || receipt.currency) as Currency)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+        {bookingRefreshPending && !showCancelOverlay && (
+          <div
+            className={styles.bookingRefreshOverlay}
+            role="status"
+            aria-live="polite"
+            aria-busy="true"
+            aria-label="Updating booking"
+          >
+            <div className={styles.cancelOverlaySpinner} aria-hidden />
+            <p className={styles.cancelOverlayText}>Updating your booking…</p>
+          </div>
+        )}
+      </div>
+    );
+  }
 
   return (
-    <div className="max-w-4xl mx-auto px-4 py-8 space-y-8">
+    <div className={styles.container}>
+      {changeFlowSuccessMessage && (
+        <div className={styles.changeBookingSuccess} role="status" aria-live="polite">
+          {changeFlowSuccessMessage}
+        </div>
+      )}
       {/* Header */}
-      <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
-        <div className="flex items-center gap-4 mb-4">
-          <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center">
-            <svg className="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-            </svg>
-          </div>
+      <div className={styles.section}>
+        <div className={styles.headerContent}>
+          {headerIcon}
           <div>
-            <h1 className="text-2xl sm:text-3xl font-bold text-stone-900">Booking Confirmed</h1>
-            <p className="text-stone-600">Reference: {formatBookingRefForDisplay(booking.bookingReference)}</p>
+            <h1 className={styles.title}>Booking Confirmed</h1>
+            <p className={styles.reference}>Via Via booking reference: {formatBookingRefForDisplay(booking.bookingReference)}</p>
+            {!isEmbeddedInIframe ? printSummaryControl : null}
           </div>
         </div>
-        {booking.customer && (
-          <p className="text-stone-700">
-            Thank you{booking.customer.firstName ? `, ${booking.customer.firstName}` : ''}! 
-            A confirmation has been sent to {booking.customer.email || 'your email'}.
-          </p>
-        )}
+        {bookingDetailsBlock}
       </div>
 
+      {dependentAddOnUpsellPlacement === 'top' ? (
+        <PostBookingDependentAddOnUpsell booking={booking} enabled />
+      ) : null}
+
+      <BookingAddOnsSection
+        addOns={dependentAddOns}
+        showPurchaseHighlight={showAddOnPurchaseHighlight}
+        timeZone={companyTimeZone}
+      />
+
+      {/* GetYourGuide - separate section when booked via GYG */}
+      {booking.gygBookingReference?.trim() && (
+        <div id="getyourguide" className={`${styles.section} ${styles.gygSection}`}>
+          <h2 className={styles.sectionTitle}>
+            <GetYourGuideIcon className={styles.gygSectionIcon} width={20} height={20} aria-hidden />
+            You Booked via GetYourGuide
+          </h2>
+          <div className={styles.gygSectionContent}>
+            <p className={styles.gygRefLine}>
+              <strong>GetYourGuide booking reference:</strong> {booking.gygBookingReference.trim()}
+            </p>
+            <p className={styles.gygNote}>
+              <strong>NOTE:</strong> Your booking was made via a <strong>third party booking platform</strong>. Any changes to your booking must be made{' '}
+              <a href="https://www.getyourguide.com/contact#booking-management" target="_blank" rel="noopener noreferrer" className={styles.gygNoteLink}>here</a>
+              {' '}using the <strong>GetYourGuide booking reference</strong> code and <strong>PIN</strong> sent to your email by GetYourGuide.
+            </p>
+            <a
+              href="https://www.getyourguide.com/contact#booking-management"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.gygManageLink}
+            >
+              <svg className={styles.gygManageIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+              </svg>
+              Manage Your Booking With GetYourGuide
+            </a>
+          </div>
+        </div>
+      )}
+
       {/* Your Itinerary */}
       {itineraryDisplay && itineraryDisplay.length > 0 && (
-        <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
-          <h2 className="text-xl font-bold text-stone-900 mb-4 flex items-center gap-2">
-            <svg className="w-5 h-5 text-stone-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+        <div className={styles.section}>
+          <div className={styles.itinerarySectionHeader}>
+            <h2 className={styles.sectionTitle}>
+              <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Your Itinerary
+            </h2>
+            {privateShuttleReviewStatus && privateShuttleReviewStatus !== 'APPROVED' && (
+              <span className={styles.draftPill}>
+                {privateShuttleReviewStatus === 'READY_FOR_REVIEW'
+                  ? 'REVIEW'
+                  : privateShuttleReviewStatus === 'CHANGES_REQUESTED'
+                    ? 'UPDATING'
+                    : 'DRAFT'}
+              </span>
+            )}
+            {privateShuttleReviewStatus === 'APPROVED' && (
+              <span className={`${styles.paymentStatusPill} ${styles.paymentStatusPillPaid}`}>
+                Confirmed
+              </span>
+            )}
+          </div>
+          {privateShuttleReviewStatus === 'DRAFT' && (
+            <div className={styles.draftItineraryBanner}>
+              <svg className={styles.draftItineraryIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
+              </svg>
+              <p className={styles.draftItineraryText}>
+                <b>Your itinerary is in draft. You can still get a full refund on your deposit until you approve the final itinerary.</b><br />
+                Our team is working on your custom itinerary details. You will be notified when it is ready for your approval within 72 hours.
+              </p>
+            </div>
+          )}
+          {privateShuttleReviewStatus === 'CHANGES_REQUESTED' && (
+            <div className={styles.draftItineraryBanner}>
+              <p className={styles.draftItineraryText}>
+                <b>We received your feedback.</b> Our team will update your itinerary and send an updated version for your approval.
+              </p>
+            </div>
+          )}
+          <div className={styles.itineraryList}>
+            {itineraryDisplay.flatMap((step, index) => {
+              const isUncertainStep = !booking.pickupLocationId && isPickupOrDropOffStep(step);
+              const showPickupLink = !booking.pickupLocationId && step.place?.trim() === 'your_pickup_location';
+              const placeDisplay = step.place?.trim() === 'your_pickup_location' ? 'your pickup location' : step.place?.trim() === 'the_destination' ? 'the destination' : step.place?.trim() ?? '';
+              const isDraftStep = step.stepType === 'draft' || (booking.productType === 'PRIVATE_SHUTTLE' && (!step.time?.trim() || step.time?.trim().toUpperCase() === 'TBD'));
+
+              // Draft destinations: 1 line per destination with TBD in the time column (same layout as other steps)
+              const isExpandableDraft = (step.stepType === 'draft' || (step.stepType === 'arrive' && step.time?.trim().toUpperCase() === 'TBD')) && placeDisplay;
+              if (isExpandableDraft) {
+                const destinations = placeDisplay.split(',').map((s) => s.trim()).filter(Boolean);
+                return destinations.map((dest, di) => (
+                  <div key={`${index}-${di}`} className={styles.itineraryItem}>
+                    <span className={styles.itineraryLabel}>{dest}</span>
+                    <span className={styles.itineraryTime}><span className={styles.tbdText}>TBD</span></span>
+                  </div>
+                ));
+              }
+
+              const locationLabel = getItineraryStepLabel(step);
+              const labelContent = showPickupLink ? (
+                step.stepType === 'pickup' ? (
+                  <>Pickup at <a href="#pickup-details" className={styles.pickupLink}>your pickup location</a></>
+                ) : step.stepType === 'drop_off' ? (
+                  <>Drop off at <a href="#pickup-details" className={styles.pickupLink}>your pickup location</a></>
+                ) : (
+                  locationLabel
+                )
+              ) : (
+                locationLabel
+              );
+              const timeContent = isUncertainStep && !step.time ? (
+                <>
+                  <span className={styles.tbdIcon} title="Time not set - select your pickup location in the Pickup Details section below for an estimate.">
+                    <svg className={styles.timeIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </span>
+                  <span className={styles.tbdText}>TBD</span>
+                </>
+              ) : step.time ? (
+                <span>{step.time}</span>
+              ) : isDraftStep ? (
+                <span className={styles.tbdText}>TBD</span>
+              ) : null;
+              return [
+                <div
+                  key={index}
+                  className={`${styles.itineraryItem} ${isDraftStep ? styles.itineraryItemDraft : ''}`}
+                >
+                  {isDraftStep ? (
+                    <>
+                      <span className={styles.itineraryLabel}>{labelContent}</span>
+                      <div className={styles.itineraryTimeBlock}>{timeContent}</div>
+                    </>
+                  ) : (
+                    <>
+                      <span className={styles.itineraryLabel}>{labelContent}</span>
+                      <span className={styles.itineraryTime}>{timeContent}</span>
+                    </>
+                  )}
+                </div>,
+              ];
+            })}
+          </div>
+          {privateShuttleReviewStatus === 'READY_FOR_REVIEW' && (
+            <div
+              className={`${styles.draftItineraryBanner} ${styles.draftItineraryBannerBelowList} ${styles.draftItineraryBannerActionRequired}`}
+            >
+              <div className={styles.draftItineraryReviewFullWidth}>
+                <h3 className={styles.draftItineraryActionTitle}>
+                  <svg
+                    className={styles.icon}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                    />
+                  </svg>
+                  Action Required
+                </h3>
+                <div className={styles.draftItineraryText}>
+                <b>Your proposed itinerary is ready.</b> Please review the times and stops above. Approve if it looks good, or request changes and tell us what you would like different.
+                {itineraryReviewError ? (
+                  <p className={styles.paymentFormError} role="alert" style={{ marginTop: '0.75rem' }}>
+                    {itineraryReviewError}
+                  </p>
+                ) : null}
+                <div className={styles.draftItineraryReviewActions}>
+                  <Button
+                    type="button"
+                    variant="primary"
+                    hoverColor={ButtonHoverColor.Turquoise}
+                    disabled={itineraryReviewSubmitting}
+                    className={styles.pickupPrimaryButton}
+                    onClick={handleApproveItinerary}
+                  >
+                    {itineraryReviewSubmitting ? 'Saving…' : 'Approve itinerary'}
+                  </Button>
+                  <button
+                    type="button"
+                    className={`${styles.pickupChangeLink} ${styles.draftItineraryRequestChangesButton}`}
+                    onClick={() => {
+                      setItineraryRequestChangesOpen((o) => !o);
+                      setItineraryReviewError(null);
+                    }}
+                    disabled={itineraryReviewSubmitting}
+                    aria-expanded={itineraryRequestChangesOpen}
+                  >
+                    <svg
+                      className={styles.pickupEditIcon}
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden
+                    >
+                      <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+                      <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                    {itineraryRequestChangesOpen ? 'Hide request form' : 'Request changes'}
+                  </button>
+                </div>
+                {itineraryRequestChangesOpen ? (
+                  <div className={styles.draftItineraryFeedbackFields}>
+                    <label className={styles.draftItineraryFeedbackLabel} htmlFor="itinerary-change-feedback">
+                      Your itinerary request
+                    </label>
+                    <textarea
+                      id="itinerary-change-feedback"
+                      value={requestChangesComment}
+                      onChange={(e) => setRequestChangesComment(e.target.value)}
+                      rows={4}
+                      className={styles.draftItineraryTextarea}
+                      placeholder="Describe what you would like different…"
+                    />
+                    <div className={styles.draftItineraryFeedbackSubmitRow}>
+                      <Button
+                        type="button"
+                        variant="primary"
+                        hoverColor={ButtonHoverColor.Turquoise}
+                        disabled={itineraryReviewSubmitting}
+                        className={styles.payOwingButton}
+                        onClick={handleRequestItineraryChanges}
+                      >
+                        {itineraryReviewSubmitting ? 'Sending…' : 'Send request to change itinerary'}
+                      </Button>
+                    </div>
+                  </div>
+                ) : null}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Pickup Details - always shown when itinerary has pickup/dropoff steps */}
+      {itineraryDisplay?.some(isPickupOrDropOffStep) && (
+        <div id="pickup-details" className={`${styles.section} ${styles.pickupDetailsSection}`}>
+          <h2 className={styles.sectionTitle}>
+            <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
             </svg>
-            Your Itinerary
+            Pickup Details
           </h2>
-          <div className="space-y-3">
-            {itineraryDisplay.map((step, index) => {
-              const isUncertainStep = !booking.pickupLocationId && isPickupOrDropOffStep(step);
-              const label = getStepLabel(step, t);
+          {(() => {
+            const isGygBooking = Boolean(booking.gygBookingReference?.trim());
+            const hasPickupSelected = Boolean(booking.pickupLocationId || booking.travelerHotel);
+            if (hasPickupSelected) {
+              const pickupStep = booking.itineraryDisplay?.find((s) => s.stepType === 'pickup');
+              const pickupDisplayName =
+                booking.travelerHotel ||
+                pickupStep?.place ||
+                pickupStep?.label ||
+                (booking.pickupLocationId ? `Location ID: ${booking.pickupLocationId}` : null);
+              const pickupMapsQuery = booking.travelerHotel || pickupStep?.place || pickupStep?.label || String(booking.pickupLocationId ?? '');
               return (
-                <div key={index} className="flex justify-between items-start gap-4 border-l-2 border-stone-200 pl-4">
-                  <span className="text-stone-700 font-medium">
-                    {label}
-                  </span>
-                  <span className="shrink-0 flex items-center gap-1.5">
-                    {isUncertainStep && !step.time ? (
-                      <>
-                        <span
-                          className="text-stone-400 cursor-help"
-                          title="Time not set — add your pickup location in Manage Booking for an estimate."
+                <>
+                  <div className={styles.pickupLocationBlock}>
+                    <p className={styles.pickupDetails}>
+                      {pickupDisplayName}
+                    </p>
+                    <div className={styles.pickupLinksWrap}>
+                      <a
+                        href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(pickupMapsQuery)}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className={styles.pickupMapLink}
+                      >
+                        View on Google Maps
+                      </a>
+                      {!isGygBooking && (
+                        <button
+                          type="button"
+                          onClick={openPickupDialog}
+                          className={styles.pickupChangeLink}
+                          aria-label="Change pickup location"
                         >
-                          <svg className="w-4 h-4 inline align-middle" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          <svg className={styles.pickupEditIcon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                            <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+                            <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
                           </svg>
-                        </span>
-                        <span className="text-stone-400 font-medium">TBD</span>
-                      </>
-                    ) : (
-                      step.time && <span className="text-stone-600">{step.time}</span>
-                    )}
+                          Change
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                  <div className={styles.finePrintSection}>
+                    <p className={styles.finePrint}>
+                      Please be ready at your pickup location 10 minutes before your pickup time. Your driver will send you a message to your preferred communication method to notify you when the shuttle is on its way.
+                    </p>
+                  </div>
+                </>
+              );
+            }
+            return (
+              <>
+                <p className={styles.pickupSelectPrompt}>
+                  Please select your pickup location <strong>as soon as possible</strong> for your booking to be added to your driver&apos;s pickup manifest.
+                </p>
+                {isGygBooking ? (
+                  <div className={styles.pickupButtonWrap}>
+                    <a
+                      href="https://www.getyourguide.com/contact#meeting-point-and-pickup"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={styles.gygManageLink}
+                    >
+                      <svg className={styles.gygManageIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                      </svg>
+                      Manage Your Booking With GetYourGuide
+                    </a>
+                  </div>
+                ) : (
+                  <div className={styles.pickupButtonWrap}>
+                    <button
+                      type="button"
+                      onClick={openPickupDialog}
+                      className={styles.pickupPrimaryButton}
+                    >
+                      select pickup location
+                    </button>
+                  </div>
+                )}
+                <div className={styles.finePrintSection}>
+                  <p className={styles.finePrint}>
+                    If your pickup location is not selected at least 24 hours before your activity, your booking is at risk of being cancelled without refund. If you need help choosing the best pickup location for you, reach out to us via phone or email, we&apos;re happy to help!
+                  </p>
+                </div>
+              </>
+            );
+          })()}
+        </div>
+      )}
+
+      {/* Pickup location dialog */}
+      <PickupLocationDialog
+        isOpen={pickupDialogOpen}
+        onClose={closePickupDialog}
+        booking={booking}
+        onSuccess={(updated) => {
+          onBookingUpdate?.(updated);
+          closePickupDialog();
+        }}
+      />
+
+      {/* Payment Summary */}
+      <div className={styles.section}>
+        <div className={styles.paymentSummaryHeader}>
+          <h2 className={styles.sectionTitle}>
+            <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+            Payment Summary
+          </h2>
+          {(() => {
+            const status = booking.payment?.status ?? '';
+            const plan = booking.payment?.plan;
+            const owesBalance = status === 'DEPOSIT_PAID' && (plan?.balanceAmount ?? 0) > 0;
+            const treatedAsFullyPaid = status === 'FULLY_PAID' || (status === 'DEPOSIT_PAID' && !owesBalance);
+            const label =
+              treatedAsFullyPaid
+                ? 'Fully paid'
+                : owesBalance
+                  ? 'Balance owing'
+                  : status === 'DEPOSIT_PAID'
+                    ? 'Deposit paid'
+                    : status === 'AWAITING_PAYMENT'
+                      ? 'Payment due'
+                      : null;
+            if (!label) return null;
+            const pillClass =
+              status === 'FULLY_PAID'
+                ? styles.paymentStatusPillPaid
+                : owesBalance
+                  ? styles.paymentStatusPillOwing
+                  : status === 'DEPOSIT_PAID'
+                    ? styles.paymentStatusPillDeposit
+                    : styles.paymentStatusPillAwaiting;
+            return (
+              <span className={`${styles.paymentStatusPill} ${pillClass}`}>
+                {label}
+              </span>
+            );
+          })()}
+        </div>
+        
+        <div className={styles.priceSummary}>
+          {(() => {
+            const hasChangeNewTotalLine = receipt.lineItems.some((item) => {
+              const label = (item.label ?? '').trim().toLowerCase();
+              return item.type === 'BOOKING_CHANGE' && label === 'new total';
+            });
+
+            return (
+              <>
+          {receipt.lineItems.map((item, index) => (
+                <div
+                  key={index}
+                  className={
+                    item.type === 'BOOKING_CHANGE' &&
+                    (item.label ?? '').trim().toLowerCase() === 'new total'
+                      ? `${styles.priceLine} ${styles.totalLine}`
+                      : item.type === 'BOOKING_CHANGE' &&
+                          (item.label ?? '').trim().toLowerCase() === 'previous total'
+                        ? `${styles.priceLine} ${styles.changeDifferenceLine}`
+                      : item.type === 'BOOKING_CHANGE' &&
+                          (item.label ?? '').trim().toLowerCase().startsWith('new booking difference')
+                        ? `${styles.priceLine} ${styles.changeDifferenceLine}`
+                        : styles.priceLine
+                  }
+                >
+                  <span
+                    className={
+                      item.type === 'BOOKING_CHANGE' &&
+                      (item.label ?? '').trim().toLowerCase() === 'new total'
+                        ? styles.totalLabel
+                        : item.type === 'BOOKING_CHANGE' &&
+                            (item.label ?? '').trim().toLowerCase() === 'previous total'
+                          ? styles.changeDifferenceLabel
+                        : item.type === 'BOOKING_CHANGE' &&
+                            (item.label ?? '').trim().toLowerCase().startsWith('new booking difference')
+                          ? styles.changeDifferenceLabel
+                          : styles.priceLabel
+                    }
+                  >
+                    {item.label}
+                    {item.quantity && item.quantity > 1 && !/\sx\s*\d+$/i.test(item.label) && ` × ${item.quantity}`}
+                  </span>
+                  <span
+                    className={
+                      item.type === 'BOOKING_CHANGE' &&
+                      (item.label ?? '').trim().toLowerCase() === 'new total'
+                        ? styles.totalAmount
+                        : item.type === 'BOOKING_CHANGE' &&
+                            (item.label ?? '').trim().toLowerCase() === 'previous total'
+                          ? styles.changeDifferenceAmount
+                        : item.type === 'BOOKING_CHANGE' &&
+                            (item.label ?? '').trim().toLowerCase().startsWith('new booking difference')
+                          ? styles.changeDifferenceAmount
+                          : styles.priceAmount
+                    }
+                  >
+                    {formatCurrencyAmount(item.amount, receipt.currency as Currency)}
                   </span>
                 </div>
-              );
-            })}
-          </div>
-          {!booking.pickupLocationId && itineraryDisplay.some(isPickupOrDropOffStep) && (
-            <p className="mt-4 text-sm text-stone-500">
-              <Link
-                href={`/manage?ref=${encodeURIComponent(booking.bookingReference)}${booking.customer?.lastName ? `&lastName=${encodeURIComponent(booking.customer.lastName)}` : ''}`}
-                className="text-stone-600 underline hover:text-stone-800"
-              >
-                Set or update your pickup location
-              </Link>
-              {' — we’ll show estimated pickup and drop-off times.'}
-            </p>
+          ))}
+          
+          {receipt.taxAmount > 0 && (() => {
+            // When line items already include tax (e.g. GST as separate line for private shuttle),
+            // avoid duplicating Subtotal + Tax - the breakdown is already in the line items
+            const lineItemsIncludeTax = receipt.lineItems.some((item) => {
+              const label = (item.label ?? '').toLowerCase();
+              const type = (item.type ?? '').toLowerCase();
+              return /\b(gst|tax|hst|pst|vat)\b/.test(label) || /\b(gst|tax|hst|pst|vat)\b/.test(type);
+            });
+            if (lineItemsIncludeTax) return null;
+            return (
+              <>
+                <div className={styles.priceLine}>
+                  <span className={styles.priceLabel}>Subtotal</span>
+                  <span className={styles.priceAmount}>
+                    {formatCurrencyAmount(receipt.subtotalBeforeTax, receipt.currency as Currency)}
+                  </span>
+                </div>
+                <div className={styles.priceLine}>
+                  <span className={styles.priceLabel}>Tax</span>
+                  <span className={styles.priceAmount}>
+                    {formatCurrencyAmount(receipt.taxAmount, receipt.currency as Currency)}
+                  </span>
+                </div>
+              </>
+            );
+          })()}
+          
+                {!hasChangeNewTotalLine && (
+                  <div className={`${styles.priceLine} ${styles.totalLine}`}>
+                    <span className={styles.totalLabel}>Total</span>
+                    <span className={styles.totalAmount}>
+                      {formatCurrencyAmount(receipt.totalAmount, receipt.currency as Currency)}
+                    </span>
+                  </div>
+                )}
+              </>
+            );
+          })()}
+          {booking.payment?.status === 'DEPOSIT_PAID' && (booking.payment?.plan?.balanceAmount ?? 0) > 0 && (booking.payment?.plan?.depositAmount ?? 0) > 0 && (
+            <div className={styles.priceLine}>
+              <span className={styles.priceLabel}>Deposit paid</span>
+              <span className={styles.priceAmount}>
+                -{formatCurrencyAmount(booking.payment!.plan!.depositAmount!, receipt.currency as Currency)}
+              </span>
+            </div>
           )}
         </div>
-      )}
 
-      {/* Payment Summary — shared PriceSummary component */}
-      <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
-        <h2 className="text-xl font-bold text-stone-900 mb-4 flex items-center gap-2">
-          <svg className="w-5 h-5 text-stone-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        {(() => {
+          const status = booking.payment?.status ?? '';
+          const plan = booking.payment?.plan;
+          const isAwaitingPayment = status === 'AWAITING_PAYMENT';
+          const owesBalance = status === 'DEPOSIT_PAID' && (plan?.balanceAmount ?? 0) > 0;
+          const depositAmount = plan?.depositAmount ?? 0;
+          const amountOwing = isAwaitingPayment
+            ? receipt.totalAmount
+            : owesBalance
+              ? (plan?.balanceAmount ?? 0)
+              : 0;
+          const showPayButton = (isAwaitingPayment || owesBalance) && amountOwing > 0;
+
+          if (!showPayButton) return null;
+
+          return (
+            <div className={styles.payOwingSection}>
+              <div className={styles.payOwingRow}>
+                <span className={styles.payOwingLabel}>
+                  {isAwaitingPayment ? 'Amount owing' : 'Balance due'}
+                </span>
+                <span className={styles.payOwingAmount}>
+                  {formatCurrencyAmount(amountOwing, receipt.currency as Currency)}
+                </span>
+              </div>
+              {paymentError && (
+                <p className={styles.payOwingError} role="alert">{paymentError}</p>
+              )}
+              <div className={styles.payOwingButtons}>
+                {isAwaitingPayment ? (
+                  <>
+                    {depositAmount > 0 && (
+                      <Button
+                        type="button"
+                        variant="secondary"
+                        hoverColor={ButtonHoverColor.Orange}
+                        disabled={paymentLoading !== null || !ENV.STRIPE_PUBLISHABLE_KEY}
+                        className={`${styles.payOwingButton} ${styles.payOwingButtonOutline}`}
+                        onClick={handlePayDeposit}
+                      >
+                        {paymentLoading === 'deposit' ? 'Loading...' : `Pay deposit (${formatCurrencyAmount(depositAmount, receipt.currency as Currency)})`}
+                      </Button>
+                    )}
+                    <Button
+                      type="button"
+                      variant="primary"
+                      hoverColor={ButtonHoverColor.Turquoise}
+                      disabled={paymentLoading !== null || !ENV.STRIPE_PUBLISHABLE_KEY}
+                      className={styles.payOwingButton}
+                      onClick={handlePayFull}
+                    >
+                      {paymentLoading === 'full' ? 'Loading...' : `Pay full balance (${formatCurrencyAmount(receipt.totalAmount, receipt.currency as Currency)})`}
+                    </Button>
+                    {(booking.payment?.balanceChargeScheduledAt ?? plan?.chargeDate) && (
+                      <p className={styles.payOwingDisclaimer}>
+                        Any remaining balance will be automatically charged to your card on file on{' '}
+                        <b>{formatChargeDate(booking.payment?.balanceChargeScheduledAt ?? plan?.chargeDate ?? null)}</b>.
+                      </p>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <Button
+                      type="button"
+                      variant="primary"
+                      hoverColor={ButtonHoverColor.Turquoise}
+                      disabled={paymentLoading !== null || !ENV.STRIPE_PUBLISHABLE_KEY}
+                      className={styles.payOwingButton}
+                      onClick={handlePayBalance}
+                    >
+                      {paymentLoading === 'balance' ? 'Loading...' : 'Pay balance'}
+                    </Button>
+                    {(booking.payment?.balanceChargeScheduledAt ?? plan?.chargeDate) && (
+                      <p className={styles.payOwingDisclaimer}>
+                        Any remaining balance will be automatically charged to your card on file on{' '}
+                        <b>{formatChargeDate(booking.payment?.balanceChargeScheduledAt ?? plan?.chargeDate ?? null)}</b>.
+                      </p>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          );
+        })()}
+      </div>
+
+      {/* Change Booking */}
+      {shouldShowChangeBookingSection && (
+      <div className={styles.section}>
+        <h2 className={styles.sectionTitle}>
+          <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 2v6h6" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 22v-6h-6" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 00-15-6.7L3 8" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12a9 9 0 0015 6.7l3-2.7" />
           </svg>
-          Payment Summary
+          Change Booking
         </h2>
-        <PriceSummary
-          lines={receipt.lineItems.map((item): PriceSummaryLine => ({
-            kind: 'line',
-            label: item.label,
-            amount: item.amount,
-            type: item.type,
-            quantity: item.quantity,
-          }))}
-          total={receipt.totalAmount}
-          currency={receipt.currency as Currency}
-          locale="en"
-          subtotal={receipt.taxAmount > 0 ? receipt.subtotalBeforeTax : undefined}
-          size="base"
-          subtotalSpacing="relaxed"
-          t={t}
-        />
-
-        {/* Payments — Deposit/Balance for private shuttle; Card/Gift card/No payment for pay-in-full */}
-        {payment.methodUsages && payment.methodUsages.length > 0 && (
-          <div className="mt-6 pt-4 border-t border-stone-200">
-            <h3 className="text-sm font-semibold text-stone-700 mb-2">
-              {payment.plan?.type === 'DEPOSIT' ? 'Payments' : 'Payment'}
-            </h3>
-            {payment.methodUsages.map((usage, index) => {
-              const isDepositPlan = payment.plan?.type === 'DEPOSIT';
-              const label = isDepositPlan
-                ? (usage.paymentType === 'BALANCE' ? 'Balance' : 'Deposit')
-                : (usage.type === 'CARD' ? (usage.displayLabel || 'Card') : usage.type === 'GIFT_CARD' ? (usage.displayLabel || 'Gift Card') : usage.displayLabel || 'No payment');
-              return (
-                <div key={index} className="flex justify-between text-stone-600 text-sm">
-                  <span>{label}{isDepositPlan && usage.displayLabel ? ` (${usage.displayLabel})` : ''}</span>
-                  <span>{formatCurrencyAmount(usage.amount, usage.currency as Currency)}</span>
-                </div>
-              );
-            })}
-          </div>
+        <p className={styles.changeBookingCopy}>
+          You can <b>change your experience, date, time, ticket quantity, pickup, and selected options</b>. Your existing promo and cancellation policy stay the same.
+          Additional payment may be required when there is a positive difference between the new and old booking total.
+        </p>
+        {booking.lastChangeSummary?.changedAt && (
+          <p className={styles.changeBookingMeta}>
+            Last change: {formatDateTime(booking.lastChangeSummary.changedAt)}
+          </p>
+        )}
+        {booking.lastChangeSummary?.amountPaid != null && booking.lastChangeSummary.amountPaid > 0 && (
+          <p className={styles.changeBookingMeta}>
+            Additional amount paid: {formatCurrencyAmount(booking.lastChangeSummary.amountPaid, (booking.lastChangeSummary.currency || booking.receipt.currency) as Currency)}
+          </p>
+        )}
+        <div className={styles.changeBookingActions}>
+          <button
+            type="button"
+            onClick={() => {
+              if (booking.canChange === false) {
+                setChangeFlowMessage(
+                  booking.changeBlockedReason?.trim() ||
+                    'This booking is not eligible for self-serve changes.'
+                );
+                return;
+              }
+              setChangeFlowMessage(null);
+              setChangeDialogOpen(true);
+            }}
+            className={styles.contactSaveBtn}
+            disabled={isCancelled}
+          >
+            Change booking
+          </button>
+        </div>
+        {(booking.changeByDateTime || cancellationPolicySnapshot?.changeWindowHoursBefore != null) && (
+          <p className={styles.changeBookingMeta}>
+            Change deadline:{' '}
+            <strong>
+              {booking.changeByDateTime
+                ? formatDateTime(booking.changeByDateTime)
+                : formatCancelByDate(effectivePolicyDateTime, cancellationPolicySnapshot?.changeWindowHoursBefore ?? 0)}
+            </strong>.
+          </p>
+        )}
+        {policyAnchorIsEarlierThanTrip(booking.policyAnchorDateTime, booking.dateTime) && booking.policyAnchorDateTime && (
+          <p className={styles.changeBookingMeta}>
+            Refund and self-serve change rules use your original trip time ({formatDateTime(booking.policyAnchorDateTime)}), not the
+            rescheduled departure.
+          </p>
         )}
+        {changeFlowMessage && <p className={styles.changeBookingBlocked}>{changeFlowMessage}</p>}
+      </div>
+      )}
+      <ChangeBookingDialog
+        isOpen={changeDialogOpen}
+        booking={booking}
+        onChangeCompleted={(preview: ChangeFlowSelectionPreview | null) => {
+          pendingChangeSuccessPreviewRef.current = preview;
+          setChangeFlowMessage(null);
+        }}
+        onClose={async () => {
+          setChangeDialogOpen(false);
+          await onRefetch?.();
+          const pending = pendingChangeSuccessPreviewRef.current;
+          pendingChangeSuccessPreviewRef.current = undefined;
+          if (pending !== undefined) {
+            setChangeFlowSuccessMessage(manageBookingChangeSuccessMessage(pending));
+          }
+          if (typeof window !== 'undefined') {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }
+        }}
+      />
 
-        {/* Payment status */}
-        <div className="mt-4 pt-4 border-t border-stone-200">
-          <div className="flex justify-between text-sm">
-            <span className="text-stone-600">Status</span>
-            <span className={`font-semibold ${
-              payment.status === 'FULLY_PAID' ? 'text-emerald-600' :
-              payment.status === 'DEPOSIT_PAID' ? 'text-amber-600' :
-              'text-stone-600'
-            }`}>
-              {payment.status === 'FULLY_PAID' && 'Fully Paid'}
-              {payment.status === 'DEPOSIT_PAID' && 'Deposit Paid'}
-              {payment.status === 'AWAITING_PAYMENT' && 'Payment Due'}
-              {payment.status === 'PAYMENT_FAILED' && 'Payment Failed'}
-            </span>
-          </div>
-          {hasPaymentDue && (
-            <div className="mt-2 text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-lg p-4">
-              <p className="font-semibold">Payment due</p>
-              <p className="text-xs mt-1 text-amber-600">
-                Deposit: {formatCurrencyAmount(depositAmount, receipt.currency as Currency)} • Balance: {formatCurrencyAmount(balanceAmount, receipt.currency as Currency)}
+      {/* Cancellation Policy */}
+      {cancellationPolicySnapshot && (() => {
+        const isGygBooking = Boolean(booking.gygBookingReference?.trim());
+        if (isGygBooking) {
+          return (
+            <div className={styles.section}>
+              <h2 className={styles.sectionTitle}>
+                <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                </svg>
+                Cancellation Policy
+              </h2>
+              <p className={styles.policyLabel}>
+                Your booking was made with a third party booking platform,{' '}
+                <a href="#getyourguide" className={styles.policyGygLink}>GetYourGuide</a>
+                . Your booking is subject to the cancellation policy of GetYourGuide and all cancellations and refunds can only be processed by GetYourGuide.
               </p>
-              <p className="text-xs mt-2 text-amber-600">Pay now or the balance will be charged automatically before your booking.</p>
-              {onRefetch && (
-                <p className="text-xs mt-2">
-                  <button type="button" onClick={onRefetch} className="underline hover:no-underline text-amber-700">
-                    Just paid? Refresh to update
-                  </button>
-                </p>
-              )}
-              {balanceError && (
-                <p className="text-red-600 text-xs mt-2" role="alert">{balanceError}</p>
-              )}
-              <div className="mt-3 flex flex-col gap-2">
-                <button
-                  type="button"
-                  onClick={handlePayDeposit}
-                  disabled={balanceLoading || !ENV.STRIPE_PUBLISHABLE_KEY}
-                  className="w-full py-2.5 px-4 bg-amber-600 hover:bg-amber-700 disabled:bg-stone-300 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors"
-                >
-                  {balanceLoading ? 'Loading...' : `Pay deposit (${formatCurrencyAmount(depositAmount, receipt.currency as Currency)})`}
-                </button>
-                <button
-                  type="button"
-                  onClick={handlePayFull}
-                  disabled={balanceLoading || !ENV.STRIPE_PUBLISHABLE_KEY}
-                  className="w-full py-2.5 px-4 border border-amber-600 text-amber-700 hover:bg-amber-50 disabled:opacity-50 disabled:cursor-not-allowed font-semibold rounded-lg transition-colors"
-                >
-                  Pay full balance ({formatCurrencyAmount(receipt.totalAmount, receipt.currency as Currency)})
-                </button>
-              </div>
+              <a
+                href="https://www.getyourguide.com/contact#booking-management"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.gygManageLink}
+              >
+                <svg className={styles.gygManageIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+                Manage Your Booking With GetYourGuide
+              </a>
             </div>
+          );
+        }
+        const tiers = (cancellationPolicySnapshot.refundTiers ?? cancellationPolicySnapshot.tiers?.map(t => ({ hoursBefore: t.hoursBeforeBooking, refundPercent: t.refundPercentage })) ?? [])
+          .slice()
+          .sort((a, b) => b.hoursBefore - a.hoursBefore);
+        const hasTiers = tiers.length > 0;
+        return (
+        <div className={styles.section}>
+          <h2 className={styles.sectionTitle}>
+            <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+            Cancellation Policy
+          </h2>
+          {!hasTiers && (
+            <p className={styles.policyLabel}>
+              No cancellation, no refunds.
+            </p>
           )}
-          {hasBalanceDue && !hasPaymentDue && (
-            <div className="mt-2 text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-lg p-4">
-              <p className="font-semibold">Balance Due: {formatCurrencyAmount(balanceAmount, receipt.currency as Currency)}</p>
-              {payment.balanceChargeScheduledAt && (
-                <p className="text-xs mt-1 text-amber-600">Scheduled to be charged on: {new Date(payment.balanceChargeScheduledAt).toLocaleDateString()}</p>
-              )}
-              <p className="text-xs mt-2 text-amber-600">Pay now to complete your booking.</p>
-              {onRefetch && (
-                <p className="text-xs mt-2">
-                  <button type="button" onClick={onRefetch} className="underline hover:no-underline text-amber-700">
-                    Just paid? Refresh to update
-                  </button>
-                </p>
-              )}
-              {balanceError && (
-                <p className="text-red-600 text-xs mt-2" role="alert">{balanceError}</p>
-              )}
+          {hasTiers && (
+              <div className={styles.policyCancelBy}>
+                <p className={styles.policyCancelByHeading}>Cancel by</p>
+                <div className={styles.policyTierList}>
+                  {tiers.map((tier, index) => {
+                    const cancelBy = formatCancelByDate(effectivePolicyDateTime, tier.hoursBefore);
+                    const hasDeposit = (booking.payment?.plan?.depositAmount ?? 0) > 0;
+                    const isDraftItineraryConfirmed =
+                      booking.productType === 'PRIVATE_SHUTTLE'
+                        ? effectiveItineraryReviewStatus(booking.draftItinerary) === 'APPROVED'
+                        : Boolean(booking.draftItinerary?.approvedAt?.trim());
+                    const isPrivateShuttle = booking.productType === 'PRIVATE_SHUTTLE';
+                    // Only mention "excluding deposit" for private shuttle bookings with a deposit.
+                    const excludingDepositSuffix = isPrivateShuttle && hasDeposit
+                      ? (isDraftItineraryConfirmed
+                        ? <>, <strong>excluding deposit</strong>.</>
+                        : <>, <strong>excluding deposit (after itinerary is approved).</strong></>)
+                      : '.';
+                    const refundBase = tier.refundPercent === 100
+                      ? 'Full refund: Get back 100% of what you paid'
+                      : `Partial refund: Get back ${tier.refundPercent}% of what you paid`;
+                    return (
+                      <div key={index} className={styles.policyTierRow}>
+                        <div className={styles.policyTierDeadline}>
+                          {cancelBy || `${tier.hoursBefore} hours before`}
+                        </div>
+                        <div className={styles.policyTierRefund}>
+                          {refundBase}{excludingDepositSuffix}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+          )}
+          {cancellationPolicySnapshot.changeWindowHoursBefore != null && effectivePolicyDateTime && (
+            <p className={styles.policyChangeWindow}>
+              Make changes to your booking (date, time, return, quantities, etc.) by <strong>{formatCancelByDate(effectivePolicyDateTime, cancellationPolicySnapshot.changeWindowHoursBefore)}</strong>.
+            </p>
+          )}
+          {cancellationInfo?.canCancel && booking.productType !== 'PRIVATE_SHUTTLE' && (
+            <div className={styles.cancelBookingSection}>
               <button
                 type="button"
-                onClick={handlePayBalance}
-                disabled={balanceLoading || !ENV.STRIPE_PUBLISHABLE_KEY}
-                className="mt-3 w-full py-2.5 px-4 bg-amber-600 hover:bg-amber-700 disabled:bg-stone-300 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors"
+                onClick={openCancelConfirmDialog}
+                disabled={contactSaving}
+                className={styles.contactSaveBtn}
               >
-                {balanceLoading ? 'Loading...' : `Pay remaining balance (${formatCurrencyAmount(balanceAmount, receipt.currency as Currency)})`}
+                Cancel booking
               </button>
+              <p className={styles.cancelBookingText} dangerouslySetInnerHTML={{ __html: cancellationInfo.refundPercent > 0
+                  ? `Cancel for a <b>${cancellationInfo.refundPercent}% refund</b> of <b>${formatCurrencyAmount(cancellationInfo.refundAmount, cancellationInfo.currency as Currency)}</b>.`
+                  : 'Cancel booking. <strong>Note:</strong> This booking is not eligible for a refund.'}} />
+              {cancelError && !cancelConfirmOpen && <p className={styles.cancelBookingError} role="alert">{cancelError}</p>}
             </div>
           )}
         </div>
-      </div>
+        );
+      })()}
 
-      {/* Cancellation Policy */}
-      {cancellationPolicySnapshot && (
-        <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
-          <h2 className="text-xl font-bold text-stone-900 mb-4">Cancellation Policy</h2>
-          <p className="text-stone-700 font-medium mb-2">{cancellationPolicySnapshot.label}</p>
-          {cancellationPolicySnapshot.tiers && cancellationPolicySnapshot.tiers.length > 0 && (
-            <div className="space-y-2 text-sm text-stone-600">
-              {cancellationPolicySnapshot.tiers.map((tier, index) => (
-                <p key={index}>
-                  • {tier.hoursBeforeBooking}+ hours before: {tier.refundPercentage}% refund
-                </p>
+      {/* Contact & Communication - inline editable */}
+      <div className={styles.section} id="contact-details">
+        <h2 className={styles.sectionTitle}>
+          <svg className={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+          Contact Information
+        </h2>
+        <div className={styles.contactForm}>
+          <div className={styles.contactFieldGroup}>
+            <label htmlFor="contact-email" className={styles.contactFieldLabel}>Email</label>
+            <input
+              id="contact-email"
+              type="email"
+              value={contactEmail}
+              onChange={(e) => setContactEmail(e.target.value)}
+              className={styles.contactInput}
+              placeholder="e.g. you@example.com"
+            />
+          </div>
+          <div className={styles.contactFieldGroup}>
+            <label htmlFor="contact-phone" className={styles.contactFieldLabel}>Phone number</label>
+            <PhoneInputWithCountryComponent
+              id="contact-phone"
+              value={contactPhone}
+              onChange={(value) => setContactPhone(value ?? '')}
+              placeholder="e.g. +1 403 555 0123"
+            />
+          </div>
+          <div className={styles.contactFieldGroup}>
+            <label htmlFor="contact-whatsapp" className={styles.contactFieldLabel}>
+              <WhatsAppIconSmall className={styles.whatsappIconSmall} />
+              WhatsApp number
+            </label>
+            <p className={styles.contactHint}>Different from phone? Add it here.</p>
+            <PhoneInputWithCountryComponent
+              id="contact-whatsapp"
+              value={contactWhatsApp}
+              onChange={(value) => setContactWhatsApp(value ?? '')}
+              placeholder="e.g. +1 403 555 0123"
+            />
+          </div>
+          <div className={styles.contactFieldGroup}>
+            <span className={styles.contactFieldLabel}>Preferred communication method</span>
+            <div className={styles.contactCheckboxGroup}>
+              {COMMUNICATION_OPTIONS.map((opt) => (
+                <label key={opt.value} className={styles.contactCheckboxLabel}>
+                  <input
+                    type="checkbox"
+                    checked={contactCommPref.includes(opt.value)}
+                    onChange={() => toggleCommPref(opt.value)}
+                    className={styles.contactCheckbox}
+                  />
+                  {opt.value === 'WHATSAPP' ? (
+                    <span className={styles.contactCheckboxText}>
+                      <WhatsAppIconSmall className={styles.whatsappIconSmall} />
+                      {opt.label}
+                    </span>
+                  ) : (
+                    opt.label
+                  )}
+                </label>
               ))}
             </div>
-          )}
+          </div>
+          {contactError && <p className={styles.contactError}>{contactError}</p>}
+          <button
+            type="button"
+            onClick={handleSaveContact}
+            disabled={contactSaving}
+            className={styles.contactSaveBtn}
+          >
+            {contactSaving ? 'Saving…' : 'save contact details'}
+          </button>
+        </div>
+      </div>
+
+      {dependentAddOnUpsellPlacement === 'bottom' ? (
+        <PostBookingDependentAddOnUpsell booking={booking} enabled />
+      ) : null}
+      {bookingRefreshPending && !showCancelOverlay && (
+        <div
+          className={styles.bookingRefreshOverlay}
+          role="status"
+          aria-live="polite"
+          aria-busy="true"
+          aria-label="Updating booking"
+        >
+          <div className={styles.cancelOverlaySpinner} aria-hidden />
+          <p className={styles.cancelOverlayText}>Updating your booking…</p>
         </div>
       )}
 
-      {/* Contact & Communication */}
-      <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
-        <h2 className="text-xl font-bold text-stone-900 mb-4">Contact Information</h2>
-        {booking.customer && (
-          <div className="space-y-2 text-stone-700">
-            {booking.customer.email && <p><span className="font-medium">Email:</span> {booking.customer.email}</p>}
-            {booking.customer.phoneNumber && <p><span className="font-medium">Phone:</span> {booking.customer.phoneNumber}</p>}
-          </div>
-        )}
-        {communicationPreference && communicationPreference.length > 0 && (
-          <div className="mt-4 pt-4 border-t border-stone-200">
-            <p className="text-sm text-stone-600">
-              <span className="font-medium">Preferred communication:</span> {communicationPreference.join(', ')}
+      {/* Full-screen overlay while cancelling (hides scroll/layout shift) */}
+      {showCancelOverlay && (
+        <div className={styles.cancelOverlay} role="status" aria-live="polite" aria-label="Cancelling booking">
+          <div className={styles.cancelOverlaySpinner} aria-hidden />
+          <p className={styles.cancelOverlayText}>Cancelling booking…</p>
+        </div>
+      )}
+
+      {/* Cancel booking confirmation dialog */}
+      {cancelConfirmOpen && (
+        <div className={styles.paymentModalOverlay} role="dialog" aria-modal="true" aria-labelledby="cancel-confirm-title">
+          <div className={styles.cancelConfirmModal}>
+            <h3 id="cancel-confirm-title" className={styles.cancelConfirmTitle}>Cancel booking?</h3>
+            <p className={styles.cancelConfirmMessage}>
+              This action cannot be undone. Are you sure you want to cancel your booking?
             </p>
+            {cancelError && <p className={styles.cancelBookingError} role="alert">{cancelError}</p>}
+            <div className={styles.cancelConfirmActions}>
+                <Button variant="outline" className={styles.cancelBtn} onClick={closeCancelConfirmDialog}>
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  hoverColor={ButtonHoverColor.Turquoise}
+                  onClick={handleCancelBooking}
+                  disabled={cancelling}
+                >
+                  {cancelling ? 'Cancelling…' : 'Yes, cancel booking'}
+                </Button>
+            </div>
           </div>
-        )}
-      </div>
-
-      {/* Pickup Location */}
-      {(booking.pickupLocationId || booking.travelerHotel) && (
-        <div className="bg-white rounded-2xl shadow-lg p-6 sm:p-8">
-          <h2 className="text-xl font-bold text-stone-900 mb-4">Pickup Details</h2>
-          <p className="text-stone-700">
-            {booking.travelerHotel || `Location ID: ${booking.pickupLocationId}`}
-          </p>
         </div>
       )}
 
-      {/* Balance payment modal */}
-      {showBalanceModal && balanceClientSecret && stripePromise && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-          <div className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden flex flex-col">
-            <div className="p-6 border-b border-stone-200 flex-shrink-0">
-              <div className="flex justify-between items-start">
-                <h3 className="text-lg font-semibold text-stone-900">{paymentModalLabel}</h3>
-                <button
-                  type="button"
-                  onClick={() => { setShowBalanceModal(false); setBalanceClientSecret(null); setBalanceError(null); setPaymentModalLabel('Pay remaining balance'); }}
-                  className="text-stone-400 hover:text-stone-600 p-1"
-                  aria-label="Close"
-                >
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
+      {/* Stripe payment modal */}
+      {showPaymentModal && paymentClientSecret && stripePromise && (
+        <div className={styles.paymentModalOverlay}>
+          <div className={styles.paymentModal}>
+            <div className={styles.paymentModalHeader}>
+              <h3 className={styles.paymentModalTitle}>{paymentModalLabel}</h3>
+              <button
+                type="button"
+                onClick={closePaymentModal}
+                className={styles.paymentModalClose}
+                aria-label="Close"
+              >
+                <svg className={styles.paymentModalCloseIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div className={styles.paymentModalSummary}>
+              {receipt.lineItems.map((item, index) => (
+                <div key={index} className={styles.paymentModalLine}>
+                  <span className={styles.paymentModalLineLabel}>
+                    {item.label}
+                    {item.quantity && item.quantity > 1 && !/\sx\s*\d+$/i.test(item.label) && ` × ${item.quantity}`}
+                  </span>
+                  <span className={styles.paymentModalLineAmount}>
+                    {formatCurrencyAmount(item.amount, receipt.currency as Currency)}
+                  </span>
+                </div>
+              ))}
+              {receipt.taxAmount > 0 && (() => {
+                const lineItemsIncludeTax = receipt.lineItems.some((item) => {
+                  const label = (item.label ?? '').toLowerCase();
+                  const type = (item.type ?? '').toLowerCase();
+                  return /\b(gst|tax|hst|pst|vat)\b/.test(label) || /\b(gst|tax|hst|pst|vat)\b/.test(type);
+                });
+                if (lineItemsIncludeTax) return null;
+                return (
+                  <>
+                    <div className={styles.paymentModalLine}>
+                      <span className={styles.paymentModalLineLabel}>Subtotal</span>
+                      <span className={styles.paymentModalLineAmount}>
+                        {formatCurrencyAmount(receipt.subtotalBeforeTax, receipt.currency as Currency)}
+                      </span>
+                    </div>
+                    <div className={styles.paymentModalLine}>
+                      <span className={styles.paymentModalLineLabel}>Tax</span>
+                      <span className={styles.paymentModalLineAmount}>
+                        {formatCurrencyAmount(receipt.taxAmount, receipt.currency as Currency)}
+                      </span>
+                    </div>
+                  </>
+                );
+              })()}
+              <div className={styles.paymentModalTotal}>
+                <span className={styles.paymentModalTotalLabel}>Total</span>
+                <span className={styles.paymentModalTotalAmount}>
+                  {formatCurrencyAmount(receipt.totalAmount, receipt.currency as Currency)}
+                </span>
               </div>
-              <p className="text-sm text-stone-600 mt-1">
-                {formatCurrencyAmount(hasPaymentDue ? (paymentModalLabel === 'Pay deposit' ? depositAmount : receipt.totalAmount) : balanceAmount, receipt.currency as Currency)} due
-              </p>
+              {paymentModalLabel === 'Pay balance' && (booking.payment?.plan?.depositAmount ?? 0) > 0 && (
+                <>
+                  <div className={styles.paymentModalLine}>
+                    <span className={styles.paymentModalLineLabel}>Deposit paid</span>
+                    <span className={styles.paymentModalLineAmount}>
+                      -{formatCurrencyAmount(booking.payment!.plan!.depositAmount!, receipt.currency as Currency)}
+                    </span>
+                  </div>
+                  <div className={styles.paymentModalTotal}>
+                    <span className={styles.paymentModalTotalLabel}>Balance due</span>
+                    <span className={styles.paymentModalTotalAmount}>
+                      {formatCurrencyAmount(booking.payment!.plan!.balanceAmount!, receipt.currency as Currency)}
+                    </span>
+                  </div>
+                </>
+              )}
+              {paymentModalLabel === 'Pay deposit' && (booking.payment?.plan?.depositAmount ?? 0) > 0 && (
+                <div className={styles.paymentModalDepositDue}>
+                  <span className={styles.paymentModalDepositDueLabel}>Deposit due today</span>
+                  <span className={styles.paymentModalDepositDueAmount}>
+                    {formatCurrencyAmount(booking.payment!.plan!.depositAmount!, receipt.currency as Currency)}
+                  </span>
+                </div>
+              )}
             </div>
-            <div className="p-6 overflow-auto flex-1">
+            <div className={styles.paymentModalBody}>
               <Elements
                 stripe={stripePromise}
                 options={{
-                  clientSecret: balanceClientSecret,
+                  clientSecret: paymentClientSecret,
                   appearance: { theme: 'stripe' as const, variables: { colorPrimary: '#059669', borderRadius: '8px' } },
                 }}
               >
-                <BalancePaymentForm
-                  successUrl={`${typeof window !== 'undefined' ? window.location.origin : ''}/manage?ref=${encodeURIComponent(formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference)}&lastName=${encodeURIComponent(booking.customer?.lastName || '')}&payment=balance_success`}
-                  onClose={() => { setShowBalanceModal(false); setBalanceClientSecret(null); setBalanceError(null); setPaymentModalLabel('Pay remaining balance'); }}
-                  t={t}
-                  balanceAmount={hasPaymentDue ? (paymentModalLabel === 'Pay deposit' ? depositAmount : receipt.totalAmount) : balanceAmount}
+                <PaymentForm
+                  successUrl={`${typeof window !== 'undefined' ? window.location.origin : ''}/manage-booking?ref=${encodeURIComponent(formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference)}&lastName=${encodeURIComponent(booking.customer?.lastName || '')}&payment=balance_success`}
+                  onClose={closePaymentModal}
+                  payLabel={paymentModalLabel}
+                  amount={
+                    paymentModalLabel === 'Pay deposit' && (booking.payment?.plan?.depositAmount ?? 0) > 0
+                      ? (booking.payment!.plan!.depositAmount ?? 0)
+                      : paymentModalLabel === 'Pay full balance'
+                        ? receipt.totalAmount
+                        : (booking.payment?.plan?.balanceAmount ?? 0)
+                  }
                   currency={receipt.currency as Currency}
                 />
               </Elements>