@ticketboothapp/booking 0.1.11 → 0.1.13

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 '@/app/photo-sessions/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/accordion.css

@@ -0,0 +1,27 @@
+.via-via-accordion-base {
+    background-color: var(--light-orange-background-dark);
+    box-shadow: none;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.via-via-accordion-base button[data-slot="trigger"] {
+    cursor: pointer;
+}
+
+.via-via-accordion-content {
+    width: 100%;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.via-via-accordion-title {
+    color: var(--primary-text);
+    font-family: 'Figtree', sans-serif;
+    font-weight: 400;
+    font-size: 1.25rem;
+}
+
+.accordion-icon {
+    color: var(--accent-orange);
+}

package/src/components/accordion.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import {Accordion, AccordionItem} from "@heroui/accordion";
+import  "./accordion.css";
+import PlusIcon from "@/assets/icons/plus.svg";
+import MinusIcon from "@/assets/icons/minus.svg";
+import { faqItem } from "@/constants/faq";
+
+export default function AccordionComponent({items, className, selectionMode}: {items: faqItem[], className: string, selectionMode: "single" | "multiple"}) {
+  return (
+    <Accordion 
+      selectionMode={selectionMode} 
+      variant="splitted" 
+      className={className}
+      itemClasses={{
+        base: "via-via-accordion-base",
+        title: "via-via-accordion-title",
+        trigger: "bg-transparent hover:bg-transparent border-none outline-none",
+        content: "via-via-accordion-content",
+      }}
+    >
+      {items.map((item) => (
+        <AccordionItem key={item.question} aria-label={item.question} title={item.question} indicator={({isOpen}) => (isOpen ? <MinusIcon className="accordion-icon" /> : <PlusIcon className="accordion-icon" />)}>
+          <div dangerouslySetInnerHTML={{__html: item.answer}} />
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+}

package/src/components/analytics/AnalyticsConsentRestore.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useEffect } from 'react';
+import { updateAnalyticsConsent } from './AnalyticsScripts';
+import { hasAnalyticsConsent } from '@/lib/analytics';
+
+/**
+ * Restores analytics consent on load if user previously accepted.
+ * Must run after AnalyticsScripts have loaded gtag/fbq.
+ */
+export function AnalyticsConsentRestore() {
+  useEffect(() => {
+    if (hasAnalyticsConsent()) {
+      updateAnalyticsConsent(true);
+    }
+  }, []);
+
+  return null;
+}

package/src/components/analytics/AnalyticsScripts.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Script from 'next/script';
+import { ENV, isLocalhost, isProduction } from '@/lib/env';
+import { setAnalyticsConsentGranted } from '@/lib/analytics';
+
+const gaId = ENV.GA4_MEASUREMENT_ID;
+const pixelId = ENV.META_PIXEL_ID;
+
+/** Update GA4 and Meta consent. Call when user accepts cookies or on load if previously granted. */
+export function updateAnalyticsConsent(granted: boolean): void {
+  if (granted) {
+    setAnalyticsConsentGranted();
+    if (typeof window !== 'undefined') {
+      if (window.gtag) {
+        window.gtag('consent', 'update', {
+          ad_user_data: 'granted',
+          ad_personalization: 'granted',
+          ad_storage: 'granted',
+          analytics_storage: 'granted',
+        });
+      }
+      if (window.fbq) {
+        window.fbq('consent', 'grant');
+      }
+    }
+  }
+}
+
+export function AnalyticsScripts() {
+  // Don't load on localhost (prod build testing) or when not production env
+  const [shouldLoad, setShouldLoad] = useState(false);
+  useEffect(() => {
+    setShouldLoad(!isLocalhost() && isProduction() && (!!gaId || !!pixelId));
+  }, []);
+
+  if (!shouldLoad) return null;
+
+  return (
+    <>
+      {/* GA4 with Consent Mode v2 (default denied) */}
+      {gaId && (
+        <>
+          <Script
+            id="gtag-consent"
+            strategy="beforeInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('consent', 'default', {
+                  ad_user_data: 'denied',
+                  ad_personalization: 'denied',
+                  ad_storage: 'denied',
+                  analytics_storage: 'denied',
+                  wait_for_update: 500
+                });
+              `,
+            }}
+          />
+          <Script
+            src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
+            strategy="afterInteractive"
+          />
+          <Script
+            id="gtag-config"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('config', '${gaId}', { anonymize_ip: true });
+              `,
+            }}
+          />
+        </>
+      )}
+
+      {/* Meta Pixel with consent revoked by default */}
+      {pixelId && (
+        <Script
+          id="meta-pixel"
+          strategy="afterInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
+              !function(f,b,e,v,n,t,s)
+              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+              n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+              if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+              n.queue=[];t=b.createElement(e);t.async=!0;
+              t.src=v;s=b.getElementsByTagName(e)[0];
+              s.parentNode.insertBefore(t,s)}(window, document,'script',
+              'https://connect.facebook.net/en_US/fbevents.js');
+              fbq('consent', 'revoke');
+              fbq('init', '${pixelId}');
+              fbq('track', 'PageView');
+            `,
+          }}
+        />
+      )}
+
+    </>
+  );
+}

package/src/components/analytics/CookieConsentBanner.css

@@ -0,0 +1,86 @@
+/* Cookie consent banner – customize appearance here */
+
+.cookieConsentBanner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  background-color: rgba(28, 25, 23, 0.9);
+  color: #ffffff;
+  padding: 1rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.cookieConsentBannerInner {
+  max-width: 850px;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+@media (min-width: 1023px) {
+  .cookieConsentBannerInner {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.cookieConsentBannerText {
+  flex: 1 1 0%;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #ffffff;
+}
+
+.cookieConsentBannerLink {
+  text-decoration: underline;
+}
+
+.cookieConsentBannerLink:hover {
+  color: #34d399;
+}
+
+.cookieConsentBannerButtons {
+  display: flex;
+  gap: 0.75rem;
+  width: 100%;
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .cookieConsentBannerButtons {
+    width: auto;
+  }
+}
+
+.cookieConsentBannerDecline {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  border: 1px solid #57534e;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.cookieConsentBannerDecline:hover {
+  background-color: #292524;
+}
+
+.cookieConsentBannerAccept {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background-color: #059669;
+  color: white;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.cookieConsentBannerAccept:hover {
+  background-color: #047857;
+}