@cimplify/cli 0.7.16 → 0.7.18

package/templates/storefront-fashion/package.json

@@ -19,7 +19,7 @@
     "check": "bun run typecheck && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.70.3",
+    "@cimplify/sdk": "^0.72.0",
     "next": "^16.2.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

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

@@ -0,0 +1,42 @@
+import { notFound } from "next/navigation";
+import { AccountSignedOutPrompt, toAccountOrderView } from "@cimplify/sdk/react";
+import type { EnrichedOrder } from "@cimplify/sdk";
+import { brand } from "@/lib/brand";
+import { apiFetch, serverAccessToken, serverSession } from "@/lib/cimplify-server";
+import { OrderDetail } from "@/components/order-detail";
+
+const CLIENT_ID = process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID ?? "";
+const REDIRECT_URI = process.env.CIMPLIFY_REDIRECT_URI ?? "";
+
+export default async function OrderDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const session = await serverSession();
+  if (!session) {
+    return (
+      <AccountSignedOutPrompt
+        clientId={CLIENT_ID}
+        redirectUri={REDIRECT_URI}
+        eyebrow={brand.account.loginEyebrow}
+        title={brand.account.loginTitle}
+        description={brand.account.loginSubtitle}
+      />
+    );
+  }
+
+  const bearer = await serverAccessToken();
+  const order = await apiFetch<EnrichedOrder>(`/api/v1/orders/${encodeURIComponent(id)}`, {
+    bearer,
+  });
+  if (!order) notFound();
+
+  return (
+    <div className="mx-auto w-full max-w-5xl px-4 py-8 sm:px-6">
+      <OrderDetail {...toAccountOrderView(order)} />
+    </div>
+  );
+}

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

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { Providers } from "@/components/providers";
+import { getServerClient, tags } from "@cimplify/sdk/server";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
@@ -35,7 +36,15 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const server = getServerClient();
+  const [bizResult, locResult] = await Promise.all([
+    server.business.getInfo({ cacheOptions: { revalidate: 3600, tags: [tags.business()] } }),
+    server.business.getLocations({ cacheOptions: { revalidate: 3600, tags: [tags.locations()] } }),
+  ]);
+  const initialBusiness = bizResult.ok ? bizResult.value : null;
+  const initialLocations = locResult.ok ? locResult.value : [];
+
   return (
     <html lang="en" suppressHydrationWarning className={inter.variable}>
       <body
@@ -45,7 +54,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Suspense fallback={null}>
           <OrganizationJsonLd />
         </Suspense>
-        <Providers>
+        <Providers initialBusiness={initialBusiness} initialLocations={initialLocations}>
           <Header />
           <main className="flex-1 pb-12 w-full">
             <Suspense fallback={null}>{children}</Suspense>

package/templates/storefront-grocery/components/order-detail.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { AccountOrderView, type AccountOrderViewProps } from "@cimplify/sdk/react";
+
+// Thin client wrapper so the server page can pass the (serializable) view-model
+// while `onBack` (a function) is supplied on the client.
+export function OrderDetail(props: AccountOrderViewProps) {
+  const router = useRouter();
+  return <AccountOrderView {...props} onBack={() => router.push("/account/orders")} />;
+}

package/templates/storefront-grocery/components/providers.tsx

@@ -1,13 +1,23 @@
 "use client";
 
 import { useMemo, type ReactNode } from "react";
-import { createCimplifyClient } from "@cimplify/sdk";
+import { createCimplifyClient, type Business, type Location } from "@cimplify/sdk";
 import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
 import { AuthErrorToast } from "@/components/auth-error-toast";
 
 // Same-origin client — every request goes through the Next.js rewrite in
 // next.config.ts, so no CORS preflight ever hits the browser.
-export function Providers({ children }: { children: ReactNode }) {
+export function Providers({
+  children,
+  initialBusiness,
+  initialLocations,
+}: {
+  children: ReactNode;
+  // Server-fetched in app/layout.tsx so prices render in the right currency
+  // during SSR (no default-currency flash before the client bootstrap).
+  initialBusiness?: Business | null;
+  initialLocations?: Location[];
+}) {
   const client = useMemo(() => {
     const baseUrl =
       typeof window !== "undefined" ? window.location.origin : "http://127.0.0.1:8787";
@@ -20,7 +30,11 @@ export function Providers({ children }: { children: ReactNode }) {
   }, []);
 
   return (
-    <CimplifyProvider client={client}>
+    <CimplifyProvider
+      client={client}
+      initialBusiness={initialBusiness}
+      initialLocations={initialLocations}
+    >
       <CartDrawerProvider>
         {children}
         <AuthErrorToast />

package/templates/storefront-grocery/package.json

@@ -17,7 +17,7 @@
     "check": "bun run typecheck && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.70.3",
+    "@cimplify/sdk": "^0.72.0",
     "next": "^16.2.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

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

@@ -0,0 +1,42 @@
+import { notFound } from "next/navigation";
+import { AccountSignedOutPrompt, toAccountOrderView } from "@cimplify/sdk/react";
+import type { EnrichedOrder } from "@cimplify/sdk";
+import { brand } from "@/lib/brand";
+import { apiFetch, serverAccessToken, serverSession } from "@/lib/cimplify-server";
+import { OrderDetail } from "@/components/order-detail";
+
+const CLIENT_ID = process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID ?? "";
+const REDIRECT_URI = process.env.CIMPLIFY_REDIRECT_URI ?? "";
+
+export default async function OrderDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const session = await serverSession();
+  if (!session) {
+    return (
+      <AccountSignedOutPrompt
+        clientId={CLIENT_ID}
+        redirectUri={REDIRECT_URI}
+        eyebrow={brand.account.loginEyebrow}
+        title={brand.account.loginTitle}
+        description={brand.account.loginSubtitle}
+      />
+    );
+  }
+
+  const bearer = await serverAccessToken();
+  const order = await apiFetch<EnrichedOrder>(`/api/v1/orders/${encodeURIComponent(id)}`, {
+    bearer,
+  });
+  if (!order) notFound();
+
+  return (
+    <div className="mx-auto w-full max-w-5xl px-4 py-8 sm:px-6">
+      <OrderDetail {...toAccountOrderView(order)} />
+    </div>
+  );
+}

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

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { Providers } from "@/components/providers";
+import { getServerClient, tags } from "@cimplify/sdk/server";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
@@ -41,7 +42,15 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const server = getServerClient();
+  const [bizResult, locResult] = await Promise.all([
+    server.business.getInfo({ cacheOptions: { revalidate: 3600, tags: [tags.business()] } }),
+    server.business.getLocations({ cacheOptions: { revalidate: 3600, tags: [tags.locations()] } }),
+  ]);
+  const initialBusiness = bizResult.ok ? bizResult.value : null;
+  const initialLocations = locResult.ok ? locResult.value : [];
+
   return (
     <html lang="en" suppressHydrationWarning className={`${inter.variable} ${mono.variable}`}>
       <body
@@ -51,7 +60,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Suspense fallback={null}>
           <OrganizationJsonLd />
         </Suspense>
-        <Providers>
+        <Providers initialBusiness={initialBusiness} initialLocations={initialLocations}>
           <Header />
           <main className="flex-1 pb-12 w-full">
             <Suspense fallback={null}>{children}</Suspense>

package/templates/storefront-pharmacy/components/order-detail.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { AccountOrderView, type AccountOrderViewProps } from "@cimplify/sdk/react";
+
+// Thin client wrapper so the server page can pass the (serializable) view-model
+// while `onBack` (a function) is supplied on the client.
+export function OrderDetail(props: AccountOrderViewProps) {
+  const router = useRouter();
+  return <AccountOrderView {...props} onBack={() => router.push("/account/orders")} />;
+}

package/templates/storefront-pharmacy/components/providers.tsx

@@ -1,13 +1,23 @@
 "use client";
 
 import { useMemo, type ReactNode } from "react";
-import { createCimplifyClient } from "@cimplify/sdk";
+import { createCimplifyClient, type Business, type Location } from "@cimplify/sdk";
 import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
 import { AuthErrorToast } from "@/components/auth-error-toast";
 
 // Same-origin client — every request goes through the Next.js rewrite in
 // next.config.ts, so no CORS preflight ever hits the browser.
-export function Providers({ children }: { children: ReactNode }) {
+export function Providers({
+  children,
+  initialBusiness,
+  initialLocations,
+}: {
+  children: ReactNode;
+  // Server-fetched in app/layout.tsx so prices render in the right currency
+  // during SSR (no default-currency flash before the client bootstrap).
+  initialBusiness?: Business | null;
+  initialLocations?: Location[];
+}) {
   const client = useMemo(() => {
     const baseUrl =
       typeof window !== "undefined" ? window.location.origin : "http://127.0.0.1:8787";
@@ -20,7 +30,11 @@ export function Providers({ children }: { children: ReactNode }) {
   }, []);
 
   return (
-    <CimplifyProvider client={client}>
+    <CimplifyProvider
+      client={client}
+      initialBusiness={initialBusiness}
+      initialLocations={initialLocations}
+    >
       <CartDrawerProvider>
         {children}
         <AuthErrorToast />

package/templates/storefront-pharmacy/package.json

@@ -17,7 +17,7 @@
     "check": "bun run typecheck && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.70.3",
+    "@cimplify/sdk": "^0.72.0",
     "next": "^16.2.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

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

@@ -0,0 +1,42 @@
+import { notFound } from "next/navigation";
+import { AccountSignedOutPrompt, toAccountOrderView } from "@cimplify/sdk/react";
+import type { EnrichedOrder } from "@cimplify/sdk";
+import { brand } from "@/lib/brand";
+import { apiFetch, serverAccessToken, serverSession } from "@/lib/cimplify-server";
+import { OrderDetail } from "@/components/order-detail";
+
+const CLIENT_ID = process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID ?? "";
+const REDIRECT_URI = process.env.CIMPLIFY_REDIRECT_URI ?? "";
+
+export default async function OrderDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const session = await serverSession();
+  if (!session) {
+    return (
+      <AccountSignedOutPrompt
+        clientId={CLIENT_ID}
+        redirectUri={REDIRECT_URI}
+        eyebrow={brand.account.loginEyebrow}
+        title={brand.account.loginTitle}
+        description={brand.account.loginSubtitle}
+      />
+    );
+  }
+
+  const bearer = await serverAccessToken();
+  const order = await apiFetch<EnrichedOrder>(`/api/v1/orders/${encodeURIComponent(id)}`, {
+    bearer,
+  });
+  if (!order) notFound();
+
+  return (
+    <div className="mx-auto w-full max-w-5xl px-4 py-8 sm:px-6">
+      <OrderDetail {...toAccountOrderView(order)} />
+    </div>
+  );
+}

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

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter, Lora } from "next/font/google";
 import "./globals.css";
 import { Providers } from "@/components/providers";
+import { getServerClient, tags } from "@cimplify/sdk/server";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
@@ -41,7 +42,15 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const server = getServerClient();
+  const [bizResult, locResult] = await Promise.all([
+    server.business.getInfo({ cacheOptions: { revalidate: 3600, tags: [tags.business()] } }),
+    server.business.getLocations({ cacheOptions: { revalidate: 3600, tags: [tags.locations()] } }),
+  ]);
+  const initialBusiness = bizResult.ok ? bizResult.value : null;
+  const initialLocations = locResult.ok ? locResult.value : [];
+
   return (
     <html lang="en" suppressHydrationWarning className={`${inter.variable} ${lora.variable}`}>
       <body
@@ -51,7 +60,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Suspense fallback={null}>
           <OrganizationJsonLd />
         </Suspense>
-        <Providers>
+        <Providers initialBusiness={initialBusiness} initialLocations={initialLocations}>
           <Header />
           <main className="flex-1 pb-12 w-full">
             <Suspense fallback={null}>{children}</Suspense>

package/templates/storefront-restaurant/components/order-detail.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { AccountOrderView, type AccountOrderViewProps } from "@cimplify/sdk/react";
+
+// Thin client wrapper so the server page can pass the (serializable) view-model
+// while `onBack` (a function) is supplied on the client.
+export function OrderDetail(props: AccountOrderViewProps) {
+  const router = useRouter();
+  return <AccountOrderView {...props} onBack={() => router.push("/account/orders")} />;
+}

package/templates/storefront-restaurant/components/providers.tsx

@@ -1,13 +1,23 @@
 "use client";
 
 import { useMemo, type ReactNode } from "react";
-import { createCimplifyClient } from "@cimplify/sdk";
+import { createCimplifyClient, type Business, type Location } from "@cimplify/sdk";
 import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
 import { AuthErrorToast } from "@/components/auth-error-toast";
 
 // Same-origin client — every request goes through the Next.js rewrite in
 // next.config.ts, so no CORS preflight ever hits the browser.
-export function Providers({ children }: { children: ReactNode }) {
+export function Providers({
+  children,
+  initialBusiness,
+  initialLocations,
+}: {
+  children: ReactNode;
+  // Server-fetched in app/layout.tsx so prices render in the right currency
+  // during SSR (no default-currency flash before the client bootstrap).
+  initialBusiness?: Business | null;
+  initialLocations?: Location[];
+}) {
   const client = useMemo(() => {
     const baseUrl =
       typeof window !== "undefined" ? window.location.origin : "http://127.0.0.1:8787";
@@ -20,7 +30,11 @@ export function Providers({ children }: { children: ReactNode }) {
   }, []);
 
   return (
-    <CimplifyProvider client={client}>
+    <CimplifyProvider
+      client={client}
+      initialBusiness={initialBusiness}
+      initialLocations={initialLocations}
+    >
       <CartDrawerProvider>
         {children}
         <AuthErrorToast />

package/templates/storefront-restaurant/package.json

@@ -17,7 +17,7 @@
     "check": "bun run typecheck && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.70.3",
+    "@cimplify/sdk": "^0.72.0",
     "next": "^16.2.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

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

@@ -0,0 +1,42 @@
+import { notFound } from "next/navigation";
+import { AccountSignedOutPrompt, toAccountOrderView } from "@cimplify/sdk/react";
+import type { EnrichedOrder } from "@cimplify/sdk";
+import { brand } from "@/lib/brand";
+import { apiFetch, serverAccessToken, serverSession } from "@/lib/cimplify-server";
+import { OrderDetail } from "@/components/order-detail";
+
+const CLIENT_ID = process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID ?? "";
+const REDIRECT_URI = process.env.CIMPLIFY_REDIRECT_URI ?? "";
+
+export default async function OrderDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const session = await serverSession();
+  if (!session) {
+    return (
+      <AccountSignedOutPrompt
+        clientId={CLIENT_ID}
+        redirectUri={REDIRECT_URI}
+        eyebrow={brand.account.loginEyebrow}
+        title={brand.account.loginTitle}
+        description={brand.account.loginSubtitle}
+      />
+    );
+  }
+
+  const bearer = await serverAccessToken();
+  const order = await apiFetch<EnrichedOrder>(`/api/v1/orders/${encodeURIComponent(id)}`, {
+    bearer,
+  });
+  if (!order) notFound();
+
+  return (
+    <div className="mx-auto w-full max-w-5xl px-4 py-8 sm:px-6">
+      <OrderDetail {...toAccountOrderView(order)} />
+    </div>
+  );
+}

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

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { Providers } from "@/components/providers";
+import { getServerClient, tags } from "@cimplify/sdk/server";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
@@ -41,7 +42,15 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const server = getServerClient();
+  const [bizResult, locResult] = await Promise.all([
+    server.business.getInfo({ cacheOptions: { revalidate: 3600, tags: [tags.business()] } }),
+    server.business.getLocations({ cacheOptions: { revalidate: 3600, tags: [tags.locations()] } }),
+  ]);
+  const initialBusiness = bizResult.ok ? bizResult.value : null;
+  const initialLocations = locResult.ok ? locResult.value : [];
+
   return (
     <html lang="en" suppressHydrationWarning className={`${inter.variable} ${mono.variable}`}>
       <body
@@ -51,7 +60,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Suspense fallback={null}>
           <OrganizationJsonLd />
         </Suspense>
-        <Providers>
+        <Providers initialBusiness={initialBusiness} initialLocations={initialLocations}>
           <Header />
           <main className="flex-1 pb-12 w-full">
             <Suspense fallback={null}>{children}</Suspense>

package/templates/storefront-retail/components/order-detail.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { AccountOrderView, type AccountOrderViewProps } from "@cimplify/sdk/react";
+
+// Thin client wrapper so the server page can pass the (serializable) view-model
+// while `onBack` (a function) is supplied on the client.
+export function OrderDetail(props: AccountOrderViewProps) {
+  const router = useRouter();
+  return <AccountOrderView {...props} onBack={() => router.push("/account/orders")} />;
+}

package/templates/storefront-retail/components/providers.tsx

@@ -1,13 +1,23 @@
 "use client";
 
 import { useMemo, type ReactNode } from "react";
-import { createCimplifyClient } from "@cimplify/sdk";
+import { createCimplifyClient, type Business, type Location } from "@cimplify/sdk";
 import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
 import { AuthErrorToast } from "@/components/auth-error-toast";
 
 // Same-origin client — every request goes through the Next.js rewrite in
 // next.config.ts, so no CORS preflight ever hits the browser.
-export function Providers({ children }: { children: ReactNode }) {
+export function Providers({
+  children,
+  initialBusiness,
+  initialLocations,
+}: {
+  children: ReactNode;
+  // Server-fetched in app/layout.tsx so prices render in the right currency
+  // during SSR (no default-currency flash before the client bootstrap).
+  initialBusiness?: Business | null;
+  initialLocations?: Location[];
+}) {
   const client = useMemo(() => {
     const baseUrl =
       typeof window !== "undefined" ? window.location.origin : "http://127.0.0.1:8787";
@@ -20,7 +30,11 @@ export function Providers({ children }: { children: ReactNode }) {
   }, []);
 
   return (
-    <CimplifyProvider client={client}>
+    <CimplifyProvider
+      client={client}
+      initialBusiness={initialBusiness}
+      initialLocations={initialLocations}
+    >
       <CartDrawerProvider>
         {children}
         <AuthErrorToast />

package/templates/storefront-retail/package.json

@@ -17,7 +17,7 @@
     "check": "bun run typecheck && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.70.3",
+    "@cimplify/sdk": "^0.72.0",
     "next": "^16.2.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

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

@@ -0,0 +1,42 @@
+import { notFound } from "next/navigation";
+import { AccountSignedOutPrompt, toAccountOrderView } from "@cimplify/sdk/react";
+import type { EnrichedOrder } from "@cimplify/sdk";
+import { brand } from "@/lib/brand";
+import { apiFetch, serverAccessToken, serverSession } from "@/lib/cimplify-server";
+import { OrderDetail } from "@/components/order-detail";
+
+const CLIENT_ID = process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID ?? "";
+const REDIRECT_URI = process.env.CIMPLIFY_REDIRECT_URI ?? "";
+
+export default async function OrderDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const session = await serverSession();
+  if (!session) {
+    return (
+      <AccountSignedOutPrompt
+        clientId={CLIENT_ID}
+        redirectUri={REDIRECT_URI}
+        eyebrow={brand.account.loginEyebrow}
+        title={brand.account.loginTitle}
+        description={brand.account.loginSubtitle}
+      />
+    );
+  }
+
+  const bearer = await serverAccessToken();
+  const order = await apiFetch<EnrichedOrder>(`/api/v1/orders/${encodeURIComponent(id)}`, {
+    bearer,
+  });
+  if (!order) notFound();
+
+  return (
+    <div className="mx-auto w-full max-w-5xl px-4 py-8 sm:px-6">
+      <OrderDetail {...toAccountOrderView(order)} />
+    </div>
+  );
+}

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

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter, Fraunces } from "next/font/google";
 import "./globals.css";
 import { Providers } from "@/components/providers";
+import { getServerClient, tags } from "@cimplify/sdk/server";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
@@ -41,7 +42,15 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const server = getServerClient();
+  const [bizResult, locResult] = await Promise.all([
+    server.business.getInfo({ cacheOptions: { revalidate: 3600, tags: [tags.business()] } }),
+    server.business.getLocations({ cacheOptions: { revalidate: 3600, tags: [tags.locations()] } }),
+  ]);
+  const initialBusiness = bizResult.ok ? bizResult.value : null;
+  const initialLocations = locResult.ok ? locResult.value : [];
+
   return (
     <html lang="en" suppressHydrationWarning className={`${inter.variable} ${fraunces.variable}`}>
       <body
@@ -51,7 +60,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Suspense fallback={null}>
           <OrganizationJsonLd />
         </Suspense>
-        <Providers>
+        <Providers initialBusiness={initialBusiness} initialLocations={initialLocations}>
           <Header />
           <main className="flex-1 pb-12 w-full">
             <Suspense fallback={null}>{children}</Suspense>

package/templates/storefront-services/components/order-detail.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { AccountOrderView, type AccountOrderViewProps } from "@cimplify/sdk/react";
+
+// Thin client wrapper so the server page can pass the (serializable) view-model
+// while `onBack` (a function) is supplied on the client.
+export function OrderDetail(props: AccountOrderViewProps) {
+  const router = useRouter();
+  return <AccountOrderView {...props} onBack={() => router.push("/account/orders")} />;
+}