@cimplify/sdk 0.40.1 → 0.42.0

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

@@ -0,0 +1,183 @@
+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 { FeatureHero } from "@/components/feature-hero";
+import { CategoryTiles } from "@/components/category-tiles";
+import { CollectionStrip } from "@/components/collection-strip";
+import { PromoBanner } from "@/components/promo-banner";
+import { TrustBar } from "@/components/trust-bar";
+import { BrandMarquee } from "@/components/brand-marquee";
+import { TradeInCta } from "@/components/trade-in-cta";
+import { Newsletter } from "@/components/newsletter";
+import { SectionHeading } from "@/components/section-heading";
+import { StoreProductCard } from "@/components/store-product-card";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: brand.hero.title,
+  description: brand.description,
+};
+
+interface CollectionWithProducts {
+  collection: { id: string; slug: string; name: string; description?: string };
+  products: Product[];
+}
+
+async function getHomeData() {
+  "use cache";
+  cacheTag(tags.collections(), tags.categories(), tags.products());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const [colRes, catRes, productsRes] = await Promise.all([
+    client.catalogue.getCollections(),
+    client.catalogue.getCategories(),
+    client.catalogue.getProducts({ limit: 12 }),
+  ]);
+  const collections = colRes.ok ? colRes.value : [];
+  const categories = catRes.ok ? catRes.value : [];
+  const allProducts = productsRes.ok ? productsRes.value.items : [];
+
+  const collectionsWithProducts: CollectionWithProducts[] = 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,
+    featured: allProducts.slice(0, 4),
+    newArrivals: allProducts.slice(4, 12),
+  };
+}
+
+// Verified-reachable Unsplash fashion editorial — replace with your own asset.
+const HERO_FALLBACK_IMAGE =
+  "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=2000&h=1400&fit=crop&auto=format&q=85";
+
+export default async function HomePage() {
+  const { collections, categories, featured, newArrivals } = await getHomeData();
+  const heroProduct = featured[0];
+
+  return (
+    <>
+      <FeatureHero
+        eyebrow="Featured · in stock"
+        badge="Just landed"
+        title={brand.hero.title}
+        description={heroProduct?.description ?? brand.hero.subtitle}
+        primaryCta={{
+          label: heroProduct ? `Shop ${heroProduct.name}` : brand.hero.primaryCtaLabel,
+          href: heroProduct ? `/products/${heroProduct.slug ?? heroProduct.id}` : "/shop",
+        }}
+        secondaryCta={
+          brand.hero.secondaryCtaLabel && brand.hero.secondaryCtaHref
+            ? { label: brand.hero.secondaryCtaLabel, href: brand.hero.secondaryCtaHref }
+            : undefined
+        }
+        imageUrl={heroProduct?.image_url ?? heroProduct?.images?.[0] ?? HERO_FALLBACK_IMAGE}
+        imageAlt={heroProduct?.name ?? "Featured product"}
+      />
+
+      <TrustBar />
+
+      <Suspense fallback={<CategoryTilesSkeleton />}>
+        <CategoryTiles categories={categories} />
+      </Suspense>
+
+      <PromoBanner />
+
+      <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+        <SectionHeading
+          eyebrow="Just dropped"
+          title="New this week."
+          description="Hand-picked launches and freshly restocked staples."
+          link={{ label: "Browse all", href: "/shop" }}
+        />
+        <Suspense fallback={<GridSkeleton count={4} />}>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+            {newArrivals.slice(0, 4).map((p) => (
+              <StoreProductCard key={p.id} product={p} />
+            ))}
+          </div>
+        </Suspense>
+      </section>
+
+      <BrandMarquee />
+
+      {collections.map(({ collection, products }) => (
+        <Suspense
+          key={collection.id}
+          fallback={<StripSkeleton title={collection.name} />}
+        >
+          <CollectionStrip
+            collection={collection}
+            products={products}
+            collectionHref={`/collections/${collection.slug}`}
+          />
+        </Suspense>
+      ))}
+
+      <TradeInCta />
+
+      <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+        <SectionHeading
+          eyebrow="Best sellers"
+          title="What everyone&apos;s buying."
+          link={{ label: "See more", href: "/shop" }}
+        />
+        <Suspense fallback={<GridSkeleton count={4} />}>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+            {newArrivals.slice(4, 8).map((p) => (
+              <StoreProductCard key={p.id} product={p} />
+            ))}
+          </div>
+        </Suspense>
+      </section>
+
+      <Newsletter />
+    </>
+  );
+}
+
+function CategoryTilesSkeleton() {
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+      <div className="h-8 w-64 bg-muted rounded mb-8 animate-pulse" />
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="h-40 bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function GridSkeleton({ count }: { count: number }) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="aspect-[4/3] bg-muted rounded-2xl animate-pulse" />
+      ))}
+    </div>
+  );
+}
+
+function StripSkeleton({ title }: { title: string }) {
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-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>
+  );
+}

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

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Privacy Policy — ${brand.name}`,
+  description: `How ${brand.name} collects, uses, and protects your personal data.`,
+};
+
+export default function PrivacyPage() {
+  const p = brand.privacy;
+  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">
+        {p.eyebrow}
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-2 -tracking-[0.025em]">
+        {p.title}
+      </h1>
+      <p className="text-sm text-muted-foreground not-prose mb-10">
+        Last updated: {p.lastUpdated}
+      </p>
+
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {p.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-fashion/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-fashion/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-fashion/app/returns/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.returns.title} — ${brand.name}`,
+};
+
+export default function ReturnsPage() {
+  return <PolicyPage policy={brand.returns} />;
+}

