@mundogamernetwork/shared-ui 1.1.36 → 1.1.38

package/pages/presskit/[slug].vue

@@ -1,28 +1,49 @@
 <script setup lang="ts">
-import { fetchPublicPressKit, trackPressKitEvent } from '../../services/pressKitService';
+import { trackPressKitEvent } from '../../services/pressKitService';
 
-definePageMeta({ ssr: false, layout: 'blank' });
+definePageMeta({ layout: 'blank' });
 
 const route = useRoute();
 const slug = route.params.slug as string;
 
-const kit = ref<Record<string, any> | null>(null);
-const loading = ref(true);
-const error = ref(false);
+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 ||
+	'';
 
-onMounted(async () => {
-	try {
-		const { data } = await fetchPublicPressKit(slug);
-		kit.value = data?.data || data;
+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(() => {});
-	} catch {
-		error.value = true;
-	} finally {
-		loading.value = false;
 	}
 });
 
@@ -244,7 +265,7 @@ useHead(() => ({
 
 						<p class="kit-madewith">
 							{{ $t('kit.press.made_with') }} <strong>Mundo Gamer</strong> —
-							<a :href="kit.create_kit_url || '/dashboard/press-kit'">{{ $t('kit.press.create_yours') }}</a>
+							<a :href="kit.create_kit_url || `${agencyBase}/presskit`" target="_blank" rel="noopener">{{ $t('kit.press.create_yours') }}</a>
 						</p>
 					</main>
 				</div>

package/stores/magazine.ts

@@ -0,0 +1,83 @@
+import {
+	fetchMagazine,
+	getMagazine,
+	getMagazinePages,
+	trackMagazineAnalytic,
+	captureMagazineLead,
+} from "../services/institutionalService";
+import { defineStore } from "pinia";
+import type { MagazinePage, MagazinePagesMeta } from "../types/magazine";
+
+export const useMagazineStore = defineStore({
+	id: "magazine-store",
+	state: () => {
+		return {
+			magazines: {
+				data: <any>{},
+				meta: <any>{},
+				status: "init",
+			},
+			magazine: {
+				data: <any>{},
+				status: "init",
+			},
+			magazinePages: {
+				data: <MagazinePage[]>[],
+				meta: <MagazinePagesMeta | null>null,
+				status: "init",
+			},
+		};
+	},
+	actions: {
+		async fetchMagazine(params: any) {
+			this.magazine.status = "pending";
+			const { data } = await fetchMagazine(params);
+
+			this.magazines.data = data.data;
+			this.magazines.meta = data.meta;
+
+			this.magazines.status = "success";
+		},
+		async getMagazine(magazine: string) {
+			this.magazine.status = "pending";
+			const { data } = await getMagazine(magazine);
+
+			this.magazine.data = data.data;
+
+			this.magazine.status = "success";
+		},
+		async fetchMagazinePages(slug: string) {
+			this.magazinePages.status = "pending";
+			try {
+				const { data } = await getMagazinePages(slug);
+				this.magazinePages.data = data.data;
+				this.magazinePages.meta = data.meta;
+				this.magazinePages.status = "success";
+			} catch (error) {
+				this.magazinePages.status = "error";
+				this.magazinePages.data = [];
+				this.magazinePages.meta = null;
+			}
+		},
+		async trackAnalytic(slug: string, eventType: string) {
+			try {
+				await trackMagazineAnalytic(slug, eventType);
+			} catch (error) {
+				console.error("Error tracking analytic:", error);
+			}
+		},
+		async captureLead(slug: string, name: string, email: string) {
+			try {
+				await captureMagazineLead(slug, name, email);
+				return true;
+			} catch (error) {
+				console.error("Error capturing lead:", error);
+				return false;
+			}
+		},
+	},
+});
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useMagazineStore, import.meta.hot));
+}

package/types/magazine.ts

