@ecomiq/storefront 2.1.4 → 3.0.1

package/src/components/checkout/checkout-steps.ts

@@ -1,111 +0,0 @@
-export const CHECKOUT_STEPS = ['contact', 'delivery', 'payment'] as const
-
-export type CheckoutStepId = (typeof CHECKOUT_STEPS)[number]
-
-export type CheckoutStepFlow = {
-  active: CheckoutStepId
-  completed: Record<CheckoutStepId, boolean>
-}
-
-export function createCheckoutStepFlow(
-  active: CheckoutStepId = 'contact',
-): CheckoutStepFlow {
-  return {
-    active,
-    completed: {
-      contact: false,
-      delivery: false,
-      payment: false,
-    },
-  }
-}
-
-export function checkoutStepIndex(step: CheckoutStepId): number {
-  return CHECKOUT_STEPS.indexOf(step)
-}
-
-export function isCheckoutStepLocked(
-  flow: CheckoutStepFlow,
-  step: CheckoutStepId,
-): boolean {
-  return checkoutStepIndex(step) > checkoutStepIndex(flow.active)
-}
-
-export function isCheckoutStepActive(
-  flow: CheckoutStepFlow,
-  step: CheckoutStepId,
-): boolean {
-  return flow.active === step
-}
-
-export function isCheckoutStepComplete(
-  flow: CheckoutStepFlow,
-  step: CheckoutStepId,
-): boolean {
-  return flow.completed[step] && flow.active !== step
-}
-
-/** Completa el paso activo y avanza al siguiente (si existe). */
-export function completeCheckoutStep(
-  flow: CheckoutStepFlow,
-  step: CheckoutStepId,
-): CheckoutStepFlow {
-  if (flow.active !== step) return flow
-  const idx = checkoutStepIndex(step)
-  const next = CHECKOUT_STEPS[idx + 1]
-  return {
-    active: next ?? step,
-    completed: {
-      ...flow.completed,
-      [step]: true,
-    },
-  }
-}
-
-/**
- * Reabre un paso ya completado para editarlo e invalida todos los posteriores.
- */
-export function editCheckoutStep(
-  flow: CheckoutStepFlow,
-  step: CheckoutStepId,
-): CheckoutStepFlow {
-  const idx = checkoutStepIndex(step)
-  if (idx < 0) return flow
-  if (checkoutStepIndex(flow.active) < idx && !flow.completed[step]) {
-    return flow
-  }
-
-  const completed = { ...flow.completed }
-  for (const id of CHECKOUT_STEPS) {
-    if (checkoutStepIndex(id) >= idx) completed[id] = false
-  }
-
-  return {
-    active: step,
-    completed,
-  }
-}
-
-/**
- * Marca contact + delivery como completos y deja el pago activo.
- * Usado al prefill automático de un usuario logueado con dirección válida.
- */
-export function jumpCheckoutToPayment(): CheckoutStepFlow {
-  return {
-    active: 'payment',
-    completed: {
-      contact: true,
-      delivery: true,
-      payment: false,
-    },
-  }
-}
-
-export function checkoutStepStatus(
-  flow: CheckoutStepFlow,
-  step: CheckoutStepId,
-): 'active' | 'complete' | 'locked' {
-  if (isCheckoutStepActive(flow, step)) return 'active'
-  if (isCheckoutStepComplete(flow, step)) return 'complete'
-  return 'locked'
-}

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

