@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/language-switcher.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import styles from './language-switcher.module.css';
+
+interface Language {
+  code: string;
+  name: string;
+  flag: string;
+}
+
+const languages: Language[] = [
+  { code: 'en', name: 'english', flag: '🇨🇦' },
+  { code: 'es', name: 'español', flag: '🇪🇸' },
+  { code: 'fr', name: 'français', flag: '🇫🇷' },
+  // Future languages
+  // { code: 'nl', name: 'Nederlands', flag: '🇳🇱' },
+];
+
+export default function LanguageSwitcher() {
+  const [isHovered, setIsHovered] = useState(false);
+  const pathname = usePathname();
+  
+  // Get current language from pathname
+  const currentLanguage = pathname?.startsWith('/es') ? 'es' : 
+                         pathname?.startsWith('/fr') ? 'fr' : 'en';
+
+  const getLanguageUrl = (langCode: string) => {
+    if (langCode === 'en') {
+      // Go to English version (remove any language prefix)
+      return pathname?.replace(/^\/(es|fr)/, '') || '/';
+    } else if (langCode === 'es') {
+      // Go to Spanish version (add /es prefix)
+      const basePath = pathname?.replace(/^\/(es|fr)/, '') || '/';
+      return `/es${basePath}`;
+    } else if (langCode === 'fr') {
+      // Go to French version (add /fr prefix)
+      const basePath = pathname?.replace(/^\/(es|fr)/, '') || '/';
+      return `/fr${basePath}`;
+    }
+    return '/';
+  };
+
+  const currentLang = languages.find(lang => lang.code === currentLanguage) || languages[0];
+
+  return (
+    <div 
+      className={styles.languageSwitcher}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className={styles.currentLanguage}>
+        <span className={styles.flag}>{currentLang.flag}</span>
+        <span className={styles.languageCode}>{currentLang.code.toUpperCase()}</span>
+      </div>
+      
+      <div className={`${styles.languageDropdown} ${isHovered ? styles.visible : ''}`}>
+        {languages.map((language) => (
+          <Link
+            key={language.code}
+            href={getLanguageUrl(language.code)}
+            className={`${styles.languageOption} ${
+              language.code === currentLanguage ? styles.active : ''
+            }`}
+          >
+            <span className={styles.flag}>{language.flag}</span>
+            <span className={styles.languageName}>{language.name}</span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/map-section.css

@@ -0,0 +1,59 @@
+.map-section-wrapper {
+    width: 100%;
+    background-color: var(--light-orange-background);
+    overflow: hidden;
+    padding-top: var(--spacing-medium);
+}
+
+.map-section-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    min-height: 100px;
+    padding: 2rem 4rem;
+    background-color: var(--accent-map-green);
+    margin: 0 auto;
+    border-radius: 20px 20px 0px 0px;
+}
+
+.map-section-image {
+    width: 100%;
+    min-height: fit-content;
+    object-fit: fit;
+    overflow: hidden;
+}
+
+.via-via-map {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+@media (max-width: 1023px) {
+    .map-section-container {
+        width: 90%;
+        padding: 2rem 0.5rem;  /* Reduce padding on mobile */
+    }
+    
+    .via-via-map {
+        width: 100%;
+    }
+}
+
+@media (min-width: 1024px) {
+    .map-section-container {
+        width: 70%;
+    }
+    
+    .map-section-image {
+        width: 100%;
+        margin-top: 1rem;
+    }
+    
+    .via-via-map {
+        width: 60%;
+        margin: 0 auto;
+    }
+}

package/src/components/map-section.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import ViaViaImage from "@/components/image";
+import { IMAGES } from "@/constants/images";
+import "./map-section.css";
+import { motion } from "motion/react";
+import { useState } from "react";
+
+interface MapSectionProps {
+  title: string;
+}
+
+const variants = {
+  hidden: { x: 0, y: 200 },
+  visible: { x: 0, y: 0 }
+};
+
+export default function MapSection(
+  { title }: MapSectionProps
+) {
+  const [hasAnimated, setHasAnimated] = useState(false);
+
+  const handleViewportEnter = (entry: IntersectionObserverEntry | null) => {
+    if (!hasAnimated) {
+        setHasAnimated(true);
+    }
+};
+
+const handleViewportLeave = (entry: IntersectionObserverEntry | null) => {
+    if (entry?.boundingClientRect.top! > 0) {
+        setHasAnimated(false);
+    }
+};
+
+  return (
+    <div className="map-section-wrapper">
+        <motion.div className="map-section-container"
+          variants={variants}
+          initial="hidden"
+          animate={hasAnimated ? "visible" : "hidden"}
+          transition={{
+              type: "spring",
+              bounce: 0.1,
+              duration: 1,
+          }}
+          viewport={{ once: false }}
+          onViewportEnter={handleViewportEnter}
+          onViewportLeave={handleViewportLeave}
+        >
+          <h2>{title}</h2>
+          <div className="map-section-image">
+            <ViaViaImage
+              imageId={IMAGES.VIA_VIA_OPERATIONS_MAP.id}
+              alt={IMAGES.VIA_VIA_OPERATIONS_MAP.alt}
+              context="GALLERY"
+              maintainAspectRatio={true}
+            />
+          </div>
+        </motion.div>
+    </div>
+  );
+}

package/src/components/navbar.module.css

@@ -0,0 +1,152 @@
+.hideAndSlideNavbar {
+    position: fixed;
+    top: -150px; /* Start hidden above the viewport */
+    transition: transform 0.5s ease;
+}
+
+.showAndSlideNavbar {
+    transform: translateY(150px); /* Slide down to become visible */
+}
+
+.navbarContainer {
+    left: 0;
+    right: 0;
+    z-index: 100;
+}
+
+.navbarContent {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.navbarRow {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* Desktop Navbar */
+@media (min-width: 1024px) {
+    .navbarContainer {
+        background-color: rgba(255, 238, 232, 0.7);
+        backdrop-filter: blur(8px);
+        padding: 1rem;
+    }
+
+    .navigationBarIcon {
+        width: 60px;
+        height: 60px;
+    }
+
+    .navbarContent {
+        max-width: 95%;
+        margin: 0 auto;
+    }
+
+    .mobileNavbarContent {
+        display: none;
+    }
+
+    .mobileNavbarLinks {
+        display: none;
+    }
+
+    .desktopNavbarContent {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+    }
+
+    .navbarLinks {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 2rem;
+        width: 100%;
+        text-align: center;
+    }
+
+    .bookNowButton {
+        min-width: 160px;
+    }
+
+    .showAndStickyOrMobileOverlapNavbar {
+        position: sticky;
+        top: 0;
+    }
+
+    .showAndStickyNavbar {
+        position: sticky;
+        top: 0;
+    }
+}
+
+/* Mobile Navbar */
+@media (max-width: 1023px) {
+    .navbarContainer {
+        border-color: var(--accent-orange);
+        border-width: 2px;
+        border-style: solid;
+        border-radius: 40px;
+        margin: 0.5rem;
+        overflow: hidden;
+        padding: 1rem;
+        background-color: var(--light-orange-background);
+    }
+
+    .navigationBarIcon {
+        width: 32px;
+        height: 32px;
+    }
+
+    .desktopNavbarContent {
+        display: none;
+    }
+
+    .navbarLinks {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100%;
+        justify-content: space-between;
+    }
+
+    .showAndStickyOrMobileOverlapNavbar {
+        position: fixed;
+        top: 0.5rem;
+    }
+
+    .showAndStickyNavbar {
+        position: sticky;
+        top: 0.5rem;
+    }
+}
+
+.navbarLinks a {
+    text-decoration: none;
+    color: var(--accent-orange);
+    font-size: 1.5rem;
+    font-weight: 800;
+    font-family: 'Poppins', sans-serif;
+    text-transform: lowercase;
+    padding: 0 var(--spacing-small);
+}
+.nonCurrentLink:hover {
+    text-decoration: underline;
+}
+
+.mobileNavbarLinks {
+    height: 0;
+    overflow: hidden;
+    transition: height 0.5s ease;
+}
+
+.mobileNavbarLinks.open {
+    height: 300px;
+}

package/src/components/navbar.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import styles from './navbar.module.css';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import LanguageAwareLink from './language-aware-link';
+import Button, { MenuButton, PresetButtonActions } from '@/components/button';
+import Image from 'next/image';
+import defaultStrings from '@/strings';
+import { getProducts } from '@/constants/products';
+
+export default function Navbar(
+  {
+    stickyMode,
+    strings = defaultStrings,
+  }: {
+    stickyMode: string | "hideAndSlide" | "showAndStickyOrMobileOverlap" | "showAndSticky",
+    strings?: any,
+  }
+) {
+  const pathname = usePathname() || '/';
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  if (stickyMode == "hideAndSlide") {
+    useEffect(() => {
+      const handleScroll = () => {      
+        const scrollPosition = window.scrollY;
+
+        // Show navbar when scrolled past yHeightForSlide
+        setIsVisible(scrollPosition > 50);
+      };
+
+      window.addEventListener('scroll', handleScroll);
+      return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+  }
+
+  return (
+    <nav className={`${styles.navbarContainer} ${stickyMode == "hideAndSlide" ? styles.hideAndSlideNavbar : ''} ${isVisible && stickyMode == "hideAndSlide" ? styles.showAndSlideNavbar : ''} ${stickyMode == "showAndStickyOrMobileOverlap" ? styles.showAndStickyOrMobileOverlapNavbar : ''} ${stickyMode == "showAndSticky" ? styles.showAndStickyNavbar : ''}`}>
+      <div className={styles.navbarContent}>
+        <div className={styles.navbarRow}>
+          <LanguageAwareLink href="/">
+            <Image 
+              src="logo192.png"
+              alt="Via Via Moraine Lake Shuttle Logo"
+              className={styles.navigationBarIcon}
+              width={60}
+              height={60}
+            />
+          </LanguageAwareLink>
+          <div className={styles.desktopNavbarContent}>
+            <NavbarLinks setIsMenuOpen={setIsMenuOpen} currentPath={pathname} strings={strings} />
+            <Button isLarge={true} className={styles.bookNowButton} action={PresetButtonActions.BOOK_ALL}>{strings.common.bookNow}</Button>
+          </div>
+          <div className={styles.mobileNavbarContent}>
+            <MenuButton onClick={() => setIsMenuOpen(!isMenuOpen)} isOpen={isMenuOpen} strings={strings} />
+          </div>
+        </div>
+        <div className={`${styles.mobileNavbarLinks} ${isMenuOpen ? styles.open : ''}`}>
+          <NavbarLinks setIsMenuOpen={setIsMenuOpen} currentPath={pathname} strings={strings} />
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+function NavbarLinks({ setIsMenuOpen, currentPath, strings }: { 
+  setIsMenuOpen: (open: boolean) => void,
+  currentPath: string,
+  strings: any
+}) {
+  
+  const products = getProducts(strings);
+  const navbarLinks = [
+    {
+      name: strings.navigationLinks.home,
+      path: '/',
+    },
+    {
+      name: strings.navigationLinks.sunriseTours,
+      path: products.MORAINE_LAKE_SUNRISE.path,
+    },
+    {
+      name: strings.navigationLinks.moraineLake,
+      path: products.MORAINE_LAKE_ADVENTURE.path,
+    },
+    {
+      name: strings.navigationLinks.lakeLouise,
+      path: products.LAKE_LOUISE_ADVENTURE.path,
+    },
+    {
+      name: strings.navigationLinks.emeraldLake,
+      path: products.EMERALD_LAKE_ESCAPE.path,
+    },
+    {
+      name: strings.navigationLinks.privateTours,
+      path: products.PRIVATE_TOUR.path,
+    },
+    {
+      name: strings.navigationLinks.photoSessions,
+      path: '/photo-sessions',
+    },
+    {
+      name: strings.navigationLinks.faq,
+      path: '/faq',
+    },
+  ];
+
+  return (
+    <div className={styles.navbarLinks}>
+      {navbarLinks.map((link) => (
+        <LanguageAwareLink 
+          onClick={() => setIsMenuOpen(false)} 
+          className={link.path == '/' && currentPath == '/' || link.path == '/' && currentPath == '/es' || link.path === currentPath.replace(/\/$/, '') ? styles.currentLink : styles.nonCurrentLink}
+          key={link.name} 
+          href={link.path}
+        >
+          {link.name}
+        </LanguageAwareLink>
+      ))}
+    </div>
+  );
+}

package/src/components/parallax-provider.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { ParallaxProvider } from 'react-scroll-parallax';
+
+export default function ParallaxWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <ParallaxProvider>
+      {children}
+    </ParallaxProvider>
+  );
+} 

package/src/components/partner/PartnerBookingPage.module.css

@@ -0,0 +1,130 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 1.5rem 1rem 3rem;
+  background-color: var(--light-orange-background);
+}
+
+.card {
+  width: 100%;
+  max-width: 1120px;
+  background: var(--accent-white);
+  border-radius: 1rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.headerLeft {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.headerSpacer {
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.backButton {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  font-family: 'Figtree', sans-serif;
+  color: var(--accent-turquoise);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.backButton:hover {
+  text-decoration: underline;
+}
+
+.title {
+  font-size: 1.375rem;
+  font-weight: 700;
+  margin: 0;
+  justify-self: center;
+  text-align: center;
+}
+
+/* Book flow header (partner portal + provider dashboard embedded): matches marketing booking chrome */
+.titleBookFlow {
+  font-size: 1.375rem;
+  font-weight: 700;
+  margin: 0;
+  justify-self: center;
+  text-align: center;
+  font-family: 'Poppins', sans-serif;
+  color: var(--accent-orange, #ff4d00);
+}
+
+.titleBookPrefix,
+.titleBookProduct {
+  text-transform: lowercase;
+}
+
+.titleBookSeparator {
+  font-weight: 700;
+}
+
+.titleProductGrid {
+  font-size: 1.5rem;
+}
+
+.headerRight {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.logoRow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 0.75rem 1.5rem 1rem;
+}
+
+.logoDivider {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #9ca3af;
+}
+
+.partnerLogo,
+.viaViaLogo {
+  max-height: 100px;
+  width: auto;
+}
+
+.content {
+  padding: 1.25rem;
+}
+
+.contentEmbedded {
+  padding: 0;
+}
+
+@media (min-width: 1024px) {
+  .root {
+    padding-top: 2rem;
+  }
+}
+