create-cartbase 0.0.1 → 0.1.0

package/template/app/docs/subscriptions.md

@@ -0,0 +1,148 @@
+# Subscriptions — the customer portal
+
+The "My subscriptions" surface (subscriptions-portal card): list, detail,
+schedule control, contract edits, cancel/reactivate and payment-method
+recovery. Every endpoint requires a **customer session**
+(`authorization: Bearer <supabase jwt>` — see [auth.md](auth.md)) **plus**
+`x-client-id`. Missing/invalid JWT → `401 {code: "unauthenticated"}`;
+a subscription that isn't the caller's own → **`404 not_found`** (never
+403 — existence is not confirmed across accounts).
+
+The API contract (all routes, shapes, error codes):
+`docs/contracts/store-api.md` § Subscriptions portal. This doc is the
+component-facing guide.
+
+> The executable blocks prove the **auth boundary** — the docs harness is
+> anonymous; happy paths are pinned by
+> `tests/store/subscriptions-portal.test.ts` and
+> `tests/store/subscription-payment-update.test.ts` with real sessions.
+
+## Render actions from `permissions` — never hardcode
+
+Every detail payload carries the merchant's live portal policy:
+
+```jsonc
+"permissions": {
+  "allow_skip": true,              // merchant toggles (Settings → Subscriptions)
+  "allow_reschedule": true,
+  "allow_pause": true,
+  "allow_frequency_change": true,
+  "allow_line_edits": true,
+  "allow_address_change": true,
+  "allow_cancel": true,            // constant — cancel is a customer right
+  "can_update_payment": false      // true only for card (Stripe) contracts
+}
+```
+
+Components MUST render conditionally from this object — a toggled-off
+action answers `403 {code: "portal_action_disabled"}`, so hiding the button
+is UX, the server is the enforcement. Cancel is ALWAYS shown (the cancel
+law: retention offers may render alongside, never instead). Payment update
+renders only when `can_update_payment` — COD/offline contracts have no card.
+
+## GET /api/store/subscriptions — my contracts
+
+`{ subscriptions: [...], count }` — newest first. `payment_method` is the
+merchant-facing display name from the payments registry (never `pp_*`).
+
+```bash
+STATUS=$(curl -s -o /dev/null -w '%{http_code}' "$BASE/api/store/subscriptions" \
+  -H "x-client-id: $CLIENT_ID")
+test "$STATUS" = 401
+```
+
+## GET /api/store/subscriptions/:id — the receipt view
+
+Sanitized detail: `plan`, `lines` (titles + contracted `unit_price`),
+`cycles` (index, status, date, linked order display id — no internal error
+strings), `upcoming` (next 3 PROJECTED charge dates; empty unless active)
+and `permissions`. Render the cycle list as order history; a `failed` cycle
+plus `can_update_payment` is the cue to surface the payment-update flow
+prominently (that pairing IS dunning recovery).
+
+```bash
+STATUS=$(curl -s -o /dev/null -w '%{http_code}' "$BASE/api/store/subscriptions/sub_doesnotexist" \
+  -H "x-client-id: $CLIENT_ID")
+test "$STATUS" = 401
+```
+
+## Actions
+
+All POST, all answer `{ subscription }` (the fresh detail — re-render from
+it, no refetch needed):
+
+| Route | Body | Gate |
+|---|---|---|
+| `/:id/skip` | — | `allow_skip` |
+| `/:id/charge-date` | `{ next_charge_at }` | `allow_reschedule` |
+| `/:id/pause` | `{ until? }` | `allow_pause` |
+| `/:id/resume` | — | right |
+| `/:id/cancel` | `{ reason? }` | right |
+| `/:id/reactivate` | `{ next_charge_at? }` | right |
+| `/:id/address` | `{ shipping_address }` | `allow_address_change` |
+| `/:id/lines/:lineId` | `{ quantity?, variant_id? }` | `allow_line_edits` |
+| `/:id/plan` | `{ selling_plan_id }` | `allow_frequency_change` |
+
+Component notes:
+
+- **Skip** — confirm-dialog copy should show the NEW next date (current
+  next date + one plan interval). A cycle mid-payment-retry cannot skip
+  (400) — hide skip while the latest cycle is `failed`.
+- **Pause** — offer preset durations (1/2/3 months → `until`); an `until`
+  pause auto-resumes server-side, no customer action needed. Indefinite
+  pause (no body) needs an explicit Resume.
+- **Reactivate** — render on canceled contracts; default schedule is
+  now + interval and it NEVER charges immediately — say so in the copy.
+- **Swap / frequency** — variant options come from the product's variants
+  (same product only); frequency options are the product's other selling
+  plans (`GET /api/store/products/:id/selling-plans`). Both re-price
+  server-side through the one price engine — display the returned
+  `unit_price`, never compute prices client-side.
+
+```bash
+STATUS=$(curl -s -o /dev/null -w '%{http_code}' -X POST "$BASE/api/store/subscriptions/sub_doesnotexist/cancel" \
+  -H "x-client-id: $CLIENT_ID" -H "content-type: application/json" -d '{}')
+test "$STATUS" = 401
+```
+
+## Payment-method update (dunning recovery)
+
+Two steps, card contracts only:
+
+1. `POST /:id/payment-method/session` → `{ session: { setup_intent_id,
+   client_secret, publishable_key } }`.
+2. Confirm client-side with Stripe.js — card fields never touch Cartbase:
+
+```jsonc
+// stripe = Stripe(session.publishable_key)
+// elements = stripe.elements({ clientSecret: session.client_secret })
+// mount PaymentElement, then:
+// await stripe.confirmSetup({ elements, redirect: "if_required" })
+```
+
+3. `POST /:id/payment-method` with `{ setup_intent_id }` → verified +
+   stamped; the response is the fresh detail. The next renewal charge (the
+   automatic retry ladder or the merchant's "Retry now") uses the new card.
+
+Entry points to build: the payment-failed email links here; the detail view
+surfaces it on `failed` cycles; the account shell may badge past-due
+subscriptions.
+
+```bash
+STATUS=$(curl -s -o /dev/null -w '%{http_code}' -X POST "$BASE/api/store/subscriptions/sub_doesnotexist/payment-method/session" \
+  -H "x-client-id: $CLIENT_ID" -d '')
+test "$STATUS" = 401
+```
+
+## Checkout + confirmation touchpoints
+
+- **Consent line at checkout**: subscription carts save the card for future
+  charges (`setup_future_usage: off_session`) — the checkout MUST show the
+  mandate text next to the pay button. [checkout.md](checkout.md) documents
+  the duty; the component ships with the portal family.
+- **Order confirmation**: a completed subscription checkout returns
+  contracts (cycle 1 = that order) — show "subscription started, next
+  charge on <date>" from the order's subscription metadata.
+- **PDP purchase options**: `GET /api/store/products/:id/selling-plans`
+  (see [products.md](products.md)) — the plan chosen at PDP rides the cart
+  line as `selling_plan_id`.

package/template/app/next.config.ts

@@ -0,0 +1,34 @@
+import path from "node:path"
+import type { NextConfig } from "next"
+
+const nextConfig: NextConfig = {
+  // Monorepo: pin the workspace root (Next otherwise infers it from a
+  // stray lockfile OUTSIDE the repo and mis-roots the dev module graph).
+  outputFileTracingRoot: path.join(__dirname, "../.."),
+  // The smoke driver browses via 127.0.0.1; allow dev-resource access.
+  allowedDevOrigins: ["127.0.0.1"],
+  // @cartbase/storefront is source-shipped TypeScript (workspace package) —
+  // the app's Next build transpiles it.
+  transpilePackages: ["@cartbase/storefront"],
+  images: {
+    // Reference app: seeded product images live on arbitrary demo hosts.
+    // A real store should allowlist its media domain via remotePatterns.
+    unoptimized: true,
+  },
+  // The barter store API ships NO CORS headers — browser-side SDK calls
+  // must be same-origin. Proxy them through the app origin (the browser
+  // client's baseUrl is window.location.origin); server-side SDK calls go
+  // straight to NEXT_PUBLIC_BARTER_URL and are unaffected.
+  async rewrites() {
+    const barterUrl = process.env.NEXT_PUBLIC_BARTER_URL
+    if (!barterUrl) return []
+    return [
+      {
+        source: "/api/store/:path*",
+        destination: `${barterUrl}/api/store/:path*`,
+      },
+    ]
+  },
+}
+
+export default nextConfig

package/template/app/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "cartbase-storefront",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Reference storefront built from docs/storefront/BUILD-A-STOREFRONT.md alone — the adoption proof for @cartbase/storefront.",
+  "scripts": {
+    "dev": "next dev --webpack -p 4778",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@cartbase/storefront": "^0.1.0",
+    "next": "16.2.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5"
+  }
+}

