@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/PickupLocationDialog.tsx

@@ -0,0 +1,357 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { formatBookingRefForDisplay } from '@/lib/booking-ref';
+import { fetchProducts, updatePickupLocation, previewPickupLocationChange, type PickupLocation, type Product } from '@/lib/booking-api';
+import type { BookingData, ItineraryDisplayStep } from '@/components/BookingDetails';
+import { PickupLocationSelector } from '@/components/booking/PickupLocationSelector';
+import Button, { ButtonHoverColor } from '@/components/button';
+import { useTranslations } from '@/lib/booking/i18n';
+import styles from './PickupLocationDialog.module.css';
+
+function findProductWithPickupLocations(
+  products: Product[],
+  bookingProductId: string
+): Product | null {
+  for (const p of products) {
+    if (p.productId === bookingProductId) return p;
+    if (p.pickupLocations?.some((loc) => loc.id === bookingProductId)) return p;
+    const opt = (p as Product & { options?: { optionId: string }[] })?.options?.find(
+      (o) => o.optionId === bookingProductId
+    );
+    if (opt) return p;
+  }
+  return null;
+}
+
+function getPickupTimeFromItinerary(itinerary: ItineraryDisplayStep[] | null | undefined): string {
+  if (!itinerary?.length) return '—';
+  const pickupStep = itinerary.find(s => s.stepType === 'pickup');
+  return pickupStep?.time?.trim() || 'TBD';
+}
+
+function getDropoffTimeFromItinerary(itinerary: ItineraryDisplayStep[] | null | undefined): string {
+  if (!itinerary?.length) return '—';
+  const dropOffStep = [...itinerary].reverse().find(s => s.stepType === 'drop_off');
+  return dropOffStep?.time?.trim() || 'TBD';
+}
+
+function getItineraryStepLabel(step: ItineraryDisplayStep, includeTime = false): string {
+  if (step.label?.trim()) {
+    const base = step.label.trim();
+    return includeTime && step.time?.trim() ? `${base} ${step.time.trim()}` : base;
+  }
+  const place = step.place?.trim();
+  const placeDisplay =
+    place === 'your_pickup_location'
+      ? 'your pickup location'
+      : place === 'the_destination'
+        ? 'the destination'
+        : place ?? '';
+  const timePart = includeTime && step.time?.trim() ? ` ${step.time.trim()}` : '';
+  switch (step.stepType) {
+    case 'pickup':
+      return placeDisplay ? `Pickup at ${placeDisplay}${timePart}` : `Pickup${timePart}`;
+    case 'drop_off':
+      return placeDisplay ? `Drop off at ${placeDisplay}${timePart}` : `Drop-off${timePart}`;
+    case 'arrive':
+      return placeDisplay ? `Arrive at ${placeDisplay}${timePart}` : `Arrive${timePart}`;
+    case 'depart':
+      return placeDisplay ? `Depart ${placeDisplay}${timePart}` : `Depart${timePart}`;
+    case 'trip_end':
+      return 'Trip ends';
+    case 'draft':
+      return placeDisplay || 'Stop';
+    default:
+      return placeDisplay || (step.stepType ?? 'Step');
+  }
+}
+
+interface PickupLocationDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  booking: BookingData;
+  onSuccess: (updatedBooking: BookingData) => void;
+}
+
+export default function PickupLocationDialog({
+  isOpen,
+  onClose,
+  booking,
+  onSuccess,
+}: PickupLocationDialogProps) {
+  const { t } = useTranslations();
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedLocationId, setSelectedLocationId] = useState<string | null>(
+    booking.pickupLocationId ?? null
+  );
+  const [selectedLocationName, setSelectedLocationName] = useState<string | null>(null);
+  const [selectedCustomAddress, setSelectedCustomAddress] = useState<string | null>(
+    booking.travelerHotel ?? null
+  );
+  const [saving, setSaving] = useState(false);
+  const [previewItinerary, setPreviewItinerary] = useState<ItineraryDisplayStep[] | null>(null);
+
+  const searchParams = useSearchParams();
+  const refFromUrl = searchParams.get('ref') || searchParams.get('bookingReference') || '';
+  const refFromBooking = formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference || '';
+  const effectiveBookingRef = (refFromUrl.trim() || refFromBooking).trim();
+
+  const companyId = booking.companyId ?? '';
+  const lastName = booking.customer?.lastName ?? '';
+  const isPrivateShuttle = booking.productType === 'PRIVATE_SHUTTLE';
+
+  const product = useMemo(
+    () => findProductWithPickupLocations(products, booking.productId),
+    [products, booking.productId]
+  );
+  const pickupLocations = product?.pickupLocations ?? [];
+  const destinations = product?.destinations ?? [];
+
+  const loadProducts = useCallback(async () => {
+    if (!companyId?.trim()) {
+      setError('Missing company information');
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchProducts(companyId);
+      setProducts(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load pickup locations');
+    } finally {
+      setLoading(false);
+    }
+  }, [companyId]);
+
+  useEffect(() => {
+    if (isOpen && companyId) loadProducts();
+  }, [isOpen, companyId, loadProducts]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedLocationId(booking.pickupLocationId ?? null);
+      setSelectedLocationName(null);
+      setSelectedCustomAddress(booking.travelerHotel ?? null);
+      setPreviewItinerary(null);
+    }
+  }, [isOpen, booking.pickupLocationId, booking.travelerHotel]);
+
+  const selectedPickupName = useMemo(() => {
+    if (selectedCustomAddress) return selectedCustomAddress;
+    if (selectedLocationId) {
+      return selectedLocationName ?? pickupLocations.find((l) => l.id === selectedLocationId)?.name ?? selectedLocationId;
+    }
+    return null;
+  }, [selectedLocationId, selectedLocationName, selectedCustomAddress, pickupLocations]);
+
+  const hasValidSelection = selectedLocationId || selectedCustomAddress;
+  const hasChanged =
+    selectedLocationId !== (booking.pickupLocationId ?? null) ||
+    selectedCustomAddress !== (booking.travelerHotel ?? null);
+
+  // Fetch preview itinerary when user selects a new pickup (to show new times)
+  useEffect(() => {
+    if (!isOpen || !hasValidSelection || !hasChanged || !lastName?.trim()) {
+      setPreviewItinerary(null);
+      return;
+    }
+    let cancelled = false;
+    const payload = selectedCustomAddress
+      ? { travelerHotel: selectedCustomAddress }
+      : selectedLocationId
+        ? { pickupLocationId: selectedLocationId }
+        : null;
+    if (!payload) return;
+    previewPickupLocationChange(effectiveBookingRef, lastName, payload)
+      .then((data) => {
+        if (!cancelled && data?.itineraryDisplay) {
+          setPreviewItinerary(data.itineraryDisplay as ItineraryDisplayStep[]);
+        } else {
+          setPreviewItinerary(null);
+        }
+      })
+      .catch(() => setPreviewItinerary(null));
+    return () => { cancelled = true; };
+  }, [isOpen, hasValidSelection, hasChanged, selectedLocationId, selectedCustomAddress, effectiveBookingRef, lastName]);
+
+  const currentPickupName =
+    booking.travelerHotel ||
+    (booking.pickupLocationId
+      ? pickupLocations.find((l) => l.id === booking.pickupLocationId)?.name ?? booking.pickupLocationId
+      : null);
+
+  const itineraryDisplay = booking.itineraryDisplay ?? [];
+  const pickupOrDropOffSteps = itineraryDisplay.filter(
+    (s) => s.stepType === 'pickup' || s.stepType === 'drop_off'
+  );
+
+  const handleSave = async () => {
+    if (!lastName?.trim()) {
+      setError('Last name is required to update pickup');
+      return;
+    }
+    if (!hasValidSelection) {
+      setError('Please select a pickup location');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      let payload: { pickupLocationId?: string; travelerHotel?: string };
+      if (selectedCustomAddress) {
+        payload = { travelerHotel: selectedCustomAddress };
+      } else if (selectedLocationId) {
+        payload = { pickupLocationId: selectedLocationId, travelerHotel: selectedLocationName ?? undefined };
+      } else {
+        setError('Please select a pickup location');
+        setSaving(false);
+        return;
+      }
+
+      const updated = await updatePickupLocation(
+        effectiveBookingRef,
+        lastName,
+        payload
+      );
+      onSuccess(updated as BookingData);
+      onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to update pickup location');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="pickup-dialog-title"
+    >
+      <div className={`${styles.modal} ${styles.pickupDialogRoot}`} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.header} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center' }}>
+          <span className={styles.headerSpacer} aria-hidden />
+          <h2 id="pickup-dialog-title" className={styles.title} style={{ textAlign: 'center', justifySelf: 'center' }}>
+            {t('pickup.title') || 'Select pickup location'}
+          </h2>
+          <button type="button" onClick={onClose} className={styles.closeBtn} aria-label="Close">
+            <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className={styles.content}>
+          {loading ? (
+            <div className={styles.loading}>Loading pickup locations…</div>
+          ) : error && !pickupLocations.length ? (
+            <div className={styles.error}>{error}</div>
+          ) : pickupLocations.length === 0 ? (
+            <div className={styles.empty}>No pickup locations available for this tour.</div>
+          ) : (
+            <>
+              <div className={styles.currentPickupSection}>
+                <p className={styles.currentPickupLabel}>Current pickup</p>
+                <p className={styles.currentPickupName}>
+                  {currentPickupName ?? (t('booking.pickupLocationUnknown') || "I don't know")}
+                </p>
+                {(booking.pickupLocationId || booking.travelerHotel) && (
+                  <p className={styles.currentPickupTimes}>
+                    Pickup: {getPickupTimeFromItinerary(itineraryDisplay)} · Drop-off: {getDropoffTimeFromItinerary(itineraryDisplay)}
+                  </p>
+                )}
+              </div>
+              <div
+                className={`${styles.selectorWrapper} ${styles.selectorWrapperConstrained}`}
+                style={{ fontFamily: "'Figtree', sans-serif" }}
+              >
+                <PickupLocationSelector
+                  hideTitle
+                  hideSkipOption
+                  pickupLocations={pickupLocations}
+                  selectedLocationId={selectedLocationId}
+                  selectedCustomAddress={selectedCustomAddress}
+                  allowCustomLocation={isPrivateShuttle}
+                  restrictCustomLocationToServiceArea={isPrivateShuttle}
+                  destinations={destinations}
+                  onLocationSelect={(locationId, customLocation, locationName) => {
+                    setError('');
+                    if (customLocation) {
+                      setSelectedLocationId(null);
+                      setSelectedLocationName(null);
+                      setSelectedCustomAddress(customLocation.address);
+                    } else {
+                      setSelectedLocationId(locationId);
+                      setSelectedLocationName(locationName ?? null);
+                      setSelectedCustomAddress(null);
+                    }
+                  }}
+                />
+              </div>
+
+              {hasValidSelection && hasChanged && pickupOrDropOffSteps.length > 0 && (
+                <div className={styles.itineraryPreview}>
+                  <h3 className={styles.previewTitle}>Itinerary changes</h3>
+                  <p className={styles.previewIntro}>
+                    Your itinerary will be updated with the new pickup location:
+                  </p>
+                  <ul className={styles.previewList}>
+                    {pickupOrDropOffSteps.map((step, i) => {
+                      const previewStep = previewItinerary?.find(s => s.stepType === step.stepType);
+                      const newTime = previewStep?.time?.trim();
+                      const newLabel =
+                        step.stepType === 'pickup'
+                          ? selectedPickupName
+                            ? `Pickup at ${selectedPickupName}${newTime ? ` ${newTime}` : ''}`
+                            : t('booking.pickupLocationUnknown') || "I don't know"
+                          : step.stepType === 'drop_off'
+                            ? selectedPickupName
+                              ? `Drop off at ${selectedPickupName}${newTime ? ` ${newTime}` : ''}`
+                              : t('booking.pickupLocationUnknown') || "I don't know"
+                            : getItineraryStepLabel(previewStep ?? step, true);
+                      return (
+                        <li key={i} className={styles.previewItem}>
+                          <span className={styles.previewOld}>
+                            {getItineraryStepLabel(step, true)}
+                          </span>
+                          <span className={styles.previewArrow}>→</span>
+                          <span className={styles.previewNew}>{newLabel}</span>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              )}
+
+              {error && <div className={styles.error}>{error}</div>}
+
+              <div className={styles.footer}>
+                <Button variant="outline" className={styles.cancelBtn} onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  hoverColor={ButtonHoverColor.Turquoise}
+                  onClick={handleSave}
+                  disabled={!hasValidSelection || !hasChanged || saving}
+                >
+                  {saving ? 'Saving…' : 'Save pickup location'}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/PickupLocationMap.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React, { useCallback } from 'react';
+import { useJsApiLoader, GoogleMap, Marker, InfoWindow } from '@react-google-maps/api';
+import { calculateMapCenter, getMapOptions, calculateMapBounds } from '@/lib/pickup/map-utils';
+import { createPinMarkerIcon } from '@/lib/pickup/marker-icons';
+import { ENV } from '@/lib/env';
+import type { PickupLocation } from '@/lib/booking-api';
+import styles from './PickupLocationDialog.module.css';
+
+const libraries: ('places')[] = ['places'];
+const MARKER_COLOR = '#dc2626';
+const MARKER_HOVER = '#1e3a8a';
+
+interface PickupLocationMapProps {
+  pickupLocations: PickupLocation[];
+  selectedLocationId: string | null;
+  onSelectLocation: (id: string) => void;
+  onMarkerClick?: (id: string) => void;
+  saving: boolean;
+}
+
+export default function PickupLocationMap({
+  pickupLocations,
+  selectedLocationId,
+  onSelectLocation,
+  onMarkerClick,
+  saving,
+}: PickupLocationMapProps) {
+  const [hoveredMarker, setHoveredMarker] = React.useState<string | null>(null);
+  const [selectedMarker, setSelectedMarker] = React.useState<string | null>(null);
+
+  const { isLoaded, loadError } = useJsApiLoader({
+    id: 'google-map-pickup',
+    googleMapsApiKey: ENV.GOOGLE_MAPS_API_KEY,
+    libraries,
+  });
+
+  const locationsWithCoords = pickupLocations.filter((l) => l.coordinates);
+  const mapCenter = calculateMapCenter(locationsWithCoords);
+  const mapOptions = getMapOptions();
+  const mapBounds = calculateMapBounds(locationsWithCoords);
+
+  const onMapLoad = useCallback(
+    (map: google.maps.Map) => {
+      if (mapBounds) {
+        map.fitBounds(mapBounds, { top: 50, right: 50, bottom: 50, left: 50 });
+      }
+    },
+    [mapBounds]
+  );
+
+  if (!isLoaded || loadError || locationsWithCoords.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.mapContainer}>
+      <GoogleMap
+        mapContainerClassName={styles.map}
+        center={mapCenter}
+        zoom={10}
+        options={mapOptions}
+        onLoad={onMapLoad}
+      >
+        {locationsWithCoords.map((loc) => {
+          if (!loc.coordinates) return null;
+          const isHovered = hoveredMarker === loc.id;
+          const isSelected = selectedLocationId === loc.id;
+          return (
+            <Marker
+              key={loc.id}
+              position={loc.coordinates}
+              title={loc.name}
+              zIndex={isHovered || isSelected ? 200 : 100}
+              icon={{
+                url: createPinMarkerIcon(isHovered || isSelected ? MARKER_HOVER : MARKER_COLOR),
+                scaledSize: new google.maps.Size(32, 40),
+                anchor: new google.maps.Point(16, 40),
+              }}
+              onMouseOver={() => setHoveredMarker(loc.id)}
+              onMouseOut={() => setHoveredMarker(null)}
+              onClick={() => {
+                setSelectedMarker(loc.id);
+                onMarkerClick?.(loc.id);
+              }}
+            >
+              {selectedMarker === loc.id && (
+                <InfoWindow onCloseClick={() => setSelectedMarker(null)}>
+                  <div className={styles.infoWindow}>
+                    <h3 className={styles.infoTitle}>{loc.name}</h3>
+                    <p className={styles.infoAddress}>{loc.address}</p>
+                    <button
+                      type="button"
+                      onClick={() => onSelectLocation(loc.id)}
+                      className={styles.selectBtn}
+                      disabled={saving}
+                    >
+                      {saving ? 'Saving…' : 'Select this location'}
+                    </button>
+                  </div>
+                </InfoWindow>
+              )}
+            </Marker>
+          );
+        })}
+      </GoogleMap>
+    </div>
+  );
+}

package/src/components/PostBookingDependentAddOnUpsell.module.css

@@ -0,0 +1,174 @@
+/* Compact photo-session-style cards (aligned with photo-products-section.module.css) */
+
+.section {
+  background-color: var(--primary-background);
+  border-radius: 24px;
+  padding: var(--spacing-large);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.header {
+  margin-bottom: var(--spacing-medium);
+}
+
+.title {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: var(--primary-text);
+  margin: 0 0 0.5rem 0;
+  line-height: 1.3;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--grey-text);
+}
+
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
+  gap: 0.875rem;
+}
+
+@media (min-width: 480px) {
+  .cardGrid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+  }
+}
+
+.card {
+  height: 100%;
+  width: 100%;
+  display: block;
+  position: relative;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.35s ease, transform 0.35s ease;
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--accent-turquoise, #0d9488);
+  outline-offset: 2px;
+}
+
+.card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+  transform: translateY(-2px);
+}
+
+.imageWrap {
+  width: 100%;
+  height: 200px;
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+}
+
+.cardImage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 0.5s ease;
+  will-change: transform;
+}
+
+.cardImage::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 30%;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
+  z-index: 1;
+}
+
+@media (min-width: 1024px) {
+  .card:hover .cardImage {
+    transform: scale(1.08);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    transition: none;
+  }
+
+  .card:hover {
+    transform: none;
+  }
+
+  .cardImage {
+    transition: none;
+  }
+
+  .card:hover .cardImage {
+    transform: none;
+  }
+}
+
+.cardTitle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0.5rem 0.45rem;
+  color: white;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  font-family: 'Poppins', sans-serif;
+  text-transform: lowercase;
+  font-size: 0.95rem;
+  font-weight: 700;
+  z-index: 2;
+  line-height: 1.15;
+  text-align: center;
+}
+
+@media (min-width: 480px) {
+  .cardTitle {
+    font-size: 1rem;
+  }
+}
+
+.cardInfo {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  padding: 0.45rem 0.5rem;
+}
+
+.infoLine {
+  color: var(--accent-white, #fff);
+  font-family: 'Figtree', sans-serif;
+  font-weight: 700;
+  font-size: 0.7rem;
+  line-height: 1.15;
+  margin: 0 0 0.2rem 0;
+}
+
+.infoLine:last-child {
+  margin-bottom: 0;
+}
+
+@media (min-width: 480px) {
+  .infoLine {
+    font-size: 0.75rem;
+  }
+}