@cimplify/sdk 0.38.5 → 0.39.1

package/templates/storefront/app/terms/page.tsx

@@ -0,0 +1,102 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Terms of Service — Akua's Bakery",
+  description: "The rules of the road for ordering from Akua's Bakery.",
+};
+
+export default function TermsPage() {
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        Terms of service
+      </p>
+      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        Terms of Service
+      </h1>
+      <p className="text-sm text-muted-foreground not-prose mb-10">
+        Last updated: 1 May 2026
+      </p>
+
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        <h2 className="font-serif text-2xl font-semibold mt-0">1. Who we are</h2>
+        <p>
+          Akua's Bakery (&quot;we&quot;, &quot;us&quot;) is a bakery and pâtisserie operating
+          at 12 Independence Avenue, Accra, Ghana. By placing an order through this
+          website, you (&quot;you&quot;, &quot;customer&quot;) agree to these terms.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">2. Orders and acceptance</h2>
+        <p>
+          Placing an order constitutes an offer to buy. We confirm acceptance by
+          sending an order confirmation email or SMS. Until acceptance, we may
+          decline an order — we'll refund any payment in full, immediately.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">3. Pricing and payment</h2>
+        <p>
+          Prices are in Ghana Cedis (GH₵) and include VAT where applicable.
+          Payment is due at checkout via Mobile Money, card, or cash on delivery.
+          We reserve the right to correct typographical pricing errors before
+          fulfilment.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">4. Delivery and pickup</h2>
+        <p>
+          Delivery times are estimates, not guarantees. We're not liable for
+          delays caused by weather, traffic, or events outside our control. If
+          a rider can't reach you within 30 minutes of arrival, the order may be
+          returned to the kitchen — please make sure your address and phone are
+          correct.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">5. Custom cakes</h2>
+        <p>
+          Custom cake orders require a 50% deposit at booking and the balance
+          before pickup or dispatch. Cancellations more than 72 hours before the
+          event date receive a full refund of the deposit; within 72 hours,
+          the deposit is non-refundable.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">6. Allergens</h2>
+        <p>
+          Our kitchen handles wheat, dairy, eggs, and tree nuts. We can't
+          guarantee freedom from cross-contamination. Customers with severe
+          allergies order at their own risk.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">7. Returns</h2>
+        <p>
+          Baked goods are non-returnable for food-safety reasons. If something
+          is wrong with your order, contact us within 24 hours of delivery and
+          we'll replace it, refund it, or credit your account — your choice.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">8. Liability</h2>
+        <p>
+          To the maximum extent permitted by Ghanaian law, our liability for any
+          claim arising from this website or your order is limited to the value
+          of the order. We're not liable for indirect or consequential losses.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">9. Governing law</h2>
+        <p>
+          These terms are governed by the laws of Ghana. Disputes will be
+          resolved in the courts of Greater Accra.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">10. Contact</h2>
+        <p>
+          Questions? Email{" "}
+          <a
+            href="mailto:hello@akuasbakery.test"
+            className="text-primary font-semibold hover:underline"
+          >
+            hello@akuasbakery.test
+          </a>
+          .
+        </p>
+      </section>
+    </article>
+  );
+}

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

@@ -0,0 +1,32 @@
+"use client";
+
+import Link from "next/link";
+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.
+ */
+export function CartPill() {
+  const { count } = useCartCount();
+  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"
+    >
+      Cart · {count}
+    </Link>
+  );
+}
+
+export function CartPillSkeleton() {
+  return (
+    <span
+      aria-hidden
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground/80 text-background text-xs font-semibold tracking-wide"
+    >
+      Cart · …
+    </span>
+  );
+}

package/templates/storefront/components/footer.tsx

