@ticketboothapp/booking 0.1.19 → 0.1.22

package/src/components/simple-top-of-fold.tsx

@@ -1,34 +0,0 @@
-import styles from './simple-top-of-fold.module.css';
-import { ImageData } from '@/constants/images';
-import HeroImage from '@/components/hero-image';
-
-export type ImagePosition = 'top' | 'center' | 'bottom';
-
-export interface SimpleTopOfFoldProps {
-    image: ImageData;
-    title: string;
-    subtitle: string;
-    subsubtitle?: string;
-    imagePosition?: ImagePosition;
-}
-
-export default function SimpleTopOfFold(props: SimpleTopOfFoldProps) {
-    const { image, title, subtitle, subsubtitle, imagePosition = 'center' } = props;
-    return (
-        <div className={`${styles.topOfFold} global-top-fold`}>
-            <div className={`${styles.heroImageWrapper} ${styles[imagePosition]}`}>
-                <HeroImage 
-                    imageId={image.id}
-                    alt={image.alt}
-                    objectPosition={imagePosition}
-                />
-            </div>
-
-            <div className={styles.heroOverlayContent}>
-                <h1 className={styles.heroTitle}>{title}</h1>
-                <h2 className={styles.heroSubtitle}>{subtitle}</h2>
-                {subsubtitle && <h3 className={styles.heroSubsubtitle}>{subsubtitle}</h3>}
-            </div>
-        </div>
-    );
-}

package/src/components/spacer.css

@@ -1,41 +0,0 @@
-.spacer {
-  display: block;
-}
-
-.spacer-vertical {
-  width: 100%;
-}
-
-.spacer-horizontal {
-  height: 100%;
-  display: inline-block;
-}
-
-/* Vertical spacing */
-.spacer-small {
-  height: var(--spacing-small);
-}
-
-.spacer-medium {
-  height: var(--spacing-medium);
-}
-
-.spacer-large {
-  height: var(--spacing-large);
-}
-
-/* Horizontal spacing */
-.spacer-horizontal.spacer-small {
-  width: var(--spacing-small);
-  height: auto;
-}
-
-.spacer-horizontal.spacer-medium {
-  width: var(--spacing-medium);
-  height: auto;
-}
-
-.spacer-horizontal.spacer-large {
-  width: var(--spacing-large);
-  height: auto;
-} 

package/src/components/spacer.tsx

@@ -1,23 +0,0 @@
-import './spacer.css';
-
-const SPACER_SIZES = {
-  S: 'small',
-  M: 'medium', 
-  L: 'large'
-} as const;
-
-type SpacerSize = keyof typeof SPACER_SIZES;
-
-interface SpacerProps {
-  size?: SpacerSize;
-  horizontal?: boolean;
-  className?: string;
-}
-
-const Spacer = ({ className = '', size = 'M', horizontal = false }: SpacerProps) => {
-  const spacerClass = `spacer spacer-${SPACER_SIZES[size]} ${horizontal ? 'spacer-horizontal' : 'spacer-vertical'} ${className}`;
-  
-  return <div className={spacerClass} />;
-};
-
-export default Spacer;

package/src/components/star-rating.module.css

@@ -1,74 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.starRating {
-  display: flex;
-  gap: 2px;
-}
-
-.starRating.gradientSpacing {
-  gap: 2px;
-}
-
-/* Add extra spacing around the large center star */
-.starRating.gradientSpacing .starLarge {
-  margin: 0 4px;  /* Additional margin on left and right of the center star */
-}
-
-.star {
-  width: 16px;
-  height: 16px;
-  opacity: 0.3;
-}
-
-.star.filled {
-  opacity: 1;
-}
-
-.verified {
-  width: 16px;
-  height: 16px;
-  position: relative;
-}
-
-.verified:hover::after {
-  content: "Trustindex verifies that the original source of the review is Google.";
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 12px;
-  white-space: nowrap;
-  z-index: 1000;
-}
-
-.align-left {
-  justify-content: flex-start;
-}
-
-.align-center {
-  justify-content: center;
-}
-
-.align-right {
-  justify-content: flex-end;
-}
-
-.starSmall {
-  transform: scale(0.8);
-}
-
-.starMedium {
-  transform: scale(1);
-}
-
-.starLarge {
-  transform: scale(1.4);
-} 

