feat(packages): implement package-based business model

2025-09-26 22:13:56 +02:00
parent 6fc36ebaf4
commit 0a643c3e4d
54 changed files with 3301 additions and 282 deletions
--- a/resources/js/guest/pages/GalleryPage.tsx
+++ b/resources/js/guest/pages/GalleryPage.tsx
@@ -2,13 +2,14 @@ import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { Page } from './_util';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
-import { Card, CardContent } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
-import { Heart } from 'lucide-react';
+import { Heart, Users, Image as ImageIcon, Camera, Package as PackageIcon } from 'lucide-react';
 import { likePhoto } from '../services/photosApi';
 import PhotoLightbox from './PhotoLightbox';
+import { fetchEvent, getEventPackage, fetchStats, type EventData, type EventPackage, type EventStats } from '../services/eventApi';

 export default function GalleryPage() {
  const { slug } = useParams();
@@ -17,6 +18,11 @@ export default function GalleryPage() {
  const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
  const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);

+  const [event, setEvent] = useState<EventData | null>(null);
+  const [eventPackage, setEventPackage] = useState<EventPackage | null>(null);
+  const [stats, setStats] = useState<EventStats | null>(null);
+  const [eventLoading, setEventLoading] = useState(true);
+
  const [searchParams] = useSearchParams();
  const photoIdParam = searchParams.get('photoId');
  // Auto-open lightbox if photoId in query params
@@ -30,6 +36,31 @@ export default function GalleryPage() {
    }
  }, [photos, photoIdParam, currentPhotoIndex, hasOpenedPhoto]);

