@mundogamernetwork/shared-ui 1.0.0

package/stores/login.ts

@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+
+export const useLoginStore = defineStore({
+	id: "login-store",
+	state: () => {
+		return {
+			showLoginModalComponent: false,
+			login: "",
+		};
+	},
+	actions: {
+		toggleLoginModalComponent() {
+			this.showLoginModalComponent = !this.showLoginModalComponent;
+		},
+		toggleObject(val: any) {
+			this.showLoginModalComponent = !this.showLoginModalComponent;
+			this.login = val.login;
+		},
+		toggleLogin(val: string) {
+			this.login = val;
+		},
+	},
+});
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useLoginStore, import.meta.hot));
+}

package/stores/notifications.ts

@@ -0,0 +1,133 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import {
+	getAllNotifications,
+	markNotificationAsRead,
+	markAllNotificationsAsRead,
+	deleteNotification,
+} from "../services/notificationsService";
+import type { MgNotification } from "../types";
+
+export const useNotificationsStore = defineStore("notifications-store", () => {
+	const notifications = ref<MgNotification[]>([]);
+	const notificationCount = ref(0);
+	const totalNotifications = ref(0);
+	const currentPage = ref(1);
+	const loading = ref(false);
+	const error = ref<string | null>(null);
+
+	const fetchNotifications = async (page: number = 1) => {
+		loading.value = true;
+		try {
+			if (page === 1) {
+				notifications.value = [];
+			}
+
+			const config = useRuntimeConfig();
+			const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+
+			const response = await getAllNotifications({
+				"filter[mg_network_system_id]": systemId,
+				sort: "created_at",
+				order: "desc",
+				per_page: 6,
+				page,
+			});
+
+			totalNotifications.value = response.data.meta.pagination.total;
+			currentPage.value = response.data.meta.pagination.current_page;
+
+			notifications.value.push(
+				...response.data.data.map((notification: any) => ({
+					type: notification.mg_network_system_id,
+					object: notification.data.object || null,
+					id: notification.id || null,
+					slug: notification.data.slug || null,
+					url: notification.data.url || null,
+					title: notification.data.title,
+					message: notification.data.message,
+					image: notification.data.image,
+					read_at: notification.read_at,
+					created_at: notification.created_at_diff,
+				})),
+			);
+
+			await fetchUnreadCount();
+		} catch {
+			error.value = "Failed to fetch notifications";
+		} finally {
+			loading.value = false;
+		}
+	};
+
+	const fetchUnreadCount = async () => {
+		const config = useRuntimeConfig();
+		const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+
+		const response = await getAllNotifications({
+			"filter[mg_network_system_id]": systemId,
+			"filter[read]": 0,
+			total: 1,
+		});
+		notificationCount.value = response.data.total;
+	};
+
+	const markAsRead = async (notificationId: string) => {
+		try {
+			await markNotificationAsRead(notificationId);
+			notifications.value = notifications.value.map((n) =>
+				n.id === notificationId ? { ...n, read_at: new Date().toISOString() } : n,
+			);
+			await fetchUnreadCount();
+		} catch {
+			error.value = "Failed to mark notification as read";
+		}
+	};
+
+	const markAllAsRead = async () => {
+		try {
+			await markAllNotificationsAsRead();
+			notificationCount.value = 0;
+			notifications.value = notifications.value.map((n) => ({
+				...n,
+				read_at: new Date().toISOString(),
+			}));
+		} catch {
+			error.value = "Failed to mark all notifications as read";
+		}
+	};
+
+	const removeNotification = async (notificationId: string) => {
+		try {
+			await deleteNotification(notificationId);
+			notifications.value = notifications.value.filter((n) => n.id !== notificationId);
+			await fetchUnreadCount();
+		} catch {
+			error.value = "Failed to delete notification";
+		}
+	};
+
+	const addNotification = (notification: MgNotification) => {
+		notifications.value.unshift(notification);
+		notificationCount.value++;
+	};
+
+	return {
+		notifications,
+		notificationCount,
+		totalNotifications,
+		currentPage,
+		loading,
+		error,
+		fetchNotifications,
+		fetchUnreadCount,
+		markAsRead,
+		markAllAsRead,
+		removeNotification,
+		addNotification,
+	};
+});
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useNotificationsStore, import.meta.hot));
+}

package/stores/promotion.ts

