@mundogamernetwork/shared-ui 1.1.78 → 1.1.80

package/locales/de.json

@@ -169,7 +169,12 @@
       },
       "status_label": "Status",
       "error_no_keys": "Derzeit sind keine Schlüssel für diese Kampagne verfügbar.",
-      "error_not_approved": "Ihre Anfrage wurde noch nicht genehmigt."
+      "error_not_approved": "Ihre Anfrage wurde noch nicht genehmigt.",
+      "quantity": "Anzahl der Schlüssel",
+      "error_duplicate": "Sie haben bereits eine Anfrage für diese Kampagne. Überprüfen Sie 'Meine Bestellungen' für den Status.",
+      "error_user_blocked": "Ihr Zugang zu Key-Anfragen wurde vorübergehend gesperrt, da Material-Einreichungen überfällig sind. Bitte reichen Sie Ihre ausstehenden Materialien ein.",
+      "error_not_eligible": "Diese Kampagne ist für Ihren aktuellen Plan nicht verfügbar.",
+      "error_pending_limit": "Sie haben das gleichzeitige Anfragenlimit Ihres Plans erreicht. Bitte erfüllen Sie Ihre ausstehenden Verpflichtungen, bevor Sie einen neuen Key anfordern."
     },
     "materials": {
       "title": "Submit material",

package/locales/en.json

@@ -169,7 +169,12 @@
       },
       "status_label": "Status",
       "error_no_keys": "No keys available for this campaign at the moment.",
-      "error_not_approved": "Your request has not been approved yet."
+      "error_not_approved": "Your request has not been approved yet.",
+      "quantity": "Number of keys",
+      "error_duplicate": "You already have a request for this campaign. Check 'My Orders' to see the status.",
+      "error_user_blocked": "Your key request access has been temporarily blocked due to overdue material submissions. Please submit your pending materials to restore access.",
+      "error_not_eligible": "This campaign is not available for your current plan.",
+      "error_pending_limit": "You have reached the simultaneous request limit for your plan. Please fulfill your pending obligations before requesting a new key."
     },
     "materials": {
       "title": "Submit material",

package/locales/pt-BR.json

@@ -169,7 +169,12 @@
       },
       "status_label": "Status",
       "error_no_keys": "Não há chaves disponíveis para esta campanha no momento.",
-      "error_not_approved": "Sua solicitação ainda não foi aprovada."
+      "error_not_approved": "Sua solicitação ainda não foi aprovada.",
+      "quantity": "Quantidade de chaves",
+      "error_duplicate": "Você já tem um pedido para esta campanha. Acesse 'Meus Pedidos' para ver o status.",
+      "error_user_blocked": "Seu acesso a pedidos de chave está temporariamente bloqueado por materiais não entregues. Envie seus materiais pendentes para restaurar o acesso.",
+      "error_not_eligible": "Esta campanha não está disponível para o seu plano atual.",
+      "error_pending_limit": "Você atingiu o limite de pedidos simultâneos do seu plano. Entregue o material pendente antes de solicitar uma nova chave."
     },
     "materials": {
       "title": "Submit material",

package/locales/ro.json

@@ -169,7 +169,12 @@
       },
       "status_label": "Status",
       "error_no_keys": "Nu există chei disponibile pentru această campanie în acest moment.",
