@mundogamernetwork/shared-ui 1.16.6 → 1.16.8

package/components/ui/MgHeaderUIUser.vue

@@ -14,6 +14,7 @@ const { performLogout } = useLogout();
 
 const runtimeConfig = useRuntimeConfig();
 const accountsBaseUrl = runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl;
+const supportUrl = `${accountsBaseUrl}/account/support/new`;
 const features = runtimeConfig.public.mgSharedUi?.features ?? {};
 const pricingUrl = runtimeConfig.public.mgSharedUi?.pricingUrl || "";
 const { locale } = useI18n();
@@ -47,7 +48,10 @@ onUnmounted(() => {
 });
 
 const handleLogout = async () => {
-	await performLogout(`${accountsBaseUrl}/login`);
+	// No explicit redirect — performLogout defaults to the current page,
+	// so logging out keeps you on this site (now as a guest) instead of
+	// bouncing to accounts' login page. See useLogout.ts.
+	await performLogout();
 };
 
 const handleToggleOnline = () => {
@@ -58,6 +62,20 @@ const handleToggleOnline = () => {
 </script>
 
 <template>
+	<!--
+		The 'signed-in' class below is a reactive :class binding on THIS SAME
+		element — it hit the identical never-repatched-after-hydration-mismatch
+		symptom the inner v-if/v-else branches did (see the comment above
+		MgLoginRegisterMenu/section further down), and unlike that inner swap,
+		there's no sibling-vnode :key trick available to fix an ancestor's own
+		class binding on itself (verified: a :key on this element does NOT
+		force it to re-evaluate — key only affects sibling-vnode comparison,
+		not a component's own reactive re-render). The width rule that used to
+		key off '.signed-in' now uses :has(.signed-in-menu) instead — real DOM
+		structure, correct regardless of whether this class ever catches up.
+		The class stays here for anything else that legitimately keys off it
+		(e.g. a host's own CSS); just don't rely on it for layout in this file.
+	-->
 	<div ref="refDiv" :class="{ 'ui-config-user': true, 'signed-in': signedIn }">
 		<div ref="wrapper" class="ui-config-user__content">
 			<!--
@@ -139,6 +157,12 @@ const handleToggleOnline = () => {
 					</a>
 				</div>
 
+				<div class="row info-row">
+					<a :href="supportUrl" target="_blank" class="support-link">
+						{{ $t("account_menu.buttons.support", "Support") }}
+					</a>
+				</div>
+
 				<div v-if="features.statusOnline" class="row info-row my-3">
 					<div class="status-toggle">
 						<span>{{ $t("account_menu.buttons.show_online") }}</span>
@@ -189,7 +213,16 @@ const handleToggleOnline = () => {
 	overflow-y: auto;
 	transition: all ease 0.5s;
 
-	&:not(.signed-in) {
+	// Derived from the actual rendered content (:has), not the .signed-in
+	// class this element also carries. That class is a reactive :class
+	// binding on THIS SAME element (see the guest→signed-in transition
+	// comment above the template's MgLoginRegisterMenu/section) — it hit
+	// the identical never-repatched symptom the inner branch did, and
+	// unlike the inner v-if/v-else swap, there's no sibling-vnode :key
+	// trick available for an ancestor's own class binding on itself.
+	// :has(.signed-in-menu) reads real DOM structure instead, so it's
+	// correct regardless of whether that class binding ever catches up.
+	&:not(:has(.signed-in-menu)) {
 		width: 340px;
 	}
 
@@ -310,6 +343,26 @@ const handleToggleOnline = () => {
 			}
 		}
 
+		.support-link {
+			display: block;
+			width: 100%;
+			text-align: center;
+			font-size: 0.75rem;
+			font-weight: 400;
+			// Deliberately quieter than .plans-pricing-link — this is a low-key
+			// secondary affordance, not a conversion CTA, so it stays on a muted
+			// text token instead of each host's accent color.
+			color: var(--secondary-info-fg, var(--inactive));
+			text-decoration: none;
+			padding: 4px 0;
+			margin-top: 8px;
+
+			&:hover {
+				text-decoration: underline;
+				color: var(--active);
+			}
+		}
+
 		.status-toggle {
 			display: flex;
 			justify-content: space-between;

package/composables/useLogout.ts

@@ -23,7 +23,13 @@ export function useLogout() {
 			});
 		}
 
-		const target = redirectTo || `${accountsBaseUrl}/login`;
+		// Default: stay on the current site, now as a guest — these are mostly
+		// publicly-browsable content sites (a job posting, a video, a post),
+		// so bouncing to a different domain's login page on every logout is
+		// disorienting. accountsBaseUrl/login is still available for a caller
+		// that genuinely needs it (e.g. accounts' own logout), just not the
+		// default anymore.
+		const target = redirectTo || (typeof window !== "undefined" ? window.location.href : `${accountsBaseUrl}/login`);
 
 		if (typeof document === "undefined" || !apiBase) {
 			if (typeof window !== "undefined") window.location.href = target;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.16.6",
+  "version": "1.16.8",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/faq.vue

@@ -8,6 +8,36 @@ const { isFaqOpened, faq } = storeToRefs(institutionalStore);
 
 const searchTerm = ref("");
 
+// Same host-agnostic login-redirect construction as MgLoginRegisterMenu's
+// goLogin() — routes through the CURRENT platform's own /login (apiBaseURL
+// host) rather than accountsBaseUrl/login directly, since most platforms'
+// session cookie is scoped to their own API domain, not accounts'. Inlined
+// rather than imported for the same reason as MgLoginRegisterMenu: this
+// file ships as raw TS/Vue inside an npm package, and relative .ts imports
+// from node_modules fail in Vite production builds.
+const runtimeConfig = useRuntimeConfig();
+const apiBase = (
+	(runtimeConfig.public.mgSharedUi?.apiBaseURL as string) ||
+	(runtimeConfig.public.apiBaseURL as string) ||
+	(import.meta.env.VITE_API_BASE_URL as string) ||
+	""
+).replace(/\/api\/v1\/?$/, "");
+const accountsBaseUrl =
+	(runtimeConfig.public.mgSharedUi?.accountsBaseUrl as string) ||
+	(runtimeConfig.public.accountsBaseUrl as string) ||
+	(import.meta.env.VITE_BASE_ACCOUNTS_URL as string) ||
+	"";
+const systemId =
+	(runtimeConfig.public.mgSharedUi?.systemId as string) ||
+	(runtimeConfig.public.platformId as string) ||
+	(import.meta.env.VITE_SYSTEM_ID as string) ||
+	"";
+const openTicketUrl = (() => {
+	const params: Record<string, string> = { redirect_to: `${accountsBaseUrl}/account/support/new` };
+	if (systemId) params.system_id = systemId;
+	return `${apiBase}/login?${new URLSearchParams(params)}`;
+})();
+
 const showModal = ref(false);
 const modalMessage = ref("");
 const closeModal = () => {
@@ -16,8 +46,6 @@ const closeModal = () => {
 
 async function fetchFaqs() {
 	try {
-		const config = useRuntimeConfig();
-		const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
 		await institutionalStore.fetchFaq({
 			filter: {
 				term: searchTerm.value,
@@ -102,6 +130,9 @@ function toggleFaq(index: number) {
 										</span>
 									</div>
 								</div>
+								<a :href="openTicketUrl" class="press__button">
+									<span class="press__button--text">{{ $t("more.faq.open_ticket_btn") }}</span>
+								</a>
 							</div>
 						</div>
 					</div>
@@ -271,6 +302,26 @@ function toggleFaq(index: number) {
 				}
 			}
 		}
+
+		&__button {
+			background: var(--chip-text);
+			display: flex;
+			width: 200px;
+			height: 32px;
+			padding: 0px 12px 0px 8px;
+			justify-content: center;
+			align-items: center;
+			gap: 4px;
+			margin-top: 16px;
+
+			&--text {
+				color: var(--chip-background-2);
+				text-align: center;
+				font-size: 12px;
+				font-weight: 400;
+				line-height: 16px;
+			}
+		}
 	}
 }