@ticketmaster/tm-global-address 0.6.0 → 0.8.0

package/dist/components/AddressList/AddressList.d.ts

@@ -3,8 +3,8 @@ import { AddressData } from '../../types/AddressData';
 export interface AddressListProps {
     addresses: AddressData[];
     selectedAddressId?: number;
-    /** Section label above the list */
-    addressLabel: string;
+    /** Section label above the list (overrides i18n when provided) */
+    addressLabel?: string;
     maxAddresses: number;
     /** Called when user selects an address from the list */
     onSelect: (address: AddressData) => void;
@@ -19,6 +19,11 @@ export interface AddressListProps {
     disabled?: boolean;
     /** Per-card error messages, keyed by addressId */
     cardErrors?: Record<number, string>;
+    /**
+     * BCP-47 locale tag. Controls button labels.
+     * Defaults to "en-us".
+     */
+    locale?: string;
 }
 /**
  * AddressList — the LIST (expanded dropdown) state.

package/dist/components/AddressList/AddressList.js

@@ -1,22 +1,23 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import r from "styled-components";
 import { tokens as e } from "../../styles/tokens.js";
-import { AddressCard as b } from "../AddressCard/AddressCard.js";
-const h = r.div`
+import { AddressCard as y } from "../AddressCard/AddressCard.js";
+import { useLabels as v } from "../../i18n/index.js";
+const L = r.div`
   display: flex;
   flex-direction: column;
   gap: ${e.space2};
-`, g = r.div`
+`, k = r.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-block-end: ${e.space2};
-`, y = r.p`
+`, I = r.p`
   margin: 0;
   font-size: ${e.fontSizeLabel};
   font-weight: ${e.fontWeightBold};
   color: ${e.colorTextPrimary};
-`, v = r.button`
+`, S = r.button`
   appearance: none;
   background: none;
   border: none;
@@ -36,16 +37,16 @@ const h = r.div`
     outline-offset: 2px;
     border-radius: 2px;
   }
-`, k = r.ul`
+`, B = r.ul`
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: ${e.space3};
-`, I = r.li``, S = r.div`
+`, z = r.li``, C = r.div`
   margin-block-start: ${e.space3};
-`, B = r.button`
+`, w = r.button`
   appearance: none;
   background: none;
   border: none;
@@ -75,7 +76,7 @@ const h = r.div`
     cursor: not-allowed;
     text-decoration: none;
   }
-`, L = r.div`
+`, P = r.div`
   display: flex;
   align-items: flex-start;
   gap: ${e.space2};
@@ -86,64 +87,67 @@ const h = r.div`
   font-size: ${e.fontSizeBody};
   color: ${e.colorTextSecondary};
   margin-block-start: ${e.space3};
-`, P = ({
+`, M = ({
   addresses: a,
-  selectedAddressId: l,
-  addressLabel: d,
-  maxAddresses: s,
-  onSelect: c,
-  onEdit: p,
-  onDelete: u,
-  onAdd: f,
-  onCollapse: m,
+  selectedAddressId: c,
+  addressLabel: p,
+  maxAddresses: u,
+  onSelect: f,
+  onEdit: m,
+  onDelete: b,
+  onAdd: x,
+  onCollapse: $,
   disabled: i = !1,
-  cardErrors: x = {}
+  cardErrors: g = {},
+  locale: d = "en-us"
 }) => {
-  const $ = a.length >= s;
-  return /* @__PURE__ */ n(h, { children: [
-    /* @__PURE__ */ n(g, { children: [
-      /* @__PURE__ */ o(y, { children: d }),
+  const { form: s } = v(d, ""), l = p ?? s.addressHeading, h = a.length >= u;
+  return /* @__PURE__ */ n(L, { children: [
+    /* @__PURE__ */ n(k, { children: [
+      /* @__PURE__ */ o(I, { children: l }),
       /* @__PURE__ */ o(
-        v,
+        S,
         {
           type: "button",
-          onClick: m,
+          onClick: $,
           disabled: i,
           "aria-label": "Collapse address list",
           children: "▲"
         }
       )
     ] }),
-    /* @__PURE__ */ o(k, { role: "listbox", "aria-label": d, children: a.map((t) => /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o(
-      b,
+    /* @__PURE__ */ o(B, { role: "listbox", "aria-label": l, children: a.map((t) => /* @__PURE__ */ o(z, { children: /* @__PURE__ */ o(
+      y,
       {
         address: t,
-        isSelected: t.addressId === l,
-        onSelect: c,
-        onEdit: p,
-        onDelete: u,
+        isSelected: t.addressId === c,
+        onSelect: f,
+        onEdit: m,
+        onDelete: b,
         disabled: i,
-        errorMessage: x[t.addressId]
+        errorMessage: g[t.addressId],
+        locale: d
       }
     ) }, t.addressId)) }),
-    /* @__PURE__ */ o(S, { children: $ ? /* @__PURE__ */ n(L, { role: "status", children: [
+    /* @__PURE__ */ o(C, { children: h ? /* @__PURE__ */ n(P, { role: "status", children: [
       /* @__PURE__ */ o("span", { "aria-hidden": "true", children: "ℹ" }),
       /* @__PURE__ */ o("span", { children: "You've reached the maximum number of addresses. Please edit or remove one to add another." })
     ] }) : /* @__PURE__ */ n(
-      B,
+      w,
       {
         type: "button",
         disabled: i,
-        onClick: f,
+        onClick: x,
         "data-testid": "add-new-address",
         children: [
           /* @__PURE__ */ o("span", { "aria-hidden": "true", children: "+" }),
-          " Add New Address"
+          " ",
+          s.addNewAddress
         ]
       }
     ) })
   ] });
 };
 export {
-  P as AddressList
+  M as AddressList
 };

package/dist/hooks/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Phase 7: Form State & Hooks
+ *
+ * Exports:
+ *  - useAddressForm:    Standalone form state hook (no external dependencies)
+ *  - useAddressFormRHF: react-hook-form adapter (same interface, different engine)
+ */
+export { useAddressForm } from './useAddressForm';
+export type { UseAddressFormConfig, UseAddressFormReturn, AddressFormValues, } from './useAddressForm';
+export { useAddressFormRHF } from './useAddressFormRHF';

package/dist/hooks/useAddressForm.d.ts

@@ -0,0 +1,76 @@
+import { SaveAddressPayload, FieldError } from '../types/AddressData';
+import { CountryValidationConfig } from '../types/CountryConfig';
+import { ValidationError, FormValidationResult } from '../validation/types';
+/** Configuration for the useAddressForm hook */
+export interface UseAddressFormConfig {
+    /** Initial values to pre-populate the form (e.g. when editing an existing address) */
+    initialValues?: Partial<SaveAddressPayload>;
+    /** Country validation config. If omitted, derived from initialValues.country or defaults to empty US-fallback. */
+    countryConfig?: CountryValidationConfig;
+    /** Show phone number field */
+    showPhoneNumber?: boolean;
+    /** Called on successful form submission with the validated payload */
+    onSubmit?: (values: SaveAddressPayload) => void;
+    /** Called whenever a field value changes */
+    onChange?: (field: string, value: string | boolean) => void;
+    /** Called whenever validation runs (onBlur or onSubmit) */
+    onValidate?: (errors: ValidationError[]) => void;
+    /** Called when the country field changes (before state reset) */
+    onCountryChange?: (country: string) => void;
+}
+/** Internal form value map — all strings for text fields, boolean for defaultAddress */
+export interface AddressFormValues {
+    firstName: string;
+    lastName: string;
+    country: string;
+    address1: string;
+    address2: string;
+    city: string;
+    postal: string;
+    state: string;
+    phoneNumber: string;
+    defaultAddress: boolean;
+}
+/** The full return value of useAddressForm */
+export interface UseAddressFormReturn {
+    /** Current form values */
+    values: AddressFormValues;
+    /** Field-level validation errors (inline display) */
+    errors: Record<string, ValidationError>;
+    /** Non-field server errors (AlertBox banner display) */
+    nonFieldErrors: ValidationError[];
+    /** Which fields have been touched (focused then blurred) */
+    touched: Record<string, boolean>;
+    /** Whether the form passes full validation */
+    isValid: boolean;
+    /** Whether any field differs from initialValues */
+    isDirty: boolean;
+    /** Update a single field value */
+    setValue: (field: string, value: string | boolean) => void;
+    /** Update multiple field values at once (e.g. pre-populate from API) */
+    setValues: (values: Partial<AddressFormValues>) => void;
+    /** Mark a field as touched and run its blur validation */
+    handleBlur: (field: string) => void;
+    /** Run full form validation and return the result */
+    handleSubmit: () => FormValidationResult;
+    /** Reset form to initial values (or provided values) */
+    reset: (values?: Partial<AddressFormValues>) => void;
+    /** Inject server errors from a failed onSave response */
+    setServerErrors: (errors: FieldError[]) => void;
+}
+/**
+ * useAddressForm — standalone address form state management hook.
+ *
+ * @example
+ * ```tsx
+ * const form = useAddressForm({
+ *   initialValues: { country: 'US' },
+ *   showPhoneNumber: true,
+ *   onChange: (field, value) => console.log(field, value),
+ * });
+ *
+ * // In your form:
+ * <input value={form.values.firstName} onChange={e => form.setValue('firstName', e.target.value)} />
+ * ```
+ */
+export declare function useAddressForm(config?: UseAddressFormConfig): UseAddressFormReturn;

package/dist/hooks/useAddressForm.js

@@ -0,0 +1,174 @@
+import { useRef as Q, useState as F, useCallback as N } from "react";
+import { getCountryConfig as U } from "../data/countryData.js";
+import { FIELD_CONSTRAINTS as g } from "../validation/constants.js";
+import { validateForm as q } from "../validation/validateForm.js";
+import { validatePhoneNumber as B } from "../validation/validatePhoneNumber.js";
+import { validateState as V } from "../validation/validateState.js";
+import { validatePostalCode as z } from "../validation/validatePostalCode.js";
+import { validateTextField as b } from "../validation/validateTextField.js";
+function I(e) {
+  return {
+    firstName: (e == null ? void 0 : e.firstName) ?? "",
+    lastName: (e == null ? void 0 : e.lastName) ?? "",
+    country: (e == null ? void 0 : e.country) ?? "",
+    address1: (e == null ? void 0 : e.address1) ?? "",
+    address2: (e == null ? void 0 : e.address2) ?? "",
+    city: (e == null ? void 0 : e.city) ?? "",
+    postal: (e == null ? void 0 : e.postal) ?? "",
+    state: (e == null ? void 0 : e.state) ?? "",
+    phoneNumber: (e == null ? void 0 : e.phoneNumber) ?? "",
+    defaultAddress: (e == null ? void 0 : e.defaultAddress) ?? !1
+  };
+}
+function G(e, c) {
+  return Object.keys(e).some(
+    (n) => e[n] !== c[n]
+  );
+}
+function H(e, c, n, y) {
+  const s = c[e];
+  switch (e) {
+    case "firstName":
+      return b("firstName", String(s), g.firstName);
+    case "lastName":
+      return b("lastName", String(s), g.lastName);
+    case "address1":
+      return b("address1", String(s), g.address1);
+    case "address2":
+      return !s || String(s) === "" ? null : b("address2", String(s), g.address2);
+    case "city":
+      return b("city", String(s), g.city);
+    case "postal":
+      return !s || String(s) === "" ? null : z(String(s), g.postal, n);
+    case "state":
+      return V(s ? String(s) : void 0, n);
+    case "phoneNumber":
+      return !y || !s || String(s) === "" ? null : B(String(s), n);
+    case "country":
+      return !s || String(s) === "" ? {
+        field: "country",
+        code: "FIELD_REQUIRED",
+        message: "country is required",
+        metadata: { field: "country" }
+      } : null;
+    default:
+      return null;
+  }
+}
+function i(e = {}) {
+  const {
+    initialValues: c,
+    showPhoneNumber: n = !1,
+    onSubmit: y,
+    onChange: s,
+    onValidate: m,
+    onCountryChange: h
+  } = e, A = Q(I(c)), [o, l] = F(
+    () => I(c)
+  ), [S, f] = F({}), [D, O] = F([]), [R, E] = F({}), v = e.countryConfig ?? U(o.country), _ = N(
+    (t, d) => {
+      if (t === "country") {
+        const u = String(d);
+        h == null || h(u), l((r) => ({
+          ...r,
+          country: u,
+          state: ""
+        })), f((r) => {
+          const { country: a, state: p, ...x } = r;
+          return x;
+        });
+      } else
+        l((u) => ({ ...u, [t]: d })), f((u) => {
+          const { [t]: r, ...a } = u;
+          return a;
+        });
+      s == null || s(t, d);
+    },
+    [s, h]
+  ), j = N((t) => {
+    l((d) => ({ ...d, ...t }));
+  }, []), T = N(
+    (t) => {
+      if (E((r) => ({ ...r, [t]: !0 })), typeof o[t] == "boolean") return;
+      const u = H(t, o, v, n);
+      if (f((r) => {
+        if (u) return { ...r, [t]: u };
+        const { [t]: a, ...p } = r;
+        return p;
+      }), m) {
+        const r = u ? { ...S, [t]: u } : Object.fromEntries(Object.entries(S).filter(([a]) => a !== t));
+        m(Object.values(r));
+      }
+    },
+    [o, v, n, S, m]
+  ), C = N(() => {
+    const t = {
+      mode: (c == null ? void 0 : c.mode) ?? "create",
+      ...(c == null ? void 0 : c.mode) === "edit" && (c == null ? void 0 : c.addressId) !== void 0 ? { addressId: c.addressId } : {},
+      defaultAddress: o.defaultAddress,
+      firstName: o.firstName.trim(),
+      lastName: o.lastName.trim(),
+      address1: o.address1.trim(),
+      ...o.address2.trim() ? { address2: o.address2.trim() } : {},
+      city: o.city.trim(),
+      postal: o.postal.trim(),
+      country: o.country,
+      ...o.state ? { state: o.state } : {},
+      ...n && o.phoneNumber ? { phoneNumber: o.phoneNumber.trim() } : {}
+    }, d = q(t, v, { showPhoneNumber: n });
+    if (d.valid)
+      f({}), y == null || y(t);
+    else {
+      const u = {};
+      for (const r of d.errors)
+        u[r.field] = r;
+      f(u), E((r) => {
+        const a = { ...r };
+        for (const p of d.errors)
+          a[p.field] = !0;
+        return a;
+      }), m == null || m(d.errors);
+    }
+    return d;
+  }, [o, v, n, c, y, m]), k = N((t) => {
+    const d = t ? I(t) : { ...A.current };
+    l(d), f({}), O([]), E({});
+  }, []), w = N((t) => {
+    const d = {}, u = [];
+    for (const r of t)
+      r.field && r.field !== "" ? d[r.field] = {
+        field: r.field,
+        code: r.code,
+        message: r.message,
+        metadata: r.metadata
+      } : u.push({
+        field: "",
+        code: r.code || "FIELD_REQUIRED",
+        message: r.message,
+        metadata: r.metadata
+      });
+    f((r) => ({ ...r, ...d })), O(u), E((r) => {
+      const a = { ...r };
+      for (const p of Object.keys(d))
+        a[p] = !0;
+      return a;
+    });
+  }, []), L = Object.keys(S).length === 0 && D.length === 0, P = G(o, A.current);
+  return {
+    values: o,
+    errors: S,
+    nonFieldErrors: D,
+    touched: R,
+    isValid: L,
+    isDirty: P,
+    setValue: _,
+    setValues: j,
+    handleBlur: T,
+    handleSubmit: C,
+    reset: k,
+    setServerErrors: w
+  };
+}
+export {
+  i as useAddressForm
+};

package/dist/hooks/useAddressFormRHF.d.ts

@@ -0,0 +1,8 @@
+import { UseAddressFormConfig, UseAddressFormReturn } from './useAddressForm';
+/**
+ * useAddressFormRHF — react-hook-form-backed address form state hook.
+ *
+ * Produces the same UseAddressFormReturn as useAddressForm so consuming
+ * components are agnostic to which hook is used.
+ */
+export declare function useAddressFormRHF(config?: UseAddressFormConfig): UseAddressFormReturn;

package/dist/hooks/useAddressFormRHF.js

@@ -0,0 +1,174 @@
+import { useCallback as N } from "react";
+import { useForm as Q } from "react-hook-form";
+import { getCountryConfig as C } from "../data/countryData.js";
+import { FIELD_CONSTRAINTS as S } from "../validation/constants.js";
+import { validateForm as U } from "../validation/validateForm.js";
+import { validatePhoneNumber as k } from "../validation/validatePhoneNumber.js";
+import { validateState as x } from "../validation/validateState.js";
+import { validatePostalCode as B } from "../validation/validatePostalCode.js";
+import { validateTextField as l } from "../validation/validateTextField.js";
+function q(f, r, o, u) {
+  const t = r[f];
+  switch (f) {
+    case "firstName":
+      return l("firstName", String(t), S.firstName);
+    case "lastName":
+      return l("lastName", String(t), S.lastName);
+    case "address1":
+      return l("address1", String(t), S.address1);
+    case "address2":
+      return !t || String(t) === "" ? null : l("address2", String(t), S.address2);
+    case "city":
+      return l("city", String(t), S.city);
+    case "postal":
+      return !t || String(t) === "" ? null : B(String(t), S.postal, o);
+    case "state":
+      return x(t ? String(t) : void 0, o);
+    case "phoneNumber":
+      return !u || !t || String(t) === "" ? null : k(String(t), o);
+    case "country":
+      return !t || String(t) === "" ? {
+        field: "country",
+        code: "FIELD_REQUIRED",
+        message: "country is required",
+        metadata: { field: "country" }
+      } : null;
+    default:
+      return null;
+  }
+}
+function Z(f = {}) {
+  const {
+    initialValues: r,
+    showPhoneNumber: o = !1,
+    onSubmit: u,
+    onChange: t,
+    onValidate: c,
+    onCountryChange: h
+  } = f, b = {
+    firstName: (r == null ? void 0 : r.firstName) ?? "",
+    lastName: (r == null ? void 0 : r.lastName) ?? "",
+    country: (r == null ? void 0 : r.country) ?? "",
+    address1: (r == null ? void 0 : r.address1) ?? "",
+    address2: (r == null ? void 0 : r.address2) ?? "",
+    city: (r == null ? void 0 : r.city) ?? "",
+    postal: (r == null ? void 0 : r.postal) ?? "",
+    state: (r == null ? void 0 : r.state) ?? "",
+    phoneNumber: (r == null ? void 0 : r.phoneNumber) ?? "",
+    defaultAddress: (r == null ? void 0 : r.defaultAddress) ?? !1
+  }, {
+    watch: D,
+    setValue: g,
+    setError: y,
+    clearErrors: m,
+    reset: F,
+    formState: p,
+    getValues: i
+  } = Q({
+    defaultValues: b,
+    mode: "onBlur"
+  }), R = D(), v = {};
+  for (const [e, s] of Object.entries(p.errors))
+    s && typeof s.message == "string" && (v[e] = {
+      field: e,
+      code: "FIELD_REQUIRED",
+      // RHF default; overridden by setServerErrors
+      message: s.message
+    });
+  const A = N(
+    (e, s) => {
+      if (e === "country") {
+        const d = String(s);
+        h == null || h(d), g("country", d), g("state", ""), m(["country", "state"]);
+      } else
+        g(e, s), m(e);
+      t == null || t(e, s);
+    },
+    [g, m, t, h]
+  ), O = N(
+    (e) => {
+      for (const [s, d] of Object.entries(e))
+        g(s, d);
+    },
+    [g]
+  ), j = N(
+    (e) => {
+      const s = i(), d = C(s.country), n = q(e, s, d, o);
+      if (n) {
+        y(e, { message: n.message });
+        const E = Object.entries(p.errors).filter(([, a]) => a && typeof a.message == "string").map(([a, P]) => ({
+          field: a,
+          code: "FIELD_REQUIRED",
+          message: P.message
+        }));
+        c == null || c([...E, n]);
+      } else
+        m(e);
+    },
+    [i, o, y, m, p.errors, c]
+  ), L = N(() => {
+    var E;
+    const e = i(), s = f.countryConfig ?? C(e.country), d = {
+      mode: (r == null ? void 0 : r.mode) ?? "create",
+      ...(r == null ? void 0 : r.mode) === "edit" && (r == null ? void 0 : r.addressId) !== void 0 ? { addressId: r.addressId } : {},
+      defaultAddress: e.defaultAddress,
+      firstName: e.firstName.trim(),
+      lastName: e.lastName.trim(),
+      address1: e.address1.trim(),
+      ...(E = e.address2) != null && E.trim() ? { address2: e.address2.trim() } : {},
+      city: e.city.trim(),
+      postal: e.postal.trim(),
+      country: e.country,
+      ...e.state ? { state: e.state } : {},
+      ...o && e.phoneNumber ? { phoneNumber: e.phoneNumber.trim() } : {}
+    }, n = U(d, s, { showPhoneNumber: o });
+    if (n.valid)
+      m(), u == null || u(d);
+    else {
+      for (const a of n.errors)
+        y(a.field, { message: a.message });
+      c == null || c(n.errors);
+    }
+    return n;
+  }, [
+    i,
+    f.countryConfig,
+    o,
+    r,
+    y,
+    m,
+    u,
+    c
+  ]), T = N(
+    (e) => {
+      F(e ? { ...b, ...e } : b);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [F]
+  ), _ = [], w = N(
+    (e) => {
+      for (const s of e)
+        s.field && s.field !== "" && y(s.field, { message: s.message });
+    },
+    [y]
+  ), I = {};
+  for (const [e, s] of Object.entries(p.touchedFields))
+    s && (I[e] = !0);
+  return {
+    values: R,
+    errors: v,
+    nonFieldErrors: _,
+    touched: I,
+    isValid: p.isValid && Object.keys(v).length === 0,
+    isDirty: p.isDirty,
+    setValue: A,
+    setValues: O,
+    handleBlur: j,
+    handleSubmit: L,
+    reset: T,
+    setServerErrors: w
+  };
+}
+export {
+  Z as useAddressFormRHF
+};

package/dist/i18n/defaultLabels.d.ts

@@ -0,0 +1,2 @@
+import { LocaleBundle } from './types';
+export declare const DEFAULT_LABELS: LocaleBundle;