@ecomiq/storefront 2.0.8 → 2.0.11

package/src/components/checkout/form-schema.ts

@@ -59,105 +59,146 @@ export type CheckoutFormValidationContext = {
   paymentMethodsCount: number
 }
 
-export function buildCheckoutFormValidationSchema(currency: string) {
-  const phoneDigits = currency.toUpperCase() === 'PEN' ? 9 : 10
-
-  return z
-    .object({
-      email: z
-        .string()
-        .trim()
-        .min(1, 'El email es requerido')
-        .email('Ingresa un email válido'),
-      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ís').max(2),
-      address: z
-        .string()
-        .trim()
-        .min(1, 'La dirección es requerida')
-        .min(5, 'La dirección debe tener al menos 5 caracteres'),
-      phone: z
-        .string()
-        .trim()
-        .min(1, 'El teléfono es requerido')
-        .regex(/^\d+$/, 'El teléfono solo debe contener números')
-        .length(phoneDigits, `El teléfono debe tener ${phoneDigits} dígitos`),
-      departmentCode: z.string(),
-      provinceCode: z.string(),
-      districtCode: z.string(),
-      city: z.string(),
-      province: z.string(),
-      selectedShippingKey: z.string().nullable(),
-      shippingOptionsCount: z.number().int().nonnegative(),
-      selectedPaymentCode: z.string().nullable(),
-      paymentMethodsCount: z.number().int().nonnegative(),
+function phoneDigitsForCurrency(currency: string) {
+  return currency.toUpperCase() === 'PEN' ? 9 : 10
+}
+
+const contactStepObject = z.object({
+  email: z
+    .string()
+    .trim()
+    .min(1, 'El email es requerido')
+    .email('Ingresa un email válido'),
+})
+
+function deliveryStepObject(currency: string) {
+  const phoneDigits = phoneDigitsForCurrency(currency)
+  return z.object({
+    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ís').max(2),
+    address: z
+      .string()
+      .trim()
+      .min(1, 'La dirección es requerida')
+      .min(5, 'La dirección debe tener al menos 5 caracteres'),
+    phone: z
+      .string()
+      .trim()
+      .min(1, 'El teléfono es requerido')
+      .regex(/^\d+$/, 'El teléfono solo debe contener números')
+      .length(phoneDigits, `El teléfono debe tener ${phoneDigits} dígitos`),
+    departmentCode: z.string(),
+    provinceCode: z.string(),
+    districtCode: z.string(),
+    city: z.string(),
+    province: z.string(),
+    selectedShippingKey: z.string().nullable(),
+    shippingOptionsCount: z.number().int().nonnegative(),
+  })
+}
+
+const paymentStepObject = z.object({
+  selectedPaymentCode: z.string().nullable(),
+  paymentMethodsCount: z.number().int().nonnegative(),
+})
+
+function refineDelivery(
+  data: z.infer<ReturnType<typeof deliveryStepObject>>,
+  ctx: z.RefinementCtx,
+) {
+  const country = data.countryCode.toUpperCase()
+
+  if (country === 'PE') {
+    if (!data.departmentCode.trim()) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['departmentCode'],
+        message: 'Selecciona un departamento',
+      })
+    }
+    if (!data.provinceCode.trim()) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['provinceCode'],
+        message: 'Selecciona una provincia',
+      })
+    }
+    if (!data.districtCode.trim()) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['districtCode'],
+        message: 'Selecciona un distrito',
+      })
+    }
+  } else {
+    if (!data.city.trim()) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['city'],
+        message: 'La ciudad es requerida',
+      })
+    }
+    if (!data.province.trim()) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['province'],
+        message: 'La región es requerida',
+      })
+    }
+  }
+
+  if (data.shippingOptionsCount > 0 && !data.selectedShippingKey?.trim()) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ['selectedShippingKey'],
+      message: 'Selecciona un método de envío',
+    })
+  }
+}
+
+function refinePayment(
+  data: z.infer<typeof paymentStepObject>,
+  ctx: z.RefinementCtx,
+) {
+  if (data.paymentMethodsCount > 0 && !data.selectedPaymentCode?.trim()) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ['selectedPaymentCode'],
+      message: 'Selecciona un método de pago',
     })
