@thorprovider/blocks 4.0.0 → 4.3.0

package/dist/blocks/designs/checkout-commerce-v1/view/address-form.mjs

@@ -0,0 +1,331 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Button } from "../../../../ui/button.mjs";
+import { fill } from "./format.mjs";
+const VARIANT_GHOST = "ghost";
+const EMPTY_OPTION = "";
+function AddressForm(props) {
+  const {
+    labels,
+    countries,
+    locationMode,
+    locationOptions,
+    onLocationChange,
+    authenticated,
+    requirements,
+    hostErrors,
+    saving = false,
+    saveError,
+    createAddressId,
+    onSave,
+    onCancel
+  } = props;
+  const hostLocationMode = locationMode === "host";
+  const emptyDraft = {
+    firstName: "",
+    lastName: "",
+    phone: "",
+    countryCode: hostLocationMode ? "" : countries[0]?.code ?? "",
+    province: "",
+    city: "",
+    line1: "",
+    line2: "",
+    postalCode: "",
+    instructions: ""
+  };
+  const uid = useId();
+  const [draft, setDraft] = useState(emptyDraft);
+  const [saveToAccount, setSaveToAccount] = useState(authenticated);
+  const [errors, setErrors] = useState({});
+  const country = countries.find((item) => item.code === draft.countryCode);
+  const province = country?.provinces.find((item) => item.name === draft.province);
+  const postalRule = country?.postalCode ?? "hidden";
+  const phoneRequired = requirements?.shippingPhone ?? true;
+  const provinceRequired = requirements?.province ?? true;
+  const postalCodeRequired = requirements?.postalCode ?? postalRule === "required";
+  const countryPrompt = labels.addressCountryPlaceholder ?? labels.addressSelectPlaceholder;
+  const provincePrompt = labels.addressProvincePlaceholder ?? labels.addressSelectPlaceholder;
+  const cityPrompt = labels.addressCityPlaceholder ?? labels.addressSelectPlaceholder;
+  function setField(key, value) {
+    setDraft((current) => ({ ...current, [key]: value }));
+  }
+  function handleCountry(code) {
+    setDraft((current) => ({ ...current, countryCode: code, province: "", city: "" }));
+  }
+  function handleProvince(name) {
+    setDraft((current) => ({ ...current, province: name, city: "" }));
+  }
+  function handleHostLocation(level, value) {
+    if (level === "countries") {
+      setDraft((current) => ({ ...current, countryCode: value, province: "", city: "" }));
+    } else if (level === "provinces") {
+      setDraft((current) => ({ ...current, province: value, city: "" }));
+    } else {
+      setDraft((current) => ({ ...current, city: value }));
+    }
+    onLocationChange?.(level, value);
+  }
+  function locationStatus(level) {
+    const state = locationOptions?.states?.[level];
+    if (state === "pending") {
+      return /* @__PURE__ */ jsx("p", { role: "status", className: "mt-1 text-xs text-muted-foreground", children: labels.groupRatePending || labels.loadingLabel || "" });
+    }
+    if (state === "error") {
+      return /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-xs text-destructive", children: locationOptions?.errors?.[level] || labels.rateError || labels.loadingLabel || "" });
+    }
+    return null;
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    if (saving) return;
+    const next = {};
+    if (!draft.firstName.trim()) next.firstName = labels.addressRequired;
+    if (!draft.lastName.trim()) next.lastName = labels.addressRequired;
+    if (phoneRequired && !draft.phone.trim()) next.phone = labels.addressRequired;
+    if (!draft.countryCode) next.countryCode = labels.addressRequired;
+    if (provinceRequired && !draft.province) next.province = labels.addressRequired;
+    if (!draft.city) next.city = labels.addressRequired;
+    if (!draft.line1.trim()) next.line1 = labels.addressRequired;
+    if (postalCodeRequired && !draft.postalCode.trim()) {
+      next.postalCode = labels.addressRequired;
+    }
+    setErrors(next);
+    if (Object.keys(next).length > 0) return;
+    const recipient = `${draft.firstName.trim()} ${draft.lastName.trim()}`;
+    const line2 = draft.line2.trim();
+    const province2 = draft.province.trim();
+    const postalCode = draft.postalCode.trim();
+    const phone = draft.phone.trim();
+    const optionalAddressFields = hostLocationMode ? {
+      ...line2 ? { line2 } : {},
+      ...province2 ? { province: province2 } : {},
+      ...postalCode ? { postalCode } : {},
+      ...phone ? { phone } : {}
+    } : {
+      line2,
+      province: draft.province,
+      postalCode,
+      phone
+    };
+    onSave(
+      {
+        id: createAddressId(),
+        label: saveToAccount ? fill(labels.addressNewLabel, { city: draft.city }) : labels.addressTemporary,
+        recipient,
+        line1: draft.line1.trim(),
+        ...optionalAddressFields,
+        city: draft.city,
+        countryCode: draft.countryCode,
+        isDefault: false
+      },
+      saveToAccount
+    );
+  }
+  function field(key, label, type, autoComplete, requiredField, span) {
+    const fieldId = `${uid}-${key}`;
+    const error = errors[key] ?? hostErrors?.[key];
+    return /* @__PURE__ */ jsxs("div", { className: span ? "sm:col-span-2" : void 0, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: fieldId, className: "text-xs font-medium", children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: fieldId,
+          type,
+          autoComplete,
+          value: draft[key],
+          required: requiredField,
+          onChange: (event) => setField(key, event.target.value),
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error ? `${fieldId}-error` : void 0,
+          className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+        }
+      ),
+      error ? /* @__PURE__ */ jsx("p", { id: `${fieldId}-error`, className: "mt-1 text-xs text-destructive", children: error }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: labels.addressFormTitle }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 grid gap-3 sm:grid-cols-2", children: [
+      field("firstName", labels.addressFirstName, "text", "given-name", true, false),
+      field("lastName", labels.addressLastName, "text", "family-name", true, false),
+      field("phone", labels.addressPhone, "tel", "tel", phoneRequired, false),
+      hostLocationMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-country`, className: "text-xs font-medium", children: labels.addressCountry }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: `${uid}-country`,
+              value: draft.countryCode,
+              disabled: locationOptions?.states?.countries === "pending" || locationOptions?.states?.countries === "unavailable",
+              onChange: (event) => handleHostLocation("countries", event.target.value),
+              className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: countryPrompt }),
+                locationOptions?.countries.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.label }, item.value))
+              ]
+            }
+          ),
+          errors.countryCode ?? hostErrors?.countryCode ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.countryCode ?? hostErrors?.countryCode }) : null,
+          locationStatus("countries")
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-province`, className: "text-xs font-medium", children: labels.addressProvince }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: `${uid}-province`,
+              value: draft.province,
+              required: hostLocationMode ? provinceRequired : void 0,
+              disabled: !draft.countryCode || locationOptions?.states?.provinces === "pending" || locationOptions?.states?.provinces === "unavailable",
+              onChange: (event) => handleHostLocation("provinces", event.target.value),
+              className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: provincePrompt }),
+                locationOptions?.provinces.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.label }, item.value))
+              ]
+            }
+          ),
+          errors.province ?? hostErrors?.province ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.province ?? hostErrors?.province }) : null,
+          locationStatus("provinces")
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-city`, className: "text-xs font-medium", children: labels.addressCity }),
+          !provinceRequired && !draft.province ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: `${uid}-city`,
+              value: draft.city,
+              required: true,
+              onChange: (event) => handleHostLocation("cities", event.target.value),
+              className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: `${uid}-city`,
+              value: draft.city,
+              required: true,
+              disabled: !draft.province || locationOptions?.states?.cities === "pending" || locationOptions?.states?.cities === "unavailable",
+              onChange: (event) => handleHostLocation("cities", event.target.value),
+              className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: cityPrompt }),
+                locationOptions?.cities.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.label }, item.value))
+              ]
+            }
+          ),
+          errors.city ?? hostErrors?.city ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.city ?? hostErrors?.city }) : null,
+          locationStatus("cities")
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-country`, className: "text-xs font-medium", children: labels.addressCountry }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: `${uid}-country`,
+              value: draft.countryCode,
+              onChange: (event) => handleCountry(event.target.value),
+              className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: countryPrompt }),
+                countries.map((item) => /* @__PURE__ */ jsx("option", { value: item.code, children: item.name }, item.code))
+              ]
+            }
+          ),
+          errors.countryCode ?? hostErrors?.countryCode ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.countryCode ?? hostErrors?.countryCode }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-province`, className: "text-xs font-medium", children: labels.addressProvince }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: `${uid}-province`,
+              value: draft.province,
+              onChange: (event) => handleProvince(event.target.value),
+              className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: provincePrompt }),
+                (country?.provinces ?? []).map((item) => /* @__PURE__ */ jsx("option", { value: item.name, children: item.name }, item.name))
+              ]
+            }
+          ),
+          errors.province ?? hostErrors?.province ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.province ?? hostErrors?.province }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-city`, className: "text-xs font-medium", children: labels.addressCity }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: `${uid}-city`,
+              value: draft.city,
+              onChange: (event) => setField("city", event.target.value),
+              className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: cityPrompt }),
+                (province?.cities ?? []).map((item) => /* @__PURE__ */ jsx("option", { value: item, children: item }, item))
+              ]
+            }
+          ),
+          errors.city ?? hostErrors?.city ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.city ?? hostErrors?.city }) : null
+        ] })
+      ] }),
+      field("line1", labels.addressLine1, "text", "address-line1", true, true),
+      field("line2", labels.addressLine2, "text", "address-line2", false, true),
+      postalRule === "hidden" ? null : field(
+        "postalCode",
+        labels.addressPostal,
+        "text",
+        "postal-code",
+        postalCodeRequired,
+        false
+      ),
+      !hostLocationMode ? /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-instructions`, className: "text-xs font-medium", children: labels.addressInstructions }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: `${uid}-instructions`,
+            rows: 2,
+            value: draft.instructions,
+            onChange: (event) => setField("instructions", event.target.value),
+            className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+          }
+        )
+      ] }) : null
+    ] }),
+    authenticated ? /* @__PURE__ */ jsxs("label", { className: "mt-3 flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: saveToAccount,
+          onChange: (event) => setSaveToAccount(event.target.checked),
+          className: "size-4"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: labels.addressSaveAccount })
+    ] }) : /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-muted-foreground", children: labels.addressUseOnce }),
+    saving ? /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", className: "mt-3 text-xs text-muted-foreground", children: labels.addressSavePending ?? "Saving address\u2026" }) : saveError ? /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-3 text-xs text-destructive", children: saveError }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: saving, children: labels.addressSave }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: VARIANT_GHOST,
+          onClick: onCancel,
+          disabled: saving,
+          children: labels.addressCancel
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  AddressForm
+};
+//# sourceMappingURL=address-form.mjs.map

package/dist/blocks/designs/checkout-commerce-v1/view/address-form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/address-form.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, type FormEvent } from 'react';\nimport { Button } from '../../../../ui/button';\nimport { fill, type AddressData } from './format';\nimport type {\n  CheckoutCopy,\n  CheckoutCountry,\n  CheckoutLocationLevel,\n  CheckoutLocationOptions,\n  CheckoutRequirements,\n} from './types';\n\nconst VARIANT_GHOST = 'ghost' as const;\nconst EMPTY_OPTION = '';\n\ntype AddressFormProps = {\n  labels: CheckoutCopy;\n  countries: CheckoutCountry[];\n  authenticated: boolean;\n  requirements?: CheckoutRequirements;\n  hostErrors?: Record<string, string>;\n  saving?: boolean;\n  saveError?: string;\n  createAddressId: () => string;\n  onSave: (address: AddressData, saveToAccount: boolean) => void;\n  onCancel: () => void;\n} & (\n  | {\n      locationMode: 'host';\n      locationOptions: CheckoutLocationOptions;\n      onLocationChange: (level: CheckoutLocationLevel, value: string) => void;\n    }\n  | {\n      locationMode: 'demo';\n      locationOptions?: never;\n      onLocationChange?: never;\n    }\n);\n\nexport function AddressForm(props: AddressFormProps) {\n  const {\n    labels,\n    countries,\n    locationMode,\n    locationOptions,\n    onLocationChange,\n    authenticated,\n    requirements,\n    hostErrors,\n    saving = false,\n    saveError,\n    createAddressId,\n    onSave,\n    onCancel,\n  } = props;\n  const hostLocationMode = locationMode === 'host';\n  const emptyDraft = {\n    firstName: '',\n    lastName: '',\n    phone: '',\n    countryCode: hostLocationMode ? '' : countries[0]?.code ?? '',\n    province: '',\n    city: '',\n    line1: '',\n    line2: '',\n    postalCode: '',\n    instructions: '',\n  };\n  type DraftAddress = typeof emptyDraft;\n  const uid = useId();\n  const [draft, setDraft] = useState<DraftAddress>(emptyDraft);\n  const [saveToAccount, setSaveToAccount] = useState(authenticated);\n  const [errors, setErrors] = useState<Record<string, string>>({});\n\n  const country = countries.find((item) => item.code === draft.countryCode);\n  const province = country?.provinces.find((item) => item.name === draft.province);\n  const postalRule = country?.postalCode ?? 'hidden';\n  const phoneRequired = requirements?.shippingPhone ?? true;\n  const provinceRequired = requirements?.province ?? true;\n  const postalCodeRequired = requirements?.postalCode ?? postalRule === 'required';\n  const countryPrompt = labels.addressCountryPlaceholder ?? labels.addressSelectPlaceholder;\n  const provincePrompt = labels.addressProvincePlaceholder ?? labels.addressSelectPlaceholder;\n  const cityPrompt = labels.addressCityPlaceholder ?? labels.addressSelectPlaceholder;\n\n  function setField(key: keyof DraftAddress, value: string) {\n    setDraft((current) => ({ ...current, [key]: value }));\n  }\n\n  function handleCountry(code: string) {\n    setDraft((current) => ({ ...current, countryCode: code, province: '', city: '' }));\n  }\n\n  function handleProvince(name: string) {\n    setDraft((current) => ({ ...current, province: name, city: '' }));\n  }\n\n  function handleHostLocation(level: CheckoutLocationLevel, value: string) {\n    if (level === 'countries') {\n      setDraft((current) => ({ ...current, countryCode: value, province: '', city: '' }));\n    } else if (level === 'provinces') {\n      setDraft((current) => ({ ...current, province: value, city: '' }));\n    } else {\n      setDraft((current) => ({ ...current, city: value }));\n    }\n    onLocationChange?.(level, value);\n  }\n\n  function locationStatus(level: CheckoutLocationLevel) {\n    const state = locationOptions?.states?.[level];\n    if (state === 'pending') {\n      return (\n        <p role=\"status\" className=\"mt-1 text-xs text-muted-foreground\">\n          {labels.groupRatePending || labels.loadingLabel || ''}\n        </p>\n      );\n    }\n    if (state === 'error') {\n      return (\n        <p role=\"alert\" className=\"mt-1 text-xs text-destructive\">\n          {locationOptions?.errors?.[level] || labels.rateError || labels.loadingLabel || ''}\n        </p>\n      );\n    }\n    return null;\n  }\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (saving) return;\n    const next: Record<string, string> = {};\n    if (!draft.firstName.trim()) next.firstName = labels.addressRequired;\n    if (!draft.lastName.trim()) next.lastName = labels.addressRequired;\n    if (phoneRequired && !draft.phone.trim()) next.phone = labels.addressRequired;\n    if (!draft.countryCode) next.countryCode = labels.addressRequired;\n    if (provinceRequired && !draft.province) next.province = labels.addressRequired;\n    if (!draft.city) next.city = labels.addressRequired;\n    if (!draft.line1.trim()) next.line1 = labels.addressRequired;\n    if (postalCodeRequired && !draft.postalCode.trim()) {\n      next.postalCode = labels.addressRequired;\n    }\n    setErrors(next);\n    if (Object.keys(next).length > 0) return;\n\n    const recipient = `${draft.firstName.trim()} ${draft.lastName.trim()}`;\n    const line2 = draft.line2.trim();\n    const province = draft.province.trim();\n    const postalCode = draft.postalCode.trim();\n    const phone = draft.phone.trim();\n    const optionalAddressFields = hostLocationMode\n      ? {\n          ...(line2 ? { line2 } : {}),\n          ...(province ? { province } : {}),\n          ...(postalCode ? { postalCode } : {}),\n          ...(phone ? { phone } : {}),\n        }\n      : {\n          line2,\n          province: draft.province,\n          postalCode,\n          phone,\n        };\n    onSave(\n      {\n        id: createAddressId(),\n        label: saveToAccount\n          ? fill(labels.addressNewLabel, { city: draft.city })\n          : labels.addressTemporary,\n        recipient,\n        line1: draft.line1.trim(),\n        ...optionalAddressFields,\n        city: draft.city,\n        countryCode: draft.countryCode,\n        isDefault: false,\n      },\n      saveToAccount,\n    );\n  }\n\n  function field(\n    key: keyof DraftAddress,\n    label: string,\n    type: string,\n    autoComplete: string,\n    requiredField: boolean,\n    span: boolean,\n  ) {\n    const fieldId = `${uid}-${key}`;\n    const error = errors[key] ?? hostErrors?.[key];\n    return (\n      <div className={span ? 'sm:col-span-2' : undefined}>\n        <label htmlFor={fieldId} className=\"text-xs font-medium\">\n          {label}\n        </label>\n        <input\n          id={fieldId}\n          type={type}\n          autoComplete={autoComplete}\n          value={draft[key]}\n          required={requiredField}\n          onChange={(event) => setField(key, event.target.value)}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={error ? `${fieldId}-error` : undefined}\n          className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n        />\n        {error ? (\n          <p id={`${fieldId}-error`} className=\"mt-1 text-xs text-destructive\">\n            {error}\n          </p>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <form onSubmit={handleSubmit} noValidate>\n      <p className=\"text-sm font-semibold\">{labels.addressFormTitle}</p>\n      <div className=\"mt-3 grid gap-3 sm:grid-cols-2\">\n        {field('firstName', labels.addressFirstName, 'text', 'given-name', true, false)}\n        {field('lastName', labels.addressLastName, 'text', 'family-name', true, false)}\n        {field('phone', labels.addressPhone, 'tel', 'tel', phoneRequired, false)}\n        {hostLocationMode ? (\n          <>\n            <div>\n              <label htmlFor={`${uid}-country`} className=\"text-xs font-medium\">\n                {labels.addressCountry}\n              </label>\n              <select\n                id={`${uid}-country`}\n                value={draft.countryCode}\n                disabled={\n                  locationOptions?.states?.countries === 'pending' ||\n                  locationOptions?.states?.countries === 'unavailable'\n                }\n                onChange={(event) => handleHostLocation('countries', event.target.value)}\n                className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n              >\n                <option value={EMPTY_OPTION}>{countryPrompt}</option>\n                {locationOptions?.countries.map((item) => (\n                  <option key={item.value} value={item.value}>\n                    {item.label}\n                  </option>\n                ))}\n              </select>\n              {errors.countryCode ?? hostErrors?.countryCode ? (\n                <p className=\"mt-1 text-xs text-destructive\">\n                  {errors.countryCode ?? hostErrors?.countryCode}\n                </p>\n              ) : null}\n              {locationStatus('countries')}\n            </div>\n            <div>\n              <label htmlFor={`${uid}-province`} className=\"text-xs font-medium\">\n                {labels.addressProvince}\n              </label>\n              <select\n                id={`${uid}-province`}\n                value={draft.province}\n                required={hostLocationMode ? provinceRequired : undefined}\n                disabled={\n                  !draft.countryCode ||\n                  locationOptions?.states?.provinces === 'pending' ||\n                  locationOptions?.states?.provinces === 'unavailable'\n                }\n                onChange={(event) => handleHostLocation('provinces', event.target.value)}\n                className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n              >\n                <option value={EMPTY_OPTION}>{provincePrompt}</option>\n                {locationOptions?.provinces.map((item) => (\n                  <option key={item.value} value={item.value}>\n                    {item.label}\n                  </option>\n                ))}\n              </select>\n              {errors.province ?? hostErrors?.province ? (\n                <p className=\"mt-1 text-xs text-destructive\">\n                  {errors.province ?? hostErrors?.province}\n                </p>\n              ) : null}\n              {locationStatus('provinces')}\n            </div>\n            <div>\n              <label htmlFor={`${uid}-city`} className=\"text-xs font-medium\">\n                {labels.addressCity}\n              </label>\n              {!provinceRequired && !draft.province ? (\n                <input\n                  id={`${uid}-city`}\n                  value={draft.city}\n                  required\n                  onChange={(event) => handleHostLocation('cities', event.target.value)}\n                  className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n                />\n              ) : (\n                <select\n                  id={`${uid}-city`}\n                  value={draft.city}\n                  required\n                  disabled={\n                    !draft.province ||\n                    locationOptions?.states?.cities === 'pending' ||\n                    locationOptions?.states?.cities === 'unavailable'\n                  }\n                  onChange={(event) => handleHostLocation('cities', event.target.value)}\n                  className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n                >\n                  <option value={EMPTY_OPTION}>{cityPrompt}</option>\n                  {locationOptions?.cities.map((item) => (\n                    <option key={item.value} value={item.value}>\n                      {item.label}\n                    </option>\n                  ))}\n                </select>\n              )}\n              {errors.city ?? hostErrors?.city ? (\n                <p className=\"mt-1 text-xs text-destructive\">{errors.city ?? hostErrors?.city}</p>\n              ) : null}\n              {locationStatus('cities')}\n            </div>\n          </>\n        ) : (\n          <>\n            <div>\n              <label htmlFor={`${uid}-country`} className=\"text-xs font-medium\">\n                {labels.addressCountry}\n              </label>\n              <select\n                id={`${uid}-country`}\n                value={draft.countryCode}\n                onChange={(event) => handleCountry(event.target.value)}\n                className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n              >\n                <option value={EMPTY_OPTION}>{countryPrompt}</option>\n                {countries.map((item) => (\n                  <option key={item.code} value={item.code}>\n                    {item.name}\n                  </option>\n                ))}\n              </select>\n              {errors.countryCode ?? hostErrors?.countryCode ? (\n                <p className=\"mt-1 text-xs text-destructive\">\n                  {errors.countryCode ?? hostErrors?.countryCode}\n                </p>\n              ) : null}\n            </div>\n            <div>\n              <label htmlFor={`${uid}-province`} className=\"text-xs font-medium\">\n                {labels.addressProvince}\n              </label>\n              <select\n                id={`${uid}-province`}\n                value={draft.province}\n                onChange={(event) => handleProvince(event.target.value)}\n                className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n              >\n                <option value={EMPTY_OPTION}>{provincePrompt}</option>\n                {(country?.provinces ?? []).map((item) => (\n                  <option key={item.name} value={item.name}>\n                    {item.name}\n                  </option>\n                ))}\n              </select>\n              {errors.province ?? hostErrors?.province ? (\n                <p className=\"mt-1 text-xs text-destructive\">\n                  {errors.province ?? hostErrors?.province}\n                </p>\n              ) : null}\n            </div>\n            <div>\n              <label htmlFor={`${uid}-city`} className=\"text-xs font-medium\">\n                {labels.addressCity}\n              </label>\n              <select\n                id={`${uid}-city`}\n                value={draft.city}\n                onChange={(event) => setField('city', event.target.value)}\n                className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n              >\n                <option value={EMPTY_OPTION}>{cityPrompt}</option>\n                {(province?.cities ?? []).map((item) => (\n                  <option key={item} value={item}>\n                    {item}\n                  </option>\n                ))}\n              </select>\n              {errors.city ?? hostErrors?.city ? (\n                <p className=\"mt-1 text-xs text-destructive\">{errors.city ?? hostErrors?.city}</p>\n              ) : null}\n            </div>\n          </>\n        )}\n        {field('line1', labels.addressLine1, 'text', 'address-line1', true, true)}\n        {field('line2', labels.addressLine2, 'text', 'address-line2', false, true)}\n        {postalRule === 'hidden'\n          ? null\n          : field(\n              'postalCode',\n              labels.addressPostal,\n              'text',\n              'postal-code',\n              postalCodeRequired,\n              false,\n            )}\n        {!hostLocationMode ? (\n          <div className=\"sm:col-span-2\">\n            <label htmlFor={`${uid}-instructions`} className=\"text-xs font-medium\">\n              {labels.addressInstructions}\n            </label>\n            <textarea\n              id={`${uid}-instructions`}\n              rows={2}\n              value={draft.instructions}\n              onChange={(event) => setField('instructions', event.target.value)}\n              className=\"mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm\"\n            />\n          </div>\n        ) : null}\n      </div>\n      {authenticated ? (\n        <label className=\"mt-3 flex items-center gap-2 text-sm\">\n          <input\n            type=\"checkbox\"\n            checked={saveToAccount}\n            onChange={(event) => setSaveToAccount(event.target.checked)}\n            className=\"size-4\"\n          />\n          <span>{labels.addressSaveAccount}</span>\n        </label>\n      ) : (\n        <p className=\"mt-3 text-xs text-muted-foreground\">{labels.addressUseOnce}</p>\n      )}\n      {saving ? (\n        <p role=\"status\" aria-live=\"polite\" className=\"mt-3 text-xs text-muted-foreground\">\n          {labels.addressSavePending ?? 'Saving address…'}\n        </p>\n      ) : saveError ? (\n        <p role=\"alert\" className=\"mt-3 text-xs text-destructive\">\n          {saveError}\n        </p>\n      ) : null}\n      <div className=\"mt-3 flex flex-wrap gap-2\">\n        <Button type=\"submit\" size=\"sm\" disabled={saving}>\n          {labels.addressSave}\n        </Button>\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          variant={VARIANT_GHOST}\n          onClick={onCancel}\n          disabled={saving}\n        >\n          {labels.addressCancel}\n        </Button>\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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","names":["province"]}

package/dist/blocks/designs/checkout-commerce-v1/view/buyer-section.d.ts

@@ -0,0 +1,24 @@
+import type { CheckoutCopy } from './types';
+export type GuestContact = {
+    name: string;
+    email: string;
+    phone: string;
+};
+export declare function BuyerSection({ uid, labels, session, name, email, phone, guestConfirmed, authPhoneComplete, errors, onFieldChange, onGuestSave, onGuestEdit, onAuthPhoneSave, onRetrySession, onStartRegistration, }: {
+    uid: string;
+    labels: CheckoutCopy;
+    session: string;
+    name: string;
+    email: string;
+    phone: string;
+    guestConfirmed: boolean;
+    authPhoneComplete: boolean;
+    errors: Record<string, string>;
+    onFieldChange: (field: 'name' | 'email' | 'phone', value: string) => void;
+    onGuestSave: () => void;
+    onGuestEdit: () => void;
+    onAuthPhoneSave: () => void;
+    onRetrySession: () => void;
+    onStartRegistration?: (contact: GuestContact) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=buyer-section.d.ts.map

package/dist/blocks/designs/checkout-commerce-v1/view/buyer-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buyer-section.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/buyer-section.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAQ3C,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,MAAM,EACN,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,MAAM,EACN,aAAa,EACb,WAAW,EACX,WAAW,EACX,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,EAAE;IACD,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,YAAY,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACzE,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;CACtD,+BAoLA"}

package/dist/blocks/designs/checkout-commerce-v1/view/buyer-section.js

@@ -0,0 +1,203 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var buyer_section_exports = {};
+__export(buyer_section_exports, {
+  BuyerSection: () => BuyerSection
+});
+module.exports = __toCommonJS(buyer_section_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_button = require("../../../../ui/button.js");
+const VARIANT_OUTLINE = "outline";
+const VARIANT_GHOST = "ghost";
+const AUTOCOMPLETE_NAME = "name";
+const AUTOCOMPLETE_EMAIL = "email";
+const AUTOCOMPLETE_TEL = "tel";
+function BuyerSection({
+  uid,
+  labels,
+  session,
+  name,
+  email,
+  phone,
+  guestConfirmed,
+  authPhoneComplete,
+  errors,
+  onFieldChange,
+  onGuestSave,
+  onGuestEdit,
+  onAuthPhoneSave,
+  onRetrySession,
+  onStartRegistration
+}) {
+  const isGuest = session === "guest";
+  const title = isGuest ? labels.buyerTitleGuest : labels.buyerTitleAuth;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "aria-labelledby": `${uid}-buyer`, "aria-busy": session === "loading", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "h3",
+      {
+        id: `${uid}-buyer`,
+        className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+        children: title
+      }
+    ),
+    session === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground", children: labels.sessionLoading }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 h-4 w-40 rounded bg-muted" })
+    ] }) : session === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-destructive", children: labels.sessionError }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_button.Button,
+        {
+          type: "button",
+          size: "xs",
+          variant: VARIANT_OUTLINE,
+          className: "mt-1.5",
+          onClick: onRetrySession,
+          children: labels.retryAction
+        }
+      )
+    ] }) : !isGuest ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-sm font-medium", children: name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground", children: [email, authPhoneComplete ? phone : ""].filter(Boolean).join(" \xB7 ") }),
+      !authPhoneComplete ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "form",
+        {
+          className: "mt-2",
+          onSubmit: (event) => {
+            event.preventDefault();
+            onAuthPhoneSave();
+          },
+          noValidate: true,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `${uid}-buyer-phone`, className: "text-xs font-medium", children: labels.contactPhone }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-1 flex flex-wrap items-start gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  id: `${uid}-buyer-phone`,
+                  type: "tel",
+                  autoComplete: AUTOCOMPLETE_TEL,
+                  value: phone,
+                  onChange: (event) => onFieldChange("phone", event.target.value),
+                  "aria-invalid": errors.contactPhone ? true : void 0,
+                  "aria-describedby": errors.contactPhone ? `${uid}-buyer-phone-error` : void 0,
+                  className: "h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "submit", size: "sm", children: labels.buyerSavePhone })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.buyerPhoneHint }),
+            errors.contactPhone ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: `${uid}-buyer-phone-error`, className: "mt-1 text-xs text-destructive", children: errors.contactPhone }) : null
+          ]
+        }
+      ) : null
+    ] }) : guestConfirmed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-1 flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground", children: [email, phone].filter(Boolean).join(" \xB7 ") })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", size: "sm", variant: VARIANT_OUTLINE, onClick: onGuestEdit, children: labels.contactEdit })
+      ] }),
+      onStartRegistration ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground", children: labels.accountOptional }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            type: "button",
+            size: "xs",
+            variant: VARIANT_GHOST,
+            onClick: () => onStartRegistration({ name, email, phone }),
+            children: labels.createAccount
+          }
+        )
+      ] }) : null
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "form",
+      {
+        className: "mt-2 grid gap-3 sm:grid-cols-2",
+        onSubmit: (event) => {
+          event.preventDefault();
+          onGuestSave();
+        },
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sm:col-span-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `${uid}-buyer-name`, className: "text-xs font-medium", children: labels.contactName }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: `${uid}-buyer-name`,
+                type: "text",
+                autoComplete: AUTOCOMPLETE_NAME,
+                value: name,
+                onChange: (event) => onFieldChange("name", event.target.value),
+                "aria-invalid": errors.contactName ? true : void 0,
+                "aria-describedby": errors.contactName ? `${uid}-buyer-name-error` : void 0,
+                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+              }
+            ),
+            errors.contactName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: `${uid}-buyer-name-error`, className: "mt-1 text-xs text-destructive", children: errors.contactName }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `${uid}-buyer-email`, className: "text-xs font-medium", children: labels.contactEmail }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: `${uid}-buyer-email`,
+                type: "email",
+                autoComplete: AUTOCOMPLETE_EMAIL,
+                value: email,
+                onChange: (event) => onFieldChange("email", event.target.value),
+                "aria-invalid": errors.contactEmail ? true : void 0,
+                "aria-describedby": errors.contactEmail ? `${uid}-buyer-email-error` : void 0,
+                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+              }
+            ),
+            errors.contactEmail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: `${uid}-buyer-email-error`, className: "mt-1 text-xs text-destructive", children: errors.contactEmail }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `${uid}-buyer-phone`, className: "text-xs font-medium", children: labels.contactPhone }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: `${uid}-buyer-phone`,
+                type: "tel",
+                autoComplete: AUTOCOMPLETE_TEL,
+                value: phone,
+                onChange: (event) => onFieldChange("phone", event.target.value),
+                "aria-invalid": errors.contactPhone ? true : void 0,
+                "aria-describedby": errors.contactPhone ? `${uid}-buyer-phone-error` : void 0,
+                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+              }
+            ),
+            errors.contactPhone ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: `${uid}-buyer-phone-error`, className: "mt-1 text-xs text-destructive", children: errors.contactPhone }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sm:col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "submit", size: "sm", children: labels.buyerContinue }) })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BuyerSection
+});
+//# sourceMappingURL=buyer-section.js.map