@ticketboothapp/booking 0.1.19 → 0.1.20

package/src/components/product-tile/image-only-product-tile-mobile.module.css

@@ -1,122 +0,0 @@
-.productTile {
-    height: 100%;
-    width: 100%;
-    text-decoration: none;
-    position: relative;
-    margin-top: var(--spacing-large);
-}
-
-.card {
-    width: 100%;
-    height: 380px;
-    perspective: 1000px;
-    cursor: pointer;
-}
-
-.cardInner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    transition: transform 0.6s;
-    transform-style: preserve-3d;
-}
-
-.card.isFlipped .cardInner {
-    transform: rotateY(180deg);
-}
-
-.cardFaceFront,
-.cardFaceBack {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-}
-
-.productTileImageContainer {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    border-radius: var(--border-radius-small);
-    overflow: hidden;
-    border: 10px solid var(--accent-orange);
-    box-sizing: border-box;
-}
-
-.cardFaceFront {
-    transform: rotateY(0deg);
-}
-
-.cardFaceBack {
-    transform: rotateY(180deg);
-    height: 380px;
-    background: var(--grey-text-dark-70);
-    border-radius: var(--border-radius-small);
-}
-
-.productTilePillValuesView {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-}
-
-.productTileImage {
-    width: 100%;
-    height: 100%;
-    position: relative;
-}
-
-.productTileImage::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 30%;
-    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
-    z-index: 1;
-}
-
-.productTileContentOverlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 8px;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-}
-
-.productTileTags {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-small);
-}
-
-.productTileTitle {
-    margin: 0;
-    color: white;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
-.productStartTime {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    color: #FFFFFF;
-    font-family: 'Northlake', sans-serif;
-    font-weight: 400;
-    font-size: 2.5rem;
-    text-align: right;
-    z-index: 2;
-    line-height: 0.8;
-} 
-
-.backCardProductTileButton {
-    margin-top: var(--spacing-small);
-}

package/src/components/product-tile/image-only-product-tile-mobile.tsx

@@ -1,89 +0,0 @@
-'use client';
-import { Product } from "@/constants/products"
-import ViaViaImage from "../image"
-import styles from "./image-only-product-tile-mobile.module.css"
-import { PillVariant } from "../value-pill"
-import ValuePill from "../value-pill"
-import Button from "../button";
-import defaultStrings from "@/strings";
-import ProductTag from "../product-tag";
-import { OPEN_BOOKING_FOR_PRODUCT } from "@/providers/booking-dialog-provider";
-
-export default function ProductTileMobile({ 
-    product, 
-    isFlipped, 
-    onFlip,
-    strings = defaultStrings
-}: { 
-    product: Product;
-    isFlipped: boolean;
-    onFlip: () => void;
-    strings?: any;
-}) {
-    const handleClick = (e: React.MouseEvent) => {
-        e.preventDefault();
-        onFlip();
-    };
-
-    const handleMoreInfo = (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        window.dispatchEvent(
-            new CustomEvent(OPEN_BOOKING_FOR_PRODUCT, { detail: { productId: product.id } })
-        );
-    };
-
-    return (
-        <div className={styles.productTile} onClick={handleClick}>
-            <div className={`${styles.card} ${isFlipped ? styles.isFlipped : ''}`}>
-                <div className={styles.cardInner}>
-                    <div className={styles.cardFaceFront}>
-                        <div className={styles.productTileImageContainer}>
-                            <ViaViaImage
-                                className={styles.productTileImage}
-                                imageId={product.images[0].id}
-                                alt={product.images[0].alt}
-                                context="GALLERY"
-                            />
-                            <div className={styles.productTileContentOverlay}>
-                                {/* Render tags if they exist */}
-                                {product.tags && (
-                                    <div className={styles.productTileTags}>
-                                        {product.tags.map((tag, index) => (
-                                            <ProductTag
-                                                key={`${tag.text}-${index}`}
-                                                text={tag.text}
-                                                style={tag.style}
-                                            />
-                                        ))}
-                                    </div>
-                                )}
-                                <h3 className={styles.productTileTitle}>{product.shortName}</h3>
-                            </div>
-                            <span className={styles.productStartTime} dangerouslySetInnerHTML={{ __html: product.currentStartTime }} />
-                        </div>
-                    </div>
-                    <div className={styles.cardFaceBack}>
-                        <div className={styles.productTilePillValuesView}>
-                            {product.pillValues.map((pillValue, index) => (
-                                <ValuePill 
-                                    key={`${pillValue.label}-${index}`}
-                                    variant={PillVariant.solid} 
-                                    pillValue={pillValue} 
-                                />
-                            ))}
-                            <Button 
-                                variant="outline" 
-                                className={styles.backCardProductTileButton}
-                                action=""
-                                onClick={handleMoreInfo}
-                            >
-                                {strings.common.moreInfo}
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-} 

package/src/components/product-tile/image-only-product-tile.tsx

@@ -1,44 +0,0 @@
-'use client';
-import { Product } from "@/constants/products"
-import { useState, useEffect } from "react";
-import ProductTileDesktop from "./image-only-product-tile-desktop";
-import ProductTileMobile from "./image-only-product-tile-mobile";
-
-export default function ProductTile({ 
-    product,
-    flippedProductId,
-    onFlip,
-    strings
-}: { 
-    product: Product;
-    flippedProductId?: string;
-    onFlip?: (productId: string) => void;
-    strings?: any;
-}) {
-    const [isMobile, setIsMobile] = useState(false); // Default to desktop view
-    const [hasMounted, setHasMounted] = useState(false);
-
-    useEffect(() => {
-        setHasMounted(true);
-        const checkMobile = () => setIsMobile(window.innerWidth < 1025);
-        checkMobile();
-        window.addEventListener('resize', checkMobile);
-        return () => window.removeEventListener('resize', checkMobile);
-    }, []);
-
-    // Always render desktop version for SEO/initial render
-    if (!hasMounted) {
-        return <ProductTileDesktop product={product} strings={strings} />;
-    }
-
-    return isMobile ? (
-        <ProductTileMobile 
-            product={product} 
-            isFlipped={flippedProductId === product.id}
-            onFlip={() => onFlip?.(product.id)}
-            strings={strings}
-        />
-    ) : (
-        <ProductTileDesktop product={product} strings={strings} />
-    );
-}

package/src/components/product-tile/product-tile-card.module.css

@@ -1,84 +0,0 @@
-.bestOptionCard {
-    background-color: var(--accent-white);
-    border-radius: 1rem;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    color: inherit;
-}
-
-.bestOptionCardImage img {  /* Target the actual image element */
-    transition: transform 0.3s ease-in-out;
-    will-change: transform;  /* Optimize performance */
-}
-
-.bestOptionCardImageContainer {
-    position: relative;
-    display: flex;
-    min-height: 250px; /* Minimum height for short content */
-}
-
-.bestOptionCardImage {
-    width: 100%;
-    height: 100%; /* Fill container height */
-    object-fit: cover;
-    position: absolute; /* Position behind pills */
-    top: 0;
-    left: 0;
-    overflow: hidden;
-}
-
-.bestOptionCardTitle {
-    font-weight: 700;
-    font-size: 1.2rem;
-    text-align: left;
-    width: 100%;
-    margin-bottom: 1rem;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    max-width: 100%;
-    text-decoration: none;
-}
-
-.bestOptionCardContent {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    padding: 1rem;
-    flex: 1;
-    justify-content: space-between;
-    box-sizing: border-box;
-}
-
-.bestOptionCardButton {
-    width: fit-content;
-    margin-top: auto;
-}
-
-.productTilePillValuesView {
-    position: relative;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 4px;
-    align-content: flex-end;
-    justify-content: flex-start;
-    padding: 16px;
-    z-index: 1;
-}
-
-/* Add hover effect for desktop */
-@media (min-width: 1024px) {
-    .bestOptionCard:hover .productTilePillValuesView {
-        opacity: 1;
-    }
-
-    .bestOptionCard:hover .bestOptionCardImage img {
-        transform: scale(1.1);  /* 10% zoom on hover */
-    }
-}

package/src/components/product-tile/product-tile-card.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import { Product } from "@/constants/products";
-import ViaViaImage from "../image";
-import styles from "./product-tile-card.module.css";
-import Button, { ButtonHoverColor } from "../button";
-import defaultStrings from "@/strings";
-import ValuePill from "../value-pill";
-import { PillVariant } from "../value-pill";
-import { OPEN_BOOKING_FOR_PRODUCT } from "@/providers/booking-dialog-provider";
-
-export default function ProductTileCard({ product, strings = defaultStrings }: { product: Product; strings?: any }) {
-    const handleClick = (e: React.MouseEvent) => {
-        e.preventDefault();
-        window.dispatchEvent(
-            new CustomEvent(OPEN_BOOKING_FOR_PRODUCT, { detail: { productId: product.id } })
-        );
-    };
-
-    return (
-        <div onClick={handleClick} className={styles.bestOptionCard} style={{ cursor: 'pointer' }}>
-            <div className={styles.bestOptionCardImageContainer}>
-                <ViaViaImage
-                    imageId={product.images[0].id}
-                    alt={product.images[0].alt}
-                    context="GALLERY"
-                    className={styles.bestOptionCardImage}
-                />
-                <ProductTilePillValuesView product={product} />
-            </div>
-            <div className={styles.bestOptionCardContent}>
-                <p className={styles.bestOptionCardTitle}>{product.name}</p>
-                <Button 
-                    variant="primary" 
-                    className={styles.bestOptionCardButton} 
-                    hoverColor={ButtonHoverColor.Turquoise}
-                >
-                    {strings.common.moreInfo}
-                </Button>
-            </div>
-        </div>
-    );
-}
-
-function ProductTilePillValuesView({
-    product
-}: {
-    product: Product
-}) {
-    return (
-        <div className={styles.productTilePillValuesView}>
-            {product.pillValues.map((pillValue, index) => (
-                <ValuePill 
-                    key={index}
-                    variant={PillVariant.overlay} 
-                    pillValue={pillValue} 
-                />
-            ))}
-        </div>
-    )
-}

package/src/components/review-highlights-section.css

@@ -1,85 +0,0 @@
-.review-highlights-section {
-  background-color: var(--accent-turquoise-60);
-  padding: var(--spacing-large) 0;
-}
-
-.review-highlights-container {
-  overflow-x: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.review-highlights-container::-webkit-scrollbar {
-  display: none;
-}
-
-.review-highlights-row {
-  display: flex;
-  gap: 24px;
-  min-width: min-content;
-}
-
-.review-highlights-title {
-  color: var(--accent-white);
-  padding: 0 var(--spacing-small);
-}
-
-.review-card {
-  min-width: 300px;
-  background: white;
-  padding: 32px;
-  border-radius: 40px;
-  position: relative;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  margin-top: 50px;
-  margin-right: 40px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.author-avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  background: transparent;
-  position: absolute;
-  top: -40px;
-  right: -40px;
-  border: 4px solid white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.review-author-name {
-  text-align: right;
-  padding-top: var(--spacing-small);
-}
-
-/* Desktop */
-@media (min-width: 1024px) {
-  .review-quote {
-    font-size: 14px;
-  }
-}
-
-.expand-button {
-  background: none;
-  border: none;
-  color: var(--accent-orange);
-  cursor: pointer;
-  font-weight: 600;
-  font-family: 'Figtree', sans-serif;
-  padding: 0;
-  margin-left: 4px;
-  text-decoration: underline;
-  transition: color 0.2s ease;
-}
-
-.expand-button:hover {
-  color: var(--accent-orange-dark);
-}
-
-.expand-button:focus {
-  outline: none;
-  color: var(--accent-orange-dark);
-}

package/src/components/review-highlights-section.tsx

@@ -1,127 +0,0 @@
-"use client";
-
-import { Parallax } from 'react-scroll-parallax';
-import './review-highlights-section.css';
-import ParallaxWrapper from '@/components/parallax-provider';
-import { REVIEWS, Review } from '@/constants/reviews';
-import Image from 'next/image';
-import StarRating from '@/components/star-rating';
-import { useState } from 'react';
-import TranslatableReviews from './translatable-reviews';
-import { usePathname } from 'next/navigation';
-
-function ReviewCard({ 
-  review, 
-  originalReview, 
-  showOriginal, 
-  onToggleOriginal, 
-  language 
-}: { 
-  review: typeof REVIEWS[0];
-  originalReview?: typeof REVIEWS[0];
-  showOriginal?: boolean;
-  onToggleOriginal?: () => void;
-  language: 'en' | 'es' | 'fr';
-}) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  
-  // Use original review if showing original, otherwise use the current review
-  const displayReview = showOriginal && originalReview ? originalReview : review;
-  
-  // Truncate text to first 100 characters
-  const truncatedText = displayReview.review.length > 500 ? displayReview.review.substring(0, 500) + '...' : displayReview.review;
-  const shouldShowExpand = displayReview.review.length > 500;
-  
-  return (
-    <div className="review-card">
-      <p className="review-quote">
-        <span dangerouslySetInnerHTML={{ 
-          __html: isExpanded ? displayReview.review : truncatedText 
-        }} />
-        {shouldShowExpand && (
-          <button 
-            className="expand-button"
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            {isExpanded ? ' Show less' : ' Read more'}
-          </button>
-        )}
-      </p>
-      {(language === 'es' || language === 'fr') && originalReview && onToggleOriginal && (
-        <div style={{ marginBottom: '1rem', textAlign: 'center' }}>
-          <button 
-            onClick={onToggleOriginal}
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'var(--accent-orange)',
-              cursor: 'pointer',
-              fontWeight: '600',
-              fontFamily: "'Figtree', sans-serif",
-              padding: '0',
-              textDecoration: 'underline',
-              transition: 'color 0.2s ease'
-            }}
-          >
-            {showOriginal ? (language === 'es' ? 'Ver traducido' : 'Voir traduit') : (language === 'es' ? 'Ver original' : 'Voir original')}
-          </button>
-        </div>
-      )}
-      <div className="review-author">
-        <div className="author-avatar">
-          <Image src={displayReview.profilePicture} alt={displayReview.author} width={80} height={80} />
-        </div>
-      </div>
-      <div>
-        <p className="review-author-name">{displayReview.author}</p>
-        <StarRating rating={5} align="right" />
-      </div>
-    </div>
-  );
-}
-
-export default function ReviewHighlightsSection({ className, strings }: { className: string; strings: any }) {
-  const pathname = usePathname();
-  const language = pathname?.startsWith('/es') ? 'es' : pathname?.startsWith('/fr') ? 'fr' : 'en';
-  const [individualToggles, setIndividualToggles] = useState<Record<string, boolean>>({});
-
-  const toggleIndividualOriginal = (reviewLink: string) => {
-    setIndividualToggles(prev => ({
-      ...prev,
-      [reviewLink]: !prev[reviewLink]
-    }));
-  };
-
-  return (
-    <div id="reviews-section" className={`review-highlights-section ${className}`}>
-      <ParallaxWrapper>
-        <h2 className="review-highlights-title">{strings.home.reviewHighlights.title}</h2>
-        <section className="review-highlights-container">
-          <Parallax translateX={['100%', '-100%']}>
-            <div className="review-highlights-row">
-              <TranslatableReviews language={language}>
-                {(reviews) => 
-                  reviews.map((review, index) => {
-                    const originalReview = REVIEWS[index];
-                    const showOriginal = individualToggles[review.link] || false;
-                    
-                    return (
-                      <ReviewCard 
-                        key={review.link} 
-                        review={review}
-                        originalReview={originalReview}
-                        showOriginal={showOriginal}
-                        onToggleOriginal={() => toggleIndividualOriginal(review.link)}
-                        language={language}
-                      />
-                    );
-                  })
-                }
-              </TranslatableReviews>
-          </div>
-          </Parallax>
-        </section>
-      </ParallaxWrapper>
-    </div>
-  );
-}