@mundogamernetwork/shared-ui 1.0.2 → 1.1.0

package/composables/useConfirmation.ts

@@ -0,0 +1,117 @@
+import { usePaymentListener } from "./usePaymentListener";
+
+export type OrderStatus = "paid" | "pending" | "failed" | "canceled" | "";
+
+export interface ConfirmationInvoice {
+	status?: string;
+	payment_gateway?: string;
+	payment_method?: string;
+	code_gateway?: string;
+	payment_link?: string;
+	user?: { email?: string };
+	items?: { data: any[] };
+	currency?: { data?: { code?: string; symbol?: string } };
+	total?: string | number;
+	formatted_total?: string;
+	formatted_original_total?: string;
+	formatted_total_discount?: string;
+	discount_coupon?: { code: string };
+	reference?: string;
+	paid_at?: string;
+	created_at?: string;
+	[key: string]: any;
+}
+
+export function useConfirmation(fetchInvoice: (id: string) => Promise<ConfirmationInvoice>) {
+	const invoiceId = ref<string>("");
+	const cartData = ref<ConfirmationInvoice>({});
+	const displayStatus = ref<OrderStatus>("");
+	const processingTooLong = ref(false);
+
+	const LONG_PENDING_MS = 60_000;
+	let longPendingTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// PayPal = 2, Stripe = 3
+	const paymentMethodId = computed(() => {
+		const sources = [
+			cartData.value?.payment_gateway,
+			cartData.value?.payment_method,
+			cartData.value?.code_gateway,
+			typeof window !== "undefined" ? localStorage.getItem("paymentGateway") : null,
+		]
+			.filter(Boolean)
+			.join(" ")
+			.toLowerCase();
+
+		if (sources.includes("stripe") || sources.includes("credit") || sources.includes("card")) return 3;
+		return 2;
+	});
+
+	const hasKnownPaymentMethod = computed(() => {
+		const fromInvoice = [
+			cartData.value?.payment_gateway,
+			cartData.value?.payment_method,
+			cartData.value?.code_gateway,
+		].some(Boolean);
+		const fromStorage = typeof window !== "undefined" && !!localStorage.getItem("paymentGateway");
+		return fromInvoice || fromStorage;
+	});
+
+	const getInvoiceData = async (): Promise<boolean> => {
+		if (!invoiceId.value) return false;
+		try {
+			const data = await fetchInvoice(invoiceId.value);
+			cartData.value = data;
+			displayStatus.value = (data.status as OrderStatus) ?? "";
+			return data.status !== "pending";
+		} catch {
+			return false;
+		}
+	};
+
+	const cancelLongPendingTimer = () => {
+		if (longPendingTimer) {
+			clearTimeout(longPendingTimer);
+			longPendingTimer = null;
+		}
+	};
+
+	const { cancelSafetyNets } = usePaymentListener(
+		invoiceId,
+		() => getInvoiceData(),
+		() => {
+			cancelSafetyNets();
+			cancelLongPendingTimer();
+			displayStatus.value = "failed";
+		},
+		() => {
+			cancelSafetyNets();
+			cancelLongPendingTimer();
+			displayStatus.value = "canceled";
+		},
+	);
+
+	const init = async (id: string) => {
+		invoiceId.value = id;
+		await getInvoiceData();
+
+		if (displayStatus.value === "pending") {
+			longPendingTimer = setTimeout(() => {
+				if (displayStatus.value === "pending") processingTooLong.value = true;
+			}, LONG_PENDING_MS);
+		}
+	};
+
+	onUnmounted(cancelLongPendingTimer);
+
+	return {
+		invoiceId,
+		cartData,
+		displayStatus,
+		processingTooLong,
+		paymentMethodId,
+		hasKnownPaymentMethod,
+		getInvoiceData,
+		init,
+	};
+}

package/composables/useForceLogout.ts

