@ticketboothapp/booking 0.1.10 → 0.1.12

package/src/components/ManageBookingView.tsx

@@ -1,8 +1,14 @@
 'use client';
 
-import { useMemo, type CSSProperties } from 'react';
+import { useState, useEffect, useLayoutEffect } from 'react';
+import { formatBookingRefForDisplay } from '@/lib/booking-ref';
+import { BookingDetails, type BookingData } from '@/components/BookingDetails';
+import { type Currency } from '@/components/CurrencySwitcher';
+import { ENV } from '@/lib/env';
+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;
@@ -17,6 +23,19 @@ export interface StaffBookingAttribution {
   commissionUsesPartnerRate?: boolean;
 }
 
+function staffChannelLabel(source: string): string {
+  const labels: Record<string, string> = {
+    DASHBOARD: 'Dashboard',
+    GYG: 'GetYourGuide',
+    WEBSITE: 'Website (main site)',
+    PARTNER_PORTAL: 'Website (main site)',
+    WEBSITE_PARTNER_PORTAL: 'Partner booking portal',
+    AFFILIATE: 'Affiliate',
+    VIATOR: 'Viator',
+  };
+  return labels[source] ?? source;
+}
+
 export interface ManageBookingViewProps {
   initialRef?: string;
   initialLastName?: string;
@@ -28,48 +47,339 @@ export interface ManageBookingViewProps {
   fetchStaffAttribution?: (bookingReference: string) => Promise<StaffBookingAttribution | null>;
 }
 
-const getBookingHost = (): string =>
-  process.env.NEXT_PUBLIC_BOOKING_WIDGET_URL || 'https://viaviamorainelake.com';
-
 export function ManageBookingView({
-  initialRef = '',
-  initialLastName = '',
-  initialReservationRef = '',
+  initialRef: initialRefProp = '',
+  initialLastName: initialLastNameProp = '',
+  initialReservationRef: initialReservationRefProp = '',
   initialPaymentSuccess = false,
+  replaceUrl,
   onClose,
   showCloseButton = true,
+  fetchStaffAttribution,
 }: ManageBookingViewProps) {
-  const src = useMemo(() => {
-    const url = new URL('/manage', getBookingHost());
-    if (initialRef) url.searchParams.set('ref', initialRef);
-    if (initialLastName) url.searchParams.set('lastName', initialLastName);
-    if (initialReservationRef) url.searchParams.set('reservationRef', initialReservationRef);
-    if (initialPaymentSuccess) url.searchParams.set('payment', 'balance_success');
-    return url.toString();
-  }, [initialLastName, initialPaymentSuccess, initialRef, initialReservationRef]);
-
-  const frameStyle: CSSProperties = {
-    width: '100%',
-    minHeight: '700px',
-    border: 0,
-    display: 'block',
-    backgroundColor: 'transparent',
-  };
+  const [bookingReference, setBookingReference] = useState(initialRefProp);
+  const [lastName, setLastName] = useState(initialLastNameProp);
+  const [booking, setBooking] = useState<BookingData | null>(null);
+  const [staffAttribution, setStaffAttribution] = useState<StaffBookingAttribution | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useLayoutEffect(() => {
+    setBookingReference(initialRefProp ? formatBookingRefForDisplay(initialRefProp) || initialRefProp : initialRefProp);
+    setLastName(initialLastNameProp);
+  }, [initialRefProp, initialLastNameProp]);
+
+  const initialRef = initialRefProp.trim();
+  const initialLastName = initialLastNameProp.trim();
+  const initialReservationRef = (initialReservationRefProp || '').trim();
+
+  useEffect(() => {
+    if (!booking?.bookingReference || !fetchStaffAttribution) {
+      setStaffAttribution(null);
+      return;
+    }
+    let cancelled = false;
+    const ref = formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference;
+    fetchStaffAttribution(ref)
+      .then((a) => {
+        if (!cancelled) setStaffAttribution(a);
+      })
+      .catch(() => {
+        if (!cancelled) setStaffAttribution(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [booking?.bookingReference, fetchStaffAttribution]);
+
+  useEffect(() => {
+    if (!initialRef || !initialLastName) return;
+    let cancelled = false;
+    const POLL_DELAY_MS = 2000;
+    const MAX_POLL_ATTEMPTS = 3;
+
+    const fetchBooking = async (): Promise<BookingData | null> => {
+      const response = await fetch(
+        `${API_URL}/1/public/bookings/${encodeURIComponent(initialRef)}?lastName=${encodeURIComponent(initialLastName)}`,
+        { method: 'GET', headers: { 'Content-Type': 'application/json' } }
+      );
+      if (!response.ok) {
+        if (response.status === 404) throw new Error('Booking not found or last name does not match');
+        const err = await response.json();
+        throw new Error(err.errorMessage || err.error || 'Failed to lookup booking');
+      }
+      const data = await response.json();
+      return data.data as BookingData;
+    };
+
+    const doLookup = async () => {
+      setLoading(true);
+      setError('');
+      setBooking(null);
+      try {
+        let b = await fetchBooking();
+        if (cancelled) return;
+        setBooking(b);
+
+        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));
+        };
+
+        if (initialPaymentSuccess && b && hasPaymentOwing(b)) {
+          for (let attempt = 1; attempt < MAX_POLL_ATTEMPTS && !cancelled; attempt++) {
+            await new Promise((r) => setTimeout(r, POLL_DELAY_MS));
+            if (cancelled) return;
+            b = await fetchBooking();
+            if (cancelled) return;
+            setBooking(b);
+            if (!b || !hasPaymentOwing(b)) break;
+          }
+          replaceUrl?.(`/manage?ref=${encodeURIComponent(initialRef)}&lastName=${encodeURIComponent(initialLastName)}`);
+        }
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : 'Failed to lookup booking');
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+    doLookup();
+    return () => { cancelled = true; };
+  }, [initialRef, initialLastName, initialPaymentSuccess, replaceUrl]);
+
+  useEffect(() => {
+    if (!initialReservationRef || !initialLastName || initialRef) return;
+    let cancelled = false;
+    const POLL_MS = 1500;
+    const MAX_MS = 30000;
+    let attempt = 0;
+    const doLookup = async () => {
+      setLoading(true);
+      setError('');
+      setBooking(null);
+      const poll = async (): Promise<void> => {
+        if (cancelled) return;
+        try {
+          const response = await fetch(
+            `${API_URL}/1/public/bookings/by-reservation?reservationRef=${encodeURIComponent(initialReservationRef)}&lastName=${encodeURIComponent(initialLastName)}`,
+            { method: 'GET', headers: { 'Content-Type': 'application/json' } }
+          );
+          if (cancelled) return;
+          if (response.ok) {
+            const data = await response.json();
+            const b = data.data as BookingData;
+            if (b?.bookingReference && !cancelled) {
+              const shortRef = formatBookingRefForDisplay(b.bookingReference);
+              replaceUrl?.(`/manage?ref=${encodeURIComponent(shortRef)}&lastName=${encodeURIComponent(initialLastName)}`);
+              setBookingReference(shortRef);
+              setBooking(b);
+              setLoading(false);
+              return;
+            }
+          }
+        } catch { /* ignore */ }
+        if (cancelled) return;
+        attempt += 1;
+        if (attempt * POLL_MS < MAX_MS) {
+          setTimeout(poll, POLL_MS);
+        } else {
+          if (!cancelled) setError('Booking not found. Enter your booking reference from the confirmation email when it arrives.');
+          setLoading(false);
+        }
+      };
+      await poll();
+    };
+    doLookup();
+    return () => { cancelled = true; };
+  }, [initialReservationRef, initialLastName, initialRef, replaceUrl]);
+
+  async function handleLookup() {
+    if (!bookingReference.trim() || !lastName.trim()) {
+      setError('Please enter both booking reference and last name');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    setBooking(null);
+
+    try {
+      const response = await fetch(
+        `${API_URL}/1/public/bookings/${encodeURIComponent(bookingReference.trim())}?lastName=${encodeURIComponent(lastName.trim())}`,
+        { method: 'GET', headers: { 'Content-Type': 'application/json' } }
+      );
+
+      if (!response.ok) {
+        if (response.status === 404) throw new Error('Booking not found or last name does not match');
+        const err = await response.json();
+        throw new Error(err.errorMessage || err.error || 'Failed to lookup booking');
+      }
+
+      const data = await response.json();
+      setBooking(data.data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to lookup booking');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleRefetch() {
+    if (!bookingReference.trim() || !lastName.trim()) return;
+    try {
+      const response = await fetch(
+        `${API_URL}/1/public/bookings/${encodeURIComponent(bookingReference.trim())}?lastName=${encodeURIComponent(lastName.trim())}`,
+        { method: 'GET', headers: { 'Content-Type': 'application/json' } }
+      );
+      if (response.ok) {
+        const data = await response.json();
+        setBooking(data.data);
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  const isEmbed = !!onClose;
+  const showClose = isEmbed && showCloseButton;
+  const containerClass = isEmbed ? 'flex flex-col p-4' : 'min-h-screen bg-gradient-to-b from-stone-100 to-stone-200 flex flex-col items-center justify-center gap-4 p-4';
+  const formOuterClass = isEmbed ? '' : 'min-h-screen bg-gradient-to-b from-stone-100 to-stone-200 flex items-center justify-center p-4';
+
+  if (booking) {
+    return (
+      <div className={isEmbed ? 'w-full max-w-2xl' : 'min-h-screen bg-gradient-to-b from-stone-100 to-stone-200'}>
+        {showClose && (
+          <div className="flex justify-end mb-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-sm hover:opacity-80"
+              style={{ color: 'var(--booking-text-muted)' }}
+            >
+              Close
+            </button>
+          </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">
+            <p className="font-semibold text-stone-900 mb-2">Booking attribution</p>
+            <p>
+              <span className="text-stone-600">Channel:</span> {staffChannelLabel(staffAttribution.reportingSource)}
+            </p>
+            {staffAttribution.partnerId ? (
+              <p>
+                <span className="text-stone-600">Partner:</span>{' '}
+                {staffAttribution.partnerName ? `${staffAttribution.partnerName} (${staffAttribution.partnerId})` : staffAttribution.partnerId}
+              </p>
+            ) : null}
+            {staffAttribution.agentDisplay || staffAttribution.agentId ? (
+              <p>
+                <span className="text-stone-600">Agent:</span>{' '}
+                {staffAttribution.agentDisplay ?? staffAttribution.agentId}
+              </p>
+            ) : null}
+            {staffAttribution.commissionAmount != null && staffAttribution.commissionAmount > 0 ? (
+              <p>
+                <span className="text-stone-600">Commission:</span>{' '}
+                {formatCurrencyAmount(staffAttribution.commissionAmount, staffAttribution.bookingCurrency as Currency)}
+                {staffAttribution.commissionRate != null && staffAttribution.commissionRate > 0 ? (
+                  <>
+                    {' '}
+                    ({Math.round(staffAttribution.commissionRate * 100)}% of{' '}
+                    {staffAttribution.commissionUsesPartnerRate && staffAttribution.commissionBaseAmount != null
+                      ? `${formatCurrencyAmount(staffAttribution.commissionBaseAmount, staffAttribution.bookingCurrency as Currency)} pre-tax`
+                      : 'booking total'}
+                    )
+                  </>
+                ) : null}
+              </p>
+            ) : null}
+          </div>
+        ) : null}
+        <BookingDetails booking={booking} currency={booking.receipt.currency as Currency} onRefetch={handleRefetch} />
+      </div>
+    );
+  }
+
+  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="w-full">
-      {onClose && showCloseButton ? (
-        <div className="mb-2 flex justify-end">
+    <div className={formOuterClass || undefined}>
+      <div className="p-8 max-w-md w-full shadow-xl" style={{ backgroundColor: 'var(--booking-surface)', borderRadius: 'var(--booking-radius)' }}>
+        {isEmbed && (
+          <div className={`flex justify-between items-center mb-4 ${showClose ? '' : 'justify-start'}`}>
+            <h1 className="text-2xl font-bold" style={{ color: 'var(--booking-text)' }}>Manage Your Booking</h1>
+            {showClose && (
+              <button type="button" onClick={onClose} className="text-sm hover:opacity-80" style={{ color: 'var(--booking-text-muted)' }}>
+                Close
+              </button>
+            )}
+          </div>
+        )}
+        {!isEmbed && <h1 className="text-2xl font-bold mb-6" style={{ color: 'var(--booking-text)' }}>Manage Your Booking</h1>}
+
+        <form onSubmit={(e) => { e.preventDefault(); handleLookup(); }} className="space-y-4">
+          <div>
+            <label htmlFor="manage-booking-ref" className="block text-sm font-medium mb-1" style={{ color: 'var(--booking-text)' }}>
+              Booking Reference
+            </label>
+            <input
+              id="manage-booking-ref"
+              type="text"
+              value={bookingReference}
+              onChange={(e) => setBookingReference(formatBookingRefForDisplay(e.target.value) || e.target.value)}
+              className="w-full px-4 py-2 rounded-lg focus:ring-2"
+              style={{ borderColor: 'var(--booking-border-input)', borderWidth: '1px', borderStyle: 'solid' }}
+              placeholder="e.g., ABC12345"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="manage-booking-lastname" className="block text-sm font-medium mb-1" style={{ color: 'var(--booking-text)' }}>
+              Last Name
+            </label>
+            <input
+              id="manage-booking-lastname"
+              type="text"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              className="w-full px-4 py-2 rounded-lg focus:ring-2"
+              style={{ borderColor: 'var(--booking-border-input)', borderWidth: '1px', borderStyle: 'solid' }}
+              placeholder="As entered at booking"
+              required
+            />
+          </div>
+          {error && (
+            <div className="rounded-lg p-3 text-sm" style={{ backgroundColor: 'var(--booking-error-bg)', border: '1px solid var(--booking-error-border)', color: 'var(--booking-error-text)' }}>{error}</div>
+          )}
           <button
-            type="button"
-            onClick={onClose}
-            className="rounded border border-stone-300 px-3 py-1 text-sm hover:bg-stone-100"
+            type="submit"
+            disabled={loading}
+            className="w-full py-3 text-white font-semibold rounded-lg transition-colors disabled:cursor-not-allowed"
+            style={{ backgroundColor: loading ? 'var(--booking-border-input)' : 'var(--booking-primary)' }}
           >
-            Close
+            {loading ? 'Looking up...' : 'View Booking'}
           </button>
-        </div>
-      ) : null}
-      <iframe title="Manage booking" src={src} style={frameStyle} loading="lazy" />
+        </form>
+
+        {!isEmbed && (
+          <div className="mt-6 pt-6 text-center text-sm" style={{ borderColor: 'var(--booking-border)', borderTopWidth: '1px', borderTopStyle: 'solid', color: 'var(--booking-text-muted)' }}>
+            <p>Enter your booking reference and last name to view your booking details.</p>
+            <p className="mt-1" style={{ color: 'var(--booking-text-muted)' }}>You can also share a link: /manage?ref=ABC12345&amp;lastName=Smith</p>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

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