Catalog data

import { useLockerverseWidget } from "@lockerverse/react/widget";
import { exampleRuntime } from "../example-runtime";

const widgetOptions = {
  apiBaseUrl: exampleRuntime.apiBaseUrl,
  communitySlug: exampleRuntime.communitySlug,
  environment: "development" as const,
  sentryDsn: null,
  widgetSlug: exampleRuntime.widgetSlug,
};

function formatMoney(amountCents: number | null) {
  if (amountCents === null) {
    return "Choose amount";
  }
  return new Intl.NumberFormat("en-US", {
    currency: "USD",
    style: "currency",
  }).format(amountCents / 100);
}

export default function CatalogExample() {
  const { catalog, error, loading } = useLockerverseWidget(widgetOptions);

  if (loading) {
    return <p className="example-status">Loading live catalog…</p>;
  }
  if (error) {
    return <p className="example-status">{error.message}</p>;
  }
  if (!catalog) {
    return null;
  }

  return (
    <div className="catalog-grid">
      {catalog.products.map((product) => (
        <article className="catalog-card" key={product.id}>
          <div>
            <strong>{product.name}</strong>
            <span>{product.paymentOption}</span>
          </div>
          <b>{formatMoney(product.amountCents)}</b>
        </article>
      ))}
    </div>
  );
}