@cimplify/sdk 0.40.1 → 0.41.0

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

@@ -0,0 +1,165 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { cacheTag, cacheLife } from "next/cache";
+import {
+  getServerClient,
+  tags,
+  type Product,
+  type ProductWithDetails,
+} from "@cimplify/sdk/server";
+import { ProductDetail } from "./product-detail";
+import { brand } from "@/lib/brand";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+function productLd(product: ProductWithDetails) {
+  const image = product.image_url ?? product.images?.[0];
+  const inStock = product.inventory_status?.in_stock !== false;
+  return {
+    "@context": "https://schema.org",
+    "@type": "Product",
+    name: product.name,
+    description: product.description ?? undefined,
+    image: image ? [image] : undefined,
+    sku: product.id,
+    brand: { "@type": "Brand", name: brand.name },
+    offers: {
+      "@type": "Offer",
+      price: product.default_price,
+      priceCurrency: product.currency ?? brand.currency,
+      availability: inStock
+        ? "https://schema.org/InStock"
+        : "https://schema.org/OutOfStock",
+      url: `${SITE_URL}/products/${product.slug ?? product.id}`,
+    },
+  };
+}
+
+interface ProductData {
+  product: ProductWithDetails;
+  related: Product[];
+}
+
+async function getProduct(slug: string): Promise<ProductData | null> {
+  "use cache";
+  cacheTag(tags.product(slug), tags.products());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const r = await client.catalogue.getProductBySlug(slug);
+  if (!r.ok) return null;
+
+  const related = r.value.category_id
+    ? await client.catalogue
+        .getCategoryProducts(r.value.category_id)
+        .then((res) =>
+          res.ok
+            ? (
+                ((res.value as { items?: Product[] }).items ??
+                  (res.value as Product[])) as Product[]
+              ).filter((p) => p.id !== r.value.id).slice(0, 4)
+            : [],
+        )
+    : [];
+
+  return { product: r.value, related };
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const data = await getProduct(slug);
+  if (!data) return {};
+  const { product } = data;
+  const image = product.image_url ?? product.images?.[0];
+  return {
+    title: `${product.name} — ${brand.name}`,
+    description: product.description ?? undefined,
+    openGraph: {
+      title: product.name,
+      description: product.description ?? undefined,
+      images: image ? [{ url: image }] : undefined,
+      type: "website",
+    },
+  };
+}
+
+export default async function ProductPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  return (
+    <Suspense fallback={<ProductSkeleton />}>
+      <ProductContent params={params} />
+    </Suspense>
+  );
+}
+
+async function ProductContent({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const data = await getProduct(slug);
+  if (!data) notFound();
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(productLd(data.product)) }}
+      />
+      <nav
+        aria-label="Breadcrumb"
+        className="max-w-7xl mx-auto px-6 sm:px-8 pt-6 text-[12px] font-mono text-muted-foreground flex items-center gap-2"
+      >
+        <Link href="/" className="hover:text-foreground transition-colors">
+          Home
+        </Link>
+        <span>/</span>
+        <Link href="/shop" className="hover:text-foreground transition-colors">
+          Shop
+        </Link>
+        {data.product.category?.slug && (
+          <>
+            <span>/</span>
+            <Link
+              href={`/categories/${data.product.category.slug}`}
+              className="hover:text-foreground transition-colors"
+            >
+              {data.product.category.name}
+            </Link>
+          </>
+        )}
+        <span>/</span>
+        <span className="text-foreground/90 truncate">{data.product.name}</span>
+      </nav>
+      <ProductDetail product={data.product} related={data.related} />
+    </>
+  );
+}
+
+function ProductSkeleton() {
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-10">
+      <div className="grid grid-cols-1 lg:grid-cols-[1.1fr_1fr] gap-10 items-start">
+        <div className="aspect-square bg-muted rounded-3xl animate-pulse" />
+        <div className="space-y-4">
+          <div className="h-3 w-24 bg-muted rounded animate-pulse" />
+          <div className="h-10 w-3/4 bg-muted rounded animate-pulse" />
+          <div className="h-7 w-32 bg-muted rounded animate-pulse" />
+          <div className="h-20 w-full bg-muted rounded animate-pulse mt-6" />
+          <div className="h-12 w-full bg-muted rounded animate-pulse mt-4" />
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-retail/app/products/[slug]/product-detail.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import { ProductPage as SdkProductPage } from "@cimplify/sdk/react";
+import type { Product, ProductWithDetails } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+
+/**
+ * Client island for the product detail page.
+ *
+ * - Receives a server-fetched `ProductWithDetails` (no client refetch).
+ * - Renders the SDK `<ProductPage>` which picks the right layout
+ *   (Default / Wholesale / Service / Bundle / Composite) automatically.
+ * - On add-to-cart success, routes to `/cart`.
+ * - Custom Next.js Image renderer for optimised, lazy-loaded gallery shots.
+ * - Renders a "You may also like" rail of in-category products below.
+ */
+export function ProductDetail({
+  product,
+  related,
+}: {
+  product: ProductWithDetails;
+  related: Product[];
+}) {
+  const router = useRouter();
+
+  return (
+    <>
+      <SdkProductPage
+        product={product}
+        showRelated={false}
+        onAddToCart={() => {
+          router.push("/cart");
+        }}
+        renderImage={({ src, alt, className }) => (
+          <Image
+            src={src}
+            alt={alt}
+            width={1200}
+            height={1200}
+            className={className}
+            style={{ width: "100%", height: "auto", objectFit: "cover" }}
+            priority
+          />
+        )}
+        className="max-w-7xl mx-auto px-6 sm:px-8 py-8 sm:py-10"
+      />
+
+      {related.length > 0 && (
+        <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-16 border-t border-border mt-8">
+          <div className="flex items-end justify-between gap-6 mb-8">
+            <div>
+              <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+                You may also like
+              </p>
+              <h2 className="text-[clamp(1.5rem,2.5vw,2rem)] font-bold m-0 -tracking-[0.025em]">
+                More from this category.
+              </h2>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+            {related.map((p) => (
+              <StoreProductCard key={p.id} product={p} />
+            ))}
+          </div>
+        </section>
+      )}
+    </>
+  );
+}

package/templates/storefront-retail/app/robots.ts

@@ -0,0 +1,18 @@
+import type { MetadataRoute } from "next";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+        disallow: ["/cart", "/checkout", "/orders/", "/api/"],
+      },
+    ],
+    sitemap: `${SITE_URL}/sitemap.xml`,
+    host: SITE_URL,
+  };
+}

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

