@ticketboothapp/booking 0.1.10 → 0.1.12

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;
+}

package/src/components/analytics/CookieConsentBanner.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+import { useEmbeddedInIframe } from '@/hooks/useEmbeddedInIframe';
+import { updateAnalyticsConsent } from './AnalyticsScripts';
+import { ENV, isLocalhost, isProduction, isStaging } from '@/lib/env';
+import Link from 'next/link';
+import './CookieConsentBanner.css';
+
+const CONSENT_KEY = 'cookie-consent';
+
+/** Show banner when we load GA4/Meta (production), or on localhost/staging for testing. */
+function shouldShowBanner(): boolean {
+  const hasAnalyticsIds = !!ENV.GA4_MEASUREMENT_ID || !!ENV.META_PIXEL_ID;
+  if (isProduction() && !isLocalhost() && hasAnalyticsIds) return true;
+  if (isLocalhost() || isStaging()) return true; // show for testing
+  return false;
+}
+
+export function CookieConsentBanner() {
+  const pathname = usePathname();
+  const embeddedInIframe = useEmbeddedInIframe();
+  const [mounted, setMounted] = useState(false);
+  const [showBanner, setShowBanner] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted || typeof window === 'undefined') return;
+    if (!shouldShowBanner()) return;
+    try {
+      // On localhost/staging: always show for testing. On production: only when user hasn't accepted.
+      const alwaysShowForTesting = isLocalhost() || isStaging();
+      const stored = localStorage.getItem(CONSENT_KEY);
+      setShowBanner(alwaysShowForTesting || stored !== 'granted');
+    } catch {
+      setShowBanner(true);
+    }
+  }, [mounted]);
+
+  // Signal to other UI (e.g. floating book button) that banner is visible, so they can position above it
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (showBanner && !embeddedInIframe && pathname !== '/live-pickups') {
+      document.body.dataset.cookieBannerVisible = 'true';
+    } else {
+      delete document.body.dataset.cookieBannerVisible;
+    }
+    return () => {
+      delete document.body.dataset.cookieBannerVisible;
+    };
+  }, [showBanner, embeddedInIframe, pathname]);
+
+  const handleAccept = () => {
+    updateAnalyticsConsent(true);
+    setShowBanner(false);
+  };
+
+  const handleDecline = () => {
+    try {
+      localStorage.setItem(CONSENT_KEY, 'denied');
+    } catch {
+      /* ignore */
+    }
+    setShowBanner(false);
+  };
+
+  if (embeddedInIframe || pathname === '/live-pickups' || !showBanner || !mounted) return null;
+
+  return (
+    <div
+      className="cookieConsentBanner"
+      role="dialog"
+      aria-label="Cookie consent"
+    >
+      <div className="cookieConsentBannerInner">
+        <p className="cookieConsentBannerText">
+          Accept to approve the use of cookies for analytics and advertising. See our <Link href="/privacy-policy" className="cookieConsentBannerLink">privacy policy</Link> for details.
+        </p>
+        <div className="cookieConsentBannerButtons">
+          <button
+            type="button"
+            onClick={handleDecline}
+            className="cookieConsentBannerDecline"
+          >
+            Decline
+          </button>
+          <button
+            type="button"
+            onClick={handleAccept}
+            className="cookieConsentBannerAccept"
+          >
+            Accept
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/booking/AddOnsSection.module.css

@@ -0,0 +1,10 @@
+/**
+ * Add-ons section - label styled like tickets, cancellation policy (via booking-flow.css preflight)
+ */
+
+.label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--booking-stone-700, #44403c);
+}

