@cimplify/sdk 0.38.0 → 0.38.1

package/dist/mock/cli.mjs

@@ -7839,11 +7839,19 @@ function createMockApp(options = {}) {
     app.use("*", async (c, next) => {
       const origin = c.req.header("origin") ?? "";
       const allow = corsOrigins === "*" ? "*" : corsOrigins.includes(origin) ? origin : corsOrigins[0] ?? "*";
-      c.header("Access-Control-Allow-Origin", allow);
-      c.header("Access-Control-Allow-Headers", "content-type,authorization,x-session-token,idempotency-key");
-      c.header("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,OPTIONS");
-      c.header("Access-Control-Expose-Headers", "x-session-token");
-      if (c.req.method === "OPTIONS") return new Response(null, { status: 204 });
+      const headers = {
+        "Access-Control-Allow-Origin": allow,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Headers": c.req.header("access-control-request-headers") ?? "content-type,authorization,x-session-token,idempotency-key",
+        "Access-Control-Allow-Methods": "GET,POST,PATCH,DELETE,OPTIONS",
+        "Access-Control-Expose-Headers": "x-session-token",
+        "Access-Control-Max-Age": "86400",
+        Vary: "Origin"
+      };
+      if (c.req.method === "OPTIONS") {
+        return new Response(null, { status: 204, headers });
+      }
+      for (const [k, v] of Object.entries(headers)) c.header(k, v);
       await next();
     });
   }

package/dist/mock/library.js

@@ -7207,11 +7207,19 @@ function createMockApp(options = {}) {
     app.use("*", async (c, next) => {
       const origin = c.req.header("origin") ?? "";
       const allow = corsOrigins === "*" ? "*" : corsOrigins.includes(origin) ? origin : corsOrigins[0] ?? "*";
-      c.header("Access-Control-Allow-Origin", allow);
-      c.header("Access-Control-Allow-Headers", "content-type,authorization,x-session-token,idempotency-key");
-      c.header("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,OPTIONS");
-      c.header("Access-Control-Expose-Headers", "x-session-token");
-      if (c.req.method === "OPTIONS") return new Response(null, { status: 204 });
+      const headers = {
+        "Access-Control-Allow-Origin": allow,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Headers": c.req.header("access-control-request-headers") ?? "content-type,authorization,x-session-token,idempotency-key",
+        "Access-Control-Allow-Methods": "GET,POST,PATCH,DELETE,OPTIONS",
+        "Access-Control-Expose-Headers": "x-session-token",
+        "Access-Control-Max-Age": "86400",
+        Vary: "Origin"
+      };
+      if (c.req.method === "OPTIONS") {
+        return new Response(null, { status: 204, headers });
+      }
+      for (const [k, v] of Object.entries(headers)) c.header(k, v);
       await next();
     });
   }

package/dist/mock/library.mjs

@@ -7205,11 +7205,19 @@ function createMockApp(options = {}) {
     app.use("*", async (c, next) => {
       const origin = c.req.header("origin") ?? "";
       const allow = corsOrigins === "*" ? "*" : corsOrigins.includes(origin) ? origin : corsOrigins[0] ?? "*";
-      c.header("Access-Control-Allow-Origin", allow);
-      c.header("Access-Control-Allow-Headers", "content-type,authorization,x-session-token,idempotency-key");
-      c.header("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,OPTIONS");
-      c.header("Access-Control-Expose-Headers", "x-session-token");
-      if (c.req.method === "OPTIONS") return new Response(null, { status: 204 });
+      const headers = {
+        "Access-Control-Allow-Origin": allow,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Headers": c.req.header("access-control-request-headers") ?? "content-type,authorization,x-session-token,idempotency-key",
+        "Access-Control-Allow-Methods": "GET,POST,PATCH,DELETE,OPTIONS",
+        "Access-Control-Expose-Headers": "x-session-token",
+        "Access-Control-Max-Age": "86400",
+        Vary: "Origin"
+      };
+      if (c.req.method === "OPTIONS") {
+        return new Response(null, { status: 204, headers });
+      }
+      for (const [k, v] of Object.entries(headers)) c.header(k, v);
       await next();
     });
   }

