@mundogamernetwork/shared-ui 1.0.0

package/composables/useSubscription.ts

@@ -0,0 +1,163 @@
+import { ref, computed } from "vue";
+import type { AxiosInstance } from "axios";
+
+export interface PlanPricing {
+  id: number;
+  value: number;
+  currency?: { iso: string; symbol: string };
+  payment_period_id: number;
+  payment_period?: { id: number; name: string };
+}
+
+export interface Plan {
+  id: number;
+  name: string;
+  slug: string;
+  description?: string;
+  trial_days?: number;
+  popular?: boolean;
+  business?: boolean;
+  plan_pricings?: { data: PlanPricing[] };
+  plan_benefits?: { data: any[] };
+  feature_limits?: Record<string, any>;
+}
+
+export interface SubscriptionData {
+  id: number;
+  active: boolean;
+  cancel_at?: string | null;
+  next_payment?: string | null;
+  mg_network_plan?: { data: Plan };
+  mg_network_plan_pricing?: { data: PlanPricing };
+  subscription_gateway_id?: string;
+}
+
+export function useSubscription(
+  httpService: AxiosInstance,
+  httpServiceMain?: AxiosInstance
+) {
+  const mainHttp = httpServiceMain ?? httpService;
+
+  const plans = ref<Plan[]>([]);
+  const subscription = ref<SubscriptionData | null>(null);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  async function fetchPlans(systemId?: number) {
+    loading.value = true;
+    try {
+      const params: Record<string, any> = {};
+      if (systemId) {
+        params["filter[mg_network_system_id]"] = systemId;
+      }
+      const res = await mainHttp.get("/network-plans", { params });
+      plans.value = res.data?.data ?? [];
+    } catch (e: any) {
+      error.value = e?.message ?? "Failed to load plans";
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Fetch subscription status. Tries auth store first (populated by /auth/user),
+   * falls back to /me/subscription endpoint for backward compatibility.
+   */
+  async function fetchMySubscription() {
+    // Try to read from auth store first (zero network calls)
+    try {
+      const pinia = (await import("pinia")).getActivePinia?.();
+      if (pinia) {
+        const authStore = pinia.state.value["auth-store"];
+        if (authStore?.user?.subscription) {
+          subscription.value = authStore.user.subscription;
+          return;
+        }
+      }
+    } catch {
+      // Auth store not available — fall through to API call
+    }
+
+    loading.value = true;
+    try {
+      const res = await httpService.get("/me/subscription");
+      subscription.value = res.data?.data ?? res.data ?? null;
+    } catch {
+      subscription.value = null;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function subscribe(
+    pricingId: number,
+    successUrl: string,
+    cancelUrl: string,
+    paymentGateway?: string,
+    discountCouponCode?: string
+  ): Promise<string | null> {
+    loading.value = true;
+    error.value = null;
+    try {
+      const params: Record<string, any> = {
+        mg_network_plan_pricing_id: pricingId,
+        success_url: successUrl,
+        cancel_url: cancelUrl,
+      };
+      if (paymentGateway) params.payment_gateway = paymentGateway;
+      if (discountCouponCode) params.discount_coupon_code = discountCouponCode;
+
+      const res = await mainHttp.post("/public/plans/subscriptions", params);
+      const payerAction = res.data?.meta?.payer_action ?? res.data?.payer_action;
+
+      if (payerAction) {
+        window.location.href = payerAction;
+      }
+      return payerAction ?? null;
+    } catch (e: any) {
+      error.value = e?.response?.data?.message ?? "Subscription failed";
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function cancelSubscription(subscriptionId: number | string) {
+    loading.value = true;
+    error.value = null;
+    try {
+      await mainHttp.delete(`/public/plans/subscriptions/${subscriptionId}`);
+      if (subscription.value) {
+        subscription.value.active = false;
+        subscription.value.cancel_at = new Date().toISOString();
+      }
+    } catch (e: any) {
+      error.value = e?.response?.data?.message ?? "Failed to cancel subscription";
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  // Computed
+  const isActive = computed(() => subscription.value?.active === true);
+  const isCancelled = computed(() => !!subscription.value?.cancel_at);
+  const currentPlan = computed(
+    () => subscription.value?.mg_network_plan?.data ?? null
+  );
+  const currentPlanName = computed(() => currentPlan.value?.name ?? null);
+
+  return {
+    plans,
+    subscription,
+    loading,
+    error,
+    fetchPlans,
+    fetchMySubscription,
+    subscribe,
+    cancelSubscription,
+    isActive,
+    isCancelled,
+    currentPlan,
+    currentPlanName,
+  };
+}

package/middleware/auth.global.ts

@@ -0,0 +1,40 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+	try {
+		const nuxtApp = useNuxtApp();
+		const pinia = (nuxtApp as any).$pinia;
+		if (!pinia) return;
+		const runtimeConfig = useRuntimeConfig();
+		const authStore = useAuthStore(pinia);
+
+		const locale = nuxtApp.$i18n?.locale?.value ?? "en";
+		const { signedIn } = storeToRefs(authStore);
+
+		const accountsBaseUrl = runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl;
+		const configuredRoutes: string[] = runtimeConfig.public.mgSharedUi?.protectedRoutes || [];
+
+		// No protected routes configured — skip entirely
+		if (!configuredRoutes.length) return;
+
+		// Build regex patterns from configured protected routes
+		const protectedRoutePatterns: RegExp[] = configuredRoutes.map(
+			(route) => new RegExp(`^/(${locale})${route}(/.*)?$`),
+		);
+
+		const isProtectedRoute = protectedRoutePatterns.some((pattern) => pattern.test(to.path));
+
+		if (isProtectedRoute) {
+			if (!signedIn.value) {
+				await authStore.getUser();
+			}
+
+			if (!signedIn.value) {
+				const currentUrl = typeof window !== "undefined" ? encodeURIComponent(window.location.href) : "";
+				const loginUrl = `${accountsBaseUrl}/login?redirect_to=${currentUrl}`;
+				return navigateTo(loginUrl, { external: true });
+			}
+		}
+	} catch (e) {
+		// Silently fail — don't block rendering if auth system isn't available
+		console.warn("[shared-ui Auth Middleware] Error:", e);
+	}
+});

package/nuxt.config.ts

@@ -0,0 +1,31 @@
+export default defineNuxtConfig({
+	runtimeConfig: {
+		public: {
+			mgSharedUi: {
+				platform: "", // e.g. MGC, MGTV, MGN
+				systemId: "", // VITE_SYSTEM_ID for notification filtering
+				apiBaseURL: "", // VITE_API_BASE_URL
+				accountsBaseUrl: "", // VITE_BASE_ACCOUNTS_URL
+				networkBaseUrl: "", // VITE_BASE_URL_NETWORK (institutional APIs)
+				features: {
+					chat: true,
+					notifications: true,
+					wallet: true,
+					darkMode: true,
+					search: false,
+					statusOnline: true,
+				},
+				languages: ["pt-BR", "en", "es", "de", "ro"],
+				protectedRoutes: [] as string[],
+				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}",
+				},
+			},
+		},
+	},
+});

package/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "@mundogamernetwork/shared-ui",
+	"version": "1.0.0",
+	"description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
+	"type": "module",
+	"main": "./nuxt.config.ts",
+	"files": [
+		"components",
+		"composables",
+		"middleware",
+		"pages",
+		"plugins",
+		"services",
+		"stores",
+		"types",
+		"utils",
+		"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/pages/[slug]/index.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+definePageMeta({ layout: "default" });
+
+const route = useRoute();
+const locale = useNuxtApp().$i18n.locale;
+const slug = route.params.slug;
+
+const config = useRuntimeConfig();
+const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+
+const documentStore = useDocumentStore();
+const { getDocument } = storeToRefs(documentStore);
+
+const { error } = await useAsyncData(`document-${slug}`, async () => {
+	await documentStore.fetchDocument({
+		filter: {
+			slug: slug,
+			platform_id: systemId,
+		},
+		lang: locale.value,
+	});
+	return getDocument.value?.data;
+});
+
+if (error.value || !getDocument.value?.data?.localized_content) {
+	throw createError({ statusCode: 404, statusMessage: "Page Not Found" });
+}
+</script>
+
+<template>
+	<div id="institution-page" class="container institution-page">
+		<section>
+			<div class="header">
+				<div v-if="getDocument && getDocument.data && getDocument.data.content">
+					<h1 class="title-4">{{ getDocument.data.type_document?.localized_type }}</h1>
+					<p>{{ $t("more.document.last_updated") }} {{ getDocument.data.updated_at }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div
+						v-if="getDocument && getDocument.data && getDocument.data.localized_content"
+						class="col-8 offset-2"
+					>
+						<div v-html="getDocument.data.localized_content"></div>
+					</div>
+					<div v-else>{{ $t("components.loading") }}</div>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.institution-page {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.875rem;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-privacy-policy.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	:deep(a) {
+		color: var(--chip-text);
+	}
+
+	:deep(h2), :deep(h3), :deep(h4) {
+		color: var(--card-cover-title);
+		margin: 16px 0 8px;
+	}
+
+	:deep(p) {
+		line-height: 20px;
+		margin-bottom: 8px;
+	}
+
+	:deep(ul), :deep(ol) {
+		padding-left: 20px;
+		margin-bottom: 12px;
+
+		li {
+			line-height: 20px;
+			margin-bottom: 4px;
+		}
+	}
+}
+</style>

package/pages/about.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+definePageMeta({ layout: "default" });
+</script>
+
+<template>
+	<div id="about" class="container about">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.about.title") }}</h1>
+					<p>{{ $t("more.about.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-8 offset-2">
+						<div class="content">
+							<div class="section-block">
+								<h2>{{ $t("more.about.section_1_title") }}</h2>
+								<p>{{ $t("more.about.section_1_text") }}</p>
+							</div>
+
+							<div class="section-block">
+								<h2>{{ $t("more.about.section_2_title") }}</h2>
+								<p>{{ $t("more.about.section_2_text") }}</p>
+							</div>
+
+							<div class="benefits" v-if="$t('more.about.benefits_title')">
+								<h3>{{ $t("more.about.benefits_title") }}</h3>
+								<ul>
+									<li v-for="n in 6" :key="n">
+										<template v-if="$te(`more.about.benefit_${n}`)">
+											{{ $t(`more.about.benefit_${n}`) }}
+										</template>
+									</li>
+								</ul>
+							</div>
+
+							<div class="section-block">
+								<h2>{{ $t("more.about.section_3_title") }}</h2>
+								<p>{{ $t("more.about.section_3_text") }}</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.about {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.875rem;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-about.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: 32px;
+	}
+
+	.section-block {
+		h2 {
+			font-size: 18px;
+			font-weight: 600;
+			line-height: 26px;
+			color: var(--card-cover-title);
+			margin-bottom: 8px;
+		}
+
+		p {
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 20px;
+			color: var(--inactive);
+		}
+	}
+
+	.benefits {
+		h3 {
+			font-size: 16px;
+			font-weight: 600;
+			color: var(--card-cover-title);
+			margin-bottom: 12px;
+		}
+
+		ul {
+			list-style: disc;
+			padding-left: 20px;
+
+			li {
+				font-size: 14px;
+				line-height: 24px;
+				color: var(--inactive);
+			}
+		}
+	}
+}
+
+@media screen and (max-width: 768px) {
+	.about .header > div {
+		width: 100%;
+		padding: 0 16px;
+	}
+}
+</style>