@cimplify/sdk 0.44.34 → 0.45.1

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

@@ -1,183 +0,0 @@
-import type { Metadata } from "next";
-import { Suspense } from "react";
-import { cacheTag, cacheLife } from "next/cache";
-import { getServerClient, tags, type Collection, 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: Collection;
-  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

@@ -1,44 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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: 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

@@ -1,70 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { ProductPage as SdkProductPage, useCart } 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 { addItem } = useCart();
-
-  return (
-    <>
-      <SdkProductPage
-        product={product}
-        showRelated={false}
-        onAddToCart={async (p, qty, options) => {
-          await addItem(p, qty, options);
-        }}
-        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

@@ -1,11 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

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

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

@@ -1,16 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,32 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-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");
-}