O desafio era colocar as promoções sempre ativas na loja, com código, regras e validade visíveis, e permitir que o cliente copie o cupom e siga para os produtos sem sair do contexto da marca. O conteúdo precisava ser editável pelo time da loja, sem depender de publicação de código a cada campanha.

O trabalho foi um app React em VTEX IO, exposto como bloco de listagem. Cada cupom reúne imagem, título, regras, código, botão de copiar, link de redirecionamento e data de validade. O schema do componente alimenta o Site Editor, e os estilos ficam no tema da loja por CSS Handles.

Tecnologias

• VTEX IO, builders React 3.x e Store 0.x
• React 16 e TypeScript
• vtex.list-context, para o bloco entrar em listas e sliders do tema
• vtex.css-handles, para o visual ficar no store theme
• vtex.render-runtime (NoSSR), para a lista renderizar no cliente
• Site Editor, com schema de conteúdo e upload de imagem
• Clipboard API, no botão que copia o código e troca o ícone por "Código copiado" por 5 segundos

O que o código realmente faz

O bloco recebe um array de cupons e renderiza imagem, nome, regras, código, botão de copiar, link e validade. Se não houver cupons, não renderiza nada.

O list-context.coupons-always injeta a lista no contexto. A validade usa o texto *Válido até {data} e o botão copia o couponCode.