@ticketboothapp/booking 1.2.25 → 1.2.27

package/src/components/booking/ChangeBookingDialog.tsx

@@ -2,17 +2,16 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { getProductByIdOrSlug, buildMinimalProductFromConfig } from '@/lib/products-config';
-import { getProduct, type Product } from '@/lib/booking-api';
-import { ENV } from '@/lib/env';
-import { formatCurrencyAmount, type Currency } from '@/lib/currency';
+import { getProduct, type Product } from '../../../../../src/lib/booking-api';
+import { useBookingHost } from '../../runtime';
+import { formatCurrencyAmount, type Currency } from '../../../../../src/lib/currency';
 import { BookingFlow, type ChangeFlowSelectionPreview } from './BookingFlow';
-import { useBookingSourceMetadataFromLocation } from '@/hooks/useBookingSourceMetadataFromLocation';
+import { useBookingSourceMetadataFromLocation } from '../../hooks/useBookingSourceMetadataFromLocation';
 import styles from './BookingDialog.module.css';
 import './booking-flow.css';
-import type { BookingData } from '@/components/BookingDetails';
-import { getItineraryStepLabel } from '@/lib/booking/itinerary-display';
-import { effectiveProductOptionIdForChangeFlow } from '@/lib/booking/product-option-id';
+import type { BookingData } from '../../../../../src/components/BookingDetails';
+import { getItineraryStepLabel } from '../../../../../src/lib/booking/itinerary-display';
+import { effectiveProductOptionIdForChangeFlow } from '../../../../../src/lib/booking/product-option-id';
 
 interface ChangeBookingDialogProps {
   isOpen: boolean;
@@ -240,6 +239,7 @@ export default function ChangeBookingDialog({
   onClose,
   onChangeCompleted,
 }: ChangeBookingDialogProps) {
+  const { env, catalog } = useBookingHost();
   const bookingSourceAttribution = useBookingSourceMetadataFromLocation();
   const [product, setProduct] = useState<Product | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -250,12 +250,22 @@ export default function ChangeBookingDialog({
 
   const bookingProductId = booking.productId;
   // Memoize so the load effect does not re-run every render (buildMinimalProductFromConfig returns a new object each call).
-  const config = useMemo(() => getProductByIdOrSlug(bookingProductId), [bookingProductId]);
+  const config = useMemo(
+    () =>
+      catalog.getProductByIdOrSlug(bookingProductId) as {
+        display?: { slug?: string; shortName?: string };
+        productId?: string;
+      } | null,
+    [bookingProductId, catalog]
+  );
   const productSlug = config?.display?.slug ?? bookingProductId;
   const apiProductId = config?.productId ?? bookingProductId;
   const minimalProduct = useMemo(
-    () => (config ? buildMinimalProductFromConfig(config, ENV.COMPANY_ID) : null),
-    [config]
+    () =>
+      config && catalog.buildMinimalProductFromConfig
+        ? (catalog.buildMinimalProductFromConfig(config, env.COMPANY_ID) as Product)
+        : null,
+    [config, catalog, env.COMPANY_ID]
   );
 
   useEffect(() => {
@@ -263,7 +273,7 @@ export default function ChangeBookingDialog({
     let cancelled = false;
     setError(null);
     if (minimalProduct) setProduct(minimalProduct);
-    getProduct(apiProductId, ENV.COMPANY_ID)
+    getProduct(apiProductId, env.COMPANY_ID)
       .then((p) => {
         if (!cancelled && p) setProduct(p);
       })

package/src/components/booking/CheckoutForm.module.css

@@ -77,6 +77,16 @@
   margin-top: 1.5rem;
 }
 
+/* Motion wrappers — no nested “card” chrome (flush with modal / form background) */
+.pickupExpandedWrapper,
+.pickupCollapsedWrapper {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
 .pickupHeader {
   display: flex;
   align-items: center;

package/src/components/booking/CheckoutForm.tsx

@@ -4,9 +4,9 @@ import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
 import { TermsAcceptance } from './TermsAcceptance';
 import { PickupLocationSelector } from './PickupLocationSelector';
 import type { Currency } from './CurrencySwitcher';
-import type { PickupLocation, Destination } from '@/lib/booking-api';
+import type { PickupLocation, Destination } from '../../../../../src/lib/booking-api';
 import styles from './CheckoutForm.module.css';
-import Button, { ButtonHoverColor } from '@/components/button';
+import { useBookingHost } from '../../runtime';
 import { AnimatePresence, motion } from 'framer-motion';
 
 type TranslationFn = (key: string, params?: Record<string, string>) => string;
@@ -113,6 +113,14 @@ export function CheckoutForm({
   attributionConfirmed = false,
   onAttributionConfirmedChange,
 }: CheckoutFormProps) {
+  const { slots } = useBookingHost();
+  const Button = slots.Button;
+  const ButtonHoverColor = slots.ButtonHoverColor as {
+    Turquoise: string;
+    White: string;
+    Orange: string;
+  };
+
   return (
     <div className={styles.section}>
       <div className={styles.summaryWrapper}>

package/src/components/booking/CheckoutModal.tsx

@@ -1,16 +1,15 @@
 'use client';
 
-import { useState, useEffect, useRef, type ReactNode } from 'react';
+import { useState, useEffect, useRef, useMemo, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
-import { ENV } from '@/lib/env';
-import { storePendingPurchase, trackBeginCheckout } from '@/lib/analytics';
-import { formatCurrencyAmount } from '@/lib/currency';
+import { useBookingHost } from '../../runtime';
+import { formatCurrencyAmount } from '../../../../../src/lib/currency';
 import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
 import type { Currency } from './CurrencySwitcher';
-import type { Locale } from '@/lib/booking/i18n/config';
-import type { OrderSummaryTicketLine, OrderSummaryFeeLine, PriceBreakdown as PriceBreakdownType } from '@/lib/booking/pricing';
+import type { Locale } from '../../../../../src/lib/booking/i18n/config';
+import type { OrderSummaryTicketLine, OrderSummaryFeeLine, PriceBreakdown as PriceBreakdownType } from '../../../../../src/lib/booking/pricing';
 
 export interface CheckoutModalLineItem {
   line: OrderSummaryTicketLine;
@@ -61,10 +60,6 @@ export interface CheckoutModalProps {
   };
 }
 
-const stripePromise = ENV.STRIPE_PUBLISHABLE_KEY
-  ? loadStripe(ENV.STRIPE_PUBLISHABLE_KEY)
-  : null;
-
 function CheckoutForm({
   successUrl,
   onClose,
@@ -84,6 +79,7 @@ function CheckoutForm({
   currency: Currency;
   locale: Locale;
 }) {
+  const { analytics } = useBookingHost();
   const stripe = useStripe();
   const elements = useElements();
   const [loading, setLoading] = useState(false);
@@ -103,7 +99,7 @@ function CheckoutForm({
     }
     onPaymentSubmitStart?.();
     // Store before redirect so success page can fire purchase event
-    storePendingPurchase(total, currency);
+    analytics.storePendingPurchase(total, currency);
     const { error: confirmError } = await stripe.confirmPayment({
       elements,
       confirmParams: {
@@ -176,6 +172,12 @@ export function CheckoutModal({
   prePaymentPanel,
   changeTotals,
 }: CheckoutModalProps) {
+  const { env, analytics } = useBookingHost();
+  const stripePromise = useMemo(
+    () =>
+      env.STRIPE_PUBLISHABLE_KEY ? loadStripe(env.STRIPE_PUBLISHABLE_KEY) : null,
+    [env.STRIPE_PUBLISHABLE_KEY]
+  );
   const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
   const manageParams = new URLSearchParams({ reservationRef: reservationReference });
   if (customerLastName?.trim()) manageParams.set('lastName', customerLastName.trim());
@@ -195,10 +197,10 @@ export function CheckoutModal({
         qty: line.qty,
         price: line.itemTotal,
       }));
-      trackBeginCheckout(total, currency, items);
+      analytics.trackBeginCheckout(total, currency, items);
     }
     if (!open) hasFiredBeginCheckout.current = false;
-  }, [open, total, currency, ticketLines]);
+  }, [open, total, currency, ticketLines, analytics]);
 
   useEffect(() => {
     if (!open || !reservationExpiration) return;
@@ -233,7 +235,7 @@ export function CheckoutModal({
 
   if (!open) return null;
 
-  if (!ENV.STRIPE_PUBLISHABLE_KEY) {
+  if (!env.STRIPE_PUBLISHABLE_KEY) {
     const noStripe = (
       <div
         className="booking-flow-root booking-flow-preflight fixed inset-0 z-[10050] flex items-center justify-center p-4 bg-black/50"

package/src/components/booking/DapFlowCollage.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import ViaViaImage from '@/components/image';
-import ImageModal from '@/components/product-theme-pages/image-modal';
+import { useBookingHost } from '../../runtime';
 import styles from './BookingFlowCollage.module.css';
 
 export interface DapFlowCollageProps {
@@ -13,6 +12,10 @@ export interface DapFlowCollageProps {
 
 /** Hero (left) + four-tile grid (right), same layout as BookingFlowCollage without video */
 export function DapFlowCollage({ imageIds, altPrefix = 'Experience' }: DapFlowCollageProps) {
+  const { slots: hostSlots } = useBookingHost();
+  const ViaViaImage = hostSlots.Image;
+  const ImageModal = hostSlots.ImageModal;
+
   const slots = useMemo(() => {
     const raw = imageIds.map((id) => id.trim()).filter(Boolean);
     if (raw.length === 0) return [];

package/src/components/booking/DapTourDescription.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useMemo } from 'react';
-import { TourDescription } from '@/components/booking/TourDescription';
-import { useLocale, useTranslations } from '@/lib/booking/i18n';
-import { getDapDescription } from '@/lib/dap-descriptions';
-import type { PhotoDapSlug } from '@/lib/photo-dap-config';
+import { TourDescription } from './TourDescription';
+import { useLocale, useTranslations } from '../../../../../src/lib/booking/i18n';
+import { getDapDescription } from '../../../../../src/lib/dap-descriptions';
+import type { PhotoDapSlug } from '../../../../../src/lib/photo-dap-config';
 
 export function DapTourDescription({
   slug,

package/src/components/booking/DependentAddOnBookingDialog.tsx

@@ -11,8 +11,8 @@ import {
 import { format, parseISO } from 'date-fns';
 import {
   useDependentAddOnDialog,
-} from '@/providers/dependent-add-on-dialog-provider';
-import { ENV } from '@/lib/env';
+} from '../../../../../src/providers/dependent-add-on-dialog-provider';
+import { useBookingHost } from '../../runtime';
 import {
   getDependentAddOnAvailability,
   createDependentAddOnPaymentIntent,
@@ -20,20 +20,19 @@ import {
   type DependentAddOnCheckoutQuestion,
   type DependentAddOnSlot,
   type DapItineraryStep,
-} from '@/lib/dependent-add-on-api';
-import { dapItineraryStepsToDisplay } from '@/lib/dap-itinerary-preview';
-import { DEFAULT_PHOTO_DAP_CANCELLATION_DAYS_BEFORE_SESSION } from '@/lib/photo-dap-config';
-import { CheckoutModal, type CheckoutModalLineItem } from '@/components/booking/CheckoutModal';
-import { DapFlowCollage } from '@/components/booking/DapFlowCollage';
-import { DapTourDescription } from '@/components/booking/DapTourDescription';
+} from '../../../../../src/lib/dependent-add-on-api';
+import { dapItineraryStepsToDisplay } from '../../../../../src/lib/dap-itinerary-preview';
+import { DEFAULT_PHOTO_DAP_CANCELLATION_DAYS_BEFORE_SESSION } from '../../../../../src/lib/photo-dap-config';
+import { CheckoutModal, type CheckoutModalLineItem } from './CheckoutModal';
+import { DapFlowCollage } from './DapFlowCollage';
+import { DapTourDescription } from './DapTourDescription';
 import {
   ItineraryReadOnlySummary,
   type ItineraryReadOnlyPhotoPreview,
-} from '@/components/booking/ItineraryBox';
-import { formatBookingRefForDisplay } from '@/lib/booking-ref';
-import type { Currency } from '@/lib/currency';
-import { useLocale, useTranslations } from '@/lib/booking/i18n';
-import Button, { ButtonHoverColor } from '@/components/button';
+} from './ItineraryBox';
+import { formatBookingRefForDisplay } from '../../../../../src/lib/booking-ref';
+import type { Currency } from '../../../../../src/lib/currency';
+import { useLocale, useTranslations } from '../../../../../src/lib/booking/i18n';
 import checkoutFormStyles from './CheckoutForm.module.css';
 import returnTimeStyles from './ReturnTimeSelector.module.css';
 import bookingStyles from './BookingDialog.module.css';
@@ -200,6 +199,14 @@ function dapSlotsPanelKey(ref: string, productOptionId: string): string {
 }
 
 export default function DependentAddOnBookingDialog() {
+  const { env, slots: hostSlots } = useBookingHost();
+  const Button = hostSlots.Button;
+  const ButtonHoverColor = hostSlots.ButtonHoverColor as {
+    Turquoise: string;
+    White: string;
+    Orange: string;
+  };
+
   const { t } = useTranslations();
   const { locale } = useLocale();
   const { isOpen, payload, close } = useDependentAddOnDialog();
@@ -391,7 +398,7 @@ export default function DependentAddOnBookingDialog() {
       void (async () => {
         try {
           const preview = await getDependentAddOnAvailability({
-            companyId: ENV.COMPANY_ID,
+            companyId: env.COMPANY_ID,
             primaryBookingReference: refTrim,
             lastName: lastNameTrim,
             dependentAddOnProductId: payload.dependentAddOnProductId,
@@ -494,7 +501,7 @@ export default function DependentAddOnBookingDialog() {
       const optKey = (productOptionId ?? '').trim();
       try {
         const avail = await getDependentAddOnAvailability({
-          companyId: ENV.COMPANY_ID,
+          companyId: env.COMPANY_ID,
           primaryBookingReference: ref,
           lastName,
           dependentAddOnProductId: payload.dependentAddOnProductId,
@@ -640,7 +647,7 @@ export default function DependentAddOnBookingDialog() {
     setPreparingPayment(true);
     try {
       const pi = await createDependentAddOnPaymentIntent({
-        companyId: ENV.COMPANY_ID,
+        companyId: env.COMPANY_ID,
         primaryBookingReference: ref,
         lastName: primaryBookingLastName.trim(),
         dependentAddOnProductId: payload.dependentAddOnProductId,

package/src/components/booking/DependentAddOnPaymentForm.tsx

@@ -1,16 +1,12 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
-import { ENV } from '@/lib/env';
-import { formatCurrencyAmount, type Currency } from '@/lib/currency';
+import { useBookingHost } from '../../runtime';
+import { formatCurrencyAmount, type Currency } from '../../../../../src/lib/currency';
 import bookingStyles from './BookingDialog.module.css';
 
-const stripePromise = ENV.STRIPE_PUBLISHABLE_KEY
-  ? loadStripe(ENV.STRIPE_PUBLISHABLE_KEY)
-  : null;
-
 function toCurrency(code: string | undefined): Currency {
   const c = (code ?? 'CAD').toUpperCase();
   if (c === 'USD' || c === 'EUR' || c === 'GBP' || c === 'AUD' || c === 'CAD') {
@@ -95,6 +91,13 @@ export function DependentAddOnPaymentForm({
   onSuccess: () => void;
   onError: (message: string) => void;
 }) {
+  const { env } = useBookingHost();
+  const stripePromise = useMemo(
+    () =>
+      env.STRIPE_PUBLISHABLE_KEY ? loadStripe(env.STRIPE_PUBLISHABLE_KEY) : null,
+    [env.STRIPE_PUBLISHABLE_KEY]
+  );
+
   if (!stripePromise) {
     return (
       <p className={bookingStyles.dapStripeNotice}>

package/src/components/booking/ItineraryBox.tsx

@@ -2,12 +2,12 @@
 
 import { Fragment, useRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import type { ItineraryDisplayStep } from '@/lib/booking-api';
-import { ItineraryStepType as StepType } from '@/lib/booking-api';
-import { getStepLabel } from '@/lib/booking/itinerary-labels';
-import type { PickupLocation } from '@/lib/booking-api';
-import type { DapItineraryStep } from '@/lib/dap-itinerary-preview';
-import { getPhotoSessionInsertPosition } from '@/lib/dap-itinerary-preview';
+import type { ItineraryDisplayStep } from '../../../../../src/lib/booking-api';
+import { ItineraryStepType as StepType } from '../../../../../src/lib/booking-api';
+import { getStepLabel } from '../../../../../src/lib/booking/itinerary-labels';
+import type { PickupLocation } from '../../../../../src/lib/booking-api';
+import type { DapItineraryStep } from '../../../../../src/lib/dap-itinerary-preview';
+import { getPhotoSessionInsertPosition } from '../../../../../src/lib/dap-itinerary-preview';
 import styles from './ItineraryBox.module.css';
 
 type TranslationFn = (key: string, params?: Record<string, string>) => string;

package/src/components/booking/ItineraryBuilder.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ItineraryBuilderDestination } from '@/lib/booking-api';
+import type { ItineraryBuilderDestination } from '../../../../../src/lib/booking-api';
 
 interface ItineraryBuilderProps {
   /** Shared destinations from product.itineraryBuilder */

package/src/components/booking/MealDrinkAddOnSelector.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useMemo, useCallback } from 'react';
-import { formatCurrencyAmount } from '@/lib/currency';
-import type { AddOn, AddOnVariant } from '@/lib/booking-api';
+import { formatCurrencyAmount } from '../../../../../src/lib/currency';
+import type { AddOn, AddOnVariant } from '../../../../../src/lib/booking-api';
 import type { Currency } from './CurrencySwitcher';
-import type { Locale } from '@/lib/booking/i18n/config';
+import type { Locale } from '../../../../../src/lib/booking/i18n/config';
 
 export interface AddOnSelection {
   addOnId: string;

package/src/components/booking/PickupLocationSelector.tsx

@@ -2,38 +2,38 @@
 
 import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { GoogleMap, Marker, InfoWindow, useJsApiLoader } from '@react-google-maps/api';
-import type { PickupLocation, Destination } from '@/lib/booking-api';
+import type { PickupLocation, Destination } from '../../../../../src/lib/booking-api';
 import {
   formatDistance,
   formatTime,
   geocodeAddress,
   isWithinPrivateShuttleServiceArea,
-} from '@/lib/booking/location-utils';
+} from '../../../../../src/lib/booking/location-utils';
 import {
   calculateNearbyLocations,
   isExactMatch,
-} from '@/lib/booking/location-calculations';
+} from '../../../../../src/lib/booking/location-calculations';
 import {
   getAutocompleteSuggestions,
   getPlaceDetails,
   type AutocompleteSuggestion,
-} from '@/lib/booking/places-api';
+} from '../../../../../src/lib/booking/places-api';
 import {
   createDistanceMarkerIcon,
   createPinMarkerIcon,
   createSearchedLocationPinIcon,
   createDestinationMarkerIcon,
-} from '@/lib/booking/marker-icons';
-import { ENV } from '@/lib/env';
+} from '../../../../../src/lib/booking/marker-icons';
+import { useBookingHost } from '../../runtime';
 import {
   calculateMapCenter,
   calculateMapBounds,
   getMapOptions,
   panToLocationIfNeeded,
-} from '@/lib/booking/map-utils';
-import type { SearchedLocation, NearbyLocation } from '@/lib/booking/pickup-location-types';
-import { useTranslations } from '@/lib/booking/i18n';
-import { useBookingApp } from '@/contexts/BookingAppContext';
+} from '../../../../../src/lib/booking/map-utils';
+import type { SearchedLocation, NearbyLocation } from '../../../../../src/lib/booking/pickup-location-types';
+import { useTranslations } from '../../../../../src/lib/booking/i18n';
+import { useBookingApp } from '../../contexts/BookingAppContext';
 import styles from './PickupLocationSelector.module.css';
 
 export interface CustomPickupLocation {
@@ -274,9 +274,10 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
   const searchInputRef = useRef<HTMLInputElement | null>(null);
   const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+  const { env } = useBookingHost();
   const { googleMapsApiKey: keyFromContext } = useBookingApp();
   const keyFromWindow = typeof window !== 'undefined' ? (window as unknown as { __TICKETBOOTH_GOOGLE_MAPS_API_KEY__?: string }).__TICKETBOOTH_GOOGLE_MAPS_API_KEY__ : undefined;
-  const googleMapsApiKey = keyFromContext ?? keyFromWindow ?? ENV.GOOGLE_MAPS_API_KEY;
+  const googleMapsApiKey = keyFromContext ?? keyFromWindow ?? env.GOOGLE_MAPS_API_KEY;
 
   // ============ Google Maps API Loading ============
   const { isLoaded, loadError } = useJsApiLoader({
@@ -1119,7 +1120,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                 {/* When "I don't know" filter is active, show only that option (unless hidden) */}
                 {!hideSkipOption && dontKnowFilterActive ? (
                   <label
-                    className="flex items-start gap-2 cursor-pointer p-2.5 rounded-lg hover:bg-stone-50 border border-stone-200"
+                    className="flex items-start gap-2 cursor-pointer p-2.5 rounded-lg hover:bg-stone-50"
                     onClick={(e) => {
                       e.preventDefault();
                       handleSkip();
@@ -1146,7 +1147,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                   <>
                 {/* Custom address option - show at TOP when user searched (Private Shuttle allows custom), and within service area if restricted */}
                 {allowCustomLocation && searchedLocation && !exactMatchLocationId && !cityFilter && isCustomLocationInServiceArea && (
-                  <label className="flex items-start gap-2 cursor-pointer p-3 rounded-lg hover:bg-emerald-50/50 border-2 border-emerald-500 bg-emerald-50/50 shadow-sm" onMouseEnter={() => { setHoveredMarker('searched'); mapRef.current && searchedLocation.coordinates && panToLocationIfNeeded(mapRef.current, searchedLocation.coordinates); }} onMouseLeave={() => setHoveredMarker(null)}>
+                  <label className="flex items-start gap-2 cursor-pointer p-3 rounded-lg hover:bg-emerald-50/60 bg-emerald-50/50 shadow-sm" onMouseEnter={() => { setHoveredMarker('searched'); mapRef.current && searchedLocation.coordinates && panToLocationIfNeeded(mapRef.current, searchedLocation.coordinates); }} onMouseLeave={() => setHoveredMarker(null)}>
                     <input type="radio" name="pickup-location" checked={selectedCustomAddress === searchedLocation.address} onChange={() => handleCustomLocationSelect(searchedLocation.address, searchedLocation.coordinates ?? undefined)} className="mt-1 w-4 h-4 text-emerald-600 focus:ring-emerald-500 shrink-0" />
                     <div className="flex-1 min-w-0">
                       <p className="font-semibold text-emerald-800 text-sm">{t('pickup.useThisAddress')}</p>
@@ -1159,10 +1160,10 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                   const isNearby = nearbyLocations.length > 0 && nearbyLocations.some(n => n.id === location.id);
                   const isPartnerHighlighted = highlightedPickupLocationIdSet.has(location.id);
                   return (
-                  <label key={location.id} className={`flex items-start gap-2 cursor-pointer p-2.5 rounded-lg border ${
+                  <label key={location.id} className={`flex items-start gap-2 cursor-pointer p-2.5 rounded-lg ${
                     isPartnerHighlighted
-                      ? 'border-emerald-300 bg-emerald-50/40 hover:bg-emerald-50'
-                      : 'border-stone-200 hover:bg-stone-50'
+                      ? 'bg-emerald-50/40 hover:bg-emerald-50'
+                      : 'hover:bg-stone-50'
                   }`} onMouseEnter={() => { setHoveredMarker(location.id); mapRef.current && location.coordinates && panToLocationIfNeeded(mapRef.current, location.coordinates); }} onMouseLeave={() => setHoveredMarker(null)}>
                     <input type="radio" name="pickup-location" checked={selectedLocationId === location.id} onChange={() => handleLocationSelect(location.id, location.name)} className="mt-1 w-4 h-4 text-emerald-600 focus:ring-emerald-500 shrink-0" />
                     <div className="flex-1 min-w-0">
@@ -1202,7 +1203,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                 {/* I don't know - only at end of list when no filters are selected (unless hidden) */}
                 {!hideSkipOption && selectedFilters.size === 0 && (
                   <label
-                    className="flex items-start gap-2 cursor-pointer p-2.5 rounded-lg hover:bg-stone-50 border border-stone-200"
+                    className="flex items-start gap-2 cursor-pointer p-2.5 rounded-lg hover:bg-stone-50"
                     onClick={(e) => {
                       e.preventDefault();
                       handleSkip();
@@ -1527,10 +1528,11 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
  * don't hit ApiProjectMapError.
  */
 export function PickupLocationSelector(props: PickupLocationSelectorProps) {
+  const { env } = useBookingHost();
   const { t } = useTranslations();
   const { googleMapsApiKey: keyFromContext } = useBookingApp();
   const keyFromWindow = typeof window !== 'undefined' ? (window as unknown as { __TICKETBOOTH_GOOGLE_MAPS_API_KEY__?: string }).__TICKETBOOTH_GOOGLE_MAPS_API_KEY__ : undefined;
-  const mapsKey = keyFromContext ?? keyFromWindow ?? ENV.GOOGLE_MAPS_API_KEY;
+  const mapsKey = keyFromContext ?? keyFromWindow ?? env.GOOGLE_MAPS_API_KEY;
   const hasMapsKey = Boolean(mapsKey?.trim());
   const showMapsDebug =
     typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('maps_debug') === '1';

package/src/components/booking/PickupTimeSelector.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import type { Availability } from '@/lib/booking-api';
-import type { ProductOption } from '@/lib/booking-api';
+import type { Availability } from '../../../../../src/lib/booking-api';
+import type { ProductOption } from '../../../../../src/lib/booking-api';
 import styles from './PickupTimeSelector.module.css';
 
 type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
@@ -98,7 +98,7 @@ export function PickupTimeSelector({
                   {t('booking.soldOut')}
                 </div>
               )}
-              {isInsufficientForParty && !isAdmin && (
+              {isInsufficientForParty && !isSoldOut && !isAdmin && (
                 <div className={styles.soldOut}>
                   {`Only ${timeInfo.vacancies} spot${timeInfo.vacancies === 1 ? '' : 's'} left, decrease your ticket count below to select this time`}
                 </div>

package/src/components/booking/PriceBreakdown.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useState } from 'react';
-import { formatCurrencyAmount } from '@/lib/currency';
-import type { PriceBreakdown as PriceBreakdownType } from '@/lib/booking/pricing';
-import { useTranslations } from '@/lib/booking/i18n';
-import { useBookingApp } from '@/contexts/BookingAppContext';
+import { formatCurrencyAmount } from '../../../../../src/lib/currency';
+import type { PriceBreakdown as PriceBreakdownType } from '../../../../../src/lib/booking/pricing';
+import { useTranslations } from '../../../../../src/lib/booking/i18n';
+import { useBookingApp } from '../../contexts/BookingAppContext';
 import type { Currency } from './CurrencySwitcher';
-import type { Locale } from '@/lib/booking/i18n/config';
+import type { Locale } from '../../../../../src/lib/booking/i18n/config';
 
 export interface PriceBreakdownProps {
   category: string;

package/src/components/booking/PriceSummary.module.css

@@ -0,0 +1,7 @@
+/**
+ * Receipt rules only where the design always had a line (subtotal row, total row).
+ * Tax/discount stay plain rows + spacing — lines above promo come from PromoCodeInput.promoRow.
+ */
+.ruleAbove {
+  border-top: 1px solid var(--booking-stone-200, #e7e5e4);
+}

package/src/components/booking/PriceSummary.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { formatCurrencyAmount } from '@/lib/currency';
-import type { PriceBreakdown as PriceBreakdownType } from '@/lib/booking/pricing';
+import { formatCurrencyAmount } from '../../../../../src/lib/currency';
+import type { PriceBreakdown as PriceBreakdownType } from '../../../../../src/lib/booking/pricing';
 import { PriceBreakdown } from './PriceBreakdown';
 import { InfoTooltip } from './InfoTooltip';
 import type { Currency } from './CurrencySwitcher';
-import type { Locale } from '@/lib/booking/i18n/config';
+import type { Locale } from '../../../../../src/lib/booking/i18n/config';
+import styles from './PriceSummary.module.css';
 
 /** One row in the price summary: either a ticket line (with optional breakdown tooltip) or a simple line. */
 export type PriceSummaryLine =
@@ -112,8 +113,8 @@ export function PriceSummary({
   const textSize = size === 'sm' ? 'text-sm' : 'text-base';
   const totalSize = size === 'sm' ? 'text-xl' : 'text-2xl';
   const subtotalRowClass = subtotalSpacing === 'relaxed'
-    ? 'pt-3 pb-3 mt-2 border-t border-stone-200'
-    : 'mt-2 pt-1.5 border-t border-stone-200';
+    ? `pt-3 pb-3 mt-2 ${styles.ruleAbove}`
+    : `mt-2 pt-1.5 ${styles.ruleAbove}`;
 
   let subtotalShown = false;
 
@@ -194,7 +195,7 @@ export function PriceSummary({
       <div className="space-y-0">
         {depositMode ? (
           <>
-            <div className={`flex justify-between gap-3 pt-2 border-t border-stone-200 min-w-0 ${totalSize}`}>
+            <div className={`flex justify-between gap-3 pt-2 min-w-0 ${totalSize} ${styles.ruleAbove}`}>
               <span className="font-semibold text-stone-900 min-w-0 truncate">
                 {t('common.total') && t('common.total') !== 'common.total' ? t('common.total') : 'Total'}
               </span>
@@ -218,7 +219,7 @@ export function PriceSummary({
             )}
           </>
         ) : (
-          <div className={`flex justify-between gap-3 pt-2 border-t border-stone-200 min-w-0 ${totalSize}`}>
+          <div className={`flex justify-between gap-3 pt-2 min-w-0 ${totalSize} ${styles.ruleAbove}`}>
             <span className="font-semibold text-stone-900 min-w-0 truncate">
               {totalLabel ??
                 (t('common.total') && t('common.total') !== 'common.total' ? t('common.total') : 'Total')}