@ticketboothapp/booking 0.1.11 → 0.1.13

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