@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/footer.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import './footer.css';
+import { getStrings } from '@/strings';
+import FacebookIcon from '@/assets/icons/facebook.svg';
+import InstagramIcon from '@/assets/icons/instagram.svg';
+import TikTokIcon from '@/assets/icons/tiktok.svg';
+import GoogleIcon from '@/assets/icons/google-g-white.svg';
+import Spacer from './spacer';
+import Button, { ButtonHoverColor } from './button';
+import { getFooterLinks } from '@/constants/navigation-links/footer-links';
+import VIcon from '@/assets/icons/viavia-v.svg';
+import IIcon from '@/assets/icons/viavia-i.svg';
+import AIcon from '@/assets/icons/viavia-a.svg';
+import Link from 'next/link';
+import LanguageAwareLink from './language-aware-link';
+import { useBottomSheet } from '@/providers/bottom-sheet-provider';
+import ContactUs from './contact-us';
+import { useEffect, Suspense } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import MoraineMagicIcon from '@/assets/moraine-magic-white.svg';
+import EmailSignup from './email-signup';
+
+function ContactHandler() {
+    const { openSheet } = useBottomSheet();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+
+    useEffect(() => {
+        if (window.location.hash === '#contact') {
+            // Detect language from pathname inside the effect
+            const language = pathname?.startsWith('/es') ? 'es' : pathname?.startsWith('/fr') ? 'fr' : 'en';
+            const strings = getStrings(language);
+            
+            // Prevent default scroll behavior
+            const handleHashChange = (e: HashChangeEvent) => {
+                if (e.newURL.includes('#contact')) {
+                    e.preventDefault();
+                }
+            };
+            
+            window.addEventListener('hashchange', handleHashChange);
+            openSheet(<ContactUs strings={strings} />);
+            // Removed the history.replaceState line to keep the hash in URL
+
+            return () => {
+                window.removeEventListener('hashchange', handleHashChange);
+            };
+        }
+    }, [pathname, searchParams, openSheet]);
+
+    return null;
+}
+
+export default function Footer() {
+    const { openSheet } = useBottomSheet();
+    const pathname = usePathname();
+    
+    // Detect language from pathname
+    const language = pathname?.startsWith('/es') ? 'es' : pathname?.startsWith('/fr') ? 'fr' : 'en';
+    const strings = getStrings(language);
+
+    const handleContactClick = () => {
+        openSheet(<ContactUs strings={strings} />);
+    };
+
+    return (
+        <div className={`footer-container`}>
+            <Suspense>
+                <ContactHandler />
+            </Suspense>
+            <LanguageAwareLink href="/" className="footer-logo-container">
+                <div className="footer-via-via-name">
+                    <VIcon className="footer-logo-letter" />
+                    <IIcon className="footer-logo-letter" />
+                    <AIcon className="footer-logo-letter" />
+                </div>
+                <Spacer horizontal = {true} />
+                <div className="footer-via-via-name">
+                    <VIcon className="footer-logo-letter" />
+                    <IIcon className="footer-logo-letter" />
+                    <AIcon className="footer-logo-letter" />
+                </div>
+            </LanguageAwareLink>
+            <Spacer />
+            <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
+                <a href="https://instagram.com/viaviamorainelake" target="_blank" rel="noopener noreferrer">
+                    <InstagramIcon className="footer-icon" />
+                </a>
+                <a href="https://www.facebook.com/profile.php?id=61557238871790" target="_blank" rel="noopener noreferrer">
+                    <FacebookIcon className="footer-icon" />
+                </a>
+                <a href="https://www.tiktok.com/@viaviamorainelake" target="_blank" rel="noopener noreferrer">
+                    <TikTokIcon className="footer-icon" />
+                </a>
+                <a href="https://maps.app.goo.gl/FxRqxTjgN43ttWac9" target="_blank" rel="noopener noreferrer">
+                    <GoogleIcon className="footer-icon" />
+                </a>
+            </div>
+            <Spacer />
+            <FooterLinks strings={strings} />
+            <Spacer size='L' />
+            <Button 
+                onClick={handleContactClick}
+                variant="secondary"
+            >
+                {strings.footer.contactUs}
+            </Button>
+            <Spacer />
+            <p onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} style={{ cursor: 'pointer' }}>
+                ↑ <a><u>{strings.footer.returnToTop}</u></a> ↑
+            </p>
+            <Spacer />
+            <MoraineMagicIcon className="footer-moraine-magic-icon" />
+            <Spacer />
+            <EmailSignup strings={strings} source="footer" />
+            <Spacer />
+            <p><LanguageAwareLink href="/terms-conditions">{strings.footer["terms-and-conditions"]}</LanguageAwareLink></p>
+            <p><LanguageAwareLink href="/privacy-policy">{strings.footer["privacy-policy"]}</LanguageAwareLink></p>
+            <p><LanguageAwareLink href="/sitemap.xml">{strings.footer["sitemap"]}</LanguageAwareLink></p>
+            <Spacer />
+            <p>{strings.footer.copyright}</p>
+            <p className="footer-company-text" style={{ textTransform: 'uppercase', textAlign: 'center' }}>{strings.footer.company}</p>
+        </div>
+    )
+}
+
+function FooterLinks({ strings }: { strings: any }) {
+    const footerLinks = getFooterLinks(strings);
+    return (
+        <div className="footer-links-container">
+            {Object.values(footerLinks).map((link) => (
+                link.external ? (
+                    <a key={link.name} href={link.url} target="_blank" rel="noopener noreferrer">
+                        {link.name}
+                    </a>
+                ) : (
+                    <LanguageAwareLink key={link.name} href={link.path ?? link.url ?? '/'}>{link.name}</LanguageAwareLink>
+                )
+            ))}
+        </div>
+    )
+}

