i18n: traducir toda la app (ES + EN) — páginas y componentes con texto hardcodeado

Se externaliza el texto español hardcodeado de ~55 archivos a next-intl y se añaden
traducciones al inglés, con paridad de claves es/en. Nuevos namespaces: History,
CharService, CharServiceB, Points, Legal, UI, Misc (+ altas en Common/Admin).

- Historiales (PD/PV, transacciones, sanciones, seguridad), servicios de personaje
  (transfer, send-gift, quest, restore-*, change-*, customize, level-up, gold, rename),
  PD/pagos (d-points, trade, promo, transfer-dp, rename-guild, DPointsTabs), páginas
  legales (cookies, privacidad, términos, reembolsos, aviso legal, contacto), layout
  (cabecera, footer, cookies, 2FA, descargas, jugadores, recluta) y páginas varias
  (home, reino, ayuda, addons, 2falogin).
- Textos con markup inline via t.rich; interpolación con ICU.
- Componente <NoteLegend/> para la leyenda NOTA/NOTE compartida.
- payLabel/confirmText de los servicios de pago traducidos.
- Verificado: tsc OK, next build OK, todas las claves t() resuelven en es y en,
  todos los t.rich casan etiquetas, páginas 200 en /es/ y /en/ sin claves crudas.

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

web-next/components/TradePointsForm.tsx

@@ -1,46 +1,47 @@
 'use client'
 
 import { useState } from 'react'
+import { useTranslations } from 'next-intl'
 import { Turnstile } from '@/components/Turnstile'
 import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
