@ticketboothapp/booking 0.1.23 → 1.2.24

package/src/components/booking/DependentAddOnPaymentForm.tsx

@@ -1,124 +0,0 @@
-'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, type Currency } from '@/lib/currency';
-import bookingStyles from './BookingDialog.module.css';
-
-const stripePromise = ENV.STRIPE_PUBLISHABLE_KEY
-  ? loadStripe(ENV.STRIPE_PUBLISHABLE_KEY)
-  : null;
-
-function toCurrency(code: string | undefined): Currency {
-  const c = (code ?? 'CAD').toUpperCase();
-  if (c === 'USD' || c === 'EUR' || c === 'GBP' || c === 'AUD' || c === 'CAD') {
-    return c;
-  }
-  return 'CAD';
-}
-
-function PaymentSubmitInner({
-  returnUrl,
-  totalAmount,
-  currencyCode,
-  onSuccess,
-  onError,
-}: {
-  returnUrl: string;
-  totalAmount: number;
-  currencyCode: string;
-  onSuccess: () => void;
-  onError: (message: string) => void;
-}) {
-  const stripe = useStripe();
-  const elements = useElements();
-  const [loading, setLoading] = useState(false);
-  const currency = toCurrency(currencyCode);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!stripe || !elements) return;
-    setLoading(true);
-    onError('');
-    const { error: submitError } = await elements.submit();
-    if (submitError) {
-      onError(submitError.message ?? 'Validation failed');
-      setLoading(false);
-      return;
-    }
-    const { error: confirmError } = await stripe.confirmPayment({
-      elements,
-      confirmParams: {
-        return_url: returnUrl,
-      },
-      redirect: 'if_required',
-    });
-    if (confirmError) {
-      onError(confirmError.message ?? 'Payment failed');
-      setLoading(false);
-      return;
-    }
-    onSuccess();
-    setLoading(false);
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className={`dap-add-on-payment-form ${bookingStyles.dapForm}`}>
-      <PaymentElement />
-      <button
-        type="submit"
-        disabled={!stripe || loading}
-        className="dap-add-on-primary"
-      >
-        {loading
-          ? 'Processing…'
-          : `Pay ${formatCurrencyAmount(totalAmount, currency)}`}
-      </button>
-    </form>
-  );
-}
-
-export function DependentAddOnPaymentForm({
-  clientSecret,
-  returnUrl,
-  totalAmount,
-  currency,
-  onSuccess,
-  onError,
-}: {
-  clientSecret: string;
-  returnUrl: string;
-  totalAmount: number;
-  currency: string;
-  onSuccess: () => void;
-  onError: (message: string) => void;
-}) {
-  if (!stripePromise) {
-    return (
-      <p className={bookingStyles.dapStripeNotice}>
-        Online payment is not configured. Set NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY or contact us
-        to complete your add-on.
-      </p>
-    );
-  }
-
-  return (
-    <Elements
-      stripe={stripePromise}
-      options={{
-        clientSecret,
-        appearance: { theme: 'stripe' },
-      }}
-    >
-      <PaymentSubmitInner
-        returnUrl={returnUrl}
-        totalAmount={totalAmount}
-        currencyCode={currency}
-        onSuccess={onSuccess}
-        onError={onError}
-      />
-    </Elements>
-  );
-}

package/src/components/booking/ErrorBoundary.tsx

@@ -1,63 +0,0 @@
-'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/booking/InfoTooltip.tsx

