@cimplify/sdk 0.39.0 → 0.40.0

package/templates/storefront-retail/app/orders/[id]/page.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+export default async function OrderPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return (
+    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+      <h1 className="text-3xl mt-0 mb-3 font-bold -tracking-[0.025em]">
+        Order confirmed.
+      </h1>
+      <p className="text-muted-foreground">
+        Order <code className="font-mono text-foreground">{id}</code> — you&apos;ll
+        get an SMS with tracking within 30 minutes.
+      </p>
+      <p className="mt-6">
+        <Link
+          href="/"
+          className="inline-block px-6 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm transition-colors hover:bg-primary/90"
+        >
+          Continue shopping
+        </Link>
+      </p>
+    </section>
+  );
+}

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

@@ -0,0 +1,97 @@
+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";
+
+export const metadata: Metadata = {
+  title: "Currents Electronics — Tech, in stock, in Accra",
+  description:
+    "The latest laptops, phones, audio, and accessories — curated, in-stock, shipped same-day from 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 : [];
+
+  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,
+  };
+}
+
+export default async function HomePage() {
+  const { collections, categories } = await getHomeData();
+
+  return (
+    <>
+      <Hero
+        badge="LAPTOPS · PHONES · AUDIO · ACCESSORIES"
+        title="The tech you want, in stock today."
+        subtitle="Authorised dealer for Apple, Samsung, Sony, Bose. Same-day delivery in Accra. Two-year warranty on every product."
+      />
+      {collections.map(({ collection, products }) => (
+        <Suspense
+          key={collection.id}
+          fallback={<StripSkeleton title={collection.name} />}
+        >
+          <CollectionStrip
+            collection={collection}
+            products={products}
+            collectionHref={`/collections/${collection.slug}`}
+          />
+        </Suspense>
+      ))}
+      <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="text-[26px] font-semibold m-0 mb-5 -tracking-[0.02em]">{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-retail/app/privacy/page.tsx

@@ -0,0 +1,101 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Privacy Policy — Currents Electronics",
+  description:
+    "How Currents Electronics 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-mono uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        Privacy
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-2 -tracking-[0.025em]">
+        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="text-2xl font-semibold mt-0 -tracking-[0.02em]">
+          What we collect
+        </h2>
+        <p>
+          We collect what we need to fulfil your order: name, phone, delivery
+          address, email, and the items in your order. For warranty service
+          and trade-ins, we also collect device serial numbers. Payment details
+          are processed by our payment partners (Paystack, Stripe, Fidelity
+          Bank) and never stored on our servers.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          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 register product warranties on your behalf.</li>
+          <li>To send order updates by SMS and email.</li>
+          <li>
+            To send occasional product news and deals — only if you opted in.
+            Unsubscribe anytime in one click.
+          </li>
+          <li>
+            To analyse aggregated, anonymised browsing patterns so we can
+            improve the site and recommend products.
+          </li>
+        </ul>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          Who we share it with
+        </h2>
+        <p>
+          We share data only with the partners required to fulfil your order
+          and warranty: payment processors (Paystack, Stripe, Fidelity Bank),
+          delivery couriers (DHL, local riders), manufacturer warranty portals
+          (for serial registration), and our email/SMS providers. We do not
+          sell or rent personal data to third parties — ever.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">Cookies</h2>
+        <p>
+          We use a small number of strictly-necessary cookies to keep your cart
+          working and your session signed in, plus optional analytics cookies
+          (you can disable these in our cookie banner).
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          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 (subject to our tax-record retention obligations). Email{" "}
+          <a
+            href="mailto:privacy@currentselectronics.test"
+            className="text-primary font-semibold hover:underline"
+          >
+            privacy@currentselectronics.test
+          </a>{" "}
+          and we&apos;ll respond within 14 days.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">Retention</h2>
+        <p>
+          We keep order records for 7 years to comply with Ghanaian tax law.
+          Warranty records are retained for the life of the warranty plus 24
+          months. Marketing-list opt-ins are kept until you unsubscribe.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">Changes</h2>
+        <p>
+          If we make material changes to this policy, we&apos;ll email
+          customers on our marketing list and update the &quot;last updated&quot;
+          date above.
+        </p>
+      </section>
+    </article>
+  );
+}

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

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags } from "@cimplify/sdk/server";
+import { ShopClient } from "./shop-client";
+
+export const metadata: Metadata = {
+  title: "Shop — Akua's Bakery",
+  description: "Browse the full catalogue: breads, pastries, cakes, drinks, merch, and more.",
+};
+
+async function getShopData() {
+  "use cache";
+  cacheTag(tags.products(), tags.categories());
+  cacheLife("hours");
+
+  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 : [],
+  };
+}
+
+export default async function ShopPage() {
+  const { products, categories } = await getShopData();
+  return <ShopClient products={products} categories={categories} />;
+}

package/templates/storefront-retail/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} />}
+    />
+  );
+}

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