@@ -0,0 +1,73 @@
+/**
+ * Subscribes to the user's private WS channel and reacts immediately when the
+ * server broadcasts a `force-logout` event (triggered by logout from any
+ * platform, or by revoking a device/app from account settings).
+ *
+ * Usage: call `useForceLogout(loginUrl)` once in your app.vue or root layout.
+ * The composable is a no-op when the user is not signed in or Echo is absent.
+ */
+import { clearClientSession } from "../utils/clearSession";
+
+export function useForceLogout(loginUrl: string) {
+	const authStore = useAuthStore();
+	const { user, signedIn } = storeToRefs(authStore);
+
+	let currentUserId: number | null = null;
+
+	const getNumericId = (): number | null => {
+		if (!user.value) return null;
+		const id =
+			(user.value as any).numeric_id ??
+			(user.value as any).user_id ??
+			(user.value as any).id;
+		return id && !isNaN(Number(id)) ? Number(id) : null;
+	};
+
+	const unsubscribe = () => {
+		if (currentUserId && typeof window !== "undefined" && window.Echo) {
+			// Leave only if no other consumer (e.g. notifications) is keeping the channel open.
+			// Echo reference-counts channels; calling leave() here is safe.
+			window.Echo.leaveChannel(`private-App.Models.User.${currentUserId}`);
+			currentUserId = null;
+		}
+	};
+
+	const subscribe = (numericId: number) => {
+		if (!window.Echo) return;
+		currentUserId = numericId;
+		window.Echo.private(`App.Models.User.${numericId}`).listen(
+			".force-logout",
+			(_data: { source: string }) => {
+				// Full client reset so a stale token can never block the next login.
+				clearClientSession();
+				window.location.href = loginUrl;
+			},
+		);
+	};
+
+	watch(
+		signedIn,
+		(val) => {
+			if (val) {
+				const id = getNumericId();
+				if (id) subscribe(id);
+			} else {
+				unsubscribe();
+			}
+		},
+		{ immediate: true },
+	);
+
+	// Also watch user ID in case it resolves after signedIn flips
+	watch(
+		() => getNumericId(),
+		(id) => {
+			if (signedIn.value && id && id !== currentUserId) {
+				unsubscribe();
+				subscribe(id);
+			}
+		},
+	);
+
+	onUnmounted(unsubscribe);
+}

package/composables/usePaymentListener.ts

@@ -0,0 +1,81 @@
+import type { Ref } from "vue";
+
+export function usePaymentListener(
+	invoiceId: Ref<string | null | undefined>,
+	onPaid: () => void,
+	onFailed?: () => void,
+	onCanceled?: () => void,
+) {
+	const safetyNetTimers: ReturnType<typeof setTimeout>[] = [];
+	const SAFETY_NET_DELAYS = [5_000, 15_000, 30_000];
+	const SAFETY_NET_INTERVAL_MS = 30_000;
+	let safetyNetAttempt = 0;
+	let currentInvoiceId: string | null = null;
+
+	const scheduleSafetyNet = (checkFn: () => Promise<boolean>) => {
+		const delay =
+			safetyNetAttempt < SAFETY_NET_DELAYS.length
+				? SAFETY_NET_DELAYS[safetyNetAttempt++]
+				: SAFETY_NET_INTERVAL_MS;
+
+		const timer = setTimeout(async () => {
+			const resolved = await checkFn();
+			if (!resolved) scheduleSafetyNet(checkFn);
+		}, delay);
+
+		safetyNetTimers.push(timer);
+	};
+
+	const cancelSafetyNets = () => {
+		safetyNetTimers.forEach(clearTimeout);
+		safetyNetTimers.length = 0;
+		safetyNetAttempt = 0;
+	};
+
+	const subscribe = (invoiceIdValue: string, checkFn?: () => Promise<boolean>) => {
+		if (!window.Echo) return;
+
+		currentInvoiceId = invoiceIdValue;
+		const channel = window.Echo.channel(`invoice.${invoiceIdValue}`);
+
+		channel.listen(".invoice.paid", () => {
+			cancelSafetyNets();
+			onPaid();
+		});
+
+		channel.listen(".invoice.failed", () => {
+			cancelSafetyNets();
+			onFailed?.();
+		});
+
+		channel.listen(".invoice.canceled", () => {
+			cancelSafetyNets();
+			onCanceled?.();
+		});
+
+		if (checkFn) {
+			scheduleSafetyNet(checkFn);
+		}
+	};
+
+	const unsubscribe = () => {
+		cancelSafetyNets();
+		if (currentInvoiceId && window.Echo) {
+			window.Echo.leaveChannel(`invoice.${currentInvoiceId}`);
+			currentInvoiceId = null;
+		}
+	};
+
+	watch(
+		invoiceId,
+		(id) => {
+			unsubscribe();
+			if (id) subscribe(id);
+		},
+		{ immediate: true },
+	);
+
+	onUnmounted(unsubscribe);
+
+	return { subscribe, unsubscribe, scheduleSafetyNet, cancelSafetyNets };
+}

