@ticketboothapp/booking 0.1.19 → 0.1.20

package/src/hooks/useEmailSubscription.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { db } from '@/lib/firebase';
-import { collection, addDoc, query, where, getDocs } from 'firebase/firestore';
-
-interface UseEmailSubscriptionProps {
-    initialEmail?: string;
-    autoSubmit?: boolean;
-    source?: string;
-}
-
-export function useEmailSubscription({ initialEmail = '', autoSubmit = false, source }: UseEmailSubscriptionProps) {
-    const [email, setEmail] = useState(initialEmail);
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error' | 'duplicate'>('idle');
-
-    const subscribeEmail = useCallback(async (emailToSubscribe: string) => {
-        if (!emailToSubscribe || isSubmitting) return false;
-
-        setIsSubmitting(true);
-        setSubmitStatus('idle');
-
-        try {
-            // Check if email already exists
-            const emailQuery = query(
-                collection(db, 'mail'),
-                where('to', '==', emailToSubscribe)
-            );
-            const existingEmails = await getDocs(emailQuery);
-
-            if (!existingEmails.empty) {
-                setSubmitStatus('duplicate');
-                setIsSubmitting(false);
-                return false;
-            }
-
-            // Add email to Firestore (this will trigger your email function)
-            await addDoc(collection(db, 'mail'), {
-                to: emailToSubscribe,
-                message: {
-                    subject: 'Via Via Moraine Lake Shuttle - 2026 Season Updates',
-                    text: `Hi there! Thank you for subscribing to our updates! We're excited to keep you informed about the 2026 season at Moraine Lake, Lake Louise, and Emerald Lake. Moraine Lake Road is currently closed as Parks Canada closes the access road every year for the winter season. We'll get back to you with updates about 2026 ticket release dates and special offers as soon as we have more information. Best regards, The Via Via Team`,
-                    html: `
-                        <div style="font-family: Figtree, sans-serif; max-width: 700px; margin: 0 auto; padding: 20px;">
-                            <h2 style="color: #ff4d00; text-align: center; margin-bottom: 20px;">Thanks for signing up!</h2>
-                            
-                            <p style="color: inherit;">Hi there,</p>
-                            <p style="color: inherit;">Thank you for subscribing to our updates! We're excited to keep you informed about the 2026 season at Moraine Lake, Lake Louise, and Emerald Lake.</p>
-
-                            <p style="color: inherit;">Moraine Lake Road is currently closed as Parks Canada closes the access road every year for the winter season.</p>
-                            
-                            <p style="color: inherit;">We'll get back to you with updates about 2026 ticket release dates and special offers as soon as we have more information.</p>
-                            
-                            <p style="color: inherit;">In the meantime, feel free to follow us on <a href="https://www.instagram.com/viaviamorainelake/" style="color: #ff4d00; -webkit-text-size-adjust: 100%;">Instagram</a> for the latest news and beautiful photos from Banff National Park.</p>
-                            
-                            <p style="color: inherit;">Best regards,<br>
-                            The Via Via Team 🌄🚐</p>
-                            
-                            <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
-                            
-                            <div style="text-align: center; margin-bottom: 30px;">
-                                <img src="https://viaviamorainelake.b-cdn.net/logo192.png?format=png&width=200" alt="Via Via Moraine Lake Shuttle" style="max-width: 200px; height: auto;">
-                            </div>
-                            <p style="font-size: 12px; color: #666; text-align: center;">
-                                Via Via Moraine Lake Shuttle • Canmore, Alberta<br>
-                                <a href="https://viaviamorainelake.com/?utm_source=email&utm_medium=sign-up-email&utm_campaign=2026-updates-signup-confirmation" style="color: #ff4d00;">viaviamorainelake.com</a><br>
-                                <a href="https://viaviamorainelake.com/unsubscribe?email=${emailToSubscribe}" style="color: #ff4d00; font-size: 11px;">Unsubscribe</a>
-                            </p>
-                        </div>
-                    `
-                },
-                createdAt: new Date(),
-                source: source || 'unknown'
-            });
-
-            setSubmitStatus('success');
-            setEmail('');
-            return true;
-        } catch (error) {
-            console.error('Email signup error:', error);
-            setSubmitStatus('error');
-            return false;
-        } finally {
-            setIsSubmitting(false);
-        }
-    }, [isSubmitting, source]);
-
-    // Auto-submit if requested and email is provided
-    useEffect(() => {
-        if (autoSubmit && initialEmail && submitStatus === 'idle') {
-            subscribeEmail(initialEmail);
-        }
-    }, [autoSubmit, initialEmail, submitStatus, subscribeEmail]);
-
-    return {
-        email,
-        setEmail,
-        isSubmitting,
-        submitStatus,
-        subscribeEmail
-    };
-}

package/src/hooks/useEmbeddedInIframe.ts