@@ -0,0 +1,154 @@
+import { defineStore } from "pinia";
+
+export interface PromotionBanner {
+	id: number;
+	title: string;
+	message: string;
+	link_url: string | null;
+	link_text: string | null;
+	image_url: string | null;
+	type: "info" | "warning" | "success" | "danger" | "promo";
+	bg_color: string | null;
+	text_color: string | null;
+	priority: number;
+	platform_ids: number[];
+	language_id: number | null;
+	country_id: number | null;
+	is_global: boolean;
+	is_active: boolean;
+	impressions: number;
+	clicks: number;
+	max_impressions: number | null;
+	starts_at: string | null;
+	ends_at: string | null;
+}
+
+const DISMISSED_PREFIX = "mg_promotion_dismissed_";
+const CACHE_KEY = "mg_promotion_banner_cache";
+const CACHE_TTL_MS = 15 * 60 * 1000; // 15 minutes
+
+interface CacheEntry {
+	banner: PromotionBanner | null;
+	cachedAt: number;
+}
+
+function readCache(platformId: number, locale: string): PromotionBanner | null | undefined {
+	try {
+		const raw = localStorage.getItem(`${CACHE_KEY}_${platformId}_${locale}`);
+		if (!raw) return undefined;
+		const entry: CacheEntry = JSON.parse(raw);
+		if (Date.now() - entry.cachedAt > CACHE_TTL_MS) return undefined;
+		return entry.banner; // null = cached "no active banner"
+	} catch {
+		return undefined;
+	}
+}
+
+function writeCache(platformId: number, locale: string, banner: PromotionBanner | null) {
+	try {
+		const entry: CacheEntry = { banner, cachedAt: Date.now() };
+		localStorage.setItem(`${CACHE_KEY}_${platformId}_${locale}`, JSON.stringify(entry));
+	} catch {
+		// localStorage unavailable or full — silently skip
+	}
+}
+
+export const usePromotionStore = defineStore("promotion-store", {
+	state: () => ({
+		banner: null as PromotionBanner | null,
+		dismissed: false,
+		loaded: false,
+	}),
+
+	actions: {
+		async fetchBanner() {
+			if (this.loaded) return;
+
+			const runtimeConfig = useRuntimeConfig();
+			const networkBaseUrl =
+				runtimeConfig.public.mgSharedUi?.networkBaseUrl ||
+				import.meta.env.VITE_BASE_URL_NETWORK;
+			const platformId = Number(
+				runtimeConfig.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID,
+			);
+
+			if (!networkBaseUrl || !platformId) {
+				this.loaded = true;
+				return;
+			}
+
+			const { locale } = useI18n();
+			const localeVal = locale.value || "en";
+
+			// ── Try cache first ────────────────────────────────────────────────
+			// Impressions are NOT fired on cache hits — the user already
+			// received an impression when the banner was first fetched.
+			const cached = readCache(platformId, localeVal);
+			if (cached !== undefined) {
+				this.banner = cached;
+				if (cached) {
+					this.dismissed = !!localStorage.getItem(`${DISMISSED_PREFIX}${cached.id}`);
+				}
+				this.loaded = true;
+				return;
+			}
+
+			// ── Cache miss — fetch from API ────────────────────────────────────
+			try {
+				const params = new URLSearchParams({ platform_id: String(platformId) });
+				params.set("locale", localeVal);
+
+				const url = `${networkBaseUrl}/promotion-banners/active?${params.toString()}`;
+				const data: any = await $fetch(url, { credentials: "include" });
+
+				const banner: PromotionBanner | null = data?.data ?? null;
+				this.banner = banner;
+
+				if (banner) {
+					this.dismissed = !!localStorage.getItem(`${DISMISSED_PREFIX}${banner.id}`);
+
+					// Fire impression on real fetch only — non-blocking, best-effort
+					$fetch(`${networkBaseUrl}/promotion-banners/${banner.id}/impression`, {
+						method: "POST",
+						credentials: "include",
+					}).catch(() => {});
+				}
+
+				writeCache(platformId, localeVal, banner);
+			} catch {
+				// Silently fail — promotion banner is non-critical; do not cache on error
+			} finally {
+				this.loaded = true;
+			}
+		},
+
+		async recordClick() {
+			if (!this.banner) return;
+
+			const runtimeConfig = useRuntimeConfig();
+			const networkBaseUrl =
+				runtimeConfig.public.mgSharedUi?.networkBaseUrl ||
+				import.meta.env.VITE_BASE_URL_NETWORK;
+
+			$fetch(`${networkBaseUrl}/promotion-banners/${this.banner.id}/click`, {
+				method: "POST",
+				credentials: "include",
+			}).catch(() => {});
+		},
+
+		dismiss() {
+			if (this.banner) {
+				localStorage.setItem(`${DISMISSED_PREFIX}${this.banner.id}`, "1");
+			}
+			this.dismissed = true;
+		},
+	},
+
+	getters: {
+		isVisible: (state) => !!state.banner && !state.dismissed,
+	},
+});
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(usePromotionStore, import.meta.hot));
+}

