@mundogamernetwork/shared-ui 1.1.61 → 1.1.63

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

@@ -0,0 +1,1162 @@
+<script lang="ts" setup>
+import { ref, computed, inject, onMounted } from "vue"
+import { useNuxtApp, useRoute, useAsyncData, navigateTo } from "#app"
+import {
+	fetchCampaignBySlug,
+	fetchRedeemedUsers,
+	fetchKeyActions,
+	fetchMyRequests,
+	fetchKeyRequestById,
+	revealKey,
+	requestKey,
+} from "../../services/campaignService"
+
+// Injected by each front — provide in app.vue / a plugin
+const mgPlatform = inject<string>("mgPlatform", "MGTV")
+const loginUrl = inject<string>("loginUrl", "/")
+const upgradeRoute = inject<string>("upgradeRoute", "/")
+// The consuming front should provide the authenticated user as { id, ... } or null
+const currentUser = inject<any>("currentUser", null)
+
+const { $i18n } = useNuxtApp()
+const locale = $i18n.locale
+const route = useRoute()
+const { slug } = route.params as { slug: string }
+
+if (!slug) {
+	throw createError({ statusCode: 404, statusMessage: "Campaign not found" })
+}
+
+// ------------------------------------------------------------------
+// Campaign data (SSR-safe)
+// ------------------------------------------------------------------
+const { data: campaign, error } = await useAsyncData(`campaign-${slug}`, async () => {
+	try {
+		return await fetchCampaignBySlug(slug)
+	} catch (err) {
+		console.error("[key-campaigns/[slug]] Failed to load campaign:", err)
+		return null
+	}
+})
+
+// ------------------------------------------------------------------
+// SEO meta
+// ------------------------------------------------------------------
+const stripHtml = (html?: string | null) =>
+	(html || "").replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim()
+
+const absUrl = (url?: string | null) => {
+	if (!url) return ""
+	return url.startsWith("//") ? `https:${url}` : url
+}
+
+const seoTitle = () =>
+	campaign.value?.name
+		? $i18n.t("keys.campaigns.seo.title", { game: campaign.value.name })
+		: $i18n.t("keys.campaigns.seo.title_generic")
+
+const seoDescription = () =>
+	campaign.value?.name
+		? $i18n.t("keys.campaigns.seo.description", { game: campaign.value.name })
+		: $i18n.t("keys.campaigns.seo.title_generic")
+
+const seoImage = () => absUrl(campaign.value?.cover || campaign.value?.game_cover)
+
+useSeoMeta({
+	title: seoTitle,
+	description: seoDescription,
+	ogTitle: seoTitle,
+	ogDescription: seoDescription,
+	ogImage: seoImage,
+	ogType: "website",
+	twitterCard: "summary_large_image",
+	twitterTitle: seoTitle,
+	twitterDescription: seoDescription,
+	twitterImage: seoImage,
+})
+
+// ------------------------------------------------------------------
+// Key actions
+// ------------------------------------------------------------------
+const { data: keyActions } = await useAsyncData(
+	`campaign-actions-${slug}`,
+	async () => {
+		if (!campaign.value?.id) return []
+		try {
+			const response = await fetchKeyActions(campaign.value.id)
+			return response.data.data || []
+		} catch {
+			return []
+		}
+	},
+	{ watch: [campaign] },
+)
+
+// ------------------------------------------------------------------
+// Redeemed users
+// ------------------------------------------------------------------
+const { data: redeemedUsers } = await useAsyncData(
+	`campaign-redeemed-${slug}`,
+	async () => {
+		if (!campaign.value?.id) return { users: [], total: 0 }
+		try {
+			const response = await fetchRedeemedUsers(campaign.value.id)
+			const users = response.data.data || []
+			const total = response.data.meta?.total ?? users.length
+			return { users, total }
+		} catch {
+			return { users: [], total: 0 }
+		}
+	},
+	{ watch: [campaign] },
+)
+
+// ------------------------------------------------------------------
+// Countdown
+// ------------------------------------------------------------------
+const parseTimeToExpire = (timeString?: string): number => {
+	if (!timeString) return -1
+	const [days, hours, minutes, seconds] = timeString.split(":").map(Number)
+	return days * 86400 + hours * 3600 + minutes * 60 + seconds
+}
+
+const timeValues = ref({ days: 0, hours: 0, minutes: 0, seconds: 0 })
+
+const hasNoDateLimit = computed(() => !campaign.value?.end)
+
+const isCampaignExpired = computed(() => {
+	if (campaign.value?.status === false) return true
+	if (hasNoDateLimit.value) return false
+	return parseTimeToExpire(campaign.value?.time_to_expire) <= 0
+})
+
+let countdownInterval: ReturnType<typeof setInterval> | null = null
+
+const updateCountdown = () => {
+	if (hasNoDateLimit.value) {
+		timeValues.value = { days: 999, hours: 0, minutes: 0, seconds: 0 }
+		return
+	}
+	if (!campaign.value?.time_to_expire) return
+
+	const [d, h, m, s] = campaign.value.time_to_expire.split(":").map(Number)
+	let totalSeconds = d * 86400 + h * 3600 + m * 60 + s
+
+	countdownInterval = setInterval(() => {
+		if (totalSeconds <= 0) {
+			if (countdownInterval) clearInterval(countdownInterval)
+			return
+		}
+		totalSeconds--
+		timeValues.value = {
+			days: Math.floor(totalSeconds / 86400),
+			hours: Math.floor((totalSeconds % 86400) / 3600),
+			minutes: Math.floor((totalSeconds % 3600) / 60),
+			seconds: totalSeconds % 60,
+		}
+	}, 1000)
+}
+
+const formatDate = (dateString: string | null | undefined): string => {
+	if (!dateString) return "-"
+	const date = new Date(dateString)
+	if (isNaN(date.getTime())) return "-"
+	return new Intl.DateTimeFormat(locale.value, {
+		hour: "2-digit",
+		minute: "2-digit",
+		day: "numeric",
+		month: "long",
+		year: "numeric",
+	}).format(date)
+}
+
+// ------------------------------------------------------------------
+// Request state (client-side only)
+// ------------------------------------------------------------------
+const statusSlugToNumeric: Record<string, number> = {
+	pending: 2,
+	"under-review": 2,
+	approved: 3,
+	"waiting-material": 4,
+	completed: 5,
+	refused: 6,
+	cancelled: 7,
+	expired: 8,
+}
+
+const userRequestStatus = ref<number | null | undefined>(undefined)
+const userRequestId = ref<number | null>(null)
+const userKeyItemId = ref<number | null>(null)
+
+const effectiveKeyStatus = computed(() => {
+	if (userRequestStatus.value !== undefined) return userRequestStatus.value
+	return campaign.value?.request_status
+})
+
+const effectiveRequestId = computed(() => userRequestId.value ?? campaign.value?.request_id ?? null)
+const effectiveKeyItems = computed(() => userKeyItemId.value ?? campaign.value?.request_item_id ?? null)
+
+// ------------------------------------------------------------------
+// Restriction badges
+// ------------------------------------------------------------------
+const restrictionBadges = computed(() => {
+	const k = campaign.value
+	if (!k) return []
+	const badges: string[] = []
+	const tierLabels: Record<string, string> = { free: "Free", pro: "PRO", business: "Business", official: "Official" }
+
+	if (k.is_exclusive) {
+		badges.push($i18n.t("keys.campaigns.restriction.exclusive_official"))
+	} else if (k.is_tier_locked && k.access_tier && k.access_tier !== "free") {
+		badges.push($i18n.t("keys.campaigns.restriction.tier_locked", { tier: tierLabels[k.access_tier] || k.access_tier }))
+	} else if (k.early_access_hours && k.early_access_hours > 0 && k.access_tier && k.access_tier !== "free") {
+		badges.push($i18n.t("keys.campaigns.restriction.early_access", { tier: tierLabels[k.access_tier] || k.access_tier }))
+	}
+	if (k.streamer_type === 2) {
+		badges.push($i18n.t("keys.campaigns.restriction.level_official"))
+	} else if (k.streamer_type === 3) {
+		badges.push($i18n.t("keys.campaigns.restriction.level_affiliate"))
+	}
+	return badges
+})
+
+// ------------------------------------------------------------------
+// UserRequestsValidation inline state (ported from TV component)
+// ------------------------------------------------------------------
+type StatusConfig = {
+	titleParts: { text: string; color?: "default" | "yellow" | "red" }[]
+	obs: string
+	obsColor?: "default" | "yellow" | "red"
+	progress?: { percent: number; step: number; total: number; color?: "default" | "yellow" | "complete" }
+	actions?: Array<{ type: string; disabled?: boolean }>
+	canViewCode?: boolean
+}
+
+const statusConfigs: Record<string, StatusConfig> = {
+	expired: {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_0" },
+			{ text: "keys.campaigns.status_key.title_span_0", color: "red" },
+		],
+		obs: "keys.campaigns.status_key.obs_0",
+		obsColor: "red",
+	},
+	exhausted: {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_exhausted" },
+			{ text: "keys.campaigns.status_key.title_span_exhausted", color: "red" },
+		],
+		obs: "keys.campaigns.status_key.obs_exhausted",
+		obsColor: "red",
+	},
+	locked_exclusive: {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_locked" },
+			{ text: "keys.campaigns.status_key.title_span_locked", color: "yellow" },
+		],
+		obs: "keys.campaigns.status_key.obs_locked_exclusive",
+		obsColor: "yellow",
+		actions: [{ type: "upgrade" }],
+	},
+	locked_early: {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_locked" },
+			{ text: "keys.campaigns.status_key.title_span_locked", color: "yellow" },
+		],
+		obs: "keys.campaigns.status_key.obs_locked_early",
+		obsColor: "yellow",
+		actions: [{ type: "upgrade" }],
+	},
+	locked_tier: {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_locked" },
+			{ text: "keys.campaigns.status_key.title_span_locked", color: "yellow" },
+		],
+		obs: "keys.campaigns.status_key.obs_locked_tier",
+		obsColor: "yellow",
+		actions: [{ type: "upgrade" }],
+	},
+	locked_official: {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_level" },
+			{ text: "keys.campaigns.status_key.title_span_level_official", color: "yellow" },
+		],
+		obs: "keys.campaigns.status_key.obs_level_official",
+		obsColor: "yellow",
+	},
+	locked_affiliate: {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_level" },
+			{ text: "keys.campaigns.status_key.title_span_level_affiliate", color: "yellow" },
+		],
+		obs: "keys.campaigns.status_key.obs_level_affiliate",
+		obsColor: "yellow",
+	},
+	"1": {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_1" },
+			{ text: "keys.campaigns.status_key.title_span_1" },
+		],
+		obs: "keys.campaigns.status_key.obs_1",
+		progress: { percent: 25, step: 1, total: 4 },
+		actions: [{ type: "redeem", disabled: false }],
+	},
+	"2": {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_2" },
+			{ text: "keys.campaigns.status_key.title_span_2", color: "yellow" },
+		],
+		obs: "keys.campaigns.status_key.obs_2",
+		obsColor: "yellow",
+		progress: { percent: 50, step: 2, total: 4, color: "yellow" },
+	},
+	"3": {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_approved" },
+			{ text: "keys.campaigns.status_key.title_span_approved" },
+		],
+		obs: "keys.campaigns.status_key.obs_approved",
+		progress: { percent: 50, step: 2, total: 4 },
+		actions: [{ type: "reveal-key" }],
+	},
+	"4": {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_3" },
+			{ text: "keys.campaigns.status_key.title_span_3" },
+			{ text: "keys.campaigns.status_key.title_3_2" },
+		],
+		obs: "keys.campaigns.status_key.obs_3",
+		progress: { percent: 75, step: 3, total: 4 },
+		actions: [{ type: "send-materials" }],
+		canViewCode: true,
+	},
+	"5": {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_span_4" },
+			{ text: "keys.campaigns.status_key.title_4" },
+		],
+		obs: "keys.campaigns.status_key.obs_4",
+		progress: { percent: 100, step: 4, total: 4, color: "complete" },
+		actions: [{ type: "complete-materials" }],
+		canViewCode: true,
+	},
+	"6": {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_5" },
+			{ text: "keys.campaigns.status_key.title_span_5", color: "red" },
+		],
+		obs: "keys.campaigns.status_key.obs_5",
+		obsColor: "red",
+	},
+	"7": {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_6" },
+			{ text: "keys.campaigns.status_key.title_span_6", color: "red" },
+		],
+		obs: "keys.campaigns.status_key.obs_6",
+		obsColor: "red",
+	},
+	"8": {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_7" },
+			{ text: "keys.campaigns.status_key.title_span_7", color: "red" },
+		],
+		obs: "keys.campaigns.status_key.obs_7",
+		obsColor: "red",
+	},
+	"9": {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_8" },
+			{ text: "keys.campaigns.status_key.title_span_8", color: "red" },
+		],
+		obs: "keys.campaigns.status_key.obs_8",
+		obsColor: "red",
+	},
+}
+
+const currentConfig = computed((): StatusConfig | null => {
+	const status = effectiveKeyStatus.value
+	const campaignExpired = !hasNoDateLimit.value && parseTimeToExpire(campaign.value?.time_to_expire) <= 0
+	const campaignExhausted = (campaign.value?.available_count ?? 0) < 1
+	const noRequestYet = status === null || status === undefined || status === 1
+	const userCanAccess = campaign.value?.user_can_access !== false
+
+	if (noRequestYet && !campaignExpired && !userCanAccess) {
+		if (campaign.value?.is_exclusive) return statusConfigs.locked_exclusive
+		if (campaign.value?.is_tier_locked) return statusConfigs.locked_tier
+		return statusConfigs.locked_early
+	}
+
+	if (status === null || status === undefined) {
+		if (campaignExpired) return statusConfigs.expired
+		if (campaignExhausted) return statusConfigs.exhausted
+		return statusConfigs["1"]
+	}
+
+	if (status === 1 && campaignExpired) return statusConfigs.expired
+	if (status === 1 && campaignExhausted) return statusConfigs.exhausted
+	if (status === 1) return statusConfigs["1"]
+
+	return statusConfigs[String(status)] || null
+})
+
+const redeemDisabled = computed(() => {
+	const action = currentConfig.value?.actions?.[0]
+	if (!action || action.type !== "redeem") return true
+	return action.disabled || (campaign.value?.available_count ?? 0) < 1
+})
+
+const tierLabel = computed(() => {
+	const labels: Record<string, string> = { free: "Free", pro: "PRO", business: "Business", official: "Official" }
+	return labels[campaign.value?.access_tier || "free"] || (campaign.value?.access_tier || "free")
+})
+
+// ------------------------------------------------------------------
+// Auth guard for CTA actions
+// ------------------------------------------------------------------
+function requireAuth(targetPath: string) {
+	if (currentUser) {
+		navigateTo(targetPath)
+		return
+	}
+	const returnTo = typeof window !== "undefined"
+		? `${window.location.origin}${route.fullPath}`
+		: targetPath
+	navigateTo(`${loginUrl}?redirect_to=${encodeURIComponent(returnTo)}`, { external: true })
+}
+
+// ------------------------------------------------------------------
+// Modal state (redeemed users list)
+// ------------------------------------------------------------------
+const showUsersModal = ref(false)
+
+// ------------------------------------------------------------------
+// Lifecycle
+// ------------------------------------------------------------------
+onMounted(async () => {
+	updateCountdown()
+
+	if (currentUser && campaign.value?.id) {
+		try {
+			const response = await fetchMyRequests({ "filter[key_id]": campaign.value.id })
+			const requests = response?.data?.data
+			if (requests && requests.length > 0) {
+				const slugStatus = requests[0]?.status_request?.slug
+				userRequestStatus.value = slugStatus ? (statusSlugToNumeric[slugStatus] ?? null) : null
+				userRequestId.value = requests[0]?.id ?? null
+				userKeyItemId.value = requests[0]?.key_item_id ?? null
+			} else {
+				userRequestStatus.value = null
+			}
+		} catch {
+			userRequestStatus.value = null
+		}
+	}
+})
+</script>
+
+<template>
+	<div id="shared-campaign-detail">
+		<div class="container">
+			<div class="header">
+				<NuxtLink class="back" :to="`/${locale}/key-campaigns`">
+					<MGIcon size="2x" icon="chevron-left" />
+					<span>{{ $t("keys.campaigns.back") }}</span>
+				</NuxtLink>
+
+				<!-- Inline UserRequestsValidation -->
+				<div class="rescue" v-if="currentConfig">
+					<div class="rescue-texts">
+						<div class="title">
+							<template v-for="(part, i) in currentConfig.titleParts" :key="i">
+								<template v-if="i > 0"> </template>
+								<span v-if="part.color" :class="part.color">{{ $t(part.text) }}</span>
+								<template v-if="!part.color">{{ $t(part.text) }}</template>
+							</template>
+						</div>
+
+						<div class="bar" v-if="currentConfig.progress">
+							<div
+								class="progress"
+								:class="currentConfig.progress.color || ''"
+								:style="{ width: currentConfig.progress.percent + '%' }"
+							>
+								<span>
+									{{ currentConfig.progress.step }}
+									{{ $t("keys.campaigns.status_key.of") }}
+									{{ currentConfig.progress.total }}
+								</span>
+							</div>
+						</div>
+
+						<div class="info">
+							<MGIcon size="1x" icon="version" :class="currentConfig.obsColor || ''" />
+							{{ $t(currentConfig.obs, { tier: tierLabel }) }}
+						</div>
+					</div>
+
+					<div class="rescue-actions" v-if="currentConfig.actions?.length || (currentConfig.canViewCode && effectiveRequestId)">
+						<template v-if="currentConfig.actions?.[0]?.type === 'upgrade'">
+							<button class="btn" @click="requireAuth(upgradeRoute)">
+								{{ $t("keys.campaigns.upgrade_plan") }}
+							</button>
+						</template>
+
+						<template v-else-if="currentConfig.actions?.[0]?.type === 'redeem'">
+							<button
+								class="btn"
+								:class="{ disabled: redeemDisabled }"
+								:disabled="redeemDisabled"
+								@click="requireAuth(`/${locale}/key-campaigns/redeem-key?keyId=${campaign?.id}`)"
+							>
+								{{ $t("keys.campaigns.campaign.redeem") }}
+							</button>
+						</template>
+
+						<template v-else-if="currentConfig.actions?.[0]?.type === 'reveal-key'">
+							<button class="btn" @click="requireAuth(`/${locale}/key-campaigns/redeem-key-approved?requestId=${effectiveRequestId}${effectiveKeyItems ? '&keyItems=' + effectiveKeyItems : ''}`)">
+								{{ $t("keys.campaigns.status_key.reveal_key") }}
+							</button>
+						</template>
+
+						<template v-else-if="currentConfig.actions?.[0]?.type === 'send-materials'">
+							<button class="btn" @click="requireAuth(`/${locale}/key-campaigns/key-materials?requestId=${effectiveRequestId}`)">
+								{{ $t("keys.materials.title") }}
+							</button>
+						</template>
+
+						<template v-else-if="currentConfig.actions?.[0]?.type === 'complete-materials'">
+							<button class="btn" @click="requireAuth(`/${locale}/key-campaigns/key-materials?requestId=${effectiveRequestId}`)">
+								{{ $t("keys.campaigns.status_key.complete") }}
+							</button>
+						</template>
+
+						<a
+							v-if="currentConfig.canViewCode && effectiveRequestId"
+							class="view-code-link"
+							@click.prevent="requireAuth(`/${locale}/key-campaigns/redeem-key-approved?requestId=${effectiveRequestId}${effectiveKeyItems ? '&keyItems=' + effectiveKeyItems : ''}`)"
+						>
+							<MGIcon size="1x" icon="version" />
+							{{ $t("keys.campaigns.status_key.view_code") }}
+						</a>
+					</div>
+				</div>
+			</div>
+
+			<div class="content-key">
+				<div class="content-key-header">
+					<h4>{{ campaign?.name }}</h4>
+
+					<div class="restriction-badges" v-if="restrictionBadges.length">
+						<div class="restriction-badge" v-for="(b, i) in restrictionBadges" :key="i">
+							<MGIcon size="1x" icon="lock" />
+							{{ b }}
+						</div>
+					</div>
+				</div>
+
+				<!-- Cover when no game details -->
+				<div class="featured-cover" v-if="campaign?.cover">
+					<img :src="campaign.cover" :alt="campaign.name" />
+				</div>
+
+				<div class="cards">
+					<div class="side">
+						<div class="about">
+							<div class="game-cover">
+								<img :src="campaign?.game_cover || '/imgs/no-cover-img.jpg'" alt="Cover" />
+								<div class="info">
+									{{ $t("keys.campaigns.campaign.launch") }}
+									<span>{{ $t("keys.campaigns.campaign.no_data") }}</span>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="side-border">
+						<div class="status">
+							{{ $t("keys.campaigns.campaign.status") }}
+							<div class="tags">
+								<div class="tag">
+									<span :class="{
+										active: !isCampaignExpired && (campaign?.available_count ?? 0) > 0 && (hasNoDateLimit || timeValues.days > 7),
+										ending: !isCampaignExpired && (campaign?.available_count ?? 0) > 0 && !hasNoDateLimit && timeValues.days <= 7 && timeValues.days > 0,
+										inactive: isCampaignExpired || (campaign?.available_count ?? 0) === 0,
+									}">●</span>
+									{{
+										isCampaignExpired
+											? $t("keys.campaigns.campaign.status_closed")
+											: (campaign?.available_count ?? 0) === 0
+												? $t("keys.campaigns.campaign.status_exhausted")
+												: hasNoDateLimit
+													? $t("keys.campaigns.campaign.status_active")
+													: timeValues.days <= 7
+														? $t("keys.campaigns.campaign.status_ending")
+														: $t("keys.campaigns.campaign.status_active")
+									}}
+								</div>
+								<div class="tag-quantity" v-if="!isCampaignExpired">
+									<span :class="{
+										active: (campaign?.available_count ?? 0) > 0 && (hasNoDateLimit || timeValues.days > 7),
+										ending: (campaign?.available_count ?? 0) > 0 && !hasNoDateLimit && timeValues.days <= 7,
+										inactive: (campaign?.available_count ?? 0) === 0,
+									}">{{ campaign?.available_count || 0 }} {{ $t("keys.campaigns.campaign.keys") }}</span>
+									{{ $t("keys.campaigns.campaign.available") }}
+								</div>
+							</div>
+						</div>
+
+						<div class="time" v-if="!hasNoDateLimit">
+							<div class="card-time">
+								{{ timeValues.days }}<span>{{ $t("keys.campaigns.campaign.days") }}</span>
+							</div>
+							<div class="card-time">
+								{{ timeValues.hours }}<span>{{ $t("keys.campaigns.campaign.hours") }}</span>
+							</div>
+							<div class="card-time">
+								{{ timeValues.minutes }}<span>{{ $t("keys.campaigns.campaign.minutes") }}</span>
+							</div>
+							<div class="card-time">
+								{{ timeValues.seconds }}<span>{{ $t("keys.campaigns.campaign.seconds") }}</span>
+							</div>
+						</div>
+
+						<div class="requirements">
+							{{ $t("keys.campaigns.campaign.requirements") }}
+							<div class="tags">
+								<div class="tag" :class="{ active: campaign?.streamer_type === 1 }">
+									<MGIcon icon="community" /> {{ $t("keys.campaigns.campaign.requirement.all") }}
+								</div>
+								<div class="tag" :class="{ active: campaign?.streamer_type === 2 || campaign?.streamer_type === 1 }">
+									<MGIcon icon="verified" /> {{ $t("keys.campaigns.campaign.requirement.official") }}
+								</div>
+								<div class="tag" :class="{ active: campaign?.streamer_type === 3 || campaign?.streamer_type === 1 }">
+									<MGIcon icon="partner" /> {{ $t("keys.campaigns.campaign.requirement.affiliate") }}
+								</div>
+							</div>
+							<div class="tags" v-if="campaign?.streamer_description">
+								<div class="tag-bg">{{ campaign.streamer_description }}</div>
+							</div>
+						</div>
+
+						<div class="actions">
+							{{ $t("keys.campaigns.campaign.actions") }}
+							<template v-if="keyActions && keyActions.length > 0">
+								<div class="tag" v-for="action in keyActions" :key="action.id">
+									<div class="icon">
+										<MGIcon :icon="action.action_type === 'live' ? 'live' : action.action_type === 'tweet' ? 'twitter' : action.action_type === 'post' ? 'instagram' : action.action_type === 'review' ? 'star' : 'check'" />
+									</div>
+									<div class="texts">
+										{{ action.title }}
+										<div class="small" v-if="action.description">{{ action.description }}</div>
+										<div class="small reward">
+											<span>{{ action.reward_type === "mgc" ? "MGC" : "R$" }} {{ action.reward_amount }}</span>
+										</div>
+									</div>
+								</div>
+							</template>
+							<div class="empty-actions" v-else>
+								{{ $t("keys.campaigns.campaign.no_actions") }}
+							</div>
+						</div>
+
+						<div class="actions">
+							{{ $t("keys.campaigns.campaign.days_hours") }}
+							<div class="data">
+								<div class="info">
+									{{ $t("keys.campaigns.campaign.start") }}
+									<span>{{ formatDate(campaign?.start) }}</span>
+								</div>
+								<div class="info">
+									{{ $t("keys.campaigns.campaign.end") }}
+									<span>{{ formatDate(campaign?.end) }}</span>
+								</div>
+							</div>
+						</div>
+
+						<div class="actions">
+							{{ $t("keys.campaigns.campaign.who_redeem") }}
+							<div class="users">
+								<div class="imgs">
+									<img
+										v-for="(u, index) in redeemedUsers?.users?.slice(0, 4)"
+										:key="index"
+										:src="u.avatar_url"
+										:alt="u.nickname"
+									/>
+								</div>
+								<div class="text">
+									<span>+{{ redeemedUsers?.total ?? 0 }}</span>
+									{{ $t("keys.campaigns.creators") }}
+								</div>
+							</div>
+						</div>
+
+						<div class="actions">
+							{{ $t("keys.campaigns.campaign.created_by") }}
+							<div class="company">
+								<div class="badge-tag">
+									<div class="image">
+										<img :src="campaign?.logo || '/imgs/no-cover-img.jpg'" alt="Logo" />
+									</div>
+									<div class="texts">
+										{{ campaign?.company || "" }}
+										<div class="small">{{ $t("keys.campaigns.campaign.rp_label") }}</div>
+									</div>
+								</div>
+								<div class="badge-tag" v-if="campaign?.email">
+									<div class="texts">
+										<div class="small">E-mail</div>
+										{{ campaign.email }}
+									</div>
+								</div>
+								<a v-if="campaign?.twitter" :href="campaign.twitter" target="_blank" rel="noopener noreferrer">
+									<div class="badge-tag w-48"><MGIcon icon="twitter-v2" /></div>
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+#shared-campaign-detail {
+	align-items: center;
+	width: 100%;
+	justify-content: center;
+	overflow: auto;
+	height: 100%;
+
+	.container { max-width: 1140px !important; }
+
+	.header {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 43px;
+		margin-top: 12px;
+		margin-bottom: 43px;
+
+		.back {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			color: var(--card-article-title);
+			font-size: 12px;
+			cursor: pointer;
+		}
+	}
+
+	/* ---- Inline rescue/CTA banner (ported from TV UserRequestsValidation) ---- */
+	.rescue {
+		display: flex;
+		width: 100%;
+		padding: 12px;
+		align-items: center;
+		gap: 12px;
+		background-color: var(--button-secondary-default-bg);
+		justify-content: space-between;
+
+		.btn {
+			background: #D297FF;
+			display: flex;
+			height: 44px;
+			padding: 0 14px;
+			justify-content: center;
+			align-items: center;
+			gap: 4px;
+			color: #000;
+			cursor: pointer;
+			border: none;
+			&.disabled { opacity: 0.5; pointer-events: none; }
+		}
+
+		.rescue-actions {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			gap: 8px;
+			flex-shrink: 0;
+		}
+
+		.view-code-link {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			font-size: 13px;
+			color: #D297FF;
+			cursor: pointer;
+			text-decoration: none;
+			white-space: nowrap;
+			&:hover { text-decoration: underline; }
+		}
+
+		.rescue-texts {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+
+			.title {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 4px;
+				font-size: 14px;
+				font-weight: 600;
+				color: var(--card-article-title);
+				span { color: #d297ff; }
+				.yellow { color: #FFD600; }
+				.red { color: #ff4800; }
+			}
+
+			.bar {
+				background-color: var(--bg-app-badge);
+				width: 346px;
+				height: 24px;
+				position: relative;
+
+				.progress {
+					height: 24px;
+					background-color: #d297ff;
+					span {
+						position: absolute;
+						right: 5px;
+						top: 5px;
+						font-size: 12px;
+						color: var(--secondary-info-fg);
+					}
+				}
+				.complete span { color: #272930; }
+				.yellow { background-color: #FFD600; }
+			}
+
+			.info {
+				font-size: 12px;
+				color: var(--secondary-info-fg);
+				i { color: #d297ff; }
+				.yellow { color: #FFD600; }
+				.red { color: #ff4800; }
+			}
+		}
+
+		@media (max-width: 768px) {
+			flex-direction: column;
+			.btn { width: 100%; }
+			.rescue-texts .bar { width: 100%; }
+		}
+	}
+
+	.featured-cover {
+		width: 100%;
+		max-height: 400px;
+		overflow: hidden;
+		margin-bottom: 24px;
+		img { width: 100%; height: 400px; object-fit: cover; object-position: center top; }
+	}
+
+	.content-key {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+		padding-bottom: 43px;
+		border-bottom: 1px solid var(--button-secondary-default-bg);
+
+		.content-key-header {
+			display: flex;
+			flex-direction: column;
+			gap: 18px;
+
+			h4 { color: var(--card-article-title); font-size: 24px; font-weight: 700; }
+
+			.restriction-badges {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 8px;
+
+				.restriction-badge {
+					display: inline-flex;
+					align-items: center;
+					gap: 6px;
+					padding: 4px 10px;
+					font-size: 12px;
+					font-weight: 600;
+					color: #D297FF;
+					background: rgba(210, 151, 255, 0.12);
+					border: 1px solid rgba(210, 151, 255, 0.35);
+					i { font-size: 13px; }
+				}
+			}
+		}
+
+		.cards {
+			display: flex;
+			align-items: flex-start;
+			gap: 24px;
+			width: 100%;
+
+			.side {
+				display: flex;
+				flex-direction: column;
+				gap: 32px;
+				max-width: 50%;
+				width: 50%;
+
+				.about {
+					display: flex;
+					flex-direction: column;
+					gap: 24px;
+
+					.game-cover {
+						display: flex;
+						align-items: center;
+						gap: 12px;
+
+						img { width: 144px; height: 188px; background-color: var(--button-secondary-default-bg); }
+
+						.info {
+							display: flex;
+							padding: 8px 12px;
+							flex-direction: column;
+							gap: 2px;
+							background-color: var(--button-secondary-default-bg);
+							font-size: 12px;
+							color: var(--secondary-info-fg);
+							span { color: var(--card-article-title); }
+						}
+					}
+				}
+			}
+
+			.side-border {
+				display: flex;
+				padding: 18px;
+				flex-direction: column;
+				gap: 24px;
+				border: 1px solid var(--button-secondary-default-bg);
+				width: 50%;
+
+				.status {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					width: 100%;
+					font-size: 14px;
+					color: var(--card-article-title);
+					font-weight: 600;
+
+					.tags {
+						display: flex;
+						align-items: center;
+						gap: 6px;
+
+						.tag, .tag-quantity {
+							background-color: var(--button-secondary-default-bg);
+							display: flex;
+							padding: 12px;
+							align-items: center;
+							gap: 4px;
+							height: 32px;
+							font-size: 12px;
+							font-weight: 400;
+							span.active { color: #42FF00; }
+							span.inactive { color: red; }
+							span.ending { color: #ffa600; }
+						}
+					}
+				}
+
+				.time {
+					display: flex;
+					gap: 12px;
+					width: 100%;
+
+					.card-time {
+						display: flex;
+						height: 80px;
+						padding: 24px;
+						flex-direction: column;
+						align-items: center;
+						gap: 6px;
+						background-color: var(--button-secondary-default-bg);
+						font-size: 28px;
+						color: #D297FF;
+						font-weight: 700;
+						width: -webkit-fill-available;
+						span { font-size: 10px; color: var(--secondary-info-fg); font-weight: 400; }
+					}
+				}
+
+				.requirements {
+					display: flex;
+					flex-direction: column;
+					gap: 12px;
+					font-size: 14px;
+					color: var(--card-article-title);
+					font-weight: 600;
+					width: 100%;
+
+					.tags {
+						display: flex;
+						gap: 6px;
+						width: 100%;
+
+						.tag {
+							background-color: var(--button-secondary-default-bg);
+							display: flex;
+							padding: 12px;
+							align-items: center;
+							gap: 4px;
+							justify-content: center;
+							height: 32px;
+							font-size: 12px;
+							color: var(--secondary-info-fg);
+							width: -webkit-fill-available;
+							cursor: pointer;
+							&:hover, &.active {
+								background-color: #D297FF;
+								color: #1C1C1C;
+								i { color: #1C1C1C; }
+							}
+						}
+						.tag-bg {
+							background-color: var(--button-secondary-default-bg);
+							display: flex;
+							padding: 12px;
+							align-items: center;
+							height: 32px;
+							font-size: 12px;
+							color: var(--card-article-title);
+							width: -webkit-fill-available;
+						}
+					}
+				}
+
+				.actions {
+					display: flex;
+					flex-direction: column;
+					gap: 12px;
+					font-size: 14px;
+					color: var(--card-article-title);
+					font-weight: 600;
+					width: 100%;
+
+					.tag {
+						background-color: var(--button-secondary-default-bg);
+						display: flex;
+						padding: 12px;
+						align-items: center;
+						gap: 12px;
+						font-size: 12px;
+						color: var(--secondary-info-fg);
+						width: -webkit-fill-available;
+
+						.icon {
+							background-color: var(--bg-app-badge);
+							width: 52px;
+							height: 52px;
+							align-content: center;
+							flex-shrink: 0;
+							border-radius: 100%;
+							text-align-last: center;
+							i { color: #D297FF; }
+						}
+						.texts {
+							display: flex;
+							flex-direction: column;
+							gap: 4px;
+							color: var(--card-article-title);
+							font-size: 12px;
+							.small { color: var(--secondary-info-fg); }
+						}
+					}
+
+					.empty-actions {
+						font-size: 12px;
+						font-weight: 400;
+						color: var(--secondary-info-fg);
+						padding: 12px;
+						background-color: var(--button-secondary-default-bg);
+						width: 100%;
+					}
+
+					.reward span { color: #D297FF; }
+
+					.data {
+						display: flex;
+						gap: 12px;
+						width: 100%;
+						.info {
+							display: flex;
+							padding: 8px 12px;
+							flex-direction: column;
+							gap: 2px;
+							background-color: var(--button-secondary-default-bg);
+							font-size: 12px;
+							color: var(--secondary-info-fg);
+							width: -webkit-fill-available;
+							span { color: var(--card-article-title); }
+						}
+					}
+
+					.users {
+						display: flex;
+						align-items: center;
+						gap: 12px;
+
+						.imgs {
+							display: flex;
+							img { width: 50px; height: 50px; border: 2px solid var(--button-secondary-default-bg); }
+						}
+
+						.text {
+							font-size: 12px;
+							color: var(--secondary-info-fg);
+							width: -webkit-fill-available;
+							span { font-size: 16px; color: #D297FF; font-weight: 600; }
+						}
+					}
+
+					.company {
+						display: flex;
+						gap: 12px;
+						.w-48 { max-width: 48px; }
+						.badge-tag {
+							background-color: var(--button-secondary-default-bg);
+							display: flex;
+							padding: 8px 16px 8px 8px;
+							align-items: center;
+							gap: 12px;
+							font-size: 12px;
+							color: var(--secondary-info-fg);
+							width: -webkit-fill-available;
+							.image { width: 32px; height: 32px; img { width: 100%; border-radius: 100%; } }
+							.texts {
+								display: flex;
+								flex-direction: column;
+								gap: 2px;
+								color: var(--card-article-title);
+								font-size: 12px;
+								.small { color: var(--secondary-info-fg); }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	@media (max-width: 768px) {
+		.content-key .cards {
+			flex-direction: column;
+			.side, .side-border { max-width: 100%; width: 100%; }
+			.side-border {
+				.time { gap: 6px; .card-time { height: auto; padding: 8px; font-size: 24px; } }
+				.actions .data { flex-direction: column; }
+				.status { flex-direction: column; align-items: start; gap: 8px; }
+			}
+		}
+	}
+}
+</style>