@forgecart/cli 2.202608121449.0 → 2.202608200713.0

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>
+  );
+}