@ecomiq/storefront 1.1.9 → 2.0.1

package/src/components/checkout/checkout-payment-section.tsx

@@ -0,0 +1,215 @@
+import {
+  Banknote,
+  CreditCard,
+  Landmark,
+  Wallet,
+} from 'lucide-react'
+import type { CartCheckoutResponse, CartPaymentMethod } from '@ecomiq/core'
+import { Button, cn } from '../../ui'
+import { methodUsesProviderCheckoutUi } from './cart-sync'
+import type { CheckoutFieldId } from './form-schema'
+import { FieldError } from './checkout-form-controls'
+import { paymentRedirectUrl } from './format'
+
+function paymentIcon(method: CartPaymentMethod) {
+  const key = `${method.kind} ${method.code} ${method.providerMethodCode ?? ''}`.toLowerCase()
+  if (key.includes('paypal')) return Wallet
+  if (key.includes('stripe') || key.includes('card') || key.includes('credit')) return CreditCard
+  if (key.includes('mercado')) return Wallet
+  if (method.isManual || key.includes('transfer') || key.includes('cash')) return Landmark
+  return Banknote
+}
+
+export function CheckoutPaymentSection({
+  methods,
+  selectedCode,
+  fieldError,
+  checkoutPaymentLoading,
+  checkoutPaymentError,
+  checkoutPaymentResponse,
+  checkoutPaymentMethodCode,
+  providerPaymentCompleted,
+  receiptUrl,
+  receiptError,
+  onSelect,
+  onClearError,
+  onMarkProviderCompleted,
+  onReceiptFileChange,
+}: {
+  methods: CartPaymentMethod[]
+  selectedCode: string | null
+  fieldError?: string
+  checkoutPaymentLoading: boolean
+  checkoutPaymentError: string | null
+  checkoutPaymentResponse: CartCheckoutResponse | null
+  checkoutPaymentMethodCode: string | null
+  providerPaymentCompleted: boolean
+  receiptUrl: string | null
+  receiptError: string | null
+  onSelect: (code: string) => void
+  onClearError: (id: CheckoutFieldId) => void
+  onMarkProviderCompleted: () => void
+  onReceiptFileChange: (file: File | null) => void
+}) {
+  const selectedMethod = methods.find((m) => m.code === selectedCode) ?? null
+
+  return (
+    <section className="space-y-4">
+      <h2 className="text-xl font-semibold tracking-tight">Seleccionar método de pago</h2>
+      <div className="space-y-3">
+        {methods.map((method) => {
+          const selected = selectedCode === method.code
+          const Icon = paymentIcon(method)
+          const usesProviderUi = methodUsesProviderCheckoutUi(method)
+          const showExpanded = selected
+
+          return (
+            <div
+              key={method.code}
+              className={cn(
+                'overflow-hidden rounded-lg border transition-colors',
+                selected ? 'border-border bg-muted/40' : 'border-border bg-background',
+              )}
+            >
+              <label className="flex cursor-pointer items-center gap-3 px-4 py-3.5">
+                <input
+                  type="radio"
+                  name="payment"
+                  className="size-4 accent-blue-600"
+                  checked={selected}
+                  onChange={() => {
+                    onClearError('checkout-payment-method')
+                    onSelect(method.code)
+                  }}
+                />
+                <span className="min-w-0 flex-1">
+                  <span className="block text-sm font-medium">{method.name}</span>
+                  {method.description ? (
+                    <span className="mt-0.5 block text-xs text-muted-foreground">
+                      {method.description}
+                    </span>
+                  ) : null}
+                </span>
+                <Icon className="size-5 shrink-0 text-muted-foreground" aria-hidden="true" />
+              </label>
+
+              {showExpanded ? (
+                <div className="space-y-3 border-t px-4 py-4">
+                  {usesProviderUi ? (
+                    <ProviderPaymentPanel
+                      loading={
+                        checkoutPaymentMethodCode === method.code && checkoutPaymentLoading
+                      }
+                      error={
+                        checkoutPaymentMethodCode === method.code
+                          ? checkoutPaymentError
+                          : null
+                      }
+                      response={
+                        checkoutPaymentMethodCode === method.code
+                          ? checkoutPaymentResponse
+                          : null
+                      }
+                      completed={providerPaymentCompleted}
+                      onMarkCompleted={onMarkProviderCompleted}
+                    />
+                  ) : null}
+
+                  {method.isManual ? (
+                    <div className="space-y-2">
+                      <p className="text-sm font-medium">Comprobante de pago</p>
+                      <input
+                        type="file"
+                        accept="image/*,application/pdf"
+                        className="block w-full text-sm"
+                        onChange={(e) =>
+                          onReceiptFileChange(e.target.files?.[0] ?? null)
+                        }
+                      />
+                      {receiptError ? (
+                        <p className="text-xs text-destructive">{receiptError}</p>
+                      ) : null}
+                      {receiptUrl ? (
+                        <p className="text-xs text-muted-foreground">Comprobante listo</p>
+                      ) : null}
+                    </div>
+                  ) : null}
+
+                  {!usesProviderUi && !method.isManual ? (
+                    <p className="text-xs text-muted-foreground">
+                      Continúa con Pay now para confirmar este método de pago.
+                    </p>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+          )
+        })}
+      </div>
+      <FieldError message={fieldError} />
+    </section>
+  )
+}
+
+function ProviderPaymentPanel({
+  loading,
+  error,
+  response,
+  completed,
+  onMarkCompleted,
+}: {
+  loading: boolean
+  error: string | null
+  response: CartCheckoutResponse | null
+  completed: boolean
+  onMarkCompleted: () => void
+}) {
+  if (loading) {
+    return <p className="text-sm text-muted-foreground">Preparando pasarela de pago…</p>
+  }
+  if (error) {
+    return <p className="text-sm text-destructive">{error}</p>
+  }
+  if (!response) {
+    return (
+      <p className="text-xs text-muted-foreground">
+        Completa el pago de forma segura con el proveedor seleccionado.
+      </p>
+    )
+  }
+
+  const url = paymentRedirectUrl(response)
+  const clientSecret =
+    response.clientSecret ??
+    response.intentClientSecret ??
+    response.payment?.action?.clientSecret
+
+  return (
+    <div className="space-y-3 text-sm">
+      {url ? (
+        <a
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          className="font-medium text-primary underline-offset-4 hover:underline"
+        >
+          Abrir pasarela de pago
+        </a>
+      ) : null}
+      {clientSecret && !url ? (
+        <p className="text-muted-foreground">
+          Sesión de pago lista. Completa el cobro en la pasarela cuando esté disponible.
+        </p>
+      ) : null}
+      {completed ? (
+        <p className="text-xs text-muted-foreground">
+          Pago confirmado. Pulsa Pay now para finalizar tu pedido.
+        </p>
+      ) : (
+        <Button type="button" size="sm" variant="outline" onClick={onMarkCompleted}>
+          Ya completé el pago en la pasarela
+        </Button>
+      )}
+    </div>
+  )
+}

package/src/components/checkout/checkout-session-view.tsx

@@ -0,0 +1,240 @@
+import { useState, type FormEvent } from 'react'
+import { ArrowLeft, Lock } from 'lucide-react'
+import type { CartCheckoutResponse } from '@ecomiq/core'
+import { Link } from '../../link'
+import { useAuth, useSettings } from '../../providers'
+import { buttonVariants } from '../../ui'
+import { CheckoutExternalUpdateBanner } from './checkout-external-update-banner'
+import { CheckoutOrderBumps } from './checkout-line-items'
+import { CheckoutOrderSummary } from './checkout-order-summary'
+import { CheckoutPaymentSection } from './checkout-payment-section'
+import { CheckoutShippingAddressSection } from './checkout-shipping-address-section'
+import { CheckoutShippingSection } from './checkout-shipping-section'
+import {
+  CheckoutAlreadyPurchasedState,
+  CheckoutEmptyState,
+  CheckoutErrorState,
+  CheckoutLoadingState,
+} from './checkout-states'
+import { formatMoney, paymentRedirectUrl, thankYouUrl } from './format'
+import {
+  buildCheckoutFormValidationSchema,
+  checkoutValidationInputFromContext,
+  firstInvalidFieldId,
+  focusCheckoutField,
+  mapZodIssuesToFieldErrors,
+  type CheckoutFieldId,
+} from './form-schema'
+import type { CheckoutContactForm } from './types'
+import { useCheckoutGeo } from './use-checkout-geo'
+import { useCheckoutSession } from './use-checkout-session'
+
+export function CheckoutSessionView({ cartId }: { cartId: string }) {
+  const { store } = useSettings()
+  const { session } = useAuth()
+  const checkout = useCheckoutSession(cartId)
+  const [fieldErrors, setFieldErrors] = useState<
+    Partial<Record<CheckoutFieldId, string>>
+  >({})
+  const [receiptFile, setReceiptFile] = useState<File | null>(null)
+  const [receiptUrl, setReceiptUrl] = useState<string | null>(null)
+  const [receiptError, setReceiptError] = useState<string | null>(null)
+
+  const geo = useCheckoutGeo(
+    checkout.contact.countryCode,
+    checkout.contact.departmentCode,
+    checkout.contact.provinceCode,
+  )
+
+  if (checkout.loadStatus === 'loading' || checkout.isReconciling) {
+    return <CheckoutLoadingState />
+  }
+
+  if (checkout.checkoutAlreadyPurchased) {
+    return <CheckoutAlreadyPurchasedState />
+  }
+
+  if (checkout.loadStatus === 'error') {
+    return (
+      <CheckoutErrorState
+        description={checkout.loadError}
+        onRetry={() => checkout.reloadCheckout()}
+      />
+    )
+  }
+
+  const cart = checkout.uiCart
+  if (!cart || cart.items.length === 0) {
+    return <CheckoutEmptyState />
+  }
+
+  const money = (value: number) => formatMoney(value, store.language, cart.currencyCode)
+  const selectedMethod =
+    checkout.paymentMethods.find((m) => m.code === checkout.selectedPaymentCode) ?? null
+  const isManual = Boolean(selectedMethod?.isManual)
+
+  const clearFieldError = (id: CheckoutFieldId) => {
+    setFieldErrors((prev) => {
+      if (!prev[id]) return prev
+      const next = { ...prev }
+      delete next[id]
+      return next
+    })
+  }
+
+  const patchContact = (patch: Partial<CheckoutContactForm>) => {
+    checkout.setContact((c) => ({ ...c, ...patch }))
+  }
+
+  const handlePay = async (event: FormEvent) => {
+    event.preventDefault()
+    const schema = buildCheckoutFormValidationSchema(store.currency)
+    const parsed = schema.safeParse(
+      checkoutValidationInputFromContext({
+        contact: checkout.contact,
+        selectedShippingKey: checkout.selectedShippingKey,
+        shippingOptionsCount: checkout.shippingFlat.length,
+        selectedPaymentCode: checkout.selectedPaymentCode,
+        paymentMethodsCount: checkout.paymentMethods.length,
+      }),
+    )
+    if (!parsed.success) {
+      const errors = mapZodIssuesToFieldErrors(parsed.error)
+      setFieldErrors(errors)
+      const first = firstInvalidFieldId(errors)
+      if (first) focusCheckoutField(first)
+      return
+    }
+    setFieldErrors({})
+
+    try {
+      let uploadedReceipt = receiptUrl ?? undefined
+      if (isManual && receiptFile && !uploadedReceipt) {
+        const uploaded = await checkout.uploadPaymentReceipt(receiptFile)
+        uploadedReceipt = uploaded.url
+        setReceiptUrl(uploaded.url)
+      }
+
+      const result: CartCheckoutResponse | undefined = await checkout.payNow(
+        uploadedReceipt ? { receiptUrl: uploadedReceipt } : undefined,
+      )
+      if (!result) return
+
+      checkout.clearCart()
+      const redirect = paymentRedirectUrl(result)
+      if (redirect) {
+        window.location.assign(redirect)
+        return
+      }
+      window.location.assign(
+        thankYouUrl(cartId, result.payment?.transactionId ?? undefined),
+      )
+    } catch {
+      /* formError en sesión */
+    }
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:py-10">
+      {checkout.cartChangedExternally ? (
+        <CheckoutExternalUpdateBanner onReload={checkout.reloadCheckout} />
+      ) : null}
+
+      <header className="mb-8 flex flex-wrap items-end justify-between gap-4 border-b pb-6">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            Compra
+          </p>
+          <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">Checkout</h1>
+        </div>
+        <Link to="/cart" className={buttonVariants({ variant: 'ghost' })}>
+          <ArrowLeft aria-hidden="true" />
+          Volver al carrito
+        </Link>
+      </header>
+
+      <form
+        onSubmit={(e) => void handlePay(e)}
+        className="grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_22rem] lg:gap-10"
+      >
+        <div className="space-y-10">
+          <CheckoutShippingAddressSection
+            contact={checkout.contact}
+            fieldErrors={fieldErrors}
+            countries={geo.countries}
+            departments={geo.departments}
+            provinces={geo.provinces}
+            districts={geo.districts}
+            sessionLabel={session?.user?.email ?? session?.user?.name}
+            onPatch={patchContact}
+            onClearError={clearFieldError}
+          />
+
+          <CheckoutShippingSection
+            options={checkout.shippingFlat}
+            selectedKey={checkout.selectedShippingKey}
+            loading={checkout.shippingLoading}
+            error={checkout.shippingError}
+            needsPostalCode={!checkout.contact.postalCode.trim()}
+            fieldError={fieldErrors['checkout-shipping-method']}
+            money={money}
+            onSelect={checkout.setSelectedShippingKey}
+            onClearError={clearFieldError}
+          />
+
+          <CheckoutPaymentSection
+            methods={checkout.paymentMethods}
+            selectedCode={checkout.selectedPaymentCode}
+            fieldError={fieldErrors['checkout-payment-method']}
+            checkoutPaymentLoading={checkout.checkoutPaymentLoading}
+            checkoutPaymentError={checkout.checkoutPaymentError}
+            checkoutPaymentResponse={checkout.checkoutPaymentResponse}
+            checkoutPaymentMethodCode={checkout.checkoutPaymentMethodCode}
+            providerPaymentCompleted={checkout.providerPaymentCompleted}
+            receiptUrl={receiptUrl}
+            receiptError={receiptError}
+            onSelect={checkout.selectPaymentMethod}
+            onClearError={clearFieldError}
+            onMarkProviderCompleted={() => checkout.setProviderPaymentCompleted(true)}
+            onReceiptFileChange={(file) => {
+              setReceiptFile(file)
+              setReceiptUrl(null)
+              setReceiptError(null)
+            }}
+          />
+
+          <CheckoutOrderBumps
+            bumps={checkout.orderBumps}
+            money={money}
+            busy={checkout.isSaving}
+            onAdd={(bump) => void checkout.handleAddOrderBump(bump)}
+          />
+
+          <p className="flex items-start gap-2 text-xs leading-5 text-muted-foreground">
+            <Lock className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+            Tus datos se usan solo para procesar este pedido.
+          </p>
+        </div>
+
+        <CheckoutOrderSummary
+          items={cart.items}
+          money={money}
+          subtotal={checkout.subtotal}
+          discount={checkout.discount}
+          shipping={checkout.shipping}
+          tax={checkout.tax}
+          total={checkout.total}
+          hasShippingOptions={checkout.shippingFlat.length > 0}
+          couponCode={checkout.couponCode}
+          couponError={checkout.couponError}
+          promotionCodes={cart.promotionCodes}
+          formError={checkout.formError}
+          isSaving={checkout.isSaving}
+          onCouponCodeChange={checkout.setCouponCode}
+          onApplyCoupon={() => void checkout.handleApplyCoupon()}
+          onRemoveCoupon={(code) => void checkout.handleRemoveCoupon(code)}
+        />
+      </form>
+    </div>
+  )
+}