@ecomiq/storefront 3.1.1 → 3.3.0

package/dist/{use-checkout-Jdk8P12A.js → use-checkout-BmVOLp_x.js}

@@ -1,4 +1,4 @@
-import { checkoutAddressDefaults, checkoutProgress, checkoutStep, defaultPaymentMethod, needsShipping } from "./checkout-DsI1MY14.js";
+import { checkoutAddressDefaults, checkoutProgress, checkoutStep, defaultPaymentMethod, needsShipping } from "./checkout-DnfQ8WhP.js";
 import { useCustomerCsrfToken } from "./customer-csrf-C1oDX-Py.js";
 import { useFetcher, useNavigation, useSearchParams } from "react-router";
 // src/use-checkout.ts

package/dist/{use-checkout-payment-BGX-BE6D.js → use-checkout-payment-C2t511ck.js}

@@ -1,4 +1,4 @@
-import { findStripeWallet } from "./stripe-dialog-D88qfkUS.js";
+import { findStripeWallet } from "./stripe-dialog-vlflY1WI.js";
 import { usePaymentToken } from "./use-payment-token-CErx-tN-.js";
 import { gathered } from "./checkout-form-CbOIdENC.js";
 import { useRef, useState } from "react";

package/dist/{voucher-payment-B3o9ybg6.js → voucher-payment-Cbq4DRiL.js}

@@ -1,4 +1,4 @@
-import { useStorefrontLocale, useStorefrontText } from "./storefront-language-Bnt-TU2F.js";
+import { useStorefrontLocale, useStorefrontText } from "./storefront-language-20hJejSi.js";
 import { money } from "./money-DtGOtDri.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/voucher-payment.tsx

package/dist/{worker-cbXmLvfR.js → worker-BxlCSjSF.js}

@@ -1,9 +1,9 @@
 import { cartCookie } from "./cart-D7DxZ2lD.js";
-import "./preview-cart-COIP3Vfh.js";
+import "./preview-cart-CRSPTs6g.js";
 import { productPreviewFrom, productPreviewResponse } from "./product-preview-BspMAecJ.js";
-import { StorefrontSdkTiming, durationMetric } from "./telemetry-HuZXWBPi.js";
+import { StorefrontSdkTiming, durationMetric } from "./telemetry-k9sM5iBG.js";
 import { privateCustomerResponse, rejectCrossOriginAction, rejectCustomerCsrf } from "./request-security-CRsRMgwj.js";
-import { seoResponse } from "./seo-D9UdUMg9.js";
+import { seoResponse } from "./seo-Cz1O5oxh.js";
 import { confirmingPaymentUrl } from "./payment-return-5cjypwIw.js";
 import { RouterContextProvider, createContext, createRequestHandler } from "react-router";
 import { STOREFRONT_CACHE_REVISION_HEADER, StorefrontCacheTokenSchema } from "@ecomiq/core/storefront-cache-revision";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomiq/storefront",
-  "version": "3.1.1",
+  "version": "3.3.0",
   "description": "Ecomiq para React Router: tienda, carrito, sesión de cliente y catálogo en un Worker",
   "type": "module",
   "license": "MIT",
@@ -91,10 +91,12 @@
     "@babel/parser": "^7.29.7",
     "@babel/types": "^7.29.7",
     "@stripe/stripe-js": "^9.17.0",
+    "libphonenumber-js": "^1.13.15",
     "qrcode-generator": "^2.0.4",
+    "react-phone-number-input": "^3.4.17",
     "sharp": "^0.35.5",
     "zod": "^4.6.6",
-    "@ecomiq/core": "^1.1.1"
+    "@ecomiq/core": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^19.2.0",

package/src/sections/account-addresses.tsx

@@ -1,11 +1,11 @@
 import type { CustomerAddress } from "@ecomiq/core";
-import { useState, type ReactNode } from "react";
+import { useState, type ComponentProps, type ReactNode } from "react";
 import { useNavigation } from "react-router";
 import { Badge } from "@theme/ui/badge";
 import { Button } from "@theme/ui/button";
 import { Input } from "@theme/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@theme/ui/select";
