@mundogamernetwork/shared-ui 1.1.44 → 1.1.45

package/components/keys/KeyBrowser.vue

@@ -0,0 +1,550 @@
+<script setup lang="ts">
+import {
+  fetchAvailablePools,
+  fetchMyRequests,
+  fetchPlatforms,
+  requestKey as apiRequestKey,
+  revealKey as apiRevealKey,
+  type KeyPool,
+  type KeyRequest,
+  type RevealResult,
+} from '../../services/keyService'
+import { mgApiUrl } from '../../services/httpService'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  requesterContext: 'media_partner' | 'campaign_creator' | 'user'
+  accessToken?: string
+  showcaseId?: number
+  contextType?: string
+  contextId?: number
+  gameId?: number
+  /** If set, the browser will redirect here on 401 instead of building the URL automatically */
+  loginUrl?: string
+}>()
+
+const emit = defineEmits<{
+  'pools-ready': [count: number]
+}>()
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const pools = ref<KeyPool[]>([])
+const myRequests = ref<KeyRequest[]>([])
+const platforms = ref<{ id: number; name: string }[]>([])
+const loadingPools = ref(true)
+const loadingRequests = ref(true)
+const requesting = ref<number | null>(null)
+const activeTab = ref<'available' | 'mine'>('available')
+const isAuthenticated = ref(true) // assume true; set false on 401
+
+const requestForms = ref<Record<number, { platform_ids: number[]; description: string }>>({})
+const revealingId = ref<number | null>(null)
+const revealResult = ref<RevealResult | null>(null)
+
+// ─── Params ───────────────────────────────────────────────────────────────────
+
+function queryParams(): Record<string, any> {
+  const p: Record<string, any> = {}
+  if (props.accessToken) p.access_token = props.accessToken
+  if (props.showcaseId) p.showcase_id = props.showcaseId
+  if (props.contextType) p.context = props.contextType
+  if (props.contextId) p.context_id = props.contextId
+  if (props.gameId) p.game_id = props.gameId
+  if (!props.contextType && !props.gameId) p['filter[mg_platform]'] = 'MGAG'
+  return p
+}
+
+// ─── Load ─────────────────────────────────────────────────────────────────────
+
+async function loadPools() {
+  loadingPools.value = true
+  try {
+    const res = await fetchAvailablePools(queryParams())
+    pools.value = (res as any)?.data ?? []
+    pools.value.forEach(p => {
+      if (!requestForms.value[p.id]) {
+        requestForms.value[p.id] = { platform_ids: [], description: '' }
+      }
+    })
+    emit('pools-ready', pools.value.length)
+  } catch (err: any) {
+    if (err?.response?.status === 401) isAuthenticated.value = false
+    emit('pools-ready', 0)
+  } finally {
+    loadingPools.value = false
+  }
+}
+
+async function loadMyRequests() {
+  loadingRequests.value = true
+  try {
+    const res = await fetchMyRequests()
+    myRequests.value = (res as any)?.data ?? []
+  } catch (err: any) {
+    if (err?.response?.status === 401) isAuthenticated.value = false
+  } finally {
+    loadingRequests.value = false
+  }
+}
+
+async function loadPlatformsData() {
+  try {
+    const res = await fetchPlatforms()
+    platforms.value = (res as any)?.data ?? []
+  } catch {}
+}
+
+onMounted(async () => {
+  await Promise.all([loadPools(), loadMyRequests(), loadPlatformsData()])
+})
+
+// ─── Auth ─────────────────────────────────────────────────────────────────────
+
+function redirectToLogin() {
+  const url = props.loginUrl ?? mgApiUrl('login') + '?redirect_to=' + encodeURIComponent(window.location.href)
+  window.location.href = url
+}
+
+// ─── Request ──────────────────────────────────────────────────────────────────
+
+async function doRequestKey(pool: KeyPool) {
+  requesting.value = pool.id
+  try {
+    const form = requestForms.value[pool.id] ?? { platform_ids: [], description: '' }
+    const body: Record<string, any> = {
+      platform_ids: form.platform_ids,
+      description: form.description || undefined,
+    }
+    if (props.accessToken) body.access_token = props.accessToken
+    await apiRequestKey(pool.id, body)
+    pool.already_requested = true
+    await loadMyRequests()
+  } catch (err: any) {
+    if (err?.response?.status === 401) {
+      isAuthenticated.value = false
+    }
+  } finally {
+    requesting.value = null
+  }
+}
+
+function handleRequestKey(pool: KeyPool) {
+  if (!isAuthenticated.value) {
+    redirectToLogin()
+    return
+  }
+  doRequestKey(pool)
+}
+
+// ─── Reveal ───────────────────────────────────────────────────────────────────
+
+async function revealCode(reqId: number) {
+  revealingId.value = reqId
+  revealResult.value = null
+  try {
+    const body: Record<string, any> = {}
+    if (props.accessToken) body.access_token = props.accessToken
+    const res = await apiRevealKey(reqId, body)
+    revealResult.value = (res as any)?.data ?? null
+  } catch (err: any) {
+    if (err?.response?.status === 401) isAuthenticated.value = false
+  } finally {
+    revealingId.value = null
+  }
+}
+
+function closeReveal() {
+  revealResult.value = null
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function statusColor(slug: string): string {
+  return { pending: 'orange', approved: 'green', refused: 'red', cancelled: 'gray' }[slug] ?? 'gray'
+}
+</script>
+
+<template>
+  <div class="kb">
+    <!-- Auth wall -->
+    <div v-if="!isAuthenticated" class="kb__auth-wall">
+      <p>{{ $t('keys.browser.login_required') }}</p>
+      <button class="kb__login-btn" @click="redirectToLogin">
+        {{ $t('keys.browser.login_btn') }}
+      </button>
+    </div>
+
+    <template v-else>
+      <!-- Tabs -->
+      <div class="kb__tabs">
+        <button
+          class="kb__tab"
+          :class="{ 'kb__tab--active': activeTab === 'available' }"
+          @click="activeTab = 'available'"
+        >
+          {{ $t('keys.browser.tab_available') }}
+          <span class="kb__badge">{{ pools.filter(p => !p.already_requested && p.available_count > 0).length }}</span>
+        </button>
+        <button
+          class="kb__tab"
+          :class="{ 'kb__tab--active': activeTab === 'mine' }"
+          @click="activeTab = 'mine'"
+        >
+          {{ $t('keys.browser.tab_mine') }}
+          <span class="kb__badge">{{ myRequests.length }}</span>
+        </button>
+      </div>
+
+      <!-- Reveal result modal -->
+      <KeyRevealModal
+        v-if="revealResult"
+        :code="revealResult.code"
+        :platform="revealResult.platform"
+        :revealed-at="revealResult.revealed_at"
+        @close="closeReveal"
+      />
+
+      <!-- ── Available pools ── -->
+      <div v-if="activeTab === 'available'">
+        <div v-if="loadingPools" class="kb__loading">{{ $t('common.loading') }}</div>
+
+        <div v-else-if="pools.length === 0" class="kb__empty">
+          {{ $t('keys.browser.no_pools') }}
+        </div>
+
+        <div v-else class="kb__pool-grid">
+          <div
+            v-for="pool in pools"
+            :key="pool.id"
+            class="kb__pool-card"
+            :class="{ 'kb__pool-card--exhausted': pool.available_count === 0 }"
+          >
+            <div class="kb__pool-name">{{ pool.name }}</div>
+
+            <div class="kb__pool-availability">
+              <span v-if="pool.available_count > 0" class="kb__avail-ok">
+                {{ $t('keys.browser.keys_available', { n: pool.available_count }) }}
+              </span>
+              <span v-else class="kb__avail-empty">{{ $t('keys.browser.no_keys') }}</span>
+            </div>
+
+            <div v-if="!pool.already_requested && pool.available_count > 0 && platforms.length" class="kb__platform-sel">
+              <label class="kb__label">{{ $t('keys.browser.select_platform') }}</label>
+              <div class="kb__platform-chips">
+                <label
+                  v-for="p in platforms"
+                  :key="p.id"
+                  class="kb__platform-chip"
+                  :class="{ 'kb__platform-chip--active': requestForms[pool.id]?.platform_ids.includes(p.id) }"
+                >
+                  <input
+                    type="checkbox"
+                    :value="p.id"
+                    v-model="requestForms[pool.id].platform_ids"
+                    style="display:none"
+                  />
+                  {{ p.name }}
+                </label>
+              </div>
+            </div>
+
+            <div v-if="!pool.already_requested && pool.available_count > 0" class="kb__description-field">
+              <label class="kb__label">{{ $t('keys.browser.description_label') }}</label>
+              <textarea
+                v-model="requestForms[pool.id].description"
+                class="kb__textarea"
+                :placeholder="$t('keys.browser.description_placeholder')"
+                rows="2"
+              />
+            </div>
+
+            <div class="kb__pool-footer">
+              <span v-if="pool.already_requested" class="kb__requested-label">
+                ✓ {{ $t('keys.browser.already_requested') }}
+              </span>
+              <button
+                v-else
+                class="kb__request-btn"
+                :disabled="pool.available_count === 0 || requesting === pool.id"
+                @click="handleRequestKey(pool)"
+              >
+                {{ requesting === pool.id ? $t('common.sending') : $t('keys.browser.request_btn') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── My requests ── -->
+      <div v-else-if="activeTab === 'mine'">
+        <div v-if="loadingRequests" class="kb__loading">{{ $t('common.loading') }}</div>
+
+        <div v-else-if="myRequests.length === 0" class="kb__empty">
+          {{ $t('keys.browser.no_requests') }}
+        </div>
+
+        <div v-else class="kb__request-list">
+          <div v-for="req in myRequests" :key="req.id" class="kb__request-row">
+            <div class="kb__request-info">
+              <span class="kb__request-pool">{{ req.pool_name }}</span>
+              <span v-if="req.platforms?.length" class="kb__request-platform">
+                {{ req.platforms.join(', ') }}
+              </span>
+            </div>
+
+            <span
+              class="kb__status-chip"
+              :style="{ '--chip-color': `var(--${statusColor(req.status_slug)})` }"
+            >
+              {{ req.status_name || req.status_slug }}
+            </span>
+
+            <div class="kb__request-action">
+              <span v-if="req.revealed_at" class="kb__revealed-label">
+                {{ $t('keys.browser.revealed') }}
+              </span>
+              <button
+                v-else-if="req.status_slug === 'approved'"
+                class="kb__reveal-btn"
+                :disabled="revealingId === req.id"
+                @click="revealCode(req.id)"
+              >
+                {{ revealingId === req.id ? $t('common.loading') : $t('keys.browser.reveal_btn') }}
+              </button>
+              <span v-else-if="req.status_slug === 'pending'" class="kb__pending-label">
+                {{ $t('keys.browser.pending_approval') }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.kb {
+  &__auth-wall {
+    padding: 40px;
+    text-align: center;
+    color: var(--text-secondary, #888);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__login-btn {
+    padding: 10px 24px;
+    background: var(--accent, #00d4ff);
+    color: #000;
+    border: none;
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: opacity 0.15s;
+    &:hover { opacity: 0.85; }
+  }
+
+  &__tabs {
+    display: flex;
+    gap: 4px;
+    border-bottom: 1px solid var(--border-color, #2a2a2a);
+    margin-bottom: 20px;
+  }
+
+  &__tab {
+    padding: 10px 18px;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--text-secondary, #888);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.9rem;
+    transition: color 0.15s, border-color 0.15s;
+
+    &--active {
+      color: var(--text-primary, #fff);
+      border-bottom-color: var(--accent, #00d4ff);
+    }
+  }
+
+  &__badge {
+    background: var(--surface-raised, #1e1e1e);
+    border-radius: 10px;
+    padding: 2px 7px;
+    font-size: 0.75rem;
+  }
+
+  &__loading,
+  &__empty {
+    padding: 40px;
+    text-align: center;
+    color: var(--text-secondary, #888);
+    font-size: 0.9rem;
+  }
+
+  &__pool-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 14px;
+  }
+
+  &__pool-card {
+    border: 1px solid var(--border-color, #2a2a2a);
+    padding: 16px;
+    background: var(--surface-raised, #111);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    &--exhausted { opacity: 0.6; }
+  }
+
+  &__pool-name {
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: var(--text-primary, #fff);
+  }
+
+  &__pool-availability { font-size: 0.82rem; }
+  &__avail-ok { color: var(--success, #22c55e); }
+  &__avail-empty { color: var(--text-secondary, #888); }
+
+  &__platform-sel { display: flex; flex-direction: column; gap: 6px; }
+
+  &__label {
+    font-size: 0.75rem;
+    color: var(--text-secondary, #888);
+  }
+
+  &__platform-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  &__platform-chip {
+    padding: 4px 10px;
+    font-size: 0.78rem;
+    border: 1px solid var(--border-color, #2a2a2a);
+    color: var(--text-secondary, #888);
+    cursor: pointer;
+    transition: border-color 0.15s, color 0.15s;
+
+    &--active {
+      border-color: var(--accent, #00d4ff);
+      color: var(--accent, #00d4ff);
+    }
+  }
+
+  &__description-field { display: flex; flex-direction: column; gap: 4px; }
+
+  &__textarea {
+    background: var(--surface, #0a0a0a);
+    border: 1px solid var(--border-color, #2a2a2a);
+    color: var(--text-primary, #fff);
+    font-size: 0.82rem;
+    padding: 8px 10px;
+    resize: vertical;
+    width: 100%;
+    outline: none;
+    font-family: inherit;
+
+    &:focus { border-color: var(--accent, #00d4ff); }
+  }
+
+  &__pool-footer { margin-top: auto; display: flex; align-items: center; }
+
+  &__request-btn {
+    padding: 8px 16px;
+    background: var(--accent, #00d4ff);
+    color: #000;
+    border: none;
+    font-weight: 600;
+    font-size: 0.85rem;
+    cursor: pointer;
+    width: 100%;
+    transition: opacity 0.15s;
+
+    &:hover { opacity: 0.85; }
+    &:disabled { opacity: 0.4; cursor: not-allowed; }
+  }
+
+  &__requested-label {
+    font-size: 0.82rem;
+    color: var(--success, #22c55e);
+  }
+
+  &__request-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__request-row {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    align-items: center;
+    gap: 16px;
+    border: 1px solid var(--border-color, #2a2a2a);
+    padding: 12px 16px;
+    background: var(--surface-raised, #111);
+  }
+
+  &__request-info { display: flex; flex-direction: column; gap: 2px; }
+
+  &__request-pool {
+    font-weight: 500;
+    font-size: 0.9rem;
+    color: var(--text-primary, #fff);
+  }
+
+  &__request-platform {
+    font-size: 0.78rem;
+    color: var(--text-secondary, #888);
+  }
+
+  &__status-chip {
+    font-size: 0.73rem;
+    padding: 3px 10px;
+    border: 1px solid var(--chip-color, #888);
+    color: var(--chip-color, #888);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+  }
+
+  &__request-action { display: flex; align-items: center; }
+
+  &__reveal-btn {
+    padding: 7px 14px;
+    background: var(--warning-subtle, rgba(245,158,11,0.15));
+    border: 1px solid var(--warning, #f59e0b);
+    color: var(--warning, #f59e0b);
+    font-weight: 600;
+    font-size: 0.82rem;
+    cursor: pointer;
+    transition: opacity 0.15s;
+
+    &:hover { opacity: 0.8; }
+    &:disabled { opacity: 0.4; cursor: not-allowed; }
+  }
+
+  &__revealed-label {
+    font-size: 0.82rem;
+    color: var(--success, #22c55e);
+  }
+
+  &__pending-label {
+    font-size: 0.8rem;
+    color: var(--text-secondary, #888);
+    font-style: italic;
+  }
+}
+</style>

package/components/keys/KeyRevealModal.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+/**
+ * One-time key reveal modal.
+ * Shows a warning that the code will be displayed once, then shows it.
+ */
+const props = defineProps<{
+  code: string
+  platform: string | null
+  revealedAt: string
+}>()
+
+const emit = defineEmits<{ (e: 'close'): void }>()
+
+function copyCode() {
+  navigator.clipboard?.writeText(props.code)
+}
+</script>
+
+<template>
+  <div class="krm__overlay" @click.self="emit('close')">
+    <div class="krm__panel">
+      <div class="krm__icon">🔑</div>
+      <h2 class="krm__title">{{ $t('keys.reveal.title') }}</h2>
+      <p class="krm__sub">{{ $t('keys.reveal.sub') }}</p>
+
+      <div v-if="platform" class="krm__platform">{{ platform }}</div>
+
+      <div class="krm__code-box">
+        <span class="krm__code">{{ code }}</span>
+        <button class="krm__copy" @click="copyCode" :title="$t('common.copy')">
+          &#x2398;
+        </button>
+      </div>
+
+      <p class="krm__warning">{{ $t('keys.reveal.warning') }}</p>
+
+      <button class="krm__close-btn" @click="emit('close')">
+        {{ $t('common.close') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.krm {
+  &__overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  &__panel {
+    background: var(--surface, #141414);
+    border: 1px solid var(--border-color, #2a2a2a);
+    padding: 40px 32px;
+    max-width: 440px;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+  }
+
+  &__icon { font-size: 2rem; }
+
+  &__title {
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--text-primary, #fff);
+    margin: 0;
+  }
+
+  &__sub {
+    font-size: 0.88rem;
+    color: var(--text-secondary, #888);
+    margin: 0;
+  }
+
+  &__platform {
+    font-size: 0.8rem;
+    padding: 3px 12px;
+    border: 1px solid var(--accent, #00d4ff);
+    color: var(--accent, #00d4ff);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  &__code-box {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: var(--surface-raised, #1a1a1a);
+    border: 1px solid var(--border-color, #2a2a2a);
+    padding: 14px 20px;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  &__code {
+    font-family: monospace;
+    font-size: 1.05rem;
+    color: var(--success, #22c55e);
+    letter-spacing: 0.1em;
+    word-break: break-all;
+  }
+
+  &__copy {
+    background: none;
+    border: none;
+    color: var(--text-secondary, #888);
+    cursor: pointer;
+    font-size: 1.1rem;
+    padding: 4px;
+    transition: color 0.15s;
+    flex-shrink: 0;
+    &:hover { color: var(--text-primary, #fff); }
+  }
+
+  &__warning {
+    font-size: 0.78rem;
+    color: var(--warning, #f59e0b);
+    margin: 0;
+  }
+
+  &__close-btn {
+    margin-top: 6px;
+    padding: 10px 28px;
+    background: var(--surface-raised, #1e1e1e);
+    border: 1px solid var(--border-color, #2a2a2a);
+    color: var(--text-primary, #fff);
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background 0.15s;
+    &:hover { background: var(--surface-hover, #2a2a2a); }
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.1.44",
+  "version": "1.1.45",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key/[slug].vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+// Public, shareable standalone key-campaign page. Reached from broadcast links
+// (Discord/Telegram/WhatsApp) and from anywhere — no need to enter a dashboard.
+// Anyone can view; requesting a key uses KeyBrowser's hybrid auth (it redirects
+// to login on 401 and returns).
+definePageMeta({ layout: 'blank' });
+
+const route = useRoute();
+const slug = route.params.slug as string;
+
+const runtimeConfig = useRuntimeConfig();
+const cfg = (runtimeConfig.public?.mgSharedUi || {}) as Record<string, any>;
+const apiBase: string =
+	cfg.apiBaseURL ||
+	(runtimeConfig.public as any)?.apiBaseURL ||
+	'';
+
+const SUPPORTED_LOCALES = ['en', 'pt-BR', 'es', 'de', 'ro', 'ar-AE'];
+const routePath = route.path.split('/');
+const lang = SUPPORTED_LOCALES.find(l => routePath.includes(l)) || 'en';
+
+const { data: keyData, error: fetchError, pending } = await useAsyncData(
+	`public-key-${slug}`,
+	() => $fetch<any>(`${apiBase}/public/keys/${slug}`, { params: { lang } }),
+	{ lazy: false },
+);
+
+const key = computed(() => keyData.value?.data || keyData.value || null);
+const loading = pending;
+const error = computed(() => !!fetchError.value || (!pending.value && !key.value));
+
+const restriction = computed(() => {
+	const k = key.value;
+	if (!k) return '';
+	if (k.is_exclusive) return 'Exclusiva para streamers oficiais';
+	if (k.is_tier_locked && k.access_tier && k.access_tier !== 'free') return `Exclusiva para o plano ${String(k.access_tier).toUpperCase()} ou superior`;
+	if (k.streamer_type_id === 2) return 'Exclusiva para streamers oficiais';
+	if (k.streamer_type_id === 3) return 'Exclusiva para afiliados';
+	return '';
+});
+</script>
+
+<template>
+	<div class="kc">
+		<div v-if="loading" class="kc__state">Carregando…</div>
+		<div v-else-if="error" class="kc__state">Campanha não encontrada.</div>
+
+		<template v-else>
+			<div class="kc__hero">
+				<img v-if="key.cover_src" :src="key.cover_src" :alt="key.name" class="kc__cover">
+				<div class="kc__hero-body">
+					<h1 class="kc__title">{{ key.name }}</h1>
+					<div v-if="restriction" class="kc__badge">🔒 {{ restriction }}</div>
+					<div class="kc__avail">
+						<span v-if="key.available_count > 0">{{ key.available_count }} chave(s) pra resgatar</span>
+						<span v-else>Chaves esgotadas</span>
+					</div>
+				</div>
+			</div>
+
+			<div class="kc__browser">
+				<KeyBrowser
+					requester-context="user"
+					:game-id="key.game?.id || key.game_id"
+				/>
+			</div>
+		</template>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.kc {
+	max-width: 960px;
+	margin: 0 auto;
+	padding: 24px 16px 64px;
+
+	&__state {
+		padding: 80px 0;
+		text-align: center;
+		color: var(--text-secondary, #888);
+	}
+
+	&__hero {
+		display: flex;
+		gap: 20px;
+		align-items: flex-start;
+		margin-bottom: 28px;
+		flex-wrap: wrap;
+	}
+
+	&__cover {
+		width: 260px;
+		max-width: 100%;
+		height: auto;
+		object-fit: cover;
+		border: 1px solid var(--border-color, #2a2a2a);
+	}
+
+	&__hero-body { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
+
+	&__title {
+		font-size: 1.6rem;
+		font-weight: 700;
+		color: var(--text-primary, #fff);
+		margin: 0;
+	}
+
+	&__badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		width: fit-content;
+		padding: 4px 10px;
+		font-size: 0.8rem;
+		font-weight: 600;
+		color: #d297ff;
+		border: 1px solid rgba(210, 151, 255, 0.35);
+		background: rgba(210, 151, 255, 0.12);
+	}
+
+	&__avail { font-size: 0.9rem; color: var(--text-secondary, #aaa); }
+
+	&__browser { margin-top: 8px; }
+}
+</style>

package/pages/magazine/[slug]/preview.vue

@@ -52,7 +52,7 @@ const locale = useNuxtApp().$i18n.locale;
 const slug = computed(() => route.params.slug as string);
 
 const magazineStore = useMagazineStore();
-const { magazine, magazines, magazinePages } = magazineStore;
+const { magazine, magazines, magazinePages } = storeToRefs(magazineStore);
 const institutionalStore = useInstitutionalStore();
 const { language } = institutionalStore;
 
@@ -124,7 +124,7 @@ function restoreReadingProgress() {
 		return;
 	}
 
-	const totalPages = magazinePages.data?.length ?? 0;
+	const totalPages = magazinePages.value.data?.length ?? 0;
 	if (!totalPages) {
 		startPage.value = 0;
 		return;
@@ -148,15 +148,15 @@ const showDownloadGateMessage = ref("");
 
 // Flipbook pages mapped for MgnFlipbook
 const flipbookPages = computed<PageData[]>(() => {
-	if (!magazinePages.data || magazinePages.data.length === 0) return [];
-	return magazinePages.data.map((page: MagazinePage) => ({
+	if (!magazinePages.value.data || magazinePages.value.data.length === 0) return [];
+	return magazinePages.value.data.map((page: MagazinePage) => ({
 		index: page.page_number - 1,
 		thumbnailUrl: page.thumbnail_url,
 		imageUrl: page.image_url,
 		hiresUrl: page.hires_url,
 		hotspots: getMagazinePageHotspots({
 			page,
-			flipbookCode: magazine.data?.flipbook_code,
+			flipbookCode: magazine.value.data?.flipbook_code,
 		}),
 	}));
 });
@@ -164,14 +164,14 @@ const flipbookPages = computed<PageData[]>(() => {
 // Determine if lead capture modal should show
 const requiresLeadCapture = computed(() => {
 	if (leadCaptured.value) return false;
-	if (!magazinePages.meta) return false;
-	return magazinePages.meta.requires_lead || magazinePages.meta.capture_leads;
+	if (!magazinePages.value.meta) return false;
+	return magazinePages.value.meta.requires_lead || magazinePages.value.meta.capture_leads;
 });
 
 async function getMagazineData() {
 	try {
 		await magazineStore.getMagazine(slug.value);
-		status.value = magazine.status;
+		status.value = magazine.value.status;
 	} catch (error) {
 		console.error("Error fetching magazine:", error);
 	}
@@ -195,8 +195,8 @@ async function loadFlipbookPages() {
 }
 
 function downloadPdf() {
-	if (magazine.data.pdf_url_src) {
-		window.open(magazine.data.pdf_url_src, "_blank");
+	if (magazine.value.data.pdf_url_src) {
+		window.open(magazine.value.data.pdf_url_src, "_blank");
 		magazineStore.trackAnalytic(slug.value, "download");
 	}
 }
@@ -210,13 +210,13 @@ function downloadPdf() {
  */
 function handleFlipbookDownload() {
 	// Gate 1: Premium magazine - need active subscription
-	if (magazine.data.premium === true) {
+	if (magazine.value.data.premium === true) {
 		showDownloadGateMessage.value = "premium";
 		return;
 	}
 
 	// Gate 2: Non-public magazine - must be registered/signed in
-	if (magazine.data.public === false && signedIn.value === false) {
+	if (magazine.value.data.public === false && signedIn.value === false) {
 		showDownloadGateMessage.value = "signin";
 		return;
 	}
@@ -307,7 +307,7 @@ async function fetchMagazine() {
 		await magazineStore.fetchMagazine({
 			filter: {
 				status: 1,
-				edition_number: magazine.data.edition_number,
+				edition_number: magazine.value.data.edition_number,
 				platform_id: import.meta.env.VITE_SYSTEM_ID,
 			},
 			sort: "id",
@@ -331,16 +331,16 @@ async function fetchLanguage() {
 }
 
 function filterLanguages() {
-	if (magazine.data && magazines.data && magazines.data.length > 0) {
-		languageId.value = magazine.data.language.id;
-		const languageIds = magazines.data.map(
+	if (magazine.value.data && magazines.value.data && magazines.value.data.length > 0) {
+		languageId.value = magazine.value.data.language.id;
+		const languageIds = magazines.value.data.map(
 			(item: MagazineItem) => item.language.id,
 		);
 		languages.value = language.data.filter((language: LanguageItem) =>
 			languageIds.includes(language.id),
 		);
 		languages.value.forEach((language: LanguageItem) => {
-			const magazineItem = magazines.data.find(
+			const magazineItem = magazines.value.data.find(
 				(item: MagazineItem) => item.language.id === language.id,
 			);
 			if (magazineItem) {

package/pages/presskit/[slug].vue

@@ -68,6 +68,11 @@ const tpl = computed(() => kit.value?.theme || null);
 const layout = computed(() => kit.value?.layout || 'classic');
 const allowDownload = computed(() => kit.value?.allow_asset_download !== false);
 
+const keyPoolsVisible = ref(false);
+function onPoolsReady(count: number) {
+	keyPoolsVisible.value = count > 0;
+}
+
 const socials = computed(() => {
 	const s = kit.value?.social_links || {};
 	return Object.entries(s).filter(([, v]) => v).map(([k, v]) => ({ platform: k, url: v as string }));
@@ -255,11 +260,22 @@ useHead(() => ({
 							</div>
 						</section>
 
+						<!-- Key pools embed — shown when game has active pools -->
+						<section v-if="kit.game_id" v-show="keyPoolsVisible" class="kit-block kit-keys-section">
+							<h2 class="kit-keys-title">{{ $t('kit.press.get_key_title') }}</h2>
+							<p class="kit-keys-desc">{{ $t('kit.press.get_key_desc') }}</p>
+							<KeyBrowser
+								requester-context="user"
+								:game-id="kit.game_id"
+								@pools-ready="onPoolsReady"
+							/>
+						</section>
+
 						<section v-if="kit.press_contact_email" class="kit-block">
 							<div class="kit-cta">
 								<h2>{{ $t('kit.press.covering', { name: kit.name }) }}</h2>
 								<p>{{ $t('kit.press.cta_text') }}</p>
-								<a class="kit-btn kit-btn-primary" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
+								<a class="kit-btn kit-btn-primary" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.contact_btn') }}</a>
 							</div>
 						</section>
 

package/plugins/echo.client.ts

@@ -55,7 +55,7 @@ export default defineNuxtPlugin({
 				authorize: (socketId: any, callback: any) => {
 					axios
 						.post(
-							import.meta.env.VITE_PUSHER_AUTH,
+							(import.meta.env.VITE_PUSHER_AUTH ?? '').replace(/^["']|["']$/g, ''),
 							{
 								socket_id: socketId,
 								channel_name: channel.name,

package/services/keyService.ts

@@ -0,0 +1,45 @@
+import httpService from './httpService'
+
+export type KeyPool = {
+  id: number
+  name: string
+  slug: string
+  access_policy: string
+  available_count: number
+  already_requested: boolean
+  game: { id: number; name: string } | null
+  cover: string | null
+}
+
+export type KeyRequest = {
+  id: number
+  pool_id: number
+  pool_name: string
+  pool_slug: string
+  status_slug: string
+  status_name: string
+  platforms: string[]
+  revealed_at: string | null
+  created_at: string
+}
+
+export type RevealResult = {
+  code: string
+  platform: string | null
+  revealed_at: string
+}
+
+export const fetchAvailablePools = (params: Record<string, any> = {}) =>
+  httpService.get<{ data: KeyPool[] }>('/key-pools/available', { params })
+
+export const fetchMyRequests = () =>
+  httpService.get<{ data: KeyRequest[] }>('/key-requests/mine')
+
+export const requestKey = (poolId: number, body: Record<string, any>) =>
+  httpService.post(`/key-pools/${poolId}/request`, body)
+
+export const revealKey = (requestId: number, body: Record<string, any> = {}) =>
+  httpService.post<{ data: RevealResult }>(`/key-requests/${requestId}/reveal`, body)
+
+export const fetchPlatforms = () =>
+  httpService.get<{ data: { id: number; name: string }[] }>('/showcase-studio-dashboard/platforms')