@ticketboothapp/booking 0.1.19 → 0.1.22

package/src/components/PickupLocationMap.tsx

@@ -1,110 +0,0 @@
-'use client';
-
-import React, { useCallback } from 'react';
-import { useJsApiLoader, GoogleMap, Marker, InfoWindow } from '@react-google-maps/api';
-import { calculateMapCenter, getMapOptions, calculateMapBounds } from '@/lib/pickup/map-utils';
-import { createPinMarkerIcon } from '@/lib/pickup/marker-icons';
-import { ENV } from '@/lib/env';
-import type { PickupLocation } from '@/lib/booking-api';
-import styles from './PickupLocationDialog.module.css';
-
-const libraries: ('places')[] = ['places'];
-const MARKER_COLOR = '#dc2626';
-const MARKER_HOVER = '#1e3a8a';
-
-interface PickupLocationMapProps {
-  pickupLocations: PickupLocation[];
-  selectedLocationId: string | null;
-  onSelectLocation: (id: string) => void;
-  onMarkerClick?: (id: string) => void;
-  saving: boolean;
-}
-
-export default function PickupLocationMap({
-  pickupLocations,
-  selectedLocationId,
-  onSelectLocation,
-  onMarkerClick,
-  saving,
-}: PickupLocationMapProps) {
-  const [hoveredMarker, setHoveredMarker] = React.useState<string | null>(null);
-  const [selectedMarker, setSelectedMarker] = React.useState<string | null>(null);
-
-  const { isLoaded, loadError } = useJsApiLoader({
-    id: 'google-map-pickup',
-    googleMapsApiKey: ENV.GOOGLE_MAPS_API_KEY,
-    libraries,
-  });
-
-  const locationsWithCoords = pickupLocations.filter((l) => l.coordinates);
-  const mapCenter = calculateMapCenter(locationsWithCoords);
-  const mapOptions = getMapOptions();
-  const mapBounds = calculateMapBounds(locationsWithCoords);
-
-  const onMapLoad = useCallback(
-    (map: google.maps.Map) => {
-      if (mapBounds) {
-        map.fitBounds(mapBounds, { top: 50, right: 50, bottom: 50, left: 50 });
-      }
-    },
-    [mapBounds]
-  );
-
-  if (!isLoaded || loadError || locationsWithCoords.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className={styles.mapContainer}>
-      <GoogleMap
-        mapContainerClassName={styles.map}
-        center={mapCenter}
-        zoom={10}
-        options={mapOptions}
-        onLoad={onMapLoad}
-      >
-        {locationsWithCoords.map((loc) => {
-          if (!loc.coordinates) return null;
-          const isHovered = hoveredMarker === loc.id;
-          const isSelected = selectedLocationId === loc.id;
-          return (
-            <Marker
-              key={loc.id}
-              position={loc.coordinates}
-              title={loc.name}
-              zIndex={isHovered || isSelected ? 200 : 100}
-              icon={{
-                url: createPinMarkerIcon(isHovered || isSelected ? MARKER_HOVER : MARKER_COLOR),
-                scaledSize: new google.maps.Size(32, 40),
-                anchor: new google.maps.Point(16, 40),
-              }}
-              onMouseOver={() => setHoveredMarker(loc.id)}
-              onMouseOut={() => setHoveredMarker(null)}
-              onClick={() => {
-                setSelectedMarker(loc.id);
-                onMarkerClick?.(loc.id);
-              }}
-            >
-              {selectedMarker === loc.id && (
-                <InfoWindow onCloseClick={() => setSelectedMarker(null)}>
-                  <div className={styles.infoWindow}>
-                    <h3 className={styles.infoTitle}>{loc.name}</h3>
-                    <p className={styles.infoAddress}>{loc.address}</p>
-                    <button
-                      type="button"
-                      onClick={() => onSelectLocation(loc.id)}
-                      className={styles.selectBtn}
-                      disabled={saving}
-                    >
-                      {saving ? 'Saving…' : 'Select this location'}
-                    </button>
-                  </div>
-                </InfoWindow>
-              )}
-            </Marker>
-          );
-        })}
-      </GoogleMap>
-    </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;
-}

package/src/components/analytics/CookieConsentBanner.tsx

@@ -1,102 +0,0 @@
-'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/bottom-sheet.module.css

@@ -1,78 +0,0 @@
-.container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--accent-orange-70);
-  pointer-events: auto;
-  backdrop-filter: blur(4px);
-}
-
-.overlayVisible {
-  opacity: 1;
-}
-
-.sheet {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 24px 24px 0 0;
-  pointer-events: auto;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-}
-
-.sheetOpen {
-  transform: translateY(0);
-}
-
-.header {
-  position: sticky;
-  top: 0;
-  background: transparent;
-  backdrop-filter: blur(8px);
-  display: flex;
-  justify-content: center;
-  z-index: 1;
-  padding: 1rem 0;
-}
-
-.closeButton {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: none;
-  background: var(--accent-orange);
-  color: white;
-  font-size: 24px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.content {
-  flex: 1;
-  padding: 1rem 1rem 0 1rem;
-  background: var(--light-orange-background);
-  border-radius: 24px 24px 0 0;
-  overflow-y: auto;
-} 

package/src/components/bottom-sheet.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import styles from './bottom-sheet.module.css';
-import { motion, animate } from "motion/react";
-
-interface BottomSheetProps {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-}
-
-export default function BottomSheet({ isOpen, onClose, children }: BottomSheetProps) {
-  const [isAnimating, setIsAnimating] = useState(isOpen);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    setIsAnimating(true);
-    document.body.style.overflow = 'hidden';
-    animate(".bottom-sheet", { y: ["100%", "0%"] }, { duration: 0.5 });
-    animate(".overlay", { opacity: [0, 1] }, { duration: 0.3 });
-
-    return () => {
-      document.body.style.overflow = 'unset';
-    };
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (!isOpen && isAnimating) {
-      animate(".bottom-sheet", { y: ["0%", "100%"] }, { duration: 0.5 });
-      animate(".overlay", { opacity: [1, 0] }, { duration: 0.3 });
-      const timer = setTimeout(() => setIsAnimating(false), 500);
-      return () => clearTimeout(timer);
-    }
-  }, [isOpen, isAnimating]);
-
-  if (!isOpen && !isAnimating) return null;
-
-  return (
-    <div className={styles.container}>
-      <motion.div 
-        className={`${styles.overlay} overlay`}
-        onClick={onClose}
-      />
-      <motion.div 
-        className={`${styles.sheet} bottom-sheet`}
-      >
-        <div className={styles.header}>
-          <button className={styles.closeButton} onClick={onClose}>
-            <span>×</span>
-          </button>
-        </div>
-        <div className={styles.content}>
-          {children}
-        </div>
-      </motion.div>
-    </div>
-  );
-} 