@@ -1,108 +0,0 @@
-'use client';
-
-import { useRef, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-interface InfoTooltipProps {
-  text: string;
-}
-
-function useIsMobile(): boolean {
-  const [isMobile, setIsMobile] = useState(false);
-  useEffect(() => {
-    const mq = window.matchMedia('(max-width: 640px)');
-    const handler = () => setIsMobile(mq.matches);
-    handler();
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
-  }, []);
-  return isMobile;
-}
-
-export function InfoTooltip({ text }: InfoTooltipProps) {
-  const anchorRef = useRef<HTMLSpanElement>(null);
-  const [showTooltip, setShowTooltip] = useState(false);
-  const [tooltipStyle, setTooltipStyle] = useState<React.CSSProperties>({});
-  const isMobile = useIsMobile();
-
-  useEffect(() => {
-    if (!showTooltip || !anchorRef.current || typeof document === 'undefined') return;
-    const rect = anchorRef.current.getBoundingClientRect();
-    const vw = typeof window !== 'undefined' ? window.innerWidth : 375;
-    const vh = typeof window !== 'undefined' ? window.innerHeight : 667;
-    const tooltipWidth = 280;
-    const padding = 16;
-
-    if (isMobile) {
-      // Clamp horizontal position so tooltip stays within viewport
-      const effectiveWidth = Math.min(tooltipWidth, vw - padding * 2);
-      const leftClamped = Math.max(padding, Math.min(rect.left, vw - effectiveWidth - padding));
-      // Prefer below icon; if not enough space, show above
-      const spaceBelow = vh - rect.bottom - padding;
-      const preferAbove = spaceBelow < 100;
-
-      setTooltipStyle({
-        position: 'fixed',
-        left: leftClamped,
-        ...(preferAbove
-          ? { bottom: vh - rect.top + 4, maxHeight: rect.top - padding }
-          : { top: rect.bottom + 4, maxHeight: Math.min(200, spaceBelow - 8) }),
-        width: effectiveWidth,
-        overflowY: 'auto',
-        zIndex: 99999,
-      });
-    } else {
-      // Desktop: constrain width so text wraps; clamp horizontal position to stay in viewport
-      const maxW = Math.min(320, vw - padding * 2);
-      const centerX = rect.left + rect.width / 2;
-      const left = Math.max(padding + maxW / 2, Math.min(centerX, vw - padding - maxW / 2));
-
-      setTooltipStyle({
-        position: 'fixed',
-        left,
-        top: rect.top - 4,
-        transform: 'translate(-50%, -100%)',
-        maxWidth: maxW,
-        zIndex: 99999,
-      });
-    }
-  }, [showTooltip, isMobile]);
-
-  return (
-    <>
-      <span className="relative inline-block shrink-0" ref={anchorRef}>
-        <svg
-          className="w-4 h-4 text-stone-400 cursor-pointer shrink-0"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          onClick={(e) => {
-            e.stopPropagation();
-            setShowTooltip((v) => !v);
-          }}
-          onMouseEnter={() => !isMobile && setShowTooltip(true)}
-          onMouseLeave={() => !isMobile && setShowTooltip(false)}
-          aria-label="More information"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-      </span>
-      {showTooltip &&
-        typeof document !== 'undefined' &&
-        createPortal(
-          <span
-            className="whitespace-normal text-xs bg-stone-800 text-white px-3 py-2 rounded shadow-lg pointer-events-none"
-            style={tooltipStyle}
-          >
-            {text}
-          </span>,
-          document.body
-        )}
-    </>
-  );
-}

package/src/components/booking/ItineraryBox.module.css

@@ -1,258 +0,0 @@
-/**
- * Itinerary box - sticky schedule display
- * Uses --booking-* variables from booking-flow.css
- */
-
-.box {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  background: var(--light-orange-background-dark);
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  border: 1px solid var(--booking-stone-200, #e7e5e4);
-  transition: all 0.3s;
-  overflow: hidden;
-}
-
-.boxSticky {
-  padding: 0.5rem;
-  /* Flush under host sticky headers; base .box margin-top would otherwise show as a gap. */
-  margin-top: 0;
-}
-
-@media (min-width: 640px) {
-  .boxSticky {
-    padding: 0.5rem 0.625rem;
-  }
-}
-
-.boxExpanded {
-  padding: 0.75rem;
-}
-
-/* Embedded in DAP dialog — not sticky, no outer margin (parent controls spacing). */
-.boxEmbedded {
-  position: relative;
-  top: auto;
-  z-index: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/* Sticky inside dialog `.content` scroll area (below fixed header). */
-.boxStickyInDialog {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  margin-top: 0;
-  margin-bottom: 0.75rem;
-}
-
-.readOnlyPhotoTime {
-  font-weight: 700;
-  color: var(--booking-emerald-700, #047857);
-}
-
-.readOnlyPhotoDash {
-  color: var(--booking-emerald-500, #10b981);
-}
-
-.readOnlyPhotoLabel {
-  color: var(--booking-emerald-800, #065f46);
-  font-size: inherit;
-}
-
-.readOnlyPhotoFallbackFoot {
-  font-family: 'Figtree', sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.4;
-  color: var(--booking-stone-500, #78716c);
-  margin: 0.75rem 0 0;
-}
-
-.readOnlySummaryMessage {
-  font-family: 'Figtree', sans-serif;
-  font-size: 1rem;
-  line-height: 1.55;
-  color: var(--booking-stone-600, #57534e);
-  margin: 0.25rem 0 0;
-}
-
-.readOnlySummaryError {
-  font-family: 'Figtree', sans-serif;
-  font-size: 0.9375rem;
-  line-height: 1.45;
-  color: #b91c1c;
-  margin: 0.25rem 0 0;
-}
-
-.title {
-  font-family: 'Poppins', sans-serif;
-  font-weight: 700;
-  font-size: 1.125rem;
-  text-transform: lowercase;
-  color: var(--accent-orange);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: all 0.3s;
-}
-
-.titleSticky {
-  font-size: 1rem;
-  margin-bottom: 0.25rem;
-}
-
-@media (min-width: 640px) {
-  .titleSticky {
-    font-size: 1.125rem;
-    margin-bottom: 0.375rem;
-  }
-}
-
-.titleExpanded {
-  margin-bottom: 1rem;
-}
-
-@media (min-width: 768px) {
-  .title {
-    font-size: 1.375rem;
-  }
-}
-
-.dateSubtitle {
-  font-weight: 400;
-  color: var(--accent-orange);
-  font-size: inherit;
-  opacity: 0.9;
-}
-
-.icon {
-  flex-shrink: 0;
-  color: var(--accent-orange);
-}
-
-.iconSticky {
-  width: 1rem;
-  height: 1rem;
-}
-
-@media (min-width: 640px) {
-  .iconSticky {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-}
-
-.iconExpanded {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.itemsSticky {
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  flex-wrap: wrap;
-  transition: gap 0.2s ease-out;
-}
-
-@media (min-width: 640px) {
-  .itemsSticky {
-    gap: 0.25rem;
-  }
-}
-
-.itemsExpanded {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  max-height: 35rem; /* Enough for long itineraries; collapses to sticky height when sticky */
-  transition: max-height 0.25s ease-out, gap 0.2s ease-out;
-}
-
-.item {
-  font-size: 0.875rem;
-  line-height: 1.25;
-}
-
-.itemSticky {
-  display: inline-flex;
-  align-items: center;
-  font-size: 0.75rem;
-}
-
-@media (min-width: 640px) {
-  .itemSticky {
-    font-size: 0.875rem;
-  }
-}
-
-.separator {
-  margin: 0 0.125rem;
-  color: var(--booking-stone-400, #a8a29e);
-  flex-shrink: 0;
-  display: inline-flex;
-}
-
-@media (min-width: 640px) {
-  .separator {
-    margin: 0 0.25rem;
-  }
-}
-
-.timeBold {
-  font-weight: 700;
-  color: var(--booking-stone-900, #1c1917);
-}
-
-.timeMuted {
-  font-weight: 700;
-  color: var(--booking-stone-400, #a8a29e);
-}
-
-.placeLink {
-  color: var(--booking-stone-400, #a8a29e);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.placeLink:hover {
-  color: var(--booking-stone-600, #57534e);
-}
-
-.tooltip {
-  position: absolute;
-  font-size: 0.75rem;
-  background: var(--booking-stone-800, #292524);
-  color: #fff;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.25rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  z-index: 50;
-  pointer-events: none;
-  white-space: normal;
-}
-
-.tooltipMobile {
-  top: 100%;
-  margin-top: 0.25rem;
-  left: 0;
-  width: 280px;
-}
-
-@media (min-width: 640px) {
-  .tooltip {
-    white-space: nowrap;
-  }
-}
-
-.tooltipDesktop {
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 100%;
-  margin-bottom: 0.5rem;
-}