Catálogo Digital

Última atualização: 15 de julho de 2026

Visão Geral

O catálogo digital é um assistente de quatro passos que gera um PDF com uma seleção de produtos, pronto para compartilhar com um cliente. Diferente de outras partes desta feature, este é um pedaço do catálogo genuinamente completo: a geração de PDF é real, o compartilhamento nativo funciona, e cada etapa do assistente lê e escreve no mesmo estado compartilhado.

Arquivos-chave

Arquivo	Rota	Responsabilidade
features/catalog/subscreens/digital-catalog-ordering	/catalog/ordenacao-catalogo	Escolher o critério de ordenação dos produtos no PDF
features/catalog/subscreens/digital-catalog	/catalog/digital	Selecionar até 100 produtos
features/catalog/subscreens/digital-catalog-content	/catalog/conteudo-catalogo	Escolher quais campos aparecem no PDF
features/catalog/subscreens/digital-catalog-preview	/catalog/previa-catalogo	Prévia, geração do PDF e compartilhamento
storage/digital-catalog.storage.ts	—	Estado compartilhado entre as quatro etapas
services/pdf/digital-catalog-pdf.service.ts	—	Geração do PDF em base64

Um estado compartilhado carrega o assistente inteiro

Nenhuma das quatro telas passa dados para a próxima por parâmetro de rota. Todas leem e escrevem no mesmo objeto de estado, persistido em storage/digital-catalog.storage.ts através de getDigitalCatalogFlowState/updateDigitalCatalogFlowState. Entrar no assistente pelo catálogo sempre começa limpando esse estado:

// catalog.controller.ts
const onPressDigitalCatalog = useCallback(() => {
  clearDigitalCatalogFlowState();
  router.push("/catalog/ordenacao-catalogo" as any);
}, []);

Passo 1: ordenação

A primeira tela só escolhe o critério de ordenação dos produtos que vão para o PDF, grava isso no estado compartilhado, e avança para a seleção de produtos:

// digital-catalog-ordering.controller.ts
const onPressGeneratePdf = () => {
  updateDigitalCatalogFlowState({ orderBy: selectedOrderBy });
  router.push("/catalog/digital" as any);
};

Passo 2: seleção de produtos, limitada a 100

A tela de seleção reaproveita a busca e os filtros do próprio catálogo (via useCatalogController), e além da lista filtrada, também carrega produtos similares, sugeridos e comprados pelo cliente para facilitar a montagem do catálogo:

// digital-catalog.controller.ts
const similarProducts = await productService.searchAndList({
  filter: { /* ... */ },
  size: Math.max(similarProductIds.length, 100),
});

O limite de 100 produtos é aplicado de forma explícita, com um alerta dedicado quando o vendedor tenta passar disso:

const showSelectionLimitAlert = (message?: string) => {
  void appAlert.alert(
    "Limite atingido",
    message ?? "Você pode selecionar no máximo 100 produtos para gerar o catálogo digital.",
    [{ label: "Ok", style: "cancel" }],
  );
};

Passo 3: conteúdo do PDF

Aqui o vendedor escolhe quais campos aparecem por produto no PDF final: foto principal, fotos adicionais, descrição, código, código de barras, características, tabela de preço, informações de embalagem e de múltiplo, dados da empresa e dados do vendedor. Cada campo tem um valor padrão de seleção, com foto principal, descrição, código e tabela de preço vindo marcados por padrão:

// digital-catalog.shared.ts
{ id: "main-photo", label: "Foto Principal do Produto", selected: true },
{ id: "description", label: "Descricao do Produto", selected: true },
{ id: "product-code", label: "Codigo do Produto", selected: true },
{ id: "price-table", label: "Valor Tabela de Preco", selected: true },
{ id: "company-data", label: "Dados Gerais da Empresa", selected: false },
{ id: "barcode", label: "Codigo de Barras", selected: false },
// ...

Cada uma dessas opções também pode ser removida por completo da lista, independente da escolha do vendedor, através de uma setting de organização própria por campo:

export const DIGITAL_CATALOG_CONTENT_REMOVAL_FLAGS: Record<DigitalCatalogContentOptionId, AppSettingKey> = {
  // um AppSettingKey "cfg-*" específico por campo, verificado em
  // getDigitalCatalogAvailableContentOptions antes de exibir a opção
};

Isso permite uma organização impedir que certos campos (por exemplo, dados de embalagem) apareçam no catálogo digital de todos os vendedores, sem precisar remover a opção do código.

Passo 4: prévia, PDF e compartilhamento

A tela final monta a prévia visual, gera o PDF de fato e aciona o compartilhamento nativo do sistema, com callbacks de progresso em cada etapa:

// digital-catalog-preview.controller.ts
const pdfBase64 = await digitalCatalogPdfService.createDigitalCatalogPdfBase64(
  previewData,
  {
    onProgress: ({ message, progress }) => {
      setShareMessage(message);
      setShareProgress(progress);
    },
  },
);

const shareResult =
  Platform.OS === "ios"
    ? await Share.share({ title: "Compartilhar catálogo digital", url: file.uri })
    : await Share.share({ title: "Compartilhar catálogo digital", message: file.uri, url: file.uri });

shouldCloseDigitalCatalogFlow = shareResult.action === Share.sharedAction;

if (shouldCloseDigitalCatalogFlow) {
  clearDigitalCatalogFlowState();
  router.dismissTo("/(tabs)/catalogo" as any);
}

O estado do assistente só é limpo de duas formas: ao entrar de novo pelo catálogo (passo 1) ou depois de um compartilhamento concluído com sucesso no passo 4. Cancelar o compartilhamento do sistema operacional não limpa o estado nem navega para fora da tela, o vendedor pode tentar compartilhar de novo sem refazer os passos anteriores.