@mundogamernetwork/shared-ui 1.3.1 → 1.3.3

package/components/keys/KeyCampaignDashboardCard.vue

@@ -148,21 +148,21 @@ const detailRoute = computed(() =>
 						<span class="lock-label">{{ $t("keys.card.exclusive_lock_title") }}</span>
 						<span class="lock-cta">{{ $t("keys.card.exclusive_upgrade_cta") }}</span>
 					</div>
-				</div>
-			</NuxtLink>
 
-			<div class="kc-card__meta-bar">
-				<div class="kc-card__days" v-if="card.early_access_hours && card.early_access_hours > 0 && userCanAccess">
-					<span>{{ card.early_access_hours }}</span>h {{ $t("keys.card.days") }}
+					<div class="kc-card__meta-bar">
+						<div class="kc-card__days" v-if="card.early_access_hours && card.early_access_hours > 0 && userCanAccess">
+							<span>{{ card.early_access_hours }}</span>h {{ $t("keys.card.days") }}
+						</div>
+						<div class="kc-card__days" v-else>&nbsp;</div>
+						<span v-if="card.type" class="kc-card__type">
+							<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 16 17" fill="none">
+								<path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="#D297FF"/>
+							</svg>
+							{{ card.type }}
+						</span>
+					</div>
 				</div>
-				<div class="kc-card__days" v-else>&nbsp;</div>
-				<span v-if="card.type" class="kc-card__type">
-					<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 16 17" fill="none">
-						<path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="#D297FF"/>
-					</svg>
-					{{ card.type }}
-				</span>
-			</div>
+			</NuxtLink>
 		</div>
 
 		<div class="kc-card__body">
@@ -317,12 +317,18 @@ const detailRoute = computed(() =>
 	}
 
 	&__meta-bar {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 6px 8px;
-		background: var(--card-bg, #181818);
+		background: rgba(13, 13, 13, 0.82);
+		backdrop-filter: blur(2px);
 		min-height: 30px;
+		z-index: 2;
 	}
 
 	&__days {

package/locales/de.json

@@ -133,7 +133,7 @@
         "rp_label": "Redeemed by",
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
-        "no_data": "Campaign not found",
+        "no_data": "Diese Kampagne ist noch keinem Spiel im System zugeordnet",
         "title": "Kampagne",
         "about": "Über das Spiel",
         "screenshot_alt": "Spiel-Screenshot",
@@ -237,4 +237,4 @@
     "video_thumbnail": "Video-Vorschaubild",
     "expanded_image": "Vergrößertes Bild"
   }
-}
+}

package/locales/en.json

@@ -133,7 +133,7 @@
         "rp_label": "Redeemed by",
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
-        "no_data": "Campaign not found",
+        "no_data": "This campaign is not associated with a game in our system yet",
         "title": "Campaign",
         "about": "About the game",
         "screenshot_alt": "Game screenshot",

package/locales/pt-BR.json

@@ -133,7 +133,7 @@
         "rp_label": "Redeemed by",
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
-        "no_data": "Campaign not found",
+        "no_data": "Esta campanha ainda nao foi associada a um jogo no sistema",
         "title": "Campanha",
         "about": "Sobre o jogo",
         "screenshot_alt": "Captura de tela do jogo",
@@ -237,4 +237,4 @@
     "video_thumbnail": "Miniatura do vídeo",
     "expanded_image": "Imagem ampliada"
   }
-}
+}

package/locales/ro.json

@@ -133,7 +133,7 @@
         "rp_label": "Redeemed by",
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
-        "no_data": "Campaign not found",
+        "no_data": "Aceasta campanie nu este inca asociata cu un joc in sistem",
         "title": "Campanie",
         "about": "Despre joc",
         "screenshot_alt": "Captură de ecran a jocului",
@@ -237,4 +237,4 @@
     "video_thumbnail": "Miniatură video",
     "expanded_image": "Imagine mărită"
   }
-}
+}

package/package.json

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

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

@@ -13,15 +13,21 @@ const routePath = route.path.split('/');
 const lang = SUPPORTED_LOCALES.find(l => routePath.includes(l)) || 'en';
 
 const config = useRuntimeConfig();