-import { useStorefrontText, type SectionCatalog } from "../index";
+import { PhoneField, useStorefrontText, type SectionCatalog } from "../index";
 import { AddressForm, addressDefaults, placeValue, useGeoCascade, type AddressActionData, type AddressDefaults } from "../entries/account";
 
 export const catalog: SectionCatalog = {
@@ -59,6 +59,10 @@ function PlaceSelect({ name, label, items, value, disabled, onChange }: { name:
   );
 }
 
+function PhoneInputBox(props: ComponentProps<"input">) {
+  return <Input {...props} className="min-w-0 flex-1 rounded-s-none" />;
+}
+
 function AddressFields({ countries, defaults, label }: { countries: Country[]; defaults: AddressDefaults; label: string }) {
   const storefrontTranslate = useStorefrontText();
   const geo = useGeoCascade({ ...defaults, country: defaults.country ?? countries[0]?.code });
@@ -83,21 +87,21 @@ function AddressFields({ countries, defaults, label }: { countries: Country[]; d
       ) : (
         <>
           <Labeled label={storefrontTranslate("Región")}>
-            <Input name="department" defaultValue={defaults.department ?? ""} required />
+            <Input name="department" defaultValue={defaults.department ?? ""} maxLength={100} required />
           </Labeled>
           <Labeled label={storefrontTranslate("Ciudad")}>
-            <Input name="district" defaultValue={defaults.district ?? ""} required />
+            <Input name="district" defaultValue={defaults.district ?? ""} maxLength={100} required />
           </Labeled>
         </>
       )}
       <Labeled label={storefrontTranslate("Dirección")} className="sm:col-span-2">
-        <Input name="line" autoComplete="street-address" defaultValue={defaults.line ?? ""} required />
+        <Input name="line" autoComplete="street-address" defaultValue={defaults.line ?? ""} maxLength={200} required />
       </Labeled>
       <Labeled label={storefrontTranslate("Referencia (opcional)")}>
-        <Input name="reference" defaultValue={defaults.reference ?? ""} />
+        <Input name="reference" defaultValue={defaults.reference ?? ""} maxLength={500} />
       </Labeled>
       <Labeled label={storefrontTranslate("Celular")}>
-        <Input name="phone" type="tel" autoComplete="tel" defaultValue={defaults.phone ?? ""} />
+        <PhoneField countryCode={geo.country} initial={defaults.phone ?? ""} required inputComponent={PhoneInputBox} />
       </Labeled>
     </div>
   );

package/src/sections/account-profile.tsx

@@ -1,9 +1,9 @@
 import type { CustomerMe } from "@ecomiq/core";
-import type { ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import { useNavigation } from "react-router";
 import { Button } from "@theme/ui/button";
 import { Input } from "@theme/ui/input";
-import { useStorefrontText, type SectionCatalog } from "../index";
+import { PhoneField, useStorefrontText, type SectionCatalog } from "../index";
 import { CustomerDocumentFields, ProfileForm, type ProfileActionData } from "../entries/account";
 
 export const catalog: SectionCatalog = {
@@ -21,9 +21,13 @@ function Labeled({ label, hint, className = "", children }: { label: string; hin
   );
 }
 
-export function AccountProfile({ loaderData, actionData }: { loaderData: { me: CustomerMe; countries: { code: string; name: string }[] }; actionData?: ProfileActionData }) {
+function PhoneInputBox(props: ComponentProps<"input">) {
+  return <Input {...props} className="min-w-0 flex-1 rounded-s-none" />;
+}
+
+export function AccountProfile({ loaderData, actionData }: { loaderData: { countryCode: string; me: CustomerMe; countries: { code: string; name: string }[] }; actionData?: ProfileActionData }) {
   const storefrontTranslate = useStorefrontText();
-  const { me, countries } = loaderData;
+  const { me, countries, countryCode } = loaderData;
   const busy = useNavigation().state !== "idle";
   return (
     <div className="flex flex-col gap-6">
@@ -48,9 +52,10 @@ export function AccountProfile({ loaderData, actionData }: { loaderData: { me: C
             <Labeled label={storefrontTranslate("Apellido")}>
               <Input name="lastName" autoComplete="family-name" defaultValue={me.lastName ?? ""} maxLength={100} />
             </Labeled>
-            <Labeled label={storefrontTranslate("Celular")}>
-              <Input name="phone" type="tel" autoComplete="tel" defaultValue={me.phone ?? ""} />
-            </Labeled>
+            <div className="flex flex-col gap-1.5 text-sm">
+              <label htmlFor="phone" className="font-medium">{storefrontTranslate("Celular")}</label>
+              <PhoneField countryCode={countryCode} initial={me.phone ?? ""} inputComponent={PhoneInputBox} />
+            </div>
             <div className="flex flex-col gap-1.5 text-sm">
               <span className="font-medium">{storefrontTranslate("Correo")}</span>
               <p className="flex h-10 items-center text-muted-foreground">{me.email ?? "—"}</p>

package/src/sections/checkout.tsx

@@ -5,12 +5,22 @@ import { Button } from "@theme/ui/button";
 import { BankAccountList, useStorefrontText, PaymentLogo, money, section, setting, type SectionCatalog, type SectionProps, type SectionRoot } from "../index";
 import { placeValue, useGeoCascade } from "../entries/account";
 import {
+  ADDRESS_LINE_MAX_LENGTH,
+  ADDRESS_LINE_MIN_LENGTH,
+  ADDRESS_REFERENCE_MAX_LENGTH,
   CheckoutForm,
   CulqiAuthentication,
+  EMAIL_ERROR,
+  EMAIL_MAX_LENGTH,
+  EMAIL_PATTERN,
   InvoiceFields,
   MercadoPagoDialog,
   OrderBumpForm,
   PaymentMethods,
+  PERSON_NAME_MAX_LENGTH,
+  PhoneField,
+  PLACE_NAME_MAX_LENGTH,
+  POSTAL_CODE_MAX_LENGTH,
   PromoCodeForm,
   StripeAuthentication,
   StripeDialog,
@@ -96,6 +106,31 @@ function Field({ label, className, ...props }: ComponentProps<"input"> & { label
   );
 }
 
+function PhoneInputBox({ className, ...props }: ComponentProps<"input">) {
+  const storefrontTranslate = useStorefrontText();
+  const label = storefrontTranslate("Celular");
+  return (
+    <label className={`relative block flex-1 ${className ?? ""}`}>
+      <input placeholder={label} className={`${FIELD} rounded-s-none`} {...props} />
+      <span className={FLOAT}>{label}</span>
+    </label>
+  );
+}
+
+function CheckoutPhoneField({ countryCode, initial, className }: { countryCode: string; initial: string; className?: string }) {
+  return (
+    <PhoneField
+      countryCode={countryCode}
+      initial={initial}
+      required
+      className={className}
+      inputComponent={PhoneInputBox}
+      selectClassName="rounded-s-md border border-e-0 border-input bg-background px-3 text-foreground focus-within:border-ring focus-within:ring-1 focus-within:ring-ring group-data-[fields=filled]/checkout:border-transparent group-data-[fields=filled]/checkout:bg-muted"
+      errorClassName="text-sm text-destructive sm:col-span-2"
+    />
+  );
+}
+
 function Choice({ label, className, children, ...props }: SelectHTMLAttributes<HTMLSelectElement> & { label: string; name: string }) {
   return (
     <label className={`relative block ${className ?? ""}`}>
@@ -160,13 +195,14 @@ function Address({ countries, defaults }: { countries: { code: string; name: str
         </>
       ) : (
         <>
-          <Field label={storefrontTranslate("Región")} name="department" defaultValue={defaults.department ?? ""} required />
-          <Field label={storefrontTranslate("Ciudad")} name="district" defaultValue={defaults.district ?? ""} required />
+          <Field label={storefrontTranslate("Región")} name="department" defaultValue={defaults.department ?? ""} maxLength={PLACE_NAME_MAX_LENGTH} required />
+          <Field label={storefrontTranslate("Ciudad")} name="district" defaultValue={defaults.district ?? ""} maxLength={PLACE_NAME_MAX_LENGTH} required />
         </>
       )}
-      <Field label={storefrontTranslate("Dirección")} name="line" autoComplete="street-address" defaultValue={defaults.line ?? ""} required className="sm:col-span-2" />
-      <Field label={storefrontTranslate("Referencia (opcional)")} name="reference" defaultValue={defaults.reference ?? ""} />
-      <Field label={storefrontTranslate("Celular")} name="phone" type="tel" autoComplete="tel" defaultValue={defaults.phone ?? ""} required />
+      <Field label={storefrontTranslate("Dirección")} name="line" autoComplete="street-address" defaultValue={defaults.line ?? ""} minLength={ADDRESS_LINE_MIN_LENGTH} maxLength={ADDRESS_LINE_MAX_LENGTH} required className="sm:col-span-2" />
+      <Field label={storefrontTranslate("Referencia (opcional)")} name="reference" defaultValue={defaults.reference ?? ""} maxLength={ADDRESS_REFERENCE_MAX_LENGTH} />
+      {geo.structured ? null : <Field label={storefrontTranslate("Código postal (opcional)")} name="postalCode" autoComplete="postal-code" defaultValue={defaults.postalCode ?? ""} maxLength={POSTAL_CODE_MAX_LENGTH} />}
+      <CheckoutPhoneField countryCode={country} initial={defaults.phone ?? ""} className={geo.structured ? "" : "sm:col-span-2"} />
     </div>
   );
 }
@@ -367,10 +403,10 @@ export function Checkout({ data, result, ...root }: { data: CheckoutData; result
               >
                 {storefrontTranslate("Contacto")}</Heading>
               <CheckoutForm single={single} intent="contact" className="grid gap-3 sm:grid-cols-2">
-                <Field label={storefrontTranslate("Correo")} name="email" type="email" autoComplete="email" defaultValue={cart.email ?? me?.email ?? ""} required className="sm:col-span-2" />
-                <Field label={storefrontTranslate("Nombre")} name="firstName" autoComplete="given-name" defaultValue={cart.firstName ?? me?.firstName ?? ""} required />
-                <Field label={storefrontTranslate("Apellidos")} name="lastName" autoComplete="family-name" defaultValue={cart.lastName ?? me?.lastName ?? ""} required />
-                <Field label={storefrontTranslate("Celular")} name="phone" type="tel" autoComplete="tel" defaultValue={cart.phone ?? me?.phone ?? ""} required className="sm:col-span-2" />
+                <Field label={storefrontTranslate("Correo")} name="email" type="email" autoComplete="email" defaultValue={cart.email ?? me?.email ?? ""} pattern={EMAIL_PATTERN} title={storefrontTranslate(EMAIL_ERROR)} maxLength={EMAIL_MAX_LENGTH} required className="sm:col-span-2" />
+                <Field label={storefrontTranslate("Nombre")} name="firstName" autoComplete="given-name" defaultValue={cart.firstName ?? me?.firstName ?? ""} maxLength={PERSON_NAME_MAX_LENGTH} required />
+                <Field label={storefrontTranslate("Apellidos")} name="lastName" autoComplete="family-name" defaultValue={cart.lastName ?? me?.lastName ?? ""} maxLength={PERSON_NAME_MAX_LENGTH} required />
+                <CheckoutPhoneField countryCode={data.countryCode} initial={cart.phone ?? me?.phone ?? ""} className="sm:col-span-2" />
                 <InvoiceFields cart={cart}>
                   {(invoice) => (
                     <div className="flex flex-col gap-3 sm:col-span-2">

package/src/sections/complaint-book.tsx

@@ -17,6 +17,7 @@ import {
   complaintBookNumber,
   CustomerCsrfField,
   money,
+  PhoneField,
   type ComplaintBookActionData,
   type ComplaintBookData,
   type SectionCatalog,
@@ -68,6 +69,10 @@ function providerRows(book: ComplaintBookConfiguration): Row[] {
   ];
 }
 
+function PhoneInputBox(props: ComponentProps<"input">) {
+  return <Input {...props} className="min-w-0 flex-1 rounded-s-none" />;
+}
+
 function Field({ label, name, className, ...props }: ComponentProps<"input"> & { label: string; name: string }) {
   return (
     <div className={`flex flex-col gap-2 ${className ?? ""}`}>
@@ -149,7 +154,7 @@ function Attachments() {
   );
 }
 
-function ComplaintForm({ book, error, countries }: { book: ComplaintBookConfiguration; error: string | null; countries: ComplaintBookData["countries"] }) {
+function ComplaintForm({ book, error, countries, storeCountry }: { storeCountry: string; book: ComplaintBookConfiguration; error: string | null; countries: ComplaintBookData["countries"] }) {
   const storefrontTranslate = useStorefrontText();
   const busy = useNavigation().state !== "idle";
   const [kind, setKind] = useState<keyof typeof COMPLAINT_DOCUMENT_TYPES>("nationalId");
@@ -188,7 +193,10 @@ function ComplaintForm({ book, error, countries }: { book: ComplaintBookConfigur
         </label>
         <Field label={storefrontTranslate("Número de documento")} name="documentNumber" inputMode={rule.inputMode} maxLength={rule.maxLength} pattern={rule.pattern} title={storefrontTranslate(rule.error)} autoComplete="off" required />
         <Field label={storefrontTranslate("Dirección")} name="consumerAddress" autoComplete="street-address" maxLength={300} required className="sm:col-span-2" />
-        <Field label={storefrontTranslate("Celular")} name="consumerPhone" type="tel" autoComplete="tel" maxLength={30} required />
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="complaint-consumerPhone">{storefrontTranslate("Celular")}</Label>
+          <PhoneField countryCode={storeCountry} initial="" name="consumerPhone" id="complaint-consumerPhone" required inputComponent={PhoneInputBox} />
+        </div>
         <Field label={storefrontTranslate("Correo")} name="consumerEmail" type="email" autoComplete="email" maxLength={254} required />
         <div className="flex items-center gap-2 sm:col-span-2">
           <Checkbox id="complaint-minor" name="minor" checked={minor} onCheckedChange={(checked) => setMinor(checked === true)} />
@@ -200,7 +208,10 @@ function ComplaintForm({ book, error, countries }: { book: ComplaintBookConfigur
           <legend className={LEGEND}>{storefrontTranslate("Padre, madre o apoderado")}</legend>
           <Field label={storefrontTranslate("Nombre completo")} name="guardianName" maxLength={200} required className="sm:col-span-2" />
           <Field label={storefrontTranslate("Dirección")} name="guardianAddress" maxLength={300} required className="sm:col-span-2" />
-          <Field label={storefrontTranslate("Celular")} name="guardianPhone" type="tel" maxLength={30} required />
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="complaint-guardianPhone">{storefrontTranslate("Celular")}</Label>
+            <PhoneField countryCode={storeCountry} initial="" name="guardianPhone" id="complaint-guardianPhone" required inputComponent={PhoneInputBox} />
+          </div>
           <Field label={storefrontTranslate("Correo")} name="guardianEmail" type="email" maxLength={254} required />
         </fieldset>
       ) : null}
@@ -317,7 +328,7 @@ export function ComplaintBook({ loaderData, actionData, ...root }: { loaderData:
       ) : (
         <>
           <Rows title={storefrontTranslate("Proveedor")} rows={providerRows(book)} />
-          <ComplaintForm countries={loaderData.countries} book={book} error={error} />
+          <ComplaintForm storeCountry={loaderData.countryCode} countries={loaderData.countries} book={book} error={error} />
         </>
       )}
     </section>