kybernus 3.0.1 → 3.2.0

package/templates/ecommerce/apps/web/src/modules/legal/pages/PrivacyPolicyPage.tsx

@@ -0,0 +1,207 @@
+import { Link } from 'react-router-dom';
+import { siteConfig } from '../../../shared/config/siteConfig';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+const { name, legal, supportEmail, privacyEmail, url } = siteConfig;
+
+export function PrivacyPolicyPage() {
+  usePageTitle('Política de Privacidade');
+  return (
+    <article style={{ maxWidth: 760, margin: '0 auto', lineHeight: 1.75, color: '#374151' }}>
+      <h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>Política de Privacidade</h1>
+      <p style={{ color: '#9ca3af', fontSize: '0.875rem', marginTop: 0, marginBottom: '2rem' }}>
+        Vigência a partir de: <strong>{legal.termsEffectiveDate}</strong>
+      </p>
+
+      <Section title="1. Quem Somos">
+        <p>
+          Esta Política de Privacidade aplica-se ao site <strong>{name}</strong> ({url}), operado por{' '}
+          <strong>{legal.companyName}</strong>, CNPJ {legal.cnpj}, com sede em {legal.address}.
+        </p>
+        <p>
+          Estamos comprometidos com a proteção dos seus dados pessoais em conformidade com a{' '}
+          <strong>Lei Geral de Proteção de Dados (LGPD — Lei 13.709/2018)</strong>.
+        </p>
+      </Section>
+
+      <Section title="2. Dados que Coletamos">
+        <p>Coletamos os seguintes dados pessoais:</p>
+        <ul>
+          <li>
+            <strong>Dados de cadastro:</strong> nome, endereço de e-mail, senha (armazenada de forma
+            criptografada).
+          </li>
+          <li>
+            <strong>Dados de entrega:</strong> endereço postal, CEP, nome do destinatário.
+          </li>
+          <li>
+            <strong>Dados de pagamento:</strong> os dados de cartão de crédito são processados diretamente
+            pelo <strong>Stripe</strong> e nunca armazenados em nossos servidores.
+          </li>
+          <li>
+            <strong>Dados de uso:</strong> páginas visitadas, cliques, tempo de sessão (via cookies
+            analíticos, com seu consentimento).
+          </li>
+          <li>
+            <strong>Dados técnicos:</strong> endereço IP, tipo de navegador, sistema operacional.
+          </li>
+        </ul>
+      </Section>
+
+      <Section title="3. Finalidade e Base Legal do Tratamento">
+        <table style={{ borderCollapse: 'collapse', width: '100%', fontSize: '0.875rem' }}>
+          <thead>
+            <tr style={{ background: '#f9fafb' }}>
+              <th style={thStyle}>Finalidade</th>
+              <th style={thStyle}>Base Legal (LGPD)</th>
+            </tr>
+          </thead>
+          <tbody>
+            {[
+              ['Criação e gerenciamento de conta', 'Execução de contrato (art. 7, V)'],
+              ['Processamento de pedidos e pagamentos', 'Execução de contrato (art. 7, V)'],
+              ['Envio de e-mails transacionais (confirmação, nota fiscal)', 'Execução de contrato (art. 7, V)'],
+              ['Prevenção de fraudes e segurança', 'Legítimo interesse (art. 7, IX)'],
+              ['Análise de desempenho e melhoria do site', 'Consentimento (art. 7, I)'],
+              ['Marketing e ofertas personalizadas', 'Consentimento (art. 7, I)'],
+              ['Cumprimento de obrigações legais', 'Obrigação legal (art. 7, II)'],
+            ].map(([finalidade, base]) => (
+              <tr key={finalidade} style={{ borderBottom: '1px solid #f3f4f6' }}>
+                <td style={{ padding: '0.5rem 0.75rem' }}>{finalidade}</td>
+                <td style={{ padding: '0.5rem 0.75rem', color: '#6b7280', fontSize: '0.8rem' }}>{base}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Section>
+
+      <Section title="4. Cookies">
+        <p>
+          Utilizamos cookies para o funcionamento do site (essenciais) e para análise de uso (com seu
+          consentimento). Você pode gerenciar suas preferências de cookies a qualquer momento pelo banner
+          exibido na primeira visita ou nas configurações do seu navegador.
+        </p>
+        <ul>
+          <li>
+            <strong>Cookies essenciais:</strong> necessários para o funcionamento do site (sessão,
+            autenticação, carrinho). Não podem ser desativados.
+          </li>
+          <li>
+            <strong>Cookies analíticos:</strong> coletam informações anônimas sobre como você usa o site.
+            Requerem seu consentimento.
+          </li>
+        </ul>
+      </Section>
+
+      <Section title="5. Compartilhamento de Dados">
+        <p>Não vendemos seus dados pessoais. Compartilhamos apenas com:</p>
+        <ul>
+          <li>
+            <strong>Stripe</strong> — processador de pagamentos (sujeito à própria política de privacidade
+            da Stripe).
+          </li>
+          <li>
+            <strong>Transportadoras</strong> — nome e endereço de entrega para envio dos pedidos.
+          </li>
+          <li>
+            <strong>Autoridades competentes</strong> — quando exigido por lei ou ordem judicial.
+          </li>
+        </ul>
+      </Section>
+
+      <Section title="6. Seus Direitos (LGPD art. 18)">
+        <p>Como titular de dados, você tem direito a:</p>
+        <ul>
+          <li>Confirmar a existência de tratamento dos seus dados.</li>
+          <li>Acessar os dados que temos sobre você.</li>
+          <li>Corrigir dados incompletos, inexatos ou desatualizados.</li>
+          <li>Solicitar a anonimização, bloqueio ou eliminação de dados desnecessários.</li>
+          <li>Portabilidade dos dados a outro fornecedor de serviço.</li>
+          <li>Revogar o consentimento a qualquer momento.</li>
+          <li>Opor-se ao tratamento realizado com base em legítimo interesse.</li>
+        </ul>
+        <p>
+          Para exercer seus direitos, entre em contato com nossa Encarregada de Dados (DPO) pelo e-mail:{' '}
+          <a href={`mailto:${privacyEmail}`}>{privacyEmail}</a>.
+        </p>
+      </Section>
+
+      <Section title="7. Retenção de Dados">
+        <p>
+          Mantemos seus dados pessoais pelo tempo necessário para cumprir as finalidades descritas nesta
+          política, salvo quando a lei exigir ou permitir período maior. Dados de pedidos são retidos por
+          até <strong>5 anos</strong> para cumprimento de obrigações fiscais e tributárias.
+        </p>
+      </Section>
+
+      <Section title="8. Segurança">
+        <p>
+          Adotamos medidas técnicas e organizacionais adequadas para proteger seus dados contra acesso não
+          autorizado, perda, destruição ou alteração. Utilizamos criptografia TLS em trânsito e
+          armazenamento seguro em repouso. Senhas são armazenadas com hashing bcrypt.
+        </p>
+      </Section>
+
+      <Section title="9. Encarregado de Dados (DPO)">
+        <p>
+          Nossa Encarregada de Dados está disponível pelo e-mail:{' '}
+          <a href={`mailto:${privacyEmail}`}>{privacyEmail}</a>. Você pode entrar em contato para exercer
+          seus direitos ou esclarecer dúvidas sobre o tratamento de seus dados.
+        </p>
+      </Section>
+
+      <Section title="10. Alterações a Esta Política">
+        <p>
+          Podemos atualizar esta Política periodicamente. Notificaremos sobre alterações significativas por
+          e-mail ou por aviso proeminente no site. A data de vigência no topo desta página reflete a versão
+          mais recente.
+        </p>
+      </Section>
+
+      <Section title="11. Contato">
+        <p>
+          Suporte geral: <a href={`mailto:${supportEmail}`}>{supportEmail}</a>
+          <br />
+          Privacidade / DPO: <a href={`mailto:${privacyEmail}`}>{privacyEmail}</a>
+          <br />
+          Também é possível registrar reclamações junto à{' '}
+          <strong>Autoridade Nacional de Proteção de Dados (ANPD)</strong> em{' '}
+          <a href="https://www.gov.br/anpd" target="_blank" rel="noopener noreferrer">
+            gov.br/anpd
+          </a>.
+        </p>
+      </Section>
+
+      <p style={{ marginTop: '2.5rem', fontSize: '0.8rem', color: '#9ca3af' }}>
+        {legal.companyName} — {legal.cnpj} — {legal.address}
+      </p>
+
+      <p style={{ fontSize: '0.8rem', color: '#9ca3af' }}>
+        Veja também: <Link to="/terms">Termos de Serviço</Link>
+      </p>
+    </article>
+  );
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section style={{ marginBottom: '1.75rem' }}>
+      <h2 style={{ fontSize: '1.05rem', fontWeight: 700, color: '#111827', borderBottom: '1px solid #f3f4f6', paddingBottom: '0.375rem', marginBottom: '0.75rem' }}>
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+}
+
+const thStyle: React.CSSProperties = {
+  textAlign: 'left',
+  padding: '0.5rem 0.75rem',
+  fontSize: '0.75rem',
+  fontWeight: 600,
+  color: '#6b7280',
+  textTransform: 'uppercase',
+  letterSpacing: '0.04em',
+};

package/templates/ecommerce/apps/web/src/modules/legal/pages/TermsOfServicePage.tsx

@@ -0,0 +1,175 @@
+import { Link } from 'react-router-dom';
+import { siteConfig } from '../../../shared/config/siteConfig';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+const { name, legal, supportEmail, url } = siteConfig;
+
+export function TermsOfServicePage() {
+  usePageTitle('Termos de Serviço');
+  return (
+    <article style={{ maxWidth: 760, margin: '0 auto', lineHeight: 1.75, color: '#374151' }}>
+      <h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>Termos de Serviço</h1>
+      <p style={{ color: '#9ca3af', fontSize: '0.875rem', marginTop: 0, marginBottom: '2rem' }}>
+        Vigência a partir de: <strong>{legal.termsEffectiveDate}</strong>
+      </p>
+
+      <Section title="1. Aceitação dos Termos">
+        <p>
+          Ao acessar ou utilizar o site <strong>{name}</strong> (<a href={url}>{url}</a>), você concorda em
+          ficar vinculado a estes Termos de Serviço e à nossa{' '}
+          <Link to="/privacy">Política de Privacidade</Link>. Se você não concordar com qualquer parte dos
+          termos, não utilize nossos serviços.
+        </p>
+      </Section>
+
+      <Section title="2. Identificação da Empresa">
+        <Table rows={[
+          ['Razão Social', legal.companyName],
+          ['CNPJ', legal.cnpj],
+          ['Endereço', legal.address],
+          ['E-mail de suporte', supportEmail],
+        ]} />
+      </Section>
+
+      <Section title="3. Produtos e Preços">
+        <p>
+          Os preços exibidos são em Reais (R$) e incluem todos os tributos devidos, salvo indicação em
+          contrário. Nos reservamos o direito de alterar preços a qualquer momento sem aviso prévio. O
+          preço válido é o exibido no momento da finalização do pedido.
+        </p>
+        <p>
+          Imagens dos produtos são meramente ilustrativas. Eventuais variações de cor, tamanho ou acabamento
+          serão descritas na página do produto.
+        </p>
+      </Section>
+
+      <Section title="4. Pedidos e Pagamento">
+        <p>
+          Ao finalizar um pedido, você realiza uma oferta de compra sujeita à nossa confirmação. O pedido
+          só é considerado confirmado após aprovação do pagamento e envio do e-mail de confirmação.
+        </p>
+        <p>
+          Aceitamos os métodos de pagamento listados na etapa de checkout, incluindo cartão de crédito/débito,
+          PIX e boleto bancário. Os pagamentos são processados de forma segura por meio do{' '}
+          <strong>Stripe</strong>.
+        </p>
+      </Section>
+
+      <Section title="5. Prazo de Entrega e Frete">
+        <p>
+          Os prazos de entrega são estimados e podem variar conforme a região. A {name} não se responsabiliza
+          por atrasos causados por transportadoras, greves, desastres naturais ou outras força maior.
+        </p>
+        <p>
+          O valor do frete será informado antes da finalização do pedido.
+        </p>
+      </Section>
+
+      <Section title="6. Política de Troca e Devolução (CDC)">
+        <p>
+          Em conformidade com o <strong>Código de Defesa do Consumidor (Lei 8.078/1990)</strong>:
+        </p>
+        <ul>
+          <li>
+            Você tem o direito de desistir da compra em até <strong>7 (sete) dias corridos</strong> a contar
+            da data de recebimento do produto, sem necessidade de justificativa (direito de arrependimento —
+            art. 49 do CDC).
+          </li>
+          <li>
+            Para produtos com defeito, o prazo para reclamação é de <strong>30 dias</strong> (bens não
+            duráveis) ou <strong>90 dias</strong> (bens duráveis) a partir da entrega.
+          </li>
+          <li>
+            O produto deve ser devolvido em sua embalagem original, sem sinais de uso, com todos os
+            acessórios e nota fiscal.
+          </li>
+          <li>
+            Para solicitar troca ou devolução, entre em contato com nosso suporte em{' '}
+            <a href={`mailto:${supportEmail}`}>{supportEmail}</a>.
+          </li>
+        </ul>
+      </Section>
+
+      <Section title="7. Uso Aceitável">
+        <p>Você concorda em não:</p>
+        <ul>
+          <li>Usar nossos serviços para fins ilegais ou fraudulentos.</li>
+          <li>Tentar acessar áreas restritas ou contas de terceiros sem autorização.</li>
+          <li>Publicar conteúdo ofensivo, falso ou que infrinja direitos de terceiros.</li>
+          <li>Realizar scraping ou coleta automatizada de dados sem consentimento expresso.</li>
+        </ul>
+      </Section>
+
+      <Section title="8. Propriedade Intelectual">
+        <p>
+          Todo o conteúdo disponível no site — textos, logotipo, imagens, ícones e software — é de
+          propriedade exclusiva de <strong>{legal.companyName}</strong> ou licenciado por terceiros. É
+          proibida a reprodução total ou parcial sem autorização prévia e por escrito.
+        </p>
+      </Section>
+
+      <Section title="9. Limitação de Responsabilidade">
+        <p>
+          Na máxima extensão permitida pela legislação brasileira, a {name} não será responsável por danos
+          indiretos, incidentais, especiais ou consequentes decorrentes do uso ou incapacidade de uso dos
+          nossos serviços.
+        </p>
+      </Section>
+
+      <Section title="10. Lei Aplicável e Foro">
+        <p>
+          Estes termos são regidos pelas leis brasileiras. Fica eleito o foro da comarca de{' '}
+          <strong>São Paulo – SP</strong> para dirimir eventuais controvérsias, com renúncia a qualquer
+          outro, por mais privilegiado que seja.
+        </p>
+      </Section>
+
+      <Section title="11. Alterações">
+        <p>
+          Reservamo-nos o direito de modificar estes termos a qualquer momento. As alterações entram em
+          vigor na data de publicação. O uso continuado dos serviços após a publicação das alterações
+          constitui aceitação dos novos termos.
+        </p>
+      </Section>
+
+      <Section title="12. Contato">
+        <p>
+          Dúvidas? Fale conosco em{' '}
+          <a href={`mailto:${supportEmail}`}>{supportEmail}</a>.
+        </p>
+      </Section>
+
+      <p style={{ marginTop: '2.5rem', fontSize: '0.8rem', color: '#9ca3af' }}>
+        {legal.companyName} — {legal.cnpj} — {legal.address}
+      </p>
+    </article>
+  );
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section style={{ marginBottom: '1.75rem' }}>
+      <h2 style={{ fontSize: '1.05rem', fontWeight: 700, color: '#111827', borderBottom: '1px solid #f3f4f6', paddingBottom: '0.375rem', marginBottom: '0.75rem' }}>
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+}
+
+function Table({ rows }: { rows: [string, string][] }) {
+  return (
+    <table style={{ borderCollapse: 'collapse', width: '100%', fontSize: '0.875rem' }}>
+      <tbody>
+        {rows.map(([label, value]) => (
+          <tr key={label} style={{ borderBottom: '1px solid #f3f4f6' }}>
+            <td style={{ padding: '0.5rem 0.75rem', fontWeight: 600, color: '#6b7280', width: '35%' }}>{label}</td>
+            <td style={{ padding: '0.5rem 0.75rem', color: '#111827' }}>{value}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/orders/__tests__/OrderDetailPage.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { OrderDetailPage } from '../pages/OrderDetailPage';
+
+const mockFetch = jest.fn();
+beforeAll(() => { global.fetch = mockFetch; });
+beforeEach(() => mockFetch.mockClear());
+
+function renderPage(orderId = 'test-order-id') {
+  return render(
+    <MemoryRouter initialEntries={[`/orders/${orderId}`]}>
+      <Routes>
+        <Route path="/orders/:id" element={<OrderDetailPage />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+const baseOrder = {
+  id: 'test-order-id',
+  status: 'PAID',
+  total: 150,
+  subtotal: 150,
+  discount: 0,
+  shippingCost: 0,
+  trackingCode: null,
+  createdAt: '2026-01-01T00:00:00.000Z',
+  items: [
+    { id: 'i1', name: 'Camiseta Azul', qty: 2, price: 75, sku: 'CAM-1', productId: 'p1', variantId: 'v1', image: null },
+  ],
+};
+
+describe('OrderDetailPage', () => {
+  it('exibe estado de carregamento inicialmente', () => {
+    mockFetch.mockReturnValue(new Promise(() => {}));
+    renderPage();
+    expect(screen.getByText(/carregando/i)).toBeInTheDocument();
+  });
+
+  it('renderiza detalhes do pedido (itens, total, status)', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => baseOrder,
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByText(/camiseta azul/i)).toBeInTheDocument(),
+    );
+    expect(screen.getByText('PAID')).toBeInTheDocument();
+    expect(screen.getByText(/150/)).toBeInTheDocument();
+  });
+
+  it('exibe trackingCode quando status é SHIPPED', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        ...baseOrder,
+        status: 'SHIPPED',
+        trackingCode: 'BR123456789',
+      }),
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByText(/BR123456789/)).toBeInTheDocument(),
+    );
+  });
+
+  it('exibe mensagem de erro quando pedido não é encontrado (404)', async () => {
+    mockFetch.mockResolvedValue({ ok: false, status: 404 });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toBeInTheDocument(),
+    );
+  });
+});

package/templates/ecommerce/apps/web/src/modules/orders/__tests__/OrderHistoryPage.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { OrderHistoryPage } from '../pages/OrderHistoryPage';
+
+const mockFetch = jest.fn();
+beforeAll(() => { global.fetch = mockFetch; });
+beforeEach(() => mockFetch.mockClear());
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <OrderHistoryPage />
+    </MemoryRouter>,
+  );
+}
+
+describe('OrderHistoryPage', () => {
+  it('exibe estado de carregamento inicialmente', () => {
+    mockFetch.mockReturnValue(new Promise(() => {}));
+    renderPage();
+    expect(screen.getByText(/carregando/i)).toBeInTheDocument();
+  });
+
+  it('renderiza lista de pedidos com status badge', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        items: [
+          {
+            id: 'order-abc-1',
+            status: 'PAID',
+            total: 100,
+            createdAt: '2026-01-01T00:00:00.000Z',
+            items: [],
+          },
+        ],
+        nextCursor: null,
+      }),
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByText(/order-abc-1/i)).toBeInTheDocument(),
+    );
+    expect(screen.getByText('PAID')).toBeInTheDocument();
+  });
+
+  it('exibe mensagem de vazio quando não há pedidos', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ items: [], nextCursor: null }),
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByText(/nenhum pedido/i)).toBeInTheDocument(),
+    );
+  });
+
+  it('cada pedido tem link para /orders/:id', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        items: [
+          {
+            id: 'order-id-1',
+            status: 'PENDING',
+            total: 50,
+            createdAt: '2026-01-01T00:00:00.000Z',
+            items: [],
+          },
+        ],
+        nextCursor: null,
+      }),
+    });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByRole('link')).toHaveAttribute('href', '/orders/order-id-1'),
+    );
+  });
+
+  it('exibe mensagem de erro em caso de falha na requisição', async () => {
+    mockFetch.mockResolvedValue({ ok: false, status: 401 });
+    renderPage();
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toBeInTheDocument(),
+    );
+  });
+});

