@mundogamernetwork/shared-ui 1.8.16 → 1.8.18

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

@@ -13,6 +13,7 @@ import {
 	unfollowCampaign,
 } from "../../services/campaignService"
 import { fetchDetailGame, fetchDetailGameImage } from "../../services/gamesService"
+import { formatEmbargoDateTime } from "../../utils/embargo"
 
 // Injected by each front — provide in app.vue / a plugin
 const mgPlatform = inject<string>("mgPlatform", "MGTV")
@@ -278,6 +279,13 @@ const updateCountdown = () => {
 	}, 1000)
 }
 
+// Embargo is shown with day AND time in the timezone the campaign creator set
+// it in — formatDate() below renders in the viewer's own zone, which turns one
+// deadline into a different one for every country.
+const embargoDateTime = computed(() =>
+	formatEmbargoDateTime(campaign.value?.embargo_date, campaign.value?.embargo_timezone, locale.value),
+)
+
 const formatDate = (dateString: string | null | undefined): string => {
 	if (!dateString) return "-"
 	const date = new Date(dateString)
@@ -870,6 +878,20 @@ onMounted(async () => {
 							{{ following ? $t("keys.campaigns.campaign.following") : $t("keys.campaigns.campaign.follow_campaign") }}
 						</button>
 
+						<div class="embargo-notice" v-if="campaign?.embargo_active">
+							<MGIcon size="1x" icon="lock" />
+							<div class="embargo-notice-text">
+								<strong>{{ $t("keys.campaigns.embargo_warning_title") }}</strong>
+								<!-- Client-only: this page is server-rendered, and the line
+								     includes the viewer's own timezone. Rendered on the
+								     server it would be formatted in the SERVER's zone and
+								     then disagree with the client on hydration. -->
+								<ClientOnly>
+									<p>{{ $t("keys.campaigns.embargo_warning_desc", { date: embargoDateTime }) }}</p>
+								</ClientOnly>
+							</div>
+						</div>
+
 						<div class="requirements">
 							{{ $t("keys.campaigns.campaign.requirements") }}
 							<div class="tags">
@@ -975,7 +997,7 @@ onMounted(async () => {
 						<div class="actions">
 							{{ $t("keys.campaigns.campaign.created_by") }}
 							<div class="company">
-								<div class="badge-tag">
+								<div class="badge-tag badge-tag--company">
 									<div class="image">
 										<img :src="campaign?.logo || '/imgs/no-cover-img.jpg'" alt="Logo" />
 									</div>
@@ -1477,6 +1499,26 @@ onMounted(async () => {
 					}
 				}
 
+				.embargo-notice {
+					display: flex;
+					align-items: flex-start;
+					gap: 10px;
+					padding: 12px;
+					background-color: var(--bg-app-badge);
+					border: 1px solid var(--button-secondary-default-bg);
+					color: var(--key-accent, var(--primary, #D297FF));
+
+					.embargo-notice-text {
+						display: flex;
+						flex-direction: column;
+						gap: 4px;
+						font-size: 13px;
+
+						strong { color: var(--card-article-title); }
+						p { margin: 0; color: var(--secondary-info-fg); font-weight: 400; }
+					}
+				}
+
 				.actions {
 					display: flex;
 					flex-direction: column;
@@ -1573,6 +1615,7 @@ onMounted(async () => {
 
 					.company {
 						display: flex;
+						flex-wrap: wrap;
 						gap: 12px;
 						.w-48 { max-width: 48px; }
 						.badge-tag {
@@ -1583,7 +1626,8 @@ onMounted(async () => {
 							gap: 12px;
 							font-size: 12px;
 							color: var(--secondary-info-fg);
-							width: -webkit-fill-available;
+							width: fit-content;
+							flex: 0 0 auto;
 							.image { width: 32px; height: 32px; img { width: 100%; border-radius: 100%; } }
 							.texts {
 								display: flex;
@@ -1594,6 +1638,11 @@ onMounted(async () => {
 								.small { color: var(--secondary-info-fg); }
 							}
 						}
+						.badge-tag--company {
+							padding: 6px 12px 6px 6px;
+							gap: 8px;
+							.image { width: 24px; height: 24px; }
+						}
 					}
 				}
 			}

package/pages/key-campaigns/index.vue

@@ -127,44 +127,49 @@
 													@error="(e) => { (e.target as HTMLImageElement).src = '/imgs/no-cover-img.jpg' }"
 												/>
 
+												<!-- Scarcity only. The plain count now lives in the card's
+												     info row, where card metadata is actually read — a bare
+												     number floating on the artwork said nothing, and the icon
+												     that was supposed to explain it never rendered. Up here it
+												     earns its place only when stock is running out. -->
 												<div
 													class="keys-badge"
-													v-if="card.available_count > 0 && card.user_can_access && !card.isExpired && !card.isUpcoming"
+													v-if="showsLowStock(card)"
 													:title="$t('keys.campaigns.keys_left', { n: card.available_count })"
 												>
-													<i class="fa-solid fa-key" />
-													{{ card.available_count }}
+													<MGIcon size="1x" icon="giveaway" />
+													{{ $t("keys.campaigns.keys_low_stock", { n: card.available_count }) }}
 												</div>
 
 												<div
 													v-if="card.is_exclusive && !card.user_can_access"
 													class="exclusive-badge exclusive-lock"
 												>
-													<i class="fa-solid fa-crown" /> {{ $t("keys.campaigns.exclusive_upgrade") }}
+													<MGIcon size="1x" icon="reward" /> {{ $t("keys.campaigns.exclusive_upgrade") }}
 												</div>
 												<div v-else-if="card.is_exclusive" class="exclusive-badge">
-													<i class="fa-solid fa-crown" /> {{ $t("keys.campaigns.exclusive") }}
+													<MGIcon size="1x" icon="reward" /> {{ $t("keys.campaigns.exclusive") }}
 												</div>
 
 												<div
 													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) }}
+													<MGIcon size="1x" icon="reward" /> {{ cardTierLabel(card.access_tier) }}
 												</div>
 
 												<div
 													v-else-if="card.early_access_hours > 0 && card.user_can_access"
 													class="early-access-badge"
 												>
-													<i class="fa-solid fa-bolt" /> {{ $t("keys.campaigns.early_access") }}
+													<MGIcon size="1x" icon="clock" /> {{ $t("keys.campaigns.early_access") }}
 												</div>
 
 												<div
 													v-if="card.streamer_type === 2 || card.streamer_type === 3"
 													class="exclusive-badge level-badge"
 												>
-													<i class="fa-solid fa-user-check" />
+													<MGIcon size="1x" icon="verified" />
 													{{
 														card.streamer_type === 2
 															? $t("keys.campaigns.restriction.level_official")
@@ -176,7 +181,7 @@
 													v-if="!card.user_can_access && card.available_at_for_user"
 													class="early-access-lock-overlay"
 												>
-													<i class="fa-solid fa-lock" />
+													<MGIcon size="1x" icon="lock" />
 													<span class="lock-label">{{ $t("keys.campaigns.early_access_lock_title") }}</span>
 													<span class="lock-countdown">
 														{{ $t("keys.campaigns.early_access_opens_in") }}
@@ -188,7 +193,7 @@
 													v-else-if="!card.user_can_access && card.is_exclusive"
 													class="exclusive-lock-overlay"
 												>
-													<i class="fa-solid fa-crown" />
+													<MGIcon size="1x" icon="reward" />
 													<span class="lock-label">{{ $t("keys.campaigns.exclusive_lock_title") }}</span>
 													<span class="lock-cta">{{ $t("keys.campaigns.exclusive_upgrade_cta") }}</span>
 												</div>
@@ -208,6 +213,15 @@
 											<div class="days" v-if="card.time > 0 && card.user_can_access">
 												<span>{{ card.time }}</span> {{ $t("keys.campaigns.days") }}
 											</div>
+											<!-- Labelled, next to the deadline: the two numbers a creator
+											     actually decides on are "how long left" and "how many left". -->
+											<span
+												v-if="card.available_count > 0 && card.user_can_access && !card.isExpired && !card.isUpcoming"
+												class="card-keys-left"
+											>
+												<MGIcon size="1x" icon="giveaway" />
+												{{ $t("keys.campaigns.keys_left", { n: card.available_count }) }}
+											</span>
 											<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)))" />
@@ -231,7 +245,7 @@
 												</nuxt-link>
 												<nuxt-link :to="upgradeRoute">
 													<button class="btn secondary upgrade-btn">
-														<i class="fa-solid fa-arrow-up" />
+														<MGIcon size="1x" icon="chevron-up" />
 														{{ $t("keys.campaigns.upgrade_plan") }}
 													</button>
 												</nuxt-link>
@@ -473,6 +487,20 @@ function platformAbbr(name: string): string {
 	return PLATFORM_ABBR[name.toLowerCase()] ?? name
 }
 
+/**
+ * At or below this many keys left, the cover badge appears as a scarcity
+ * signal. Above it, the count is just a fact and lives in the info row.
+ */
+const LOW_STOCK_THRESHOLD = 5
+
+function showsLowStock(card: any): boolean {
+	return card.available_count > 0
+		&& card.available_count <= LOW_STOCK_THRESHOLD
+		&& card.user_can_access
+		&& !card.isExpired
+		&& !card.isUpcoming
+}
+
 function cardTierLabel(tier: string): string {
 	const labels: Record<string, string> = { free: "Free", pro: "PRO", business: "Business", official: "Official" }
 	return $i18n.t("keys.campaigns.restriction.tier_locked", { tier: labels[tier] || tier })
@@ -874,6 +902,15 @@ onUnmounted(() => {
 	opacity: 0.5;
 }
 
+.card-keys-left {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	white-space: nowrap;
+
+	i.icon { color: var(--key-accent, var(--primary, #D297FF)); }
+}
+
 .keys-badge {
 	position: absolute;
 	top: 8px;

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

@@ -134,7 +134,11 @@
 						<div class="bottom">
 							<div class="buttons">
 								<div v-if="formError" class="form-error">{{ formError }}</div>
+								<div v-if="sessionExpired" class="btn button-submit" @click="goToLogin">
+									<span>{{ $t("keys.campaigns.login_again") }}</span>
+								</div>
 								<div
+									v-else
 									class="btn button-submit"
 									:class="{ disabled: submitting }"
 									@click="submitForm"
@@ -146,7 +150,7 @@
 								<!-- Success modal -->
 								<div v-if="showSuccessModal" class="success-modal-overlay" @click.self="handleSuccessClose">
 									<div class="success-modal">
-										<MGIcon size="2x" icon="check" style="color: #42FF00" />
+										<MGIcon size="2x" icon="verified" style="color: #42FF00" />
 										<p>{{ $t("keys.materials.success_message") }}</p>
 										<button class="btn button-submit" @click="handleSuccessClose">
 											{{ $t("keys.materials.success_close") }}
@@ -195,7 +199,13 @@
 import { ref, computed, inject, onMounted, unref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useI18n } from "#imports"
-import { submitMaterial, fetchMaterialsByRequest, fetchKeyRequestById } from "../../services/campaignService"
+import {
+	submitMaterial,
+	fetchMaterialsByRequest,
+	fetchKeyRequestById,
+	isSessionExpired,
+	buildReLoginUrl,
+} from "../../services/campaignService"
 
 definePageMeta({
 	middleware: [
@@ -211,6 +221,11 @@ definePageMeta({
 
 // Consuming front injects current user id (or null if not logged in)
 const currentUserId = inject<number | null>("currentUserId", null)
+const loginUrl = inject<string>("loginUrl", "/")
+
+function goToLogin() {
+	navigateTo(buildReLoginUrl(loginUrl), { external: true })
+}
 
 const props = defineProps<{ goBackPage?: string | null }>()
 
@@ -244,6 +259,9 @@ const submitting = ref(false)
 const submittedMaterials = ref<any[]>([])
 const urlError = ref<string | null>(null)
 const formError = ref<string | null>(null)
+// The session died between page load and submit (persisted auth state kept the
+// UI looking logged in) — show a re-login CTA instead of a generic failure.
+const sessionExpired = ref(false)
 const showSuccessModal = ref(false)
 
 // Submission deadline — counts down from the request's approval date, using
@@ -316,6 +334,7 @@ const submitForm = async () => {
 	submitting.value = true
 	urlError.value = null
 	formError.value = null
+	sessionExpired.value = false
 
 	try {
 		forms.value.forEach((form) => {
@@ -360,7 +379,12 @@ const submitForm = async () => {
 		showSuccessModal.value = true
 	} catch (error) {
 		console.error("[key-materials] Submit error:", error)
-		formError.value = t("keys.materials.submit_error")
+		if (isSessionExpired(error)) {
+			sessionExpired.value = true
+			formError.value = t("keys.campaigns.error_session_expired")
+		} else {
+			formError.value = t("keys.materials.submit_error")
+		}
 	} finally {
 		submitting.value = false
 	}

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

@@ -2,7 +2,13 @@
 import { ref, inject, onMounted, unref } from "vue"
 import { useRoute, navigateTo } from "#app"
 import { useNuxtApp } from "#app"
-import { revealKey, fetchKeyRequestById } from "../../services/campaignService"
+import {
+	revealKey,
+	fetchKeyRequestById,
+	isSessionExpired,
+	buildReLoginUrl,
+} from "../../services/campaignService"
+import { formatEmbargoDateTime, formatEmbargoCountdown, isEmbargoActive } from "../../utils/embargo"
 
 const route = useRoute()
 const { $i18n } = useNuxtApp()
@@ -18,6 +24,9 @@ const loading = ref(true)
 const revealing = ref(false)
 const keyCode = ref<string | null>(null)
 const error = ref("")
+// The session died while the page was open (persisted auth state kept the UI
+// looking logged in) — show a re-login CTA instead of a raw API message.
+const sessionExpired = ref(false)
 const requestData = ref<any>(null)
 const copied = ref(false)
 const platform = ref("")
@@ -72,8 +81,13 @@ onMounted(async () => {
 		// Platform the user chose at request time — shown as a fallback/preview
 		// even before reveal, in case the assigned key item has no platform set.
 		platform.value = requestData.value?.platforms?.[0]?.name || ""
-	} catch {
-		error.value = $i18n.t("keys.campaigns.error_loading")
+	} catch (e: any) {
+		if (isSessionExpired(e)) {
+			sessionExpired.value = true
+			error.value = $i18n.t("keys.campaigns.error_session_expired")
+		} else {
+			error.value = $i18n.t("keys.campaigns.error_loading")
+		}
 	} finally {
 		loading.value = false
 	}
@@ -82,6 +96,7 @@ onMounted(async () => {
 async function reveal(acknowledgeEmbargo = false) {
 	revealing.value = true
 	error.value = ""
+	sessionExpired.value = false
 	try {
 		const res = await revealKey(requestId, acknowledgeEmbargo)
 		const data = res?.data?.data || res?.data || null
@@ -97,7 +112,13 @@ async function reveal(acknowledgeEmbargo = false) {
 		const body = e?.response?.data || {}
 		const code = body.message || ""
 		const errorCode = body.error_code || ""
-		if (errorCode === "embargo_acknowledgment_required") {
+		if (isSessionExpired(e)) {
+			// Never surface the backend's own "Unauthorized" here: it is
+			// untranslated and reads as a permission problem when it is really an
+			// expired session.
+			sessionExpired.value = true
+			error.value = $i18n.t("keys.campaigns.error_session_expired")
+		} else if (errorCode === "embargo_acknowledgment_required") {
 			needsEmbargoAck.value = true
 			embargoAckDate.value = body.embargo_date || null
 		} else if (code === "NO_KEYS_AVAILABLE" || code === "KEY_ITEM_NOT_FOUND") {
@@ -128,6 +149,25 @@ async function copyCode() {
 	}
 }
 
+/**
+ * Embargo shown with day AND time, in the timezone the campaign creator set it
+ * in — a date alone is not something a creator can comply with.
+ */
+function formatEmbargo(dateString: string | null | undefined): string {
+	return formatEmbargoDateTime(dateString, requestData.value?.key?.embargo_timezone, locale.value)
+}
+
+// Embargo state stays on screen AFTER the code is revealed and on every later
+// visit to this page. Creators routinely request a key days before release, so
+// the acknowledgment they gave once is not enough — the deadline has to be
+// where they come back to fetch the code.
+const embargoDate = computed<string | null>(() => requestData.value?.key?.embargo_date ?? null)
+const embargoIsActive = computed(() => isEmbargoActive(embargoDate.value))
+const embargoMoment = computed(() => formatEmbargo(embargoDate.value))
+// Recomputed on every reveal/visit; a live ticker would be noise on a page the
+// user opens, copies from and leaves.
+const embargoCountdown = computed(() => formatEmbargoCountdown(embargoDate.value, locale.value))
+
 function formatDate(dateString: string | null | undefined): string {
 	if (!dateString) return "-"
 	const date = new Date(dateString)
@@ -135,6 +175,10 @@ function formatDate(dateString: string | null | undefined): string {
 	return new Intl.DateTimeFormat(locale.value, { day: "numeric", month: "long", year: "numeric" }).format(date)
 }
 
+function goToLogin() {
+	navigateTo(buildReLoginUrl(loginUrl), { external: true })
+}
+
 function goBack() {
 	if (typeof window !== "undefined" && window.history.length > 1) {
 		window.history.back()
@@ -158,6 +202,12 @@ function goBack() {
 				<div class="skeleton" v-for="i in 2" :key="i" />
 			</div>
 
+			<div v-else-if="sessionExpired && !requestData" class="state error">
+				<p>{{ $t("keys.campaigns.error_session_expired") }}</p>
+				<p class="session-expired-help">{{ $t("keys.campaigns.error_session_expired_help") }}</p>
+				<button class="btn" @click="goToLogin">{{ $t("keys.campaigns.login_again") }}</button>
+			</div>
+
 			<div v-else-if="error && !requestData" class="state error">{{ error }}</div>
 
 			<div v-else class="content">
@@ -172,12 +222,21 @@ function goBack() {
 					<p v-if="platform" class="platform-name">{{ $t("keys.campaigns.platform") }}: {{ platform }}</p>
 				</div>
 
-				<div v-if="requestData && !keyCode" class="embargo-warning" :class="{ 'embargo-warning--none': !requestData?.key?.embargo_date }">
-					<MGIcon size="1x" :icon="requestData?.key?.embargo_date ? 'lock' : 'unlock'" />
+				<!-- Stays visible after the code is revealed and on every later
+				     visit: the key is often taken days before the embargo lifts. -->
+				<div v-if="requestData" class="embargo-warning" :class="{ 'embargo-warning--none': !embargoIsActive }">
+					<MGIcon size="1x" :icon="embargoIsActive ? 'lock' : 'unlock'" />
 					<div class="embargo-warning-text">
-						<template v-if="requestData?.key?.embargo_date">
+						<template v-if="embargoIsActive">
 							<strong>{{ $t("keys.campaigns.embargo_warning_title") }}</strong>
-							<p>{{ $t("keys.campaigns.embargo_warning_desc", { date: formatDate(requestData.key.embargo_date) }) }}</p>
+							<p>{{ $t("keys.campaigns.embargo_warning_desc", { date: embargoMoment }) }}</p>
+							<p v-if="embargoCountdown" class="embargo-countdown">
+								{{ $t("keys.campaigns.embargo_countdown", { relative: embargoCountdown }) }}
+							</p>
+						</template>
+						<template v-else-if="embargoDate">
+							<strong>{{ $t("keys.campaigns.embargo_lifted_title") }}</strong>
+							<p>{{ $t("keys.campaigns.no_embargo_desc") }}</p>
 						</template>
 						<template v-else>
 							<strong>{{ $t("keys.campaigns.no_embargo_title") }}</strong>
@@ -195,7 +254,7 @@ function goBack() {
 									<div class="embargo-ack" v-if="!keyCode && needsEmbargoAck">
 										<label class="embargo-ack-label">
 											<input type="checkbox" v-model="embargoAckChecked" />
-											{{ $t("keys.campaigns.embargo_ack_label", { date: formatDate(embargoAckDate) }) }}
+											{{ $t("keys.campaigns.embargo_ack_label", { date: formatEmbargo(embargoAckDate) }) }}
 										</label>
 										<button
 											class="btn"
@@ -222,7 +281,19 @@ function goBack() {
 										</button>
 									</div>
 
-									<div v-if="error" class="req-error">{{ error }}</div>
+									<!-- Right where the code is copied: the one moment the
+									     creator is guaranteed to be looking at this page. -->
+									<div v-if="keyCode && embargoIsActive" class="embargo-reminder">
+										<MGIcon size="1x" icon="lock" />
+										<span>{{ $t("keys.campaigns.embargo_reminder_short", { date: embargoMoment }) }}</span>
+									</div>
+
+									<div v-if="error" class="req-error">
+										{{ error }}
+										<button v-if="sessionExpired" type="button" class="btn login-again" @click="goToLogin">
+											{{ $t("keys.campaigns.login_again") }}
+										</button>
+									</div>
 
 									<div class="info">
 										<MGIcon size="1x" icon="version" />
@@ -448,7 +519,20 @@ function goBack() {
 		}
 	}
 
-	.req-error { font-size: 12px; color: var(--danger, #e53935); margin-top: 4px; }
+	.req-error {
+		font-size: 12px;
+		color: var(--danger, #e53935);
+		margin-top: 4px;
+
+		.login-again {
+			display: block;
+			margin-top: 8px;
+			font-size: 13px;
+			padding: 8px 16px;
+		}
+	}
+
+	.session-expired-help { font-size: 13px; color: var(--secondary-info-fg); margin: 8px 0 16px; }
 
 	.embargo-warning {
 		display: flex;
@@ -464,6 +548,12 @@ function goBack() {
 		.embargo-warning-text {
 			strong { display: block; color: var(--danger, #e53935); font-size: 14px; margin-bottom: 4px; }
 			p { margin: 0; font-size: 13px; color: var(--text-secondary, #ccc); }
+
+			.embargo-countdown {
+				margin-top: 4px;
+				font-weight: 600;
+				color: var(--danger, #e53935);
+			}
 		}
 
 		&--none {
@@ -475,6 +565,22 @@ function goBack() {
 		}
 	}
 
+	.embargo-reminder {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		margin-top: 10px;
+		padding: 10px 12px;
+		font-size: 12px;
+		font-weight: 600;
+		line-height: 1.4;
+		color: var(--danger, #e53935);
+		background: rgba(229, 57, 53, 0.1);
+		border: 1px solid var(--danger, #e53935);
+
+		svg { flex-shrink: 0; margin-top: 1px; }
+	}
+
 	.embargo-ack {
 		display: flex;
 		flex-direction: column;