@@ -0,0 +1,103 @@
+export interface MagazinePageHotspot {
+	id: string;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	url?: string;
+	target?: "_self" | "_blank";
+	title?: string;
+	analytics_event?: string;
+	data?: unknown;
+}
+
+export interface MagazinePage {
+	page_number: number;
+	thumbnail_url: string;
+	image_url: string;
+	hires_url: string | null;
+	hotspots?: MagazinePageHotspot[];
+}
+
+export interface MagazinePagesMeta {
+	total_pages: number;
+	magazine_id: number;
+	flipbook_config_version?: number | null;
+	requires_lead: boolean;
+	capture_leads: boolean;
+	is_premium: boolean;
+	total_views: number;
+	total_downloads: number;
+	total_leads: number;
+}
+
+export interface Magazine {
+	id: number;
+	name: string;
+	short_description: string;
+	description: string;
+	edition_number: string;
+	release_date: string;
+	cover_url: string;
+	pdf_url: string;
+	status: boolean;
+	public: boolean;
+	premium: boolean;
+	worldwide: boolean;
+	capture_leads: boolean;
+	language_id: number;
+	views: number;
+	created_at: string;
+	updated_at: string;
+	color: string;
+	slug: string;
+	flipbook_code: string | null;
+	preview: string | null;
+	pdf_url_src: string;
+	cover_url_original_src: string;
+	cover_url_src: string;
+	language: {
+		id: number;
+		name: string;
+		name_abrev: string;
+		status: boolean;
+		icon: string | null;
+		created_at: string;
+		updated_at: string;
+		flag_svg: string;
+		status_public: boolean;
+		native_name: string;
+		flag_url: string;
+		localized_name: string;
+	};
+	platforms: Array<{
+		id: number;
+		name: string;
+		short_name: string;
+		url_image: string;
+		color: string;
+		prod_url: string;
+		dev_url: string;
+		local_url: string;
+		created_at: string;
+		updated_at: string;
+		url_reduced_image: string;
+		prod_url_api: string;
+		dev_url_api: string;
+		local_url_api: string;
+		health_check_endpoint: string;
+		health_check_endpoint_api: string;
+		status: boolean;
+		users_count: number;
+		domains_count: number;
+		contacts_count: number;
+		url_image_original_src: string;
+		url_image_src: string;
+		url_reduced_image_original_src: string;
+		url_reduced_image_src: string;
+		pivot: {
+			magazine_id: number;
+			mg_platform_id: number;
+		};
+	}>;
+}

package/utils/magazineHotspots.ts

@@ -0,0 +1,62 @@
+import type { PageHotspot } from "@mundogamernetwork/mgn-flipbook";
+import type { MagazinePage, MagazinePageHotspot } from "../types/magazine";
+
+type HotspotsByPage = Record<number, MagazinePageHotspot[]>;
+
+interface FlipbookHotspotConfig {
+	version?: number;
+	hotspotsByPage?: HotspotsByPage;
+}
+
+export function parseFlipbookHotspotConfig(
+	flipbookCode?: string | null,
+): FlipbookHotspotConfig {
+	if (!flipbookCode) return {};
+
+	try {
+		const parsed = JSON.parse(flipbookCode) as FlipbookHotspotConfig;
+		return parsed && typeof parsed === "object" ? parsed : {};
+	} catch (error) {
+		return {};
+	}
+}
+
+function normalizeHotspot(
+	hotspot: MagazinePageHotspot,
+): PageHotspot {
+	return {
+		id: hotspot.id,
+		x: hotspot.x,
+		y: hotspot.y,
+		width: hotspot.width,
+		height: hotspot.height,
+		url: hotspot.url,
+		target: hotspot.target,
+		title: hotspot.title,
+		data: {
+			analyticsEvent: hotspot.analytics_event,
+			...(typeof hotspot.data === "object" && hotspot.data !== null
+				? hotspot.data
+				: hotspot.data !== undefined
+					? { value: hotspot.data }
+					: {}),
+		},
+	};
+}
+
+export function getMagazinePageHotspots({
+	page,
+	flipbookCode,
+}: {
+	page: MagazinePage;
+	flipbookCode?: string | null;
+}): PageHotspot[] {
+	const apiHotspots = page.hotspots ?? [];
+	if (apiHotspots.length > 0) {
+		return apiHotspots.map(normalizeHotspot);
+	}
+
+	const config = parseFlipbookHotspotConfig(flipbookCode);
+	const configuredHotspots = config.hotspotsByPage?.[page.page_number] ?? [];
+	return configuredHotspots.map(normalizeHotspot);
+}

package/pages/magazine/[slug].vue