@@ -3,11 +3,11 @@ import { Suspense } from "react";
 import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags } from "@cimplify/sdk/server";
 import { ShopClient } from "./shop-client";
+import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
-  title: "Shop — Currents Electronics",
-  description:
-    "Browse every laptop, phone, audio device, accessory, and gaming product we stock. Authorised dealer pricing, 2-year warranty.",
+  title: `Shop — ${brand.name}`,
+  description: brand.description,
 };
 
 async function getShopData() {

package/templates/storefront-retail/app/sitemap.ts

@@ -0,0 +1,59 @@
+import type { MetadataRoute } from "next";
+import { getServerClient, type Product } from "@cimplify/sdk/server";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+const STATIC_ROUTES: { path: string; priority: number; changeFrequency: "daily" | "weekly" | "monthly" }[] = [
+  { path: "/", priority: 1.0, changeFrequency: "daily" },
+  { path: "/shop", priority: 0.9, changeFrequency: "daily" },
+  { path: "/about", priority: 0.5, changeFrequency: "monthly" },
+  { path: "/faq", priority: 0.4, changeFrequency: "monthly" },
+  { path: "/terms", priority: 0.2, changeFrequency: "monthly" },
+  { path: "/privacy", priority: 0.2, changeFrequency: "monthly" },
+];
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const now = new Date();
+  const client = getServerClient();
+
+  const [productsRes, categoriesRes, collectionsRes] = await Promise.all([
+    client.catalogue.getProducts({ limit: 500 }),
+    client.catalogue.getCategories(),
+    client.catalogue.getCollections(),
+  ]);
+
+  const products = productsRes.ok ? productsRes.value.items : [];
+  const categories = categoriesRes.ok ? categoriesRes.value : [];
+  const collections = collectionsRes.ok ? collectionsRes.value : [];
+
+  const staticEntries: MetadataRoute.Sitemap = STATIC_ROUTES.map((r) => ({
+    url: `${SITE_URL}${r.path}`,
+    lastModified: now,
+    changeFrequency: r.changeFrequency,
+    priority: r.priority,
+  }));
+
+  const productEntries: MetadataRoute.Sitemap = products.map((p: Product) => ({
+    url: `${SITE_URL}/products/${p.slug ?? p.id}`,
+    lastModified: p.updated_at ? new Date(p.updated_at) : now,
+    changeFrequency: "weekly",
+    priority: 0.7,
+  }));
+
+  const categoryEntries: MetadataRoute.Sitemap = categories.map((c) => ({
+    url: `${SITE_URL}/categories/${c.slug}`,
+    lastModified: now,
+    changeFrequency: "weekly",
+    priority: 0.6,
+  }));
+
+  const collectionEntries: MetadataRoute.Sitemap = collections.map((c) => ({
+    url: `${SITE_URL}/collections/${c.slug}`,
+    lastModified: now,
+    changeFrequency: "weekly",
+    priority: 0.6,
+  }));
+
+  return [...staticEntries, ...categoryEntries, ...collectionEntries, ...productEntries];
+}

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