+  // Load event and package info
+  useEffect(() => {
+    if (!slug) return;
+
+    const loadEventData = async () => {
+      try {
+        setEventLoading(true);
+        const [eventData, packageData, statsData] = await Promise.all([
+          fetchEvent(slug),
+          getEventPackage(slug),
+          fetchStats(slug),
+        ]);
+        setEvent(eventData);
+        setEventPackage(packageData);
+        setStats(statsData);
+      } catch (err) {
+        console.error('Failed to load event data', err);
+      } finally {
+        setEventLoading(false);
+      }
+    };
+
+    loadEventData();
+  }, [slug]);
+
  const myPhotoIds = React.useMemo(() => {
    try {
      const raw = localStorage.getItem('my-photo-ids');
@@ -68,19 +99,68 @@ export default function GalleryPage() {
    }
  }

+  if (eventLoading) {
+    return <Page title="Galerie"><p>Lade Event-Info...</p></Page>;
+  }
+
  return (
    <Page title="Galerie">
+      <Card className="mx-4 mb-4">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <ImageIcon className="h-6 w-6" />
+            Galerie: {event?.name || 'Event'}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div className="text-center">
+            <Users className="h-8 w-8 mx-auto mb-2 text-blue-500" />
+            <p className="font-semibold">Online Gäste</p>
+            <p className="text-2xl">{stats?.onlineGuests || 0}</p>
+          </div>
+          <div className="text-center">
+            <Heart className="h-8 w-8 mx-auto mb-2 text-red-500" />
+            <p className="font-semibold">Gesamt Likes</p>
+            <p className="text-2xl">{photos.reduce((sum, p) => sum + ((p as any).likes_count || 0), 0)}</p>
+          </div>
+          <div className="text-center">
+            <Camera className="h-8 w-8 mx-auto mb-2 text-green-500" />
+            <p className="font-semibold">Gesamt Fotos</p>
+            <p className="text-2xl">{photos.length}</p>
+          </div>
+          {eventPackage && (
+            <div className="text-center">
+              <PackageIcon className="h-8 w-8 mx-auto mb-2 text-purple-500" />
+              <p className="font-semibold">Package</p>
+              <p className="text-sm">{eventPackage.package.name}</p>
+              <div className="w-full bg-gray-200 rounded-full h-2 mt-1">
+                <div
+                  className="bg-blue-600 h-2 rounded-full"
+                  style={{ width: `${(eventPackage.used_photos / eventPackage.package.max_photos) * 100}%` }}
+                ></div>
+              </div>
+              <p className="text-xs text-gray-600 mt-1">
+                {eventPackage.used_photos} / {eventPackage.package.max_photos} Fotos
+              </p>
+              {new Date(eventPackage.expires_at) < new Date() && (
+                <p className="text-red-600 text-xs mt-1">Abgelaufen: {new Date(eventPackage.expires_at).toLocaleDateString()}</p>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
      <FiltersBar value={filter} onChange={setFilter} />
      {newCount > 0 && (
-        <Alert className="mb-3">
+        <Alert className="mb-3 mx-4">
          <AlertDescription>
            {newCount} neue Fotos verfügbar.{' '}
            <Button variant="link" className="px-1" onClick={acknowledgeNew}>Aktualisieren</Button>
          </AlertDescription>
        </Alert>
      )}
-      {loading && <p>Lade…</p>}
-      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+      {loading && <p className="mx-4">Lade…</p>}
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 px-4">
        {list.map((p: any) => {
          // Debug: Log image URLs
          const imgSrc = p.thumbnail_path || p.file_path;
--- a/resources/js/guest/pages/UploadPage.tsx
+++ b/resources/js/guest/pages/UploadPage.tsx
@@ -21,6 +21,7 @@ import {
  Zap,
  ZapOff,
 } from 'lucide-react';
+import { getEventPackage, type EventPackage } from '../services/eventApi';

 interface Task {
  id: number;
@@ -85,6 +86,9 @@ export default function UploadPage() {
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadError, setUploadError] = useState<string | null>(null);

+  const [eventPackage, setEventPackage] = useState<EventPackage | null>(null);
+  const [canUpload, setCanUpload] = useState(true);
+
  const [showPrimer, setShowPrimer] = useState<boolean>(() => {
    if (typeof window === 'undefined') return false;
    return window.localStorage.getItem(primerStorageKey) !== '1';
@@ -201,6 +205,30 @@ export default function UploadPage() {
    };
  }, [slug, taskId, emotionSlug]);

+  // Check upload limits
+  useEffect(() => {
+    if (!slug || !task) return;
+
+    const checkLimits = async () => {
+      try {
+        const pkg = await getEventPackage(slug);
+        setEventPackage(pkg);
+        if (pkg && pkg.used_photos >= pkg.package.max_photos) {
+          setCanUpload(false);
+          setUploadError('Upload-Limit erreicht. Kontaktieren Sie den Organisator für ein Upgrade.');
+        } else {
+          setCanUpload(true);
+        }
+      } catch (err) {
+        console.error('Failed to check package limits', err);
+        setCanUpload(false);
+        setUploadError('Fehler beim Prüfen des Limits. Upload deaktiviert.');
+      }
+    };
+
+    checkLimits();
+  }, [slug, task]);
+
  const stopStream = useCallback(() => {
    if (streamRef.current) {
      streamRef.current.getTracks().forEach((track) => track.stop());
@@ -428,7 +456,7 @@ export default function UploadPage() {
  );

  const handleUsePhoto = useCallback(async () => {
-    if (!slug || !reviewPhoto || !task) return;
+    if (!slug || !reviewPhoto || !task || !canUpload) return;
    setMode('uploading');
    setUploadProgress(5);
    setUploadError(null);
@@ -459,9 +487,10 @@ export default function UploadPage() {
      }
      setStatusMessage('');
    }
-  }, [emotionSlug, markCompleted, navigateAfterUpload, reviewPhoto, slug, stopStream, task]);
+  }, [emotionSlug, markCompleted, navigateAfterUpload, reviewPhoto, slug, stopStream, task, canUpload]);

  const handleGalleryPick = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!canUpload) return;
    const file = event.target.files?.[0];
    if (!file) return;
    setUploadError(null);
@@ -474,7 +503,7 @@ export default function UploadPage() {
      setUploadError('Auswahl fehlgeschlagen. Bitte versuche es erneut.');
    };
    reader.readAsDataURL(file);
-  }, []);
+  }, [canUpload]);

  const difficultyBadgeClass = useMemo(() => {
    if (!task) return 'text-white';
@@ -491,6 +520,8 @@ export default function UploadPage() {
  const isCameraActive = permissionState === 'granted' && mode !== 'uploading';
  const showTaskOverlay = task && mode !== 'uploading';

+  const isUploadDisabled = !canUpload || !task;
+
  useEffect(() => () => {
    resetCountdownTimer();
    if (uploadProgressTimerRef.current) {
@@ -527,6 +558,24 @@ export default function UploadPage() {
    );
  }

+  if (!canUpload) {
+    return (
+      <div className="pb-16">
+        <Header slug={slug} title="Kamera" />
+        <main className="px-4 py-6">
+          <Alert variant="destructive">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertDescription>
+              Upload-Limit erreicht ({eventPackage?.used_photos || 0} / {eventPackage?.package.max_photos || 0} Fotos).
+              Kontaktieren Sie den Organisator für ein Package-Upgrade.
+            </AlertDescription>
+          </Alert>
+        </main>
+        <BottomNav />
+      </div>
+    );
+  }
+
  const renderPrimer = () => (
    showPrimer && (
      <div className="mx-4 mt-3 rounded-xl border border-pink-200 bg-white/90 p-4 text-sm text-pink-900 shadow">
--- a/resources/js/guest/services/eventApi.ts
+++ b/resources/js/guest/services/eventApi.ts
@@ -14,6 +14,19 @@ export interface EventData {
  };
 }

+export interface PackageData {
+  id: number;
+  name: string;
+  max_photos: number;
+}
+
+export interface EventPackage {
+  id: number;
+  used_photos: number;
+  expires_at: string;
+  package: PackageData;
+}
+
 export interface EventStats {
  onlineGuests: number;
  tasksSolved: number;
@@ -39,4 +52,13 @@ export async function fetchStats(slug: string): Promise<EventStats> {
    tasksSolved: json.tasksSolved ?? 0,
    latestPhotoAt: json.latestPhotoAt ?? null,
  };
+}
+
+export async function getEventPackage(slug: string): Promise<EventPackage | null> {
+  const res = await fetch(`/api/v1/events/${slug}/package`);
+  if (!res.ok) {
+    if (res.status === 404) return null;
+    throw new Error('Failed to load event package');
+  }
+  return await res.json();
 }