package/src/components/star-rating.tsx

@@ -1,48 +0,0 @@
-import StarIcon from '@/assets/icons/star.svg';
-import VerifiedIcon from '@/assets/icons/verified.svg';
-import styles from './star-rating.module.css';
-
-interface StarRatingProps {
-  rating: number;  // Expects a number between 0-5
-  showVerified?: boolean;
-  align?: 'left' | 'center' | 'right';
-  useGradientSize?: boolean;  // New prop to control star size pattern
-}
-
-export default function StarRating({ 
-  rating, 
-  showVerified = true, 
-  align = 'left',
-  useGradientSize = false
-}: StarRatingProps) {
-  // Helper function to get size class based on star position
-  const getStarSizeClass = (position: number) => {
-    if (!useGradientSize) return '';
-    
-    if (position === 3) return styles.starLarge;
-    if (position === 2 || position === 4) return styles.starMedium;
-    return styles.starSmall;
-  };
-
-  return (
-    <div className={`${styles.container} ${styles[`align-${align}`]}`}>
-      <div className={`${styles.starRating} ${useGradientSize ? styles.gradientSpacing : ''}`}>
-        {[1, 2, 3, 4, 5].map((star) => (
-          <StarIcon 
-            key={star}
-            className={`
-              ${styles.star} 
-              ${star <= rating ? styles.filled : styles.empty}
-              ${getStarSizeClass(star)}
-            `}
-          />
-        ))}
-      </div>
-      {showVerified && (
-        <div className={styles.verified} title="Trustindex verifies that the original source of the review is Google.">
-          <VerifiedIcon />
-        </div>
-      )}
-    </div>
-  );
-} 

package/src/components/title-subtitle.module.css

@@ -1,10 +0,0 @@
-.titleSubtitleSubtitle {
-    text-align: center;
-    color: var(--primary-text);
-    font-size: 1rem;
-    margin-bottom: 2rem;
-}
-
-.titleSubtitleDescription {
-    text-align: justify;
-}

package/src/components/title-subtitle.tsx

@@ -1,30 +0,0 @@
-import styles from "./title-subtitle.module.css"
-import containerStyles from "@/styles/container.module.css"
-
-export interface TitleSubtitleProps {
-  title?: string
-  subtitle?: string
-  description?: string
-  className?: string
-}
-
-export const createTitleSubtitleParams = (props: TitleSubtitleProps) => props;
-
-export default function TitleSubtitle({
-  title,
-  subtitle,
-  description,
-  className
-}: TitleSubtitleProps) {
-  return (
-    <div className={`${styles.titleSubtitle} ${className}`}>
-      {title && <h2>{title}</h2>}
-      {subtitle && <h3 className={styles.titleSubtitleSubtitle}>{subtitle}</h3>}
-      {description && (
-        <p className={styles.titleSubtitleDescription} 
-            dangerouslySetInnerHTML={{__html: description}} 
-        />
-      )}
-    </div>
-  )
-}

package/src/components/translatable-reviews.tsx

