@mundogamernetwork/shared-ui 1.1.82 → 1.1.84

package/locales/de.json

@@ -135,7 +135,8 @@
         "no_data": "Campaign not found",
         "title": "Kampagne",
         "about": "Über das Spiel",
-        "screenshot_alt": "Spiel-Screenshot"
+        "screenshot_alt": "Spiel-Screenshot",
+        "see_all": "alle anzeigen"
       },
       "other_campaigns": "Andere Kampagnen",
       "available": "verfügbar",
@@ -184,7 +185,23 @@
       "status_completed": "Anfrage abgeschlossen",
       "status_refused": "Anfrage abgelehnt",
       "status_cancelled": "Anfrage storniert",
-      "refused_reason": "Grund der Ablehnung:"
+      "refused_reason": "Grund der Ablehnung:",
+      "good": "Super!",
+      "good_text": "Du hast einen Code zum Einlösen erhalten",
+      "approved_subtitle": "Folge den Schritten und löse deinen Schlüssel ein.",
+      "cody_text": "Der Code kann nur einmal eingelöst werden und läuft nach Ende des Angebots ab",
+      "redeem_description_1": "Öffne die Website oder App der entsprechenden Plattform (Steam, PlayStation, Xbox usw.) und melde dich bei deinem Konto an.",
+      "redeem_description_2": "Gehe zur Option „Code einlösen“, füge den kopierten Code ein und schließe den Vorgang ab.",
+      "redeem_description_3": "Der Inhalt wird auf deinem Konto aktiviert.",
+      "redeem_at": "Auf {platform} einlösen",
+      "no_redeemers": "Noch niemand hat diese Kampagne eingelöst.",
+      "required_fields": "Bitte alle Pflichtfelder ausfüllen",
+      "plan": "Deckungspläne",
+      "plan_placeholder": "Beschreibe deinen Berichterstattungsplan: wo du über das Spiel streamen oder posten wirst, dein Publikum und das geplante Veröffentlichungsdatum",
+      "resources_title": "Ressourcen",
+      "press_kit_link": "Presse-Kit",
+      "review_guideline": "Review-Richtlinie",
+      "embargo_date": "Sperrfrist"
     },
     "materials": {
       "title": "Submit material",

package/locales/en.json

@@ -135,7 +135,8 @@
         "no_data": "Campaign not found",
         "title": "Campaign",
         "about": "About the game",
-        "screenshot_alt": "Game screenshot"
+        "screenshot_alt": "Game screenshot",
+        "see_all": "see all"
       },
       "other_campaigns": "Other campaigns",
       "available": "available",
@@ -184,7 +185,23 @@
       "status_completed": "Request completed",
       "status_refused": "Request refused",
       "status_cancelled": "Request cancelled",
-      "refused_reason": "Reason for refusal:"
+      "refused_reason": "Reason for refusal:",
+      "good": "Nice!",
+      "good_text": "You received a code to redeem",
+      "approved_subtitle": "Follow the steps and redeem your key.",
+      "cody_text": "The code can only be redeemed once and expires after the offer ends",
+      "redeem_description_1": "Open the website or app of the corresponding platform (Steam, PlayStation, Xbox, etc.) and log in to your account.",
+      "redeem_description_2": "Go to the 'Redeem code' option, paste the copied code, and complete the process.",
+      "redeem_description_3": "The content will be activated on your account.",
+      "redeem_at": "Redeem on {platform}",
+      "no_redeemers": "No one has redeemed this campaign yet.",
+      "required_fields": "Please fill in all required fields",
+      "plan": "Coverage plans",
+      "plan_placeholder": "Describe your coverage plan: where you will stream or post about this game, your audience, and expected publish date",
+      "resources_title": "Resources",
+      "press_kit_link": "Press Kit",
+      "review_guideline": "Review guideline",
+      "embargo_date": "Embargo date"
     },
     "materials": {
       "title": "Submit material",

package/locales/pt-BR.json

@@ -135,7 +135,8 @@
         "no_data": "Campaign not found",
         "title": "Campanha",
         "about": "Sobre o jogo",
-        "screenshot_alt": "Captura de tela do jogo"
+        "screenshot_alt": "Captura de tela do jogo",
+        "see_all": "ver todos"
       },
       "other_campaigns": "Outras campanhas",
       "available": "disponível",
