@cimplify/sdk 0.38.5 → 0.39.1

package/templates/storefront/app/collections/[slug]/page.tsx

@@ -1,59 +1,74 @@
-"use client";
-
-import { useEffect, useState, use } from "react";
+import type { Metadata } from "next";
+import { Suspense } from "react";
 import Link from "next/link";
-import { ProductGrid, useCimplifyClient } from "@cimplify/sdk/react";
-import type { Collection, Product } from "@cimplify/sdk";
-import { StoreProductCard } from "@/components/store-product-card";
+import { notFound } from "next/navigation";
+import { cacheTag, cacheLife } from "next/cache";
+import {
+  getServerClient,
+  tags,
+  type Collection,
+  type Product,
+} from "@cimplify/sdk/server";
+import { ListingClient } from "./listing-client";
 
-/**
- * Full grid of products within a single collection. Reads `slug` from the
- * route, resolves it against the catalogue API, and renders the SDK
- * <ProductGrid/> with our URL-modal-aware <StoreProductCard/>.
- */
-export default function CollectionPage({ params }: { params: Promise<{ slug: string }> }) {
-  const { slug } = use(params);
-  const { client } = useCimplifyClient();
-  const [collection, setCollection] = useState<Collection>();
-  const [products, setProducts] = useState<Product[]>([]);
-  const [loading, setLoading] = useState(true);
+interface CollectionData {
+  collection: Collection;
+  products: Product[];
+}
 
-  useEffect(() => {
-    let cancelled = false;
-    void (async () => {
-      try {
-        const colRes = await client.catalogue.getCollectionBySlug(slug);
-        if (cancelled || !colRes.ok) return;
-        setCollection(colRes.value);
-        const r = await client.catalogue.getCollectionProducts(colRes.value.id);
-        if (cancelled) return;
-        if (r.ok) {
-          const items = (r.value as { items?: Product[] }).items ?? (r.value as Product[]);
-          setProducts(items);
-        }
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, slug]);
+async function getCollection(slug: string): Promise<CollectionData | null> {
+  "use cache";
+  cacheTag(tags.collections());
+  cacheLife("hours");
 
-  if (loading) {
-    return <p className="text-center py-20 text-muted-foreground">Loading collection…</p>;
-  }
-  if (!collection) {
-    return (
-      <div className="text-center py-20 text-muted-foreground">
-        <p>Collection not found.</p>
-        <Link href="/" className="text-primary font-semibold">
-          ← Back home
-        </Link>
-      </div>
-    );
-  }
+  const client = getServerClient();
+  const colRes = await client.catalogue.getCollectionBySlug(slug);
+  if (!colRes.ok) return null;
+
+  cacheTag(tags.collection(colRes.value.id), tags.collectionProducts(colRes.value.id));
+  const r = await client.catalogue.getCollectionProducts(colRes.value.id);
+  const products = r.ok
+    ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
+    : [];
+  return { collection: colRes.value, products };
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const data = await getCollection(slug);
+  if (!data) return {};
+  return {
+    title: `${data.collection.name} — Akua's Bakery`,
+    description: data.collection.description ?? undefined,
+  };
+}
+
+export default async function CollectionPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  return (
+    <Suspense fallback={<CollectionSkeleton />}>
+      <CollectionContent params={params} />
+    </Suspense>
+  );
+}
 
+async function CollectionContent({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const data = await getCollection(slug);
+  if (!data) notFound();
+
+  const { collection, products } = data;
   return (
     <section className="max-w-7xl mx-auto px-8 pt-12">
       <header className="mb-8 text-center">
@@ -64,17 +79,39 @@ export default function CollectionPage({ params }: { params: Promise<{ slug: str
           {collection.name}
         </h1>
         {collection.description && (
-          <p className="mx-auto mb-2 max-w-xl text-muted-foreground">{collection.description}</p>
+          <p className="mx-auto mb-2 max-w-xl text-muted-foreground">
+            {collection.description}
+          </p>
         )}
         <p className="text-sm text-muted-foreground">
           {products.length} item{products.length === 1 ? "" : "s"}
         </p>
       </header>
-      <ProductGrid
-        products={products}
-        emptyMessage="No products in this collection yet."
-        renderCard={(p) => <StoreProductCard product={p} />}
-      />
+      <ListingClient products={products} />
+      {products.length === 0 && (
+        <p className="text-center mt-8">
+          <Link href="/" className="text-primary font-semibold">
+            ← Back home
+          </Link>
+        </p>
+      )}
+    </section>
+  );
+}
+
+function CollectionSkeleton() {
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-12">
+      <header className="mb-8 text-center">
+        <div className="mx-auto h-3 w-20 bg-muted rounded mb-2 animate-pulse" />
+        <div className="mx-auto h-10 w-64 bg-muted rounded mb-2 animate-pulse" />
+        <div className="mx-auto h-4 w-80 bg-muted rounded animate-pulse" />
+      </header>
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="aspect-square bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
     </section>
   );
 }

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

@@ -0,0 +1,122 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "FAQ — Akua's Bakery",
+  description:
+    "Delivery, pickup, custom cakes, allergens, payment — answers to the questions we hear most often.",
+};
+
+interface QA {
+  q: string;
+  a: string;
+}
+
+const SECTIONS: { title: string; items: QA[] }[] = [
+  {
+    title: "Ordering & delivery",
+    items: [
+      {
+        q: "Where do you deliver?",
+        a: "Same-day delivery within Greater Accra for orders placed before 2pm. Outside Accra, we offer next-day shipping by partner courier — checkout will show the available options for your address.",
+      },
+      {
+        q: "Can I pick up my order?",
+        a: "Yes. Pickup is available 8am–8pm at our East Legon location, 12 Independence Avenue. Choose 'Pickup' at checkout and we'll have everything boxed and ready when you arrive.",
+      },
+      {
+        q: "How quickly will my order arrive?",
+        a: "Same-day delivery typically arrives within 2–4 hours of order confirmation. You'll get an SMS when the rider is en route.",
+      },
+      {
+        q: "Do you offer subscriptions?",
+        a: "Yes — our Weekly Loaf Subscription delivers a fresh loaf to your door every week. Pause or skip any time. See the Classes & Stays category for details.",
+      },
+    ],
+  },
+  {
+    title: "Custom cakes & celebrations",
+    items: [
+      {
+        q: "How much notice do you need for a custom cake?",
+        a: "48 hours minimum for tier cakes; 7 days for elaborate designs with sugar work or fondant figures. Book a free Custom Cake Consultation to walk through flavours, sizes, and decoration.",
+      },
+      {
+        q: "Can I bring my own design?",
+        a: "Absolutely — send us a reference image and we'll quote what's possible within your timeline and budget.",
+      },
+      {
+        q: "Do you do wedding cakes?",
+        a: "We do, with at least 6 weeks' notice. Tasting sessions are GH₵150 and credited toward your final order.",
+      },
+    ],
+  },
+  {
+    title: "Allergens & ingredients",
+    items: [
+      {
+        q: "Is your kitchen allergen-free?",
+        a: "No. Our kitchen handles wheat, dairy, eggs, and tree nuts. Cross-contamination is possible. Please let us know about severe allergies before ordering — we'll be honest about whether we can safely accommodate them.",
+      },
+      {
+        q: "Do you have vegan options?",
+        a: "Yes. The country sourdough, whole-wheat seed loaf, baguette, and most of the breads are vegan. The hibiscus drink (Sobolo) and orange juice are also vegan.",
+      },
+      {
+        q: "Where does your flour come from?",
+        a: "We mill our own heritage wheat flour from the Volta Region. The 25kg sack is available in our Merch & More category for home bakers and trade customers.",
+      },
+    ],
+  },
+  {
+    title: "Payment & returns",
+    items: [
+      {
+        q: "What payment methods do you accept?",
+        a: "Mobile Money (MTN, Telecel, AirtelTigo), Visa/Mastercard, and cash on delivery for Accra-based orders.",
+      },
+      {
+        q: "What's your return policy?",
+        a: "We don't accept returns on baked goods for food-safety reasons, but if anything is wrong with your order — quality, accuracy, or freshness — message us within 24 hours and we'll make it right or refund you.",
+      },
+      {
+        q: "Do you offer wholesale pricing?",
+        a: "Yes — our Heritage Flour 25kg sack ships with quantity-tier pricing, and we'd love to talk if you run a café or restaurant. Email hello@akuasbakery.test.",
+      },
+    ],
+  },
+];
+
+export default function FaqPage() {
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Frequently asked
+      </p>
+      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-10 -tracking-[0.02em]">
+        Questions, answered.
+      </h1>
+      <div className="space-y-12">
+        {SECTIONS.map((section) => (
+          <section key={section.title}>
+            <h2 className="font-serif text-2xl font-semibold mb-5">{section.title}</h2>
+            <dl className="space-y-6">
+              {section.items.map((item) => (
+                <div key={item.q}>
+                  <dt className="font-medium text-foreground mb-1.5">{item.q}</dt>
+                  <dd className="text-muted-foreground leading-relaxed">{item.a}</dd>
+                </div>
+              ))}
+            </dl>
+          </section>
+        ))}
+      </div>
+      <p className="mt-12 pt-8 border-t border-border text-sm text-muted-foreground">
+        Still stuck? Email{" "}
+        <a href="mailto:hello@akuasbakery.test" className="text-primary font-semibold hover:underline">
+          hello@akuasbakery.test
+        </a>{" "}
+        and a real human will reply within 24 hours.
+      </p>
+    </article>
+  );
+}

package/templates/storefront/app/page.tsx

@@ -1,48 +1,48 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useCimplifyClient } from "@cimplify/sdk/react";
-import type { Category, Collection, Product } from "@cimplify/sdk";
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
 import { Hero } from "@/components/hero";
 import { CollectionStrip } from "@/components/collection-strip";
 import { CategoryGrid } from "@/components/category-grid";
 
-interface CollectionWithProducts {
-  collection: Collection;
-  products: Product[];
-}
+export const metadata: Metadata = {
+  title: "Akua's Bakery — Fresh from the oven, every day",
+  description:
+    "Sourdough, croissants, cakes, and more — handcrafted in East Legon, delivered across Accra.",
+};
+
+async function getHomeData() {
+  "use cache";
+  cacheTag(tags.collections(), tags.categories(), tags.products());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const [colRes, catRes] = await Promise.all([
+    client.catalogue.getCollections(),
+    client.catalogue.getCategories(),
+  ]);
+  const collections = colRes.ok ? colRes.value : [];
+  const categories = catRes.ok ? catRes.value : [];
 
-export default function HomePage() {
-  const { client } = useCimplifyClient();
-  const [collections, setCollections] = useState<CollectionWithProducts[]>([]);
-  const [categories, setCategories] = useState<Category[]>([]);
+  const collectionsWithProducts = await Promise.all(
+    collections.map(async (col) => {
+      const r = await client.catalogue.getCollectionProducts(col.id);
+      const items = r.ok
+        ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
+        : [];
+      return { collection: col, products: items };
+    }),
+  );
+
+  return {
+    collections: collectionsWithProducts.filter((x) => x.products.length > 0),
+    categories,
+  };
+}
 
-  useEffect(() => {
-    let cancelled = false;
-    void (async () => {
-      const [colRes, catRes] = await Promise.all([
-        client.catalogue.getCollections(),
-        client.catalogue.getCategories(),
-      ]);
-      if (cancelled) return;
-      if (catRes.ok) setCategories(catRes.value);
-      if (colRes.ok) {
-        const withProducts = await Promise.all(
-          colRes.value.map(async (col) => {
-            const r = await client.catalogue.getCollectionProducts(col.id);
-            const items = r.ok
-              ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
-              : [];
-            return { collection: col, products: items };
-          }),
-        );
-        if (!cancelled) setCollections(withProducts.filter((x) => x.products.length > 0));
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [client]);
+export default async function HomePage() {
+  const { collections, categories } = await getHomeData();
 
   return (
     <>
@@ -52,14 +52,46 @@ export default function HomePage() {
         subtitle="Sourdough, croissants, cakes, and more — handcrafted in East Legon, delivered across Accra."
       />
       {collections.map(({ collection, products }) => (
-        <CollectionStrip
+        <Suspense
           key={collection.id}
-          collection={collection}
-          products={products}
-          collectionHref={`/collections/${collection.slug}`}
-        />
+          fallback={<StripSkeleton title={collection.name} />}
+        >
+          <CollectionStrip
+            collection={collection}
+            products={products}
+            collectionHref={`/collections/${collection.slug}`}
+          />
+        </Suspense>
       ))}
-      <CategoryGrid categories={categories} />
+      <Suspense fallback={<CategoryGridSkeleton />}>
+        <CategoryGrid categories={categories} />
+      </Suspense>
     </>
   );
 }
+
+function StripSkeleton({ title }: { title: string }) {
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-12">
+      <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">{title}</h2>
+      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto pb-2">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="aspect-square bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function CategoryGridSkeleton() {
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-14">
+      <div className="h-8 w-48 bg-muted rounded mb-5 animate-pulse" />
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-32 bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,88 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Privacy Policy — Akua's Bakery",
+  description:
+    "How Akua's Bakery collects, uses, and protects your personal data.",
+};
+
+export default function PrivacyPage() {
+  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">
+        Privacy
+      </p>
+      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        Privacy Policy
+      </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">What we collect</h2>
+        <p>
+          We collect only what we need to fulfil your order: your name, phone,
+          delivery address, email, and the items in your order. Payment details
+          are processed by our payment partners (Paystack, Stripe) and never
+          stored on our servers.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">How we use it</h2>
+        <ul className="list-disc pl-6 space-y-2">
+          <li>To prepare, deliver, and confirm your order.</li>
+          <li>To send order updates by SMS and email.</li>
+          <li>
+            To send occasional product news — only if you opted in. Unsubscribe
+            anytime in one click.
+          </li>
+          <li>
+            To analyse aggregated, anonymised browsing patterns so we can
+            improve the site.
+          </li>
+        </ul>
+
+        <h2 className="font-serif text-2xl font-semibold">Who we share it with</h2>
+        <p>
+          We share data only with the partners required to fulfil your order:
+          payment processors (Paystack, Stripe), delivery riders, and our
+          email/SMS providers. We do not sell or rent personal data to third
+          parties — ever.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">Cookies</h2>
+        <p>
+          We use a small number of strictly-necessary cookies to keep your cart
+          working and your session signed in. We don't use third-party
+          advertising or tracking cookies.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">Your rights</h2>
+        <p>
+          Under the Ghana Data Protection Act, 2012 (Act 843), you have the
+          right to access the data we hold about you, correct it, or have it
+          deleted. Email{" "}
+          <a
+            href="mailto:privacy@akuasbakery.test"
+            className="text-primary font-semibold hover:underline"
+          >
+            privacy@akuasbakery.test
+          </a>{" "}
+          and we'll respond within 14 days.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">Retention</h2>
+        <p>
+          We keep order records for 7 years to comply with Ghanaian tax law.
+          Marketing-list opt-ins are kept until you unsubscribe.
+        </p>
+
+        <h2 className="font-serif text-2xl font-semibold">Changes</h2>
+        <p>
+          If we make material changes to this policy, we'll email customers on
+          our marketing list and update the &quot;last updated&quot; date above.
+        </p>
+      </section>
+    </article>
+  );
+}

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

@@ -1,46 +1,30 @@
-"use client";
+import type { Metadata } from "next";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags } from "@cimplify/sdk/server";
+import { ShopClient } from "./shop-client";
 
-import { useEffect, useState } from "react";
-import { CataloguePage, useCimplifyClient } from "@cimplify/sdk/react";
-import type { Category, Product } from "@cimplify/sdk";
-import { StoreProductCard } from "@/components/store-product-card";
+export const metadata: Metadata = {
+  title: "Shop — Akua's Bakery",
+  description: "Browse the full catalogue: breads, pastries, cakes, drinks, merch, and more.",
+};
 
-/** Full catalogue page — every product, with the SDK's filterable layout. */
-export default function ShopPage() {
-  const { client } = useCimplifyClient();
-  const [products, setProducts] = useState<Product[]>();
-  const [categories, setCategories] = useState<Category[]>();
-  const [loading, setLoading] = useState(true);
+async function getShopData() {
+  "use cache";
+  cacheTag(tags.products(), tags.categories());
+  cacheLife("hours");
 
-  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]);
+  const client = getServerClient();
+  const [p, c] = await Promise.all([
+    client.catalogue.getProducts({ limit: 50 }),
+    client.catalogue.getCategories(),
+  ]);
+  return {
+    products: p.ok ? p.value.items : [],
+    categories: c.ok ? c.value : [],
+  };
+}
 
-  if (loading) {
-    return <p className="text-center py-20 text-muted-foreground">Loading shop…</p>;
-  }
-  return (
-    <CataloguePage
-      title="The Menu"
-      products={products}
-      categories={categories}
-      renderCard={(p) => <StoreProductCard product={p} />}
-    />
-  );
+export default async function ShopPage() {
+  const { products, categories } = await getShopData();
+  return <ShopClient products={products} categories={categories} />;
 }

package/templates/storefront/app/shop/shop-client.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { CataloguePage } from "@cimplify/sdk/react";
+import type { Category, Product } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+
+/**
+ * Client island for the shop page. Server-side fetches all products and
+ * categories (cached via `'use cache'` in `app/shop/page.tsx`), then hands
+ * them to `<CataloguePage>` which owns the interactive filter / sort state.
+ */
+export function ShopClient({
+  products,
+  categories,
+}: {
+  products: Product[];
+  categories: Category[];
+}) {
+  return (
+    <CataloguePage
+      title="The Menu"
+      products={products}
+      categories={categories}
+      renderCard={(p) => <StoreProductCard product={p} />}
+    />
+  );
+}