@ticketboothapp/booking 0.1.20 → 0.1.23

package/src/components/PostBookingDependentAddOnUpsell.tsx

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

package/src/components/button.css

@@ -0,0 +1,245 @@
+.button {
+  padding: 8px 16px;
+  border-radius: 24px;
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  font-weight: 500;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  text-transform: lowercase;
+  display: inline-block;
+}
+
+.button-primary {
+  background-color: var(--accent-orange);
+  color: var(--accent-white);
+}
+
+.button-secondary {
+  background-color: var(--accent-white);
+  color: var(--accent-orange);
+}
+
+.button-disabled {
+  background-color: var(--grey-text);
+  color: var(--accent-white);
+  cursor: not-allowed;
+}
+
+.button-disabled:hover {
+  background-color: var(--grey-text);
+  color: var(--accent-white) !important;
+}
+
+.button-outline {
+  background-color: transparent;
+  color: var(--accent-white);
+  border: 2px solid var(--accent-white);
+  box-sizing: border-box;
+  padding: 6px 14px;
+}
+
+.button-large {
+  font-size: 1.2rem;
+  padding: 1rem 2rem;
+  border-radius: 40px;
+}
+
+/* Desktop hover */
+@media (min-width: 1024px) {
+  .button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    border-radius: 24px;
+    transition: all 0.3s ease-in-out;
+    z-index: -1;
+  }
+
+  .button-primary:hover::before {
+    left: 0;
+  }
+
+  .button-primary.hover-white::before {
+    background-color: var(--accent-white);
+  }
+
+  .button-primary.hover-turquoise::before {
+    background-color: var(--accent-turquoise);
+  }
+
+  .button-primary.hover-orange::before {
+    background-color: var(--accent-orange);
+  }
+
+  .button-primary.hover-orange:hover {
+    color: var(--accent-white);
+  }
+
+  .button-primary.hover-turquoise:hover {
+    color: var(--accent-white);
+  }
+
+  .button-secondary:hover::before {
+    left: 0;
+  }
+
+  .button-secondary::before {
+    background-color: var(--accent-turquoise);
+  }
+
+  .button-secondary.hover-orange::before {
+    background-color: var(--accent-orange);
+  }
+
+  .button-secondary.hover-orange:hover {
+    color: var(--accent-white) !important;
+  }
+
+  .button-secondary:hover {
+    color: var(--accent-white) !important;
+  }
+
+  .button-outline::before {
+    background-color: var(--accent-white);
+  }
+
+  .button-outline:hover::before {
+    left: 0;
+  }
+
+  .button:hover {
+    color: var(--accent-orange);
+  }
+}
+
+/* Focus state for accessibility */
+.button:focus {
+  outline: 2px solid var(--accent-orange);
+  outline-offset: 2px;
+}
+
+.button-menu {
+  background-color: var(--accent-orange);
+  border-radius: 50px;
+  padding: 8px 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.button-menu .menu-text {
+  color: white;
+  font-weight: 400;
+  text-transform: lowercase;
+  font-size: 0.8rem;
+  padding: 0.2rem;
+}
+
+.button-menu .menu-icon {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  position: relative;
+  width: 12px;
+  height: 12px;
+  transition: transform 0.3s ease;
+}
+
+.button-menu .menu-icon span {
+  display: block;
+  width: 12px;
+  height: 1.5px;
+  background-color: white;
+  border-radius: 2px;
+  position: absolute;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+/* Position the lines */
+.button-menu .menu-icon span:nth-child(1) {
+  top: 0;
+}
+
+.button-menu .menu-icon span:nth-child(2) {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.button-menu .menu-icon span:nth-child(3) {
+  bottom: 0;
+}
+
+/* X animation when open with full rotation */
+.button-menu.open .menu-icon {
+  transform: rotate(360deg);
+}
+
+.button-menu.open .menu-icon span:nth-child(1) {
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.button-menu.open .menu-icon span:nth-child(2) {
+  opacity: 0;
+}
+
+.button-menu.open .menu-icon span:nth-child(3) {
+  top: 50%;
+  transform: translateY(-50%) rotate(-45deg);
+}
+
+/* Override booking-flow-preflight so Button component styles apply inside the booking flow */
+.booking-flow-preflight button.button {
+  padding: 8px 16px;
+  border-radius: 24px;
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  font-weight: 700;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  font-family: 'Poppins', sans-serif;
+  text-transform: lowercase;
+  display: inline-block;
+}
+
+.booking-flow-preflight button.button-primary {
+  background-color: var(--accent-orange);
+  color: var(--accent-white);
+}
+
+.booking-flow-preflight button.button-secondary {
+  background-color: var(--accent-white);
+  color: var(--accent-orange);
+}
+
+.booking-flow-preflight button.button-disabled {
+  background-color: var(--grey-text);
+  color: var(--accent-white);
+  cursor: not-allowed;
+}
+
+.booking-flow-preflight button.button-outline {
+  background-color: transparent;
+  color: var(--accent-white);
+  border: 2px solid var(--accent-white);
+  box-sizing: border-box;
+  padding: 6px 14px;
+}
+
+.booking-flow-preflight button.button-large {
+  font-size: 1.2rem;
+  padding: 1rem 2rem;
+  border-radius: 40px;
+}