@mundogamernetwork/shared-ui 1.1.44 → 1.1.46

package/pages/key/[slug].vue

@@ -0,0 +1,125 @@
+<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 runtimeConfig = useRuntimeConfig();
+const cfg = (runtimeConfig.public?.mgSharedUi || {}) as Record<string, any>;
+const apiBase: string =
+	cfg.apiBaseURL ||
+	(runtimeConfig.public as any)?.apiBaseURL ||
+	'';
+
+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 { data: keyData, error: fetchError, pending } = await useAsyncData(
+	`public-key-${slug}`,
+	() => $fetch<any>(`${apiBase}/public/keys/${slug}`, { params: { lang } }),
+	{ lazy: false },
+);
+
+const key = computed(() => keyData.value?.data || keyData.value || null);
+const loading = pending;
+const error = computed(() => !!fetchError.value || (!pending.value && !key.value));
+
+const restriction = computed(() => {
+	const k = key.value;
+	if (!k) return '';
+	if (k.is_exclusive) return 'Exclusiva para streamers oficiais';
+	if (k.is_tier_locked && k.access_tier && k.access_tier !== 'free') return `Exclusiva para o plano ${String(k.access_tier).toUpperCase()} ou superior`;
+	if (k.streamer_type_id === 2) return 'Exclusiva para streamers oficiais';
+	if (k.streamer_type_id === 3) return 'Exclusiva para afiliados';
+	return '';
+});
+</script>
+
+<template>
+	<div class="kc">
+		<div v-if="loading" class="kc__state">Carregando…</div>
+		<div v-else-if="error" class="kc__state">Campanha não encontrada.</div>
+
+		<template v-else>
+			<div class="kc__hero">
+				<img v-if="key.cover_src" :src="key.cover_src" :alt="key.name" class="kc__cover">
+				<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 }} chave(s) pra resgatar</span>
+						<span v-else>Chaves esgotadas</span>
+					</div>
+				</div>
+			</div>
+
+			<div class="kc__browser">
+				<KeyBrowser
+					requester-context="user"
+					:game-id="key.game?.id || key.game_id"
+				/>
+			</div>
+		</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: #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>

package/pages/magazine/[slug]/preview.vue

@@ -52,7 +52,7 @@ const locale = useNuxtApp().$i18n.locale;
 const slug = computed(() => route.params.slug as string);
 
 const magazineStore = useMagazineStore();
-const { magazine, magazines, magazinePages } = magazineStore;
+const { magazine, magazines, magazinePages } = storeToRefs(magazineStore);
 const institutionalStore = useInstitutionalStore();
 const { language } = institutionalStore;
 
@@ -124,7 +124,7 @@ function restoreReadingProgress() {
 		return;
 	}
 