package/types/index.ts

@@ -0,0 +1,135 @@
+export interface MgUser {
+	id: number | null;
+	uuid: string | null;
+	name: string | null;
+	nickname: string | null;
+	avatar: string | null;
+	avatar_url: string | null;
+	inviteQrCode: string | null;
+	followHash: string | null;
+	follow_hash: string | null;
+	followers: number | null;
+	following: number | null;
+	followers_count: number | null;
+	following_count: number | null;
+	user_is_following: boolean;
+	coins: number | null;
+	bio: {
+		short: string;
+		long: string;
+	};
+	short_bio: string;
+	long_bio: string;
+	country: MgCountry;
+	invite_qr_code: string | null;
+}
+
+export interface MgCountry {
+	id: number | null;
+	name: string | null;
+	localized_name: string | null;
+	originalName: string | null;
+	language_id: number | null;
+	languageId: number | null;
+	isocode: string | null;
+	code2: string | null;
+	code3: string | null;
+	flag: string | null;
+	flag_url: string | null;
+}
+
+export interface MgNotification {
+	id: string | null;
+	type: string | number;
+	object: string | null;
+	slug: string | null;
+	url: string | null;
+	title: string;
+	message: string;
+	image: string;
+	read_at: string | null;
+	created_at: string;
+}
+
+export interface MgChatMessage {
+	id: number;
+	chat_id: number;
+	user_id: number;
+	message: string;
+	created_at: string;
+	updated_at: string;
+	readed_at?: string;
+	user_is_author?: boolean;
+	user: MgChatUser;
+}
+
+export interface MgChatUser {
+	id: number;
+	uuid: string;
+	name: string;
+	email: string;
+	preferred_lang: string;
+	url_image: string;
+	nickname: string;
+	avatar_url: string;
+	first_name: string;
+	last_name: string;
+	full_name: string;
+	country: MgCountry;
+	user_status?: MgUserStatus[];
+}
+
+export interface MgUserStatus {
+	hiddenstatus: boolean;
+	online: boolean;
+}
+
+export interface MgChat {
+	id: number;
+	mg_network_system_id: number;
+	chat_type_id: number;
+	created_at: string;
+	updated_at: string;
+	users_count: number;
+	chat_messages_count: number;
+	unread_messages_count: number;
+	chat_messages: MgChatMessage[];
+	users: MgChatUser[];
+	last_message?: {
+		created_at_diff: string;
+		user_is_author: boolean;
+	};
+}
+
+export interface MgLanguage {
+	name: string;
+	name_abrev: string;
+	flag_url: string;
+	native_name: string;
+	localized_name: string;
+}
+
+export interface MgSharedUiConfig {
+	platform: string;
+	systemId: string;
+	apiBaseURL: string;
+	accountsBaseUrl: string;
+	features: {
+		chat: boolean;
+		notifications: boolean;
+		wallet: boolean;
+		darkMode: boolean;
+		search: boolean;
+		statusOnline: boolean;
+	};
+	languages: string[];
+	protectedRoutes: string[];
+	chatEndpoints: {
+		list: string;
+		send: string;
+		show: string;
+		unread: string;
+		delete: string;
+		deleteMessage: string;
+	};
+}

package/utils/serialize.ts

@@ -0,0 +1,29 @@
+export interface NestedObject {
+	[key: string]: string | string[];
+}
+
+export interface SerializeObject {
+	[key: string]: string | number | boolean | NestedObject;
+}
+
+export function serialize(obj: SerializeObject): string {
+	const searchParams = new URLSearchParams();
+	for (const key in obj) {
+		if (typeof obj[key] === "object" && obj[key] !== null) {
+			const nestedObj = obj[key] as NestedObject;
+			for (const iKey in nestedObj) {
+				const value = nestedObj[iKey];
+				if (Array.isArray(value)) {
+					value.forEach((arrValue, index) => {
+						if (arrValue !== "") searchParams.append(`filter[${iKey}][${index}]`, arrValue);
+					});
+				} else {
+					if (value !== "") searchParams.append(`filter[${iKey}]`, value);
+				}
+			}
+		} else if (obj[key] !== undefined && obj[key] !== null) {
+			searchParams.append(`${key}`, String(obj[key]));
+		}
+	}
+	return `?${decodeURIComponent(searchParams.toString())}`;
+}