@@ -184,7 +185,23 @@
       "status_completed": "Solicitação concluída",
       "status_refused": "Solicitação recusada",
       "status_cancelled": "Solicitação cancelada",
-      "refused_reason": "Motivo da recusa:"
+      "refused_reason": "Motivo da recusa:",
+      "good": "Boa!",
+      "good_text": "Você recebeu um código para resgatar",
+      "approved_subtitle": "Siga as etapas e resgate sua chave.",
+      "cody_text": "O código só pode ser resgatado uma vez e expira após o término da oferta",
+      "redeem_description_1": "Abra o site ou app da plataforma correspondente (Steam, PlayStation, Xbox, etc.) e faça login na sua conta.",
+      "redeem_description_2": " Vá até a opção “Resgatar código”, cole o código copiado e finalize.",
+      "redeem_description_3": "O conteúdo será ativado na sua conta.",
+      "redeem_at": "Resgatar em {platform}",
+      "no_redeemers": "Nenhum criador resgatou esta campanha ainda.",
+      "required_fields": "Por favor, preencha todos os campos obrigatórios",
+      "plan": " Planos de cobertura",
+      "plan_placeholder": "Descreva seu plano de cobertura: onde vai fazer stream ou publicar sobre o jogo, seu público e a data prevista de publicação",
+      "resources_title": "Recursos",
+      "press_kit_link": "Press Kit",
+      "review_guideline": "Diretriz de review",
+      "embargo_date": "Data de embargo"
     },
     "materials": {
       "title": "Submit material",

package/locales/ro.json

@@ -135,7 +135,8 @@
         "no_data": "Campaign not found",
         "title": "Campanie",
         "about": "Despre joc",
-        "screenshot_alt": "Captură de ecran a jocului"
+        "screenshot_alt": "Captură de ecran a jocului",
+        "see_all": "vezi toate"
       },
       "other_campaigns": "Alte campanii",
       "available": "disponibil",
@@ -184,7 +185,23 @@
       "status_completed": "Cerere finalizată",
       "status_refused": "Cerere refuzată",
       "status_cancelled": "Cerere anulată",