package/templates/ecommerce/apps/web/src/modules/orders/pages/OrderDetailPage.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { apiFetch } from '../../../shared/lib/apiFetch';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+interface OrderItem {
+  id: string;
+  name: string;
+  sku: string;
+  price: number;
+  qty: number;
+  image: string | null;
+}
+
+interface OrderDetail {
+  id: string;
+  status: string;
+  subtotal: number;
+  discount: number;
+  shippingCost: number;
+  total: number;
+  trackingCode: string | null;
+  createdAt: string;
+  items: OrderItem[];
+}
+
+function formatBRL(value: number) {
+  return value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+}
+
+export function OrderDetailPage() {
+  usePageTitle('Detalhes do Pedido');
+  const { id } = useParams<{ id: string }>();
+  const [order, setOrder] = useState<OrderDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    apiFetch<OrderDetail>(`/api/orders/${id}`)
+      .then((data) => {
+        setOrder(data);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError('Pedido não encontrado');
+        setLoading(false);
+      });
+  }, [id]);
+
+  if (loading) return <p>Carregando...</p>;
+  if (error || !order) return <p role="alert">{error ?? 'Erro desconhecido'}</p>;
+
+  return (
+    <main>
+      <h1>Pedido #{order.id.slice(0, 8)}</h1>
+      <p>
+        Status: <strong>{order.status}</strong>
+      </p>
+      {order.trackingCode && (
+        <p>Código de rastreamento: <strong>{order.trackingCode}</strong></p>
+      )}
+      <h2>Itens</h2>
+      <ul>
+        {order.items.map((item) => (
+          <li key={item.id}>
+            {item.name} × {item.qty} — {formatBRL(item.price)}
+          </li>
+        ))}
+      </ul>
+      <p>Total: {formatBRL(order.total)}</p>
+    </main>
+  );
+}