Add guest analytics consent nudge

resources/js/guest/components/GuestAnalyticsNudge.tsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { useConsent } from '@/contexts/consent';
+import { useTranslation } from '../i18n/useTranslation';
+import { isUploadPath, shouldShowAnalyticsNudge } from '../lib/analyticsConsent';
+
+const PROMPT_STORAGE_KEY = 'fotospiel.guest.analyticsPrompt';
+const SNOOZE_MS = 60 * 60 * 1000;
+const ACTIVE_IDLE_LIMIT_MS = 20_000;
+
+type PromptStorage = {
+  snoozedUntil?: number | null;
+};
+
+function readSnoozedUntil(): number | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  try {
+    const raw = window.localStorage.getItem(PROMPT_STORAGE_KEY);
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw) as PromptStorage;
+    return typeof parsed.snoozedUntil === 'number' ? parsed.snoozedUntil : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeSnoozedUntil(value: number | null) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  try {
+    const payload: PromptStorage = { snoozedUntil: value };
+    window.localStorage.setItem(PROMPT_STORAGE_KEY, JSON.stringify(payload));
+  } catch {
+    // ignore storage failures
+  }
+}
+
+function randomInt(min: number, max: number): number {
+  const low = Math.ceil(min);
+  const high = Math.floor(max);
+  return Math.floor(Math.random() * (high - low + 1)) + low;
+}
+
+export default function GuestAnalyticsNudge({
+  enabled,
+  pathname,
+}: {
+  enabled: boolean;
+  pathname: string;
+}) {
+  const { t } = useTranslation();
+  const { decisionMade, preferences, savePreferences } = useConsent();
+  const analyticsConsent = Boolean(preferences?.analytics);
+  const [thresholdSeconds] = React.useState(() => randomInt(60, 120));
+  const [thresholdRoutes] = React.useState(() => randomInt(2, 3));
+  const [activeSeconds, setActiveSeconds] = React.useState(0);
+  const [routeCount, setRouteCount] = React.useState(0);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [snoozedUntil, setSnoozedUntil] = React.useState<number | null>(() => readSnoozedUntil());
+  const lastPathRef = React.useRef(pathname);
+  const lastActivityAtRef = React.useRef(Date.now());
+  const visibleRef = React.useRef(typeof document === 'undefined' ? true : document.visibilityState === 'visible');
+
+  const isUpload = isUploadPath(pathname);
+
+  React.useEffect(() => {
+    const previousPath = lastPathRef.current;
+    const currentPath = pathname;
+    lastPathRef.current = currentPath;
+
+    if (previousPath === currentPath) {
+      return;
+    }
+
+    if (isUploadPath(previousPath) || isUploadPath(currentPath)) {
+      return;
+    }
+
+    setRouteCount((count) => count + 1);
+  }, [pathname]);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    const handleActivity = () => {
+      lastActivityAtRef.current = Date.now();
+    };
+
+    const events: Array<keyof WindowEventMap> = [
+      'pointerdown',
+      'pointermove',
+      'keydown',
+      'scroll',
+      'touchstart',
+    ];
+
+    events.forEach((event) => window.addEventListener(event, handleActivity, { passive: true }));
+
+    return () => {
+      events.forEach((event) => window.removeEventListener(event, handleActivity));
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof document === 'undefined') {
+      return undefined;
+    }
+
+    const handleVisibility = () => {
+      visibleRef.current = document.visibilityState === 'visible';
+    };
+
+    document.addEventListener('visibilitychange', handleVisibility);
+
+    return () => document.removeEventListener('visibilitychange', handleVisibility);
+  }, []);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    const interval = window.setInterval(() => {
+      const now = Date.now();
+
+      if (!visibleRef.current) {
+        return;
+      }
+
+      if (isUploadPath(lastPathRef.current)) {
+        return;
+      }
+
+      if (now - lastActivityAtRef.current > ACTIVE_IDLE_LIMIT_MS) {
+        return;
+      }
+
+      setActiveSeconds((seconds) => seconds + 1);
+    }, 1000);
+
+    return () => window.clearInterval(interval);
+  }, []);
+
+  React.useEffect(() => {
+    if (!enabled || analyticsConsent || decisionMade) {
+      setIsOpen(false);
+      return;
+    }
+
+    const shouldOpen = shouldShowAnalyticsNudge({
+      decisionMade,
+      analyticsConsent,
+      snoozedUntil,
+      now: Date.now(),
+      activeSeconds,
+      routeCount,
+      thresholdSeconds,
+      thresholdRoutes,
+      isUpload,
+    });
+
+    if (shouldOpen) {
+      setIsOpen(true);
+    }
+  }, [
+    enabled,
+    analyticsConsent,
+    decisionMade,
+    snoozedUntil,
+    activeSeconds,
+    routeCount,
+    thresholdSeconds,
+    thresholdRoutes,
+    isUpload,
+  ]);
+
+  React.useEffect(() => {
+    if (isUpload) {
+      setIsOpen(false);
+    }
+  }, [isUpload]);
+
+  if (!enabled || decisionMade || analyticsConsent || !isOpen || isUpload) {
+    return null;
+  }
+
+  const handleSnooze = () => {
+    const until = Date.now() + SNOOZE_MS;
+    setSnoozedUntil(until);
+    writeSnoozedUntil(until);
+    setIsOpen(false);
+  };
+
+  const handleAllow = () => {
+    savePreferences({ analytics: true });
+    writeSnoozedUntil(null);
+    setIsOpen(false);
+  };
+
+  return (
+    <div
+      className="pointer-events-none fixed inset-x-0 z-40 px-4"
+      style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)' }}
+    >
+      <div className="pointer-events-auto mx-auto max-w-lg rounded-2xl border border-slate-200/80 bg-white/95 p-4 shadow-xl backdrop-blur dark:border-slate-700/60 dark:bg-slate-900/95">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="space-y-1">
+            <p className="text-sm font-semibold text-foreground">
+              {t('consent.analytics.title')}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {t('consent.analytics.body')}
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Button type="button" size="sm" variant="ghost" onClick={handleSnooze}>
+              {t('consent.analytics.later')}
+            </Button>
+            <Button type="button" size="sm" onClick={handleAllow}>
+              {t('consent.analytics.allow')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

resources/js/guest/components/settings-sheet.tsx

@@ -24,6 +24,7 @@ import type { LocaleCode } from '../i18n/messages';
 import { useHapticsPreference } from '../hooks/useHapticsPreference';
 import { triggerHaptic } from '../lib/haptics';
 import { getHelpSlugForPathname } from '../lib/helpRouting';
+import { useConsent } from '@/contexts/consent';
 
 const legalPages = [
   { slug: 'impressum', translationKey: 'settings.legal.section.impressum' },
@@ -270,6 +271,8 @@ function HomeView({
 }: HomeViewProps) {
   const { t } = useTranslation();
   const { enabled: hapticsEnabled, setEnabled: setHapticsEnabled, supported: hapticsSupported } = useHapticsPreference();
+  const { preferences, savePreferences } = useConsent();
+  const matomoEnabled = typeof window !== 'undefined' && Boolean((window as any).__MATOMO_GUEST__?.enabled);
   const legalLinks = React.useMemo(
     () =>
       legalPages.map((page) => ({
@@ -389,6 +392,26 @@ function HomeView({
         </CardContent>
       </Card>
 
+      {matomoEnabled ? (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle>{t('settings.analytics.title')}</CardTitle>
+            <CardDescription>{t('settings.analytics.description')}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-sm font-medium">{t('settings.analytics.label')}</span>
+              <Switch
+                checked={Boolean(preferences?.analytics)}
+                onCheckedChange={(checked) => savePreferences({ analytics: checked })}
+                aria-label={t('settings.analytics.label')}
+              />
+            </div>
+            <div className="text-xs text-muted-foreground">{t('settings.analytics.note')}</div>
+          </CardContent>
+        </Card>
+      ) : null}
+
       <Card>
         <CardHeader className="pb-3">
           <CardTitle>