@ecomiq/storefront 2.1.4 → 3.0.1

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

@@ -1,564 +0,0 @@
-import { useEffect, useState, type FormEvent } from 'react'
-import { ArrowLeft, CreditCard, Lock, Truck, User } from 'lucide-react'
-import type { CartCheckoutResponse } from '@ecomiq/core'
-import { Link } from '../../link'
-import { useAuth, useSettings } from '../../providers'
-import { buttonVariants } from '../../ui'
-import { CheckoutContactSection } from './checkout-contact-section'
-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 {
-  CheckoutStepCard,
-  CheckoutStepSummaryBlock,
-} from './checkout-step-card'
-import {
-  completeCheckoutStep,
-  createCheckoutStepFlow,
-  editCheckoutStep,
-  type CheckoutStepFlow,
-  type CheckoutStepId,
-} from './checkout-steps'
-import {
-  CheckoutAlreadyPurchasedState,
-  CheckoutEmptyState,
-  CheckoutErrorState,
-  CheckoutLoadingState,
-} from './checkout-states'
-import { formatMoney, paymentRedirectUrl, thankYouUrl } from './format'
-import {
-  buildCheckoutContactStepSchema,
-  buildCheckoutDeliveryStepSchema,
-  buildCheckoutFormValidationSchema,
-  buildCheckoutPaymentStepSchema,
-  checkoutStepForField,
-  checkoutValidationInputFromContext,
-  firstInvalidFieldId,
-  focusCheckoutField,
-  mapZodIssuesToFieldErrors,
-  type CheckoutFieldId,
-} from './form-schema'
-import type { CheckoutContactForm } from './types'
-import { useCheckoutGeo } from './use-checkout-geo'
-import { useCheckoutCustomerPrefill } from './use-checkout-customer-prefill'
-import { useCheckoutSession } from './use-checkout-session'
-
-export function CheckoutSessionView({ cartToken }: { cartToken: string }) {
-  const { store } = useSettings()
-  const { session } = useAuth()
-  const isAuthenticated = Boolean(session?.user)
-  const checkout = useCheckoutSession(cartToken)
-  const [stepFlow, setStepFlow] = useState<CheckoutStepFlow>(() => createCheckoutStepFlow())
-  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 [acceptedAge, setAcceptedAge] = useState(false)
-  const [acceptedPrivacy, setAcceptedPrivacy] = useState(false)
-  const [consentError, setConsentError] = useState<string | null>(null)
-  const [addressSaveError, setAddressSaveError] = useState<string | null>(null)
-  const [saveToAccount, setSaveToAccount] = useState(false)
-  const [saveAddressKey, setSaveAddressKey] = useState('Casa')
-
-  const geo = useCheckoutGeo(
-    checkout.contact.countryCode,
-    checkout.contact.departmentCode,
-    checkout.contact.provinceCode,
-  )
-
-  const customerPrefill = useCheckoutCustomerPrefill({
-    enabled: isAuthenticated && checkout.loadStatus === 'ready',
-    cartToken,
-    currency: store.currency,
-    contact: checkout.contact,
-    setContact: checkout.setContact,
-    departments: geo.departments,
-    provinces: geo.provinces,
-    districts: geo.districts,
-    selectedShippingKey: checkout.selectedShippingKey,
-    shippingFlat: checkout.shippingFlat,
-    shippingLoading: checkout.shippingLoading,
-    stepFlow,
-    setStepFlow,
-    persistDeliveryStep: checkout.persistDeliveryStep,
-    invalidateDeliveryPersistence: checkout.invalidateDeliveryPersistence,
-    saveAddressIntent:
-      isAuthenticated && saveToAccount
-        ? { enabled: true, addressKey: saveAddressKey.trim() || 'Casa' }
-        : null,
-    onAddressSaveError: (message) => setAddressSaveError(message),
-    onAddressSaved: () => {
-      setSaveToAccount(false)
-      setAddressSaveError(null)
-    },
-    associateBuyer: () => checkout.saveBuyer().then(() => undefined),
-  })
-
-  const { ensureDefaultPaymentMethod } = checkout
-
-  useEffect(() => {
-    if (stepFlow.active !== 'payment') return
-    ensureDefaultPaymentMethod()
-  }, [ensureDefaultPaymentMethod, stepFlow.active])
-
-  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 selectedShipping = checkout.shippingFlat.find(
-    (o) => o.key === checkout.selectedShippingKey,
-  )
-
-  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 openStep = (step: CheckoutStepId) => {
-    setStepFlow((flow) => editCheckoutStep(flow, step))
-    checkout.invalidateDeliveryPersistence()
-    setFieldErrors({})
-    setConsentError(null)
-  }
-
-  const validationContext = () =>
-    checkoutValidationInputFromContext({
-      contact: checkout.contact,
-      selectedShippingKey: checkout.selectedShippingKey,
-      shippingOptionsCount: checkout.shippingFlat.length,
-      selectedPaymentCode: checkout.selectedPaymentCode,
-      paymentMethodsCount: checkout.paymentMethods.length,
-    })
-
-  const handleContinueContact = () => {
-    const parsed = buildCheckoutContactStepSchema().safeParse({
-      email: checkout.contact.email,
-    })
-    if (!parsed.success) {
-      const errors = mapZodIssuesToFieldErrors(parsed.error)
-      setFieldErrors(errors)
-      const first = firstInvalidFieldId(errors)
-      if (first) focusCheckoutField(first)
-      return
-    }
-    setFieldErrors({})
-
-    const { email, firstName, lastName, phone } = checkout.contact
-    const canAssociateBuyer =
-      isAuthenticated &&
-      Boolean(email.trim() && firstName.trim() && lastName.trim() && phone.trim())
-
-    void (async () => {
-      if (canAssociateBuyer) {
-        try {
-          await checkout.saveBuyer()
-        } catch {
-          // El avance del paso no depende de asociar el buyer; se reintenta en delivery.
-        }
-      }
-      setStepFlow((flow) => completeCheckoutStep(flow, 'contact'))
-    })()
-  }
-
-  const handleContinueDelivery = async (options?: {
-    saveToAccount?: boolean
-    addressKey?: string
-  }) => {
-    const parsed = buildCheckoutDeliveryStepSchema(store.currency).safeParse(validationContext())
-    if (!parsed.success) {
-      const errors = mapZodIssuesToFieldErrors(parsed.error)
-      setFieldErrors(errors)
-      const first = firstInvalidFieldId(errors)
-      if (first) focusCheckoutField(first)
-      return
-    }
-    setFieldErrors({})
-    setAddressSaveError(null)
-    const shouldSave = Boolean(options?.saveToAccount ?? saveToAccount) && isAuthenticated
-    const key = (options?.addressKey ?? saveAddressKey).trim() || 'Casa'
-    try {
-      await checkout.persistDeliveryStep()
-      if (shouldSave) {
-        try {
-          await customerPrefill.saveContactAsCustomerAddress(checkout.contact, {
-            addressKey: key,
-          })
-          setSaveToAccount(false)
-        } catch (error) {
-          setAddressSaveError(
-            error instanceof Error
-              ? error.message
-              : 'No se pudo guardar la dirección en tu cuenta.',
-          )
-          return
-        }
-      }
-      setStepFlow((flow) => completeCheckoutStep(flow, 'delivery'))
-    } catch {
-      /* formError en sesión */
-    }
-  }
-
-  const handlePay = async (event: FormEvent) => {
-    event.preventDefault()
-    if (stepFlow.active !== 'payment') return
-
-    if (!acceptedAge || !acceptedPrivacy) {
-      setConsentError('Debes confirmar edad y política de privacidad.')
-      return
-    }
-    setConsentError(null)
-
-    const paymentParsed = buildCheckoutPaymentStepSchema().safeParse(validationContext())
-    if (!paymentParsed.success) {
-      const errors = mapZodIssuesToFieldErrors(paymentParsed.error)
-      setFieldErrors(errors)
-      const first = firstInvalidFieldId(errors)
-      if (first) focusCheckoutField(first)
-      return
-    }
-
-    const schema = buildCheckoutFormValidationSchema(store.currency)
-    const parsed = schema.safeParse(validationContext())
-    if (!parsed.success) {
-      const errors = mapZodIssuesToFieldErrors(parsed.error)
-      setFieldErrors(errors)
-      const first = firstInvalidFieldId(errors)
-      if (first) {
-        const step = checkoutStepForField(first)
-        setStepFlow((flow) => editCheckoutStep(flow, step))
-        if (step !== 'payment') checkout.invalidateDeliveryPersistence()
-        focusCheckoutField(first)
-      }
-      return
-    }
-    setFieldErrors({})
-
-    try {
-      let uploadedReceipt = receiptUrl ?? undefined
-      if (isManual && receiptFile && !uploadedReceipt) {
-        try {
-          const uploaded = await checkout.uploadPaymentReceipt(receiptFile)
-          uploadedReceipt = uploaded.url
-          setReceiptUrl(uploaded.url)
-          setReceiptError(null)
-        } catch (error) {
-          setReceiptError(
-            error instanceof Error
-              ? error.message
-              : 'No se pudo subir el comprobante de pago.',
-          )
-          return
-        }
-      }
-
-      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(cartToken, 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-4">
-          <CheckoutStepCard
-            step="contact"
-            flow={stepFlow}
-            title="Mis datos"
-            icon={User}
-            onEdit={() => openStep('contact')}
-            summary={
-              <CheckoutStepSummaryBlock>
-                <p className="text-sm">{checkout.contact.email}</p>
-              </CheckoutStepSummaryBlock>
-            }
-          >
-            <CheckoutContactSection
-              email={checkout.contact.email}
-              fieldError={fieldErrors.email}
-              sessionLabel={session?.user?.email ?? session?.user?.name}
-              isSaving={checkout.isSaving}
-              onEmailChange={(email) => patchContact({ email })}
-              onClearError={clearFieldError}
-              onContinueAsGuest={handleContinueContact}
-            />
-          </CheckoutStepCard>
-
-          <CheckoutStepCard
-            step="delivery"
-            flow={stepFlow}
-            title="Dirección de entrega"
-            icon={Truck}
-            onEdit={() => openStep('delivery')}
-            summary={
-              <DeliveryStepSummary
-                contact={checkout.contact}
-                shippingLabel={
-                  selectedShipping
-                    ? `${selectedShipping.rate.name}${
-                        selectedShipping.rate.description
-                          ? ` (${selectedShipping.rate.description})`
-                          : ''
-                      }`
-                    : null
-                }
-                shippingPrice={
-                  selectedShipping
-                    ? selectedShipping.rate.price === 0
-                      ? 'GRATIS'
-                      : money(selectedShipping.rate.price)
-                    : null
-                }
-              />
-            }
-          >
-            <CheckoutShippingAddressSection
-              contact={checkout.contact}
-              fieldErrors={fieldErrors}
-              countries={geo.countries}
-              departments={geo.departments}
-              provinces={geo.provinces}
-              districts={geo.districts}
-              shippingOptions={checkout.shippingFlat}
-              selectedShippingKey={checkout.selectedShippingKey}
-              shippingLoading={checkout.shippingLoading}
-              shippingError={checkout.shippingError}
-              isSaving={checkout.isSaving}
-              money={money}
-              onPatch={patchContact}
-              onSelectShipping={checkout.setSelectedShippingKey}
-              onClearError={clearFieldError}
-              onContinue={handleContinueDelivery}
-              savedAddresses={customerPrefill.savedAddresses}
-              selectedSavedAddressId={customerPrefill.selectedSavedAddressId}
-              onSelectSavedAddress={customerPrefill.selectSavedAddress}
-              canSaveToAccount={isAuthenticated}
-              addressSaveError={addressSaveError}
-              saveToAccount={saveToAccount}
-              saveAddressKey={saveAddressKey}
-              onSaveToAccountChange={(checked) => {
-                setSaveToAccount(checked)
-                setAddressSaveError(null)
-              }}
-              onSaveAddressKeyChange={setSaveAddressKey}
-            />
-          </CheckoutStepCard>
-
-          <CheckoutStepCard
-            step="payment"
-            flow={stepFlow}
-            title="Pago"
-            icon={CreditCard}
-          >
-            <div className="space-y-5">
-              <div className="space-y-3">
-                <label className="flex cursor-pointer items-start gap-2.5 text-sm leading-5">
-                  <input
-                    type="checkbox"
-                    className="mt-0.5 size-4 shrink-0 rounded border-border accent-foreground"
-                    checked={acceptedAge}
-                    onChange={(e) => {
-                      setAcceptedAge(e.target.checked)
-                      setConsentError(null)
-                    }}
-                  />
-                  <span>Tengo 18 años o más</span>
-                </label>
-                <label className="flex cursor-pointer items-start gap-2.5 text-sm leading-5">
-                  <input
-                    type="checkbox"
-                    className="mt-0.5 size-4 shrink-0 rounded border-border accent-foreground"
-                    checked={acceptedPrivacy}
-                    onChange={(e) => {
-                      setAcceptedPrivacy(e.target.checked)
-                      setConsentError(null)
-                    }}
-                  />
-                  <span>
-                    Doy mi consentimiento para que mis datos personales sean tratados conforme a
-                    la política de privacidad
-                  </span>
-                </label>
-                {consentError ? (
-                  <p className="text-xs text-destructive">{consentError}</p>
-                ) : null}
-              </div>
-
-              <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)}
-              />
-            </div>
-          </CheckoutStepCard>
-
-          <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}
-          canSubmit={stepFlow.active === 'payment'}
-          submitLabel={
-            selectedMethod
-              ? `Pagar con ${selectedMethod.name}`
-              : 'Pagar'
-          }
-          onCouponCodeChange={checkout.setCouponCode}
-          onApplyCoupon={() => void checkout.handleApplyCoupon()}
-          onRemoveCoupon={(code) => void checkout.handleRemoveCoupon(code)}
-        />
-      </form>
-    </div>
-  )
-}
-
-function DeliveryStepSummary({
-  contact,
-  shippingLabel,
-  shippingPrice,
-}: {
-  contact: CheckoutContactForm
-  shippingLabel: string | null
-  shippingPrice: string | null
-}) {
-  const fullName = `${contact.firstName} ${contact.lastName}`.trim()
-  const locality = [contact.districtName || contact.city, contact.provinceName || contact.province]
-    .filter(Boolean)
-    .join(', ')
-  const addressLine = [contact.address, contact.address2, locality, contact.postalCode]
-    .filter(Boolean)
-    .join(', ')
-
-  return (
-    <div className="space-y-3">
-      <CheckoutStepSummaryBlock>
-        <p className="text-sm font-medium">{fullName || 'Destinatario'}</p>
-        <p className="mt-1 text-sm text-muted-foreground">{addressLine}</p>
-      </CheckoutStepSummaryBlock>
-      {shippingLabel ? (
-        <CheckoutStepSummaryBlock>
-          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            Envío
-          </p>
-          <div className="mt-1 flex items-start justify-between gap-3">
-            <p className="text-sm">{shippingLabel}</p>
-            {shippingPrice ? (
-              <p className="shrink-0 text-sm font-semibold tabular-nums">{shippingPrice}</p>
-            ) : null}
-          </div>
-        </CheckoutStepSummaryBlock>
-      ) : null}
-      <CheckoutStepSummaryBlock>
-        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-          Dirección de facturación
-        </p>
-        <p className="mt-1 text-sm">Misma dirección que la de entrega</p>
-      </CheckoutStepSummaryBlock>
-    </div>
-  )
-}