Inna
14125dbd72
Desactiva la validación nativa del navegador ("Rellene este campo", formato de
email) en el resto de formularios (recover, reset-password, trade-points,
rename-guild, transfer-dp, gold, promo, transfer, quest, send-gift, 2FA, restore).
Los errores se muestran como red-form-response (por validación en cliente o del
servidor), consistente con login y create-account. Botones ya gateados por campos.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import type { GoldOption } from '@/lib/prices'
|
|
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
|
|
|
|
export function GoldForm({ characters, options }: { characters: CharOption[]; options: GoldOption[] }) {
|
|
const t = useTranslations('Services')
|
|
const tp = useTranslations('Paid')
|
|
const [character, setCharacter] = useState('')
|
|
const [amount, setAmount] = useState('')
|
|
const [busy, setBusy] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
if (busy || !character || !amount) return
|
|
const opt = options.find((o) => String(o.gold_amount) === amount)
|
|
const price = opt?.price ?? 0
|
|
if (!window.confirm(`¿Estás seguro de enviar ${amount} de oro a ${character} por ${price} € (SumUp)?`)) return
|
|
setBusy(true)
|
|
setError(null)
|
|
try {
|
|
const res = await fetch('/api/character/gold/checkout', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify({ character, gold_amount: amount, 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 || t('genericError'))
|
|
setBusy(false)
|
|
}
|
|
} catch {
|
|
setError(t('genericError'))
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
if (characters.length === 0) return <p className="second-brown">{t('noCharactersYet')}</p>
|
|
|
|
return (
|
|
<div className="centered">
|
|
<form noValidate onSubmit={handleSubmit} acceptCharset="utf-8">
|
|
<CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
|
|
<br />
|
|
<select value={amount} onChange={(e) => setAmount(e.target.value)} required>
|
|
<option value="" disabled>{tp('gold.selectAmount')}</option>
|
|
{options.map((o) => (
|
|
<option key={o.gold_amount} value={o.gold_amount}>
|
|
{tp('gold.option', { amount: o.gold_amount, price: o.price })}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<br />
|
|
<button type="submit" className="gold-button" disabled={busy || !character || !amount}>
|
|
{busy ? t('processing') : tp('gold.send')}
|
|
</button>
|
|
</form>
|
|
<hr />
|
|
<div className="alert-message" style={{ display: error ? 'block' : 'none' }}>
|
|
{error && <span className="red-form-response">{error}</span>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|