@ecomiq/storefront 1.1.5 → 2.0.0

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

@@ -0,0 +1,583 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import type {
+  CartCheckoutResponse,
+  CartPaymentMethod,
+  ShippingOptionGroup,
+  ShippingRate,
+  StorefrontCart,
+  StorefrontOrderBump,
+} from '@ecomiq/core'
+import { cartVariantIdFromProduct } 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 BillingChoice, type CheckoutContactForm } from './types'
+
+type ShippingFlat = {
+  key: string
+  group: ShippingOptionGroup
+  rate: ShippingRate
+}
+
+export function useCheckoutSession(cartId: 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 [billingChoice, setBillingChoice] = useState<BillingChoice>('same_as_shipping')
+  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 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 skipClearOnPurchasedRef = useRef(false)
+
+  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({ cartId })
+      if (isCheckoutCartAlreadyPurchased(data.cart)) {
+        skipClearOnPurchasedRef.current = true
+        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')
+    }
+  }, [cartId, 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)
+    skipClearOnPurchasedRef.current = false
+    void loadCheckout()
+  }, [cartId, 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(cartId, localItems)
+    if (baselineSigRef.current === null) {
+      baselineSigRef.current = sig
+      return
+    }
+    if (sig !== baselineSigRef.current) {
+      setCartChangedExternally(true)
+    }
+  }, [cartId, 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.id !== cartId) 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 = `${cartId}::${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({
+                cartId,
+                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({
+                cartId,
+                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({
+              cartId,
+              variantId: cartVariantIdFromProduct(action.variantId),
+              quantity: action.quantity,
+            })
+            setCheckoutCart(next)
+          } catch {
+            /* */
+          }
+        }
+        await loadCheckout()
+        await reloadProviderCart()
+        baselineSigRef.current = null
+      } finally {
+        isReconcilingRef.current = false
+        setIsReconciling(false)
+      }
+    })()
+  }, [
+    apiItems,
+    cartId,
+    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({ cartId, 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
+    }
+  }, [cartId, 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-${cartId}`
+
+  const initProviderCheckout = useCallback(
+    (paymentMethodCode: string) => {
+      const method = paymentMethods.find((m) => m.code === paymentMethodCode)
+      if (!method || !methodUsesProviderCheckoutUi(method)) return
+
+      const dedupeKey = `${cartId}:${paymentMethodCode}`
+      if (checkoutPaymentInitKeyRef.current === dedupeKey) return
+      checkoutPaymentInitKeyRef.current = dedupeKey
+
+      setCheckoutPaymentLoading(true)
+      setCheckoutPaymentError(null)
+      setCheckoutPaymentMethodCode(paymentMethodCode)
+      void serverApi
+        .checkoutCart({ cartId, paymentMethodCode, externalRef })
+        .then((result) => {
+          setCheckoutPaymentResponse(result)
+        })
+        .catch((error) => {
+          setCheckoutPaymentError(
+            error instanceof Error ? error.message : 'No pudimos iniciar el pago.',
+          )
+          setCheckoutPaymentResponse(null)
+        })
+        .finally(() => setCheckoutPaymentLoading(false))
+    },
+    [cartId, externalRef, paymentMethods],
+  )
+
+  const selectPaymentMethod = useCallback(
+    (paymentMethodCode: string) => {
+      setSelectedPaymentCode(paymentMethodCode)
+      setProviderPaymentCompleted(false)
+      initProviderCheckout(paymentMethodCode)
+    },
+    [initProviderCheckout],
+  )
+
+  useEffect(() => {
+    if (!paymentMethods.length || selectedPaymentCode) return
+    const first = paymentMethods.find((m) => m.isDefault) ?? paymentMethods[0]
+    if (first) selectPaymentMethod(first.code)
+  }, [paymentMethods, selectedPaymentCode, selectPaymentMethod])
+
+  const saveContactAndDelivery = useCallback(async () => {
+    const buyerCart = await serverApi.patchCartBuyer({
+      cartId,
+      email: contact.email,
+      firstName: contact.firstName,
+      lastName: contact.lastName,
+      phone: contact.phone,
+    })
+    setCheckoutCart(buyerCart)
+
+    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({
+      cartId,
+      shippingAddress: baseAddress,
+      billingAddress: baseAddress,
+    })
+    setCheckoutCart(updated)
+  }, [cartId, contact])
+
+  const confirmShipping = useCallback(
+    async (picked: ShippingFlat) => {
+      const updated = await serverApi.putCartShippingMethod({
+        cartId,
+        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)
+    },
+    [cartId],
+  )
+
+  const handleApplyCoupon = useCallback(async () => {
+    const code = couponCode.trim()
+    if (!code) return
+    setCouponError(null)
+    try {
+      const next = await serverApi.addCartPromotionCode({ cartId, code })
+      setCheckoutCart(next)
+      setCouponCode('')
+    } catch (error) {
+      setCouponError(error instanceof Error ? error.message : 'No se pudo aplicar el cupón.')
+    }
+  }, [cartId, couponCode])
+
+  const handleRemoveCoupon = useCallback(
+    async (code: string) => {
+      setCouponError(null)
+      try {
+        const next = await serverApi.removeCartPromotionCode({ cartId, code })
+        setCheckoutCart(next)
+      } catch (error) {
+        setCouponError(error instanceof Error ? error.message : 'No se pudo remover el cupón.')
+      }
+    },
+    [cartId],
+  )
+
+  const handleAddOrderBump = useCallback(
+    async (orderBump: StorefrontOrderBump) => {
+      const next = await serverApi.addCartItem({
+        cartId,
+        variantId: cartVariantIdFromProduct(orderBump.variantPublicId),
+        quantity: 1,
+      })
+      setCheckoutCart(next)
+      await loadCheckout()
+      await reloadProviderCart()
+    },
+    [cartId, loadCheckout, reloadProviderCart],
+  )
+
+  const uploadPaymentReceipt = useCallback(
+    async (file: File) => {
+      return serverApi.uploadPaymentReceipt({ cartId, file, fileName: file.name })
+    },
+    [cartId],
+  )
+
+  const payNow = useCallback(
+    async (options?: { receiptUrl?: string }): Promise<CartCheckoutResponse | undefined> => {
+      setFormError(null)
+      setIsSaving(true)
+      try {
+        await saveContactAndDelivery()
+        if (selectedShippingKey) {
+          const picked = shippingFlat.find((o) => o.key === selectedShippingKey)
+          if (picked) await confirmShipping(picked)
+        }
+        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({
+          cartId,
+          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)
+      }
+    },
+    [
+      cartId,
+      checkoutPaymentMethodCode,
+      checkoutPaymentResponse,
+      confirmShipping,
+      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 {
+    cartId,
+    loadStatus,
+    loadError,
+    cartData: checkoutCart,
+    uiCart,
+    paymentMethods,
+    orderBumps,
+    isReconciling,
+    cartChangedExternally,
+    checkoutAlreadyPurchased,
+    reloadCheckout,
+    clearCart,
+    contact,
+    setContact,
+    billingChoice,
+    setBillingChoice,
+    selectedShippingKey,
+    setSelectedShippingKey,
+    selectedPaymentCode,
+    selectPaymentMethod,
+    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,
+  }
+}