@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

package/src/constants/pill-values.ts

@@ -0,0 +1,210 @@
+const busIconPath = '/pill-value-icons/bus-icon.svg';
+const clockIconPath = '/pill-value-icons/clock-icon.svg';
+const sunriseIconPath = '/pill-value-icons/sun-icon.svg';
+const cameraIconPath = '/pill-value-icons/camera-icon.svg';
+const moneyIconPath = '/pill-value-icons/money-icon.svg';
+const doubleCheckIconPath = '/pill-value-icons/double-check-icon.svg';
+const hikerIconPath = '/pill-value-icons/hiker-icon.svg';
+const waterIconPath = '/pill-value-icons/water-icon.svg';
+const lunchIconPath = '/pill-value-icons/lunch-icon.svg';
+const croissantIconPath = '/pill-value-icons/croissant-icon.svg';
+const locationPinIconPath = '/pill-value-icons/location-pin-icon.svg';
+const addTimeIconPath = '/pill-value-icons/add-time-icon.svg';
+const coffeeIconPath = '/pill-value-icons/coffee-icon.svg';
+const blanketIconPath = '/pill-value-icons/blanket-icon.svg';
+import defaultStrings from '@/strings';
+import { ProductKey } from './products';
+
+export type PillValue = {
+    icon: string;
+    label: string;
+}
+
+export function createDeparturePillValue(productKey: ProductKey, strings = defaultStrings): PillValue {
+    return {
+        icon: busIconPath,
+        label: getDepartureLabel(productKey, strings)
+    };
+}
+
+function getDepartureLabel(productKey: ProductKey, strings: any): string {
+    switch (productKey) {
+        case 'two-lakes-combo':
+            return strings.pillValues.departurePillValues.twoLakesCombo;
+        case 'moraine-lake-adventure':
+            return strings.pillValues.departurePillValues.moraineLakeAdventure;
+        case 'lake-louise-adventure':
+            return strings.pillValues.departurePillValues.lakeLouiseAdventure;
+        case 'emerald-lake-escape':
+            return strings.pillValues.departurePillValues.emeraldLakeEscapeTour;
+        case 'private-tour':
+            return strings.pillValues.departurePillValues.privateTour;
+        case 'afternoon-delight':
+            return strings.pillValues.departurePillValues.afternoonDelight;
+        default:
+            return '';
+    }
+}
+
+export function createDurationPillValue(productKey: ProductKey, strings = defaultStrings): PillValue {
+    return {
+        icon: clockIconPath,
+        label: getDurationLabel(productKey, strings)
+    };
+}
+
+function getDurationLabel(productKey: ProductKey, strings: any): string {
+    switch (productKey) {
+        case 'moraine-lake-sunrise':
+            return strings.pillValues.durationPillValues.moraineLakeSunrise;
+        case 'moraine-lake-sunrise-lake-louise-golden-hour-1':
+            return strings.pillValues.durationPillValues.moraineLakeSunriseLakeLouiseGoldenHour1;
+        case 'moraine-lake-sunrise-lake-louise-golden-hour-2':
+            return strings.pillValues.durationPillValues.moraineLakeSunriseLakeLouiseGoldenHour2;
+        case 'two-lakes-combo-1':
+            return strings.pillValues.durationPillValues.twoLakesCombo1;
+        case 'two-lakes-combo-2':
+            return strings.pillValues.durationPillValues.twoLakesCombo2;
+        case 'moraine-lake-adventure':
+            return strings.pillValues.durationPillValues.moraineLakeAdventure;
+        case 'lake-louise-adventure':
+            return strings.pillValues.durationPillValues.lakeLouiseAdventure;
+        case 'emerald-lake-escape':
+            return strings.pillValues.durationPillValues.emeraldLakeEscapeTour;
+        case 'private-tour':
+            return strings.pillValues.durationPillValues.privateTour;
+        case 'afternoon-delight1':
+            return strings.pillValues.durationPillValues.afternoonDelight1;
+        case 'afternoon-delight2':
+            return strings.pillValues.durationPillValues.afternoonDelight2;
+        default:
+            return '';
+    }
+}
+
+export function createAddTimePillValue(productKey: ProductKey, strings = defaultStrings): PillValue {
+    return {
+        icon: addTimeIconPath,
+        label: getAddTimeLabel(productKey, strings)
+    };
+}
+
+function getAddTimeLabel(productKey: ProductKey, strings: any): string {
+    switch (productKey) {
+        case 'moraine-lake-sunrise':
+            return strings.pillValues.addTimePillValues.moraineLakeSunrise;
+        case 'moraine-lake-sunrise-lake-louise-golden-hour':
+            return strings.pillValues.addTimePillValues.moraineLakeSunriseLakeLouiseGoldenHour;
+        case 'two-lakes-combo':
+            return strings.pillValues.addTimePillValues.twoLakesCombo;
+        case 'moraine-lake-adventure':
+            return strings.pillValues.addTimePillValues.moraineLakeAdventure;
+        case 'lake-louise-adventure':
+            return strings.pillValues.addTimePillValues.lakeLouiseAdventure;
+        case 'emerald-lake-escape':
+            return strings.pillValues.addTimePillValues.emeraldLakeEscapeTour;
+        case 'private-tour':
+            return strings.pillValues.addTimePillValues.privateTour;
+        default:
+            return '';
+    }
+}
+
+export function createMoneyPillValue(productKey: ProductKey, strings = defaultStrings): PillValue {
+    return {
+        icon: moneyIconPath,
+        label: getMoneyLabel(productKey, strings)
+    };
+}
+
+function getMoneyLabel(productKey: ProductKey, strings: any): string {
+    switch (productKey) {
+        case 'moraine-lake-sunrise':
+            return strings.pillValues.moneyPillValues.moraineLakeSunrise;
+        case 'moraine-lake-sunrise-lake-louise-golden-hour':
+            return strings.pillValues.moneyPillValues.moraineLakeSunriseLakeLouiseGoldenHour;
+        case 'two-lakes-combo':
+            return strings.pillValues.moneyPillValues.twoLakesCombo;
+        case 'moraine-lake-adventure':
+            return strings.pillValues.moneyPillValues.moraineLakeAdventure;
+        case 'lake-louise-adventure':
+            return strings.pillValues.moneyPillValues.lakeLouiseAdventure;
+        case 'emerald-lake-escape':
+            return strings.pillValues.moneyPillValues.emeraldLakeEscapeTour;
+        case 'private-tour':
+            return strings.pillValues.moneyPillValues.privateTour;
+        case 'afternoon-delight':
+            return strings.pillValues.moneyPillValues.afternoonDelight;
+        default:
+            return '';
+    }
+}
+
+export function createemeraldLakeEscapeTourLocationsPillValues(strings = defaultStrings): PillValue[] {
+    return Object.values(strings.pillValues.emeraldLakeEscapeTourLocations).map(location => ({
+        icon: locationPinIconPath,
+        label: location as string
+    }));
+}
+export const createSunrisePillValue = (strings = defaultStrings): PillValue => {
+    return {
+        icon: sunriseIconPath,
+        label: strings.pillValues.sunrise
+    };
+}
+
+export const createTwoLakesInOnePillValue = (strings = defaultStrings): PillValue => {
+    return {
+        icon: doubleCheckIconPath,
+        label: strings.pillValues.twoLakesInOne
+    };
+}
+
+export const createPhotographyPillValue = (strings = defaultStrings): PillValue => {
+    return {
+        icon: cameraIconPath,
+        label: strings.pillValues.photography
+    };
+}
+
+export const createHikePillValue = (strings = defaultStrings): PillValue => {
+    return {
+        icon: hikerIconPath,
+        label: strings.pillValues.hike
+    };
+}
+
+export const createCanoePillValue = (strings = defaultStrings): PillValue => {
+    return {
+        icon: waterIconPath,
+        label: strings.pillValues.canoe
+    };
+}
+
+export const createLunchPillValue = (strings = defaultStrings): PillValue => {
+    return {
+        icon: lunchIconPath,
+        label: strings.pillValues.lunch
+    };
+}
+
+export const createCroissantPillValue = (strings = defaultStrings): PillValue => {
+    return {
+        icon: croissantIconPath,
+        label: strings.pillValues.croissant
+    };
+}
+
+export const createHotDrinksPillValue = (strings = defaultStrings): PillValue => {
+    return {
+        icon: coffeeIconPath,
+        label: strings.pillValues.hotDrinks
+    };
+}
+
+export const createCozyBlanketsPillValue = (strings = defaultStrings): PillValue => {
+    return {
+        icon: blanketIconPath,
+        label: strings.pillValues.blankets
+    };
+}

