@cimplify/cli 0.7.10 → 0.7.12

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

@@ -1,21 +1,90 @@
-import type { Metadata } from "next";
-import { AccountIframe } from "@/components/account-iframe";
+import {
+  AccountOrdersPage,
+  AccountSignedOutPrompt,
+} from "@cimplify/sdk/react";
+import type { OrderRowData, OrderRowStatus } from "@cimplify/sdk/react";
+import type { Order, OrderStatus } from "@cimplify/sdk";
+import { formatMoney } from "@cimplify/sdk";
 import { brand } from "@/lib/brand";
+import { ACCOUNT_NAV, apiFetch, serverAccessToken, serverSession } from "@/lib/cimplify-server";
 
-export const metadata: Metadata = {
-  title: `Orders — ${brand.name}`,
-};
+const CLIENT_ID = process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID ?? "";
+const REDIRECT_URI = process.env.CIMPLIFY_REDIRECT_URI ?? "";
+
+function mapStatus(status: OrderStatus): OrderRowStatus {
+  switch (status) {
+    case "in_preparation":
+    case "ready_to_serve":
+    case "partially_served":
+      return { kind: "preparing", label: "Preparing" };
+    case "delivered":
+      return { kind: "delivered" };
+    case "picked_up":
+      return { kind: "delivered", label: "Picked up" };
+    case "served":
+    case "completed":
+      return { kind: "completed" };
+    case "cancelled":
+    case "refunded":
+      return { kind: "cancelled", label: status === "refunded" ? "Refunded" : undefined };
+    case "pending":
+    case "created":
+    case "confirmed":
+    default:
+      return { kind: "active", label: "Confirmed" };
+  }
+}
+
+function relativeMeta(iso: string, orderNumber: string): string {
+  const when = new Date(iso);
+  const formatted = when.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: when.getFullYear() === new Date().getFullYear() ? undefined : "numeric",
+  });
+  return `Order ${orderNumber} · ${formatted}`;
+}
+
+function toRowData(order: Order): OrderRowData {
+  const count = order.items?.length ?? 0;
+  return {
+    id: order.id,
+    href: `/account/orders/${order.id}`,
+    summary: count > 0 ? `${count} ${count === 1 ? "item" : "items"}` : "Order",
+    meta: relativeMeta(order.created_at, order.user_friendly_id ?? order.id),
+    status: mapStatus(order.status),
+    total: formatMoney(order.total_price, order.currency),
+  };
+}
+
+export default async function OrdersPage() {
+  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 orders = await apiFetch<Order[]>(
+    `/v1/link/orders?business_id=${encodeURIComponent(brand.mock.businessId)}`,
+    { bearer },
+  );
 
-export default function OrdersPage() {
   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]">
-        Your orders
-      </h1>
-      <AccountIframe section="orders" />
-    </article>
+    <AccountOrdersPage
+      customerName={session.name ?? ""}
+      customerEmail={session.email}
+      customerId={session.sub}
+      merchantName={brand.name}
+      nav={ACCOUNT_NAV}
+      orders={(orders ?? []).map(toRowData)}
+    />
   );
 }

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

@@ -1,22 +1,45 @@
-import type { Metadata } from "next";
-import { AccountIframe } from "@/components/account-iframe";
+import {
+  AccountDashboardPage,
+  AccountSignedOutPrompt,
+} from "@cimplify/sdk/react";
+import type { CustomerAddress, CustomerMobileMoney } from "@cimplify/sdk";
 import { brand } from "@/lib/brand";
+import { ACCOUNT_NAV, apiFetch, serverAccessToken, serverSession } from "@/lib/cimplify-server";
 