package/error.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-const error = useError();
+import { HttpStatusCode } from "axios";
+import { clearAuthCredentials, clearClientSession } from "./utils/clearSession";
 
 interface CustomError {
 	url: string;
@@ -10,131 +11,77 @@ interface CustomError {
 	data?: any;
 }
 
+const error = useError();
 const statusCodeError = Number((error.value as CustomError)?.statusCode) || 404;
 
-const authStore = useAuthStore();
+// Do NOT call getUser() on error page — causes infinite loop when API is down or token expired
 
-onMounted(async () => {
+// Recovery banner: auto-reload for 5xx errors so users aren't stuck
+const isRecoverableError = computed(
+	() => statusCodeError >= 500 || statusCodeError === 0,
+);
+const countdown = ref(15);
+let countdownInterval: ReturnType<typeof setInterval> | null = null;
+
+function resetAndReload() {
+	if (countdownInterval) clearInterval(countdownInterval);
+	clearClientSession();
 	try {
-		await authStore.getUser();
-	} catch {
-		// Silently handle auth failure on error pages
+		(window.location as any).reload(true);
+	} catch (_) {
+		window.location.href = window.location.href;
 	}
-});
-
-const locale = useNuxtApp().$i18n?.locale?.value || "en";
-
-const errorConfig: Record<number, { title: string; description: string; icon: string }> = {
-	401: { title: "errors.401.title", description: "errors.401.description", icon: "lock" },
-	403: { title: "errors.403.title", description: "errors.403.description", icon: "lock" },
-	404: { title: "errors.404.title", description: "errors.404.description", icon: "search" },
-	500: { title: "errors.500.title", description: "errors.500.description", icon: "warning" },
-	503: { title: "errors.503.title", description: "errors.503.description", icon: "warning" },
-	504: { title: "errors.504.title", description: "errors.504.description", icon: "clock" },
-};
+}
 
-const currentError = computed(() => errorConfig[statusCodeError] || errorConfig[404]);
+onMounted(() => {
+	if (!isRecoverableError.value) return;
+	// Break the stale-cookie loop right away: clear ONLY auth credentials so the
+	// page (and the next reload) works as guest, without wiping cart/preferences.
+	clearAuthCredentials();
+	countdownInterval = setInterval(() => {
+		countdown.value -= 1;
+		if (countdown.value <= 0) resetAndReload();
+	}, 1000);
+});
 
-function goHome() {
-	clearError({ redirect: `/${locale}` });
-}
+onUnmounted(() => {
+	if (countdownInterval) clearInterval(countdownInterval);
+});
 </script>
 
 <template>
 	<NuxtLayout>
-		<div class="error-page">
-			<div class="error-content">
-				<div class="error-icon">
-					<MGIcon :icon="currentError.icon" size="3x" />
-				</div>
-				<h1 class="error-code">{{ statusCodeError }}</h1>
-				<h2 class="error-title">{{ $t(currentError.title) }}</h2>
-				<p class="error-description">{{ $t(currentError.description) }}</p>
-
-				<div v-if="statusCodeError === 404" class="error-suggestions">
-					<ul>
-						<li>{{ $t("errors.404.suggestion_1") }}</li>
-						<li>{{ $t("errors.404.suggestion_2") }}</li>
-						<li>{{ $t("errors.404.suggestion_3") }}</li>
-					</ul>
-				</div>
-
-				<button class="btn-home" @click="goHome">
-					{{ $t("errors.go_home") }}
-				</button>
-			</div>
-		</div>
+		<errors401 v-if="statusCodeError === HttpStatusCode.Unauthorized" />
+		<errors403 v-else-if="statusCodeError === HttpStatusCode.Forbidden" />
+		<errors404 v-else-if="statusCodeError === HttpStatusCode.NotFound" />
+		<errors500 v-else-if="statusCodeError === HttpStatusCode.InternalServerError" />
+		<errors503 v-else-if="statusCodeError === HttpStatusCode.ServiceUnavailable" />
+		<errors504 v-else-if="statusCodeError === HttpStatusCode.GatewayTimeout" />
+		<errors500 v-else />
+
+		<p v-if="isRecoverableError" class="recovery-line">
+			{{ $t("errors.recovery_hint") }}
+			<a class="recovery-link" @click="resetAndReload">
+				{{ $t("errors.recovery_button") }} ({{ countdown }}s)
+			</a>
+		</p>
 	</NuxtLayout>
 </template>
 
-<style lang="scss" scoped>
-.error-page {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	min-height: 60vh;
-	padding: 32px;
-}
-
-.error-content {
+<style scoped lang="scss">
+.recovery-line {
 	text-align: center;
-	max-width: 480px;
-
-	.error-icon {
-		color: var(--inactive);
-		margin-bottom: 16px;
-	}
-
-	.error-code {
-		font-size: 72px;
-		font-weight: 700;
-		color: var(--chip-text);
-		line-height: 1;
-		margin-bottom: 8px;
-	}
-
-	.error-title {
-		font-size: 28px;
-		font-weight: 600;
-		color: var(--card-cover-title);
-		margin-bottom: 12px;
-	}
-
-	.error-description {
-		font-size: 14px;
-		line-height: 20px;
-		color: var(--inactive);
-		margin-bottom: 24px;
-	}
-
-	.error-suggestions {
-		text-align: left;
-		margin-bottom: 24px;
-
-		ul {
-			list-style: disc;
-			padding-left: 20px;
-
-			li {
-				font-size: 13px;
-				line-height: 22px;
-				color: var(--inactive);
-			}
-		}
-	}
-
-	.btn-home {
-		padding: 10px 32px;
-		background: var(--chip-text);
-		color: var(--chip-background-2);
-		border: none;
-		font-size: 14px;
-		font-weight: 600;
-		cursor: pointer;
-
-		&:hover {
-			opacity: 0.9;
-		}
-	}
+	font-size: 0.8rem;
+	color: var(--inactive, #888);
+	margin: 1.5rem auto 2.5rem;
+	padding: 0 1rem;
+}
+.recovery-link {
+	color: var(--highlight-color, #ff7700);
+	cursor: pointer;
+	text-decoration: underline;
+	white-space: nowrap;
+	margin-left: 0.35rem;
+	&:hover { opacity: 0.85; }
 }
 </style>

package/package.json

@@ -1,42 +1,42 @@
 {
-	"name": "@mundogamernetwork/shared-ui",
-	"version": "1.0.2",
-	"description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
-	"type": "module",
-	"main": "./nuxt.config.ts",
-	"files": [
-		"assets",
-		"components",
-		"composables",
-		"middleware",
-		"pages",
-		"plugins",
-		"services",
-		"stores",
-		"types",
-		"utils",
-		"error.vue",
-		"nuxt.config.ts"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"dev": "nuxi dev .playground",
-		"build": "nuxi build .playground"
-	},
-	"peerDependencies": {
-		"@pinia/nuxt": ">=0.5.0",
-		"@pinia-plugin-persistedstate/nuxt": ">=1.0.0",
-		"axios": ">=1.0.0",
-		"laravel-echo": ">=1.15.0",
-		"nuxt": ">=3.13.0",
-		"pinia": ">=2.1.0",
-		"pusher-js": ">=8.0.0",
-		"vue": ">=3.5.0"
-	},
-	"devDependencies": {
-		"nuxt": "^3.15.4",
-		"typescript": "^5.0.0"
-	}
-}
+  "name": "@mundogamernetwork/shared-ui",
+  "version": "1.1.0",
+  "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "files": [
+    "assets",
+    "components",
+    "composables",
+    "middleware",
+    "pages",
+    "plugins",
+    "services",
+    "stores",
+    "types",
+    "utils",
+    "error.vue",
+    "nuxt.config.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "build": "nuxi build .playground"
+  },
+  "peerDependencies": {
+    "@pinia/nuxt": ">=0.5.0",
+    "@pinia-plugin-persistedstate/nuxt": ">=1.0.0",
+    "axios": ">=1.0.0",
+    "laravel-echo": ">=1.15.0",
+    "nuxt": ">=3.13.0",
+    "pinia": ">=2.1.0",
+    "pusher-js": ">=8.0.0",
+    "vue": ">=3.5.0"
+  },
+  "devDependencies": {
+    "nuxt": "^3.15.4",
+    "typescript": "^5.0.0"
+  }
+}

package/services/httpService.ts

@@ -1,13 +1,39 @@
 import type { UseFetchOptions } from "#app";
 import axios, { type AxiosInstance } from "axios";
+import { clearAuthCredentials } from "../utils/clearSession";
 
 let _httpService: AxiosInstance | null = null;
 
+// Debounce flags so a burst of failing requests only triggers one recovery.
+const _recovery = { handling: false };
+
+/**
+ * Detected session loss → clear the stale auth credentials client-side so the
+ * NEXT request is a clean guest request and the user can load the site + log in
+ * again. Never blocks rendering; always resolves to guest.
+ */
+function recoverFromSessionLoss() {
+	if (typeof window === "undefined" || _recovery.handling) return;
+	_recovery.handling = true;
+	try {
+		clearAuthCredentials();
+	} catch (_) {}
+	// Allow another recovery after a cooldown (covers genuinely new failures)
+	setTimeout(() => { _recovery.handling = false; }, 10000);
+}
+
 export function getHttpService(): AxiosInstance {
 	if (_httpService) return _httpService;
 
+	// Normalize baseURL so it always ends with /api/v1.
+	// Some projects set VITE_API_BASE_URL=https://host/api/v1 (already correct),
+	// others set VITE_API_BASE_URL=https://host (without the path).
+	// Appending /api/v1 only when absent makes both work with the same service paths.
+	const rawBase = (import.meta.env.VITE_API_BASE_URL as string) || "";
+	const baseURL = rawBase.endsWith("/api/v1") ? rawBase : rawBase.replace(/\/$/, "") + "/api/v1";
+
 	_httpService = axios.create({
-		baseURL: import.meta.env.VITE_API_BASE_URL,
+		baseURL,
 		withCredentials: true,
 	});
 
@@ -16,10 +42,26 @@ export function getHttpService(): AxiosInstance {
 		(error) => {
 			if (typeof window !== "undefined" && error?.response) {
 				const status = error.response.status;
-				const url = error.config?.url ?? "";
-				const isAuthEndpoint = url.includes("/auth/");
+				const url: string = error.config?.url ?? "";
+				// The auth/user (or /users/me) probe is the canonical session check.
+				const isAuthProbe = /\/auth\/user(\?|$)|\/users\/me(\?|$)/.test(url);
+
+				// 401 on the auth probe = the session is genuinely gone (expired/invalid
+				// token). Clear the stale credentials so the loop breaks and the user
+				// can log in again. A 401 from any other endpoint is route-level denial,
+				// NOT a dead session — leave it to the caller.
+				if (status === 401 && isAuthProbe) {
+					recoverFromSessionLoss();
+				}
+
+				// 5xx while a credentialed request is in flight is the classic
+				// stale-oauth_token loop (OAuth rejects → 500). Clear client-side so
+				// the next load is a clean guest instead of an infinite failure.
+				if (status >= 500) {
+					recoverFromSessionLoss();
+				}
 
-				if (!isAuthEndpoint && (status === 403 || status === 500 || status === 502 || status === 503)) {
+				if (!isAuthProbe && (status === 403 || status === 500 || status === 502 || status === 503)) {
 					console.error(`[HTTP] Error ${status}:`, error.response?.data?.message || "");
 				}
 			}

package/services/mediaKitService.ts

@@ -2,10 +2,10 @@ import axios, { type AxiosInstance } from "axios"
 
 // Media Kit data is served by the api-main Shared\MediaKit module, now registered
 // in every service. A dedicated client lets each project point at the API host that
-// serves it without the /api/v1 base-URL inconsistency between projects:
-//   - community: VITE_MEDIA_KIT_API_URL=https://api.mundogamer.community (same-origin)
-//   - tv / agency: leave unset → fall back to their own VITE_API_BASE_URL
-// The request path carries the /api/v1 prefix, so the base must NOT include it.
+// serves it. The request path does NOT carry /api/v1, so the base MUST include it
+// (identical convention to pressKitService — keep them consistent):
+//   - community: VITE_MEDIA_KIT_API_URL=https://api.mundogamer.community/api/v1 (same-origin)
+//   - tv / agency: leave unset → fall back to VITE_API_BASE_URL (already ends in /api/v1)
 let _client: AxiosInstance | null = null
 
 function getClient(): AxiosInstance {
@@ -46,9 +46,9 @@ const mk = new Proxy({} as AxiosInstance, {
 export default mk
 
 export const fetchPublicMediaKit = (slug: string) =>
-	mk.get(`/api/v1/media-kit/${slug}`)
+	mk.get(`media-kit/${slug}`)
 
 export const trackMediaKitEvent = (
 	userId: number | string,
 	data: { type?: "view" | "click" | "download" | "contact"; referrer?: string } = {},
-) => mk.post(`/api/v1/media-kit/${userId}/track`, data)
+) => mk.post(`media-kit/${userId}/track`, data)