+  }
+}
+
+export function buildCheckoutContactStepSchema() {
+  return contactStepObject
+}
+
+export function buildCheckoutDeliveryStepSchema(currency: string) {
+  return deliveryStepObject(currency).superRefine(refineDelivery)
+}
+
+export function buildCheckoutPaymentStepSchema() {
+  return paymentStepObject.superRefine(refinePayment)
+}
+
+export function buildCheckoutFormValidationSchema(currency: string) {
+  const delivery = deliveryStepObject(currency)
+
+  return contactStepObject
+    .merge(delivery)
+    .merge(paymentStepObject)
     .superRefine((data, ctx) => {
-      const country = data.countryCode.toUpperCase()
-
-      if (country === 'PE') {
-        if (!data.departmentCode.trim()) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: ['departmentCode'],
-            message: 'Selecciona un departamento',
-          })
-        }
-        if (!data.provinceCode.trim()) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: ['provinceCode'],
-            message: 'Selecciona una provincia',
-          })
-        }
-        if (!data.districtCode.trim()) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: ['districtCode'],
-            message: 'Selecciona un distrito',
-          })
-        }
-      } else {
-        if (!data.city.trim()) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: ['city'],
-            message: 'La ciudad es requerida',
-          })
-        }
-        if (!data.province.trim()) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            path: ['province'],
-            message: 'La región es requerida',
-          })
-        }
-      }
-
-      if (data.shippingOptionsCount > 0 && !data.selectedShippingKey?.trim()) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          path: ['selectedShippingKey'],
-          message: 'Selecciona un método de envío',
-        })
-      }
-
-      if (data.paymentMethodsCount > 0 && !data.selectedPaymentCode?.trim()) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          path: ['selectedPaymentCode'],
-          message: 'Selecciona un método de pago',
-        })
-      }
+      refineDelivery(data, ctx)
+      refinePayment(data, ctx)
     })
 }
 
@@ -216,9 +257,11 @@ export function focusCheckoutField(fieldId: CheckoutFieldId): void {
     return
   }
   if (fieldId === 'checkout-shipping-method') {
-    const radio = document.querySelector<HTMLInputElement>('input[name="shipping"]')
-    radio?.focus()
-    radio?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    const selected =
+      document.querySelector<HTMLButtonElement>('button[data-checkout-shipping][aria-pressed="true"]') ??
+      document.querySelector<HTMLButtonElement>('#checkout-shipping-method button')
+    selected?.focus()
+    selected?.scrollIntoView({ behavior: 'smooth', block: 'center' })
     return
   }
   if (fieldId === 'checkout-payment-method') {
@@ -227,3 +270,12 @@ export function focusCheckoutField(fieldId: CheckoutFieldId): void {
     radio?.scrollIntoView({ behavior: 'smooth', block: 'center' })
   }
 }
+
+/** Mapea el primer campo inválido al paso del flujo secuencial. */
+export function checkoutStepForField(
+  fieldId: CheckoutFieldId,
+): 'contact' | 'delivery' | 'payment' {
+  if (fieldId === 'email') return 'contact'
+  if (fieldId === 'checkout-payment-method') return 'payment'
+  return 'delivery'
+}

package/src/components/checkout/format.ts

@@ -15,11 +15,6 @@ export function thankYouUrl(cartId: string, transactionId?: string) {
   return `/thank-you?${q.toString()}`
 }
 
