@forgecart/cli 2.202608110054.0 → 2.202608160103.0

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

@@ -1,38 +1,50 @@
 import Link from 'next/link';
 
-import { formatPrice, getStartingPrice, type Product } from '../lib/forgecart';
+import type { Product } from '../lib/forgecart';
+import { formatPrice, getStartingPrice } from '../lib/format';
 
-/** A product tile linking to its detail page. Used by the home and grid pages. */
-export function ProductCard({ product }: { product: Product }) {
+/**
+ * A product tile linking to its detail page — canonical daisyUI card
+ * (figure + card-body + card-title). Used by the home and grid pages;
+ * `emphasis` renders the home grid's large lead tile with a bigger title.
+ */
+export function ProductCard({
+  product,
+  emphasis = false,
+}: {
+  product: Product;
+  emphasis?: boolean;
+}) {
   const startingPrice = getStartingPrice(product);
 
   return (
     <Link
       href={`/products/${product.slug}`}
       data-fc-track="product-card"
-      className="group flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white transition hover:shadow-md"
+      className="card card-border group h-full bg-base-100 transition-shadow hover:shadow-md"
     >
-      <div className="aspect-square overflow-hidden bg-gray-100">
+      <figure className="aspect-square bg-base-200">
         {product.featuredAsset ? (
           // Plain <img> keeps the template dependency-free of next/image config.
           // eslint-disable-next-line @next/next/no-img-element
           <img
             src={product.featuredAsset.preview}
             alt={product.name}
-            className="h-full w-full object-cover transition group-hover:scale-105"
+            loading="lazy"
+            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
           />
         ) : (
-          <div className="flex h-full w-full items-center justify-center text-sm text-gray-400">
+          <div className="flex h-full w-full items-center justify-center text-sm text-base-content/40">
             No image
           </div>
         )}
-      </div>
-      <div className="flex flex-1 flex-col gap-1 p-4">
-        <h3 className="font-medium text-gray-900">{product.name}</h3>
+      </figure>
+      <div className="card-body gap-1 p-4">
+        <h3 className={`card-title font-medium ${emphasis ? 'text-lg' : 'text-base'}`}>
+          {product.name}
+        </h3>
         {startingPrice !== null && (
-          <p className="text-sm text-gray-600">
-            From {formatPrice(startingPrice)}
-          </p>
+          <p className="text-sm text-base-content/60">From {formatPrice(startingPrice)}</p>
         )}
       </div>
     </Link>

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

@@ -3,16 +3,13 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { useCart } from '../lib/cart-context';
+import type { Product, ProductVariant, SellingPlan, SellingPlanGroup } from '../lib/forgecart';
 import {
   formatPrice,
   getPlanCadenceLabel,
   getPlanPreviewPrice,
   getPlanSavingsLabel,
-  type Product,
-  type ProductVariant,
-  type SellingPlan,
-  type SellingPlanGroup,
-} from '../lib/forgecart';
+} from '../lib/format';
 
 /**
  * Variant picker + purchase-options + add-to-cart for the product detail page.
@@ -127,14 +124,14 @@ export function ProductPurchase({
   return (
     <div className="space-y-4">
       {variant && previewPrice !== null ? (
-        <p className="text-xl font-semibold text-gray-900">{formatPrice(previewPrice)}</p>
+        <p className="text-xl font-semibold text-base-content">{formatPrice(previewPrice)}</p>
       ) : (
-        <p className="text-sm text-gray-500">Select options to see the price.</p>
+        <p className="text-sm text-base-content/60">Select options to see the price.</p>
       )}
 
       {product.optionGroups.map((group) => (
         <div key={group.id}>
-          <h3 className="mb-1 text-sm font-medium text-gray-700">{group.name}</h3>
+          <h3 className="mb-1 text-sm font-medium text-base-content/70">{group.name}</h3>
           <div className="flex flex-wrap gap-2">
             {group.options.map((opt) => {
               const active = selected[group.id] === opt.id;
@@ -145,8 +142,8 @@ export function ProductPurchase({
                   onClick={() => setSelected((s) => ({ ...s, [group.id]: opt.id }))}
                   className={`rounded-md border px-3 py-1.5 text-sm transition ${
                     active
-                      ? 'border-gray-900 bg-gray-900 text-white'
-                      : 'border-gray-300 text-gray-700 hover:border-gray-900'
+                      ? 'border-primary bg-primary text-primary-content'
+                      : 'border-base-300 text-base-content/70 hover:border-primary'
                   }`}
                 >
                   {opt.name}
@@ -159,7 +156,7 @@ export function ProductPurchase({
 
       {variant && hasPurchaseOptions && (
         <div>
-          <h3 className="mb-1 text-sm font-medium text-gray-700">Purchase options</h3>
+          <h3 className="mb-1 text-sm font-medium text-base-content/70">Purchase options</h3>
           <div className="flex flex-col gap-2">
             {oneTimeAllowed && (
               <PurchaseOption
@@ -194,7 +191,7 @@ export function ProductPurchase({
         onClick={onAdd}
         disabled={!variant || pending}
         data-fc-track="add-to-cart"
-        className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+        className="btn btn-primary"
       >
         {pending ? 'Adding…' : added ? 'Added!' : variant ? 'Add to cart' : 'Unavailable'}
       </button>
@@ -222,16 +219,14 @@ function PurchaseOption({
       onClick={onSelect}
       aria-pressed={active}
       className={`flex items-center justify-between gap-3 rounded-md border px-3 py-2 text-left text-sm transition ${
-        active
-          ? 'border-gray-900 ring-1 ring-gray-900'
-          : 'border-gray-300 hover:border-gray-900'
+        active ? 'border-primary ring-1 ring-primary' : 'border-base-300 hover:border-primary'
       }`}
     >
       <span className="min-w-0">
-        <span className="block font-medium text-gray-900">{label}</span>
-        {hint && <span className="block text-xs text-gray-500">{hint}</span>}
+        <span className="block font-medium text-base-content">{label}</span>
+        {hint && <span className="block text-xs text-base-content/60">{hint}</span>}
       </span>
-      <span className="shrink-0 font-medium text-gray-900">{priceLabel}</span>
+      <span className="shrink-0 font-medium text-base-content">{priceLabel}</span>
     </button>
   );
 }

package/templates/storefront/src/components/checkout/AddressStep.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import type { ExtractedError } from '@forgecart/sdk/shop';
+
+import type { Country } from '../../lib/forgecart';
+import { resolveAddressSuggestion, suggestAddresses } from '../../lib/checkout-session';
+import { shopperMessage } from '../../lib/error-messages';
+import { mintUuid } from '../../lib/uuid';
+
+/** The form's value shape — field names mirror `CreateAddressInput`. */
+export interface AddressFormValue {
+  streetLine1: string;
+  streetLine2: string;
+  city: string;
+  province: string;
+  postalCode: string;
+  countryId: string;
+  phoneNumber: string;
+}
+
+export const EMPTY_ADDRESS: AddressFormValue = {
+  streetLine1: '',
+  streetLine2: '',
+  city: '',
+  province: '',
+  postalCode: '',
+  countryId: '',
+  phoneNumber: '',
+};
+
+const SUGGEST_DEBOUNCE_MS = 300;
+
+/**
+ * Address form: type-ahead via the shop's `addressAutocomplete` (an optional
+ * capability — an empty suggestion list simply leaves manual entry, which is
+ * always present), a country select populated from `availableCountries` (the
+ * API, never a hardcoded list — channel countries are channel-specific), and
+ * the REQUIRED phone field (#863's server gate; the `fieldErrors` map routes
+ * `SHIPPING_ADDRESS_PHONE_REQUIRED` / `SHIPPING_ADDRESS_COUNTRY_*` here).
+ */
+export function AddressStep({
+  countries,
+  value,
+  onChange,
+  onSubmit,
+  pending,
+  error,
+}: {
+  countries: Country[];
+  value: AddressFormValue;
+  onChange: (value: AddressFormValue) => void;
+  onSubmit: () => void;
+  pending: boolean;
+  error: ExtractedError | null;
+}) {
+  const [suggestions, setSuggestions] = useState<{ id: string; description: string }[]>([]);
+  const [suggestOpen, setSuggestOpen] = useState(false);
+  // One vendor billing session per address-entry (Google `sessiontoken`).
+  // mintUuid, not crypto.randomUUID: the latter is secure-context gated and
+  // absent on the plain-http local preview origin — a bare call crashed this
+  // whole step into the route error boundary (2026-08-09).
+  const sessionTokenRef = useRef<string>('');
+  if (!sessionTokenRef.current) sessionTokenRef.current = mintUuid();
+  const debounceRef = useRef<number | null>(null);
+
+  const selectedCountry = useMemo(
+    () => countries.find((country) => country.id === value.countryId),
+    [countries, value.countryId],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current !== null) window.clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  function onStreetInput(street: string): void {
+    onChange({ ...value, streetLine1: street });
+    if (debounceRef.current !== null) window.clearTimeout(debounceRef.current);
+    if (street.trim().length < 4) {
+      setSuggestions([]);
+      setSuggestOpen(false);
+      return;
+    }
+    debounceRef.current = window.setTimeout(async () => {
+      const result = await suggestAddresses(street, sessionTokenRef.current, selectedCountry?.code);
+      // Suggest failures degrade to manual entry — never an error surface.
+      if (result.ok && result.data.length > 0) {
+        setSuggestions(result.data);
+        setSuggestOpen(true);
+        return;
+      }
+      setSuggestions([]);
+      setSuggestOpen(false);
+    }, SUGGEST_DEBOUNCE_MS);
+  }
+
+  async function pickSuggestion(id: string): Promise<void> {
+    setSuggestOpen(false);
+    const result = await resolveAddressSuggestion(id, sessionTokenRef.current);
+    if (!result.ok) return;
+    const resolved = result.data;
+    const matchedCountry = countries.find((country) => country.code === resolved.countryCode);
+    onChange({
+      ...value,
+      streetLine1: resolved.streetLine1,
+      streetLine2: resolved.streetLine2 ?? '',
+      city: resolved.city ?? '',
+      province: resolved.province ?? '',
+      postalCode: resolved.postalCode ?? '',
+      // Suggestion outside the channel's shipping countries: keep the text
+      // fields, leave the select for the shopper (the server would reject an
+      // unknown code anyway).
+      countryId: matchedCountry?.id ?? value.countryId,
+    });
+  }
+
+  const phoneError = error?.code === 'SHIPPING_ADDRESS_PHONE_REQUIRED';
+  const countryError =
+    error?.code === 'SHIPPING_ADDRESS_COUNTRY_REQUIRED' ||
+    error?.code === 'SHIPPING_ADDRESS_COUNTRY_INVALID';
+  const stepError = error && !phoneError && !countryError;
+
+  return (
+    <form
+      className="space-y-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+    >
+      <div className="relative">
+        <label
+          className="mb-1 block text-sm font-medium text-base-content/70"
+          htmlFor="street-line-1"
+        >
+          Street address
+        </label>
+        <input
+          id="street-line-1"
+          type="text"
+          required
+          autoComplete="address-line1"
+          value={value.streetLine1}
+          onChange={(e) => onStreetInput(e.target.value)}
+          onFocus={() => suggestions.length > 0 && setSuggestOpen(true)}
+          className="input w-full"
+        />
+        {suggestOpen && suggestions.length > 0 && (
+          <ul className="menu absolute z-10 mt-1 w-full rounded-box border border-base-300 bg-base-100 shadow">
+            {suggestions.map((suggestion) => (
+              <li key={suggestion.id}>
+                <button type="button" onClick={() => void pickSuggestion(suggestion.id)}>
+                  {suggestion.description}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div>
+        <label
+          className="mb-1 block text-sm font-medium text-base-content/70"
+          htmlFor="street-line-2"
+        >
+          Apartment, suite, etc. (optional)
+        </label>
+        <input
+          id="street-line-2"
+          type="text"
+          autoComplete="address-line2"
+          value={value.streetLine2}
+          onChange={(e) => onChange({ ...value, streetLine2: e.target.value })}
+          className="input w-full"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-base-content/70" htmlFor="city">
+            City
+          </label>
+          <input
+            id="city"
+            type="text"
+            required
+            autoComplete="address-level2"
+            value={value.city}
+            onChange={(e) => onChange({ ...value, city: e.target.value })}
+            className="input w-full"
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-base-content/70" htmlFor="province">
+            State / Province
+          </label>
+          <input
+            id="province"
+            type="text"
+            autoComplete="address-level1"
+            value={value.province}
+            onChange={(e) => onChange({ ...value, province: e.target.value })}
+            className="input w-full"
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label
+            className="mb-1 block text-sm font-medium text-base-content/70"
+            htmlFor="postal-code"
+          >
+            Postal code
+          </label>
+          <input
+            id="postal-code"
+            type="text"
+            required
+            autoComplete="postal-code"
+            value={value.postalCode}
+            onChange={(e) => onChange({ ...value, postalCode: e.target.value })}
+            className="input w-full"
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-base-content/70" htmlFor="country">
+            Country
+          </label>
+          <select
+            id="country"
+            required
+            value={value.countryId}
+            onChange={(e) => onChange({ ...value, countryId: e.target.value })}
+            className={`select w-full ${countryError ? 'select-error' : ''}`}
+          >
+            <option value="" disabled>
+              Select a country
+            </option>
+            {countries.map((country) => (
+              <option key={country.id} value={country.id}>
+                {country.name}
+              </option>
+            ))}
+          </select>
+          {countryError && <p className="mt-1 text-sm text-error">{shopperMessage(error)}</p>}
+        </div>
+      </div>
+
+      <div>
+        <label
+          className="mb-1 block text-sm font-medium text-base-content/70"
+          htmlFor="phone-number"
+        >
+          Phone number
+        </label>
+        <input
+          id="phone-number"
+          type="tel"
+          required
+          autoComplete="tel"
+          value={value.phoneNumber}
+          onChange={(e) => onChange({ ...value, phoneNumber: e.target.value })}
+          className={`input w-full ${phoneError ? 'input-error' : ''}`}
+        />
+        {phoneError && <p className="mt-1 text-sm text-error">{shopperMessage(error)}</p>}
+      </div>
+
+      {stepError && (
+        <div role="alert" className="alert alert-error text-sm">
+          <span>{shopperMessage(error)}</span>
+        </div>
+      )}
+
+      <button
+        type="submit"
+        className="btn btn-primary"
+        disabled={pending}
+        data-fc-track="checkout-address"
+      >
+        {pending ? 'Saving…' : 'Continue to shipping'}
+      </button>
+    </form>
+  );
+}