kybernus 3.0.1 → 3.2.0

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

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { apiFetch } from '../../../shared/lib/apiFetch';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+interface OrderSummary {
+  id: string;
+  status: string;
+  total: number;
+  createdAt: string;
+  items: Array<{ name: string; qty: number }>;
+}
+
+interface OrdersResponse {
+  items: OrderSummary[];
+  nextCursor: string | null;
+}
+
+export function OrderHistoryPage() {
+  usePageTitle('Meus Pedidos');
+  const [orders, setOrders] = useState<OrderSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    apiFetch<OrdersResponse>('/api/orders')
+      .then((data) => {
+        setOrders(data.items);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError('Erro ao carregar pedidos');
+        setLoading(false);
+      });
+  }, []);
+
+  const statusColor: Record<string, string> = {
+    PENDING: '#f59e0b', CONFIRMED: '#3b82f6', PROCESSING: '#8b5cf6',
+    SHIPPED: '#06b6d4', DELIVERED: '#10b981', CANCELLED: '#ef4444',
+  };
+
+  if (loading) return <p style={{ marginTop: '2rem', color: '#6b7280' }}>Carregando...</p>;
+  if (error) return <p role="alert" style={{ color: '#ef4444' }}>{error}</p>;
+  if (orders.length === 0) return (
+    <main style={{ textAlign: 'center', padding: '4rem 2rem' }}>
+      <p style={{ color: '#6b7280', fontSize: '1rem', marginBottom: '1.25rem' }}>
+        Você ainda não fez nenhum pedido.
+      </p>
+      <Link
+        to="/"
+        style={{
+          display: 'inline-block',
+          background: 'var(--color-primary)',
+          color: '#fff',
+          textDecoration: 'none',
+          padding: '0.6rem 1.5rem',
+          borderRadius: '6px',
+          fontWeight: 600,
+          fontSize: '0.9rem',
+        }}
+      >
+        Ver produtos →
+      </Link>
+    </main>
+  );
+
+  return (
+    <main>
+      <h1 style={{ marginBottom: '1.5rem' }}>Meus Pedidos</h1>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+        {orders.map((order) => (
+          <Link
+            key={order.id}
+            to={`/orders/${order.id}`}
+            style={{ textDecoration: 'none', color: 'inherit' }}
+          >
+            <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: '0.75rem', padding: '1rem 1.25rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', transition: 'box-shadow 0.15s' }}
+              onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)'; }}
+              onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.boxShadow = 'none'; }}
+            >
+              <div>
+                <p style={{ fontWeight: 600, fontSize: '0.9rem', marginBottom: '0.25rem' }}>Pedido #{order.id}</p>
+                <p style={{ fontSize: '0.8rem', color: '#6b7280' }}>{order.items.map((i) => `${i.name} x${i.qty}`).join(', ')}</p>
+              </div>
+              <div style={{ textAlign: 'right' }}>
+                <p style={{ fontWeight: 700, color: '#6366f1', marginBottom: '0.25rem' }}>R$ {order.total.toFixed(2).replace('.', ',')}</p>
+                <span style={{ fontSize: '0.75rem', fontWeight: 600, padding: '0.2rem 0.55rem', borderRadius: '9999px', background: `${statusColor[order.status] ?? '#6b7280'}20`, color: statusColor[order.status] ?? '#6b7280' }}>
+                  {order.status}
+                </span>
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </main>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/profile/__tests__/ProfilePage.test.tsx

