Pular para o conteúdo principal

O que é

O Carousel de Grupos de Produtos é a faixa horizontal de grupos usada para filtrar produtos com clique.

Ao selecionar um grupo:

  1. O filtro de grupo é aplicado.
  2. Os produtos são buscados no backend já filtrados.
  3. A lista da tela é atualizada.

Ao clicar de novo no mesmo grupo, a seleção é removida.

Onde é usado

  1. Nova Venda: src/screens/nova-venda/components/Products/NewSaleProducts.tsx Exemplo do Carousel de Grupos de Produtos

  2. Catálogo: src/screens/catalogo/components/Content/CatalogContent.tsx Exemplo do Carousel de Grupos de Produtos

  3. Componente compartilhado: src/components/ProductGroupCarousel/index.tsx

Comportamento principal

Seleção e filtro​

  1. Clique em um grupo seleciona.
  2. Clique no mesmo grupo desmarca.
  3. O componente dispara busca de produtos por grupo.

Loading visual​

  1. Enquanto busca produtos, o grupo clicado mostra spinner.
  2. Se o grupo tiver imagem, o spinner aparece sobre a imagem.
  3. Se não tiver imagem, aparece placeholder com ícone Cube e spinner quando aplicável.
  4. Enquanto carrega, os botões de grupo ficam desabilitados.

Carregamento da imagem do grupo​

  1. Enquanto a imagem do grupo é carregada, aparece Skeleton circular.
  2. Erros de retorno da API de imagem são tratados no serviço (blob inválido/json de erro).

Cache

Foi aplicado cache com React Query no fetch por grupo para evitar chamadas repetidas ao voltar para filtros já consultados.

Chave de cache (resumida): empresa + grupo + texto de busca.

Configuração atual:

  1. staleTime: 10 minutos
  2. gcTime: 30 minutos

Arquivo: src/components/ProductGroupCarousel/index.tsx

Endpoints envolvidos

  • POST /products/productListGroup/

Imagem do grupo​

  • GET /products/imagemGrupo/{groupId}

Produtos filtrados por grupo (principal)​

  • GET /products/getDetails
  • Parâmetros usados no fluxo:
    • codVend
    • codEmp
    • codGruProd
    • codProds (quando aplicável)

Fallback (quando necessário)​

  1. GET /ppid/getPrices
  2. GET /products/estoque
  3. GET /products/list ou /products/listPesquisa

Integração com ERP Sankhya

Esta funcionalidade depende do cadastro de grupos no Sankhya, na tela:

"Grupos de Produtos/Serviços"

Nessa tela do ERP é possível:

  1. Cadastrar novos grupos de produtos.
  2. Editar grupos existentes.
  3. Cadastrar/atualizar as imagens dos grupos.

Impacto direto no web:

  1. Novos grupos passam a aparecer no carousel.
  2. Imagens cadastradas passam a ser exibidas no grupo correspondente.

Arquivos-chave

  1. src/components/ProductGroupCarousel/index.tsx
  2. src/store/catalog.slice.ts
  3. src/service/catalog/catalog.service.ts
  4. src/hooks/usePrivateImage.ts
  5. src/service/get-private-image-url.ts