@mundogamernetwork/shared-ui 1.8.16 → 1.8.17

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)
+	}
+}