@mundogamernetwork/shared-ui 1.0.2 → 1.1.0

package/components/errors/401.vue

@@ -0,0 +1,9 @@
+<template>
+	<MgErrorBase code="401">
+		<template #text>
+			<p class="error-section__title">{{ $t('errors.401.title') }}</p><br/>
+						<p class="error-section__description">{{ $t('errors.401.description.text_1') }}</p>
+						<p class="error-section__description">{{ $t('errors.401.description.text_2') }}</p>
+		</template>
+	</MgErrorBase>
+</template>

package/components/errors/403.vue

@@ -0,0 +1,9 @@
+<template>
+	<MgErrorBase code="403">
+		<template #text>
+			<p class="error-section__title">{{ $t('errors.403.title') }}</p><br/>
+						<p class="error-section__description">{{ $t('errors.403.description.text_1') }}</p>
+						<p class="error-section__description">{{ $t('errors.403.description.text_2') }}</p>
+		</template>
+	</MgErrorBase>
+</template>

package/components/errors/404.vue

@@ -0,0 +1,13 @@
+<template>
+	<MgErrorBase code="404">
+		<template #text>
+			<p class="error-section__title">{{ $t('errors.404.title') }}</p><br/>
+						<p class="error-section__description">{{ $t('errors.404.description') }}</p>
+						<ul class="error-section__description">
+							<li>{{ $t('errors.404.solutions.a') }}</li>
+							<li>{{ $t('errors.404.solutions.b') }}</li>
+							<li>{{ $t('errors.404.solutions.c') }}</li>
+						</ul>
+		</template>
+	</MgErrorBase>
+</template>

package/components/errors/500.vue

@@ -0,0 +1,9 @@
+<template>
+	<MgErrorBase code="500">
+		<template #text>
+			<h1 class="error-section__title">{{ $t('errors.500.title') }}</h1><br/>
+						<p class="error-section__description">{{ $t('errors.500.description.text_1') }}</p>
+						<p class="error-section__description">{{ $t('errors.500.description.text_2') }}</p>
+		</template>
+	</MgErrorBase>
+</template>

package/components/errors/503.vue

@@ -0,0 +1,9 @@
+<template>
+	<MgErrorBase code="503">
+		<template #text>
+			<h1 class="error-section__title">{{ $t('errors.503.title') }}</h1><br/>
+						<p class="error-section__description">{{ $t('errors.503.description.text_1') }}</p>
+						<p class="error-section__description">{{ $t('errors.503.description.text_2') }}</p>
+		</template>
+	</MgErrorBase>
+</template>

package/components/errors/504.vue

@@ -0,0 +1,9 @@
+<template>
+	<MgErrorBase code="504">
+		<template #text>
+			<h1 class="error-section__title">{{ $t('errors.504.title') }}</h1><br/>
+						<p class="error-section__description">{{ $t('errors.504.description.text_1') }}</p>
+						<p class="error-section__description">{{ $t('errors.504.description.text_2') }}</p>
+		</template>
+	</MgErrorBase>
+</template>

