@ecomiq/storefront 2.0.11 → 2.0.14

package/src/components/checkout/checkout-shipping-address-section.tsx

@@ -1,4 +1,6 @@
+import { useState } from 'react'
 import type { Country, Department, District, Province } from '@ecomiq/core'
+import type { CustomerSavedAddress } from '@ecomiq/core'
 import { Button } from '../../ui'
 import type { CheckoutContactForm } from './types'
 import type { CheckoutFieldId } from './form-schema'
@@ -46,6 +48,15 @@ export function CheckoutShippingAddressSection({
   onSelectShipping,
   onClearError,
   onContinue,
+  savedAddresses,
+  selectedSavedAddressId,
+  onSelectSavedAddress,
+  canSaveToAccount = false,
+  addressSaveError,
+  saveToAccount = false,
+  saveAddressKey = 'Casa',
+  onSaveToAccountChange,
+  onSaveAddressKeyChange,
 }: {
   contact: CheckoutContactForm
   fieldErrors: Partial<Record<CheckoutFieldId, string>>
@@ -62,12 +73,65 @@ export function CheckoutShippingAddressSection({
   onPatch: (patch: Partial<CheckoutContactForm>) => void
   onSelectShipping: (key: string) => void
   onClearError: (id: CheckoutFieldId) => void
-  onContinue: () => void | Promise<void>
+  onContinue: (options?: {
+    saveToAccount?: boolean
+    addressKey?: string
+  }) => void | Promise<void>
+  savedAddresses?: CustomerSavedAddress[]
+  selectedSavedAddressId?: string | null
+  onSelectSavedAddress?: (addressId: string) => void
+  /** Muestra checkbox para guardar en “Mis direcciones” (usuario logueado). */
+  canSaveToAccount?: boolean
+  addressSaveError?: string | null
+  saveToAccount?: boolean
+  saveAddressKey?: string
+  onSaveToAccountChange?: (checked: boolean) => void
+  onSaveAddressKeyChange?: (value: string) => void
 }) {
   const isPe = contact.countryCode.toUpperCase() === 'PE'
+  const hasSavedAddresses = Boolean(savedAddresses?.length && onSelectSavedAddress)
+  const [localSaveError, setLocalSaveError] = useState<string | null>(null)
+  const saveError = addressSaveError ?? localSaveError
 
   return (
     <div className="space-y-6">
+      {hasSavedAddresses ? (
+        <div className="min-w-0">
+          <label
+            htmlFor="saved-address"
+            className="text-sm font-medium text-foreground"
+          >
+            Dirección guardada
+          </label>
+          <select
+            id="saved-address"
+            className={fieldClass()}
+            value={selectedSavedAddressId ?? ''}
+            onChange={(e) => {
+              const id = e.target.value
+              if (id) onSelectSavedAddress?.(id)
+            }}
+          >
+            <option value="" disabled>
+              Seleccionar dirección…
+            </option>
+            {savedAddresses!.map((addr) => (
+              <option key={addr.id} value={addr.id}>
+                {addr.addressKey}
+                {addr.isDefault ? ' (predeterminada)' : ''}
+                {' — '}
+                {[addr.addressLine, addr.addressNumber, addr.district]
+                  .filter(Boolean)
+                  .join(' ')}
+              </option>
+            ))}
+          </select>
+          <p className="mt-1.5 text-xs text-muted-foreground">
+            Usa una dirección de tu cuenta o edita los campos abajo.
+          </p>
+        </div>
+      ) : null}
+
       <div className="grid gap-4 sm:grid-cols-2">
         <CheckoutTextField
           id="firstName"
@@ -281,12 +345,53 @@ export function CheckoutShippingAddressSection({
         </label>
       </div>
 
+      {canSaveToAccount ? (
+        <div className="space-y-3 rounded-lg border border-border bg-muted/20 p-4">
+          <label className="flex items-start gap-2.5 text-sm text-foreground">
+            <input
+              type="checkbox"
+              className="mt-0.5 size-4 rounded border-border accent-foreground"
+              checked={saveToAccount}
+              onChange={(e) => {
+                onSaveToAccountChange?.(e.target.checked)
+                setLocalSaveError(null)
+              }}
+            />
+            <span>
+              Guardar esta dirección en{' '}
+              <span className="font-medium">Mis direcciones</span>
+            </span>
+          </label>
+          {saveToAccount ? (
+            <CheckoutTextField
+              id="addressKey"
+              label="Nombre de la dirección"
+              value={saveAddressKey}
+              placeholder="Casa, Oficina…"
+              onChange={(v) => onSaveAddressKeyChange?.(v)}
+            />
+          ) : null}
+          {saveError ? <FieldError message={saveError} /> : null}
+        </div>
+      ) : null}
+
       <Button
         type="button"
         className="w-full uppercase tracking-wide"
         size="lg"
         disabled={isSaving}
-        onClick={() => void onContinue()}
+        onClick={() => {
+          setLocalSaveError(null)
+          if (saveToAccount && !saveAddressKey.trim()) {
+            setLocalSaveError('Indica un nombre para la dirección')
+            return
+          }
+          void onContinue(
+            canSaveToAccount && saveToAccount
+              ? { saveToAccount: true, addressKey: saveAddressKey.trim() }
+              : undefined,
+          )
+        }}
       >
         {isSaving ? 'Guardando…' : 'Enviar y continuar'}
       </Button>

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

@@ -86,6 +86,21 @@ export function editCheckoutStep(
   }
 }
 
+/**
+ * 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,

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

@@ -0,0 +1,188 @@
+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),
+  }
+}