@mundogamernetwork/shared-ui 1.17.5 → 1.17.7

package/components/MediaKit/MgRateCardBundleEditor.vue

@@ -43,6 +43,7 @@
 						/>
 						<div class="card-checkbox-content">
 							<span class="card-name">{{ card.content_format?.name || card.label }}</span>
+							<span v-if="card.platform?.name" class="card-platform">{{ card.platform.name }}</span>
 							<span class="card-channel">{{ card.ad_channel?.name }}</span>
 							<span class="card-price">{{ formatPrice(card.price_min, card.currency) }}</span>
 						</div>
@@ -144,7 +145,7 @@
 				<p v-if="bundle.description" class="bundle-desc">{{ bundle.description }}</p>
 				<div class="bundle-items">
 					<span v-for="item in bundle.rate_cards?.data || bundle.rate_cards || []" :key="item.id" class="bundle-item-tag">
-						{{ item.content_format?.name || item.label }}
+						{{ item.content_format?.name || item.label }}<template v-if="item.platform?.name"> · {{ item.platform.name }}</template>
 					</span>
 				</div>
 				<div class="bundle-pricing">
@@ -183,6 +184,7 @@ interface RateCard {
 	description?: string;
 	content_format?: { id: number; name: string };
 	ad_channel?: { id: number; name: string };
+	platform?: { id: number; name: string };
 }
 
 interface Bundle {
@@ -563,6 +565,14 @@ async function removeBundle(id: number) {
 					flex: 1;
 
 					.card-name { color: #FFF; font-size: 13px; font-weight: 600; }
+					.card-platform {
+						background: rgba(253, 178, 21, 0.12);
+						color: #FDB215;
+						padding: 2px 8px;
+						border-radius: 20px;
+						font-size: 11px;
+						font-weight: 500;
+					}
 					.card-channel { color: #888; font-size: 12px; }
 					.card-price { color: #FDB215; font-size: 13px; font-weight: 600; margin-left: auto; }
 				}

package/components/MediaKit/MgRateCardEditor.vue

@@ -32,6 +32,15 @@
 						</option>
 					</select>
 				</div>
+				<div class="form-group">
+					<label>{{ $t("media_kit.editor.platform") }}</label>
+					<select v-model="form.platform_id">
+						<option value="">{{ $t("media_kit.editor.select") }}</option>
+						<option v-for="platform in platforms" :key="platform.id" :value="platform.id">
+							{{ platform.name }}
+						</option>
+					</select>
+				</div>
 			</div>
 			<div class="form-row">
 				<div class="form-group">
@@ -111,6 +120,7 @@
 				<div class="card-info">
 					<span class="format">{{ card.content_format?.name || card.label }}</span>
 					<span class="channel">{{ card.ad_channel?.name }}</span>
+					<span v-if="card.platform?.name" class="platform-tag">{{ card.platform.name }}</span>
 					<span class="price">{{ formatPrice(card.price_min, card.price_max, card.currency) }}</span>
 				</div>
 				<!-- Two-step delete rather than a modal: this component ships to
@@ -150,6 +160,7 @@ interface RateCard {
 	id: number;
 	content_format_id: number;
 	ad_channel_id: number;
+	platform_id?: number | null;
 	label?: string;
 	price_min: string;
 	price_max?: string;
@@ -159,6 +170,7 @@ interface RateCard {
 	is_active: boolean;
 	content_format?: { id: number; name: string };
 	ad_channel?: { id: number; name: string };
+	platform?: { id: number; name: string };
 }
 
 interface LookupItem {
@@ -172,6 +184,7 @@ const props = withDefaults(
 		influencerProInfoId: number;
 		contentFormats: LookupItem[];
 		adChannels: LookupItem[];
+		platforms?: LookupItem[];
 		isEnabled?: boolean;
 		/** MGN commission % for the current plan (host app resolves this, e.g. from feature_limits). */
 		commissionPercent?: number;
@@ -184,6 +197,7 @@ const props = withDefaults(
 	}>(),
 	{
 		isEnabled: true,
+		platforms: () => [],
 		commissionPercent: 20,
 		planName: "Free",
 		isSubscriber: false,
@@ -212,6 +226,7 @@ const saving = ref(false);
 const defaultForm = {
 	content_format_id: '',
 	ad_channel_id: '',
+	platform_id: '',
 	price_min: '',
 	price_max: '',
 	currency: 'USD',
@@ -281,6 +296,7 @@ const editCard = (card: RateCard) => {
 	form.value = {
 		content_format_id: String(card.content_format_id),
 		ad_channel_id: String(card.ad_channel_id),
+		platform_id: card.platform_id ? String(card.platform_id) : '',
 		price_min: card.price_min,
 		price_max: card.price_max || '',
 		currency: card.currency,
@@ -309,6 +325,7 @@ const saveRateCard = async () => {
 			influencer_professional_info_id: props.influencerProInfoId,
 			content_format_id: Number(form.value.content_format_id),
 			ad_channel_id: Number(form.value.ad_channel_id),
+			platform_id: form.value.platform_id ? Number(form.value.platform_id) : null,
 			price_min: Number(form.value.price_min),
 			price_max: form.value.price_max ? Number(form.value.price_max) : null,
 			delivery_time_days: form.value.delivery_time_days ? Number(form.value.delivery_time_days) : null,
@@ -594,6 +611,15 @@ const netDisplay = computed(() => {
 					font-size: 12px;
 				}
 
+				.platform-tag {
+					background: rgba(253, 178, 21, 0.12);
+					color: #FDB215;
+					padding: 2px 8px;
+					border-radius: 20px;
+					font-size: 11px;
+					font-weight: 500;
+				}
+
 				.price {
 					color: #FDB215;
 					font-size: 14px;

package/components/keys/KeyBrowser.vue

@@ -46,6 +46,11 @@ 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)
+// revealingId resets to null in the reveal() finally block, before the modal
+// ever renders (it only shows once revealResult is set) — this holds onto
+// the id long enough for the modal's "send your coverage" link to build
+// /key-campaigns/key-materials?requestId=.
+const revealedRequestId = ref<number | null>(null)
 
 const notifPromptVisible = ref(false)
 const notifSaving = ref(false)
@@ -219,6 +224,7 @@ async function revealCode(reqId: number) {
     if (props.accessToken) body.access_token = props.accessToken
     const res = await apiRevealKey(reqId, body)
     revealResult.value = (res as any)?.data?.data ?? null
+    if (revealResult.value) revealedRequestId.value = reqId
   } catch (err: any) {
     if (err?.response?.status === 401) isAuthenticated.value = false
   } finally {
@@ -228,6 +234,7 @@ async function revealCode(reqId: number) {
 
 function closeReveal() {
   revealResult.value = null
+  revealedRequestId.value = null
 }
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -274,6 +281,7 @@ function statusColor(slug: string): string {
         :code="revealResult.code"
         :platform="revealResult.platform"
         :revealed-at="revealResult.revealed_at"
+        :key-request-id="revealedRequestId"
         @close="closeReveal"
       />
 

package/components/keys/KeyCampaignDashboardCard.vue

@@ -25,6 +25,7 @@ const props = defineProps<{
 		streamer_type?: number | null;
 		type?: string | null;
 		platforms?: Array<{ id: number; name: string; slug?: string | null; alternative_name?: string | null } | string>;
+		networkSystems?: string[];
 	};
 	publicMode?: boolean;
 	baseRoute?: string;
@@ -46,7 +47,7 @@ const locale = $i18n.locale;
 
 const cardCover = computed(() => {
 	const c = props.card as any;
-	return c.cover || c.cover_src || c.game?.url_cover_src || c.game_cover || "/imgs/no-cover-img.jpg";
+	return c.cover || c.cover_src || c.game?.url_cover_src || c.game?.cover_url || c.game?.url_cover || c.game_cover || "/imgs/no-cover-img.jpg";
 });
 
 // Only apply the campaign's own focal point to its own cover — a game-cover/no-cover
@@ -202,6 +203,9 @@ const detailRoute = computed(() =>
 		</div>
 
 		<div class="kc-card__body">
+			<div v-if="card.networkSystems?.length" class="kc-card__networks">
+				<span v-for="network in card.networkSystems" :key="network" class="kc-card__network-tag">{{ network }}</span>
+			</div>
 			<div v-if="card.platforms?.length" class="kc-card__platforms">
 				<span v-for="p in card.platforms" :key="typeof p === 'string' ? p : p.id" class="kc-card__platform-tag">
 					{{ platformAbbr(p) }}
@@ -295,6 +299,23 @@ const detailRoute = computed(() =>
 		text-align: center;
 	}
 
+	&__networks {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px;
+		margin-bottom: 6px;
+	}
+
+	&__network-tag {
+		border: 1px solid color-mix(in srgb, var(--primary, #D297FF) 55%, transparent);
+		border-radius: 999px;
+		padding: 2px 7px;
+		color: var(--primary, #D297FF);
+		font-size: 0.68rem;
+		line-height: 1.2;
+		white-space: nowrap;
+	}
+
 	&__exclusive-badge {
 		position: absolute;
 		bottom: 6px;

package/components/keys/KeyRevealModal.vue

@@ -7,13 +7,22 @@ const props = defineProps<{
   code: string
   platform: string | null
   revealedAt: string
+  // Absent for reveal paths outside the request flow (e.g. an admin grant
+  // with no key_request row) — the CTA below only renders when present.
+  keyRequestId?: number | null
 }>()
 
 const emit = defineEmits<{ (e: 'close'): void }>()
 
+const { locale } = useI18n()
+
 function copyCode() {
   navigator.clipboard?.writeText(props.code)
 }
+
+const materialsUrl = computed(() =>
+  props.keyRequestId ? `/${locale.value}/key-campaigns/key-materials?requestId=${props.keyRequestId}` : null
+)
 </script>
 
 <template>
@@ -34,6 +43,10 @@ function copyCode() {
 
       <p class="krm__warning">{{ $t('keys.reveal.warning') }}</p>
 
+      <a v-if="materialsUrl" :href="materialsUrl" class="krm__materials-btn">
+        {{ $t('keys.reveal.submit_materials_cta') }}
+      </a>
+
       <button class="krm__close-btn" @click="emit('close')">
         {{ $t('common.close') }}
       </button>
@@ -127,8 +140,21 @@ function copyCode() {
     margin: 0;
   }
 
-  &__close-btn {
+  &__materials-btn {
     margin-top: 6px;
+    padding: 10px 28px;
+    background: var(--accent, #00d4ff);
+    border: 1px solid var(--accent, #00d4ff);
+    color: #000;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: opacity 0.15s;
+    &:hover { opacity: 0.85; }
+  }
+
+  &__close-btn {
     padding: 10px 28px;
     background: var(--surface-raised, #1e1e1e);
     border: 1px solid var(--border-color, #2a2a2a);

package/package.json

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

package/pages/key-campaigns/index.vue

@@ -622,7 +622,7 @@ async function loadFeaturedCampaigns() {
 			.filter((item: any) => (truthyFlag(item.featured) || truthyFlag(item.highlight)) && truthyFlag(item.is_open))
 			.map((item: any) => ({
 				id: item.id,
-				cover: item.cover_src || item.game?.url_banner_src || item.game?.url_cover_src || "/imgs/no-cover-img.jpg",
+				cover: item.cover_src || item.game?.url_banner_src || item.game?.url_cover_src || item.game?.cover_url || item.game?.url_cover || "/imgs/no-cover-img.jpg",
 				coverFocalX: item.cover_src ? (item.cover_focal_x ?? 0.5) : 0.5,
 				coverFocalY: item.cover_src ? (item.cover_focal_y ?? 0.5) : 0.5,
 				name: item.name,
@@ -682,7 +682,7 @@ async function loadCampaigns(page = 1) {
 				id: item.id,
 				type: item.type?.name,
 				typeId: item.type?.id,
-				cover: item.cover_src || item.game?.url_cover_src || item.game?.url_banner_src || "/imgs/no-cover-img.jpg",
+				cover: item.cover_src || item.game?.url_cover_src || item.game?.cover_url || item.game?.url_cover || item.game?.url_banner_src || "/imgs/no-cover-img.jpg",
 				coverFocalX: item.cover_src ? (item.cover_focal_x ?? 0.5) : 0.5,
 				coverFocalY: item.cover_src ? (item.cover_focal_y ?? 0.5) : 0.5,
 				text: item.name,
@@ -700,6 +700,7 @@ async function loadCampaigns(page = 1) {
 				available_at_for_user: item.available_at_for_user || null,
 				max_keys_for_user: item.max_keys_for_user || 1,
 				platforms: (item.platforms || []).map((p: any) => p.name),
+				networkSystems: (item.mg_network_systems || []).map((s: any) => s.name).filter(Boolean),
 				gameName: item.game?.name || null,
 				genres: (item.game?.genres || []).map((g: any) => g.name).filter(Boolean).slice(0, 2),
 				studioName: item.company?.name || null,

package/pages/presskit/game/[slug].vue

@@ -600,7 +600,7 @@ useHead(() => ({
 
 						<section v-if="videos.length" id="trailers" class="kit-block">
 							<h2>{{ $t('kit.press.videos') }}</h2>
-							<PressKitVideoPlayer :videos="videos" />
+							<VideoPlayer :videos="videos" />
 						</section>
 
 						<section v-if="screenshots.length || brandAssets.length" id="media" class="kit-block">
@@ -683,12 +683,12 @@ useHead(() => ({
 
 						<section v-if="awards.length" id="awards" class="kit-block">
 							<h2>{{ $t('kit.press.awards') }}</h2>
-							<PressKitAwards :awards="awards" />
+							<Awards :awards="awards" />
 						</section>
 
 						<section v-if="quotes.length" class="kit-block">
 							<h2>{{ $t('kit.press.press') }}</h2>
-							<PressKitQuotes :quotes="quotes" />
+							<Quotes :quotes="quotes" />
 						</section>
 
 						<!-- Créditos -> Equipe -->

package/services/campaignService.ts

@@ -374,7 +374,7 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		cover: k.cover_src,
 		cover_focal_x: k.cover_focal_x ?? 0.5,
 		cover_focal_y: k.cover_focal_y ?? 0.5,
-		game_cover: k.game?.url_cover_src,
+		game_cover: k.game?.url_cover_src || k.game?.cover_url || k.game?.url_cover,
 		game_slug: k.game?.slug,
 		game_name: k.game?.name ?? null,
 		// Creator feedback. The can_* flags are computed server-side by

package/services/mediaKitService.ts

@@ -99,3 +99,5 @@ export const fetchMediaKitContentFormats = () =>
 	mk.get("media-kit-lookups/content-formats")
 export const fetchMediaKitAdChannels = () =>
 	mk.get("media-kit-lookups/ad-channels")
+export const fetchMediaKitPlatforms = () =>
+	mk.get("media-kit-lookups/platforms")