@mundogamernetwork/shared-ui 1.0.3 → 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,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

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/testimoniesService.ts

@@ -0,0 +1,40 @@
+import httpService from "./httpService";
+
+export interface TestimonyParams {
+	page?: number;
+	per_page?: number;
+	[key: string]: any;
+}
+
+const buildQuery = (params: TestimonyParams): string => {
+	const search = new URLSearchParams();
+	for (const [key, value] of Object.entries(params)) {
+		if (value !== undefined && value !== null && value !== "") {
+			search.append(key, String(value));
+		}
+	}
+	const qs = search.toString();
+	return qs ? `?${qs}` : "";
+};
+
+export const getUserTestimonials = (params: TestimonyParams = {}) => {
+	return httpService({
+		url: `/public/user-testimonials${buildQuery(params)}`,
+		baseURL: import.meta.env.VITE_API_BASE_URL,
+	});
+};
+
+export const submitUserTestimonial = (data: {
+	body: string;
+	name: string;
+	role?: string;
+	company?: string;
+	[key: string]: any;
+}) => {
+	return httpService({
+		method: "POST",
+		url: "/public/user-testimonials",
+		data,
+		baseURL: import.meta.env.VITE_API_BASE_URL,
+	});
+};

package/stores/chat.ts

@@ -125,6 +125,26 @@ export const useChatStore = defineStore("chat-store", () => {
 		handleChatMessages(chatId);
 	};
 
+	// WS channels: receiver = user.{platform}.chats.{uuid}
+	//              sender  = user.{platform}.chats.sendMessage.{uuid}
+	const subscribeToChatChannel = (userUuid: string, platformSlug: string, asSender = false) => {
+		if (typeof window === "undefined" || !window.Echo) return;
+		const channelName = asSender
+			? `user.${platformSlug}.chats.sendMessage.${userUuid}`
+			: `user.${platformSlug}.chats.${userUuid}`;
+		window.Echo.private(channelName).listen(".NewChatMessage", (data: any) => {
+			callNewMessage(data);
+		});
+	};
+
+	const unsubscribeFromChatChannel = (userUuid: string, platformSlug: string, asSender = false) => {
+		if (typeof window === "undefined" || !window.Echo) return;
+		const channelName = asSender
+			? `user.${platformSlug}.chats.sendMessage.${userUuid}`
+			: `user.${platformSlug}.chats.${userUuid}`;
+		window.Echo.leaveChannel(`private-${channelName}`);
+	};
+
 	return {
 		hasNewMessage,
 		currentMessageData,
@@ -142,6 +162,8 @@ export const useChatStore = defineStore("chat-store", () => {
 		substituteUserChat,
 		startPollingForMessages,
 		stopAllPolling,
+		subscribeToChatChannel,
+		unsubscribeFromChatChannel,
 	};
 });
 

package/stores/notifications.ts

@@ -10,7 +10,9 @@ import type { MgNotification } from "../types";
 
 export const useNotificationsStore = defineStore("notifications-store", () => {
 	const notifications = ref<MgNotification[]>([]);
-	const notificationCount = ref(0);
+	const unreadCount = ref(0);
+	// Alias kept for backward compat
+	const notificationCount = unreadCount;
 	const totalNotifications = ref(0);
 	const currentPage = ref(1);
 	const loading = ref(false);
@@ -108,12 +110,46 @@ export const useNotificationsStore = defineStore("notifications-store", () => {
 	};
 
 	const addNotification = (notification: MgNotification) => {
+		const key = (notification as any).notification_id ?? notification.id;
+		const exists = key && notifications.value.some((n: any) => ((n.notification_id ?? n.id) === key));
+		if (exists) return;
 		notifications.value.unshift(notification);
 		notificationCount.value++;
 	};
 
+	const mapIncomingNotification = (data: any): MgNotification => ({
+		type: data.mg_network_system_id ?? data.type ?? null,
+		object: data.object ?? data.data?.object ?? null,
+		id: data.notification_id ?? data.id ?? null,
+		slug: data.slug ?? data.data?.slug ?? null,
+		url: data.url ?? data.data?.url ?? null,
+		title: data.title ?? data.data?.title ?? "",
+		message: data.message ?? data.data?.message ?? "",
+		image: data.image ?? data.data?.image ?? "",
+		read_at: null,
+		created_at: data.created_at_diff ?? data.created_at ?? "",
+	});
+
+	const subscribeToUserChannel = (userId: number | string) => {
+		if (typeof window === "undefined" || !window.Echo) return;
+		window.Echo.private(`App.Models.User.${userId}`).notification((data: any) => {
+			addNotification(mapIncomingNotification(data));
+			if (typeof window !== "undefined" && window.Audio) {
+				try {
+					new Audio("/sounds/notification.mp3").play().catch(() => {});
+				} catch {}
+			}
+		});
+	};
+
+	const unsubscribeFromUserChannel = (userId: number | string) => {
+		if (typeof window === "undefined" || !window.Echo) return;
+		window.Echo.leaveChannel(`private-App.Models.User.${userId}`);
+	};
+
 	return {
 		notifications,
+		unreadCount,
 		notificationCount,
 		totalNotifications,
 		currentPage,
@@ -125,6 +161,8 @@ export const useNotificationsStore = defineStore("notifications-store", () => {
 		markAllAsRead,
 		removeNotification,
 		addNotification,
+		subscribeToUserChannel,
+		unsubscribeFromUserChannel,
 	};
 });