@mundogamernetwork/shared-ui 1.1.67 → 1.1.69

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: var(--danger, #e53935); }
+		&.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, var(--key-accent, var(--primary, #D297FF)))); color: var(--card-article-title); }
+		&.selected {
+			border-color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
+			color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
+			background: var(--key-accent-subtle-bg, 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, var(--key-accent, var(--primary, #D297FF)))); }
+	}
+
+	.req-error {
+		font-size: 13px;
+		color: var(--danger, #e53935);
+	}
+
+	.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>

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 })