@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

package/src/components/booking/BookingProductGrid.tsx

@@ -0,0 +1,497 @@
+'use client';
+
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  useBookingDialog,
+  type ProductGridRestoreState,
+} from '@/providers/booking-dialog-provider';
+import { useLocale, useTranslations } from '@/lib/booking/i18n';
+import { getProducts } from '@/constants/products';
+import { getProductByIdOrSlug } from '@/lib/products-config';
+import { getProductDescription } from '@/lib/product-descriptions';
+import ViaViaImage from '@/components/image';
+import ValuePill from '@/components/value-pill';
+import ProductTag from '@/components/product-tag';
+import { PillVariant } from '@/components/value-pill';
+import type { Product } from '@/constants/products';
+import defaultStrings from '@/strings';
+import { getImageUrl } from '@/constants/images';
+import BackgroundPlayer from 'next-video/background-player';
+import styles from './BookingProductGrid.module.css';
+import Button, { ButtonHoverColor } from '@/components/button';
+
+const DEFAULT_VIDEO = {
+  src: '/videos/via-via-moraine-lake-tour-video.mp4',
+  webm: '/videos/via-via-moraine-lake-tour-video.webm',
+};
+
+// Filter definitions: product IDs that match each filter
+const FILTER_PRODUCT_IDS: Record<string, string[]> = {
+  'sunrise': ['moraine-lake-sunrise', 'moraine-lake-sunrise-lake-louise-golden-hour'],
+  'moraine-lake': [
+    'moraine-lake-sunrise',
+    'moraine-lake-sunrise-lake-louise-golden-hour',
+    'two-lakes-combo',
+    'moraine-lake-adventure',
+    'emerald-lake-escape',
+  ],
+  'lake-louise': [
+    'lake-louise-adventure',
+    'two-lakes-combo',
+    'moraine-lake-sunrise-lake-louise-golden-hour',
+    'emerald-lake-escape',
+  ],
+  'emerald-lake': ['emerald-lake-escape'],
+  'private': ['private-tour'],
+};
+export const FILTER_IDS = ['all', 'sunrise', 'moraine-lake', 'lake-louise', 'emerald-lake', 'private'] as const;
+export type FilterId = (typeof FILTER_IDS)[number];
+
+function getVideoForProduct(product: Product) {
+  return product.videoUrl ?? DEFAULT_VIDEO;
+}
+
+function BookingProductTileCollapsed({
+  product,
+  onClick,
+  useLayoutId,
+  suppressLayoutAnimation,
+}: {
+  product: Product;
+  onClick: () => void;
+  useLayoutId: boolean;
+  suppressLayoutAnimation?: boolean;
+}) {
+  return (
+    <motion.div
+      layout={!suppressLayoutAnimation}
+      layoutId={suppressLayoutAnimation ? undefined : useLayoutId ? product.id : undefined}
+      className={styles.tileCollapsed}
+      onClick={onClick}
+      transition={{ duration: 0.35, ease: [0.32, 0.72, 0, 1] }}
+    >
+      <div className={styles.tileImageContainer}>
+        <ViaViaImage
+          className={styles.tileImage}
+          imageId={product.images[0].id}
+          alt={product.images[0].alt}
+          context="GALLERY"
+        />
+        <div className={styles.tileOverlay}>
+          {product.tags && product.tags.length > 0 && (
+            <div className={styles.tileTags}>
+              {product.tags.map((tag, index) => (
+                <ProductTag
+                  key={`${tag.text}-${index}`}
+                  text={tag.text}
+                  style={tag.style}
+                />
+              ))}
+            </div>
+          )}
+          <h3 className={styles.tileTitle}>{product.shortName}</h3>
+        </div>
+        <span className={styles.tileStartTime } dangerouslySetInnerHTML={{ __html: product.currentStartTime }} />
+        <div className={styles.tilePills}>
+          {product.pillValues.map((pillValue, index) => (
+            <ValuePill
+              key={`${pillValue.label}-${index}`}
+              variant={PillVariant.overlay}
+              pillValue={pillValue}
+              compact
+            />
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+function BookingProductTileExpanded({
+  product,
+  onBook,
+  onCollapse,
+  onMount,
+  useLayoutId,
+  suppressLayoutAnimation,
+  isPartialLaunch,
+}: {
+  product: Product;
+  onBook: () => void;
+  onCollapse: () => void;
+  onMount?: (el: HTMLDivElement) => void;
+  useLayoutId: boolean;
+  suppressLayoutAnimation?: boolean;
+  isPartialLaunch: boolean;
+}) {
+  const [isClosing, setIsClosing] = useState(false);
+  const { locale } = useLocale();
+  const productDesc = getProductDescription(product.id, locale);
+  const displayDescription = productDesc?.shortDescription ?? product.description;
+
+  const handleCollapseClick = () => {
+    setIsClosing(true);
+    setTimeout(() => onCollapse(), 300);
+  };
+
+  const isMobile = !useLayoutId;
+
+  return (
+    <motion.div
+      ref={(el) => { if (el) onMount?.(el as HTMLDivElement); }}
+      layout={!suppressLayoutAnimation}
+      layoutId={suppressLayoutAnimation ? undefined : useLayoutId ? product.id : undefined}
+      className={styles.tileExpanded}
+      initial={suppressLayoutAnimation ? false : { opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={
+        isMobile
+          ? {
+              height: 0,
+              opacity: 0,
+              transition: { duration: 0.35, ease: [0.32, 0.72, 0, 1] },
+            }
+          : undefined
+      }
+      transition={{ duration: 0.35, ease: [0.32, 0.72, 0, 1] }}
+    >
+      <div className={styles.expandedInner}>
+        <div className={styles.expandedImage}>
+          <button
+            type="button"
+            className={styles.collapseArrowButton}
+            onClick={handleCollapseClick}
+            aria-label="Collapse"
+          >
+            <motion.svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              animate={{ rotate: isClosing ? 0 : 90 }}
+              transition={{ duration: 0.3, ease: [0.32, 0.72, 0, 1] }}
+            >
+              <path d="M10 6l8 6-8 6" />
+            </motion.svg>
+          </button>
+          <BackgroundPlayer
+            {...getVideoForProduct(product)}
+            autoPlay
+            muted
+            loop
+            playsInline
+            poster={getImageUrl(product.images[0].id)}
+            className={styles.expandedVideo}
+          />
+          {product.tags && product.tags.length > 0 && (
+            <div className={styles.expandedTags}>
+              {product.tags.map((tag, index) => (
+                <ProductTag
+                  key={`${tag.text}-${index}`}
+                  text={tag.text}
+                  style={tag.style}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+        <div className={styles.expandedContent}>
+          <h3 className={styles.expandedTitle}>{product.name}</h3>
+          <p className={styles.expandedDescription} dangerouslySetInnerHTML={{ __html: displayDescription }} />
+          <div className={styles.expandedPills}>
+            {product.pillValues.map((pillValue, index) => (
+              <ValuePill
+                key={`${pillValue.label}-${index}`}
+                variant={PillVariant.solid}
+                pillValue={pillValue}
+                compact
+              />
+            ))}
+          </div>
+          <div className={styles.expandedActions}>
+          <Button className={styles.bookButton} hoverColor={ButtonHoverColor.Turquoise} onClick={onBook}>{isPartialLaunch ? defaultStrings.common.moreInfo : defaultStrings.common.bookNow}</Button>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+interface BookingProductGridProps {
+  contentRef?: React.RefObject<HTMLDivElement | null>;
+  restoreState?: ProductGridRestoreState | null;
+  onRestoreApplied?: () => void;
+  /** Pre-select a filter when opening the grid (e.g. from a theme page). */
+  initialFilterId?: FilterId;
+  /** When true, shows "More Info" instead of "Book Now" (pre-launch state). */
+  isPartialLaunch?: boolean;
+  /**
+   * Optional callback when user clicks "Book now" for a product.
+   * When provided, BookingProductGrid will call this instead of opening the global BookingDialog.
+   */
+  onBookProduct?: (productId: string) => void;
+  /**
+   * When true with `onBookProduct`, a collapsed tile click books immediately (no expand).
+   * Default false keeps expand-in-place behavior for the main booking dialog.
+   */
+  bookOnTileClick?: boolean;
+}
+
+function filterProductsByFilterId(products: Product[], filterId: FilterId): Product[] {
+  if (filterId === 'all') return products;
+  const ids = FILTER_PRODUCT_IDS[filterId];
+  if (!ids) return products;
+  return products.filter((p) => ids.includes(p.id));
+}
+
+export default function BookingProductGrid({
+  contentRef,
+  restoreState,
+  onRestoreApplied,
+  initialFilterId,
+  isPartialLaunch = false,
+  onBookProduct,
+  bookOnTileClick = false,
+}: BookingProductGridProps = {}) {
+  const { push } = useBookingDialog();
+  const { t } = useTranslations();
+  const hasAppliedRestore = useRef(false);
+  const [expandedId, setExpandedId] = useState<string | null>(
+    restoreState?.expandedId ?? null
+  );
+  const [selectedFilterId, setSelectedFilterId] = useState<FilterId>(
+    initialFilterId && FILTER_IDS.includes(initialFilterId) ? initialFilterId : 'all'
+  );
+
+  const isRestoring = Boolean(restoreState);
+
+  // Restore scroll position when returning from book flow (no animation)
+  useEffect(() => {
+    if (!isRestoring || !restoreState || !contentRef?.current) return;
+    const scrollTop = restoreState.scrollTop;
+    const el = contentRef.current;
+    // Defer to next frame so grid layout is complete before restoring scroll
+    const id = requestAnimationFrame(() => {
+      if (el) {
+        el.scrollTop = scrollTop;
+      }
+      if (!hasAppliedRestore.current) {
+        hasAppliedRestore.current = true;
+        onRestoreApplied?.();
+      }
+    });
+    return () => cancelAnimationFrame(id);
+  }, [isRestoring, restoreState, contentRef, onRestoreApplied]);
+
+  const allProducts = useMemo(
+    () => Object.values(getProducts(defaultStrings)),
+    []
+  );
+
+  const products = useMemo(
+    () => filterProductsByFilterId(allProducts, selectedFilterId),
+    [allProducts, selectedFilterId]
+  );
+
+  // Collapse expanded tile if it's no longer in the filtered list
+  useEffect(() => {
+    if (expandedId && !products.some((p) => p.id === expandedId)) {
+      setExpandedId(null);
+    }
+  }, [products, expandedId]);
+
+  const expandedIndex = expandedId
+    ? products.findIndex((p) => p.id === expandedId)
+    : -1;
+  const expandedProduct =
+    expandedIndex >= 0 ? products[expandedIndex] : null;
+
+  // Column count for expand-in-place logic (2 mobile, 3 desktop)
+  const [cols, setCols] = useState(3);
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 768px)');
+    const update = () => setCols(mq.matches ? 3 : 2);
+    update();
+    mq.addEventListener('change', update);
+    return () => mq.removeEventListener('change', update);
+  }, []);
+
+  // Expand in place: keep expanded tile in its row, move same-row siblings below.
+  // This avoids holes and prevents the expanded tile from appearing far from the click.
+  const { productsAbove, productsSameRow, productsBelow } = useMemo(() => {
+    if (expandedIndex < 0) {
+      return {
+        productsAbove: products,
+        productsSameRow: [] as Product[],
+        productsBelow: [] as Product[],
+      };
+    }
+    const expandedRow = Math.floor(expandedIndex / cols);
+    const rowStart = expandedRow * cols;
+    const rowEnd = rowStart + cols;
+    const above = products.slice(0, rowStart);
+    const sameRow = products
+      .slice(rowStart, rowEnd)
+      .filter((_, i) => rowStart + i !== expandedIndex);
+    const below = products.slice(rowEnd);
+    return {
+      productsAbove: above,
+      productsSameRow: sameRow,
+      productsBelow: below,
+    };
+  }, [products, expandedIndex, cols]);
+
+  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scrollExpandedToTop = useCallback(
+    (el: HTMLDivElement) => {
+      if (isRestoring) return; // Skip scroll animation when restoring
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+        scrollTimeoutRef.current = null;
+      }
+      const findScrollParent = (node: HTMLElement): HTMLElement | null => {
+        let parent = node.parentElement;
+        while (parent) {
+          const { overflowY } = getComputedStyle(parent);
+          if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {
+            return parent;
+          }
+          parent = parent.parentElement;
+        }
+        return null;
+      };
+
+      const isLastRow = productsBelow.length === 0;
+
+      const run = () => {
+        scrollTimeoutRef.current = null;
+        const scrollParent = findScrollParent(el);
+        const elRect = el.getBoundingClientRect();
+
+        if (scrollParent) {
+          const containerRect = scrollParent.getBoundingClientRect();
+          let scrollDelta = elRect.top - containerRect.top;
+          // Last row: reduce scroll slightly to avoid overshooting and extra white space below
+          if (isLastRow) scrollDelta -= 24;
+          scrollParent.scrollTo({
+            top: scrollParent.scrollTop + scrollDelta,
+            behavior: 'smooth',
+          });
+        } else if (typeof window !== 'undefined') {
+          const offsetTop = window.scrollY + elRect.top - 120; // leave space for navbar
+          window.scrollTo({ top: offsetTop, behavior: 'smooth' });
+        }
+      };
+
+      // Wait for layout animation to fully complete (350ms + buffer) before scrolling.
+      // Scrolling earlier causes wrong position when switching between expanded items.
+      scrollTimeoutRef.current = setTimeout(run, 550);
+    },
+    [isRestoring, productsBelow.length]
+  );
+
+  const handleBook = (product: Product) => {
+    const config = getProductByIdOrSlug(product.id);
+    const productSlugOrId = config?.display.slug ?? product.id;
+
+    if (onBookProduct) {
+      onBookProduct(productSlugOrId);
+      return;
+    }
+
+    const scrollTop = contentRef?.current?.scrollTop ?? 0;
+    push(
+      {
+        type: 'book-flow',
+        productId: productSlugOrId,
+      },
+      {
+        productGridState: {
+          expandedId,
+          scrollTop,
+        },
+      }
+    );
+  };
+
+  const onCollapsedTileClick = (product: Product) => {
+    if (bookOnTileClick && onBookProduct) {
+      handleBook(product);
+      return;
+    }
+    setExpandedId((prev) => (prev === product.id ? null : product.id));
+  };
+
+  const filterLabels: Record<FilterId, string> = {
+    all: t('products.productGridFilters.all'),
+    'sunrise': t('products.productGridFilters.sunrise'),
+    'moraine-lake': t('products.productGridFilters.moraineLake'),
+    'lake-louise': t('products.productGridFilters.lakeLouise'),
+    'emerald-lake': t('products.productGridFilters.emeraldLake'),
+    'private': t('products.productGridFilters.private'),
+  };
+
+  return (
+    <div>
+      <div className={styles.filterPillsScroll}>
+        <div className={styles.filterPills}>
+          {FILTER_IDS.map((filterId) => {
+            const isApplied = selectedFilterId === filterId;
+            return (
+              <button
+                key={filterId}
+                type="button"
+                onClick={() => setSelectedFilterId(filterId)}
+                className={`${styles.filterPill} ${isApplied ? styles.filterPillApplied : ''}`}
+              >
+                {filterLabels[filterId]}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      <div className={styles.grid}>
+      <AnimatePresence mode={isRestoring ? 'sync' : 'popLayout'}>
+        {productsAbove.map((product) => (
+          <BookingProductTileCollapsed
+            key={product.id}
+            product={product}
+            onClick={() => onCollapsedTileClick(product)}
+            useLayoutId={cols === 3}
+            suppressLayoutAnimation={isRestoring}
+          />
+        ))}
+
+        {expandedProduct && (
+          <BookingProductTileExpanded
+            key={`expanded-${expandedProduct.id}`}
+            product={expandedProduct}
+            onBook={() => handleBook(expandedProduct)}
+            onCollapse={() => setExpandedId(null)}
+            onMount={scrollExpandedToTop}
+            useLayoutId={cols === 3}
+            suppressLayoutAnimation={isRestoring}
+            isPartialLaunch={isPartialLaunch}
+          />
+        )}
+
+        {[...productsSameRow, ...productsBelow].map((product) => (
+          <BookingProductTileCollapsed
+            key={product.id}
+            product={product}
+            onClick={() => onCollapsedTileClick(product)}
+            useLayoutId={cols === 3}
+            suppressLayoutAnimation={isRestoring}
+          />
+        ))}
+      </AnimatePresence>
+      </div>
+    </div>
+  );
+}