Ir para o conteúdo

Frontend Web - Marketplace de Cursos

Objetivo

Consolidar a documentação das mudanças de frontend para o novo domínio de cursos, alinhado ao backend refatorado.

Diretriz principal

Consumir catálogo por chamada agregada:

  • GET /marketplace/catalog

Evitar composição de catálogo com múltiplas requests fragmentadas.

Estrutura de módulos adicionada/atualizada

Data layer de marketplace

  • src/modules/marketplace/hooks/useMarketplaceCatalog.ts
  • src/modules/marketplace/services/marketplace.service.ts
  • src/modules/marketplace/types/index.ts

Área Admin (cursos)

  • src/modules/admin/marketplace/hub/page.tsx (hub administrativo com seções Cursos, Vendas e Marketing)
  • src/modules/admin/courses/review/page.tsx
  • src/modules/admin/courses/orders/page.tsx com atalho de pré-visualização por pedido (player + materiais)
  • src/modules/admin/courses/revenue/page.tsx
  • src/modules/admin/courses/bundles/page.tsx
  • src/modules/admin/courses/recommendations/page.tsx
  • src/modules/admin/courses/reviews/page.tsx
  • src/modules/admin/courses/review-logs/page.tsx
  • src/modules/admin/courses/review/page.tsx com modo de pré-visualização como cliente (player + módulos/aulas + materiais)

Área Profissional

  • src/modules/professional/educational/hub/page.tsx
  • src/modules/professional/courses/page.tsx
  • src/modules/professional/course-editor/page.tsx
  • src/modules/professional/course-sales/page.tsx
  • src/modules/professional/course-revenue/page.tsx
  • src/modules/professional/course-materials/page.tsx
  • src/modules/professional/bundles/page.tsx
  • src/modules/professional/courses/page.tsx com ação de exclusão lógica e acompanhamento de progresso da remoção assíncrona de vídeos

Área Cliente

  • src/modules/client/learning/hub/page.tsx
  • src/modules/courses/catalog/page.tsx
  • src/modules/courses/course-detail/page.tsx
  • src/modules/client/course-checkout/page.tsx
  • src/modules/client/my-courses/page.tsx
  • src/modules/client/learn-course/page.tsx
  • src/modules/client/bundles/page.tsx
  • src/modules/client/bundle-details/page.tsx

Contratos frontend atualizados

Arquivo central de tipos:

  • src/types/index.ts

Pontos obrigatórios:

  1. Transporte monetário em centavos (*_amount_cents).
  2. Vídeo genérico por provedor (video_provider, video_upload_id, video_asset_id, video_playback_id).
  3. Sem dependência de course.duration persistido.
  4. Duração do curso por total_duration_sec.

Rotas por papel (resumo)

Cliente

  • /client/aprendizado
  • /courses
  • /courses/:id
  • /courses/:id/checkout
  • /bundles
  • /bundles/:id
  • /my-courses
  • /learn/:enrollmentId

Profissional

  • /professional/educacional
  • /professional/courses
  • /professional/courses/new
  • /professional/courses/:id/edit
  • /professional/courses/:id/sales
  • /professional/courses/:id/revenue
  • /professional/course-materials
  • /professional/bundles

Admin

  • /admin/marketplace
  • /admin/courses/review
  • /admin/courses/orders
  • /admin/courses/commissions
  • /admin/courses/revenue
  • /admin/courses/bundles
  • /admin/courses/recommendations
  • /admin/courses/reviews
  • /admin/courses/review-logs

Permissionamento por módulo no frontend

Chaves utilizadas

  • educacional.cursos.catalogo
  • educacional.cursos.player
  • educacional.cursos.bundles
  • educacional.cursos.reviews
  • educacional.cursos.profissional.gestao
  • educacional.cursos.profissional.recomendacoes
  • educacional.cursos.profissional.bundles
  • educacional.cursos.profissional.materiais
  • educacional.cursos.profissional.revenue

Pontos de aplicação

  • src/routes/clientRoutes.tsx
  • src/routes/professionalRoutes.tsx
  • src/components/Sidebar.tsx
  • src/routes/routePreload.ts
  • src/modules/admin/module-management/settings/view.tsx (árvore recursiva)

Fluxos principais cobertos

  1. Catálogo unificado: cursos + bundles + recomendações.
  2. Checkout de curso e bundle.
  3. Player com progresso por aula e progresso de curso derivado.
  4. Materiais de aula no player e na gestão profissional.
  5. Reviews de curso (cliente) e moderação (admin).
  6. Bundles e recomendações (admin/profissional).
  7. Revenue split visível em pedidos/vendas.
  8. Admin consegue reproduzir vídeos de aulas em revisão usando endpoint de playback administrativo.
  9. Admin consegue pré-visualizar curso vendido diretamente na tela de pedidos.
  10. Admin consegue visualizar a vitrine publicada do marketplace em tela dedicada.
  11. Fluxos de marketplace foram reorganizados com hubs de entrada por perfil.
  12. Hubs de marketplace contam com tours contextuais por perfil (admin/profissional/cliente).

Checklist de integração frontend

  1. Não usar price_amount (apenas price_amount_cents).
  2. Não usar mux_* em contratos de UI.
  3. Ler catálogo por useMarketplaceCatalog.
  4. Aplicar requiredModule em todas as rotas de cursos.
  5. Exibir valores monetários com formatação apenas na UI (nunca converter para float no transporte).