@ticketboothapp/booking 1.2.25-rc.0 → 1.2.27

package/src/components/PostBookingDependentAddOnUpsell.module.css

@@ -1,174 +0,0 @@
-/* Compact photo-session-style cards (aligned with photo-products-section.module.css) */
-
-.section {
-  background-color: var(--primary-background);
-  border-radius: 24px;
-  padding: var(--spacing-large);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.header {
-  margin-bottom: var(--spacing-medium);
-}
-
-.title {
-  font-family: 'Poppins', sans-serif;
-  font-weight: 700;
-  font-size: 1.25rem;
-  color: var(--primary-text);
-  margin: 0 0 0.5rem 0;
-  line-height: 1.3;
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: var(--grey-text);
-}
-
-.cardGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
-  gap: 0.875rem;
-}
-
-@media (min-width: 480px) {
-  .cardGrid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
-  }
-}
-
-.card {
-  height: 100%;
-  width: 100%;
-  display: block;
-  position: relative;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  text-align: inherit;
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
-  transition: box-shadow 0.35s ease, transform 0.35s ease;
-}
-
-.card:focus-visible {
-  outline: 2px solid var(--accent-turquoise, #0d9488);
-  outline-offset: 2px;
-}
-
-.card:hover {
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
-  transform: translateY(-2px);
-}
-
-.imageWrap {
-  width: 100%;
-  height: 200px;
-  position: relative;
-  border-radius: 10px;
-  overflow: hidden;
-  aspect-ratio: 16 / 9;
-}
-
-.cardImage {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  transition: transform 0.5s ease;
-  will-change: transform;
-}
-
-.cardImage::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 30%;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
-  z-index: 1;
-}
-
-@media (min-width: 1024px) {
-  .card:hover .cardImage {
-    transform: scale(1.08);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .card {
-    transition: none;
-  }
-
-  .card:hover {
-    transform: none;
-  }
-
-  .cardImage {
-    transition: none;
-  }
-
-  .card:hover .cardImage {
-    transform: none;
-  }
-}
-
-.cardTitle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 0.5rem 0.45rem;
-  color: white;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  font-family: 'Poppins', sans-serif;
-  text-transform: lowercase;
-  font-size: 0.95rem;
-  font-weight: 700;
-  z-index: 2;
-  line-height: 1.15;
-  text-align: center;
-}
-
-@media (min-width: 480px) {
-  .cardTitle {
-    font-size: 1rem;
-  }
-}
-
-.cardInfo {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-  padding: 0.45rem 0.5rem;
-}
-
-.infoLine {
-  color: var(--accent-white, #fff);
-  font-family: 'Figtree', sans-serif;
-  font-weight: 700;
-  font-size: 0.7rem;
-  line-height: 1.15;
-  margin: 0 0 0.2rem 0;
-}
-
-.infoLine:last-child {
-  margin-bottom: 0;
-}
-
-@media (min-width: 480px) {
-  .infoLine {
-    font-size: 0.75rem;
-  }
-}

package/src/components/PostBookingDependentAddOnUpsell.tsx

@@ -1,407 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { motion, useReducedMotion } from 'framer-motion';
-import {
-  PHOTO_DAP_SLUGS,
-  getPhotoDapCatalog,
-  type PhotoDapCatalog,
-  type PhotoDapSlug,
-} from '@/lib/photo-dap-config';
-import {
-  PHOTO_PACKAGE_SECTIONS,
-  type PhotoPackage,
-} from '@/lib/photo-packages';
-import { getDependentAddOnBookingUpsellEligibility } from '@/lib/dependent-add-on-api';
-import { ENV } from '@/lib/env';
-import {
-  useDependentAddOnDialog,
-  type DependentAddOnDialogOpenPayload,
-} from '@/providers/dependent-add-on-dialog-provider';
-import type { BookingData } from '@/components/BookingDetails';
-import ViaViaImage from '@/components/image';
-import styles from './PostBookingDependentAddOnUpsell.module.css';
-
-const easeOut = [0.22, 1, 0.36, 1] as const;
-
-/** Session cache TTL — balances fewer round-trips vs slot inventory freshness. */
-const DAP_UPSELL_PROBE_TTL_MS = 5 * 60 * 1000;
-const DAP_UPSELL_PROBE_STORAGE_PREFIX = 'vvia:dapUpsellProbe:v2:';
-
-type DapUpsellEntry = { slug: PhotoDapSlug; optionId?: string };
-
-function isAbortError(e: unknown): boolean {
-  if (e instanceof Error && e.name === 'AbortError') return true;
-  return (
-    typeof DOMException !== 'undefined' &&
-    e instanceof DOMException &&
-    e.name === 'AbortError'
-  );
-}
-
-function isPhotoDapSlug(s: string): s is PhotoDapSlug {
-  return (PHOTO_DAP_SLUGS as readonly string[]).includes(s);
-}
-
-function dapUpsellProbeCacheKey(
-  companyId: string,
-  ref: string,
-  ln: string,
-  bookingVersionStamp: string
-): string {
-  return `${DAP_UPSELL_PROBE_STORAGE_PREFIX}${companyId}:${encodeURIComponent(ref)}:${encodeURIComponent(ln)}:${encodeURIComponent(bookingVersionStamp)}`;
-}
-
-/** `undefined` = cache miss; `[]` = cached “no packages with slots”. */
-function readDapUpsellProbeCache(key: string): DapUpsellEntry[] | undefined {
-  if (typeof sessionStorage === 'undefined') return undefined;
-  try {
-    const raw = sessionStorage.getItem(key);
-    if (!raw) return undefined;
-    const parsed = JSON.parse(raw) as {
-      entries?: unknown;
-      slugs?: unknown;
-      savedAt?: unknown;
-    };
-    if (typeof parsed.savedAt !== 'number') {
-      sessionStorage.removeItem(key);
-      return undefined;
-    }
-    if (Date.now() - parsed.savedAt > DAP_UPSELL_PROBE_TTL_MS) {
-      sessionStorage.removeItem(key);
-      return undefined;
-    }
-    if (Array.isArray(parsed.entries)) {
-      const out: DapUpsellEntry[] = [];
-      for (const row of parsed.entries) {
-        if (!row || typeof row !== 'object') continue;
-        const o = row as Record<string, unknown>;
-        const slug = o.slug;
-        const optionId = o.optionId;
-        if (typeof slug === 'string' && isPhotoDapSlug(slug)) {
-          out.push({
-            slug,
-            ...(typeof optionId === 'string' && optionId.trim()
-              ? { optionId: optionId.trim() }
-              : {}),
-          });
-        }
-      }
-      return out;
-    }
-    if (Array.isArray(parsed.slugs)) {
-      const out: DapUpsellEntry[] = [];
-      for (const s of parsed.slugs) {
-        if (typeof s === 'string' && isPhotoDapSlug(s)) out.push({ slug: s });
-      }
-      return out;
-    }
-    sessionStorage.removeItem(key);
-    return undefined;
-  } catch {
-    return undefined;
-  }
-}
-
-function writeDapUpsellProbeCache(key: string, entries: DapUpsellEntry[]): void {
-  if (typeof sessionStorage === 'undefined') return;
-  try {
-    sessionStorage.setItem(key, JSON.stringify({ entries, savedAt: Date.now() }));
-  } catch {
-    /* quota / private mode */
-  }
-}
-
-function findPhotoPackageByDapSlug(slug: PhotoDapSlug): PhotoPackage | undefined {
-  for (const section of PHOTO_PACKAGE_SECTIONS) {
-    const p = section.photoPackages.find((pkg) => pkg.dapSlug === slug);
-    if (p) return p;
-  }
-  return undefined;
-}
-
-function buildOpenPayload(
-  slug: PhotoDapSlug,
-  photoPackage: PhotoPackage,
-  catalog: PhotoDapCatalog,
-  initialPrimaryBookingReference: string,
-  initialPrimaryBookingLastName?: string,
-  /** Option TicketBooth used when probing slots — pre-select only; must not set fixed option if user can pick lengths. */
-  upsellProbedOptionId?: string
-): DependentAddOnDialogOpenPayload {
-  const fixedFromCatalog = catalog.dependentAddOnProductOptionId?.trim();
-  const probed = upsellProbedOptionId?.trim();
-  const multiSessionLengths = (catalog.productOptions?.length ?? 0) > 1;
-  const probedMatchesOption =
-    Boolean(probed) &&
-    catalog.productOptions?.some((o) => o.dependentAddOnProductOptionId === probed);
-  /** Upsell must not set `dependentAddOnProductOptionId` when multiple lengths exist — that hides the session picker. */
-  const initialSelectedFromUpsell =
-    !fixedFromCatalog && multiSessionLengths && probedMatchesOption ? probed : undefined;
-
-  return {
-    productDisplayTitle: photoPackage.name,
-    dependentAddOnProductId: catalog.dependentAddOnProductId,
-    cancellationDaysBeforeSession: catalog.cancellationDaysBeforeSession,
-    collageImageIds:
-      catalog.collageImageIds?.length > 0
-        ? catalog.collageImageIds
-        : photoPackage.images.map((img) => img.id),
-    dapDescriptionSlug: slug,
-    initialPrimaryBookingReference,
-    initialPrimaryBookingLastName,
-    ...(fixedFromCatalog ? { dependentAddOnProductOptionId: fixedFromCatalog } : {}),
-    ...(initialSelectedFromUpsell
-      ? { initialSelectedProductOptionId: initialSelectedFromUpsell }
-      : {}),
-    ...(catalog.productOptions?.length
-      ? {
-          productOptions: catalog.productOptions.map((o) => ({
-            dependentAddOnProductOptionId: o.dependentAddOnProductOptionId,
-            label: o.label,
-            photosLabel: o.photosLabel,
-            startingAtLabel: o.startingAtLabel,
-          })),
-        }
-      : {}),
-  };
-}
-
-/** Map aggregate API rows to photo slugs in `PHOTO_DAP_SLUGS` order (env-resolved product ids). */
-function upsellEntriesFromProductsWithSlots(
-  productsWithSlots: { dependentAddOnProductId: string; dependentAddOnProductOptionId?: string }[]
-): DapUpsellEntry[] {
-  const byProductId = new Map(
-    productsWithSlots.map((p) => [p.dependentAddOnProductId, p] as const)
-  );
-  const ordered: DapUpsellEntry[] = [];
-  for (const slug of PHOTO_DAP_SLUGS) {
-    const catalog = getPhotoDapCatalog(slug);
-    if (!catalog) continue;
-    const row = byProductId.get(catalog.dependentAddOnProductId);
-    if (!row) continue;
-    const opt = row.dependentAddOnProductOptionId?.trim();
-    ordered.push({
-      slug,
-      ...(opt ? { optionId: opt } : {}),
-    });
-  }
-  return ordered;
-}
-
-export function PostBookingDependentAddOnUpsell({
-  booking,
-  enabled,
-}: {
-  booking: BookingData;
-  enabled: boolean;
-}) {
-  const { open: openDapDialog } = useDependentAddOnDialog();
-  const reduceMotion = useReducedMotion();
-  const [checking, setChecking] = useState(true);
-  const [availableEntries, setAvailableEntries] = useState<DapUpsellEntry[]>([]);
-
-  const primaryRefForApi = useMemo(
-    () => booking.bookingReference.trim(),
-    [booking.bookingReference]
-  );
-  const primaryLastNameForApi = useMemo(
-    () => booking.customer?.lastName?.trim() || '',
-    [booking.customer?.lastName]
-  );
-
-  /** Re-run probe when booking payload changes in ways that can affect slot eligibility. */
-  const bookingProbeStamp = useMemo(
-    () =>
-      [
-        booking.bookingReference.trim(),
-        booking.customer?.lastName?.trim() ?? '',
-        String(booking.dependentAddOnBookings?.length ?? 0),
-        booking.updatedAt ?? '',
-        booking.dateTime ?? '',
-      ].join('|'),
-    [
-      booking.bookingReference,
-      booking.customer?.lastName,
-      booking.dependentAddOnBookings?.length,
-      booking.updatedAt,
-      booking.dateTime,
-    ]
-  );
-
-  const skip =
-    !enabled ||
-    /** Partner portal / embed: never probe slots (no upsell UI); avoids unnecessary API calls. */
-    (typeof window !== 'undefined' && window.parent !== window.self) ||
-    (booking.gygBookingReference ?? '').trim().length > 0 ||
-    ['CANCELLED', 'CANCELED'].includes((booking.status ?? '').toUpperCase()) ||
-    (booking.dependentAddOnBookings?.length ?? 0) > 0;
-
-  useEffect(() => {
-    if (skip) {
-      setChecking(false);
-      setAvailableEntries([]);
-      return;
-    }
-
-    const ac = new AbortController();
-    const { signal } = ac;
-    let cancelled = false;
-
-    const cacheKey = dapUpsellProbeCacheKey(
-      ENV.COMPANY_ID,
-      primaryRefForApi,
-      primaryLastNameForApi,
-      bookingProbeStamp
-    );
-
-    const run = async () => {
-      const cached = readDapUpsellProbeCache(cacheKey);
-      if (cached !== undefined) {
-        if (!cancelled && !signal.aborted) {
-          setAvailableEntries(cached);
-          setChecking(false);
-        }
-        return;
-      }
-
-      if (!cancelled && !signal.aborted) {
-        setChecking(true);
-        setAvailableEntries([]);
-      }
-
-      try {
-        if (!primaryLastNameForApi) {
-          if (!cancelled && !signal.aborted) {
-            writeDapUpsellProbeCache(cacheKey, []);
-            setAvailableEntries([]);
-          }
-        } else {
-          const { productsWithSlots } = await getDependentAddOnBookingUpsellEligibility({
-            companyId: ENV.COMPANY_ID,
-            primaryBookingReference: primaryRefForApi,
-            lastName: primaryLastNameForApi,
-            signal,
-          });
-          if (cancelled || signal.aborted) return;
-          const ordered = upsellEntriesFromProductsWithSlots(productsWithSlots);
-          writeDapUpsellProbeCache(cacheKey, ordered);
-          setAvailableEntries(ordered);
-        }
-      } catch (e) {
-        if (isAbortError(e) || cancelled || signal.aborted) return;
-        setAvailableEntries([]);
-      } finally {
-        if (!cancelled && !signal.aborted) {
-          setChecking(false);
-        }
-      }
-    };
-
-    void run();
-
-    return () => {
-      cancelled = true;
-      ac.abort();
-    };
-  }, [skip, bookingProbeStamp, primaryRefForApi, primaryLastNameForApi]);
-
-  const handleOpen = useCallback(
-    (slug: PhotoDapSlug, upsellProbedOptionId?: string) => {
-      const catalog = getPhotoDapCatalog(slug);
-      const photoPackage = findPhotoPackageByDapSlug(slug);
-      if (!catalog || !photoPackage) return;
-      openDapDialog(
-        buildOpenPayload(
-          slug,
-          photoPackage,
-          catalog,
-          primaryRefForApi,
-          primaryLastNameForApi || undefined,
-          upsellProbedOptionId
-        )
-      );
-    },
-    [primaryRefForApi, primaryLastNameForApi, openDapDialog]
-  );
-
-  if (skip || checking || availableEntries.length === 0) return null;
-
-  const instant = reduceMotion
-    ? { duration: 0.01 }
-    : { duration: 0.48, ease: easeOut };
-  const headerMotion = reduceMotion
-    ? { duration: 0.01 }
-    : { duration: 0.4, delay: 0.06, ease: easeOut };
-  const cardMotion = (index: number) =>
-    reduceMotion
-      ? { duration: 0.01 }
-      : { duration: 0.44, delay: 0.12 + index * 0.09, ease: easeOut };
-
-  const shellEnter = reduceMotion ? { opacity: 0, y: 0 } : { opacity: 0, y: 20 };
-
-  const content = (
-    <>
-      <motion.div
-        className={styles.header}
-        initial={reduceMotion ? false : { opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={headerMotion}
-      >
-        <h2 id="post-booking-dap-upsell-title" className={styles.title}>
-          Interested in adding a professional photography session to your tour?
-        </h2>
-        <p className={styles.subtitle}>
-          Photo sessions are available as an add-on for your shuttle date. Tap a package to pick a time and
-          add to your booking.
-        </p>
-      </motion.div>
-
-      <div className={styles.cardGrid}>
-        {availableEntries.map(({ slug, optionId }, index) => {
-          const pkg = findPhotoPackageByDapSlug(slug);
-          if (!pkg) return null;
-          const hero = pkg.images[0];
-          return (
-            <motion.button
-              key={slug}
-              type="button"
-              className={styles.card}
-              onClick={() => handleOpen(slug, optionId)}
-              initial={reduceMotion ? false : { opacity: 0, y: 22, scale: 0.96 }}
-              animate={{ opacity: 1, y: 0, scale: 1 }}
-              transition={cardMotion(index)}
-            >
-              <div className={styles.imageWrap}>
-                <ViaViaImage
-                  className={styles.cardImage}
-                  imageId={hero.id}
-                  alt={hero.alt}
-                  context="GALLERY"
-                />
-                <h3 className={styles.cardTitle}>{pkg.name}</h3>
-                <div className={styles.cardInfo}>
-                  <p className={styles.infoLine}>{pkg.startingPrice}</p>
-                  <p className={styles.infoLine}>{pkg.duration}</p>
-                  <p className={styles.infoLine}>{pkg.quantity}</p>
-                </div>
-              </div>
-            </motion.button>
-          );
-        })}
-      </div>
-    </>
-  );
-
-  return (
-    <motion.div
-      className={styles.section}
-      aria-labelledby="post-booking-dap-upsell-title"
-      initial={reduceMotion ? false : shellEnter}
-      animate={{ opacity: 1, y: 0 }}
-      transition={instant}
-    >
-      {content}
-    </motion.div>
-  );
-}