@@ -1,116 +1,43 @@
 import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
-  title: "Terms of Service — Currents Electronics",
-  description: "The rules of the road for ordering from Currents Electronics.",
+  title: `Terms of Service — ${brand.name}`,
+  description: `The rules of the road for ordering from ${brand.name}.`,
 };
 
 export default function TermsPage() {
+  const t = brand.terms;
   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
+        {t.eyebrow}
       </p>
       <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-2 -tracking-[0.025em]">
-        Terms of Service
+        {t.title}
       </h1>
       <p className="text-sm text-muted-foreground not-prose mb-10">
-        Last updated: 1 May 2026
+        Last updated: {t.lastUpdated}
       </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>
+        {t.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-0 -tracking-[0.02em]">{s.heading}</h2>
+            {typeof s.body === "string" ? (
+              <p>{s.body}</p>
+            ) : (
+              <>
+                <p>{s.body.intro}</p>
+                <ul className="list-disc pl-6 space-y-2">
+                  {s.body.bullets.map((b) => (
+                    <li key={b}>{b}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        ))}
       </section>
     </article>
   );

package/templates/storefront-retail/components/brand-marquee.tsx

@@ -1,28 +1,19 @@
-const BRANDS = [
-  "Apple",
-  "Samsung",
-  "Sony",
-  "Bose",
-  "Logitech",
-  "Anker",
-  "JBL",
-  "Microsoft",
-  "Lenovo",
-  "DJI",
-];
+import { brand } from "@/lib/brand";
 
 /**
  * Brand authority strip. Wordmark-only (avoids licensing issues with real
- * logos), JetBrains Mono for the brand-as-typography aesthetic.
+ * logos), monospaced for the brand-as-typography aesthetic.
  */
 export function BrandMarquee() {
+  const strip = brand.brandStrip;
+  if (!strip || strip.brands.length === 0) return null;
   return (
     <section className="border-y border-border bg-background py-8 sm:py-10 overflow-hidden">
       <p className="text-center text-[11px] font-mono uppercase tracking-[0.2em] text-muted-foreground mb-6">
-        Authorised dealer · genuine stock · 2-year warranty
+        {strip.headline}
       </p>
       <div className="flex items-center justify-around gap-10 sm:gap-14 flex-wrap px-6">
-        {BRANDS.map((b) => (
+        {strip.brands.map((b) => (
           <span
             key={b}
             className="text-[clamp(1.25rem,2vw,1.75rem)] font-semibold text-muted-foreground hover:text-foreground transition-colors -tracking-[0.025em] opacity-70 hover:opacity-100"

package/templates/storefront-retail/components/feature-hero.tsx

@@ -14,7 +14,8 @@ interface FeatureHeroProps {
 
 /**
  * Apple-style split hero. Left: copy + CTAs. Right: large product image.
- * Stacks to image-on-top on mobile.
+ * Stacks to image-on-top on mobile. Strings come from `brand.hero` at the
+ * call site — this component is otherwise design-only.
  */
 export function FeatureHero({
   eyebrow,