package/src/constants/products.ts

@@ -0,0 +1,155 @@
+import { ImageData, IMAGES } from './images';
+import { PillValue, createDeparturePillValue, createDurationPillValue, createSunrisePillValue, createTwoLakesInOnePillValue, createHikePillValue, createCanoePillValue, createMoneyPillValue, createAddTimePillValue, createHotDrinksPillValue, createLunchPillValue, createCroissantPillValue, createemeraldLakeEscapeTourLocationsPillValues, createCozyBlanketsPillValue } from './pill-values';
+import { ProductTagStyle } from '@/components/product-tag';
+
+export interface ProductTag {
+    text: string;
+    style: ProductTagStyle;
+}
+
+export interface VideoSources {
+    src: string;
+    webm: string;
+    /** Long version for BookingFlow collage. Falls back to short (src/webm) if omitted. */
+    longSrc?: string;
+    longWebm?: string;
+}
+
+export interface Product {
+    id: string;
+    name: string;
+    shortName: string;
+    images: readonly ImageData[];
+    bookingLink: string;
+    currentStartTime: string;
+    description: string;
+    path: string;
+    avgPrice: number;
+    pillValues: PillValue[];
+    tags?: ProductTag[];
+    /** Video for expanded view in booking dialog. Place mp4 and webm in public/videos/ named {productId}.mp4 and {productId}.webm */
+    videoUrl?: VideoSources;
+}
+
+// Type for accessing product keys
+export type ProductKey = keyof ReturnType<typeof getProducts>;
+
+export const getProducts = (strings: any): Record<string, Product> => ({
+  MORAINE_LAKE_SUNRISE_LAKE_LOUISE_GOLDEN_HOUR: {
+    id: 'moraine-lake-sunrise-lake-louise-golden-hour',
+    videoUrl: { src: '/videos/moraine-lake-sunrise-lake-louise-golden-hour.mp4', webm: '/videos/moraine-lake-sunrise-lake-louise-golden-hour.webm', longSrc: '/videos/moraine-lake-sunrise-lake-louise-golden-hour-long.mp4', longWebm: '/videos/moraine-lake-sunrise-lake-louise-golden-hour-long.webm' },
+    name: strings.products.productNames.moraineLakeSunriseLakeLouiseGoldenHour,
+    shortName: strings.products.productShortNames.moraineLakeSunriseLakeLouiseGoldenHourShort,
+    images: [
+      IMAGES.MORAINE_LAKE_CANOES_SUNRISE,
+    ],
+    bookingLink: '#book-now/moraine-lake-sunrise-lake-louise-golden-hour',
+    currentStartTime: strings.products.startTimes.moraineLakeSunriseLakeLouiseGoldenHour,
+    description: strings.productThemePages.sunriseTours.description,
+    path: '/moraine-lake-sunrise-shuttle',
+    avgPrice: 159,
+    pillValues: [createSunrisePillValue(strings), createDurationPillValue('moraine-lake-sunrise-lake-louise-golden-hour-1', strings), createDurationPillValue('moraine-lake-sunrise-lake-louise-golden-hour-2', strings), createAddTimePillValue('moraine-lake-sunrise-lake-louise-golden-hour', strings), createHotDrinksPillValue(strings), createCozyBlanketsPillValue(strings), createTwoLakesInOnePillValue(strings), createMoneyPillValue('moraine-lake-sunrise-lake-louise-golden-hour', strings)],
+    tags: [{
+      text: strings.products.productTags.mostPopular,
+      style: ProductTagStyle.MOST_POPULAR
+    }]
+  },
+  MORAINE_LAKE_SUNRISE: {
+    id: 'moraine-lake-sunrise',
+    videoUrl: { src: '/videos/moraine-lake-sunrise.mp4', webm: '/videos/moraine-lake-sunrise.webm', longSrc: '/videos/moraine-lake-sunrise-long.mp4', longWebm: '/videos/moraine-lake-sunrise-long.webm' },
+    name: strings.products.productNames.moraineLakeSunrise,
+    shortName: strings.products.productShortNames.moraineLakeSunriseShort,
+    images: [
+      IMAGES.MORAINE_LAKE_SUNRISE_CHEERS,
+    ],
+    bookingLink: '#book-now/moraine-lake-sunrise',
+    currentStartTime: strings.products.startTimes.moraineLakeSunrise,
+    description: strings.productThemePages.sunriseTours.description,
+    path: '/moraine-lake-sunrise-shuttle',
+    avgPrice: 129,
+    pillValues: [createSunrisePillValue(strings), createDurationPillValue('moraine-lake-sunrise', strings), createAddTimePillValue('moraine-lake-sunrise', strings), createHotDrinksPillValue(strings), createCozyBlanketsPillValue(strings), createMoneyPillValue('moraine-lake-sunrise', strings)]
+  },
+  TWO_LAKES_COMBO: {
+    id: 'two-lakes-combo',
+    videoUrl: { src: '/videos/two-lakes-combo.mp4', webm: '/videos/two-lakes-combo.webm', longSrc: '/videos/two-lakes-combo-long.mp4', longWebm: '/videos/two-lakes-combo-long.webm' },
+    name: strings.products.productNames.twoLakesCombo,
+    shortName: strings.products.productShortNames.twoLakesComboShort,
+    images: [
+      IMAGES.MORAINE_LAKE_YELLOW_BIKINI,
+    ],
+    bookingLink: '#book-now/two-lakes-combo',
+    currentStartTime: strings.products.startTimes.moraineLakeAdventure,
+    description: strings.products.productDescriptions.twoLakesCombo,
+    path: '/moraine-lake-shuttle',
+    avgPrice: 149,
+    pillValues: [createDeparturePillValue('two-lakes-combo', strings), createDurationPillValue('two-lakes-combo-1', strings), createDurationPillValue('two-lakes-combo-2', strings), createAddTimePillValue('two-lakes-combo', strings), createTwoLakesInOnePillValue(strings), createMoneyPillValue('two-lakes-combo', strings)],
+    tags: [{
+      text: strings.products.productTags.mostPopular,
+      style: ProductTagStyle.MOST_POPULAR
+    }]
+  },
+  MORAINE_LAKE_ADVENTURE: {
+    id: 'moraine-lake-adventure',
+    videoUrl: { src: '/videos/moraine-lake-adventure.mp4', webm: '/videos/moraine-lake-adventure.webm', longSrc: '/videos/moraine-lake-adventure-long.mp4', longWebm: '/videos/moraine-lake-adventure-long.webm' },
+    name: strings.products.productNames.moraineLakeAdventure,
+    shortName: strings.products.productShortNames.moraineLakeAdventureShort,
+    images: [
+      IMAGES.MORAINE_LAKE_CANOE,
+    ],
+    bookingLink: '#book-now/moraine-lake-adventure',
+    currentStartTime: strings.products.startTimes.moraineLakeAdventure,
+    description: strings.productThemePages.moraineLakeShuttle.description,
+    path: '/moraine-lake-shuttle',
+    avgPrice: 95,
+    pillValues: [createDeparturePillValue('moraine-lake-adventure', strings), createDurationPillValue('moraine-lake-adventure', strings), createAddTimePillValue('moraine-lake-adventure', strings), createHikePillValue(strings), createCanoePillValue(strings), createMoneyPillValue('moraine-lake-adventure', strings)]
+  },
+  LAKE_LOUISE_ADVENTURE: {
+    id: 'lake-louise-adventure',
+    videoUrl: { src: '/videos/lake-louise-adventure.mp4', webm: '/videos/lake-louise-adventure.webm', longSrc: '/videos/lake-louise-adventure-long.mp4', longWebm: '/videos/lake-louise-adventure-long.webm' },
+    name: strings.products.productNames.lakeLouiseAdventure,
+    shortName: strings.products.productShortNames.lakeLouiseAdventureShort,
+    images: [
+      IMAGES.LAKE_LOUISE_FLORA,
+    ],
+    bookingLink: '#book-now/lake-louise-adventure',
+    currentStartTime: strings.products.startTimes.lakeLouiseAdventure,
+    description: strings.productThemePages.lakeLouiseShuttle.description,
+    path: '/lake-louise-shuttle',
+    avgPrice: 69,
+    pillValues: [createDeparturePillValue('lake-louise-adventure', strings), createDurationPillValue('lake-louise-adventure', strings), createAddTimePillValue('lake-louise-adventure', strings), createHikePillValue(strings), createCanoePillValue(strings), createMoneyPillValue('lake-louise-adventure', strings)]
+  },
+  EMERALD_LAKE_ESCAPE: {
+    id: 'emerald-lake-escape',
+    videoUrl: { src: '/videos/emerald-lake-escape-tour.mp4', webm: '/videos/emerald-lake-escape-tour.webm', longSrc: '/videos/emerald-lake-escape-tour-long.mp4', longWebm: '/videos/emerald-lake-escape-tour-long.webm' },
+    name: strings.products.productNames.emeraldLakeEscapeTour,
+    shortName: strings.products.productShortNames.emeraldLakeEscapeTourShort,
+    images: [
+      IMAGES.EMERALD_LAKE_LODGE_VIEWPOINT,
+    ],
+    bookingLink: '#book-now/emerald-lake-escape',
+    currentStartTime: strings.products.startTimes.emeraldLakeEscape,
+    description: strings.productThemePages.emeraldLakeShuttle.description,
+    path: '/emerald-lake-shuttle',
+    avgPrice: 175,
+    pillValues: [createDeparturePillValue('emerald-lake-escape', strings), createDurationPillValue('emerald-lake-escape', strings), ...createemeraldLakeEscapeTourLocationsPillValues(strings), createLunchPillValue(strings), createMoneyPillValue('emerald-lake-escape', strings)]
+  },
+  PRIVATE_TOUR: {
+    id: 'private-tour',
+    videoUrl: { src: '/videos/private-tour.mp4', webm: '/videos/private-tour.webm', longSrc: '/videos/private-tour-long.mp4', longWebm: '/videos/private-tour-long.webm' },
+    name: strings.products.productNames.privateTour,
+    shortName: strings.products.productShortNames.privateTourShort,
+    images: [
+      IMAGES.PRIVATE_TOUR_FAMILY_MORAINE_LAKE,
+    ],
+    bookingLink: '#book-now/private-tour',
+    currentStartTime: strings.products.startTimes.privateTour,
+    description: strings.productThemePages.privateTours.description,
+    path: '/private-shuttle',
+    avgPrice: 1699,
+    pillValues: [createDeparturePillValue('private-tour', strings), createDurationPillValue('private-tour', strings), createCroissantPillValue(strings), createHotDrinksPillValue(strings), createMoneyPillValue('private-tour', strings)]
+  }
+});
+
+// Default export for backward compatibility (uses English strings)
+import defaultStrings from '@/strings';
+export const PRODUCTS = getProducts(defaultStrings);

