@forgecart/cli 2.202610052310.0 → 2.202610071755.0

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

@@ -0,0 +1,271 @@
+'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';
+import { Alert, AlertDescription } from '../ui/alert';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { NativeSelect } from '../ui/native-select';
+
+/** 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 grid gap-2">
+        <Label 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)}
+        />
+        {suggestOpen && suggestions.length > 0 && (
+          <ul className="absolute top-full z-10 mt-1 w-full overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md">
+            {suggestions.map((suggestion) => (
+              <li key={suggestion.id}>
+                <button
+                  type="button"
+                  onClick={() => void pickSuggestion(suggestion.id)}
+                  className="w-full rounded-sm px-2 py-1.5 text-left text-sm outline-none hover:bg-muted focus-visible:bg-muted"
+                >
+                  {suggestion.description}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div className="grid gap-2">
+        <Label 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 })}
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="grid gap-2">
+          <Label htmlFor="city">City</Label>
+          <Input
+            id="city"
+            type="text"
+            required
+            autoComplete="address-level2"
+            value={value.city}
+            onChange={(e) => onChange({ ...value, city: e.target.value })}
+          />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="province">State / Province</Label>
+          <Input
+            id="province"
+            type="text"
+            autoComplete="address-level1"
+            value={value.province}
+            onChange={(e) => onChange({ ...value, province: e.target.value })}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="grid gap-2">
+          <Label 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 })}
+          />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="country">Country</Label>
+          <NativeSelect
+            id="country"
+            required
+            value={value.countryId}
+            onChange={(e) => onChange({ ...value, countryId: e.target.value })}
+            aria-invalid={countryError}
+            aria-describedby={countryError ? 'country-error' : undefined}
+          >
+            <option value="" disabled>
+              Select a country
+            </option>
+            {countries.map((country) => (
+              <option key={country.id} value={country.id}>
+                {country.name}
+              </option>
+            ))}
+          </NativeSelect>
+          {countryError && (
+            <p id="country-error" className="text-sm text-destructive">
+              {shopperMessage(error)}
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="grid gap-2">
+        <Label 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 })}
+          aria-invalid={phoneError}
+          aria-describedby={phoneError ? 'phone-error' : undefined}
+        />
+        {phoneError && (
+          <p id="phone-error" className="text-sm text-destructive">
+            {shopperMessage(error)}
+          </p>
+        )}
+      </div>
+
+      {stepError && (
+        <Alert role="alert" variant="destructive">
+          <AlertDescription>{shopperMessage(error)}</AlertDescription>
+        </Alert>
+      )}
+
+      <Button type="submit" disabled={pending} data-fc-track="checkout-address">
+        {pending ? 'Saving…' : 'Continue to shipping'}
+      </Button>
+    </form>
+  );
+}