package/src/components/booking/AddOnsSection.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { formatCurrencyAmount } from '@/lib/currency';
+import type { AddOn } from '@/lib/booking-api';
+import { MealDrinkAddOnSelector, canUseMealDrinkSelector } from './MealDrinkAddOnSelector';
+import type { Currency } from './CurrencySwitcher';
+import styles from './AddOnsSection.module.css';
+
+export type AddOnSelection = { addOnId: string; variantId?: string; quantity?: number };
+
+interface AddOnsSectionProps {
+  addOns: AddOn[];
+  addOnSelections: AddOnSelection[];
+  currency: Currency;
+  locale: string;
+  onSelectionsChange: (selections: AddOnSelection[] | ((prev: AddOnSelection[]) => AddOnSelection[])) => void;
+  minimumTotalByAddOnId?: Map<string, number>;
+}
+
+export function AddOnsSection({
+  addOns,
+  addOnSelections,
+  currency,
+  locale,
+  onSelectionsChange,
+  minimumTotalByAddOnId,
+}: AddOnsSectionProps) {
+  return (
+    <div className="border-t border-stone-200 pt-6 space-y-4">
+      <label className={styles.label}>
+        Add-ons
+      </label>
+      {addOns.map((addOn) => {
+        const minTotalForAddOn = minimumTotalByAddOnId?.get(addOn.addOnId) ?? 0;
+        if (addOn.variantType === 'none') {
+          const isSelected = addOnSelections.some((s) => s.addOnId === addOn.addOnId);
+          const canToggleOff = minTotalForAddOn <= 0;
+          return (
+            <div key={addOn.addOnId}>
+              <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
+              {addOn.description && (
+                <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
+              )}
+              <button
+                type="button"
+                onClick={() => {
+                  onSelectionsChange((prev) => {
+                    if (isSelected) {
+                      if (!canToggleOff) return prev;
+                      return prev.filter((s) => s.addOnId !== addOn.addOnId);
+                    }
+                    return [...prev, { addOnId: addOn.addOnId, quantity: 1 }];
+                  });
+                }}
+                className={`flex items-center justify-between w-full p-4 rounded-lg border-2 text-left transition-colors ${
+                  isSelected ? 'border-emerald-500 bg-emerald-50' : 'border-stone-200 bg-white hover:border-stone-300'
+                }`}
+              >
+                <span className="font-medium text-stone-900">
+                  {isSelected ? `Yes, add ${addOn.name}` : `No ${addOn.name}`}
+                </span>
+                <span className="text-sm font-semibold text-stone-700">
+                  +{formatCurrencyAmount(addOn.price ?? 0, currency, locale as 'en' | 'fr')}
+                </span>
+              </button>
+            </div>
+          );
+        }
+        if (addOn.variantType === 'multi_quantity' && addOn.variants?.length) {
+          if (canUseMealDrinkSelector(addOn)) {
+            return (
+              <MealDrinkAddOnSelector
+                key={addOn.addOnId}
+                addOn={addOn}
+                selections={addOnSelections}
+                onSelectionsChange={onSelectionsChange}
+                currency={currency}
+                locale={locale as 'en' | 'fr'}
+                minimumTotal={minTotalForAddOn}
+              />
+            );
+          }
+          return (
+            <div key={addOn.addOnId}>
+              <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
+              {addOn.description && (
+                <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
+              )}
+              <div className="space-y-2">
+                {addOn.variants.map((variant) => {
+                  const sel = addOnSelections.find((s) => s.addOnId === addOn.addOnId && s.variantId === variant.id);
+                  const qty = sel?.quantity ?? 0;
+                  const currentTotalForAddOn = addOnSelections
+                    .filter((s) => s.addOnId === addOn.addOnId)
+                    .reduce((sum, s) => sum + Math.max(1, Number(s.quantity) || 1), 0);
+                  const canDecrement = qty > 0 && currentTotalForAddOn > minTotalForAddOn;
+                  const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
+                  return (
+                    <div key={variant.id} className="flex items-center gap-3 p-3 bg-stone-50 rounded-lg">
+                      <span className="text-sm text-stone-800">{variant.label}</span>
+                      <div className="flex items-center gap-2 shrink-0">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            onSelectionsChange((prev) => {
+                              const next = Math.max(0, qty - 1);
+                              const rest = prev.filter((s) => !(s.addOnId === addOn.addOnId && s.variantId === variant.id));
+                              if (next > 0) return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: next }];
+                              return rest;
+                            });
+                          }}
+                          disabled={!canDecrement}
+                          className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+                        >
+                          −
+                        </button>
+                        <span className="w-6 text-center font-medium tabular-nums text-sm">{qty}</span>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            onSelectionsChange((prev) => {
+                              const rest = prev.filter((s) => !(s.addOnId === addOn.addOnId && s.variantId === variant.id));
+                              return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: qty + 1 }];
+                            });
+                          }}
+                          className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 text-sm"
+                        >
+                          +
+                        </button>
+                        <span className="text-sm font-medium text-stone-700 w-16 text-right">
+                          {formatCurrencyAmount(price, currency, locale as 'en' | 'fr')} ea
+                        </span>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        }
+        if (addOn.variantType === 'single_choice' && addOn.variants?.length) {
+          const sel = addOnSelections.find((s) => s.addOnId === addOn.addOnId);
+          const hasLockedInitialSelection = minTotalForAddOn > 0;
+          return (
+            <div key={addOn.addOnId}>
+              <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
+              {addOn.description && (
+                <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
+              )}
+              <div className="space-y-2">
+                {addOn.variants.map((variant) => {
+                  const isSelected = sel?.variantId === variant.id;
+                  const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
+                  return (
+                    <button
+                      key={variant.id}
+                      type="button"
+                      onClick={() => {
+                        onSelectionsChange((prev) => {
+                          const rest = prev.filter((s) => s.addOnId !== addOn.addOnId);
+                          if (isSelected) return hasLockedInitialSelection ? prev : rest;
+                          return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: 1 }];
+                        });
+                      }}
+                      className={`flex items-center justify-between w-full p-3 rounded-lg border-2 text-left transition-colors ${
+                        isSelected ? 'border-emerald-500 bg-emerald-50' : 'border-stone-200 bg-white hover:border-stone-300'
+                      }`}
+                    >
+                      <span className="text-sm font-medium text-stone-800">{variant.label}</span>
+                      <span className="text-sm font-semibold text-stone-700">
+                        +{formatCurrencyAmount(price, currency, locale as 'en' | 'fr')}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        }
+        return null;
+      })}
+    </div>
+  );
+}

