@ticketboothapp/booking 0.1.23 → 1.2.24

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

@@ -1,148 +0,0 @@
-.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

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

@@ -1,27 +0,0 @@
-.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

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

@@ -1,51 +0,0 @@
-'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>
-  );
-}