@ticketboothapp/booking 0.1.11 → 0.1.12

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

@@ -0,0 +1,148 @@
+.collage {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  width: 100%;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  align-items: stretch;
+}
+
+.videoSlot {
+  flex: 0 0 auto;
+  width: min(48%, 340px);
+  min-width: 160px;
+  /* Slightly taller than square, but not strict 9:16 */
+  aspect-ratio: 3 / 4;
+  position: relative;
+  overflow: hidden;
+  border-radius: 0.5rem;
+}
+
+.videoWrapper {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.videoControls {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  gap: 0.25rem;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.videoControls .videoControlBtn {
+  pointer-events: auto;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.375rem;
+  border: none;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s ease;
+}
+
+.videoControls .videoControlBtn:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.videoControls .videoControlBtn:focus-visible {
+  outline: 2px solid white;
+  outline-offset: 2px;
+}
+
+.video {
+  position: absolute;
+  inset: 0;
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+}
+
+/* Constrain next-video BackgroundPlayer output */
+.videoSlot :global(video),
+.videoSlot :global(.next-video-bg-video),
+.videoSlot :global(.next-video-bg-poster),
+.videoWrapper :global(video),
+.videoWrapper :global(.next-video-bg-video),
+.videoWrapper :global(.next-video-bg-poster) {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover !important;
+  object-position: center !important;
+}
+
+.imageGrid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 0.5rem;
+  min-height: 200px;
+}
+
+/* Top-left: narrow | Top-right: wide */
+.imageGrid .gridCell:nth-child(1) { grid-column: 1 / span 1; }
+.imageGrid .gridCell:nth-child(2) { grid-column: 2 / span 2; }
+/* Bottom-left: wide | Bottom-right: narrow */
+.imageGrid .gridCell:nth-child(3) { grid-column: 1 / span 2; }
+.imageGrid .gridCell:nth-child(4) { grid-column: 3 / span 1; }
+
+.gridCell {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 80px;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: block;
+  text-align: left;
+}
+
+.gridCell > div {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+}
+
+.gridCell img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.videoOnly .videoSlot {
+  width: 100%;
+  max-width: 380px;
+  margin: 0 auto;
+}
+
+@media (max-width: 640px) {
+  .collage {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .videoSlot {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+  }
+
+  .imageGrid {
+    min-height: 200px;
+  }
+}

package/src/components/booking/BookingFlowCollage.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import ViaViaImage from '@/components/image';
+import { getImageUrl } from '@/constants/images';
+import BackgroundPlayer from 'next-video/background-player';
+import type { VideoSources } from '@/constants/products';
+import ImageModal from '@/components/product-theme-pages/image-modal';
+import { useTranslations } from '@/lib/booking/i18n';
+import styles from './BookingFlowCollage.module.css';
+
+export interface BookingFlowCollageProps {
+  /** Video for the left slot - vertical aspect ratio */
+  video?: VideoSources;
+  /** Poster image for video (fallback before play) */
+  videoPosterImageId?: string;
+  /** 4 image IDs for the right-side grid */
+  imageIds: string[];
+  /** Alt text prefix for images (e.g. product name) */
+  altPrefix?: string;
+}
+
+const DEFAULT_VIDEO: VideoSources = {
+  src: '/videos/via-via-moraine-lake-tour-video.mp4',
+  webm: '/videos/via-via-moraine-lake-tour-video.webm',
+};
+
+export function BookingFlowCollage({
+  video,
+  videoPosterImageId,
+  imageIds,
+  altPrefix = 'Tour',
+}: BookingFlowCollageProps) {
+  const videoSrc = video ?? DEFAULT_VIDEO;
+  // Use long version in BookingFlow when available; fall back to short
+  const videoForCollage = (videoSrc.longSrc && videoSrc.longWebm)
+    ? { src: videoSrc.longSrc, webm: videoSrc.longWebm }
+    : { src: videoSrc.src, webm: videoSrc.webm };
+  const posterUrl = videoPosterImageId ? getImageUrl(videoPosterImageId) : undefined;
+  const gridImages = imageIds.slice(0, 4);
+  // Pad with first image if fewer than 4
+  while (gridImages.length < 4 && gridImages.length > 0) {
+    gridImages.push(gridImages[0]!);
+  }
+  const hasGridImages = gridImages.length > 0;
+
+  const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [isPaused, setIsPaused] = useState(false);
+  const [isMuted, setIsMuted] = useState(true);
+  const { t } = useTranslations();
+
+  const syncStateFromVideo = useCallback(() => {
+    const el = videoRef.current;
+    if (!el) return;
+    setIsPaused(el.paused);
+    setIsMuted(el.muted);
+  }, []);
+
+  useEffect(() => {
+    const el = videoRef.current;
+    if (!el) return;
+    syncStateFromVideo();
+    el.addEventListener('play', syncStateFromVideo);
+    el.addEventListener('pause', syncStateFromVideo);
+    el.addEventListener('volumechange', syncStateFromVideo);
+    return () => {
+      el.removeEventListener('play', syncStateFromVideo);
+      el.removeEventListener('pause', syncStateFromVideo);
+      el.removeEventListener('volumechange', syncStateFromVideo);
+    };
+  }, [syncStateFromVideo, videoSrc]);
+
+  const handleTogglePlay = useCallback(() => {
+    const el = videoRef.current;
+    if (!el) return;
+    if (el.paused) el.play();
+    else el.pause();
+  }, []);
+
+  const handleToggleMute = useCallback(() => {
+    const el = videoRef.current;
+    if (!el) return;
+    el.muted = !el.muted;
+  }, []);
+
+  const imageItems = gridImages.map((id, i) => ({ id, alt: `${altPrefix} - ${i + 1}` }));
+
+  return (
+    <div className={`${styles.collage} ${!hasGridImages ? styles.videoOnly : ''}`}>
+      <div className={styles.videoSlot}>
+        <div className={styles.videoWrapper}>
+          <BackgroundPlayer
+            ref={videoRef}
+            {...videoForCollage}
+            autoPlay
+            muted
+            loop
+            playsInline
+            poster={posterUrl}
+            className={styles.video}
+          />
+          <div className={styles.videoControls}>
+            <button
+              type="button"
+              className={styles.videoControlBtn}
+              onClick={handleTogglePlay}
+              aria-label={isPaused ? t('common.videoPlay') : t('common.videoPause')}
+            >
+              {isPaused ? (
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              ) : (
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+                  <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+                </svg>
+              )}
+            </button>
+            <button
+              type="button"
+              className={styles.videoControlBtn}
+              onClick={handleToggleMute}
+              aria-label={isMuted ? t('common.videoUnmute') : t('common.videoMute')}
+            >
+              {isMuted ? (
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                  <path d="M11 5L6 9H2v6h4l5 4V5z" />
+                  <line x1="23" y1="9" x2="17" y2="15" />
+                  <line x1="17" y1="9" x2="23" y2="15" />
+                </svg>
+              ) : (
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                  <path d="M11 5L6 9H2v6h4l5 4V5z" />
+                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
+                </svg>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+      {hasGridImages && (
+        <div className={styles.imageGrid}>
+          {gridImages.map((id, i) => (
+            <button
+              key={`${id}-${i}`}
+              type="button"
+              className={styles.gridCell}
+              onClick={() => setSelectedImageIndex(i)}
+              aria-label={`View image ${i + 1}`}
+            >
+              <ViaViaImage
+                imageId={id}
+                alt={`${altPrefix} - ${i + 1}`}
+                context="GALLERY"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+
+      {selectedImageIndex !== null && (
+        <ImageModal
+          selectedImage={imageItems[selectedImageIndex]!}
+          currentIndex={selectedImageIndex}
+          totalImages={imageItems.length}
+          images={imageItems}
+          onClose={() => setSelectedImageIndex(null)}
+          onNext={() => {
+            if (selectedImageIndex < imageItems.length - 1) {
+              setSelectedImageIndex(selectedImageIndex + 1);
+            }
+          }}
+          onPrevious={() => {
+            if (selectedImageIndex > 0) {
+              setSelectedImageIndex(selectedImageIndex - 1);
+            }
+          }}
+          overlayZIndex={10000}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+.placeholder {
+  padding: 1rem 0;
+  text-align: center;
+}
+
+.message {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: #4b5563;
+  margin: 0 0 1rem 0;
+}
+
+.productName {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0 0 0.5rem 0;
+}
+
+.productName strong {
+  color: #111;
+}
+
+.hint {
+  font-size: 0.8125rem;
+  color: #9ca3af;
+  margin: 0;
+}

package/src/components/booking/BookingFlowPlaceholder.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import type { ProductConfig } from '@/lib/booking-types';
+import styles from './BookingFlowPlaceholder.module.css';
+
+interface BookingFlowPlaceholderProps {
+  product: ProductConfig;
+}
+
+export default function BookingFlowPlaceholder({ product }: BookingFlowPlaceholderProps) {
+  return (
+    <div className={styles.placeholder}>
+      <p className={styles.message}>
+        The booking flow will be integrated here using the logic from{' '}
+        <code>~/ticketbooth/ticketbooth-fe/booking</code>.
+      </p>
+      <p className={styles.productName}>
+        Selected: <strong>{product.display.shortName}</strong>
+      </p>
+      <p className={styles.hint}>
+        Use the Back button to return to the product.
+      </p>
+    </div>
+  );
+}

package/src/components/booking/BookingFlowPreview.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { getProductByIdOrSlug } from '@/lib/products-config';
+import { getProducts } from '@/constants/products';
+import defaultStrings from '@/strings';
+import { trackViewItem } from '@/lib/analytics';
+import { BookingFlowCollage } from './BookingFlowCollage';
+import { TourDescription } from './TourDescription';
+
+/**
+ * Renders collage + TourDescription using only products-config and getProducts().
+ * No API call required - shows immediately.
+ */
+export function BookingFlowPreview({ productId, defaultExpanded = true }: { productId: string; defaultExpanded?: boolean }) {
+  const config = getProductByIdOrSlug(productId);
+  const hasFiredViewItem = useRef(false);
+
+  useEffect(() => {
+    if (!hasFiredViewItem.current && productId && config) {
+      hasFiredViewItem.current = true;
+      const displayProducts = getProducts(defaultStrings);
+      const displayProduct = Object.values(displayProducts).find((p) => p.id === productId);
+      const productName = displayProduct?.name ?? config.display?.shortName ?? productId;
+      const price = displayProduct?.avgPrice ?? 0;
+      trackViewItem(productId, productName, price, 'CAD');
+    }
+  }, [productId, config]);
+  const displayProducts = getProducts(defaultStrings);
+  const displayProduct = Object.values(displayProducts).find((p) => p.id === productId);
+  const collageImageIds = config?.display?.collageImageIds ?? config?.display?.imageIds ?? [];
+  const hasVideo = !!displayProduct?.videoUrl;
+  const hasImages = collageImageIds.length > 0;
+  const altPrefix = config?.display?.shortName ?? productId;
+
+  return (
+    <div className="booking-flow-root space-y-8">
+      {productId && (hasVideo || hasImages) && (
+        <div className="booking-collage-wrapper">
+          <BookingFlowCollage
+            video={displayProduct?.videoUrl}
+            videoPosterImageId={config?.display?.imageIds?.[0]}
+            imageIds={hasImages ? collageImageIds : [config?.display?.imageIds?.[0]].filter(Boolean) as string[]}
+            altPrefix={altPrefix}
+          />
+        </div>
+      )}
+      <TourDescription productSlug={productId} defaultExpanded={defaultExpanded} />
+    </div>
+  );
+}