Update guest v2 home and tasks experience

resources/js/guest-v2/__tests__/HomeScreen.test.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { EventDataProvider } from '../context/EventDataContext';
+const useEventDataMock = vi.fn();
 
 vi.mock('react-router-dom', () => ({
   useNavigate: () => vi.fn(),
 }));
 
+vi.mock('../context/EventDataContext', () => ({
+  useEventData: () => useEventDataMock(),
+}));
+
 vi.mock('@tamagui/stacks', () => ({
   YStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   XStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
@@ -29,15 +33,38 @@ vi.mock('lucide-react', () => ({
   Sparkles: () => <span>sparkles</span>,
   Image: () => <span>image</span>,
   Star: () => <span>star</span>,
+  Timer: () => <span>timer</span>,
+  RefreshCw: () => <span>refresh</span>,
   Trophy: () => <span>trophy</span>,
+  X: () => <span>x</span>,
 }));
 
 vi.mock('../components/AppShell', () => ({
   default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }));
 
-vi.mock('../services/uploadApi', () => ({
-  useUploadQueue: () => ({ items: [], loading: false, refresh: vi.fn() }),
+vi.mock('../components/TaskHeroCard', () => ({
+  default: ({ task }: { task: { title?: string } | null }) => (
+    <div>
+      <span>{task?.title}</span>
+      <span>Let&apos;s go!</span>
+    </div>
+  ),
+}));
+
+vi.mock('../components/PhotoFrameTile', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock('@/guest/context/EventBrandingContext', () => ({
+  useEventBranding: () => ({
+    branding: { welcomeMessage: '' },
+    isCustom: false,
+  }),
+  useOptionalEventBranding: () => ({
+    branding: { welcomeMessage: '' },
+    isCustom: false,
+  }),
 }));
 
 vi.mock('../services/tasksApi', () => ({
@@ -61,14 +88,26 @@ vi.mock('../services/photosApi', () => ({
   fetchGallery: vi.fn().mockResolvedValue({ data: [] }),
 }));
 
+const translate = (key: string, fallback?: string) => fallback ?? key;
+
 vi.mock('@/guest/i18n/useTranslation', () => ({
-  useTranslation: () => ({ t: (key: string, fallback?: string) => fallback ?? key, locale: 'de' }),
+  useTranslation: () => ({ t: translate, locale: 'de' }),
 }));
 
 vi.mock('@/guest/i18n/LocaleContext', () => ({
   useLocale: () => ({ locale: 'de' }),
 }));
 
+vi.mock('../hooks/usePollStats', () => ({
+  usePollStats: () => ({
+    stats: { onlineGuests: 0, tasksSolved: 0, guestCount: 0, likesCount: 0, latestPhotoAt: null },
+  }),
+}));
+
+vi.mock('../lib/useStaggeredReveal', () => ({
+  useStaggeredReveal: () => 5,
+}));
+
 vi.mock('@/hooks/use-appearance', () => ({
   useAppearance: () => ({ resolved: 'light' }),
 }));
@@ -81,22 +120,26 @@ import HomeScreen from '../screens/HomeScreen';
 
 describe('HomeScreen', () => {
   it('shows task hero content when tasks are enabled', async () => {
-    render(
-      <EventDataProvider tasksEnabledFallback>
-        <HomeScreen />
-      </EventDataProvider>
-    );
+    useEventDataMock.mockReturnValue({
+      tasksEnabled: true,
+      token: 'demo',
+      event: { name: 'Demo Event' },
+    });
+
+    render(<HomeScreen />);
 
     expect(await screen.findByText('Capture the dancefloor')).toBeInTheDocument();
     expect(screen.getByText("Let's go!")).toBeInTheDocument();
   });
 
   it('shows capture-ready content when tasks are disabled', () => {
-    render(
-      <EventDataProvider tasksEnabledFallback={false}>
-        <HomeScreen />
-      </EventDataProvider>
-    );
+    useEventDataMock.mockReturnValue({
+      tasksEnabled: false,
+      token: 'demo',
+      event: { name: 'Demo Event' },
+    });
+
+    render(<HomeScreen />);
 
     expect(screen.getByText('Capture ready')).toBeInTheDocument();
     expect(screen.getByText('Upload / Take photo')).toBeInTheDocument();

resources/js/guest-v2/__tests__/ScreensCopy.test.tsx

@@ -104,7 +104,15 @@ vi.mock('../services/emotionsApi', () => ({
 }));
 
 vi.mock('../hooks/usePollStats', () => ({
-  usePollStats: () => ({ stats: { onlineGuests: 0, tasksSolved: 0, latestPhotoAt: null } }),
+  usePollStats: () => ({
+    stats: {
+      onlineGuests: 0,
+      tasksSolved: 0,
+      guestCount: 0,
+      likesCount: 0,
+      latestPhotoAt: null,
+    },
+  }),
 }));
 
 vi.mock('../services/qrApi', () => ({
@@ -148,7 +156,7 @@ describe('Guest v2 screens copy', () => {
       </EventDataProvider>
     );
 
-    expect(screen.getByText('Prompt quest')).toBeInTheDocument();
+    expect(screen.getByText('Mission hub')).toBeInTheDocument();
   });
 
   it('renders share hub header', () => {

resources/js/guest-v2/__tests__/ShareScreen.test.tsx

@@ -31,7 +31,15 @@ vi.mock('../context/EventDataContext', () => ({
 }));
 
 vi.mock('../hooks/usePollStats', () => ({
-  usePollStats: () => ({ stats: { onlineGuests: 12, tasksSolved: 0, latestPhotoAt: null } }),
+  usePollStats: () => ({
+    stats: {
+      onlineGuests: 12,
+      tasksSolved: 0,
+      guestCount: 40,
+      likesCount: 120,
+      latestPhotoAt: null,
+    },
+  }),
 }));
 
 vi.mock('../services/qrApi', () => ({

resources/js/guest-v2/__tests__/eventBranding.test.ts

@@ -11,6 +11,7 @@ describe('mapEventBranding', () => {
       heading_font: 'Event Heading',
       button_radius: 16,
       button_primary_color: '#abcdef',
+      welcome_message: 'Willkommen beim Event!',
       palette: {
         surface: '#111111',
       },
@@ -27,5 +28,6 @@ describe('mapEventBranding', () => {
     expect(result?.typography?.sizePreset).toBe('l');
     expect(result?.buttons?.radius).toBe(16);
     expect(result?.buttons?.primary).toBe('#abcdef');
+    expect(result?.welcomeMessage).toBe('Willkommen beim Event!');
   });
 });

resources/js/guest-v2/__tests__/statsApi.test.ts

@@ -17,7 +17,13 @@ describe('fetchEventStats', () => {
 
   it('returns cached stats on 304', async () => {
     fetchMock.mockResolvedValueOnce(
-      new Response(JSON.stringify({ online_guests: 4, tasks_solved: 1, latest_photo_at: '2024-01-01T00:00:00Z' }), {
+      new Response(JSON.stringify({
+        online_guests: 4,
+        tasks_solved: 1,
+        guest_count: 12,
+        likes_count: 48,
+        latest_photo_at: '2024-01-01T00:00:00Z',
+      }), {
         status: 200,
         headers: { ETag: '"demo"' },
       })
@@ -25,6 +31,8 @@ describe('fetchEventStats', () => {
 
     const first = await fetchEventStats('demo');
     expect(first.onlineGuests).toBe(4);
+    expect(first.guestCount).toBe(12);
+    expect(first.likesCount).toBe(48);
 
     fetchMock.mockResolvedValueOnce(new Response(null, { status: 304, headers: { ETag: '"demo"' } }));
     const second = await fetchEventStats('demo');