@mundogamernetwork/shared-ui 1.4.1 → 1.4.2

package/assets/kit/kit-base.css

@@ -890,6 +890,94 @@ body:has(.kit-press) {
 	margin-top: 32px;
 }
 
+/* ── Press Kit's own key request flow (separate from the KeyBrowser
+   ecosystem widget) — auth wall, status states, and the request form. ── */
+.kit-keys-mode-note {
+	font-size: 0.78rem;
+	color: var(--kit-muted, #8b92a0);
+	margin: -8px 0 0;
+}
+.kit-keys-loading {
+	height: 80px;
+	background: var(--kit-card, #1a1e27);
+	animation: kit-pulse 1.5s ease-in-out infinite;
+}
+@keyframes kit-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.kit-keys-authwall,
+.kit-keys-status {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 20px;
+	background: var(--kit-card, #1a1e27);
+	border: 1px solid var(--kit-line, #252a34);
+}
+.kit-keys-status p { margin: 0; color: var(--kit-text, #f4f6fa); font-size: 0.9rem; }
+.kit-keys-status.status-rejected p { color: var(--kit-muted, #8b92a0); }
+.kit-keys-code {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+.kit-keys-code code {
+	padding: 10px 16px;
+	background: var(--kit-bg, #13161c);
+	border: 1px dashed var(--kit-accent, #FDB215);
+	color: var(--kit-accent, #FDB215);
+	font-size: 0.95rem;
+	letter-spacing: 1px;
+}
+.kit-keys-form {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+.kit-keys-row {
+	display: flex;
+	gap: 14px;
+	flex-wrap: wrap;
+}
+.kit-keys-field {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	flex: 1;
+	min-width: 160px;
+}
+.kit-keys-field label {
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	color: var(--kit-muted, #8b92a0);
+}
+.kit-keys-field select,
+.kit-keys-field textarea {
+	background: var(--kit-card, #1a1e27);
+	border: 1px solid var(--kit-line, #252a34);
+	color: var(--kit-text, #f4f6fa);
+	padding: 10px 12px;
+	font-size: 0.9rem;
+	font-family: inherit;
+	resize: vertical;
+}
+.kit-keys-field select:focus,
+.kit-keys-field textarea:focus {
+	outline: none;
+	border-color: var(--kit-accent, #FDB215);
+}
+.kit-keys-hint {
+	font-size: 0.75rem;
+	color: var(--kit-muted, #8b92a0);
+}
+.kit-keys-error {
+	font-size: 0.82rem;
+	color: #e74c3c;
+}
+.kit-keys-form .kit-btn {
+	align-self: flex-start;
+}
+
 /* ── Responsive ─────────────────────────────────────────────────────*/
 @media (max-width: 900px) {
 	.kit-layout {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { trackPressKitEvent } from '../../../services/pressKitService';
+import { mgApiUrl } from '../../../services/httpService';
 
 definePageMeta({ layout: 'blank' });
 
 const route = useRoute();
 const slug = route.params.slug as string;
+const { t } = useI18n();
 
 const runtimeConfig = useRuntimeConfig();
 const cfg = (runtimeConfig.public?.mgSharedUi || {}) as Record<string, any>;
@@ -93,6 +95,80 @@ function onPoolsReady(count: number) {
 	keyPoolsVisible.value = count > 0;
 }
 
+// ── Press Kit's own key request flow ────────────────────────────────────────
+// Deliberately separate from the KeyBrowser widget above (that's the
+// ecosystem-wide Key Campaigns product). This talks to the Press-Kit-specific
+// pool/request endpoints and respects the studio's own `keys_public` setting
+// (instant auto-delivery vs. manual review, configured in the dashboard).
+const KEY_REQUEST_PLATFORMS = ['steam', 'epic', 'gog', 'xbox', 'psn', 'other'];
+const KEY_REQUEST_REGIONS = ['worldwide', 'NA', 'EU', 'BR', 'LATAM', 'APAC', 'other'];
+
+const requestForm = ref({ platform: 'steam', region: 'worldwide', objectives: '' });
+const myKeyRequest = ref<any>(null);
+const keyRequestLoaded = ref(false);
+const keyRequestAuthed = ref(true);
+const keyRequestSubmitting = ref(false);
+const keyRequestError = ref('');
+const keyCopied = ref(false);
+
+const showOwnKeySection = computed(() => !!kit.value?.has_available_keys || !!myKeyRequest.value);
+
+async function loadMyKeyRequest() {
+	try {
+		const res: any = await $fetch(`${apiBase}/public/press-kits/${slug}/my-request`, { credentials: 'include' });
+		myKeyRequest.value = res?.data || null;
+	} catch (err: any) {
+		if (err?.statusCode === 401 || err?.response?.status === 401) keyRequestAuthed.value = false;
+	} finally {
+		keyRequestLoaded.value = true;
+	}
+}
+
+function redirectToKeyLogin() {
+	window.location.href = mgApiUrl('login') + '?redirect_to=' + encodeURIComponent(window.location.href);
+}
+
+async function submitOwnKeyRequest() {
+	if (!keyRequestAuthed.value) {
+		redirectToKeyLogin();
+		return;
+	}
+	keyRequestError.value = '';
+	keyRequestSubmitting.value = true;
+	try {
+		await $fetch(`${apiBase}/public/press-kits/${slug}/request-key`, {
+			method: 'POST',
+			credentials: 'include',
+			body: {
+				platform: requestForm.value.platform,
+				region: requestForm.value.region,
+				objectives: requestForm.value.objectives,
+			},
+		});
+		await loadMyKeyRequest();
+	} catch (err: any) {
+		if (err?.statusCode === 401 || err?.response?.status === 401) {
+			keyRequestAuthed.value = false;
+		} else {
+			keyRequestError.value = err?.data?.message || t('kit.press.request_own_key_error');
+		}
+	} finally {
+		keyRequestSubmitting.value = false;
+	}
+}
+
+async function copyKeyCode(code: string) {
+	try {
+		await navigator.clipboard.writeText(code);
+		keyCopied.value = true;
+		setTimeout(() => { keyCopied.value = false; }, 2000);
+	} catch {}
+}
+
+onMounted(() => {
+	if (kit.value?.id) loadMyKeyRequest();
+});
+
 // Scroll state for sticky CTA + back-to-top
 const scrolled = ref(false);
 let heroHeight = 0;
@@ -426,6 +502,76 @@ useHead(() => ({
 							/>
 						</section>
 
+						<!-- Press Kit's own key request flow — separate product from the
+						     KeyBrowser ecosystem widget above. Respects the studio's own
+						     keys_public setting (instant auto-delivery vs. manual review). -->
+						<section v-if="showOwnKeySection" id="request-key" class="kit-block kit-keys-section">
+							<h2 class="kit-keys-title">{{ $t('kit.press.request_own_key_title') }}</h2>
+							<p class="kit-keys-desc">{{ $t('kit.press.request_own_key_desc') }}</p>
+							<p class="kit-keys-mode-note">
+								{{ kit.keys_public ? $t('kit.press.request_own_key_public_note') : $t('kit.press.request_own_key_moderated_note') }}
+							</p>
+
+							<div v-if="!keyRequestLoaded" class="kit-keys-loading" />
+
+							<template v-else>
+								<div v-if="!keyRequestAuthed && !myKeyRequest" class="kit-keys-authwall">
+									<p>{{ $t('kit.press.request_own_key_login_required') }}</p>
+									<button type="button" class="kit-btn kit-btn-primary" @click="redirectToKeyLogin">
+										{{ $t('kit.press.request_own_key_login_btn') }}
+									</button>
+								</div>
+
+								<div v-else-if="myKeyRequest" class="kit-keys-status" :class="`status-${myKeyRequest.status}`">
+									<p v-if="myKeyRequest.status === 'pending'">{{ $t('kit.press.request_own_key_status_pending') }}</p>
+									<template v-else-if="myKeyRequest.status === 'approved'">
+										<p>{{ $t('kit.press.request_own_key_status_approved') }}</p>
+										<div class="kit-keys-code">
+											<code>{{ myKeyRequest.key }}</code>
+											<button type="button" class="kit-btn kit-btn-ghost kit-btn-sm" @click="copyKeyCode(myKeyRequest.key)">
+												{{ keyCopied ? $t('kit.press.request_own_key_copied') : $t('kit.press.request_own_key_copy') }}
+											</button>
+										</div>
+									</template>
+									<p v-else-if="myKeyRequest.status === 'rejected'">{{ $t('kit.press.request_own_key_status_rejected') }}</p>
+								</div>
+
+								<form v-else class="kit-keys-form" @submit.prevent="submitOwnKeyRequest">
+									<div class="kit-keys-row">
+										<div class="kit-keys-field">
+											<label>{{ $t('kit.press.request_own_key_platform') }}</label>
+											<select v-model="requestForm.platform">
+												<option v-for="p in KEY_REQUEST_PLATFORMS" :key="p" :value="p">{{ p }}</option>
+											</select>
+										</div>
+										<div class="kit-keys-field">
+											<label>{{ $t('kit.press.request_own_key_region') }}</label>
+											<select v-model="requestForm.region">
+												<option v-for="r in KEY_REQUEST_REGIONS" :key="r" :value="r">{{ r }}</option>
+											</select>
+										</div>
+									</div>
+									<div class="kit-keys-field">
+										<label>{{ $t('kit.press.request_own_key_objectives') }}</label>
+										<textarea
+											v-model="requestForm.objectives"
+											rows="3"
+											:placeholder="$t('kit.press.request_own_key_objectives_placeholder')"
+										/>
+										<span class="kit-keys-hint">{{ $t('kit.press.request_own_key_objectives_hint') }}</span>
+									</div>
+									<div v-if="keyRequestError" class="kit-keys-error">{{ keyRequestError }}</div>
+									<button
+										type="submit"
+										class="kit-btn kit-btn-primary"
+										:disabled="keyRequestSubmitting || requestForm.objectives.trim().length < 20"
+									>
+										{{ keyRequestSubmitting ? $t('kit.press.request_own_key_submitting') : $t('kit.press.request_own_key_submit') }}
+									</button>
+								</form>
+							</template>
+						</section>
+
 						<section v-if="kit.press_contact_email" id="contact" class="kit-block">
 							<div class="kit-cta">
 								<h2>{{ $t('kit.press.covering', { name: kit.name }) }}</h2>