@mundogamernetwork/shared-ui 1.1.66 → 1.1.68

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: #ff4800; }
+	}
+
+	.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, #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, #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, #D297FF));
+		color: var(--key-accent, var(--primary, #D297FF));
+		cursor: pointer;
+		transition: background 0.15s;
+		&:hover { background: rgba(210, 151, 255, 0.1); }
+	}
+
+	.redeem-info {
+		font-size: 12px;
+		color: var(--secondary-info-fg);
+		margin: 0;
+	}
+
+	.req-error { font-size: 13px; color: #ff4800; }
+
+	.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, #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>

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

@@ -0,0 +1,320 @@
+<script lang="ts" setup>
+import { ref, computed, inject, onMounted } from "vue"
+import { useRoute, navigateTo } from "#app"
+import { useNuxtApp } from "#app"
+import {
+	fetchCampaignBySlug,
+	fetchKeyPlatforms,
+	fetchKeyRegions,
+	requestKey,
+} 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 keyId = Number(route.query.keyId)
+
+// Redirect away if no keyId
+if (!keyId) {
+	navigateTo(`/${locale.value}/key-campaigns`)
+}
+
+const campaign = ref<any>(null)
+const platforms = ref<any[]>([])
+const regions = ref<any[]>([])
+const loading = ref(true)
+const submitting = ref(false)
+const error = ref("")
+const success = ref(false)
+const requestError = ref("")
+
+const selectedPlatformId = ref<number | null>(null)
+const selectedRegionId = ref<number | null>(null)
+const description = ref("")
+
+onMounted(async () => {
+	if (!currentUser) {
+		const returnTo = typeof window !== "undefined" ? window.location.href : ""
+		navigateTo(`${loginUrl}?redirect_to=${encodeURIComponent(returnTo)}`, { external: true })
+		return
+	}
+	try {
+		const [campaignRes, platformsRes, regionsRes] = await Promise.all([
+			fetchCampaignBySlug(String(keyId)),
+			fetchKeyPlatforms(keyId),
+			fetchKeyRegions(keyId),
+		])
+		campaign.value = campaignRes?.data?.data || campaignRes?.data || null
+		platforms.value = platformsRes?.data?.data || platformsRes?.data || []
+		regions.value = regionsRes?.data?.data || regionsRes?.data || []
+
+		// Pre-select if only one option
+		if (platforms.value.length === 1) selectedPlatformId.value = platforms.value[0].id
+		if (regions.value.length === 1) selectedRegionId.value = regions.value[0].id
+	} catch {
+		error.value = $i18n.t("keys.campaigns.error_loading")
+	} finally {
+		loading.value = false
+	}
+})
+
+const canSubmit = computed(() =>
+	!!selectedPlatformId.value && !!selectedRegionId.value && !submitting.value,
+)
+
+async function submit() {
+	if (!canSubmit.value) return
+	submitting.value = true
+	requestError.value = ""
+	try {
+		await requestKey({
+			key_id: keyId,
+			platform_ids: [selectedPlatformId.value],
+			region_ids: [selectedRegionId.value],
+			description: description.value || "-",
+			quantity_keys: 1,
+		})
+		success.value = true
+		setTimeout(() => {
+			navigateTo(`/${locale.value}/key-campaigns`)
+		}, 2000)
+	} catch (e: any) {
+		const msg = e?.response?.data?.message || e?.message || ""
+		requestError.value = msg || $i18n.t("keys.campaigns.error_request")
+	} finally {
+		submitting.value = false
+	}
+}
+
+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">
+		<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 3" :key="i" />
+			</div>
+
+			<div v-else-if="error" class="state error">{{ error }}</div>
+
+			<div v-else-if="success" class="state success">
+				<MGIcon icon="check-circle" size="3x" />
+				<p>{{ $t("keys.campaigns.request_sent") }}</p>
+			</div>
+
+			<div v-else class="form-content">
+				<div class="title-bar">
+					<h3>{{ $t("keys.campaigns.redeem_title") }}</h3>
+					<p v-if="campaign?.name" class="campaign-name">{{ campaign.name }}</p>
+				</div>
+
+				<form class="form" @submit.prevent="submit">
+					<!-- Platform -->
+					<div class="field">
+						<label class="label">{{ $t("keys.campaigns.platform") }}</label>
+						<div class="options">
+							<button
+								v-for="p in platforms"
+								:key="p.id"
+								type="button"
+								class="option"
+								:class="{ selected: selectedPlatformId === p.id }"
+								@click="selectedPlatformId = p.id"
+							>
+								{{ p.name }}
+							</button>
+						</div>
+					</div>
+
+					<!-- Region -->
+					<div class="field">
+						<label class="label">{{ $t("keys.campaigns.region") }}</label>
+						<div class="options">
+							<button
+								v-for="r in regions"
+								:key="r.id"
+								type="button"
+								class="option"
+								:class="{ selected: selectedRegionId === r.id }"
+								@click="selectedRegionId = r.id"
+							>
+								{{ r.name }}
+							</button>
+						</div>
+					</div>
+
+					<!-- Description (optional) -->
+					<div class="field">
+						<label class="label">{{ $t("keys.campaigns.description_optional") }}</label>
+						<textarea
+							v-model="description"
+							class="textarea"
+							:placeholder="$t('keys.campaigns.description_placeholder')"
+							rows="3"
+						/>
+					</div>
+
+					<div v-if="requestError" class="req-error">{{ requestError }}</div>
+
+					<button
+						type="submit"
+						class="btn"
+						:class="{ disabled: !canSubmit }"
+						:disabled="!canSubmit"
+					>
+						<span v-if="submitting">{{ $t("keys.campaigns.sending") }}</span>
+						<span v-else>{{ $t("keys.campaigns.campaign.redeem") }}</span>
+					</button>
+				</form>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+#shared-redeem-key {
+	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: #ff4800; }
+		&.success { color: #4caf50; font-size: 16px; }
+	}
+
+	.skeleton {
+		width: 100%;
+		height: 48px;
+		background: var(--bg-app-badge);
+		animation: pulse 1.4s ease-in-out infinite;
+		& + & { margin-top: 8px; }
+	}
+
+	.title-bar {
+		margin-bottom: 28px;
+		h3 { font-size: 20px; font-weight: 700; color: var(--card-article-title); margin: 0 0 6px; }
+		.campaign-name { font-size: 13px; color: var(--secondary-info-fg); margin: 0; }
+	}
+
+	.form { display: flex; flex-direction: column; gap: 24px; }
+
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.label {
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--card-article-title);
+	}
+
+	.options {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	.option {
+		padding: 8px 16px;
+		font-size: 13px;
+		font-weight: 500;
+		border: 1px solid var(--button-secondary-default-bg);
+		background: transparent;
+		color: var(--secondary-info-fg);
+		cursor: pointer;
+		transition: border-color 0.15s, color 0.15s;
+
+		&:hover { border-color: var(--key-accent, var(--primary, #D297FF)); color: var(--card-article-title); }
+		&.selected {
+			border-color: var(--key-accent, var(--primary, #D297FF));
+			color: var(--key-accent, var(--primary, #D297FF));
+			background: rgba(210, 151, 255, 0.08);
+		}
+	}
+
+	.textarea {
+		width: 100%;
+		background: var(--bg-app-badge);
+		border: 1px solid var(--button-secondary-default-bg);
+		color: var(--card-article-title);
+		font-size: 13px;
+		padding: 10px 12px;
+		resize: vertical;
+		outline: none;
+		font-family: inherit;
+		&:focus { border-color: var(--key-accent, var(--primary, #D297FF)); }
+	}
+
+	.req-error {
+		font-size: 13px;
+		color: #ff4800;
+	}
+
+	.btn {
+		align-self: flex-start;
+		padding: 0 28px;
+		height: 44px;
+		font-size: 14px;
+		font-weight: 700;
+		background: 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>

package/pages/presskit/game/[slug].vue

@@ -181,7 +181,6 @@ useSeoMeta({
 					<img v-if="kit.cover_image_url" class="kit-cover-poster" :src="kit.cover_image_url" :alt="kit.name" />
 					<div class="kit-cover-text">
 						<span v-if="kit.release_status" class="kit-eyebrow">{{ String(kit.release_status).replace(/_/g, ' ') }}</span>
-						<img v-if="kit.logo_url" class="kit-cover-logo-img" :src="kit.logo_url" :alt="kit.name" />
 						<h1 class="kit-cover-title">{{ kit.name }}</h1>
 						<p v-if="kit.tagline" class="kit-tagline">{{ kit.tagline }}</p>
 						<p v-if="kit.developer" class="kit-kicker">{{ kit.developer }}</p>

package/plugins/auth.client.ts

@@ -1,9 +1,15 @@
 export default defineNuxtPlugin({
 	name: "shared-ui-auth",
-	enforce: "pre",
-	async setup() {
+	async setup(nuxtApp) {
 		try {
-			const authStore = useAuthStore();
+			// Pinia must be installed first. Resolve it from nuxtApp and bail out
+			// if it isn't ready yet (mirrors middleware/auth.global.ts). Running
+			// with enforce:"pre" used to execute this before @pinia/nuxt, so
+			// useAuthStore() hit an undefined pinia (`reading '_s'`).
+			const pinia = (nuxtApp as any).$pinia;
+			if (!pinia) return;
+
+			const authStore = useAuthStore(pinia);
 
 			if (!authStore.signedIn) {
 				await authStore.getUser();

package/services/campaignService.ts

@@ -8,14 +8,21 @@ import axios, { type AxiosInstance } from "axios"
 let _mainClient: AxiosInstance | null = null
 let _authClient: AxiosInstance | null = null
 
+// Strip /api/v1 suffix so service paths (/api/v1/...) don't double up when the
+// env var already contains it (e.g. VITE_BASE_URL_NETWORK=https://host/api/v1).
+function normalizeBaseUrl(url: string): string {
+	return url.replace(/\/api\/v1\/?$/, "")
+}
+
 function getMainClient(): AxiosInstance {
 	if (_mainClient) return _mainClient
 
-	const baseURL =
+	const baseURL = normalizeBaseUrl(
 		import.meta.env.VITE_CAMPAIGN_API_URL ||
 		import.meta.env.VITE_BASE_URL_NETWORK ||
 		import.meta.env.VITE_API_BASE_URL ||
-		""
+		"",
+	)
 
 	_mainClient = axios.create({ baseURL })
 
@@ -41,11 +48,12 @@ function getMainClient(): AxiosInstance {
 function getAuthClient(): AxiosInstance {
 	if (_authClient) return _authClient
 
-	const baseURL =
+	const baseURL = normalizeBaseUrl(
 		import.meta.env.VITE_CAMPAIGN_API_URL ||
 		import.meta.env.VITE_BASE_URL_NETWORK ||
 		import.meta.env.VITE_API_BASE_URL ||
-		""
+		"",
+	)
 
 	_authClient = axios.create({ baseURL, withCredentials: true })