@mundogamernetwork/shared-ui 1.13.4 → 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,14 +25,25 @@ 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.
@@ -53,8 +66,15 @@ function unwrapSummary(payload: any): GamificationSummary | null {
 	return null;
 }
 
-const summary = ref<GamificationSummary | null>(null);
-const loaded = ref(false);
+const fetchedSummary = ref<GamificationSummary | null>(null);
+const selfLoaded = 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);
@@ -70,7 +90,7 @@ 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(() => {
@@ -95,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 = unwrapSummary(response?.data);
+		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.4",
+  "version": "1.13.5",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

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