-/** @deprecated Usa `thankYouUrl`. */
-export function processingUrl(cartId: string, transactionId?: string) {
-  return thankYouUrl(cartId, transactionId)
-}
-
 export function paymentRedirectUrl(result: CartCheckoutResponse): string | null {
   const actionUrl = result.payment?.action?.url
   if (typeof actionUrl === 'string' && actionUrl.trim()) return actionUrl

package/src/components/checkout/index.ts

@@ -1,51 +1,5 @@
-export type { CheckoutContactForm, BillingChoice } from './types'
-export { emptyCheckoutContact } from './types'
-
-export {
-  buildCheckoutFormValidationSchema,
-  checkoutValidationInputFromContext,
-  firstInvalidFieldId,
-  focusCheckoutField,
-  mapZodIssuesToFieldErrors,
-  CHECKOUT_FIELD_IDS,
-  CHECKOUT_FIELD_FOCUS_ORDER,
-  type CheckoutFieldId,
-  type CheckoutFormValidationContext,
-} from './form-schema'
-
-export {
-  areCartSignaturesEqual,
-  cartItemsSignature,
-  cartSessionSignature,
-  findCartReconciliationActions,
-  isCheckoutCartAlreadyPurchased,
-  methodUsesProviderCheckoutUi,
-  toSignatureItems,
-  type CartLineSignatureItem,
-  type CartReconcileAction,
-} from './cart-sync'
-
-export { formatMoney, paymentRedirectUrl, thankYouUrl, processingUrl } from './format'
-export { useCheckoutSession } from './use-checkout-session'
-export { useCheckoutGeo } from './use-checkout-geo'
-
+/**
+ * Superficie interna del checkout. La página solo necesita `CheckoutSessionView`;
+ * el resto se importa por path directo en tests o módulos hermanos.
+ */
 export { CheckoutSessionView } from './checkout-session-view'
-export { CheckoutShippingAddressSection } from './checkout-shipping-address-section'
-export { CheckoutShippingSection } from './checkout-shipping-section'
-export { CheckoutPaymentSection } from './checkout-payment-section'
-export { CheckoutOrderSummary } from './checkout-order-summary'
-export { CheckoutOrderBumps } from './checkout-line-items'
-export { CheckoutExternalUpdateBanner } from './checkout-external-update-banner'
-export {
-  CheckoutAlreadyPurchasedState,
-  CheckoutEmptyState,
-  CheckoutErrorState,
-  CheckoutLoadingState,
-} from './checkout-states'
-export {
-  CheckoutTextField,
-  CheckoutSelectField,
-  CheckoutPhoneField,
-  FieldError,
-  fieldClass,
-} from './checkout-form-controls'

package/src/components/checkout/types.ts

@@ -20,8 +20,6 @@ export type CheckoutContactForm = {
   districtName: string
 }
 
-export type BillingChoice = 'same_as_shipping' | 'different'
-
 export const emptyCheckoutContact = (countryCode = 'PE'): CheckoutContactForm => ({
   email: '',
   firstName: '',

package/src/components/checkout/use-checkout-session.ts

@@ -25,7 +25,7 @@ import {
   methodUsesProviderCheckoutUi,
   toSignatureItems,
 } from './cart-sync'
-import { emptyCheckoutContact, type BillingChoice, type CheckoutContactForm } from './types'
+import { emptyCheckoutContact, type CheckoutContactForm } from './types'
 
 type ShippingFlat = {
   key: string
@@ -46,7 +46,6 @@ export function useCheckoutSession(cartId: string) {
   const [cartChangedExternally, setCartChangedExternally] = useState(false)
 
   const [contact, setContact] = useState<CheckoutContactForm>(() => emptyCheckoutContact())
-  const [billingChoice, setBillingChoice] = useState<BillingChoice>('same_as_shipping')
   const [selectedShippingKey, setSelectedShippingKey] = useState<string | null>(null)
   const [selectedPaymentCode, setSelectedPaymentCode] = useState<string | null>(null)
   const [providerPaymentCompleted, setProviderPaymentCompleted] = useState(false)
@@ -66,13 +65,13 @@ export function useCheckoutSession(cartId: string) {
   )
   const [checkoutPaymentLoading, setCheckoutPaymentLoading] = useState(false)
   const [checkoutPaymentError, setCheckoutPaymentError] = useState<string | null>(null)
+  const [deliveryPersisted, setDeliveryPersisted] = useState(false)
 
   const hydratedRef = useRef(false)
   const reconcileAttemptRef = useRef<string | null>(null)
   const isReconcilingRef = useRef(false)
   const checkoutPaymentInitKeyRef = useRef<string | null>(null)
   const baselineSigRef = useRef<string | null>(null)
-  const skipClearOnPurchasedRef = useRef(false)
 
   const localItems = useMemo(
     () => toSignatureItems(providerCart?.items),
@@ -93,7 +92,6 @@ export function useCheckoutSession(cartId: string) {
     try {
       const data = await serverApi.getCartCheckout({ cartId })
       if (isCheckoutCartAlreadyPurchased(data.cart)) {
-        skipClearOnPurchasedRef.current = true
         setCheckoutAlreadyPurchased(true)
         clearCart()
         setCheckoutCart(data.cart)
@@ -124,7 +122,7 @@ export function useCheckoutSession(cartId: string) {
     setProviderPaymentCompleted(false)
     setCheckoutPaymentResponse(null)
     setCheckoutPaymentMethodCode(null)
-    skipClearOnPurchasedRef.current = false
+    setDeliveryPersisted(false)
     void loadCheckout()
   }, [cartId, loadCheckout])
 
@@ -337,13 +335,23 @@ export function useCheckoutSession(cartId: string) {
     [initProviderCheckout],
   )
 
-  useEffect(() => {
-    if (!paymentMethods.length || selectedPaymentCode) return
+  const clearPaymentSession = useCallback(() => {
+    checkoutPaymentInitKeyRef.current = null
+    setSelectedPaymentCode(null)
+    setProviderPaymentCompleted(false)
+    setCheckoutPaymentResponse(null)
+    setCheckoutPaymentMethodCode(null)
+    setCheckoutPaymentError(null)
+    setCheckoutPaymentLoading(false)
+  }, [])
+
+  const ensureDefaultPaymentMethod = useCallback(() => {
+    if (selectedPaymentCode || !paymentMethods.length) return
     const first = paymentMethods.find((m) => m.isDefault) ?? paymentMethods[0]
     if (first) selectPaymentMethod(first.code)
-  }, [paymentMethods, selectedPaymentCode, selectPaymentMethod])
+  }, [paymentMethods, selectPaymentMethod, selectedPaymentCode])
 
-  const saveContactAndDelivery = useCallback(async () => {
+  const saveBuyer = useCallback(async () => {
     const buyerCart = await serverApi.patchCartBuyer({
       cartId,
       email: contact.email,
@@ -352,7 +360,10 @@ export function useCheckoutSession(cartId: string) {
       phone: contact.phone,
     })
     setCheckoutCart(buyerCart)
+    return buyerCart
+  }, [cartId, contact.email, contact.firstName, contact.lastName, contact.phone])
 
+  const saveAddresses = useCallback(async () => {
     const countryCode = (contact.countryCode || 'PE').toUpperCase()
     const districtName = contact.districtName || contact.city
     const provinceName = contact.provinceName || contact.province
@@ -382,8 +393,14 @@ export function useCheckoutSession(cartId: string) {
       billingAddress: baseAddress,
     })
     setCheckoutCart(updated)
+    return updated
   }, [cartId, contact])
 
+  const saveContactAndDelivery = useCallback(async () => {
+    await saveBuyer()
+    await saveAddresses()
+  }, [saveAddresses, saveBuyer])
+
   const confirmShipping = useCallback(
     async (picked: ShippingFlat) => {
       const updated = await serverApi.putCartShippingMethod({
@@ -399,10 +416,44 @@ export function useCheckoutSession(cartId: string) {
         scheduledTime: null,
       })
       setCheckoutCart(updated)
+      return updated
     },
     [cartId],
   )
 
+  /** Persiste buyer + dirección + envío al completar el paso Dirección. */
+  const persistDeliveryStep = useCallback(async () => {
+    setFormError(null)
+    setIsSaving(true)
+    try {
+      await saveContactAndDelivery()
+      if (selectedShippingKey) {
+        const picked = shippingFlat.find((o) => o.key === selectedShippingKey)
+        if (picked) await confirmShipping(picked)
+      }
+      setDeliveryPersisted(true)
+      clearPaymentSession()
+    } catch (error) {
+      setFormError(
+        error instanceof Error ? error.message : 'No se pudo guardar la dirección.',
+      )
+      throw error
+    } finally {
+      setIsSaving(false)
+    }
+  }, [
+    clearPaymentSession,
+    confirmShipping,
+    saveContactAndDelivery,
+    selectedShippingKey,
+    shippingFlat,
+  ])
+
+  const invalidateDeliveryPersistence = useCallback(() => {
+    setDeliveryPersisted(false)
+    clearPaymentSession()
+  }, [clearPaymentSession])
+
   const handleApplyCoupon = useCallback(async () => {
     const code = couponCode.trim()
     if (!code) return
@@ -455,10 +506,13 @@ export function useCheckoutSession(cartId: string) {
       setFormError(null)
       setIsSaving(true)
       try {
-        await saveContactAndDelivery()
-        if (selectedShippingKey) {
-          const picked = shippingFlat.find((o) => o.key === selectedShippingKey)
-          if (picked) await confirmShipping(picked)
+        if (!deliveryPersisted) {
+          await saveContactAndDelivery()
+          if (selectedShippingKey) {
+            const picked = shippingFlat.find((o) => o.key === selectedShippingKey)
+            if (picked) await confirmShipping(picked)
+          }
+          setDeliveryPersisted(true)
         }
         const code =
           selectedPaymentCode ?? paymentMethods[0]?.code
@@ -507,6 +561,7 @@ export function useCheckoutSession(cartId: string) {
       checkoutPaymentMethodCode,
       checkoutPaymentResponse,
       confirmShipping,
+      deliveryPersisted,
       externalRef,
       paymentMethods,
       providerPaymentCompleted,
@@ -548,12 +603,14 @@ export function useCheckoutSession(cartId: string) {
     clearCart,
     contact,
     setContact,
-    billingChoice,
-    setBillingChoice,
     selectedShippingKey,
     setSelectedShippingKey,
     selectedPaymentCode,
     selectPaymentMethod,
+    ensureDefaultPaymentMethod,
+    clearPaymentSession,
+    persistDeliveryStep,
+    invalidateDeliveryPersistence,
     providerPaymentCompleted,
     setProviderPaymentCompleted,
     payNow,

package/src/config.d.ts

@@ -1,9 +1,4 @@
-import type {
-  EcomiqAnalyticsConfig,
-  EcomiqLayoutConfig,
-  EcomiqSeoConfig,
-  EcomiqThemeConfig,
-} from './index'
+import type { EcomiqThemeConfig } from './index'
 
 export interface EcomiqApiConfig {
   baseUrl?: string
@@ -32,14 +27,13 @@ export type EcomiqCloudflareRoute =
     }
 
 export interface EcomiqConfigInput {
-  name: string
-  slug: string
-  description?: string
+  /**
+   * Identidad de tienda para `x-Store-Domain`.
+   * Acepta `marketplace`, `marketplace.ecomiq.app` o `marketplace.pe`.
+   */
+  domain: string
   api?: EcomiqApiConfig
   theme?: EcomiqThemeConfig
-  seo?: EcomiqSeoConfig
-  analytics?: EcomiqAnalyticsConfig
-  layout?: EcomiqLayoutConfig
   dev?: {
     port?: number
     apiBaseUrl?: string

package/src/config.mjs

@@ -1,6 +1,9 @@
 /**
  * Configuración base de un proyecto Ecomiq (ecomiq.config.js).
  * Se valida con Zod al arrancar la CLI para dar errores claros.
+ *
+ * Identidad de tienda, SEO, analytics y menús salen de `/v1/settings`.
+ * Aquí solo queda lo operativo: domain, api, theme, dev, deploy, env.
  */
 import { z } from 'zod'
 
@@ -31,15 +34,11 @@ const cloudflareRouteSchema = z.union([
 ])
 
 const configSchema = z.object({
-  /** Nombre visible de la tienda (header, <title>, worker por defecto). */
-  name: z.string().min(1),
   /**
    * Identidad de la tienda en el API storefront (header x-Store-Domain).
-   * Ej. 'marketplace'.
+   * Acepta slug corto o dominio: `marketplace`, `marketplace.ecomiq.app`, `marketplace.pe`.
    */
-  slug: z.string().min(1),
-  /** Descripción para SEO por defecto. */
-  description: z.string().optional(),
+  domain: z.string().min(1),
   /** API de storefront. baseUrl default: https://storefront.ecomiq.pe */
   api: z
     .object({
@@ -62,64 +61,6 @@ const configSchema = z.object({
       radius: z.string().optional(),
     })
     .optional(),
-  /** SEO global, se mezcla con el `meta` de cada página (la página gana). */
-  seo: z
-    .object({
-      /** Plantilla del <title>. `%s` se reemplaza por el título de la página. */
-      titleTemplate: z.string().optional(),
-      keywords: z.array(z.string()).optional(),
-      /** Ruta dentro de public/, ej. '/favicon.svg'. */
-      favicon: z.string().optional(),
-      /** Imagen OG por defecto (URL absoluta o ruta en public/). */
-      ogImage: z.string().optional(),
-      twitterCard: z.enum(['summary', 'summary_large_image']).optional(),
-      /** Metas extra: [{ name | property, content }]. */
-      meta: z
-        .array(
-          z.object({
-            name: z.string().optional(),
-            property: z.string().optional(),
-            content: z.string(),
-          }),
-        )
-        .optional(),
-      /** <link> extra: [{ rel, href, ... }]. */
-      links: z.array(z.record(z.string())).optional(),
-    })
-    .optional(),
-  /** Analytics sin escribir código. */
-  analytics: z
-    .object({
-      /** ID de Google Analytics 4, ej. 'G-XXXXXXX'. */
-      googleAnalytics: z.string().optional(),
-      /** ID de Meta Pixel. */
-      metaPixel: z.string().optional(),
-      /** Dominio para Plausible, ej. 'tienda.ecomiq.app'. */
-      plausible: z.string().optional(),
-      /** Scripts arbitrarios: [{ src }] o [{ inline: '...' }]. */
-      scripts: z
-        .array(
-          z.object({
-            src: z.string().optional(),
-            inline: z.string().optional(),
-            defer: z.boolean().optional(),
-            async: z.boolean().optional(),
-          }),
-        )
-        .optional(),
-    })
-    .optional(),
-  /** Layout declarativo (usado por el layout por defecto; un layout.tsx en la raíz lo reemplaza). */
-  layout: z
-    .object({
-      /** Enlaces del header: [{ label, to }]. */
-      nav: z.array(z.object({ label: z.string(), to: z.string() })).optional(),
-      /** Texto del footer. Default: '{name} — creado con Ecomiq'. */
-      footerText: z.string().optional(),
-      /** Header pegado arriba con blur. Default: true. */
-      stickyHeader: z.boolean().default(true).optional(),
-    })
-    .optional(),
   dev: z
     .object({
       port: z.number().int().default(3000),