@ticketboothapp/booking 0.1.23 → 1.2.24

package/src/components/booking/BookingProductGrid.tsx

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