create-cartbase 0.0.1 → 0.1.0

package/template/app/src/app/order/[id]/confirmed/page.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import type { CompletedOrder, CartLineItem } from "@cartbase/storefront/api/carts"
+import {
+  OrderCompletedTemplate,
+} from "@cartbase/storefront/order/order-completed-template"
+import {
+  displayItemFromCartLine,
+} from "@cartbase/storefront/order/order-item"
+import {
+  orderTotalsFromSummary,
+} from "@cartbase/storefront/order/order-totals"
+import { LAST_ORDER_STORAGE_KEY } from "../../../checkout/checkout-page-client"
+
+/**
+ * Order confirmation (runbook step 8.6 + orders.md): guests have NO
+ * anonymous order read — the `completeCart()` response is the only order
+ * handle, so the checkout page stashes it in sessionStorage and this page
+ * renders it through the order family. Totals come from the order's
+ * summary snapshot (`orderTotalsFromSummary`); items keep the decorated
+ * cart lines' server-computed totals (`displayItemFromCartLine`).
+ */
+type Stash = { order: CompletedOrder; cartItems: CartLineItem[] }
+
+export default function OrderConfirmedPage() {
+  const [stash, setStash] = useState<Stash | null | "missing">(null)
+
+  useEffect(() => {
+    try {
+      const raw = sessionStorage.getItem(LAST_ORDER_STORAGE_KEY)
+      setStash(raw ? (JSON.parse(raw) as Stash) : "missing")
+    } catch {
+      setStash("missing")
+    }
+  }, [])
+
+  if (stash === null) return null // first paint before sessionStorage read
+
+  if (stash === "missing") {
+    return (
+      <div className="max-w-xl mx-auto px-4 py-16 text-center">
+        <h1 className="text-xl font-semibold mb-2">Order placed</h1>
+        <p className="text-muted-foreground mb-6">
+          Your order was placed successfully. A confirmation email is on its
+          way.
+        </p>
+        <Link href="/" className="underline">
+          Continue shopping
+        </Link>
+      </div>
+    )
+  }
+
+  const { order, cartItems } = stash
+  const totals = orderTotalsFromSummary(order.summary) ?? {
+    total: null,
+  }
+  // The completeCart() order carries FLATTENED items (checkout.md), not the
+  // order-detail pivot shape the template's default converter expects —
+  // pass the normalized cart-line items instead and drop `order.items`.
+  const orderForTemplate = { ...order, items: undefined }
+
+  return (
+    <OrderCompletedTemplate
+      order={orderForTemplate}
+      totals={totals}
+      items={cartItems.map(displayItemFromCartLine)}
+      // This reference store enables exactly one provider (pp_manual); a
+      // multi-provider store should stash the chosen provider id from its
+      // checkout state alongside the order.
+      paymentProviderId={"pp_manual"}
+      storeHref="/"
+    />
+  )
+}

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

@@ -0,0 +1,25 @@
+import { StoreTemplate } from "@cartbase/storefront/store/store-template"
+import type { SortOptions } from "@cartbase/storefront/lib/sort-products"
+import { PRICING_CONTEXT } from "@/lib/config"
+import { getServerClient } from "@/lib/server-client"
+
+/**
+ * Home = the all-products listing (runbook step 5: always pass a pricing
+ * context or prices come back undecorated).
+ */
+export default async function HomePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ sortBy?: string; page?: string }>
+}) {
+  const { sortBy, page } = await searchParams
+  const client = await getServerClient()
+  return (
+    <StoreTemplate
+      client={client}
+      sortBy={sortBy as SortOptions | undefined}
+      page={page}
+      pricingContext={PRICING_CONTEXT}
+    />
+  )
+}

package/template/app/src/app/products/[handle]/page.tsx

