SDK, runtime y UI

import { createClient } from "@nimlio/sdk";
import { NimlioProvider } from "@nimlio/sdk/react";

const client = createClient({ key: "nk_pub_xxxxxxxx" });

export function App({ children }) {
  return <NimlioProvider client={client}>{children}</NimlioProvider>;
}

import { useProductsPage } from "@nimlio/sdk/react";
import { money } from "@nimlio/runtime";

export function Catalog({ page }: { page: number }) {
  const { data, isPending, error } = useProductsPage({ page, pageSize: 24 });
  if (isPending) return <p>Cargando…</p>;
  if (error) return <p>{error.code}</p>;
  return (
    <>
      <ul>
        {data.data.map((p) => (
          <li key={p.id}>
            {p.name} {p.priceAmount != null ? money(p.priceAmount) : null}
          </li>
        ))}
      </ul>
      {data.meta.hasMore ? <a href={`?page=${page + 1}`}>Siguiente</a> : null}
    </>
  );
}

import { useProduct, useProductReviews } from "@nimlio/sdk/react";

export function ProductPage({ id }: { id: string }) {
  const product = useProduct(id);
  const reviews = useProductReviews(id, { page: 1, pageSize: 10 });
  // product.data.name, reviews.data?.data (list), reviews.data?.meta.average
  return null;
}

import { useRef, useState } from "react";
import { useQuoteOrder, useCreateOrder, useOrderStatus } from "@nimlio/sdk/react";

export function Checkout({ discountCode, shippingRateId }: { discountCode?: string; shippingRateId?: string }) {
  const quote = useQuoteOrder();
  const create = useCreateOrder();
  const [orderId, setOrderId] = useState("");
  // Order creation requires an Idempotency-Key. The SDK sends one per call by default;
  // keeping one key per checkout attempt makes a re-submit replay the same order.
  // Mint a fresh key when the cart changes. Raw fetch must send the header itself.
  const attemptKey = useRef(crypto.randomUUID());
  // An empty id keeps the query disabled; polling stops on a terminal status.
  const status = useOrderStatus(orderId, { poll: 3000 });

  async function placeOrder() {
    // Selections only: ids, quantities and codes, never prices.
    const checkout = {
      items: [{ id: "product-id", type: "product" as const, quantity: 2 }],
      discountCode,
      shippingRateId,
    };

    // 1. Ask the server what the cart costs.
    await quote.mutateAsync({ ...checkout, customerCity: "Medellín" });
    // quote.data.subtotal, .discount and .shippingOptions come from the published catalog.

    // 2. Create the order with the same selections.
    const order = await create.mutateAsync({
      input: {
        ...checkout,
        customer: { name: "Ana Pérez", phone: "+573001112233" },
        paymentMethod: "online",
      },
      options: { idempotencyKey: attemptKey.current },
    });
    setOrderId(order.orderId);
  }

  return (
    <button onClick={placeOrder} disabled={create.isPending}>
      {status.data?.status ?? "Pay"}
    </button>
  );
}

import { NimlioApiError } from "@nimlio/sdk";

try {
  await create.mutateAsync(input);
} catch (e) {
  if (e instanceof NimlioApiError) {
    // e.status, e.code, e.reason, e.fieldErrors, e.requestId
    if (e.code === "invalid_input") showFieldErrors(e.fieldErrors);
    else if (e.code === "rate_limited") retryLater();
    else report(e.requestId);
  }
}