package/templates/storefront-fashion/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-fashion/app/search/page.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { SearchClient } from "./search-client";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Search — ${brand.name}`,
+  description: `Search ${brand.name} — products, collections, categories.`,
+};
+
+export default function SearchPage() {
+  return (
+    <article className="max-w-7xl mx-auto px-6 sm:px-8 py-10">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Search
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Find anything.
+      </h1>
+      <Suspense fallback={<SearchSkeleton />}>
+        <SearchClient />
+      </Suspense>
+    </article>
+  );
+}
+
+function SearchSkeleton() {
+  return (
+    <div>
+      <div className="h-12 w-full max-w-xl bg-muted rounded animate-pulse mb-8" />
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <div key={i} className="aspect-[4/3] bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-fashion/app/search/search-client.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SearchPage } from "@cimplify/sdk/react";
+
+export function SearchClient() {
+  return <SearchPage />;
+}

package/templates/storefront-fashion/app/shipping/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.shipping.title} — ${brand.name}`,
+  description: brand.shipping.sections[0]?.body
+    ? typeof brand.shipping.sections[0].body === "string"
+      ? brand.shipping.sections[0].body
+      : brand.shipping.sections[0].body.intro
+    : undefined,
+};
+
+export default function ShippingPage() {
+  return <PolicyPage policy={brand.shipping} />;
+}

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

@@ -0,0 +1,63 @@
+import type { Metadata } from "next";
+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 — ${brand.name}`,
+  description: brand.description,
+};
+
+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 (
+    <>
+      <section className="bg-foreground text-background relative overflow-hidden">
+        <div className="absolute inset-0 opacity-[0.04] pointer-events-none [background-image:radial-gradient(circle_at_2px_2px,white_1px,transparent_0)] [background-size:32px_32px]" />
+        <div className="relative max-w-7xl mx-auto px-6 sm:px-8 py-12 sm:py-14">
+          <p className="text-[11px] font-mono uppercase tracking-[0.2em] text-background/60 mb-2">
+            Catalogue · {products.length} products
+          </p>
+          <h1 className="text-[clamp(2rem,4vw,3rem)] font-bold m-0 -tracking-[0.025em] leading-[1.05]">
+            Every product we stock.
+          </h1>
+          <p className="mt-3 max-w-xl text-base text-background/75">
+            Filter, sort, search. Authorised dealer pricing, two-year warranty,
+            same-day Accra delivery on every order.
+          </p>
+        </div>
+      </section>
+      <Suspense
+        fallback={
+          <div className="max-w-7xl mx-auto px-6 sm:px-8 py-10">
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="aspect-[4/3] bg-muted rounded-2xl animate-pulse" />
+              ))}
+            </div>
+          </div>
+        }
+      >
+        <ShopClient products={products} categories={categories} />
+      </Suspense>
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+"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.
+ *
+ * The page hero (in `app/shop/page.tsx`) already provides the title; we
+ * pass an empty `title` and override the SDK heading via className so the
+ * page reads as one continuous design.
+ */
+export function ShopClient({
+  products,
+  categories,
+}: {
+  products: Product[];
+  categories: Category[];
+}) {
+  return (
+    <CataloguePage
+      title="All products"
+      products={products}
+      categories={categories}
+      renderCard={(p) => <StoreProductCard product={p} />}
+      className="max-w-7xl mx-auto px-6 sm:px-8 py-10 sm:py-12"
+    />
+  );
+}

package/templates/storefront-fashion/app/signup/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Create an account — ${brand.name}`,
+  description: brand.account.signupSubtitle,
+};
+
+/**
+ * Cimplify Link handles sign-up inside the `<CimplifyAccount>` iframe.
+ * We bounce /signup to /account; the iframe shows the create-account UI
+ * for visitors with no session.
+ */
+export default function SignupPage(): never {
+  redirect("/account");
+}