@ecomiq/storefront 2.0.11 → 2.0.14

package/src/components/checkout/use-checkout-customer-prefill.ts

@@ -0,0 +1,409 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react'
+import {
+  createCustomerAddress,
+  customerMeToProfile,
+  getCustomerAddresses,
+  getCustomerMe,
+  toCustomerSavedAddresses,
+  type CustomerProfile,
+  type CustomerSavedAddress,
+  type Department,
+  type District,
+  type Province,
+} from '@ecomiq/core'
+import { createStorefrontProxyApi } from '../../proxy-api'
+import {
+  buildCheckoutContactStepSchema,
+  buildCheckoutDeliveryStepSchema,
+} from './form-schema'
+import {
+  applySavedAddressToContact,
+  checkoutContactToCustomerAddressUpsert,
+  findGeoCodeByName,
+  mergeCheckoutContactPrefill,
+  customerProfileToCheckoutPatch,
+  customerAddressToCheckoutPatch,
+  pickDefaultCustomerAddress,
+} from './map-customer-to-checkout'
+import {
+  jumpCheckoutToPayment,
+  type CheckoutStepFlow,
+} from './checkout-steps'
+import type { CheckoutContactForm } from './types'
+
+type ShippingFlatItem = { key: string }
+
+type UseCheckoutCustomerPrefillArgs = {
+  enabled: boolean
+  cartId: string
+  currency: string
+  contact: CheckoutContactForm
+  setContact: Dispatch<SetStateAction<CheckoutContactForm>>
+  departments: Department[]
+  provinces: Province[]
+  districts: District[]
+  selectedShippingKey: string | null
+  shippingFlat: ShippingFlatItem[]
+  shippingLoading: boolean
+  stepFlow: CheckoutStepFlow
+  setStepFlow: Dispatch<SetStateAction<CheckoutStepFlow>>
+  persistDeliveryStep: () => Promise<void>
+  invalidateDeliveryPersistence: () => void
+  /** Si el usuario marcó guardar en cuenta, el auto-avance también debe persistirla. */
+  saveAddressIntent?: { enabled: boolean; addressKey: string } | null
+  onAddressSaveError?: (message: string) => void
+  onAddressSaved?: () => void
+  /** Asocia el carrito guest al buyer autenticado (PATCH buyer). */
+  associateBuyer?: () => Promise<unknown>
+}
+
+export function useCheckoutCustomerPrefill({
+  enabled,
+  cartId,
+  currency,
+  contact,
+  setContact,
+  departments,
+  provinces,
+  districts,
+  selectedShippingKey,
+  shippingFlat,
+  shippingLoading,
+  stepFlow,
+  setStepFlow,
+  persistDeliveryStep,
+  invalidateDeliveryPersistence,
+  saveAddressIntent = null,
+  onAddressSaveError,
+  onAddressSaved,
+  associateBuyer,
+}: UseCheckoutCustomerPrefillArgs) {
+  const [profile, setProfile] = useState<CustomerProfile | null>(null)
+  const [savedAddresses, setSavedAddresses] = useState<CustomerSavedAddress[]>(
+    [],
+  )
+  const [selectedSavedAddressId, setSelectedSavedAddressId] = useState<
+    string | null
+  >(null)
+  const [isLoadingCustomer, setIsLoadingCustomer] = useState(false)
+
+  const fetchedRef = useRef(false)
+  const profileMergedRef = useRef(false)
+  const addressMergedRef = useRef(false)
+  const buyerAssociatedRef = useRef(false)
+  const autoAdvanceRef = useRef(false)
+  const autoAdvanceInFlightRef = useRef(false)
+
+  useEffect(() => {
+    fetchedRef.current = false
+    profileMergedRef.current = false
+    addressMergedRef.current = false
+    buyerAssociatedRef.current = false
+    autoAdvanceRef.current = false
+    autoAdvanceInFlightRef.current = false
+    setProfile(null)
+    setSavedAddresses([])
+    setSelectedSavedAddressId(null)
+  }, [cartId])
+
+  useEffect(() => {
+    if (!enabled) return
+    if (fetchedRef.current) return
+    fetchedRef.current = true
+    setIsLoadingCustomer(true)
+
+    void (async () => {
+      try {
+        const api = createStorefrontProxyApi()
+        const [me, addresses] = await Promise.all([
+          getCustomerMe(api),
+          getCustomerAddresses(api),
+        ])
+        const nextProfile = customerMeToProfile(me)
+        const saved = toCustomerSavedAddresses(addresses)
+        setProfile(nextProfile)
+        setSavedAddresses(saved)
+
+        const defaultAddress = pickDefaultCustomerAddress(saved)
+        if (defaultAddress) setSelectedSavedAddressId(defaultAddress.id)
+      } catch {
+        // Sin perfil/direcciones: el checkout sigue como invitado/manual.
+      } finally {
+        setIsLoadingCustomer(false)
+      }
+    })()
+  }, [enabled, cartId])
+
+  // Prefill perfil (campos vacíos).
+  useEffect(() => {
+    if (!enabled || !profile || profileMergedRef.current) return
+    profileMergedRef.current = true
+    const patch = customerProfileToCheckoutPatch(profile)
+    setContact((current) => mergeCheckoutContactPrefill(current, patch))
+  }, [enabled, profile, setContact])
+
+  // Tras login/registro: asociar el carrito al email del customer.
+  useEffect(() => {
+    if (!enabled || !associateBuyer) return
+    if (buyerAssociatedRef.current || isLoadingCustomer) return
+    const email = contact.email.trim()
+    const firstName = contact.firstName.trim()
+    const lastName = contact.lastName.trim()
+    const phone = contact.phone.trim()
+    if (!email || !firstName || !lastName || !phone) return
+
+    buyerAssociatedRef.current = true
+    void associateBuyer().catch(() => {
+      buyerAssociatedRef.current = false
+    })
+  }, [
+    associateBuyer,
+    contact.email,
+    contact.firstName,
+    contact.lastName,
+    contact.phone,
+    enabled,
+    isLoadingCustomer,
+  ])
+
+  // Prefill dirección default (campos vacíos).
+  useEffect(() => {
+    if (!enabled || addressMergedRef.current) return
+    if (!savedAddresses.length) return
+    addressMergedRef.current = true
+    const defaultAddress = pickDefaultCustomerAddress(savedAddresses)
+    if (!defaultAddress) return
+    const patch = customerAddressToCheckoutPatch(defaultAddress, profile)
+    setContact((current) => mergeCheckoutContactPrefill(current, patch))
+  }, [enabled, profile, savedAddresses, setContact])
+
+  // Resolver códigos INEI desde nombres.
+  useEffect(() => {
+    if (!enabled) return
+    const isPe = contact.countryCode.toUpperCase() === 'PE'
+    if (!isPe) return
+
+    if (
+      contact.departmentName &&
+      !contact.departmentCode &&
+      departments.length
+    ) {
+      const code = findGeoCodeByName(departments, contact.departmentName)
+      if (code) {
+        setContact((c) =>
+          c.departmentCode ? c : { ...c, departmentCode: code },
+        )
+      }
+    }
+
+    if (
+      contact.provinceName &&
+      contact.departmentCode &&
+      !contact.provinceCode &&
+      provinces.length
+    ) {
+      const code = findGeoCodeByName(provinces, contact.provinceName)
+      if (code) {
+        setContact((c) =>
+          c.provinceCode
+            ? c
+            : { ...c, provinceCode: code, province: c.province || c.provinceName },
+        )
+      }
+    }
+
+    if (
+      contact.districtName &&
+      contact.provinceCode &&
+      !contact.districtCode &&
+      districts.length
+    ) {
+      const code = findGeoCodeByName(districts, contact.districtName)
+      if (code) {
+        setContact((c) =>
+          c.districtCode
+            ? c
+            : {
+                ...c,
+                districtCode: code,
+                city: c.city || c.districtName,
+              },
+        )
+      }
+    }
+  }, [
+    contact.countryCode,
+    contact.departmentCode,
+    contact.departmentName,
+    contact.districtCode,
+    contact.districtName,
+    contact.provinceCode,
+    contact.provinceName,
+    departments,
+    districts,
+    enabled,
+    provinces,
+    setContact,
+  ])
+
+  const saveContactAsCustomerAddress = useCallback(
+    async (
+      form: CheckoutContactForm,
+      options: { addressKey?: string; isDefault?: boolean } = {},
+    ) => {
+      const payload = checkoutContactToCustomerAddressUpsert(form, {
+        addressKey: options.addressKey,
+        isDefault:
+          options.isDefault ??
+          (savedAddresses.length === 0 ||
+            !savedAddresses.some((a) => a.isDefault)),
+      })
+      const api = createStorefrontProxyApi()
+      const created = await createCustomerAddress(api, payload)
+      const createdId =
+        created && typeof created === 'object' && 'id' in created
+          ? String(created.id)
+          : null
+      const refreshed = toCustomerSavedAddresses(await getCustomerAddresses(api))
+      setSavedAddresses(refreshed)
+      if (createdId) {
+        setSelectedSavedAddressId(createdId)
+        return refreshed.find((a) => a.id === createdId) ?? null
+      }
+      const match =
+        refreshed.find(
+          (a) =>
+            a.addressKey === payload.addressKey &&
+            a.postalCode === payload.postalCode &&
+            a.addressLine === payload.addressLine,
+        ) ?? pickDefaultCustomerAddress(refreshed)
+      if (match) setSelectedSavedAddressId(match.id)
+      return match
+    },
+    [savedAddresses],
+  )
+
+  // Auto-avanzar a pago cuando contact+delivery están completos.
+  useEffect(() => {
+    if (!enabled) return
+    if (autoAdvanceRef.current || autoAdvanceInFlightRef.current) return
+    if (stepFlow.active === 'payment') {
+      autoAdvanceRef.current = true
+      return
+    }
+    if (shippingLoading || isLoadingCustomer) return
+    if (!selectedShippingKey || shippingFlat.length === 0) return
+
+    const contactOk = buildCheckoutContactStepSchema().safeParse({
+      email: contact.email,
+    }).success
+    if (!contactOk) return
+
+    const deliveryOk = buildCheckoutDeliveryStepSchema(currency).safeParse({
+      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,
+      shippingOptionsCount: shippingFlat.length,
+    }).success
+    if (!deliveryOk) return
+
+    autoAdvanceInFlightRef.current = true
+    void (async () => {
+      try {
+        await persistDeliveryStep()
+      } catch {
+        autoAdvanceInFlightRef.current = false
+        return
+      }
+
+      if (saveAddressIntent?.enabled) {
+        try {
+          await saveContactAsCustomerAddress(contact, {
+            addressKey: saveAddressIntent.addressKey,
+          })
+          onAddressSaved?.()
+        } catch (error) {
+          autoAdvanceInFlightRef.current = false
+          onAddressSaveError?.(
+            error instanceof Error
+              ? error.message
+              : 'No se pudo guardar la dirección en tu cuenta.',
+          )
+          return
+        }
+      }
+
+      autoAdvanceRef.current = true
+      setStepFlow(jumpCheckoutToPayment())
+    })()
+  }, [
+    contact,
+    currency,
+    enabled,
+    isLoadingCustomer,
+    onAddressSaved,
+    onAddressSaveError,
+    persistDeliveryStep,
+    saveAddressIntent?.addressKey,
+    saveAddressIntent?.enabled,
+    saveContactAsCustomerAddress,
+    selectedShippingKey,
+    setStepFlow,
+    shippingFlat.length,
+    shippingLoading,
+    stepFlow.active,
+  ])
+
+  const selectSavedAddress = useCallback(
+    (addressId: string) => {
+      const address = savedAddresses.find((a) => a.id === addressId)
+      if (!address) return
+      setSelectedSavedAddressId(addressId)
+      autoAdvanceRef.current = false
+      autoAdvanceInFlightRef.current = false
+      invalidateDeliveryPersistence()
+      setContact((current) =>
+        applySavedAddressToContact(current, address, profile),
+      )
+      setStepFlow((flow) => ({
+        active: flow.completed.contact || flow.active !== 'contact' ? 'delivery' : flow.active,
+        completed: {
+          contact: flow.completed.contact || flow.active !== 'contact',
+          delivery: false,
+          payment: false,
+        },
+      }))
+    },
+    [
+      invalidateDeliveryPersistence,
+      profile,
+      savedAddresses,
+      setContact,
+      setStepFlow,
+    ],
+  )
+
+  return {
+    profile,
+    savedAddresses,
+    selectedSavedAddressId,
+    isLoadingCustomer,
+    selectSavedAddress,
+    saveContactAsCustomerAddress,
+  }
+}

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

