web-next: selector de cuenta de juego (WOW1/WOW2…) en /account

Si la Battle.net tiene más de una cuenta de juego, /account muestra un desplegable «Cargar datos de la cuenta» (WOW1, WOW2…). Al cambiar, fija la cuenta activa en la sesión vía /api/auth/select-account y refresca → toda la página (datos, personajes, servicios, compras) opera sobre la cuenta elegida (la sesión.accountId manda). Con una sola cuenta no aparece (como hasta ahora). components/GameAccountSwitcher.tsx (client) + getGameAccounts en la page. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-13 15:28:09 +00:00
parent eb0efb1af2
commit e1983eee9e
4 changed files with 72 additions and 2 deletions
@@ -0,0 +1,59 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '@/i18n/navigation'
+
+/**
+ * Desplegable para cambiar la cuenta de juego activa (WOW1, WOW2…) cuando la
+ * Battle.net tiene más de una. Al cambiar, fija la cuenta en la sesión
+ * (/api/auth/select-account) y refresca → todo /account (datos, personajes,
+ * servicios, compras…) pasa a operar sobre la cuenta seleccionada.
+ */
+export function GameAccountSwitcher({
+  accounts,
+  currentId,
+}: {
+  accounts: { id: number; index: number }[]
+  currentId: number
+}) {
+  const t = useTranslations('Account')
+  const router = useRouter()
+  const [busy, setBusy] = useState(false)
+
+  async function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
+    const id = Number(e.target.value)
+    if (id === currentId || busy) return
+    setBusy(true)
+    try {
+      const res = await fetch('/api/auth/select-account', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ accountId: id }),
+      })
+      const d = await res.json()
+      if (d.success) router.refresh()
+      else setBusy(false)
+    } catch {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="box-content">
+      <div className="body-box-content centered">
+        <p>
+          {t('switchAccountLabel')}{' '}
+          <select value={currentId} onChange={onChange} disabled={busy} aria-label={t('switchAccountLabel')}>
+            {accounts.map((a) => (
+              <option key={a.id} value={a.id}>
+                WOW{a.index}
+              </option>
+            ))}
+          </select>
+        </p>
+      </div>
+    </div>
+  )
+}