package/dist/mock/msw.js

@@ -7205,11 +7205,19 @@ function createMockApp(options = {}) {
     app.use("*", async (c, next) => {
       const origin = c.req.header("origin") ?? "";
       const allow = corsOrigins === "*" ? "*" : corsOrigins.includes(origin) ? origin : corsOrigins[0] ?? "*";
-      c.header("Access-Control-Allow-Origin", allow);
-      c.header("Access-Control-Allow-Headers", "content-type,authorization,x-session-token,idempotency-key");
-      c.header("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,OPTIONS");
-      c.header("Access-Control-Expose-Headers", "x-session-token");
-      if (c.req.method === "OPTIONS") return new Response(null, { status: 204 });
+      const headers = {
+        "Access-Control-Allow-Origin": allow,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Headers": c.req.header("access-control-request-headers") ?? "content-type,authorization,x-session-token,idempotency-key",
+        "Access-Control-Allow-Methods": "GET,POST,PATCH,DELETE,OPTIONS",
+        "Access-Control-Expose-Headers": "x-session-token",
+        "Access-Control-Max-Age": "86400",
+        Vary: "Origin"
+      };
+      if (c.req.method === "OPTIONS") {
+        return new Response(null, { status: 204, headers });
+      }
+      for (const [k, v] of Object.entries(headers)) c.header(k, v);
       await next();
     });
   }

package/dist/mock/msw.mjs

