@mundogamernetwork/shared-ui 1.8.6 → 1.8.8

package/components/MediaKit/MapCountries.vue

@@ -0,0 +1,76 @@
+<template>
+	<client-only>
+		<div ref="mapContainer" class="mk-map-container">
+			<l-map v-if="mapReady" :zoom="0.5" :center="[0, 0]" :use-global-leaflet="false">
+				<l-tile-layer url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png" layer-type="base"
+					attribution="OpenStreetMap" />
+
+				<l-circle-marker v-for="(country, index) in countries" :key="index"
+					:lat-lng="[country.latitude, country.longitude]"
+					:radius="calculateRadius(country.percent)" color="#FDB215" fill-opacity="0.6">
+					<l-tooltip :content="`${country.name}: ${country.percent}%`" />
+				</l-circle-marker>
+			</l-map>
+		</div>
+	</client-only>
+</template>
+
+<script setup lang="ts">
+// Ported from agency-frontend/components/MapCountries.vue (the old
+// casting-details page's audience map) — same lib/tile source/marker
+// styling, adapted to the media-kit's audience_geo field names
+// (name/percent instead of localized_name/percentage).
+import 'leaflet/dist/leaflet.css';
+import { shallowRef, ref, onMounted } from 'vue';
+
+defineProps<{
+	countries: {
+		latitude: number;
+		longitude: number;
+		percent: number;
+		name: string;
+	}[];
+}>();
+
+const mapContainer = ref<HTMLElement | null>(null);
+const mapReady = ref(false);
+const LMap = shallowRef();
+const LTileLayer = shallowRef();
+const LCircleMarker = shallowRef();
+const LTooltip = shallowRef();
+
+const calculateRadius = (percent: number) => {
+	return Math.max(2, percent * 0.3);
+};
+
+if (import.meta.client) {
+	const { LMap: LMapComponent, LTileLayer: LTileLayerComponent, LCircleMarker: LCircleMarkerComponent, LTooltip: LTooltipComponent } = await import('@vue-leaflet/vue-leaflet');
+	LMap.value = LMapComponent;
+	LTileLayer.value = LTileLayerComponent;
+	LCircleMarker.value = LCircleMarkerComponent;
+	LTooltip.value = LTooltipComponent;
+}
+
+onMounted(() => {
+	mapReady.value = true;
+});
+</script>
+
+<style scoped>
+.mk-map-container {
+	height: 220px;
+	width: 100%;
+	position: relative;
+}
+
+:deep(.leaflet-container) {
+	height: 100% !important;
+	width: 100% !important;
+	background: #0a0a0f;
+}
+
+:deep(.leaflet-bottom) {
+	bottom: 0;
+	display: none !important;
+}
+</style>

package/components/keys/KeyCampaignDashboardCard.vue

