@mundogamernetwork/shared-ui 1.4.2 → 1.6.0

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { fetchPublicMediaKit, trackMediaKitEvent } from '../../services/mediaKitService';
 import MediaKitWallBlock from '../../components/indie-wall/MediaKitWallBlock.vue';
+import MgMediaKitStore from '../../components/MediaKit/MgMediaKitStore.vue';
 
 const route = useRoute();
 const slug = computed(() => route.params.slug as string);
@@ -25,6 +26,15 @@ const template = computed(() => kit.value?.template || 'creator');
 const platforms = computed(() => kit.value?.platforms ?? []);
 const totalFollowers = computed(() => kit.value?.total_followers ?? 0);
 const isPremium = computed(() => kit.value?.is_premium ?? false);
+const coverUrl = computed(() => kit.value?.cover_url || streamer.value?.cover || null);
+const portfolioImages = computed(() => kit.value?.portfolio_images ?? streamer.value?.portfolio_images ?? []);
+const brandLogos = computed(() => kit.value?.brand_logos ?? streamer.value?.brand_logos ?? []);
+const creatorStore = computed(() => kit.value?.creator_store ?? null);
+const customLinks = computed(() => kit.value?.custom_links ?? streamer.value?.custom_links ?? []);
+
+const coverStyle = computed(() => coverUrl.value
+	? { backgroundImage: `linear-gradient(180deg, rgba(5,6,10,.14), rgba(5,6,10,.92)), url("${String(coverUrl.value).replace(/"/g, '\\"')}")` }
+	: undefined);
 
 const PLATFORM_LABEL: Record<string, string> = {
 	instagram: 'Instagram', tiktok: 'TikTok', youtube: 'YouTube', twitch: 'Twitch', x: 'X',
@@ -109,7 +119,7 @@ function onDownload() {
 		<div v-else-if="error || !kit" class="kit-state"><p>{{ $t('kit.media.not_available') }}</p></div>
 
 		<template v-else>
-			<div class="mk-cover" />
+			<div class="mk-cover" :class="{ 'has-image': coverUrl }" :style="coverStyle" />
 
 			<div class="kit-wrap mk-sections">
 				<header class="mk-header">
@@ -118,6 +128,7 @@ function onDownload() {
 
 					<div class="mk-hid">
 						<h1>{{ streamer.name }}</h1>
+						<p v-if="streamer.custom_headline" class="mk-headline">{{ streamer.custom_headline }}</p>
 						<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>
@@ -132,6 +143,25 @@ function onDownload() {
 					</div>
 				</header>
 
+				<!-- Personal link hub: replaces a separate link-in-bio service. -->
+				<nav class="mk-link-hub no-print" data-sec="links" :aria-label="$t('kit.media.quick_links')">
+					<a v-for="(link, index) in customLinks" :key="`${link.url}-${index}`" class="mk-link" :class="{ 'mk-link--primary': index === 0 }" :href="link.url" target="_blank" rel="noopener" @click="track('click')">
+						<span>{{ link.label }}</span><b>↗</b>
+					</a>
+					<a v-if="streamer.contact_email" class="mk-link mk-link--primary" :href="`mailto:${streamer.contact_email}`" @click="track('contact')">
+						<span>{{ $t('kit.media.work_with_me') }}</span><b>↗</b>
+					</a>
+					<a v-if="creatorStore" class="mk-link" href="#store" @click="track('click')">
+						<span>{{ $t('kit.media.visit_store') }}</span><b>↓</b>
+					</a>
+					<a v-if="userId" class="mk-link" href="#support" @click="track('click')">
+						<span>{{ $t('kit.media.visit_mural') }}</span><b>↓</b>
+					</a>
+					<a v-for="s in socials" :key="s.platform" class="mk-link mk-link--social" :href="s.url" target="_blank" rel="noopener" @click="track('click')">
+						<span>{{ PLATFORM_LABEL[s.platform] || s.platform }}</span><b>↗</b>
+					</a>
+				</nav>
+
 				<!-- Reach / multi-platform followers -->
 				<section v-if="platforms.length" class="kit-block" data-sec="reach">
 					<h2>{{ $t('kit.media.reach') }}</h2>
@@ -151,6 +181,24 @@ function onDownload() {
 					</div>
 				</section>
 
+				<!-- Mundo Gamer creator store -->
+				<section v-if="creatorStore" id="store" class="kit-block kit-card mk-store-block" data-sec="store">
+					<MgMediaKitStore :store="creatorStore" :contact-email="streamer.contact_email" @click="track('click')" />
+				</section>
+
+				<!-- Creator-selected portfolio and brand imagery -->
+				<section v-if="portfolioImages.length || brandLogos.length" class="kit-block" data-sec="portfolio">
+					<h2>{{ $t('kit.media.portfolio') }}</h2>
+					<div v-if="portfolioImages.length" class="mk-portfolio">
+						<a v-for="(image, index) in portfolioImages" :key="image" :href="image" target="_blank" rel="noopener" @click="track('click')">
+							<img :src="image" :alt="`${streamer.name} — ${index + 1}`" />
+						</a>
+					</div>
+					<div v-if="brandLogos.length" class="mk-brand-logos">
+						<img v-for="logo in brandLogos" :key="logo" :src="logo" :alt="$t('kit.media.partner_brand')" />
+					</div>
+				</section>
+
 				<!-- TV streaming metrics -->
 				<section v-if="stats" class="kit-block" data-sec="metrics">
 					<h2>{{ $t('kit.media.key_metrics') }}</h2>
@@ -262,18 +310,8 @@ function onDownload() {
 					</div>
 				</section>
 
-				<!-- Social links -->
-				<section v-if="socials.length" class="kit-block no-print" data-sec="connect">
-					<h2>{{ $t('kit.media.connect') }}</h2>
-					<div class="mk-socials">
-						<a v-for="s in socials" :key="s.platform" class="mk-soc" :href="s.url" target="_blank" rel="noopener" @click="track('click')">
-							{{ s.platform }}
-						</a>
-					</div>
-				</section>
-
 				<!-- IndieWall / mural — self-contained widget (own fetch, realtime, stepper) -->
-				<section v-if="userId" class="kit-block" data-sec="support">
+				<section v-if="userId" id="support" class="kit-block" data-sec="support">
 					<MediaKitWallBlock :user-id="userId" />
 				</section>
 
@@ -308,8 +346,10 @@ function onDownload() {
 
 /* Cover */
 .mk-cover {
-	height: 200px;
+	height: 280px;
 	background: linear-gradient(120deg, var(--kit-accent-2, #6b15ac) 0%, #2a0e4e 50%, var(--kit-bg) 100%);
+	background-position: center;
+	background-size: cover;
 	position: relative;
 	border-bottom: 1px solid var(--kit-line);
 
@@ -319,44 +359,59 @@ function onDownload() {
 		inset: 0;
 		background: radial-gradient(circle at 80% 20%, rgba(168, 85, 247, .35), transparent 60%);
 	}
+
+	&.has-image::after {
+		background: linear-gradient(180deg, rgba(5, 6, 10, .04), rgba(5, 6, 10, .52));
+	}
 }
 
 /* Header */
 .mk-header {
-	margin-top: -70px;
+	margin: -82px auto 0;
 	position: relative;
 	z-index: 2;
 	display: flex;
-	gap: 24px;
-	align-items: flex-end;
-	flex-wrap: wrap;
+	flex-direction: column;
+	align-items: center;
+	max-width: 760px;
+	text-align: center;
 }
 .mk-avatar {
-	width: 140px;
-	height: 140px;
+	width: 156px;
+	height: 156px;
 	border: 3px solid var(--kit-accent);
 	object-fit: cover;
 	flex-shrink: 0;
 	background: var(--kit-surface-2);
+	box-shadow: 0 20px 52px rgba(0, 0, 0, .42);
 }
 .mk-avatar-ph {
 	background: linear-gradient(135deg, var(--kit-accent-2, #6b15ac), var(--kit-accent));
 }
 .mk-hid {
-	flex: 1;
-	min-width: 260px;
-	padding-bottom: 6px;
+	width: 100%;
+	padding-top: 18px;
 
 	h1 {
 		font-family: 'Rajdhani', sans-serif;
-		font-size: 40px;
+		font-size: clamp(36px, 7vw, 54px);
 		line-height: 1.05;
+		margin: 0;
 	}
 }
+.mk-headline {
+	margin: 8px auto 0;
+	max-width: 620px;
+	color: var(--kit-accent);
+	font-family: 'Rajdhani', sans-serif;
+	font-size: 20px;
+	font-weight: 600;
+}
 .mk-badges {
 	display: flex;
+	justify-content: center;
 	gap: 8px;
-	margin: 8px 0;
+	margin: 12px 0;
 	flex-wrap: wrap;
 }
 .mk-badge {
@@ -374,13 +429,60 @@ function onDownload() {
 .mk-bio {
 	color: #c4c4d2;
 	font-size: 15px;
-	max-width: 60ch;
-	margin-top: 6px;
+	line-height: 1.65;
+	max-width: 66ch;
+	margin: 6px auto 0;
 }
 .mk-actions {
 	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
 	gap: 10px;
-	padding-bottom: 8px;
+	padding-top: 18px;
+}
+
+/* Link-in-bio hub */
+.mk-link-hub {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 10px;
+	width: min(100%, 720px);
+	margin: 30px auto 2px;
+}
+.mk-link {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	min-height: 54px;
+	padding: 0 18px;
+	border: 1px solid var(--kit-line);
+	background: color-mix(in srgb, var(--kit-surface) 92%, transparent);
+	color: var(--kit-text);
+	font-size: 14px;
+	font-weight: 700;
+	text-decoration: none;
+	transition: transform .16s ease, border-color .16s ease, background .16s ease;
+
+	&:hover {
+		transform: translateY(-2px);
+		border-color: var(--kit-accent);
+		background: var(--kit-surface-2);
+	}
+
+	b { color: var(--kit-accent); font-size: 16px; }
+
+	&--primary {
+		grid-column: 1 / -1;
+		background: var(--kit-accent);
+		border-color: var(--kit-accent);
+		color: var(--kit-accent-ink);
+
+		b { color: var(--kit-accent-ink); }
+		&:hover { background: var(--kit-accent); filter: brightness(1.06); }
+	}
+
+	&--social { min-height: 46px; color: var(--kit-muted); }
 }
 
 /* Buttons */
@@ -434,6 +536,29 @@ function onDownload() {
 		}
 	}
 }
+.mk-store-block { padding: 24px; scroll-margin-top: 24px; }
+.mk-portfolio {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 10px;
+
+	a { display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--kit-line); background: var(--kit-surface); }
+	img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
+	a:hover img { transform: scale(1.03); }
+}
+.mk-brand-logos {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 16px;
+	margin-top: 16px;
+	padding: 18px;
+	border: 1px solid var(--kit-line);
+	background: var(--kit-surface);
+
+	img { width: 112px; height: 54px; object-fit: contain; filter: grayscale(1); opacity: .8; }
+}
 .mk-period {
 	color: var(--kit-muted);
 	font-size: 13px;
@@ -768,16 +893,19 @@ function onDownload() {
 .mk-sections { display: flex; flex-direction: column; }
 .mk-sections > .mk-header { order: 0; }
 .mk-sections > .mk-footer { order: 100; }
-.mk-sections > [data-sec="reach"]    { order: 1; }
-.mk-sections > [data-sec="metrics"]  { order: 2; }
-.mk-sections > [data-sec="audience"] { order: 3; }
-.mk-sections > [data-sec="styles"]   { order: 4; }
-.mk-sections > [data-sec="games"]    { order: 5; }
-.mk-sections > [data-sec="rates"]    { order: 6; }
-.mk-sections > [data-sec="brands"]   { order: 7; }
-.mk-sections > [data-sec="schedule"] { order: 8; }
-.mk-sections > [data-sec="connect"]  { order: 9; }
-.mk-sections > [data-sec="support"]  { order: 10; }
+.mk-sections > [data-sec="links"]     { order: 1; }
+.mk-sections > [data-sec="reach"]     { order: 2; }
+.mk-sections > [data-sec="store"]     { order: 3; }
+.mk-sections > [data-sec="portfolio"] { order: 4; }
+.mk-sections > [data-sec="metrics"]   { order: 5; }
+.mk-sections > [data-sec="audience"]  { order: 6; }
+.mk-sections > [data-sec="styles"]    { order: 7; }
+.mk-sections > [data-sec="games"]     { order: 8; }
+.mk-sections > [data-sec="rates"]     { order: 9; }
+.mk-sections > [data-sec="brands"]    { order: 10; }
+.mk-sections > [data-sec="schedule"]  { order: 11; }
+.mk-sections > [data-sec="connect"]   { order: 12; }
+.mk-sections > [data-sec="support"]   { order: 13; scroll-margin-top: 24px; }
 
 [data-template="performance"] {
 	.mk-sections > [data-sec="metrics"]  { order: 1; }
@@ -803,7 +931,20 @@ function onDownload() {
 	.mk-cols2, .mk-rates, .mk-bundles { grid-template-columns: 1fr; }
 	.mk-brands { grid-template-columns: repeat(3, 1fr); }
 	.mk-schedule { grid-template-columns: repeat(4, 1fr); }
-	.mk-header { flex-direction: column; align-items: flex-start; }
+	.mk-portfolio { grid-template-columns: 1fr 1fr; }
+}
+
+@media (max-width: 560px) {
+	.kit-wrap { padding-inline: 14px; }
+	.mk-cover { height: 230px; }
+	.mk-avatar { width: 132px; height: 132px; }
+	.mk-header { margin-top: -68px; }
+	.mk-link-hub { grid-template-columns: 1fr; }
+	.mk-link--primary { grid-column: auto; }
+	.mk-actions { width: 100%; }
+	.kit-btn { flex: 1; justify-content: center; }
+	.mk-portfolio { grid-template-columns: 1fr; }
+	.mk-store-block { padding: 16px; }
 }
 
 @media print {
@@ -811,7 +952,7 @@ function onDownload() {
 }
 
 // ── Scroll unlock (body has overflow-y: hidden globally in some frontends) ───
-:global(body):has(.pk-page) {
+:global(body):has(.kit-media) {
 	overflow-y: auto !important;
 	max-height: none !important;
 }

package/services/campaignService.ts

@@ -421,6 +421,20 @@ export const revealKey = (requestId: number) => {
 	return authClient.get(`/public/key-requests/${requestId}/reveal`)
 }
 
+/**
+ * Explicit opt-in to key campaign alerts — same endpoint used by
+ * KeyBrowser.vue's notification prompt (GET/PUT /public/user/notification-preferences).
+ */
+export const enableKeyCampaignNotifications = () => {
+	return authClient.put("/public/user/notification-preferences", {
+		category: "key_campaigns",
+		enabled: true,
+		channel_email: true,
+		channel_push: true,
+		channel_in_app: true,
+	})
+}
+
 /**
  * Fetch required actions for a campaign.
  */

package/services/playtestTesterService.ts

@@ -63,6 +63,8 @@ export interface SubmitBaselineResponsePayload {
   time_on_task_seconds?: number
   device?: string
   os?: string
+  // Video Playtest only — id of a ready PlaytestRecording (see requestRecordingUploadUrl()).
+  recording_id?: number
 }
 
 export interface PlaytestResponse {
@@ -414,3 +416,64 @@ export const fetchMyPlaytestResponses = (status?: 'submitted' | 'accepted' | 're
   httpService.get<PaginatedResponse<PlaytestResponse>>('/playtest/my-responses', {
     params: { status, per_page: perPage, page },
   })
+
+// ---------------------------------------------------------------------------
+// Game access delivery + liability waiver (accepted responses only)
+// ---------------------------------------------------------------------------
+
+export interface PlaytestAccessGrant {
+  id: number
+  access_type: 'key' | 'link'
+  revealed: boolean
+  revealed_at: string | null
+  key_code?: string
+  external_link?: string
+}
+
+/** Null when the response was accepted without a configured access grant. */
+export const fetchAccessGrant = (responseId: number) =>
+  httpService.get<{ data: PlaytestAccessGrant | null }>(`/playtest/responses/${responseId}/access-grant`)
+
+/** Sends (or resends) the liability-waiver OTP to the tester's account email. */
+export const initiateAccessGrantWaiver = (responseId: number) =>
+  httpService.post<{ data: { document_id: number; status: string } }>(`/playtest/responses/${responseId}/waiver/initiate`)
+
+/** Verifies the OTP code; on success the response includes the revealed key/link. */
+export const verifyAccessGrantWaiver = (responseId: number, otpCode: string) =>
+  httpService.post<{ data: PlaytestAccessGrant }>(`/playtest/responses/${responseId}/waiver/verify`, { otp_code: otpCode })
+
+// ---------------------------------------------------------------------------
+// Video Playtest — recording upload + timestamped markers ("minutagem")
+// ---------------------------------------------------------------------------
+
+export interface PlaytestRecording {
+  id: number
+  status: 'uploading' | 'processing' | 'ready' | 'failed'
+  duration_seconds: number | null
+  playback_url: string | null
+  external_id: string
+  markers?: PlaytestRecordingMarker[]
+}
+
+export interface PlaytestRecordingMarker {
+  id: number
+  timestamp_seconds: number
+  comment: string
+  severity: 'blocker' | 'major' | 'minor' | 'note' | null
+  created_by_user_id: number
+}
+
+/** Requests a direct-upload URL from the video provider — the browser uploads straight to it, never through this API. */
+export const requestRecordingUploadUrl = (campaignId: number) =>
+  httpService.post<{ data: { recording_id: number; upload_url: string } }>(
+    `/playtest/campaigns/${campaignId}/recording/upload-url`,
+  )
+
+/** Poll this until status === 'ready' (set by the provider's webhook once processing finishes). */
+export const fetchRecording = (responseId: number) =>
+  httpService.get<{ data: PlaytestRecording | null }>(`/playtest/responses/${responseId}/recording`)
+
+export const storeRecordingMarker = (
+  responseId: number,
+  payload: { timestamp_seconds: number; comment: string; severity?: 'blocker' | 'major' | 'minor' | 'note' },
+) => httpService.post<{ data: PlaytestRecordingMarker }>(`/playtest/responses/${responseId}/recording/markers`, payload)