@ecomiq/storefront 2.1.4 → 3.0.0

package/src/components/checkout/checkout-form-controls.tsx

@@ -1,139 +0,0 @@
-import type { HTMLAttributes } from 'react'
-import { cn } from '../../ui'
-
-export function fieldClass(error?: string) {
-  return cn(
-    'mt-1.5 flex h-11 w-full rounded-md border border-border bg-background px-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring',
-    error && 'border-destructive',
-  )
-}
-
-export function FieldError({ message }: { message?: string }) {
-  if (!message) return null
-  return <p className="mt-1 text-xs text-destructive">{message}</p>
-}
-
-export function CheckoutTextField({
-  id,
-  label,
-  value,
-  onChange,
-  error,
-  type = 'text',
-  autoComplete,
-  inputMode,
-  placeholder,
-}: {
-  id: string
-  label: string
-  value: string
-  onChange: (value: string) => void
-  error?: string
-  type?: string
-  autoComplete?: string
-  inputMode?: HTMLAttributes<HTMLInputElement>['inputMode']
-  placeholder?: string
-}) {
-  return (
-    <div className="min-w-0">
-      <label htmlFor={id} className="text-sm font-medium text-foreground">
-        {label}
-      </label>
-      <input
-        id={id}
-        type={type}
-        className={fieldClass(error)}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        autoComplete={autoComplete}
-        inputMode={inputMode}
-        placeholder={placeholder}
-      />
-      <FieldError message={error} />
-    </div>
-  )
-}
-
-export function CheckoutSelectField({
-  id,
-  label,
-  value,
-  options,
-  onChange,
-  error,
-  placeholder = 'Seleccionar…',
-}: {
-  id: string
-  label: string
-  value: string
-  options: { value: string; label: string }[]
-  onChange: (value: string) => void
-  error?: string
-  placeholder?: string
-}) {
-  return (
-    <div className="min-w-0">
-      <label htmlFor={id} className="text-sm font-medium text-foreground">
-        {label}
-      </label>
-      <select
-        id={id}
-        className={fieldClass(error)}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-      >
-        <option value="">{placeholder}</option>
-        {options.map((o) => (
-          <option key={o.value} value={o.value}>
-            {o.label}
-          </option>
-        ))}
-      </select>
-      <FieldError message={error} />
-    </div>
-  )
-}
-
-export function CheckoutPhoneField({
-  id,
-  label,
-  value,
-  dialCode,
-  error,
-  onChange,
-}: {
-  id: string
-  label: string
-  value: string
-  dialCode: string
-  error?: string
-  onChange: (value: string) => void
-}) {
-  return (
-    <div className="min-w-0">
-      <label htmlFor={id} className="text-sm font-medium text-foreground">
-        {label}
-      </label>
-      <div
-        className={cn(
-          'mt-1.5 flex h-11 overflow-hidden rounded-md border bg-background focus-within:ring-2 focus-within:ring-ring',
-          error ? 'border-destructive' : 'border-border',
-        )}
-      >
-        <span className="flex shrink-0 items-center border-r bg-muted/40 px-3 text-sm text-muted-foreground">
-          {dialCode}
-        </span>
-        <input
-          id={id}
-          type="tel"
-          inputMode="numeric"
-          autoComplete="tel-national"
-          className="min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
-          value={value}
-          onChange={(e) => onChange(e.target.value.replace(/\D/g, ''))}
-        />
-      </div>
-      <FieldError message={error} />
-    </div>
-  )
-}

package/src/components/checkout/checkout-line-items.tsx

@@ -1,43 +0,0 @@
-import type { StorefrontOrderBump } from '@ecomiq/core'
-import { Button } from '../../ui'
-
-export function CheckoutOrderBumps({
-  bumps,
-  money,
-  busy,
-  onAdd,
-}: {
-  bumps: StorefrontOrderBump[]
-  money: (n: number) => string
-  busy: boolean
-  onAdd: (bump: StorefrontOrderBump) => void
-}) {
-  if (bumps.length === 0) return null
-  return (
-    <section className="space-y-3 rounded-xl border bg-card p-5">
-      <h2 className="text-lg font-semibold">Agregar al pedido</h2>
-      {bumps.map((bump) => (
-        <div key={bump.id} className="flex items-center gap-3">
-          <div className="size-14 overflow-hidden rounded-md bg-muted">
-            {bump.imageUrl ? (
-              <img src={bump.imageUrl} alt="" className="size-full object-cover" />
-            ) : null}
-          </div>
-          <div className="min-w-0 flex-1">
-            <p className="text-sm font-medium">{bump.productName}</p>
-            <p className="text-xs text-muted-foreground">{money(bump.offerPrice)}</p>
-          </div>
-          <Button
-            type="button"
-            size="sm"
-            variant="outline"
-            disabled={busy}
-            onClick={() => onAdd(bump)}
-          >
-            {bump.callToAction || 'Agregar'}
-          </Button>
-        </div>
-      ))}
-    </section>
-  )
-}

package/src/components/checkout/checkout-order-summary.tsx

