@cimplify/sdk 0.44.11 → 0.44.12

package/package.json

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

package/templates/storefront-bakery/app/layout.tsx

@@ -5,6 +5,7 @@ import { Providers } from "@/components/providers";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
+import { CartDrawer } from "@/components/cart-drawer";
 import { Suspense } from "react";
 import { brand } from "@/lib/brand";
 
@@ -73,6 +74,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <Suspense fallback={null}>
             <ProductModal />
           </Suspense>
+          <CartDrawer />
         </Providers>
       </body>
     </html>

package/templates/storefront-bakery/components/cart-drawer.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CartDrawer as SdkCartDrawer } from "@cimplify/sdk/react";
+
+/**
+ * Side-drawer cart. Auto-opens when an item is added (via
+ * `<CartDrawerProvider>` in `providers.tsx`). The header's cart pill
+ * also calls `useCartDrawer().open()` to reveal it on click.
+ */
+export function CartDrawer() {
+  const router = useRouter();
+  return <SdkCartDrawer onCheckout={() => router.push("/checkout")} />;
+}

package/templates/storefront-bakery/components/cart-pill.tsx

@@ -1,22 +1,26 @@
 "use client";
 
-import Link from "next/link";
+import { useCartDrawer } from "@cimplify/sdk/react";
 import { useCartCount } from "@/lib/cart";
 
 /**
  * Cart pill — dynamic island. Reads the live cart count via the SDK and
- * renders a link to `/cart`. Wrap in `<Suspense fallback={<CartPillSkeleton/>}>`
- * so the cached header chrome streams without blocking on the cart fetch.
+ * opens the side cart drawer on click (instead of navigating to /cart).
+ * Wrap in `<Suspense fallback={<CartPillSkeleton/>}>` so the cached
+ * header chrome streams without blocking on the cart fetch.
  */
 export function CartPill() {
   const { count } = useCartCount();
+  const { open } = useCartDrawer();
   return (
-    <Link
-      href="/cart"
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105"
+    <button
+      type="button"
+      onClick={open}
+      aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
     >
       Cart · {count}
-    </Link>
+    </button>
   );
 }
 

package/templates/storefront-bakery/components/providers.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, type ReactNode } from "react";
 import { createCimplifyClient } from "@cimplify/sdk";
-import { CimplifyProvider } from "@cimplify/sdk/react";
+import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
 
 /**
  * Boots the Cimplify SDK client once on the client-side and exposes it via
@@ -27,5 +27,9 @@ export function Providers({ children }: { children: ReactNode }) {
     });
   }, []);
 
-  return <CimplifyProvider client={client}>{children}</CimplifyProvider>;
+  return (
+    <CimplifyProvider client={client}>
+      <CartDrawerProvider>{children}</CartDrawerProvider>
+    </CimplifyProvider>
+  );
 }

package/templates/storefront-grocery/app/layout.tsx

@@ -5,6 +5,7 @@ import { Providers } from "@/components/providers";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
+import { CartDrawer } from "@/components/cart-drawer";
 import { Suspense } from "react";
 import { brand } from "@/lib/brand";
 
@@ -68,6 +69,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <Suspense fallback={null}>
             <ProductModal />
           </Suspense>
+          <CartDrawer />
         </Providers>
       </body>
     </html>

package/templates/storefront-grocery/components/cart-drawer.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CartDrawer as SdkCartDrawer } from "@cimplify/sdk/react";
+
+/**
+ * Side-drawer cart. Auto-opens when an item is added (via
+ * `<CartDrawerProvider>` in `providers.tsx`). The header's cart pill
+ * also calls `useCartDrawer().open()` to reveal it on click.
+ */
+export function CartDrawer() {
+  const router = useRouter();
+  return <SdkCartDrawer onCheckout={() => router.push("/checkout")} />;
+}

package/templates/storefront-grocery/components/cart-pill.tsx

@@ -1,22 +1,26 @@
 "use client";
 
-import Link from "next/link";
+import { useCartDrawer } from "@cimplify/sdk/react";
 import { useCartCount } from "@/lib/cart";
 
 /**
  * Cart pill — dynamic island. Reads the live cart count via the SDK and
- * renders a link to `/cart`. Wrap in `<Suspense fallback={<CartPillSkeleton/>}>`
- * so the cached header chrome streams without blocking on the cart fetch.
+ * opens the side cart drawer on click (instead of navigating to /cart).
+ * Wrap in `<Suspense fallback={<CartPillSkeleton/>}>` so the cached
+ * header chrome streams without blocking on the cart fetch.
  */
 export function CartPill() {
   const { count } = useCartCount();
+  const { open } = useCartDrawer();
   return (
-    <Link
-      href="/cart"
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105"
+    <button
+      type="button"
+      onClick={open}
+      aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
     >
       Cart · {count}
-    </Link>
+    </button>
   );
 }
 

