@reblu/site-blocks 0.7.0 → 0.8.0

package/dist/index.d.cts

@@ -645,6 +645,14 @@ interface CheckoutFormProps {
     contact: CheckoutContactValues;
     onContactChange: (values: CheckoutContactValues) => void;
     contactErrors?: CheckoutContactErrors;
+    /** Country asserted by the SITE for national phone input; omit rather than guessing. */
+    phoneRegion?: string;
+    /** Optional raw checkout API error body; only INVALID_INPUT/customerPhone marks the phone field. */
+    checkoutError?: {
+        code?: unknown;
+        error?: unknown;
+        details?: unknown;
+    } | null;
     discountCode: string;
     onDiscountCodeChange: (value: string) => void;
     onApplyDiscount: () => void;
@@ -670,7 +678,7 @@ interface CheckoutFormProps {
     locale?: string;
     className?: string;
 }
-declare function CheckoutForm({ contact, onContactChange, contactErrors, discountCode, onDiscountCodeChange, onApplyDiscount, onRemoveDiscount, appliedDiscount, discountApplying, discountError, loginPrompt, children, submitting, submitDisabled, onSubmit, labels, currencyCode, locale, className, }: CheckoutFormProps): react_jsx_runtime.JSX.Element;
+declare function CheckoutForm({ contact, onContactChange, contactErrors, phoneRegion, checkoutError, discountCode, onDiscountCodeChange, onApplyDiscount, onRemoveDiscount, appliedDiscount, discountApplying, discountError, loginPrompt, children, submitting, submitDisabled, onSubmit, labels, currencyCode, locale, className, }: CheckoutFormProps): react_jsx_runtime.JSX.Element;
 
 /**
  * `OrderConfirmation` — presentational order-confirmation view (REB-829,

package/dist/index.d.ts

@@ -645,6 +645,14 @@ interface CheckoutFormProps {
     contact: CheckoutContactValues;
     onContactChange: (values: CheckoutContactValues) => void;
     contactErrors?: CheckoutContactErrors;
+    /** Country asserted by the SITE for national phone input; omit rather than guessing. */
+    phoneRegion?: string;
+    /** Optional raw checkout API error body; only INVALID_INPUT/customerPhone marks the phone field. */
+    checkoutError?: {
+        code?: unknown;
+        error?: unknown;
+        details?: unknown;
+    } | null;
     discountCode: string;
     onDiscountCodeChange: (value: string) => void;
     onApplyDiscount: () => void;
@@ -670,7 +678,7 @@ interface CheckoutFormProps {
     locale?: string;
     className?: string;
 }
-declare function CheckoutForm({ contact, onContactChange, contactErrors, discountCode, onDiscountCodeChange, onApplyDiscount, onRemoveDiscount, appliedDiscount, discountApplying, discountError, loginPrompt, children, submitting, submitDisabled, onSubmit, labels, currencyCode, locale, className, }: CheckoutFormProps): react_jsx_runtime.JSX.Element;
+declare function CheckoutForm({ contact, onContactChange, contactErrors, phoneRegion, checkoutError, discountCode, onDiscountCodeChange, onApplyDiscount, onRemoveDiscount, appliedDiscount, discountApplying, discountError, loginPrompt, children, submitting, submitDisabled, onSubmit, labels, currencyCode, locale, className, }: CheckoutFormProps): react_jsx_runtime.JSX.Element;
 
 /**
  * `OrderConfirmation` — presentational order-confirmation view (REB-829,

package/dist/index.js

@@ -13948,6 +13948,7 @@ function CheckoutLoginPrompt({
 
 // src/components/checkout-form.tsx
 import { cn as cn12 } from "@reblu/site-ui/utils";
+import { PhoneInput } from "@reblu/site-ui/phone-input";
 import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_LABELS6 = {
   contactTitle: "Datos de contacto",
@@ -13969,6 +13970,8 @@ function CheckoutForm({
   contact,
   onContactChange,
   contactErrors,
+  phoneRegion,
+  checkoutError,
   discountCode,
   onDiscountCodeChange,
   onApplyDiscount,
@@ -13987,6 +13990,10 @@ function CheckoutForm({
   className
 }) {
   const t = { ...DEFAULT_LABELS6, ...labels };
+  const details = checkoutError?.details;
+  const rejectedPhone = checkoutError?.code === "INVALID_INPUT" && typeof details === "object" && details !== null && !Array.isArray(details) && "field" in details && details.field === "customerPhone" && typeof checkoutError.error === "string" && checkoutError.error.trim().length > 0;
+  const phoneError = contactErrors?.phone ?? (rejectedPhone ? checkoutError.error : void 0);
+  const generalError = checkoutError && !rejectedPhone ? getShopErrorMessage(typeof checkoutError.code === "string" ? checkoutError.code : void 0) : null;
   function patchContact(patch3) {
     onContactChange({ ...contact, ...patch3 });
   }
@@ -14047,27 +14054,21 @@ function CheckoutForm({
                 ),
                 contactErrors?.email && /* @__PURE__ */ jsx12("p", { className: "text-xs text-destructive", children: contactErrors.email })
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsx12("label", { htmlFor: "checkout-form-phone", className: "text-sm font-medium", children: t.phoneLabel }),
-                /* @__PURE__ */ jsx12(
-                  "input",
-                  {
-                    id: "checkout-form-phone",
-                    type: "tel",
-                    autoComplete: "tel",
-                    value: contact.phone ?? "",
-                    onChange: (e) => patchContact({ phone: e.target.value }),
-                    className: cn12(
-                      "w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20",
-                      contactErrors?.phone ? "border-destructive" : "border-border focus:border-primary"
-                    )
-                  }
-                ),
-                contactErrors?.phone && /* @__PURE__ */ jsx12("p", { className: "text-xs text-destructive", children: contactErrors.phone })
-              ] })
+              /* @__PURE__ */ jsx12("div", { className: "space-y-1", children: /* @__PURE__ */ jsx12(
+                PhoneInput,
+                {
+                  id: "checkout-form-phone",
+                  label: t.phoneLabel,
+                  region: phoneRegion,
+                  value: contact.phone ?? "",
+                  onChange: (phone) => patchContact({ phone }),
+                  error: phoneError
+                }
+              ) })
             ] })
           ] }),
           children2,
+          generalError ? /* @__PURE__ */ jsx12("p", { role: "alert", className: "text-sm text-destructive", children: generalError }) : null,
           /* @__PURE__ */ jsxs11("section", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx12("h2", { className: "border-b border-border pb-2 text-lg font-semibold", children: t.discountTitle }),
             appliedDiscount ? /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-4 py-3 dark:border-green-800 dark:bg-green-900/20", children: [