@ecomiq/storefront 1.1.5 → 2.0.0

package/src/components/checkout/cart-sync.ts

@@ -0,0 +1,143 @@
+import type { StorefrontCart, StorefrontCartItem } from '@ecomiq/core'
+
+export type CartLineSignatureItem = {
+  id: string
+  variantId: string
+  quantity: number
+}
+
+export type CartReconcileAction =
+  | { action: 'add'; variantId: string; quantity: number }
+  | { action: 'update'; itemId: string; quantity: number }
+  | { action: 'remove'; itemId: string }
+
+export function cartItemsSignature(items: CartLineSignatureItem[]): string {
+  return items
+    .map((i) => `${i.variantId}:${i.quantity}`)
+    .sort()
+    .join('|')
+}
+
+export function toSignatureItems(
+  items: StorefrontCartItem[] | undefined,
+): CartLineSignatureItem[] {
+  return (items ?? []).map((item) => ({
+    id: item.id,
+    variantId: String(item.variantId),
+    quantity: item.quantity,
+  }))
+}
+
+export function areCartSignaturesEqual(
+  a: CartLineSignatureItem[],
+  b: CartLineSignatureItem[],
+): boolean {
+  return cartItemsSignature(a) === cartItemsSignature(b)
+}
+
+export function cartSessionSignature(
+  cartTokenId: string | null | undefined,
+  items: CartLineSignatureItem[],
+): string {
+  return `${cartTokenId ?? ''}|${cartItemsSignature(items)}`
+}
+
+function groupQuantitiesByVariant(items: CartLineSignatureItem[]): Map<string, number> {
+  const map = new Map<string, number>()
+  for (const item of items) {
+    map.set(item.variantId, (map.get(item.variantId) ?? 0) + Math.max(0, item.quantity))
+  }
+  return map
+}
+
+function groupLinesByVariant(
+  items: CartLineSignatureItem[],
+): Map<string, CartLineSignatureItem[]> {
+  const map = new Map<string, CartLineSignatureItem[]>()
+  for (const item of items) {
+    const lines = map.get(item.variantId) ?? []
+    lines.push(item)
+    map.set(item.variantId, lines)
+  }
+  return map
+}
+
+/** Acciones para alinear el API con el carrito local (fuente de verdad). */
+export function findCartReconciliationActions(
+  local: CartLineSignatureItem[],
+  api: CartLineSignatureItem[],
+): CartReconcileAction[] {
+  const actions: CartReconcileAction[] = []
+  const localQty = groupQuantitiesByVariant(local)
+  const apiLinesByVariant = groupLinesByVariant(api)
+  const variantIds = new Set([...localQty.keys(), ...apiLinesByVariant.keys()])
+
+  for (const variantId of variantIds) {
+    const targetQty = localQty.get(variantId) ?? 0
+    const apiLines = apiLinesByVariant.get(variantId) ?? []
+    const apiQty = apiLines.reduce((sum, line) => sum + line.quantity, 0)
+
+    if (targetQty > apiQty) {
+      actions.push({
+        action: 'add',
+        variantId,
+        quantity: targetQty - apiQty,
+      })
+      continue
+    }
+
+    if (targetQty >= apiQty) continue
+
+    let excess = apiQty - targetQty
+    for (const line of [...apiLines].reverse()) {
+      if (excess <= 0) break
+      if (line.quantity <= excess) {
+        actions.push({ action: 'remove', itemId: line.id })
+        excess -= line.quantity
+      } else {
+        actions.push({
+          action: 'update',
+          itemId: line.id,
+          quantity: line.quantity - excess,
+        })
+        excess = 0
+      }
+    }
+  }
+
+  return actions
+}
+
+export function isCheckoutCartAlreadyPurchased(
+  cart: StorefrontCart | undefined,
+): boolean {
+  if (!cart) return false
+  if (cart.completedAt) return true
+  return cart.status === 'completed'
+}
+
+const PROVIDER_CHECKOUT_UI = new Set(['stripe', 'mercadopago', 'mercado_pago'])
+
+function normalizeProviderKey(raw: string): string {
+  return raw.trim().toLowerCase().replace(/[\s-]+/g, '_')
+}
+
+export function methodUsesProviderCheckoutUi(method: {
+  isManual: boolean
+  kind: string
+  code: string
+  providerMethodCode?: string | null
+}): boolean {
+  if (method.isManual) return false
+  const keys = [method.providerMethodCode, method.kind, method.code].filter(
+    Boolean,
+  ) as string[]
+  return keys.some((key) => {
+    const normalized = normalizeProviderKey(key)
+    return (
+      PROVIDER_CHECKOUT_UI.has(normalized) ||
+      normalized.includes('stripe') ||
+      normalized.includes('mercado')
+    )
+  })
+}

package/src/components/checkout/checkout-external-update-banner.tsx

@@ -0,0 +1,15 @@
+import { Button } from '../../ui'
+
+export function CheckoutExternalUpdateBanner({ onReload }: { onReload: () => void }) {
+  return (
+    <div
+      className="mb-6 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-amber-300/80 bg-amber-50 px-4 py-3 text-sm text-amber-950"
+      role="alert"
+    >
+      <p>Tu carrito se acaba de actualizar</p>
+      <Button type="button" size="sm" onClick={onReload}>
+        Recargar checkout
+      </Button>
+    </div>
+  )
+}

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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,156 @@
+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,
+  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
+  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}>
+        {isSaving ? 'Procesando…' : 'Pay now'}
+      </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>
+  )
+}