-      "error_not_approved": "Cererea ta nu a fost aprobată încă."
+      "error_not_approved": "Cererea ta nu a fost aprobată încă.",
+      "quantity": "Numărul de chei",
+      "error_duplicate": "Aveți deja o cerere pentru această campanie. Verificați 'Comenzile mele' pentru status.",
+      "error_user_blocked": "Accesul dvs. la solicitările de chei a fost blocat temporar din cauza transmisiilor de materiale restante. Trimiteți materialele dvs. pentru a restabili accesul.",
+      "error_not_eligible": "Această campanie nu este disponibilă pentru planul dvs. actual.",
+      "error_pending_limit": "Ați atins limita de cereri simultane a planului dvs. Îndepliniți-vă obligațiile restante înainte de a solicita o nouă cheie."
     },
     "materials": {
       "title": "Submit material",

package/package.json

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

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

@@ -10,6 +10,7 @@ import {
 	revealKey,
 	requestKey,
 } from "../../services/campaignService"
+import { fetchDetailGameImage } from "../../services/gamesService"
 
 // Injected by each front — provide in app.vue / a plugin
 const mgPlatform = inject<string>("mgPlatform", "MGTV")
@@ -112,11 +113,29 @@ const { data: redeemedUsers } = await useAsyncData(
 )
 
 // ------------------------------------------------------------------
-// Game gallery (images/videos) — already embedded in the campaign payload
+// Game gallery (images/videos)
 // ------------------------------------------------------------------
-const gameDetailsImages = computed(() => campaign.value?.game_images || [])
+// Videos are already embedded in the campaign payload (YouTube IDs need no
+// CDN prefix). Screenshots come from the dedicated games endpoint instead —
+// the campaign payload's embedded game.images filenames aren't CDN-resolved,
+// unlike this endpoint's response (same one tv-frontend's production
+// gameDetails.ts already relies on).
 const gameDetailsVideos = computed(() => campaign.value?.game_videos || [])
 
+const { data: gameDetailsImages } = await useAsyncData(
+	`campaign-game-images-${slug}`,
+	async () => {
+		if (!campaign.value?.game_slug) return []
+		try {
+			const response = await fetchDetailGameImage(locale.value, campaign.value.game_slug)
+			return response.data.data || []
+		} catch {
+			return []
+		}
+	},
+	{ watch: [campaign] },
+)
+
 const showVideoModal = ref(false)
 const selectedVideoUrl = ref("")
 const showImageModal = ref(false)

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

@@ -35,6 +35,15 @@ const requestError = ref("")
 const selectedPlatformId = ref<number | null>(null)
 const selectedRegionId = ref<number | null>(null)
 const description = ref("")
+const quantity = ref<number | null>(1)
+
+const maxKeysForUser = computed(() => campaign.value?.max_keys_for_user ?? 1)
+
+function clampQuantity() {
+	if (quantity.value === null) return
+	if (quantity.value < 1) quantity.value = 1
+	if (quantity.value > maxKeysForUser.value) quantity.value = maxKeysForUser.value
+}
 
 onMounted(async () => {
 	if (!currentUser) {
@@ -63,7 +72,7 @@ onMounted(async () => {
 })
 
 const canSubmit = computed(() =>
-	!!selectedPlatformId.value && !!selectedRegionId.value && !submitting.value,
+	!!selectedPlatformId.value && !!selectedRegionId.value && !!quantity.value && !submitting.value,
 )
 
 async function submit() {
@@ -76,15 +85,27 @@ async function submit() {
 			platform_ids: [selectedPlatformId.value],
 			region_ids: [selectedRegionId.value],
 			description: description.value || "-",
-			quantity_keys: 1,
+			quantity_keys: Number(quantity.value) || 1,
 		})
 		success.value = true
 		setTimeout(() => {
 			navigateTo(`/${locale.value}/key-campaigns`)
 		}, 2000)
 	} catch (e: any) {
-		const msg = e?.response?.data?.message || e?.message || ""
-		requestError.value = msg || $i18n.t("keys.campaigns.error_request")
+		const status = e?.response?.status
+		const errorCode = e?.response?.data?.error_code
+		if (status === 409) {
+			requestError.value = $i18n.t("keys.campaigns.error_duplicate")
+		} else if (status === 403 && errorCode === "user_key_blocked") {
+			requestError.value = $i18n.t("keys.campaigns.error_user_blocked")
+		} else if (status === 403) {
+			requestError.value = $i18n.t("keys.campaigns.error_not_eligible")
+		} else if (status === 422 && errorCode === "pending_limit_reached") {
+			requestError.value = $i18n.t("keys.campaigns.error_pending_limit")
+		} else {
+			const msg = e?.response?.data?.message || e?.message || ""
+			requestError.value = msg || $i18n.t("keys.campaigns.error_request")
+		}
 	} finally {
 		submitting.value = false
 	}
@@ -161,6 +182,19 @@ function goBack() {
 						</div>
 					</div>
 
+					<!-- Quantity -->
+					<div class="field" v-if="maxKeysForUser > 1">
+						<label class="label">{{ $t("keys.campaigns.quantity") }}</label>
+						<input
+							v-model.number="quantity"
+							type="number"
+							min="1"
+							:max="maxKeysForUser"
+							class="textarea quantity-input"
+							@change="clampQuantity"
+						/>
+					</div>
+
 					<!-- Description (optional) -->
 					<div class="field">
 						<label class="label">{{ $t("keys.campaigns.description_optional") }}</label>
@@ -278,6 +312,10 @@ function goBack() {
 		}
 	}
 
+	.quantity-input {
+		width: 120px;
+	}
+
 	.textarea {
 		width: 100%;
 		background: var(--bg-app-badge);

package/services/campaignService.ts

@@ -282,7 +282,6 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		available_at_for_user: k.available_at_for_user ?? null,
 		max_keys_for_user: k.max_keys_for_user ?? 1,
 		game_summary: k.game?.summary,
-		game_images: (k.game?.images || []) as Array<{ url_image_src: string }>,
 		game_videos: (k.game?.videos || []) as Array<{ external_id: string; name?: string }>,
 		request_id: k.requests?.[0]?.id,
 		request_item_id: k.requests?.[0]?.key_item_id,

package/services/gamesService.ts

@@ -0,0 +1,48 @@
+import axios, { type AxiosInstance } from "axios"
+
+// Game catalog service (screenshots with CDN-resolved URLs) shared across the
+// network. The keys/campaign API embeds raw game.images filenames without the
+// CDN prefix, so screenshots must come from this dedicated endpoint instead
+// (same one tv-frontend's services/games/gameDetails.ts already calls in
+// production — mirrors that pattern rather than reinventing it).
+
+let _client: AxiosInstance | null = null
+
+function getClient(): AxiosInstance {
+	if (_client) return _client
+
+	const baseURL =
+		import.meta.env.VITE_BASE_URL_COMMUNITY ||
+		import.meta.env.VITE_API_BASE_URL ||
+		import.meta.env.VITE_CAMPAIGN_API_URL ||
+		import.meta.env.VITE_BASE_URL_NETWORK ||
+		""
+
+	_client = axios.create({ baseURL, withCredentials: true })
+
+	_client.interceptors.request.use((config) => {
+		if (
+			import.meta.env.VITE_APP_ENV !== "production" &&
+			typeof window !== "undefined" &&
+			import.meta.env.VITE_BEARER_TOKEN
+		) {
+			config.headers.Authorization = `Bearer ${import.meta.env.VITE_BEARER_TOKEN}`
+		}
+		return config
+	})
+
+	return _client
+}
+
+const client = new Proxy({} as AxiosInstance, {
+	get(_t, prop) {
+		return (getClient() as any)[prop]
+	},
+})
+
+export interface GameImage {
+	url_image_src: string
+}
+
+export const fetchDetailGameImage = (lang: string, slug: string) =>
+	client.get<{ data: GameImage[] }>(`/${lang}/games/details/${slug}/images`)