@mundogamernetwork/shared-ui 1.3.3 → 1.3.7

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>
 

package/locales/de.json

@@ -45,6 +45,8 @@
       "upcoming": "Coming soon",
       "back": "Back",
       "search_placeholder": "Search campaigns...",
+      "sort_recent": "Neueste",
+      "sort_popular": "Beliebteste",
       "seo": {
         "title_generic": "Key Campaigns"
       },

package/locales/en.json

@@ -45,6 +45,8 @@
       "upcoming": "Coming soon",
       "back": "Back",
       "search_placeholder": "Search campaigns...",
+      "sort_recent": "Most recent",
+      "sort_popular": "Most popular",
       "seo": {
         "title_generic": "Key Campaigns"
       },

package/locales/pt-BR.json

@@ -45,6 +45,8 @@
       "upcoming": "Coming soon",
       "back": "Back",
       "search_placeholder": "Search campaigns...",
+      "sort_recent": "Mais recentes",
+      "sort_popular": "Mais populares",
       "seo": {
         "title_generic": "Key Campaigns"
       },
@@ -133,7 +135,7 @@
         "rp_label": "Redeemed by",
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
-        "no_data": "Esta campanha ainda nao foi associada a um jogo no sistema",
+        "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",

package/locales/ro.json

@@ -45,6 +45,8 @@
       "upcoming": "Coming soon",
       "back": "Back",
       "search_placeholder": "Search campaigns...",
+      "sort_recent": "Cele mai recente",
+      "sort_popular": "Cele mai populare",
       "seo": {
         "title_generic": "Key Campaigns"
       },
@@ -133,7 +135,7 @@
         "rp_label": "Redeemed by",
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
-        "no_data": "Aceasta campanie nu este inca asociata cu un joc in sistem",
+        "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",

package/package.json

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

package/pages/key-campaigns/index.vue

@@ -75,14 +75,24 @@
 								</template>
 							</div>
 							<div class="bar">
-								<input
-									type="text"
-									v-model="searchTerm"
-									:placeholder="$t('keys.campaigns.search_placeholder')"
-								/>
-								<button type="button">
-									<MGIcon icon="search" />
-								</button>
+								<select
+									class="platform-select sort-mode-select"
+									:value="sortMode"
+									@change="setSortMode(($event.target as HTMLSelectElement).value as 'recent' | 'popular')"
+								>
+									<option value="recent">{{ $t("keys.campaigns.sort_recent") }}</option>
+									<option value="popular">{{ $t("keys.campaigns.sort_popular") }}</option>
+								</select>
+								<div class="search-box">
+									<input
+										type="text"
+										v-model="searchTerm"
+										:placeholder="$t('keys.campaigns.search_placeholder')"
+									/>
+									<button type="button">
+										<MGIcon icon="search" />
+									</button>
+								</div>
 							</div>
 						</div>
 
@@ -134,7 +144,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) }}
@@ -405,6 +415,7 @@ const platformList = ref<Array<{ id: number; name: string; slug: string }>>([])
 const activeFilter = ref<number | null>(null)
 const activePlatformFilter = ref<number | null>(null)
 const redeemedStatusFilter = ref<number | null>(null)
+const sortMode = ref<"recent" | "popular">("recent")
 
 // ------------------------------------------------------------------
 // Data
@@ -513,7 +524,10 @@ async function loadFeaturedCampaigns() {
 	try {
 		const response = await campaignsStore.fetchFeaturedCampaigns(mgPlatform)
 		sliderImages.value = (response.data || [])
-			.filter((item: any) => truthyFlag(item.featured) || truthyFlag(item.highlight))
+			// 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,
@@ -542,6 +556,7 @@ async function loadCampaigns(page = 1) {
 		per_page: perPage.value,
 		sort: "id",
 		order: "desc",
+		sort_mode: sortMode.value,
 	}
 
 	if (activeFilter.value !== null) params["filter[type_id]"] = activeFilter.value
@@ -682,6 +697,14 @@ function setPlatformFilter(platformId: number | null) {
 	loadCampaigns(1)
 }
 
+function setSortMode(mode: "recent" | "popular") {
+	if (sortMode.value === mode) return
+	sortMode.value = mode
+	currentPage.value = 1
+	hasMoreItems.value = true
+	loadCampaigns(1)
+}
+
 const loadMoreItems = async () => {
 	if (!hasMoreItems.value || loading.value || loadingMore.value) return
 	await loadCampaigns(currentPage.value + 1)
@@ -837,7 +860,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;
@@ -1092,6 +1115,18 @@ onUnmounted(() => {
 				}
 
 				.bar {
+					position: relative;
+					display: flex;
+					align-items: center;
+					gap: 8px;
+
+					.sort-mode-select {
+						flex-shrink: 0;
+						height: 44px;
+					}
+				}
+
+				.search-box {
 					position: relative;
 					display: flex;
 					width: 339px;
@@ -1270,6 +1305,7 @@ onUnmounted(() => {
 				flex-direction: column;
 				gap: 12px;
 				.bar { width: 100%; }
+				.search-box { flex: 1; width: auto; }
 			}
 			.cards {
 				flex-direction: column;

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>