package/src/components/booking/AdminPaymentChoiceModal.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { createPortal } from 'react-dom';
+import { formatCurrencyAmount } from '@/lib/currency';
+import type { Currency } from './CurrencySwitcher';
+
+interface AdminPaymentChoiceModalProps {
+  open: boolean;
+  totalAmount: number;
+  currency: Currency;
+  loading: boolean;
+  error: string;
+  onPayNow: () => void;
+  onConfirmWithoutPayment: () => void;
+  onCancel: () => void;
+}
+
+/**
+ * Provider / staff: pay now vs confirm without payment.
+ * Uses the same overlay + card + Tailwind button pattern as {@link CheckoutModal}
+ * so `.booking-flow-preflight button { background: transparent }` does not strip primary styles.
+ */
+export function AdminPaymentChoiceModal({
+  open,
+  totalAmount,
+  currency,
+  loading,
+  error,
+  onPayNow,
+  onConfirmWithoutPayment,
+  onCancel,
+}: AdminPaymentChoiceModalProps) {
+  if (!open) return null;
+
+  const modal = (
+    <div
+      className="booking-flow-root booking-flow-preflight fixed inset-0 z-[10050] flex items-center justify-center p-4 bg-black/50"
+      style={{ zIndex: 100_000 }}
+    >
+      <div className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden flex flex-col">
+        <div className="p-6 border-b border-stone-200 flex-shrink-0">
+          <div className="flex justify-between items-start gap-3">
+            <h3 className="text-lg font-semibold text-stone-900 pr-2">
+              Complete booking
+            </h3>
+            <button
+              type="button"
+              onClick={onCancel}
+              className="text-stone-400 hover:text-stone-600 p-1 shrink-0 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/40"
+              aria-label="Close"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <p className="mt-3 text-sm text-stone-600 leading-relaxed">
+            Pay now, or confirm without payment. The customer can pay the full balance from the Manage Booking page.
+          </p>
+        </div>
+
+        <div className="p-6 flex flex-col gap-3 flex-1 min-h-0">
+          {error ? (
+            <p className="text-sm text-red-600" role="alert">
+              {error}
+            </p>
+          ) : null}
+
+          <button
+            type="button"
+            onClick={onPayNow}
+            disabled={loading}
+            className="w-full py-3 px-4 bg-emerald-600 text-white font-semibold rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Loading...' : `Pay now (${formatCurrencyAmount(totalAmount, currency)})`}
+          </button>
+          <button
+            type="button"
+            onClick={onConfirmWithoutPayment}
+            disabled={loading}
+            className="w-full py-3 px-4 border border-stone-300 text-stone-700 rounded-lg hover:bg-stone-50 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Confirm without payment
+          </button>
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={loading}
+            className="w-full py-2 text-sm text-stone-500 hover:text-stone-700 font-medium disabled:opacity-50"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+  return typeof document !== 'undefined' ? createPortal(modal, document.body) : null;
+}