package/components/errors/MgErrorBase.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+const props = defineProps<{
+	code: string; // "401" | "403" | "404" | "500" | "503" | "504"
+}>();
+
+const locale = useNuxtApp().$i18n.locale;
+const colorMode = useColorMode();
+
+type Theme = "dark" | "light";
+
+const assets = computed(() => {
+	const theme: Theme =
+		colorMode.preference === "light" ? "light" : "dark";
+	return {
+		cover: `/imgs/errors/error-${props.code}-${theme}-cover.svg`,
+		image: `/imgs/errors/error-${props.code}-${theme}.svg`,
+		logo: theme === "dark" ? "/imgs/logo.svg" : "/imgs/logo-dark.svg",
+	};
+});
+</script>
+
+<template>
+	<div class="container">
+		<section
+			class="d-flex flex-column flex-md-row flex-sm-column error-section justify-content-center position-relative"
+		>
+			<div class="error-section__content">
+				<div class="d-flex justify-center">
+					<img class="mx-auto" :src="assets.logo" alt="Logo" />
+				</div>
+				<img :src="assets.image" :alt="`Error ${code}`" />
+				<div>
+					<slot name="text">
+						<p class="error-section__title">{{ $t(`errors.${code}.title`) }}</p>
+						<br />
+						<p class="error-section__description">
+							{{ $t(`errors.${code}.description`) }}
+						</p>
+					</slot>
+				</div>
+				<NuxtLink
+					class="btn btn-primary px-5 btn-color"
+					:to="`/${locale}`"
+				>
+					{{ $t("errors.go_home") }}
+				</NuxtLink>
+			</div>
+			<img
+				class="error-section__cover--image-mobile d-md-none position-absolute"
+				:src="assets.cover"
+				aria-hidden="true"
+			/>
+			<img
+				class="error-section__cover--image d-none d-md-block mt-5"
+				:src="assets.cover"
+				aria-hidden="true"
+			/>
+		</section>
+
+		<!-- Slot for platform-specific extra content (news, games, banners etc.) -->
+		<slot name="extra" />
+	</div>
+</template>
+
+<style scoped lang="scss">
+.btn-color {
+	background-color: var(--header-active-fg, var(--highlight-color, #ff7700));
+	color: var(--section-title-fg, #fff);
+}
+
+.container > * + * {
+	padding: 1rem 0;
+}
+
+.error-section {
+	gap: 5rem;
+
+	&__content {
+		margin-bottom: 4rem;
+		max-width: 20rem;
+
+		& > * + * {
+			padding: 1rem 0;
+		}
+	}
+
+	&__cover--image-mobile {
+		height: 10rem;
+		right: 0;
+		top: 9rem;
+		transform: translate(50%, 0);
+	}
+
+	&__cover--image {
+		height: 20rem;
+	}
+
+	&__title {
+		font-size: 28px;
+		font-weight: 600;
+		color: var(--section-title-fg, var(--card-cover-title));
+	}
+
+	&__description {
+		font-size: 12px;
+		color: var(--section-title-fg, var(--inactive));
+	}
+}
+</style>

package/components/errors/MgErrorNewsCta.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+/**
+ * ErrorNewsCTA — Fetches trending articles from the Community platform
+ * and displays them as a CTA on error pages across all MGN platforms.
+ *
+ * Drives cross-platform traffic to mundogamer.community on error pages
+ * instead of dead ends.
+ */
+
+interface FeedItem {
+	id: number;
+	slug: string;
+	title: string;
+	url_image_src?: string;
+	url_image?: string;
+	content_type?: "pulse" | "review" | "video" | string;
+	author?: { nickname?: string; name?: string };
+	created_at_diff?: string;
+}
+
+const props = defineProps({
+	limit: { type: Number, default: 4 },
+});
+
+const config = useRuntimeConfig();
+const locale = useNuxtApp().$i18n?.locale?.value || "en";
+
+// Community API base — every platform exposes VITE_BASE_URL_COMMUNITY.
+// Community routes use /{locale}/feed/trending (no /api/v1 prefix —
+// the community backend uses {locale_prefix} directly as the route prefix).
+const communityApiBase = computed(() => {
+	const raw =
+		config.public.mgSharedUi?.communityApiUrl ||
+		config.public.communityApiUrl ||
+		import.meta.env.VITE_BASE_URL_COMMUNITY ||
+		"https://api.mundogamer.community";
+	return raw.replace(/\/$/, "");
+});
+
+// Community site URL for article links
+const communitySiteUrl = computed(() => {
+	return (
+		config.public.mgSharedUi?.communitySiteUrl ||
+		config.public.communitySiteUrl ||
+		import.meta.env.VITE_COMMUNITY_SITE_URL ||
+		"https://mundogamer.community"
+	);
+});
+
+const articles = ref<FeedItem[]>([]);
+const loading = ref(true);
+const failed = ref(false);
+
+const articlePath = (item: FeedItem): string => {
+	const typeMap: Record<string, string> = {
+		pulse: "articles",
+		review: "reviews",
+		video: "videos",
+	};
+	const type = typeMap[item.content_type ?? "pulse"] ?? "articles";
+	return `${communitySiteUrl.value}/${locale}/${type}/${item.slug}`;
+};
+
+const imageUrl = (item: FeedItem): string =>
+	item.url_image_src || item.url_image || "/imgs/default/no_img_large_dark.png";
+
+onMounted(async () => {
+	try {
+		const res = await fetch(
+			`${communityApiBase.value}/${locale}/feed/trending?per_page=${props.limit}&page=1&join=false&order=desc`,
+			{
+				credentials: "omit",
+				// Without this, the community web route returns HTML/Inertia instead of JSON.
+				headers: { Accept: "application/json" },
+			},
+		);
+		if (!res.ok) { failed.value = true; return; }
+		const data = await res.json();
+		const items: FeedItem[] = data?.data?.data ?? data?.data ?? [];
+		articles.value = items.slice(0, props.limit);
+	} catch {
+		failed.value = true;
+	} finally {
+		loading.value = false;
+	}
+});
+</script>
+
+<template>
+	<section v-if="!failed && (loading || articles.length)" class="error-news-cta">
+		<div class="error-news-cta__header">
+			<h4 class="error-news-cta__title">{{ $t("errors.news_cta_title") }}</h4>
+			<a
+				:href="`${communitySiteUrl}/${locale}`"
+				target="_blank"
+				class="error-news-cta__see-all"
+			>
+				{{ $t("errors.news_cta_see_all") }} →
+			</a>
+		</div>
+
+		<!-- Loading skeleton -->
+		<div v-if="loading" class="error-news-cta__grid">
+			<div v-for="n in limit" :key="n" class="error-news-cta__skeleton" />
+		</div>
+
+		<!-- Articles -->
+		<div v-else class="error-news-cta__grid">
+			<a
+				v-for="item in articles"
+				:key="item.id"
+				:href="articlePath(item)"
+				target="_blank"
+				class="error-news-cta__card"
+			>
+				<div
+					class="error-news-cta__card-img"
+					:style="{ backgroundImage: `url('${imageUrl(item)}')` }"
+				/>
+				<div class="error-news-cta__card-body">
+					<span v-if="item.content_type" class="error-news-cta__card-tag">
+						{{ item.content_type }}
+					</span>
+					<p class="error-news-cta__card-title">{{ item.title }}</p>
+					<span v-if="item.created_at_diff" class="error-news-cta__card-date">
+						{{ item.created_at_diff }}
+					</span>
+				</div>
+			</a>
+		</div>
+	</section>
+</template>
+
+<style scoped lang="scss">
+.error-news-cta {
+	padding: 2rem 0;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 1.25rem;
+	}
+
+	&__title {
+		font-size: 1.1rem;
+		font-weight: 700;
+		color: var(--card-cover-title, #fff);
+		margin: 0;
+	}
+
+	&__see-all {
+		font-size: 0.8rem;
+		color: var(--highlight-color, #ff7700);
+		text-decoration: none;
+		white-space: nowrap;
+		&:hover { text-decoration: underline; }
+	}
+
+	&__grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+		gap: 1rem;
+
+		@media (max-width: 576px) {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	&__skeleton {
+		height: 200px;
+		background: var(--body-bg-card, #1a1a1a);
+		animation: pulse 1.5s ease-in-out infinite;
+	}
+
+	&__card {
+		display: flex;
+		flex-direction: column;
+		background: var(--body-bg-card, #1a1a1a);
+		text-decoration: none;
+		transition: opacity 0.2s;
+
+		&:hover { opacity: 0.85; }
+
+		&-img {
+			height: 140px;
+			background-size: cover;
+			background-position: center;
+			background-color: var(--body-bg, #111);
+		}
+
+		&-body {
+			padding: 0.75rem;
+			display: flex;
+			flex-direction: column;
+			gap: 0.3rem;
+		}
+
+		&-tag {
+			font-size: 0.65rem;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			color: var(--highlight-color, #ff7700);
+		}
+
+		&-title {
+			font-size: 0.82rem;
+			font-weight: 600;
+			color: var(--card-cover-title, #fff);
+			line-height: 1.3;
+			margin: 0;
+			display: -webkit-box;
+			-webkit-line-clamp: 3;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+		}
+
+		&-date {
+			font-size: 0.7rem;
+			color: var(--inactive, #888);
+		}
+	}
+
+	@keyframes pulse {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.4; }
+	}
+}
+</style>

package/components/ui/MgLoginModal.vue

@@ -1,23 +1,33 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
+import { buildRegisterUrl } from "../../utils/authRedirect";
 
 const loginStore = useLoginStore();
 const runtimeConfig = useRuntimeConfig();
 const authStore = useAuthStore();
 const { signedIn } = storeToRefs(authStore);
-const accountsBaseUrl = runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl;
+const accountsBaseUrl =
+	runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl || "";
+const systemId =
+	runtimeConfig.public.mgSharedUi?.systemId ||
+	runtimeConfig.public.platformId ||
+	import.meta.env.VITE_SYSTEM_ID ||
+	"";
 
-defineProps({
+const props = defineProps({
 	open: {
 		type: Boolean,
 		default: false,
 	},
+	loginUrl: {
+		type: String,
+		default: "",
+	},
 });
 
-const registerUrl = computed(() => {
-	const current = typeof window !== "undefined" ? window.location.href : "";
-	return `${accountsBaseUrl}/register?redirect_to=${current}`;
-});
+const registerUrl = computed(() =>
+	buildRegisterUrl(accountsBaseUrl, undefined, systemId),
+);
 
 function close() {
 	loginStore.toggleLoginModalComponent();
@@ -40,6 +50,9 @@ function close() {
 						{{ $t("more.login_modal.subtitle") }}
 					</div>
 					<div class="buttons">
+						<a v-if="props.loginUrl" class="btn1" :href="props.loginUrl">
+							{{ $t("more.login_modal.btn_login") }}
+						</a>
 						<a v-if="!signedIn" class="btn1" :href="registerUrl">
 							{{ $t("more.login_modal.btn_1") }}
 						</a>

package/components/ui/MgTestimonials.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { useTestimoniesStore } from "../../stores/testimonies";
+
+const props = defineProps({
+	params: {
+		type: Object,
+		default: () => ({}),
+	},
+	autoLoad: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+const store = useTestimoniesStore();
+const { testimonies, loading, error } = storeToRefs(store);
+
+onMounted(() => {
+	if (props.autoLoad) store.fetchTestimonies(props.params);
+});
+</script>
+
+<template>
+	<div class="mg-testimonials">
+		<div v-if="loading" class="mg-testimonials__loading">
+			<slot name="loading" />
+		</div>
+		<div v-else-if="error" class="mg-testimonials__error">
+			<slot name="error" :error="error" />
+		</div>
+		<div v-else-if="testimonies.length === 0" class="mg-testimonials__empty">
+			<slot name="empty" />
+		</div>
+		<div v-else class="mg-testimonials__list">
+			<slot :testimonies="testimonies">
+				<div
+					v-for="(testimony, i) in testimonies"
+					:key="testimony.id ?? i"
+					class="mg-testimonials__item"
+				>
+					<blockquote class="mg-testimonials__item__body">
+						{{ testimony.body }}
+					</blockquote>
+					<div class="mg-testimonials__item__author">
+						<img
+							v-if="testimony.avatar_url"
+							:src="testimony.avatar_url"
+							:alt="testimony.name"
+							class="mg-testimonials__item__avatar"
+						/>
+						<div class="mg-testimonials__item__meta">
+							<span class="mg-testimonials__item__name">{{ testimony.name }}</span>
+							<span v-if="testimony.role || testimony.company" class="mg-testimonials__item__role">
+								{{ [testimony.role, testimony.company].filter(Boolean).join(" · ") }}
+							</span>
+						</div>
+					</div>
+				</div>
+			</slot>
+		</div>
+	</div>
+</template>

package/components/ui/MgWalletPlanBadge.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+/**
+ * MgWalletPlanBadge — shows the user's MGC balance + current plan in the nav header.
+ *
+ * Reads straight from the auth store, which every service-api enriches on
+ * /auth/user with `mgc_balance` and `subscription` ({ plan_name, plan_slug,
+ * tier, is_subscriber }). No extra API call — never hit /gamification/wallet
+ * from the header.
+ *
+ * Drop <MgWalletPlanBadge /> into any header. Props let each platform tweak
+ * the plan-slug prefix it strips (e.g. "academy-", "tv-").
+ */
+import { storeToRefs } from "pinia";
+
+const props = defineProps({
+	// Strip this platform prefix from a plan slug fallback (e.g. "academy-pro" → "pro")
+	planPrefix: { type: String, default: "" },
+	showPlan: { type: Boolean, default: true },
+	showWallet: { type: Boolean, default: true },
+});
+
+const authStore = useAuthStore();
+const { user } = storeToRefs(authStore);
+
+const walletBalance = computed<number>(
+	() => (user.value as any)?.mgc_balance ?? (user.value as any)?.coins ?? 0,
+);
+
+const planDisplayName = computed(() => {
+	const sub = (user.value as any)?.subscription ?? {};
+	let raw: string = sub.plan_name || sub.plan_slug || "";
+	if (!sub.plan_name && raw && props.planPrefix) {
+		raw = raw.replace(new RegExp(`^${props.planPrefix}`), "");
+	}
+	raw = (raw || "Free").replace(/-/g, " ");
+	return raw.charAt(0).toUpperCase() + raw.slice(1);
+});
+
+const isSubscriber = computed(() => !!(user.value as any)?.subscription?.is_subscriber);
+</script>
+
+<template>
+	<div class="mg-wallet-plan">
+		<span v-if="showWallet" class="mg-wallet-plan__coins">
+			<MGIcon icon="coin" />
+			{{ walletBalance.toLocaleString() }}
+			<span class="mg-wallet-plan__currency">MGC</span>
+		</span>
+		<span
+			v-if="showPlan"
+			class="mg-wallet-plan__tag"
+			:class="{ 'is-subscriber': isSubscriber }"
+		>
+			{{ planDisplayName }}
+		</span>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.mg-wallet-plan {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.6rem;
+
+	&__coins {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: var(--active, var(--card-cover-title, #fff));
+	}
+
+	&__currency {
+		font-size: 0.7rem;
+		opacity: 0.7;
+		font-weight: 500;
+	}
+
+	&__tag {
+		font-size: 0.7rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		padding: 2px 8px;
+		color: var(--inactive, #aaa);
+		border: 1px solid var(--border-card, #333);
+
+		&.is-subscriber {
+			color: var(--highlight-color, var(--header-active-fg, #ff7700));
+			border-color: currentColor;
+		}
+	}
+}
+</style>