@cimplify/sdk 0.38.0 → 0.38.2

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 },
 });