kybernus 3.0.1 → 3.2.0

package/templates/ecommerce/apps/web/src/modules/catalog/components/ProductCard.tsx

@@ -0,0 +1,78 @@
+import { Link } from 'react-router-dom';
+
+interface ProductVariant {
+  stock: number;
+}
+
+interface ProductCardProps {
+  product: {
+    id: string;
+    name: string;
+    slug: string;
+    price: number;
+    images: readonly string[];
+    variants: ProductVariant[];
+  };
+}
+
+export function ProductCard({ product }: ProductCardProps) {
+  const { name, slug, price, images, variants } = product;
+  const outOfStock = variants.length > 0 && variants.every((v) => v.stock === 0);
+  const formattedPrice = new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL',
+  }).format(price);
+
+  return (
+    <Link
+      to={`/products/${slug}`}
+      style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}
+    >
+      <div
+        style={{
+          background: '#ffffff',
+          border: '1px solid #e5e7eb',
+          borderRadius: '0.75rem',
+          overflow: 'hidden',
+          transition: 'box-shadow 0.18s ease, transform 0.18s ease',
+          cursor: 'pointer',
+        }}
+        onMouseEnter={(e) => {
+          const el = e.currentTarget as HTMLDivElement;
+          el.style.boxShadow = '0 8px 24px rgba(0,0,0,0.10)';
+          el.style.transform = 'translateY(-2px)';
+        }}
+        onMouseLeave={(e) => {
+          const el = e.currentTarget as HTMLDivElement;
+          el.style.boxShadow = 'none';
+          el.style.transform = 'none';
+        }}
+      >
+        {images[0] ? (
+          <img
+            src={images[0]}
+            alt={name}
+            style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', display: 'block' }}
+          />
+        ) : (
+          <div style={{ width: '100%', aspectRatio: '1', background: '#f3f4f6', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '2.5rem' }}>
+            🛍️
+          </div>
+        )}
+        <div style={{ padding: '0.875rem' }}>
+          <h2 style={{ fontSize: '0.9375rem', fontWeight: 600, marginBottom: '0.375rem', color: '#111827', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {name}
+          </h2>
+          <p style={{ fontSize: '1rem', fontWeight: 700, color: '#6366f1' }}>
+            {formattedPrice}
+          </p>
+          {outOfStock && (
+            <span style={{ display: 'inline-block', marginTop: '0.375rem', fontSize: '0.75rem', background: '#fee2e2', color: '#dc2626', padding: '0.15rem 0.5rem', borderRadius: '9999px', fontWeight: 500 }}>
+              Sem Estoque
+            </span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/catalog/components/ProductFilters.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface Category {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+interface Filters {
+  categorySlug?: string;
+  q?: string;
+}
+
+interface ProductFiltersProps {
+  categories: Category[];
+  onFilterChange: (filters: Record<string, unknown>) => void;
+}
+
+export function ProductFilters({ categories, onFilterChange }: ProductFiltersProps) {
+  const [filters, setFilters] = useState<Filters>({});
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  function handleCategoryChange(e: React.ChangeEvent<HTMLSelectElement>) {
+    const value = e.target.value;
+    const next: Filters = value ? { ...filters, categorySlug: value } : { ...filters };
+    if (!value) delete next.categorySlug;
+    setFilters(next);
+    onFilterChange(value ? { categorySlug: value } : {});
+  }
+
+  function handleSearchChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const value = e.target.value;
+    const next = { ...filters, q: value };
+    setFilters(next);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      onFilterChange(value ? { q: value } : {});
+    }, 300);
+  }
+
+  function handleClear() {
+    setFilters({});
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    onFilterChange({});
+  }
+
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  return (
+    <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center', marginBottom: '1.5rem' }}>
+      <select
+        aria-label="Filtrar por categoria"
+        value={filters.categorySlug ?? ''}
+        onChange={handleCategoryChange}
+        style={{ width: 'auto', minWidth: '180px' }}
+      >
+        <option value="">Todas as categorias</option>
+        {categories.map((cat) => (
+          <option key={cat.id} value={cat.slug}>
+            {cat.name}
+          </option>
+        ))}
+      </select>
+      <input
+        type="text"
+        aria-label="Buscar produtos"
+        value={filters.q ?? ''}
+        onChange={handleSearchChange}
+        placeholder="Buscar produtos..."
+        style={{ width: 'auto', minWidth: '220px', flex: 1 }}
+      />
+      <button
+        type="button"
+        onClick={handleClear}
+        style={{
+          padding: '0.5625rem 1rem',
+          background: 'transparent',
+          border: '1.5px solid #d1d5db',
+          borderRadius: '0.5rem',
+          color: '#6b7280',
+          fontWeight: 500,
+          fontSize: '0.875rem',
+          whiteSpace: 'nowrap',
+          transition: 'border-color 0.15s, color 0.15s',
+          width: 'auto',
+        }}
+        onMouseEnter={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.borderColor = '#6366f1';
+          (e.currentTarget as HTMLButtonElement).style.color = '#6366f1';
+        }}
+        onMouseLeave={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.borderColor = '#d1d5db';
+          (e.currentTarget as HTMLButtonElement).style.color = '#6b7280';
+        }}
+      >
+        Limpar
+      </button>
+    </div>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/catalog/pages/ProductDetailPage.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { apiFetch } from '../../../shared/lib/apiFetch';
+import { useAuthStore } from '../../auth/useAuthStore';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+interface ProductVariant {
+  id: string;
+  sku: string;
+  size: string | null;
+  color: string | null;
+  stock: number;
+  price: number | null;
+}
+
+interface Product {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  price: number;
+  images: string[];
+  variants: ProductVariant[];
+}
+
+function formatBRL(value: number) {
+  return value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+}
+
+type AddStatus = 'idle' | 'adding' | 'added' | 'error';
+
+export function ProductDetailPage() {
+  const { slug } = useParams<{ slug: string }>();
+  const navigate = useNavigate();
+  const accessToken = useAuthStore((s) => s.accessToken);
+
+  const [product, setProduct] = useState<Product | null>(null);
+  usePageTitle(product?.name ?? 'Produto');
+  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [addStatus, setAddStatus] = useState<AddStatus>('idle');
+
+  useEffect(() => {
+    if (!slug) return;
+    setLoading(true);
+    apiFetch<Product>(`/api/products/${slug}`)
+      .then((p) => {
+        setProduct(p);
+        const inStock = p.variants.find((v) => v.stock > 0);
+        setSelectedVariant(inStock ?? p.variants[0] ?? null);
+      })
+      .catch(() => setError('Produto não encontrado'))
+      .finally(() => setLoading(false));
+  }, [slug]);
+
+  async function handleAddToCart() {
+    if (!accessToken) {
+      navigate('/login');
+      return;
+    }
+    if (!selectedVariant) return;
+    setAddStatus('adding');
+    try {
+      await apiFetch('/api/cart/items', {
+        method: 'POST',
+        body: JSON.stringify({ variantId: selectedVariant.id, qty: 1 }),
+      });
+      setAddStatus('added');
+      setTimeout(() => setAddStatus('idle'), 2500);
+    } catch {
+      setAddStatus('error');
+      setTimeout(() => setAddStatus('idle'), 2500);
+    }
+  }
+
+  if (loading) return <p style={{ marginTop: '2rem', color: 'var(--color-text-muted)' }}>Carregando...</p>;
+  if (error || !product) return <p role="alert" style={{ color: '#ef4444' }}>{error || 'Produto não encontrado'}</p>;
+
+  const inStock = selectedVariant ? selectedVariant.stock > 0 : product.variants.some((v) => v.stock > 0);
+  const addLabel =
+    addStatus === 'adding' ? 'Adicionando...' :
+    addStatus === 'added'  ? '✓ Adicionado!' :
+    addStatus === 'error'  ? 'Erro — tente novamente' :
+    'Adicionar ao carrinho';
+
+  return (
+    <div style={{ maxWidth: 860 }}>
+      <button
+        type="button"
+        onClick={() => navigate(-1)}
+        style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-primary)', marginBottom: '1.5rem', padding: 0, fontSize: '0.95rem' }}
+      >
+        ← Voltar
+      </button>
+
+      <div style={{ display: 'grid', gridTemplateColumns: product.images.length ? '1fr 1fr' : '1fr', gap: '2.5rem', alignItems: 'start' }}>
+        {product.images.length > 0 && (
+          <img
+            src={product.images[0]}
+            alt={product.name}
+            style={{ width: '100%', borderRadius: '10px', objectFit: 'cover', aspectRatio: '1' }}
+          />
+        )}
+
+        <div>
+          <h1 style={{ marginBottom: '0.5rem', fontFamily: 'var(--font-family)', fontSize: '1.75rem' }}>
+            {product.name}
+          </h1>
+          <p style={{ fontSize: '2rem', fontWeight: 700, color: 'var(--color-primary)', marginBottom: '1rem' }}>
+            {formatBRL(product.price)}
+          </p>
+
+          {product.description && (
+            <p style={{ color: 'var(--color-text-muted)', marginBottom: '1.5rem', lineHeight: 1.65 }}>
+              {product.description}
+            </p>
+          )}
+
+          {product.variants.length > 1 && (
+            <div style={{ marginBottom: '1.5rem' }}>
+              <p style={{ fontWeight: 600, marginBottom: '0.5rem', fontSize: '0.9rem' }}>Variação</p>
+              <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+                {product.variants.map((v) => {
+                  const isSelected = selectedVariant?.id === v.id;
+                  return (
+                    <button
+                      key={v.id}
+                      type="button"
+                      disabled={v.stock === 0}
+                      onClick={() => setSelectedVariant(v)}
+                      style={{
+                        padding: '0.4rem 0.9rem',
+                        border: `2px solid ${isSelected ? 'var(--color-primary)' : '#d1d5db'}`,
+                        borderRadius: '5px',
+                        cursor: v.stock === 0 ? 'not-allowed' : 'pointer',
+                        opacity: v.stock === 0 ? 0.45 : 1,
+                        background: isSelected ? 'var(--color-primary)' : 'white',
+                        color: isSelected ? 'white' : 'inherit',
+                        fontFamily: 'var(--font-family)',
+                      }}
+                    >
+                      {v.size ?? v.color ?? v.sku}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {!inStock && (
+            <p style={{ color: '#ef4444', marginBottom: '1rem', fontWeight: 600 }}>Produto sem estoque</p>
+          )}
+
+          <button
+            type="button"
+            disabled={!inStock || addStatus === 'adding'}
+            onClick={handleAddToCart}
+            style={{
+              width: '100%',
+              padding: '0.85rem 1.5rem',
+              background: inStock ? 'var(--color-primary)' : '#9ca3af',
+              color: 'white',
+              border: 'none',
+              borderRadius: '7px',
+              fontSize: '1rem',
+              fontWeight: 600,
+              cursor: inStock ? 'pointer' : 'not-allowed',
+              fontFamily: 'var(--font-family)',
+              transition: 'opacity 0.15s',
+            }}
+          >
+            {addLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/catalog/pages/ProductListPage.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useState, useCallback } from 'react';
+import { apiFetch } from '../../../shared/lib/apiFetch';
+import { ProductCard } from '../components/ProductCard';
+import { ProductFilters } from '../components/ProductFilters';
+import { usePageTitle } from '../../../shared/hooks/usePageTitle';
+
+interface Category {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+interface ProductVariant {
+  id: string;
+  sku: string;
+  stock: number;
+  price: number | null;
+}
+
+interface Product {
+  id: string;
+  name: string;
+  slug: string;
+  price: number;
+  images: string[];
+  variants: ProductVariant[];
+}
+
+interface ProductsResponse {
+  items: Product[];
+  nextCursor: string | null;
+}
+
+export function ProductListPage() {
+  usePageTitle('Produtos');
+  const [products, setProducts] = useState<Product[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [filters, setFilters] = useState<Record<string, unknown>>({});
+
+  useEffect(() => {
+    apiFetch<{ data: Category[] }>('/api/categories')
+      .then((res) => setCategories(res.data))
+      .catch(() => {});
+  }, []);
+
+  const fetchProducts = useCallback(() => {
+    setIsLoading(true);
+    const params = new URLSearchParams();
+    if (filters['categorySlug']) params.set('categorySlug', String(filters['categorySlug']));
+    if (filters['q']) params.set('q', String(filters['q']));
+    const qs = params.toString();
+    apiFetch<ProductsResponse>(`/api/products${qs ? `?${qs}` : ''}`)
+      .then((res) => {
+        setProducts(res.items);
+        setError('');
+      })
+      .catch(() => setError('Erro ao carregar produtos'))
+      .finally(() => setIsLoading(false));
+  }, [filters]);
+
+  useEffect(() => {
+    fetchProducts();
+  }, [fetchProducts]);
+
+  return (
+    <div>
+      <h1 style={{ marginBottom: '1rem', fontFamily: 'var(--font-family)' }}>Produtos</h1>
+      <ProductFilters categories={categories} onFilterChange={setFilters} />
+
+      {isLoading && (
+        <p style={{ marginTop: '2rem', color: 'var(--color-text-muted)' }}>Carregando...</p>
+      )}
+      {error && (
+        <p role="alert" style={{ marginTop: '2rem', color: '#ef4444' }}>
+          {error}
+        </p>
+      )}
+      {!isLoading && !error && products.length === 0 && (
+        <p style={{ marginTop: '2rem', color: 'var(--color-text-muted)' }}>
+          Nenhum produto encontrado.
+        </p>
+      )}
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+          gap: '1.25rem',
+          marginTop: '1.5rem',
+        }}
+      >
+        {products.map((p) => (
+          <ProductCard key={p.id} product={p} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/ecommerce/apps/web/src/modules/checkout/__tests__/CheckoutPage.test.tsx

@@ -0,0 +1,159 @@
+/**
+ * CheckoutPage — Frontend Tests
+ * Stripe Elements are fully mocked.
+ */
+
+jest.mock('@stripe/react-stripe-js', () => ({
+  Elements: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  PaymentElement: () => <div data-testid="payment-element">PaymentElement mock</div>,
+  useStripe: () => mockStripe,
+  useElements: () => mockElements,
+}));
+
+jest.mock('@stripe/stripe-js', () => ({
+  loadStripe: jest.fn().mockResolvedValue({}),
+}));
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { CheckoutPage } from '../pages/CheckoutPage';
+
+const mockConfirmPayment = jest.fn();
+const mockStripe = {
+  confirmPayment: mockConfirmPayment,
+};
+const mockElements = {};
+
+// Cart summary fixture
+const mockCart = {
+  items: [{ variantId: 'v1', productId: 'p1', name: 'Camiseta', sku: 'CAM-P', price: 99.9, qty: 2, image: null }],
+  subtotal: 199.8,
+  discount: 0,
+  total: 218.3,
+  couponCode: null,
+};
+
+jest.mock('../hooks/useCheckout', () => ({
+  useCheckout: () => ({
+    cart: mockCart,
+    checkout: mockCheckout,
+    isLoading: false,
+    error: null,
+  }),
+}));
+
+const mockCheckout = jest.fn();
+
+function renderPage() {
+  return render(
+    <MemoryRouter initialEntries={['/checkout']}>
+      <Routes>
+        <Route path="/checkout" element={<CheckoutPage />} />
+        <Route path="/checkout/success" element={<div>Sucesso!</div>} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+async function advanceToPayment(user: ReturnType<typeof userEvent.setup>) {
+  fireEvent.change(screen.getByLabelText(/rua|endere[çc]o/i), { target: { value: 'Rua das Flores, 100' } });
+  fireEvent.change(screen.getByLabelText(/cep/i), { target: { value: '01310-100' } });
+  await user.click(screen.getByRole('button', { name: /pr[oó]ximo|avan[çc]ar|continuar/i }));
+  await waitFor(() => screen.getByText(/frete/i));
+  await user.click(screen.getByRole('button', { name: /pr[oó]ximo|avan[çc]ar|continuar/i }));
+  await waitFor(() => screen.getByTestId('payment-element'));
+}
+
+describe('CheckoutPage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('deve exibir resumo do carrinho', () => {
+    renderPage();
+    expect(screen.getByText('Camiseta')).toBeInTheDocument();
+    expect(screen.getByText(/R\$\s*199[,.]?8/)).toBeInTheDocument();
+  });
+
+  it('deve progredir pelo stepper: Endereço → Frete → Pagamento', async () => {
+    renderPage();
+    const user = userEvent.setup();
+
+    // Should start on Endereço step
+    expect(screen.getByText(/endere[çc]o/i)).toBeInTheDocument();
+
+    // Fill address and advance
+    fireEvent.change(screen.getByLabelText(/rua|endere[çc]o/i), { target: { value: 'Rua das Flores, 100' } });
+    fireEvent.change(screen.getByLabelText(/cep/i), { target: { value: '01310-100' } });
+    await user.click(screen.getByRole('button', { name: /pr[oó]ximo|avan[çc]ar|continuar/i }));
+
+    // Frete step
+    await waitFor(() => expect(screen.getByText(/frete/i)).toBeInTheDocument());
+  });
+
+  it('deve renderizar o PaymentElement no step de Pagamento', async () => {
+    mockCheckout.mockResolvedValue({ orderId: 'ord-0', clientSecret: 'pi_secret_0' });
+    renderPage();
+    const user = userEvent.setup();
+    await advanceToPayment(user);
+    expect(screen.getByTestId('payment-element')).toBeInTheDocument();
+  });
+
+  it('deve redirecionar para /checkout/success após pagamento confirmado', async () => {
+    mockCheckout.mockResolvedValue({ orderId: 'ord-1', clientSecret: 'pi_secret_1' });
+    mockConfirmPayment.mockResolvedValue({ error: undefined });
+
+    renderPage();
+    const user = userEvent.setup();
+    await advanceToPayment(user);
+
+    // Submit payment
+    await user.click(screen.getByRole('button', { name: /confirmar pagamento/i }));
+
+    await waitFor(() => expect(screen.getByText('Sucesso!')).toBeInTheDocument());
+  });
+
+  it('deve exibir erro se Stripe retornar erro de pagamento', async () => {
+    mockCheckout.mockResolvedValue({ orderId: 'ord-2', clientSecret: 'pi_secret_2' });
+    mockConfirmPayment.mockResolvedValue({
+      error: { code: 'card_declined', message: 'Cartão recusado.' },
+    });
+
+    renderPage();
+    const user = userEvent.setup();
+    await advanceToPayment(user);
+    await user.click(screen.getByRole('button', { name: /confirmar pagamento/i }));
+
+    await waitFor(() => expect(screen.getByText(/cart[aã]o recusado/i)).toBeInTheDocument());
+  });
+
+  it('deve exibir BoletoWaiting quando Stripe retornar boleto_display_details', async () => {
+    mockCheckout.mockResolvedValue({ orderId: 'ord-3', clientSecret: 'pi_secret_3' });
+    mockConfirmPayment.mockResolvedValue({
+      error: undefined,
+      paymentIntent: {
+        status: 'requires_action',
+        next_action: {
+          type: 'boleto_display_details',
+          boleto_display_details: {
+            expires_after: Math.floor(Date.now() / 1000) + 3 * 24 * 3600,
+            hosted_voucher_url: 'https://payments.stripe.com/boleto/voucher',
+            number: '23793.38128 60007.827136 96000.063305 4 94190000050000',
+            pdf: 'https://payments.stripe.com/boleto/pdf',
+          },
+        },
+      },
+    });
+
+    renderPage();
+    const user = userEvent.setup();
+    await advanceToPayment(user);
+    await user.click(screen.getByRole('button', { name: /confirmar pagamento/i }));
+
+    await waitFor(() => expect(screen.getByText(/boleto gerado/i)).toBeInTheDocument());
+    expect(screen.getByText(/3 dias úteis/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /ver.*imprimir boleto/i })).toBeInTheDocument();
+  });
+});