Inna
1b0920d11f
Los 9 servicios con precio en euros (rename, customize, change-race, change-faction, level-up, gold, transfer, restore-item, send-gift) ahora ofrecen un selector de forma de pago con las 3 opciones: saldo PD, tarjeta (Stripe) o tarjeta (SumUp). - lib/dpoints: spendDPoints() descuenta PD de forma atómica (FOR UPDATE). - lib/pay-with-dpoints: paga con saldo PD, ejecuta la acción al momento y reembolsa si la ejecución falla; 100 PD = 1 €. - rutas checkout (character/[service] y gift): rama provider='pd' que valida saldo, descuenta, ejecuta fulfill y devuelve la URL de éxito (sin pasarela). - service-success: rama provider='pd' (la entrega ya se hizo en el checkout). - PaymentMethodSelect: componente compartido con coste por método y saldo; desactiva PD si no hay saldo suficiente. - Formularios (PaidServiceForm, Gold, Transfer, RestoreItems, SendGift) y sus páginas pasan el saldo PD y envían el método elegido + locale. - i18n: namespace Pay (es/en); añadidas claves Paid.restore-item que faltaban. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
76 lines
3.2 KiB
TypeScript
76 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useTranslations, useLocale } from 'next-intl'
|
|
import type { GoldOption } from '@/lib/prices'
|
|
import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
|
|
import { PaymentMethodSelect, pdCostOf, type PayMethod } from '@/components/PaymentMethodSelect'
|
|
|
|
export function GoldForm({ characters, options, pdBalance }: { characters: CharOption[]; options: GoldOption[]; pdBalance: number }) {
|
|
const t = useTranslations('Services')
|
|
const tp = useTranslations('Paid')
|
|
const tpay = useTranslations('Pay')
|
|
const locale = useLocale()
|
|
const [character, setCharacter] = useState('')
|
|
const [amount, setAmount] = useState('')
|
|
const [method, setMethod] = useState<PayMethod>('pd')
|
|
const [busy, setBusy] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const price = options.find((o) => String(o.gold_amount) === amount)?.price ?? 0
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
if (busy || !character || !amount) return
|
|
const payAmount = method === 'pd' ? tpay('pdCost', { cost: pdCostOf(price) }) : tpay('eur', { price })
|
|
if (!window.confirm(tpay('confirm', { amount: payAmount }))) 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: method, locale }),
|
|
})
|
|
const data: { success?: boolean; url?: string; message?: string; error?: string } = await res.json()
|
|
if (data.success && data.url) window.location.href = data.url
|
|
else {
|
|
setError(data.message || (data.error && tpay.has(`errors.${data.error}`) ? tpay(`errors.${data.error}`) : 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>
|
|
{amount && <PaymentMethodSelect value={method} onChange={setMethod} priceEur={price} pdBalance={pdBalance} />}
|
|
<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>
|
|
)
|
|
}
|