@@ -0,0 +1,150 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { ProfilePage } from '../pages/ProfilePage';
+import { useAuthStore } from '../../auth/useAuthStore';
+
+const mockFetch = jest.fn();
+beforeAll(() => {
+  global.fetch = mockFetch;
+});
+beforeEach(() => {
+  mockFetch.mockClear();
+  useAuthStore.setState({
+    accessToken: 'test-token',
+    user: { id: 'user-1', name: 'Test User', email: 'test@email.com', role: 'CUSTOMER' },
+  });
+});
+afterAll(() => useAuthStore.setState({ accessToken: null, user: null }));
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <ProfilePage />
+    </MemoryRouter>,
+  );
+}
+
+describe('ProfilePage', () => {
+  // ── Rendering ─────────────────────────────────────────────────────────────
+  it('renderiza campos com os dados do usuário preenchidos', () => {
+    renderPage();
+
+    expect(screen.getByLabelText(/nome/i)).toHaveValue('Test User');
+    expect(screen.getByLabelText(/^email$/i)).toHaveValue('test@email.com');
+  });
+
+  it('exibe a seção de zona de perigo', () => {
+    renderPage();
+    expect(screen.getByText(/zona de perigo/i)).toBeInTheDocument();
+  });
+
+  // ── Update profile ────────────────────────────────────────────────────────
+  it('atualiza dados pessoais com sucesso', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        id: 'user-1',
+        name: 'Novo Nome',
+        email: 'test@email.com',
+        role: 'CUSTOMER',
+      }),
+    });
+
+    renderPage();
+
+    const nameInput = screen.getByLabelText(/nome/i);
+    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, 'Novo Nome');
+    await userEvent.click(screen.getByRole('button', { name: /salvar/i }));
+
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toHaveTextContent(/sucesso/i),
+    );
+    expect(mockFetch).toHaveBeenCalledWith('/api/me', expect.objectContaining({ method: 'PATCH' }));
+  });
+
+  it('exibe mensagem de erro quando atualização falha', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 409,
+      json: async () => ({ message: 'Email já está em uso' }),
+    });
+
+    renderPage();
+
+    await userEvent.click(screen.getByRole('button', { name: /salvar/i }));
+
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toBeInTheDocument(),
+    );
+  });
+
+  // ── Change password ───────────────────────────────────────────────────────
+  it('troca a senha com sucesso', async () => {
+    mockFetch.mockResolvedValueOnce({ ok: true });
+
+    renderPage();
+
+    await userEvent.type(screen.getByLabelText(/senha atual/i), 'senha1234');
+    await userEvent.type(screen.getByLabelText(/^nova senha$/i), 'novasenha5678');
+    await userEvent.type(screen.getByLabelText(/confirmar nova senha/i), 'novasenha5678');
+    await userEvent.click(screen.getByRole('button', { name: /alterar senha/i }));
+
+    await waitFor(() =>
+      expect(screen.getByText(/sucesso/i)).toBeInTheDocument(),
+    );
+    expect(mockFetch).toHaveBeenCalledWith('/api/me/password', expect.objectContaining({ method: 'PATCH' }));
+  });
+
+  it('exibe erro quando senhas novas não coincidem', async () => {
+    renderPage();
+
+    await userEvent.type(screen.getByLabelText(/senha atual/i), 'senha1234');
+    await userEvent.type(screen.getByLabelText(/^nova senha$/i), 'novasenha5678');
+    await userEvent.type(screen.getByLabelText(/confirmar nova senha/i), 'outrasenha');
+    await userEvent.click(screen.getByRole('button', { name: /alterar senha/i }));
+
+    await waitFor(() =>
+      expect(screen.getByText(/não coincidem/i)).toBeInTheDocument(),
+    );
+    expect(mockFetch).not.toHaveBeenCalled();
+  });
+
+  // ── Delete account ────────────────────────────────────────────────────────
+  it('abre o modal de confirmação ao clicar em excluir minha conta', async () => {
+    renderPage();
+
+    await userEvent.click(screen.getByRole('button', { name: /excluir minha conta/i }));
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByLabelText(/senha para confirmar exclusão/i)).toBeInTheDocument();
+  });
+
+  it('fecha o modal ao clicar em cancelar', async () => {
+    renderPage();
+
+    await userEvent.click(screen.getByRole('button', { name: /excluir minha conta/i }));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: /cancelar/i }));
+
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('exclui a conta com a senha correta e redireciona', async () => {
+    mockFetch.mockResolvedValueOnce({ ok: true });
+
+    renderPage();
+
+    await userEvent.click(screen.getByRole('button', { name: /excluir minha conta/i }));
+    await userEvent.type(screen.getByLabelText(/senha para confirmar exclusão/i), 'senha1234');
+    await userEvent.click(screen.getByRole('button', { name: /^excluir conta$/i }));
+
+    await waitFor(() =>
+      expect(mockFetch).toHaveBeenCalledWith('/api/me', expect.objectContaining({ method: 'DELETE' })),
+    );
+  });
+});

package/templates/ecommerce/apps/web/src/modules/profile/pages/ProfilePage.tsx

