@mundogamernetwork/shared-ui 1.3.2 → 1.3.6

package/assets/kit/kit-base.css

@@ -34,6 +34,23 @@ body:has(.kit-press) {
 	color: var(--kit-muted, #8b92a0);
 	font-size: 1rem;
 }
+.kit-state--not-found {
+	min-height: 100vh;
+	justify-content: flex-start;
+	padding-top: 15vh;
+	width: 100%;
+}
+.kit-state__desc {
+	max-width: 420px;
+	text-align: center;
+	margin: -8px 0 4px;
+	font-size: 0.9rem;
+	line-height: 1.5;
+}
+.kit-more--not-found {
+	width: 100%;
+	margin-top: 40px;
+}
 .kit-state h2 {
 	font-size: 1.5rem;
 	color: var(--kit-text, #f4f6fa);

package/components/MediaKit/MgRateCardBundleEditor.vue

@@ -11,6 +11,10 @@
 
 		<!-- Bundle Form -->
 		<div v-if="showForm" class="bundle-form">
+			<div class="visibility-note">
+				<MGIcon icon="info" />
+				<span>{{ $t("media_kit.bundles.visibility_note") }}</span>
+			</div>
 			<div class="form-group">
 				<label>{{ $t("media_kit.bundles.bundle_name") }}</label>
 				<input v-model="form.name" type="text" :placeholder="$t('media_kit.bundles.name_placeholder')" />
@@ -105,6 +109,20 @@
 				</div>
 			</div>
 
+			<label class="visibility-checkbox" :class="{ disabled: !isSubscriber }">
+				<input
+					type="checkbox"
+					:checked="showPublicly"
+					:disabled="!isSubscriber"
+					@change="onToggleVisibility(($event.target as HTMLInputElement).checked)"
+				/>
+				<span>{{ $t("media_kit.bundles.show_publicly") }}</span>
+				<button v-if="!isSubscriber" type="button" class="upgrade-link" @click.prevent="emit('paywall', 'rates')">
+					<MGIcon icon="lock" />
+					{{ $t("media_kit.editor.upgrade_to_show") }}
+				</button>
+			</label>
+
 			<div class="form-actions">
 				<button class="btn-cancel" @click="cancelForm">{{ $t("media_kit.editor.cancel") }}</button>
 				<button class="btn-save" @click="saveBundle" :disabled="saving || form.rate_card_ids.length < 2">
@@ -186,19 +204,32 @@ const props = withDefaults(
 		availableRateCards: RateCard[];
 		influencerProInfoId: number;
 		isEnabled?: boolean;
+		/** Whether the account has an active paid subscription — gates public visibility only, not creation. */
+		isSubscriber?: boolean;
+		/** Current value of the account-wide "show bundles publicly" setting. */
+		showPublicly?: boolean;
 	}>(),
 	{
 		isEnabled: true,
+		isSubscriber: false,
+		showPublicly: true,
 	}
 );
 
 const emit = defineEmits<{
 	(e: "refresh"): void;
 	(e: "error", message: string): void;
-	/** Bundles remain a premium feature — host app decides how to react (e.g. show its own paywall modal). */
+	/** Fired when a non-subscriber clicks the upgrade CTA next to the disabled checkbox, or when isEnabled is false at save time. */
 	(e: "paywall", feature: string): void;
+	/** Fired when the "show publicly" checkbox changes (only reachable while isSubscriber). */
+	(e: "toggle-visibility", value: boolean): void;
 }>();
 
+function onToggleVisibility(value: boolean) {
+	if (!props.isSubscriber) return;
+	emit('toggle-visibility', value);
+}
+
 const showForm = ref(false);
 const editing = ref<number | null>(null);
 const saving = ref(false);
@@ -216,6 +247,53 @@ const defaultForm = {
 
 const form = ref({ ...defaultForm, quantities: {} });
 
+// --- Draft persistence (new-item only) --------------------------------------
+// Guards against losing a half-filled form on accidental navigation/refresh.
+// Scoped per profile so switching accounts in the same browser can't leak a
+// draft between them. Only the "new item" flow is persisted — editing an
+// existing bundle already has server data as the source of truth.
+const DRAFT_KEY = computed(() => `mgn_bundle_draft_${props.influencerProInfoId}`);
+
+function loadDraft() {
+	if (typeof window === 'undefined') return null;
+	try {
+		const raw = window.localStorage.getItem(DRAFT_KEY.value);
+		return raw ? JSON.parse(raw) : null;
+	} catch {
+		return null;
+	}
+}
+
+function saveDraft() {
+	if (typeof window === 'undefined' || editing.value) return;
+	try {
+		window.localStorage.setItem(DRAFT_KEY.value, JSON.stringify(form.value));
+	} catch {
+		// storage unavailable (private browsing, quota) — draft just won't persist
+	}
+}
+
+function clearDraft() {
+	if (typeof window === 'undefined') return;
+	try {
+		window.localStorage.removeItem(DRAFT_KEY.value);
+	} catch {
+		// ignore
+	}
+}
+
+watch(form, () => {
+	if (!editing.value) saveDraft();
+}, { deep: true });
+
+onMounted(() => {
+	const draft = loadDraft();
+	if (draft) {
+		form.value = { ...defaultForm, quantities: {}, ...draft };
+		showForm.value = true;
+	}
+});
+
 function qtyFor(id: number): number {
 	return form.value.quantities[id] || 1;
 }
@@ -254,6 +332,7 @@ function cancelForm() {
 	showForm.value = false;
 	editing.value = null;
 	form.value = { ...defaultForm, rate_card_ids: [], quantities: {} };
+	clearDraft();
 }
 
 function editBundle(bundle: Bundle) {
@@ -353,7 +432,58 @@ async function removeBundle(id: number) {
 		margin: -8px 0 0;
 	}
 
+	.visibility-checkbox {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		color: #E4E6EB;
+		cursor: pointer;
+
+		input[type="checkbox"] {
+			width: 16px;
+			height: 16px;
+			cursor: pointer;
+		}
+
+		&.disabled {
+			cursor: not-allowed;
+			color: #7A7D89;
+
+			input[type="checkbox"] { cursor: not-allowed; }
+		}
+
+		.upgrade-link {
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+			margin-left: 4px;
+			padding: 3px 8px;
+			background: none;
+			border: 1px solid #FDB215;
+			color: #FDB215;
+			font-size: 12px;
+			cursor: pointer;
+
+			&:hover { background: rgba(253, 178, 21, 0.1); }
+		}
+	}
+
 	.bundle-form {
+		.visibility-note {
+			display: flex;
+			align-items: flex-start;
+			gap: 8px;
+			padding: 10px 12px;
+			background: rgba(255, 255, 255, 0.04);
+			border: 1px solid rgba(255, 255, 255, 0.08);
+			border-radius: 4px;
+			font-size: 13px;
+			color: #B7BAC4;
+
+			svg { flex-shrink: 0; margin-top: 2px; }
+		}
+
 		background: #1E1E22;
 		padding: 20px;
 		display: flex;

package/components/MediaKit/MgRateCardEditor.vue

@@ -8,6 +8,11 @@
 		</div>
 
 		<div v-if="showForm" class="rate-card-form">
+			<div class="visibility-note">
+				<MGIcon icon="info" />
+				<span>{{ $t("media_kit.editor.visibility_note") }}</span>
+			</div>
+
 			<div class="form-row">
 				<div class="form-group">
 					<label>{{ $t("media_kit.editor.content_format") }}</label>
@@ -79,6 +84,20 @@
 				<textarea v-model="form.description" rows="3"
 					:placeholder="$t('media_kit.editor.description_placeholder')"></textarea>
 			</div>
+			<label class="visibility-checkbox" :class="{ disabled: !isSubscriber }">
+				<input
+					type="checkbox"
+					:checked="showPublicly"
+					:disabled="!isSubscriber"
+					@change="onToggleVisibility(($event.target as HTMLInputElement).checked)"
+				/>
+				<span>{{ $t("media_kit.editor.show_publicly") }}</span>
+				<button v-if="!isSubscriber" type="button" class="upgrade-link" @click.prevent="emit('paywall', 'rates')">
+					<MGIcon icon="lock" />
+					{{ $t("media_kit.editor.upgrade_to_show") }}
+				</button>
+			</label>
+
 			<div class="form-actions">
 				<button class="btn-cancel" @click="cancelForm">{{ $t("media_kit.editor.cancel") }}</button>
 				<button class="btn-save" @click="saveRateCard" :disabled="saving">
@@ -143,19 +162,34 @@ const props = withDefaults(
 		commissionPercent?: number;
 		/** Current plan name, used in the fee label. */
 		planName?: string;
+		/** Whether the account has an active paid subscription — gates public visibility only, not creation. */
+		isSubscriber?: boolean;
+		/** Current value of the account-wide "show rate cards publicly" setting. */
+		showPublicly?: boolean;
 	}>(),
 	{
 		isEnabled: true,
 		commissionPercent: 20,
 		planName: "Free",
+		isSubscriber: false,
+		showPublicly: true,
 	}
 );
 
 const emit = defineEmits<{
 	(e: "refresh"): void;
 	(e: "error", message: string): void;
+	/** Fired when the "show publicly" checkbox changes (only reachable while isSubscriber). */
+	(e: "toggle-visibility", value: boolean): void;
+	/** Fired when a non-subscriber clicks the upgrade CTA next to the disabled checkbox. */
+	(e: "paywall", feature: string): void;
 }>();
 
+function onToggleVisibility(value: boolean) {
+	if (!props.isSubscriber) return;
+	emit('toggle-visibility', value);
+}
+
 const showForm = ref(false);
 const editing = ref<number | null>(null);
 const saving = ref(false);
@@ -173,10 +207,58 @@ const defaultForm = {
 
 const form = ref({ ...defaultForm });
 
+// --- Draft persistence (new-item only) --------------------------------------
+// Guards against losing a half-filled form on accidental navigation/refresh.
+// Scoped per profile so switching accounts in the same browser can't leak a
+// draft between them. Only the "new item" flow is persisted — editing an
+// existing card already has server data as the source of truth.
+const DRAFT_KEY = computed(() => `mgn_rate_card_draft_${props.influencerProInfoId}`);
+
+function loadDraft() {
+	if (typeof window === 'undefined') return null;
+	try {
+		const raw = window.localStorage.getItem(DRAFT_KEY.value);
+		return raw ? JSON.parse(raw) : null;
+	} catch {
+		return null;
+	}
+}
+
+function saveDraft() {
+	if (typeof window === 'undefined' || editing.value) return;
+	try {
+		window.localStorage.setItem(DRAFT_KEY.value, JSON.stringify(form.value));
+	} catch {
+		// storage unavailable (private browsing, quota) — draft just won't persist
+	}
+}
+
+function clearDraft() {
+	if (typeof window === 'undefined') return;
+	try {
+		window.localStorage.removeItem(DRAFT_KEY.value);
+	} catch {
+		// ignore
+	}
+}
+
+watch(form, () => {
+	if (!editing.value) saveDraft();
+}, { deep: true });
+
+onMounted(() => {
+	const draft = loadDraft();
+	if (draft) {
+		form.value = { ...defaultForm, ...draft };
+		showForm.value = true;
+	}
+});
+
 const cancelForm = () => {
 	showForm.value = false;
 	editing.value = null;
 	form.value = { ...defaultForm };
+	clearDraft();
 };
 
 const editCard = (card: RateCard) => {
@@ -284,6 +366,57 @@ const netDisplay = computed(() => {
 	flex-direction: column;
 	gap: 16px;
 
+	.visibility-note {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		padding: 10px 12px;
+		background: rgba(255, 255, 255, 0.04);
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		border-radius: 4px;
+		font-size: 13px;
+		color: #B7BAC4;
+
+		svg { flex-shrink: 0; margin-top: 2px; }
+	}
+
+	.visibility-checkbox {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		color: #E4E6EB;
+		cursor: pointer;
+
+		input[type="checkbox"] {
+			width: 16px;
+			height: 16px;
+			cursor: pointer;
+		}
+
+		&.disabled {
+			cursor: not-allowed;
+			color: #7A7D89;
+
+			input[type="checkbox"] { cursor: not-allowed; }
+		}
+
+		.upgrade-link {
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+			margin-left: 4px;
+			padding: 3px 8px;
+			background: none;
+			border: 1px solid #FDB215;
+			color: #FDB215;
+			font-size: 12px;
+			cursor: pointer;
+
+			&:hover { background: rgba(253, 178, 21, 0.1); }
+		}
+	}
+
 	.mgn-fee-note {
 		display: flex;
 		flex-direction: column;

package/components/keys/KeyCampaignDashboardCard.vue

@@ -120,7 +120,7 @@ const detailRoute = computed(() =>
 					</div>
 
 					<!-- Tier-locked badge -->
-					<div v-else-if="card.is_tier_locked && card.access_tier !== 'free'" class="kc-card__exclusive-badge">
+					<div v-else-if="card.is_tier_locked && card.access_tier !== 'free' && !userCanAccess" class="kc-card__exclusive-badge">
 						<i class="fa-solid fa-crown" /> {{ cardTierLabel(card.access_tier) }}
 					</div>
 
@@ -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 não 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": "Această campanie nu este încă asociată cu un joc în 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.2",
+  "version": "1.3.6",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

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

@@ -63,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">
@@ -83,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>
@@ -134,7 +134,7 @@
 												</div>
 
 												<div
-													v-else-if="card.is_tier_locked && card.access_tier !== 'free'"
+													v-else-if="card.is_tier_locked && card.access_tier !== 'free' && !card.user_can_access"
 													class="exclusive-badge"
 												>
 													<i class="fa-solid fa-crown" /> {{ cardTierLabel(card.access_tier) }}
@@ -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,17 @@ 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 || [])
+			// Featured/highlight alone isn't enough — a campaign that's ended or
+			// sold out but still flagged featured must not show in the hero
+			// carousel. is_open already accounts for status/dates/available_count.
+			.filter((item: any) => (truthyFlag(item.featured) || truthyFlag(item.highlight)) && truthyFlag(item.is_open))
+			.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 +628,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 +788,7 @@ onMounted(async () => {
 	await loadCampaigns(1)
 	await loadCampaignTypes()
 	await loadPlatforms()
-	await loadMyRequests()
+	if (hasCurrentUser()) await loadMyRequests()
 
 	updateSlider()
 	startAutoplay()
@@ -811,7 +840,7 @@ onUnmounted(() => {
 
 .keys-badge {
 	position: absolute;
-	bottom: 8px;
+	top: 8px;
 	right: 8px;
 	background: var(--key-accent-dark, var(--key-accent-bg, rgba(107, 21, 172, 0.9)));
 	color: #fff;
@@ -1141,12 +1170,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/pages/presskit/game/[slug].vue

@@ -205,8 +205,33 @@ useSeoMeta({
 <template>
 	<div class="kit-press" :data-tpl="tpl" :data-layout="layout">
 		<div v-if="loading" class="kit-state">{{ $t('kit.loading') }}</div>
-		<div v-else-if="error || !kit" class="kit-state">
+		<div v-else-if="error || !kit" class="kit-state kit-state--not-found">
 			<h2>{{ $t('kit.press.not_found') }}</h2>
+			<p class="kit-state__desc">{{ $t('kit.press.not_found_desc') }}</p>
+			<a :href="`${agencyBase}/presskit`" target="_blank" rel="noopener" class="kit-footer__cta">
+				{{ $t('kit.press.create_yours_cta') }}
+			</a>
+
+			<section v-if="moreKits.length" class="kit-more kit-more--not-found">
+				<h2 class="kit-more__title">{{ $t('kit.press.more_games') }}</h2>
+				<div class="kit-more__track">
+					<a
+						v-for="k in moreKits"
+						:key="k.slug"
+						:href="`/presskit/game/${k.slug}`"
+						class="kit-more__card"
+					>
+						<div
+							class="kit-more__cover"
+							:style="k.cover_image_url ? { backgroundImage: `url(${k.cover_image_url})` } : {}"
+						>
+							<div v-if="!k.cover_image_url" class="kit-more__cover-fallback">{{ k.name?.charAt(0) }}</div>
+						</div>
+						<div class="kit-more__name">{{ k.name }}</div>
+						<div v-if="k.developer" class="kit-more__dev">{{ k.developer }}</div>
+					</a>
+				</div>
+			</section>
 		</div>
 
 		<template v-else>

package/services/campaignService.ts

@@ -22,10 +22,6 @@ function withApiV1(baseURL?: string): string {
 	return /\/api\/v1$/.test(base) ? base : `${base}/api/v1`
 }
 
-function withoutApiV1(baseURL?: string): string {
-	return (baseURL || "").replace(/\/api\/v1\/?$/, "").replace(/\/$/, "")
-}
-
 function getPublicApiBaseURL(): string {
 	return withApiV1(
 		import.meta.env.VITE_KEY_API_URL ||
@@ -47,6 +43,14 @@ function getAuthenticatedApiBaseURL(): string {
 	)
 }
 
+function setHeader(config: any, name: string, value: string) {
+	if (config.headers?.set) {
+		config.headers.set(name, value)
+		return
+	}
+	config.headers = { ...(config.headers || {}), [name]: value }
+}
+
 function getMainClient(): AxiosInstance {
 	if (_mainClient) return _mainClient
 
@@ -54,7 +58,9 @@ function getMainClient(): AxiosInstance {
 
 	_mainClient.interceptors.request.use((config) => {
 		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
@@ -80,7 +86,9 @@ function getAuthClient(): AxiosInstance {
 
 	_authClient.interceptors.request.use((config) => {
 		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
@@ -367,17 +375,7 @@ export const fetchCampaignTypes = (params: Record<string, any> = {}) => {
  * Fetch active platforms (for the platform filter select).
  */
 export const fetchCampaignPlatforms = () => {
-	const communityBaseURL = withoutApiV1(
-		import.meta.env.VITE_KEY_PLATFORMS_API_URL ||
-		import.meta.env.VITE_BASE_URL_COMMUNITY ||
-		(/community/i.test(import.meta.env.VITE_API_BASE_URL || "") ? import.meta.env.VITE_API_BASE_URL : ""),
-	)
-	if (communityBaseURL) {
-		return axios.get(`${communityBaseURL}/${resolveLang()}/platforms/currently`, {
-			withCredentials: true,
-		})
-	}
-	return authClient.get("/platforms/currently")
+	return authClient.get("/public/key-platforms")
 }
 
 /**