@cimplify/sdk 0.39.1 → 0.40.0

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

@@ -0,0 +1,117 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import Link from "next/link";
+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";
+
+interface CollectionData {
+  collection: Collection;
+  products: Product[];
+}
+
+async function getCollection(slug: string): Promise<CollectionData | null> {
+  "use cache";
+  cacheTag(tags.collections());
+  cacheLife("hours");
+
+  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">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+          Collection
+        </p>
+        <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-2">
+          {collection.name}
+        </h1>
+        {collection.description && (
+          <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>
+      <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-retail/app/faq/page.tsx

@@ -0,0 +1,127 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Support — Currents Electronics",
+  description:
+    "Shipping, warranty, repairs, returns, 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: "How fast is shipping?",
+        a: "Free same-day delivery within Greater Accra for orders placed before 4pm. Outside Accra, we use a partner courier — usually 1–3 business days, with tracking sent by SMS.",
+      },
+      {
+        q: "Can I pick up in store?",
+        a: "Yes. Choose 'Pickup' at checkout and we'll have your order boxed at our Atomic Junction store within 30 minutes. Bring a photo ID matching the order name.",
+      },
+      {
+        q: "Do you ship internationally?",
+        a: "We ship across West Africa via DHL — rates and ETAs are calculated at checkout once you enter your destination.",
+      },
+      {
+        q: "How do I track my order?",
+        a: "You'll get an SMS and email with a tracking link within 30 minutes of dispatch. Same-day Accra orders include the rider's phone number.",
+      },
+    ],
+  },
+  {
+    title: "Warranty & repairs",
+    items: [
+      {
+        q: "What does the two-year warranty cover?",
+        a: "Manufacturing defects, electrical failures, and battery degradation below 80% within the first 24 months. Accidental damage, water damage, and software issues caused by user installs are excluded.",
+      },
+      {
+        q: "Where do I send a faulty device?",
+        a: "Drop it at our Atomic Junction store, or request a free pickup from your address by emailing support@currentselectronics.test. Loaner devices are available for warranty claims while we diagnose.",
+      },
+      {
+        q: "Can you fix devices bought elsewhere?",
+        a: "We offer paid repairs on Apple and Samsung devices regardless of where they were purchased. Expect a quote within 48 hours of inspection.",
+      },
+    ],
+  },
+  {
+    title: "Trade-in & financing",
+    items: [
+      {
+        q: "How does trade-in work?",
+        a: "Tell us the model and condition of your device, get an instant estimate, and ship it free or drop it at our store. Once we verify, we credit your account or pay out via Mobile Money — your choice.",
+      },
+      {
+        q: "Do you offer instalment payments?",
+        a: "Yes. Pay in 3 (interest-free) or 6/12 monthly instalments via our partner Fidelity Bank. Available at checkout for orders over GH₵2,000.",
+      },
+      {
+        q: "Are there bulk discounts for businesses?",
+        a: "Yes. Email business@currentselectronics.test with your shopping list and team size — most orders over 5 units qualify for a discount, plus free on-site setup.",
+      },
+    ],
+  },
+  {
+    title: "Payment & returns",
+    items: [
+      {
+        q: "What payment methods do you accept?",
+        a: "Mobile Money (MTN, Telecel, AirtelTigo), Visa/Mastercard, instalments via Fidelity Bank, and cash on delivery for Accra orders.",
+      },
+      {
+        q: "What's your return policy?",
+        a: "14 days, no questions asked, on any sealed product. For opened items, returns are accepted within 7 days subject to a 10% restocking fee. We can't accept returns on activated SIM-bundled phones once the SIM is registered.",
+      },
+      {
+        q: "Are products genuine?",
+        a: "Yes. We're an authorised dealer for every brand we stock. Every product ships with the manufacturer's serial number registered to your name — verify it on the brand's official portal anytime.",
+      },
+    ],
+  },
+];
+
+export default function FaqPage() {
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+        Support
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-10 -tracking-[0.025em]">
+        Questions, answered.
+      </h1>
+      <div className="space-y-12">
+        {SECTIONS.map((section) => (
+          <section key={section.title}>
+            <h2 className="text-2xl font-semibold mb-5 -tracking-[0.02em]">
+              {section.title}
+            </h2>
+            <dl className="space-y-6">
+              {section.items.map((item) => (
+                <div key={item.q}>
+                  <dt className="font-semibold 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:support@currentselectronics.test"
+          className="text-primary font-semibold hover:underline"
+        >
+          support@currentselectronics.test
+        </a>{" "}
+        and a real human will reply within 24 hours.
+      </p>
+    </article>
+  );
+}

package/templates/storefront-retail/app/globals.css

@@ -0,0 +1,47 @@
+@import "tailwindcss";
+
+/* Scan the SDK's bundled JS so utility classes used inside its components
+   land in the compiled stylesheet alongside our own. */
+@source "../node_modules/@cimplify/sdk/dist";
+
+/* Currents Electronics palette — cool navy chrome, electric blue accent.
+   Modern retail aesthetic; tweak these tokens to retheme everything. */
+@theme {
+  --color-background: oklch(0.99 0.005 240);
+  --color-foreground: oklch(0.2 0.03 250);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.2 0.03 250);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.2 0.03 250);
+  --color-primary: oklch(0.55 0.22 255);
+  --color-primary-foreground: oklch(0.99 0 0);
+  --color-secondary: oklch(0.95 0.02 250);
+  --color-secondary-foreground: oklch(0.25 0.05 250);
+  --color-muted: oklch(0.96 0.01 250);
+  --color-muted-foreground: oklch(0.5 0.03 250);
+  --color-accent: oklch(0.92 0.07 240);
+  --color-accent-foreground: oklch(0.25 0.1 250);
+  --color-destructive: oklch(0.58 0.24 27);
+  --color-destructive-foreground: oklch(0.99 0 0);
+  --color-border: oklch(0.92 0.01 250);
+  --color-input: oklch(0.94 0.01 250);
+  --color-ring: oklch(0.55 0.22 255);
+  --radius: 0.5rem;
+}
+
+@layer base {
+  html, body {
+    margin: 0;
+    padding: 0;
+    background: var(--color-background);
+    color: var(--color-foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  a { color: inherit; text-decoration: none; }
+  h1, h2, h3, h4 {
+    font-family: var(--font-sans);
+    letter-spacing: -0.02em;
+    font-weight: 600;
+  }
+}

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

@@ -0,0 +1,46 @@
+import type { Metadata } from "next";
+import { Inter, JetBrains_Mono } from "next/font/google";
+import "./globals.css";
+import { Providers } from "@/components/providers";
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
+import { ProductModal } from "@/components/product-modal";
+import { Suspense } from "react";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  display: "swap",
+});
+
+const mono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "Currents Electronics",
+  description:
+    "The latest laptops, phones, audio, and accessories — curated, in-stock, shipped from Accra to Africa.",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={`${inter.variable} ${mono.variable}`}>
+      <body
+        suppressHydrationWarning
+        className="min-h-screen flex flex-col bg-background text-foreground font-sans"
+      >
+        <Providers>
+          <Header />
+          <main className="flex-1 pb-12 w-full">{children}</main>
+          <Footer />
+          <Suspense fallback={null}>
+            <ProductModal />
+          </Suspense>
+        </Providers>
+      </body>
+    </html>
+  );
+}

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} />}
+    />
+  );
+}