package/src/contexts/AvailabilitiesCacheContext.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useRef,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import type { Availability, PricingConfig, PrecomputedPricesByCategory } from '@/lib/booking-api';
+
+/** Cache TTL in milliseconds (5 minutes). Entries older than this are considered stale. */
+export const AVAILABILITIES_CACHE_TTL_MS = 5 * 60 * 1000;
+
+export interface CachedAvailabilitiesData {
+  fetchedRanges: Array<{ start: Date; end: Date }>;
+  availabilities: Availability[];
+  pricingConfig: PricingConfig | null;
+  precomputedPricesByOption: Record<string, PrecomputedPricesByCategory> | null;
+  /** Private Shuttle: shared precomputed prices (category -> currency -> price). */
+  precomputedPrices?: PrecomputedPricesByCategory | null;
+  /** Private Shuttle: resource price by currency. */
+  resourcePriceByCurrency?: Record<string, number> | null;
+  /** Private Shuttle: resource price by option (optionId -> currency -> price). */
+  resourcePriceByOption?: Record<string, Record<string, number>> | null;
+  /** Timestamp when this entry was cached (for TTL / stale-while-revalidate). */
+  cachedAt: number;
+}
+
+interface AvailabilitiesCacheContextValue {
+  /** Get cached data for a product+options+promo. Returns undefined if not cached. */
+  get: (cacheKey: string) => CachedAvailabilitiesData | undefined;
+  /** Check if cached entry is stale (older than TTL). Use for stale-while-revalidate. */
+  isStale: (cached: CachedAvailabilitiesData) => boolean;
+  /** Replace or set cache entry. */
+  set: (cacheKey: string, data: CachedAvailabilitiesData) => void;
+  /** Merge new availabilities into existing cache (or create new entry). */
+  merge: (
+    cacheKey: string,
+    update: {
+      fetchedRanges?: Array<{ start: Date; end: Date }>;
+      availabilities?: Availability[];
+      pricingConfig?: PricingConfig | null;
+      precomputedPricesByOption?: Record<string, PrecomputedPricesByCategory> | null;
+      precomputedPrices?: PrecomputedPricesByCategory | null;
+      resourcePriceByCurrency?: Record<string, number> | null;
+      resourcePriceByOption?: Record<string, Record<string, number>> | null;
+    }
+  ) => void;
+}
+
+const AvailabilitiesCacheContext = createContext<AvailabilitiesCacheContextValue | null>(null);
+
+export function useAvailabilitiesCache() {
+  const ctx = useContext(AvailabilitiesCacheContext);
+  return ctx; // May be null if not wrapped
+}
+
+/** Build cache key from product + options + promo + optional partner pricing profile. */
+export function buildAvailabilitiesCacheKey(
+  productId: string,
+  optionIdsKey: string,
+  promoCode: string | null,
+  pricingProfileId?: string | null
+): string {
+  const pp = (pricingProfileId ?? '').trim();
+  return `${productId}|${optionIdsKey}|${promoCode ?? ''}|pp:${pp}`;
+}
+
+export function AvailabilitiesCacheProvider({ children }: { children: ReactNode }) {
+  const cacheRef = useRef<Map<string, CachedAvailabilitiesData>>(new Map());
+
+  const get = useCallback((cacheKey: string) => {
+    return cacheRef.current.get(cacheKey);
+  }, []);
+
+  const isStale = useCallback((cached: CachedAvailabilitiesData) => {
+    const age = Date.now() - (cached.cachedAt ?? 0);
+    return age > AVAILABILITIES_CACHE_TTL_MS;
+  }, []);
+
+  const set = useCallback((cacheKey: string, data: CachedAvailabilitiesData) => {
+    cacheRef.current.set(cacheKey, data);
+  }, []);
+
+  const merge = useCallback(
+    (
+      cacheKey: string,
+      update: {
+        fetchedRanges?: Array<{ start: Date; end: Date }>;
+        availabilities?: Availability[];
+        pricingConfig?: PricingConfig | null;
+        precomputedPricesByOption?: Record<string, PrecomputedPricesByCategory> | null;
+        precomputedPrices?: PrecomputedPricesByCategory | null;
+        resourcePriceByCurrency?: Record<string, number> | null;
+        resourcePriceByOption?: Record<string, Record<string, number>> | null;
+      }
+    ) => {
+      const existing = cacheRef.current.get(cacheKey);
+      const next: CachedAvailabilitiesData = {
+        fetchedRanges: update.fetchedRanges ?? existing?.fetchedRanges ?? [],
+        availabilities: update.availabilities ?? existing?.availabilities ?? [],
+        pricingConfig: update.pricingConfig !== undefined ? update.pricingConfig : existing?.pricingConfig ?? null,
+        precomputedPricesByOption:
+          update.precomputedPricesByOption !== undefined
+            ? update.precomputedPricesByOption
+            : existing?.precomputedPricesByOption ?? null,
+        precomputedPrices: update.precomputedPrices !== undefined ? update.precomputedPrices : existing?.precomputedPrices ?? null,
+        resourcePriceByCurrency: update.resourcePriceByCurrency !== undefined ? update.resourcePriceByCurrency : existing?.resourcePriceByCurrency ?? null,
+        resourcePriceByOption: update.resourcePriceByOption !== undefined ? update.resourcePriceByOption : existing?.resourcePriceByOption ?? null,
+        cachedAt: Date.now(),
+      };
+      cacheRef.current.set(cacheKey, next);
+    },
+    []
+  );
+
+  const value: AvailabilitiesCacheContextValue = { get, set, merge, isStale };
+
+  return (
+    <AvailabilitiesCacheContext.Provider value={value}>
+      {children}
+    </AvailabilitiesCacheContext.Provider>
+  );
+}

