@cimplify/cli 0.6.9 → 0.6.10

package/templates/storefront-pharmacy/components/product-modal.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect } from "react";
+import Image from "next/image";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { ProductSheet, useProduct, useCart } from "@cimplify/sdk/react";
+
+/**
+ * URL-driven product modal. Reads `?product=<slug>` and renders the SDK's
+ * `<ProductSheet/>` — vertical layout with image-on-top, then header, then
+ * the variant/add-on/composite/bundle customizer. Closing the modal clears
+ * the search param. Deep-linkable and survives reloads.
+ */
+export function ProductModal() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const slug = searchParams?.get("product") ?? null;
+
+  const { product } = useProduct(slug ?? "", { enabled: Boolean(slug) });
+  const { addItem } = useCart();
+
+  useEffect(() => {
+    if (!slug) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [slug]);
+
+  useEffect(() => {
+    if (!slug) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug]);
+
+  if (!slug) return null;
+
+  function close() {
+    const next = new URLSearchParams(searchParams?.toString() ?? "");
+    next.delete("product");
+    const qs = next.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  }
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      onClick={close}
+      className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center sm:p-6 bg-foreground/50 backdrop-blur-sm"
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="relative w-full sm:max-w-lg max-h-[92vh] overflow-auto bg-card sm:rounded-3xl rounded-t-3xl shadow-2xl"
+      >
+        <button
+          onClick={close}
+          aria-label="Close product details"
+          className="absolute top-4 right-4 z-10 w-9 h-9 rounded-full bg-card border border-border text-sm cursor-pointer transition-colors hover:bg-muted"
+        >
+          ✕
+        </button>
+        {product ? (
+          <ProductSheet
+            product={product}
+            onClose={close}
+            onAddToCart={async (p, qty, options) => {
+              await addItem(p, qty, options);
+              close();
+            }}
+            renderImage={({ src, alt, className }) => (
+              <Image
+                src={src}
+                alt={alt}
+                width={1200}
+                height={900}
+                className={className}
+                style={{ width: "100%", height: "auto", objectFit: "cover" }}
+                priority
+              />
+            )}
+            classNames={{
+              root: "p-6 sm:p-8 gap-4",
+              image: "rounded-2xl overflow-hidden -mx-6 sm:-mx-8 -mt-6 sm:-mt-8 mb-2",
+              header: "flex items-baseline justify-between gap-4",
+              name: "font-serif text-2xl font-semibold m-0",
+              price: "text-lg font-semibold text-primary",
+              description: "text-sm text-muted-foreground leading-relaxed",
+              customizer: "pt-2",
+            }}
+          />
+        ) : (
+          <div className="p-8 text-center text-muted-foreground">Loading…</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-pharmacy/lib/site-url.ts

@@ -1,29 +1,6 @@
-import { headers } from "next/headers";
+import { SITE_URL } from "./site.config";
 
-/**
- * Canonical absolute URL for this storefront, derived at request time.
- *
- * Resolution order:
- *   1. `NEXT_PUBLIC_SITE_URL` — set when you need a fixed canonical
- *      (multiple domains, www-vs-apex preference, etc.).
- *   2. The request `Host` header — works automatically on every deploy,
- *      including preview URLs and custom domains.
- *   3. `https://example.com` — only ever returned during prerender of
- *      a page that has no live request (rare in App Router).
- */
+/** Canonical absolute URL for this storefront. */
 export async function getSiteUrl(): Promise<string> {
-  const explicit = process.env.NEXT_PUBLIC_SITE_URL?.trim();
-  if (explicit) return explicit;
-
-  try {
-    const h = await headers();
-    const host = h.get("host");
-    if (host) {
-      const isLocal = host.startsWith("localhost") || host.startsWith("127.");
-      return `${isLocal ? "http" : "https"}://${host}`;
-    }
-  } catch {
-    // `headers()` is unavailable in some build contexts — fall through.
-  }
-  return "https://example.com";
+  return SITE_URL;
 }

package/templates/storefront-pharmacy/lib/site.config.ts

@@ -0,0 +1,7 @@
+/**
+ * Canonical absolute URL. The platform overwrites this at build time with the
+ * storefront's primary domain; the default only applies to local builds. It's
+ * per-deploy config, not per-request, so it stays a static constant — keeping
+ * the root layout prerenderable under `cacheComponents`.
+ */
+export const SITE_URL = "https://example.com";

package/templates/storefront-pharmacy/next.config.ts

@@ -24,6 +24,13 @@ const nextConfig: NextConfig = {
   // `cacheTag` / `cacheLife` for SSR caching. Cached chrome streams first,
   // dynamic Suspense boundaries fill in when ready.
   cacheComponents: true,
+  async redirects() {
+    // Config-level so cacheComponents needn't prerender a redirect()-only page.
+    return [
+      { source: "/login", destination: "/account", permanent: false },
+      { source: "/signup", destination: "/account", permanent: false },
+    ];
+  },
   async rewrites() {
     return [
       { source: "/api/v1/:path*", destination: `${STOREFRONT_URL}/api/v1/:path*` },

package/templates/storefront-restaurant/app/layout.tsx

@@ -53,7 +53,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </Suspense>
         <Providers>
           <Header />
-          <main className="flex-1 pb-12 w-full">{children}</main>
+          <main className="flex-1 pb-12 w-full">
+            <Suspense fallback={null}>{children}</Suspense>
+          </main>
           <Footer />
           <Suspense fallback={null}>
             <ProductModal />

package/templates/storefront-restaurant/app/reservations/reservations-client.tsx

@@ -59,7 +59,7 @@ export function ReservationsClient({ options }: { options: Product[] }) {
     try {
       const when = new Date(selectedSlotKey).toLocaleString();
       const note = `Party of ${partySize} · ${when}${notes ? ` · ${notes}` : ""}`;
-      await addItem(selectedOption, 1, { notes: note });
+      await addItem(selectedOption, 1, { specialInstructions: note });
       router.push("/checkout");
     } catch {
       setSubmitting(false);

package/templates/storefront-restaurant/lib/site-url.ts

@@ -1,29 +1,6 @@
-import { headers } from "next/headers";
+import { SITE_URL } from "./site.config";
 
-/**
- * Canonical absolute URL for this storefront, derived at request time.
- *
- * Resolution order:
- *   1. `NEXT_PUBLIC_SITE_URL` — set when you need a fixed canonical
- *      (multiple domains, www-vs-apex preference, etc.).
- *   2. The request `Host` header — works automatically on every deploy,
- *      including preview URLs and custom domains.
- *   3. `https://example.com` — only ever returned during prerender of
- *      a page that has no live request (rare in App Router).
- */
+/** Canonical absolute URL for this storefront. */
 export async function getSiteUrl(): Promise<string> {
-  const explicit = process.env.NEXT_PUBLIC_SITE_URL?.trim();
-  if (explicit) return explicit;
-
-  try {
-    const h = await headers();
-    const host = h.get("host");
-    if (host) {
-      const isLocal = host.startsWith("localhost") || host.startsWith("127.");
-      return `${isLocal ? "http" : "https"}://${host}`;
-    }
-  } catch {
-    // `headers()` is unavailable in some build contexts — fall through.
-  }
-  return "https://example.com";
+  return SITE_URL;
 }

package/templates/storefront-restaurant/lib/site.config.ts

@@ -0,0 +1,7 @@
+/**
+ * Canonical absolute URL. The platform overwrites this at build time with the
+ * storefront's primary domain; the default only applies to local builds. It's
+ * per-deploy config, not per-request, so it stays a static constant — keeping
+ * the root layout prerenderable under `cacheComponents`.
+ */
+export const SITE_URL = "https://example.com";

package/templates/storefront-restaurant/next.config.ts

@@ -24,6 +24,13 @@ const nextConfig: NextConfig = {
   // `cacheTag` / `cacheLife` for SSR caching. Cached chrome streams first,
   // dynamic Suspense boundaries fill in when ready.
   cacheComponents: true,
+  async redirects() {
+    // Config-level so cacheComponents needn't prerender a redirect()-only page.
+    return [
+      { source: "/login", destination: "/account", permanent: false },
+      { source: "/signup", destination: "/account", permanent: false },
+    ];
+  },
   async rewrites() {
     return [
       { source: "/api/v1/:path*", destination: `${STOREFRONT_URL}/api/v1/:path*` },

package/templates/storefront-retail/app/layout.tsx

@@ -53,7 +53,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </Suspense>
         <Providers>
           <Header />
-          <main className="flex-1 pb-12 w-full">{children}</main>
+          <main className="flex-1 pb-12 w-full">
+            <Suspense fallback={null}>{children}</Suspense>
+          </main>
           <Footer />
           <Suspense fallback={null}>
             <ProductModal />

package/templates/storefront-retail/components/product-modal.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect } from "react";
+import Image from "next/image";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { ProductSheet, useProduct, useCart } from "@cimplify/sdk/react";
+
+/**
+ * URL-driven product modal. Reads `?product=<slug>` and renders the SDK's
+ * `<ProductSheet/>` — vertical layout with image-on-top, then header, then
+ * the variant/add-on/composite/bundle customizer. Closing the modal clears
+ * the search param. Deep-linkable and survives reloads.
+ */
+export function ProductModal() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const slug = searchParams?.get("product") ?? null;
+
+  const { product } = useProduct(slug ?? "", { enabled: Boolean(slug) });
+  const { addItem } = useCart();
+
+  useEffect(() => {
+    if (!slug) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [slug]);
+
+  useEffect(() => {
+    if (!slug) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug]);
+
+  if (!slug) return null;
+
+  function close() {
+    const next = new URLSearchParams(searchParams?.toString() ?? "");
+    next.delete("product");
+    const qs = next.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  }
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      onClick={close}
+      className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center sm:p-6 bg-foreground/50 backdrop-blur-sm"
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="relative w-full sm:max-w-lg max-h-[92vh] overflow-auto bg-card sm:rounded-3xl rounded-t-3xl shadow-2xl"
+      >
+        <button
+          onClick={close}
+          aria-label="Close product details"
+          className="absolute top-4 right-4 z-10 w-9 h-9 rounded-full bg-card border border-border text-sm cursor-pointer transition-colors hover:bg-muted"
+        >
+          ✕
+        </button>
+        {product ? (
+          <ProductSheet
+            product={product}
+            onClose={close}
+            onAddToCart={async (p, qty, options) => {
+              await addItem(p, qty, options);
+              close();
+            }}
+            renderImage={({ src, alt, className }) => (
+              <Image
+                src={src}
+                alt={alt}
+                width={1200}
+                height={900}
+                className={className}
+                style={{ width: "100%", height: "auto", objectFit: "cover" }}
+                priority
+              />
+            )}
+            classNames={{
+              root: "p-6 sm:p-8 gap-4",
+              image: "rounded-2xl overflow-hidden -mx-6 sm:-mx-8 -mt-6 sm:-mt-8 mb-2",
+              header: "flex items-baseline justify-between gap-4",
+              name: "font-serif text-2xl font-semibold m-0",
+              price: "text-lg font-semibold text-primary",
+              description: "text-sm text-muted-foreground leading-relaxed",
+              customizer: "pt-2",
+            }}
+          />
+        ) : (
+          <div className="p-8 text-center text-muted-foreground">Loading…</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-retail/lib/site-url.ts

@@ -1,29 +1,6 @@
-import { headers } from "next/headers";
+import { SITE_URL } from "./site.config";
 
-/**
- * Canonical absolute URL for this storefront, derived at request time.
- *
- * Resolution order:
- *   1. `NEXT_PUBLIC_SITE_URL` — set when you need a fixed canonical
- *      (multiple domains, www-vs-apex preference, etc.).
- *   2. The request `Host` header — works automatically on every deploy,
- *      including preview URLs and custom domains.
- *   3. `https://example.com` — only ever returned during prerender of
- *      a page that has no live request (rare in App Router).
- */
+/** Canonical absolute URL for this storefront. */
 export async function getSiteUrl(): Promise<string> {
-  const explicit = process.env.NEXT_PUBLIC_SITE_URL?.trim();
-  if (explicit) return explicit;
-
-  try {
-    const h = await headers();
-    const host = h.get("host");
-    if (host) {
-      const isLocal = host.startsWith("localhost") || host.startsWith("127.");
-      return `${isLocal ? "http" : "https"}://${host}`;
-    }
-  } catch {
-    // `headers()` is unavailable in some build contexts — fall through.
-  }
-  return "https://example.com";
+  return SITE_URL;
 }

package/templates/storefront-retail/lib/site.config.ts

@@ -0,0 +1,7 @@
+/**
+ * Canonical absolute URL. The platform overwrites this at build time with the
+ * storefront's primary domain; the default only applies to local builds. It's
+ * per-deploy config, not per-request, so it stays a static constant — keeping
+ * the root layout prerenderable under `cacheComponents`.
+ */
+export const SITE_URL = "https://example.com";

package/templates/storefront-retail/next.config.ts

@@ -24,6 +24,13 @@ const nextConfig: NextConfig = {
   // `cacheTag` / `cacheLife` for SSR caching. Cached chrome streams first,
   // dynamic Suspense boundaries fill in when ready.
   cacheComponents: true,
+  async redirects() {
+    // Config-level so cacheComponents needn't prerender a redirect()-only page.
+    return [
+      { source: "/login", destination: "/account", permanent: false },
+      { source: "/signup", destination: "/account", permanent: false },
+    ];
+  },
   async rewrites() {
     return [
       { source: "/api/v1/:path*", destination: `${STOREFRONT_URL}/api/v1/:path*` },

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

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import type { Product } from "@cimplify/sdk";
 import type { AvailableSlot } from "@cimplify/sdk";
 import { useCart, DateSlotPicker } from "@cimplify/sdk/react";
+import { brand } from "@/lib/brand";
 
 /**
  * Booking flow:
@@ -82,7 +83,7 @@ export function BookClient({ treatments }: { treatments: Product[] }) {
                     <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}
+                      {brand.currency} {t.default_price}
                     </p>
                   </div>
                   {active && (

package/templates/storefront-services/app/layout.tsx

@@ -53,7 +53,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </Suspense>
         <Providers>
           <Header />
-          <main className="flex-1 pb-12 w-full">{children}</main>
+          <main className="flex-1 pb-12 w-full">
+            <Suspense fallback={null}>{children}</Suspense>
+          </main>
           <Footer />
           <Suspense fallback={null}>
             <ProductModal />

package/templates/storefront-services/lib/site-url.ts

@@ -1,29 +1,6 @@
-import { headers } from "next/headers";
+import { SITE_URL } from "./site.config";
 
-/**
- * Canonical absolute URL for this storefront, derived at request time.
- *
- * Resolution order:
- *   1. `NEXT_PUBLIC_SITE_URL` — set when you need a fixed canonical
- *      (multiple domains, www-vs-apex preference, etc.).
- *   2. The request `Host` header — works automatically on every deploy,
- *      including preview URLs and custom domains.
- *   3. `https://example.com` — only ever returned during prerender of
- *      a page that has no live request (rare in App Router).
- */
+/** Canonical absolute URL for this storefront. */
 export async function getSiteUrl(): Promise<string> {
-  const explicit = process.env.NEXT_PUBLIC_SITE_URL?.trim();
-  if (explicit) return explicit;
-
-  try {
-    const h = await headers();
-    const host = h.get("host");
-    if (host) {
-      const isLocal = host.startsWith("localhost") || host.startsWith("127.");
-      return `${isLocal ? "http" : "https"}://${host}`;
-    }
-  } catch {
-    // `headers()` is unavailable in some build contexts — fall through.
-  }
-  return "https://example.com";
+  return SITE_URL;
 }

package/templates/storefront-services/lib/site.config.ts

@@ -0,0 +1,7 @@
+/**
+ * Canonical absolute URL. The platform overwrites this at build time with the
+ * storefront's primary domain; the default only applies to local builds. It's
+ * per-deploy config, not per-request, so it stays a static constant — keeping
+ * the root layout prerenderable under `cacheComponents`.
+ */
+export const SITE_URL = "https://example.com";

package/templates/storefront-services/next.config.ts

@@ -24,6 +24,13 @@ const nextConfig: NextConfig = {
   // `cacheTag` / `cacheLife` for SSR caching. Cached chrome streams first,
   // dynamic Suspense boundaries fill in when ready.
   cacheComponents: true,
+  async redirects() {
+    // Config-level so cacheComponents needn't prerender a redirect()-only page.
+    return [
+      { source: "/login", destination: "/account", permanent: false },
+      { source: "/signup", destination: "/account", permanent: false },
+    ];
+  },
   async rewrites() {
     return [
       { source: "/api/v1/:path*", destination: `${STOREFRONT_URL}/api/v1/:path*` },

package/templates/storefront-auto/app/login/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: `Sign in — ${brand.name}`,
-  description: brand.account.loginSubtitle,
-};
-
-/**
- * Cimplify Link (the iframe in `<CimplifyAccount>`) handles sign-in
- * automatically when no session exists. We just bounce /login to /account
- * so consumers landing here get the right UI without a duplicate form.
- */
-export default function LoginPage(): never {
-  redirect("/account");
-}

package/templates/storefront-auto/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");
-}

package/templates/storefront-bakery/app/login/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: `Sign in — ${brand.name}`,
-  description: brand.account.loginSubtitle,
-};
-
-/**
- * Cimplify Link (the iframe in `<CimplifyAccount>`) handles sign-in
- * automatically when no session exists. We just bounce /login to /account
- * so consumers landing here get the right UI without a duplicate form.
- */
-export default function LoginPage(): never {
-  redirect("/account");
-}

package/templates/storefront-bakery/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");
-}

package/templates/storefront-fashion/app/login/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: `Sign in — ${brand.name}`,
-  description: brand.account.loginSubtitle,
-};
-
-/**
- * Cimplify Link (the iframe in `<CimplifyAccount>`) handles sign-in
- * automatically when no session exists. We just bounce /login to /account
- * so consumers landing here get the right UI without a duplicate form.
- */
-export default function LoginPage(): never {
-  redirect("/account");
-}

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");
-}

package/templates/storefront-grocery/app/login/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: `Sign in — ${brand.name}`,
-  description: brand.account.loginSubtitle,
-};
-
-/**
- * Cimplify Link (the iframe in `<CimplifyAccount>`) handles sign-in
- * automatically when no session exists. We just bounce /login to /account
- * so consumers landing here get the right UI without a duplicate form.
- */
-export default function LoginPage(): never {
-  redirect("/account");
-}

package/templates/storefront-grocery/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");
-}