@forgecart/cli 2.202608121449.0 → 2.202608200713.0

package/templates/storefront/src/app/products/page.tsx

@@ -1,27 +1,70 @@
+import { connection } from 'next/server';
+import { Suspense } from 'react';
+
 import { ProductCard } from '../../components/ProductCard';
 import { getProducts } from '../../lib/forgecart';
 
-export const dynamic = 'force-dynamic';
+// PROGRESSIVE PRE-RENDERING: static shell; the data sections below are
+// per-request holes streamed inside their Suspense boundaries
+// (cacheComponents — see next.config.js).
+
+/**
+ * Catalog — the browse grid. The header carries the count as orientation
+ * (Blueprint listing guidance: state scope up front); cards do the visual
+ * lifting, the grid stays quiet.
+ */
+export default function ProductsPage() {
+  return (
+    <div className="space-y-8">
+      <Suspense fallback={<CatalogSkeleton />}>
+        <Catalog />
+      </Suspense>
+    </div>
+  );
+}
 
-export default async function ProductsPage() {
+async function Catalog() {
+  // Request-time hole (cacheComponents): the build keeps the fallback shell.
+  await connection();
   const { items, totalItems } = await getProducts({ take: 24 });
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-baseline justify-between">
-        <h1 className="text-2xl font-bold tracking-tight text-gray-900">Products</h1>
-        <span className="text-sm text-gray-500">{totalItems} items</span>
-      </div>
+    <>
+      <header className="flex flex-wrap items-baseline justify-between gap-3 border-b border-base-300 pb-6">
+        <h1 className="text-3xl font-bold tracking-tight">All products</h1>
+        <span className="text-sm text-base-content/60">
+          {totalItems} {totalItems === 1 ? 'item' : 'items'}
+        </span>
+      </header>
 
       {items.length === 0 ? (
-        <p className="text-gray-500">No products yet. Add some in your dashboard.</p>
+        <p className="text-base-content/60">
+          No products yet — add your first product in the dashboard and it appears here.
+        </p>
       ) : (
-        <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-6 lg:grid-cols-4">
           {items.map((product) => (
             <ProductCard key={product.id} product={product} />
           ))}
         </div>
       )}
+    </>
+  );
+}
+
+function CatalogSkeleton() {
+  return (
+    <div aria-busy="true">
+      <header className="flex items-baseline justify-between gap-3 border-b border-base-300 pb-6">
+        <h1 className="text-3xl font-bold tracking-tight">All products</h1>
+        <div className="skeleton h-4 w-16"></div>
+      </header>
+      <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-6 lg:grid-cols-4">
+        <div className="skeleton aspect-square w-full"></div>
+        <div className="skeleton aspect-square w-full"></div>
+        <div className="skeleton aspect-square w-full"></div>
+        <div className="skeleton aspect-square w-full"></div>
+      </div>
     </div>
   );
 }

package/templates/storefront/src/components/CartView.tsx

@@ -1,18 +1,16 @@
 'use client';
 
 import Link from 'next/link';
+import { useState } from 'react';
 
 import { useCart } from '../lib/cart-context';