@@ -172,7 +172,7 @@ const detailRoute = computed(() =>
 							<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 16 17" fill="none">
 								<path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="#D297FF"/>
 							</svg>
-							{{ card.type }}
+							{{ typeof card.type === "string" ? card.type : card.type.name }}
 						</span>
 					</div>
 				</div>

package/nuxt.config.ts

@@ -61,6 +61,13 @@ try {
 }
 
 export default defineNuxtConfig({
+	// Nuxt/c12 merges extended-layer config via defu (arrays concatenate), so
+	// this reaches every consuming app automatically — matches the storesDirs
+	// pattern below. @vue-leaflet/vue-leaflet ships untranspiled ESM that
+	// breaks Nuxt's build without this, needed by MediaKit/MapCountries.vue.
+	build: {
+		transpile: ['@vue-leaflet/vue-leaflet'],
+	},
 	components: [
 		{
 			path: `${packageRoot}/components`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -30,9 +30,11 @@
   "peerDependencies": {
     "@pinia-plugin-persistedstate/nuxt": ">=1.0.0",
     "@pinia/nuxt": ">=0.5.0",
+    "@vue-leaflet/vue-leaflet": ">=0.10.0",
     "axios": ">=1.0.0",
     "hls.js": ">=1.5.0",
     "laravel-echo": ">=1.15.0",
+    "leaflet": ">=1.9.0",
     "nuxt": ">=3.13.0",
     "pinia": ">=2.1.0",
     "pusher-js": ">=8.0.0",
@@ -41,9 +43,12 @@
   "devDependencies": {
     "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
     "@pinia/nuxt": "^0.5.5",
+    "@types/leaflet": "^1.9.18",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "axios": "^1.18.1",
     "hls.js": "^1.6.16",
     "laravel-echo": "^2.3.7",
+    "leaflet": "^1.9.4",
     "nuxt": "^3.15.4",
     "pinia": "^2.3.1",
     "pusher-js": "^8.5.0",

package/pages/key-campaigns/index.vue

@@ -130,7 +130,9 @@
 												<div
 													class="keys-badge"
 													v-if="card.available_count > 0 && card.user_can_access && !card.isExpired && !card.isUpcoming"
+													:title="$t('keys.campaigns.keys_left', { n: card.available_count })"
 												>
+													<i class="fa-solid fa-key" />
 													{{ card.available_count }}
 												</div>
 
@@ -221,10 +223,6 @@
 												+{{ card.platforms.length - 4 }}
 											</span>
 										</div>
-										<div v-if="card.available_count > 0 && card.user_can_access && !card.isExpired && !card.isUpcoming" class="card-availability">
-											{{ $t("keys.campaigns.keys_left", { n: card.available_count }) }}
-										</div>
-										<div v-if="card.gameName && card.gameName !== card.text" class="card-campaign-name">{{ card.text }}</div>
 
 										<div class="buttons">
 											<template v-if="!card.user_can_access">
@@ -1237,7 +1235,7 @@ onUnmounted(() => {
 					}
 
 					.text {
-						min-height: 210px;
+						min-height: 170px;
 
 						.card-name {
 							font-size: 16px;
@@ -1254,18 +1252,6 @@ onUnmounted(() => {
 							gap: 6px;
 						}
 
-						.card-availability {
-							font-size: 12px;
-							color: var(--key-accent, var(--primary, #D297FF));
-							font-weight: 600;
-						}
-
-						.card-campaign-name {
-							font-size: 13px;
-							font-weight: 400;
-							color: var(--secondary-info-fg);
-						}
-
 						.card-meta-row {
 							display: flex;
 							align-items: center;

package/pages/media-kit/[slug].vue

@@ -3,6 +3,7 @@ import { fetchPublicMediaKit, trackMediaKitEvent } from '../../services/mediaKit
 import { sendMediaKitProposal } from '../../services/mediaKitProposalService';
 import MediaKitWallBlock from '../../components/indie-wall/MediaKitWallBlock.vue';
 import MgMediaKitStore from '../../components/MediaKit/MgMediaKitStore.vue';
+import MapCountries from '../../components/MediaKit/MapCountries.vue';
 
 const route = useRoute();
 const slug = computed(() => route.params.slug as string);
@@ -78,10 +79,32 @@ const websiteUrl = computed<string | null>(() => streamer.value?.website ?? null
 
 // ── D2 ecosystem data ──
 const selectedGames = computed<string[]>(() => kit.value?.selected_games ?? []);
+const languages = computed<any[]>(() => kit.value?.languages ?? []);
 const audienceGeo = computed<any[]>(() => kit.value?.audience_geo ?? []);
+// A handful of countries.latitude/longitude rows are historically unset —
+// the list still renders those (name/percent don't need coordinates), the
+// map just skips them.
+const audienceGeoMappable = computed(() => audienceGeo.value.filter((c: any) => c.latitude != null && c.longitude != null));
 const platformsPlayed = computed<any[]>(() => kit.value?.platforms_played ?? []);
 const academyMentor = computed(() => kit.value?.academy_mentor ?? null);
 const communityStats = computed(() => kit.value?.community ?? null);
+// Business signals collected by the /trails-form onboarding wizard, exposed
+// via PublicMediaKitController::getBusinessSignals() (2026-07-23 audit).
+const businessSignals = computed<Record<string, any> | null>(() => kit.value?.business_signals ?? null);
+const hasAvailabilitySection = computed(() =>
+	!!businessSignals.value && (
+		!!businessSignals.value.contact_type
+		|| !!businessSignals.value.availability_hour
+		|| !!businessSignals.value.availability_days
+	),
+);
+const hasSelfReportedMetrics = computed(() =>
+	!!businessSignals.value && (
+		!!businessSignals.value.avg_views_per_content
+		|| !!businessSignals.value.avg_monthly_views
+		|| !!businessSignals.value.audience_profile
+	),
+);
 const tvChannelLogin = computed<string | null>(() => streamer.value?.tv_channel_login ?? null);
 const tvSiteUrl = import.meta.env.VITE_TV_SITE_URL || 'https://mundogamer.tv';
 const tvChannelUrl = computed(() => tvChannelLogin.value
@@ -98,6 +121,14 @@ const PLATFORM_LABEL: Record<string, string> = {
 	linkedin: 'LinkedIn', bluesky: 'Bluesky',
 };
 
+// Font Awesome brand icon per platform — no entry means no official FA glyph
+// exists yet (e.g. Kick), the template falls back to the 2-letter label.
+const PLATFORM_ICON: Record<string, string> = {
+	instagram: 'fa-instagram', tiktok: 'fa-tiktok', youtube: 'fa-youtube', twitch: 'fa-twitch',
+	x: 'fa-x-twitter', facebook: 'fa-facebook', discord: 'fa-discord', telegram: 'fa-telegram',
+	linkedin: 'fa-linkedin', bluesky: 'fa-bluesky',
+};
+
 const socials = computed(() => {
 	const s = streamer.value?.social_links || {};
 	return Object.entries(s).filter(([, v]) => v).map(([k, v]) => ({ platform: k, url: v as string }));
@@ -110,6 +141,14 @@ const scheduleByDay = computed(() => {
 	return [0, 1, 2, 3, 4, 5, 6].map((d) => ({ d, key: DOW[d], slot: map[d] || null }));
 });
 
+// Sidebar "hire" CTA jumps to the rates tab — on mobile the tabs are further
+// down the stacked layout, so switching activeTab alone can leave the change
+// off-screen; scroll it into view too.
+function goToRates() {
+	activeTab.value = 1;
+	document.getElementById('mk-tabs')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
 // ── Tabs: template picks which one opens first, casting-details-style ──
 const TAB_KEYS = ['profile', 'rates', 'performance'] as const;
 const TEMPLATE_DEFAULT_TAB: Record<string, number> = {
@@ -272,6 +311,10 @@ function onDownload() {
 					<div class="mk-badges">
 						<span v-if="streamer.platform" class="mk-badge plat">{{ streamer.platform }}</span>
 						<span v-if="streamer.tier && streamer.tier !== 'free'" class="mk-badge tier">{{ String(streamer.tier).toUpperCase() }}</span>
+						<span v-if="businessSignals?.available_for_campaigns === true" class="mk-badge available">{{ $t('kit.media.available_for_campaigns') }}</span>
+						<span v-else-if="businessSignals?.available_for_campaigns === false" class="mk-badge unavailable">{{ $t('kit.media.unavailable_for_campaigns') }}</span>
+						<span v-if="businessSignals?.accept_proposals === false" class="mk-badge muted">{{ $t('kit.media.not_accepting_proposals') }}</span>
+						<span v-if="businessSignals?.participated_in_campaigns" class="mk-badge muted">{{ $t('kit.media.past_campaigns') }}</span>
 					</div>
 
 					<div v-if="showShortlistBar" class="mk-internal-bar no-print">
@@ -284,7 +327,8 @@ function onDownload() {
 					</div>
 
 					<div class="mk-actions no-print">
-						<a class="kit-btn kit-btn-primary" @click="onDownload">{{ $t('kit.media.download_pdf') }}</a>
+						<a v-if="!isOwnKit" class="kit-btn kit-btn-primary" @click="goToRates">{{ $t('kit.media.hire') }}</a>
+						<a class="kit-btn" :class="isOwnKit ? 'kit-btn-primary' : 'kit-btn-ghost'" @click="onDownload">{{ $t('kit.media.download_pdf') }}</a>
 						<a v-if="streamer.contact_email" class="kit-btn kit-btn-ghost" :href="`mailto:${streamer.contact_email}`" @click="track('contact')">{{ $t('kit.media.contact') }}</a>
 					</div>
 
@@ -314,22 +358,26 @@ function onDownload() {
 
 					<div v-if="socials.length" class="mk-socials no-print">
 						<a v-for="s in socials" :key="s.platform" class="mk-soc" :href="s.url" target="_blank" rel="noopener" :title="PLATFORM_LABEL[s.platform] || s.platform" @click="track('click')">
-							{{ (PLATFORM_LABEL[s.platform] || s.platform).slice(0, 2).toUpperCase() }}
+							<i v-if="PLATFORM_ICON[s.platform]" class="fa-brands" :class="PLATFORM_ICON[s.platform]" />
+							<span v-else class="mk-soc-fallback">{{ (PLATFORM_LABEL[s.platform] || s.platform).slice(0, 2).toUpperCase() }}</span>
 						</a>
 					</div>
 				</aside>
 
 				<!-- ══════════════ MAIN: TABS ══════════════ -->
 				<main class="mk-main">
-					<div class="mk-tabs no-print">
+					<div id="mk-tabs" class="mk-tabs no-print">
 						<button class="mk-tab" :class="{ active: activeTab === 0 }" @click="activeTab = 0">{{ $t('kit.media.tab_profile') }}</button>
-						<button v-if="hasRatesTab" class="mk-tab" :class="{ active: activeTab === 1 }" @click="activeTab = 1">{{ $t('kit.media.tab_rates') }}</button>
+						<button class="mk-tab" :class="{ active: activeTab === 1 }" @click="activeTab = 1">{{ $t('kit.media.tab_rates') }}</button>
 						<button v-if="hasPerformanceTab" class="mk-tab" :class="{ active: activeTab === 2 }" @click="activeTab = 2">{{ $t('kit.media.tab_performance') }}</button>
 					</div>
 
 					<!-- ── TAB: PERFIL ── -->
 					<div class="mk-tabpanel" :class="{ active: activeTab === 0 }" data-print-tab="profile">
-						<p v-if="streamer.bio" class="mk-bio">{{ streamer.bio }}</p>
+						<section v-if="streamer.bio" class="kit-block" data-sec="about">
+							<h2>{{ $t('kit.media.about_title', { name: streamer.name }) }}</h2>
+							<p class="mk-bio">{{ streamer.bio }}</p>
+						</section>
 
 						<section v-if="academyMentor" class="kit-block" data-sec="academy">
 							<h2>{{ $t('kit.media.academy_mentor_title') }}</h2>
@@ -347,7 +395,10 @@ function onDownload() {
 							<div class="mk-platforms">
 								<a v-for="p in platforms" :key="p.platform" class="mk-platform" :href="p.url || undefined" target="_blank" rel="noopener" @click="track('click')">
 									<div class="pl-head">
-										<span class="pl-name">{{ PLATFORM_LABEL[p.platform] || p.platform }}</span>
+										<span class="pl-name-group">
+											<i v-if="PLATFORM_ICON[p.platform]" class="fa-brands pl-icon" :class="PLATFORM_ICON[p.platform]" />
+											<span class="pl-name">{{ PLATFORM_LABEL[p.platform] || p.platform }}</span>
+										</span>
 										<span v-if="p.verified" class="pl-verified" :title="$t('kit.media.verified')">✓</span>
 									</div>
 									<div class="pl-followers">{{ fmt(p.followers) }}</div>
@@ -359,8 +410,27 @@ function onDownload() {
 							</div>
 						</section>
 
+						<section v-if="hasSelfReportedMetrics" class="kit-block" data-sec="self-reported-metrics">
+							<h2>{{ $t('kit.media.self_reported_metrics') }}</h2>
+							<div class="mk-metrics">
+								<div v-if="businessSignals.avg_views_per_content" class="mk-metric">
+									<span class="val">{{ businessSignals.avg_views_per_content }}</span>
+									<span class="lab">{{ $t('kit.media.avg_views_per_content') }}</span>
+								</div>
+								<div v-if="businessSignals.avg_monthly_views" class="mk-metric">
+									<span class="val">{{ businessSignals.avg_monthly_views }}</span>
+									<span class="lab">{{ $t('kit.media.avg_monthly_views') }}</span>
+								</div>
+								<div v-if="businessSignals.audience_profile" class="mk-metric">
+									<span class="val val-sm">{{ businessSignals.audience_profile }}</span>
+									<span class="lab">{{ $t('kit.media.audience_profile') }}</span>
+								</div>
+							</div>
+						</section>
+
 						<section v-if="audienceGeo.length" class="kit-block" data-sec="geo">
 							<h2>{{ $t('kit.media.audience_geo') }}</h2>
+							<MapCountries v-if="audienceGeoMappable.length" :countries="audienceGeoMappable" class="mk-geo-map no-print" />
 							<div class="mk-geo">
 								<div v-for="c in audienceGeo" :key="c.isocode" class="mk-bar">
 									<div class="top">
@@ -408,6 +478,30 @@ function onDownload() {
 							</div>
 						</section>
 
+						<!-- Languages the creator works in — was on the old casting-details
+						page, dropped when it was consolidated into this shared builder. -->
+						<section v-if="languages.length" class="kit-block" data-sec="languages">
+							<h2>{{ $t('kit.media.languages') }}</h2>
+							<div class="mk-tags">
+								<span v-for="l in languages" :key="l.id" class="mk-tag">{{ l.name }}</span>
+							</div>
+						</section>
+
+						<section v-if="hasAvailabilitySection" class="kit-block" data-sec="availability-preference">
+							<h2>{{ $t('kit.media.availability_title') }}</h2>
+							<div class="mk-cols2">
+								<div v-if="businessSignals.contact_type" class="kit-card mk-pad">
+									<h3>{{ $t('kit.media.contact_type') }}</h3>
+									<span class="mk-tag">{{ businessSignals.contact_type }}</span>
+								</div>
+								<div v-if="businessSignals.availability_hour || businessSignals.availability_days" class="kit-card mk-pad">
+									<h3>{{ $t('kit.media.best_time') }}</h3>
+									<span v-if="businessSignals.availability_hour" class="mk-tag">{{ businessSignals.availability_hour }}</span>
+									<span v-if="businessSignals.availability_days" class="mk-tag">{{ businessSignals.availability_days }}</span>
+								</div>
+							</div>
+						</section>
+
 						<section v-if="platformsPlayed.length" class="kit-block" data-sec="platforms-played">
 							<h2>{{ $t('kit.media.platforms_played') }}</h2>
 							<div class="mk-platforms-played">
@@ -452,8 +546,12 @@ function onDownload() {
 					</div>
 
 					<!-- ── TAB: RATE CARDS ── -->
-					<div v-if="hasRatesTab" class="mk-tabpanel" :class="{ active: activeTab === 1 }" data-print-tab="rates">
-						<div class="mk-rc-layout">
+					<div class="mk-tabpanel" :class="{ active: activeTab === 1 }" data-print-tab="rates">
+						<div v-if="!hasRatesTab" class="mk-rc-empty">
+							<p>{{ isOwnKit ? $t('kit.media.rates_empty_own') : $t('kit.media.rates_empty_viewer') }}</p>
+							<a v-if="!isOwnKit && streamer.contact_email" class="kit-btn kit-btn-primary" :href="`mailto:${streamer.contact_email}`" @click="track('contact')">{{ $t('kit.media.contact') }}</a>
+						</div>
+						<div v-else class="mk-rc-layout">
 							<div class="mk-rc-main">
 								<div v-if="bundles.length" class="mk-rc-group">
 									<h2>{{ $t('kit.media.rates_bundles') }}</h2>
@@ -665,6 +763,9 @@ function onDownload() {
 
 	&.plat { background: var(--kit-surface-2); border: 1px solid var(--kit-line); }
 	&.tier { background: var(--kit-accent); color: var(--kit-accent-ink); }
+	&.available { background: rgba(74, 222, 128, .12); color: #4ade80; border: 1px solid rgba(74, 222, 128, .3); }
+	&.unavailable { background: rgba(239, 68, 68, .12); color: #ef4444; border: 1px solid rgba(239, 68, 68, .3); }
+	&.muted { background: rgba(139, 146, 160, .1); color: var(--kit-muted); border: 1px solid rgba(139, 146, 160, .2); }
 }
 
 .mk-internal-bar {
@@ -715,11 +816,12 @@ function onDownload() {
 	display: flex; align-items: center; justify-content: center;
 	border: 1px solid var(--kit-line);
 	color: var(--kit-muted);
-	font-size: 11px; font-weight: 700;
+	font-size: 15px;
 	text-decoration: none;
 
 	&:hover { border-color: var(--kit-accent); color: var(--kit-accent); }
 }
+.mk-soc-fallback { font-size: 11px; font-weight: 700; }
 
 /* Buttons (shared) */
 .kit-btn {
@@ -823,6 +925,8 @@ function onDownload() {
 
 	&:hover { border-color: var(--kit-accent); }
 	.pl-head { display: flex; align-items: center; justify-content: space-between; }
+	.pl-name-group { display: flex; align-items: center; gap: 6px; }
+	.pl-icon { font-size: 13px; color: var(--kit-accent); }
 	.pl-name { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-muted); }
 	.pl-verified { color: #27ae60; font-weight: 700; }
 	.pl-followers { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 24px; }
@@ -830,6 +934,7 @@ function onDownload() {
 }
 
 /* Geo */
+.mk-geo-map { margin-bottom: 16px; border: 1px solid var(--kit-line); }
 .mk-geo { display: flex; flex-direction: column; gap: 10px; }
 .mk-flag { width: 18px; height: 13px; object-fit: cover; margin-right: 8px; vertical-align: middle; }
 
@@ -909,6 +1014,15 @@ function onDownload() {
 }
 
 /* Rate cards / builder */
+.mk-rc-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	text-align: center;
+	padding: 60px 24px;
+	color: var(--kit-muted);
+}
 .mk-rc-layout { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }
 @media (max-width: 760px) { .mk-rc-layout { grid-template-columns: 1fr; } }
 .mk-rc-group { display: flex; flex-direction: column; gap: 1px; background: var(--kit-line); margin-bottom: 24px; }
@@ -949,7 +1063,7 @@ function onDownload() {
 .mk-metric {
 	background: var(--kit-surface); border: 1px solid var(--kit-line); padding: 20px 16px; text-align: center; position: relative; overflow: hidden;
 	&::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--kit-accent); }
-	.val { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; &.accent { color: var(--kit-accent); } }
+	.val { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; &.accent { color: var(--kit-accent); } &.val-sm { font-size: 16px; } }
 	.lab { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--kit-muted); margin-top: 8px; }
 }
 .mk-period { color: var(--kit-muted); font-size: 13px; margin: -8px 0 16px; }