@mundogamernetwork/shared-ui 1.1.67 → 1.1.69

package/pages/key-campaigns/index.vue

@@ -190,7 +190,7 @@
 										<div class="days" v-else></div>
 										<span>
 											<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" 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="var(--key-accent, #D297FF)" />
+												<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="var(--key-accent, var(--key-accent, var(--primary, #D297FF)))" />
 											</svg>
 											{{ card.type }}
 										</span>
@@ -737,7 +737,7 @@ onUnmounted(() => {
 	display: inline-block;
 	width: 20px;
 	height: 20px;
-	border: 2px solid var(--key-accent, #d297ff);
+	border: 2px solid var(--key-accent, var(--key-accent, var(--primary, #D297FF)));
 	border-radius: 50%;
 	border-top-color: #fff;
 	animation: spin 1s ease-in-out infinite;
@@ -775,7 +775,7 @@ onUnmounted(() => {
 	position: absolute;
 	bottom: 8px;
 	right: 8px;
-	background: var(--key-accent-dark, rgba(107, 21, 172, 0.9));
+	background: var(--key-accent-dark, var(--key-accent-bg, rgba(107, 21, 172, 0.9)));
 	color: #fff;
 	font-size: 12px;
 	font-weight: 600;
@@ -790,7 +790,7 @@ onUnmounted(() => {
 	position: absolute;
 	top: 8px;
 	left: 8px;
-	background: rgba(234, 179, 8, 0.9);
+	background: var(--exclusive-badge-bg, rgba(234, 179, 8, 0.9));
 	color: #000;
 	font-size: 10px;
 	font-weight: 700;
@@ -806,15 +806,15 @@ onUnmounted(() => {
 .level-badge {
 	top: auto;
 	bottom: 8px;
-	background: rgba(210, 151, 255, 0.92);
-	color: #1c1c1c;
+	background: var(--level-badge-bg, rgba(210, 151, 255, 0.92));
+	color: var(--key-accent-ink, #13161C);
 }
 
 .early-access-badge {
 	position: absolute;
 	top: 8px;
 	left: 8px;
-	background: var(--key-accent-dark, rgba(107, 21, 172, 0.9));
+	background: var(--key-accent-dark, var(--key-accent-bg, rgba(107, 21, 172, 0.9)));
 	color: #fff;
 	font-size: 10px;
 	font-weight: 700;
@@ -827,13 +827,13 @@ onUnmounted(() => {
 	i { font-size: 10px; }
 }
 
-.exclusive-lock { background: rgba(234, 179, 8, 0.6) !important; }
+.exclusive-lock { background: var(--exclusive-lock-bg, rgba(234, 179, 8, 0.6)) !important; }
 
 .early-access-lock-overlay,
 .exclusive-lock-overlay {
 	position: absolute;
 	inset: 0;
-	background: rgba(0, 0, 0, 0.72);
+	background: var(--overlay-dark-strong, rgba(0, 0, 0, 0.72));
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -842,13 +842,13 @@ onUnmounted(() => {
 	padding: 12px;
 	text-align: center;
 
-	i { font-size: 24px; color: var(--key-accent, #D297FF); }
+	i { font-size: 24px; color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); }
 	.lock-label { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
-	.lock-countdown { color: var(--key-accent, #D297FF); font-size: 12px; font-weight: 600; }
-	.lock-cta { color: #EAB308; font-size: 11px; font-weight: 600; }
+	.lock-countdown { color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); font-size: 12px; font-weight: 600; }
+	.lock-cta { color: var(--exclusive-badge-color, #EAB308); font-size: 11px; font-weight: 600; }
 }
 
-.exclusive-lock-overlay i { color: #EAB308; }
+.exclusive-lock-overlay i { color: var(--exclusive-badge-color, #EAB308); }
 
 .upgrade-btn {
 	display: flex;
@@ -952,7 +952,7 @@ onUnmounted(() => {
 				cursor: pointer;
 			}
 
-			span.active { background: var(--key-accent, #6b15ac); }
+			span.active { background: var(--key-accent, var(--key-accent, var(--primary, #6b15ac))); }
 		}
 	}
 
@@ -997,8 +997,8 @@ onUnmounted(() => {
 				}
 
 				.header-left .btn.tertiary.active {
-					background-color: var(--key-accent, #D297FF);
-					color: #1C1C1C;
+					background-color: var(--key-accent, var(--key-accent, var(--primary, #D297FF)));
+					color: var(--key-accent-ink, #13161C);
 				}
 
 				.platform-select {
@@ -1012,11 +1012,11 @@ onUnmounted(() => {
 					cursor: pointer;
 
 					option {
-						background: var(--bg-primary, #1c1c1c);
+						background: var(--bg-primary, var(--key-accent-ink, #13161C));
 						color: var(--title-fg);
 					}
 
-					&:focus { outline: none; border-color: var(--key-accent, #D297FF); }
+					&:focus { outline: none; border-color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); }
 				}
 
 				.filter-divider {
@@ -1078,7 +1078,7 @@ onUnmounted(() => {
 
 					&:not(.unavailable):hover {
 						transform: translateY(-4px);
-						box-shadow: 0 8px 24px rgba(107, 21, 172, 0.15);
+						box-shadow: 0 8px 24px var(--key-accent-shadow, rgba(107, 21, 172, 0.15));
 					}
 
 					.card-header {
@@ -1116,7 +1116,7 @@ onUnmounted(() => {
 							display: flex;
 							align-items: center;
 							gap: 4px;
-							span { color: var(--key-accent, #d297ff); font-size: 16px; font-weight: 600; }
+							span { color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); font-size: 16px; font-weight: 600; }
 						}
 
 						span {
@@ -1168,7 +1168,7 @@ onUnmounted(() => {
 								justify-content: center;
 								cursor: pointer;
 								flex-shrink: 0;
-								&:hover { border-color: var(--key-accent, #D297FF); color: var(--key-accent, #D297FF); }
+								&:hover { border-color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); }
 								i { font-size: 14px; }
 							}
 						}
@@ -1187,7 +1187,7 @@ onUnmounted(() => {
 						font-size: 12px;
 						color: var(--title-fg);
 						font-weight: 400;
-						span { color: var(--key-accent, #d297ff); }
+						span { color: var(--key-accent, var(--key-accent, var(--primary, #D297FF))); }
 					}
 				}
 			}

package/pages/key-campaigns/redeem-key-approved.vue

@@ -0,0 +1,311 @@
+<script lang="ts" setup>
+import { ref, inject, onMounted } from "vue"
+import { useRoute, navigateTo } from "#app"
+import { useNuxtApp } from "#app"
+import { revealKey, fetchKeyRequestById } from "../../services/campaignService"
+
+const route = useRoute()
+const { $i18n } = useNuxtApp()
+const locale = $i18n.locale
+
+const currentUser = inject<any>("currentUser", null)
+const loginUrl = inject<string>("loginUrl", "/")
+
+const requestId = Number(route.query.requestId)
+const keyItemsParam = route.query.keyItems as string | undefined
+
+const loading = ref(true)
+const revealing = ref(false)
+const keyCode = ref<string | null>(null)
+const error = ref("")
+const requestData = ref<any>(null)
+const copied = ref(false)
+
+onMounted(async () => {
+	if (!currentUser) {
+		const returnTo = typeof window !== "undefined" ? window.location.href : ""
+		navigateTo(`${loginUrl}?redirect_to=${encodeURIComponent(returnTo)}`, { external: true })
+		return
+	}
+	if (!requestId) {
+		navigateTo(`/${locale.value}/key-campaigns`)
+		return
+	}
+	try {
+		const res = await fetchKeyRequestById(requestId)
+		requestData.value = res?.data?.data || res?.data || null
+	} catch {
+		error.value = $i18n.t("keys.campaigns.error_loading")
+	} finally {
+		loading.value = false
+	}
+})
+
+async function reveal() {
+	revealing.value = true
+	error.value = ""
+	try {
+		const res = await revealKey(requestId)
+		const data = res?.data?.data || res?.data || null
+		keyCode.value = data?.key || data?.code || data?.value || null
+		if (!keyCode.value) {
+			error.value = $i18n.t("keys.campaigns.error_reveal")
+		}
+	} catch (e: any) {
+		error.value = e?.response?.data?.message || $i18n.t("keys.campaigns.error_reveal")
+	} finally {
+		revealing.value = false
+	}
+}
+
+async function copyCode() {
+	if (!keyCode.value) return
+	try {
+		await navigator.clipboard.writeText(keyCode.value)
+		copied.value = true
+		setTimeout(() => { copied.value = false }, 2000)
+	} catch {
+		// fallback: select text
+	}
+}
+
+function goBack() {
+	if (typeof window !== "undefined" && window.history.length > 1) {
+		window.history.back()
+	} else {
+		navigateTo(`/${locale.value}/key-campaigns`)
+	}
+}
+</script>
+
+<template>
+	<div id="shared-redeem-key-approved">
+		<div class="container">
+			<div class="header">
+				<NuxtLink @click.prevent="goBack" class="back">
+					<MGIcon size="2x" icon="chevron-left" />
+					<span>{{ $t("keys.campaigns.back") }}</span>
+				</NuxtLink>
+			</div>
+
+			<div v-if="loading" class="state">
+				<div class="skeleton" v-for="i in 2" :key="i" />
+			</div>
+
+			<div v-else-if="error && !keyCode" class="state error">{{ error }}</div>
+
+			<div v-else class="content">
+				<div class="title-bar">
+					<MGIcon icon="version" size="2x" class="title-icon" />
+					<div>
+						<h3>{{ $t("keys.campaigns.status_key.reveal_key") }}</h3>
+						<p v-if="requestData?.key?.name" class="campaign-name">{{ requestData.key.name }}</p>
+					</div>
+				</div>
+
+				<!-- Key not yet revealed -->
+				<div v-if="!keyCode" class="reveal-block">
+					<p class="hint">{{ $t("keys.campaigns.reveal_hint") }}</p>
+					<button
+						class="btn"
+						:class="{ disabled: revealing }"
+						:disabled="revealing"
+						@click="reveal"
+					>
+						{{ revealing ? $t("keys.campaigns.revealing") : $t("keys.campaigns.status_key.reveal_key") }}
+					</button>
+					<div v-if="error" class="req-error">{{ error }}</div>
+				</div>
+
+				<!-- Key revealed -->
+				<div v-else class="key-block">
+					<div class="key-label">{{ $t("keys.campaigns.your_key") }}</div>
+					<div class="key-code-row">
+						<span class="key-code">{{ keyCode }}</span>
+						<button class="copy-btn" @click="copyCode">
+							<MGIcon :icon="copied ? 'check' : 'copy'" size="1x" />
+							{{ copied ? $t("keys.campaigns.copied") : $t("keys.campaigns.copy") }}
+						</button>
+					</div>
+					<p class="redeem-info">{{ $t("keys.campaigns.redeem_on_platform") }}</p>
+				</div>
+
+				<!-- Request info -->
+				<div v-if="requestData" class="info-grid">
+					<div class="info-row" v-if="requestData.status_request?.name">
+						<span class="info-label">{{ $t("keys.campaigns.status") }}</span>
+						<span class="info-val">{{ requestData.status_request.name }}</span>
+					</div>
+					<div class="info-row" v-if="requestData.key?.name">
+						<span class="info-label">{{ $t("keys.campaigns.campaign.title") }}</span>
+						<span class="info-val">{{ requestData.key.name }}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+#shared-redeem-key-approved {
+	align-items: center;
+	width: 100%;
+	justify-content: center;
+	overflow: auto;
+	height: 100%;
+
+	.container { max-width: 680px !important; padding: 32px 16px 64px; }
+
+	.header {
+		margin-bottom: 24px;
+		.back {
+			display: inline-flex;
+			align-items: center;
+			gap: 8px;
+			font-size: 14px;
+			color: var(--secondary-info-fg);
+			cursor: pointer;
+			text-decoration: none;
+			&:hover { color: var(--card-article-title); }
+		}
+	}
+
+	.state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 12px;
+		padding: 64px 0;
+		text-align: center;
+		color: var(--secondary-info-fg);
+		&.error { color: var(--danger, #e53935); }
+	}
+
+	.skeleton {
+		width: 100%;
+		height: 48px;
+		background: var(--bg-app-badge);
+		animation: pulse 1.4s ease-in-out infinite;
+		& + & { margin-top: 8px; }
+	}
+
+	.content { display: flex; flex-direction: column; gap: 28px; }
+
+	.title-bar {
+		display: flex;
+		align-items: flex-start;
+		gap: 14px;
+		.title-icon { color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); margin-top: 2px; }
+		h3 { font-size: 20px; font-weight: 700; color: var(--card-article-title); margin: 0 0 4px; }
+		.campaign-name { font-size: 13px; color: var(--secondary-info-fg); margin: 0; }
+	}
+
+	.reveal-block {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		padding: 24px;
+		background: var(--bg-app-badge);
+		border: 1px solid var(--button-secondary-default-bg);
+
+		.hint { font-size: 14px; color: var(--secondary-info-fg); margin: 0; }
+	}
+
+	.key-block {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 24px;
+		background: var(--bg-app-badge);
+		border: 1px solid var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
+	}
+
+	.key-label {
+		font-size: 12px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		color: var(--secondary-info-fg);
+	}
+
+	.key-code-row {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		flex-wrap: wrap;
+	}
+
+	.key-code {
+		font-size: 20px;
+		font-weight: 700;
+		font-family: monospace;
+		letter-spacing: 2px;
+		color: var(--card-article-title);
+		word-break: break-all;
+	}
+
+	.copy-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 6px 14px;
+		font-size: 13px;
+		font-weight: 600;
+		background: transparent;
+		border: 1px solid var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
+		color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
+		cursor: pointer;
+		transition: background 0.15s;
+		&:hover { background: var(--key-accent-subtle-bg, rgba(210, 151, 255, 0.1)); }
+	}
+
+	.redeem-info {
+		font-size: 12px;
+		color: var(--secondary-info-fg);
+		margin: 0;
+	}
+
+	.req-error { font-size: 13px; color: var(--danger, #e53935); }
+
+	.info-grid {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding-top: 8px;
+		border-top: 1px solid var(--button-secondary-default-bg);
+	}
+
+	.info-row {
+		display: flex;
+		gap: 12px;
+		font-size: 13px;
+	}
+
+	.info-label {
+		color: var(--secondary-info-fg);
+		min-width: 100px;
+	}
+
+	.info-val { color: var(--card-article-title); }
+
+	.btn {
+		align-self: flex-start;
+		padding: 0 28px;
+		height: 44px;
+		font-size: 14px;
+		font-weight: 700;
+		background: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
+		color: #fff;
+		border: none;
+		cursor: pointer;
+		transition: opacity 0.15s;
+		&.disabled, &:disabled { opacity: 0.45; cursor: not-allowed; }
+		&:not(.disabled):hover { opacity: 0.85; }
+	}
+}
+
+@keyframes pulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.4; }
+}
+</style>