@cimplify/cli 0.7.10 → 0.7.12

package/templates/storefront-retail/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-retail/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-retail/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-retail/lib/brand.ts

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

package/templates/storefront-retail/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-retail/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-retail/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-services/AGENTS.md

@@ -32,10 +32,10 @@ app/
 
   cart/page.tsx, checkout/page.tsx, orders/[id]/page.tsx
 
-  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, track-order/page.tsx (find a booking)

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