package/src/components/global-simple-modal.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useSimpleModal } from '@/hooks/use-simple-modal';
+import SimpleModal from './simple-modal';
+import { useEffect } from 'react';
+
+export default function GlobalSimpleModal() {
+    const { isModalOpen, closeModal } = useSimpleModal();
+
+    useEffect(() => {
+        const handleBookNowClick = (e: Event) => {
+            const target = e.target as HTMLElement;
+            const link = target.closest('a[href="#book-now"]');
+            if (link) {
+                e.preventDefault();
+                window.dispatchEvent(new CustomEvent('openSimpleModal'));
+            }
+        };
+
+        document.addEventListener('click', handleBookNowClick);
+        
+        return () => {
+            document.removeEventListener('click', handleBookNowClick);
+        };
+    }, []);
+
+    return (
+        <SimpleModal 
+            isOpen={isModalOpen} 
+            onClose={closeModal} 
+        />
+    );
+}

package/src/components/google-review-summary.module.css

@@ -0,0 +1,77 @@
+.googleReviewSummary {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 1rem;
+  transition: transform 0.2s ease, filter 0.2s ease;
+  cursor: pointer;
+}
+
+.googleReviewSummary:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+}
+
+.googleReviewSummary:active {
+  transform: scale(1.02);
+}
+
+.centerSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.logoRow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  margin-bottom: 0.5rem;
+  flex-direction: row;
+  width: 100%;
+  position: relative;
+}
+
+.sideLogo {
+  filter: brightness(0) invert(1);
+  position: absolute;
+  z-index: 0;
+  opacity: 0.7;
+  flex-shrink: 0;
+  top: 50%;
+  transform: translateY(5%);
+}
+
+.sideLogo:first-child {
+  left: 5%;
+}
+
+.sideLogo:last-child {
+  right: 5%;
+}
+
+.googleIcon {
+  --google-blue: var(--accent-white);
+  --google-red: var(--accent-white);
+  --google-yellow: var(--accent-white);
+  --google-green: var(--accent-white);
+  --google-lightblue: var(--accent-white);
+  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
+  position: relative;
+  z-index: 2;
+  margin-bottom: -2.5px;
+}
+
+.googleReviewsCount {
+  font-size: 16px;
+  color: var(--accent-white);
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  font-family: 'Poppins', sans-serif;
+}
+
+.googleReviewSummary :global(.starRating) {
+  position: relative;
+  z-index: 1;
+}

package/src/components/google-review-summary.tsx

