Permitir pagar los servicios con PD, Stripe o SumUp (elección)

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>

web-next/components/RestoreItemsForm.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import { useState } from 'react'
-import { useTranslations } from 'next-intl'
+import { useTranslations, useLocale } from 'next-intl'
 import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
+import { PaymentMethodSelect, pdCostOf, type PayMethod } from '@/components/PaymentMethodSelect'
 import { Turnstile } from '@/components/Turnstile'
 
 const ITEM_DB = 'https://wotlk.novawow.com'
@@ -33,9 +34,12 @@ function itemsError(t: ReturnType<typeof useTranslations>, error?: string, minut
   }
 }
 
-export function RestoreItemsForm({ characters, price }: { characters: CharOption[]; price: number }) {
+export function RestoreItemsForm({ characters, price, pdBalance }: { characters: CharOption[]; price: number; pdBalance: number }) {
   const t = useTranslations('CharService')
+  const tpay = useTranslations('Pay')
+  const locale = useLocale()
   const [character, setCharacter] = useState('')
+  const [method, setMethod] = useState<PayMethod>(pdBalance >= pdCostOf(price) ? 'pd' : 'sumup')
   const [captcha, setCaptcha] = useState('')
   const [captchaKey, setCaptchaKey] = useState(0)
   const [busy, setBusy] = useState(false)
@@ -80,14 +84,15 @@ export function RestoreItemsForm({ characters, price }: { characters: CharOption
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'same-origin',
-        body: JSON.stringify({ character, recover_id: String(item.recoverId), provider: 'sumup' }),
+        body: JSON.stringify({ character, recover_id: String(item.recoverId), provider: method, locale }),
       })
       const data: { success?: boolean; url?: string; error?: string; message?: string } = await res.json()
       if (data.success && data.url) {
-        window.location.assign(data.url) // checkout de SumUp
+        window.location.assign(data.url) // éxito PD, o checkout de SumUp/Stripe
         return
       }
-      setMessage({ ok: false, text: data.message || itemsError(t, data.error) })
+      const payErr = data.error && tpay.has(`errors.${data.error}`) ? tpay(`errors.${data.error}`) : undefined
+      setMessage({ ok: false, text: data.message || payErr || itemsError(t, data.error) })
       setBusy(false)
     } catch {
       setMessage({ ok: false, text: itemsError(t) })
@@ -122,6 +127,8 @@ export function RestoreItemsForm({ characters, price }: { characters: CharOption
           {items.length === 0 ? (
             <p className="second-brown">{t('restoreItems.noDeletedItems')}</p>
           ) : (
+            <>
+            <PaymentMethodSelect value={method} onChange={setMethod} priceEur={price} pdBalance={pdBalance} />
             <table className="restore-item-table">
               <tbody>
                 {items.map((it) => (
@@ -139,6 +146,7 @@ export function RestoreItemsForm({ characters, price }: { characters: CharOption
                 ))}
               </tbody>
             </table>
+            </>
           )}
           <br />
           <p><a id="a-select-other" href="#" onClick={(e) => { e.preventDefault(); reset() }}>{t('restoreItems.queryOther')}</a></p>