Desenvolvimento de Fluxo de Personalização Avançado para Tema Tray E-commerce

Estamos buscando um desenvolvedor front-end experiente para implementar um fluxo de personalização detalhado no tema da nossa loja virtual na plataforma Tray. O objetivo principal é permitir que os clientes personalizem seus produtos diretamente no carrinho de compras, com opções de nomes, cartões, mensagens e embalagens, e que essas escolhas sejam persistidas e exibidas corretamente.

Etapas do Fluxo (Front-end):
1. Nomes: Inserção de nomes para presenteado e remetente.
2. Cartão: Seleção da cor do cartão.
3. Mensagem: Escolha entre presets da Senza ou inserção de texto personalizado com contador de caracteres.
4. Embalagem: Seleção de opções de caixa e/ou sacola.
5. Resumo: Exibição de um resumo das personalizações antes da finalização.

Premissas da Plataforma Tray (a serem respeitadas):
- Utilizar recursos nativos e endpoints públicos do storefront da Tray para gravar dados. As informações de personalização devem ser salvas nas observações do item no carrinho e nas observações gerais do pedido.
- As prévias e imagens (cinta, cartão, embalagem) serão fornecidas pela nossa equipe e devem ser apenas exibidas no fluxo.

Persistência (sem servidor):
- No item do carrinho: Salvar nome do presenteado/remetente, cor do cartão (se aplicável por item), tipo de mensagem (preset/pessoal) com seu ID ou texto, escolhas de embalagem e código de borderô. Todas essas informações devem ser armazenadas na observação do item.
- No pedido: Salvar nomes (nível pedido), cor (se aplicável por pedido), tipo de mensagem com seu ID ou texto, lista de itens com códigos de borderô e links das prévias. Todas essas informações devem ser armazenadas nas observações do pedido.
- A retomada do fluxo deve ser possível utilizando localStorage e/ou querystring.

Códigos de Borderô:
- Forneceremos uma planilha com os códigos de borderô. O desenvolvedor deverá converter esta planilha para um formato JSON dentro do tema e implementar a resolução client-side (Família/Modelo/Fragrância para Código). É Crucial bloquear o avanço no fluxo se houver falta de correspondência nos códigos.

Validações e Experiência do Usuário (UX):
- Implementar validações para campos obrigatórios, limites de caracteres e seleção obrigatória de cor.
- O desenvolvimento deve ser mobile-first e incluir acessibilidade básica.
- As pré-visualizações serão estáticas, utilizando os assets fornecidos.

Instrumentação de Dados (dataLayer GTM):
- Implementar eventos no dataLayer do Google Tag Manager para registrar o início do fluxo, o salvamento de nomes, a escolha de cor, o tipo de mensagem, a seleção de embalagem e a confirmação do resumo.

Entregas Esperadas:
- Telas e/ou modais do fluxo de personalização, incluindo navegação e gestão de estados.
- Implementação completa da persistência de dados no carrinho e no pedido, conforme detalhado acima.
- Mapeamento e validação dos códigos de borderô via JSON.
- Instrumentação completa do Google Tag Manager para o fluxo.
- Documentação breve sobre o uso e manutenção do fluxo.

Forneceremos: Acesso ao tema em ambiente de staging, um PDF com o fluxo e as telas detalhadas, todos os assets de prévias e a planilha de códigos de borderô.