@ticketboothapp/booking 0.1.23 → 1.2.24

package/src/components/ManageBookingView.tsx

@@ -1,437 +0,0 @@
-'use client';
-
-import { useState, useEffect, useLayoutEffect } from 'react';
-import { formatBookingRefForDisplay } from '@/lib/booking-ref';
-import BookingDetails, { type BookingData } from '@/components/BookingDetails';
-import { type Currency, formatCurrencyAmount } from '@/lib/currency';
-import { ENV } from '@/lib/env';
-
-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;
-  partnerId?: string | null;
-  partnerName?: string | null;
-  agentId?: string | null;
-  agentDisplay?: string | null;
-  commissionRate?: number | null;
-  commissionBaseAmount?: number | null;
-  commissionAmount?: number | null;
-  bookingCurrency: string;
-  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;
-  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 = '',
-  initialReservationRef: initialReservationRefProp = '',
-  initialPaymentSuccess = false,
-  replaceUrl,
-  onClose,
-  showCloseButton = true,
-  fetchStaffAttribution,
-}: ManageBookingViewProps) {
-  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 = (bk: BookingData) => {
-          const status = bk?.payment?.status;
-          const balanceAmount = bk?.payment?.plan?.balanceAmount ?? 0;
-          const depositAmount = bk?.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={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="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)' }}
-          >
-            {loading ? 'Looking up...' : 'View Booking'}
-          </button>
-        </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

@@ -1,131 +0,0 @@
-/* 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

@@ -1,44 +0,0 @@
-'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>
-  );
-}