-function tradeError(error?: string): string {
+function tradeErrorKey(error?: string): string {
   switch (error) {
     case 'missingFields':
-      return 'Rellena todos los campos.'
+      return 'missingFields'
     case 'invalidAmount':
-      return 'Las cantidades deben ser números enteros entre 1 y 99999.'
+      return 'invalidAmount'
     case 'characterNotFound':
     case 'characterNotOwned':
-      return 'El personaje seleccionado no es válido.'
+      return 'characterInvalid'
     case 'captcha':
-      return 'Verifica que no eres un robot.'
+      return 'captcha'
     case 'wrongPassword':
-      return 'La contraseña de tu cuenta es incorrecta.'
+      return 'wrongPassword'
     case 'invalidToken':
-      return 'El token de seguridad no es válido.'
+      return 'invalidToken'
     case 'insufficientPoints':
-      return 'No tienes suficientes PD disponibles para crear este código.'
+      return 'insufficientPoints'
     case 'codeNotFound':
-      return 'No existe ningún código con ese ID.'
+      return 'codeNotFound'
     case 'codeUnavailable':
-      return 'El código ya no está disponible (canjeado o expirado).'
+      return 'codeUnavailable'
     case 'cannotRedeemOwn':
-      return 'No puedes canjear tu propio código.'
+      return 'cannotRedeemOwn'
     case 'characterOnline':
-      return 'El personaje debe estar desconectado para poder cobrar el oro.'
+      return 'characterOnline'
     case 'insufficientGold':
-      return 'El personaje no tiene suficiente oro.'
+      return 'insufficientGold'
     case 'creatorInsufficient':
-      return 'El creador del código ya no tiene suficientes PD.'
+      return 'creatorInsufficient'
     case 'locked':
-      return 'Espera unos segundos antes de canjear otro código.'
+      return 'locked'
     case 'deliveryFailed':
-      return 'No se pudo entregar el oro (servidor de juego no disponible). Inténtalo de nuevo más tarde.'
+      return 'deliveryFailed'
     case 'notAuthenticated':
-      return 'Tu sesión ha expirado. Inicia sesión de nuevo.'
+      return 'notAuthenticated'
     default:
-      return 'No se pudo completar la operación. Inténtalo de nuevo.'
+      return 'generic'
   }
 }
 
@@ -80,6 +81,8 @@ function PasswordInput({
 
 /* ---------------------------------- VENTA ---------------------------------- */
 function SellForm({ characters, visible }: { characters: CharOption[]; visible: boolean }) {
+  const t = useTranslations('Points')
+  const tradeError = (error?: string) => t(`trade.errors.${tradeErrorKey(error)}`)
   const [points, setPoints] = useState('')
   const [gold, setGold] = useState('')
   const [character, setCharacter] = useState('')
@@ -113,7 +116,7 @@ function SellForm({ characters, visible }: { characters: CharOption[]; visible:
       const data: { success?: boolean; error?: string; code?: { code: string; points: number; gold: number } } = await res.json()
       if (data.success && data.code) {
         setCreated(data.code)
-        setMessage({ ok: true, text: '¡Código creado!' })
+        setMessage({ ok: true, text: t('trade.codeCreated') })
         setPoints('')
         setGold('')
         setPassword('')
@@ -133,18 +136,18 @@ function SellForm({ characters, visible }: { characters: CharOption[]; visible:
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
         <table className="middle-center-table">
           <tbody>
-            <tr><td>¿Cuánto valdrá el código en PD?</td></tr>
-            <tr><td><input type="number" maxLength={5} min="1" max="99999" step="1" value={points} onChange={(e) => setPoints(e.target.value)} placeholder="Valor del código en PD" required /></td></tr>
-            <tr><td>¿Cuánto costará el código en oro?</td></tr>
-            <tr><td><input type="number" maxLength={5} min="1" max="99999" step="1" value={gold} onChange={(e) => setGold(e.target.value)} placeholder="Valor del código en oro" required /></td></tr>
-            <tr><td>¿A qué personaje se enviará el oro?</td></tr>
+            <tr><td>{t('trade.sellPointsLabel')}</td></tr>
+            <tr><td><input type="number" maxLength={5} min="1" max="99999" step="1" value={points} onChange={(e) => setPoints(e.target.value)} placeholder={t('trade.sellPointsPlaceholder')} required /></td></tr>
+            <tr><td>{t('trade.sellGoldLabel')}</td></tr>
+            <tr><td><input type="number" maxLength={5} min="1" max="99999" step="1" value={gold} onChange={(e) => setGold(e.target.value)} placeholder={t('trade.sellGoldPlaceholder')} required /></td></tr>
+            <tr><td>{t('trade.sellCharLabel')}</td></tr>
             <tr><td>
-              <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder="Selecciona un personaje" />
+              <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('trade.selectCharacter')} />
             </td></tr>
-            <tr><td><br /><PasswordInput id="password-sell" value={password} onChange={setPassword} placeholder="Contraseña de tu cuenta" maxLength={16} /></td></tr>
-            <tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder="Token de seguridad" required /></td></tr>
+            <tr><td><br /><PasswordInput id="password-sell" value={password} onChange={setPassword} placeholder={t('trade.passwordPlaceholder')} maxLength={16} /></td></tr>
+            <tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder={t('trade.tokenPlaceholder')} required /></td></tr>
             <tr><td><Turnstile onVerify={setCaptcha} /></td></tr>
-            <tr><td><button type="submit" className="trade-points-sell-button" disabled={busy}>{busy ? 'Creando…' : 'Crear código'}</button></td></tr>
+            <tr><td><button type="submit" className="trade-points-sell-button" disabled={busy}>{busy ? t('trade.creating') : t('trade.createButton')}</button></td></tr>
           </tbody>
         </table>
       </form>
@@ -153,11 +156,11 @@ function SellForm({ characters, visible }: { characters: CharOption[]; visible:
         {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
         {created && (
           <fieldset>
-            <legend>Código creado</legend>
+            <legend>{t('trade.createdLegend')}</legend>
             <div className="separate2">
-              <p>ID del código: <span className="green-info2">{created.code}</span></p>
-              <p>Valor: <span>{created.points} PD</span> por <span>{created.gold} de oro</span></p>
-              <p className="second-brown">Envía este ID al comprador. El código caduca en 1 hora.</p>
+              <p>{t('trade.codeIdLabel')} <span className="green-info2">{created.code}</span></p>
+              <p>{t.rich('trade.createdValue', { points: created.points, gold: created.gold, s: (c) => <span>{c}</span> })}</p>
+              <p className="second-brown">{t('trade.createdHint')}</p>
             </div>
           </fieldset>
         )}
@@ -168,6 +171,8 @@ function SellForm({ characters, visible }: { characters: CharOption[]; visible:
 
 /* ---------------------------------- COMPRA --------------------------------- */
 function BuyForm({ characters, visible }: { characters: CharOption[]; visible: boolean }) {
+  const t = useTranslations('Points')
+  const tradeError = (error?: string) => t(`trade.errors.${tradeErrorKey(error)}`)
   const [code, setCode] = useState('')
   const [character, setCharacter] = useState('')
   const [password, setPassword] = useState('')
@@ -192,7 +197,7 @@ function BuyForm({ characters, visible }: { characters: CharOption[]; visible: b
       const data: { success?: boolean; error?: string; points?: number; gold?: number } = await res.json()
       if (data.success && data.points != null && data.gold != null) {
         setCheckInfo({ points: data.points, gold: data.gold })
-        setMessage({ ok: true, text: `Este código vale ${data.points} PD y cuesta ${data.gold} de oro.` })
+        setMessage({ ok: true, text: t('trade.checkResult', { points: data.points, gold: data.gold }) })
       } else {
         setMessage({ ok: false, text: tradeError(data.error) })
       }
@@ -206,7 +211,7 @@ function BuyForm({ characters, visible }: { characters: CharOption[]; visible: b
   async function handleRedeem(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
     if (busy) return
-    if (!window.confirm('Vas a canjear este código. Esta acción no es reversible. ¿Deseas continuar?')) return
+    if (!window.confirm(t('trade.redeemConfirm'))) return
     setBusy(true)
     setMessage(null)
     try {
@@ -218,7 +223,7 @@ function BuyForm({ characters, visible }: { characters: CharOption[]; visible: b
       })
       const data: { success?: boolean; error?: string; points?: number; gold?: number } = await res.json()
       if (data.success) {
-        setMessage({ ok: true, text: `¡Canje correcto! Recibiste ${data.points} PD y se retiraron ${data.gold} de oro de ${character}.` })
+        setMessage({ ok: true, text: t('trade.redeemSuccess', { points: data.points ?? 0, gold: data.gold ?? 0, character }) })
         setCode('')
         setPassword('')
         setToken('')
@@ -238,20 +243,20 @@ function BuyForm({ characters, visible }: { characters: CharOption[]; visible: b
       <form onSubmit={handleRedeem} acceptCharset="utf-8">
         <table className="middle-center-table">
           <tbody>
-            <tr><td>Ingresa el ID del código de PD</td></tr>
-            <tr><td><input type="text" maxLength={25} value={code} onChange={(e) => setCode(e.target.value)} placeholder="Código de PD" required /></td></tr>
+            <tr><td>{t('trade.buyCodeLabel')}</td></tr>
+            <tr><td><input type="text" maxLength={25} value={code} onChange={(e) => setCode(e.target.value)} placeholder={t('trade.buyCodePlaceholder')} required /></td></tr>
             {checkInfo && (
-              <tr><td><p className="green-info2">Vale {checkInfo.points} PD · Cuesta {checkInfo.gold} de oro</p></td></tr>
+              <tr><td><p className="green-info2">{t('trade.checkInfo', { points: checkInfo.points, gold: checkInfo.gold })}</p></td></tr>
             )}
-            <tr><td>¿De qué personaje se cobrará el oro?</td></tr>
+            <tr><td>{t('trade.buyCharLabel')}</td></tr>
             <tr><td>
-              <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder="Selecciona un personaje" />
+              <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('trade.selectCharacter')} />
             </td></tr>
-            <tr><td><br /><PasswordInput id="password-buy" value={password} onChange={setPassword} placeholder="Contraseña de tu cuenta" maxLength={16} /></td></tr>
-            <tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder="Token de seguridad" required /></td></tr>
+            <tr><td><br /><PasswordInput id="password-buy" value={password} onChange={setPassword} placeholder={t('trade.passwordPlaceholder')} maxLength={16} /></td></tr>
+            <tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder={t('trade.tokenPlaceholder')} required /></td></tr>
             <tr><td><Turnstile onVerify={setCaptcha} /></td></tr>
-            <tr><td><button type="button" className="trade-points-check-button" disabled={busy} onClick={handleCheck}>Chequear código</button></td></tr>
-            <tr><td><button type="submit" className="trade-points-buy-button" disabled={busy}>{busy ? 'Procesando…' : 'Canjear código'}</button></td></tr>
+            <tr><td><button type="button" className="trade-points-check-button" disabled={busy} onClick={handleCheck}>{t('trade.checkButton')}</button></td></tr>
+            <tr><td><button type="submit" className="trade-points-buy-button" disabled={busy}>{busy ? t('trade.processing') : t('trade.redeemButton')}</button></td></tr>
           </tbody>
         </table>
       </form>
@@ -264,6 +269,7 @@ function BuyForm({ characters, visible }: { characters: CharOption[]; visible: b
 }
 
 export function TradePointsForm({ characters }: { characters: CharOption[] }) {
+  const t = useTranslations('Points')
   // Como el original: al cargar no se muestra ningún formulario; se revela al
   // pulsar VENTA o COMPRA.
   const [active, setActive] = useState<'sell' | 'buy' | null>(null)
@@ -272,7 +278,7 @@ export function TradePointsForm({ characters }: { characters: CharOption[] }) {
     return (
       <div className="centered">
         <br />
-        <span>No tienes personajes en esta cuenta.</span>
+        <span>{t('trade.noCharacters')}</span>
       </div>
     )
   }
@@ -287,7 +293,7 @@ export function TradePointsForm({ characters }: { characters: CharOption[] }) {
         className={`trade-option-button${active === 'sell' ? ' dnt-selected' : ''}`}
         onClick={() => setActive('sell')}
       >
-        VENTA
+        {t('trade.sellTab')}
       </button>
       <button
         type="button"
@@ -295,7 +301,7 @@ export function TradePointsForm({ characters }: { characters: CharOption[] }) {
         className={`trade-option-button${active === 'buy' ? ' dnt-selected' : ''}`}
         onClick={() => setActive('buy')}
       >
-        COMPRA
+        {t('trade.buyTab')}
       </button>
       <br />
       <SellForm characters={characters} visible={active === 'sell'} />