@@ -0,0 +1,275 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuthStore } from '../../auth/useAuthStore';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+const fieldStyle: React.CSSProperties = {
+  display: 'block',
+  width: '100%',
+  padding: '0.5rem 0.75rem',
+  border: '1px solid #d1d5db',
+  borderRadius: '6px',
+  fontSize: '0.95rem',
+  fontFamily: 'var(--font-family)',
+  boxSizing: 'border-box',
+};
+
+const btnPrimary: React.CSSProperties = {
+  background: 'var(--color-primary)',
+  color: '#fff',
+  border: 'none',
+  borderRadius: '6px',
+  padding: '0.55rem 1.25rem',
+  fontSize: '0.9rem',
+  cursor: 'pointer',
+  fontFamily: 'var(--font-family)',
+};
+
+const btnDanger: React.CSSProperties = {
+  ...btnPrimary,
+  background: '#ef4444',
+};
+
+const card: React.CSSProperties = {
+  background: '#fff',
+  border: '1px solid #e5e7eb',
+  borderRadius: '8px',
+  padding: '1.5rem',
+  marginBottom: '1.5rem',
+};
+
+export function ProfilePage() {
+  usePageTitle('Meu Perfil');
+  const { user, updateProfile, changePassword, deleteAccount } = useAuthStore();
+  const navigate = useNavigate();
+
+  // ── Personal data section ────────────────────────────────────────────────
+  const [name, setName] = useState(user?.name ?? '');
+  const [email, setEmail] = useState(user?.email ?? '');
+  const [profileMsg, setProfileMsg] = useState<{ text: string; ok: boolean } | null>(null);
+  const [profileLoading, setProfileLoading] = useState(false);
+
+  async function handleUpdateProfile(e: React.FormEvent) {
+    e.preventDefault();
+    setProfileMsg(null);
+    setProfileLoading(true);
+    try {
+      await updateProfile({ name: name.trim() || undefined, email: email.trim() || undefined });
+      setProfileMsg({ text: 'Dados atualizados com sucesso!', ok: true });
+    } catch (err) {
+      setProfileMsg({ text: err instanceof Error ? err.message : 'Erro ao atualizar', ok: false });
+    } finally {
+      setProfileLoading(false);
+    }
+  }
+
+  // ── Change password section ───────────────────────────────────────────────
+  const [currentPwd, setCurrentPwd] = useState('');
+  const [newPwd, setNewPwd] = useState('');
+  const [confirmPwd, setConfirmPwd] = useState('');
+  const [pwdMsg, setPwdMsg] = useState<{ text: string; ok: boolean } | null>(null);
+  const [pwdLoading, setPwdLoading] = useState(false);
+
+  async function handleChangePassword(e: React.FormEvent) {
+    e.preventDefault();
+    setPwdMsg(null);
+    if (newPwd !== confirmPwd) {
+      setPwdMsg({ text: 'As senhas não coincidem', ok: false });
+      return;
+    }
+    setPwdLoading(true);
+    try {
+      await changePassword({ currentPassword: currentPwd, newPassword: newPwd });
+      setPwdMsg({ text: 'Senha alterada com sucesso!', ok: true });
+      setCurrentPwd('');
+      setNewPwd('');
+      setConfirmPwd('');
+    } catch (err) {
+      setPwdMsg({ text: err instanceof Error ? err.message : 'Erro ao trocar senha', ok: false });
+    } finally {
+      setPwdLoading(false);
+    }
+  }
+
+  // ── Delete account section ────────────────────────────────────────────────
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [deletePwd, setDeletePwd] = useState('');
+  const [deleteMsg, setDeleteMsg] = useState<string | null>(null);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+
+  async function handleDeleteAccount() {
+    setDeleteMsg(null);
+    setDeleteLoading(true);
+    try {
+      await deleteAccount(deletePwd);
+      navigate('/');
+    } catch (err) {
+      setDeleteMsg(err instanceof Error ? err.message : 'Erro ao excluir conta');
+      setDeleteLoading(false);
+    }
+  }
+
+  return (
+    <main style={{ maxWidth: '640px', margin: '2rem auto', padding: '0 1rem' }}>
+      <h1 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '1.5rem' }}>Meu Perfil</h1>
+
+      {/* ── Dados pessoais ────────────────────────────────────────────────── */}
+      <section style={card}>
+        <h2 style={{ fontSize: '1.1rem', fontWeight: 600, marginTop: 0, marginBottom: '1rem' }}>
+          Dados Pessoais
+        </h2>
+        <form onSubmit={(e) => { void handleUpdateProfile(e); }}>
+          <label style={{ display: 'block', marginBottom: '1rem' }}>
+            <span style={{ display: 'block', fontSize: '0.85rem', fontWeight: 500, marginBottom: '0.35rem' }}>
+              Nome
+            </span>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              style={fieldStyle}
+              aria-label="Nome"
+            />
+          </label>
+          <label style={{ display: 'block', marginBottom: '1rem' }}>
+            <span style={{ display: 'block', fontSize: '0.85rem', fontWeight: 500, marginBottom: '0.35rem' }}>
+              Email
+            </span>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              style={fieldStyle}
+              aria-label="Email"
+            />
+          </label>
+          {profileMsg && (
+            <p role="alert" style={{ color: profileMsg.ok ? '#10b981' : '#ef4444', fontSize: '0.875rem', marginBottom: '0.75rem' }}>
+              {profileMsg.text}
+            </p>
+          )}
+          <button type="submit" style={btnPrimary} disabled={profileLoading}>
+            {profileLoading ? 'Salvando...' : 'Salvar alterações'}
+          </button>
+        </form>
+      </section>
+
+      {/* ── Trocar senha ─────────────────────────────────────────────────── */}
+      <section style={card}>
+        <h2 style={{ fontSize: '1.1rem', fontWeight: 600, marginTop: 0, marginBottom: '1rem' }}>
+          Trocar Senha
+        </h2>
+        <form onSubmit={(e) => { void handleChangePassword(e); }}>
+          <label style={{ display: 'block', marginBottom: '1rem' }}>
+            <span style={{ display: 'block', fontSize: '0.85rem', fontWeight: 500, marginBottom: '0.35rem' }}>
+              Senha atual
+            </span>
+            <input
+              type="password"
+              value={currentPwd}
+              onChange={(e) => setCurrentPwd(e.target.value)}
+              style={fieldStyle}
+              aria-label="Senha atual"
+            />
+          </label>
+          <label style={{ display: 'block', marginBottom: '1rem' }}>
+            <span style={{ display: 'block', fontSize: '0.85rem', fontWeight: 500, marginBottom: '0.35rem' }}>
+              Nova senha
+            </span>
+            <input
+              type="password"
+              value={newPwd}
+              onChange={(e) => setNewPwd(e.target.value)}
+              style={fieldStyle}
+              aria-label="Nova senha"
+            />
+          </label>
+          <label style={{ display: 'block', marginBottom: '1rem' }}>
+            <span style={{ display: 'block', fontSize: '0.85rem', fontWeight: 500, marginBottom: '0.35rem' }}>
+              Confirmar nova senha
+            </span>
+            <input
+              type="password"
+              value={confirmPwd}
+              onChange={(e) => setConfirmPwd(e.target.value)}
+              style={fieldStyle}
+              aria-label="Confirmar nova senha"
+            />
+          </label>
+          {pwdMsg && (
+            <p role="alert" style={{ color: pwdMsg.ok ? '#10b981' : '#ef4444', fontSize: '0.875rem', marginBottom: '0.75rem' }}>
+              {pwdMsg.text}
+            </p>
+          )}
+          <button type="submit" style={btnPrimary} disabled={pwdLoading}>
+            {pwdLoading ? 'Alterando...' : 'Alterar senha'}
+          </button>
+        </form>
+      </section>
+
+      {/* ── Zona de perigo ────────────────────────────────────────────────── */}
+      <section style={{ ...card, borderColor: '#fecaca' }}>
+        <h2 style={{ fontSize: '1.1rem', fontWeight: 600, color: '#ef4444', marginTop: 0, marginBottom: '0.75rem' }}>
+          Zona de Perigo
+        </h2>
+        <p style={{ fontSize: '0.875rem', color: '#6b7280', marginBottom: '1rem' }}>
+          Ao excluir sua conta todos os seus dados serão removidos permanentemente. Esta ação não pode ser desfeita.
+        </p>
+        <button type="button" style={btnDanger} onClick={() => setShowDeleteModal(true)}>
+          Excluir minha conta
+        </button>
+      </section>
+
+      {/* ── Modal de confirmação de exclusão ─────────────────────────────── */}
+      {showDeleteModal && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label="Confirmar exclusão de conta"
+          style={{
+            position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            zIndex: 1000,
+          }}
+        >
+          <div style={{ background: '#fff', borderRadius: '10px', padding: '2rem', maxWidth: '420px', width: '90%' }}>
+            <h3 style={{ fontSize: '1.1rem', fontWeight: 700, marginTop: 0 }}>Confirmar exclusão</h3>
+            <p style={{ fontSize: '0.875rem', color: '#6b7280', marginBottom: '1rem' }}>
+              Digite sua senha para confirmar a exclusão permanente da sua conta.
+            </p>
+            <input
+              type="password"
+              placeholder="Sua senha"
+              value={deletePwd}
+              onChange={(e) => setDeletePwd(e.target.value)}
+              style={{ ...fieldStyle, marginBottom: '1rem' }}
+              aria-label="Senha para confirmar exclusão"
+            />
+            {deleteMsg && (
+              <p role="alert" style={{ color: '#ef4444', fontSize: '0.875rem', marginBottom: '0.75rem' }}>
+                {deleteMsg}
+              </p>
+            )}
+            <div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'flex-end' }}>
+              <button
+                type="button"
+                onClick={() => { setShowDeleteModal(false); setDeletePwd(''); setDeleteMsg(null); }}
+                style={{ ...btnPrimary, background: '#6b7280' }}
+              >
+                Cancelar
+              </button>
+              <button
+                type="button"
+                style={btnDanger}
+                disabled={deleteLoading || !deletePwd}
+                onClick={() => { void handleDeleteAccount(); }}
+              >
+                {deleteLoading ? 'Excluindo...' : 'Excluir conta'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}

