@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/{CheckoutModal.tsx → booking/CheckoutModal.tsx}

@@ -1,14 +1,16 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, useRef, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
 import { ENV } from '@/lib/env';
+import { storePendingPurchase, trackBeginCheckout } from '@/lib/analytics';
 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';
+import type { Locale } from '@/lib/booking/i18n/config';
+import type { OrderSummaryTicketLine, OrderSummaryFeeLine, PriceBreakdown as PriceBreakdownType } from '@/lib/booking/pricing';
 
 export interface CheckoutModalLineItem {
   line: OrderSummaryTicketLine;
@@ -18,8 +20,11 @@ export interface CheckoutModalLineItem {
 export interface CheckoutModalProps {
   open: boolean;
   onClose: () => void;
+  onPaymentSubmitStart?: () => void;
+  onPaymentSubmitError?: () => void;
   clientSecret: string;
   reservationReference: string;
+  reservationExpiration?: 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 */
@@ -44,6 +49,16 @@ export interface CheckoutModalProps {
   isDepositPayment?: boolean;
   /** Days before booking to charge balance (e.g. 7). */
   balanceChargeDaysBefore?: number;
+  /**
+   * When `clientSecret` is not yet available, show this instead of the loading placeholder
+   * (e.g. collect email / last name before creating a PaymentIntent).
+   */
+  prePaymentPanel?: ReactNode;
+  changeTotals?: {
+    previousTotal: number;
+    newTotal: number;
+    differenceTotal: number;
+  };
 }
 
 const stripePromise = ENV.STRIPE_PUBLISHABLE_KEY
@@ -53,6 +68,8 @@ const stripePromise = ENV.STRIPE_PUBLISHABLE_KEY
 function CheckoutForm({
   successUrl,
   onClose,
+  onPaymentSubmitStart,
+  onPaymentSubmitError,
   t,
   total,
   currency,
@@ -60,6 +77,8 @@ function CheckoutForm({
 }: {
   successUrl: string;
   onClose: () => void;
+  onPaymentSubmitStart?: () => void;
+  onPaymentSubmitError?: () => void;
   t: (key: string) => string;
   total: number;
   currency: Currency;
@@ -79,8 +98,12 @@ function CheckoutForm({
     if (submitError) {
       setError(submitError.message ?? 'Validation failed');
       setLoading(false);
+      onPaymentSubmitError?.();
       return;
     }
+    onPaymentSubmitStart?.();
+    // Store before redirect so success page can fire purchase event
+    storePendingPurchase(total, currency);
     const { error: confirmError } = await stripe.confirmPayment({
       elements,
       confirmParams: {
@@ -89,6 +112,7 @@ function CheckoutForm({
     });
     if (confirmError) {
       setError(confirmError.message ?? 'Payment failed');
+      onPaymentSubmitError?.();
     }
     setLoading(false);
   };
@@ -124,8 +148,11 @@ function CheckoutForm({
 export function CheckoutModal({
   open,
   onClose,
+  onPaymentSubmitStart,
+  onPaymentSubmitError,
   clientSecret,
   reservationReference,
+  reservationExpiration,
   customerLastName,
   successUrlOverride,
   ticketLines,
@@ -146,17 +173,72 @@ export function CheckoutModal({
   t,
   isDepositPayment = false,
   balanceChargeDaysBefore = 7,
+  prePaymentPanel,
+  changeTotals,
 }: 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 (!successUrlOverride) manageParams.set('booking_complete', '1');
+  const successUrl = successUrlOverride ?? `${baseUrl}/manage-booking?${manageParams.toString()}`;
+
+  const hasFiredBeginCheckout = useRef(false);
+  /** Ensures we only fire expiry close once per modal open (avoids Strict Mode / repeated 0 remainingMs). */
+  const holdExpiryCloseSentRef = useRef(false);
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  useEffect(() => {
+    if (open && !hasFiredBeginCheckout.current) {
+      hasFiredBeginCheckout.current = true;
+      const items = ticketLines.map(({ line }) => ({
+        id: line.category,
+        name: line.category,
+        qty: line.qty,
+        price: line.itemTotal,
+      }));
+      trackBeginCheckout(total, currency, items);
+    }
+    if (!open) hasFiredBeginCheckout.current = false;
+  }, [open, total, currency, ticketLines]);
+
+  useEffect(() => {
+    if (!open || !reservationExpiration) return;
+    const timer = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, [open, reservationExpiration]);
+
+  const expirationMs = reservationExpiration ? Date.parse(reservationExpiration) : NaN;
+  const hasValidExpiration = Number.isFinite(expirationMs);
+  const remainingMs = hasValidExpiration ? Math.max(0, expirationMs - nowMs) : 0;
+  const remainingTotalSeconds = Math.ceil(remainingMs / 1000);
+  const remainingMinutes = Math.floor(remainingTotalSeconds / 60);
+  const remainingSeconds = remainingTotalSeconds % 60;
+  const remainingDisplay = `${String(remainingMinutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
+  const holdTone =
+    remainingTotalSeconds <= 120
+      ? 'critical'
+      : remainingTotalSeconds <= 300
+        ? 'warning'
+        : 'normal';
+
+  useEffect(() => {
+    if (!open) {
+      holdExpiryCloseSentRef.current = false;
+      return;
+    }
+    if (!hasValidExpiration || remainingMs > 0) return;
+    if (holdExpiryCloseSentRef.current) return;
+    holdExpiryCloseSentRef.current = true;
+    onClose();
+  }, [open, hasValidExpiration, remainingMs, onClose]);
 
   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">
+    const noStripe = (
+      <div
+        className="booking-flow-root booking-flow-preflight fixed inset-0 z-[10050] flex items-center justify-center p-4 bg-black/50"
+        style={{ zIndex: 100_000 }}
+      >
         <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'}
@@ -174,6 +256,7 @@ export function CheckoutModal({
         </div>
       </div>
     );
+    return typeof document !== 'undefined' ? createPortal(noStripe, document.body) : null;
   }
 
   const options = {
@@ -187,8 +270,11 @@ export function CheckoutModal({
     },
   };
 
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+  const checkout = (
+    <div
+      className="booking-flow-root booking-flow-preflight fixed inset-0 z-[10050] flex items-center justify-center p-4 bg-black/50"
+      style={{ zIndex: 100_000 }}
+    >
       <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">
@@ -238,12 +324,18 @@ export function CheckoutModal({
                       },
                     ]
                   : []),
-                ...feeLineItems.map((fee) => ({
-                  kind: 'line' as const,
-                  label: `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
-                  amount: fee.totalAmount,
-                  type: 'fee',
-                })),
+                ...feeLineItems.map((fee) => {
+                  const isMoraineLakeRoadAccessFee = fee.name.toLowerCase().includes('moraine') && (fee.name.toLowerCase().includes('access') || fee.name.toLowerCase().includes('road') || fee.name.toLowerCase().includes('license'));
+                  return {
+                    kind: 'line' as const,
+                    label: `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
+                    amount: fee.totalAmount,
+                    type: 'fee',
+                    tooltip: isMoraineLakeRoadAccessFee
+                      ? "Since 2025, Parks Canada charges a per-trip fee for License of Occupation. Based on our capacity, this per-person fee contributes towards Parks Canada's Moraine Lake Road operations."
+                      : undefined,
+                  };
+                }),
               ]}
               total={total}
               currency={currency}
@@ -255,18 +347,37 @@ export function CheckoutModal({
               taxRate={taxRate}
               size="sm"
               t={t}
-              depositMode={isDepositPayment && subtotal > total ? { totalLabel: t('booking.deposit') || 'Deposit', balanceAmount: subtotal - total } : undefined}
+              depositMode={isDepositPayment && subtotal > total ? { totalLabel: t('booking.deposit') || 'Deposit', balanceAmount: subtotal - total, fullTotalAmount: subtotal } : undefined}
               hideSubtotal={isDepositPayment}
+              extraBetweenTaxAndTotal={
+                changeTotals ? (
+                  <div className="space-y-1 pt-2 border-t border-stone-200">
+                    <div className="flex justify-between gap-3 min-w-0 text-sm">
+                      <span className="text-stone-600 min-w-0 truncate">New Total</span>
+                      <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">
+                        {formatCurrencyAmount(changeTotals.newTotal, currency, locale)}
+                      </span>
+                    </div>
+                    <div className="flex justify-between gap-3 min-w-0 text-sm">
+                      <span className="text-stone-600 min-w-0 truncate">Previous Total</span>
+                      <span className="flex-shrink-0 whitespace-nowrap font-medium text-stone-700">
+                        {formatCurrencyAmount(changeTotals.previousTotal, currency, locale)}
+                      </span>
+                    </div>
+                  </div>
+                ) : undefined
+              }
+              totalLabel={changeTotals ? 'New Booking Difference' : undefined}
             />
           </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">
+            <div className="deposit-notice mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-800">
+              <p className="text-xs 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">
+              <p className="mt-1 text-xs text-amber-700/90">
                 {balanceChargeDaysBefore > 0
                   ? (t('booking.balanceChargeNotice', { days: balanceChargeDaysBefore }) !== 'booking.balanceChargeNotice'
                       ? t('booking.balanceChargeNotice', { days: balanceChargeDaysBefore })
@@ -277,13 +388,58 @@ export function CheckoutModal({
               </p>
             </div>
           )}
+          {hasValidExpiration && (
+            <div
+              className={`mt-4 p-3 rounded-lg border ${
+                holdTone === 'critical'
+                  ? 'bg-red-50 border-red-300'
+                  : holdTone === 'warning'
+                    ? 'bg-amber-50 border-amber-300'
+                    : 'bg-emerald-50 border-emerald-200'
+              }`}
+            >
+              <p
+                className={`text-xs font-semibold ${
+                  holdTone === 'critical'
+                    ? 'text-red-900'
+                    : holdTone === 'warning'
+                      ? 'text-amber-900'
+                      : 'text-emerald-900'
+                }`}
+              >
+                Your reservation is being held for {remainingDisplay}
+              </p>
+              <p
+                className={`mt-1 text-xs ${
+                  holdTone === 'critical'
+                    ? 'text-red-800'
+                    : holdTone === 'warning'
+                      ? 'text-amber-800'
+                      : 'text-emerald-800'
+                }`}
+              >
+                Closing this payment dialog releases the hold and you will need to reserve again.
+              </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} />
+              <CheckoutForm
+                successUrl={successUrl}
+                onClose={onClose}
+                onPaymentSubmitStart={onPaymentSubmitStart}
+                onPaymentSubmitError={onPaymentSubmitError}
+                t={t}
+                total={total}
+                currency={currency}
+                locale={locale}
+              />
             </Elements>
+          ) : prePaymentPanel ? (
+            prePaymentPanel
           ) : (
             <p className="text-stone-500">{t('booking.loadingPayment') || 'Loading payment form...'}</p>
           )}
@@ -291,4 +447,5 @@ export function CheckoutModal({
       </div>
     </div>
   );
+  return typeof document !== 'undefined' ? createPortal(checkout, document.body) : null;
 }

package/src/components/booking/DapFlowCollage.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import ViaViaImage from '@/components/image';
+import ImageModal from '@/components/product-theme-pages/image-modal';
+import styles from './BookingFlowCollage.module.css';
+
+export interface DapFlowCollageProps {
+  /** Bunny CDN image IDs — first is the tall hero, next four fill the asymmetric grid */
+  imageIds: string[];
+  altPrefix?: string;
+}
+
+/** Hero (left) + four-tile grid (right), same layout as BookingFlowCollage without video */
+export function DapFlowCollage({ imageIds, altPrefix = 'Experience' }: DapFlowCollageProps) {
+  const slots = useMemo(() => {
+    const raw = imageIds.map((id) => id.trim()).filter(Boolean);
+    if (raw.length === 0) return [];
+    const out = [...raw];
+    while (out.length < 5) {
+      out.push(out[0]!);
+    }
+    return out.slice(0, 5);
+  }, [imageIds]);
+
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+  const imageItems = useMemo(
+    () => slots.map((id, i) => ({ id, alt: `${altPrefix} - ${i + 1}` })),
+    [slots, altPrefix]
+  );
+
+  if (slots.length === 0) return null;
+
+  const heroId = slots[0]!;
+  const gridIds = slots.slice(1, 5);
+
+  return (
+    <div className={styles.collage}>
+      <div className={styles.videoSlot}>
+        <div className={styles.videoWrapper}>
+          <button
+            type="button"
+            className={styles.gridCell}
+            onClick={() => setSelectedIndex(0)}
+            aria-label="View featured image"
+          >
+            <ViaViaImage imageId={heroId} alt={`${altPrefix} - featured`} context="GALLERY" />
+          </button>
+        </div>
+      </div>
+      <div className={styles.imageGrid}>
+        {gridIds.map((id, i) => (
+          <button
+            key={`${id}-${i}`}
+            type="button"
+            className={styles.gridCell}
+            onClick={() => setSelectedIndex(i + 1)}
+            aria-label={`View image ${i + 2}`}
+          >
+            <ViaViaImage imageId={id} alt={`${altPrefix} - ${i + 2}`} context="GALLERY" />
+          </button>
+        ))}
+      </div>
+
+      {selectedIndex !== null && imageItems[selectedIndex] && (
+        <ImageModal
+          selectedImage={imageItems[selectedIndex]!}
+          currentIndex={selectedIndex}
+          totalImages={imageItems.length}
+          images={imageItems}
+          onClose={() => setSelectedIndex(null)}
+          onNext={() => {
+            if (selectedIndex < imageItems.length - 1) {
+              setSelectedIndex(selectedIndex + 1);
+            }
+          }}
+          onPrevious={() => {
+            if (selectedIndex > 0) {
+              setSelectedIndex(selectedIndex - 1);
+            }
+          }}
+          overlayZIndex={10000}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/booking/DapTourDescription.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useMemo } from 'react';
+import { TourDescription } from '@/components/booking/TourDescription';
+import { useLocale, useTranslations } from '@/lib/booking/i18n';
+import { getDapDescription } from '@/lib/dap-descriptions';
+import type { PhotoDapSlug } from '@/lib/photo-dap-config';
+
+export function DapTourDescription({
+  slug,
+  locale: localeProp,
+}: {
+  slug: PhotoDapSlug;
+  locale?: string;
+}) {
+  const { t } = useTranslations();
+  const { locale: contextLocale } = useLocale();
+  const locale = localeProp ?? contextLocale;
+
+  const content = useMemo(() => getDapDescription(slug, locale), [slug, locale]);
+
+  if (!content || (content.paragraphs.length === 0 && (content.sections?.length ?? 0) === 0)) {
+    return null;
+  }
+
+  return (
+    <TourDescription
+      paragraphs={content.paragraphs}
+      review={content.review}
+      sections={content.sections}
+      defaultExpanded={false}
+      toggleLabel={t('booking.seeFullAddOnDescription')}
+    />
+  );
+}