@ticketboothapp/booking 0.1.10 → 0.1.12

package/src/components/booking/DependentAddOnPaymentForm.tsx

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

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

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