@cimplify/cli 0.7.10 → 0.7.12

package/templates/storefront-restaurant/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-restaurant/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-restaurant/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"

package/templates/storefront-retail/AGENTS.md

@@ -32,10 +32,10 @@ app/
   checkout/page.tsx              SDK <CheckoutPage/>
   orders/[id]/page.tsx           Post-checkout confirmation
 
-  account/page.tsx               <CimplifyAccount /> (iframe)
-  account/orders/page.tsx        <CimplifyAccount section="orders" />
-  account/addresses/page.tsx     <CimplifyAccount section="addresses" />
-  account/settings/page.tsx      <CimplifyAccount section="settings" />
+  account/page.tsx               <AccountDashboardPage /> (native, Server Component)
+  account/orders/page.tsx        <AccountOrdersPage /> (native)
+  account/addresses/page.tsx     Native list + Server Actions for CRUD
+  account/wallets/page.tsx       Native list + Server Actions for CRUD
   login/page.tsx, signup/page.tsx  redirects → /account
 
   contact/page.tsx               Branded contact form

package/templates/storefront-retail/app/account/addresses/actions.ts

@@ -0,0 +1,56 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { apiFetch, serverAccessToken } from "@/lib/cimplify-server";
+import type { CustomerAddress } from "@cimplify/sdk";
+
+const ACCOUNT_ADDRESSES = "/account/addresses";
+
+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 createAddressAction(form: FormData): Promise<void> {
+  const bearer = await serverAccessToken();
+  await apiFetch<CustomerAddress>("/v1/link/addresses", {
+    bearer,
+    method: "POST",
+    body: JSON.stringify({
+      label: optional(form, "label"),
+      street_address: required(form, "street_address"),
+      apartment: optional(form, "apartment"),
+      city: required(form, "city"),
+      region: optional(form, "region"),
+      postal_code: optional(form, "postal_code"),
+      country: optional(form, "country"),
+    }),
+  });
+  revalidatePath(ACCOUNT_ADDRESSES);
+}
+
+export async function deleteAddressAction(form: FormData): Promise<void> {
+  const bearer = await serverAccessToken();
+  const id = required(form, "address_id");
+  await apiFetch<unknown>(`/v1/link/addresses/${encodeURIComponent(id)}`, {
+    bearer,
+    method: "DELETE",
+  });
+  revalidatePath(ACCOUNT_ADDRESSES);
+}
+
+export async function setDefaultAddressAction(form: FormData): Promise<void> {
+  const bearer = await serverAccessToken();
+  const id = required(form, "address_id");
+  await apiFetch<unknown>(`/v1/link/addresses/${encodeURIComponent(id)}/default`, {
+    bearer,
+    method: "POST",
+  });
+  revalidatePath(ACCOUNT_ADDRESSES);
+}

package/templates/storefront-retail/app/account/addresses/page.tsx

@@ -1,21 +1,184 @@
-import type { Metadata } from "next";
-import { AccountIframe } from "@/components/account-iframe";
+import {
+  AccountContent,
+  AccountHero,
+  AccountNav,
+  AccountShell,
+  AccountSidebar,
+  AccountSignedOutPrompt,
+  Button,
+  EmptyState,
+  Section,
+} from "@cimplify/sdk/react";
+import type { CustomerAddress } from "@cimplify/sdk";
 import { brand } from "@/lib/brand";
+import { ACCOUNT_NAV, apiFetch, serverAccessToken, serverSession } from "@/lib/cimplify-server";
+import {
+  createAddressAction,
+  deleteAddressAction,
+  setDefaultAddressAction,
+} from "./actions";
 
-export const metadata: Metadata = {
-  title: `Addresses — ${brand.name}`,
-};
+const CLIENT_ID = process.env.NEXT_PUBLIC_CIMPLIFY_CLIENT_ID ?? "";
+const REDIRECT_URI = process.env.CIMPLIFY_REDIRECT_URI ?? "";
+
+function singleLine(address: CustomerAddress): string {
+  return [
+    address.street_address,
+    address.apartment,
+    address.city,
+    address.region,
+    address.postal_code,
+    address.country,
+  ]
+    .filter(Boolean)
+    .join(", ");
+}
+
+function AddressCard({ address }: { address: CustomerAddress }) {
+  const isDefault = address.is_default === true;
+  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">{address.label || "Address"}</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 truncate">
+          {singleLine(address)}
+        </p>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {!isDefault && (
+          <form action={setDefaultAddressAction}>
+            <input type="hidden" name="address_id" value={address.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={deleteAddressAction}>
+          <input type="hidden" name="address_id" value={address.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 AddAddressForm() {
+  return (
+    <form
+      action={createAddressAction}
+      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 an address</h3>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <input
+          name="label"
+          placeholder="Label (Home, Work)"
+          className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px]"
+        />
+        <input
+          name="street_address"
+          required
+          placeholder="Street address"
+          className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px]"
+        />
+        <input
+          name="apartment"
+          placeholder="Apartment / unit (optional)"
+          className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px]"
+        />
+        <input
+          name="city"
+          required
+          placeholder="City"
+          className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px]"
+        />
+        <input
+          name="region"
+          placeholder="Region / state"
+          className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px]"
+        />
+        <input
+          name="postal_code"
+          placeholder="Postal code"
+          className="rounded-[10px] border border-border bg-background px-3 h-10 text-[13px]"
+        />
+      </div>
+      <input
+        name="country"
+        placeholder="Country"
+        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 address
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export default async function AddressesPage() {
+  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 = (await apiFetch<CustomerAddress[]>("/v1/link/addresses", { bearer })) ?? [];
 
-export default function AddressesPage() {
   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 addresses
-      </h1>
-      <AccountIframe section="addresses" />
-    </article>
+    <AccountShell
+      sidebar={
+        <AccountSidebar>
+          <AccountNav items={ACCOUNT_NAV} activeHref="/account/addresses" />
+        </AccountSidebar>
+      }
+    >
+      <AccountHero
+        eyebrow="Saved addresses"
+        title="Where should we deliver?"
+        subtitle="Saved addresses sync across every Cimplify shop you use."
+      />
+      <AccountContent>
+        <Section title="Your addresses" meta={`${addresses.length} saved`}>
+          <div className="space-y-3">
+            {addresses.length === 0 ? (
+              <EmptyState
+                title="No addresses yet"
+                description="Add a delivery address to check out faster next time."
+              />
+            ) : (
+              addresses.map((address) => <AddressCard key={address.id} address={address} />)
+            )}
+          </div>
+        </Section>
+        <Section title="Add another">
+          <AddAddressForm />
+        </Section>
+      </AccountContent>
+    </AccountShell>
   );
 }

package/templates/storefront-retail/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-retail/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-retail/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);
+}