-export const metadata: Metadata = {
-  title: `Account — ${brand.name}`,
-  description: brand.account.signupSubtitle,
-};
+const CLIENT_ID = process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID ?? "";
+const REDIRECT_URI = process.env.CIMPLIFY_REDIRECT_URI ?? "";
+
+export default async function AccountPage() {
+  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 [addresses, wallets] = await Promise.all([
+    apiFetch<CustomerAddress[]>("/v1/link/addresses", { bearer }),
+    apiFetch<CustomerMobileMoney[]>("/v1/link/mobile-money", { bearer }),
+  ]);
 
-export default function AccountPage() {
   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">
-        {brand.account.accountEyebrow}
-      </p>
-      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
-        {brand.account.accountTitle}
-      </h1>
-      <AccountIframe />
-    </article>
+    <AccountDashboardPage
+      customerName={session.name ?? ""}
+      customerEmail={session.email}
+      customerId={session.sub}
+      merchantName={brand.name}
+      nav={ACCOUNT_NAV}
+      identitySummary={{
+        addresses: addresses?.length ?? 0,
+        paymentMethods: wallets?.length ?? 0,
+      }}
+    />
   );
 }

package/templates/storefront-services/app/account/wallets/actions.ts

@@ -0,0 +1,52 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { apiFetch, serverAccessToken } from "@/lib/cimplify-server";
+import type { CustomerMobileMoney, MobileMoneyProvider } from "@cimplify/sdk";
+
+const ACCOUNT_WALLETS = "/account/wallets";
+
+function required(form: FormData, key: string): string {
+  const value = String(form.get(key) ?? "").trim();
+  if (!value) throw new Error(`Missing required field: ${key}`);
+  return value;
+}
+
+function optional(form: FormData, key: string): string | undefined {
+  const value = String(form.get(key) ?? "").trim();
+  return value || undefined;
+}
+
+export async function createWalletAction(form: FormData): Promise<void> {
+  const bearer = await serverAccessToken();
+  await apiFetch<CustomerMobileMoney>("/v1/link/mobile-money", {
+    bearer,
+    method: "POST",
+    body: JSON.stringify({
+      phone_number: required(form, "phone_number"),
+      provider: required(form, "provider") as MobileMoneyProvider,
+      label: optional(form, "label"),
+    }),
+  });
+  revalidatePath(ACCOUNT_WALLETS);
+}
+
+export async function deleteWalletAction(form: FormData): Promise<void> {
+  const bearer = await serverAccessToken();
+  const id = required(form, "mobile_money_id");
+  await apiFetch<unknown>(`/v1/link/mobile-money/${encodeURIComponent(id)}`, {
+    bearer,
+    method: "DELETE",
+  });
+  revalidatePath(ACCOUNT_WALLETS);
+}
+
+export async function setDefaultWalletAction(form: FormData): Promise<void> {
+  const bearer = await serverAccessToken();
+  const id = required(form, "mobile_money_id");
+  await apiFetch<unknown>(`/v1/link/mobile-money/${encodeURIComponent(id)}/default`, {
+    bearer,
+    method: "POST",
+  });
+  revalidatePath(ACCOUNT_WALLETS);
+}

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