@@ -0,0 +1,58 @@
+import { notFound } from "next/navigation"
+import { retrieveProduct } from "@cartbase/storefront/api/products"
+import { StoreApiError } from "@cartbase/storefront/api/types"
+import { ProductTemplate } from "@cartbase/storefront/products/product-template"
+import { addToCartAction } from "@/lib/cart-actions"
+import { PRICING_CONTEXT } from "@/lib/config"
+import { getServerClient } from "@/lib/server-client"
+
+/**
+ * PDP (runbook step 5): fetch by handle WITH the pricing context, render
+ * the full product template. `addToCart` is the app-owned seam — a server
+ * action that owns the cart cookie (products family contract).
+ */
+export default async function ProductPage({
+  params,
+}: {
+  params: Promise<{ handle: string }>
+}) {
+  const { handle } = await params
+  const client = await getServerClient()
+
+  let product
+  try {
+    const res = await retrieveProduct(client, handle, PRICING_CONTEXT)
+    product = res.product
+  } catch (e) {
+    if (e instanceof StoreApiError && e.status === 404) notFound()
+    throw e
+  }
+
+  return (
+    <ProductTemplate
+      client={client}
+      product={product}
+      pricingContext={PRICING_CONTEXT}
+      addToCart={addToCartAction}
+    />
+  )
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ handle: string }>
+}) {
+  const { handle } = await params
+  const client = await getServerClient()
+  try {
+    const { product } = await retrieveProduct(client, handle)
+    // SEO fields with title/description fallbacks (runbook step 5).
+    return {
+      title: product.seo_title ?? product.title,
+      description: product.seo_description ?? product.description ?? undefined,
+    }
+  } catch {
+    return {}
+  }
+}

package/template/app/src/app/providers.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import type { Cart } from "@cartbase/storefront/api/carts"
+import { CartDrawerProvider } from "@cartbase/storefront/cart-drawer/context"
+import { CartDrawerTemplate } from "@cartbase/storefront/cart-drawer/template"
+import { ConsentBanner } from "@cartbase/storefront/tracking/consent-banner"
+import {
+  pickConsentCopy,
+  shouldRenderBanner,
+  type ConsentSettings,
+} from "@cartbase/storefront/tracking/consent"
+import { CART_COOKIE, CART_COOKIE_MAX_AGE } from "@/lib/config"
+import { browserClient } from "@/lib/browser-client"
+
+/**
+ * Client-side shell: ONE CartDrawerProvider per app (cart-drawer family
+ * mount rule) + the consent banner (consent.md: render the builtin banner
+ * only when `enabled && mode === "builtin"`; ConsentInit stays in the
+ * server layout as the first child of <body>).
+ */
+export function Providers({
+  cart,
+  consent,
+  children,
+}: {
+  cart: Cart | null
+  consent: ConsentSettings
+  children: React.ReactNode
+}) {
+  const copy = pickConsentCopy(consent.copy, "en")
+  return (
+    <CartDrawerProvider
+      cart={cart}
+      client={browserClient}
+      onCartChange={(next) => {
+        // Persist the cart id (carts.md: the app owns the cart cookie).
+        document.cookie = `${CART_COOKIE}=${encodeURIComponent(
+          next.id
+        )};path=/;max-age=${CART_COOKIE_MAX_AGE};samesite=lax`
+      }}
+    >
+      {children}
+      <CartDrawerTemplate />
+      {shouldRenderBanner(consent) && copy && (
+        <ConsentBanner
+          copy={copy}
+          layout={consent.layout}
+          privacyHref={consent.privacy_href}
+          rejectOnFirstLayer={consent.reject_on_first_layer}
+        />
+      )}
+    </CartDrawerProvider>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { SearchTemplate } from "@cartbase/storefront/store/search-template"
+import { PRICING_CONTEXT } from "@/lib/config"
+import { getServerClient } from "@/lib/server-client"
+
+/** Search page (runbook step 5) — fully URL-state driven search-template. */
+export default async function SearchPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
+  const params = await searchParams
+  const client = await getServerClient()
+  return (
+    <SearchTemplate
+      client={client}
+      searchParams={params}
+      pricingContext={PRICING_CONTEXT}
+    />
+  )
+}

package/template/app/src/lib/browser-client.ts

@@ -0,0 +1,35 @@
+"use client"
+
+import { StorefrontClient } from "@cartbase/storefront/api/http"
+import {
+  BARTER_CLIENT_ID,
+  BARTER_PUBLISHABLE_KEY,
+  BARTER_URL,
+  LOCALE_COOKIE,
+} from "./config"
+
+function readCookie(name: string): string | null {
+  if (typeof document === "undefined") return null
+  const match = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith(`${name}=`))
+  return match ? decodeURIComponent(match.slice(name.length + 1)) : null
+}
+
+/**
+ * Browser-scope StorefrontClient (runbook step 2): constructed once per
+ * app. Guest-only reference app — no auth token store.
+ *
+ * baseUrl is the APP origin, not the API origin: the store API ships no
+ * CORS headers, so browser calls ride the same-origin `/api/store/*`
+ * rewrite (next.config.ts). During SSR of client components no fetches
+ * run — the API origin stands in only to satisfy the constructor.
+ */
+export const browserClient = new StorefrontClient({
+  baseUrl:
+    typeof window !== "undefined" ? window.location.origin : BARTER_URL,
+  clientId: BARTER_CLIENT_ID,
+  publishableKey: BARTER_PUBLISHABLE_KEY,
+  getAuthToken: () => null,
+  getLocale: () => readCookie(LOCALE_COOKIE),
+})

