@ticketboothapp/booking 1.2.101 → 1.2.102

package/src/components/booking/NewBookingFlow.tsx

@@ -72,6 +72,7 @@ import { useBookingHost } from '../../runtime';
 import type { BookingFlowUiOptions } from './booking-flow-ui';
 import type { NewBookingFlowProps } from './booking-flow-types';
 import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
+import { optionalCheckoutContactFields } from '../../lib/booking/checkout-contact';
 
 function formatTicketLineItemsForSummary(lines: Array<{ category: string; qty: number }>): string {
   const labels: Record<string, string> = {
@@ -176,6 +177,74 @@ function availabilityWithOptionId(availability: Availability, fallbackOptionId?:
   return productOptionId ? { ...availability, productOptionId } : availability;
 }
 
+/** Prefer full availability rows over calendar summary rows when merging fetches. */
+function mergeAvailabilityRecord(
+  existing: Availability | undefined,
+  incoming: Availability,
+): Availability {
+  if (!existing) return incoming;
+  const existingIsSummary = existing.isSummary === true;
+  const incomingIsSummary = incoming.isSummary === true;
+  if (existingIsSummary && !incomingIsSummary) return incoming;
+  if (!existingIsSummary && incomingIsSummary) return existing;
+  return incoming;
+}
+
+function mergeAvailabilitiesIntoMap(
+  map: Map<string, Availability>,
+  availabilities: Availability[],
+): void {
+  for (const availability of availabilities) {
+    const key = `${availability.dateTime}-${availability.productOptionId}`;
+    map.set(key, mergeAvailabilityRecord(map.get(key), availability));
+  }
+}
+
+function pickDefaultAvailabilityForTimes(
+  times: Availability[],
+  activeOptions: Product['options'],
+): Availability | null {
+  if (times.length === 0) return null;
+  const mostPopularOption = activeOptions.find((opt) => opt.mostPopular);
+  const candidate = mostPopularOption
+    ? times.find(
+        (avail) => avail.productOptionId === mostPopularOption.optionId && avail.vacancies > 0,
+      )
+    : null;
+  const fallback = times.find((avail) => avail.vacancies > 0);
+  return candidate ?? fallback ?? null;
+}
+
+function availabilityMatchesSelectedDate(
+  availability: Availability,
+  selectedDate: string,
+  companyTimezone: string,
+): boolean {
+  try {
+    const dateInCompanyTz = formatInTimeZone(
+      parseAvailabilityDateTime(availability.dateTime),
+      companyTimezone,
+      'yyyy-MM-dd',
+    );
+    return dateInCompanyTz === selectedDate;
+  } catch {
+    return false;
+  }
+}
+
+function shouldSyncSelectedAvailability(
+  current: Availability,
+  updated: Availability,
+): boolean {
+  return (
+    current !== updated &&
+    (current.isSummary !== updated.isSummary ||
+      current.vacancies !== updated.vacancies ||
+      current.availabilityId !== updated.availabilityId ||
+      (current.returnOptions?.length ?? 0) !== (updated.returnOptions?.length ?? 0))
+  );
+}
+
 function mergePrecomputedPricesFromAvailabilityResult(
   next: Record<string, PrecomputedPricesByCategory>,
   result: GetAvailabilitiesResponse,
@@ -343,6 +412,7 @@ export function NewBookingFlow({
   hideItineraryBox = false,
   flowUi,
   afterItinerary,
+  beforeCancellationPolicy,
   augmentItineraryItems,
   augmentPriceSummary,
   dependentAddOnSelection,
@@ -376,6 +446,7 @@ export function NewBookingFlow({
   const [email, setEmail] = useState('');
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState('');
   const [promoCodeInput, setPromoCodeInput] = useState('');
   const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(null);
   const [promoCodeError, setPromoCodeError] = useState('');
@@ -474,7 +545,6 @@ export function NewBookingFlow({
   const hasHydratedAddOnsFromReceiptRef = useRef(false);
   const hasAutoSelectedPartnerDateRef = useRef(false);
   const hasAutoSelectedPartnerPickupRef = useRef(false);
-  const handleDateSelectRef = useRef<(date: string) => void>(() => {});
   useEffect(() => {
     setPartnerAttributionConfirmed(false);
   }, [flowUi?.partnerAttributionSummary, flowUi?.partnerAttributionConfirmLabel]);
@@ -632,9 +702,7 @@ export function NewBookingFlow({
       const existingMap = new Map(
         prev.map((avail) => [`${avail.dateTime}-${avail.productOptionId}`, avail])
       );
-      allFetchedAvailabilities.forEach((avail) => {
-        existingMap.set(`${avail.dateTime}-${avail.productOptionId}`, avail);
-      });
+      mergeAvailabilitiesIntoMap(existingMap, allFetchedAvailabilities);
       mergedOut = Array.from(existingMap.values());
       return mergedOut;
     });
@@ -668,9 +736,7 @@ export function NewBookingFlow({
       const mergedAvailabilitiesMap = new Map(
         existingAvailabilities.map((a) => [`${a.dateTime}-${a.productOptionId}`, a])
       );
-      allFetchedAvailabilities.forEach((a) => {
-        mergedAvailabilitiesMap.set(`${a.dateTime}-${a.productOptionId}`, a);
-      });
+      mergeAvailabilitiesIntoMap(mergedAvailabilitiesMap, allFetchedAvailabilities);
       const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
       results.forEach((r) => {
         mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, r);
@@ -753,9 +819,7 @@ export function NewBookingFlow({
     let mergedOut: Availability[] = [];
     setAvailabilities((prev) => {
       const merged = new Map(prev.map((availability) => [`${availability.dateTime}-${availability.productOptionId}`, availability]));
-      detailedAvailabilities.forEach((availability) => {
-        merged.set(`${availability.dateTime}-${availability.productOptionId}`, availability);
-      });
+      mergeAvailabilitiesIntoMap(merged, detailedAvailabilities);
       mergedOut = Array.from(merged.values());
       return mergedOut;
     });
@@ -776,9 +840,7 @@ export function NewBookingFlow({
           availability,
         ])
       );
-      detailedAvailabilities.forEach((availability) => {
-        mergedAvailabilities.set(`${availability.dateTime}-${availability.productOptionId}`, availability);
-      });
+      mergeAvailabilitiesIntoMap(mergedAvailabilities, detailedAvailabilities);
       const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
       results.forEach((r) => mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, r));
       availabilitiesCache.merge(cacheKey, {
@@ -1013,12 +1075,7 @@ export function NewBookingFlow({
           );
           
           // Merge new availabilities - update existing ones or add new ones
-          allFetchedAvailabilities.forEach(avail => {
-            const key = `${avail.dateTime}-${avail.productOptionId}`;
-            // Always update to get latest data (vacancies, prices, etc.)
-            existingMap.set(key, avail);
-          });
-          
+          mergeAvailabilitiesIntoMap(existingMap, allFetchedAvailabilities);
           return Array.from(existingMap.values());
         });
         
@@ -1045,9 +1102,7 @@ export function NewBookingFlow({
           const mergedAvailabilitiesMap = new Map(
             existingAvailabilities.map((a) => [`${a.dateTime}-${a.productOptionId}`, a])
           );
-          allFetchedAvailabilities.forEach((a) => {
-            mergedAvailabilitiesMap.set(`${a.dateTime}-${a.productOptionId}`, a);
-          });
+          mergeAvailabilitiesIntoMap(mergedAvailabilitiesMap, allFetchedAvailabilities);
           const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
           results.forEach((r) => {
             mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, r);
@@ -1216,9 +1271,7 @@ export function NewBookingFlow({
 
         setAvailabilities((prev) => {
           const merged = new Map(prev.map((availability) => [`${availability.dateTime}-${availability.productOptionId}`, availability]));
-          detailedAvailabilities.forEach((availability) => {
-            merged.set(`${availability.dateTime}-${availability.productOptionId}`, availability);
-          });
+          mergeAvailabilitiesIntoMap(merged, detailedAvailabilities);
           return Array.from(merged.values());
         });
 
@@ -1238,9 +1291,7 @@ export function NewBookingFlow({
               availability,
             ])
           );
-          detailedAvailabilities.forEach((availability) => {
-            mergedAvailabilities.set(`${availability.dateTime}-${availability.productOptionId}`, availability);
-          });
+          mergeAvailabilitiesIntoMap(mergedAvailabilities, detailedAvailabilities);
           const mergedPrecomputed = { ...(existingCache?.precomputedPricesByOption ?? {}) };
           results.forEach((result) => {
             mergePrecomputedPricesFromAvailabilityResult(mergedPrecomputed, result);
@@ -1423,6 +1474,11 @@ export function NewBookingFlow({
     [timesForSelectedDate],
   );
 
+  const selectedAvailabilityMatchesDate = useMemo(() => {
+    if (!selectedAvailability || !selectedDate) return false;
+    return availabilityMatchesSelectedDate(selectedAvailability, selectedDate, companyTimezone);
+  }, [selectedAvailability, selectedDate, companyTimezone]);
+
   useEffect(() => {
     if (hasAppliedInitialValuesRef.current || !initialValues) return;
     const trimmedEmail = initialValues.customer?.email?.trim();
@@ -2248,21 +2304,27 @@ export function NewBookingFlow({
     totalPrice,
   ]);
 
-  // Auto-select product option when date is selected: most popular if set, otherwise first available.
+  // Auto-select pickup when date is selected (or when slots load after date pick).
   useEffect(() => {
-    if (selectedDate && timesForSelectedDate.length > 0 && !selectedAvailability) {
-      const mostPopularOption = activeOptions.find(opt => opt.mostPopular);
-      const candidate = mostPopularOption
-        ? timesForSelectedDate.find(avail => avail.productOptionId === mostPopularOption.optionId && avail.vacancies > 0)
-        : null;
-      const fallback = timesForSelectedDate.find(avail => avail.vacancies > 0);
-      const toSelect = candidate ?? fallback;
-      if (toSelect) {
-        setSelectedAvailability(toSelect);
-        setError('');
-      }
+    if (!selectedDate || timesForSelectedDate.length === 0) return;
+    if (
+      selectedAvailability &&
+      availabilityMatchesSelectedDate(selectedAvailability, selectedDate, companyTimezone)
+    ) {
+      return;
+    }
+    const toSelect = pickDefaultAvailabilityForTimes(timesForSelectedDate, activeOptions);
+    if (toSelect) {
+      setSelectedAvailability(toSelect);
+      setError('');
     }
-  }, [selectedDate, timesForSelectedDateSelectionKey, activeOptionIdsKey, selectedAvailability]);
+  }, [
+    selectedDate,
+    timesForSelectedDateSelectionKey,
+    activeOptions,
+    selectedAvailability,
+    companyTimezone,
+  ]);
 
   // Currency change does NOT trigger a refetch. Backend returns per-currency data (priceByCurrency,
   // changeByCurrency, feesByCurrency, precomputedPrices, etc.) in one response; we just
@@ -2276,7 +2338,7 @@ export function NewBookingFlow({
           avail.dateTime === selectedAvailability.dateTime &&
           avail.productOptionId === selectedAvailability.productOptionId
       );
-      if (updatedAvailability) {
+      if (updatedAvailability && shouldSyncSelectedAvailability(selectedAvailability, updatedAvailability)) {
         setSelectedAvailability(updatedAvailability);
         
         // Also update selectedReturnOption if it exists
@@ -2362,14 +2424,6 @@ export function NewBookingFlow({
     }
   }, [pricingConfig?.cancellationPolicies, cancellationPolicyId, currency]);
 
-  const handleDateSelect = (date: string) => {
-    if (date === selectedDate) return;
-    setSelectedAvailability(null);
-    setSelectedReturnOption(null);
-  };
-
-  handleDateSelectRef.current = handleDateSelect;
-
   useEffect(() => {
     if (flowUi?.autoSelectFirstAvailableDate !== true) return;
     if (isPartialLaunch) return;
@@ -2388,7 +2442,10 @@ export function NewBookingFlow({
 
     hasAutoSelectedPartnerDateRef.current = true;
     setSelectedDate(first);
-    handleDateSelectRef.current(first);
+    setSelectedReturnOption(null);
+    setSelectedAvailability(
+      pickDefaultAvailabilityForTimes(availabilitiesByDate[first] ?? [], activeOptions),
+    );
     if (!suppressCalendarDateScroll) {
       setTimeout(() => {
         const container = contentRef?.current;
@@ -2874,6 +2931,7 @@ export function NewBookingFlow({
           customerEmail: email || undefined,
           customerFirstName: firstName.trim() || undefined,
           customerLastName: lastName.trim() || undefined,
+          ...optionalCheckoutContactFields(phoneNumber),
           currency: currency,
           travelerHotel: selectedPickupLocation?.name || undefined,
           pickupLocationId: pickupLocationId || undefined,
@@ -2914,6 +2972,7 @@ export function NewBookingFlow({
             customerEmail: email,
             customerFirstName: firstName.trim() || undefined,
             customerLastName: lastName.trim() || undefined,
+            ...optionalCheckoutContactFields(phoneNumber),
             currency: currency,
             reservationReference: reservation?.reservationReference,
             travelerHotel: selectedPickupLocation?.name || undefined,
@@ -2945,6 +3004,7 @@ export function NewBookingFlow({
           customerEmail: email || undefined,
           customerFirstName: firstName.trim() || undefined,
           customerLastName: lastName.trim() || undefined,
+          ...optionalCheckoutContactFields(phoneNumber),
           currency: currency,
           travelerHotel: selectedPickupLocation?.name || undefined,
           pickupLocationId: pickupLocationId || undefined,
@@ -3130,6 +3190,7 @@ export function NewBookingFlow({
         customerEmail: email || undefined,
         customerFirstName: firstName.trim() || undefined,
         customerLastName: lastName.trim() || undefined,
+        ...optionalCheckoutContactFields(phoneNumber),
         currency: currency,
         travelerHotel: product.pickupLocations?.find(loc => loc.id === pickupLocationId)?.name || undefined,
         pickupLocationId: pickupLocationId || undefined,
@@ -3317,8 +3378,18 @@ export function NewBookingFlow({
                   selectableSoldOutDate={null}
                   isLoading={loadingAvailabilities || isFetchingMoreAvailabilities}
                   onDateSelect={(date) => {
+                    const dateChanged = date !== selectedDate;
                     setSelectedDate(date);
-                    handleDateSelect(date);
+                    if (dateChanged) {
+                      setSelectedReturnOption(null);
+                      setSelectedAvailability(
+                        pickDefaultAvailabilityForTimes(
+                          availabilitiesByDate[date] ?? [],
+                          activeOptions,
+                        ),
+                      );
+                      setError('');
+                    }
                     if (suppressCalendarDateScroll) return;
                     // Scroll so calendar is almost at top and user sees the rest of the booking flow.
                     // Dialog: scroll inside contentRef. Full-page: fall back to window scroll.
@@ -3406,8 +3477,12 @@ export function NewBookingFlow({
             />
           )}
 
-          {/* Select return time */}
-          {selectedAvailability && selectedAvailability.returnOptions && selectedAvailability.returnOptions.length > 0 && (
+          {/* Select return time — wait for hydrated day details so summary refetches do not flash this block */}
+          {selectedAvailabilityMatchesDate &&
+            selectedAvailability &&
+            !selectedAvailability.isSummary &&
+            selectedAvailability.returnOptions &&
+            selectedAvailability.returnOptions.length > 0 && (
             <ReturnTimeSelector
               returnOptions={returnOptionsWithFloor}
               selectedReturnOption={selectedReturnOptionWithFloor}
@@ -3438,7 +3513,10 @@ export function NewBookingFlow({
             : null}
 
           {/* Cancellation policy selection - all options from config, sorted by cheapest first. Also show when forced by promo. */}
-          {selectedAvailability && ((pricingConfig?.cancellationPolicies?.length ?? 0) > 0 || forcedCancellationPolicy) && (() => {
+          {selectedAvailabilityMatchesDate &&
+            selectedAvailability &&
+            ((pricingConfig?.cancellationPolicies?.length ?? 0) > 0 || forcedCancellationPolicy) &&
+            (() => {
             const sortedPolicies = [...(pricingConfig?.cancellationPolicies ?? [])].sort((a, b) => {
               const feeA = a.feeByCurrency[currency] ?? 0;
               const feeB = b.feeByCurrency[currency] ?? 0;
@@ -3446,6 +3524,7 @@ export function NewBookingFlow({
             });
             return (
             <div ref={cancellationPolicyRef}>
+            {beforeCancellationPolicy}
             <CancellationPolicySelector
               policies={sortedPolicies}
               selectedPolicyId={cancellationPolicyId}
@@ -3454,6 +3533,7 @@ export function NewBookingFlow({
               t={t}
               onPolicySelect={setCancellationPolicyId}
               forcedPolicy={forcedCancellationPolicy}
+              sectionLabel={flowUi?.cancellationPolicySectionLabel}
             />
             </div>
             );
@@ -3552,6 +3632,8 @@ export function NewBookingFlow({
                 onFirstNameChange={(v) => { setFirstName(v); setError(''); }}
                 onLastNameChange={(v) => { setLastName(v); setError(''); }}
                 onEmailChange={(v) => { setEmail(v); setError(''); }}
+                phoneNumber={phoneNumber}
+                onPhoneNumberChange={(v) => { setPhoneNumber(v); setError(''); }}
                 readOnlyContactFields={false}
                 pickupLocations={
                   selectedDate && product.pickupLocations && product.pickupLocations.length > 0

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

@@ -324,6 +324,13 @@
   color: #b91c1c;
 }
 
+.contactFieldHint {
+  margin: 0.625rem 0 0;
+  font-size: 0.75rem;
+  line-height: 1.35;
+  color: var(--booking-stone-500, #78716c);
+}
+
 .addOnOptionBtn {
   display: flex;
   align-items: center;

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -60,6 +60,8 @@ import {
 } from '../../lib/booking/source-metadata';
 import type { VideoSources } from '../../constants/products';
 import type { BookingFlowUiOptions } from './booking-flow-ui';
+import { optionalCheckoutContactFields } from '../../lib/booking/checkout-contact';
+import { CheckoutOptionalPhoneFields } from './CheckoutOptionalPhoneFields';
 import type {
   ProviderDashboardChangeBookingPayload,
   ProviderDashboardInitialBooking,
@@ -193,6 +195,7 @@ export function PrivateShuttleBookingFlow({
   const [email, setEmail] = useState('');
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState('');
   const [pickupLocationId, setPickupLocationId] = useState<string | null>(
     () => initialBooking?.pickupLocationId ?? initialValues?.pickupLocationId ?? null
   );
@@ -1684,6 +1687,8 @@ export function PrivateShuttleBookingFlow({
           customerEmail: email || undefined,
           customerFirstName: firstName.trim() || undefined,
           customerLastName: lastName.trim() || undefined,
+        ...optionalCheckoutContactFields(phoneNumber),
+          ...optionalCheckoutContactFields(phoneNumber),
           currency,
           travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
           pickupLocationId: pickupLocationId || undefined,
@@ -1724,6 +1729,8 @@ export function PrivateShuttleBookingFlow({
           customerEmail: email,
           customerFirstName: firstName.trim() || undefined,
           customerLastName: lastName.trim() || undefined,
+        ...optionalCheckoutContactFields(phoneNumber),
+          ...optionalCheckoutContactFields(phoneNumber),
           currency,
           reservationReference: reservation.reservationReference,
           travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
@@ -1804,6 +1811,7 @@ export function PrivateShuttleBookingFlow({
         customerEmail: email,
         customerFirstName: firstName.trim() || undefined,
         customerLastName: lastName.trim() || undefined,
+        ...optionalCheckoutContactFields(phoneNumber),
         currency,
         reservationReference: reservation.reservationReference,
         travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
@@ -1835,6 +1843,8 @@ export function PrivateShuttleBookingFlow({
           customerEmail: email || undefined,
           customerFirstName: firstName.trim() || undefined,
           customerLastName: lastName.trim() || undefined,
+        ...optionalCheckoutContactFields(phoneNumber),
+          ...optionalCheckoutContactFields(phoneNumber),
           currency,
           travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
           pickupLocationId: pickupLocationId || undefined,
@@ -1990,6 +2000,7 @@ export function PrivateShuttleBookingFlow({
         customerEmail: email || undefined,
         customerFirstName: firstName.trim() || undefined,
         customerLastName: lastName.trim() || undefined,
+        ...optionalCheckoutContactFields(phoneNumber),
         currency,
         travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
         pickupLocationId: pickupLocationId || undefined,
@@ -2875,6 +2886,16 @@ export function PrivateShuttleBookingFlow({
                         className={styles.input}
                       />
                     </div>
+                    <CheckoutOptionalPhoneFields
+                      idPrefix="shuttle"
+                      labelClassName={styles.sectionLabel}
+                      phoneNumber={phoneNumber}
+                      onPhoneNumberChange={(v) => {
+                        setPhoneNumber(v);
+                        setError('');
+                      }}
+                      t={t}
+                    />
                   </>
                 {pricingConfig?.cancellationPolicies &&
                   pricingConfig.cancellationPolicies.length > 0 && (

package/src/components/booking/booking-flow-types.ts

@@ -107,6 +107,8 @@ export interface BookingFlowBaseProps {
    * a date and shuttle time are selected. Used by photo-first dependent add-on flows.
    */
   afterItinerary?: ReactNode | ((context: BookingFlowAfterItineraryContext) => ReactNode);
+  /** Optional note rendered immediately above shuttle cancellation policy options (e.g. photo DAP). */
+  beforeCancellationPolicy?: ReactNode;
   /**
    * Optional hook to insert add-on rows into the Build Itinerary box. Receives the
    * base itinerary from the selected shuttle and returns the display list to render.

package/src/components/booking/booking-flow-ui.ts

@@ -67,6 +67,8 @@ export interface BookingFlowUiOptions {
   itineraryStickyTopOffsetPx?: number;
   /** Provider dashboard change flow: quote/override panel shown immediately before confirm CTA. */
   providerDashboardChangePricingUi?: ProviderDashboardChangePricingUi;
+  /** Override the orange section heading above cancellation policy cards (e.g. photo-first shuttle flow). */
+  cancellationPolicySectionLabel?: string;
 }
 
 /**

package/src/components/booking/booking-flow.css

@@ -273,12 +273,20 @@
   border-radius: 0.5rem;
 }
 
-.booking-flow-preflight input:focus {
+.booking-flow-preflight input:focus:not(.react-international-phone-input) {
   outline: none;
   border-color: var(--booking-primary);
   box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
 }
 
+/* Phone country widget: single focus ring on outer container, not inner tel input */
+.booking-flow-preflight input.react-international-phone-input:focus,
+.booking-flow-preflight input.react-international-phone-input:focus-visible {
+  outline: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
 /**
  * Admin “custom receipt line” row: scoped preflight sets `input, button { padding: 0 }` with
  * higher specificity than Tailwind padding utilities, so insets must be restored here.
@@ -1012,9 +1020,69 @@
   border-top-color: var(--booking-stone-200, #e7e5e4) !important;
 }
 
-/* ========== Input fields - padding ========== */
-.booking-flow-preflight [class*="CheckoutForm_input"] {
-  padding: 0.875rem 1.25rem !important;
+/* ========== Input fields - padding (scope to <input> only — [class*="CheckoutForm_input"] also matches inputError) ========== */
+.booking-flow-preflight input[class*="CheckoutForm_input"] {
+  padding: 0.5rem 0.625rem !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+  background-color: var(--booking-stone-50, #fafaf9) !important;
+  border: 1px solid var(--booking-stone-300, #d6d3d1) !important;
+  border-radius: 0.5rem !important;
+}
+
+.booking-flow-preflight input[class*="CheckoutForm_input"]:focus {
+  border-color: var(--booking-primary, #059669) !important;
+  background-color: #fff !important;
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) !important;
+}
+
+.booking-flow-preflight [class*="CheckoutForm_checkoutPhoneInput"] :global(.react-international-phone-input-container) {
+  border: 1px solid var(--booking-stone-300, #d6d3d1) !important;
+  border-radius: 0.5rem !important;
+  background-color: var(--booking-stone-50, #fafaf9) !important;
+  box-shadow: none !important;
+}
+
+.booking-flow-preflight [class*="CheckoutForm_checkoutPhoneInput"]:focus-within :global(.react-international-phone-input-container) {
+  border-color: var(--booking-primary, #059669) !important;
+  border-width: 1px !important;
+  background-color: #fff !important;
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) !important;
+}
+
+.booking-flow-preflight [class*="CheckoutForm_checkoutPhoneInput"] :global(.react-international-phone-input) {
+  padding: 0.5rem 0.625rem 0.5rem 0.25rem !important;
+  font-size: 0.875rem !important;
+  border-radius: 0 !important;
+}
+
+.booking-flow-preflight [class*="CheckoutForm_checkoutPhoneInput"]:focus-within :global(.react-international-phone-country-selector-button) {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* Hint is a div (preflight zeros all `p` margins) */
+.booking-flow-preflight [class*="CheckoutForm_optionalPhoneFieldHint"],
+.booking-flow-root [class*="CheckoutForm_optionalPhoneFieldHint"] {
+  margin: 0 !important;
+  padding: 0.375rem 0.5rem 0 !important;
+  font-size: 0.75rem !important;
+  line-height: 1.4 !important;
+  color: var(--booking-stone-500, #78716c) !important;
+}
+
+.booking-flow-preflight [class*="CheckoutForm_inputError"],
+.booking-flow-root [class*="CheckoutForm_inputError"] {
+  margin: 0.375rem 0 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  font-size: 0.75rem !important;
+  line-height: 1.35 !important;
+  color: #b91c1c !important;
 }
 /* Promo field: scope to <input> only — [class*="PromoCodeInput_input"] also matches inputWrap (…inputWrap…) and was drawing a second box */
 .booking-flow-preflight input[class*="PromoCodeInput_input"] {

package/src/data/dap-descriptions/session-couples-families-friends.en.json

@@ -10,7 +10,6 @@
         {
           "title": "30-minute session",
           "items": [
-            "📸 20 to 25 minutes of photography time",
             "📍 2 Locations within walking distance",
             "🖼️ 25 professionally edited photos delivered in a personalized online gallery"
           ]
@@ -18,7 +17,6 @@
         {
           "title": "60-minute session",
           "items": [
-            "📸 50 to 55 minutes of photography time",
             "📍 2-3 Locations within walking distance",
             "🖼️ 50 professionally edited photos delivered in a personalized online gallery"
           ]
@@ -26,7 +24,6 @@
         {
           "title": "90-minute session",
           "items": [
-            "📸 80-90 mins of Photography Time",
             "📍 5 Locations within walking distance",
             "🖼️ 75 professionally edited photos delivered in a personalized online gallery"
           ]

package/src/data/dap-descriptions/session-elopements.en.json

@@ -7,27 +7,27 @@
       "title": "What's included",
       "content": [
         {
-          "title": "30-minute session",
+          "title": "Alpine Vows - 1 hour",
           "items": [
-            "📸 20 to 25 minutes of photography time",
-            "📍 2 Locations within walking distance",
-            "🖼️ 25 professionally edited photos delivered in a personalized online gallery"
+            "📸 60 minutes of photography time",
+            "📍 2-3 Locations within walking distance",
+            "🖼️ 60+ professionally edited photos delivered in a personalized online gallery"
           ]
         },
         {
-          "title": "60-minute session",
+          "title": "The Summit Story - 4 hours",
           "items": [
-            "📸 50 to 55 minutes of photography time",
-            "📍 2-3 Locations within walking distance",
-            "🖼️ 50 professionally edited photos delivered in a personalized online gallery"
+            "📸 3-4 hours of photography time",
+            "📍 Up to 3 Local Locations",
+            "🖼️ 100+ professionally edited photos delivered in a personalized online gallery"
           ]
         },
         {
-          "title": "90-minute session",
+          "title": "The Grand Adventure - 8 hours",
           "items": [
-            "📸 80-90 mins of Photography Time",
-            "📍 5 Locations within walking distance",
-            "🖼️ 75 professionally edited photos delivered in a personalized online gallery"
+            "📸 7-8 hours of photography time",
+            "📍 Up to 5 Local Locations",
+            "🖼️ 100+ professionally edited photos delivered in a personalized online gallery"
           ]
         },
         {