package/templates/ecommerce/apps/web/src/setupTests.ts

@@ -0,0 +1,10 @@
+import '@testing-library/jest-dom';
+import { TextEncoder, TextDecoder } from 'util';
+
+// React Router v7 requires TextEncoder/TextDecoder which jsdom doesn't provide
+if (typeof globalThis.TextEncoder === 'undefined') {
+  globalThis.TextEncoder = TextEncoder as typeof globalThis.TextEncoder;
+}
+if (typeof globalThis.TextDecoder === 'undefined') {
+  globalThis.TextDecoder = TextDecoder as typeof globalThis.TextDecoder;
+}

package/templates/ecommerce/apps/web/src/shared/components/CookieConsent.tsx

@@ -0,0 +1,108 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { siteConfig } from '../config/siteConfig';
+
+const STORAGE_KEY = siteConfig.cookies.storageKey;
+
+type Consent = 'accepted' | 'declined';
+
+function getStoredConsent(): Consent | null {
+  try {
+    const val = localStorage.getItem(STORAGE_KEY);
+    if (val === 'accepted' || val === 'declined') return val;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export function CookieConsent() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    // Only show if the user hasn't decided yet
+    if (getStoredConsent() === null) {
+      setVisible(true);
+    }
+  }, []);
+
+  function handleAccept() {
+    try { localStorage.setItem(STORAGE_KEY, 'accepted'); } catch { /* private mode */ }
+    setVisible(false);
+  }
+
+  function handleDecline() {
+    try { localStorage.setItem(STORAGE_KEY, 'declined'); } catch { /* private mode */ }
+    setVisible(false);
+  }
+
+  if (!visible) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-live="polite"
+      aria-label="Aviso de cookies"
+      style={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 2000,
+        background: '#1f2937',
+        color: '#f9fafb',
+        padding: '1rem 1.5rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '1rem',
+        flexWrap: 'wrap',
+        boxShadow: '0 -4px 12px rgba(0,0,0,0.25)',
+        fontSize: '0.875rem',
+      }}
+    >
+      <p style={{ margin: 0, flex: 1 }}>
+        🍪 Utilizamos cookies para melhorar sua experiência de navegação. Ao continuar, você concorda com
+        nossa{' '}
+        <Link to="/privacy" style={{ color: '#a5b4fc', textDecoration: 'underline' }}>
+          Política de Privacidade
+        </Link>{' '}
+        e com o uso de cookies. Em conformidade com a{' '}
+        <strong>LGPD (Lei 13.709/2018)</strong>.
+      </p>
+      <div style={{ display: 'flex', gap: '0.625rem', flexShrink: 0 }}>
+        <button
+          onClick={handleDecline}
+          style={{
+            background: 'transparent',
+            border: '1px solid #4b5563',
+            color: '#d1d5db',
+            borderRadius: '6px',
+            padding: '0.4rem 1rem',
+            cursor: 'pointer',
+            fontSize: '0.8rem',
+            fontFamily: 'inherit',
+          }}
+        >
+          Recusar
+        </button>
+        <button
+          onClick={handleAccept}
+          style={{
+            background: '#6366f1',
+            border: 'none',
+            color: '#fff',
+            borderRadius: '6px',
+            padding: '0.4rem 1.25rem',
+            cursor: 'pointer',
+            fontWeight: 600,
+            fontSize: '0.8rem',
+            fontFamily: 'inherit',
+          }}
+        >
+          Aceitar
+        </button>
+      </div>
+    </div>
+  );
+}