package/src/contexts/BookingAppContext.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { createContext, useContext, ReactNode } from 'react';
+
+/** Host app / embedding context (standalone site, provider-dashboard, etc.). */
+export type BookingAppMode = 'standalone' | 'provider-dashboard' | (string & Record<never, never>);
+
+/**
+ * Viewer role for the booking app. Drives pricing display and (in future) other feature levels.
+ * - public: customer-facing (e.g. standalone site); simplified pricing (dynamic increases rolled into base).
+ * - reseller: same as public for pricing; reserved for future reseller-specific behaviour.
+ * - admin: full detail (e.g. provider dashboard); full price breakdown, no roll-up.
+ */
+export type ViewerRole = 'public' | 'reseller' | 'admin';
+
+/** Feature flags and permissions for the booking app in this context. */
+export interface BookingAppPermissions {
+  /** When true, the price breakdown hover tooltip is shown on itinerary line items. */
+  canViewPriceBreakdown?: boolean;
+  /**
+   * Viewer role. For pricing: public and reseller use simplified view; admin uses full detail.
+   * Use this for future feature gating (e.g. reseller vs public vs admin).
+   */
+  viewerRole?: ViewerRole;
+  /**
+   * @deprecated Prefer viewerRole. When viewerRole is set it takes precedence.
+   * How much detail to show in the price breakdown tooltip.
+   */
+  priceBreakdownDetail?: 'full' | 'simplified';
+}
+
+/** Params for showing the manage-booking UI (e.g. in a dialog when embedded in provider-dashboard). */
+export interface ManageParams {
+  ref?: string;
+  reservationRef?: string;
+  lastName: string;
+}
+
+export interface BookingAppContextValue {
+  mode: BookingAppMode;
+  permissions: BookingAppPermissions;
+  /** True when pricing should show simplified view (dynamic increases rolled into base). Derived from viewerRole (public/reseller) or priceBreakdownDetail. */
+  isSimplifiedPricingView: boolean;
+  /** When set (e.g. by host), used for Google Maps instead of NEXT_PUBLIC_GOOGLE_MAPS_API_KEY. Fixes prod when embedded code doesn't get build-time env. */
+  googleMapsApiKey?: string;
+  /** When set (e.g. provider-dashboard), called instead of redirecting to /manage after free booking or when payment success should show manage UI in-host. */
+  onShowManage?: (params: ManageParams) => void;
+  /** When set, used as Stripe return_url so payment success lands on the host (e.g. dashboard) instead of /manage. */
+  getSuccessUrl?: (params: { reservationRef: string; lastName: string; focusDate?: string }) => string;
+  /** When false, the language selector is hidden. Host-controlled; default true. */
+  showLanguageSelector: boolean;
+  /** Partner portal / embedded host: skip auto-scroll after choosing a calendar date. */
+  suppressCalendarDateScroll?: boolean;
+}
+
+const BookingAppContext = createContext<BookingAppContextValue | undefined>(undefined);
+
+function deriveIsSimplifiedPricingView(permissions: BookingAppPermissions): boolean {
+  const role = permissions.viewerRole;
+  if (role === 'public' || role === 'reseller') return true;
+  if (role === 'admin') return false;
+  return permissions.priceBreakdownDetail === 'simplified';
+}
+
+const DEFAULT_STANDALONE: BookingAppContextValue = {
+  mode: 'standalone',
+  permissions: { canViewPriceBreakdown: false },
+  isSimplifiedPricingView: false,
+  showLanguageSelector: true,
+  suppressCalendarDateScroll: false,
+};
+
+export interface BookingAppProviderProps {
+  children: ReactNode;
+  /** Which app or page is hosting the booking UI. */
+  mode?: BookingAppMode;
+  /** Permissions for this context (e.g. show price breakdown only for staff). */
+  permissions?: Partial<BookingAppPermissions>;
+  /** Google Maps API key from the host (use when embedding so the key from the host build is used). */
+  googleMapsApiKey?: string;
+  /** When set (e.g. provider-dashboard), called instead of redirecting to /manage; host can show manage UI in a dialog. */
+  onShowManage?: (params: ManageParams) => void;
+  /** When set, used as Stripe return_url so payment success lands on the host. */
+  getSuccessUrl?: (params: { reservationRef: string; lastName: string; focusDate?: string }) => string;
+  /** When false, the language selector is hidden. Default true. */
+  showLanguageSelector?: boolean;
+  /** When true, calendar date selection does not auto-scroll the page/dialog. */
+  suppressCalendarDateScroll?: boolean;
+}
+
+/**
+ * Provides the current "mode" (which app is using the booking app) and permissions.
+ * Wrap the booking app at the host level: standalone page or BookingWidget when embedded.
+ */
+export function BookingAppProvider({
+  children,
+  mode = 'standalone',
+  permissions = {},
+  googleMapsApiKey,
+  onShowManage,
+  getSuccessUrl,
+  showLanguageSelector = true,
+  suppressCalendarDateScroll = false,
+}: BookingAppProviderProps) {
+  const mergedPermissions = { ...DEFAULT_STANDALONE.permissions, ...permissions };
+  const value: BookingAppContextValue = {
+    mode,
+    permissions: mergedPermissions,
+    isSimplifiedPricingView: deriveIsSimplifiedPricingView(mergedPermissions),
+    googleMapsApiKey,
+    onShowManage,
+    getSuccessUrl,
+    showLanguageSelector,
+    suppressCalendarDateScroll,
+  };
+
+  return (
+    <BookingAppContext.Provider value={value}>
+      {children}
+    </BookingAppContext.Provider>
+  );
+}
+
+/**
+ * Hook to access booking app context (mode and permissions).
+ * Use this to gate features like the price breakdown tooltip based on who is using the app.
+ */
+export function useBookingApp(): BookingAppContextValue {
+  const context = useContext(BookingAppContext);
+  if (context === undefined) {
+    return DEFAULT_STANDALONE;
+  }
+  return context;
+}