@ticketboothapp/booking 0.1.11 → 0.1.12

package/src/components/ManageBookingView.tsx

@@ -9,7 +9,6 @@ import { formatCurrencyAmount } from '@/lib/currency';
 
 const API_URL = ENV.API_URL;
 
-/** Provider-only fields merged after public manage lookup (e.g. embedded in provider dashboard). */
 export interface StaffBookingAttribution {
   reportingSource: string;
   partnerBookingPortal: boolean;
@@ -24,28 +23,6 @@ export interface StaffBookingAttribution {
   commissionUsesPartnerRate?: boolean;
 }
 
-export interface ManageBookingViewProps {
-  /** Initial booking reference (ref or bookingReference from URL) */
-  initialRef?: string;
-  /** Initial last name (from URL or success callback) */
-  initialLastName?: string;
-  /** Reservation reference (e.g. after Stripe redirect; triggers poll until booking exists) */
-  initialReservationRef?: string;
-  /** True when returning from balance payment success (Stripe redirect); triggers polling to catch webhook update */
-  initialPaymentSuccess?: boolean;
-  /** When provided (e.g. manage page), called to replace URL when poll finds booking; when undefined (e.g. dialog), no navigation */
-  replaceUrl?: (url: string) => void;
-  /** When provided (e.g. dialog), show compact layout and optionally a close button. Set showCloseButton false when the host provides its own close (e.g. dialog X). */
-  onClose?: () => void;
-  /** When false, do not render the in-content close button (e.g. host dialog already has an X). Default true when onClose is set. */
-  showCloseButton?: boolean;
-  /**
-   * When embedded with staff auth, fetch attribution (partner portal vs main site, partner/agent, commission)
-   * after the public booking loads. Uses provider GET /1/bookings/:ref — implement in the host app.
-   */
-  fetchStaffAttribution?: (bookingReference: string) => Promise<StaffBookingAttribution | null>;
-}
-
 function staffChannelLabel(source: string): string {
   const labels: Record<string, string> = {
     DASHBOARD: 'Dashboard',
@@ -59,6 +36,17 @@ function staffChannelLabel(source: string): string {
   return labels[source] ?? source;
 }
 
+export interface ManageBookingViewProps {
+  initialRef?: string;
+  initialLastName?: string;
+  initialReservationRef?: string;
+  initialPaymentSuccess?: boolean;
+  replaceUrl?: (url: string) => void;
+  onClose?: () => void;
+  showCloseButton?: boolean;
+  fetchStaffAttribution?: (bookingReference: string) => Promise<StaffBookingAttribution | null>;
+}
+
 export function ManageBookingView({
   initialRef: initialRefProp = '',
   initialLastName: initialLastNameProp = '',
@@ -133,10 +121,10 @@ export function ManageBookingView({
         if (cancelled) return;
         setBooking(b);
 
-        const hasPaymentOwing = (booking: BookingData) => {
-          const status = booking?.payment?.status;
-          const balanceAmount = booking?.payment?.plan?.balanceAmount ?? 0;
-          const depositAmount = booking?.payment?.plan?.depositAmount ?? 0;
+        const hasPaymentOwing = (bookingData: BookingData) => {
+          const status = bookingData?.payment?.status;
+          const balanceAmount = bookingData?.payment?.plan?.balanceAmount ?? 0;
+          const depositAmount = bookingData?.payment?.plan?.depositAmount ?? 0;
           return (status === 'DEPOSIT_PAID' && balanceAmount > 0) ||
             (status === 'AWAITING_PAYMENT' && (depositAmount > 0 || balanceAmount > 0));
         };
@@ -192,7 +180,7 @@ export function ManageBookingView({
               return;
             }
           }
-        } catch { }
+        } catch { /* ignore */ }
         if (cancelled) return;
         attempt += 1;
         if (attempt * POLL_MS < MAX_MS) {
@@ -276,11 +264,7 @@ export function ManageBookingView({
           </div>
         )}
         {staffAttribution ? (
-          <div
-            className="mb-4 rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm text-stone-800"
-            role="region"
-            aria-label="Staff booking attribution"
-          >
+          <div className="mb-4 rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm text-stone-800" role="region" aria-label="Staff booking attribution">
             <p className="font-semibold text-stone-900 mb-2">Booking attribution</p>
             <p>
               <span className="text-stone-600">Channel:</span> {staffChannelLabel(staffAttribution.reportingSource)}
@@ -288,9 +272,7 @@ export function ManageBookingView({
             {staffAttribution.partnerId ? (
               <p>
                 <span className="text-stone-600">Partner:</span>{' '}
-                {staffAttribution.partnerName
-                  ? `${staffAttribution.partnerName} (${staffAttribution.partnerId})`
-                  : staffAttribution.partnerId}
+                {staffAttribution.partnerName ? `${staffAttribution.partnerName} (${staffAttribution.partnerId})` : staffAttribution.partnerId}
               </p>
             ) : null}
             {staffAttribution.agentDisplay || staffAttribution.agentId ? (
@@ -322,6 +304,16 @@ export function ManageBookingView({
     );
   }
 
+  const waitingForBooking = initialReservationRef && initialLastName && !initialRef;
+  if (waitingForBooking && loading) {
+    return (
+      <div className={containerClass}>
+        <div className="w-10 h-10 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: 'var(--booking-primary)' }} aria-hidden />
+        <p style={{ color: 'var(--booking-text-muted)' }}>Confirming your booking…</p>
+      </div>
+    );
+  }
+
   return (
     <div className={formOuterClass || undefined}>
       <div className="p-8 max-w-md w-full shadow-xl" style={{ backgroundColor: 'var(--booking-surface)', borderRadius: 'var(--booking-radius)' }}>

package/src/components/PhoneInputWithCountry.module.css

@@ -0,0 +1,131 @@
+/* Clean, minimal phone input matching the reference design */
+.wrapper {
+  width: 100%;
+  position: relative;
+  overflow: visible;
+  --react-international-phone-height: 44px;
+  --react-international-phone-border-color: rgba(0, 0, 0, 0.12);
+  --react-international-phone-border-radius: 12px;
+  --react-international-phone-background-color: #fff;
+  --react-international-phone-text-color: var(--primary-text, #333);
+  --react-international-phone-font-size: 1rem;
+  --react-international-phone-dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  --react-international-phone-dropdown-item-height: 40px;
+  --react-international-phone-dropdown-item-font-size: 14px;
+  --react-international-phone-dropdown-item-text-color: var(--primary-text, #333);
+  --react-international-phone-dropdown-item-dial-code-color: var(--grey-text, #6b7280);
+  --react-international-phone-selected-dropdown-item-background-color: #f5f5f5;
+  --react-international-phone-country-selector-border-color: transparent;
+  --react-international-phone-country-selector-background-color: transparent;
+}
+
+.phoneInput {
+  width: 100%;
+}
+
+/* Container: single unified border around flag + input */
+.wrapper :global(.react-international-phone-input-container) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: 2px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+  border-radius: 12px;
+  background: var(--primary-background, #fff);
+  transition: border-color 0.15s;
+  overflow: visible;
+}
+
+/* Country selector needs overflow visible so dropdown can escape */
+.wrapper :global(.react-international-phone-country-selector) {
+  overflow: visible;
+}
+
+.wrapper:focus-within :global(.react-international-phone-input-container) {
+  border-color: var(--accent-orange);
+  outline: none;
+}
+
+/* Country selector button - no separate border, blends into container */
+.wrapper :global(.react-international-phone-country-selector-button) {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  padding: 0 0.5rem 0 0.75rem;
+  height: 100%;
+}
+
+.wrapper :global(.react-international-phone-country-selector-button:hover) {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.wrapper :global(.react-international-phone-country-selector-button__dropdown-arrow) {
+  border-top-color: var(--grey-text, #6b7280);
+  margin-left: 0.25rem;
+}
+
+/* Input field */
+.wrapper :global(.react-international-phone-input) {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  border-radius: 0;
+  padding: 0.625rem 0.875rem;
+  font-size: 1rem;
+  font-family: inherit;
+  color: var(--primary-text, #333);
+  background: transparent;
+}
+
+.wrapper :global(.react-international-phone-input):focus {
+  outline: none;
+}
+
+.wrapper :global(.react-international-phone-input)::placeholder {
+  color: var(--grey-text, #878686);
+}
+
+/* Dropdown - floating panel BELOW the input, not inside */
+.wrapper :global(.react-international-phone-country-selector-dropdown),
+.dropdown {
+  position: absolute !important;
+  top: 100% !important;
+  left: 0 !important;
+  margin-top: 6px !important;
+  width: 100% !important;
+  min-width: 280px;
+  max-height: 280px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  background: #fff;
+  padding: 8px 0;
+  z-index: 1000;
+}
+
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item) {
+  padding: 0.5rem 1rem;
+  min-height: 40px;
+  cursor: pointer;
+}
+
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item):hover,
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item--focused) {
+  background: #f5f5f5;
+}
+
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item-country-name) {
+  font-size: 14px;
+  color: var(--primary-text, #333);
+}
+
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item-dial-code) {
+  font-size: 14px;
+  color: var(--grey-text, #6b7280);
+}
+
+/* Flag sizing */
+.wrapper :global(.react-international-phone-country-selector-button__flag-emoji),
+.wrapper :global(.react-international-phone-country-selector-dropdown__list-item-flag-emoji) {
+  width: 20px;
+  height: 14px;
+}

package/src/components/PhoneInputWithCountry.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import { PhoneInput } from 'react-international-phone';
+import 'react-international-phone/style.css';
+import styles from './PhoneInputWithCountry.module.css';
+
+interface PhoneInputWithCountryProps {
+  id?: string;
+  value: string;
+  onChange: (value: string | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export default function PhoneInputWithCountryComponent({
+  id,
+  value,
+  onChange,
+  placeholder = 'Phone number',
+  disabled = false,
+  className,
+}: PhoneInputWithCountryProps) {
+  return (
+    <div className={`${styles.wrapper} ${className ?? ''}`}>
+      <PhoneInput
+        defaultCountry="ca"
+        preferredCountries={['ca', 'us']}
+        value={value || ''}
+        onChange={(phone) => onChange(phone || undefined)}
+        placeholder={placeholder}
+        disabled={disabled}
+        inputProps={{ id }}
+        className={styles.phoneInput}
+        countrySelectorStyleProps={{
+          dropdownStyleProps: {
+            className: styles.dropdown,
+          },
+        }}
+      />
+    </div>
+  );
+}

package/src/components/PickupLocationDialog.module.css

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