@mundogamernetwork/shared-ui 1.0.0

package/pages/team.vue

@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+definePageMeta({ layout: "default" });
+
+const institutionalStore = useInstitutionalStore();
+const { team, operationalArea } = storeToRefs(institutionalStore);
+
+const selectedArea = ref<string | number>("");
+
+async function fetchTeamData() {
+	try {
+		const params: any = {
+			filter: { status: 1 },
+			sort: "name",
+			order: "asc",
+			per_page: "all",
+		};
+		if (selectedArea.value) params.filter.operational_area_id = selectedArea.value;
+		await institutionalStore.fetchTeam(params);
+	} catch {
+		// silent
+	}
+}
+
+async function fetchAreas() {
+	try {
+		await institutionalStore.fetchOperationalArea({ per_page: "all" });
+	} catch {
+		// silent
+	}
+}
+
+function selectArea(areaId: string | number) {
+	selectedArea.value = selectedArea.value === areaId ? "" : areaId;
+	fetchTeamData();
+}
+
+onMounted(async () => {
+	fetchTeamData();
+	fetchAreas();
+});
+</script>
+
+<template>
+	<div id="team" class="container team">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.team.title") }}</h1>
+					<p>{{ $t("more.team.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-8 offset-2">
+						<div class="area-tabs" v-if="operationalArea?.data?.data">
+							<button
+								class="area-tab"
+								:class="{ active: selectedArea === '' }"
+								@click="selectArea('')"
+							>
+								{{ $t("more.team.all") }}
+							</button>
+							<button
+								v-for="area in operationalArea.data.data"
+								:key="area.id"
+								class="area-tab"
+								:class="{ active: selectedArea === area.id }"
+								@click="selectArea(area.id)"
+							>
+								{{ area.localized_name || area.name }}
+							</button>
+						</div>
+
+						<div v-if="team.status === 'pending'" class="loading">
+							<p>{{ $t("components.loading") }}</p>
+						</div>
+
+						<div v-else-if="team?.data?.data && team.data.data.length > 0" class="team-grid">
+							<div
+								v-for="member in team.data.data"
+								:key="member.id"
+								class="team-card"
+							>
+								<img
+									:src="member.avatar_url || '/imgs/default.jpg'"
+									:alt="member.name"
+									class="team-card__avatar"
+								/>
+								<div class="team-card__info">
+									<h3>{{ member.name }}</h3>
+									<p class="role">{{ member.role || member.operational_area?.name }}</p>
+									<p class="description" v-if="member.localized_description">
+										{{ member.localized_description }}
+									</p>
+									<div class="team-card__countries" v-if="member.countries?.length">
+										<img
+											v-for="c in member.countries"
+											:key="c.id"
+											:src="c.flag_svg_src || c.flag_32_url"
+											:alt="c.name"
+											class="flag"
+										/>
+									</div>
+									<div class="team-card__social" v-if="member.social_links?.length">
+										<a
+											v-for="link in member.social_links"
+											:key="link.url"
+											:href="link.url"
+											target="_blank"
+											rel="noopener"
+										>
+											<MGIcon :icon="link.platform || 'link'" />
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div v-else class="no-data">
+							{{ $t("more.team.no_data") }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.team {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-team.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.area-tabs {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-bottom: 24px;
+
+		.area-tab {
+			padding: 6px 16px;
+			border: 1px solid var(--search-bar-border-color);
+			background: transparent;
+			color: var(--inactive);
+			font-size: 14px;
+			cursor: pointer;
+			transition: all 0.2s;
+
+			&.active {
+				background: var(--chip-text);
+				color: var(--chip-background-2);
+				border-color: var(--chip-text);
+			}
+		}
+	}
+
+	.team-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		gap: 24px;
+	}
+
+	.team-card {
+		background-color: var(--chip-background-2);
+		text-align: center;
+		padding: 16px;
+
+		&__avatar {
+			width: 96px;
+			height: 96px;
+			border-radius: 50%;
+			object-fit: cover;
+			margin-bottom: 12px;
+		}
+
+		&__info {
+			h3 {
+				font-size: 14px;
+				font-weight: 600;
+				color: var(--card-cover-title);
+				margin-bottom: 4px;
+			}
+
+			.role {
+				font-size: 12px;
+				color: var(--chip-text);
+				margin-bottom: 8px;
+			}
+
+			.description {
+				font-size: 12px;
+				line-height: 16px;
+				margin-bottom: 8px;
+			}
+		}
+
+		&__countries {
+			display: flex;
+			justify-content: center;
+			gap: 4px;
+			margin-bottom: 8px;
+
+			.flag {
+				width: 20px;
+				height: 14px;
+				object-fit: cover;
+			}
+		}
+
+		&__social {
+			display: flex;
+			justify-content: center;
+			gap: 8px;
+
+			a {
+				color: var(--inactive);
+				font-size: 16px;
+
+				&:hover {
+					color: var(--chip-text);
+				}
+			}
+		}
+	}
+
+	.no-data {
+		text-align: center;
+		padding: 32px;
+		color: var(--secondary-info-fg);
+	}
+}
+
+@media screen and (max-width: 768px) {
+	.team .team-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+</style>

package/pages/wall/[slug].vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const route = useRoute()
+const localePath = useLocalePath()
+const slug = route.params.slug as string
+const qs = Object.keys(route.query).length
+	? '?' + new URLSearchParams(route.query as Record<string, string>).toString()
+	: ''
+navigateTo(localePath(`/mural/${slug}`) + qs, { replace: true })
+</script>
+
+<template><div /></template>

package/plugins/auth.client.ts

@@ -0,0 +1,17 @@
+export default defineNuxtPlugin({
+	name: "shared-ui-auth",
+	enforce: "pre",
+	parallel: true,
+	async setup() {
+		try {
+			const authStore = useAuthStore();
+
+			if (!authStore.signedIn) {
+				await authStore.getUser();
+			}
+		} catch (e) {
+			// Auth store may not be available in all extending frontends
+			console.warn("[shared-ui Auth] Failed to initialize auth:", e);
+		}
+	},
+});

package/plugins/echo.client.ts

@@ -0,0 +1,132 @@
+import Echo from "laravel-echo";
+import Pusher from "pusher-js";
+import axios from "axios";
+
+declare global {
+	interface Window {
+		Pusher: any;
+		Echo: any;
+	}
+}
+
+export default defineNuxtPlugin({
+	name: "shared-ui-echo",
+	enforce: "post",
+	parallel: true,
+	setup(nuxtApp) {
+	// Skip if already provided by the extending frontend's own Echo plugin
+	if (nuxtApp.$echo || window.Echo) {
+		return;
+	}
+
+	const pusherKey = import.meta.env.VITE_MIX_PUSHER_APP_KEY;
+	const pusherHost = import.meta.env.VITE_MIX_PUSHER_HOST;
+
+	// Skip if credentials are not configured
+	if (!pusherKey || !pusherHost) {
+		console.warn("[shared-ui Echo] Pusher credentials not configured, skipping");
+		return;
+	}
+
+	const headers: Record<string, string> = {
+		Accept: "application/json",
+	};
+
+	if (import.meta.env.VITE_BEARER_TOKEN) {
+		headers.Authorization = `Bearer ${import.meta.env.VITE_BEARER_TOKEN}`;
+	}
+
+	window.Pusher = Pusher;
+	window.Echo = new Echo({
+		broadcaster: "pusher",
+		key: import.meta.env.VITE_MIX_PUSHER_APP_KEY,
+		cluster: import.meta.env.VITE_MIX_PUSHER_APP_CLUSTER ?? "mt1",
+		wsHost: import.meta.env.VITE_MIX_PUSHER_HOST,
+		wsPort: import.meta.env.VITE_MIX_PUSHER_PORT ?? 80,
+		wssPort: import.meta.env.VITE_MIX_PUSHER_PORT ?? 443,
+		forceTLS: (import.meta.env.VITE_MIX_PUSHER_SCHEME ?? "https") === "https",
+		enabledTransports: ["ws", "wss"],
+		disableStats: true,
+		enableLogging: import.meta.env.VITE_APP_ENV !== "production",
+		activityTimeout: 30000,
+		pongTimeout: 5000,
+		authorizer: (channel: any) => {
+			return {
+				authorize: (socketId: any, callback: any) => {
+					axios
+						.post(
+							import.meta.env.VITE_PUSHER_AUTH,
+							{
+								socket_id: socketId,
+								channel_name: channel.name,
+							},
+							{
+								withCredentials: true,
+								headers: headers,
+							},
+						)
+						.then((response) => {
+							callback(false, response.data);
+						})
+						.catch((error) => {
+							callback(true, error);
+						});
+				},
+			};
+		},
+	});
+
+	window.Echo.connector.pusher.connection.bind("connected", () => {
+		console.log("[WebSocket] Connected", new Date().toISOString());
+	});
+
+	window.Echo.connector.pusher.connection.bind("disconnected", () => {
+		console.log("[WebSocket] Disconnected", new Date().toISOString());
+	});
+
+	window.Echo.connector.pusher.connection.bind("error", (error: any) => {
+		console.error("[WebSocket] Connection error:", error, new Date().toISOString());
+	});
+
+	let reconnectTimer: number | null = null;
+	let reconnectAttempts = 0;
+	const MAX_RECONNECT_ATTEMPTS = 5;
+
+	window.Echo.connector.pusher.connection.bind("state_change", (states: any) => {
+		const { previous, current } = states;
+		console.log(`[WebSocket] State changed: ${previous} -> ${current}`);
+
+		if (current === "disconnected" || current === "failed" || current === "unavailable") {
+			// Stop reconnecting after max attempts to avoid infinite loop
+			// (e.g. when user is not authenticated)
+			if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+				console.log("[WebSocket] Max reconnect attempts reached, stopping.");
+				if (reconnectTimer) {
+					clearTimeout(reconnectTimer);
+					reconnectTimer = null;
+				}
+				return;
+			}
+
+			reconnectAttempts++;
+			const delay = Math.min(1000 * Math.pow(2, reconnectAttempts - 1), 30000);
+			console.log(`[WebSocket] Reconnecting in ${delay / 1000}s (attempt ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})...`);
+
+			if (reconnectTimer) clearTimeout(reconnectTimer);
+			reconnectTimer = window.setTimeout(() => {
+				window.Echo.connector.pusher.connect();
+			}, delay);
+		}
+
+		if (current === "connected") {
+			reconnectAttempts = 0;
+			if (reconnectTimer) {
+				clearTimeout(reconnectTimer);
+				reconnectTimer = null;
+			}
+		}
+	});
+
+	nuxtApp.provide("echo", window.Echo);
+	},
+});

package/services/authService.ts

@@ -0,0 +1,95 @@
+import httpService from "./httpService";
+import type { MgUser } from "../types";
+
+export class User implements Partial<MgUser> {
+	id = null;
+	uuid = null;
+	name = null;
+	nickname = null;
+	avatar = null;
+	avatar_url = null;
+	inviteQrCode = null;
+	followHash = null;
+	follow_hash = null;
+	followers = null;
+	following = null;
+	followers_count = null;
+	following_count = null;
+	user_is_following = false;
+	coins = null;
+	bio = { short: "", long: "" };
+	short_bio = "";
+	long_bio = "";
+	country = {
+		id: null,
+		name: null,
+		localized_name: null,
+		originalName: null,
+		language_id: null,
+		languageId: null,
+		isocode: null,
+		code2: null,
+		code3: null,
+		flag: null,
+		flag_url: null,
+	};
+	invite_qr_code = null;
+
+	constructor(data: object) {
+		Object.assign(this, data);
+		return this;
+	}
+}
+
+export const logout = () =>
+	httpService({
+		url: "logout",
+		method: "POST",
+	});
+
+const instance = new (class AuthService {
+	private user: User | null = null;
+
+	authenticate(options: { fresh?: boolean } = {}): Promise<User | null> {
+		return new Promise((resolve, reject) => {
+			const params: Record<string, any> = {};
+			// Tells the API to bust its cache before computing subscription
+			// details — used right after a payment confirmation so the new
+			// is_subscriber state propagates without a stale TTL.
+			if (options.fresh) params.fresh = 1;
+			const xhr = httpService.get("/auth/user", { params });
+			xhr.then((response: any) => {
+				if (response.status !== 200 || !response.data || response.data === "") {
+					resolve(null);
+					return;
+				}
+				const user = new User(response.data);
+				Object.freeze(user);
+				this.user = user;
+				resolve(user);
+			}).catch((error: any) => {
+				const status = error?.response?.status;
+				if (status === 401 || status === 403 || status === 419) {
+					resolve(null);
+					return;
+				}
+				reject(error);
+			});
+		});
+	}
+
+	async getUser(options: { fresh?: boolean } = {}) {
+		const user = await this.authenticate(options);
+		if (user) return user;
+		return null;
+	}
+
+	async logout() {
+		return httpService({
+			url: "logout",
+			method: "POST",
+		});
+	}
+})();
+
+export default instance;

package/services/chatService.ts

@@ -0,0 +1,53 @@
+import httpService from "./httpService";
+import { serialize } from "../utils/serialize";
+
+function getEndpoints() {
+	const config = useRuntimeConfig();
+	return (
+		config.public.mgSharedUi?.chatEndpoints ?? {
+			list: "/api/v1/chats",
+			send: "/api/v1/chats/messages/",
+			show: "/api/v1/chats/{chatId}",
+			unread: "api/v1/chats/messages/unread/count",
+			delete: "/api/v1/chats/{chatId}",
+			deleteMessage: "/api/v1/chats/messages/{messageId}",
+		}
+	);
+}
+
+export const getChatList = async (params: any) => {
+	const endpoints = getEndpoints();
+	const paramsSerialized: string = serialize(params);
+	return httpService.get(`${endpoints.list}${paramsSerialized}`);
+};
+
+export const postChatMessage = async (params: any) => {
+	const endpoints = getEndpoints();
+	return httpService.post(endpoints.send, params);
+};
+
+export const getChat = async (params: { chat_id: string | number }) => {
+	const endpoints = getEndpoints();
+	const url = endpoints.show.replace("{chatId}", String(params.chat_id));
+	return httpService.get(url);
+};
+
+export const getUnreadMessagesCount = async () => {
+	const config = useRuntimeConfig();
+	const endpoints = getEndpoints();
+	const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+	const param = { mg_network_system_id: systemId };
+	return httpService.get(`${endpoints.unread}${serialize(param)}`);
+};
+
+export const deleteUserChat = async (chatId: string | number) => {
+	const endpoints = getEndpoints();
+	const url = endpoints.delete.replace("{chatId}", String(chatId));
+	return httpService.delete(url);
+};
+
+export const deleteChatMessage = async (chatMessageId: string | number) => {
+	const endpoints = getEndpoints();
+	const url = endpoints.deleteMessage.replace("{messageId}", String(chatMessageId));
+	return httpService.delete(url);
+};

package/services/contactService.ts

@@ -0,0 +1,35 @@
+import httpService from "./httpService";
+import { serialize } from "../utils/serialize";
+
+interface SerializeObject {
+	[key: string]: string | { [key: string]: string | string[] };
+}
+
+const getApiBaseUrl = () => {
+	const config = useRuntimeConfig();
+	return config.public.mgSharedUi?.apiBaseURL || import.meta.env.VITE_API_BASE_URL;
+};
+
+export const fetchContactCountry = async (params: SerializeObject): Promise<any> => {
+	const paramsSerialized = serialize(params);
+	return httpService.get(`/countries${paramsSerialized}`, { baseURL: getApiBaseUrl() });
+};
+
+export const fetchSubject = async (params: SerializeObject): Promise<any> => {
+	const paramsSerialized = serialize(params);
+	return httpService.get(`/contact-subjects${paramsSerialized}`, { baseURL: getApiBaseUrl() });
+};
+
+export const createMessage = async (data: {
+	name: string;
+	email: string;
+	subject_id: number;
+	language_slug: string;
+	country_id: number;
+	message: string;
+	privacy_policy: number;
+	origin_network_id: number;
+	status?: number;
+}): Promise<any> => {
+	return httpService.post(`/contact`, data, { baseURL: getApiBaseUrl() });
+};

package/services/documentService.ts

@@ -0,0 +1,16 @@
+import httpService from "./httpService";
+import { serialize } from "../utils/serialize";
+
+interface SerializeObject {
+	[key: string]: string | { [key: string]: string | string[] };
+}
+
+const getApiBaseUrl = () => {
+	const config = useRuntimeConfig();
+	return config.public.mgSharedUi?.apiBaseURL || import.meta.env.VITE_API_BASE_URL;
+};
+
+export const fetchDocuments = async (params: SerializeObject): Promise<any> => {
+	const paramsSerialized = serialize(params);
+	return httpService.get(`/document-website-latest${paramsSerialized}`, { baseURL: getApiBaseUrl() });
+};