-      "refused_reason": "Motivul refuzului:"
+      "refused_reason": "Motivul refuzului:",
+      "good": "Super!",
+      "good_text": "Ai primit un cod de revendicare",
+      "approved_subtitle": "Urmează pașii și revendică-ți cheia.",
+      "cody_text": "Codul poate fi folosit o singură dată și expiră la finalul ofertei",
+      "redeem_description_1": "Deschide site-ul sau aplicația platformei corespunzătoare (Steam, PlayStation, Xbox etc.) și autentifică-te în contul tău.",
+      "redeem_description_2": "Accesează opțiunea „Redeem code”, lipește codul copiat și finalizează procesul.",
+      "redeem_description_3": "Conținutul va fi activat în contul tău.",
+      "redeem_at": "Revendică pe {platform}",
+      "no_redeemers": "Nimeni nu a revendicat această campanie încă.",
+      "required_fields": "Vă rugăm să completați toate câmpurile obligatorii",
+      "plan": "Planuri de acoperire",
+      "plan_placeholder": "Descrie planul tău de acoperire: unde vei face stream sau vei posta despre joc, publicul tău și data estimată de publicare",
+      "resources_title": "Resurse",
+      "press_kit_link": "Press Kit",
+      "review_guideline": "Ghid de recenzie",
+      "embargo_date": "Data embargo"
     },
     "materials": {
       "title": "Submit material",

package/package.json

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

package/pages/key-campaigns/[slug].vue

@@ -10,7 +10,7 @@ import {
 	revealKey,
 	requestKey,
 } from "../../services/campaignService"
-import { fetchDetailGameImage } from "../../services/gamesService"
+import { fetchDetailGame, fetchDetailGameImage } from "../../services/gamesService"
 
 // Injected by each front — provide in app.vue / a plugin
 const mgPlatform = inject<string>("mgPlatform", "MGTV")
@@ -136,6 +136,20 @@ const { data: gameDetailsImages } = await useAsyncData(
 	{ watch: [campaign] },
 )
 
+const { data: gameDetails } = await useAsyncData(
+	`campaign-game-detail-${slug}`,
+	async () => {
+		if (!campaign.value?.game_slug) return null
+		try {
+			const response = await fetchDetailGame(locale.value, campaign.value.game_slug)
+			return response.data.data || null
+		} catch {
+			return null
+		}
+	},
+	{ watch: [campaign] },
+)
+
 const showVideoModal = ref(false)
 const selectedVideoUrl = ref("")
 const showImageModal = ref(false)
@@ -590,7 +604,9 @@ onMounted(async () => {
 				</div>
 			</div>
 
-			<div class="content-key">
+			<div v-if="!campaign" class="state error">{{ $t("keys.campaigns.error_loading") }}</div>
+
+			<div v-else class="content-key">
 				<div class="content-key-header">
 					<h4>{{ campaign?.name }}</h4>
 
@@ -600,6 +616,17 @@ onMounted(async () => {
 							{{ b }}
 						</div>
 					</div>
+
+					<div class="tags-items" v-if="gameDetails?.platforms?.length">
+						<div class="tag" v-for="platform in gameDetails.platforms" :key="platform.id">
+							{{ platform.name }}
+						</div>
+					</div>
+					<div class="tags-items" v-if="gameDetails?.genres?.length">
+						<div class="tag" v-for="genre in gameDetails.genres" :key="genre.id">
+							{{ genre.localized_name }}
+						</div>
+					</div>
 				</div>
 
 				<!-- Cover when no game details -->
@@ -804,6 +831,36 @@ onMounted(async () => {
 									<span>+{{ redeemedUsers?.total ?? 0 }}</span>
 									{{ $t("keys.campaigns.creators") }}
 								</div>
+								<div class="see" v-if="(redeemedUsers?.users?.length ?? 0) > 0" @click="showUsersModal = true">
+									{{ $t("keys.campaigns.campaign.see_all") }}
+								</div>
+							</div>
+						</div>
+
+						<div class="users-modal" v-if="showUsersModal" @click.self="showUsersModal = false">
+							<div class="users-modal-content">
+								<div class="users-modal-header">
+									<span>{{ $t("keys.campaigns.campaign.who_redeem") }}</span>
+									<button class="close-button" @click="showUsersModal = false">
+										<MGIcon size="1x" icon="close" />
+									</button>
+								</div>
+								<div class="users-modal-body">
+									<div
+										v-if="!redeemedUsers?.users?.length"
+										class="users-modal-empty"
+									>
+										{{ $t("keys.campaigns.no_redeemers") }}
+									</div>
+									<div v-for="(u, index) in redeemedUsers?.users" :key="index" class="users-modal-row">
+										<img
+											:src="u.avatar_url || '/imgs/avatar-default.jpg'"
+											:alt="u.nickname"
+											@error="(e: Event) => { const t = e.target as HTMLImageElement; if (t && t.src !== '/imgs/avatar-default.jpg') t.src = '/imgs/avatar-default.jpg' }"
+										/>
+										<span>{{ u.nickname || `${u.first_name || ''} ${u.last_name || ''}`.trim() }}</span>
+									</div>
+								</div>
 							</div>
 						</div>
 
@@ -976,6 +1033,13 @@ onMounted(async () => {
 		img { width: 100%; height: 400px; object-fit: cover; object-position: center top; }
 	}
 
+	.state.error {
+		padding: 64px 0;
+		text-align: center;
+		font-size: 14px;
+		color: var(--danger, #e53935);
+	}
+
 	.content-key {
 		display: flex;
 		flex-direction: column;
@@ -1008,6 +1072,24 @@ onMounted(async () => {
 					i { font-size: 13px; }
 				}
 			}
+
+			.tags-items {
+				display: flex;
+				gap: 4px;
+				flex-flow: wrap;
+
+				.tag {
+					height: 32px;
+					display: flex;
+					font-size: 12px;
+					color: var(--secondary-info-fg);
+					font-weight: 400;
+					background-color: var(--button-secondary-default-bg);
+					justify-content: center;
+					padding: 12px;
+					align-items: center;
+				}
+			}
 		}
 
 		.cards {
@@ -1306,6 +1388,70 @@ onMounted(async () => {
 							width: -webkit-fill-available;
 							span { font-size: 16px; color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); font-weight: 600; }
 						}
+
+						.see {
+							font-size: 12px;
+							color: var(--key-accent, var(--primary, #D297FF));
+							cursor: pointer;
+							text-decoration: underline;
+							white-space: nowrap;
+						}
+					}
+
+					.users-modal {
+						position: fixed;
+						inset: 0;
+						z-index: 1000;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						background: var(--overlay-dark-strong, rgba(0, 0, 0, 0.75));
+
+						.users-modal-content {
+							width: 100%;
+							max-width: 360px;
+							max-height: 70vh;
+							background: var(--button-secondary-default-bg);
+							display: flex;
+							flex-direction: column;
+						}
+
+						.users-modal-header {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							padding: 16px;
+							font-size: 14px;
+							font-weight: 600;
+							color: var(--card-article-title);
+							border-bottom: 1px solid var(--bg-app-badge);
+
+							.close-button { background: transparent; border: none; color: var(--secondary-info-fg); cursor: pointer; }
+						}
+
+						.users-modal-body {
+							overflow-y: auto;
+							padding: 8px 16px;
+						}
+
+						.users-modal-empty {
+							padding: 24px 0;
+							text-align: center;
+							font-size: 13px;
+							color: var(--secondary-info-fg);
+						}
+
+						.users-modal-row {
+							display: flex;
+							align-items: center;
+							gap: 10px;
+							padding: 10px 0;
+							border-bottom: 1px solid var(--bg-app-badge);
+							&:last-child { border-bottom: none; }
+
+							img { width: 36px; height: 36px; border-radius: 0; }
+							span { font-size: 13px; color: var(--card-article-title); }
+						}
 					}
 
 					.company {

package/pages/key-campaigns/index.vue

@@ -267,7 +267,11 @@
 							</div>
 						</div>
 
-						<div v-if="!loading && filteredCards.length === 0" class="d-flex flex-column align-items-center">
+						<div v-if="!loading && loadError" class="d-flex flex-column align-items-center">
+							<div class="no-content"><MGIcon icon="eye-slash" /></div>
+							<h4>{{ $t("keys.campaigns.error_loading") }}</h4>
+						</div>
+						<div v-else-if="!loading && filteredCards.length === 0" class="d-flex flex-column align-items-center">
 							<div class="no-content"><MGIcon icon="eye-slash" /></div>
 							<h4>{{ $t("keys.campaigns.no_results") }}</h4>
 						</div>
@@ -364,6 +368,7 @@ let slideInterval: ReturnType<typeof setInterval> | null = null
 const loading = ref(true)
 const loadingFeatured = ref(true)
 const loadingRequests = ref(false)
+const loadError = ref(false)
 
 // ------------------------------------------------------------------
 // Filters
@@ -556,9 +561,11 @@ async function loadCampaigns(page = 1) {
 		}
 
 		currentPage.value = page
+		loadError.value = false
 		applyUserRequestStatuses()
 	} catch {
 		hasMoreItems.value = false
+		if (page === 1) loadError.value = true
 	} finally {
 		loading.value = false
 		loadingMore.value = false

package/pages/key-campaigns/redeem-key-approved.vue

@@ -20,6 +20,31 @@ const keyCode = ref<string | null>(null)
 const error = ref("")
 const requestData = ref<any>(null)
 const copied = ref(false)
+const platform = ref("")
+
+// Maps a platform name to its official key-activation page.
+const REDEEM_URLS: Record<string, string> = {
+	steam: "https://store.steampowered.com/account/registerkey",
+	playstation: "https://store.playstation.com/redeem",
+	"playstation 4": "https://store.playstation.com/redeem",
+	"playstation 5": "https://store.playstation.com/redeem",
+	xbox: "https://redeem.microsoft.com",
+	"xbox one": "https://redeem.microsoft.com",
+	"xbox series x/s": "https://redeem.microsoft.com",
+	"pc (microsoft windows)": "https://store.steampowered.com/account/registerkey",
+	epic: "https://store.epicgames.com/redeem",
+	"epic games": "https://store.epicgames.com/redeem",
+	gog: "https://www.gog.com/redeem",
+	nintendo: "https://ecommerce.nintendo.com/redeem",
+	"nintendo switch": "https://ecommerce.nintendo.com/redeem",
+	"google stadia": "https://stadia.google.com/redeem",
+}
+
+const redeemUrl = computed(() => {
+	const key = (platform.value || "").trim().toLowerCase()
+	if (!key) return ""
+	return REDEEM_URLS[key] || ""
+})
 
 onMounted(async () => {
 	if (!currentUser) {
@@ -34,6 +59,9 @@ onMounted(async () => {
 	try {
 		const res = await fetchKeyRequestById(requestId)
 		requestData.value = res?.data?.data || res?.data || null
+		// Platform the user chose at request time — shown as a fallback/preview
+		// even before reveal, in case the assigned key item has no platform set.
+		platform.value = requestData.value?.platforms?.[0]?.name || ""
 	} catch {
 		error.value = $i18n.t("keys.campaigns.error_loading")
 	} finally {
@@ -47,7 +75,10 @@ async function reveal() {
 	try {
 		const res = await revealKey(requestId)
 		const data = res?.data?.data || res?.data || null
-		keyCode.value = data?.key || data?.code || data?.value || null
+		keyCode.value = data?.code || (typeof data?.key === "string" ? data.key : null) || data?.value || null
+		// Keep the pre-reveal platform (chosen at request time) as fallback if the
+		// revealed item has no platform of its own.
+		platform.value = data?.platform || data?.platforms?.[0]?.name || platform.value
 		if (!keyCode.value) {
 			error.value = $i18n.t("keys.campaigns.error_reveal")
 		}
@@ -76,6 +107,13 @@ async function copyCode() {
 	}
 }
 
+function formatDate(dateString: string | null | undefined): string {
+	if (!dateString) return "-"
+	const date = new Date(dateString)
+	if (isNaN(date.getTime())) return "-"
+	return new Intl.DateTimeFormat(locale.value, { day: "numeric", month: "long", year: "numeric" }).format(date)
+}
+
 function goBack() {
 	if (typeof window !== "undefined" && window.history.length > 1) {
 		window.history.back()
@@ -103,49 +141,98 @@ function goBack() {
 
 			<div v-else class="content">
 				<div class="title-bar">
-					<MGIcon icon="version" size="2x" class="title-icon" />
-					<div>
-						<h3>{{ $t("keys.campaigns.status_key.reveal_key") }}</h3>
-						<p v-if="requestData?.key?.name" class="campaign-name">{{ requestData.key.name }}</p>
-					</div>
-				</div>
-
-				<!-- Key not yet revealed -->
-				<div v-if="!keyCode" class="reveal-block">
-					<p class="hint">{{ $t("keys.campaigns.reveal_hint") }}</p>
-					<button
-						class="btn"
-						:class="{ disabled: revealing }"
-						:disabled="revealing"
-						@click="reveal"
-					>
-						{{ revealing ? $t("keys.campaigns.revealing") : $t("keys.campaigns.status_key.reveal_key") }}
-					</button>
-					<div v-if="error" class="req-error">{{ error }}</div>
+					<h3>
+						<span class="accent-text">{{ $t("keys.campaigns.good") }}</span>
+						{{ $t("keys.campaigns.good_text") }}
+						<span class="accent-text">{{ currentUser?.nickname || currentUser?.name }}</span>
+					</h3>
+					<p class="description">{{ $t("keys.campaigns.approved_subtitle") }}</p>
+					<p v-if="requestData?.key?.name" class="campaign-name">{{ requestData.key.name }}</p>
+					<p v-if="platform" class="platform-name">{{ $t("keys.campaigns.platform") }}: {{ platform }}</p>
 				</div>
 
-				<!-- Key revealed -->
-				<div v-else class="key-block">
-					<div class="key-label">{{ $t("keys.campaigns.your_key") }}</div>
-					<div class="key-code-row">
-						<span class="key-code">{{ keyCode }}</span>
-						<button class="copy-btn" @click="copyCode">
-							<MGIcon :icon="copied ? 'check' : 'copy'" size="1x" />
-							{{ copied ? $t("keys.campaigns.copied") : $t("keys.campaigns.copy") }}
-						</button>
-					</div>
-					<p class="redeem-info">{{ $t("keys.campaigns.redeem_on_platform") }}</p>
-				</div>
-
-				<!-- Request info -->
-				<div v-if="requestData" class="info-grid">
-					<div class="info-row" v-if="requestData.status_request?.name">
-						<span class="info-label">{{ $t("keys.campaigns.status_label") }}</span>
-						<span class="info-val">{{ requestData.status_request.name }}</span>
-					</div>
-					<div class="info-row" v-if="requestData.key?.name">
-						<span class="info-label">{{ $t("keys.campaigns.campaign.title") }}</span>
-						<span class="info-val">{{ requestData.key.name }}</span>
+				<div class="cards">
+					<div class="side">
+						<div class="code-list">
+							<div class="code">
+								<div class="number">1</div>
+								<div class="texts">
+									<div class="code-box" v-if="!keyCode">
+										<input type="text" value="••••••••••••••••" readonly class="code-masked" />
+										<button class="btn" :class="{ disabled: revealing }" :disabled="revealing" @click="reveal">
+											{{ revealing ? $t("keys.campaigns.revealing") : $t("keys.campaigns.status_key.reveal_key") }}
+										</button>
+									</div>
+
+									<div class="code-box" v-else>
+										<input type="text" :value="keyCode" readonly class="code-value" />
+										<button class="btn" @click="copyCode">
+											<MGIcon :icon="copied ? 'check' : 'copy'" size="1x" />
+											{{ copied ? $t("keys.campaigns.copied") : $t("keys.campaigns.copy") }}
+										</button>
+									</div>
+
+									<div v-if="error" class="req-error">{{ error }}</div>
+
+									<div class="info">
+										<MGIcon size="1x" icon="version" />
+										{{ $t("keys.campaigns.cody_text") }}
+									</div>
+								</div>
+							</div>
+
+							<div class="code">
+								<div class="number">2</div>
+								<div class="texts">
+									<div class="description">{{ $t("keys.campaigns.redeem_description_1") }}</div>
+									<a
+										v-if="keyCode && redeemUrl"
+										:href="redeemUrl"
+										target="_blank"
+										rel="noopener"
+										class="btn redeem-link"
+									>
+										{{ $t("keys.campaigns.redeem_at", { platform }) }}
+									</a>
+								</div>
+							</div>
+
+							<div class="code">
+								<div class="number">3</div>
+								<div class="texts">
+									<div class="description">
+										{{ $t("keys.campaigns.redeem_description_2") }}
+										<br />
+										{{ $t("keys.campaigns.redeem_description_3") }}
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="resources" v-if="requestData?.key?.press_kit_link || requestData?.key?.review_guideline || requestData?.key?.embargo_date">
+							<div class="resources-title">{{ $t("keys.campaigns.resources_title") }}</div>
+
+							<a
+								v-if="requestData?.key?.press_kit_link"
+								:href="requestData.key.press_kit_link"
+								target="_blank"
+								rel="noopener"
+								class="resource-link"
+							>
+								<MGIcon size="1x" icon="link" />
+								{{ $t("keys.campaigns.press_kit_link") }}
+							</a>
+
+							<div v-if="requestData?.key?.review_guideline" class="resource-item">
+								<div class="resource-label">{{ $t("keys.campaigns.review_guideline") }}</div>
+								<div class="resource-text">{{ requestData.key.review_guideline }}</div>
+							</div>
+
+							<div v-if="requestData?.key?.embargo_date" class="resource-item">
+								<div class="resource-label">{{ $t("keys.campaigns.embargo_date") }}</div>
+								<div class="resource-text">{{ formatDate(requestData.key.embargo_date) }}</div>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -196,119 +283,153 @@ function goBack() {
 		& + & { margin-top: 8px; }
 	}
 
-	.content { display: flex; flex-direction: column; gap: 28px; }
+	.content { display: flex; flex-direction: column; gap: 42px; }
 
 	.title-bar {
-		display: flex;
-		align-items: flex-start;
-		gap: 14px;
-		.title-icon { color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); margin-top: 2px; }
-		h3 { font-size: 20px; font-weight: 700; color: var(--card-article-title); margin: 0 0 4px; }
-		.campaign-name { font-size: 13px; color: var(--secondary-info-fg); margin: 0; }
+		h3 {
+			font-size: 24px;
+			font-weight: 700;
+			color: var(--card-article-title);
+			margin: 0 0 8px;
+		}
+		.accent-text { color: var(--key-accent, var(--primary, #D297FF)); }
+		.description { font-size: 14px; color: var(--secondary-info-fg); margin: 0; }
+		.campaign-name { font-size: 13px; font-weight: 600; color: var(--card-article-title); margin: 4px 0 0; }
+		.platform-name { font-size: 12px; color: var(--secondary-info-fg); margin: 2px 0 0; }
 	}
 
-	.reveal-block {
+	.cards {
 		display: flex;
-		flex-direction: column;
-		gap: 16px;
-		padding: 24px;
-		background: var(--bg-app-badge);
-		border: 1px solid var(--button-secondary-default-bg);
-
-		.hint { font-size: 14px; color: var(--secondary-info-fg); margin: 0; }
+		width: 100%;
 	}
 
-	.key-block {
+	.side {
 		display: flex;
 		flex-direction: column;
-		gap: 12px;
-		padding: 24px;
-		background: var(--bg-app-badge);
-		border: 1px solid var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
+		gap: 42px;
 	}
 
-	.key-label {
-		font-size: 12px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: var(--secondary-info-fg);
+	.code-list {
+		display: flex;
+		flex-direction: column;
+		gap: 42px;
 	}
 
-	.key-code-row {
+	.code {
 		display: flex;
 		align-items: center;
-		gap: 12px;
-		flex-wrap: wrap;
-	}
+		gap: 24px;
+
+		.number {
+			display: flex;
+			width: 80px;
+			height: 80px;
+			padding: 24px;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			background-color: var(--button-secondary-default-bg);
+			color: var(--key-accent, var(--primary, #D297FF));
+			text-align: center;
+			font-size: 28px;
+			font-weight: 700;
+			flex-shrink: 0;
+		}
 
-	.key-code {
-		font-size: 20px;
-		font-weight: 700;
-		font-family: monospace;
-		letter-spacing: 2px;
-		color: var(--card-article-title);
-		word-break: break-all;
-	}
+		.texts {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+		}
 
-	.copy-btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 6px 14px;
-		font-size: 13px;
-		font-weight: 600;
-		background: transparent;
-		border: 1px solid var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
-		color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
-		cursor: pointer;
-		transition: background 0.15s;
-		&:hover { background: var(--key-accent-subtle-bg, rgba(210, 151, 255, 0.1)); }
-	}
+		.code-box {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			width: 100%;
+
+			input {
+				display: flex;
+				padding: 12px;
+				background-color: transparent;
+				height: 48px;
+				border: 1px solid var(--bg-app-badge);
+				width: 100%;
+				font-size: 16px;
+				color: var(--secondary-info-fg);
+				&:focus { border-color: var(--key-accent, var(--primary, #D297FF)); outline: 0; }
+			}
+
+			button {
+				background-color: var(--key-accent, var(--primary, #D297FF));
+				color: var(--key-accent-ink, #13161C);
+				height: 48px;
+				padding: 0 16px;
+				border: none;
+				cursor: pointer;
+				white-space: nowrap;
+				display: inline-flex;
+				align-items: center;
+				gap: 6px;
+				&.disabled, &:disabled { opacity: 0.45; cursor: not-allowed; }
+			}
+		}
 
-	.redeem-info {
-		font-size: 12px;
-		color: var(--secondary-info-fg);
-		margin: 0;
-	}
+		.code-masked { letter-spacing: 3px; color: rgba(128, 128, 128, 0.5) !important; }
 
-	.req-error { font-size: 13px; color: var(--danger, #e53935); }
+		.info {
+			display: flex;
+			align-items: flex-end;
+			gap: 4px;
+			font-size: 12px;
+			color: var(--secondary-info-fg);
+			svg { color: var(--key-accent, var(--primary, #D297FF)); }
+		}
 
-	.info-grid {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		padding-top: 8px;
-		border-top: 1px solid var(--button-secondary-default-bg);
+		.description {
+			font-size: 12px;
+			color: var(--secondary-info-fg);
+		}
+
+		.redeem-link {
+			display: inline-flex;
+			width: fit-content;
+			margin-top: 8px;
+			padding: 8px 14px;
+			background: var(--key-accent, var(--primary, #D297FF));
+			color: var(--key-accent-ink, #13161C);
+			font-size: 13px;
+			text-decoration: none;
+		}
 	}
 
-	.info-row {
+	.req-error { font-size: 12px; color: var(--danger, #e53935); margin-top: 4px; }
+
+	.resources {
 		display: flex;
+		flex-direction: column;
 		gap: 12px;
-		font-size: 13px;
+		padding: 20px;
+		background: var(--bg-app-badge);
+		border: 1px solid var(--button-secondary-default-bg);
 	}
 
-	.info-label {
-		color: var(--secondary-info-fg);
-		min-width: 100px;
-	}
+	.resources-title { font-size: 13px; font-weight: 600; color: var(--card-article-title); }
 
-	.info-val { color: var(--card-article-title); }
-
-	.btn {
-		align-self: flex-start;
-		padding: 0 28px;
-		height: 44px;
-		font-size: 14px;
-		font-weight: 700;
-		background: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
-		color: var(--key-accent-ink, #13161C);
-		border: none;
-		cursor: pointer;
-		transition: opacity 0.15s;
-		&.disabled, &:disabled { opacity: 0.45; cursor: not-allowed; }
-		&:not(.disabled):hover { opacity: 0.85; }
+	.resource-link {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		width: fit-content;
+		font-size: 13px;
+		color: var(--key-accent, var(--primary, #D297FF));
+		text-decoration: none;
+		&:hover { text-decoration: underline; }
 	}
+
+	.resource-item { display: flex; flex-direction: column; gap: 2px; }
+	.resource-label { font-size: 12px; font-weight: 600; color: var(--card-article-title); }
+	.resource-text { font-size: 13px; color: var(--secondary-info-fg); }
 }
 
 @keyframes pulse {

package/pages/key-campaigns/redeem-key.vue

@@ -71,9 +71,7 @@ onMounted(async () => {
 	}
 })
 
-const canSubmit = computed(() =>
-	!!selectedPlatformId.value && !!selectedRegionId.value && !!quantity.value && !submitting.value,
-)
+const canSubmit = computed(() => !submitting.value)
 
 // Collapsible "Required data" box — matches tv's original toggle behavior
 const isBoxOpen = ref(true)
@@ -104,16 +102,30 @@ const refusedReason = computed(() => campaign.value?.request_admin_notes || "")
 
 async function submit() {
 	if (!canSubmit.value) return
-	submitting.value = true
 	requestError.value = ""
+	if (!selectedPlatformId.value || !selectedRegionId.value || !quantity.value || !description.value?.trim()) {
+		requestError.value = $i18n.t("keys.campaigns.required_fields")
+		return
+	}
+	submitting.value = true
 	try {
-		await requestKey({
+		const response = await requestKey({
 			key_id: keyId,
 			platform_ids: [selectedPlatformId.value],
 			region_ids: [selectedRegionId.value],
 			description: description.value || "-",
 			quantity_keys: Number(quantity.value) || 1,
 		})
+		const created = response?.data?.data ?? response?.data ?? {}
+		// requires_approval=false campaigns (or Pro/Business TV subscribers) get
+		// auto-approved by the backend observer synchronously — status 3 already
+		// reflects that by the time this response comes back, so skip the
+		// "request sent" wait screen and go straight to reveal.
+		const autoApproved = created.key_status_request_id === 3
+		if (autoApproved && created.id) {
+			navigateTo(`/${locale.value}/key-campaigns/redeem-key-approved?requestId=${created.id}`)
+			return
+		}
 		success.value = true
 		setTimeout(() => {
 			navigateTo(`/${locale.value}/key-campaigns`)
@@ -233,11 +245,11 @@ function goBack() {
 							</div>
 
 							<div class="form-row">
-								<label class="label">{{ $t("keys.campaigns.description_optional") }}</label>
+								<label class="label">{{ $t("keys.campaigns.plan") }}</label>
 								<textarea
 									v-model="description"
 									class="textarea"
-									:placeholder="$t('keys.campaigns.description_placeholder')"
+									:placeholder="$t('keys.campaigns.plan_placeholder')"
 									rows="3"
 								/>
 							</div>

package/services/campaignService.ts

@@ -283,6 +283,9 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		max_keys_for_user: k.max_keys_for_user ?? 1,
 		game_summary: k.game?.summary,
 		game_videos: (k.game?.videos || []) as Array<{ external_id: string; name?: string }>,
+		press_kit_link: k.press_kit_link ?? null,
+		review_guideline: k.review_guideline ?? null,
+		embargo_date: k.embargo_date ?? null,
 		request_id: k.requests?.[0]?.id,
 		request_item_id: k.requests?.[0]?.key_item_id,
 		request_admin_notes: k.requests?.[0]?.admin_notes ?? null,

package/services/gamesService.ts

@@ -44,5 +44,13 @@ export interface GameImage {
 	url_image_src: string
 }
 
+export interface GameDetail {
+	platforms?: Array<{ id: number; name: string }>
+	genres?: Array<{ id: number; localized_name: string }>
+}
+
+export const fetchDetailGame = (lang: string, slug: string) =>
+	client.get<{ data: GameDetail }>(`/${lang}/games/details/${slug}`)
+
 export const fetchDetailGameImage = (lang: string, slug: string) =>
 	client.get<{ data: GameImage[] }>(`/${lang}/games/details/${slug}/images`)