Añadir /send-gift (Enviar regalo) pagado por SumUp
Envía ítems de la tienda por correo al personaje de un amigo, pagado por SumUp. lib/gift.ts (catálogo por categoría, priceCart con precios reales de BD, sendGiftByMail vía SOAP .send items troceado a 12/correo + anti-inyección); servicio send-gift en PAID_SERVICES; ruta dedicada /api/gift/checkout (origen propio, destino existe, token de seguridad, carrito); SendGiftForm + página con el diseño; i18n Paid[send-gift]; seed_giftitems.sql (4 cat, 8 ítems). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,247 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo, useState } from 'react'
|
||||
import type { GiftCategory, GiftItem } from '@/lib/gift'
|
||||
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
|
||||
|
||||
// Tope de cantidad en la interfaz. El servidor lo revalida en priceCart (fuente de verdad).
|
||||
const MAX_QTY = 100
|
||||
|
||||
interface CartEntry {
|
||||
item: GiftItem
|
||||
qty: number
|
||||
}
|
||||
|
||||
/** Campo con ojo para mostrar/ocultar el token de seguridad. */
|
||||
function SecretInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
}: {
|
||||
value: string
|
||||
onChange: (v: string) => void
|
||||
placeholder: string
|
||||
}) {
|
||||
const [show, setShow] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
type={show ? 'text' : 'password'}
|
||||
id="security-token"
|
||||
maxLength={6}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
required
|
||||
/>{' '}
|
||||
<span
|
||||
className={`far ${show ? 'fa-eye-slash' : 'fa-eye'} toggle-token`}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => setShow((s) => !s)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function SendGiftForm({
|
||||
characters,
|
||||
catalog,
|
||||
currency = '€',
|
||||
}: {
|
||||
characters: CharOption[]
|
||||
catalog: GiftCategory[]
|
||||
currency?: string
|
||||
}) {
|
||||
const [source, setSource] = useState('')
|
||||
const [destination, setDestination] = useState('')
|
||||
const [token, setToken] = useState('')
|
||||
const [cart, setCart] = useState<Map<number, CartEntry>>(new Map())
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const total = useMemo(
|
||||
() => Math.round([...cart.values()].reduce((s, e) => s + e.item.price * e.qty, 0) * 100) / 100,
|
||||
[cart],
|
||||
)
|
||||
|
||||
function addItem(item: GiftItem) {
|
||||
setCart((prev) => {
|
||||
const next = new Map(prev)
|
||||
const cur = next.get(item.id)
|
||||
next.set(item.id, { item, qty: Math.min(MAX_QTY, (cur?.qty ?? 0) + 1) })
|
||||
return next
|
||||
})
|
||||
}
|
||||
function setQty(id: number, qty: number) {
|
||||
setCart((prev) => {
|
||||
const next = new Map(prev)
|
||||
const cur = next.get(id)
|
||||
if (!cur) return prev
|
||||
const q = Math.max(1, Math.min(MAX_QTY, Math.floor(qty) || 1))
|
||||
next.set(id, { ...cur, qty: q })
|
||||
return next
|
||||
})
|
||||
}
|
||||
function removeItem(id: number) {
|
||||
setCart((prev) => {
|
||||
const next = new Map(prev)
|
||||
next.delete(id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (busy) return
|
||||
if (!source || !destination.trim() || !token.trim()) {
|
||||
setError('Completa el personaje de origen, el de destino y el token de seguridad.')
|
||||
return
|
||||
}
|
||||
if (cart.size === 0) {
|
||||
setError('Añade al menos un objeto al carrito.')
|
||||
return
|
||||
}
|
||||
if (
|
||||
!window.confirm(
|
||||
`¿Enviar el regalo a "${destination.trim()}" por ${total} ${currency} (SumUp)? Esta acción no es reversible.`,
|
||||
)
|
||||
)
|
||||
return
|
||||
setBusy(true)
|
||||
setError(null)
|
||||
try {
|
||||
const res = await fetch('/api/gift/checkout', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'same-origin',
|
||||
body: JSON.stringify({
|
||||
source,
|
||||
destination: destination.trim(),
|
||||
security_token: token.trim(),
|
||||
cart: [...cart.values()].map((e) => ({ id: e.item.id, qty: e.qty })),
|
||||
provider: 'sumup',
|
||||
}),
|
||||
})
|
||||
const data: { success?: boolean; url?: string; message?: string } = await res.json()
|
||||
if (data.success && data.url) window.location.href = data.url
|
||||
else {
|
||||
setError(data.message || 'No se pudo iniciar el pago. Inténtalo de nuevo.')
|
||||
setBusy(false)
|
||||
}
|
||||
} catch {
|
||||
setError('Algo ha salido mal. Inténtalo más tarde.')
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (characters.length === 0) return <p className="second-brown">No tienes personajes disponibles.</p>
|
||||
if (catalog.length === 0) return <p className="second-brown">No hay objetos disponibles para regalar por ahora.</p>
|
||||
|
||||
return (
|
||||
<div className="centered">
|
||||
<form onSubmit={handleSubmit} acceptCharset="utf-8">
|
||||
<p>Escoge desde qué personaje se envía el regalo:</p>
|
||||
<CharacterSelect characters={characters} value={source} onChange={setSource} placeholder="Personaje de origen" />
|
||||
<br />
|
||||
<p>Nombre del personaje que recibirá el regalo:</p>
|
||||
<input
|
||||
type="text"
|
||||
maxLength={12}
|
||||
placeholder="Personaje de destino"
|
||||
value={destination}
|
||||
onChange={(e) => setDestination(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<br />
|
||||
<p>Token de seguridad:</p>
|
||||
<SecretInput value={token} onChange={setToken} placeholder="Token de seguridad" />
|
||||
<hr />
|
||||
|
||||
{/* Catálogo de objetos */}
|
||||
<div className="justified">
|
||||
{catalog.map((cat) => (
|
||||
<div key={cat.id}>
|
||||
<h3 className="first-brown">{cat.name}</h3>
|
||||
<div>
|
||||
{cat.items.map((it) => (
|
||||
<div className="item-box" key={it.id}>
|
||||
<a
|
||||
href={`https://www.wowhead.com/wotlk/item=${it.itemId}`}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<img className="item-img-box" src={it.imageUrl} alt={it.name} />
|
||||
</a>
|
||||
<div className="item-name second-brown">{it.name}</div>
|
||||
<div className="yellow-info">
|
||||
{it.price} {currency}
|
||||
</div>
|
||||
<button type="button" className="store-add-button" onClick={() => addItem(it)}>
|
||||
Añadir
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
{/* Carrito */}
|
||||
<h3 className="first-brown">Carrito</h3>
|
||||
{cart.size === 0 ? (
|
||||
<p className="second-brown">Aún no has añadido objetos.</p>
|
||||
) : (
|
||||
<table className="cart-list max-center-table">
|
||||
<tbody>
|
||||
{[...cart.values()].map((e) => (
|
||||
<tr key={e.item.id}>
|
||||
<td>
|
||||
<img className="item-img-box" src={e.item.imageUrl} alt={e.item.name} />
|
||||
</td>
|
||||
<td className="second-brown">{e.item.name}</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={MAX_QTY}
|
||||
value={e.qty}
|
||||
onChange={(ev) => setQty(e.item.id, Number(ev.target.value))}
|
||||
style={{ width: '4em' }}
|
||||
/>
|
||||
</td>
|
||||
<td className="yellow-info">{Math.round(e.item.price * e.qty * 100) / 100} {currency}</td>
|
||||
<td>
|
||||
<button type="button" className="store-remove-button" onClick={() => removeItem(e.item.id)}>
|
||||
<i className="fas fa-trash" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
<div className="centered">
|
||||
<br />
|
||||
<p>
|
||||
Total: <span className="yellow-info">{total} {currency}</span> (SumUp)
|
||||
</p>
|
||||
<br />
|
||||
<button
|
||||
type="submit"
|
||||
className="store-send-button"
|
||||
disabled={busy || cart.size === 0 || !source || !destination.trim() || !token.trim()}
|
||||
>
|
||||
{busy ? 'Enviando regalo' : 'ENVIAR REGALO'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr />
|
||||
<div className="alert-message" style={{ display: error ? 'block' : 'none' }}>
|
||||
{error && <span className="red-form-response">{error}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user