@@ -0,0 +1,117 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Terms of Service — Currents Electronics",
+  description: "The rules of the road for ordering from Currents Electronics.",
+};
+
+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-mono uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        Terms of service
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-2 -tracking-[0.025em]">
+        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="text-2xl font-semibold mt-0 -tracking-[0.02em]">
+          1. Who we are
+        </h2>
+        <p>
+          Currents Electronics (&quot;we&quot;, &quot;us&quot;) is a consumer
+          electronics retailer based at Atomic Junction, East Legon, Accra,
+          Ghana. By placing an order, you (&quot;you&quot;, &quot;customer&quot;)
+          agree to these terms.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          2. Authorised dealer status
+        </h2>
+        <p>
+          We are authorised dealers for the brands listed on our About page.
+          Every product is sourced direct from the manufacturer or a certified
+          distributor. Serial numbers can be verified on the brand&apos;s
+          official portal at any time.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          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 instalments via
+          our partner bank. Cash on delivery is available for Accra orders only.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          4. Warranty
+        </h2>
+        <p>
+          Every product carries a two-year warranty: the standard manufacturer
+          warranty in year one, plus a Currents-backed extension in year two.
+          Coverage includes manufacturing defects and battery degradation below
+          80%. Accidental damage, liquid damage, and unauthorised modifications
+          are excluded.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          5. Returns
+        </h2>
+        <p>
+          Sealed products: 14 days, no questions asked. Opened products:
+          7 days, subject to a 10% restocking fee for non-defective items.
+          Activated SIM-bundled phones cannot be returned once the SIM is
+          registered. Custom orders and bulk corporate orders are
+          non-refundable except for defects.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          6. Trade-in
+        </h2>
+        <p>
+          Trade-in quotes are estimates only. Final value is determined after
+          inspection by our refurbishment partner. We reserve the right to
+          revise the quote, and you may decline the revised offer and receive
+          your device back at our cost.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          7. 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&apos;re not liable for indirect or
+          consequential losses, including data loss.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          8. 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="text-2xl font-semibold -tracking-[0.02em]">
+          9. Contact
+        </h2>
+        <p>
+          Questions? Email{" "}
+          <a
+            href="mailto:hello@currentselectronics.test"
+            className="text-primary font-semibold hover:underline"
+          >
+            hello@currentselectronics.test
+          </a>
+          .
+        </p>
+      </section>
+    </article>
+  );
+}

package/templates/storefront-retail/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-retail/components/category-grid.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CategoryGrid as SdkCategoryGrid } from "@cimplify/sdk/react";
+import type { Category } from "@cimplify/sdk";
+
+/**
+ * Homepage category tiles — defers to the SDK's <CategoryGrid/> for layout
+ * and accessibility, and routes selections to /categories/:slug.
+ */
+export function CategoryGrid({ categories }: { categories?: Category[] }) {
+  const router = useRouter();
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-14">
+      <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">Browse the menu</h2>
+      <SdkCategoryGrid
+        categories={categories}
+        onSelect={(c) => router.push(`/categories/${c.slug}`)}
+        classNames={{
+          item: "flex flex-col gap-1 p-6 bg-card border border-border rounded-2xl cursor-pointer text-left transition-all hover:border-primary hover:-translate-y-0.5",
+          name: "font-serif text-lg font-semibold text-foreground",
+          description: "text-xs text-muted-foreground",
+          count: "text-xs text-muted-foreground mt-1",
+        }}
+      />
+    </section>
+  );
+}

package/templates/storefront-retail/components/collection-strip.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+import type { Collection, Product } from "@cimplify/sdk";
+import { StoreProductCard } from "./store-product-card";
+
+interface CollectionStripProps {
+  collection: Collection;
+  products: Product[];
+  collectionHref?: string;
+}
+
+/**
+ * Horizontal strip of products under a collection title. Cards come from the
+ * SDK so every variant (Food, Bundle, Composite, Service, …) renders
+ * correctly; clicks open the shared URL-driven product modal.
+ */
+export function CollectionStrip({ collection, products, collectionHref }: CollectionStripProps) {
+  if (products.length === 0) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-12">
+      <header className="grid grid-cols-[1fr_auto] items-end gap-4 mb-5">
+        <h2 className="font-serif text-[28px] font-semibold m-0">{collection.name}</h2>
+        {collectionHref && (
+          <Link
+            href={collectionHref}
+            className="text-[13px] font-semibold text-primary hover:underline"
+          >
+            See all →
+          </Link>
+        )}
+        {collection.description && (
+          <p className="col-span-full m-0 mt-1 text-sm text-muted-foreground">
+            {collection.description}
+          </p>
+        )}
+      </header>
+      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto snap-x snap-mandatory pb-2">
+        {products.slice(0, 8).map((p) => (
+          <div key={p.id} className="snap-start">
+            <StoreProductCard product={p} />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}