@cmssy/react 0.1.9 → 0.2.0

package/dist/client.js

@@ -3,6 +3,9 @@ import { createContext, useState, useRef, useEffect, useMemo, useCallback, useCo
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/registry.ts
+function defineBlock(def) {
+  return def;
+}
 function buildBlockMap(blocks) {
   const map = /* @__PURE__ */ Object.create(null);
   for (const block of blocks) map[block.type] = block.component;
@@ -804,11 +807,11 @@ function CmssyAuthProvider({
     [postAction, commitUser]
   );
   const register = useCallback(
-    async (identity, password, fields) => {
+    async (identity, password, fields2) => {
       const data = await postAction("register", {
         identity,
         password,
-        fields: fields ?? {}
+        fields: fields2 ?? {}
       });
       return { ok: Boolean(data.ok), message: data.message };
     },
@@ -839,5 +842,563 @@ function useCmssyUser() {
   }
   return ctx;
 }
+var CmssyCommerceContext = createContext(null);
+function CmssyCommerceProvider({
+  children,
+  basePath = "/api/cmssy/cart"
+}) {
+  const base = useMemo(() => basePath.replace(/\/+$/, ""), [basePath]);
+  const generation = useRef(0);
+  const [cart, setCart] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const post = useCallback(
+    async (action, body) => {
+      const res = await fetch(`${base}/${action}`, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body)
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        throw new Error(
+          typeof data.message === "string" ? data.message : "Commerce request failed"
+        );
+      }
+      return data;
+    },
+    [base]
+  );
+  const runCart = useCallback(
+    async (action, body) => {
+      const gen = ++generation.current;
+      setError(null);
+      try {
+        const data = await post(action, body);
+        if (gen === generation.current) setCart(data.cart);
+      } catch (err) {
+        if (gen === generation.current) {
+          setError(
+            err instanceof Error ? err.message : "Commerce request failed"
+          );
+        }
+        throw err;
+      }
+    },
+    [post]
+  );
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      await runCart("cart", {});
+    } catch {
+      return;
+    } finally {
+      setLoading(false);
+    }
+  }, [runCart]);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  const addToCart = useCallback(
+    (recordId, quantity = 1, options) => runCart("add", {
+      recordId,
+      quantity,
+      variantSelections: options?.variantSelections,
+      notes: options?.notes
+    }),
+    [runCart]
+  );
+  const updateItem = useCallback(
+    (itemId, quantity) => runCart("update", { itemId, quantity }),
+    [runCart]
+  );
+  const removeItem = useCallback(
+    (itemId) => runCart("remove", { itemId }),
+    [runCart]
+  );
+  const clearCart = useCallback(() => runCart("clear", {}), [runCart]);
+  const applyDiscount = useCallback(
+    (code) => runCart("apply-discount", { code }),
+    [runCart]
+  );
+  const removeDiscount = useCallback(
+    () => runCart("remove-discount", {}),
+    [runCart]
+  );
+  const checkout = useCallback(
+    async (customerEmail) => {
+      const gen = ++generation.current;
+      setError(null);
+      try {
+        const data = await post("checkout", {
+          customerEmail
+        });
+        if (gen === generation.current) setCart(null);
+        return data.order;
+      } catch (err) {
+        if (gen === generation.current) {
+          setError(err instanceof Error ? err.message : "Checkout failed");
+        }
+        throw err;
+      }
+    },
+    [post]
+  );
+  const fetchProduct = useCallback(
+    async (modelSlug, filter) => {
+      const data = await post("product", {
+        modelSlug,
+        filter
+      });
+      return data.product;
+    },
+    [post]
+  );
+  const value = useMemo(
+    () => ({
+      cart,
+      loading,
+      error,
+      addToCart,
+      updateItem,
+      removeItem,
+      clearCart,
+      applyDiscount,
+      removeDiscount,
+      checkout,
+      refresh,
+      fetchProduct
+    }),
+    [
+      cart,
+      loading,
+      error,
+      addToCart,
+      updateItem,
+      removeItem,
+      clearCart,
+      applyDiscount,
+      removeDiscount,
+      checkout,
+      refresh,
+      fetchProduct
+    ]
+  );
+  return /* @__PURE__ */ jsx(CmssyCommerceContext.Provider, { value, children });
+}
+function useCart() {
+  const ctx = useContext(CmssyCommerceContext);
+  if (!ctx) {
+    throw new Error("useCart must be used within <CmssyCommerceProvider>");
+  }
+  return ctx;
+}
+
+// src/fields.ts
+function control(type) {
+  return (opts = {}) => ({
+    type,
+    label: opts.label ?? "",
+    ...opts
+  });
+}
+var fields = {
+  singleLine: control("singleLine"),
+  multiLine: control("multiLine"),
+  richText: control("richText"),
+  numeric: control("numeric"),
+  date: control("date"),
+  media: control("media"),
+  link: control("link"),
+  select: control("select"),
+  multiselect: control("multiselect"),
+  boolean: control("boolean"),
+  color: control("color"),
+  repeater: control("repeater")
+};
+
+// src/commerce/money.ts
+var ZERO_DECIMAL = /* @__PURE__ */ new Set([
+  "BIF",
+  "CLP",
+  "DJF",
+  "GNF",
+  "JPY",
+  "KMF",
+  "KRW",
+  "MGA",
+  "PYG",
+  "RWF",
+  "UGX",
+  "VND",
+  "VUV",
+  "XAF",
+  "XOF",
+  "XPF"
+]);
+var THREE_DECIMAL = /* @__PURE__ */ new Set([
+  "BHD",
+  "IQD",
+  "JOD",
+  "KWD",
+  "LYD",
+  "OMR",
+  "TND"
+]);
+function fractionDigits(currency) {
+  const code = currency.toUpperCase();
+  if (ZERO_DECIMAL.has(code)) return 0;
+  if (THREE_DECIMAL.has(code)) return 3;
+  return 2;
+}
+function fromMinorUnits(minor, currency) {
+  return minor / 10 ** fractionDigits(currency);
+}
+function formatPrice(minor, currency) {
+  if (!Number.isFinite(minor)) return "";
+  const code = currency ?? "USD";
+  const amount = fromMinorUnits(minor, code);
+  try {
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: code
+    }).format(amount);
+  } catch {
+    return `${amount.toFixed(fractionDigits(code))} ${code}`;
+  }
+}
+function deriveAxes(variants) {
+  const axes = /* @__PURE__ */ new Map();
+  for (const variant of variants) {
+    for (const option of variant.selectedOptions) {
+      if (!axes.has(option.name)) axes.set(option.name, /* @__PURE__ */ new Set());
+      axes.get(option.name).add(option.value);
+    }
+  }
+  return [...axes.entries()].map(([name, values]) => ({
+    name,
+    values: [...values]
+  }));
+}
+function matchVariant(variants, selections) {
+  return variants.find(
+    (variant) => variant.selectedOptions.every(
+      (opt) => selections[opt.name] === opt.value
+    )
+  ) ?? null;
+}
+function ProductComponent({ content }) {
+  const c = content;
+  const { fetchProduct, addToCart } = useCart();
+  const [product, setProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [selections, setSelections] = useState({});
+  const [adding, setAdding] = useState(false);
+  const [added, setAdded] = useState(false);
+  const [addError, setAddError] = useState(null);
+  const modelSlug = c.modelSlug ?? "products";
+  const slugField = c.slugField ?? "slug";
+  const slug = c.slug ?? "";
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    void (async () => {
+      try {
+        const result = slug ? await fetchProduct(modelSlug, { [slugField]: slug }) : null;
+        if (active) setProduct(result);
+      } finally {
+        if (active) setLoading(false);
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [fetchProduct, modelSlug, slugField, slug]);
+  const axes = useMemo(
+    () => product ? deriveAxes(product.variants) : [],
+    [product]
+  );
+  const variant = useMemo(
+    () => product ? matchVariant(product.variants, selections) : null,
+    [product, selections]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { "data-cmssy-product": "loading", children: "Loading\u2026" });
+  }
+  if (!product) {
+    return /* @__PURE__ */ jsx("div", { "data-cmssy-product": "not-found", children: "Product not found" });
+  }
+  const data = product.data;
+  const name = String(data[c.nameField ?? "name"] ?? "");
+  const imageUrl = c.imageField ? data[c.imageField] : null;
+  const hasVariants = product.variants.length > 0;
+  const currency = data.currency ?? "USD";
+  const priceMinor = hasVariants ? variant?.price : Number(data[c.priceField ?? "price"] ?? 0);
+  const showPrice = priceMinor != null && Number.isFinite(priceMinor);
+  const allAxesSelected = axes.every((axis) => selections[axis.name]);
+  const outOfStock = variant != null && variant.inventory != null && variant.inventory <= 0;
+  const canAdd = hasVariants ? Boolean(variant) && !outOfStock : true;
+  async function onAdd() {
+    if (!product) return;
+    setAdding(true);
+    setAdded(false);
+    setAddError(null);
+    try {
+      await addToCart(
+        product.id,
+        1,
+        hasVariants ? { variantSelections: selections } : void 0
+      );
+      setAdded(true);
+    } catch (err) {
+      setAddError(err instanceof Error ? err.message : "Could not add to cart");
+    } finally {
+      setAdding(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-cmssy-product": product.id, children: [
+    imageUrl ? /* @__PURE__ */ jsx("img", { src: imageUrl, alt: name }) : null,
+    /* @__PURE__ */ jsx("h3", { "data-cmssy-product-name": true, children: name }),
+    showPrice ? /* @__PURE__ */ jsx("p", { "data-cmssy-product-price": true, children: formatPrice(priceMinor, currency) }) : null,
+    axes.map((axis) => /* @__PURE__ */ jsxs("label", { "data-cmssy-variant-axis": axis.name, children: [
+      /* @__PURE__ */ jsx("span", { children: axis.name }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: selections[axis.name] ?? "",
+          onChange: (e) => setSelections((prev) => ({
+            ...prev,
+            [axis.name]: e.target.value
+          })),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
+            axis.values.map((v) => /* @__PURE__ */ jsx("option", { value: v, children: v }, v))
+          ]
+        }
+      )
+    ] }, axis.name)),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onAdd,
+        disabled: adding || !canAdd || hasVariants && !allAxesSelected,
+        "data-cmssy-add-to-cart": true,
+        children: adding ? "Adding\u2026" : outOfStock ? "Out of stock" : added ? "Added" : "Add to cart"
+      }
+    ),
+    addError ? /* @__PURE__ */ jsx("p", { "data-cmssy-product-error": true, children: addError }) : null
+  ] });
+}
+var productBlock = defineBlock({
+  type: "product",
+  label: "Product",
+  category: "Commerce",
+  props: {
+    modelSlug: fields.singleLine({ label: "Model slug" }),
+    slugField: fields.singleLine({ label: "Slug field" }),
+    slug: fields.singleLine({ label: "Product slug" }),
+    nameField: fields.singleLine({ label: "Name field" }),
+    priceField: fields.singleLine({ label: "Price field" }),
+    imageField: fields.singleLine({ label: "Image field" })
+  },
+  component: ProductComponent
+});
+function CartComponent() {
+  const {
+    cart,
+    loading,
+    error,
+    updateItem,
+    removeItem,
+    applyDiscount,
+    removeDiscount
+  } = useCart();
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { "data-cmssy-cart": "loading", children: "Loading\u2026" });
+  }
+  if (!cart || cart.items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { "data-cmssy-cart": "empty", children: "Your cart is empty." });
+  }
+  const currency = cart.currency ?? "USD";
+  async function withBusy(fn) {
+    setBusy(true);
+    try {
+      await fn();
+    } catch {
+      setBusy(false);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-cmssy-cart": cart.id, children: [
+    error ? /* @__PURE__ */ jsx("p", { "data-cmssy-cart-error": true, children: error }) : null,
+    /* @__PURE__ */ jsx("ul", { "data-cmssy-cart-items": true, children: cart.items.map((item) => /* @__PURE__ */ jsxs("li", { "data-cmssy-cart-item": item.id, children: [
+      /* @__PURE__ */ jsx("span", { "data-cmssy-item-name": true, children: item.snapshot.name }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: "1",
+          value: item.quantity,
+          disabled: busy,
+          onChange: (e) => {
+            const qty = Number(e.target.value);
+            if (Number.isInteger(qty) && qty >= 1) {
+              void withBusy(() => updateItem(item.id, qty));
+            }
+          },
+          "data-cmssy-item-qty": true
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { "data-cmssy-item-price": true, children: formatPrice(item.snapshot.price * item.quantity, currency) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: busy,
+          onClick: () => void withBusy(() => removeItem(item.id)),
+          "data-cmssy-item-remove": true,
+          children: "Remove"
+        }
+      )
+    ] }, item.id)) }),
+    /* @__PURE__ */ jsx("div", { "data-cmssy-cart-discount": true, children: cart.appliedDiscount ? /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("span", { children: cart.appliedDiscount.code }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: busy,
+          onClick: () => void withBusy(() => removeDiscount()),
+          children: "Remove"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: code,
+          placeholder: "Discount code",
+          onChange: (e) => setCode(e.target.value),
+          disabled: busy
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: busy || !code.trim(),
+          onClick: () => void withBusy(async () => {
+            await applyDiscount(code.trim());
+            setCode("");
+          }),
+          children: "Apply"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("dl", { "data-cmssy-cart-totals": true, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: "Subtotal" }),
+        /* @__PURE__ */ jsx("dd", { children: formatPrice(cart.subtotal, currency) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: "Total" }),
+        /* @__PURE__ */ jsx("dd", { "data-cmssy-cart-total": true, children: formatPrice(cart.discountedTotal, currency) })
+      ] })
+    ] })
+  ] });
+}
+var cartBlock = defineBlock({
+  type: "cart",
+  label: "Cart",
+  category: "Commerce",
+  props: {},
+  component: CartComponent
+});
+var EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+function CheckoutComponent({ content }) {
+  const c = content;
+  const { cart, loading, checkout } = useCart();
+  const [email, setEmail] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [order, setOrder] = useState(null);
+  if (order) {
+    return /* @__PURE__ */ jsxs("div", { "data-cmssy-checkout": "done", children: [
+      /* @__PURE__ */ jsx("p", { children: c.successMessage ?? "Order placed - awaiting payment." }),
+      /* @__PURE__ */ jsx("p", { "data-cmssy-order-id": true, children: order.id }),
+      /* @__PURE__ */ jsx("p", { "data-cmssy-order-total": true, children: formatPrice(order.total, order.currency) })
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { "data-cmssy-checkout": "loading", children: "Loading\u2026" });
+  }
+  if (!cart || cart.items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { "data-cmssy-checkout": "empty", children: "Your cart is empty." });
+  }
+  const emailValid = EMAIL_RE.test(email.trim());
+  async function onSubmit() {
+    setBusy(true);
+    setError(null);
+    try {
+      setOrder(await checkout(email.trim()));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Checkout failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      "data-cmssy-checkout": cart.id,
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (emailValid && !busy) void onSubmit();
+      },
+      children: [
+        error ? /* @__PURE__ */ jsx("p", { "data-cmssy-checkout-error": true, children: error }) : null,
+        /* @__PURE__ */ jsxs("label", { children: [
+          /* @__PURE__ */ jsx("span", { children: "Email" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "email",
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              required: true,
+              "data-cmssy-checkout-email": true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { "data-cmssy-checkout-total": true, children: formatPrice(cart.discountedTotal, cart.currency ?? "USD") }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: busy || !emailValid,
+            "data-cmssy-checkout-submit": true,
+            children: busy ? "Placing order\u2026" : "Place order"
+          }
+        )
+      ]
+    }
+  );
+}
+var checkoutBlock = defineBlock({
+  type: "checkout",
+  label: "Checkout",
+  category: "Commerce",
+  props: {
+    successMessage: fields.singleLine({ label: "Success message" })
+  },
+  component: CheckoutComponent
+});
 
-export { CmssyAuthProvider, CmssyEditableLayout, CmssyEditablePage, CmssyLazyEditor, CmssyLazyLayout, useCmssyUser, useEditBridge };
+export { CmssyAuthProvider, CmssyCommerceProvider, CmssyEditableLayout, CmssyEditablePage, CmssyLazyEditor, CmssyLazyLayout, cartBlock, checkoutBlock, formatPrice, fractionDigits, fromMinorUnits, productBlock, useCart, useCmssyUser, useEditBridge };

package/dist/{registry-e3O4s_bN.d.cts → commerce-queries-DV7PZlKS.d.cts}

@@ -312,4 +312,60 @@ declare function blocksToMeta(blocks: BlockDefinition[], defaults?: {
     category?: string;
 }): Record<string, BlockMeta>;
 
-export { type AppToEditorMessage as A, type BlockSchema as B, type CmssyPageData as C, type PatchMessage as D, type EditorToAppMessage as E, type FieldDefinition as F, type RawLayoutBlock as G, type ReadyMessage as H, SUBMIT_FORM_MUTATION as I, type SelectMessage as J, type SubmitFormInput as K, blocksToMeta as L, MODEL_DEFINITIONS_QUERY as M, blocksToSchemas as N, buildBlockContext as O, PROTOCOL_VERSION as P, buildBlockMap as Q, type RawBlock as R, SITE_CONFIG_QUERY as S, defineBlock as T, fetchLayouts as U, fetchPage as V, isProtocolCompatible as W, normalizeSlug as X, type BlockMeta as a, type BlockDefinition as b, type CmssyFormDefinition as c, type CmssyLayoutGroup as d, type FetchLike as e, type CmssyClientConfig as f, type BlockMap as g, type CmssyBlockContext as h, type BlockRect as i, type BoundsMessage as j, type ClickMessage as k, type CmssyBranding as l, type CmssyFormField as m, type CmssyFormSettings as n, type CmssyFormSubmitResponse as o, type CmssyLocaleContext as p, type CmssyModelDefinition as q, type CmssyModelRecord as r, type CmssyRecordList as s, type CmssySiteConfig as t, FORM_QUERY as u, type FetchLikeResponse as v, type FetchPageOptions as w, type FieldType as x, MODEL_RECORDS_QUERY as y, type ParentReadyMessage as z };
+interface CmssyCartItemSnapshot {
+    name: string;
+    price: number;
+    currency: string;
+    imageUrl: string | null;
+    sku: string | null;
+}
+interface CmssyCartItem {
+    id: string;
+    recordId: string;
+    quantity: number;
+    variantSelections: Record<string, string> | null;
+    snapshot: CmssyCartItemSnapshot;
+    currentPrice: number | null;
+    priceMismatch: boolean;
+}
+interface CmssyCartDiscount {
+    code: string;
+    type: string;
+    value: number;
+    computedAmount: number;
+}
+interface CmssyCart {
+    id: string;
+    status: string;
+    items: CmssyCartItem[];
+    itemCount: number;
+    subtotal: number;
+    currency: string | null;
+    appliedDiscount: CmssyCartDiscount | null;
+    discountedTotal: number;
+}
+interface CmssyProductVariant {
+    id: string;
+    sku: string | null;
+    price: number;
+    inventory: number | null;
+    selectedOptions: Array<{
+        name: string;
+        value: string;
+    }>;
+}
+interface CmssyProduct {
+    id: string;
+    data: Record<string, unknown>;
+    variants: CmssyProductVariant[];
+}
+interface CmssyOrder {
+    id: string;
+    status: string;
+    subtotal: number;
+    total: number;
+    currency: string;
+    customerEmail: string;
+}
+
+export { fetchLayouts as $, type AppToEditorMessage as A, type BlockSchema as B, type CmssyPageData as C, type CmssySiteConfig as D, type EditorToAppMessage as E, type FieldDefinition as F, FORM_QUERY as G, type FetchLikeResponse as H, type FetchPageOptions as I, type FieldType as J, MODEL_RECORDS_QUERY as K, type ParentReadyMessage as L, MODEL_DEFINITIONS_QUERY as M, type PatchMessage as N, type RawLayoutBlock as O, PROTOCOL_VERSION as P, type ReadyMessage as Q, type RawBlock as R, SITE_CONFIG_QUERY as S, SUBMIT_FORM_MUTATION as T, type SelectMessage as U, type SubmitFormInput as V, blocksToMeta as W, blocksToSchemas as X, buildBlockContext as Y, buildBlockMap as Z, defineBlock as _, type BlockMeta as a, fetchPage as a0, isProtocolCompatible as a1, normalizeSlug as a2, type BlockDefinition as b, type CmssyFormDefinition as c, type CmssyLayoutGroup as d, type CmssyCart as e, type CmssyOrder as f, type CmssyProduct as g, type CmssyCartDiscount as h, type CmssyCartItem as i, type CmssyCartItemSnapshot as j, type CmssyProductVariant as k, type FetchLike as l, type CmssyClientConfig as m, type BlockMap as n, type CmssyBlockContext as o, type BlockRect as p, type BoundsMessage as q, type ClickMessage as r, type CmssyBranding as s, type CmssyFormField as t, type CmssyFormSettings as u, type CmssyFormSubmitResponse as v, type CmssyLocaleContext as w, type CmssyModelDefinition as x, type CmssyModelRecord as y, type CmssyRecordList as z };