-	const totalPages = magazinePages.data?.length ?? 0;
+	const totalPages = magazinePages.value.data?.length ?? 0;
 	if (!totalPages) {
 		startPage.value = 0;
 		return;
@@ -148,15 +148,15 @@ const showDownloadGateMessage = ref("");
 
 // Flipbook pages mapped for MgnFlipbook
 const flipbookPages = computed<PageData[]>(() => {
-	if (!magazinePages.data || magazinePages.data.length === 0) return [];
-	return magazinePages.data.map((page: MagazinePage) => ({
+	if (!magazinePages.value.data || magazinePages.value.data.length === 0) return [];
+	return magazinePages.value.data.map((page: MagazinePage) => ({
 		index: page.page_number - 1,
 		thumbnailUrl: page.thumbnail_url,
 		imageUrl: page.image_url,
 		hiresUrl: page.hires_url,
 		hotspots: getMagazinePageHotspots({
 			page,
-			flipbookCode: magazine.data?.flipbook_code,
+			flipbookCode: magazine.value.data?.flipbook_code,
 		}),
 	}));
 });
@@ -164,14 +164,14 @@ const flipbookPages = computed<PageData[]>(() => {
 // Determine if lead capture modal should show
 const requiresLeadCapture = computed(() => {
 	if (leadCaptured.value) return false;
-	if (!magazinePages.meta) return false;
-	return magazinePages.meta.requires_lead || magazinePages.meta.capture_leads;
+	if (!magazinePages.value.meta) return false;
+	return magazinePages.value.meta.requires_lead || magazinePages.value.meta.capture_leads;
 });
 
 async function getMagazineData() {
 	try {
 		await magazineStore.getMagazine(slug.value);
-		status.value = magazine.status;
+		status.value = magazine.value.status;
 	} catch (error) {
 		console.error("Error fetching magazine:", error);
 	}
@@ -195,8 +195,8 @@ async function loadFlipbookPages() {
 }
 
 function downloadPdf() {
-	if (magazine.data.pdf_url_src) {
-		window.open(magazine.data.pdf_url_src, "_blank");
+	if (magazine.value.data.pdf_url_src) {
+		window.open(magazine.value.data.pdf_url_src, "_blank");
 		magazineStore.trackAnalytic(slug.value, "download");
 	}
 }
@@ -210,13 +210,13 @@ function downloadPdf() {
  */
 function handleFlipbookDownload() {
 	// Gate 1: Premium magazine - need active subscription
-	if (magazine.data.premium === true) {
+	if (magazine.value.data.premium === true) {
 		showDownloadGateMessage.value = "premium";
 		return;
 	}
 
 	// Gate 2: Non-public magazine - must be registered/signed in
-	if (magazine.data.public === false && signedIn.value === false) {
+	if (magazine.value.data.public === false && signedIn.value === false) {
 		showDownloadGateMessage.value = "signin";
 		return;
 	}
@@ -307,7 +307,7 @@ async function fetchMagazine() {
 		await magazineStore.fetchMagazine({
 			filter: {
 				status: 1,
-				edition_number: magazine.data.edition_number,
+				edition_number: magazine.value.data.edition_number,
 				platform_id: import.meta.env.VITE_SYSTEM_ID,
 			},
 			sort: "id",
@@ -331,16 +331,16 @@ async function fetchLanguage() {
 }
 
 function filterLanguages() {
-	if (magazine.data && magazines.data && magazines.data.length > 0) {
-		languageId.value = magazine.data.language.id;
-		const languageIds = magazines.data.map(
+	if (magazine.value.data && magazines.value.data && magazines.value.data.length > 0) {
+		languageId.value = magazine.value.data.language.id;
+		const languageIds = magazines.value.data.map(
 			(item: MagazineItem) => item.language.id,
 		);
 		languages.value = language.data.filter((language: LanguageItem) =>
 			languageIds.includes(language.id),
 		);
 		languages.value.forEach((language: LanguageItem) => {
-			const magazineItem = magazines.data.find(
+			const magazineItem = magazines.value.data.find(
 				(item: MagazineItem) => item.language.id === language.id,
 			);
 			if (magazineItem) {

package/pages/presskit/[slug].vue

@@ -1,275 +1,6 @@
 <script setup lang="ts">
-import { trackPressKitEvent } from '../../services/pressKitService';
-
-definePageMeta({ layout: 'blank' });
-
-const route = useRoute();
-const slug = route.params.slug as string;
-
-const runtimeConfig = useRuntimeConfig();
-const cfg = (runtimeConfig.public?.mgSharedUi || {}) as Record<string, any>;
-// Consuming apps may set apiBaseURL at public root (agency/community/tv pattern)
-// or inside mgSharedUi. pressKitApiUrl overrides both (e.g. community points to agency API).
-const apiBase: string =
-	cfg.pressKitApiUrl ||
-	(runtimeConfig.public as any)?.pressKitApiUrl ||
-	cfg.apiBaseURL ||
-	(runtimeConfig.public as any)?.apiBaseURL ||
-	'';
-
-const agencyBase: string =
-	cfg.agencyBaseUrl ||
-	(runtimeConfig.public as any)?.agencyBaseUrl ||
-	'';
-
-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 { data: kitData, error: fetchError, pending } = await useAsyncData(
-	`press-kit-${slug}`,
-	() => $fetch<any>(`${apiBase}/public/press-kits/${slug}`, {
-		params: { include: 'assets,videos,credits,awards,quotes', lang },
-	}),
-	{ lazy: false },
-);
-
-const kit = computed(() => kitData.value?.data || kitData.value || null);
-const loading = pending;
-const error = computed(() => !!fetchError.value || (!pending.value && !kit.value));
-
-onMounted(() => {
-	if (kit.value) {
-		trackPressKitEvent(slug, {
-			event_type: 'view',
-			referrer: document.referrer || undefined,
-		}).catch(() => {});
-	}
-});
-
-// Fractal include shape: relation -> { data: [...] }
-const list = (rel: any) => rel?.data || rel || [];
-const assets = computed(() => list(kit.value?.assets));
-const videos = computed(() => list(kit.value?.videos));
-const awards = computed(() => list(kit.value?.awards));
-const quotes = computed(() => list(kit.value?.quotes));
-const team = computed(() => list(kit.value?.credits));
-const features = computed(() => kit.value?.key_features || []);
-// New, optional blocks (rendered only when the API provides them)
-const articles = computed(() => list(kit.value?.articles));
-const coverage = computed(() => list(kit.value?.coverage));
-const showcases = computed(() => list(kit.value?.showcases));
-const hasEcosystem = computed(() => showcases.value.length || kit.value?.ventures_url || kit.value?.magazine_feature || kit.value?.community_url);
-
-const screenshots = computed(() => assets.value.filter((a: any) => ['screenshot', 'artwork', 'gif'].includes(a.type)));
-const brandAssets = computed(() => assets.value.filter((a: any) => ['logo', 'document'].includes(a.type)));
-
-const tpl = computed(() => kit.value?.theme || null);
-const layout = computed(() => kit.value?.layout || 'classic');
-const allowDownload = computed(() => kit.value?.allow_asset_download !== false);
-
-const socials = computed(() => {
-	const s = kit.value?.social_links || {};
-	return Object.entries(s).filter(([, v]) => v).map(([k, v]) => ({ platform: k, url: v as string }));
-});
-
-const facts = computed(() => {
-	const k = kit.value || {};
-	const out: { label: string; value: string; accent?: boolean; href?: string }[] = [];
-	if (k.developer) out.push({ label: 'kit.press.developer', value: k.developer });
-	if (k.publisher) out.push({ label: 'kit.press.publisher', value: k.publisher });
-	if (k.release_date_tba) out.push({ label: 'kit.press.release', value: 'TBA', accent: true });
-	else if (k.release_date) out.push({ label: 'kit.press.release', value: k.release_date, accent: true });
-	if (k.release_status) out.push({ label: 'kit.press.status', value: String(k.release_status).replace(/_/g, ' ') });
-	if (k.price) out.push({ label: 'kit.press.price', value: `${k.price}${k.currency ? ' ' + k.currency : ''}` });
-	if (k.website_url) out.push({ label: 'kit.press.website', value: k.website_url, accent: true, href: k.website_url });
-	if (k.steam_url) out.push({ label: 'Steam', value: k.steam_url, href: k.steam_url });
-	if (k.press_contact_email) out.push({ label: 'kit.press.contact', value: k.press_contact_email, href: `mailto:${k.press_contact_email}` });
-	return out;
-});
-
-function track(type: 'click' | 'download' | 'contact') {
-	trackPressKitEvent(slug, { event_type: type, referrer: document.referrer || undefined }).catch(() => {});
-}
-
-const requestUrl = useRequestURL();
-useHead(() => ({
-	title: kit.value ? `${kit.value.name} — Press Kit` : 'Press Kit',
-	meta: [
-		{ name: 'description', content: kit.value?.tagline || '' },
-		{ property: 'og:title', content: kit.value?.name || 'Press Kit' },
-		{ property: 'og:description', content: kit.value?.tagline || '' },
-		{ property: 'og:image', content: kit.value?.hero_image_url || kit.value?.logo_url || '' },
-		{ property: 'og:type', content: 'article' },
-		{ property: 'og:url', content: requestUrl.href },
-	],
-}));
+// Redirect /presskit/[slug] → /presskit/game/[slug] (canonical press kit route)
+definePageMeta({ layout: 'blank' })
+const route = useRoute()
+navigateTo(`/presskit/game/${route.params.slug}`, { redirectCode: 301 })
 </script>
-
-<template>
-	<div class="kit-press" :data-tpl="tpl" :data-layout="layout">
-		<div v-if="loading" class="kit-state">{{ $t('kit.loading') }}</div>
-		<div v-else-if="error || !kit" class="kit-state">
-			<h2>{{ $t('kit.press.not_found') }}</h2>
-		</div>
-
-		<template v-else>
-			<!-- CAPA / COVER -->
-			<header class="kit-cover">
-				<img v-if="kit.hero_image_url" class="kit-cover-art" :src="kit.hero_image_url" :alt="kit.name" />
-				<div class="kit-cover-inner">
-					<img v-if="kit.cover_image_url" class="kit-cover-poster" :src="kit.cover_image_url" :alt="kit.name" />
-					<div class="kit-cover-text">
-						<span v-if="kit.release_status" class="kit-eyebrow">{{ String(kit.release_status).replace(/_/g, ' ') }}</span>
-						<img v-if="kit.logo_url" class="kit-cover-logo-img" :src="kit.logo_url" :alt="kit.name" />
-						<h1 v-else>{{ kit.name }}</h1>
-						<p v-if="kit.tagline" class="kit-tagline">{{ kit.tagline }}</p>
-						<p v-if="kit.developer" class="kit-kicker">{{ kit.developer }}</p>
-						<div class="kit-actions">
-							<a v-if="allowDownload" class="kit-btn kit-btn-primary" @click="track('download')">{{ $t('kit.press.download_assets') }}</a>
-							<a v-if="kit.press_contact_email" class="kit-btn kit-btn-ghost" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
-						</div>
-					</div>
-				</div>
-			</header>
-
-			<div class="kit-wrap">
-				<div class="kit-layout">
-					<aside class="kit-sidebar">
-						<div class="kit-card kit-factsheet">
-							<h3 class="kit-fact-title">{{ $t('kit.press.fact_sheet') }}</h3>
-							<div v-for="f in facts" :key="f.label" class="kit-fact">
-								<span class="k">{{ $te(f.label) ? $t(f.label) : f.label }}</span>
-								<a v-if="f.href" class="v accent" :href="f.href" target="_blank" rel="noopener" @click="track('click')">{{ f.value }}</a>
-								<span v-else class="v" :class="{ accent: f.accent }">{{ f.value }}</span>
-							</div>
-							<div v-if="socials.length" class="kit-fact">
-								<span class="k">{{ $t('kit.press.social') }}</span>
-								<div class="kit-socials">
-									<a v-for="s in socials" :key="s.platform" :href="s.url" target="_blank" rel="noopener" @click="track('click')">{{ s.platform.charAt(0).toUpperCase() }}</a>
-								</div>
-							</div>
-						</div>
-					</aside>
-
-					<main class="kit-main">
-						<section v-if="kit.description" class="kit-block">
-							<h2>{{ $t('kit.press.about') }}</h2>
-							<div class="kit-lead" v-html="kit.description" />
-						</section>
-
-						<section v-if="features.length" class="kit-block">
-							<h2>{{ $t('kit.press.features') }}</h2>
-							<div class="kit-features">
-								<div v-for="(f, i) in features" :key="i" class="kit-feature"><span class="m">▸</span>{{ f }}</div>
-							</div>
-						</section>
-
-						<section v-if="videos.length" class="kit-block">
-							<h2>{{ $t('kit.press.videos') }}</h2>
-							<PressKitVideoPlayer :videos="videos" />
-						</section>
-
-						<section v-if="screenshots.length" class="kit-block">
-							<div class="kit-shead"><h2>{{ $t('kit.press.screenshots') }}</h2><a v-if="allowDownload" class="kit-dl" @click="track('download')">{{ $t('kit.press.download_all') }}</a></div>
-							<div class="kit-gallery">
-								<a v-for="(s, i) in screenshots" :key="i" class="kit-shot" :href="s.url" target="_blank" rel="noopener"><img :src="s.thumbnail_url || s.url" :alt="s.title || ''" /></a>
-							</div>
-						</section>
-
-						<section v-if="brandAssets.length" class="kit-block">
-							<div class="kit-shead"><h2>{{ $t('kit.press.logo_icons') }}</h2></div>
-							<div class="kit-logos">
-								<a v-for="(b, i) in brandAssets" :key="i" class="kit-logo-tile" :href="b.url" target="_blank" rel="noopener" @click="track('download')">
-									<span class="ic">◆</span>{{ b.title || b.type }}
-								</a>
-							</div>
-						</section>
-
-						<!-- NEW: Conteúdos & Artigos (community + external) -->
-						<section v-if="articles.length" class="kit-block">
-							<div class="kit-shead"><h2>{{ $t('kit.press.articles') }}</h2></div>
-							<div class="kit-articles">
-								<a v-for="(a, i) in articles" :key="i" class="kit-article" :href="a.url" target="_blank" rel="noopener" @click="track('click')">
-									<div class="thumb" :style="a.image ? { backgroundImage: `url(${a.image})` } : {}"><span class="src" :class="{ ext: a.external }">{{ a.external ? $t('kit.press.external') : 'Mundo Gamer' }}</span></div>
-									<div class="a-body"><h4>{{ a.title }}</h4><div class="meta">{{ a.source }}<span v-if="a.date"> · {{ a.date }}</span></div></div>
-								</a>
-							</div>
-						</section>
-
-						<!-- NEW: Cobertura de Criadores -->
-						<section v-if="coverage.length" class="kit-block">
-							<h2>{{ $t('kit.press.coverage') }}</h2>
-							<div class="kit-creators">
-								<a v-for="(c, i) in coverage" :key="i" class="kit-creator" :href="c.url || undefined" target="_blank" rel="noopener">
-									<div class="av" :style="c.avatar ? { backgroundImage: `url(${c.avatar})` } : {}" />
-									<div class="cn">{{ c.name }}</div>
-									<div class="cp">{{ c.platform }}<span v-if="c.followers"> · {{ c.followers }}</span></div>
-									<div v-if="c.label" class="cv">{{ c.label }}</div>
-								</a>
-							</div>
-						</section>
-
-						<section v-if="awards.length" class="kit-block">
-							<h2>{{ $t('kit.press.awards') }}</h2>
-							<PressKitAwards :awards="awards" />
-						</section>
-
-						<section v-if="quotes.length" class="kit-block">
-							<h2>{{ $t('kit.press.press') }}</h2>
-							<PressKitQuotes :quotes="quotes" />
-						</section>
-
-						<!-- Créditos -> Equipe -->
-						<section v-if="team.length" class="kit-block">
-							<h2>{{ $t('kit.press.team') }}</h2>
-							<div class="kit-team">
-								<div v-for="(m, i) in team" :key="i" class="kit-member"><span>{{ m.name }}</span><span class="role">{{ m.role }}</span></div>
-							</div>
-						</section>
-
-						<!-- NEW: Ecossistema Mundo Gamer -->
-						<section v-if="hasEcosystem" class="kit-block">
-							<h2>{{ $t('kit.press.ecosystem') }}</h2>
-							<div class="kit-eco">
-								<div v-if="showcases.length" class="kit-eco-card full">
-									<div class="kit-eco-h"><span class="ic">★</span>{{ $t('kit.press.showcases') }}</div>
-									<div class="kit-sbadges">
-										<span v-for="(s, i) in showcases" :key="i" class="kit-sbadge" :class="{ feat: s.featured }"><span class="medal">{{ s.featured ? '🏵️' : '🎮' }}</span>{{ s.name }}<span v-if="s.year"> {{ s.year }}</span></span>
-									</div>
-								</div>
-								<div v-if="kit.ventures_url" class="kit-eco-card">
-									<div class="kit-eco-h"><span class="ic">◈</span>MGN Ventures</div>
-									<a class="kit-vrow" :href="kit.ventures_url" target="_blank" rel="noopener" @click="track('click')"><span class="vlogo">VENTURES</span><span class="vtxt">{{ $t('kit.press.ventures_text') }}</span></a>
-								</div>
-								<a v-if="kit.magazine_feature" class="kit-eco-card kit-mag" :href="kit.magazine_feature.url" target="_blank" rel="noopener" @click="track('click')">
-									<div class="kit-eco-h" style="width:100%"><span class="ic">▤</span>MGN Magazine</div>
-									<div class="kit-mag-row"><div class="mcover" :style="kit.magazine_feature.cover ? { backgroundImage: `url(${kit.magazine_feature.cover})` } : {}" /><div><div class="mtitle">{{ kit.magazine_feature.title }}</div><div class="mmeta">{{ kit.magazine_feature.issue }}</div></div></div>
-								</a>
-								<div v-if="kit.community_url" class="kit-eco-card full">
-									<div class="kit-ccta">
-										<div><div class="ctitle">{{ $t('kit.press.follow_community', { name: kit.name }) }}</div><div v-if="kit.community_followers" class="cmeta">{{ kit.community_followers }} {{ $t('kit.press.followers') }}</div></div>
-										<a class="kit-btn kit-btn-primary" :href="kit.community_url" target="_blank" rel="noopener" @click="track('click')">{{ $t('kit.press.follow') }}</a>
-									</div>
-								</div>
-							</div>
-						</section>
-
-						<section v-if="kit.press_contact_email" class="kit-block">
-							<div class="kit-cta">
-								<h2>{{ $t('kit.press.covering', { name: kit.name }) }}</h2>
-								<p>{{ $t('kit.press.cta_text') }}</p>
-								<a class="kit-btn kit-btn-primary" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
-							</div>
-						</section>
-
-						<p class="kit-madewith">
-							{{ $t('kit.press.made_with') }} <strong>Mundo Gamer</strong> —
-							<a :href="kit.create_kit_url || `${agencyBase}/presskit`" target="_blank" rel="noopener">{{ $t('kit.press.create_yours') }}</a>
-						</p>
-					</main>
-				</div>
-			</div>
-		</template>
-	</div>
-</template>