@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

package/src/components/booking/ItineraryBox.tsx

@@ -0,0 +1,550 @@
+'use client';
+
+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 styles from './ItineraryBox.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+
+const TOOLTIP_TEXT = 'Approximate time - will be finalized when you select a pickup location';
+
+function TooltipAnchor({
+  showTooltip,
+  isMobile,
+  onTooltipToggle,
+  onTooltipShow,
+}: {
+  showTooltip: boolean;
+  isMobile: boolean;
+  onTooltipToggle: () => void;
+  onTooltipShow: (show: boolean) => void;
+}) {
+  const anchorRef = useRef<HTMLSpanElement>(null);
+  const [tooltipStyle, setTooltipStyle] = useState<React.CSSProperties>({});
+
+  useEffect(() => {
+    if (!showTooltip || !anchorRef.current || typeof document === 'undefined') return;
+    const rect = anchorRef.current.getBoundingClientRect();
+    const vw = typeof window !== 'undefined' ? window.innerWidth : 375;
+    const vh = typeof window !== 'undefined' ? window.innerHeight : 667;
+    const tooltipWidth = 280;
+    const padding = 16;
+
+    if (isMobile) {
+      const effectiveWidth = Math.min(tooltipWidth, vw - padding * 2);
+      const leftClamped = Math.max(padding, Math.min(rect.left, vw - effectiveWidth - padding));
+      const spaceBelow = vh - rect.bottom - padding;
+      const preferAbove = spaceBelow < 100;
+
+      setTooltipStyle({
+        position: 'fixed',
+        left: leftClamped,
+        ...(preferAbove
+          ? { bottom: vh - rect.top + 4, maxHeight: rect.top - padding }
+          : { top: rect.bottom + 4, maxHeight: Math.min(200, spaceBelow - 8) }),
+        width: effectiveWidth,
+        overflowY: 'auto',
+        zIndex: 99999,
+      });
+    } else {
+      const maxW = Math.min(320, vw - padding * 2);
+      const centerX = rect.left + rect.width / 2;
+      const left = Math.max(padding + maxW / 2, Math.min(centerX, vw - padding - maxW / 2));
+
+      setTooltipStyle({
+        position: 'fixed',
+        left,
+        top: rect.top - 4,
+        transform: 'translate(-50%, -100%)',
+        maxWidth: maxW,
+        zIndex: 99999,
+      });
+    }
+  }, [showTooltip, isMobile]);
+
+  return (
+    <>
+      <span className="relative inline-block" data-tooltip-icon ref={anchorRef}>
+        <svg
+          className="w-4 h-4 text-stone-400 cursor-pointer shrink-0"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          onClick={(e) => {
+            e.stopPropagation();
+            onTooltipToggle();
+          }}
+          onMouseEnter={() => !isMobile && onTooltipShow(true)}
+          onMouseLeave={() => !isMobile && onTooltipShow(false)}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </span>
+      {showTooltip &&
+        typeof document !== 'undefined' &&
+        createPortal(
+          <span
+            className="whitespace-normal text-xs bg-stone-800 text-white px-3 py-2 rounded shadow-lg pointer-events-none"
+            style={tooltipStyle}
+          >
+            {TOOLTIP_TEXT}
+          </span>,
+          document.body
+        )}
+    </>
+  );
+}
+
+interface ItineraryBoxProps {
+  selectedDate: string;
+  formattedDate: string;
+  itineraryItems: ItineraryDisplayStep[] | null;
+  isBookingComplete: boolean;
+  isItinerarySticky: boolean;
+  /** When set, CSS `position: sticky` uses this `top` (px) so the box clears host sticky headers. */
+  stickyTopPx?: number;
+  isMobile: boolean;
+  useWindowScroll?: boolean;
+  showTooltip: boolean;
+  selectedPickupLocation: PickupLocation | null | undefined;
+  pickupLocationSkipped: boolean;
+  pickupLocationsCount: number;
+  itineraryRef: React.RefObject<HTMLDivElement | null>;
+  t: TranslationFn;
+  onTooltipToggle: () => void;
+  onTooltipShow: (show: boolean) => void;
+}
+
+export function ItineraryBox({
+  selectedDate,
+  formattedDate,
+  itineraryItems,
+  isBookingComplete,
+  isItinerarySticky,
+  stickyTopPx = 0,
+  isMobile,
+  useWindowScroll = false,
+  showTooltip,
+  selectedPickupLocation,
+  pickupLocationSkipped,
+  pickupLocationsCount,
+  itineraryRef,
+  t,
+  onTooltipToggle,
+  onTooltipShow,
+}: ItineraryBoxProps) {
+  if (!selectedDate) return null;
+  if (!itineraryItems || itineraryItems.length === 0) return null;
+
+  const abbreviateDestination = (text: string): string => {
+    const abbreviations: Record<string, string> = {
+      'Moraine Lake': 'ML',
+      'Lake Louise': 'LL',
+      'Banff': 'B',
+      'Jasper': 'J',
+      'Canmore': 'C',
+    };
+    for (const [full, abbrev] of Object.entries(abbreviations)) {
+      if (text.includes(full)) {
+        return text.replace(full, abbrev);
+      }
+    }
+    return text;
+  };
+
+  const handlePickupLocationClick = () => {
+    const pickupSection = document.getElementById('pickup-location-section');
+    if (!pickupSection) return;
+
+    const findScrollParent = (node: HTMLElement): HTMLElement | null => {
+      let parent = node.parentElement;
+      while (parent) {
+        const { overflowY } = getComputedStyle(parent);
+        if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') return parent;
+        parent = parent.parentElement;
+      }
+      return null;
+    };
+
+    const scrollParent = useWindowScroll ? null : findScrollParent(pickupSection);
+    const itineraryBox = document.querySelector('[class*="sticky top-"]');
+    const itineraryHeight = itineraryBox?.getBoundingClientRect().height ?? 0;
+    // Extra offset so sticky header doesn't block the pickup section (mobile needs more clearance)
+    const STICKY_HEADER_CLEARANCE = isMobile ? 280 : 270;
+    const targetOffsetFromTop = itineraryHeight + 16 + STICKY_HEADER_CLEARANCE;
+
+    if (scrollParent) {
+      const elementPosition = pickupSection.getBoundingClientRect().top;
+      const scrollDelta = elementPosition - targetOffsetFromTop;
+      scrollParent.scrollTo({
+        top: Math.max(0, scrollParent.scrollTop + scrollDelta),
+        behavior: 'smooth',
+      });
+    } else if (typeof window !== 'undefined') {
+      const elementPosition = pickupSection.getBoundingClientRect().top + window.scrollY;
+      const scrollTop = Math.max(0, elementPosition - targetOffsetFromTop);
+      window.scrollTo({ top: scrollTop, behavior: 'smooth' });
+    }
+  };
+
+  const getDisplayLabel = (label: string): string => {
+    if (isItinerarySticky && isMobile) {
+      return abbreviateDestination(label);
+    }
+    return label;
+  };
+
+  const stickyTop = Math.max(0, stickyTopPx ?? 0);
+
+  return (
+    <div
+      ref={itineraryRef as React.RefObject<HTMLDivElement>}
+      className={`${styles.box} ${isItinerarySticky ? styles.boxSticky : styles.boxExpanded}`}
+      style={stickyTop > 0 ? { top: stickyTop } : undefined}
+    >
+      <h3 className={`${styles.title} ${isItinerarySticky ? styles.titleSticky : styles.titleExpanded}`}>
+        {!isBookingComplete && (
+          <svg className={`${styles.icon} ${isItinerarySticky ? styles.iconSticky : styles.iconExpanded}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+          </svg>
+        )}
+        {t('booking.buildYourItinerary')}
+        {formattedDate && (
+          <span className={styles.dateSubtitle}> · {formattedDate}</span>
+        )}
+      </h3>
+      {itineraryItems.length > 0 && (
+        <div className={isItinerarySticky ? styles.itemsSticky : styles.itemsExpanded}>
+          {itineraryItems.map((item, index) => {
+            const itemLabel = getStepLabel(item, t);
+            const isUncertain =
+              !item.time ||
+              (!selectedPickupLocation &&
+                !pickupLocationSkipped &&
+                (item.stepType === StepType.pickup || item.stepType === StepType.drop_off));
+            const hasTime = !!item.time;
+            const isPlaceholder = item.stepType === StepType.trip_end && !item.time;
+            const isPickupTime = index === 0 && item.stepType === StepType.pickup;
+            const isApproximatePickupTime = isPickupTime && !selectedPickupLocation && (pickupLocationsCount > 0 || pickupLocationSkipped);
+
+            let formattedTime = '';
+            if (item.time) {
+              formattedTime = item.time.replace(/^at /i, '');
+              formattedTime = formattedTime.replace(/:00(?=\s*(AM|PM))/i, '');
+            }
+
+            const isUncertainPickupOrDropOff =
+              isUncertain && (item.stepType === StepType.pickup || item.stepType === StepType.drop_off);
+
+            const locationOnlyDisplay =
+              item.place === 'your_pickup_location' ? t('booking.yourPickupLocation') : (item.place ?? '');
+            const prefixKey =
+              item.stepType === StepType.pickup ? 'booking.pickupAtPrefix' : 'booking.dropOffAtPrefix';
+
+            const content = (
+              <>
+                {hasTime ? (
+                  <span className="inline-flex items-center gap-1.5 flex-wrap">
+                    <span className={`inline-flex items-center gap-1.5 shrink-0 ${(formattedTime === 'TBD' && isUncertain) || isApproximatePickupTime ? 'text-stone-400' : 'font-bold text-stone-900'}`}>
+                      {(formattedTime === 'TBD' && isUncertain) && (
+                        <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                      )}
+                      {isApproximatePickupTime && formattedTime !== 'TBD' && (
+                        <TooltipAnchor
+                          showTooltip={showTooltip}
+                          isMobile={isMobile}
+                          onTooltipToggle={onTooltipToggle}
+                          onTooltipShow={onTooltipShow}
+                        />
+                      )}
+                      <span className="shrink-0 font-bold">{formattedTime}</span>
+                    </span>
+                    <span className="text-stone-400 shrink-0">-</span>
+                    <span className="text-stone-600">
+                      {isUncertainPickupOrDropOff ? (
+                        <>
+                          {t(prefixKey)}
+                          <button
+                            type="button"
+                            onClick={handlePickupLocationClick}
+                            className="text-stone-400 hover:text-stone-600 underline cursor-pointer"
+                          >
+                            {getDisplayLabel(locationOnlyDisplay)}
+                          </button>
+                        </>
+                      ) : isUncertain ? (
+                        <span className="text-stone-400 underline">{getDisplayLabel(itemLabel)}</span>
+                      ) : (
+                        getDisplayLabel(itemLabel)
+                      )}
+                    </span>
+                  </span>
+                ) : isPlaceholder ? (
+                  <span className="text-stone-400">{itemLabel}</span>
+                ) : (
+                  <span className="inline-flex items-center gap-1.5 flex-wrap">
+                    <span className={`inline-flex items-center gap-1.5 shrink-0 ${isUncertain ? 'text-stone-400' : 'font-bold text-stone-900'}`}>
+                      {isUncertain && (
+                        <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                      )}
+                      <span className="shrink-0 font-bold">TBD</span>
+                    </span>
+                    <span className="text-stone-400 shrink-0">-</span>
+                    <span className="text-stone-600">
+                      {isUncertainPickupOrDropOff ? (
+                        <>
+                          {t(prefixKey)}
+                          <button
+                            type="button"
+                            onClick={handlePickupLocationClick}
+                            className="text-stone-400 hover:text-stone-600 underline cursor-pointer"
+                          >
+                            {getDisplayLabel(locationOnlyDisplay)}
+                          </button>
+                        </>
+                      ) : (
+                        <span className="text-stone-400 underline">{getDisplayLabel(itemLabel)}</span>
+                      )}
+                    </span>
+                  </span>
+                )}
+              </>
+            );
+
+            if (isItinerarySticky) {
+              return (
+                <span key={index} className={`${styles.item} ${styles.itemSticky}`}>
+                  {content}
+                  {index < itineraryItems.length - 1 && (
+                    <span className={styles.separator}>
+                      <svg className="w-3 h-3 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                      </svg>
+                    </span>
+                  )}
+                </span>
+              );
+            }
+
+            return (
+              <div key={index} className={`${styles.item}`}>
+                {content}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type ItineraryReadOnlySummaryStatus = 'loading' | 'error' | 'ready';
+
+export type ItineraryReadOnlyPhotoPreview = {
+  sessionTimeRangeLabel: string;
+  photographerLabel: string;
+  sessionLengthLabel: string | null;
+  primaryItinerarySteps: DapItineraryStep[];
+  slotStartIso: string;
+  slotEndIso: string;
+};
+
+function formatReadOnlyItineraryTime(time: string): string {
+  let formattedTime = time;
+  if (formattedTime) {
+    formattedTime = formattedTime.replace(/^at /i, '');
+    formattedTime = formattedTime.replace(/:00(?=\s*(AM|PM))/i, '');
+  }
+  return formattedTime;
+}
+
+function ReadOnlyPhotoSessionItineraryRow({
+  sessionTimeRangeLabel,
+  photographerLabel,
+  sessionLengthLabel,
+  photoAddOnTitle,
+}: {
+  sessionTimeRangeLabel: string;
+  photographerLabel: string;
+  sessionLengthLabel: string | null;
+  photoAddOnTitle: string;
+}) {
+  const sub = ['Photographer: ' + photographerLabel, sessionLengthLabel].filter(Boolean).join(' · ');
+  return (
+    <div className={styles.item}>
+      <span className="inline-flex items-center gap-1.5 flex-wrap">
+        <span className={`inline-flex shrink-0 ${styles.readOnlyPhotoTime}`}>
+          {sessionTimeRangeLabel}
+        </span>
+        <span className={`shrink-0 ${styles.readOnlyPhotoDash}`}>-</span>
+        <span className={styles.readOnlyPhotoLabel}>
+          <span className="font-bold">{photoAddOnTitle}</span>
+          {sub ? <span>{` · ${sub}`}</span> : null}
+        </span>
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Same chrome and row layout as expanded [ItineraryBox] (time — label), without pickup-location
+ * editing or tooltips. Used for DAP “your current itinerary” under the booking reference field.
+ */
+export function ItineraryReadOnlySummary({
+  title,
+  dateSubtitle,
+  itineraryItems,
+  status,
+  loadingMessage,
+  errorMessage,
+  emptyMessage,
+  t,
+  className,
+  titleClassName,
+  sticky,
+  photoSessionPreview,
+}: {
+  title: string;
+  /** Inline after the title, e.g. `MMM d` like main [BookingFlow] itinerary. */
+  dateSubtitle?: string;
+  itineraryItems: ItineraryDisplayStep[] | null;
+  status: ItineraryReadOnlySummaryStatus;
+  loadingMessage: string;
+  errorMessage: string;
+  emptyMessage: string;
+  t: TranslationFn;
+  className?: string;
+  titleClassName?: string;
+  /** Sticks to top of the dialog content scroll area (e.g. DAP). */
+  sticky?: boolean;
+  /** When set and status is ready, inserts one green photo row into the same list layout. */
+  photoSessionPreview?: ItineraryReadOnlyPhotoPreview | null;
+}) {
+  const showPhotoPreview = status === 'ready' && photoSessionPreview != null;
+  const stepsForInsert = showPhotoPreview ? photoSessionPreview.primaryItinerarySteps : null;
+  const insertAt =
+    stepsForInsert && stepsForInsert.length > 0 && photoSessionPreview
+      ? getPhotoSessionInsertPosition(stepsForInsert, {
+          slotStartIso: photoSessionPreview.slotStartIso,
+          slotEndIso: photoSessionPreview.slotEndIso,
+        })
+      : 0;
+
+  const hasItineraryRows = Boolean(itineraryItems && itineraryItems.length > 0);
+  const photoAddOnTitle = t('booking.dapPhotoSessionAddOn');
+
+  const boxLayoutClass = sticky ? styles.boxStickyInDialog : styles.boxEmbedded;
+
+  return (
+    <div
+      className={`${styles.box} ${styles.boxExpanded} ${boxLayoutClass} ${className ?? ''}`}
+      aria-busy={status === 'loading'}
+    >
+      <h3 className={`${styles.title} ${styles.titleExpanded} ${titleClassName ?? ''}`}>
+        {title}
+        {dateSubtitle ? (
+          <span className={styles.dateSubtitle}> · {dateSubtitle}</span>
+        ) : null}
+      </h3>
+      {status === 'loading' ? (
+        <p className={styles.readOnlySummaryMessage} aria-live="polite">
+          {loadingMessage}
+        </p>
+      ) : null}
+      {status === 'error' ? (
+        <p className={styles.readOnlySummaryError} role="alert">
+          {errorMessage}
+        </p>
+      ) : null}
+      {showPhotoPreview && hasItineraryRows && photoSessionPreview && itineraryItems ? (
+        <div className={styles.itemsExpanded}>
+          {itineraryItems.map((item, index) => {
+            const itemLabel = getStepLabel(item, t);
+            const formattedTime = formatReadOnlyItineraryTime(item.time ?? '');
+            return (
+              <Fragment key={`dap-itin-${index}-${item.time ?? ''}-${item.place ?? ''}`}>
+                {insertAt === index ? (
+                  <ReadOnlyPhotoSessionItineraryRow
+                    sessionTimeRangeLabel={photoSessionPreview.sessionTimeRangeLabel}
+                    photographerLabel={photoSessionPreview.photographerLabel}
+                    sessionLengthLabel={photoSessionPreview.sessionLengthLabel}
+                    photoAddOnTitle={photoAddOnTitle}
+                  />
+                ) : null}
+                <div className={styles.item}>
+                  <span className="inline-flex items-center gap-1.5 flex-wrap">
+                    <span className="inline-flex shrink-0 font-bold text-stone-900">
+                      {formattedTime || '—'}
+                    </span>
+                    <span className="text-stone-400 shrink-0">-</span>
+                    <span className="text-stone-600">{itemLabel}</span>
+                  </span>
+                </div>
+              </Fragment>
+            );
+          })}
+          {insertAt === itineraryItems.length ? (
+            <ReadOnlyPhotoSessionItineraryRow
+              sessionTimeRangeLabel={photoSessionPreview.sessionTimeRangeLabel}
+              photographerLabel={photoSessionPreview.photographerLabel}
+              sessionLengthLabel={photoSessionPreview.sessionLengthLabel}
+              photoAddOnTitle={photoAddOnTitle}
+            />
+          ) : null}
+        </div>
+      ) : null}
+      {showPhotoPreview && !hasItineraryRows && photoSessionPreview ? (
+        <>
+          <ReadOnlyPhotoSessionItineraryRow
+            sessionTimeRangeLabel={photoSessionPreview.sessionTimeRangeLabel}
+            photographerLabel={photoSessionPreview.photographerLabel}
+            sessionLengthLabel={photoSessionPreview.sessionLengthLabel}
+            photoAddOnTitle={photoAddOnTitle}
+          />
+          <p className={styles.readOnlyPhotoFallbackFoot}>
+            {t('booking.dapItineraryFallbackFoot')}
+          </p>
+        </>
+      ) : null}
+      {status === 'ready' && !showPhotoPreview && itineraryItems && itineraryItems.length > 0 ? (
+        <div className={styles.itemsExpanded}>
+          {itineraryItems.map((item, index) => {
+            const itemLabel = getStepLabel(item, t);
+            const formattedTime = formatReadOnlyItineraryTime(item.time ?? '');
+            return (
+              <div key={index} className={styles.item}>
+                <span className="inline-flex items-center gap-1.5 flex-wrap">
+                  <span className="inline-flex shrink-0 font-bold text-stone-900">
+                    {formattedTime || '—'}
+                  </span>
+                  <span className="text-stone-400 shrink-0">-</span>
+                  <span className="text-stone-600">{itemLabel}</span>
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
+      {status === 'ready' &&
+      !showPhotoPreview &&
+      (!itineraryItems || itineraryItems.length === 0) ? (
+        <p className={styles.readOnlySummaryMessage}>{emptyMessage}</p>
+      ) : null}
+    </div>
+  );
+}

package/src/components/booking/ItineraryBuilder.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import type { ItineraryBuilderDestination } from '@/lib/booking-api';
+
+interface ItineraryBuilderProps {
+  /** Shared destinations from product.itineraryBuilder */
+  destinations: ItineraryBuilderDestination[];
+  /** IDs blacklisted for this option (e.g. takkakaw_falls for Sunrise) */
+  optionBlacklist: string[];
+  /** Selected destination IDs (in order) */
+  selectedDestinationIds: string[];
+  /** Planning notes text */
+  planningNotes: string;
+  onDestinationsChange: (ids: string[]) => void;
+  onPlanningNotesChange: (value: string) => void;
+}
+
+export function ItineraryBuilder({
+  destinations,
+  optionBlacklist,
+  selectedDestinationIds,
+  planningNotes,
+  onDestinationsChange,
+  onPlanningNotesChange,
+}: ItineraryBuilderProps) {
+  const availableDestinations = destinations.filter((d) => !optionBlacklist.includes(d.id));
+
+  const toggleDestination = (id: string) => {
+    if (selectedDestinationIds.includes(id)) {
+      onDestinationsChange(selectedDestinationIds.filter((d) => d !== id));
+    } else {
+      onDestinationsChange([...selectedDestinationIds, id]);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-stone-700 mb-2">
+          Where would you like to go?
+        </label>
+        <p className="text-sm text-stone-500 mb-3">
+          Select the destinations you&apos;d like to include. Our team will craft your final
+          itinerary.
+        </p>
+        <div className="flex flex-wrap gap-2">
+          {availableDestinations.map((dest) => {
+            const isSelected = selectedDestinationIds.includes(dest.id);
+            return (
+              <button
+                key={dest.id}
+                type="button"
+                onClick={() => toggleDestination(dest.id)}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                  isSelected
+                    ? 'bg-emerald-600 text-white'
+                    : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
+                }`}
+              >
+                {dest.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Planning notes */}
+      <div>
+        <label className="block text-sm font-medium text-stone-700 mb-2">
+          Planning notes (optional)
+        </label>
+        <textarea
+          value={planningNotes}
+          onChange={(e) => onPlanningNotesChange(e.target.value)}
+          placeholder="Any special requests, timing preferences, or things you'd like our team to know..."
+          rows={3}
+          className="w-full px-4 py-3 rounded-lg border border-stone-300 focus:outline-none focus:border-stone-500 text-stone-900 placeholder:text-stone-400"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+/**
+ * Itinerary placeholder - shown when date selected but no time yet
+ */
+
+.box {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  background: var(--light-orange-background-dark);
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--booking-stone-200, #e7e5e4);
+}
+
+.title {
+  font-family: 'Poppins', sans-serif;
+  font-size: 1.125rem;
+  font-weight: 700;
+  text-transform: lowercase;
+  color: var(--accent-orange);
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .title {
+    font-size: 1.375rem;
+  }
+}
+
+.dateSubtitle {
+  font-weight: 400;
+  color: var(--accent-orange);
+  font-size: inherit;
+  opacity: 0.9;
+}
+
+.hint {
+  font-size: 0.875rem;
+  color: var(--booking-stone-600, #57534e);
+}