@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/partner/PartnerBookingPage.tsx

@@ -0,0 +1,390 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import defaultStrings from '@/strings';
+import BookingProductGrid, { type FilterId } from '@/components/booking/BookingProductGrid';
+import { BookingFlow } from '@/components/booking/BookingFlow';
+import { PrivateShuttleBookingFlow } from '@/components/booking/PrivateShuttleBookingFlow';
+import { getProductByIdOrSlug, buildMinimalProductFromConfig } from '@/lib/products-config';
+import { getProduct, type Product } from '@/lib/booking-api';
+import { ENV } from '@/lib/env';
+import type { BookingFlowUiOptions } from '@/components/booking/booking-flow-ui';
+import type { BookingSourceMetadata } from '@/lib/booking/source-metadata';
+import dialogStyles from '@/components/booking/BookingDialog.module.css';
+import styles from './PartnerBookingPage.module.css';
+import { BOOKING_FLOW_ABANDON_EVENT } from '@/providers/booking-dialog-provider';
+
+type PartnerScreen =
+  | { type: 'product-grid'; filterId?: string }
+  | { type: 'book-flow'; productId: string };
+
+function PartnerBookFlowScreen({
+  productId,
+  onBack,
+  autoAppliedPromoCode,
+  calendarDiscountPercent,
+  highlightedPickupLocationIds,
+  flowUi,
+  onBookingFlowSuccess,
+  bookingSourceAttribution,
+  partnerPortalBooking = false,
+  availabilityPricingProfileId,
+  availabilityCancellationPolicyProfileId,
+}: {
+  productId: string;
+  onBack: () => void;
+  autoAppliedPromoCode?: string;
+  calendarDiscountPercent?: number;
+  highlightedPickupLocationIds?: string[];
+  flowUi?: BookingFlowUiOptions;
+  /** Partner portal: after deferred-invoice confirmation, refetch bookings / switch tab. */
+  onBookingFlowSuccess?: (data: { reservationReference: string; bookingReference?: string }) => void;
+  bookingSourceAttribution: Partial<BookingSourceMetadata>;
+  partnerPortalBooking?: boolean;
+  availabilityPricingProfileId?: string | null;
+  availabilityCancellationPolicyProfileId?: string | null;
+}) {
+  const [product, setProduct] = useState<Product | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const config = getProductByIdOrSlug(productId);
+  const apiProductId = config?.productId ?? productId;
+
+  const minimalProduct = config
+    ? buildMinimalProductFromConfig(config, ENV.COMPANY_ID)
+    : null;
+
+  useEffect(() => {
+    let cancelled = false;
+    setError(null);
+    getProduct(apiProductId, ENV.COMPANY_ID)
+      .then((p) => {
+        if (!cancelled && p) setProduct(p);
+        else if (!cancelled && !p && !config) setError('Product not found');
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : 'Failed to load product',
+          );
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiProductId, config]);
+
+  if (!config) {
+    if (error) {
+      return (
+        <div className={`${styles.screen} booking-flow-preflight`}>
+          <div className="flex flex-col items-center justify-center py-16 gap-4">
+            <p className="text-red-600">{error}</p>
+            <button
+              type="button"
+              onClick={onBack}
+              className="text-emerald-600 hover:underline"
+            >
+              Go back
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className={`${styles.screen} booking-flow-preflight`}>
+        <div className="flex items-center justify-center py-16">
+          <div className="text-stone-600">
+            {defaultStrings.common.chooseYourExperience} — Loading...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const displayProduct = product ?? minimalProduct!;
+
+  if (error && !product) {
+    return (
+      <div className={`${styles.screen} booking-flow-preflight`}>
+        <div className="flex flex-col items-center justify-center py-16 gap-4">
+          <p className="text-red-600">{error}</p>
+          <button
+            type="button"
+            onClick={onBack}
+            className="text-emerald-600 hover:underline"
+          >
+            Go back
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${dialogStyles.screen} booking-flow-preflight`}>
+      {displayProduct.productType === 'PRIVATE_SHUTTLE' ? (
+        <PrivateShuttleBookingFlow
+          product={displayProduct}
+          productId={productId}
+          onBack={onBack}
+          currency="CAD"
+          contentRef={contentRef}
+          highlightedPickupLocationIds={highlightedPickupLocationIds}
+          flowUi={flowUi}
+          bookingSourceAttribution={bookingSourceAttribution}
+          partnerPortalBooking={partnerPortalBooking}
+          availabilityPricingProfileId={availabilityPricingProfileId}
+          availabilityCancellationPolicyProfileId={availabilityCancellationPolicyProfileId}
+          onSuccess={(data) => {
+            onBookingFlowSuccess?.(data);
+            if (typeof window !== 'undefined') {
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+          }}
+        />
+      ) : (
+        <BookingFlow
+          product={displayProduct}
+          productId={productId}
+          onBack={onBack}
+          currency="CAD"
+          contentRef={contentRef}
+          useWindowScroll
+          autoAppliedPromoCode={autoAppliedPromoCode}
+          calendarDiscountPercent={calendarDiscountPercent}
+          highlightedPickupLocationIds={highlightedPickupLocationIds}
+          flowUi={flowUi}
+          bookingSourceAttribution={bookingSourceAttribution}
+          partnerPortalBooking={partnerPortalBooking}
+          availabilityPricingProfileId={availabilityPricingProfileId}
+          availabilityCancellationPolicyProfileId={availabilityCancellationPolicyProfileId}
+          onSuccess={(data) => {
+            onBookingFlowSuccess?.(data);
+            if (typeof window !== 'undefined') {
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+export interface PartnerBookingPageProps {
+  /** Optional initial filter for the product grid (e.g. 'moraine-lake', 'all'). */
+  initialFilterId?: FilterId;
+  /** Optional custom title for the grid view header. */
+  headerTitle?: string;
+  /** Partner logo URL (e.g. from public folder or CDN). */
+  partnerLogoUrl?: string;
+  /** Accessible alt text for the partner logo. */
+  partnerLogoAlt?: string;
+  /** Via Via logo URL (fallback could be your standard logo). */
+  viaViaLogoUrl?: string;
+  /** Accessible alt text for the Via Via logo. */
+  viaViaLogoAlt?: string;
+  /** Promo code to auto-apply on this partner page. */
+  autoAppliedPromoCode?: string;
+  /** Extra discount percent shown in calendar date badges for this partner page. */
+  calendarDiscountPercent?: number;
+  /** Pickup location IDs to prioritize and highlight as partner-preferred. */
+  highlightedPickupLocationIds?: string[];
+  /**
+   * When true, render only the booking header + content (no outer page shell or card).
+   * Use inside a parent that already provides layout (e.g. partner portal).
+   */
+  embedded?: boolean;
+  /** Hide the top title row on the product grid only (filters stay visible). */
+  hideProductGridHeader?: boolean;
+  /** Product tile opens book flow directly (requires stable `onBookProduct` / embedded routing). */
+  bookOnTileClick?: boolean;
+  flowUi?: BookingFlowUiOptions;
+  /** Embedded partner portal: called after booking completes (e.g. deferred invoice). */
+  onBookingFlowSuccess?: (data: { reservationReference: string; bookingReference?: string }) => void;
+  /** Required explicit attribution base (URL + optional merge); prefer `PartnerBookingPageWithBrowserMetadata` when deriving from the browser. */
+  bookingSourceAttribution: Partial<BookingSourceMetadata>;
+  /** Set on the dedicated partner portal app only — reserves use PARTNER_PORTAL source. */
+  partnerPortalBooking?: boolean;
+  /** Partner pricing profile for get-availabilities (when API supports it). */
+  availabilityPricingProfileId?: string | null;
+  /** Partner cancellation-policy profile for get-availabilities policy filtering. */
+  availabilityCancellationPolicyProfileId?: string | null;
+}
+
+export function PartnerBookingPage({
+  initialFilterId = 'all',
+  headerTitle,
+  partnerLogoUrl,
+  partnerLogoAlt,
+  viaViaLogoUrl = 'https://viaviamorainelake.b-cdn.net/logo512.png',
+  viaViaLogoAlt = 'Via Via Moraine Lake Shuttle logo',
+  autoAppliedPromoCode,
+  calendarDiscountPercent,
+  highlightedPickupLocationIds,
+  embedded = false,
+  hideProductGridHeader = false,
+  bookOnTileClick = false,
+  flowUi,
+  onBookingFlowSuccess,
+  bookingSourceAttribution,
+  partnerPortalBooking = false,
+  availabilityPricingProfileId,
+  availabilityCancellationPolicyProfileId,
+}: PartnerBookingPageProps) {
+  const [screen, setScreen] = useState<PartnerScreen>({ type: 'product-grid' });
+  const cardRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const handleBackToProductGrid = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new Event(BOOKING_FLOW_ABANDON_EVENT));
+    }
+    setScreen({ type: 'product-grid' });
+  }, []);
+
+  useEffect(() => {
+    if (screen.type === 'book-flow' && typeof window !== 'undefined') {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, [screen.type, screen.type === 'book-flow' ? screen.productId : null]);
+
+  const bookFlowProductDisplayName = useMemo(() => {
+    if (screen.type !== 'book-flow') return '';
+    const cfg = getProductByIdOrSlug(screen.productId);
+    const short = cfg?.display.shortName?.trim();
+    if (short) return short;
+    const slug = cfg?.display.slug?.trim();
+    if (slug) {
+      return slug
+        .split('-')
+        .filter(Boolean)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+        .join(' ');
+    }
+    return screen.productId;
+  }, [screen]);
+
+  const currentTitle =
+    screen.type === 'product-grid'
+      ? headerTitle ?? defaultStrings.common.chooseYourExperience
+      : null;
+
+  const showTopHeader =
+    screen.type === 'book-flow' || !hideProductGridHeader;
+
+  const bookSection = (
+    <>
+      {showTopHeader && (
+        <header className={styles.header}>
+          <div className={styles.headerLeft}>
+            {screen.type === 'book-flow' ? (
+              <button
+                type="button"
+                className={styles.backButton}
+                onClick={handleBackToProductGrid}
+                aria-label="Go back"
+              >
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M19 12H5M12 19l-7-7 7-7" />
+                </svg>
+              </button>
+            ) : (
+              <span className={styles.headerSpacer} aria-hidden />
+            )}
+          </div>
+          {screen.type === 'product-grid' ? (
+            <h1 className={styles.titleProductGrid}>{currentTitle}</h1>
+          ) : (
+            <h1 className={styles.titleBookFlow}>
+              <span className={styles.titleBookPrefix}>{defaultStrings.common.book}</span>
+              <span className={styles.titleBookSeparator}> - </span>
+              <span className={styles.titleBookProduct}>{bookFlowProductDisplayName}</span>
+            </h1>
+          )}
+          <div className={styles.headerRight}>
+            {/* No close button on dedicated partner page */}
+            <span className={styles.headerSpacer} aria-hidden />
+          </div>
+        </header>
+      )}
+
+      <div
+        ref={contentRef}
+        className={embedded ? styles.contentEmbedded : styles.content}
+      >
+        {screen.type === 'product-grid' && (
+          <div className={dialogStyles.screen}>
+            <BookingProductGrid
+              contentRef={contentRef}
+              initialFilterId={initialFilterId}
+              onBookProduct={(productId: string) =>
+                setScreen({ type: 'book-flow', productId })
+              }
+              bookOnTileClick={bookOnTileClick}
+            />
+          </div>
+        )}
+        {screen.type === 'book-flow' && (
+          <PartnerBookFlowScreen
+            productId={screen.productId}
+            onBack={handleBackToProductGrid}
+            autoAppliedPromoCode={autoAppliedPromoCode}
+            highlightedPickupLocationIds={highlightedPickupLocationIds}
+            calendarDiscountPercent={calendarDiscountPercent}
+            flowUi={flowUi}
+            onBookingFlowSuccess={onBookingFlowSuccess}
+            bookingSourceAttribution={bookingSourceAttribution}
+            partnerPortalBooking={partnerPortalBooking}
+            availabilityPricingProfileId={availabilityPricingProfileId}
+            availabilityCancellationPolicyProfileId={availabilityCancellationPolicyProfileId}
+          />
+        )}
+      </div>
+    </>
+  );
+
+  if (embedded) {
+    return bookSection;
+  }
+
+  return (
+    <div>
+      <main className="booking-flow-root">
+        <div className={styles.root}>
+          {partnerLogoUrl && viaViaLogoUrl && (
+            <div className={styles.logoRow}>
+              <img
+                src={partnerLogoUrl}
+                alt={partnerLogoAlt || 'Partner logo'}
+                className={styles.partnerLogo}
+              />
+              <span className={styles.logoDivider}>x</span>
+              <img
+                src={viaViaLogoUrl}
+                alt={viaViaLogoAlt}
+                className={styles.viaViaLogo}
+              />
+            </div>
+          )}
+
+          <div ref={cardRef} className={styles.card}>
+            {bookSection}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default PartnerBookingPage;
+

package/src/components/partner/PartnerBookingPageWithBrowserMetadata.tsx

@@ -1,61 +1,45 @@
 'use client';
 
-import { useMemo, type ReactNode } from 'react';
+import { useMemo } from 'react';
 import { usePathname } from 'next/navigation';
-import type { BookingFlowUiOptions } from '../booking/booking-flow-ui';
+import PartnerBookingPage, { type PartnerBookingPageProps } from '@/components/partner/PartnerBookingPage';
 import {
   buildBookingSourceMetadataFromLocation,
   mergeBookingSourceMetadata,
   type BookingSourceMetadata,
-} from '../../lib/booking/source-metadata';
+} from '@/lib/booking/source-metadata';
 
-export interface PartnerBookingPageRenderProps {
-  bookingSourceAttribution: Partial<BookingSourceMetadata>;
-  flowUi?: BookingFlowUiOptions;
-  onBookingFlowSuccess?: (data: { reservationReference: string; bookingReference?: string }) => void;
-}
-
-export interface PartnerBookingPageWithBrowserMetadataProps {
+export type PartnerBookingPageWithBrowserMetadataProps = Omit<PartnerBookingPageProps, 'bookingSourceAttribution'> & {
+  /**
+   * Route-level identity (e.g. `partnerSlug`) so attribution works on localhost and when the URL
+   * does not carry `/partner/:slug`. Merged after browser URL fields; portal/session layer wins last.
+   */
   canonicalAttribution: Partial<BookingSourceMetadata>;
+  /** Partner portal: org `par_…` + agent merged on top of URL + canonical. */
   bookingSourceAttributionMerge?: Partial<BookingSourceMetadata> | null;
-  flowUi?: BookingFlowUiOptions;
-  onBookingFlowSuccess?: (data: { reservationReference: string; bookingReference?: string }) => void;
-  render: (props: PartnerBookingPageRenderProps) => ReactNode;
-}
+};
 
 /**
- * Lightweight, package-safe partner metadata wrapper.
- * It computes attribution from browser URL + canonical route + runtime merge.
+ * Partner surfaces: **canonical** route metadata + optional browser URL supplements + optional portal merge.
  */
 export default function PartnerBookingPageWithBrowserMetadata({
   canonicalAttribution,
   bookingSourceAttributionMerge,
-  flowUi,
-  onBookingFlowSuccess,
-  render,
+  ...rest
 }: PartnerBookingPageWithBrowserMetadataProps) {
   const pathname = usePathname() ?? '';
+  const mergeKey = JSON.stringify(bookingSourceAttributionMerge ?? {});
+  const canonicalKey = JSON.stringify(canonicalAttribution ?? {});
 
   const bookingSourceAttribution = useMemo(
-    () => {
-      // Trigger recompute when route path changes; location parser reads from window.
-      void pathname;
-      return mergeBookingSourceMetadata(
+    () =>
+      mergeBookingSourceMetadata(
         buildBookingSourceMetadataFromLocation(),
         canonicalAttribution,
         bookingSourceAttributionMerge,
-      );
-    },
-    [pathname, canonicalAttribution, bookingSourceAttributionMerge],
+      ),
+    [pathname, mergeKey, canonicalKey],
   );
 
-  return (
-    <>
-      {render({
-        bookingSourceAttribution,
-        flowUi,
-        onBookingFlowSuccess,
-      })}
-    </>
-  );
+  return <PartnerBookingPage {...rest} bookingSourceAttribution={bookingSourceAttribution} />;
 }

package/src/components/product-tag.module.css

@@ -0,0 +1,30 @@
+.tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.4rem 0.8rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    z-index: 4;
+    text-align: center;
+    line-height: 1.2;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Style variants */
+.most_popular {
+    background-color: var(--accent-orange);
+    color: white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.custom {
+    /* Custom styles will be applied via inline styles */
+} 

package/src/components/product-tag.tsx

@@ -0,0 +1,34 @@
+import styles from './product-tag.module.css';
+
+export enum ProductTagStyle {
+    MOST_POPULAR = 'MOST_POPULAR',
+    CUSTOM = 'CUSTOM',
+}
+
+interface ProductTagProps {
+    text: string;
+    style: ProductTagStyle;
+    backgroundColor?: string;
+    textColor?: string;
+}
+
+export default function ProductTag({ 
+    text, 
+    style, 
+    backgroundColor, 
+    textColor
+}: ProductTagProps) {
+    const customStyles = style === ProductTagStyle.CUSTOM ? {
+        backgroundColor: backgroundColor || '#000000',
+        color: textColor || '#ffffff',
+    } : {};
+
+    return (
+        <div 
+            className={`${styles.tag} ${styles[style.toLowerCase()]}`}
+            style={customStyles}
+        >
+            {text}
+        </div>
+    );
+} 

package/src/components/product-theme-pages/best-option.module.css

@@ -0,0 +1,70 @@
+.bestOptionContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: var(--spacing-large);
+    padding-bottom: var(--spacing-large);
+    padding-left: var(--spacing-small);
+    padding-right: var(--spacing-small);
+}
+
+.otherOptionsRow {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    justify-content: center;
+}
+
+.bestOptionProductsRowWrapper {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.bestOptionProductsRow {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    width: 100%;
+}
+
+/* Tablet breakpoint - 2 tiles per row */
+@media (min-width: 768px) {
+    .bestOptionProductsRow {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Desktop breakpoint - 3 tiles per row */
+@media (min-width: 1024px) {
+    .bestOptionProductsRow {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: 1rem;
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    
+    .bestOptionProductsRow > * {
+        flex: 0 0 calc(33.333% - 0.67rem);
+        max-width: calc(33.333% - 0.67rem);
+    }
+}
+
+.bestOptionProductsRow > a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.bestOptionBottomContainer {
+    padding-top: var(--spacing-large);
+}
+
+.bestOptionBottomTitle {
+    color: var(--primary-text);
+    font-size: 1.2rem;
+}

package/src/components/product-theme-pages/best-option.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import defaultStrings from "@/strings";
+import styles from "./best-option.module.css";
+import { Product } from "@/constants/products";
+import Link from "next/link";
+import ProductTileCard from "../product-tile/product-tile-card";
+
+export default function BestOption({ bestOptionProducts, otherProductThemePages, strings = defaultStrings }: { bestOptionProducts: Product[], otherProductThemePages: { title: string, path: string }[], strings?: any }) {
+    return (
+        <div className={styles.bestOptionContainer}>
+            {bestOptionProducts.length > 0 ? (
+                <>
+                    <h2>{strings.productThemePages.bestOption.title}</h2>
+                    <div className={styles.bestOptionProductsRowWrapper}>
+                        <div className={styles.bestOptionProductsRow}>
+                            {bestOptionProducts.map((product) => (
+                                <ProductTileCard key={product.id} product={product} strings={strings} />
+                            ))}
+                        </div>
+                    </div>
+                </>
+            ) : null}
+            
+            <div className={styles.bestOptionBottomContainer}>
+                <h3 className={styles.bestOptionBottomTitle}>{strings.productThemePages.bestOption.bottomTitle}</h3>
+                <div className={styles.otherOptionsRow}>
+                    {otherProductThemePages.map((page) => (
+                        <Link href={page.path} key={page.title}>{page.title}</Link>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/product-theme-pages/extended-tour-options.module.css

@@ -0,0 +1,22 @@
+.container {
+    border: 4px dashed var(--accent-turquoise-60);
+    padding: 1rem;
+}
+
+.description {
+    text-align: center;
+}
+
+@media (max-width: 1023px) {
+    .container {
+        margin: 0 auto;
+        width: 70%;
+    }
+}
+
+@media (min-width: 1024px) {
+    .container {
+        margin: 2rem auto;
+        width: 50%;
+    }
+}

package/src/components/product-theme-pages/extended-tour-options.tsx

@@ -0,0 +1,11 @@
+import styles from "./extended-tour-options.module.css";
+import strings from "@/strings";
+
+export default function ExtendedTourOptions() {
+    return (
+        <div className={styles.container}>
+            <h4>{strings.productThemePages.extendedTourOptions.title}</h4>
+            <p dangerouslySetInnerHTML={{ __html: strings.productThemePages.extendedTourOptions.description }} className={styles.description} />
+        </div>
+    )
+}