@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/hooks/useEmailSubscription.tsx

@@ -0,0 +1,103 @@
+'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

@@ -0,0 +1,16 @@
+'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

@@ -0,0 +1,49 @@
+'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

@@ -0,0 +1,210 @@
+'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/index.ts

@@ -27,10 +27,36 @@ export {
   type BookingFlowUiOptions,
 } from './components/booking/booking-flow-ui';
 
+export {
+  CompanyProvider,
+  useCompany,
+  useCompanyTimezone,
+  type Company,
+} from './contexts/CompanyContext';
+
+export {
+  AVAILABILITIES_CACHE_TTL_MS,
+  AvailabilitiesCacheProvider,
+  useAvailabilitiesCache,
+  buildAvailabilitiesCacheKey,
+  type CachedAvailabilitiesData,
+} from './contexts/AvailabilitiesCacheContext';
+
+export {
+  BookingDialogProvider,
+  useBookingDialog,
+  OPEN_BOOKING_FOR_PRODUCT,
+  OPEN_BOOKING_WITH_FILTER,
+  BOOKING_FLOW_ABANDON_EVENT,
+  type ProductGridFilterId,
+  type BookingScreen,
+  type ProductGridRestoreState,
+} from './providers/booking-dialog-provider';
+
 export {
   setPartnerPortalBookingJwtGetter,
   getPartnerPortalBookingJwt,
-} from './lib/booking-api-auth';
+} from './lib/booking-api';
 
 export {
   KnownBookingSource,
@@ -50,7 +76,6 @@ export {
 export {
   default as PartnerBookingPageWithBrowserMetadata,
   type PartnerBookingPageWithBrowserMetadataProps,
-  type PartnerBookingPageRenderProps,
 } from './components/partner/PartnerBookingPageWithBrowserMetadata';
 
 export {

package/src/lib/analytics.ts

@@ -0,0 +1,197 @@
+/**
+ * Frontend analytics for GA4 and Meta Pixel.
+ * Events deduplicate with backend using transaction_id / eventID = Stripe paymentIntent.id.
+ * - development/staging: log to console only (no GA4/Meta)
+ * - production: send to GA4/Meta when consent is granted
+ */
+import { ENV, isLocalhost, isProduction, shouldLogPurchaseToConsole } from '@/lib/env';
+
+const CONSENT_KEY = 'cookie-consent';
+const PENDING_PURCHASE_KEY = 'pending_purchase';
+
+declare global {
+  interface Window {
+    dataLayer?: unknown[];
+    gtag?: (...args: unknown[]) => void;
+    fbq?: (...args: unknown[]) => void;
+  }
+}
+
+/** Check if user has granted cookie consent. */
+export function hasAnalyticsConsent(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    return localStorage.getItem(CONSENT_KEY) === 'granted';
+  } catch {
+    return false;
+  }
+}
+
+/** Mark consent as granted (call from cookie banner on Accept). */
+export function setAnalyticsConsentGranted(): void {
+  if (typeof window === 'undefined') return;
+  try {
+    localStorage.setItem(CONSENT_KEY, 'granted');
+  } catch {
+    /* ignore */
+  }
+}
+
+/**
+ * Store purchase data before Stripe redirect.
+ * Success page reads payment_intent from URL and fires purchase with transaction_id = payment_intent.
+ */
+export function storePendingPurchase(value: number, currency: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    sessionStorage.setItem(
+      PENDING_PURCHASE_KEY,
+      JSON.stringify({ value, currency })
+    );
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Read and clear pending purchase from sessionStorage. */
+export function consumePendingPurchase(): { value: number; currency: string } | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = sessionStorage.getItem(PENDING_PURCHASE_KEY);
+    sessionStorage.removeItem(PENDING_PURCHASE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as { value?: number; currency?: string };
+    if (typeof parsed?.value === 'number' && typeof parsed?.currency === 'string') {
+      return { value: parsed.value, currency: parsed.currency };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function safeGtag(...args: unknown[]): void {
+  if (typeof window !== 'undefined' && window.gtag) {
+    window.gtag(...args);
+  }
+}
+
+function safeFbq(...args: unknown[]): void {
+  if (typeof window !== 'undefined' && window.fbq) {
+    window.fbq(...args);
+  }
+}
+
+/** Fire view_item when user selects or views a product. */
+export function trackViewItem(
+  productId: string,
+  productName: string,
+  price: number,
+  currency: string
+): void {
+  const data = { productId, productName, price, currency };
+
+  if (isLocalhost() || shouldLogPurchaseToConsole()) {
+    console.log('analytics view_item', data);
+    return;
+  }
+
+  if (!hasAnalyticsConsent()) return;
+
+  if (ENV.GA4_MEASUREMENT_ID) {
+      safeGtag('event', 'view_item', {
+      items: [{ item_id: productId, item_name: productName, price, currency }],
+    });
+  }
+  if (ENV.META_PIXEL_ID) {
+    safeFbq('track', 'ViewContent', {
+    content_ids: [productId],
+    content_name: productName,
+    content_type: 'product',
+    value: price,
+    currency,
+  });
+  }
+}
+
+export interface BeginCheckoutItem {
+  id: string;
+  name: string;
+  qty: number;
+  price: number;
+}
+
+/** Fire begin_checkout when checkout modal opens. */
+export function trackBeginCheckout(
+  value: number,
+  currency: string,
+  items: BeginCheckoutItem[]
+): void {
+  const data = { value, currency, items };
+
+  if (isLocalhost() || shouldLogPurchaseToConsole()) {
+    console.log('analytics begin_checkout', data);
+    return;
+  }
+
+  if (!hasAnalyticsConsent()) return;
+
+  if (ENV.GA4_MEASUREMENT_ID) {
+    safeGtag('event', 'begin_checkout', {
+    value,
+    currency,
+    items: items.map((i) => ({
+      item_id: i.id,
+      item_name: i.name,
+      quantity: i.qty,
+      price: i.price,
+    })),
+  });
+  }
+  if (ENV.META_PIXEL_ID) {
+    safeFbq('track', 'InitiateCheckout', {
+    value,
+    currency,
+    content_ids: items.map((i) => i.id),
+    content_type: 'product',
+    num_items: items.reduce((s, i) => s + i.qty, 0),
+  });
+  }
+}
+
+/**
+ * Fire purchase on success page.
+ * transactionId MUST be Stripe paymentIntent.id (from URL param payment_intent) for dedup with backend.
+ */
+export function trackPurchase(
+  transactionId: string,
+  value: number,
+  currency: string,
+  items: Array<{ item_id: string; item_name: string; quantity: number; price: number }> = []
+): void {
+  const data = { transaction_id: transactionId, value, currency, items };
+
+  if (isLocalhost() || shouldLogPurchaseToConsole()) {
+    console.log('analytics purchase', data);
+    return;
+  }
+
+  if (!hasAnalyticsConsent()) return;
+
+  if (ENV.GA4_MEASUREMENT_ID) {
+    safeGtag('event', 'purchase', {
+    transaction_id: transactionId,
+    value,
+    currency,
+    items,
+  });
+  }
+  if (ENV.META_PIXEL_ID) {
+    safeFbq('track', 'Purchase', {
+    value,
+    currency,
+    order_id: transactionId,
+    eventID: transactionId,
+  });
+  }
+}

package/src/lib/booking/booking-source.ts

@@ -1,5 +1,11 @@
+/**
+ * Channel values the API persists on reservations/bookings (aligned with ticketbooth-be
+ * `BookingMarketingSource` + `SourceTrackingService` auto-detect: WEBSITE, AFFILIATE, DASHBOARD,
+ * GYG, VIATOR, plus dynamic uppercase `utm_source` strings when no fixed bucket applies).
+ */
 export enum KnownBookingSource {
   WEBSITE = 'WEBSITE',
+  /** Main-site partner embed (e.g. `/partner/{slug}`); not the dedicated `booking.*` portal app. */
   PUBLIC_PARTNER_WEBSITE = 'PUBLIC_PARTNER_WEBSITE',
   PARTNER_PORTAL = 'PARTNER_PORTAL',
   AFFILIATE = 'AFFILIATE',
@@ -8,13 +14,21 @@ export enum KnownBookingSource {
   VIATOR = 'VIATOR',
 }
 
+/** Default reserve/checkout `source` when the client does not send a more specific channel. */
 export const DEFAULT_BOOKING_SOURCE = KnownBookingSource.WEBSITE;
+
+/** Client `source` when booking through the signed-in partner org / marketing partner flows. */
 export const PARTNER_PORTAL_BOOKING_SOURCE = KnownBookingSource.PARTNER_PORTAL;
 
 const PUBLIC_BOOKING_SLUG_RE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 
+/**
+ * True when metadata carries a partner org id or a normalized public marketing slug (same shape
+ * as backend `publicBookingSlug`), independent of hostname or URL path — use with route-level
+ * `canonicalAttribution.partnerSlug` so localhost and stripped URLs still attribute.
+ */
 export function mergedMetadataImpliesPartnerPortal(
-  merged: Partial<{ partnerId?: string; partnerSlug?: string }>
+  merged: Partial<{ partnerId?: string; partnerSlug?: string }>,
 ): boolean {
   const pid = typeof merged.partnerId === 'string' ? merged.partnerId.trim() : '';
   if (pid.startsWith('par_')) return true;
@@ -22,9 +36,13 @@ export function mergedMetadataImpliesPartnerPortal(
   return slug.length > 0 && PUBLIC_BOOKING_SLUG_RE.test(slug);
 }
 
+/**
+ * Fixed client channel from product / option identifiers (GYG / Viator embeds). Everything else
+ * is treated as main-site {@link KnownBookingSource.WEBSITE}; AFFILIATE/DASHBOARD are set server-side.
+ */
 export function inferClientBookingSourceFromProductIds(
   productId: string,
-  productOptionId?: string | null
+  productOptionId?: string | null,
 ): KnownBookingSource {
   const haystack = `${productId} ${productOptionId ?? ''}`.toLowerCase();
   if (haystack.includes('gyg_')) return KnownBookingSource.GYG;

package/src/lib/{checkout-breakdown.ts → booking/checkout-breakdown.ts}

@@ -1,4 +1,4 @@
-import type { CheckoutBreakdown, CheckoutReceiptLine } from '@/lib/api';
+import type { CheckoutBreakdown, CheckoutReceiptLine } from '@/lib/booking-api';
 
 /**
  * Round to 2 decimal places. Used so breakdown amounts and totals are stable