A Kolplast passou a gerar propostas de licitação direto na loja VTEX

A Kolplast atende hospitais e órgãos públicos. Uma parte importante do negócio é licitação: cada pregão tem planilha de itens, preço por alíquota de ICMS e regras comerciais do cliente.

O desafio era tirar isso da planilha solta e do processo manual — e colocar na loja Kolplast, com cadastro, lista de editais e PDF da proposta comercial.

O Desafio

Antes, o fluxo típico era:

• O time interno cadastrava o edital e anexava um Excel.
• O cliente (distribuidor/órgão) precisava de uma proposta formatada, com dados dele, produtos daquele pregão, preços certos e condições comerciais.
• O mesmo número de pregão podia existir em estados diferentes.
• O Excel mudava de layout (colunas novas, “preço qualificado”).
• Nem todo mundo podia ver a área: só cadastro aprovado e dentro da validade.

Não dava para resolver só com página institucional. Precisava de um módulo na VTEX IO, ligado ao Master Data e à sessão do cliente.

Como foi realizado

Foi criado o app kolplast.bidding-components, plugado no tema da loja, sem republicar o tema a cada ajuste fino (dependência 0.x).

O desenho usa três entidades no Master Data:

• OL — Cadastro do usuário (CNPJ, endereço, ICMS...)
• LC — Licitação/pregão (número, estado, órgão...)
• OR — Log de download da proposta

1. Cadastro e acesso

O cliente preenche um formulário (UF, documentos, contato) gravado na OL. Um guard na vitrine consulta a sessão VTEX (vtex.session-client), busca o e-mail na OL e só libera /licitacoes se o status estiver ativo e a data de expiração for válida (fuso de São Paulo). Caso contrário, redireciona para acesso restrito.

2. Lista de licitações

A página lista os documentos da LC: nome do órgão, número do pregão, estado, data, status e botão Orçamento. Há filtro por UF, ordenação por data e versão mobile.

3. Gerador de orçamento

Ao clicar em Orçamento, a URL leva número e estado (?number=040/26&state=MS). Assim dois pregões iguais em SP e MS não se misturam.

O app então:

• Carrega o cliente na OL (incluindo ICMS, validade e flag de preço qualificado).
• Busca a licitação na LC e o anexo (xlsx/xls ou csv).
• Lê a planilha com SheetJS (xlsx), identifica colunas pelo cabeçalho (não pela letra AE/AL…), filtra linhas daquele órgão/pregão/UF e aplica o preço da coluna 18% / 12% / 07% conforme o ICMS do usuário.
• Se qualified_price estiver marcado, usa o bloco Qualificado da planilha nova; senão, o preço normal. Planilha antiga continua funcionando.
• Calcula total do item (unitário × quantidade), IPI e totais do pedido.
• Monta a proposta na tela (dados do cliente, produtos, condições comerciais, premissas) e gera PDF no browser (html2canvas + jsPDF), com quebra de página.

Tecnologias

• VTEX IO — app de storefront (react 3.x + store 0.x)
• React + TypeScript
• Master Data v1 — REST /api/dataentities/
• Sessão da loja — vtex.session-client / vtex.render-runtime
• SheetJS (xlsx) — parser da planilha Kolplast
• html2canvas + jsPDF — PDF da proposta
• CSS Modules + CSS Handles — visual alinhado à marca, customizável no tema
• HTML/CSS da proposta — pensado para tela, modal de todos os itens e PDF

Resultado

O cliente logado entra em Licitações, vê os pregões, abre o orçamento daquele estado, vê preços certos (ICMS e, se for o caso, qualificado) e baixa um PDF no padrão Grupo Kolplast — sem montar a proposta à mão a cada edital.

O módulo continua evolutivo: novo layout de Excel e preço qualificado entraram no parser sem redesenhar a loja inteira.