@@ -1,19 +1,190 @@
-export function Footer() {
+import Link from "next/link";
+
+const SOCIALS: { label: string; href: string; svg: React.ReactNode }[] = [
+  {
+    label: "Instagram",
+    href: "https://instagram.com/akuasbakery",
+    svg: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className="w-5 h-5">
+        <rect x="3" y="3" width="18" height="18" rx="5" />
+        <circle cx="12" cy="12" r="4" />
+        <circle cx="17.5" cy="6.5" r="0.75" fill="currentColor" />
+      </svg>
+    ),
+  },
+  {
+    label: "TikTok",
+    href: "https://tiktok.com/@akuasbakery",
+    svg: (
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+        <path d="M16 3v3.5a4.5 4.5 0 0 0 4.5 4.5V14a7.5 7.5 0 0 1-4.5-1.5V16a5 5 0 1 1-5-5v3a2 2 0 1 0 2 2V3z" />
+      </svg>
+    ),
+  },
+  {
+    label: "X",
+    href: "https://x.com/akuasbakery",
+    svg: (
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+        <path d="M18 2h3l-7.5 8.6L22 22h-6.6l-5-6.5L4 22H1l8-9.2L1.4 2H8l4.6 6 5.4-6z" />
+      </svg>
+    ),
+  },
+  {
+    label: "Facebook",
+    href: "https://facebook.com/akuasbakery",
+    svg: (
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+        <path d="M14 9V7a1 1 0 0 1 1-1h2V3h-3a4 4 0 0 0-4 4v2H8v3h2v9h3v-9h2.5l.5-3H13z" />
+      </svg>
+    ),
+  },
+  {
+    label: "WhatsApp",
+    href: "https://wa.me/233244000000",
+    svg: (
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+        <path d="M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.2-1.4A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.2-1.7 1.2-.5.1-1.1.1-1.7-.1-.4-.1-.9-.3-1.5-.6a8.4 8.4 0 0 1-3.7-3.4c-.7-1-1-1.8-1-2.5 0-.7.4-1.1.6-1.3.2-.2.4-.2.5-.2h.4c.1 0 .3 0 .4.3l.6 1.4c.1.2 0 .3 0 .4l-.3.4-.3.3c-.1.1-.2.2-.1.4.2.4.7 1.1 1.4 1.8.9.8 1.7 1.1 1.9 1.2.2.1.3.1.5-.1l.6-.7c.2-.2.3-.2.5-.1l1.4.7c.2.1.3.2.4.3.1.2.1.6 0 1z" />
+      </svg>
+    ),
+  },
+];
+
+const SITEMAP: { title: string; links: { label: string; href: string }[] }[] = [
+  {
+    title: "Shop",
+    links: [
+      { label: "All products", href: "/shop" },
+      { label: "Breads", href: "/categories/breads" },
+      { label: "Pastries", href: "/categories/pastries" },
+      { label: "Cakes", href: "/categories/cakes" },
+      { label: "Drinks", href: "/categories/drinks" },
+      { label: "Merch & More", href: "/categories/merch" },
+      { label: "Classes & Stays", href: "/categories/classes" },
+    ],
+  },
+  {
+    title: "Bakery",
+    links: [
+      { label: "Our story", href: "/about" },
+      { label: "FAQ", href: "/faq" },
+      { label: "Visit us", href: "/about#visit" },
+      { label: "Wholesale", href: "/categories/merch" },
+    ],
+  },
+  {
+    title: "Help",
+    links: [
+      { label: "Contact", href: "mailto:hello@akuasbakery.test" },
+      { label: "Custom cakes", href: "/faq#custom-cakes--celebrations" },
+      { label: "Allergens", href: "/faq#allergens--ingredients" },
+      { label: "Delivery", href: "/faq#ordering--delivery" },
+    ],
+  },
+  {
+    title: "Legal",
+    links: [
+      { label: "Terms of Service", href: "/terms" },
+      { label: "Privacy Policy", href: "/privacy" },
+    ],
+  },
+];
+
+export async function Footer() {
+  "use cache";
+  const year = new Date().getFullYear();
   return (
-    <footer className="mt-12 px-8 py-10 text-center text-xs text-muted-foreground border-t border-border bg-card">
-      <p className="m-0 font-serif text-base text-foreground">Akua's Bakery</p>
-      <p className="mt-1 mb-3">12 Independence Ave, Accra · +233 244 000 000</p>
-      <p className="m-0">
-        Built with{" "}
-        <a
-          href="https://www.npmjs.com/package/@cimplify/sdk"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="font-semibold text-primary hover:underline"
-        >
-          @cimplify/sdk
-        </a>
-      </p>
+    <footer className="mt-16 border-t border-border bg-card text-sm">
+      <div className="max-w-7xl mx-auto px-8 pt-12 pb-8">
+        <div className="grid gap-10 md:grid-cols-[1.4fr_repeat(4,1fr)]">
+          <div>
+            <p className="font-serif text-2xl text-foreground m-0 mb-2">Akua&apos;s Bakery</p>
+            <p className="text-muted-foreground leading-relaxed mb-4 max-w-sm">
+              Family-run bakery in East Legon. Sourdough, croissants, layered
+              cakes — handcrafted since 2018, delivered across Accra.
+            </p>
+            <address className="not-italic text-muted-foreground space-y-1">
+              <p className="m-0">12 Independence Ave, Accra</p>
+              <p className="m-0">
+                <a href="tel:+233244000000" className="hover:text-foreground transition-colors">
+                  +233 244 000 000
+                </a>
+              </p>
+              <p className="m-0">
+                <a
+                  href="mailto:hello@akuasbakery.test"
+                  className="hover:text-foreground transition-colors"
+                >
+                  hello@akuasbakery.test
+                </a>
+              </p>
+              <p className="m-0 text-xs">Tue–Sun · 8am–8pm · closed Mondays</p>
+            </address>
+            <div className="flex items-center gap-3 mt-5">
+              {SOCIALS.map((s) => (
+                <a
+                  key={s.label}
+                  href={s.href}
+                  aria-label={s.label}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center justify-center w-9 h-9 rounded-full border border-border text-muted-foreground hover:text-foreground hover:border-foreground transition-colors"
+                >
+                  {s.svg}
+                </a>
+              ))}
+            </div>
+          </div>
+          {SITEMAP.map((section) => (
+            <nav key={section.title} aria-labelledby={`footer-${section.title}`}>
+              <p
+                id={`footer-${section.title}`}
+                className="font-semibold text-foreground mb-3 text-[13px] uppercase tracking-[0.08em]"
+              >
+                {section.title}
+              </p>
+              <ul className="space-y-2 m-0 p-0 list-none">
+                {section.links.map((link) => (
+                  <li key={link.label}>
+                    <Link
+                      href={link.href}
+                      className="text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ))}
+        </div>
+
+        <div className="mt-12 pt-6 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-muted-foreground">
+          <p className="m-0">© {year} Akua&apos;s Bakery. All rights reserved.</p>
+          <p className="m-0 inline-flex items-center gap-1.5">
+            <span className="text-muted-foreground/80">Powered by</span>
+            <a
+              href="https://app.cimplify.io"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Cimplify"
+              className="inline-flex items-center gap-1 font-serif text-foreground hover:text-primary transition-colors"
+            >
+              <span className="font-semibold tracking-tight">Cimplify</span>
+              <svg
+                viewBox="0 0 12 12"
+                aria-hidden
+                className="w-3 h-3 opacity-70"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+              >
+                <path d="M3 9L9 3M9 3H4M9 3v5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </a>
+          </p>
+        </div>
+      </div>
     </footer>
   );
 }

package/templates/storefront/components/header.tsx

@@ -1,41 +1,51 @@
-"use client";
-
 import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useCartCount } from "@/lib/cart";
+import { Suspense } from "react";
+import { NavLink } from "./nav-link";
+import { CartPill, CartPillSkeleton } from "./cart-pill";
 
 const TAGLINE = "ACCRA · SINCE 2018";
 
-function navLinkClass(active: boolean) {
-  return [
-    "text-[13px] font-medium tracking-wide transition-colors",
-    active ? "text-primary" : "text-muted-foreground hover:text-foreground",
-  ].join(" ");
-}
-
+/**
+ * Server-rendered header chrome. Brand mark + nav layout streams from the
+ * cache; the active-link styling and live cart count are dynamic islands
+ * mounted in their own Suspense boundaries so the chrome never blocks.
+ */
 export function Header() {
-  const pathname = usePathname();
-  const { count } = useCartCount();
   return (
     <header className="sticky top-0 z-30 flex items-center justify-between px-8 py-4 border-b border-border bg-background/90 backdrop-blur-md">
       <Link href="/" className="flex items-baseline gap-2">
         <span className="font-serif text-[22px] font-semibold -tracking-[0.02em]">
-          Akua's Bakery
+          Akua&apos;s Bakery
         </span>
         <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
           {TAGLINE}
         </span>
       </Link>
       <nav className="flex items-center gap-6">
-        <Link href="/" className={navLinkClass(pathname === "/")}>Home</Link>
-        <Link href="/shop" className={navLinkClass(pathname === "/shop")}>Shop</Link>
-        <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"
-        >
-          Cart · {count}
-        </Link>
+        <Suspense fallback={<NavLinkFallback>Home</NavLinkFallback>}>
+          <NavLink href="/">Home</NavLink>
+        </Suspense>
+        <Suspense fallback={<NavLinkFallback>Shop</NavLinkFallback>}>
+          <NavLink href="/shop">Shop</NavLink>
+        </Suspense>
+        <Suspense fallback={<NavLinkFallback>About</NavLinkFallback>}>
+          <NavLink href="/about">About</NavLink>
+        </Suspense>
+        <Suspense fallback={<NavLinkFallback>FAQ</NavLinkFallback>}>
+          <NavLink href="/faq">FAQ</NavLink>
+        </Suspense>
+        <Suspense fallback={<CartPillSkeleton />}>
+          <CartPill />
+        </Suspense>
       </nav>
     </header>
   );
 }
+
+function NavLinkFallback({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="text-[13px] font-medium tracking-wide text-muted-foreground">
+      {children}
+    </span>
+  );
+}

package/templates/storefront/components/nav-link.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
+  const pathname = usePathname();
+  const active = pathname === href;
+  return (
+    <Link
+      href={href}
+      className={[
+        "text-[13px] font-medium tracking-wide transition-colors",
+        active ? "text-primary" : "text-muted-foreground hover:text-foreground",
+      ].join(" ")}
+    >
+      {children}
+    </Link>
+  );
+}

package/templates/storefront/components/store-product-card.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import Link from "next/link";
 import {
   CardVariant,
   FoodProductCard,
@@ -60,39 +60,23 @@ interface Props {
 
 /**
  * Variant-aware product card that opens the URL-driven product modal on
- * click (`?product=<slug>`). Renders the underlying SDK variant card
- * (Food, Bundle, Composite, …) directly and supplies a `renderLink` that
- * intercepts navigation — so a single `<CardShell>`-rendered `<a>` tag
- * wraps the card (no nested anchors, no hydration error).
+ * click. Uses `next/link` with `?product=<slug>` so the link is statically
+ * pre-renderable — no `useSearchParams` dependency means cards don't
+ * become dynamic islands. The modal (which already reads `useSearchParams`
+ * inside a Suspense boundary in the root layout) handles the rest.
  */
 export function StoreProductCard({ product, variant }: Props) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
   const slug = product.slug || product.id;
   const Card = VARIANT_CARDS[variant ?? resolveVariant(product)];
-
-  const open = () => {
-    const next = new URLSearchParams(searchParams?.toString() ?? "");
-    next.set("product", slug);
-    router.push(`${pathname}?${next.toString()}`, { scroll: false });
-  };
+  const href = `?product=${encodeURIComponent(slug)}`;
 
   return (
     <Card
       product={product}
-      renderLink={({ href, className, children }) => (
-        <a
-          href={href}
-          className={className}
-          onClick={(e) => {
-            e.preventDefault();
-            open();
-          }}
-        >
+      renderLink={({ className, children }) => (
+        <Link href={href} scroll={false} prefetch={false} className={className}>
           {children}
-        </a>
+        </Link>
       )}
     />
   );

package/templates/storefront/lib/server-client.ts

@@ -0,0 +1,27 @@
+import { createCimplifyClient, type CimplifyClient } from "@cimplify/sdk";
+
+/**
+ * Server-side Cimplify client. Used by Server Components to fetch catalogue
+ * data during SSR/RSC for SEO-friendly product/category/collection pages.
+ *
+ * Cached per-request via React's cache mechanism — calling this multiple
+ * times within the same request returns the same client instance.
+ *
+ * Base-URL resolution:
+ *   1) NEXT_PUBLIC_CIMPLIFY_API_URL (matches the client-side default)
+ *   2) http://127.0.0.1:8787 — the local mock during dev
+ */
+let cached: CimplifyClient | undefined;
+
+export function getServerClient(): CimplifyClient {
+  if (cached) return cached;
+  const baseUrl =
+    process.env.NEXT_PUBLIC_CIMPLIFY_API_URL?.trim() || "http://127.0.0.1:8787";
+  const publicKey = process.env.NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY ?? "mock-dev";
+  cached = createCimplifyClient({
+    baseUrl,
+    publicKey,
+    suppressPublicKeyWarning: true,
+  });
+  return cached;
+}

package/templates/storefront/next.config.ts

@@ -14,6 +14,10 @@ const MOCK_URL = process.env.NEXT_PUBLIC_CIMPLIFY_API_URL?.trim() || "http://127
  * pass the absolute URL through `<CimplifyProvider/>`).
  */
 const nextConfig: NextConfig = {
+  // Enable Next 16's `cacheComponents` mode so we can use `'use cache'` +
+  // `cacheTag` / `cacheLife` for SSR caching. Cached chrome streams first,
+  // dynamic Suspense boundaries fill in when ready.
+  cacheComponents: true,
   async rewrites() {
     return [
       { source: "/api/v1/:path*", destination: `${MOCK_URL}/api/v1/:path*` },