package/src/components/breadcrumb.module.css

@@ -1,40 +0,0 @@
-.breadcrumb {
-    padding: 1rem 0;
-    margin: 0 auto;
-    max-width: var(--max-content-width);
-}
-
-.breadcrumb ol {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-}
-
-.breadcrumb li {
-    display: flex;
-    align-items: center;
-    color: var(--primary-text);
-}
-
-.breadcrumb li:not(:last-child)::after {
-    content: '/';
-    margin: 0 0.25rem;
-    color: var(--secondary-text);
-}
-
-.breadcrumb a {
-    color: var(--primary-text);
-    text-decoration: none;
-    transition: color 0.2s ease;
-}
-
-.breadcrumb a:hover {
-    color: var(--accent-turquoise);
-}
-
-.breadcrumb span {
-    color: var(--grey-text);
-} 

package/src/components/breadcrumb.tsx

@@ -1,36 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import styles from './breadcrumb.module.css';
-
-export default function Breadcrumb() {
-    const pathname = usePathname();
-    const paths = pathname.split('/').filter(Boolean);
-    
-    return (
-        <nav className={styles.breadcrumb} aria-label="Breadcrumb">
-            <ol>
-                <li>
-                    <Link href="/">Home</Link>
-                </li>
-                {paths.map((path, index) => {
-                    const href = `/${paths.slice(0, index + 1).join('/')}`;
-                    const isLast = index === paths.length - 1;
-                    
-                    return (
-                        <li key={href}>
-                            {isLast ? (
-                                <span>{path.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</span>
-                            ) : (
-                                <Link href={href}>
-                                    {path.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
-                                </Link>
-                            )}
-                        </li>
-                    );
-                })}
-            </ol>
-        </nav>
-    );
-}