@ticketboothapp/booking 0.1.4 → 0.1.8

package/src/components/ProductList.tsx

@@ -0,0 +1,78 @@
+'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/TermsAcceptance.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+
+export interface TermsAcceptanceProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  /** Translation function for labels */
+  t: (key: string) => string;
+  /** Optional custom terms content (HTML or plain text). If not provided, uses t('terms.content'). */
+  termsContent?: string;
+}
+
+/**
+ * Checkbox to accept terms & conditions, with a "View terms" link that opens
+ * a small modal showing the full text (in-page, not a separate page).
+ * Least intrusive: user can proceed by checking the box; they can open the
+ * modal to read the full terms if they want.
+ */
+export function TermsAcceptance({
+  checked,
+  onChange,
+  t,
+  termsContent,
+}: TermsAcceptanceProps) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const content = termsContent ?? t('terms.content');
+
+  return (
+    <>
+      <label className="flex items-start gap-3 cursor-pointer group">
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={(e) => onChange(e.target.checked)}
+          className="mt-1 rounded border-stone-300 text-emerald-600 focus:ring-emerald-500"
+          aria-describedby="terms-view-link"
+        />
+        <span className="text-sm text-stone-700">
+          {t('terms.acceptPrefix')}{' '}
+          <button
+            type="button"
+            id="terms-view-link"
+            onClick={(e) => {
+              e.preventDefault();
+              setModalOpen(true);
+            }}
+            className="text-emerald-600 hover:text-emerald-700 underline focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-1 rounded"
+          >
+            {t('terms.viewTerms')}
+          </button>
+        </span>
+      </label>
+
+      {/* Modal: small overlay with scrollable terms */}
+      {modalOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="terms-modal-title"
+          onClick={() => setModalOpen(false)}
+        >
+          <div
+            className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[80vh] flex flex-col"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between px-5 py-4 border-b border-stone-200 shrink-0">
+              <h2 id="terms-modal-title" className="text-lg font-semibold text-stone-900">
+                {t('terms.title')}
+              </h2>
+              <button
+                type="button"
+                onClick={() => setModalOpen(false)}
+                className="p-2 rounded-lg text-stone-500 hover:text-stone-700 hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
+                aria-label={t('common.close')}
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div className="flex-1 overflow-y-auto px-5 py-4 text-sm text-stone-600 whitespace-pre-wrap">
+              {content}
+            </div>
+            <div className="px-5 py-4 border-t border-stone-200 shrink-0 flex gap-3 justify-end">
+              <button
+                type="button"
+                onClick={() => setModalOpen(false)}
+                className="px-4 py-2 text-sm font-medium text-stone-700 bg-stone-100 rounded-lg hover:bg-stone-200"
+              >
+                {t('common.close')}
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  onChange(true);
+                  setModalOpen(false);
+                }}
+                className="px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-lg hover:bg-emerald-700"
+              >
+                {t('terms.acceptAndClose')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/WhatsAppPhoneInput.tsx

@@ -0,0 +1,224 @@
+'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

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

package/src/contexts/CompanyContext.tsx

@@ -1,14 +1,8 @@
 'use client';
 
 import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
-import { ENV } from '../lib/env';
-
-export interface Company {
-  settings?: {
-    timezone?: string;
-  };
-  [key: string]: unknown;
-}
+import { getCompany, type Company } from '@/lib/api';
+import { ENV } from '@/lib/env';
 
 interface CompanyContextType {
   company: Company | null;
@@ -20,26 +14,20 @@ const CompanyContext = createContext<CompanyContextType | undefined>(undefined);
 
 interface CompanyProviderProps {
   children: ReactNode;
+  /** Optional company ID. When provided (e.g. from provider dashboard), use instead of ENV.COMPANY_ID. */
+  companyId?: string;
 }
 
-async function getCompany(companyId: string): Promise<Company | null> {
-  const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-  if (ENV.BASIC_AUTH) headers.Authorization = `Basic ${ENV.BASIC_AUTH}`;
-  const response = await fetch(`${ENV.API_URL}/1/companies/${companyId}`, { method: 'GET', headers });
-  if (!response.ok) throw new Error(`Failed to load company (${response.status})`);
-  const data = await response.json();
-  return data?.data?.company ?? null;
-}
-
-export function CompanyProvider({ children }: CompanyProviderProps) {
+export function CompanyProvider({ children, companyId: companyIdProp }: CompanyProviderProps) {
   const [company, setCompany] = useState<Company | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const companyId = companyIdProp ?? ENV.COMPANY_ID;
 
   useEffect(() => {
     async function fetchCompany() {
       try {
-        const companyData = await getCompany(ENV.COMPANY_ID);
+        const companyData = await getCompany(companyId);
         setCompany(companyData);
         setError(null);
       } catch (err) {
@@ -50,7 +38,7 @@ export function CompanyProvider({ children }: CompanyProviderProps) {
       }
     }
     fetchCompany();
-  }, []);
+  }, [companyId]);
 
   return <CompanyContext.Provider value={{ company, loading, error }}>{children}</CompanyContext.Provider>;
 }

package/src/index.ts

@@ -89,3 +89,8 @@ export {
   type ManageBookingViewProps,
   type StaffBookingAttribution,
 } from './components/ManageBookingView';
+
+export type {
+  Product,
+  Availability,
+} from './lib/api';