@@ -1,16 +0,0 @@
-'use client';
-
-import { useLayoutEffect, useState } from 'react';
-
-/** True when this document is loaded inside an iframe (e.g. partner portal manage-booking embed). */
-export function useEmbeddedInIframe(): boolean {
-  const [embedded, setEmbedded] = useState(() => {
-    if (typeof window === 'undefined') return false;
-    return window.parent !== window.self;
-  });
-  useLayoutEffect(() => {
-    if (typeof window === 'undefined') return;
-    setEmbedded(window.parent !== window.self);
-  }, []);
-  return embedded;
-}

package/src/hooks/useIsBookingLaunchLive.ts

@@ -1,49 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { BOOKING_LAUNCH_AT } from '@/lib/booking-constants';
-
-/**
- * Returns whether the full booking flow is live (past launch time).
- * Before launch: shows partial flow (collage + tour description).
- * After launch: shows full flow (calendar, checkout, etc.).
- *
- * Schedules a state update at launch time so users on the site at 8am
- * see the full flow without refreshing.
- *
- * Dev override: ?booking_preview=full or ?booking_preview=partial in the URL
- * forces the flow for local testing (e.g. localhost:3000/?booking_preview=partial).
- */
-export function useIsBookingLaunchLive(): boolean {
-  const [isLive, setIsLive] = useState(false);
-
-  useEffect(() => {
-    // Dev override for local testing
-    if (typeof window !== 'undefined') {
-      const params = new URLSearchParams(window.location.search);
-      const preview = params.get('booking_preview');
-      if (preview === 'full') {
-        setIsLive(true);
-        return;
-      }
-      if (preview === 'partial') {
-        setIsLive(false);
-        return;
-      }
-    }
-
-    const launchMs = BOOKING_LAUNCH_AT.getTime();
-    const now = Date.now();
-
-    if (now >= launchMs) {
-      setIsLive(true);
-      return;
-    }
-
-    const msUntil = launchMs - now;
-    const id = setTimeout(() => setIsLive(true), msUntil);
-    return () => clearTimeout(id);
-  }, []);
-
-  return isLive;
-}

package/src/hooks/useQuiz.tsx