@@ -354,10 +354,10 @@ export function useCheckoutSession(cartId: string) {
   const saveBuyer = useCallback(async () => {
     const buyerCart = await serverApi.patchCartBuyer({
       cartId,
-      email: contact.email,
-      firstName: contact.firstName,
-      lastName: contact.lastName,
-      phone: contact.phone,
+      email: contact.email.trim(),
+      firstName: contact.firstName.trim(),
+      lastName: contact.lastName.trim(),
+      phone: contact.phone.trim(),
     })
     setCheckoutCart(buyerCart)
     return buyerCart
@@ -611,6 +611,7 @@ export function useCheckoutSession(cartId: string) {
     clearPaymentSession,
     persistDeliveryStep,
     invalidateDeliveryPersistence,
+    saveBuyer,
     providerPaymentCompleted,
     setProviderPaymentCompleted,
     payNow,

package/src/config.d.ts

@@ -39,6 +39,10 @@ export interface EcomiqConfigInput {
     apiBaseUrl?: string
     /** Default `node`. `workerd` emula Cloudflare en local. */
     runtime?: 'workerd' | 'node'
+    /**
+     * HTTPS en localhost. `true` = cert auto; `{ cert, key }` = PEM propios.
+     */
+    https?: boolean | { cert: string; key: string }
   }
   deploy?: {
     target?: 'cloudflare'

package/src/config.mjs

@@ -71,6 +71,20 @@ const configSchema = z.object({
        * `ecomiq build` / `deploy` siempre usan workerd.
        */
       runtime: z.enum(['workerd', 'node']),
+      /**
+       * HTTPS en localhost (`ecomiq dev`).
+       * `true` → certificado auto (basic-ssl).
+       * `{ cert, key }` → PEM propios relativos al proyecto.
+       */
+      https: z.union([
+        z.boolean(),
+        z
+          .object({
+            cert: z.string().min(1),
+            key: z.string().min(1),
+          })
+          .strict(),
+      ]),
     })
     .partial()
     .optional(),

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+export {
+  listRecentlyViewed,
+  trackRecentlyViewed,
+  toRecentlyViewedItem,
+  useRecentlyViewed,
+  useTrackRecentlyViewed,
+  type RecentlyViewedItem,
+  type TrackableProduct,
+} from './recently-viewed'

package/src/hooks/recently-viewed.ts

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useState } from 'react'
+import { z } from 'zod'
+import { useSettings } from '../providers/ecomiq'
+
+const RecentlyViewedItemSchema = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1),
+  slug: z.string().min(1),
+  imageUrl: z.string(),
+  price: z.number().nonnegative(),
+  compareAtPrice: z.number().nonnegative().nullable(),
+})
+
+const RecentlyViewedSessionSchema = z.object({
+  version: z.literal(1),
+  storeId: z.string().min(1),
+  items: z.array(RecentlyViewedItemSchema).max(12),
+})
+
+export type RecentlyViewedItem = z.infer<typeof RecentlyViewedItemSchema>
+
+const MAX_ITEMS = 8
+
+function storageKey(storeId: string) {
+  return `ecomiq:recently-viewed:v1:${storeId}`
+}
+
+function readSession(storeId: string) {
+  if (typeof localStorage === 'undefined') return undefined
+  try {
+    const raw = localStorage.getItem(storageKey(storeId))
+    if (!raw) return undefined
+    const parsed = RecentlyViewedSessionSchema.safeParse(JSON.parse(raw))
+    return parsed.success && parsed.data.storeId === storeId ? parsed.data : undefined
+  } catch {
+    return undefined
+  }
+}
+
+/** Lectura síncrona (tests / casos sin React). */
+export function listRecentlyViewed(storeId: string): RecentlyViewedItem[] {
+  return readSession(storeId)?.items ?? []
+}
+
+/** Persistencia síncrona: el item queda al frente y se deduplica por id. */
+export function trackRecentlyViewed(
+  storeId: string,
+  item: RecentlyViewedItem,
+): RecentlyViewedItem[] {
+  const current = listRecentlyViewed(storeId).filter((entry) => entry.id !== item.id)
+  const items = [item, ...current].slice(0, MAX_ITEMS)
+  localStorage.setItem(
+    storageKey(storeId),
+    JSON.stringify({
+      version: 1,
+      storeId,
+      items,
+    } satisfies z.infer<typeof RecentlyViewedSessionSchema>),
+  )
+  return items
+}
+
+export type TrackableProduct = {
+  id: string | number
+  name: string
+  slug: string
+  imageUrl?: string | null
+  images?: Array<{ url: string }>
+  price: number
+  compareAtPrice: number | null
+}
+
+export function toRecentlyViewedItem(product: TrackableProduct): RecentlyViewedItem {
+  return {
+    id: String(product.id),
+    name: product.name,
+    slug: product.slug,
+    imageUrl: product.imageUrl || product.images?.[0]?.url || '',
+    price: product.price,
+    compareAtPrice: product.compareAtPrice,
+  }
+}
+
+/**
+ * Lista reactiva de productos vistos recientemente de la tienda actual.
+ *
+ * ```tsx
+ * const { items, track } = useRecentlyViewed()
+ * ```
+ */
+export function useRecentlyViewed() {
+  const { store } = useSettings()
+  const [items, setItems] = useState<RecentlyViewedItem[]>([])
+
+  useEffect(() => {
+    setItems(listRecentlyViewed(store.id))
+  }, [store.id])
+
+  const track = useCallback(
+    (item: RecentlyViewedItem) => {
+      const next = trackRecentlyViewed(store.id, item)
+      setItems(next)
+      return next
+    },
+    [store.id],
+  )
+
+  return { items, track, storeId: store.id }
+}
+
+/**
+ * Registra un producto en “visto recientemente” al montar / cambiar de PDP.
+ *
+ * ```tsx
+ * useTrackRecentlyViewed(product)
+ * ```
+ */
+export function useTrackRecentlyViewed(product: TrackableProduct) {
+  const { store } = useSettings()
+  const item = toRecentlyViewedItem(product)
+
+  useEffect(() => {
+    trackRecentlyViewed(store.id, item)
+  }, [store.id, item.id, item.name, item.slug, item.imageUrl, item.price, item.compareAtPrice])
+}

package/src/index.ts

@@ -135,6 +135,46 @@ export type {
   StorefrontReviews,
   UpdateCartItemQuantityParams,
   VariantItem,
+  CustomerAddress,
+  CustomerAddresses,
+  CustomerAddressUpsertInput,
+  CustomerSavedAddress,
+  CustomerMe,
+  CustomerProfile,
+  CustomerProfilePatch,
+  CustomerOrderDetail,
+  CustomerOrderDetailDto,
+  CustomerOrderListItem,
+  CustomerOrderListItemDto,
+} from '@ecomiq/core'
+export {
+  CustomerAddressSchema,
+  CustomerAddressesSchema,
+  CustomerAddressUpsertInputSchema,
+  toCustomerSavedAddresses,
+  getCustomerAddresses,
+  createCustomerAddress,
+  updateCustomerAddress,
+  deleteCustomerAddress,
+  CustomerMeSchema,
+  CustomerProfileSchema,
+  CustomerProfilePatchSchema,
+  CustomerRegisterRequestSchema,
+  customerMeToProfile,
+  customerMeToProfilePatch,
+  customerProfileToPatch,
+  getCustomerMe,
+  patchCustomer,
+  registerCustomer,
+  CustomerOrderListItemSchema,
+  CustomerOrderDetailSchema,
+  CustomerOrderListSchema,
+  formatCustomerOrderStatus,
+  customerOrderStatusTone,
+  formatOrderDate,
+  formatOrderDateTime,
+  getCustomerOrders,
+  getCustomerOrder,
 } from '@ecomiq/core'
 export { createClient, getStorefrontClient } from './client'
 export type {
@@ -148,6 +188,7 @@ export type {
 } from './review-submission'
 export { serverApi } from './server'
 export { proxyStorefrontRequest } from './api-proxy'
+export { createStorefrontProxyApi } from './proxy-api'
 export {
   AppEcomiqProvider,
   useApiQuery,
@@ -166,7 +207,29 @@ export {
   type StorefrontAuthClientInstance,
   type StorefrontSession,
 } from './providers'
+export {
+  listRecentlyViewed,
+  trackRecentlyViewed,
+  toRecentlyViewedItem,
+  useRecentlyViewed,
+  useTrackRecentlyViewed,
+  type RecentlyViewedItem,
+  type TrackableProduct,
+} from './hooks'
 export { createStorefrontAuth } from './auth/create-storefront-auth'
+export type { CreateStorefrontAuthOptions } from './auth/create-storefront-auth'
+export {
+  BETTER_AUTH_TRUSTED_HOSTS_ENV,
+  DEFAULT_STOREFRONT_AUTH_ALLOWED_HOSTS,
+  defaultAllowedHostsFromEnv,
+  hostsFromStoreSettings,
+  mergeSettingsHostsIntoBaseURL,
+  resolveStorefrontAuthBaseURL,
+} from './auth/storefront-auth-base-url'
+export type {
+  StorefrontDynamicBaseURLConfig,
+  StoreSettingsHostsSource,
+} from './auth/storefront-auth-base-url'
 export { ecomiqOAuthPassword } from './auth/ecomiq-oauth-password-plugin'
 export { ecomiqOAuthPasswordClient } from './auth/ecomiq-oauth-password-client'
 export { signInWithEcomiqCredentials } from './auth/ecomiq-storefront-sign-in'