@@ -1,209 +0,0 @@
-<script setup lang="ts">
-import { getMagazine, getMagazinePages, trackMagazineAnalytic } from "../../services/institutionalService";
-
-definePageMeta({ layout: "default" });
-
-const route = useRoute();
-const slug = route.params.slug as string;
-
-const magazine = ref<any>(null);
-const pages = ref<any[]>([]);
-const loading = ref(true);
-const currentPageIndex = ref(0);
-
-async function fetchMagazineData() {
-	loading.value = true;
-	try {
-		const [magResponse, pagesResponse] = await Promise.all([
-			getMagazine(slug),
-			getMagazinePages(slug),
-		]);
-		magazine.value = magResponse.data?.data || magResponse.data;
-		pages.value = pagesResponse.data?.data || pagesResponse.data || [];
-
-		trackMagazineAnalytic(slug, "view").catch(() => {});
-	} catch {
-		throw createError({ statusCode: 404, statusMessage: "Magazine not found" });
-	} finally {
-		loading.value = false;
-	}
-}
-
-function nextPage() {
-	if (currentPageIndex.value < pages.value.length - 1) {
-		currentPageIndex.value++;
-	}
-}
-
-function prevPage() {
-	if (currentPageIndex.value > 0) {
-		currentPageIndex.value--;
-	}
-}
-
-const currentPage = computed(() => pages.value[currentPageIndex.value] || null);
-
-onMounted(() => {
-	fetchMagazineData();
-});
-</script>
-
-<template>
-	<div id="magazine-detail" class="container magazine-detail">
-		<div v-if="loading" class="loading">
-			<p>{{ $t("components.loading") }}</p>
-		</div>
-
-		<template v-else-if="magazine">
-			<div class="magazine-header">
-				<h1>{{ magazine.title }}</h1>
-				<p v-if="magazine.description">{{ magazine.description }}</p>
-				<div class="meta">
-					<span v-if="magazine.edition_number">{{ $t("more.magazine.edition") }} #{{ magazine.edition_number }}</span>
-					<span>{{ magazine.release_date || magazine.created_at }}</span>
-				</div>
-			</div>
-
-			<div v-if="pages.length > 0" class="magazine-reader">
-				<div class="page-content">
-					<img
-						v-if="currentPage?.image_url"
-						:src="currentPage.image_url"
-						:alt="`Page ${currentPageIndex + 1}`"
-						class="page-image"
-					/>
-					<div v-else-if="currentPage?.content" class="page-text" v-html="currentPage.content"></div>
-				</div>
-
-				<div class="page-controls">
-					<button :disabled="currentPageIndex <= 0" @click="prevPage">
-						<MGIcon icon="chevron-left" />
-						{{ $t("components.previous") }}
-					</button>
-					<span>{{ currentPageIndex + 1 }} / {{ pages.length }}</span>
-					<button :disabled="currentPageIndex >= pages.length - 1" @click="nextPage">
-						{{ $t("components.next") }}
-						<MGIcon icon="chevron-right" />
-					</button>
-				</div>
-			</div>
-
-			<div v-else-if="magazine.pdf_url" class="magazine-pdf">
-				<a :href="magazine.pdf_url" target="_blank" rel="noopener" class="download-btn">
-					{{ $t("more.magazine.download_pdf") }}
-				</a>
-			</div>
-		</template>
-	</div>
-</template>
-
-<style lang="scss" scoped>
-.magazine-detail {
-	color: var(--inactive);
-	padding: 24px 0;
-
-	.magazine-header {
-		text-align: center;
-		margin-bottom: 32px;
-
-		h1 {
-			font-size: 24px;
-			font-weight: 600;
-			color: var(--card-cover-title);
-			margin-bottom: 8px;
-		}
-
-		p {
-			font-size: 14px;
-			line-height: 20px;
-			max-width: 600px;
-			margin: 0 auto 12px;
-		}
-
-		.meta {
-			display: flex;
-			justify-content: center;
-			gap: 16px;
-			font-size: 12px;
-			color: var(--secondary-info-fg);
-		}
-	}
-
-	.magazine-reader {
-		max-width: 800px;
-		margin: 0 auto;
-	}
-
-	.page-content {
-		min-height: 500px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background: var(--chip-background-2);
-		margin-bottom: 16px;
-
-		.page-image {
-			max-width: 100%;
-			max-height: 80vh;
-			object-fit: contain;
-		}
-
-		.page-text {
-			padding: 32px;
-			font-size: 14px;
-			line-height: 22px;
-		}
-	}
-
-	.page-controls {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: 24px;
-
-		button {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-			padding: 8px 16px;
-			border: 1px solid var(--search-bar-border-color);
-			background: transparent;
-			color: var(--card-cover-title);
-			cursor: pointer;
-
-			&:disabled {
-				opacity: 0.5;
-				cursor: default;
-			}
-		}
-
-		span {
-			font-size: 14px;
-			color: var(--secondary-info-fg);
-		}
-	}
-
-	.magazine-pdf {
-		text-align: center;
-
-		.download-btn {
-			display: inline-block;
-			padding: 12px 32px;
-			border: 1px solid var(--chip-text);
-			color: var(--chip-text);
-			text-decoration: none;
-			font-size: 14px;
-
-			&:hover {
-				background: var(--chip-text);
-				color: var(--chip-background-2);
-			}
-		}
-	}
-
-	.loading {
-		text-align: center;
-		padding: 64px;
-	}
-}
-</style>