package/template/app/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/template/app/smoke.mjs

@@ -0,0 +1,158 @@
+/**
+ * Adoption-proof smoke: drives the REAL example-storefront UI from home to
+ * a completed pp_manual checkout against the barter backend.
+ *
+ * Prereqs: backend on :4777, example app on :4778 (see examples/storefront
+ * package.json). Run: `node examples/storefront/smoke.mjs` from the repo
+ * root (Playwright is a root devDependency). Exits 0 only when the
+ * confirmation page shows an order number and totals.
+ */
+import { chromium } from "@playwright/test"
+
+const BASE = process.env.SMOKE_BASE_URL ?? "http://127.0.0.1:4778"
+const trail = []
+const step = (msg) => {
+  trail.push(msg)
+  console.log(`[smoke] ${msg}`)
+}
+
+const browser = await chromium.launch()
+const page = await browser.newPage()
+page.setDefaultTimeout(30_000)
+
+try {
+  // ── Home ────────────────────────────────────────────────────────────
+  await page.goto(`${BASE}/`, { waitUntil: "domcontentloaded" })
+  step("home loaded")
+
+  // Consent banner (builtin modal is the server default) — accept.
+  const acceptButton = page.getByRole("button", { name: "Accept", exact: true })
+  try {
+    await acceptButton.waitFor({ state: "visible", timeout: 10_000 })
+    await acceptButton.click()
+    step("consent banner accepted")
+  } catch {
+    step("no consent banner rendered (disabled or external mode)")
+  }
+
+  await page.locator('a[href^="/products/"]').first().waitFor()
+  step("home renders product cards")
+
+  // ── PDP (seeded handle) ─────────────────────────────────────────────
+  await page.goto(`${BASE}/products/linen-shirt`, {
+    waitUntil: "domcontentloaded",
+  })
+  await page.getByTestId("product-container").waitFor()
+  step("PDP linen-shirt rendered")
+
+  // Pick the REAL Size option's "M" (the shared dev tenant accretes junk
+  // options; variant match needs exactly the Size choice). Dev-mode
+  // hydration can lag the SSR paint — retry until the selection sticks.
+  const sizeRow = page
+    .locator('div.flex.flex-col:has(> span:text-is("Select Size"))')
+    .first()
+  const mButton = sizeRow.getByRole("button", { name: "M", exact: true })
+  let selected = false
+  for (let i = 0; i < 30 && !selected; i++) {
+    await mButton.click()
+    await page.waitForTimeout(700)
+    selected = ((await mButton.getAttribute("class")) ?? "").includes(
+      "border-primary"
+    )
+  }
+  if (!selected) throw new Error("Size M never became selected")
+  step("selected Size M")
+
+  const addButton = page.getByTestId("add-product-button").first()
+  await addButton.click()
+  step("clicked Add to cart")
+
+  // ── Cart drawer → checkout ──────────────────────────────────────────
+  // The drawer auto-opens only on a rise from a nonzero base (first add
+  // never auto-opens — components.md); open it via the header cart
+  // button once the badge confirms the server-side add landed.
+  await page
+    .getByTestId("nav-cart-link")
+    .locator("span")
+    .filter({ hasText: /^\d+$/ })
+    .waitFor({ timeout: 20_000 })
+  step("header cart badge shows the added item")
+  await page.getByTestId("nav-cart-link").click()
+  const checkoutLink = page.getByRole("link", { name: "Checkout" })
+  await checkoutLink.click()
+  step("cart drawer opened via header cart button")
+  await page.waitForURL("**/checkout")
+  step("navigated to /checkout")
+
+  // ── Address form ────────────────────────────────────────────────────
+  const fill = async (name, value) => {
+    await page.locator(`[name="${name}"]`).fill(value)
+  }
+  await fill("email", "smoke-adoption@example.test")
+  await fill("shipping_address.first_name", "Ivan")
+  await fill("shipping_address.last_name", "Petrov")
+  await fill("shipping_address.address_1", "ul. Vitosha 15")
+  await fill("shipping_address.postal_code", "1000")
+  await fill("shipping_address.city", "Sofia")
+  await fill("shipping_address.phone", "+359888123456")
+  await page.locator('[name="shipping_address.phone"]').blur()
+  step("address form filled (BG address, EUR cart)")
+
+  // ── Shipping method ─────────────────────────────────────────────────
+  await page.getByText("Flat Rate (Bulgaria)", { exact: false }).first().click()
+  step('selected shipping "Flat Rate (Bulgaria)"')
+
+  // ── Payment: manual/offline tab (no Stripe env) ─────────────────────
+  const codTab = page.getByRole("button", { name: "Cash on delivery" })
+  await codTab.waitFor({ state: "visible" })
+  await codTab.click()
+  step("selected manual payment (pp_manual offline tab)")
+
+  // ── Place order ─────────────────────────────────────────────────────
+  const submit = page.getByTestId("submit-order-button")
+  await submit.waitFor({ state: "visible" })
+  // The Buy button enables once the debounced address autosave lands.
+  await page.waitForFunction(
+    () =>
+      !document.querySelector('[data-testid="submit-order-button"]')?.disabled,
+    undefined,
+    { timeout: 20_000 }
+  )
+  await submit.click()
+  step("clicked Place order")
+
+  // ── Confirmation ────────────────────────────────────────────────────
+  await page.waitForURL("**/order/**/confirmed", { timeout: 60_000 })
+  step(`confirmation URL: ${new URL(page.url()).pathname}`)
+
+  const orderNumberText = await page
+    .getByText(/#\d+/)
+    .first()
+    .innerText({ timeout: 30_000 })
+  const displayNumber = orderNumberText.match(/#(\d+)/)?.[1]
+  if (!displayNumber) throw new Error("no order display number rendered")
+  step(`order number rendered: #${displayNumber}`)
+
+  // Totals: the order family renders a Total row with a EUR amount.
+  const totalRow = page
+    .locator("div,li")
+    .filter({ hasText: /^Total/ })
+    .filter({ hasText: "€" })
+    .first()
+  const totalText = (await totalRow.innerText()).replace(/\s+/g, " ").trim()
+  if (!/€\s?\d/.test(totalText)) throw new Error("no EUR total rendered")
+  step(`totals rendered: ${totalText}`)
+
+  console.log("\n[smoke] PASS — completed checkout, order #" + displayNumber)
+  await browser.close()
+  process.exit(0)
+} catch (err) {
+  console.error("\n[smoke] FAIL after steps:\n - " + trail.join("\n - "))
+  console.error(err)
+  try {
+    await page.screenshot({ path: "examples/storefront/smoke-failure.png" })
+    console.error("[smoke] screenshot: examples/storefront/smoke-failure.png")
+  } catch {}
+  await browser.close()
+  process.exit(1)
+}

package/template/app/src/app/checkout/checkout-page-client.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import type { Cart } from "@cartbase/storefront/api/carts"
+import type { StoreShippingOption } from "@cartbase/storefront/api/checkout"
+import type { StorePaymentProvider } from "@cartbase/storefront/api/checkout"
+import type { PublicCodConfig } from "@cartbase/storefront/api/integrations"
+import { CheckoutProvider } from "@cartbase/storefront/checkout/context"
+import { CheckoutClient } from "@cartbase/storefront/checkout/checkout-client"
+import { browserClient } from "@/lib/browser-client"
+
+/** sessionStorage key the confirmation page reads (guests have no order
+ * read endpoint — the completeCart() response is the only order handle,
+ * orders.md). */
+export const LAST_ORDER_STORAGE_KEY = "barter:last-order"
+
+export function CheckoutPageClient({
+  cart,
+  shippingOptions,
+  paymentProviders,
+  codConfig,
+}: {
+  cart: Cart
+  shippingOptions: StoreShippingOption[]
+  paymentProviders: StorePaymentProvider[]
+  codConfig: PublicCodConfig | null
+}) {
+  const router = useRouter()
+
+  return (
+    <CheckoutProvider orderConfirmedPath="/order/{id}/confirmed">
+      <CheckoutClient
+        client={browserClient}
+        cart={cart}
+        customer={null}
+        availableShippingMethods={shippingOptions}
+        availablePaymentMethods={paymentProviders}
+        countryCode="bg"
+        countries={[{ iso_2: "bg", display_name: "Bulgaria" }]}
+        // Per-store rule (the documented paymentMethodFilter seam): this
+        // reference store checks out offline via pp_manual only — without
+        // the filter the hook prefers a tenant-enabled pp_cod for the
+        // offline tab.
+        paymentMethodFilter={(methods) =>
+          methods?.filter((m) => m.id === "pp_manual") ?? null
+        }
+        codConfig={codConfig}
+        onOrderPlaced={(order) => {
+          // Guest order handle = the completeCart() response (orders.md).
+          // Stash it (+ the decorated cart lines for the items list) for
+          // the confirmation page, then navigate.
+          try {
+            sessionStorage.setItem(
+              LAST_ORDER_STORAGE_KEY,
+              JSON.stringify({ order, cartItems: cart.items ?? [] })
+            )
+          } catch {
+            // best-effort — the confirmation page has a fallback state
+          }
+          router.push(`/order/${order.id}/confirmed`)
+        }}
+        onCartChange={() => router.refresh()}
+      />
+    </CheckoutProvider>
+  )
+}

package/template/app/src/app/checkout/page.tsx

@@ -0,0 +1,49 @@
+import { cookies } from "next/headers"
+import { redirect } from "next/navigation"
+import { retrieveCart } from "@cartbase/storefront/api/carts"
+import {
+  listPaymentProviders,
+  listShippingOptions,
+} from "@cartbase/storefront/api/checkout"
+import { getIntegrationsConfig } from "@cartbase/storefront/api/integrations"
+import { CART_COOKIE } from "@/lib/config"
+import { getServerClient } from "@/lib/server-client"
+import { CheckoutPageClient } from "./checkout-page-client"
+
+/**
+ * Checkout (runbook step 8 / checkout.md): list shipping options and
+ * payment providers WITH `cart_id` (server-side rule filtering), fetch the
+ * integrations `cod` block, and hand everything to the orchestrated
+ * client layout. Redirect completed/missing carts server-side
+ * (checkout-client mount rule).
+ */
+export default async function CheckoutPage() {
+  const jar = await cookies()
+  const cartId = jar.get(CART_COOKIE)?.value
+  if (!cartId) redirect("/")
+
+  const client = await getServerClient()
+  const cart = await retrieveCart(client, cartId)
+    .then((res) => res.cart)
+    .catch(() => null)
+  if (!cart || (cart.items ?? []).length === 0) redirect("/")
+  if (cart.completed_at) redirect("/")
+
+  const [shippingOptions, paymentProviders, integrations] = await Promise.all([
+    listShippingOptions(client, { cart_id: cart.id }),
+    listPaymentProviders(client, {
+      cart_id: cart.id,
+      region_id: cart.region_id ?? undefined,
+    }),
+    getIntegrationsConfig(client),
+  ])
+
+  return (
+    <CheckoutPageClient
+      cart={cart}
+      shippingOptions={shippingOptions.shipping_options}
+      paymentProviders={paymentProviders.payment_providers}
+      codConfig={integrations.cod}
+    />
+  )
+}

package/template/app/src/app/globals.css

@@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * Storefront theme tokens — shadcn-standard names, raw oklch channels
+ * (the @cartbase/storefront tailwind-preset wraps them in oklch(...)).
+ * Neutral light theme for the reference app.
+ */
+:root {
+  --background: 1 0 0;
+  --foreground: 0.145 0 0;
+  --card: 1 0 0;
+  --card-foreground: 0.145 0 0;
+  --popover: 1 0 0;
+  --popover-foreground: 0.145 0 0;
+  --primary: 0.205 0 0;
+  --primary-foreground: 0.985 0 0;
+  --secondary: 0.97 0 0;
+  --secondary-foreground: 0.205 0 0;
+  --muted: 0.97 0 0;
+  --muted-foreground: 0.556 0 0;
+  --accent: 0.97 0 0;
+  --accent-foreground: 0.205 0 0;
+  --destructive: 0.577 0.245 27.325;
+  --destructive-foreground: 0.985 0 0;
+  --border: 0.922 0 0;
+  --input: 0.922 0 0;
+  --ring: 0.708 0 0;
+  --success: 0.648 0.15 160;
+  --success-foreground: 0.985 0 0;
+  --warning: 0.828 0.189 84.429;
+  --warning-foreground: 0.279 0.077 45.635;
+  --radius: 0.5rem;
+  --font-display: ui-serif;
+  --font-body: system-ui;
+  --font-mono: ui-monospace;
+}
+
+body {
+  @apply bg-background text-foreground font-body;
+}

package/template/app/src/app/layout.tsx

@@ -0,0 +1,105 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import { cookies } from "next/headers"
+import { retrieveCart, type Cart } from "@cartbase/storefront/api/carts"
+import { getConsent } from "@cartbase/storefront/api/consent"
+import { getMenu, type Menu } from "@cartbase/storefront/api/menus"
+import { ConsentInit } from "@cartbase/storefront/tracking/consent-init"
+import { CartButtonClient } from "@cartbase/storefront/common/cart-button-client"
+import { CART_COOKIE } from "@/lib/config"
+import { getServerClient } from "@/lib/server-client"
+import { Providers } from "./providers"
+import "./globals.css"
+
+export const metadata: Metadata = {
+  title: "Barter Example Store",
+  description: "Reference storefront built on @cartbase/storefront",
+}
+
+/**
+ * Runbook steps 3–4: bootstrap store config at layout level, then mount
+ * order inside <body>: ConsentInit FIRST (static, synchronous), then the
+ * consent-gated UI, then navigation. A store with no menus 404s every
+ * handle — render no nav, never crash (menus.md).
+ */
+async function fetchMenu(handle: string): Promise<Menu | null> {
+  const client = await getServerClient()
+  try {
+    const { menu } = await getMenu(client, handle)
+    return menu
+  } catch {
+    return null // unknown/deleted handle (404) → graceful "no nav"
+  }
+}
+
+function MenuNav({ menu }: { menu: Menu | null }) {
+  if (!menu || menu.items.length === 0) return null
+  return (
+    <nav className="flex items-center gap-4">
+      {menu.items.map((item) => (
+        <Link
+          key={`${item.title}-${item.url}`}
+          href={item.url}
+          className="text-sm text-muted-foreground hover:text-foreground"
+        >
+          {item.title}
+        </Link>
+      ))}
+    </nav>
+  )
+}
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const client = await getServerClient()
+  const jar = await cookies()
+  const cartId = jar.get(CART_COOKIE)?.value ?? null
+
+  const [consentRes, mainMenu, footerMenu, cart] = await Promise.all([
+    getConsent(client),
+    fetchMenu("main-menu"),
+    fetchMenu("footer"),
+    cartId
+      ? retrieveCart(client, cartId)
+          .then((res): Cart | null => res.cart)
+          .catch(() => null) // stale cookie → empty cart state
+      : Promise.resolve(null),
+  ])
+
+  return (
+    <html lang="en">
+      <body>
+        <ConsentInit />
+        <Providers cart={cart} consent={consentRes.consent}>
+          <header className="border-b border-border">
+            <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between gap-6">
+              <Link href="/" className="font-semibold text-lg">
+                Barter Example Store
+              </Link>
+              <div className="flex items-center gap-6">
+                <MenuNav menu={mainMenu} />
+                <Link
+                  href="/search"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Search
+                </Link>
+                <CartButtonClient cart={cart} />
+              </div>
+            </div>
+          </header>
+          <main>{children}</main>
+          <footer className="border-t border-border mt-12">
+            <div className="max-w-7xl mx-auto px-4 py-8 text-sm text-muted-foreground flex items-center justify-between">
+              <span>Barter Example Store</span>
+              <MenuNav menu={footerMenu} />
+            </div>
+          </footer>
+        </Providers>
+      </body>
+    </html>
+  )
+}