@ticketboothapp/booking 0.1.18 → 0.1.20

package/src/components/PickupLocationDialog.tsx

@@ -1,357 +0,0 @@
-'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

@@ -1,110 +0,0 @@
-'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

@@ -1,174 +0,0 @@
-/* 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;
-  }
-}