@mundogamernetwork/shared-ui 1.13.3 → 1.13.5

package/components/ui/MgXpLevelBar.vue

@@ -5,13 +5,15 @@ import { fetchGamificationSummary, type GamificationSummary } from "../../servic
 const props = withDefaults(
 	defineProps<{
 		/**
-		 * Where to send the user to see and claim their tasks. Only Community
-		 * hosts those pages, so leaving this unset points at Community — which
-		 * is the right destination from every other front. Community itself
-		 * passes its own internal route to avoid a full page load.
+		 * Where to send the user to see and claim their tasks. The missions
+		 * list is centralized on network-accounts (one page, every platform,
+		 * with cross-vertical filters) — leaving this unset points there,
+		 * which is the right destination from every front. A front that still
+		 * has its own local missions page should pass its own internal route
+		 * here to avoid a full page load; most no longer do.
 		 */
 		missionsUrl?: string;
-		/** Locale segment for the default Community destination. */
+		/** Locale segment for the default network-accounts destination. */
 		locale?: string;
 		/** Renders without the title line, for tight spaces. */
 		compact?: boolean;
@@ -23,17 +25,56 @@ const props = withDefaults(
 		mgcBalance?: number | null;
 		/** Hide the balance where the host already shows it elsewhere. */
 		showBalance?: boolean;
+		/**
+		 * Pre-fetched summary from a call the host already makes elsewhere
+		 * (e.g. its own dashboard composable, through its own configured HTTP
+		 * client). When set — even to `null` while the host's own fetch is
+		 * still resolving — this component skips its internal fetch entirely,
+		 * avoiding a second request to the same endpoint through a second,
+		 * independently-configured base URL that can drift from the host's
+		 * own over time. Leave unset (`undefined`) to keep the original
+		 * self-fetching behaviour.
+		 */
+		summary?: GamificationSummary | null;
 	}>(),
-	{ missionsUrl: "", locale: "", compact: false, mgcBalance: null, showBalance: true },
+	{ missionsUrl: "", locale: "", compact: false, mgcBalance: null, showBalance: true, summary: undefined },
 );
 
 const emit = defineEmits<{ (e: "navigate"): void }>();
 
-/** Missions and the reward store live on Community for the whole ecosystem. */
-const COMMUNITY_URL = "https://mundogamer.community";
+/** The centralized missions page lives on network-accounts for the whole ecosystem. */
+const ACCOUNTS_URL = "https://accounts.mundogamer.network";
+
+/**
+ * Dig out the payload regardless of how many envelopes wrap it.
+ *
+ * The API nests deeper than its own sendResponse() suggests — the gateway adds
+ * a second {message,data,status_code} layer on top, so the payload sits at
+ * response.data.data.data rather than response.data.data. Reading a fixed
+ * depth silently returned the inner envelope, which has no `level`, so the bar
+ * loaded and vanished on a perfectly good 200. Walking down until the shape
+ * appears survives either nesting.
+ */
+function unwrapSummary(payload: any): GamificationSummary | null {
+	let node = payload;
+
+	for (let depth = 0; depth < 4 && node && typeof node === "object"; depth += 1) {
+		if (node.level || node.wallet || node.missions) return node as GamificationSummary;
+		node = node.data;
+	}
+
+	return null;
+}
+
+const fetchedSummary = ref<GamificationSummary | null>(null);
+const selfLoaded = ref(false);
 
-const summary = ref<GamificationSummary | null>(null);
-const loaded = ref(false);
+/** The host manages this prop as soon as it's bound, even before its own fetch resolves — `undefined` only when the prop was never passed at all. */
+const isHostManaged = computed(() => props.summary !== undefined);
+const summary = computed(() => (isHostManaged.value ? props.summary ?? null : fetchedSummary.value));
+// Host-managed: loaded once the host's data actually arrives (an unresolved
+// host fetch must keep showing the skeleton, not the empty/hidden state).
+const loaded = computed(() => (isHostManaged.value ? summary.value !== null : selfLoaded.value));
 
 const level = computed(() => summary.value?.level ?? null);
 const claimable = computed(() => summary.value?.missions?.claimable_count ?? 0);
@@ -49,13 +90,18 @@ const destination = computed(() => {
 		(typeof document !== "undefined" ? document.documentElement.lang : "") ||
 		"en";
 
-	return `${COMMUNITY_URL}/${locale}/gamification/missions`;
+	return `${ACCOUNTS_URL}/${locale}/account/missions`;
 });
 
 const balance = computed(() => {
 	const fromHost = props.mgcBalance;
 	const value = fromHost !== null && fromHost !== undefined ? fromHost : summary.value?.wallet?.balance;
-	return typeof value === "number" ? Math.floor(value).toLocaleString() : null;
+	// The API sends the balance as a decimal string ("1801.50"), not a number.
+	const numeric = typeof value === "string" ? Number(value) : value;
+
+	return typeof numeric === "number" && Number.isFinite(numeric)
+		? Math.floor(numeric).toLocaleString()
+		: null;
 });
 
 // progress_percent comes from the API; the local computation is a fallback for
@@ -69,18 +115,20 @@ const percent = computed(() => {
 });
 
 onMounted(async () => {
+	if (isHostManaged.value) return; // host supplies (and reactively updates) props.summary itself
+
 	try {
 		const response = await fetchGamificationSummary();
-		summary.value = response?.data?.data ?? response?.data ?? null;
+		fetchedSummary.value = unwrapSummary(response?.data);
 	} catch (error) {
 		// Never let a gamification hiccup break the header it sits in — but say
 		// so. Swallowing this silently made a deployed bar that renders nothing
 		// indistinguishable from a bar that was never deployed, and cost hours
 		// of bundle forensics to tell apart.
 		console.warn("[MgXpLevelBar] gamification dashboard unavailable", error);
-		summary.value = null;
+		fetchedSummary.value = null;
 	} finally {
-		loaded.value = true;
+		selfLoaded.value = true;
 	}
 });
 </script>

package/package.json

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

package/services/gamificationService.ts

@@ -18,7 +18,8 @@ export interface XpLevel {
 
 export interface GamificationSummary {
 	level: XpLevel;
-	wallet: { balance: number; lifetime_earned: number };
+	/** The API serialises these as decimal strings, not numbers. */
+	wallet: { balance: number | string; lifetime_earned: number | string };
 	missions: { active: any[]; claimable_count: number };
 	achievements: { total_unlocked: number; recent: any[] };
 }

package/services/httpService.ts

@@ -37,6 +37,19 @@ export function getHttpService(): AxiosInstance {
 		withCredentials: true,
 	});
 
+	// Dev-only bearer token injection lives on `defaults.headers.common` rather
+	// than inside the request interceptor below: axios 1.19's `mergeConfig`
+	// (invoked on every dispatch via resolveConfig.js) converts an AxiosHeaders
+	// instance to a plain object via `{ ...thing }` before merging, and an
+	// Authorization value set inside a request interceptor does not survive
+	// that spread — it never reaches the server. Already discovered and fixed
+	// the same way in jobs-frontend's own httpService.ts; this file had the
+	// same bug independently. `defaults.headers.common` goes through axios's
+	// own default-header merge path instead, which does not hit it.
+	if (import.meta.env.VITE_APP_ENV !== "production" && import.meta.env.VITE_BEARER_TOKEN) {
+		_httpService.defaults.headers.common.Authorization = `Bearer ${import.meta.env.VITE_BEARER_TOKEN}`;
+	}
+
 	_httpService.interceptors.response.use(
 		(response) => response,
 		(error) => {
@@ -88,9 +101,6 @@ export function getHttpService(): AxiosInstance {
 		config.params = { ...config.params, lang };
 
 		if (import.meta.env.VITE_APP_ENV !== "production" && typeof window !== "undefined") {
-			if (import.meta.env.VITE_BEARER_TOKEN) {
-				config.headers.Authorization = `Bearer ${import.meta.env.VITE_BEARER_TOKEN}`;
-			}
 			config.headers.set("X-Timezone", Intl.DateTimeFormat().resolvedOptions().timeZone);
 		}