@ecomiq/storefront 1.1.4 → 1.1.5

package/dist/chunks/client.js

@@ -1,8 +1,8 @@
 "use client";
 import { z } from 'zod';
-import { QueryClient, hydrate, QueryClientProvider, useMutation, useQuery, useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
+import { QueryClient, hydrate, QueryClientProvider, useQueryClient, useQuery, useMutation, useInfiniteQuery } from '@tanstack/react-query';
 import React2, { createContext, forwardRef, useRef, useState, useCallback, useMemo, useImperativeHandle, useEffect, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { toast } from 'sonner';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
@@ -18,6 +18,22 @@ function isCartNotActiveApiError(error) {
   return keys.includes("Carts.NotActive");
 }
 
+// src/core/constants/currency.ts
+var DEFAULT_COUNTRY_CODE = "PE";
+var DEFAULT_CURRENCY_CODE = "PEN";
+var STOREFRONT_HEADERS = {
+  storeId: "X-Store-Id",
+  storeDomain: "X-Store-Domain",
+  identityScope: "x-Identity-Scope",
+  tenantId: "x-Tenant-Id",
+  storeIdLower: "x-store-id"};
+var countryCurrency = {
+  "PEN": "es-PE",
+  "USD": "en-US",
+  "COP": "es-CO",
+  "MXN": "es-MX"
+};
+
 // src/core/client/store-api-client.ts
 var STORE_API_PATH = "/api/store";
 var serverRequestOriginGetter = null;
@@ -65,11 +81,11 @@ var StoreApiClient = class {
     headers.set("Accept-Encoding", "identity");
     const explicitStoreId = options?.xStoreId?.trim();
     const runtimeStoreId = explicitStoreId || (typeof window === "undefined" ? serverStoreIdGetter : clientStoreIdGetter);
-    if (runtimeStoreId && !headers.has("x-store-id")) {
-      headers.set("X-Store-Id", runtimeStoreId);
+    if (runtimeStoreId && !headers.has(STOREFRONT_HEADERS.storeIdLower)) {
+      headers.set(STOREFRONT_HEADERS.storeId, runtimeStoreId);
     }
     if (options?.xStoreDomain) {
-      headers.set("X-Store-Domain", options.xStoreDomain);
+      headers.set(STOREFRONT_HEADERS.storeDomain, options.xStoreDomain);
     }
     if (options?.xCartId) {
       headers.set("X-Cart-Token", options.xCartId);
@@ -352,14 +368,15 @@ async function getStorefrontProducts(params, cacheKey) {
   const path = `products?${searchParams.toString()}`;
   const client = await getStoreApiClient();
   const response = await client.get(path, {
-    cacheKey
+    cacheKey,
+    noStore: true
   });
   return StorefrontProductsResponseSchema.parse(response);
 }
 async function getStorefrontProductBySlug(slug) {
   const path = `products/${encodeURIComponent(slug)}`;
   const client = await getStoreApiClient();
-  const response = await client.get(path);
+  const response = await client.get(path, { noStore: true });
   return StorefrontProductDetailSchema.parse(response);
 }
 var StorefrontCollectionSchema = z.object({
@@ -455,7 +472,7 @@ var CartAddressSchema = z.object({
   name: z.string().min(1),
   address1: z.string().min(1),
   city: z.string().min(1),
-  countryCode: z.string().min(2),
+  countryCode: z.string().min(2).max(2),
   company: z.string().nullable().optional(),
   address2: z.string().nullable().optional(),
   province: z.string().nullable().optional(),
@@ -500,7 +517,7 @@ z.object({
   name: z.string().nullable().optional(),
   address1: z.string(),
   city: z.string(),
-  countryCode: z.string(),
+  countryCode: z.string().min(2).max(2),
   company: z.string().nullable().optional(),
   address2: z.string().nullable().optional(),
   province: z.string().nullable().optional(),
@@ -914,7 +931,7 @@ function customerMeToProfilePatch(me) {
     companyName: me.companyName,
     dateOfBirth: me.dateOfBirth,
     consent: me.consent,
-    countryIsoCode: me.countryIsoCode || "PE"
+    countryIsoCode: me.countryIsoCode || DEFAULT_COUNTRY_CODE
   };
 }
 function customerAuthOptions(accessToken) {
@@ -977,7 +994,7 @@ var CustomerOrderShippingAddressSchema = z.object({
   address1: z.string(),
   address2: z.string().nullable().optional(),
   city: z.string().nullable().optional(),
-  countryCode: z.string(),
+  countryCode: z.string().min(2).max(2),
   province: z.string().nullable().optional(),
   postalCode: z.string().nullable().optional(),
   district: z.string().nullable().optional(),
@@ -1142,7 +1159,7 @@ var OrderDraftSchema = z.object({
   customerId: z.coerce.string().nullable().optional(),
   cartId: z.string().nullable().optional(),
   draftNumber: z.string(),
-  currencyCode: z.string().optional().default("PEN"),
+  currencyCode: z.string().optional().default(DEFAULT_CURRENCY_CODE),
   source: z.string().nullable().optional(),
   notes: z.string().nullable().optional(),
   email: z.string().nullable().optional(),
@@ -1290,7 +1307,8 @@ function useStoreProducts() {
   const useStorefrontProductsList = (params) => {
     return useQuery({
       queryKey: ["storefront", "products", params],
-      queryFn: () => getStorefrontProducts(params)
+      queryFn: () => getStorefrontProducts(params),
+      staleTime: 0
     });
   };
   const useStorefrontInfiniteProducts = (params) => {
@@ -1298,14 +1316,16 @@ function useStoreProducts() {
       queryKey: ["storefront", "products", "infinite", params],
       queryFn: ({ pageParam = 1 }) => getStorefrontProducts({ ...params, page: pageParam }),
       getNextPageParam: (lastPage) => lastPage.pageIndex < lastPage.totalPages ? lastPage.pageIndex + 1 : void 0,
-      initialPageParam: 1
+      initialPageParam: 1,
+      staleTime: 0
     });
   };
   const useProductBySlug = (slug) => {
     return useQuery({
       queryKey: ["storefront", "product", "slug", slug],
       queryFn: () => getStorefrontProductBySlug(slug),
-      enabled: !!slug
+      enabled: !!slug,
+      staleTime: 0
     });
   };
   const useRefreshStorefrontProducts = () => {
@@ -1757,8 +1777,17 @@ var StorefrontCmsCustomScriptsSchema = z.object({
   head: z.string().nullable().optional(),
   bodyEnd: z.string().nullable().optional()
 });
+var StorefrontCmsChannelsSchema = z.object({
+  storefront: z.object({
+    enabled: z.boolean().optional()
+  }).optional(),
+  pos: z.object({
+    enabled: z.boolean().optional()
+  }).optional()
+});
 var StorefrontCmsSettingsSchema = z.object({
   themeKey: z.string().optional(),
+  channels: StorefrontCmsChannelsSchema.optional(),
   branding: StorefrontCmsBrandingSchema.optional(),
   seo: StorefrontCmsSeoSchema.optional(),
   contact: StorefrontCmsContactSchema.optional(),
@@ -1770,6 +1799,7 @@ var StorefrontCmsPageSchema = z.object({
   id: z.string(),
   name: z.string(),
   slug: z.string(),
+  channel: z.string().transform((value) => value.toLowerCase()).pipe(z.enum(["storefront", "pos"])).default("storefront"),
   layout: z.string().optional(),
   version: z.number().optional(),
   settings: z.record(z.string(), z.unknown()).optional().nullable(),
@@ -1821,7 +1851,7 @@ function normalizeStorefrontSettingsPayload(v) {
   const parsed = StorefrontSettingsLegacyFlatSchema.safeParse(raw);
   if (!parsed.success) return body;
   const l = parsed.data;
-  const currency = l.currency?.trim() ? l.currency : "PEN";
+  const currency = l.currency?.trim() ? l.currency : DEFAULT_CURRENCY_CODE;
   const language = l.language?.trim() ? l.language : "es";
   const slug = l.slug?.trim() ? l.slug : l.id;
   return {
@@ -1916,10 +1946,10 @@ function buildEcomiqOAuthIdentityHeaders(settings) {
   const checkout = record.checkoutSettings;
   const identityScope = checkout?.identityScope === "tenant" ? "tenant" : "store";
   const headers = {
-    "x-Identity-Scope": identityScope,
-    "x-Store-Id": record.id
+    [STOREFRONT_HEADERS.identityScope]: identityScope,
+    [STOREFRONT_HEADERS.storeId]: record.id
   };
-  if (record.tenantId) headers["x-Tenant-Id"] = record.tenantId;
+  if (record.tenantId) headers[STOREFRONT_HEADERS.tenantId] = record.tenantId;
   return headers;
 }
 
@@ -1935,6 +1965,175 @@ async function signInWithEcomiqCredentials(authClient, settings, credentials) {
   }
   return response;
 }
+
+// src/react/pages/checkout-page/lib/cart-mappers.ts
+function mapApiItemsToCartItems(items) {
+  if (!items?.length) return [];
+  return items.map((raw) => {
+    const item = raw;
+    const price = Number(item.unitPrice);
+    const quantity = Number(item.quantity);
+    const variantId = String(item.variantId ?? "");
+    if (!Number.isFinite(price) || !Number.isFinite(quantity) || !variantId) return null;
+    return {
+      id: item.id,
+      title: item.title,
+      image: String(item.thumbnail ?? ""),
+      size: String(item.variantLabel ?? "\u2014"),
+      price,
+      quantity,
+      variantId,
+      variantSku: item.variantSku ?? void 0,
+      variantLabel: item.variantLabel ?? void 0
+    };
+  }).filter(Boolean);
+}
+function shippingValuesFromCartAddress(cartData) {
+  const addr = cartData.shippingAddress;
+  if (!addr) return void 0;
+  const geo = addr.geo;
+  return {
+    address: addr.address1,
+    zipCode: addr.postalCode ?? "",
+    countryCode: addr.countryCode ?? DEFAULT_COUNTRY_CODE,
+    departmentCode: geo?.departmentCode ?? "",
+    departmentName: "",
+    provinceCode: geo?.provinceCode ?? "",
+    provinceName: addr.province ?? "",
+    districtCode: geo?.districtCode ?? "",
+    districtName: addr.district ?? addr.city ?? ""
+  };
+}
+
+// src/react/pages/checkout-page/lib/cart-sync.ts
+var checkoutReadQueryKey = (cartId) => ["storefront", "cart", cartId, "checkout"];
+function cartItemsSignature(items) {
+  return items.map((i) => `${i.variantId ?? i.id}:${i.quantity}`).sort().join("|");
+}
+function apiCartItemsFromResponse(cart) {
+  return mapApiItemsToCartItems(cart?.items);
+}
+function groupCartQuantitiesByVariant(items) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const variantId = item.variantId ?? item.id;
+    map.set(variantId, (map.get(variantId) ?? 0) + Math.max(0, item.quantity));
+  }
+  return map;
+}
+function groupApiLinesByVariant(items) {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const variantId = item.variantId ?? item.id;
+    const lines = map.get(variantId) ?? [];
+    lines.push(item);
+    map.set(variantId, lines);
+  }
+  return map;
+}
+function findCartReconciliationActions(local, api) {
+  const actions = [];
+  const localQty = groupCartQuantitiesByVariant(local);
+  const apiLinesByVariant = groupApiLinesByVariant(api);
+  const variantIds = /* @__PURE__ */ new Set([
+    ...localQty.keys(),
+    ...apiLinesByVariant.keys()
+  ]);
+  for (const variantId of variantIds) {
+    const targetQty = localQty.get(variantId) ?? 0;
+    const apiLines = apiLinesByVariant.get(variantId) ?? [];
+    const apiQty = apiLines.reduce((sum, line) => sum + line.quantity, 0);
+    if (targetQty > apiQty) {
+      actions.push({
+        action: "add",
+        variantId,
+        quantity: targetQty - apiQty
+      });
+      continue;
+    }
+    if (targetQty >= apiQty) continue;
+    let excess = apiQty - targetQty;
+    for (const line of [...apiLines].reverse()) {
+      if (excess <= 0) break;
+      if (line.quantity <= excess) {
+        actions.push({ action: "remove", itemId: line.id });
+        excess -= line.quantity;
+      } else {
+        actions.push({
+          action: "update",
+          itemId: line.id,
+          quantity: line.quantity - excess
+        });
+        excess = 0;
+      }
+    }
+  }
+  return actions;
+}
+function areCartSignaturesEqual(a, b) {
+  return cartItemsSignature(a) === cartItemsSignature(b);
+}
+function cartSessionSignature(cartTokenId, items) {
+  return `${cartTokenId ?? ""}|${cartItemsSignature(items)}`;
+}
+function readCartCheckoutStatus(cart) {
+  if (!cart) return null;
+  const status = cart.status ?? null;
+  return typeof status === "string" && status.trim() ? status.trim() : null;
+}
+function isCheckoutCartAlreadyPurchased(cart, localCartItemCount) {
+  if (localCartItemCount > 0) return false;
+  const status = readCartCheckoutStatus(cart);
+  if (!status) return false;
+  return status.toLowerCase() === "inprogress";
+}
+
+// src/react/lib/reconcile-local-cart-to-api.ts
+async function reconcileLocalCartWithApi(cartId, localCart, options) {
+  let cart = await getCart(cartId);
+  if (localCart.length === 0) return cart;
+  let apiItems = apiCartItemsFromResponse(cart);
+  if (areCartSignaturesEqual(localCart, apiItems)) return cart;
+  const actions = findCartReconciliationActions(localCart, apiItems);
+  const reconciliationErrors = [];
+  for (const action of actions) {
+    if (action.action !== "remove" && action.action !== "update") continue;
+    try {
+      cart = action.action === "remove" ? await deleteCartItem(cartId, action.itemId) : await updateCartItem(cartId, action.itemId, {
+        quantity: action.quantity
+      });
+      apiItems = apiCartItemsFromResponse(cart);
+    } catch (error) {
+      {
+        reconciliationErrors.push(error);
+      }
+    }
+  }
+  for (const action of actions) {
+    if (action.action !== "add") continue;
+    try {
+      cart = await addCartItem(
+        { variantId: action.variantId, quantity: action.quantity },
+        cartId
+      );
+      apiItems = apiCartItemsFromResponse(cart);
+    } catch (error) {
+      {
+        reconciliationErrors.push(error);
+      }
+    }
+  }
+  if (reconciliationErrors.length > 0) {
+    const first = reconciliationErrors[0];
+    throw first instanceof Error ? first : new Error("No se pudo sincronizar el carrito con el servidor.");
+  }
+  return cart;
+}
+function isCartNotFoundError(error) {
+  return error.status === 404;
+}
+
+// src/react/hooks/use-proceed-to-checkout.ts
 function buildCheckoutPath(cartId, pathPrefix = "/checkout") {
   const base = pathPrefix.replace(/\/$/, "");
   return `${base}/${encodeURIComponent(cartId.trim())}`;
@@ -1945,10 +2144,11 @@ function useProceedToCheckout(options = {}) {
     currencyCode: currencyCodeOption,
     salesChannelId = "web",
     guestEmail: guestEmailOption,
+    syncLocalCart = true,
     navigate: navigateOption,
     onError
   } = options;
-  const storeCurrency = useStore((s) => s.data?.store?.currency ?? "PEN");
+  const storeCurrency = useStore((s) => s.data?.store?.currency ?? DEFAULT_CURRENCY_CODE);
   const currencyCode = currencyCodeOption ?? storeCurrency;
   const { useCreateCart } = useStoreCart();
   const createCartMutation = useCreateCart();
@@ -1959,39 +2159,68 @@ function useProceedToCheckout(options = {}) {
     }))
   );
   const [isProceedingToCheckout, setIsProceedingToCheckout] = useState(false);
+  const inFlightRef = useRef(false);
   const navigate = navigateOption ?? (typeof window !== "undefined" ? (path) => window.location.assign(path) : () => {
   });
   const proceedToCheckout = useCallback(async () => {
-    if (isProceedingToCheckout || createCartMutation.isPending) {
-      return cartTokenId;
-    }
+    if (inFlightRef.current) return null;
+    inFlightRef.current = true;
     setIsProceedingToCheckout(true);
+    const fail = (error) => {
+      console.error("Error starting checkout", error);
+      onError?.(error);
+      return null;
+    };
     try {
       let checkoutCartId = cartTokenId;
+      if (checkoutCartId) {
+        try {
+          await getCart(checkoutCartId);
+        } catch (error) {
+          if (isCartNotFoundError(error)) {
+            checkoutCartId = null;
+            setCartTokenId(null);
+          } else {
+            return fail(error);
+          }
+        }
+      }
       if (!checkoutCartId) {
         const guestEmail = guestEmailOption ?? useCart.getState().checkoutCustomerLocal?.customer.email ?? "cambiar@ecomiq.pe";
-        const created = await createCartMutation.mutateAsync({
-          currencyCode,
-          email: guestEmail,
-          salesChannelId
-        });
+        let created;
+        try {
+          created = await createCartMutation.mutateAsync({
+            currencyCode,
+            email: guestEmail,
+            salesChannelId
+          });
+        } catch (error) {
+          return fail(error);
+        }
         checkoutCartId = created.id;
         if (!checkoutCartId) {
-          throw new Error("Cart created without id");
+          return fail(new Error("Cart created without id"));
         }
         setCartTokenId(checkoutCartId);
       }
+      if (syncLocalCart) {
+        const localCart = useCart.getState().cart;
+        if (localCart.length > 0) {
+          try {
+            await reconcileLocalCartWithApi(checkoutCartId, localCart, {
+              strict: true
+            });
+          } catch (error) {
+            return fail(error);
+          }
+        }
+      }
       navigate(buildCheckoutPath(checkoutCartId, checkoutPathPrefix));
       return checkoutCartId;
     } catch (error) {
-      console.error("Error starting checkout", error);
-      if (onError) {
-        onError(error);
-      } else {
-        console.error("Error starting checkout", error);
-      }
-      return null;
+      return fail(error);
     } finally {
+      inFlightRef.current = false;
       setIsProceedingToCheckout(false);
     }
   }, [
@@ -2000,11 +2229,11 @@ function useProceedToCheckout(options = {}) {
     createCartMutation,
     currencyCode,
     guestEmailOption,
-    isProceedingToCheckout,
     navigate,
     onError,
     salesChannelId,
-    setCartTokenId
+    setCartTokenId,
+    syncLocalCart
   ]);
   return {
     proceedToCheckout,
@@ -2013,14 +2242,6 @@ function useProceedToCheckout(options = {}) {
   };
 }
 
-// src/core/constants/currency.ts
-var countryCurrency = {
-  "PEN": "es-PE",
-  "USD": "en-US",
-  "COP": "es-CO",
-  "MXN": "es-MX"
-};
-
 // src/core/utils/format-currency.ts
 function formatCurrency(amount, currency = "USD") {
   const locale = countryCurrency[currency] ?? "en-US";
@@ -2060,12 +2281,12 @@ var zodPathToFieldId = {
   selectedPaymentCode: "checkout-payment-method"
 };
 function buildCheckoutFormValidationSchema(currency) {
-  const phoneDigits = currency === "PEN" ? 9 : 10;
+  const phoneDigits = currency === DEFAULT_CURRENCY_CODE ? 9 : 10;
   return z.object({
     email: z.string().trim().min(1, "El email es requerido").email("Ingresa un email v\xE1lido"),
     firstName: z.string().trim().min(1, "El nombre es requerido").min(2, "El nombre debe tener al menos 2 caracteres"),
     lastName: z.string().trim().min(1, "El apellido es requerido").min(2, "El apellido debe tener al menos 2 caracteres"),
-    countryCode: z.string().trim().min(2, "Selecciona un pa\xEDs"),
+    countryCode: z.string().trim().min(2, "Selecciona un pa\xEDs").max(2),
     address: z.string().trim().min(1, "La direcci\xF3n es requerida").min(5, "La direcci\xF3n debe tener al menos 5 caracteres"),
     phone: z.string().trim().min(1, "El tel\xE9fono es requerido").regex(/^\d+$/, "El tel\xE9fono solo debe contener n\xFAmeros").length(
       phoneDigits,
@@ -2082,7 +2303,7 @@ function buildCheckoutFormValidationSchema(currency) {
     paymentMethodsCount: z.number().int().nonnegative()
   }).superRefine((data, ctx) => {
     const country = data.countryCode.toUpperCase();
-    if (country === "PE") {
+    if (country === DEFAULT_COUNTRY_CODE) {
       if (!data.departmentCode.trim()) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -2199,7 +2420,7 @@ function focusCheckoutField(fieldId) {
 }
 
 // src/react/pages/checkout-page/hooks/use-checkout-form-validation.ts
-function useCheckoutFormValidation(currency = "PEN") {
+function useCheckoutFormValidation(currency = DEFAULT_CURRENCY_CODE) {
   const schema = useMemo(
     () => buildCheckoutFormValidationSchema(currency),
     [currency]
@@ -2270,7 +2491,9 @@ function loadStorefrontGeoDepartments(headers) {
   if (departmentsCache) return Promise.resolve(departmentsCache);
   if (departmentsRequest) return departmentsRequest;
   departmentsRequest = fetch(
-    `/api/store/geo/departments?countryCode=PE&source=inei&limit=200`,
+    `/api/store/geo/departments?countryCode=${encodeURIComponent(
+      DEFAULT_COUNTRY_CODE
+    )}&source=inei&limit=200`,
     { cache: "no-store", headers }
   ).then((r) => r.json()).then((data) => {
     const items = toGeoItems(data);
@@ -2304,10 +2527,10 @@ async function fetchStorefrontGeoDistricts(headers, countryCode, provinceCode) {
   const data = await res.json();
   return toGeoItems(data);
 }
-async function resolveIneiCodesFromLabels(storeId, labels, countryCode = "PE") {
+async function resolveIneiCodesFromLabels(storeId, labels, countryCode = DEFAULT_COUNTRY_CODE) {
   const id = storeId.trim();
   if (!id) return null;
-  const headers = { "X-Store-Id": id };
+  const headers = { [STOREFRONT_HEADERS.storeId]: id };
   const departments = await loadStorefrontGeoDepartments(headers);
   const dept = departments.find((d) => d.name.trim() === labels.department.trim());
   if (!dept) return null;
@@ -2345,12 +2568,12 @@ function useCheckoutDeliveryForm({
   const patchContact = useCallback((patch) => {
     onChangeRef.current(patch);
   }, []);
-  const countryCode = (contact.countryCode || "PE").toUpperCase();
-  const isPeru = countryCode === "PE";
+  const countryCode = (contact.countryCode || DEFAULT_COUNTRY_CODE).toUpperCase();
+  const isPeru = countryCode === DEFAULT_COUNTRY_CODE;
   const storeRequestHeaders = useMemo(() => {
     const id = storeId.trim();
     if (!id) return null;
-    return { "X-Store-Id": id };
+    return { [STOREFRONT_HEADERS.storeId]: id };
   }, [storeId]);
   useEffect(() => {
     if (!isPeru || !storeRequestHeaders) {
@@ -2698,13 +2921,13 @@ function CheckoutDeliveryForm({
       CheckoutSelectField,
       {
         id: "countryCode",
-        label: "Country/Region",
+        label: "Pa\xEDs/Regi\xF3n",
         value: contact.countryCode,
         error: getFieldError("countryCode"),
         onClearError: () => clearFieldError("countryCode"),
         onChange: (v) => onContactChange({ countryCode: v }),
         children: [
-          /* @__PURE__ */ jsx("option", { value: "PE", children: "Peru" }),
+          /* @__PURE__ */ jsx("option", { value: DEFAULT_COUNTRY_CODE, children: "Per\xFA" }),
           /* @__PURE__ */ jsx("option", { value: "US", children: "United States" }),
           /* @__PURE__ */ jsx("option", { value: "MX", children: "Mexico" }),
           /* @__PURE__ */ jsx("option", { value: "CO", children: "Colombia" })
@@ -3147,7 +3370,7 @@ function StripePaymentProvider({ checkout }) {
       return;
     }
     let cancelled = false;
-    const ensureStripeScript = () => new Promise((resolve, reject) => {
+    const loadStripeScript = () => new Promise((resolve, reject) => {
       const maybeStripe = globalThis.Stripe;
       if (maybeStripe) return resolve();
       const existing = document.querySelector('script[src="https://js.stripe.com/v3/"]');
@@ -3172,7 +3395,7 @@ function StripePaymentProvider({ checkout }) {
       document.head.appendChild(script);
     });
     const mountStripePaymentElement = async () => {
-      await ensureStripeScript();
+      await loadStripeScript();
       if (cancelled) return;
       const StripeCtor = globalThis.Stripe;
       if (!StripeCtor) throw new Error("Stripe is not available");
@@ -3312,21 +3535,21 @@ function useCheckoutPayment({
   const requiresProviderUi = Boolean(
     selectedMethod && methodUsesProviderCheckoutUi(selectedMethod)
   );
-  const effectiveCheckout = checkoutMethodCode && checkoutMethodCode === selectedMethod?.code ? checkoutResponse ?? null : null;
+  const activeCheckout = checkoutMethodCode && checkoutMethodCode === selectedMethod?.code ? checkoutResponse ?? null : null;
   const activeLoadingCheckout = !!checkoutMethodCode && checkoutMethodCode === selectedMethod?.code && loadingCheckout;
   const activeCheckoutError = checkoutMethodCode && checkoutMethodCode === selectedMethod?.code ? checkoutError : null;
   const manualPaymentDetails = useMemo(() => {
     if (!selectedMethod?.isManual) return null;
-    const action = getPaymentFromCheckout(effectiveCheckout)?.action ?? null;
+    const action = getPaymentFromCheckout(activeCheckout)?.action ?? null;
     const publicConfiguration = action?.publicConfiguration ?? {};
     const phoneNumber = selectedMethod.phoneNumber ?? publicConfiguration.phoneNumber ?? null;
     const accountHolder = selectedMethod.accountHolder ?? publicConfiguration.accountHolder ?? null;
     const qrImageUrl = action?.qrCode ?? selectedMethod.qrImageUrl ?? publicConfiguration.qrImageUrl ?? null;
     if (!phoneNumber && !accountHolder && !qrImageUrl) return null;
     return { phoneNumber, accountHolder, qrImageUrl };
-  }, [selectedMethod, effectiveCheckout]);
+  }, [selectedMethod, activeCheckout]);
   const needsReceipt = Boolean(selectedMethod?.isManual && manualPaymentDetails);
-  const showProviderPanel = requiresProviderUi && !!selectedMethod && !!effectiveCheckout && !activeLoadingCheckout && !activeCheckoutError;
+  const showProviderPanel = requiresProviderUi && !!selectedMethod && !!activeCheckout && !activeLoadingCheckout && !activeCheckoutError;
   const [receiptFile, setReceiptFile] = useState(null);
   const [receiptUrl, setReceiptUrl] = useState(null);
   const [receiptError, setReceiptError] = useState(null);
@@ -3464,7 +3687,7 @@ function useCheckoutPayment({
   return {
     activeMethods,
     selectedMethod,
-    effectiveCheckout,
+    activeCheckout,
     activeLoadingCheckout,
     activeCheckoutError,
     manualPaymentDetails,
@@ -3592,8 +3815,8 @@ function CheckoutPaymentSectionInner({
             ] })
           ] })
         ] }) }) : null,
-        payment.showProviderPanel && payment.effectiveCheckout ? /* @__PURE__ */ jsxs("div", { className: "ecomiq-checkout-page__payment-provider", children: [
-          /* @__PURE__ */ jsx(PaymentProviderRouter, { checkout: payment.effectiveCheckout }),
+        payment.showProviderPanel && payment.activeCheckout ? /* @__PURE__ */ jsxs("div", { className: "ecomiq-checkout-page__payment-provider", children: [
+          /* @__PURE__ */ jsx(PaymentProviderRouter, { checkout: payment.activeCheckout }),
           !payment.providerPaymentCompleted ? /* @__PURE__ */ jsx(
             "button",
             {
@@ -4006,128 +4229,6 @@ function CheckoutPageSkeleton({ header }) {
     }
   );
 }
-
-// src/react/pages/checkout-page/lib/cart-mappers.ts
-function mapApiItemsToCartItems(items) {
-  if (!items?.length) return [];
-  return items.map((raw) => {
-    const item = raw;
-    const price = Number(item.unitPrice);
-    const quantity = Number(item.quantity);
-    const variantId = String(item.variantId ?? "");
-    if (!Number.isFinite(price) || !Number.isFinite(quantity) || !variantId) return null;
-    return {
-      id: item.id,
-      title: item.title,
-      image: String(item.thumbnail ?? ""),
-      size: String(item.variantLabel ?? "\u2014"),
-      price,
-      quantity,
-      variantId,
-      variantSku: item.variantSku ?? void 0,
-      variantLabel: item.variantLabel ?? void 0
-    };
-  }).filter(Boolean);
-}
-function shippingValuesFromCartAddress(cartData) {
-  const addr = cartData.shippingAddress;
-  if (!addr) return void 0;
-  const geo = addr.geo;
-  return {
-    address: addr.address1,
-    zipCode: addr.postalCode ?? "",
-    countryCode: addr.countryCode ?? "PE",
-    departmentCode: geo?.departmentCode ?? "",
-    departmentName: "",
-    provinceCode: geo?.provinceCode ?? "",
-    provinceName: addr.province ?? "",
-    districtCode: geo?.districtCode ?? "",
-    districtName: addr.district ?? addr.city ?? ""
-  };
-}
-
-// src/react/pages/checkout-page/lib/cart-sync.ts
-var checkoutReadQueryKey = (cartId) => ["storefront", "cart", cartId, "checkout"];
-function cartItemsSignature(items) {
-  return items.map((i) => `${i.variantId ?? i.id}:${i.quantity}`).sort().join("|");
-}
-function apiCartItemsFromResponse(cart) {
-  return mapApiItemsToCartItems(cart?.items);
-}
-function groupCartQuantitiesByVariant(items) {
-  const map = /* @__PURE__ */ new Map();
-  for (const item of items) {
-    const variantId = item.variantId ?? item.id;
-    map.set(variantId, (map.get(variantId) ?? 0) + Math.max(0, item.quantity));
-  }
-  return map;
-}
-function groupApiLinesByVariant(items) {
-  const map = /* @__PURE__ */ new Map();
-  for (const item of items) {
-    const variantId = item.variantId ?? item.id;
-    const lines = map.get(variantId) ?? [];
-    lines.push(item);
-    map.set(variantId, lines);
-  }
-  return map;
-}
-function findCartReconciliationActions(local, api) {
-  const actions = [];
-  const localQty = groupCartQuantitiesByVariant(local);
-  const apiLinesByVariant = groupApiLinesByVariant(api);
-  const variantIds = /* @__PURE__ */ new Set([
-    ...localQty.keys(),
-    ...apiLinesByVariant.keys()
-  ]);
-  for (const variantId of variantIds) {
-    const targetQty = localQty.get(variantId) ?? 0;
-    const apiLines = apiLinesByVariant.get(variantId) ?? [];
-    const apiQty = apiLines.reduce((sum, line) => sum + line.quantity, 0);
-    if (targetQty > apiQty) {
-      actions.push({
-        action: "add",
-        variantId,
-        quantity: targetQty - apiQty
-      });
-      continue;
-    }
-    if (targetQty >= apiQty) continue;
-    let excess = apiQty - targetQty;
-    for (const line of [...apiLines].reverse()) {
-      if (excess <= 0) break;
-      if (line.quantity <= excess) {
-        actions.push({ action: "remove", itemId: line.id });
-        excess -= line.quantity;
-      } else {
-        actions.push({
-          action: "update",
-          itemId: line.id,
-          quantity: line.quantity - excess
-        });
-        excess = 0;
-      }
-    }
-  }
-  return actions;
-}
-function areCartSignaturesEqual(a, b) {
-  return cartItemsSignature(a) === cartItemsSignature(b);
-}
-function cartSessionSignature(cartTokenId, items) {
-  return `${cartTokenId ?? ""}|${cartItemsSignature(items)}`;
-}
-function readCartCheckoutStatus(cart) {
-  if (!cart) return null;
-  const status = cart.status ?? null;
-  return typeof status === "string" && status.trim() ? status.trim() : null;
-}
-function isCheckoutCartAlreadyPurchased(cart, localCartItemCount) {
-  if (localCartItemCount > 0) return false;
-  const status = readCartCheckoutStatus(cart);
-  if (!status) return false;
-  return status.toLowerCase() === "inprogress";
-}
 function useCartListener({
   cartId,
   enabled,
@@ -4175,7 +4276,7 @@ function useCartListener({
 function useCheckoutSession(cartId) {
   const queryClient = useQueryClient();
   const storeId = useStore((s) => s.data?.store?.id ?? "");
-  const currency = useStore((s) => s.data?.store?.currency ?? "PEN");
+  const currency = useStore((s) => s.data?.store?.currency ?? DEFAULT_CURRENCY_CODE);
   const { setCartTokenId, clearCartSession, cart: localCart } = useCart(
     useShallow((s) => ({
       setCartTokenId: s.setCartTokenId,
@@ -4245,7 +4346,7 @@ function useCheckoutSession(cartId) {
     province: "",
     postalCode: "",
     phone: "",
-    countryCode: "PE",
+    countryCode: DEFAULT_COUNTRY_CODE,
     departmentCode: "",
     departmentName: "",
     provinceCode: "",
@@ -4414,7 +4515,7 @@ function useCheckoutSession(cartId) {
       }
     });
     mergeCartIntoCheckoutCache(buyerCart);
-    const countryCode = (contact.countryCode || "PE").toUpperCase();
+    const countryCode = (contact.countryCode || DEFAULT_COUNTRY_CODE).toUpperCase();
     const districtName = contact.districtName || contact.city;
     const provinceName = contact.provinceName || contact.province;
     const baseAddress = {
@@ -4925,6 +5026,8 @@ function thankYouParamsFromCheckoutResult(result, overrides) {
     transactionId: overrides?.transactionId ?? result.payment?.transactionId ?? void 0
   };
 }
+
+// src/react/shell/components/product-variant-selector/product-variant-selection.ts
 function buildOptionGroups(variants) {
   const map = /* @__PURE__ */ new Map();
   for (const v of variants) {
@@ -4964,6 +5067,54 @@ function getInitialOptions(variants, optionGroups) {
   }
   return selected;
 }
+function buildVariantLabel(variant) {
+  if (!variant?.options?.length) return void 0;
+  return variant.options.map((o) => `${o.key}: ${o.value}`).join(" \u2022 ");
+}
+function getPriceTiersForVariant(product, variantId) {
+  if (!variantId) return [];
+  return (product.priceTiers ?? []).filter((tier) => tier.variantId === variantId).sort((a, b) => a.minQuantity - b.minQuantity);
+}
+function resolveProductImageUrl(product, selectedVariant) {
+  return product.imageUrl ?? selectedVariant?.images?.[0]?.url ?? product.images?.[0]?.url ?? "";
+}
+function buildVariantSelectionPayload(product, selectedVariant, displayPrice) {
+  if (!selectedVariant?.id) return null;
+  return {
+    productId: product.id,
+    productName: product.name,
+    variant: selectedVariant,
+    displayPrice,
+    compareAtPrice: selectedVariant.compareAtPrice ?? product.compareAtPrice,
+    variantLabel: buildVariantLabel(selectedVariant),
+    variantSku: selectedVariant.sku,
+    imageUrl: resolveProductImageUrl(product, selectedVariant)
+  };
+}
+function buildCartItemFromVariant(product, selectedVariant, displayPrice) {
+  if (!selectedVariant?.id) return null;
+  const sizeOption = selectedVariant.options?.find(
+    (o) => o.key.toLowerCase() === "size"
+  )?.value;
+  const variantLabel = buildVariantLabel(selectedVariant);
+  return {
+    id: selectedVariant.id,
+    title: product.name,
+    price: displayPrice,
+    quantity: 1,
+    size: sizeOption ?? "\u2014",
+    image: resolveProductImageUrl(product, selectedVariant),
+    variantId: selectedVariant.id,
+    variantSku: selectedVariant.sku,
+    variantLabel
+  };
+}
+function isVariantSelectionReady(selectedVariant, isAvailable) {
+  return Boolean(selectedVariant?.id && isAvailable);
+}
+function canAddVariantToCart(selectedVariant, isAvailable) {
+  return isVariantSelectionReady(selectedVariant, isAvailable);
+}
 function ProductVariantSelector({
   product,
   currency = "USD",
@@ -5033,7 +5184,180 @@ function ProductVariantSelector({
     })
   ] });
 }
+function DefaultVariantPrice({
+  displayPrice,
+  compareAtPrice,
+  currency
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "inline-flex items-center rounded-md bg-primary/10 px-2.5 py-0.5 text-base font-semibold text-primary",
+        "data-testid": "product-display-price",
+        children: formatCurrency(displayPrice, currency)
+      }
+    ),
+    compareAtPrice != null && compareAtPrice > displayPrice && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground line-through", children: formatCurrency(compareAtPrice, currency) })
+  ] });
+}
+function DefaultVariantOptions(slot) {
+  if (!slot.hasVariants) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: slot.optionGroups.map((group) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: group.name }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: group.values.map((value) => {
+      const isSelected = slot.selectedOptions[group.key] === value;
+      const isColorLike = group.key.toLowerCase().includes("color") || group.key.toLowerCase().includes("colour");
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => slot.selectOption(group.key, value),
+          className: isColorLike ? `min-w-[72px] rounded-md border-2 px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${isSelected ? "border-primary bg-primary text-foreground" : "border-border bg-muted/30 text-foreground hover:border-muted-foreground/50"}` : `rounded-md border px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${isSelected ? "border-primary bg-muted ring-1 ring-primary" : "border-border bg-transparent text-muted-foreground hover:border-muted-foreground/50 hover:text-foreground"}`,
+          style: isColorLike && isSelected && value.toLowerCase() === "black" ? { backgroundColor: "#1a1a1a", borderColor: "#1a1a1a", color: "#fff" } : isColorLike && value.toLowerCase() === "white" ? { backgroundColor: "#fafafa", color: "#1a1a1a", borderColor: "#e5e5e5" } : void 0,
+          "data-testid": `variant-option-${group.key}-${value}`,
+          children: value
+        },
+        value
+      );
+    }) })
+  ] }, group.key)) });
+}
+function DefaultPriceTiers({
+  priceTiers,
+  currency
+}) {
+  if (priceTiers.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border text-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 bg-muted/40 px-3 py-2 text-xs font-semibold uppercase text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: "Cantidad" }),
+      /* @__PURE__ */ jsx("span", { className: "text-right", children: "Precio" })
+    ] }),
+    priceTiers.map((priceTier) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid grid-cols-2 border-t border-border px-3 py-2",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: priceTier.maxQuantity ? `${priceTier.minQuantity} - ${priceTier.maxQuantity}` : `${priceTier.minQuantity}+` }),
+          /* @__PURE__ */ jsx("span", { className: "text-right font-medium", children: formatCurrency(priceTier.unitPrice, currency) })
+        ]
+      },
+      `${priceTier.variantId}-${priceTier.minQuantity}`
+    ))
+  ] });
+}
+function DefaultProductFeatures({ features }) {
+  if (features.length === 0) return null;
+  return /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside space-y-1 text-sm text-muted-foreground", children: features.map((feature, index) => /* @__PURE__ */ jsx("li", { children: feature }, index)) });
+}
+function useProductVariantSelection({
+  product,
+  onVariantChange,
+  onSelectionChange
+}) {
+  const variants = useMemo(() => product.variants ?? [], [product.variants]);
+  const optionGroups = useMemo(() => buildOptionGroups(variants), [variants]);
+  const hasVariants = optionGroups.length > 0;
+  const [selectedOptions, setSelectedOptions] = useState(
+    () => getInitialOptions(variants, optionGroups)
+  );
+  const selectedVariant = useMemo(
+    () => findVariant(variants, selectedOptions, hasVariants),
+    [variants, selectedOptions, hasVariants]
+  );
+  const displayPrice = selectedVariant?.price ?? product.price ?? 0;
+  const compareAtPrice = selectedVariant?.compareAtPrice ?? product.compareAtPrice;
+  const isAvailable = (selectedVariant ? (selectedVariant.quantity ?? 0) > 0 : product.isAvailable) ?? true;
+  const selection = useMemo(
+    () => buildVariantSelectionPayload(product, selectedVariant, displayPrice),
+    [product, selectedVariant, displayPrice]
+  );
+  const priceTiers = useMemo(
+    () => getPriceTiersForVariant(product, selectedVariant?.id),
+    [product, selectedVariant?.id]
+  );
+  const isReady = isVariantSelectionReady(selectedVariant, isAvailable);
+  useEffect(() => {
+    onVariantChange?.(selectedVariant, displayPrice);
+  }, [selectedVariant, displayPrice, onVariantChange]);
+  useEffect(() => {
+    onSelectionChange?.(selection);
+  }, [onSelectionChange, selection]);
+  const selectOption = useCallback((key, value) => {
+    setSelectedOptions((prev) => ({ ...prev, [key]: value }));
+  }, []);
+  return {
+    product,
+    variants,
+    optionGroups,
+    selectedOptions,
+    selectOption,
+    hasVariants,
+    selectedVariant,
+    displayPrice,
+    compareAtPrice,
+    isAvailable,
+    isReady,
+    selection,
+    priceTiers
+  };
+}
+function ProductVariantSelectorComplete({
+  product,
+  currency = "PEN",
+  features = [],
+  className,
+  onVariantChange,
+  onSelectionChange,
+  renderPrice,
+  renderVariants,
+  renderPriceTiers,
+  renderAction,
+  renderFeatures
+}) {
+  const state = useProductVariantSelection({
+    product,
+    onVariantChange,
+    onSelectionChange
+  });
+  const priceSlot = {
+    displayPrice: state.displayPrice,
+    compareAtPrice: state.compareAtPrice,
+    currency,
+    selectedVariant: state.selectedVariant
+  };
+  const variantsSlot = {
+    optionGroups: state.optionGroups,
+    selectedOptions: state.selectedOptions,
+    selectOption: state.selectOption,
+    hasVariants: state.hasVariants,
+    selectedVariant: state.selectedVariant,
+    isAvailable: state.isAvailable
+  };
+  const priceTiersSlot = {
+    priceTiers: state.priceTiers,
+    currency,
+    selectedVariant: state.selectedVariant
+  };
+  const actionSlot = {
+    product: state.product,
+    selectedVariant: state.selectedVariant,
+    displayPrice: state.displayPrice,
+    compareAtPrice: state.compareAtPrice,
+    currency,
+    isAvailable: state.isAvailable,
+    isReady: state.isReady,
+    selection: state.selection
+  };
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "w-full max-w-[320px] space-y-5", children: [
+    renderPrice?.(priceSlot) ?? /* @__PURE__ */ jsx(DefaultVariantPrice, { ...priceSlot }),
+    renderVariants?.(variantsSlot) ?? /* @__PURE__ */ jsx(DefaultVariantOptions, { ...variantsSlot }),
+    renderFeatures?.(features) ?? /* @__PURE__ */ jsx(DefaultProductFeatures, { features }),
+    state.priceTiers.length > 0 && (renderPriceTiers?.(priceTiersSlot) ?? /* @__PURE__ */ jsx(DefaultPriceTiers, { ...priceTiersSlot })),
+    renderAction?.(actionSlot)
+  ] });
+}
 
-export { CheckoutPage, CustomerAddressSchema, CustomerAddressUpsertSchema, CustomerMeSchema, CustomerOrderDetailSchema, CustomerOrderListItemSchema, CustomerProfilePatchSchema, CustomerRegisterRequestSchema, EcomiqProvider, ProductVariantSelector, QueryProvider, StoreApiClient, StorefrontAuthProvider, ThankYouPage, addCartCoupon, buildCheckoutPath, buildCheckoutThankYouUrl, checkoutCart, createCart, createCustomerAddress, createStoreApiClient, customerMeToProfilePatch, deleteCustomerAddress, ecomiqOAuthPasswordClient, emailFromCheckoutResult, getCart, getCartCheckout, getCartPaymentMethods, getCustomerAddresses, getCustomerMe, getCustomerOrder, getCustomerOrders, getSharedOrderDraft, getShippingOptions, getStoreApiBaseUrl, getStoreApiClient, getStorefrontCollectionBySlug, getStorefrontCollections, getStorefrontPageBySlug, getStorefrontPagePreview, getStorefrontPages, getStorefrontProductBySlug, getStorefrontProducts, isCartNotActiveApiError, orderIdFromCheckoutResult, patchCartAddresses, patchCartBuyer, patchCustomer, putCartShippingMethod, registerCustomer, removeCartCoupon, setClientStoreId, setServerRequestOrigin, setServerStoreId, signInWithEcomiqCredentials, storeApiClient, storefrontAccessTokenNeedsRefresh, storefrontSessionEndsSoon, thankYouParamsFromCheckoutResult, updateCustomerAddress, uploadPaymentReceipt, useCart, useCheckoutSession, useProceedToCheckout, useStore, useStoreCart, useStoreCollections, useStorePages, useStoreProducts, useStorefrontAuthClient, useStorefrontSession };
+export { CheckoutPage, CustomerAddressSchema, CustomerAddressUpsertSchema, CustomerMeSchema, CustomerOrderDetailSchema, CustomerOrderListItemSchema, CustomerProfilePatchSchema, CustomerRegisterRequestSchema, EcomiqProvider, ProductVariantSelector, ProductVariantSelectorComplete, QueryProvider, StoreApiClient, StorefrontAuthProvider, ThankYouPage, addCartCoupon, buildCartItemFromVariant, buildCheckoutPath, buildCheckoutThankYouUrl, buildOptionGroups, buildVariantLabel, buildVariantSelectionPayload, canAddVariantToCart, checkoutCart, createCart, createCustomerAddress, createStoreApiClient, customerMeToProfilePatch, deleteCustomerAddress, ecomiqOAuthPasswordClient, emailFromCheckoutResult, findVariant, getCart, getCartCheckout, getCartPaymentMethods, getCustomerAddresses, getCustomerMe, getCustomerOrder, getCustomerOrders, getInitialOptions, getPriceTiersForVariant, getSharedOrderDraft, getShippingOptions, getStoreApiBaseUrl, getStoreApiClient, getStorefrontCollectionBySlug, getStorefrontCollections, getStorefrontPageBySlug, getStorefrontPagePreview, getStorefrontPages, getStorefrontProductBySlug, getStorefrontProducts, isCartNotActiveApiError, isVariantSelectionReady, orderIdFromCheckoutResult, patchCartAddresses, patchCartBuyer, patchCustomer, putCartShippingMethod, registerCustomer, removeCartCoupon, setClientStoreId, setServerRequestOrigin, setServerStoreId, signInWithEcomiqCredentials, storeApiClient, storefrontAccessTokenNeedsRefresh, storefrontSessionEndsSoon, thankYouParamsFromCheckoutResult, updateCustomerAddress, uploadPaymentReceipt, useCart, useCheckoutSession, useProceedToCheckout, useProductVariantSelection, useStore, useStoreCart, useStoreCollections, useStorePages, useStoreProducts, useStorefrontAuthClient, useStorefrontSession };
 //# sourceMappingURL=client.js.map
 //# sourceMappingURL=client.js.map