@@ -1,165 +0,0 @@
-import { Package, Tag } from 'lucide-react'
-import type { StorefrontCartItem } from '@ecomiq/core'
-import { Button } from '../../ui'
-import { fieldClass } from './checkout-form-controls'
-
-export function CheckoutOrderSummary({
-  items,
-  money,
-  subtotal,
-  discount,
-  shipping,
-  tax,
-  total,
-  hasShippingOptions,
-  couponCode,
-  couponError,
-  promotionCodes,
-  formError,
-  isSaving,
-  canSubmit = true,
-  submitLabel = 'Pagar',
-  onCouponCodeChange,
-  onApplyCoupon,
-  onRemoveCoupon,
-}: {
-  items: StorefrontCartItem[]
-  money: (value: number) => string
-  subtotal: number
-  discount: number
-  shipping: number
-  tax: number
-  total: number
-  hasShippingOptions: boolean
-  couponCode: string
-  couponError: string | null
-  promotionCodes: string[]
-  formError: string | null
-  isSaving: boolean
-  canSubmit?: boolean
-  submitLabel?: string
-  onCouponCodeChange: (value: string) => void
-  onApplyCoupon: () => void
-  onRemoveCoupon: (code: string) => void
-}) {
-  return (
-    <aside className="rounded-xl border bg-card p-5 shadow-sm lg:sticky lg:top-6">
-      <h2 className="text-lg font-semibold">Resumen</h2>
-
-      <ul className="mt-4 divide-y border-y" aria-label="Productos">
-        {items.map((item) => (
-          <SummaryLineItem key={item.id} item={item} money={money} />
-        ))}
-      </ul>
-
-      <div className="mt-4 flex gap-2">
-        <input
-          className={fieldClass()}
-          placeholder="Cupón"
-          value={couponCode}
-          onChange={(e) => onCouponCodeChange(e.target.value)}
-        />
-        <Button type="button" variant="outline" onClick={onApplyCoupon}>
-          Aplicar
-        </Button>
-      </div>
-      {couponError ? (
-        <p className="mt-2 text-xs text-destructive">{couponError}</p>
-      ) : null}
-      {promotionCodes.length > 0 ? (
-        <div className="mt-3 flex flex-wrap gap-2">
-          {promotionCodes.map((code) => (
-            <button
-              key={code}
-              type="button"
-              className="inline-flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs font-medium"
-              onClick={() => onRemoveCoupon(code)}
-            >
-              <Tag className="size-3" aria-hidden="true" />
-              {code} ×
-            </button>
-          ))}
-        </div>
-      ) : null}
-
-      <dl className="mt-5 space-y-3 text-sm">
-        <div className="flex justify-between gap-4">
-          <dt className="text-muted-foreground">Subtotal</dt>
-          <dd className="tabular-nums">{money(subtotal)}</dd>
-        </div>
-        {discount !== 0 ? (
-          <div className="flex justify-between gap-4 text-primary">
-            <dt>Descuentos</dt>
-            <dd className="tabular-nums">-{money(Math.abs(discount))}</dd>
-          </div>
-        ) : null}
-        <div className="flex justify-between gap-4">
-          <dt className="text-muted-foreground">Envío</dt>
-          <dd className="tabular-nums">
-            {hasShippingOptions ? money(shipping) : 'Por calcular'}
-          </dd>
-        </div>
-        {tax !== 0 ? (
-          <div className="flex justify-between gap-4">
-            <dt className="text-muted-foreground">Impuestos</dt>
-            <dd className="tabular-nums">{money(tax)}</dd>
-          </div>
-        ) : null}
-        <div className="flex items-baseline justify-between gap-4 border-t pt-4">
-          <dt className="font-semibold">Total</dt>
-          <dd className="text-xl font-semibold tabular-nums">{money(total)}</dd>
-        </div>
-      </dl>
-
-      {formError ? (
-        <p className="mt-4 text-sm text-destructive" role="alert">
-          {formError}
-        </p>
-      ) : null}
-
-      <Button
-        type="submit"
-        className="mt-6 w-full"
-        size="lg"
-        disabled={isSaving || !canSubmit}
-      >
-        {isSaving ? 'Procesando…' : submitLabel}
-      </Button>
-    </aside>
-  )
-}
-
-function SummaryLineItem({
-  item,
-  money,
-}: {
-  item: StorefrontCartItem
-  money: (value: number) => string
-}) {
-  const lineTotal = item.unitPrice * item.quantity
-  return (
-    <li className="flex gap-3 py-3">
-      <div className="flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted">
-        {item.thumbnail ? (
-          <img
-            src={item.thumbnail}
-            alt=""
-            width={56}
-            height={56}
-            className="size-full object-cover"
-          />
-        ) : (
-          <Package className="size-4 text-muted-foreground" aria-hidden="true" />
-        )}
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium leading-snug">{item.title}</p>
-        <div className="mt-0.5 flex flex-wrap gap-x-2 text-xs text-muted-foreground">
-          <span>Cant. {item.quantity}</span>
-          {item.variantLabel ? <span>{item.variantLabel}</span> : null}
-        </div>
-      </div>
-      <p className="shrink-0 text-sm font-semibold tabular-nums">{money(lineTotal)}</p>
-    </li>
-  )
-}

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

@@ -1,212 +0,0 @@
-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
-}) {
-  return (
-    <div className="space-y-4">
-      <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 Pagar para confirmar este método de pago.
-                    </p>
-                  ) : null}
-                </div>
-              ) : null}
-            </div>
-          )
-        })}
-      </div>
-      <FieldError message={fieldError} />
-    </div>
-  )
-}
-
-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 Pagar para finalizar tu pedido.
-        </p>
-      ) : (
-        <Button type="button" size="sm" variant="outline" onClick={onMarkCompleted}>
-          Ya completé el pago en la pasarela
-        </Button>
-      )}
-    </div>
-  )
-}