@mundogamernetwork/shared-ui 1.1.83 → 1.1.84

package/locales/de.json

@@ -194,7 +194,14 @@
       "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."
+      "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

@@ -194,7 +194,14 @@
       "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."
+      "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

@@ -194,7 +194,14 @@
       "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."
+      "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

@@ -194,7 +194,14 @@
       "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ă."
+      "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.83",
+  "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

@@ -604,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>
 
@@ -1031,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;

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

@@ -59,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 {
@@ -72,8 +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
-		platform.value = data?.platform || data?.platforms?.[0]?.name || ""
+		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")
 		}
@@ -102,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()
@@ -135,6 +147,8 @@ function goBack() {
 						<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>
 
 				<div class="cards">
@@ -194,12 +208,30 @@ function goBack() {
 								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="side-border">
-						<div class="title">{{ requestData?.key?.name }}</div>
-						<div class="imagem" v-if="requestData?.key?.cover_original_src">
-							<img :src="requestData.key.cover_original_src" :alt="requestData.key.name" />
+						<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>
@@ -262,19 +294,13 @@ function goBack() {
 		}
 		.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; }
 	}
 
 	.cards {
 		display: flex;
-		align-items: flex-start;
-		gap: 84px;
 		width: 100%;
-		justify-content: space-between;
-
-		@media (max-width: 767px) {
-			flex-direction: column;
-			gap: 32px;
-		}
 	}
 
 	.side {
@@ -377,27 +403,33 @@ function goBack() {
 		}
 	}
 
-	.side-border {
+	.req-error { font-size: 12px; color: var(--danger, #e53935); margin-top: 4px; }
+
+	.resources {
 		display: flex;
-		padding: 18px;
 		flex-direction: column;
-		gap: 24px;
-		flex: 1 0 0;
+		gap: 12px;
+		padding: 20px;
+		background: var(--bg-app-badge);
 		border: 1px solid var(--button-secondary-default-bg);
-		max-width: 391px;
+	}
 
-		.title { font-size: 14px; color: var(--card-article-title); font-weight: 600; }
+	.resources-title { font-size: 13px; font-weight: 600; color: var(--card-article-title); }
 
-		.imagem {
-			width: 100%;
-			max-height: 200px;
-			overflow: hidden;
-			text-align: center;
-			img { width: auto; height: 100%; max-width: 100%; }
-		}
+	.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; }
 	}
 
-	.req-error { font-size: 12px; color: var(--danger, #e53935); margin-top: 4px; }
+	.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,