@@ -1,281 +0,0 @@
-import { z } from 'zod'
-import type { CheckoutContactForm } from './types'
-
-export const CHECKOUT_FIELD_IDS = [
-  'email',
-  'firstName',
-  'lastName',
-  'countryCode',
-  'address',
-  'department',
-  'province-geo',
-  'district',
-  'city',
-  'province-region',
-  'phone',
-  'checkout-shipping-method',
-  'checkout-payment-method',
-] as const
-
-export type CheckoutFieldId = (typeof CHECKOUT_FIELD_IDS)[number]
-
-export const CHECKOUT_FIELD_FOCUS_ORDER: CheckoutFieldId[] = [
-  'email',
-  'firstName',
-  'lastName',
-  'countryCode',
-  'address',
-  'department',
-  'province-geo',
-  'district',
-  'city',
-  'province-region',
-  'phone',
-  'checkout-shipping-method',
-  'checkout-payment-method',
-]
-
-const zodPathToFieldId: Record<string, CheckoutFieldId> = {
-  email: 'email',
-  firstName: 'firstName',
-  lastName: 'lastName',
-  countryCode: 'countryCode',
-  address: 'address',
-  phone: 'phone',
-  departmentCode: 'department',
-  provinceCode: 'province-geo',
-  districtCode: 'district',
-  city: 'city',
-  province: 'province-region',
-  selectedShippingKey: 'checkout-shipping-method',
-  selectedPaymentCode: 'checkout-payment-method',
-}
-
-export type CheckoutFormValidationContext = {
-  contact: CheckoutContactForm
-  selectedShippingKey: string | null
-  shippingOptionsCount: number
-  selectedPaymentCode: string | null
-  paymentMethodsCount: number
-}
-
-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) => {
-      refineDelivery(data, ctx)
-      refinePayment(data, ctx)
-    })
-}
-
-export function checkoutValidationInputFromContext(
-  ctx: CheckoutFormValidationContext,
-) {
-  const { contact } = ctx
-  return {
-    email: contact.email,
-    firstName: contact.firstName,
-    lastName: contact.lastName,
-    countryCode: contact.countryCode,
-    address: contact.address,
-    phone: contact.phone,
-    departmentCode: contact.departmentCode,
-    provinceCode: contact.provinceCode,
-    districtCode: contact.districtCode,
-    city: contact.city,
-    province: contact.province,
-    selectedShippingKey: ctx.selectedShippingKey,
-    shippingOptionsCount: ctx.shippingOptionsCount,
-    selectedPaymentCode: ctx.selectedPaymentCode,
-    paymentMethodsCount: ctx.paymentMethodsCount,
-  }
-}
-
-export function mapZodIssuesToFieldErrors(
-  error: z.ZodError,
-): Partial<Record<CheckoutFieldId, string>> {
-  const out: Partial<Record<CheckoutFieldId, string>> = {}
-  for (const issue of error.issues) {
-    const key = issue.path[0]
-    if (typeof key !== 'string') continue
-    const fieldId = zodPathToFieldId[key]
-    if (!fieldId || out[fieldId]) continue
-    out[fieldId] = issue.message
-  }
-  return out
-}
-
-export function firstInvalidFieldId(
-  errors: Partial<Record<CheckoutFieldId, string>>,
-): CheckoutFieldId | null {
-  for (const id of CHECKOUT_FIELD_FOCUS_ORDER) {
-    if (errors[id]) return id
-  }
-  return null
-}
-
-export function focusCheckoutField(fieldId: CheckoutFieldId): void {
-  if (typeof document === 'undefined') return
-  const el = document.getElementById(fieldId)
-  if (el) {
-    el.focus({ preventScroll: false })
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
-    return
-  }
-  if (fieldId === 'checkout-shipping-method') {
-    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') {
-    const radio = document.querySelector<HTMLInputElement>('input[name="payment"]')
-    radio?.focus()
-    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

@@ -1,15 +0,0 @@
-import type { CartCheckoutResponse } from '@ecomiq/core'
-
-export { formatMoney } from '../../format-money'
-
-export function thankYouUrl(cartToken: string, transactionId?: string) {
-  const q = new URLSearchParams({ cartToken })
-  if (transactionId) q.set('transactionId', transactionId)
-  return `/thank-you?${q.toString()}`
-}
-
-export function paymentRedirectUrl(result: CartCheckoutResponse): string | null {
-  const actionUrl = result.payment?.action?.url
-  if (typeof actionUrl === 'string' && actionUrl.trim()) return actionUrl
-  return null
-}

package/src/components/checkout/index.ts

@@ -1,5 +0,0 @@
-/**
- * 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'

package/src/components/checkout/map-customer-to-checkout.ts

@@ -1,188 +0,0 @@
-import type {
-  CustomerAddressUpsertInput,
-  CustomerProfile,
-  CustomerSavedAddress,
-} from '@ecomiq/core'
-import type { CheckoutContactForm } from './types'
-
-export function findGeoCodeByName(
-  items: { code: string; name: string }[],
-  name: string,
-): string {
-  const target = name.trim().toLowerCase()
-  if (!target) return ''
-  return (
-    items.find((item) => item.name.trim().toLowerCase() === target)?.code ?? ''
-  )
-}
-
-/** Normaliza teléfono a dígitos nacionales (PE: 9). */
-export function normalizeCheckoutPhone(
-  phone: string,
-  countryCode: string,
-): string {
-  let digits = phone.replace(/\D/g, '')
-  const country = countryCode.toUpperCase()
-  if (country === 'PE' && digits.startsWith('51') && digits.length > 9) {
-    digits = digits.slice(-9)
-  }
-  if (country === 'PE' && digits.length > 9) {
-    digits = digits.slice(-9)
-  }
-  return digits
-}
-
-export function customerAddressToCheckoutPatch(
-  address: CustomerSavedAddress,
-  profile?: CustomerProfile | null,
-): Partial<CheckoutContactForm> {
-  const countryCode = (
-    address.countryIsoCode ||
-    profile?.countryIsoCode ||
-    'PE'
-  ).toUpperCase()
-  const phoneRaw =
-    address.cellPhone || address.phone || profile?.phone || ''
-  const addressLine = [address.addressLine, address.addressNumber]
-    .map((part) => part.trim())
-    .filter(Boolean)
-    .join(' ')
-
-  return {
-    firstName: profile?.firstName?.trim() || undefined,
-    lastName: profile?.lastName?.trim() || undefined,
-    email: profile?.email?.trim() || undefined,
-    phone: phoneRaw
-      ? normalizeCheckoutPhone(phoneRaw, countryCode)
-      : undefined,
-    countryCode,
-    address: addressLine || undefined,
-    address2: address.reference?.trim() || undefined,
-    postalCode: address.postalCode?.trim() || undefined,
-    departmentName: address.department?.trim() || undefined,
-    provinceName: address.province?.trim() || undefined,
-    province: address.province?.trim() || undefined,
-    districtName: address.district?.trim() || undefined,
-    city: address.district?.trim() || undefined,
-    // Los códigos se resuelven luego vía geo INEI.
-    departmentCode: '',
-    provinceCode: '',
-    districtCode: '',
-  }
-}
-
-export function customerProfileToCheckoutPatch(
-  profile: CustomerProfile,
-): Partial<CheckoutContactForm> {
-  const countryCode = (profile.countryIsoCode || 'PE').toUpperCase()
-  return {
-    email: profile.email?.trim() || undefined,
-    firstName: profile.firstName?.trim() || undefined,
-    lastName: profile.lastName?.trim() || undefined,
-    phone: profile.phone
-      ? normalizeCheckoutPhone(profile.phone, countryCode)
-      : undefined,
-    countryCode,
-  }
-}
-
-/**
- * Rellena solo campos vacíos del formulario (el carrito/hidratación tienen prioridad).
- */
-export function mergeCheckoutContactPrefill(
-  current: CheckoutContactForm,
-  prefill: Partial<CheckoutContactForm>,
-): CheckoutContactForm {
-  const next = { ...current }
-  for (const key of Object.keys(prefill) as (keyof CheckoutContactForm)[]) {
-    const value = prefill[key]
-    if (value == null || String(value).trim() === '') continue
-    if (String(current[key] ?? '').trim()) continue
-    next[key] = value
-  }
-  return next
-}
-
-/** Aplica una dirección guardada pisando campos de entrega (elige el usuario). */
-export function applySavedAddressToContact(
-  current: CheckoutContactForm,
-  address: CustomerSavedAddress,
-  profile?: CustomerProfile | null,
-): CheckoutContactForm {
-  const patch = customerAddressToCheckoutPatch(address, profile)
-  return {
-    ...current,
-    countryCode: patch.countryCode || current.countryCode,
-    address: patch.address || '',
-    address2: patch.address2 ?? '',
-    postalCode: patch.postalCode || '',
-    departmentName: patch.departmentName || '',
-    provinceName: patch.provinceName || '',
-    province: patch.province || '',
-    districtName: patch.districtName || '',
-    city: patch.city || '',
-    phone: patch.phone || current.phone,
-    firstName: current.firstName.trim() || patch.firstName || '',
-    lastName: current.lastName.trim() || patch.lastName || '',
-    email: current.email.trim() || patch.email || '',
-    departmentCode: '',
-    provinceCode: '',
-    districtCode: '',
-  }
-}
-
-export function pickDefaultCustomerAddress(
-  addresses: CustomerSavedAddress[],
-): CustomerSavedAddress | null {
-  if (!addresses.length) return null
-  return addresses.find((a) => a.isDefault) ?? addresses[0] ?? null
-}
-
-/** Separa calle y número; si no hay número claro usa `S/N`. */
-export function splitStreetAddress(address: string): {
-  addressLine: string
-  addressNumber: string
-} {
-  const trimmed = address.trim()
-  if (!trimmed) return { addressLine: 'Dirección', addressNumber: 'S/N' }
-  const match = trimmed.match(/^(.*)\s+(\S+)$/)
-  if (match?.[1]?.trim() && match[2]) {
-    return { addressLine: match[1].trim(), addressNumber: match[2] }
-  }
-  return { addressLine: trimmed, addressNumber: 'S/N' }
-}
-
-/** Checkout → payload de `POST customer/addresses`. */
-export function checkoutContactToCustomerAddressUpsert(
-  contact: CheckoutContactForm,
-  options: {
-    addressKey?: string
-    isDefault?: boolean
-  } = {},
-): CustomerAddressUpsertInput {
-  const countryIsoCode = (contact.countryCode || 'PE').toUpperCase()
-  const { addressLine, addressNumber } = splitStreetAddress(contact.address)
-  const department =
-    contact.departmentName.trim() || contact.province.trim() || '—'
-  const province =
-    contact.provinceName.trim() || contact.province.trim() || '—'
-  const district = contact.districtName.trim() || contact.city.trim() || '—'
-  const phone = contact.phone.trim()
-
-  return {
-    addressKey: (options.addressKey?.trim() || 'Casa').slice(0, 48),
-    countryIsoCode,
-    addressLine,
-    addressNumber,
-    department,
-    province,
-    district,
-    phone,
-    cellPhone: phone,
-    postalCode: contact.postalCode.trim() || '00000',
-    reference: contact.address2.trim(),
-    latitude: null,
-    longitude: null,
-    isDefault: Boolean(options.isDefault),
-  }
-}

package/src/components/checkout/types.ts

@@ -1,41 +0,0 @@
-export type CheckoutContactForm = {
-  email: string
-  firstName: string
-  lastName: string
-  company: string
-  address: string
-  address2: string
-  /** Distrito (nombre); en PE se sincroniza con districtName. */
-  city: string
-  /** Provincia/región (nombre). */
-  province: string
-  postalCode: string
-  phone: string
-  countryCode: string
-  departmentCode: string
-  departmentName: string
-  provinceCode: string
-  provinceName: string
-  districtCode: string
-  districtName: string
-}
-
-export const emptyCheckoutContact = (countryCode = 'PE'): CheckoutContactForm => ({
-  email: '',
-  firstName: '',
-  lastName: '',
-  company: '',
-  address: '',
-  address2: '',
-  city: '',
-  province: '',
-  postalCode: '',
-  phone: '',
-  countryCode,
-  departmentCode: '',
-  departmentName: '',
-  provinceCode: '',
-  provinceName: '',
-  districtCode: '',
-  districtName: '',
-})