@mundogamernetwork/shared-ui 1.8.16 → 1.8.18

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, inject, onMounted, unref } from "vue"
+import { ref, computed, inject, onMounted, unref, watch } from "vue"
 import { useRoute, navigateTo } from "#app"
 import { useNuxtApp } from "#app"
 import {
@@ -9,7 +9,10 @@ import {
 	fetchAvailableOptions,
 	requestKey,
 	enableKeyCampaignNotifications,
+	isSessionExpired,
+	buildReLoginUrl,
 } from "../../services/campaignService"
+import { formatEmbargoDateTime } from "../../utils/embargo"
 
 const route = useRoute()
 const { $i18n } = useNuxtApp()
@@ -33,15 +36,26 @@ const submitting = ref(false)
 const error = ref("")
 const success = ref(false)
 const requestError = ref("")
+// The session died between page load and submit (persisted auth state kept the
+// UI looking logged in). Shows a re-login CTA instead of a raw API message.
+const sessionExpired = ref(false)
 
 const selectedPlatformId = ref<number | null>(null)
 const selectedRegionId = ref<number | null>(null)
 const description = ref("")
 const quantity = ref<number | null>(1)
 const notifyKeyCampaigns = ref(true)
+// Embargoed campaigns: the creator must confirm they saw the day/time the
+// embargo lifts BEFORE asking for the key, not only at reveal.
+const embargoAckChecked = ref(false)
 
 const maxKeysForUser = computed(() => campaign.value?.max_keys_for_user ?? 1)
 
+const embargoDateTime = computed(() =>
+	formatEmbargoDateTime(campaign.value?.embargo_date, campaign.value?.embargo_timezone, locale.value),
+)
+const hasEmbargo = computed(() => !!embargoDateTime.value)
+
 function clampQuantity() {
 	if (quantity.value === null) return
 	if (quantity.value < 1) quantity.value = 1
@@ -89,6 +103,21 @@ onMounted(async () => {
 	}
 })
 
+// The guard above runs on mount, when the auth store has usually only been
+// hydrated from localStorage (`signedIn` is persisted) — the app's own
+// /auth/user probe resolves a moment later. If that probe comes back
+// unauthenticated, the user is sitting on a form that will be rejected on
+// submit; surface it right away instead of waiting for the POST to fail.
+watch(
+	() => unref(currentUser),
+	(user, previous) => {
+		if (previous && !user) {
+			sessionExpired.value = true
+			requestError.value = $i18n.t("keys.campaigns.error_session_expired")
+		}
+	},
+)
+
 // True once options finished loading and either list came back empty — every
 // platform/region combo this campaign ever had is now fully redeemed.
 const soldOut = computed(() => !loading.value && (platforms.value.length === 0 || regions.value.length === 0))
@@ -122,13 +151,22 @@ const existingRequestStatus = computed(() => {
 const isRefused = computed(() => campaign.value?.request_status === 6)
 const refusedReason = computed(() => campaign.value?.request_admin_notes || "")
 
+function goToLogin() {
+	navigateTo(buildReLoginUrl(loginUrl), { external: true })
+}
+
 async function submit() {
 	if (!canSubmit.value) return
 	requestError.value = ""
+	sessionExpired.value = false
 	if (!selectedPlatformId.value || !selectedRegionId.value || !quantity.value || !description.value?.trim()) {
 		requestError.value = $i18n.t("keys.campaigns.required_fields")
 		return
 	}
+	if (hasEmbargo.value && !embargoAckChecked.value) {
+		requestError.value = $i18n.t("keys.campaigns.embargo_ack_required")
+		return
+	}
 	submitting.value = true
 	try {
 		const response = await requestKey({
@@ -137,6 +175,9 @@ async function submit() {
 			region_ids: [selectedRegionId.value],
 			description: description.value || "-",
 			quantity_keys: Number(quantity.value) || 1,
+			// Recorded on the request so the acknowledgment is provable, not just
+			// a checkbox the browser forgot about.
+			acknowledge_embargo: hasEmbargo.value && embargoAckChecked.value,
 		})
 		const created = response?.data?.data ?? response?.data ?? {}
 
@@ -158,7 +199,13 @@ async function submit() {
 	} catch (e: any) {
 		const status = e?.response?.status
 		const errorCode = e?.response?.data?.error_code
-		if (status === 409) {
+		if (isSessionExpired(e)) {
+			// The API rejected the request as unauthenticated. Never surface the
+			// backend's own wording here ("Unauthorized"): it is untranslated and
+			// reads as a permission problem when it is really an expired session.
+			sessionExpired.value = true
+			requestError.value = $i18n.t("keys.campaigns.error_session_expired")
+		} else if (status === 409) {
 			requestError.value = $i18n.t("keys.campaigns.error_duplicate")
 		} else if (status === 403 && errorCode === "user_key_blocked") {
 			requestError.value = $i18n.t("keys.campaigns.error_user_blocked")
@@ -201,7 +248,7 @@ function goBack() {
 			<div v-else-if="error" class="state error">{{ error }}</div>
 
 			<div v-else-if="success" class="state success">
-				<MGIcon icon="check-circle" size="3x" />
+				<MGIcon icon="verified-filled" size="3x" />
 				<p>{{ $t("keys.campaigns.request_sent") }}</p>
 				<button class="btn" @click="goBack">
 					{{ $t("keys.campaigns.back_to_campaign") }}
@@ -245,7 +292,7 @@ function goBack() {
 					<div class="required-data">
 						<div class="required-data-header" @click="toggleBox">
 							<div class="required-data-header-left">
-								<MGIcon size="1x" icon="check" :style="{ color: isBoxOpen ? 'var(--key-accent, var(--primary, #D297FF))' : 'var(--inactive)' }" />
+								<MGIcon size="1x" icon="verified" :style="{ color: isBoxOpen ? 'var(--key-accent, var(--primary, #D297FF))' : 'var(--inactive)' }" />
 								<span>{{ $t("keys.campaigns.required_data") }}</span>
 							</div>
 							<button type="button" class="box-toggler" :aria-expanded="isBoxOpen">
@@ -302,9 +349,39 @@ function goBack() {
 						</div>
 					</div>
 
-					<div v-if="requestError" class="req-error">{{ requestError }}</div>
+					<!-- Embargo: the creator confirms the day/time before asking
+					     for the key, not only when revealing it. -->
+					<div v-if="hasEmbargo" class="embargo-box">
+						<div class="embargo-box-head">
+							<MGIcon size="1x" icon="lock" class="notice-icon" />
+							<div class="notice-texts">
+								<div class="notice-title">{{ $t("keys.campaigns.embargo_warning_title") }}</div>
+								<div class="notice-status">
+									{{ $t("keys.campaigns.embargo_warning_desc", { date: embargoDateTime }) }}
+								</div>
+							</div>
+						</div>
+						<label class="checkbox-label embargo-ack">
+							<input type="checkbox" v-model="embargoAckChecked" />
+							{{ $t("keys.campaigns.embargo_ack_label", { date: embargoDateTime }) }}
+						</label>
+					</div>
+
+					<div v-if="sessionExpired" class="session-expired">
+						<MGIcon size="1x" icon="version" class="notice-icon" />
+						<div class="notice-texts">
+							<div class="notice-title">{{ $t("keys.campaigns.error_session_expired") }}</div>
+							<div class="notice-status">{{ $t("keys.campaigns.error_session_expired_help") }}</div>
+						</div>
+						<button type="button" class="btn notice-back" @click="goToLogin">
+							{{ $t("keys.campaigns.login_again") }}
+						</button>
+					</div>
+
+					<div v-else-if="requestError" class="req-error">{{ requestError }}</div>
 
 					<button
+						v-if="!sessionExpired"
 						type="submit"
 						class="btn"
 						:class="{ disabled: !canSubmit }"
@@ -410,7 +487,29 @@ function goBack() {
 		svg.rotate { transform: rotate(180deg); }
 	}
 
-	.existing-request-notice {
+	.embargo-box {
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+		padding: 20px;
+		margin-top: 16px;
+		background: var(--bg-app-badge);
+		border: 1px solid var(--key-accent, var(--primary, #D297FF));
+
+		.embargo-box-head { display: flex; align-items: flex-start; gap: 14px; }
+
+		.embargo-ack {
+			display: flex;
+			align-items: flex-start;
+			gap: 8px;
+			font-size: 13px;
+			line-height: 1.4;
+			cursor: pointer;
+		}
+	}
+
+	.existing-request-notice,
+	.session-expired {
 		display: flex;
 		align-items: flex-start;
 		gap: 14px;

package/plugins/seo-tag-priority.ts

@@ -0,0 +1,67 @@
+// Hoists the social/SEO tags to the top of <head> on every front that extends
+// this layer.
+//
+// Why this exists (measured in production 2026-08-02): unhead 2.x applies Capo
+// sorting by default, and its weight table (unhead/dist/shared/*.mjs) gives
+// sync <style> a weight of 60 while a generic <meta> gets the default 100 —
+// so *every* inline stylesheet is emitted before any og:*/twitter:* tag. With
+// Nuxt's `features.inlineStyles` on (its default) that meant ~545KB of inlined
+// CSS ahead of the OG tags, pushing them to byte 384.000-553.000 across all six
+// fronts. Link-preview scrapers (WhatsApp, Facebook, X, LinkedIn, Telegram)
+// truncate the HTML they fetch well before that and stop at </head>, so none of
+// them ever saw an og:image — only Discord, which reads the full document, did.
+//
+// `features.inlineStyles: false` in each app's nuxt.config.ts is the primary
+// fix; this plugin is the belt-and-braces so the problem cannot silently come
+// back if some future component or config re-introduces a large inline <style>.
+// Doing it here rather than per-page also covers the 100+ pages across the six
+// fronts that set their own og tags, plus every page added from now on.
+//
+// -5 sits above <style> (60), <link rel=stylesheet> (60) and <title> (10), but
+// still below <meta charset> (-20), <meta name=viewport> (-15) and the CSP meta
+// (-30), so charset stays inside the first 1024 bytes as the spec requires.
+const SEO_TAG_PRIORITY = -5;
+
+function isSeoTag(tag: { tag: string; props?: Record<string, any> }): boolean {
+	const props = tag.props || {};
+
+	if (tag.tag === "meta") {
+		const key = props.property ?? props.name;
+		return (
+			typeof key === "string"
+			&& (key.startsWith("og:") || key.startsWith("twitter:") || key === "description")
+		);
+	}
+
+	// The canonical rides along: it is cheap and some scrapers resolve the
+	// preview against it rather than against the requested URL.
+	return tag.tag === "link" && props.rel === "canonical";
+}
+
+export default defineNuxtPlugin({
+	name: "shared-ui-seo-tag-priority",
+	// Must run before any page's useHead/useSeoMeta entry is normalized.
+	enforce: "pre",
+	setup(nuxtApp) {
+		const head = injectHead(nuxtApp as any);
+		if (!head) return;
+
+		head.use({
+			key: "shared-ui-seo-tag-priority",
+			hooks: {
+				// `entries:normalize` is the correct seam: unhead computes each
+				// tag's weight (`t._w = tagWeight(head, t)`) immediately *after*
+				// this hook returns, and `tagWeight` short-circuits on a numeric
+				// `tagPriority`. Mutating in `tags:resolve` instead would be too
+				// late — the sort has already run by then.
+				"entries:normalize": ({ tags }: { tags: any[] }) => {
+					for (const tag of tags) {
+						// Never override an explicit priority set by a page.
+						if (tag.tagPriority !== undefined) continue;
+						if (isSeoTag(tag)) tag.tagPriority = SEO_TAG_PRIORITY;
+					}
+				},
+			},
+		});
+	},
+});

package/services/campaignService.ts

@@ -1,4 +1,5 @@
 import axios, { type AxiosInstance } from "axios"
+import { clearAuthCredentials } from "../utils/clearSession"
 
 // Campaign service wraps the key-campaigns API used by TV, community, and agency.
 // Each frontend backend registers the shared key routes through its own provider.
@@ -8,6 +9,29 @@ import axios, { type AxiosInstance } from "axios"
 let _mainClient: AxiosInstance | null = null
 let _authClient: AxiosInstance | null = null
 
+// Debounce flag so a burst of failing requests only triggers one recovery.
+let _sessionLossHandled = false
+
+/**
+ * Whether the client currently presents the user as logged in. Read from the
+ * auth store, falling back to the persisted copy the store hydrates from — the
+ * whole problem being solved here is that this can be true while the server no
+ * longer accepts the session.
+ */
+function clientThinksItIsSignedIn(): boolean {
+	try {
+		const authStore = useAuthStore() as any
+		if (typeof authStore?.signedIn === "boolean") return authStore.signedIn
+	} catch (_) {
+		// store not available in this context — fall through to localStorage
+	}
+	try {
+		return !!JSON.parse(localStorage.getItem("auth-store") || "{}")?.signedIn
+	} catch (_) {
+		return false
+	}
+}
+
 const SUPPORTED_LOCALES = ["en", "pt-BR", "es", "de", "ro", "ar-AE"]
 
 function resolveLang(): string {
@@ -104,9 +128,59 @@ function getAuthClient(): AxiosInstance {
 		return config
 	})
 
+	// Session-loss handling. The auth store persists `signedIn`/`user` in
+	// localStorage, so the UI keeps rendering a logged-in user (and every
+	// key-campaign CTA stays enabled) even after the httpOnly `oauth_token`
+	// cookie is gone or no longer accepted. The first thing the user notices is
+	// a raw backend "Unauthorized" under the submit button. Clearing the
+	// credentials here puts the client back into a real guest state so the page
+	// can offer a re-login instead of an untranslated dead end.
+	_authClient.interceptors.response.use(
+		(response) => response,
+		(error) => {
+			const status = error?.response?.status
+			if (typeof window !== "undefined" && (status === 401 || status === 419)) {
+				error.isSessionExpired = true
+				// Only tear down a session that the client still believes in. A
+				// guest browsing the campaign list also gets 401s from the
+				// auth-only endpoints on this client (campaign types, my
+				// requests), and running the whole recovery — cookie wipe plus a
+				// POST /logout — on every one of those is pure noise.
+				if (!_sessionLossHandled && clientThinksItIsSignedIn()) {
+					_sessionLossHandled = true
+					try {
+						clearAuthCredentials()
+					} catch (_) {
+						// store/runtime config not available in this context
+					}
+					// Allow another recovery later (covers a genuinely new failure)
+					setTimeout(() => {
+						_sessionLossHandled = false
+					}, 10000)
+				}
+			}
+			return Promise.reject(error)
+		},
+	)
+
 	return _authClient
 }
 
+/** True when a caught error came back as an expired/rejected session. */
+export function isSessionExpired(error: any): boolean {
+	const status = error?.response?.status
+	return error?.isSessionExpired === true || status === 401 || status === 419
+}
+
+/**
+ * Login URL that returns the user to the page they were on. `loginUrl` is the
+ * per-app value injected by TV/community/agency.
+ */
+export function buildReLoginUrl(loginUrl: string): string {
+	const returnTo = typeof window !== "undefined" ? window.location.href : ""
+	return `${loginUrl}?redirect_to=${encodeURIComponent(returnTo)}`
+}
+
 // Lazy proxies so the clients are only initialised when first used
 const mainClient = new Proxy({} as AxiosInstance, {
 	get(_t, prop) {
@@ -332,6 +406,8 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		press_kit_link: k.press_kit_link ?? null,
 		review_guideline: k.review_guideline ?? null,
 		embargo_date: k.embargo_date ?? null,
+		embargo_timezone: k.embargo_timezone ?? null,
+		embargo_active: k.embargo_active ?? false,
 		request_id: k.requests?.[0]?.id,
 		request_item_id: k.requests?.[0]?.key_item_id,
 		request_admin_notes: k.requests?.[0]?.admin_notes ?? null,

package/utils/clearSession.ts

@@ -74,6 +74,28 @@ export function clearAuthCredentials() {
 	} catch (_) {
 		// store not available in this context
 	}
+
+	// The main session cookie (oauth_token) is httpOnly — the expireCookie()
+	// loop above can never touch it (that's the whole point of httpOnly, XSS
+	// protection), so a stale/invalid token kept being resent on every
+	// request and the user stayed stuck in a 401 loop until a MANUAL logout,
+	// which works only because it round-trips through the server and gets a
+	// real Set-Cookie expiry back. Fire that same call here, best-effort:
+	// even if it fails (network hiccup, cross-domain Set-Cookie stripped by
+	// a CDN — a known risk, see file docblock above), the cookie-loop +
+	// authStore.clearUser() already got the client into a clean guest state.
+	try {
+		const runtimeConfig = useRuntimeConfig();
+		const apiBaseURL = runtimeConfig.public.mgSharedUi?.apiBaseURL || runtimeConfig.public.apiBaseURL;
+		if (apiBaseURL) {
+			fetch(`${String(apiBaseURL).replace(/\/$/, "")}/logout`, {
+				method: "POST",
+				credentials: "include",
+			}).catch(() => {});
+		}
+	} catch (_) {
+		// runtime config not available in this context (e.g. outside a Nuxt app)
+	}
 }
 
 /**

package/utils/embargo.ts

@@ -0,0 +1,125 @@
+/**
+ * Embargo formatting for key campaigns.
+ *
+ * An embargo is a day AND a time: "August 12" alone is not something a creator
+ * can comply with — publishing at 09:00 or at 23:00 on that day are very
+ * different acts. The API stores `embargo_date` as an instant (UTC) plus the
+ * `embargo_timezone` the campaign creator confirmed it in.
+ *
+ * Both matter to the creator, so both are shown: the campaign's own wall-clock
+ * (how the studio communicates the embargo everywhere else) and, when the
+ * viewer is somewhere else, the same instant on their own clock — so nobody has
+ * to do timezone arithmetic to know when they may publish.
+ */
+
+/** True while the embargo is set and has not lifted yet. */
+export function isEmbargoActive(dateString: string | null | undefined): boolean {
+	if (!dateString) return false
+	const date = new Date(dateString)
+	return !isNaN(date.getTime()) && date.getTime() > Date.now()
+}
+
+/**
+ * How long until the embargo lifts, localized: "em 12 dias", "amanhã",
+ * "em 5 horas". Creators request keys days before release, so a bare date is
+ * easy to lose track of — the countdown is what actually sticks.
+ *
+ * Returns "" once the embargo has lifted (or when there is none).
+ */
+export function formatEmbargoCountdown(
+	dateString: string | null | undefined,
+	locale: string,
+): string {
+	if (!isEmbargoActive(dateString)) return ""
+	const diffMs = new Date(dateString as string).getTime() - Date.now()
+
+	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" })
+	const minutes = Math.round(diffMs / 60000)
+	if (minutes < 60) return rtf.format(Math.max(minutes, 1), "minute")
+
+	const hours = Math.round(diffMs / 3600000)
+	if (hours < 24) return rtf.format(hours, "hour")
+
+	return rtf.format(Math.round(diffMs / 86400000), "day")
+}
+
+function format(
+	date: Date,
+	locale: string,
+	timeZone?: string,
+	timeZoneName: "short" | "long" = "short",
+): string {
+	return new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "long",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		timeZoneName,
+		...(timeZone ? { timeZone } : {}),
+	}).format(date)
+}
+
+/** Time only — used for the local equivalent when it lands on the same day. */
+function formatTime(date: Date, locale: string, timeZone?: string): string {
+	return new Intl.DateTimeFormat(locale, {
+		hour: "2-digit",
+		minute: "2-digit",
+		timeZoneName: "short",
+		...(timeZone ? { timeZone } : {}),
+	}).format(date)
+}
+
+/** Calendar day in a given zone, as a comparable "en-CA" YYYY-MM-DD string. */
+function dayIn(date: Date, timeZone?: string): string {
+	return new Intl.DateTimeFormat("en-CA", {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		...(timeZone ? { timeZone } : {}),
+	}).format(date)
+}
+
+/**
+ * Full embargo moment: the campaign's own wall-clock, named in the viewer's
+ * language, plus the same instant on the viewer's clock when they differ.
+ * e.g. "12 de agosto de 2026 às 14:00 Horário Padrão de Brasília — 19:00 GMT+2"
+ *
+ * Returns "" for a missing/invalid date so callers can `v-if` on it.
+ */
+export function formatEmbargoDateTime(
+	dateString: string | null | undefined,
+	timezone: string | null | undefined,
+	locale: string,
+): string {
+	if (!dateString) return ""
+	const date = new Date(dateString)
+	if (isNaN(date.getTime())) return ""
+
+	const viewerZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+
+	if (!timezone || timezone === viewerZone) {
+		return format(date, locale)
+	}
+
+	try {
+		// "long" names the zone in the viewer's own language ("Horário Padrão de
+		// Brasília", "Ora standard a Brasiliei"). Deriving a label from the IANA
+		// id instead would print ASCII city names ("Sao Paulo", no tilde) in
+		// every language.
+		const campaign = format(date, locale, timezone, "long")
+		// Two zones on the same offset right now — the local line would be a
+		// verbatim repeat and just look like a bug.
+		if (formatTime(date, locale, timezone) === formatTime(date, locale)) {
+			return campaign
+		}
+		const local = dayIn(date, timezone) === dayIn(date)
+			? formatTime(date, locale)
+			: format(date, locale)
+		return `${campaign} — ${local}`
+	} catch {
+		// Unknown/invalid IANA zone recorded on the campaign: never let the
+		// embargo line disappear because of it.
+		return format(date, locale)
+	}
+}