# Brito Outlet — catálogo e administração

Site estático e responsivo para a Brito Outlet. Inclui vitrine pública, busca, filtros, animação de entrada da marca e painel administrativo de catálogo/cupons/pedidos usando um projeto próprio do Supabase.

## Abrir o site

1. Extraia o ZIP `brito-outlet-site-catalogo-admin.zip`.
2. Abra `index.html` no navegador para visualizar a vitrine inicial.
3. O arquivo `admin.html` abre o painel de gestão. Para fazer login e compartilhar alterações ao vivo, configure o Supabase conforme os passos abaixo e publique os arquivos no mesmo domínio. Abrir apenas como `file://` não configura nem ativa o banco.

## Ativar catálogo ao vivo e painel

1. Crie um projeto Supabase **da Brito Outlet**.
2. No Supabase, abra **SQL Editor**, cole o conteúdo de `supabase-setup.sql` e execute. Isso cria as tabelas de produtos e cupons, o bucket de imagens e as regras de acesso.
3. Em **Authentication → Users**, crie o usuário administrador com o e-mail e senha da loja. Desative o cadastro público se ele estiver habilitado.
4. Copie o UUID do usuário criado. No SQL Editor, execute, substituindo o valor pelo UUID verdadeiro:

   ```sql
   insert into public.admin_users(user_id)
   values ('UUID-DO-USUARIO-ADMIN')
   on conflict (user_id) do nothing;
   ```

5. Em **Project Settings → API**, copie o Project URL e a chave pública/anon (publishable). Coloque esses valores em `supabase-config.js`:

   ```js
   window.BRITO_SUPABASE_CONFIG = {
     url: "https://SEU-PROJETO.supabase.co",
     anonKey: "SUA_CHAVE_PUBLICA"
   };
   ```

6. Em **Authentication → URL Configuration**, defina a URL pública do site como Site URL e autorize também a URL completa de `admin.html` em Redirect URLs para recuperação de senha.
7. Publique juntos `index.html`, `admin.html`, `admin.js`, `script.js`, `styles.css`, `supabase-config.js`, `supabase-setup.sql` e a pasta `assets`.
8. Acesse `https://seu-dominio/admin.html` e entre com o e-mail e senha criados no Supabase.

**Segurança:** a chave pública/anon pode ficar no navegador porque as permissões são controladas pelo RLS do SQL. Nunca coloque uma chave `service_role` ou `secret` em `supabase-config.js`. Os arquivos e chaves do projeto Hype_Site não foram reutilizados; use um projeto Supabase separado para a Brito Outlet.

## Ativar pedidos e pagamentos pelo Mercado Pago

O site usa o Checkout Pro com a Orders API atual do Mercado Pago: o navegador envia o pedido à Edge Function create-checkout, o servidor calcula os preços consultando o catálogo, cria a order e devolve apenas o checkout_url. O cliente conclui no ambiente do Mercado Pago. A Edge Function mercadopago-webhook confere a assinatura, consulta a Order diretamente no Mercado Pago e só então atualiza o pagamento no banco.

### Preparar o banco

1. No Supabase da Brito Outlet, abra SQL Editor.
2. Cole e execute o arquivo completo supabase-setup.sql atualizado. Ele cria orders, order_items e store_settings, com acesso administrativo protegido por RLS. Não apaga produtos, cupons ou conteúdo.
3. No painel admin, abra Pedidos → Configuração de entrega e defina taxa e formas de recebimento. Enquanto a taxa estiver em branco, a função não permite fechar pedidos com entrega; retirada pode ser ativada separadamente.

### Publicar as Edge Functions

As funções ficam em supabase/functions. Para publicá-las, instale e autentique o Supabase CLI e, no terminal, dentro da pasta deste projeto, execute:

    supabase login
    supabase link --project-ref SEU_PROJECT_REF
    supabase functions deploy create-checkout --no-verify-jwt
    supabase functions deploy mercadopago-webhook --no-verify-jwt

O SEU_PROJECT_REF é o identificador do projeto que aparece no endereço do painel Supabase. O parâmetro --no-verify-jwt é necessário porque o checkout é de visitante e o webhook vem do Mercado Pago; a função do webhook valida a assinatura HMAC antes de aceitar a notificação.

### Guardar credenciais com segurança

No painel Mercado Pago, comece com credenciais de teste e um comprador de teste conforme a documentação atual do provedor. Configure em Supabase → Edge Functions → Secrets (ou via CLI), nunca em supabase-config.js, GitHub, HTML ou JavaScript do navegador:

- MERCADOPAGO_ACCESS_TOKEN: Access Token privado da aplicação.
- MERCADOPAGO_WEBHOOK_SECRET: segredo de assinatura mostrado na configuração de Webhooks.
- STORE_ORIGIN: origem pública do site, por exemplo https://brito-outlet.onrender.com.