-import {
-  formatPrice,
-  getPlanCadenceLabel,
-  getPlanSavingsLabel,
-  type SellingPlan,
-  type SellingPlanGroup,
-} from '../lib/forgecart';
+import type { SellingPlan, SellingPlanGroup } from '../lib/forgecart';
+import { formatPrice, getPlanCadenceLabel, getPlanSavingsLabel } from '../lib/format';
 
 /**
- * The interactive cart, rendered off the live order from `useCart()`.
+ * The interactive cart, rendered off the live order from `useCart()` —
+ * Blueprint `pages/checkout-flow` cart shape: line items on the left,
+ * a sticky order-summary rail (coupon, totals, checkout) on the right.
  *
  * `channelGroups` are the channel-wide subscription selling plans, fetched
  * server-side by the cart route and passed in (the shop client is server-only,
@@ -23,19 +21,45 @@ import {
  * page) get a small "Subscription" label.
  */
 export function CartView({ channelGroups }: { channelGroups: SellingPlanGroup[] }) {
-  const { cart, itemCount, subtotal, setQuantity, remove, setSellingPlan, pending } = useCart();
+  const {
+    cart,
+    itemCount,
+    subtotal,
+    hydrated,
+    setQuantity,
+    remove,
+    setSellingPlan,
+    applyCoupon,
+    removeCoupon,
+    pending,
+    error,
+    clearError,
+  } = useCart();
+  const [couponInput, setCouponInput] = useState('');
   const lines = cart?.lines ?? [];
 
+  // The cart hydrates over the shopper's websocket after mount (PPR shell) —
+  // a skeleton, never a false "empty cart" flash.
+  if (!hydrated) {
+    return (
+      <div className="space-y-8" aria-busy="true" aria-label="Loading your cart">
+        <h1 className="text-3xl font-bold tracking-tight">Your cart</h1>
+        <div className="grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_360px]">
+          <div className="skeleton h-64 w-full"></div>
+          <div className="skeleton h-80 w-full"></div>
+        </div>
+      </div>
+    );
+  }
+
   if (itemCount === 0) {
     return (
-      <div className="space-y-4">
-        <h1 className="text-2xl font-bold tracking-tight text-gray-900">Your cart</h1>
-        <p className="text-gray-500">Your cart is empty.</p>
-        <Link
-          href="/products"
-          data-fc-track="cart-browse-products"
-          className="inline-block rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-700"
-        >
+      <div className="mx-auto max-w-md space-y-4 py-16 text-center">
+        <h1 className="text-3xl font-bold tracking-tight">Your cart</h1>
+        <p className="text-base-content/60">
+          Your cart is empty — it starts the moment you add your first item.
+        </p>
+        <Link href="/products" data-fc-track="cart-browse-products" className="btn btn-primary">
           Browse products
         </Link>
       </div>
@@ -43,120 +67,223 @@ export function CartView({ channelGroups }: { channelGroups: SellingPlanGroup[]
   }
 
   // Channel-wide plans (enabled only), flattened across the channel groups.
-  const channelPlans: SellingPlan[] = channelGroups.flatMap((g) => g.plans).filter((p) => p.enabled);
+  const channelPlans: SellingPlan[] = channelGroups
+    .flatMap((g) => g.plans)
+    .filter((p) => p.enabled);
   const activePlanId = cart?.sellingPlanId ?? null;
 
   return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-bold tracking-tight text-gray-900">Your cart</h1>
-
-      <ul className="divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white">
-        {lines.map((line) => (
-          <li key={line.id} className="flex items-center gap-4 p-4">
-            <div className="h-16 w-16 shrink-0 overflow-hidden rounded bg-gray-100">
-              {line.featuredAsset?.preview ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img
-                  src={line.featuredAsset.preview}
-                  alt={line.productVariant.name}
-                  className="h-full w-full object-cover"
-                />
-              ) : null}
-            </div>
+    <div className="space-y-8">
+      <h1 className="text-3xl font-bold tracking-tight">Your cart</h1>
 
-            <div className="min-w-0 flex-1">
-              <p className="truncate font-medium text-gray-900">{line.productVariant.name}</p>
-              <p className="text-sm text-gray-500">{formatPrice(line.unitPriceWithTax)} each</p>
-              {line.sellingPlanId && (
-                <span className="mt-1 inline-block rounded bg-gray-900 px-1.5 py-0.5 text-xs font-medium text-white">
-                  Subscription
-                </span>
-              )}
+      <div className="grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_360px]">
+        <div className="space-y-6">
+          <ul className="list rounded-box border border-base-300 bg-base-100">
+            {lines.map((line) => (
+              <li key={line.id} className="list-row items-center">
+                <div className="size-16 overflow-hidden rounded-box bg-base-200">
+                  {line.featuredAsset?.preview ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={line.featuredAsset.preview}
+                      alt={line.productVariant.name}
+                      className="h-full w-full object-cover"
+                    />
+                  ) : null}
+                </div>
+
+                <div className="min-w-0">
+                  <p className="truncate font-medium">{line.productVariant.name}</p>
+                  <p className="text-sm text-base-content/60">
+                    {formatPrice(line.unitPriceWithTax)} each
+                  </p>
+                  {line.sellingPlanId && (
+                    <span className="badge badge-secondary badge-sm mt-1 font-medium">
+                      Subscription
+                    </span>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <label className="sr-only" htmlFor={`qty-${line.id}`}>
+                    Quantity
+                  </label>
+                  <input
+                    id={`qty-${line.id}`}
+                    type="number"
+                    min={0}
+                    value={line.quantity}
+                    disabled={pending}
+                    onChange={(e) => {
+                      // 0 is a real value — updateLine removes the line for it.
+                      const parsed = Number.parseInt(e.target.value, 10);
+                      setQuantity(line.id, Number.isNaN(parsed) ? line.quantity : parsed);
+                    }}
+                    className="input input-sm w-16 disabled:opacity-50"
+                  />
+                  <div className="w-20 text-right font-medium tabular-nums">
+                    {formatPrice(line.linePriceWithTax)}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => remove(line.id)}
+                    disabled={pending}
+                    className="btn btn-ghost btn-xs text-base-content/50 hover:text-error"
+                    aria-label={`Remove ${line.productVariant.name}`}
+                  >
+                    Remove
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+
+          {channelPlans.length > 0 && (
+            <div className="card card-border bg-base-100">
+              <div className="card-body gap-3 p-5">
+                <h2 className="card-title text-base">Subscribe to your whole order</h2>
+                <div className="flex flex-col gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setSellingPlan(null)}
+                    disabled={pending}
+                    aria-pressed={activePlanId === null}
+                    className={`rounded-field border px-3 py-2 text-left text-sm transition-colors disabled:opacity-50 ${
+                      activePlanId === null
+                        ? 'border-primary ring-1 ring-primary'
+                        : 'border-base-300 hover:border-primary'
+                    }`}
+                  >
+                    <span className="font-medium">No, one-time</span>
+                  </button>
+                  {channelPlans.map((plan) => {
+                    const savings = getPlanSavingsLabel(plan);
+                    const hint = [
+                      savings,
+                      plan.trialDays > 0 ? `${plan.trialDays}-day free trial` : null,
+                    ]
+                      .filter(Boolean)
+                      .join(' · ');
+                    const active = activePlanId === plan.id;
+                    return (
+                      <button
+                        key={plan.id}
+                        type="button"
+                        onClick={() => setSellingPlan(plan.id)}
+                        disabled={pending}
+                        data-fc-track="cart-subscribe-order"
+                        aria-pressed={active}
+                        className={`rounded-field border px-3 py-2 text-left text-sm transition-colors disabled:opacity-50 ${
+                          active
+                            ? 'border-primary ring-1 ring-primary'
+                            : 'border-base-300 hover:border-primary'
+                        }`}
+                      >
+                        <span className="block font-medium">
+                          Subscribe — {getPlanCadenceLabel(plan)}
+                        </span>
+                        {hint && <span className="block text-xs text-base-content/60">{hint}</span>}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
             </div>
+          )}
+        </div>
+
+        <aside
+          className="card card-border bg-base-100 lg:sticky lg:top-24"
+          aria-label="Order summary"
+        >
+          <div className="card-body gap-4 p-5">
+            <h2 className="card-title text-base">Order summary</h2>
 
-            <div className="flex items-center gap-2">
-              <label className="sr-only" htmlFor={`qty-${line.id}`}>
-                Quantity
+            <form
+              className="flex gap-2"
+              onSubmit={(e) => {
+                e.preventDefault();
+                const code = couponInput.trim();
+                if (!code) return;
+                applyCoupon(code);
+                setCouponInput('');
+              }}
+            >
+              <label className="sr-only" htmlFor="coupon-code">
+                Coupon code
               </label>
               <input
-                id={`qty-${line.id}`}
-                type="number"
-                min={1}
-                value={line.quantity}
+                id="coupon-code"
+                type="text"
+                value={couponInput}
+                placeholder="Coupon code"
                 disabled={pending}
-                onChange={(e) => setQuantity(line.id, Number.parseInt(e.target.value, 10) || 1)}
-                className="w-16 rounded border border-gray-300 px-2 py-1 text-sm disabled:opacity-50"
+                onChange={(e) => setCouponInput(e.target.value)}
+                className="input input-sm flex-1"
               />
-            </div>
-
-            <div className="w-24 text-right font-medium text-gray-900">
-              {formatPrice(line.linePriceWithTax)}
-            </div>
+              <button
+                type="submit"
+                className="btn btn-sm"
+                disabled={pending}
+                data-fc-track="cart-apply-coupon"
+              >
+                Apply
+              </button>
+            </form>
 
-            <button
-              type="button"
-              onClick={() => remove(line.id)}
-              disabled={pending}
-              className="text-sm text-gray-400 hover:text-red-600 disabled:opacity-50"
-              aria-label={`Remove ${line.productVariant.name}`}
-            >
-              Remove
-            </button>
-          </li>
-        ))}
-      </ul>
-
-      {channelPlans.length > 0 && (
-        <div className="space-y-2 rounded-lg border border-gray-200 bg-white p-4">
-          <h2 className="text-sm font-medium text-gray-700">Subscribe to your whole order</h2>
-          <div className="flex flex-col gap-2">
-            <button
-              type="button"
-              onClick={() => setSellingPlan(null)}
-              disabled={pending}
-              aria-pressed={activePlanId === null}
-              className={`rounded-md border px-3 py-2 text-left text-sm transition disabled:opacity-50 ${
-                activePlanId === null
-                  ? 'border-gray-900 ring-1 ring-gray-900'
-                  : 'border-gray-300 hover:border-gray-900'
-              }`}
-            >
-              <span className="font-medium text-gray-900">No, one-time</span>
-            </button>
-            {channelPlans.map((plan) => {
-              const savings = getPlanSavingsLabel(plan);
-              const hint = [savings, plan.trialDays > 0 ? `${plan.trialDays}-day free trial` : null]
-                .filter(Boolean)
-                .join(' · ');
-              const active = activePlanId === plan.id;
-              return (
-                <button
-                  key={plan.id}
-                  type="button"
-                  onClick={() => setSellingPlan(plan.id)}
-                  disabled={pending}
-                  data-fc-track="cart-subscribe-order"
-                  aria-pressed={active}
-                  className={`rounded-md border px-3 py-2 text-left text-sm transition disabled:opacity-50 ${
-                    active
-                      ? 'border-gray-900 ring-1 ring-gray-900'
-                      : 'border-gray-300 hover:border-gray-900'
-                  }`}
-                >
-                  <span className="block font-medium text-gray-900">
-                    Subscribe — {getPlanCadenceLabel(plan)}
+            {(cart?.couponCodes.length ?? 0) > 0 && (
+              <div className="flex flex-wrap gap-2">
+                {cart!.couponCodes.map((code) => (
+                  <span key={code} className="badge badge-secondary gap-1">
+                    {code}
+                    <button
+                      type="button"
+                      onClick={() => removeCoupon(code)}
+                      disabled={pending}
+                      aria-label={`Remove coupon ${code}`}
+                    >
+                      ✕
+                    </button>
                   </span>
-                  {hint && <span className="block text-xs text-gray-500">{hint}</span>}
+                ))}
+              </div>
+            )}
+
+            {error && (
+              <div role="alert" className="alert alert-error text-sm">
+                <span>{error.message ?? error.code}</span>
+                <button type="button" className="btn btn-ghost btn-xs" onClick={clearError}>
+                  Dismiss
                 </button>
-              );
-            })}
-          </div>
-        </div>
-      )}
+              </div>
+            )}
 
-      <div className="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4">
-        <span className="text-sm text-gray-600">Subtotal ({itemCount} items)</span>
-        <span className="text-lg font-semibold text-gray-900">{formatPrice(subtotal)}</span>
+            <div className="space-y-1 border-t border-base-300 pt-3">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-base-content/60">Subtotal ({itemCount} items)</span>
+                <span className="font-medium tabular-nums">{formatPrice(subtotal)}</span>
+              </div>
+              {(cart?.discounts ?? []).map((discount) => (
+                <div key={discount.description} className="flex items-center justify-between">
+                  <span className="text-sm text-base-content/60">{discount.description}</span>
+                  <span className="text-sm tabular-nums">
+                    −{formatPrice(Math.abs(discount.amountWithTax))}
+                  </span>
+                </div>
+              ))}
+              <div className="flex items-center justify-between pt-1">
+                <span className="text-sm text-base-content/60">Total</span>
+                <span className="text-lg font-semibold tabular-nums">
+                  {formatPrice(cart?.totalWithTax ?? subtotal)}
+                </span>
+              </div>
+            </div>
+
+            <Link href="/checkout" data-fc-track="cart-checkout" className="btn btn-primary w-full">
+              Checkout
+            </Link>
+          </div>
+        </aside>
       </div>
     </div>
   );