@ecomiq/storefront 2.0.12 → 2.0.15

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/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,
@@ -176,6 +217,19 @@ export {
   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'

package/src/pages/account/account-page-skeleton.tsx

@@ -0,0 +1,69 @@
+import { Skeleton } from '../../ui/skeleton'
+import { cn } from '../../ui/cn'
+
+function NavRowSkeleton() {
+  return (
+    <div className="flex items-center justify-between border-b border-border px-4 py-4">
+      <span className="flex items-center gap-3">
+        <Skeleton className="size-4 shrink-0 rounded" />
+        <Skeleton className="h-4 w-28" />
+      </span>
+      <Skeleton className="size-4 shrink-0 rounded" />
+    </div>
+  )
+}
+
+export function AccountSectionSkeleton() {
+  return (
+    <div className="space-y-6 px-6" aria-busy="true" aria-label="Cargando sección">
+      <div className="space-y-2">
+        <Skeleton className="h-6 w-40" />
+        <Skeleton className="h-4 w-full max-w-md" />
+      </div>
+      <div className="overflow-hidden rounded-xl border border-border bg-background">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <div
+            key={index}
+            className={cn(
+              'flex items-center justify-between gap-4 px-5 py-4',
+              index < 3 && 'border-b border-border',
+            )}
+          >
+            <div className="min-w-0 flex-1 space-y-2">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-4 w-full max-w-xs" />
+            </div>
+            <Skeleton className="size-8 shrink-0 rounded-md" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function AccountPageSkeleton() {
+  return (
+    <div
+      className="container mx-auto px-4 py-8"
+      aria-busy="true"
+      aria-label="Cargando cuenta"
+    >
+      <Skeleton className="h-4 w-24" />
+      <Skeleton className="mt-2 h-9 w-40" />
+
+      <div className="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-[320px_1fr]">
+        <aside className="overflow-hidden rounded-xl border border-border bg-background lg:sticky lg:top-15 lg:self-start">
+          <nav>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <NavRowSkeleton key={index} />
+            ))}
+          </nav>
+        </aside>
+
+        <section className="min-w-0">
+          <AccountSectionSkeleton />
+        </section>
+      </div>
+    </div>
+  )
+}