O projeto Supabase fornece à Edge Function SUPABASE_URL e SUPABASE_SERVICE_ROLE_KEY; esses valores são usados apenas no servidor. Não os copie para os arquivos públicos.

Configure no Mercado Pago o evento de Orders (order) e a URL de notificação:

    https://SEU_PROJECT_REF.supabase.co/functions/v1/mercadopago-webhook

Depois use a opção de simular notificação no painel Mercado Pago. Confira os logs da Edge Function e se um pedido de teste passa a Pagamento aprovado no painel admin. O retorno do cliente ao site nunca confirma o pagamento por si só.

### Limites desta etapa

- A área de pedidos mostra dados do cliente, itens, tamanhos, entrega/retirada, taxa, total, status do Mercado Pago e andamento logístico.
- O administrador pode alterar o andamento após a confirmação do pagamento.
- Os cupons existentes continuam administráveis, mas não são aplicados no checkout nesta etapa.
- Nenhuma cobrança real foi executada. Só habilite credenciais de produção depois de validar o fluxo com contas de teste e autorização do cliente.

## O que o administrador pode fazer

- Cadastrar produtos por categoria, descrição, preço regular e promocional, imagem JPG/PNG/WebP de até 5 MB e estado publicado/oculto.
- Para Camisetas, Regata, Shorts, Bermudas e Calças, selecionar uma subcategoria no cadastro/edição. Regata oferece Regata Dri-Fit, Regatas e Regatas De Time. Em Calças, as opções são Calça Jeans e Calça Street. Na vitrine, o cliente escolhe a categoria, depois a subcategoria, e só então vê os produtos correspondentes.
- Importar fotos em lote a partir da pasta raiz convertida, com detecção de categoria, subcategoria e tamanho pela estrutura/nome das pastas. A prévia permite corrigir associações ausentes e mostra os arquivos ignorados.
- Editar, publicar/ocultar e excluir produtos. Substituir a imagem de um produto ao editá-lo.
- Cadastrar, editar, ativar/desativar e excluir cupons percentuais ou de valor fixo, com validade, limite de usos e escopo opcional por categoria ou produto.
- Consultar pedidos recebidos com dados do cliente, itens, tamanho, entrega/retirada, pagamento e andamento; configurar taxa e disponibilidade de entrega/retirada.
- Produtos ativos cadastrados no painel aparecem automaticamente na vitrine com foto, categoria e preço. O catálogo de demonstração permanece como fallback enquanto o banco está vazio ou ainda não configurado.
- A aba **Editor da loja** apresenta uma prévia embutida da vitrine e permite atualizar título e texto da capa, imagem principal, logo, faixa superior, banner/outdoor, texto e imagem institucional, endereço, mapa, Instagram, cores e capas das categorias.
- As imagens do editor são armazenadas no bucket público `brito-site-assets`; produtos continuam no bucket `brito-product-images`.

### Ativar o editor visual

Esta versão acrescenta a tabela `site_content` e o bucket `brito-site-assets`. Depois de atualizar os arquivos do site, execute novamente o arquivo completo `supabase-setup.sql` no **SQL Editor** do projeto Supabase já existente. O script é idempotente e adiciona as estruturas do editor sem apagar produtos ou cupons. Depois, publique juntos os arquivos listados no passo 7 acima. No painel, entre em **Editor da loja**, faça as alterações e clique em **Salvar e publicar alterações**. A prévia e a loja pública carregam o conteúdo salvo do Supabase.

Os cupons ficam guardados e administráveis, como no projeto Hype_Site analisado. O checkout desta etapa ainda não aplica cupons nem incrementa o contador de usos.

## Arquivos principais

- supabase/functions/create-checkout/index.ts: valida produtos e preços e cria a order no Mercado Pago no servidor.
- supabase/functions/mercadopago-webhook/index.ts: valida assinatura e confirma mudanças consultando o Mercado Pago.
- supabase/config.toml: configura as Edge Functions para checkout de visitante e webhook.

- `index.html`: vitrine da loja.
- `admin.html`: login e painel de gestão.
- `admin.js`: autenticação e ações administrativas.
- `script.js`: filtros, busca e carregamento do catálogo ativo.
- `styles.css`: layout, identidade dourada/preta e abertura da logo.
- `supabase-config.js`: URL e chave pública do projeto novo.
- `supabase-setup.sql`: banco, RLS e armazenamento das fotos.
- `assets/`: logo e imagens fornecidas/referências da loja.

### Subcategorias de roupas

Para adicionar Regata a um projeto Supabase já existente, execute `supabase/migrations/20261026_regata_category.sql` no SQL Editor do projeto. Ela atualiza as validações sem apagar produtos. Para uma instalação nova, use `supabase-setup.sql`. Produtos antigos sem subcategoria aparecem no filtro **Sem subcategoria** até o administrador editá-los e classificá-los.