package/templates/storefront-grocery/components/providers.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, type ReactNode } from "react";
 import { createCimplifyClient } from "@cimplify/sdk";
-import { CimplifyProvider } from "@cimplify/sdk/react";
+import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
 
 /**
  * Boots the Cimplify SDK client once on the client-side and exposes it via
@@ -27,5 +27,9 @@ export function Providers({ children }: { children: ReactNode }) {
     });
   }, []);
 
-  return <CimplifyProvider client={client}>{children}</CimplifyProvider>;
+  return (
+    <CimplifyProvider client={client}>
+      <CartDrawerProvider>{children}</CartDrawerProvider>
+    </CimplifyProvider>
+  );
 }

package/templates/storefront-restaurant/app/layout.tsx

@@ -5,6 +5,7 @@ import { Providers } from "@/components/providers";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
+import { CartDrawer } from "@/components/cart-drawer";
 import { Suspense } from "react";
 import { brand } from "@/lib/brand";
 
@@ -73,6 +74,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <Suspense fallback={null}>
             <ProductModal />
           </Suspense>
+          <CartDrawer />
         </Providers>
       </body>
     </html>

package/templates/storefront-restaurant/components/cart-drawer.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CartDrawer as SdkCartDrawer } from "@cimplify/sdk/react";
+
+/**
+ * Side-drawer cart. Auto-opens when an item is added (via
+ * `<CartDrawerProvider>` in `providers.tsx`). The header's cart pill
+ * also calls `useCartDrawer().open()` to reveal it on click.
+ */
+export function CartDrawer() {
+  const router = useRouter();
+  return <SdkCartDrawer onCheckout={() => router.push("/checkout")} />;
+}

package/templates/storefront-restaurant/components/cart-pill.tsx

@@ -1,22 +1,26 @@
 "use client";
 
-import Link from "next/link";
+import { useCartDrawer } from "@cimplify/sdk/react";
 import { useCartCount } from "@/lib/cart";
 
 /**
  * Cart pill — dynamic island. Reads the live cart count via the SDK and
- * renders a link to `/cart`. Wrap in `<Suspense fallback={<CartPillSkeleton/>}>`
- * so the cached header chrome streams without blocking on the cart fetch.
+ * opens the side cart drawer on click (instead of navigating to /cart).
+ * Wrap in `<Suspense fallback={<CartPillSkeleton/>}>` so the cached
+ * header chrome streams without blocking on the cart fetch.
  */
 export function CartPill() {
   const { count } = useCartCount();
+  const { open } = useCartDrawer();
   return (
-    <Link
-      href="/cart"
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105"
+    <button
+      type="button"
+      onClick={open}
+      aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
     >
       Cart · {count}
-    </Link>
+    </button>
   );
 }
 

package/templates/storefront-restaurant/components/providers.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, type ReactNode } from "react";
 import { createCimplifyClient } from "@cimplify/sdk";
-import { CimplifyProvider } from "@cimplify/sdk/react";
+import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
 
 /**
  * Boots the Cimplify SDK client once on the client-side and exposes it via
@@ -27,5 +27,9 @@ export function Providers({ children }: { children: ReactNode }) {
     });
   }, []);
 
-  return <CimplifyProvider client={client}>{children}</CimplifyProvider>;
+  return (
+    <CimplifyProvider client={client}>
+      <CartDrawerProvider>{children}</CartDrawerProvider>
+    </CimplifyProvider>
+  );
 }

package/templates/storefront-retail/app/layout.tsx

@@ -4,6 +4,7 @@ import "./globals.css";
 import { Providers } from "@/components/providers";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
+import { CartDrawer } from "@/components/cart-drawer";
 import { brand } from "@/lib/brand";
 
 const inter = Inter({
@@ -68,6 +69,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <Header />
           <main className="flex-1 pb-12 w-full">{children}</main>
           <Footer />
+          <CartDrawer />
         </Providers>
       </body>
     </html>

package/templates/storefront-retail/components/cart-drawer.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CartDrawer as SdkCartDrawer } from "@cimplify/sdk/react";
+
+/**
+ * Side-drawer cart. Auto-opens when an item is added (via
+ * `<CartDrawerProvider>` in `providers.tsx`). The header's cart pill
+ * also calls `useCartDrawer().open()` to reveal it on click.
+ */
+export function CartDrawer() {
+  const router = useRouter();
+  return <SdkCartDrawer onCheckout={() => router.push("/checkout")} />;
+}

