@ticketboothapp/booking 1.2.25-rc.0 → 1.2.27

package/src/components/partner/PartnerBookingPage.tsx

@@ -1,390 +0,0 @@
-'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,45 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import { usePathname } from 'next/navigation';
-import PartnerBookingPage, { type PartnerBookingPageProps } from '@/components/partner/PartnerBookingPage';
-import {
-  buildBookingSourceMetadataFromLocation,
-  mergeBookingSourceMetadata,
-  type BookingSourceMetadata,
-} from '@/lib/booking/source-metadata';
-
-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;
-};
-
-/**
- * Partner surfaces: **canonical** route metadata + optional browser URL supplements + optional portal merge.
- */
-export default function PartnerBookingPageWithBrowserMetadata({
-  canonicalAttribution,
-  bookingSourceAttributionMerge,
-  ...rest
-}: PartnerBookingPageWithBrowserMetadataProps) {
-  const pathname = usePathname() ?? '';
-  const mergeKey = JSON.stringify(bookingSourceAttributionMerge ?? {});
-  const canonicalKey = JSON.stringify(canonicalAttribution ?? {});
-
-  const bookingSourceAttribution = useMemo(
-    () =>
-      mergeBookingSourceMetadata(
-        buildBookingSourceMetadataFromLocation(),
-        canonicalAttribution,
-        bookingSourceAttributionMerge,
-      ),
-    [pathname, mergeKey, canonicalKey],
-  );
-
-  return <PartnerBookingPage {...rest} bookingSourceAttribution={bookingSourceAttribution} />;
-}

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

@@ -1,30 +0,0 @@
-.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

@@ -1,34 +0,0 @@
-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>
-    );
-}