@@ -1,75 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { REVIEWS, Review } from '@/constants/reviews';
-
-interface TranslatableReviewsProps {
-  children: (reviews: Review[], showOriginal: boolean, toggleOriginal: () => void) => React.ReactNode;
-  language: 'en' | 'es' | 'fr';
-}
-
-export default function TranslatableReviews({ children, language }: TranslatableReviewsProps) {
-  const [translatedReviews, setTranslatedReviews] = useState<Review[]>([]);
-  const [showOriginal, setShowOriginal] = useState(false);
-  const [isTranslating, setIsTranslating] = useState(false);
-
-  const toggleOriginal = () => {
-    setShowOriginal(!showOriginal);
-  };
-
-  useEffect(() => {
-    if ((language === 'es' || language === 'fr') && translatedReviews.length === 0 && !isTranslating) {
-      translateReviews();
-    }
-  }, [language, translatedReviews.length, isTranslating]);
-
-  const translateReviews = async () => {
-    setIsTranslating(true);
-    try {
-      // Use Google Translate API to translate the reviews
-      const translated = await Promise.all(
-        REVIEWS.map(async (review) => {
-          try {
-            // For now, we'll use a simple approach with Google Translate
-            // In production, you might want to use the Google Translate API
-            const response = await fetch(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=${language}&dt=t&q=${encodeURIComponent(review.review)}`);
-            const data = await response.json();
-            const translatedText = data[0]?.map((item: any) => item[0]).join('') || review.review;
-            
-            return {
-              ...review,
-              review: translatedText
-            };
-          } catch (error) {
-            console.error('Translation error for review:', error);
-            return review; // Fallback to original
-          }
-        })
-      );
-      setTranslatedReviews(translated);
-    } catch (error) {
-      console.error('Error translating reviews:', error);
-      setTranslatedReviews(REVIEWS); // Fallback to original
-    } finally {
-      setIsTranslating(false);
-    }
-  };
-
-  // Return original reviews for English or when showing original
-  if (language === 'en' || showOriginal) {
-    return <>{children(REVIEWS, showOriginal, toggleOriginal)}</>;
-  }
-
-  // Return translated reviews for Spanish or French
-  if (translatedReviews.length > 0) {
-    return <>{children(translatedReviews, showOriginal, toggleOriginal)}</>;
-  }
-
-  // Show loading state while translating
-  if (isTranslating) {
-    return <>{children(REVIEWS, showOriginal, toggleOriginal)}</>;
-  }
-
-  // Fallback to original
-  return <>{children(REVIEWS, showOriginal, toggleOriginal)}</>;
-}

package/src/components/value-props.css

@@ -1,185 +0,0 @@
-.value-props-container {
-  padding: var(--spacing-medium);
-  background-color: var(--light-orange-background);
-}
-
-.value-props-inner {
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.title-subtitle-container {
-  padding: var(--spacing-small);
-}
-
-.value-props-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.value-prop-card:last-child:nth-child(odd) {
-  grid-column: 1 / -1;
-  max-width: 350px;
-  margin: 0 auto;
-}
-
-@media (min-width: 768px) {
-  .value-props-grid {
-    gap: 24px;
-  }
-
-  .value-prop-card {
-    padding: 24px;
-  }
-
-  .value-prop-icon-wrapper {
-    width: 56px;
-    height: 56px;
-    margin: 0 auto 20px;
-  }
-
-  .value-prop-heading {
-    font-size: 20px;
-    margin-bottom: 12px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .value-props-grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 32px;
-  }
-
-  .value-prop-card {
-    padding: 32px;
-    min-height: 280px;
-    gap: 16px;
-  }
-
-  .value-prop-icon-wrapper {
-    width: 64px;
-    height: 64px;
-    margin: 0 auto 24px;
-  }
-
-  .value-prop-heading {
-    font-size: 28px;
-    margin-bottom: 16px;
-  }
-
-  .value-prop-card:last-child:nth-child(odd) {
-    grid-column: auto;
-    max-width: none;
-    margin: 0;
-  }
-
-  .value-prop-card:nth-last-child(2):nth-child(4),
-  .value-prop-card:last-child:nth-child(5) {
-    transform: translateX(50%);
-  }
-}
-
-.value-prop-card {
-  background: white;
-  padding: 8px 16px;
-  border-radius: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.value-prop-icon-wrapper {
-  width: 48px;
-  height: 48px;
-  margin: 0 auto 8px;
-  text-align: center;
-}
-
-.value-prop-icon {
-  width: 48px;
-  height: 48px;
-
-  @media (min-width: 768px) {
-    width: 80px;
-    height: 80px;
-  }
-}
-
-.value-prop-icon-wrapper {
-  @media (min-width: 768px) {
-    width: 80px;
-    height: 80px;
-  }
-}
-
-.value-prop-heading {
-  font-size: 18px;
-  margin-bottom: 8px;
-}
-
-@media (max-width: 768px) {
-  .value-props-grid {
-    display: grid !important;
-    grid-template-columns: repeat(3, 1fr) !important;
-    gap: 8px !important;
-    max-width: none !important;
-  }
-  
-  .value-prop-card {
-    padding: 8px 8px !important;
-    min-height: 120px !important;
-    gap: 4px !important;
-    grid-column: auto !important;
-    max-width: none !important;
-    margin: 0 !important;
-    transform: none !important;
-  }
-  
-  .value-prop-description {
-    display: none;
-  }
-  
-  .value-prop-icon-wrapper {
-    width: 48px;
-    height: 48px;
-    margin: 0 auto 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .value-prop-heading {
-    font-size: 14px;
-    margin-bottom: 4px;
-    text-align: center;
-    word-wrap: break-word;
-    hyphens: auto;
-  }
-  
-  .value-prop-icon {
-    margin: 0 !important;
-    display: block !important;
-    width: 48px !important;
-    height: 48px !important;
-    flex-shrink: 0 !important;
-  }
-  
-  .value-prop-icon svg {
-    margin: 0 !important;
-    display: block !important;
-    width: 48px !important;
-    height: 48px !important;
-  }
-  
-  .value-prop-icon div {
-    width: 48px !important;
-    height: 48px !important;
-  }
-}

package/src/components/value-props.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import './value-props.css';
-import dynamic from 'next/dynamic';
-import TitleSubtitle from '@/components/title-subtitle';
-import { VALUE_PROPS_KEYS, animations } from '@/constants/value-props';
-
-// Dynamically import Lottie with no SSR
-const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
-
-interface ValuePropsProps {
-  title?: string;
-  description?: string;
-  filterKeys?: string[];
-  className?: string;
-  strings: any;
-}
-
-export default function ValueProps({ title, description, filterKeys, className, strings }: ValuePropsProps) {
-  // Generate value props dynamically from strings
-  const generateValueProps = () => {
-    const valuePropsMap = {
-      [VALUE_PROPS_KEYS.SMALL_GROUPS]: { animationKey: 'smallGroups' as const },
-      [VALUE_PROPS_KEYS.COZY_BLANKETS]: { animationKey: 'cozyBlankets' as const },
-      [VALUE_PROPS_KEYS.HOT_DRINKS]: { animationKey: 'hotDrinks' as const },
-      [VALUE_PROPS_KEYS.PHOTO_TOURS]: { animationKey: 'photoTours' as const },
-      [VALUE_PROPS_KEYS.LOCAL_GUIDES]: { animationKey: 'localGuides' as const },
-      [VALUE_PROPS_KEYS.CONVENIENT_PICKUP]: { animationKey: 'convenientPickup' as const },
-      [VALUE_PROPS_KEYS.DIRECT_ACCESS]: { animationKey: 'directAccess' as const },
-      [VALUE_PROPS_KEYS.AVOID_PAID_PARKING]: { animationKey: 'avoidPaidParking' as const },
-      [VALUE_PROPS_KEYS.FLEXIBLE_CANCELLATION]: { animationKey: 'flexibleCancellation' as const },
-      [VALUE_PROPS_KEYS.MULTIPLE_LOCATIONS]: { animationKey: 'multipleLocations' as const },
-      [VALUE_PROPS_KEYS.NO_PARKING_STRUGGLES]: { animationKey: 'noParkingStruggles' as const },
-      [VALUE_PROPS_KEYS.YOUR_PRIVATE_GROUP]: { animationKey: 'threeFriends' as const },
-      [VALUE_PROPS_KEYS.CUSTOMIZED_ITINERARY]: { animationKey: 'map' as const },
-      [VALUE_PROPS_KEYS.DOORSTEP_PICKUP]: { animationKey: 'convenientPickup' as const },
-      [VALUE_PROPS_KEYS.CAPTURE_THE_MOMENT]: { animationKey: 'photoTours' as const },
-      [VALUE_PROPS_KEYS.COZY_COMFORT]: { animationKey: 'cozyBlankets' as const },
-      [VALUE_PROPS_KEYS.PERSONAL_GUIDES]: { animationKey: 'localGuides' as const }
-    };
-
-    return Object.entries(valuePropsMap).map(([key, { animationKey }]) => ({
-      key,
-      animationKey,
-      title: strings.valueProps[key as keyof typeof strings.valueProps].title,
-      description: strings.valueProps[key as keyof typeof strings.valueProps].description
-    }));
-  };
-
-  const allValueProps = generateValueProps();
-  const displayedProps = filterKeys 
-    ? allValueProps.filter(prop => filterKeys.includes(prop.key))
-    : allValueProps;
-
-  return (
-    <section className={`value-props-container ${className}`}>
-      <div className="value-props-inner">
-        <div className="title-subtitle-container">
-          {title && (
-            <TitleSubtitle
-              title={title}
-              description={description}
-            />
-          )}
-        </div>
-        <div className="value-props-grid">
-          {displayedProps.map((prop) => (
-            <div key={prop.key} className="value-prop-card">
-              <div className="value-prop-icon-wrapper">
-                <Lottie
-                  animationData={animations[prop.animationKey]}
-                  loop={true}
-                  className="value-prop-icon"
-                />
-              </div>
-              <h3 className="value-prop-heading">
-                {prop.title}
-              </h3>
-              <p className="value-prop-description">
-                {prop.description}
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/constants/booking-guide-quiz.ts

@@ -1,64 +0,0 @@
-import { QuizQuestion } from "@/types/quiz";
-import { IMAGES } from "./images";
-
-export const QUIZ_QUESTIONS: QuizQuestion[] = [
-    {
-        id: "what_lakes",
-        text: "What do you want to see during your visit to Banff National Park? Select all that apply.",
-        subtitle: "It is possible to see multiple lakes in one day, we'll recommend the best way to combine them.",
-        answers: [
-            { 
-                id: "moraine_lake", 
-                text: "Moraine Lake",
-                image: IMAGES.MORAINE_LAKE_SUNRISE
-            },
-            { 
-                id: "lake_louise", 
-                text: "Lake Louise",
-                image: IMAGES.LAKE_LOUISE
-            },
-            { 
-                id: "emerald_lake", 
-                text: "Emerald Lake",
-                image: IMAGES.EMERALD_LAKE
-            },
-            { id: "other_custom", text: "Other (you want a custom itinerary)" }
-        ],
-        isMultiSelect: true
-    },
-    {
-        id: "sunrise",
-        text: "Do you want to see the infamous Moraine Lake sunrise?",
-        answers: [
-            { id: "yes", text: "Yes, I want to see the sunrise", subtext: "🐦 Early bird gets the worm!" },
-            { id: "no", text: "No, I don't want to see the sunrise", subtext: "😴 I need my beauty rest" }
-        ]
-    },
-    {
-        id: "what_activities",
-        text: "What activities are you interested in? Select all that apply.",
-        subtitle: "It's possible to do multiple activities in one day! We'll recommend the best way to combine them.",
-        answers: [
-            { id: "banff_bucket_list", text: "Banff Bucket List" },
-            { id: "hiking", text: "Hiking" },
-            { id: "photography", text: "Photography" },
-            { id: "canoeing", text: "Canoeing" },
-            { id: "relaxation", text: "Relaxation" }
-        ],
-        isMultiSelect: true
-    },
-    {
-        id: "hiking",
-        text: "What type of hikes are you interested in?",
-        answers: [
-            { id: "easy_short_hikes", text: "Easy short hikes", subtext: "<=1 hour or 2.5km (1.5mi)" },
-            { id: "moderate_hikes", text: "Moderate hikes", subtext: "1-2 hours or 3-6km (2-4mi)" },
-            { id: "challenging_hikes", text: "Challenging hikes", subtext: ">2 hours or >6km (4mi)" },
-            { id: "expert_hikes", text: "Expert hikes", subtext: ">5 hours or >10km (6mi)" }
-        ],
-        showIf: (answers) => {
-            const activities = answers["what_activities"];
-            return Array.isArray(activities) ? activities.includes("hiking") : activities === "hiking";
-        }
-    }
-];

package/src/constants/contact-info.ts

@@ -1,2 +0,0 @@
-export const CONTACT_EMAIL = 'info@viaviamorainelake.com';
-export const CONTACT_PHONE = '+1 587 907 4560';