@@ -1,210 +0,0 @@
-'use client';
-
-import { createContext, useContext, useCallback, useState, ReactNode, Dispatch, SetStateAction } from 'react';
-import { QuizState, UserAnswers } from '@/types/quiz';
-import { QUIZ_QUESTIONS } from '@/constants/booking-guide-quiz';
-import { getQuizRecommendations } from '@/constants/quiz-recommendations';
-
-interface QuizContextType {
-    state: QuizState;
-    setState: Dispatch<SetStateAction<QuizState>>;
-    submitAnswer: (questionId: string, answerId: string) => boolean;
-    toggleAnswer: (questionId: string, answerId: string) => void;
-    getSelectedAnswers: (questionId: string) => string[];
-    goToNextQuestion: () => void;
-    goToPreviousQuestion: () => void;
-    restartQuiz: () => void;
-    getRecommendedProducts: () => ReturnType<typeof getQuizRecommendations>;
-    getCurrentQuestion: () => typeof QUIZ_QUESTIONS[0] | undefined;
-    deselectAnswer: (questionId: string) => boolean;
-    getProgress: () => number;
-    getVisibleQuestions: () => typeof QUIZ_QUESTIONS[0][];
-}
-
-const QuizContext = createContext<QuizContextType | undefined>(undefined);
-
-const initialState: QuizState = {
-    currentQuestionIndex: 0,
-    answers: {},
-    isComplete: false,
-};
-
-export function QuizProvider({ children }: { children: ReactNode }) {
-    const [state, setState] = useState<QuizState>(initialState);
-
-    const getVisibleQuestions = useCallback((answers = state.answers) => {
-        return QUIZ_QUESTIONS.filter(question => {
-            if (!question.showIf) return true;
-            return question.showIf(answers);
-        });
-    }, [state.answers]);
-
-    const getCurrentQuestion = useCallback(() => {
-        const visibleQuestions = getVisibleQuestions();
-        return visibleQuestions[state.currentQuestionIndex];
-    }, [state.currentQuestionIndex, getVisibleQuestions]);
-
-    const getSelectedAnswers = useCallback((questionId: string): string[] => {
-        const answer = state.answers[questionId];
-        if (!answer) return [];
-        
-        const question = QUIZ_QUESTIONS.find(q => q.id === questionId);
-        if (question?.isMultiSelect) {
-            return Array.isArray(answer) ? answer : [answer];
-        }
-        return [answer as string];
-    }, [state.answers]);
-
-    const submitAnswer = useCallback((questionId: string, answerId: string) => {
-        const question = QUIZ_QUESTIONS.find(q => q.id === questionId);
-        
-        setState(prev => {
-            if (question?.isMultiSelect) {
-                const currentAnswers = Array.isArray(prev.answers[questionId])
-                    ? prev.answers[questionId] as string[]
-                    : [];
-                
-                const updatedAnswers = currentAnswers.includes(answerId)
-                    ? currentAnswers.filter(id => id !== answerId)
-                    : [...currentAnswers, answerId];
-
-                // If this is the activities question, handle hiking check
-                if (questionId === 'what_activities') {
-                    const shouldContinue = updatedAnswers.includes('hiking');
-                    return {
-                        ...prev,
-                        answers: {
-                            ...prev.answers,
-                            [questionId]: updatedAnswers
-                        },
-                        isComplete: !shouldContinue
-                    };
-                }
-
-                return {
-                    ...prev,
-                    answers: {
-                        ...prev.answers,
-                        [questionId]: updatedAnswers
-                    }
-                };
-            }
-
-            // For single select, just store the value directly
-            return {
-                ...prev,
-                answers: {
-                    ...prev.answers,
-                    [questionId]: answerId
-                }
-            };
-        });
-
-        // Return true unless it's activities without hiking
-        if (questionId === 'what_activities') {
-            const answers = getSelectedAnswers(questionId);
-            return answers.includes('hiking');
-        }
-        return true;
-    }, [getSelectedAnswers]);
-
-    const toggleAnswer = useCallback((questionId: string, answerId: string) => {
-        setState(prev => {
-            const currentAnswers = Array.isArray(prev.answers[questionId]) 
-                ? prev.answers[questionId] as string[]
-                : [];
-            
-            const updatedAnswers = currentAnswers.includes(answerId)
-                ? currentAnswers.filter(id => id !== answerId)
-                : [...currentAnswers, answerId];
-
-            return {
-                ...prev,
-                answers: {
-                    ...prev.answers,
-                    [questionId]: updatedAnswers
-                }
-            };
-        });
-    }, []);
-
-    const goToNextQuestion = useCallback(() => {
-        setState(prev => ({
-            ...prev,
-            currentQuestionIndex: prev.currentQuestionIndex + 1
-        }));
-    }, []);
-
-    const goToPreviousQuestion = useCallback(() => {
-        setState(prev => ({
-            ...prev,
-            currentQuestionIndex: Math.max(0, prev.currentQuestionIndex - 1),
-            isComplete: false
-        }));
-    }, []);
-
-    const restartQuiz = useCallback(() => {
-        setState(initialState);
-    }, []);
-
-    const getRecommendedProducts = useCallback(() => {
-        return getQuizRecommendations(state.answers);
-    }, [state.answers]);
-
-    const deselectAnswer = useCallback((questionId: string) => {
-        const newAnswers = { ...state.answers };
-        delete newAnswers[questionId];
-        
-        // Check if removing this answer makes any questions disappear
-        const nextVisible = QUIZ_QUESTIONS.filter(question => {
-            if (!question.showIf) return true;
-            return question.showIf(newAnswers);
-        });
-        
-        // If we're currently on a question that will disappear, mark as complete
-        const willCurrentQuestionDisappear = state.currentQuestionIndex >= nextVisible.length;
-        
-        setState(prev => ({
-            ...prev,
-            answers: newAnswers,
-            isComplete: willCurrentQuestionDisappear
-        }));
-        
-        return !willCurrentQuestionDisappear;
-    }, [state.currentQuestionIndex, state.answers]);
-
-    const getProgress = useCallback(() => {
-        const visibleQuestions = getVisibleQuestions();
-        return ((state.currentQuestionIndex + 1) / visibleQuestions.length) * 100;
-    }, [state.currentQuestionIndex, getVisibleQuestions]);
-
-    const value = {
-        state,
-        setState,
-        submitAnswer,
-        toggleAnswer,
-        getSelectedAnswers,
-        goToNextQuestion,
-        goToPreviousQuestion,
-        restartQuiz,
-        getRecommendedProducts,
-        getCurrentQuestion,
-        deselectAnswer,
-        getProgress,
-        getVisibleQuestions
-    };
-
-    return (
-        <QuizContext.Provider value={value}>
-            {children}
-        </QuizContext.Provider>
-    );
-}
-
-export function useQuiz() {
-    const context = useContext(QuizContext);
-    if (context === undefined) {
-        throw new Error('useQuiz must be used within a QuizProvider');
-    }
-    return context;
-} 

