@ecomiq/storefront 2.1.4 → 3.0.1

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

@@ -1,640 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import type {
-  CartCheckoutResponse,
-  CartPaymentMethod,
-  ShippingOptionGroup,
-  ShippingRate,
-  StorefrontCart,
-  StorefrontOrderBump,
-} from '@ecomiq/core'
-import { useCart } from '../../providers'
-import { serverApi } from '../../server'
-import {
-  areCartSignaturesEqual,
-  cartItemsSignature,
-  cartSessionSignature,
-  findCartReconciliationActions,
-  isCheckoutCartAlreadyPurchased,
-  methodUsesProviderCheckoutUi,
-  toSignatureItems,
-} from './cart-sync'
-import { emptyCheckoutContact, type CheckoutContactForm } from './types'
-
-type ShippingFlat = {
-  key: string
-  group: ShippingOptionGroup
-  rate: ShippingRate
-}
-
-export function useCheckoutSession(cartToken: string) {
-  const { cart: providerCart, clearCart, reload: reloadProviderCart } = useCart()
-
-  const [checkoutCart, setCheckoutCart] = useState<StorefrontCart | null>(null)
-  const [paymentMethods, setPaymentMethods] = useState<CartPaymentMethod[]>([])
-  const [orderBumps, setOrderBumps] = useState<StorefrontOrderBump[]>([])
-  const [loadStatus, setLoadStatus] = useState<'loading' | 'ready' | 'error'>('loading')
-  const [loadError, setLoadError] = useState<string>()
-  const [checkoutAlreadyPurchased, setCheckoutAlreadyPurchased] = useState(false)
-  const [isReconciling, setIsReconciling] = useState(false)
-  const [cartChangedExternally, setCartChangedExternally] = useState(false)
-
-  const [contact, setContact] = useState<CheckoutContactForm>(() => emptyCheckoutContact())
-  const [selectedShippingKey, setSelectedShippingKey] = useState<string | null>(null)
-  const [selectedPaymentCode, setSelectedPaymentCode] = useState<string | null>(null)
-  const [providerPaymentCompleted, setProviderPaymentCompleted] = useState(false)
-  const [couponCode, setCouponCode] = useState('')
-  const [couponError, setCouponError] = useState<string | null>(null)
-  const [formError, setFormError] = useState<string | null>(null)
-  const [isSaving, setIsSaving] = useState(false)
-
-  const [shippingGroups, setShippingGroups] = useState<ShippingOptionGroup[]>([])
-  const [shippingLoading, setShippingLoading] = useState(false)
-  const [shippingError, setShippingError] = useState<string | null>(null)
-
-  const [checkoutPaymentResponse, setCheckoutPaymentResponse] =
-    useState<CartCheckoutResponse | null>(null)
-  const [checkoutPaymentMethodCode, setCheckoutPaymentMethodCode] = useState<string | null>(
-    null,
-  )
-  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 localItems = useMemo(
-    () => toSignatureItems(providerCart?.items),
-    [providerCart?.items],
-  )
-  const apiItems = useMemo(
-    () => toSignatureItems(checkoutCart?.items),
-    [checkoutCart?.items],
-  )
-  const cartsReconciled = useMemo(
-    () => areCartSignaturesEqual(localItems, apiItems),
-    [localItems, apiItems],
-  )
-
-  const loadCheckout = useCallback(async () => {
-    setLoadStatus('loading')
-    setLoadError(undefined)
-    try {
-      const data = await serverApi.getCartCheckout({ cartToken })
-      if (isCheckoutCartAlreadyPurchased(data.cart)) {
-        setCheckoutAlreadyPurchased(true)
-        clearCart()
-        setCheckoutCart(data.cart)
-        setLoadStatus('ready')
-        return
-      }
-      setCheckoutCart(data.cart)
-      setPaymentMethods(data.paymentMethods.methods.filter((m) => m.isActive))
-      setOrderBumps(data.orderBumps ?? [])
-      setCheckoutAlreadyPurchased(false)
-      setLoadStatus('ready')
-    } catch (error) {
-      setLoadError(
-        error instanceof Error ? error.message : 'No pudimos cargar el checkout.',
-      )
-      setLoadStatus('error')
-    }
-  }, [cartToken, clearCart])
-
-  useEffect(() => {
-    hydratedRef.current = false
-    reconcileAttemptRef.current = null
-    checkoutPaymentInitKeyRef.current = null
-    baselineSigRef.current = null
-    setCartChangedExternally(false)
-    setSelectedShippingKey(null)
-    setSelectedPaymentCode(null)
-    setProviderPaymentCompleted(false)
-    setCheckoutPaymentResponse(null)
-    setCheckoutPaymentMethodCode(null)
-    setDeliveryPersisted(false)
-    void loadCheckout()
-  }, [cartToken, loadCheckout])
-
-  useEffect(() => {
-    if (!checkoutCart || hydratedRef.current) return
-    hydratedRef.current = true
-    const ship = checkoutCart.shippingAddress
-    setContact((c) => ({
-      ...c,
-      email: checkoutCart.email ?? c.email,
-      firstName: checkoutCart.firstName ?? c.firstName,
-      lastName: checkoutCart.lastName ?? c.lastName,
-      phone: checkoutCart.phone ?? c.phone,
-      address: ship?.address1 ?? c.address,
-      address2: ship?.address2 ?? c.address2,
-      postalCode: ship?.postalCode ?? c.postalCode,
-      province: ship?.province ?? c.province,
-      city: ship?.city ?? c.city,
-      countryCode: ship?.countryCode ?? c.countryCode,
-      company: ship?.company ?? c.company,
-      districtName: ship?.district ?? c.districtName,
-    }))
-  }, [checkoutCart])
-
-  // Cross-tab: sesión de carrito o ítems del provider cambian tras baseline.
-  useEffect(() => {
-    if (loadStatus !== 'ready' || isReconciling || checkoutAlreadyPurchased) return
-    const sig = cartSessionSignature(cartToken, localItems)
-    if (baselineSigRef.current === null) {
-      baselineSigRef.current = sig
-      return
-    }
-    if (sig !== baselineSigRef.current) {
-      setCartChangedExternally(true)
-    }
-  }, [cartToken, checkoutAlreadyPurchased, isReconciling, loadStatus, localItems])
-
-  useEffect(() => {
-    const key = `ecomiq:cart:v1:`
-    const onStorage = (event: StorageEvent) => {
-      if (!event.key?.startsWith(key)) return
-      setCartChangedExternally(true)
-    }
-    window.addEventListener('storage', onStorage)
-    return () => window.removeEventListener('storage', onStorage)
-  }, [])
-
-  // Reconciliación local → API
-  useEffect(() => {
-    if (loadStatus !== 'ready' || !checkoutCart || checkoutAlreadyPurchased) return
-    if (isReconcilingRef.current) return
-    if (providerCart && providerCart.token !== cartToken) return
-    if (localItems.length === 0 && apiItems.length === 0) return
-    if (areCartSignaturesEqual(localItems, apiItems)) return
-
-    const actions = findCartReconciliationActions(localItems, apiItems)
-    if (actions.length === 0) return
-
-    const attemptKey = `${cartToken}::${cartItemsSignature(localItems)}::${cartItemsSignature(apiItems)}`
-    if (reconcileAttemptRef.current === attemptKey) return
-
-    reconcileAttemptRef.current = attemptKey
-    isReconcilingRef.current = true
-    setIsReconciling(true)
-
-    void (async () => {
-      try {
-        for (const action of actions) {
-          if (action.action === 'remove') {
-            try {
-              const next = await serverApi.removeCartItem({
-                cartToken,
-                cartItemId: action.itemId,
-              })
-              if (next.ok) setCheckoutCart(next.value)
-            } catch {
-              /* stock / línea inválida */
-            }
-          } else if (action.action === 'update') {
-            try {
-              const next = await serverApi.setCartItemQuantity({
-                cartToken,
-                cartItemId: action.itemId,
-                quantity: action.quantity,
-              })
-              if (next.ok) setCheckoutCart(next.value)
-            } catch {
-              /* */
-            }
-          }
-        }
-        for (const action of actions) {
-          if (action.action !== 'add') continue
-          try {
-            const next = await serverApi.addCartItem({
-              cartToken,
-              variantId: action.variantId,
-              quantity: action.quantity,
-            })
-            setCheckoutCart(next)
-          } catch {
-            /* */
-          }
-        }
-        await loadCheckout()
-        await reloadProviderCart()
-        baselineSigRef.current = null
-      } finally {
-        isReconcilingRef.current = false
-        setIsReconciling(false)
-      }
-    })()
-  }, [
-    apiItems,
-    cartToken,
-    checkoutAlreadyPurchased,
-    checkoutCart,
-    loadCheckout,
-    loadStatus,
-    localItems,
-    providerCart,
-    reloadProviderCart,
-  ])
-
-  const postalCode = contact.postalCode.trim()
-  useEffect(() => {
-    if (!postalCode || checkoutAlreadyPurchased) {
-      setShippingGroups([])
-      return
-    }
-    let cancelled = false
-    setShippingLoading(true)
-    setShippingError(null)
-    void serverApi
-      .getShippingOptions({ cartToken, postalCode })
-      .then((res) => {
-        if (!cancelled) setShippingGroups(res.groups)
-      })
-      .catch((error) => {
-        if (!cancelled) {
-          setShippingError(
-            error instanceof Error ? error.message : 'No pudimos cargar envíos.',
-          )
-          setShippingGroups([])
-        }
-      })
-      .finally(() => {
-        if (!cancelled) setShippingLoading(false)
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [cartToken, checkoutAlreadyPurchased, postalCode])
-
-  const shippingFlat = useMemo(() => {
-    const out: ShippingFlat[] = []
-    for (const group of shippingGroups) {
-      for (const rate of group.rates ?? []) {
-        out.push({
-          key: `${group.sellerId ?? ''}::${rate.rateId}`,
-          group,
-          rate,
-        })
-      }
-    }
-    return out
-  }, [shippingGroups])
-
-  useEffect(() => {
-    if (!shippingFlat.length || selectedShippingKey) return
-    setSelectedShippingKey(shippingFlat[0]!.key)
-  }, [shippingFlat, selectedShippingKey])
-
-  const externalRef = `checkout-${cartToken}`
-
-  const initProviderCheckout = useCallback(
-    (paymentMethodCode: string) => {
-      const method = paymentMethods.find((m) => m.code === paymentMethodCode)
-      if (!method || !methodUsesProviderCheckoutUi(method)) return
-
-      const dedupeKey = `${cartToken}:${paymentMethodCode}`
-      if (checkoutPaymentInitKeyRef.current === dedupeKey) return
-      checkoutPaymentInitKeyRef.current = dedupeKey
-
-      setCheckoutPaymentLoading(true)
-      setCheckoutPaymentError(null)
-      setCheckoutPaymentMethodCode(paymentMethodCode)
-      void serverApi
-        .checkoutCart({ cartToken, paymentMethodCode, externalRef })
-        .then((result) => {
-          setCheckoutPaymentResponse(result)
-        })
-        .catch((error) => {
-          setCheckoutPaymentError(
-            error instanceof Error ? error.message : 'No pudimos iniciar el pago.',
-          )
-          setCheckoutPaymentResponse(null)
-        })
-        .finally(() => setCheckoutPaymentLoading(false))
-    },
-    [cartToken, externalRef, paymentMethods],
-  )
-
-  const selectPaymentMethod = useCallback(
-    (paymentMethodCode: string) => {
-      setSelectedPaymentCode(paymentMethodCode)
-      setProviderPaymentCompleted(false)
-      initProviderCheckout(paymentMethodCode)
-    },
-    [initProviderCheckout],
-  )
-
-  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, selectPaymentMethod, selectedPaymentCode])
-
-  const saveBuyer = useCallback(async () => {
-    const buyerCart = await serverApi.patchCartBuyer({
-      cartToken,
-      email: contact.email.trim(),
-      firstName: contact.firstName.trim(),
-      lastName: contact.lastName.trim(),
-      phone: contact.phone.trim(),
-    })
-    setCheckoutCart(buyerCart)
-    return buyerCart
-  }, [cartToken, 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
-    const baseAddress = {
-      name: `${contact.firstName} ${contact.lastName}`.trim() || contact.address,
-      address1: contact.address,
-      city: districtName,
-      countryCode,
-      company: contact.company || null,
-      address2: contact.address2 || null,
-      province: provinceName,
-      postalCode: contact.postalCode,
-      district: districtName,
-      phone: contact.phone || null,
-      latitude: null,
-      longitude: null,
-      geo: {
-        departmentCode: contact.departmentCode || '',
-        provinceCode: contact.provinceCode || '',
-        districtCode: contact.districtCode || '',
-      },
-    }
-
-    const updated = await serverApi.patchCartAddresses({
-      cartToken,
-      shippingAddress: baseAddress,
-      billingAddress: baseAddress,
-    })
-    setCheckoutCart(updated)
-    return updated
-  }, [cartToken, contact])
-
-  const saveContactAndDelivery = useCallback(async () => {
-    await saveBuyer()
-    await saveAddresses()
-  }, [saveAddresses, saveBuyer])
-
-  const confirmShipping = useCallback(
-    async (picked: ShippingFlat) => {
-      const updated = await serverApi.putCartShippingMethod({
-        cartToken,
-        rateId: picked.rate.rateId,
-        shippingMethodId: picked.rate.shippingMethodId,
-        serviceCode: picked.rate.serviceCode ?? null,
-        sellerId: picked.group.sellerId ?? null,
-        shippingProfileId: picked.group.shippingProfileId ?? null,
-        locationId: null,
-        pickupPointId: null,
-        scheduledDate: null,
-        scheduledTime: null,
-      })
-      setCheckoutCart(updated)
-      return updated
-    },
-    [cartToken],
-  )
-
-  /** 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
-    setCouponError(null)
-    try {
-      const next = await serverApi.addCartPromotionCode({ cartToken, code })
-      setCheckoutCart(next)
-      setCouponCode('')
-    } catch (error) {
-      setCouponError(error instanceof Error ? error.message : 'No se pudo aplicar el cupón.')
-    }
-  }, [cartToken, couponCode])
-
-  const handleRemoveCoupon = useCallback(
-    async (code: string) => {
-      setCouponError(null)
-      try {
-        const next = await serverApi.removeCartPromotionCode({ cartToken, code })
-        setCheckoutCart(next)
-      } catch (error) {
-        setCouponError(error instanceof Error ? error.message : 'No se pudo remover el cupón.')
-      }
-    },
-    [cartToken],
-  )
-
-  const handleAddOrderBump = useCallback(
-    async (orderBump: StorefrontOrderBump) => {
-      const next = await serverApi.addCartItem({
-        cartToken,
-        variantId: orderBump.variantId,
-        quantity: 1,
-      })
-      setCheckoutCart(next)
-      await loadCheckout()
-      await reloadProviderCart()
-    },
-    [cartToken, loadCheckout, reloadProviderCart],
-  )
-
-  const uploadPaymentReceipt = useCallback(
-    async (file: File) => {
-      return serverApi.uploadPaymentReceipt({ cartToken, file, fileName: file.name })
-    },
-    [cartToken],
-  )
-
-  const payNow = useCallback(
-    async (options?: { receiptUrl?: string }): Promise<CartCheckoutResponse | undefined> => {
-      setFormError(null)
-      setIsSaving(true)
-      try {
-        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
-        if (!code) {
-          setFormError('Selecciona un método de pago.')
-          return
-        }
-        const method = paymentMethods.find((m) => m.code === code)
-        const usesProviderUi = method ? methodUsesProviderCheckoutUi(method) : false
-
-        if (usesProviderUi) {
-          if (!providerPaymentCompleted) {
-            setFormError(
-              'Completa el pago con Stripe o Mercado Pago antes de continuar.',
-            )
-            return
-          }
-          if (
-            checkoutPaymentResponse &&
-            checkoutPaymentMethodCode === code
-          ) {
-            return checkoutPaymentResponse
-          }
-        }
-
-        const result = await serverApi.checkoutCart({
-          cartToken,
-          paymentMethodCode: code,
-          externalRef,
-          ...(options?.receiptUrl ? { receiptUrl: options.receiptUrl } : {}),
-        })
-        setCheckoutPaymentResponse(result)
-        setCheckoutPaymentMethodCode(code)
-        return result
-      } catch (error) {
-        setFormError(
-          error instanceof Error ? error.message : 'No se pudo completar el pago.',
-        )
-        throw error
-      } finally {
-        setIsSaving(false)
-      }
-    },
-    [
-      cartToken,
-      checkoutPaymentMethodCode,
-      checkoutPaymentResponse,
-      confirmShipping,
-      deliveryPersisted,
-      externalRef,
-      paymentMethods,
-      providerPaymentCompleted,
-      saveContactAndDelivery,
-      selectedPaymentCode,
-      selectedShippingKey,
-      shippingFlat,
-    ],
-  )
-
-  const reloadCheckout = useCallback(() => {
-    if (typeof window !== 'undefined') window.location.reload()
-  }, [])
-
-  const uiCart = cartsReconciled || !providerCart ? checkoutCart : providerCart
-  const totals = uiCart?.totals
-  const subtotal = cartsReconciled
-    ? (totals?.subtotal ?? 0)
-    : (providerCart?.totals.subtotal ?? 0)
-  const shipping = cartsReconciled ? (totals?.shippingTotal ?? 0) : 0
-  const discount = cartsReconciled ? (totals?.discountTotal ?? 0) : 0
-  const tax = cartsReconciled ? (totals?.taxTotal ?? 0) : 0
-  const total = cartsReconciled
-    ? (totals?.total ?? subtotal + shipping + tax - discount)
-    : subtotal
-
-  return {
-    cartToken,
-    loadStatus,
-    loadError,
-    cartData: checkoutCart,
-    uiCart,
-    paymentMethods,
-    orderBumps,
-    isReconciling,
-    cartChangedExternally,
-    checkoutAlreadyPurchased,
-    reloadCheckout,
-    clearCart,
-    contact,
-    setContact,
-    selectedShippingKey,
-    setSelectedShippingKey,
-    selectedPaymentCode,
-    selectPaymentMethod,
-    ensureDefaultPaymentMethod,
-    clearPaymentSession,
-    persistDeliveryStep,
-    invalidateDeliveryPersistence,
-    saveBuyer,
-    providerPaymentCompleted,
-    setProviderPaymentCompleted,
-    payNow,
-    couponCode,
-    setCouponCode,
-    couponError,
-    formError,
-    handleApplyCoupon,
-    handleRemoveCoupon,
-    handleAddOrderBump,
-    shippingFlat,
-    shippingLoading,
-    shippingError,
-    uploadPaymentReceipt,
-    checkoutPaymentResponse,
-    checkoutPaymentMethodCode,
-    checkoutPaymentLoading,
-    checkoutPaymentError,
-    isSaving: isSaving || cartChangedExternally,
-    cartsReconciled,
-    subtotal,
-    shipping,
-    discount,
-    tax,
-    total,
-  }
-}