-// keyApiUrl overrides apiBaseURL — lets each front point to a specific API base
-// (e.g. community uses agency-api, not its own locale-prefixed API base).
+// keyApiUrl overrides apiBaseURL — lets each front point to the API that
+// registered the shared key routes.
 // Follow the same override pattern as presskit/game/[slug].vue.
 const cfg = (config.public as any)?.mgSharedUi || config.public;
-const apiBase: string =
+const withApiV1 = (base?: string) => {
+	if (!base) return '';
+	const clean = base.replace(/\/$/, '');
+	return /\/api\/v1$/.test(clean) ? clean : `${clean}/api/v1`;
+};
+const apiBase: string = withApiV1(
 	(config.public as any).keyApiUrl ||
 	cfg.keyApiUrl ||
 	(config.public.apiBaseURL as string) ||
-	'';
+	'',
+);
 
 const { data: keyData, error: fetchError, pending, refresh } = await useAsyncData(
 	`public-key-${slug}`,
@@ -57,18 +63,18 @@ useSeoMeta({
 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';
+	if (k.is_exclusive) return 'Exclusive to official streamers';
+	if (k.is_tier_locked && k.access_tier && k.access_tier !== 'free') return `Exclusive to ${String(k.access_tier).toUpperCase()} plan or higher`;
+	if (k.streamer_type_id === 2) return 'Exclusive to official streamers';
+	if (k.streamer_type_id === 3) return 'Exclusive to affiliates';
 	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>
+		<div v-if="loading" class="kc__state">Loading…</div>
+		<div v-else-if="error" class="kc__state">Campaign not found.</div>
 
 		<template v-else>
 			<div class="kc__hero">
@@ -77,8 +83,8 @@ const restriction = computed(() => {
 					<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>
+						<span v-if="key.available_count > 0">{{ key.available_count }} {{ key.available_count === 1 ? 'key' : 'keys' }} available to redeem</span>
+						<span v-else>Keys sold out</span>
 					</div>
 				</div>
 			</div>

package/pages/key-campaigns/index.vue

@@ -5,13 +5,13 @@
 				<div class="stepper-header">
 					<div
 						:class="['stepper-step', { complete: currentStep > 1, active: currentStep === 1 }]"
-						@click="currentStep = 1"
+						@click="setStep(1)"
 					>
 						{{ $t("keys.campaigns.title") }}
 					</div>
 					<div
 						:class="['stepper-step', { complete: currentStep > 2, active: currentStep === 2 }]"
-						@click="currentStep = 2"
+						@click="setStep(2)"
 					>
 						{{ $t("keys.campaigns.my_requests") }}
 					</div>
@@ -179,23 +179,23 @@
 													<span class="lock-label">{{ $t("keys.campaigns.exclusive_lock_title") }}</span>
 													<span class="lock-cta">{{ $t("keys.campaigns.exclusive_upgrade_cta") }}</span>
 												</div>
+
+												<div class="title">
+													<div class="days" v-if="card.time > 0 && card.user_can_access">
+														<span>{{ card.time }}</span> {{ $t("keys.campaigns.days") }}
+													</div>
+													<div class="days" v-else></div>
+													<span>
+														<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+															<path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="var(--key-accent, var(--key-accent, var(--primary, #D297FF)))" />
+														</svg>
+														{{ card.type }}
+													</span>
+												</div>
 											</div>
 										</nuxt-link>
 									</div>
 
-									<div class="title">
-										<div class="days" v-if="card.time > 0 && card.user_can_access">
-											<span>{{ card.time }}</span> {{ $t("keys.campaigns.days") }}
-										</div>
-										<div class="days" v-else></div>
-										<span>
-											<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
-												<path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="var(--key-accent, var(--key-accent, var(--primary, #D297FF)))" />
-											</svg>
-											{{ card.type }}
-										</span>
-									</div>
-
 									<div class="text">
 										<div v-if="card.platforms && card.platforms.length" class="card-platforms">
 											<span v-for="p in card.platforms" :key="p" class="card-platform-tag">
@@ -344,13 +344,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, inject } from "vue"
+import { ref, computed, onMounted, onUnmounted, watch, inject, unref } from "vue"
 import { useNuxtApp, navigateTo } from "#app"
 import { useCampaignsStore } from "../../stores/campaigns"
 import { fetchMyRequests, fetchRedeemedUsers } from "../../services/campaignService"
+import { useLoginStore } from "../../stores/login"
 
 // Injected by each consuming front — provide these in app.vue / a plugin
 const mgPlatform = inject<string>("mgPlatform", "MGTV")
+const currentUser = inject<any>("currentUser", null)
 const loginUrl = inject<string>("loginUrl", "/")
 const upgradeRoute = inject<string>("upgradeRoute", "/")
 
@@ -358,6 +360,7 @@ const { $i18n } = useNuxtApp()
 const locale = $i18n.locale
 
 const campaignsStore = useCampaignsStore()
+const loginStore = useLoginStore()
 
 const currentStep = ref(1)
 const searchTerm = ref("")
@@ -374,6 +377,26 @@ const loadingFeatured = ref(true)
 const loadingRequests = ref(false)
 const loadError = ref(false)
 
+function truthyFlag(value: unknown) {
+	return value === true || value === 1 || value === "1"
+}
+
+function hasCurrentUser() {
+	return !!unref(currentUser)
+}
+
+function requestLogin() {
+	loginStore.showLoginModalComponent = true
+}
+
+function setStep(step: number) {
+	if (step === 2 && !hasCurrentUser()) {
+		requestLogin()
+		return
+	}
+	currentStep.value = step
+}
+
 // ------------------------------------------------------------------
 // Filters
 // ------------------------------------------------------------------
@@ -489,12 +512,14 @@ async function loadFeaturedCampaigns() {
 	loadingFeatured.value = true
 	try {
 		const response = await campaignsStore.fetchFeaturedCampaigns(mgPlatform)
-		sliderImages.value = (response.data || []).map((item: any) => ({
-			id: item.id,
-			cover: item.game?.url_banner_src || item.cover_src,
-			name: item.name,
-			slug: item.slug,
-		}))
+		sliderImages.value = (response.data || [])
+			.filter((item: any) => truthyFlag(item.featured) || truthyFlag(item.highlight))
+			.map((item: any) => ({
+				id: item.id,
+				cover: item.game?.url_banner_src || item.cover_src,
+				name: item.name,
+				slug: item.slug,
+			}))
 	} catch {
 		// silent
 	} finally {
@@ -600,6 +625,7 @@ function applyUserRequestStatuses() {
 }
 
 async function loadMyRequests() {
+	if (!hasCurrentUser()) return
 	loadingRequests.value = true
 	try {
 		const response = await fetchMyRequests({ page: 1, per_page: 30, sort: "id", order: "asc" })
@@ -759,7 +785,7 @@ onMounted(async () => {
 	await loadCampaigns(1)
 	await loadCampaignTypes()
 	await loadPlatforms()
-	await loadMyRequests()
+	if (hasCurrentUser()) await loadMyRequests()
 
 	updateSlider()
 	startAutoplay()
@@ -1141,12 +1167,18 @@ onUnmounted(() => {
 					}
 
 					.title {
+						position: absolute;
+						left: 0;
+						right: 0;
+						bottom: 0;
 						display: flex;
 						padding: 8px 16px;
 						align-items: center;
-						background: rgba(13, 13, 13, 0.9);
+						background: rgba(13, 13, 13, 0.82);
+						backdrop-filter: blur(2px);
 						width: 100%;
 						justify-content: space-between;
+						z-index: 2;
 
 						.days {
 							font-size: 12px;

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

@@ -147,9 +147,6 @@ async function submit() {
 			return
 		}
 		success.value = true
-		setTimeout(() => {
-			navigateTo(`/${locale.value}/key-campaigns`)
-		}, 2000)
 	} catch (e: any) {
 		const status = e?.response?.status
 		const errorCode = e?.response?.data?.error_code

package/services/campaignService.ts

@@ -1,30 +1,66 @@
 import axios, { type AxiosInstance } from "axios"
 
 // Campaign service wraps the key-campaigns API used by TV, community, and agency.
-// Two clients:
-//   mainClient — public endpoints (/public/keys*), no auth required for listing
-//   authClient — authenticated endpoints (/api/v1/*), withCredentials
+// Each frontend backend registers the shared key routes through its own provider.
+// Authenticated calls must therefore use the current app API host, otherwise
+// cookies for api.mundogamer.tv/community/agency are not sent to api-main.
 
 let _mainClient: AxiosInstance | null = null
 let _authClient: AxiosInstance | null = null
 
-function getMainClient(): AxiosInstance {
-	if (_mainClient) return _mainClient
+const SUPPORTED_LOCALES = ["en", "pt-BR", "es", "de", "ro", "ar-AE"]
+
+function resolveLang(): string {
+	const seg =
+		typeof location === "undefined" ? "" : location.pathname.split("/")[1] || ""
+	return SUPPORTED_LOCALES.includes(seg) ? seg : "en"
+}
+
+function withApiV1(baseURL?: string): string {
+	if (!baseURL) return ""
+	const base = baseURL.replace(/\/$/, "")
+	return /\/api\/v1$/.test(base) ? base : `${base}/api/v1`
+}
 
-	const baseURL =
+function getPublicApiBaseURL(): string {
+	return withApiV1(
+		import.meta.env.VITE_KEY_API_URL ||
 		import.meta.env.VITE_CAMPAIGN_API_URL ||
+		import.meta.env.VITE_API_BASE_URL ||
 		import.meta.env.VITE_BASE_URL_NETWORK ||
+		"",
+	)
+}
+
+function getAuthenticatedApiBaseURL(): string {
+	return withApiV1(
+		import.meta.env.VITE_KEY_AUTH_API_URL ||
+		import.meta.env.VITE_KEY_API_URL ||
 		import.meta.env.VITE_API_BASE_URL ||
-		""
+		import.meta.env.VITE_CAMPAIGN_API_URL ||
+		import.meta.env.VITE_BASE_URL_NETWORK ||
+		"",
+	)
+}
+
+function setHeader(config: any, name: string, value: string) {
+	if (config.headers?.set) {
+		config.headers.set(name, value)
+		return
+	}
+	config.headers = { ...(config.headers || {}), [name]: value }
+}
 
-	_mainClient = axios.create({ baseURL })
+function getMainClient(): AxiosInstance {
+	if (_mainClient) return _mainClient
+
+	_mainClient = axios.create({ baseURL: getPublicApiBaseURL() })
 
 	_mainClient.interceptors.request.use((config) => {
-		const SUPPORTED_LOCALES = ["en", "pt-BR", "es", "de", "ro", "ar-AE"]
-		const seg =
-			typeof location === "undefined" ? "" : location.pathname.split("/")[1] || ""
-		const lang = SUPPORTED_LOCALES.includes(seg) ? seg : "en"
+		const lang = resolveLang()
+		const systemId = import.meta.env.VITE_SYSTEM_ID
 		config.params = { ...config.params, lang }
+		if (systemId) setHeader(config, "X-System-Id", String(systemId))
 		// Only attach the shared debug token in true local dev — "!== production"
 		// also matches "hlg" (staging), which has real logged-in users relying on
 		// their own session cookie via withCredentials. Attaching this static
@@ -46,20 +82,13 @@ function getMainClient(): AxiosInstance {
 function getAuthClient(): AxiosInstance {
 	if (_authClient) return _authClient
 
-	const baseURL =
-		import.meta.env.VITE_CAMPAIGN_API_URL ||
-		import.meta.env.VITE_BASE_URL_NETWORK ||
-		import.meta.env.VITE_API_BASE_URL ||
-		""
-
-	_authClient = axios.create({ baseURL, withCredentials: true })
+	_authClient = axios.create({ baseURL: getAuthenticatedApiBaseURL(), withCredentials: true })
 
 	_authClient.interceptors.request.use((config) => {
-		const SUPPORTED_LOCALES = ["en", "pt-BR", "es", "de", "ro", "ar-AE"]
-		const seg =
-			typeof location === "undefined" ? "" : location.pathname.split("/")[1] || ""
-		const lang = SUPPORTED_LOCALES.includes(seg) ? seg : "en"
+		const lang = resolveLang()
+		const systemId = import.meta.env.VITE_SYSTEM_ID
 		config.params = { ...config.params, lang }
+		if (systemId) setHeader(config, "X-System-Id", String(systemId))
 		// Only attach the shared debug token in true local dev — "!== production"
 		// also matches "hlg" (staging), which has real logged-in users relying on
 		// their own session cookie via withCredentials. Attaching this static
@@ -346,7 +375,7 @@ export const fetchCampaignTypes = (params: Record<string, any> = {}) => {
  * Fetch active platforms (for the platform filter select).
  */
 export const fetchCampaignPlatforms = () => {
-	return authClient.get("/platforms/currently")
+	return authClient.get("/public/key-platforms")
 }
 
 /**