package/src/providers/bottom-sheet-provider.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import { createContext, useContext, useState } from 'react';
-import BottomSheet from '@/components/bottom-sheet';
-
-type BottomSheetContextType = {
-  openSheet: (content: React.ReactNode) => void;
-  closeSheet: () => void;
-};
-
-const BottomSheetContext = createContext<BottomSheetContextType | null>(null);
-
-export function BottomSheetProvider({ children }: { children: React.ReactNode }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [content, setContent] = useState<React.ReactNode>(null);
-
-  const openSheet = (content: React.ReactNode) => {
-    setContent(content);
-    setIsOpen(true);
-  };
-
-  const closeSheet = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <BottomSheetContext.Provider value={{ openSheet, closeSheet }}>
-      {children}
-      <BottomSheet isOpen={isOpen} onClose={closeSheet}>
-        {content}
-      </BottomSheet>
-    </BottomSheetContext.Provider>
-  );
-}
-
-export function useBottomSheet() {
-  const context = useContext(BottomSheetContext);
-  if (!context) throw new Error('useBottomSheet must be used within BottomSheetProvider');
-  return context;
-} 

package/src/providers/dependent-add-on-dialog-provider.tsx

@@ -1,105 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
-import type { PhotoDapSlug } from '@/lib/photo-dap-config';
-
-export type DependentAddOnProductOptionChoice = {
-  dependentAddOnProductOptionId: string;
-  label: string;
-  photosLabel?: string;
-  startingAtLabel?: string;
-};
-
-export type DependentAddOnDialogOpenPayload = {
-  /** Card title shown in dialog header */
-  productDisplayTitle: string;
-  dependentAddOnProductId: string;
-  /** Fixed catalog option (no picker) */
-  dependentAddOnProductOptionId?: string;
-  /** When provided without a fixed option id, user picks one (e.g. 30 / 60 / 90 min) */
-  productOptions?: DependentAddOnProductOptionChoice[];
-  /**
-   * Default session-length id when multiple `productOptions` exist (e.g. manage-booking upsell probed 30 min).
-   * Unlike `dependentAddOnProductOptionId`, this does not hide the picker — the user can switch length.
-   */
-  initialSelectedProductOptionId?: string;
-  /** Hero + grid images (DapFlowCollage); Bunny CDN IDs */
-  collageImageIds?: string[];
-  /** Loads expandable copy from dap-descriptions */
-  dapDescriptionSlug?: PhotoDapSlug;
-  /**
-   * From DAP catalog / TicketBooth product — days before the photo session for full-refund cancellation.
-   * Availability API may override when it returns the same field.
-   */
-  cancellationDaysBeforeSession: number;
-  /**
-   * Pre-fill primary booking reference (e.g. manage-booking upsell after shuttle checkout).
-   * Accepts short or bookRef_ form; dialog normalizes for display.
-   */
-  initialPrimaryBookingReference?: string;
-  /** Optional pre-fill for booking-owner verification on DAP availability checks. */
-  initialPrimaryBookingLastName?: string;
-};
-
-interface DependentAddOnDialogContextValue {
-  isOpen: boolean;
-  payload: DependentAddOnDialogOpenPayload | null;
-  open: (p: DependentAddOnDialogOpenPayload) => void;
-  close: () => void;
-}
-
-const DependentAddOnDialogContext =
-  createContext<DependentAddOnDialogContextValue | null>(null);
-
-export function useDependentAddOnDialog() {
-  const ctx = useContext(DependentAddOnDialogContext);
-  if (!ctx) {
-    throw new Error(
-      'useDependentAddOnDialog must be used within DependentAddOnDialogProvider'
-    );
-  }
-  return ctx;
-}
-
-export function DependentAddOnDialogProvider({ children }: { children: ReactNode }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [payload, setPayload] = useState<DependentAddOnDialogOpenPayload | null>(null);
-  const previouslyFocusedRef = useRef<HTMLElement | null>(null);
-
-  const open = useCallback((p: DependentAddOnDialogOpenPayload) => {
-    previouslyFocusedRef.current =
-      document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    setPayload(p);
-    setIsOpen(true);
-  }, []);
-
-  const close = useCallback(() => {
-    setIsOpen(false);
-    setPayload(null);
-    const prev = previouslyFocusedRef.current;
-    requestAnimationFrame(() => {
-      if (prev && typeof prev.focus === 'function') {
-        prev.focus();
-      }
-    });
-  }, []);
-
-  const value = useMemo(
-    () => ({ isOpen, payload, open, close }),
-    [isOpen, payload, open, close]
-  );
-
-  return (
-    <DependentAddOnDialogContext.Provider value={value}>
-      {children}
-    </DependentAddOnDialogContext.Provider>
-  );
-}

package/src/radius.css

@@ -1,5 +0,0 @@
-:root {
-    --border-radius-small: 10px;
-    --border-radius-medium: 24px;
-    --border-radius-pill: 50px;
-}

package/src/spacing.css

@@ -1,7 +0,0 @@
-:root {
-    --spacing-small: 8px;
-    --spacing-medium: 16px;
-    --spacing-large: 32px;
-    --spacing-xlarge: 64px;
-    --spacing-xxlarge: 92px;
-}