package/template/app/src/lib/cart-actions.ts

@@ -0,0 +1,43 @@
+"use server"
+
+import { revalidatePath } from "next/cache"
+import { cookies } from "next/headers"
+import { addLineItem, createCart } from "@cartbase/storefront/api/carts"
+import { CART_COOKIE, CART_COOKIE_MAX_AGE } from "./config"
+import { getServerClient } from "./server-client"
+
+/**
+ * PDP add-to-cart server action (carts.md: create the cart lazily on the
+ * first add — region falls back to the store default; persist `cart.id`
+ * in a cookie). Passed into `ProductTemplate`'s `addToCart` seam.
+ */
+export async function addToCartAction(input: {
+  variantId: string
+  quantity: number
+}): Promise<void> {
+  const client = await getServerClient()
+  const jar = await cookies()
+  const cartId = jar.get(CART_COOKIE)?.value
+
+  if (cartId) {
+    await addLineItem(client, cartId, {
+      variant_id: input.variantId,
+      quantity: input.quantity,
+    })
+  } else {
+    const { cart } = await createCart(client, {
+      currency_code: "eur",
+      items: [{ variant_id: input.variantId, quantity: input.quantity }],
+    })
+    jar.set(CART_COOKIE, cart.id, {
+      path: "/",
+      sameSite: "lax",
+      httpOnly: false, // the browser-side drawer persists the same cookie
+      maxAge: CART_COOKIE_MAX_AGE,
+    })
+  }
+
+  // Layout refetches the cart snapshot → CartDrawerProvider sees the new
+  // product-line count and auto-opens the drawer.
+  revalidatePath("/", "layout")
+}

package/template/app/src/lib/config.ts

@@ -0,0 +1,16 @@
+/** Shared storefront configuration (BUILD-A-STOREFRONT.md — inputs table). */
+
+export const BARTER_URL = process.env.NEXT_PUBLIC_BARTER_URL ?? ""
+export const BARTER_CLIENT_ID = process.env.NEXT_PUBLIC_BARTER_CLIENT_ID ?? ""
+export const BARTER_PUBLISHABLE_KEY =
+  process.env.NEXT_PUBLIC_BARTER_PUBLISHABLE_KEY || undefined
+
+/** Cart-id cookie — owned by the app (the SDK never persists the cart). */
+export const CART_COOKIE = "_barter_cart_id"
+export const CART_COOKIE_MAX_AGE = 60 * 60 * 24 * 30 // 30 days
+
+/** Locale cookie read by the clients' `getLocale`. */
+export const LOCALE_COOKIE = "_barter_locale"
+
+/** Pricing context for every catalog surface (runbook step 5). EUR only. */
+export const PRICING_CONTEXT = { currency_code: "eur" } as const

package/template/app/src/lib/server-client.ts

@@ -0,0 +1,25 @@
+import { cookies } from "next/headers"
+import { StorefrontClient } from "@cartbase/storefront/api/http"
+import {
+  BARTER_CLIENT_ID,
+  BARTER_PUBLISHABLE_KEY,
+  BARTER_URL,
+  LOCALE_COOKIE,
+} from "./config"
+
+/**
+ * Server-scope StorefrontClient (runbook step 2): construct per request;
+ * `getLocale` reads the locale cookie. No customer accounts in this
+ * reference app, so `getAuthToken` always answers null (guest).
+ */
+export async function getServerClient(): Promise<StorefrontClient> {
+  const jar = await cookies()
+  const locale = jar.get(LOCALE_COOKIE)?.value ?? null
+  return new StorefrontClient({
+    baseUrl: BARTER_URL,
+    clientId: BARTER_CLIENT_ID,
+    publishableKey: BARTER_PUBLISHABLE_KEY,
+    getAuthToken: () => null,
+    getLocale: () => locale,
+  })
+}

package/template/app/tailwind.config.cjs

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [require("@cartbase/storefront/tailwind-preset")],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    // The component library ships source — scan it so its classes exist.
+    "../../packages/storefront/src/**/*.{ts,tsx}",
+  ],
+}

package/template/app/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}