@ticketboothapp/booking 0.1.19 → 0.1.20

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 '@/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

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

@@ -1,29 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-'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

@@ -1,106 +0,0 @@
-'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

@@ -1,86 +0,0 @@
-/* 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;
-}