# Examples

URL: https://theelena.me/docs/avileo/tiendas/examples
Text: https://theelena.me/docs/avileo/tiendas/examples.txt
Description: Patrones listos para catálogo, carrito y cancelación de drafts.
Context: environment=production; apiBaseUrl=https://tienda.theelena.me; activation=active; rubro=tiendas

# Examples

## Basic catalog + cart

```tsx
import { useCatalog, useCart } from '@tarileo/avileo-sdk/react';

function money(value: string | number | null | undefined) {
  return `S/ ${Number(value ?? 0).toFixed(2)}`;
}

export function Storefront({ search, categoryId }: { search: string; categoryId: string }) {
  const { data, isLoading } = useCatalog({
    search: search.trim() || undefined,
    categoryId: categoryId === 'all' ? undefined : categoryId,
  });
  const cart = useCart();

  if (isLoading) return <p>Loading catalog...</p>;

  return (
    <>
      <div aria-label="Categories">
        <button type="button">All</button>
        {data?.categories.map((category) => (
          <button key={category.id} type="button" value={category.id}>
            {category.name}
          </button>
        ))}
      </div>

      {data?.products.length === 0 ? (
        <p>No products match this search. Clear filters and try again.</p>
      ) : (
        <ul>
          {data?.products.map((product) => {
            const variant = product.variants[0];
            if (!variant) return null;

            return (
              <li key={product.id}>
                {product.name} — {money(variant.price)}
                <button
                  disabled={cart.isLoading}
                  onClick={async () => {
                    await cart.addItem({
                      productId: product.id,
                      variantId: variant.id,
                      quantity: 1,
                    });
                    // Badge, lines, and totals should now render from cart.cart.
                  }}
                >
                  Add
                </button>
              </li>
            );
          })}
        </ul>
      )}

      <a href="/cart" aria-label={`Cart (${cart.cart?.items.length ?? 0} items)`}>
        Cart {cart.cart?.items.length ?? 0}
      </a>
    </>
  );
}
```

## Cart summary

```tsx
import { useCart } from '@tarileo/avileo-sdk/react';

function money(value: string | number | null | undefined) {
  return `S/ ${Number(value ?? 0).toFixed(2)}`;
}

export function CartSummary() {
  const cart = useCart();
  const items = cart.cart?.items ?? [];

  return (
    <section aria-label="Cart summary">
      {items.map((item) => {
        const quantity = Number(item.quantity ?? item.orderedQuantity ?? 0);
        const unitPrice = item.unitPrice ?? item.unitPriceQuoted ?? item.unitPriceFinal;

        return (
          <article key={item.id}>
            <h3>{item.productName}</h3>
            <p>{item.variantName}</p>
            <p>
              {unitPrice ? `${money(unitPrice)} c/u` : 'Precio según pedido'}
              {' · '}
              {money(item.subtotal)}
            </p>
            <button
              type="button"
              onClick={() => cart.updateItem(item.id, { quantity: quantity + 1 })}
            >
              +
            </button>
          </article>
        );
      })}

      <strong>{money(cart.cart?.totalAmount)}</strong>
    </section>
  );
}
```

## Cart checkout

```tsx
import { useCart } from '@tarileo/avileo-sdk/react';

export function CheckoutButton() {
  const cart = useCart();

  async function checkout() {
    const instance = cart.cartInstance;
    if (!instance) return;

    await instance.checkout({
      customerName: 'Jane Doe',
      customerPhone: '999999999',
    });
    cart.clear();
  }

  return <button onClick={checkout}>Confirm order</button>;
}
```

## Cancel a draft with a stored token

```ts
import { createAvileo } from '@tarileo/avileo-sdk';

const avileo = createAvileo({ baseUrl, clientKey });
const store = avileo.business();

const order = await store.orders.get(token);

if (order.sale.status === 'draft') {
  await store.orders.cancel(token, order.sale.version);
}
```

## Direct HTTP for agents

```ts
const response = await fetch(`${baseUrl}/api/v1/public/sdk/catalog`, {
  headers: {
    'x-avileo-client-key': 'avileo_pk_...',
  },
});

const payload = await response.json();
```