@cimplify/sdk 0.40.1 → 0.41.0

package/templates/storefront-services/app/llms.txt/route.ts

@@ -0,0 +1,94 @@
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { brand } from "@/lib/brand";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+async function buildLlmsTxt(): Promise<string> {
+  "use cache";
+  cacheTag(tags.products(), tags.categories(), tags.collections());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const [productsRes, categoriesRes, collectionsRes] = await Promise.all([
+    client.catalogue.getProducts({ limit: 500 }),
+    client.catalogue.getCategories(),
+    client.catalogue.getCollections(),
+  ]);
+
+  const products: Product[] = productsRes.ok ? productsRes.value.items : [];
+  const categories = categoriesRes.ok ? categoriesRes.value : [];
+  const collections = collectionsRes.ok ? collectionsRes.value : [];
+
+  const lines: string[] = [];
+  lines.push(`# ${brand.name}`);
+  lines.push("");
+  lines.push(`> ${brand.llms.summary}`);
+  lines.push("");
+  lines.push("## Browse");
+  lines.push(`- [Home](${SITE_URL}/)`);
+  lines.push(`- [Shop](${SITE_URL}/shop): Full menu with filter and sort.`);
+
+  if (categories.length > 0) {
+    lines.push("");
+    lines.push("## Categories");
+    for (const c of categories) {
+      lines.push(
+        `- [${c.name}](${SITE_URL}/categories/${c.slug})${c.description ? `: ${c.description}` : ""}`,
+      );
+    }
+  }
+
+  if (collections.length > 0) {
+    lines.push("");
+    lines.push("## Collections");
+    for (const c of collections) {
+      lines.push(
+        `- [${c.name}](${SITE_URL}/collections/${c.slug})${c.description ? `: ${c.description}` : ""}`,
+      );
+    }
+  }
+
+  if (products.length > 0) {
+    lines.push("");
+    lines.push("## Products");
+    for (const p of products) {
+      const slug = p.slug ?? p.id;
+      const price = `${p.currency ?? brand.currency} ${p.default_price}`;
+      const desc = p.description ? ` — ${p.description.replace(/\s+/g, " ").slice(0, 200)}` : "";
+      lines.push(`- [${p.name}](${SITE_URL}/shop?product=${slug}) (${price})${desc}`);
+    }
+  }
+
+  lines.push("");
+  lines.push("## Information");
+  lines.push(`- [About](${SITE_URL}/about)`);
+  lines.push(`- [FAQ](${SITE_URL}/faq)`);
+  lines.push(`- [Terms of Service](${SITE_URL}/terms)`);
+  lines.push(`- [Privacy Policy](${SITE_URL}/privacy)`);
+  lines.push(`- [Sitemap (XML)](${SITE_URL}/sitemap.xml)`);
+  lines.push("");
+  lines.push("## Contact");
+  lines.push(`- Email: ${brand.contact.email}`);
+  lines.push(`- Phone: ${brand.contact.phone}`);
+  lines.push(`- Address: ${brand.contact.address}`);
+
+  return lines.join("\n") + "\n";
+}
+
+/**
+ * `/llms.txt` — machine-readable site index for LLMs (per llmstxt.org).
+ * Lets coding agents and chat assistants find products, categories, and
+ * support pages without scraping HTML. Plain Markdown so it streams cheaply
+ * into context windows.
+ */
+export async function GET(): Promise<Response> {
+  const body = await buildLlmsTxt();
+  return new Response(body, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=0, s-maxage=3600, stale-while-revalidate=86400",
+    },
+  });
+}

package/templates/storefront-services/app/not-found.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Page not found — ${brand.name}`,
+  description: "We couldn't find that page.",
+};
+
+export default function NotFound() {
+  return (
+    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-3">
+        404
+      </p>
+      <h1 className="font-serif text-[clamp(2.5rem,5vw,3.5rem)] font-semibold mb-4">
+        Page not found.
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-8">
+        The URL you followed might be old, a typo, or pointing at a product
+        that&apos;s sold out for the day. Try the menu or head back home.
+      </p>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <Link
+          href="/shop"
+          className="inline-block px-6 py-3 rounded-full bg-primary text-primary-foreground font-semibold text-sm transition-colors hover:bg-primary/90"
+        >
+          Browse the menu
+        </Link>
+        <Link
+          href="/"
+          className="inline-block px-6 py-3 rounded-full border border-border hover:bg-muted transition-colors text-sm font-medium"
+        >
+          Back home
+        </Link>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,21 @@
+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="font-serif text-3xl mt-0 mb-3">Thanks — your order is confirmed</h1>
+      <p className="text-muted-foreground">
+        Order <code className="font-mono text-foreground">{id}</code>
+      </p>
+      <p className="mt-6">
+        <Link
+          href="/"
+          className="inline-block px-6 py-3 rounded-full bg-primary text-primary-foreground font-semibold text-sm transition-colors hover:bg-primary/90"
+        >
+          Continue shopping
+        </Link>
+      </p>
+    </section>
+  );
+}

package/templates/storefront-services/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";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `${brand.name} — ${brand.hero.title}`,
+  description: brand.description,
+};
+
+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={brand.hero.badge}
+        title={brand.hero.title}
+        subtitle={brand.hero.subtitle}
+      />
+      {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="font-serif text-[28px] font-semibold m-0 mb-5">{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-services/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-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {p.eyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        {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="font-serif text-2xl font-semibold mt-0">{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-services/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-services/app/shop/page.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+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 <ShopClient products={products} categories={categories} />;
+}

package/templates/storefront-services/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-services/app/sitemap.ts

@@ -0,0 +1,62 @@
+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,
+  }));
+
+  // Bakery uses a URL-driven product modal (`?product=<slug>` on the home or
+  // shop pages). Emit those as deep-linkable URLs so search engines and LLMs
+  // can index each product canonically.
+  const productEntries: MetadataRoute.Sitemap = products.map((p: Product) => ({
+    url: `${SITE_URL}/shop?product=${encodeURIComponent(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-services/app/terms/page.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  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-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {t.eyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        {t.title}
+      </h1>
+      <p className="text-sm text-muted-foreground not-prose mb-10">
+        Last updated: {t.lastUpdated}
+      </p>
+
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {t.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="font-serif text-2xl font-semibold mt-0">{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-services/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-services/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-services/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>
+  );
+}