@@ -0,0 +1,50 @@
+import GoogleIcon from '@/assets/icons/google-g.svg';
+import TripAdvisorIcon from '@/assets/icons/partner-logos/tripadvisor.svg';
+import GetYourGuideIcon from '@/assets/icons/partner-logos/getyourguide.svg';
+import styles from './google-review-summary.module.css';
+import StarRating from './star-rating';
+
+export default function GoogleReviewSummary({ strings }: { strings: any }) {
+  const scrollToReviews = () => {
+    const reviewsSection = document.getElementById('reviews-section');
+    if (reviewsSection) {
+      const elementTop = reviewsSection.offsetTop;
+      const offset = 100; // Adjust this value to control how high the section appears
+      window.scrollTo({
+        top: elementTop - offset,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  return (
+    <div 
+      className={styles.googleReviewSummary} 
+      onClick={scrollToReviews}
+      style={{ cursor: 'pointer' }}
+      title="Click to see all reviews"
+    >
+      <div className={styles.centerSection}>
+        <div className={styles.logoRow}>
+          <TripAdvisorIcon
+            width={28}
+            height={28}
+            className={styles.sideLogo}
+          />
+          <GoogleIcon
+            width={42}
+            height={42}
+            className={styles.googleIcon}
+          />
+          <GetYourGuideIcon
+            width={28}
+            height={28}
+            className={styles.sideLogo}
+          />
+        </div>
+        <StarRating rating={5} showVerified={false} useGradientSize={true} />
+      </div>
+      <p className={styles.googleReviewsCount}>{strings.home.hero.googleReviewsCount}</p>
+    </div>
+  );
+}

package/src/components/hero-image.css

@@ -0,0 +1,13 @@
+.hero-image-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.parallax-container {
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+  transform: translate3d(0, 0, 0);
+}

package/src/components/hero-image.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import ViaViaImage from './image';
+import './hero-image.css';
+import { useEffect, useRef } from 'react';
+
+interface HeroImageProps {
+  imageId: string;
+  alt: string;
+  objectPosition?: string;
+}
+
+const HeroImage = ({ imageId, alt, objectPosition }: HeroImageProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      const scrolled = Math.max(0, Math.min(window.scrollY, container.offsetHeight));
+      const rate = scrolled * 0.5;
+      container.style.transform = `translate3d(0, ${rate}px, 0)`;
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <div className="hero-image-container">
+      <div className="parallax-container" ref={containerRef}>
+        <ViaViaImage 
+          imageId={imageId} 
+          context="HERO" 
+          alt={alt} 
+          style={objectPosition ? { objectPosition } : undefined}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HeroImage;

package/src/components/image.css

@@ -0,0 +1,29 @@
+.image-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.image-natural {
+  position: relative;
+  width: 100%;
+  height: auto;
+}
+
+/* Make sure images are responsive within their containers */
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* This centers the image content vertically when cropped */
+  object-position: 50% 50%;
+}
+
+.image-natural img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+} 

package/src/components/image.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import Image from 'next/image';
+import './image.css';
+
+interface ImageWidths {
+  mobile: number;
+  tablet: number; 
+  desktop: number;
+}
+
+interface ImageWidthsMap {
+  HERO: ImageWidths;
+  GALLERY: ImageWidths;
+  THUMBNAIL: ImageWidths;
+  MODAL: ImageWidths;
+}
+
+const IMAGE_WIDTHS: ImageWidthsMap = {
+  HERO: {
+    mobile: 768,
+    tablet: 1024,
+    desktop: 1920
+  },
+  GALLERY: {
+    mobile: 400,
+    tablet: 600,
+    desktop: 800
+  },
+  THUMBNAIL: {
+    mobile: 200,
+    tablet: 300,
+    desktop: 400
+  },
+  MODAL: {
+    mobile: 1024,
+    tablet: 1280,
+    desktop: 1920
+  }
+};
+
+type ImageContext = 'HERO' | 'GALLERY' | 'THUMBNAIL' | 'MODAL';
+
+interface ImageProps {
+  imageId: string;
+  context?: ImageContext;
+  alt: string;
+  className?: string;
+  maintainAspectRatio?: boolean;
+  style?: React.CSSProperties;
+}
+
+// Pre-compute sizes strings for each context to ensure consistency
+const SIZES = {
+  HERO: '(min-width: 1024px) 1920px, (min-width: 768px) 1024px, 768px',
+  GALLERY: '(min-width: 1024px) 800px, (min-width: 768px) 600px, 400px',
+  THUMBNAIL: '(min-width: 1024px) 400px, (min-width: 768px) 300px, 200px',
+  MODAL: '(min-width: 1024px) 1920px, (min-width: 768px) 1280px, 1024px'
+};
+
+// Pre-compute quality values
+const QUALITY = {
+  HERO: 85,
+  GALLERY: 75,
+  THUMBNAIL: 75,
+  MODAL: 85
+};
+
+const ViaViaImage = ({ 
+  className = '', 
+  imageId, 
+  context = 'THUMBNAIL', 
+  alt,
+  maintainAspectRatio = false,
+  style
+}: ImageProps) => {
+  const normalizedContext = context.toUpperCase() as ImageContext;
+  const widths = IMAGE_WIDTHS[normalizedContext];
+
+  if (maintainAspectRatio) {
+    return (
+      <div className={`image-container image-natural ${className}`}>
+        <Image
+          src={imageId}
+          alt={alt}
+          fill={false}
+          width={widths.desktop}
+          height={widths.desktop * 9 / 16}
+          sizes={SIZES[normalizedContext]}
+          priority={normalizedContext === 'HERO'}
+          quality={QUALITY[normalizedContext]}
+          style={{ width: '100%', height: 'auto', ...style }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`image-container image-${normalizedContext.toLowerCase()} ${className}`}>
+      <Image
+        src={imageId}
+        alt={alt}
+        fill={true}
+        sizes={SIZES[normalizedContext]}
+        priority={normalizedContext === 'HERO'}
+        quality={QUALITY[normalizedContext]}
+        style={style}
+      />
+    </div>
+  );
+};
+
+export default ViaViaImage;

package/src/components/language-aware-link.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface LanguageAwareLinkProps {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+  target?: string;
+  rel?: string;
+  onClick?: () => void;
+}
+
+export default function LanguageAwareLink({ 
+  href, 
+  children, 
+  className, 
+  target, 
+  rel, 
+  onClick 
+}: LanguageAwareLinkProps) {
+  const pathname = usePathname();
+  
+  // Check if we're currently on a non-English page
+  const isSpanishPage = pathname?.startsWith('/es');
+  const isFrenchPage = pathname?.startsWith('/fr');
+  
+  // Define which pages have translated versions (currently only the homepage)
+  const translatedPages = ['/'];
+  
+  const getLocalizedHref = () => {
+    // If we're on a Spanish page
+    if (isSpanishPage && href.startsWith('/') && !href.startsWith('/es')) {
+      // Only prepend /es if this page has a Spanish version
+      if (translatedPages.includes(href)) {
+        return `/es${href}`;
+      }
+      // Otherwise, go to the English version (remove any /es prefix if present)
+      return href;
+    }
+    
+    // If we're on a French page
+    if (isFrenchPage && href.startsWith('/') && !href.startsWith('/fr')) {
+      // Only prepend /fr if this page has a French version
+      if (translatedPages.includes(href)) {
+        return `/fr${href}`;
+      }
+      // Otherwise, go to the English version (remove any /fr prefix if present)
+      return href;
+    }
+    
+    // If we're on an English page, always go to English version
+    if (!isSpanishPage && !isFrenchPage && (href.startsWith('/es') || href.startsWith('/fr'))) {
+      return href.replace(/^\/(es|fr)/, '') || '/';
+    }
+    
+    return href;
+  };
+
+  return (
+    <Link 
+      href={getLocalizedHref()}
+      className={className}
+      target={target}
+      rel={rel}
+      onClick={onClick}
+    >
+      {children}
+    </Link>
+  );
+}

package/src/components/language-switcher.module.css

@@ -0,0 +1,124 @@
+.languageSwitcher {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  z-index: 1000;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.currentLanguage {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-pill);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.currentLanguage:hover {
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.flag {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.languageCode {
+  font-size: 12px;
+  font-weight: 600;
+  color: #333;
+  letter-spacing: 0.5px;
+}
+
+.languageDropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 8px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(8px);
+  transition: all 0.2s ease;
+  min-width: 140px;
+}
+
+.languageDropdown.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.languageOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  text-decoration: none;
+  color: #333;
+  transition: background-color 0.15s ease;
+  border-radius: 6px;
+  margin: 4px;
+}
+
+.languageOption:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.languageOption.active {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
+.languageOption.active .flag {
+  opacity: 0.8;
+}
+
+.languageName {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .languageSwitcher {
+    bottom: 15px;
+    left: 15px;
+  }
+  
+  .currentLanguage {
+    padding: 6px 10px;
+  }
+  
+  .flag {
+    font-size: 14px;
+  }
+  
+  .languageCode {
+    font-size: 11px;
+  }
+  
+  .languageDropdown {
+    min-width: 120px;
+  }
+  
+  .languageOption {
+    padding: 8px 10px;
+  }
+  
+  .languageName {
+    font-size: 13px;
+  }
+}