feat: netflix-style learner catalog polish and content descriptions

apps/web/src/pages/CatalogPage.jsx

@@ -1,12 +1,23 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Card, LearnerCatalogPage, Text } from '@flix/design-system/components';
 import { fetchCatalog } from '../services/api.js';
 
 const eventKey = (eventSlug) => `flix.web.eventKey.${eventSlug}`;
 
+const getLessonThumbnail = (lesson) => {
+  if (lesson?.videoProvider === 'youtube' && lesson?.videoId) {
+    return `https://i.ytimg.com/vi/${lesson.videoId}/hqdefault.jpg`;
+  }
+  if (lesson?.videoProvider === 'vimeo' && lesson?.videoId) {
+    return `https://vumbnail.com/${lesson.videoId}.jpg`;
+  }
+  return '';
+};
+
 export const CatalogPage = () => {
   const { eventSlug } = useParams();
+  const navigate = useNavigate();
   const [catalog, setCatalog] = useState(null);
   const [accessKey, setAccessKey] = useState(() =>
     eventSlug ? window.localStorage.getItem(eventKey(eventSlug)) ?? '' : '',
@@ -47,17 +58,60 @@ export const CatalogPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [eventSlug]);
 
+  const handleWatchFirstLesson = async () => {
+    if (!eventSlug) return;
+
+    const navigateToFirstLesson = (items = []) => {
+      const firstLesson = items.find((lesson) => lesson?.slug);
+      if (!firstLesson?.slug) return false;
+      navigate(`/events/${eventSlug}/lessons/${firstLesson.slug}`);
+      return true;
+    };
+
+    if (navigateToFirstLesson(catalog?.catalog?.items ?? [])) {
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      const body = await fetchCatalog(eventSlug, accessKey || undefined);
+      setCatalog(body);
+      if (accessKey) {
+        window.localStorage.setItem(eventKey(eventSlug), accessKey);
+      }
+
+      if (!navigateToFirstLesson(body?.catalog?.items ?? [])) {
+        setError('Nenhuma aula disponível para este evento.');
+      }
+    } catch (caughtError) {
+      setCatalog(null);
+      setError(caughtError?.message ?? 'Catalog request failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const releasedItems = releasedLessons.map((lesson) => ({
     id: lesson.id,
     title: lesson.title,
+    description: lesson.description ?? '',
     status: lesson.status,
+    imageUrl: getLessonThumbnail(lesson),
+    presetIconName: 'presetRecentlyAdded',
+    onClick: () => navigate(`/events/${eventSlug}/lessons/${lesson.slug}`),
     action: <Link to={`/events/${eventSlug}/lessons/${lesson.slug}`}>Open lesson</Link>,
   }));
 
   const gatedItems = gatedLessons.map((lesson) => ({
     id: lesson.id,
     title: lesson.title,
+    description: lesson.description ?? '',
     status: lesson.status,
+    imageUrl: getLessonThumbnail(lesson),
+    presetIconName: lesson.status === 'locked' ? 'presetTop10' : 'presetLeavingSoon',
+    onClick: () => navigate(`/events/${eventSlug}/lessons/${lesson.slug}`),
     action: <Link to={`/events/${eventSlug}/lessons/${lesson.slug}`}>Details</Link>,
   }));
 
@@ -77,10 +131,15 @@ export const CatalogPage = () => {
         eventSlug={eventSlug ?? ''}
         accessKey={accessKey}
         onAccessKeyChange={setAccessKey}
-        onLoad={loadCatalog}
+        onLoad={handleWatchFirstLesson}
         loading={loading}
-        heroTitle={catalog?.event?.title ?? 'Flix'}
-        heroDescription={catalog?.event?.description ?? ''}
+        eventVisibility={catalog?.event?.visibility}
+        eventTitle={catalog?.event?.title ?? ''}
+        eventDescription={catalog?.event?.longDescription ?? catalog?.event?.description ?? ''}
+        highlightVideoUrl={catalog?.event?.highlightVideoUrl ?? ''}
+        heroTitle={catalog?.event?.hero?.title ?? catalog?.event?.title ?? 'Flix'}
+        heroDescription={catalog?.event?.shortDescription ?? catalog?.event?.hero?.subtitle ?? catalog?.event?.description ?? ''}
+        heroCtaLabel={catalog?.event?.hero?.ctaText ?? 'Load catalog'}
         releasedItems={releasedItems}
         gatedItems={gatedItems}
       />

e2e/tests/admin-smoke.spec.mjs

@@ -12,7 +12,11 @@ test('admin happy path smoke: login and create event', async ({ page }) => {
   const randomSuffix = `${Date.now()}`;
   await page.getByPlaceholder('Event title').fill(`E2E Event ${randomSuffix}`);
   await page.getByRole('textbox', { name: 'Slug', exact: true }).fill(`e2e-event-${randomSuffix}`);
-  await page.getByPlaceholder('Description').fill('Smoke test event created via browser runtime');
+  await page
+    .getByPlaceholder('Description', { exact: true })
+    .fill('Smoke test event created via browser runtime');
+  await page.getByPlaceholder('Short description (Hero)').fill('Short hero copy for smoke validation');
+  await page.getByPlaceholder('Long description').fill('Long description for smoke validation');
   await page.getByPlaceholder('Hero title').fill(`Hero ${randomSuffix}`);
   await page.getByPlaceholder('Hero subtitle').fill('Subtitle for smoke validation');
   await page.getByPlaceholder('Hero CTA text').fill('Start now');

e2e/tests/learner-smoke.spec.mjs

@@ -3,24 +3,10 @@ import { expect, test } from '@playwright/test';
 test('learner happy path smoke: catalog to playback', async ({ page }) => {
   await page.goto('/events/flix-mvp-launch-event');
 
-  await expect(page.getByRole('heading', { name: 'Flix', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Catalog Access' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Assistir Aula' })).toBeVisible();
+  await expect(page.getByText('Próximas Aulas')).toBeVisible();
 
-  const lessonLink = page.locator('a[href*="/events/flix-mvp-launch-event/lessons/"]').first();
-  for (let attempt = 1; attempt <= 3; attempt += 1) {
-    await page.getByRole('button', { name: 'Load catalog' }).click();
-    try {
-      await expect(lessonLink).toBeVisible({ timeout: 8_000 });
-      break;
-    } catch (error) {
-      if (attempt === 3) {
-        throw error;
-      }
-      await page.waitForTimeout(1_000);
-    }
-  }
-
-  await lessonLink.click();
+  await page.getByRole('button', { name: 'Assistir Aula' }).click();
   await expect(page.getByRole('heading', { name: 'Lesson Playback' })).toBeVisible();
 
   await expect(page.getByRole('heading', { name: 'Lesson Materials' })).toBeVisible();