package/templates/storefront-retail/components/cart-pill.tsx

@@ -1,22 +1,26 @@
 "use client";
 
-import Link from "next/link";
+import { useCartDrawer } from "@cimplify/sdk/react";
 import { useCartCount } from "@/lib/cart";
 
 /**
  * Cart pill — dynamic island. Reads the live cart count via the SDK and
- * renders a link to `/cart`. Wrap in `<Suspense fallback={<CartPillSkeleton/>}>`
- * so the cached header chrome streams without blocking on the cart fetch.
+ * opens the side cart drawer on click (instead of navigating to /cart).
+ * Wrap in `<Suspense fallback={<CartPillSkeleton/>}>` so the cached
+ * header chrome streams without blocking on the cart fetch.
  */
 export function CartPill() {
   const { count } = useCartCount();
+  const { open } = useCartDrawer();
   return (
-    <Link
-      href="/cart"
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105"
+    <button
+      type="button"
+      onClick={open}
+      aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
     >
       Cart · {count}
-    </Link>
+    </button>
   );
 }
 

package/templates/storefront-retail/components/providers.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, type ReactNode } from "react";
 import { createCimplifyClient } from "@cimplify/sdk";
-import { CimplifyProvider } from "@cimplify/sdk/react";
+import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
 
 /**
  * Boots the Cimplify SDK client once on the client-side and exposes it via
@@ -27,5 +27,9 @@ export function Providers({ children }: { children: ReactNode }) {
     });
   }, []);
 
-  return <CimplifyProvider client={client}>{children}</CimplifyProvider>;
+  return (
+    <CimplifyProvider client={client}>
+      <CartDrawerProvider>{children}</CartDrawerProvider>
+    </CimplifyProvider>
+  );
 }

package/templates/storefront-services/app/layout.tsx

@@ -5,6 +5,7 @@ import { Providers } from "@/components/providers";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
+import { CartDrawer } from "@/components/cart-drawer";
 import { Suspense } from "react";
 import { brand } from "@/lib/brand";
 
@@ -73,6 +74,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <Suspense fallback={null}>
             <ProductModal />
           </Suspense>
+          <CartDrawer />
         </Providers>
       </body>
     </html>

package/templates/storefront-services/components/cart-drawer.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CartDrawer as SdkCartDrawer } from "@cimplify/sdk/react";
+
+/**
+ * Side-drawer cart. Auto-opens when an item is added (via
+ * `<CartDrawerProvider>` in `providers.tsx`). The header's cart pill
+ * also calls `useCartDrawer().open()` to reveal it on click.
+ */
+export function CartDrawer() {
+  const router = useRouter();
+  return <SdkCartDrawer onCheckout={() => router.push("/checkout")} />;
+}

package/templates/storefront-services/components/cart-pill.tsx

@@ -1,22 +1,26 @@
 "use client";
 
-import Link from "next/link";
+import { useCartDrawer } from "@cimplify/sdk/react";
 import { useCartCount } from "@/lib/cart";
 
 /**
  * Cart pill — dynamic island. Reads the live cart count via the SDK and
- * renders a link to `/cart`. Wrap in `<Suspense fallback={<CartPillSkeleton/>}>`
- * so the cached header chrome streams without blocking on the cart fetch.
+ * opens the side cart drawer on click (instead of navigating to /cart).
+ * Wrap in `<Suspense fallback={<CartPillSkeleton/>}>` so the cached
+ * header chrome streams without blocking on the cart fetch.
  */
 export function CartPill() {
   const { count } = useCartCount();
+  const { open } = useCartDrawer();
   return (
-    <Link
-      href="/cart"
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105"
+    <button
+      type="button"
+      onClick={open}
+      aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
     >
       Cart · {count}
-    </Link>
+    </button>
   );
 }
 

package/templates/storefront-services/components/providers.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, type ReactNode } from "react";
 import { createCimplifyClient } from "@cimplify/sdk";
-import { CimplifyProvider } from "@cimplify/sdk/react";
+import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
 
 /**
  * Boots the Cimplify SDK client once on the client-side and exposes it via
@@ -27,5 +27,9 @@ export function Providers({ children }: { children: ReactNode }) {
     });
   }, []);
 
-  return <CimplifyProvider client={client}>{children}</CimplifyProvider>;
+  return (
+    <CimplifyProvider client={client}>
+      <CartDrawerProvider>{children}</CartDrawerProvider>
+    </CimplifyProvider>
+  );
 }