@@ -7203,11 +7203,19 @@ function createMockApp(options = {}) {
     app.use("*", async (c, next) => {
       const origin = c.req.header("origin") ?? "";
       const allow = corsOrigins === "*" ? "*" : corsOrigins.includes(origin) ? origin : corsOrigins[0] ?? "*";
-      c.header("Access-Control-Allow-Origin", allow);
-      c.header("Access-Control-Allow-Headers", "content-type,authorization,x-session-token,idempotency-key");
-      c.header("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,OPTIONS");
-      c.header("Access-Control-Expose-Headers", "x-session-token");
-      if (c.req.method === "OPTIONS") return new Response(null, { status: 204 });
+      const headers = {
+        "Access-Control-Allow-Origin": allow,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Headers": c.req.header("access-control-request-headers") ?? "content-type,authorization,x-session-token,idempotency-key",
+        "Access-Control-Allow-Methods": "GET,POST,PATCH,DELETE,OPTIONS",
+        "Access-Control-Expose-Headers": "x-session-token",
+        "Access-Control-Max-Age": "86400",
+        Vary: "Origin"
+      };
+      if (c.req.method === "OPTIONS") {
+        return new Response(null, { status: 204, headers });
+      }
+      for (const [k, v] of Object.entries(headers)) c.header(k, v);
       await next();
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.38.0",
+  "version": "0.38.1",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",

package/templates/storefront/package.json

@@ -11,16 +11,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.37.0",
+    "@cimplify/sdk": "^0.38.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "react-router-dom": "^7.9.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.2.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.0.0",
     "concurrently": "^9.0.0",
+    "tailwindcss": "^4.2.4",
     "typescript": "^5.9.3",
     "vite": "^7.0.0"
   }

package/templates/storefront/src/App.tsx

@@ -1,18 +1,45 @@
+import { useEffect, useState } from "react";
 import { Routes, Route, NavLink, useNavigate } from "react-router-dom";
-import { CataloguePage, CartPage, CheckoutPage, useCimplify } from "@cimplify/sdk/react";
-import type { Product } from "@cimplify/sdk";
+import { CataloguePage, CartPage, CheckoutPage, useCimplifyClient } from "@cimplify/sdk/react";
+import type { Product, Category } from "@cimplify/sdk";
 
-function CartPill() {
-  const cim = useCimplify();
-  const total = cim?.cart?.totalItems ?? 0;
-  return <span className="cimplify-storefront__cart-pill">Cart · {total}</span>;
+function CartPill({ count }: { count: number }) {
+  return <span className="cimplify-storefront__cart-pill">Cart · {count}</span>;
 }
 
 function Catalogue() {
   const navigate = useNavigate();
+  const { client } = useCimplifyClient();
+  const [products, setProducts] = useState<Product[] | undefined>(undefined);
+  const [categories, setCategories] = useState<Category[] | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const [p, c] = await Promise.all([
+          client.catalogue.getProducts({ limit: 50 }),
+          client.catalogue.getCategories(),
+        ]);
+        if (cancelled) return;
+        if (p.ok) setProducts(p.value.items);
+        if (c.ok) setCategories(c.value);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client]);
+
+  if (loading) return <p>Loading shop…</p>;
   return (
     <CataloguePage
       title="Shop"
+      products={products}
+      categories={categories}
       onProductClick={(p: Product) => navigate(`/products/${p.id}`)}
     />
   );
@@ -52,14 +79,23 @@ function OrderConfirmation() {
 }
 
 export function App() {
+  const [cartCount, setCartCount] = useState(0);
+  const { client } = useCimplifyClient();
+
+  useEffect(() => {
+    void client.cart.getCount().then((r) => {
+      if (r.ok) setCartCount(r.value);
+    });
+  }, [client]);
+
   return (
     <div className="cimplify-storefront">
       <header className="cimplify-storefront__nav">
-        <NavLink to="/"><h1>__STOREFRONT_NAME__</h1></NavLink>
+        <NavLink to="/"><h1>cimplify-store</h1></NavLink>
         <nav>
           <NavLink to="/" end>Shop</NavLink>
           <NavLink to="/cart">Cart</NavLink>
-          <CartPill />
+          <CartPill count={cartCount} />
         </nav>
       </header>
 

package/templates/storefront/src/main.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+import { createCimplifyClient } from "@cimplify/sdk";
 import { CimplifyProvider } from "@cimplify/sdk/react";
 import { App } from "./App";
 
@@ -8,12 +9,18 @@ import "@cimplify/sdk/styles.css";
 import "./styles.css";
 
 const baseUrl = import.meta.env.VITE_CIMPLIFY_API_URL ?? "http://127.0.0.1:8787";
-const businessId = import.meta.env.VITE_CIMPLIFY_BUSINESS_ID ?? "bus_default_akua_bakery";
+const publicKey = import.meta.env.VITE_CIMPLIFY_PUBLIC_KEY ?? "mock-dev";
+
+const client = createCimplifyClient({
+  baseUrl,
+  publicKey,
+  suppressPublicKeyWarning: true,
+});
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <BrowserRouter>
-      <CimplifyProvider config={{ baseUrl, apiKey: "mock-dev", businessId }}>
+      <CimplifyProvider client={client}>
         <App />
       </CimplifyProvider>
     </BrowserRouter>

package/templates/storefront/src/styles.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 html, body {
   margin: 0;
   padding: 0;
@@ -7,7 +9,6 @@ html, body {
 }
 
 * { box-sizing: border-box; }
-
 a { color: inherit; text-decoration: none; }
 
 .cimplify-storefront {
@@ -57,3 +58,8 @@ a { color: inherit; text-decoration: none; }
   border-top: 1px solid #e2e8f0;
   background: white;
 }
+
+.cimplify-storefront__main svg {
+  max-width: 64px;
+  max-height: 64px;
+}

package/templates/storefront/vite.config.ts

@@ -1,10 +1,8 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 5173,
-    open: true,
-  },
+  plugins: [react(), tailwindcss()],
+  server: { port: 5173, open: false, strictPort: false },
 });