web-next: change-race/faction/level-up/gold por SumUp + rastreador de misiones

- /change-race-character (3€), /change-faction-character (5€, valida condiciones:
  sin hermandad/correo/subastas/capitán-arena y oro <= cap por nivel),
  /level-up-character (10€), /gold-character (oro por correo SOAP). Cada uno borra
  su ruta antigua y actualiza el link del panel.
- SumUp: hook precheck en PaidServiceConfig (condiciones cambio de facción);
  columna home_stripelog.metadata para campos extra (gold_amount).
- /quest-character: rastreador de estado de misiones/cadenas (clase, Hijos de
  Hodir, misión por ID) en personaje offline; cooldowns por categoría, Turnstile,
  IDs de misión verificados en wotlkdb 3.3.5a. Tabla home_questsearchhistory.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/components/AccountTools.tsx

@@ -33,11 +33,11 @@ export function AccountTools({ isAdmin }: { isAdmin: boolean }) {
     { href: '/revive-character', icon: 'revive-icon', label: t('svcRevive'), desc: t('svcReviveDesc') },
     { href: '/rename-character', icon: 'rename-icon', label: t('svcRename'), desc: t('svcRenameDesc') },
     { href: '/customize-character', icon: 'customize-icon', label: t('svcCustomize'), desc: t('svcCustomizeDesc') },
-    { href: '/change-race', icon: 'change-race-icon', label: t('svcChangeRace'), desc: t('svcChangeRaceDesc') },
-    { href: '/change-faction', icon: 'change-faction-icon', label: t('svcChangeFaction'), desc: t('svcChangeFactionDesc') },
-    { href: '/level-up', icon: 'level-up-icon', label: t('svcLevelUp'), desc: t('svcLevelUpDesc') },
-    { href: '/gold', icon: 'gold-icon', label: t('svcGold'), desc: t('svcGoldDesc') },
-    { href: '/quest', icon: 'quest-icon', label: t('svcQuest'), desc: t('svcQuestDesc') },
+    { href: '/change-race-character', icon: 'change-race-icon', label: t('svcChangeRace'), desc: t('svcChangeRaceDesc') },
+    { href: '/change-faction-character', icon: 'change-faction-icon', label: t('svcChangeFaction'), desc: t('svcChangeFactionDesc') },
+    { href: '/level-up-character', icon: 'level-up-icon', label: t('svcLevelUp'), desc: t('svcLevelUpDesc') },
+    { href: '/gold-character', icon: 'gold-icon', label: t('svcGold'), desc: t('svcGoldDesc') },
+    { href: '/quest-character', icon: 'quest-icon', label: t('svcQuest'), desc: t('svcQuestDesc') },
     { href: '/transfer', icon: 'tranfer-char-icon', label: t('svcTransfer'), desc: t('svcTransferDesc') },
     { href: '/restore-character', icon: 'restore-icon', label: t('svcRestoreChar'), desc: t('svcRestoreCharDesc') },
     { href: '/restore-items', icon: 'prox-icon', label: t('svcRestoreItems'), desc: t('svcRestoreItemsDesc') },

web-next/components/GoldForm.tsx

@@ -16,6 +16,9 @@ export function GoldForm({ characters, options }: { characters: CharOption[]; op
   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 {
@@ -23,12 +26,12 @@ export function GoldForm({ characters, options }: { characters: CharOption[]; op
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'same-origin',
-        body: JSON.stringify({ character, gold_amount: amount }),
+        body: JSON.stringify({ character, gold_amount: amount, provider: 'sumup' }),
       })
-      const data: { success?: boolean; url?: string } = await res.json()
+      const data: { success?: boolean; url?: string; message?: string } = await res.json()
       if (data.success && data.url) window.location.href = data.url
       else {
-        setError(t('genericError'))
+        setError(data.message || t('genericError'))
         setBusy(false)
       }
     } catch {
@@ -54,7 +57,7 @@ export function GoldForm({ characters, options }: { characters: CharOption[]; op
         </select>
         <br />
         <button type="submit" className="gold-button" disabled={busy || !character || !amount}>
-          {busy ? t('processing') : tp('gold.buy')}
+          {busy ? t('processing') : tp('gold.send')}
         </button>
       </form>
       <hr />

web-next/components/PaidServiceForm.tsx

@@ -33,11 +33,11 @@ export function PaidServiceForm({ characters, checkoutEndpoint, payLabel, button
         credentials: 'same-origin',
         body: JSON.stringify({ character, ...(provider ? { provider } : {}) }),
       })
-      const data: { success?: boolean; url?: string } = await res.json()
+      const data: { success?: boolean; url?: string; message?: string } = await res.json()
       if (data.success && data.url) {
-        window.location.href = data.url // Checkout de Stripe
+        window.location.href = data.url // Checkout (Stripe o SumUp)
       } else {
-        setError(t('genericError'))
+        setError(data.message || t('genericError'))
         setBusy(false)
       }
     } catch {

web-next/components/QuestTrackerForm.tsx

@@ -0,0 +1,189 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { CharacterSelect } from '@/components/CharacterSelect'
+import { Turnstile } from '@/components/Turnstile'
+
+const QUEST_DB = 'https://wotlk.novawow.com'
+
+export interface QuestCharacter {
+  name: string
+  classCss: string
+  level: number
+}
+export interface QuestOptionClient {
+  key: string
+  classCss: string | null
+  label: string
+  minLevel: number
+  hasData: boolean
+}
+interface QuestStatus {
+  quest: number
+  state: 'rewarded' | 'inProgress' | 'none'
+}
+
+function trackerError(error?: string, minutes?: number): string {
+  switch (error) {
+    case 'missingFields':
+      return 'Selecciona un personaje y una opción.'
+    case 'characterNotOwned':
+      return 'El personaje seleccionado no es válido.'
+    case 'characterOnline':
+      return 'El personaje debe estar desconectado.'
+    case 'wrongClass':
+      return 'Esa opción no corresponde a la clase del personaje.'
+    case 'levelTooLow':
+      return 'El personaje no cumple el nivel mínimo de esa opción.'
+    case 'invalidQuestId':
+      return 'Introduce un ID de misión válido.'
+    case 'invalidOption':
+    case 'noData':
+      return 'Esa opción no está disponible todavía.'
+    case 'cooldown':
+      return `Debes esperar ${minutes ?? 0} min para repetir esta búsqueda en este personaje.`
+    case 'captcha':
+      return 'Verifica que no eres un robot.'
+    case 'notAuthenticated':
+      return 'Tu sesión ha expirado. Inicia sesión de nuevo.'
+    default:
+      return 'No se pudo completar la búsqueda. Inténtalo de nuevo.'
+  }
+}
+
+export function QuestTrackerForm({ characters, options }: { characters: QuestCharacter[]; options: QuestOptionClient[] }) {
+  const [character, setCharacter] = useState('')
+  const [option, setOption] = useState('')
+  const [questId, setQuestId] = useState('')
+  const [captcha, setCaptcha] = useState('')
+  const [captchaKey, setCaptchaKey] = useState(0)
+  const [busy, setBusy] = useState(false)
+  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
+  const [result, setResult] = useState<{ label: string; statuses: QuestStatus[] } | null>(null)
+
+  const selected = characters.find((c) => c.name === character)
+
+  // Opciones que el personaje elegido puede rastrear (clase + nivel + con datos),
+  // más la búsqueda por misión específica (nivel >= 10).
+  const available = useMemo(() => {
+    if (!selected) return [] as { key: string; label: string }[]
+    const list = options
+      .filter((o) => o.hasData && (o.classCss === null || o.classCss === selected.classCss) && selected.level >= o.minLevel)
+      .map((o) => ({ key: o.key, label: o.label }))
+    if (selected.level >= 10) list.push({ key: 'specific', label: 'Por misión específica' })
+    return list
+  }, [selected, options])
+
+  function onCharacter(v: string) {
+    setCharacter(v)
+    setOption('')
+    setQuestId('')
+    setResult(null)
+    setMessage(null)
+  }
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (busy || !character || !option) return
+    setBusy(true)
+    setMessage(null)
+    setResult(null)
+    try {
+      const res = await fetch('/api/character/quest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ character, option, questId: option === 'specific' ? Number(questId) : undefined, turnstile: captcha }),
+      })
+      const data: { success?: boolean; error?: string; minutes?: number; label?: string; statuses?: QuestStatus[] } =
+        await res.json()
+      if (data.success && data.statuses) {
+        setResult({ label: data.label ?? '', statuses: data.statuses })
+      } else {
+        setMessage({ ok: false, text: trackerError(data.error, data.minutes) })
+      }
+    } catch {
+      setMessage({ ok: false, text: trackerError() })
+    } finally {
+      setBusy(false)
+      setCaptcha('')
+      setCaptchaKey((k) => k + 1)
+    }
+  }
+
+  if (characters.length === 0) {
+    return (
+      <div className="centered">
+        <br />
+        <span>No hay personajes disponibles para esta herramienta</span>
+        <br />
+      </div>
+    )
+  }
+
+  const stateText = (s: QuestStatus['state']) =>
+    s === 'rewarded'
+      ? { text: 'Completada', cls: 'green-info2' }
+      : s === 'inProgress'
+        ? { text: 'En curso', cls: 'yellow-info' }
+        : { text: 'Sin empezar', cls: 'third-brown' }
+
+  return (
+    <div className="centered">
+      <form id="uw-quest-form" onSubmit={handleSubmit} acceptCharset="utf-8">
+        <CharacterSelect characters={characters} value={character} onChange={onCharacter} placeholder="Selecciona un personaje" />
+        <br />
+        <select value={option} onChange={(e) => setOption(e.target.value)} required disabled={!selected}>
+          <option value="" disabled>Selecciona una opción</option>
+          {available.map((o) => (
+            <option key={o.key} value={o.key}>{o.label}</option>
+          ))}
+        </select>
+        <br />
+        {option === 'specific' && (
+          <>
+            <input
+              type="number"
+              min="1"
+              placeholder="ID de misión"
+              value={questId}
+              onChange={(e) => setQuestId(e.target.value)}
+              required
+            />
+            <br />
+          </>
+        )}
+        <Turnstile key={captchaKey} onVerify={setCaptcha} />
+        <button type="submit" className="quest-button" disabled={busy || !character || !option}>
+          {busy ? 'Buscando misiones' : 'BUSCAR MISIONES'}
+        </button>
+      </form>
+      <hr />
+      <div className="alert-message" id="quest-response" style={{ display: message || result ? 'block' : 'none' }}>
+        {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
+        {result && (
+          <div>
+            <p className="yellow-info">{result.label}</p>
+            <table className="max-center-table2">
+              <tbody>
+                {result.statuses.map((s) => {
+                  const st = stateText(s.state)
+                  return (
+                    <tr key={s.quest}>
+                      <td className="lefted">
+                        <a href={`${QUEST_DB}/?quest=${s.quest}`} target="_blank" rel="noopener noreferrer">
+                          Misión #{s.quest}
+                        </a>
+                      </td>
+                      <td className={`real-info-box ${st.cls}`}>{st.text}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}