@cimplify/cli 0.2.0

package/templates/storefront-services/app/account/settings/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Settings — ${brand.name}`,
+};
+
+export default function SettingsPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Settings
+      </h1>
+      <AccountIframe section="settings" />
+    </article>
+  );
+}

package/templates/storefront-services/app/book/book-client.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import type { Product } from "@cimplify/sdk";
+import { useCart } from "@cimplify/sdk/react";
+
+interface Slot {
+  date: Date;
+  label: string;
+}
+
+/**
+ * Real booking flow:
+ *   1. Pick a treatment (left rail)
+ *   2. Pick a date (chips, today + next 13 days)
+ *   3. Pick a slot (15-minute grid, 10am–7pm)
+ *   4. Add to cart with the chosen slot as a cart-item note;
+ *      Cimplify Checkout finalises the booking.
+ *
+ * The slot grid is generated client-side as a placeholder. In production,
+ * call `useAvailableSlots({ serviceId, date })` from `@cimplify/sdk/react`
+ * to fetch real availability from the Cimplify scheduling API.
+ */
+export function BookClient({ treatments }: { treatments: Product[] }) {
+  const router = useRouter();
+  const { addItem } = useCart();
+  const [selectedTreatment, setSelectedTreatment] = useState<Product | undefined>(
+    treatments[0],
+  );
+  const [selectedDate, setSelectedDate] = useState<Date>(() => new Date());
+  const [selectedSlotKey, setSelectedSlotKey] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const dates = useMemo(() => {
+    const now = new Date();
+    return Array.from({ length: 14 }).map((_, i) => {
+      const d = new Date(now);
+      d.setDate(now.getDate() + i);
+      d.setHours(0, 0, 0, 0);
+      return d;
+    });
+  }, []);
+
+  const slots = useMemo<Slot[]>(() => {
+    const out: Slot[] = [];
+    for (let h = 10; h <= 19; h++) {
+      for (const m of [0, 30]) {
+        const d = new Date(selectedDate);
+        d.setHours(h, m, 0, 0);
+        const label = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+        out.push({ date: d, label });
+      }
+    }
+    return out;
+  }, [selectedDate]);
+
+  const slotKey = (s: Slot) => s.date.toISOString();
+
+  async function confirm() {
+    if (!selectedTreatment || !selectedSlotKey) return;
+    setSubmitting(true);
+    try {
+      await addItem(selectedTreatment, 1, {
+        notes: `Booked for ${new Date(selectedSlotKey).toLocaleString()}`,
+      });
+      router.push("/checkout");
+    } catch {
+      setSubmitting(false);
+    }
+  }
+
+  if (treatments.length === 0) {
+    return (
+      <p className="text-muted-foreground">
+        No bookable treatments yet. Add a Service-type product to your catalogue first.
+      </p>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.4fr] gap-8">
+      {/* Treatments */}
+      <div>
+        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-3">
+          Treatment
+        </p>
+        <div className="space-y-2">
+          {treatments.map((t) => {
+            const active = selectedTreatment?.id === t.id;
+            return (
+              <button
+                key={t.id}
+                type="button"
+                onClick={() => setSelectedTreatment(t)}
+                className={[
+                  "w-full text-left rounded-2xl border p-4 transition-colors",
+                  active
+                    ? "border-primary bg-primary/5"
+                    : "border-border bg-card hover:border-foreground/30",
+                ].join(" ")}
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="font-semibold text-sm m-0 truncate">{t.name}</p>
+                    <p className="text-xs text-muted-foreground m-0">
+                      {t.duration_minutes ? `${t.duration_minutes} min · ` : ""}
+                      {t.currency ?? "GHS"} {t.default_price}
+                    </p>
+                  </div>
+                  {active && (
+                    <span className="grid place-items-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs">
+                      ✓
+                    </span>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Date + slots */}
+      <div className="rounded-2xl border border-border bg-card p-6">
+        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-3">
+          Date
+        </p>
+        <div className="grid grid-cols-7 gap-1.5 mb-6">
+          {dates.map((d) => {
+            const active = d.toDateString() === selectedDate.toDateString();
+            return (
+              <button
+                key={d.toISOString()}
+                type="button"
+                onClick={() => {
+                  setSelectedDate(d);
+                  setSelectedSlotKey(null);
+                }}
+                className={[
+                  "flex flex-col items-center justify-center py-2 rounded-md transition-colors",
+                  active
+                    ? "bg-foreground text-background"
+                    : "bg-background hover:bg-muted text-foreground",
+                ].join(" ")}
+              >
+                <span className="text-[10px] uppercase tracking-wider opacity-60">
+                  {d.toLocaleString(undefined, { weekday: "short" })}
+                </span>
+                <span className="text-base font-semibold tabular-nums">{d.getDate()}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-3">
+          Slot
+        </p>
+        <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+          {slots.map((s) => {
+            const key = slotKey(s);
+            const active = selectedSlotKey === key;
+            return (
+              <button
+                key={key}
+                type="button"
+                onClick={() => setSelectedSlotKey(key)}
+                className={[
+                  "py-2 rounded-md text-sm tabular-nums transition-colors",
+                  active
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-background border border-border hover:border-primary",
+                ].join(" ")}
+              >
+                {s.label}
+              </button>
+            );
+          })}
+        </div>
+
+        <button
+          type="button"
+          onClick={confirm}
+          disabled={!selectedTreatment || !selectedSlotKey || submitting}
+          className="w-full mt-6 inline-flex items-center justify-center gap-2 px-5 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {submitting
+            ? "Confirming…"
+            : selectedSlotKey
+              ? `Book ${selectedTreatment?.name} at ${new Date(selectedSlotKey).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}`
+              : "Pick a slot to book"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-services/app/book/page.tsx

@@ -0,0 +1,65 @@
+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 { BookClient } from "./book-client";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Book a treatment — ${brand.name}`,
+  description: "Pick a treatment, pick a slot, you're booked.",
+};
+
+async function getTreatments(): Promise<Product[]> {
+  "use cache";
+  cacheTag(tags.products());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const r = await client.catalogue.getProducts({ limit: 50 });
+  if (!r.ok) return [];
+  // Booking flow only handles service-typed products.
+  return r.value.items.filter((p) => p.type === "service");
+}
+
+export default async function BookPage() {
+  const treatments = await getTreatments();
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-14">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+        Book a treatment
+      </p>
+      <h1 className="text-[clamp(2rem,5vw,3rem)] font-semibold mb-3 -tracking-[0.02em]">
+        Pick a treatment.<br />Pick a slot.
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-10 max-w-xl">
+        Available windows for the next two weeks. Confirmation by SMS within a minute of
+        booking. Free cancellation up to 24 hours before.
+      </p>
+
+      <Suspense fallback={<BookSkeleton />}>
+        <BookClient treatments={treatments} />
+      </Suspense>
+    </article>
+  );
+}
+
+function BookSkeleton() {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.4fr] gap-8">
+      <div className="space-y-2">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-16 bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+      <div className="rounded-2xl border border-border bg-card p-8">
+        <div className="h-5 w-40 bg-muted rounded mb-4 animate-pulse" />
+        <div className="grid grid-cols-3 gap-2">
+          {Array.from({ length: 9 }).map((_, i) => (
+            <div key={i} className="h-10 bg-muted rounded animate-pulse" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-services/app/cart/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CartPage as SdkCartPage } from "@cimplify/sdk/react";
+
+export default function CartPage() {
+  const router = useRouter();
+  return <SdkCartPage onCheckout={() => router.push("/checkout")} />;
+}

package/templates/storefront-services/app/categories/[slug]/listing-client.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ProductGrid } from "@cimplify/sdk/react";
+import type { Product } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+
+/**
+ * Client island for the category listing. Receives server-fetched products
+ * as props (serializable) and owns the `renderCard` function.
+ */
+export function ListingClient({ products }: { products: Product[] }) {
+  return (
+    <ProductGrid
+      products={products}
+      emptyMessage="No products in this category yet."
+      renderCard={(p) => <StoreProductCard product={p} />}
+    />
+  );
+}

package/templates/storefront-services/app/categories/[slug]/page.tsx

@@ -0,0 +1,118 @@
+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 Category,
+  type Product,
+} from "@cimplify/sdk/server";
+import { ListingClient } from "./listing-client";
+import { brand } from "@/lib/brand";
+
+interface CategoryData {
+  category: Category;
+  products: Product[];
+}
+
+async function getCategory(slug: string): Promise<CategoryData | null> {
+  "use cache";
+  cacheTag(tags.categories());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const catRes = await client.catalogue.getCategoryBySlug(slug);
+  if (!catRes.ok) return null;
+
+  cacheTag(tags.category(catRes.value.id), tags.categoryProducts(catRes.value.id));
+  const r = await client.catalogue.getCategoryProducts(catRes.value.id);
+  const products = r.ok
+    ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
+    : [];
+  return { category: catRes.value, products };
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const data = await getCategory(slug);
+  if (!data) return {};
+  return {
+    title: `${data.category.name} — ${brand.name}`,
+    description: data.category.description ?? undefined,
+  };
+}
+
+export default async function CategoryPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  return (
+    <Suspense fallback={<CategorySkeleton />}>
+      <CategoryContent params={params} />
+    </Suspense>
+  );
+}
+
+async function CategoryContent({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const data = await getCategory(slug);
+  if (!data) notFound();
+
+  const { category, 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">
+          Category
+        </p>
+        <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-2">
+          {category.name}
+        </h1>
+        {category.description && (
+          <p className="mx-auto mb-2 max-w-xl text-muted-foreground">
+            {category.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 CategorySkeleton() {
+  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-services/app/checkout/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CheckoutPage as SdkCheckoutPage } from "@cimplify/sdk/react";
+
+export default function CheckoutPage() {
+  const router = useRouter();
+  return (
+    <SdkCheckoutPage
+      onComplete={(result) => {
+        if (result.success && result.order) {
+          router.push(`/orders/${result.order.id}`);
+        }
+      }}
+    />
+  );
+}

package/templates/storefront-services/app/collections/[slug]/listing-client.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { ProductGrid } from "@cimplify/sdk/react";
+import type { Product } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+
+/**
+ * Client island for the collection listing. Receives server-fetched
+ * products as props (serializable) and owns the `renderCard` function
+ * (which can't cross the server/client boundary).
+ */
+export function ListingClient({ products }: { products: Product[] }) {
+  return (
+    <ProductGrid
+      products={products}
+      emptyMessage="No products in this collection yet."
+      renderCard={(p) => <StoreProductCard product={p} />}
+    />
+  );
+}

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

@@ -0,0 +1,118 @@
+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";
+import { brand } from "@/lib/brand";
+
+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} — ${brand.name}`,
+    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>
+  );
+}