@@ -0,0 +1,185 @@
+import {
+  AccountContent,
+  AccountHero,
+  AccountNav,
+  AccountShell,
+  AccountSidebar,
+  AccountSignedOutPrompt,
+  Button,
+  EmptyState,
+  Section,
+} from "@cimplify/sdk/react";
+import type { CustomerMobileMoney } from "@cimplify/sdk";
+import { MOBILE_MONEY_PROVIDER } from "@cimplify/sdk";
+import { brand } from "@/lib/brand";
+import { ACCOUNT_NAV, apiFetch, serverAccessToken, serverSession } from "@/lib/cimplify-server";
+import {
+  createWalletAction,
+  deleteWalletAction,
+  setDefaultWalletAction,
+} from "./actions";
+
+const CLIENT_ID = process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID ?? "";
+const REDIRECT_URI = process.env.CIMPLIFY_REDIRECT_URI ?? "";
+
+const PROVIDER_LABEL: Record<string, string> = {
+  [MOBILE_MONEY_PROVIDER.MTN]: "MTN",
+  [MOBILE_MONEY_PROVIDER.VODAFONE]: "Vodafone",
+  [MOBILE_MONEY_PROVIDER.TELECEL]: "Telecel",
+  [MOBILE_MONEY_PROVIDER.AIRTEL]: "Airtel",
+  [MOBILE_MONEY_PROVIDER.AIRTELTIGO]: "AirtelTigo",
+  [MOBILE_MONEY_PROVIDER.MPESA]: "M-Pesa",
+};
+
+function maskedPhone(phone: string): string {
+  const digits = phone.replace(/\D/g, "");
+  if (digits.length < 4) return phone;
+  return `${phone.slice(0, 4)} ••• ${digits.slice(-3)}`;
+}
+
+function WalletCard({ wallet }: { wallet: CustomerMobileMoney }) {
+  const isDefault = wallet.is_default === true;
+  const providerLabel = PROVIDER_LABEL[wallet.provider] ?? wallet.provider;
+  return (
+    <div className="flex items-start justify-between gap-4 rounded-[14px] border border-border bg-card p-5">
+      <div className="min-w-0">
+        <div className="flex items-center gap-2 mb-1.5">
+          <span className="text-[14px] font-medium text-foreground">
+            {wallet.label || providerLabel}
+          </span>
+          {isDefault && (
+            <span className="text-[10px] font-medium tracking-[0.08em] uppercase text-foreground/60 bg-foreground/5 px-2 py-0.5 rounded-full">
+              Default
+            </span>
+          )}
+        </div>
+        <p className="text-[13px] text-foreground/70 leading-relaxed">
+          {providerLabel} · {maskedPhone(wallet.phone_number)}
+        </p>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {!isDefault && (
+          <form action={setDefaultWalletAction}>
+            <input type="hidden" name="mobile_money_id" value={wallet.id} />
+            <button
+              type="submit"
+              className="text-[12px] font-medium text-foreground/70 hover:text-foreground px-2 py-1"
+            >
+              Make default
+            </button>
+          </form>
+        )}
+        <form action={deleteWalletAction}>
+          <input type="hidden" name="mobile_money_id" value={wallet.id} />
+          <button
+            type="submit"
+            className="text-[12px] font-medium text-destructive/80 hover:text-destructive px-2 py-1"
+          >
+            Remove
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function AddWalletForm() {
+  return (
+    <form
+      action={createWalletAction}
+      className="rounded-[14px] border border-dashed border-border bg-card p-5 space-y-3"
+    >
+      <h3 className="text-[13px] font-semibold tracking-[0.02em] text-foreground">
+        Add a mobile money wallet
+      </h3>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <select
+          name="provider"
+          required
+          defaultValue=""
+          className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px]"
+        >
+          <option value="" disabled>
+            Provider
+          </option>
+          {Object.entries(PROVIDER_LABEL).map(([value, label]) => (
+            <option key={value} value={value}>
+              {label}
+            </option>
+          ))}
+        </select>
+        <input
+          name="phone_number"
+          required
+          type="tel"
+          inputMode="tel"
+          autoComplete="tel"
+          placeholder="+233 24 400 0000"
+          className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px]"
+        />
+      </div>
+      <input
+        name="label"
+        placeholder="Label (Personal, Business — optional)"
+        className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px] w-full"
+      />
+      <div className="flex justify-end">
+        <Button type="submit" variant="primary">
+          Save wallet
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export default async function WalletsPage() {
+  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 wallets =
+    (await apiFetch<CustomerMobileMoney[]>("/v1/link/mobile-money", { bearer })) ?? [];
+
+  return (
+    <AccountShell
+      sidebar={
+        <AccountSidebar>
+          <AccountNav items={ACCOUNT_NAV} activeHref="/account/wallets" />
+        </AccountSidebar>
+      }
+    >
+      <AccountHero
+        eyebrow="Wallets"
+        title="How would you like to pay?"
+        subtitle="Saved wallets work across every Cimplify shop you use."
+      />
+      <AccountContent>
+        <Section title="Your wallets" meta={`${wallets.length} saved`}>
+          <div className="space-y-3">
+            {wallets.length === 0 ? (
+              <EmptyState
+                title="No wallets yet"
+                description="Add a mobile money wallet to skip the number entry next checkout."
+              />
+            ) : (
+              wallets.map((wallet) => <WalletCard key={wallet.id} wallet={wallet} />)
+            )}
+          </div>
+        </Section>
+        <Section title="Add another">
+          <AddWalletForm />
+        </Section>
+      </AccountContent>
+    </AccountShell>
+  );
+}

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

@@ -55,7 +55,7 @@ const STATIC_LINKS: { title: string; links: { href: string; label: string }[] }[
       { href: "/account", label: "Account" },
       { href: "/account/orders", label: "Orders" },
       { href: "/account/addresses", label: "Addresses" },
-      { href: "/account/settings", label: "Settings" },
+      { href: "/account/wallets", label: "Wallets" },
       { href: "/login", label: "Sign in" },
       { href: "/signup", label: "Create account" },
       { href: "/track-order", label: "Track an order" },

package/templates/storefront-services/bun.lock

@@ -5,7 +5,7 @@
     "": {
       "name": "__STOREFRONT_NAME__",
       "dependencies": {
-        "@cimplify/sdk": "^0.54.0",
+        "@cimplify/sdk": "^0.64.1",
         "next": "^16.2.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -31,7 +31,7 @@
 
     "@base-ui/utils": ["@base-ui/utils@0.2.9", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@floating-ui/utils": "^0.2.11", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw=="],
 
-    "@cimplify/sdk": ["@cimplify/sdk@0.54.0", "", { "dependencies": { "@base-ui/react": "^1.4.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", "libphonenumber-js": "1.12.41", "react-day-picker": "^9.14.0", "tailwind-merge": "^3.5.0", "zod": "^4.4.3" }, "peerDependencies": { "@paystack/inline-js": "^2.22.8", "msw": ">=2.0.0", "react": ">=17.0.0", "vitest": ">=2.0.0" }, "optionalPeers": ["@paystack/inline-js", "msw", "react", "vitest"], "bin": { "cimplify-mock": "dist/mock/cli.mjs" } }, "sha512-YUN/lOqViHci1v9USWWwAWty29pEXBdLTuKarSl8EpafWh5jkdGZ1Q+Ne9/bfgTZmR8iTUltA8U7glV2FoRSgg=="],
+    "@cimplify/sdk": ["@cimplify/sdk@0.64.1", "", { "dependencies": { "@base-ui/react": "^1.4.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", "jose": "^6.2.3", "libphonenumber-js": "1.12.41", "react-day-picker": "^9.14.0", "tailwind-merge": "^3.5.0", "xss": "^1.0.15", "zod": "^4.4.3" }, "peerDependencies": { "@paystack/inline-js": "^2.22.8", "msw": ">=2.0.0", "react": ">=17.0.0", "vitest": ">=2.0.0" }, "optionalPeers": ["@paystack/inline-js", "msw", "react", "vitest"], "bin": { "cimplify-mock": "dist/mock/cli.mjs" } }, "sha512-qY3ngAxAyeRwHR5jJZ7eeeNKgvayZlVUuNglp779bJiwtwL3cZ8Ux4L+k3SgRzgAxtKz9YU2mmVBZxEu14frUw=="],
 
     "@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="],
 
@@ -313,6 +313,8 @@
 
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
+    "cssfilter": ["cssfilter@0.0.10", "", {}, "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="],
+
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "date-fns": ["date-fns@4.2.1", "", {}, "sha512-37RhSdxaG1suen6VDCza6rNrQfooyQh57HFVPwQGEq2QWliVLzPQZ8Oa017weOu+HZCnzI7N3Pf/wyoBKfEqrA=="],
@@ -349,6 +351,8 @@
 
     "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
 
+    "jose": ["jose@6.2.3", "", {}, "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw=="],
+
     "libphonenumber-js": ["libphonenumber-js@1.12.41", "", {}, "sha512-lsmMmGXBxXIK/VMLEj0kL6MtUs1kBGj1nTCzi6zgQoG1DEwqwt2DQyHxcLykceIxAnfE3hya7NuIh6PpC6S3fA=="],
 
     "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
@@ -467,6 +471,8 @@
 
     "wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
+    "xss": ["xss@1.0.15", "", { "dependencies": { "commander": "^2.20.3", "cssfilter": "0.0.10" }, "bin": { "xss": "bin/xss" } }, "sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg=="],
+
     "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
 
     "yaml": ["yaml@2.9.0", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA=="],

package/templates/storefront-services/lib/brand.ts

@@ -368,7 +368,7 @@ export const brand: Brand = {
           { label: "Sign in", href: "/login" },
           { label: "Create account", href: "/signup" },
           { label: "Your bookings", href: "/account/orders" },
-          { label: "Settings", href: "/account/settings" },
+          { label: "Wallets", href: "/account/wallets" },
         ],
       },
       {

package/templates/storefront-services/lib/cimplify-server.ts

@@ -0,0 +1,54 @@
+import { cookies } from "next/headers";
+import {
+  getAccessTokenFromCookieHeader,
+  getSessionFromCookieHeader,
+} from "@cimplify/sdk/server";
+import type { NavItem } from "@cimplify/sdk/react";
+
+export const ACCOUNT_NAV: NavItem[] = [
+  { label: "Dashboard", href: "/account" },
+  { label: "Orders", href: "/account/orders" },
+  { label: "Addresses", href: "/account/addresses" },
+  { label: "Wallets", href: "/account/wallets" },
+  { label: "Cimplify identity", href: "https://link.cimplify.io", external: true },
+];
+
+const CLIENT_ID = process.env.CIMPLIFY_CLIENT_ID ?? "";
+const ISSUER = (process.env.CIMPLIFY_ISSUER ?? "https://api.cimplify.io").replace(/\/$/, "");
+
+const OIDC_CONFIG = { clientId: CLIENT_ID, issuer: ISSUER };
+
+async function cookieHeader(): Promise<string> {
+  const store = await cookies();
+  return store.getAll().map((c) => `${c.name}=${c.value}`).join("; ");
+}
+
+export async function serverSession() {
+  return getSessionFromCookieHeader(OIDC_CONFIG, await cookieHeader());
+}
+
+export async function serverAccessToken(): Promise<string | null> {
+  return getAccessTokenFromCookieHeader(OIDC_CONFIG, await cookieHeader());
+}
+
+interface Envelope<T> {
+  data: T;
+}
+
+export async function apiFetch<T>(
+  path: string,
+  init: RequestInit & { bearer: string | null },
+): Promise<T | null> {
+  if (!init.bearer) return null;
+  const { bearer, ...rest } = init;
+  const headers = new Headers(rest.headers);
+  headers.set("Authorization", `Bearer ${bearer}`);
+  headers.set("Accept", "application/json");
+  if (rest.body && !headers.has("Content-Type")) {
+    headers.set("Content-Type", "application/json");
+  }
+  const res = await fetch(`${ISSUER}${path}`, { ...rest, headers, cache: "no-store" });
+  if (!res.ok) return null;
+  const envelope = (await res.json()) as Envelope<T>;
+  return envelope.data;
+}

package/templates/storefront-services/middleware.ts

@@ -0,0 +1,39 @@
+import { NextResponse, type NextRequest } from "next/server";
+import { handleTokenRefresh, type OidcConfig } from "@cimplify/sdk/server";
+
+function oidcConfig(): OidcConfig | null {
+  const clientId =
+    process.env.CIMPLIFY_CLIENT_ID?.trim() ||
+    process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID?.trim() ||
+    "";
+  if (!clientId) return null;
+  return {
+    clientId,
+    issuer: process.env.CIMPLIFY_ISSUER?.trim() || undefined,
+    authUrl: process.env.CIMPLIFY_AUTH_URL?.trim() || undefined,
+  };
+}
+
+// Keeps the access token fresh before account pages render. Server Components
+// can't write cookies, so this is the one place the rotated token can be both
+// persisted (browser) and forwarded onto the current request (this render).
+export async function middleware(request: NextRequest) {
+  const cfg = oidcConfig();
+  if (!cfg) return NextResponse.next();
+
+  const { outcome, setCookies, cookies } = await handleTokenRefresh(request, cfg);
+  if (outcome === "noop") return NextResponse.next();
+
+  for (const { name, value } of cookies) {
+    request.cookies.set(name, value);
+  }
+  const response = NextResponse.next({ request });
+  for (const cookie of setCookies) {
+    response.headers.append("set-cookie", cookie);
+  }
+  return response;
+}
+
+export const config = {
+  matcher: ["/account/:path*"],
+};

package/templates/storefront-services/package.json

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