@ticketboothapp/booking 0.1.3 → 0.1.7

package/src/components/CheckoutModal.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import { useState } from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
+import { ENV } from '@/lib/env';
+import { formatCurrencyAmount } from '@/lib/currency';
+import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
+import type { Currency } from './CurrencySwitcher';
+import type { Locale } from '@/lib/i18n/config';
+import type { OrderSummaryTicketLine, OrderSummaryFeeLine, PriceBreakdown as PriceBreakdownType } from '@/lib/pricing';
+
+export interface CheckoutModalLineItem {
+  line: OrderSummaryTicketLine;
+  breakdown: PriceBreakdownType | null;
+}
+
+export interface CheckoutModalProps {
+  open: boolean;
+  onClose: () => void;
+  clientSecret: string;
+  reservationReference: string;
+  /** Last name for Stripe return_url so success page can poll and redirect to /manage */
+  customerLastName?: string;
+  /** When set (e.g. provider-dashboard), used as Stripe return_url instead of /manage */
+  successUrlOverride?: string;
+  ticketLines: CheckoutModalLineItem[];
+  feeLineItems: OrderSummaryFeeLine[];
+  returnPriceAdjustment: number;
+  cancellationPolicyFee?: number;
+  cancellationPolicyLabel?: string;
+  subtotal: number;
+  tax: number;
+  total: number;
+  promoDiscountAmount?: number;
+  discountLabel?: string | null;
+  totalQuantity: number;
+  isTaxIncludedInPrice: boolean;
+  taxRate?: number;
+  currency: Currency;
+  locale: Locale;
+  t: (key: string, params?: Record<string, string | number>) => string;
+  /** When true, show deposit messaging (balance charged N days before or pay earlier). */
+  isDepositPayment?: boolean;
+  /** Days before booking to charge balance (e.g. 7). */
+  balanceChargeDaysBefore?: number;
+}
+
+const stripePromise = ENV.STRIPE_PUBLISHABLE_KEY
+  ? loadStripe(ENV.STRIPE_PUBLISHABLE_KEY)
+  : null;
+
+function CheckoutForm({
+  successUrl,
+  onClose,
+  t,
+  total,
+  currency,
+  locale,
+}: {
+  successUrl: string;
+  onClose: () => void;
+  t: (key: string) => string;
+  total: number;
+  currency: Currency;
+  locale: Locale;
+}) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!stripe || !elements) return;
+    setLoading(true);
+    setError(null);
+    const { error: submitError } = await elements.submit();
+    if (submitError) {
+      setError(submitError.message ?? 'Validation failed');
+      setLoading(false);
+      return;
+    }
+    const { error: confirmError } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: successUrl,
+      },
+    });
+    if (confirmError) {
+      setError(confirmError.message ?? 'Payment failed');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <PaymentElement />
+      {error && (
+        <p className="text-sm text-red-600" role="alert">
+          {error}
+        </p>
+      )}
+      <div className="flex gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onClose}
+          className="flex-1 py-3 px-4 border border-stone-300 text-stone-700 rounded-lg hover:bg-stone-50"
+        >
+          {t('common.cancel') || 'Cancel'}
+        </button>
+        <button
+          type="submit"
+          disabled={!stripe || loading}
+          className="flex-1 py-3 px-4 bg-emerald-600 text-white font-semibold rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {loading ? (t('booking.paying') || 'Paying...') : `${t('booking.payNow') || 'Pay now'} (${formatCurrencyAmount(total, currency, locale)})`}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export function CheckoutModal({
+  open,
+  onClose,
+  clientSecret,
+  reservationReference,
+  customerLastName,
+  successUrlOverride,
+  ticketLines,
+  feeLineItems,
+  returnPriceAdjustment,
+  cancellationPolicyFee = 0,
+  cancellationPolicyLabel,
+  subtotal,
+  tax,
+  total,
+  totalQuantity,
+  promoDiscountAmount = 0,
+  discountLabel,
+  isTaxIncludedInPrice,
+  taxRate = 0,
+  currency,
+  locale,
+  t,
+  isDepositPayment = false,
+  balanceChargeDaysBefore = 7,
+}: CheckoutModalProps) {
+  const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
+  const manageParams = new URLSearchParams({ reservationRef: reservationReference });
+  if (customerLastName?.trim()) manageParams.set('lastName', customerLastName.trim());
+  const successUrl = successUrlOverride ?? `${baseUrl}/manage?${manageParams.toString()}`;
+
+  if (!open) return null;
+
+  if (!ENV.STRIPE_PUBLISHABLE_KEY) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+        <div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
+          <h3 className="text-lg font-semibold text-stone-900 mb-2">
+            {t('booking.checkout') || 'Checkout'}
+          </h3>
+          <p className="text-stone-600 mb-4">
+            {t('booking.paymentNotConfigured') || 'Payment is not configured. Please use the standard checkout.'}
+          </p>
+          <button
+            type="button"
+            onClick={onClose}
+            className="w-full py-3 bg-stone-200 text-stone-800 font-medium rounded-lg hover:bg-stone-300"
+          >
+            {t('common.close') || 'Close'}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const options = {
+    clientSecret,
+    appearance: {
+      theme: 'stripe' as const,
+      variables: {
+        colorPrimary: '#059669',
+        borderRadius: '8px',
+      },
+    },
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+      <div className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden flex flex-col">
+        <div className="p-6 border-b border-stone-200 flex-shrink-0">
+          <div className="flex justify-between items-start">
+            <h3 className="text-lg font-semibold text-stone-900">
+              {t('booking.reviewAndPay') || 'Review & pay'}
+            </h3>
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-stone-400 hover:text-stone-600 p-1"
+              aria-label={t('common.close') || '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>
+
+          {/* Order summary — shared PriceSummary component */}
+          <div className="mt-4 min-w-0">
+            <PriceSummary
+              lines={[
+                ...ticketLines.map(({ line, breakdown }): PriceSummaryLine => ({
+                  kind: 'ticket',
+                  category: line.category,
+                  qty: line.qty,
+                  itemTotal: line.itemTotal,
+                  breakdown,
+                })),
+                ...(returnPriceAdjustment !== 0
+                  ? [
+                      {
+                        kind: 'line' as const,
+                        label: `${t('booking.returnOption')} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
+                        amount: returnPriceAdjustment,
+                        type: 'return',
+                      },
+                    ]
+                  : []),
+                ...(cancellationPolicyFee > 0
+                  ? [
+                      {
+                        kind: 'line' as const,
+                        label: cancellationPolicyLabel ?? t('booking.flexibleCancellation') ?? 'Flexible cancellation',
+                        amount: cancellationPolicyFee,
+                        type: 'cancellation',
+                      },
+                    ]
+                  : []),
+                ...feeLineItems.map((fee) => ({
+                  kind: 'line' as const,
+                  label: `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
+                  amount: fee.totalAmount,
+                  type: 'fee',
+                })),
+              ]}
+              total={total}
+              currency={currency}
+              locale={locale}
+              subtotal={subtotal !== total ? subtotal : undefined}
+              discountAmount={promoDiscountAmount ?? 0}
+              discountLabel={discountLabel}
+              taxAmount={!isTaxIncludedInPrice && tax > 0 ? tax : 0}
+              taxRate={taxRate}
+              size="sm"
+              t={t}
+              depositMode={isDepositPayment && subtotal > total ? { totalLabel: t('booking.deposit') || 'Deposit', balanceAmount: subtotal - total } : undefined}
+              hideSubtotal={isDepositPayment}
+            />
+          </div>
+
+          {/* Deposit payment notice */}
+          {isDepositPayment && (
+            <div className="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-800">
+              <p className="font-medium">
+                {(t('booking.depositPaymentNotice') !== 'booking.depositPaymentNotice' ? t('booking.depositPaymentNotice') : null) ?? "You're paying the deposit today."}
+              </p>
+              <p className="mt-1 text-amber-700">
+                {balanceChargeDaysBefore > 0
+                  ? (t('booking.balanceChargeNotice', { days: balanceChargeDaysBefore }) !== 'booking.balanceChargeNotice'
+                      ? t('booking.balanceChargeNotice', { days: balanceChargeDaysBefore })
+                      : `The remaining balance will be charged ${balanceChargeDaysBefore} days before your booking. You can also pay it earlier from your Manage Booking page.`)
+                  : (t('booking.balancePayEarlier') !== 'booking.balancePayEarlier'
+                      ? t('booking.balancePayEarlier')
+                      : 'You can pay the remaining balance anytime from your Manage Booking page.')}
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="p-6 overflow-y-auto flex-1">
+          {stripePromise && clientSecret ? (
+            <Elements stripe={stripePromise} options={options}>
+              <CheckoutForm successUrl={successUrl} onClose={onClose} t={t} total={total} currency={currency} locale={locale} />
+            </Elements>
+          ) : (
+            <p className="text-stone-500">{t('booking.loadingPayment') || 'Loading payment form...'}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/CurrencySwitcher.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+// Available currencies from pricing.json config
+export const CURRENCIES = ['CAD', 'USD', 'EUR', 'GBP', 'AUD'] as const;
+export type Currency = typeof CURRENCIES[number];
+
+const CURRENCY_NAMES: Record<Currency, string> = {
+  CAD: 'CAD',
+  USD: 'USD',
+  EUR: 'EUR',
+  GBP: 'GBP',
+  AUD: 'AUD',
+};
+
+const DEFAULT_CURRENCY: Currency = 'CAD';
+
+export function useCurrency() {
+  const [currency, setCurrencyState] = useState<Currency>(DEFAULT_CURRENCY);
+
+  // Load from localStorage after hydration to avoid SSR mismatch
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem('booking-currency') as Currency | null;
+      if (saved && CURRENCIES.includes(saved)) {
+        setCurrencyState(saved);
+      }
+    } catch (error) {
+      console.warn('Failed to read currency from localStorage:', error);
+    }
+  }, []);
+
+  const setCurrency = (newCurrency: Currency) => {
+    if (!CURRENCIES.includes(newCurrency)) {
+      console.warn(`Invalid currency: ${newCurrency}. Falling back to ${DEFAULT_CURRENCY}`);
+      setCurrencyState(DEFAULT_CURRENCY);
+      return;
+    }
+    
+    setCurrencyState(newCurrency);
+    if (typeof window !== 'undefined') {
+      try {
+        localStorage.setItem('booking-currency', newCurrency);
+      } catch (error) {
+        console.warn('Failed to save currency to localStorage:', error);
+      }
+    }
+  };
+
+  return { currency, setCurrency };
+}
+
+interface CurrencySwitcherProps {
+  currency: Currency;
+  onCurrencyChange: (currency: Currency) => void;
+}
+
+export function CurrencySwitcher({ currency, onCurrencyChange }: CurrencySwitcherProps) {
+  return (
+    <div className="flex items-center gap-1.5 sm:gap-2">
+      <span className="text-xs sm:text-sm shrink-0" style={{ color: 'var(--booking-text-muted, #a8a29e)' }}>Currency:</span>
+      <div className="flex flex-wrap gap-0.5 sm:gap-1 rounded-lg overflow-hidden" style={{ border: '1px solid var(--booking-border)', backgroundColor: 'var(--booking-header-bg, #1c1917)' }}>
+        {CURRENCIES.map((curr) => (
+          <button
+            key={curr}
+            onClick={() => onCurrencyChange(curr)}
+            className={`px-2 py-1 sm:px-3 sm:py-1.5 text-xs sm:text-sm font-medium transition-colors ${currency !== curr ? 'hover:opacity-80' : ''}`}
+            style={currency === curr
+              ? { backgroundColor: 'var(--booking-primary)', color: 'white' }
+              : { backgroundColor: 'transparent', color: 'var(--booking-text-muted, #a8a29e)' }
+            }
+          >
+            {CURRENCY_NAMES[curr]}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Error Boundary component to catch and handle React component errors
+ * Prevents the entire app from crashing when a component throws an error
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="p-6 bg-red-50 border border-red-200 rounded-lg">
+          <h2 className="text-lg font-semibold text-red-900 mb-2">
+            Something went wrong
+          </h2>
+          <p className="text-red-700 mb-4">
+            {this.state.error?.message || 'An unexpected error occurred'}
+          </p>
+          <button
+            onClick={() => this.setState({ hasError: false, error: null })}
+            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/ItineraryBuilder.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import type { ItineraryBuilderDestination } from '@/lib/api';
+
+interface ItineraryBuilderProps {
+  /** Shared destinations from product.itineraryBuilder */
+  destinations: ItineraryBuilderDestination[];
+  /** IDs blacklisted for this option (e.g. takkakaw_falls for Sunrise) */
+  optionBlacklist: string[];
+  /** Selected destination IDs (in order) */
+  selectedDestinationIds: string[];
+  /** Planning notes text */
+  planningNotes: string;
+  onDestinationsChange: (ids: string[]) => void;
+  onPlanningNotesChange: (value: string) => void;
+}
+
+export function ItineraryBuilder({
+  destinations,
+  optionBlacklist,
+  selectedDestinationIds,
+  planningNotes,
+  onDestinationsChange,
+  onPlanningNotesChange,
+}: ItineraryBuilderProps) {
+  // Filter destinations by option blacklist
+  const availableDestinations = destinations.filter((d) => !optionBlacklist.includes(d.id));
+
+  const toggleDestination = (id: string) => {
+    if (selectedDestinationIds.includes(id)) {
+      onDestinationsChange(selectedDestinationIds.filter((d) => d !== id));
+    } else {
+      onDestinationsChange([...selectedDestinationIds, id]);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-stone-700 mb-2">
+          Where would you like to go?
+        </label>
+        <p className="text-sm text-stone-500 mb-3">
+          Select the destinations you&apos;d like to include. Our team will craft your final
+          itinerary.
+        </p>
+        <div className="flex flex-wrap gap-2">
+          {availableDestinations.map((dest) => {
+            const isSelected = selectedDestinationIds.includes(dest.id);
+            return (
+              <button
+                key={dest.id}
+                type="button"
+                onClick={() => toggleDestination(dest.id)}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                  isSelected
+                    ? 'bg-emerald-600 text-white'
+                    : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
+                }`}
+              >
+                {dest.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Planning notes */}
+      <div>
+        <label className="block text-sm font-medium text-stone-700 mb-2">
+          Planning notes (optional)
+        </label>
+        <textarea
+          value={planningNotes}
+          onChange={(e) => onPlanningNotesChange(e.target.value)}
+          placeholder="Any special requests, timing preferences, or things you'd like our team to know..."
+          rows={3}
+          className="w-full px-4 py-3 rounded-lg border border-stone-300 focus:outline-none focus:border-stone-500 text-stone-900 placeholder:text-stone-400"
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useLocale } from '@/lib/i18n';
+import { locales, languageNames } from '@/lib/i18n/config';
+
+export function LanguageSwitcher() {
+  const { locale, setLocale } = useLocale();
+
+  return (
+    <div className="flex items-center gap-1.5 sm:gap-2">
+      <span className="text-xs sm:text-sm shrink-0" style={{ color: 'var(--booking-text-muted, #a8a29e)' }}>Language:</span>
+      <div className="flex flex-wrap gap-0.5 sm:gap-1 rounded-lg overflow-hidden" style={{ border: '1px solid var(--booking-border)', backgroundColor: 'var(--booking-header-bg, #1c1917)' }}>
+        {locales.map((loc) => (
+          <button
+            key={loc}
+            onClick={() => setLocale(loc)}
+            className={`px-2 py-1 sm:px-3 sm:py-1.5 text-xs sm:text-sm font-medium transition-colors ${locale !== loc ? 'hover:opacity-80' : ''}`}
+            style={locale === loc
+              ? { backgroundColor: 'var(--booking-primary)', color: 'white' }
+              : { backgroundColor: 'transparent', color: 'var(--booking-text-muted, #a8a29e)' }
+            }
+          >
+            {languageNames[loc]}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+