@ticketboothapp/booking 0.1.22 → 1.2.24

package/src/components/PickupLocationDialog.module.css

@@ -1,360 +0,0 @@
-/* Root class for scoping - nested selectors override Tailwind */
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-}
-
-.modal {
-  background: var(--primary-background, #fff);
-  border-radius: 24px;
-  max-width: 900px;
-  width: 100%;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
-}
-
-.pickupDialogRoot .header {
-  display: grid !important;
-  grid-template-columns: auto 1fr auto !important;
-  align-items: center !important;
-  gap: 0.75rem !important;
-  padding: 1rem 0.75rem !important;
-  border-bottom: 1px solid #e5e7eb !important;
-}
-
-.pickupDialogRoot .headerSpacer {
-  display: block;
-  width: 2.5rem;
-  height: 2.5rem;
-  flex-shrink: 0;
-}
-
-.pickupDialogRoot .title {
-  font-family: 'Poppins', sans-serif !important;
-  font-weight: 800 !important;
-  font-size: 1.5rem !important;
-  color: var(--accent-orange, #e85a2e) !important;
-  margin: 0 !important;
-  justify-self: center !important;
-  text-align: center !important;
-}
-
-.pickupDialogRoot .closeBtn {
-  background: none !important;
-  border: none !important;
-  padding: 0.5rem !important;
-  cursor: pointer !important;
-  color: var(--grey-text, #6b7280) !important;
-}
-
-.pickupDialogRoot .closeBtn:hover {
-  color: var(--primary-text, #1f2937) !important;
-}
-
-.pickupDialogRoot .content {
-  padding: var(--spacing-large);
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex: 1;
-  min-width: 0;
-}
-
-.pickupDialogRoot .loading,
-.pickupDialogRoot .error,
-.pickupDialogRoot .empty {
-  text-align: center;
-  padding: 2rem;
-  color: var(--grey-text, #6b7280);
-}
-
-.pickupDialogRoot .error {
-  color: #dc2626;
-}
-
-/* Current pickup section - shown when dialog opens */
-.pickupDialogRoot .currentPickupSection {
-  margin-bottom: 1.25rem;
-  padding: 1rem;
-  background: var(--accent-orange-10, rgba(0, 0, 0, 0.04));
-  border-radius: 12px;
-  border: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
-}
-
-.pickupDialogRoot .currentPickupLabel {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--grey-text, #6b7280);
-  margin: 0 0 0.25rem 0;
-}
-
-.pickupDialogRoot .currentPickupName {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--primary-text, #1f2937);
-  margin: 0 0 0.25rem 0;
-}
-
-.pickupDialogRoot .currentPickupTimes {
-  font-size: 0.875rem;
-  color: var(--grey-text, #6b7280);
-  margin: 0;
-}
-
-.pickupDialogRoot .selectorWrapper {
-  margin-bottom: 1.5rem;
-}
-
-/* Prevent input overflow - constrain width in flex/grid layouts */
-.pickupDialogRoot .selectorWrapperConstrained {
-  min-width: 0;
-  overflow: hidden;
-}
-
-.pickupDialogRoot .selectorWrapperConstrained > div {
-  min-width: 0;
-}
-
-/* Override Tailwind resets for input and filter pills when inside dialog */
-.pickupDialogRoot .selectorWrapper input[data-pickup-search],
-.pickupDialogRoot .selectorWrapper input[type="text"] {
-  width: 100% !important;
-  max-width: 100% !important;
-  box-sizing: border-box !important;
-  padding: 0.5rem 1rem 0.5rem 2.5rem !important;
-  font-family: 'Figtree', sans-serif !important;
-  font-size: 1rem !important;
-  line-height: 1.5 !important;
-  color: #1c1917 !important;
-  background-color: #fff !important;
-  border: 1px solid #d6d3d1 !important;
-  border-radius: 0.5rem !important;
-}
-
-.pickupDialogRoot .selectorWrapper input::placeholder {
-  color: #a8a29e !important;
-}
-
-.pickupDialogRoot .selectorWrapper input:focus {
-  outline: none !important;
-  border-color: #78716c !important;
-}
-
-.pickupDialogRoot .cancelBtn {
-  border-color: var(--grey-text);
-  color: var(--grey-text);
-}
-
-/* Filter pills - match booking flow (PrivateShuttleBookingFlow / CheckoutForm) */
-.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] {
-  display: flex !important;
-  flex-wrap: nowrap !important;
-  align-items: center !important;
-  gap: 0.5rem !important;
-  margin-bottom: 1rem !important;
-}
-
-.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] > div:first-child {
-  display: flex !important;
-  flex-wrap: wrap !important;
-  gap: 0.5rem !important;
-}
-
-.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button {
-  padding: 0.875rem 1.25rem !important;
-  font-family: 'Figtree', sans-serif !important;
-  font-size: 0.875rem !important;
-  font-weight: 500 !important;
-  border-radius: 9999px !important;
-  transition: background-color 0.15s, color 0.15s !important;
-  flex-shrink: 0 !important;
-  border: none !important;
-  cursor: pointer !important;
-}
-
-/* Unselected - stone/grey to match booking flow */
-.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button:not([class*="bg-emerald"]) {
-  background-color: #f5f5f4 !important;
-  color: #44403c !important;
-}
-
-.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button:hover:not([class*="bg-emerald"]) {
-  background-color: #e7e5e4 !important;
-}
-
-/* Selected - emerald green to match booking flow */
-.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button[class*="bg-emerald"] {
-  background-color: #059669 !important;
-  color: #fff !important;
-}
-
-.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button[class*="bg-emerald"]:hover {
-  background-color: #047857 !important;
-}
-
-.pickupDialogRoot .mapContainer {
-  margin-bottom: var(--spacing-medium);
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
-}
-
-.map {
-  width: 100%;
-  height: 320px;
-}
-
-.mapFallback {
-  font-size: 0.875rem;
-  color: var(--grey-text);
-  margin-bottom: var(--spacing-medium);
-}
-
-.infoWindow {
-  padding: 0.25rem;
-  min-width: 200px;
-}
-
-.infoTitle {
-  font-weight: 600;
-  margin: 0 0 0.25rem 0;
-  font-size: 1rem;
-}
-
-.infoAddress {
-  font-size: 0.875rem;
-  color: var(--grey-text);
-  margin: 0 0 0.5rem 0;
-}
-
-.selectBtn {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  background: var(--accent-orange, #e85a2e);
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-weight: 600;
-  font-size: 0.875rem;
-  cursor: pointer;
-}
-
-.selectBtn:hover:not(:disabled) {
-  background: #e85a2e;
-  opacity: 0.9;
-}
-
-.selectBtn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: var(--spacing-large);
-}
-
-.listItem {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 1rem;
-  border: 2px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
-  border-radius: 12px;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  transition: border-color 0.15s, background 0.15s;
-}
-
-.listItem:hover {
-  border-color: var(--accent-orange, #e85a2e);
-  background: rgba(232, 90, 46, 0.05);
-}
-
-.listItemSelected {
-  border-color: var(--accent-orange, #e85a2e);
-  background: rgba(232, 90, 46, 0.08);
-}
-
-.listName {
-  font-weight: 600;
-  color: var(--primary-text, #1f2937);
-}
-
-.listAddress {
-  font-size: 0.875rem;
-  color: var(--grey-text);
-  margin-top: 0.25rem;
-}
-
-.pickupDialogRoot .footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding-top: var(--spacing-medium);
-  border-top: 1px solid #e5e7eb !important;
-}
-
-/* Itinerary preview before save */
-.pickupDialogRoot .itineraryPreview {
-  margin-top: 1rem;
-  padding: 1rem;
-  background: var(--accent-orange-10, rgba(0, 0, 0, 0.04));
-  border-radius: 12px;
-  border: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
-}
-
-.pickupDialogRoot .previewTitle {
-  font-size: 0.875rem;
-  font-weight: 600;
-  margin: 0 0 0.5rem 0;
-  color: var(--primary-text, #1f2937);
-}
-
-.pickupDialogRoot .previewIntro {
-  font-size: 0.8125rem;
-  color: var(--grey-text, #6b7280);
-  margin: 0 0 0.75rem 0;
-}
-
-.pickupDialogRoot .previewList {
-  margin: 0;
-  padding-left: 1.25rem;
-  font-size: 0.8125rem;
-}
-
-.pickupDialogRoot .previewItem {
-  margin-bottom: 0.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0.5rem;
-}
-
-.pickupDialogRoot .previewOld {
-  color: var(--grey-text, #6b7280);
-  text-decoration: line-through;
-}
-
-.pickupDialogRoot .previewArrow {
-  color: var(--accent-orange, #e85a2e);
-  font-weight: 600;
-}
-
-.pickupDialogRoot .previewNew {
-  color: var(--primary-text, #1f2937);
-  font-weight: 500;
-}

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>
-  );
-}