@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/ProductList.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-import type { Product } from '@/lib/api';
-import { useTranslations, useLocale } from '@/lib/i18n';
-import type { Currency } from '@/components/CurrencySwitcher';
-import { formatCurrencyAmount } from '@/lib/currency';
-
-/** Lowest base price in display currency from ticketbooth-product-prices (minPriceByCurrency). No conversion; CAD fallback from option pricing only. */
-function getProductFromPrice(product: Product, currency: Currency): number | undefined {
-  const fromApi = product.minPriceByCurrency?.[currency];
-  if (fromApi != null) return fromApi;
-  if (currency !== 'CAD') return undefined;
-  const activeOptions = product.options?.filter((opt) => opt.status === 'ACTIVE') || [];
-  const adultPricesCAD = activeOptions
-    .map((opt) => opt.pricing?.ADULT)
-    .filter((price): price is number => price != null);
-  return adultPricesCAD.length > 0 ? Math.min(...adultPricesCAD) : undefined;
-}
-
-interface ProductListProps {
-  products: Product[];
-  onSelect: (product: Product) => void;
-  currency: Currency;
-}
-
-export function ProductList({ products, onSelect, currency }: ProductListProps) {
-  const { t } = useTranslations();
-  const { locale } = useLocale();
-
-  return (
-    <div className="space-y-4">
-      {products.map((product) => {
-        const fromPrice = getProductFromPrice(product, currency);
-
-        return (
-          <button
-            key={product.productId}
-            onClick={() => onSelect(product)}
-            className="w-full text-left p-6 bg-white rounded-xl border border-stone-200 hover:border-emerald-400 hover:shadow-lg transition-all group"
-          >
-            <div className="flex items-start justify-between">
-              <div className="flex-1">
-                <div className="flex items-center gap-2">
-                  <h3 className="text-lg font-semibold text-stone-900 group-hover:text-emerald-700 transition-colors">
-                    {product.name}
-                  </h3>
-                  {product.mostPopular && (
-                    <span className="inline-flex items-center rounded-full bg-[#ff4d00] text-white text-[10px] font-semibold px-1.5 py-0.5">
-                      {t('booking.mostPopular') ?? 'Most popular'}
-                    </span>
-                  )}
-                </div>
-                {product.description && (
-                  <p className="mt-1 text-sm text-stone-500 line-clamp-2">
-                    {product.description}
-                  </p>
-                )}
-                {fromPrice != null && (
-                  <p className="mt-3 text-sm font-medium text-emerald-600">
-                    {t('products.from')} {formatCurrencyAmount(fromPrice, currency, locale)}
-                  </p>
-                )}
-              </div>
-              <div className="ml-4 text-stone-400 group-hover:text-emerald-600 transition-colors">
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              </div>
-            </div>
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-
-

package/src/components/WhatsAppPhoneInput.tsx

@@ -1,224 +0,0 @@
-'use client';
-
-import { useMemo, useState, useEffect, useRef } from 'react';
-
-const COUNTRY_OPTIONS: { code: string; dial: string; flag: string }[] = [
-  { code: 'CA', dial: '+1', flag: '🇨🇦' },
-  { code: 'US', dial: '+1', flag: '🇺🇸' },
-  { code: 'GB', dial: '+44', flag: '🇬🇧' },
-  { code: 'AU', dial: '+61', flag: '🇦🇺' },
-  { code: 'DE', dial: '+49', flag: '🇩🇪' },
-  { code: 'FR', dial: '+33', flag: '🇫🇷' },
-  { code: 'ES', dial: '+34', flag: '🇪🇸' },
-  { code: 'IT', dial: '+39', flag: '🇮🇹' },
-  { code: 'MX', dial: '+52', flag: '🇲🇽' },
-  { code: 'IN', dial: '+91', flag: '🇮🇳' },
-  { code: 'JP', dial: '+81', flag: '🇯🇵' },
-  { code: 'BR', dial: '+55', flag: '🇧🇷' },
-  { code: 'NL', dial: '+31', flag: '🇳🇱' },
-  { code: 'IE', dial: '+353', flag: '🇮🇪' },
-  { code: 'NZ', dial: '+64', flag: '🇳🇿' },
-  { code: 'ZA', dial: '+27', flag: '🇿🇦' },
-  { code: 'SG', dial: '+65', flag: '🇸🇬' },
-  { code: 'HK', dial: '+852', flag: '🇭🇰' },
-  { code: 'PH', dial: '+63', flag: '🇵🇭' },
-  { code: 'PL', dial: '+48', flag: '🇵🇱' },
-  { code: 'SE', dial: '+46', flag: '🇸🇪' },
-  { code: 'CH', dial: '+41', flag: '🇨🇭' },
-  { code: 'AT', dial: '+43', flag: '🇦🇹' },
-  { code: 'BE', dial: '+32', flag: '🇧🇪' },
-  { code: 'PT', dial: '+351', flag: '🇵🇹' },
-  { code: 'GR', dial: '+30', flag: '🇬🇷' },
-  { code: 'CZ', dial: '+420', flag: '🇨🇿' },
-  { code: 'RO', dial: '+40', flag: '🇷🇴' },
-  { code: 'HU', dial: '+36', flag: '🇭🇺' },
-  { code: 'TR', dial: '+90', flag: '🇹🇷' },
-  { code: 'IL', dial: '+972', flag: '🇮🇱' },
-  { code: 'AE', dial: '+971', flag: '🇦🇪' },
-  { code: 'SA', dial: '+966', flag: '🇸🇦' },
-  { code: 'CN', dial: '+86', flag: '🇨🇳' },
-  { code: 'KR', dial: '+82', flag: '🇰🇷' },
-  { code: 'TH', dial: '+66', flag: '🇹🇭' },
-  { code: 'MY', dial: '+60', flag: '🇲🇾' },
-  { code: 'ID', dial: '+62', flag: '🇮🇩' },
-  { code: 'VN', dial: '+84', flag: '🇻🇳' },
-  { code: 'AR', dial: '+54', flag: '🇦🇷' },
-  { code: 'CL', dial: '+56', flag: '🇨🇱' },
-  { code: 'CO', dial: '+57', flag: '🇨🇴' },
-  { code: 'PE', dial: '+51', flag: '🇵🇪' },
-  { code: 'EG', dial: '+20', flag: '🇪🇬' },
-  { code: 'NG', dial: '+234', flag: '🇳🇬' },
-  { code: 'KE', dial: '+254', flag: '🇰🇪' },
-  { code: 'RU', dial: '+7', flag: '🇷🇺' },
-  { code: 'UA', dial: '+380', flag: '🇺🇦' },
-];
-
-const DIAL_TO_COUNTRIES = COUNTRY_OPTIONS.reduce<Record<string, string[]>>((acc, c) => {
-  if (!acc[c.dial]) acc[c.dial] = [];
-  acc[c.dial].push(c.code);
-  return acc;
-}, {});
-
-function parsePhoneValue(value: string): { dial: string; local: string; countryCode: string | null } {
-  if (!value || typeof value !== 'string') return { dial: '+1', local: '', countryCode: null };
-  const trimmed = value.trim();
-  
-  if (trimmed.match(/^\+\d+$/)) {
-    const dial = trimmed;
-    const codes = DIAL_TO_COUNTRIES[dial];
-    return { dial, local: '', countryCode: codes?.length === 1 ? codes[0]! : null };
-  }
-
-  const digitsOnly = trimmed.replace(/\D/g, '');
-  if (!digitsOnly) return { dial: '+1', local: '', countryCode: null };
-
-  const sortedByDialLength = [...COUNTRY_OPTIONS].sort((a, b) => {
-    const aDigits = a.dial.replace(/\D/g, '').length;
-    const bDigits = b.dial.replace(/\D/g, '').length;
-    return bDigits - aDigits;
-  });
-  const dialDigits = (d: string) => d.replace(/\D/g, '');
-  for (const c of sortedByDialLength) {
-    const d = dialDigits(c.dial);
-    if (digitsOnly.startsWith(d)) {
-      const codes = DIAL_TO_COUNTRIES[c.dial];
-      return {
-        dial: c.dial,
-        local: digitsOnly.slice(d.length),
-        countryCode: codes?.length === 1 ? codes[0]! : null,
-      };
-    }
-  }
-  return { dial: '+1', local: digitsOnly, countryCode: null };
-}
-
-function formatLocal(local: string, dial: string): string {
-  const d = local.replace(/\D/g, '');
-  if (!d) return '';
-
-  if (dial === '+1') {
-    if (d.length <= 3) return d;
-    if (d.length <= 6) return `(${d.slice(0, 3)}) ${d.slice(3)}`;
-    return `(${d.slice(0, 3)}) ${d.slice(3, 6)}-${d.slice(6, 10)}`;
-  }
-
-  const parts: string[] = [];
-  for (let i = 0; i < d.length; i += 3) {
-    parts.push(d.slice(i, i + 3));
-  }
-  return parts.join(' ').trim();
-}
-
-export interface WhatsAppPhoneInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  label?: string;
-  optional?: boolean;
-  error?: string;
-  'data-testid'?: string;
-}
-
-export function WhatsAppPhoneInput({
-  value,
-  onChange,
-  placeholder = '(555) 123-4567',
-  label = 'WhatsApp Number',
-  optional = true,
-  error,
-  'data-testid': dataTestId,
-}: WhatsAppPhoneInputProps) {
-  const parsed = useMemo(() => parsePhoneValue(value), [value]);
-  const { local, countryCode: derivedCountry } = parsed;
-
-  const [selectedCountryCode, setSelectedCountryCode] = useState<string>(() => {
-    if (derivedCountry) return derivedCountry;
-    return 'CA';
-  });
-
-  const [localDigits, setLocalDigits] = useState(() => local);
-  const lastEmitted = useRef(value);
-  const justEmitted = useRef(false);
-
-  useEffect(() => {
-    if (derivedCountry) setSelectedCountryCode(derivedCountry);
-  }, [derivedCountry]);
-
-  useEffect(() => {
-    if (justEmitted.current) {
-      justEmitted.current = false;
-      return;
-    }
-    if (value !== lastEmitted.current) {
-      lastEmitted.current = value;
-      setLocalDigits(local);
-    }
-  }, [value, local]);
-
-  const selected = COUNTRY_OPTIONS.find((c) => c.code === selectedCountryCode) ?? COUNTRY_OPTIONS[0];
-
-  const handleCountryChange = (code: string) => {
-    setSelectedCountryCode(code);
-    const c = COUNTRY_OPTIONS.find((x) => x.code === code) ?? COUNTRY_OPTIONS[0];
-    const digits = localDigits.replace(/\D/g, '').slice(0, 15);
-    const full = `${c.dial}${digits}`;
-    lastEmitted.current = full;
-    justEmitted.current = true;
-    onChange(full);
-  };
-
-  const handleLocalChange = (input: string) => {
-    const digits = input.replace(/\D/g, '').slice(0, 15);
-    setLocalDigits(digits);
-    const full = `${selected.dial}${digits}`;
-    lastEmitted.current = full;
-    justEmitted.current = true;
-    onChange(full);
-  };
-
-  const displayLocal = formatLocal(localDigits || local, selected.dial);
-
-  return (
-    <div className="space-y-1">
-      {label && (
-        <label className="block text-sm font-medium text-stone-700 mb-2">
-          {label}
-          {optional && <span className="text-stone-400 text-xs font-normal ml-1">(optional)</span>}
-        </label>
-      )}
-      <div
-        data-testid={dataTestId}
-        className={`flex rounded-lg border bg-white overflow-hidden transition-shadow ${
-          error
-            ? 'border-red-400 focus-within:ring-2 focus-within:ring-red-500 focus-within:border-red-500'
-            : 'border-stone-300 focus-within:ring-2 focus-within:ring-emerald-500 focus-within:border-emerald-500'
-        }`}
-      >
-        <select
-          value={selected.code}
-          onChange={(e) => handleCountryChange(e.target.value)}
-          className="w-20 min-w-0 shrink-0 pl-2 pr-6 py-3 bg-stone-50 border-r border-stone-200 text-stone-900 text-sm font-medium focus:outline-none cursor-pointer appearance-none bg-[length:10px] bg-[right_4px_center] bg-no-repeat"
-          style={{
-            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23787571'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
-          }}
-        >
-          {COUNTRY_OPTIONS.map((c) => (
-            <option key={c.code} value={c.code}>
-              {c.flag} {c.dial}
-            </option>
-          ))}
-        </select>
-        <input
-          type="tel"
-          inputMode="numeric"
-          autoComplete="tel-national"
-          value={displayLocal}
-          onChange={(e) => handleLocalChange(e.target.value)}
-          placeholder={placeholder}
-          className="flex-1 min-w-0 py-3 px-4 text-stone-900 placeholder-stone-400 focus:outline-none text-sm"
-        />
-      </div>
-      {error && <p className="text-xs text-red-600 mt-1">{error}</p>}
-    </div>
-  );
-}

package/src/components/index.ts

@@ -1,31 +0,0 @@
-/**
- * Booking Widget Components
- * 
- * Exports embeddable components for use in other React applications
- */
-
-export { BookingWidget } from './BookingWidget';
-export type { BookingWidgetProps } from './BookingWidget';
-export type { BookingAppMode, BookingAppPermissions, ViewerRole, ManageParams } from '../contexts/BookingAppContext';
-export { ManageBookingView } from './ManageBookingView';
-export type { ManageBookingViewProps, StaffBookingAttribution } from './ManageBookingView';
-
-export { BookingFlow } from './BookingFlow';
-export { Calendar } from './Calendar';
-export type { DateAvailability } from './Calendar';
-export { PickupLocationSelector } from './PickupLocationSelector';
-export type { CustomPickupLocation } from './PickupLocationSelector';
-export { BookingDetails } from './BookingDetails';
-export { PriceBreakdown } from './PriceBreakdown';
-export type { PriceBreakdownProps } from './PriceBreakdown';
-export { ProductList } from './ProductList';
-export { CurrencySwitcher, useCurrency } from './CurrencySwitcher';
-export type { Currency } from './CurrencySwitcher';
-
-// Re-export types from API for convenience
-export type { Product, Availability } from '@/lib/api';
-
-// Theme: host can pass partial theme to customize colours, fonts, etc.
-export type { BookingTheme } from '../lib/theme';
-export { DEFAULT_BOOKING_THEME, mergeTheme } from '../lib/theme';
-