@ecomiq/storefront 2.0.9 → 2.0.11

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

@@ -1,15 +1,26 @@
-import { useState, type FormEvent } from 'react'
-import { ArrowLeft, Lock } from 'lucide-react'
+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 { CheckoutShippingSection } from './checkout-shipping-section'
+import {
+  CheckoutStepCard,
+  CheckoutStepSummaryBlock,
+} from './checkout-step-card'
+import {
+  completeCheckoutStep,
+  createCheckoutStepFlow,
+  editCheckoutStep,
+  type CheckoutStepFlow,
+  type CheckoutStepId,
+} from './checkout-steps'
 import {
   CheckoutAlreadyPurchasedState,
   CheckoutEmptyState,
@@ -18,7 +29,11 @@ import {
 } from './checkout-states'
 import { formatMoney, paymentRedirectUrl, thankYouUrl } from './format'
 import {
+  buildCheckoutContactStepSchema,
+  buildCheckoutDeliveryStepSchema,
   buildCheckoutFormValidationSchema,
+  buildCheckoutPaymentStepSchema,
+  checkoutStepForField,
   checkoutValidationInputFromContext,
   firstInvalidFieldId,
   focusCheckoutField,
@@ -33,12 +48,16 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
   const { store } = useSettings()
   const { session } = useAuth()
   const checkout = useCheckoutSession(cartId)
+  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 geo = useCheckoutGeo(
     checkout.contact.countryCode,
@@ -46,6 +65,13 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
     checkout.contact.provinceCode,
   )
 
+  const { ensureDefaultPaymentMethod } = checkout
+
+  useEffect(() => {
+    if (stepFlow.active !== 'payment') return
+    ensureDefaultPaymentMethod()
+  }, [ensureDefaultPaymentMethod, stepFlow.active])
+
   if (checkout.loadStatus === 'loading' || checkout.isReconciling) {
     return <CheckoutLoadingState />
   }
@@ -72,6 +98,9 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
   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) => {
@@ -86,23 +115,86 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
     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({})
+    setStepFlow((flow) => completeCheckoutStep(flow, 'contact'))
+  }
+
+  const handleContinueDelivery = async () => {
+    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({})
+    try {
+      await checkout.persistDeliveryStep()
+      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(
-      checkoutValidationInputFromContext({
-        contact: checkout.contact,
-        selectedShippingKey: checkout.selectedShippingKey,
-        shippingOptionsCount: checkout.shippingFlat.length,
-        selectedPaymentCode: checkout.selectedPaymentCode,
-        paymentMethodsCount: checkout.paymentMethods.length,
-      }),
-    )
+    const parsed = schema.safeParse(validationContext())
     if (!parsed.success) {
       const errors = mapZodIssuesToFieldErrors(parsed.error)
       setFieldErrors(errors)
       const first = firstInvalidFieldId(errors)
-      if (first) focusCheckoutField(first)
+      if (first) {
+        const step = checkoutStepForField(first)
+        setStepFlow((flow) => editCheckoutStep(flow, step))
+        if (step !== 'payment') checkout.invalidateDeliveryPersistence()
+        focusCheckoutField(first)
+      }
       return
     }
     setFieldErrors({})
@@ -110,9 +202,19 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
     try {
       let uploadedReceipt = receiptUrl ?? undefined
       if (isManual && receiptFile && !uploadedReceipt) {
-        const uploaded = await checkout.uploadPaymentReceipt(receiptFile)
-        uploadedReceipt = uploaded.url
-        setReceiptUrl(uploaded.url)
+        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(
@@ -157,58 +259,147 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
         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)}
-          />
+        <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}
+            />
+          </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" />
@@ -230,6 +421,12 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
           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)}
@@ -238,3 +435,49 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
     </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>
+  )
+}