npm - @mundogamernetwork/shared-ui - Versions diffs - 1.8.15 → 1.8.17 - Mend

@mundogamernetwork/shared-ui 1.8.15 → 1.8.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/locales/de.json +16 -7
package/locales/en.json +11 -2
package/locales/es.json +379 -0
package/locales/pt-BR.json +16 -7
package/locales/ro.json +16 -7
package/package.json +1 -1
package/pages/key-campaigns/[slug].vue +120 -3
package/pages/key-campaigns/key-materials.vue +26 -2
package/pages/key-campaigns/redeem-key-approved.vue +117 -11
package/pages/key-campaigns/redeem-key.vue +103 -4
package/plugins/seo-tag-priority.ts +67 -0
package/services/campaignService.ts +92 -0
package/utils/clearSession.ts +22 -0
package/utils/embargo.ts +125 -0

package/plugins/seo-tag-priority.ts ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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) {
@@ -306,7 +380,9 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		request_status: k.request_user_status,
 		end: k.end_date,
 		start: k.start_date,
+		is_following: k.is_following ?? false,
 		company: k.company?.name,
+		company_type: k.company?.company_type ?? null,
 		email: k.company?.email,
 		twitter: k.company?.twitter,
 		logo: k.company?.thumbnail_url,
@@ -330,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,
@@ -448,6 +526,20 @@ export const fetchKeyActions = (keyId: number) => {
 	return authClient.get(`/public/keys/${keyId}/actions`)
 }
+/**
+ * Follow/unfollow a specific campaign — a personal reminder distinct from
+ * enableKeyCampaignNotifications() above (a one-time global opt-in to every
+ * eligible campaign). Most useful before a campaign with a future start
+ * date has opened: the user gets notified the moment it does.
+ */
+export const followCampaign = (keyId: number) => {
+	return authClient.post(`/public/keys/${keyId}/follow`)
+}
+export const unfollowCampaign = (keyId: number) => {
+	return authClient.delete(`/public/keys/${keyId}/follow`)
+}
 /**
  * Submit a content material for a key request.
  */

package/utils/clearSession.ts CHANGED Viewed

@@ -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 ADDED Viewed

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