@mundogamernetwork/shared-ui 1.8.18 → 1.8.19

package/components/keys/KeyCampaignDashboardCard.vue

@@ -89,10 +89,16 @@ function formatCountdown(availableAt: string | null | undefined): string {
 	return h > 0 ? `${h}h ${m}m` : `${m}m`;
 }
 
+// key-campaigns (plural) is the canonical route on every front. The singular
+// used to be a second, standalone copy of this page in shared-ui — worse than
+// the real one (hardcoded English, no embargo handling) and the reason a shared
+// link previewed differently depending on which app served it. It is now a
+// server-level 301, so defaulting here to the singular would only send every
+// card click through a needless redirect.
 const detailRoute = computed(() =>
 	props.publicMode
-		? `/${locale.value}/${props.baseRoute ?? 'key-campaign'}/${props.card.slug}`
-		: `/${locale.value}/dashboard/${props.baseRoute ?? 'key-campaign'}/${props.card.slug}`
+		? `/${locale.value}/${props.baseRoute ?? 'key-campaigns'}/${props.card.slug}`
+		: `/${locale.value}/dashboard/${props.baseRoute ?? 'key-campaigns'}/${props.card.slug}`
 );
 </script>
 

package/package.json

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

package/pages/key-campaigns/redeem-key.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, inject, onMounted, unref, watch } from "vue"
+import { ref, computed, inject, onMounted, onUnmounted, unref, watch } from "vue"
 import { useRoute, navigateTo } from "#app"
 import { useNuxtApp } from "#app"
 import {
@@ -51,6 +51,13 @@ const embargoAckChecked = ref(false)
 
 const maxKeysForUser = computed(() => campaign.value?.max_keys_for_user ?? 1)
 
+// Where the success screen sends the user back to. Falls back to the id the
+// page was opened with, which fetchCampaignBySlug also accepts.
+const campaignPath = computed(
+	() => `/${locale.value}/key-campaigns/${campaign.value?.slug || keyId}`,
+)
+let redirectTimer: ReturnType<typeof setTimeout> | null = null
+
 const embargoDateTime = computed(() =>
 	formatEmbargoDateTime(campaign.value?.embargo_date, campaign.value?.embargo_timezone, locale.value),
 )
@@ -196,6 +203,13 @@ async function submit() {
 			return
 		}
 		success.value = true
+		// The success screen says "Redirecting…", so actually redirect: it used
+		// to sit there forever, leaving the user staring at a promise that never
+		// resolved with only a manual back button to escape.
+		redirectTimer = setTimeout(() => {
+			redirectTimer = null
+			navigateTo(campaignPath.value)
+		}, 2000)
 	} catch (e: any) {
 		const status = e?.response?.status
 		const errorCode = e?.response?.data?.error_code
@@ -223,12 +237,25 @@ async function submit() {
 }
 
 function goBack() {
+	// Tapping the button beats the pending auto-redirect to the punch.
+	if (redirectTimer) {
+		clearTimeout(redirectTimer)
+		redirectTimer = null
+	}
+	if (success.value) {
+		navigateTo(campaignPath.value)
+		return
+	}
 	if (typeof window !== "undefined" && window.history.length > 1) {
 		window.history.back()
 	} else {
 		navigateTo(`/${locale.value}/key-campaigns`)
 	}
 }
+
+onUnmounted(() => {
+	if (redirectTimer) clearTimeout(redirectTimer)
+})
 </script>
 
 <template>

package/pages/key-campaign/[slug].vue

@@ -1,164 +0,0 @@
-<script setup lang="ts">
-// Public, shareable standalone key-campaign page. Reached from broadcast links
-// (Discord/Telegram/WhatsApp) and from anywhere — no need to enter a dashboard.
-// Anyone can view; requesting a key uses KeyBrowser's hybrid auth (it redirects
-// to login on 401 and returns).
-definePageMeta({ layout: 'blank' });
-
-const route = useRoute();
-const slug = route.params.slug as string;
-
-const SUPPORTED_LOCALES = ['en', 'pt-BR', 'es', 'de', 'ro', 'ar-AE'];
-const routePath = route.path.split('/');
-const lang = SUPPORTED_LOCALES.find(l => routePath.includes(l)) || 'en';
-
-const config = useRuntimeConfig();
-// keyApiUrl overrides apiBaseURL — lets each front point to the API that
-// registered the shared key routes.
-// Follow the same override pattern as presskit/game/[slug].vue.
-const cfg = (config.public as any)?.mgSharedUi || config.public;
-const withApiV1 = (base?: string) => {
-	if (!base) return '';
-	const clean = base.replace(/\/$/, '');
-	return /\/api\/v1$/.test(clean) ? clean : `${clean}/api/v1`;
-};
-const apiBase: string = withApiV1(
-	(config.public as any).keyApiUrl ||
-	cfg.keyApiUrl ||
-	(config.public.apiBaseURL as string) ||
-	'',
-);
-
-const { data: keyData, error: fetchError, pending, refresh } = await useAsyncData(
-	`public-key-${slug}`,
-	() => $fetch<any>(`${apiBase}/public/keys/${slug}`, { params: { lang } }),
-	{ lazy: false, server: !!apiBase },
-);
-
-// If SSR produced no data (e.g. apiBase was empty during SSR), run a client-side
-// fetch once mounted so the request appears in DevTools and the page can recover.
-onMounted(async () => {
-	if (!keyData.value && !pending.value) {
-		await refresh();
-	}
-});
-
-const key = computed(() => keyData.value?.data || null);
-const loading = pending;
-const error = computed(() => !!fetchError.value || (!pending.value && !key.value));
-
-const { $i18n } = useNuxtApp()
-const t = $i18n.t.bind($i18n)
-
-useSeoMeta({
-	title: () => key.value?.name ? t('keys.campaigns.seo.title', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
-	description: () => key.value?.name ? t('keys.campaigns.seo.description', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
-	ogTitle: () => key.value?.name ? t('keys.campaigns.seo.title', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
-	ogDescription: () => key.value?.name ? t('keys.campaigns.seo.description', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
-	ogImage: () => key.value?.cover_src || key.value?.cover || undefined,
-	ogType: 'website',
-	twitterCard: 'summary_large_image',
-})
-
-const restriction = computed(() => {
-	const k = key.value;
-	if (!k) return '';
-	if (k.is_exclusive) return 'Exclusive to official streamers';
-	if (k.is_tier_locked && k.access_tier && k.access_tier !== 'free') return `Exclusive to ${String(k.access_tier).toUpperCase()} plan or higher`;
-	if (k.streamer_type_id === 2) return 'Exclusive to official streamers';
-	if (k.streamer_type_id === 3) return 'Exclusive to affiliates';
-	return '';
-});
-</script>
-
-<template>
-	<div class="kc">
-		<div v-if="loading" class="kc__state">Loading…</div>
-		<div v-else-if="error" class="kc__state">Campaign not found.</div>
-
-		<template v-else>
-			<div class="kc__hero">
-				<img
-					v-if="key.cover_src"
-					:src="key.cover_src"
-					:alt="key.name"
-					class="kc__cover"
-					:style="{ objectPosition: `${(key.cover_focal_x ?? 0.5) * 100}% ${(key.cover_focal_y ?? 0.5) * 100}%` }"
-				>
-				<div class="kc__hero-body">
-					<h1 class="kc__title">{{ key.name }}</h1>
-					<div v-if="restriction" class="kc__badge">🔒 {{ restriction }}</div>
-					<div class="kc__avail">
-						<span v-if="key.available_count > 0">{{ key.available_count }} {{ key.available_count === 1 ? 'key' : 'keys' }} available to redeem</span>
-						<span v-else>Keys sold out</span>
-					</div>
-				</div>
-			</div>
-
-			<div class="kc__browser">
-				<KeyBrowser
-					requester-context="user"
-					:game-id="key.game?.id || key.game_id"
-				/>
-			</div>
-
-			<KeyCampaignsCarousel :exclude-id="key.id ?? null" :public-mode="true" base-route="key-campaign" />
-		</template>
-	</div>
-</template>
-
-<style scoped lang="scss">
-.kc {
-	max-width: 960px;
-	margin: 0 auto;
-	padding: 24px 16px 64px;
-
-	&__state {
-		padding: 80px 0;
-		text-align: center;
-		color: var(--text-secondary, #888);
-	}
-
-	&__hero {
-		display: flex;
-		gap: 20px;
-		align-items: flex-start;
-		margin-bottom: 28px;
-		flex-wrap: wrap;
-	}
-
-	&__cover {
-		width: 260px;
-		max-width: 100%;
-		height: auto;
-		object-fit: cover;
-		border: 1px solid var(--border-color, #2a2a2a);
-	}
-
-	&__hero-body { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
-
-	&__title {
-		font-size: 1.6rem;
-		font-weight: 700;
-		color: var(--text-primary, #fff);
-		margin: 0;
-	}
-
-	&__badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		width: fit-content;
-		padding: 4px 10px;
-		font-size: 0.8rem;
-		font-weight: 600;
-		color: var(--key-accent, var(--primary, #D297FF));
-		border: 1px solid rgba(210, 151, 255, 0.35);
-		background: rgba(210, 151, 255, 0.12);
-	}
-
-	&__avail { font-size: 0.9rem; color: var(--text-secondary, #aaa); }
-
-	&__browser { margin-top: 8px; }
-}
-</style>