@mundogamernetwork/shared-ui 1.4.1 → 1.5.0

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

@@ -8,6 +8,7 @@ import {
 	fetchKeyRegions,
 	fetchAvailableOptions,
 	requestKey,
+	enableKeyCampaignNotifications,
 } from "../../services/campaignService"
 
 const route = useRoute()
@@ -37,6 +38,7 @@ const selectedPlatformId = ref<number | null>(null)
 const selectedRegionId = ref<number | null>(null)
 const description = ref("")
 const quantity = ref<number | null>(1)
+const notifyKeyCampaigns = ref(true)
 
 const maxKeysForUser = computed(() => campaign.value?.max_keys_for_user ?? 1)
 
@@ -137,6 +139,12 @@ async function submit() {
 			quantity_keys: Number(quantity.value) || 1,
 		})
 		const created = response?.data?.data ?? response?.data ?? {}
+
+		if (notifyKeyCampaigns.value) {
+			// Fire-and-forget — never block the request/reveal flow on this.
+			enableKeyCampaignNotifications().catch(() => {})
+		}
+
 		// requires_approval=false campaigns (or Pro/Business TV subscribers) get
 		// auto-approved by the backend observer synchronously — status 3 already
 		// reflects that by the time this response comes back, so skip the
@@ -281,6 +289,13 @@ function goBack() {
 									rows="3"
 								/>
 							</div>
+
+							<div class="form-row form-row--checkbox">
+								<label class="checkbox-label">
+									<input type="checkbox" v-model="notifyKeyCampaigns" />
+									{{ $t("keys.campaigns.notify_opt_in") }}
+								</label>
+							</div>
 						</div>
 					</div>
 
@@ -445,6 +460,27 @@ function goBack() {
 		color: var(--card-article-title);
 	}
 
+	.form-row--checkbox {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		color: var(--card-article-title);
+		cursor: pointer;
+
+		input[type="checkbox"] {
+			width: 16px;
+			height: 16px;
+			accent-color: var(--key-accent, var(--primary, #D297FF));
+			cursor: pointer;
+		}
+	}
+
 	.select, .input, .textarea {
 		width: 100%;
 		background-color: transparent;

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>

package/services/campaignService.ts

@@ -421,6 +421,20 @@ export const revealKey = (requestId: number) => {
 	return authClient.get(`/public/key-requests/${requestId}/reveal`)
 }
 
+/**
+ * Explicit opt-in to key campaign alerts — same endpoint used by
+ * KeyBrowser.vue's notification prompt (GET/PUT /public/user/notification-preferences).
+ */
+export const enableKeyCampaignNotifications = () => {
+	return authClient.put("/public/user/notification-preferences", {
+		category: "key_campaigns",
+		enabled: true,
+		channel_email: true,
+		channel_push: true,
+		channel_in_app: true,
+	})
+}
+
 /**
  * Fetch required actions for a campaign.
  */

package/services/playtestTesterService.ts

@@ -63,6 +63,8 @@ export interface SubmitBaselineResponsePayload {
   time_on_task_seconds?: number
   device?: string
   os?: string
+  // Video Playtest only — id of a ready PlaytestRecording (see requestRecordingUploadUrl()).
+  recording_id?: number
 }
 
 export interface PlaytestResponse {
@@ -414,3 +416,64 @@ export const fetchMyPlaytestResponses = (status?: 'submitted' | 'accepted' | 're
   httpService.get<PaginatedResponse<PlaytestResponse>>('/playtest/my-responses', {
     params: { status, per_page: perPage, page },
   })
+
+// ---------------------------------------------------------------------------
+// Game access delivery + liability waiver (accepted responses only)
+// ---------------------------------------------------------------------------
+
+export interface PlaytestAccessGrant {
+  id: number
+  access_type: 'key' | 'link'
+  revealed: boolean
+  revealed_at: string | null
+  key_code?: string
+  external_link?: string
+}
+
+/** Null when the response was accepted without a configured access grant. */
+export const fetchAccessGrant = (responseId: number) =>
+  httpService.get<{ data: PlaytestAccessGrant | null }>(`/playtest/responses/${responseId}/access-grant`)
+
+/** Sends (or resends) the liability-waiver OTP to the tester's account email. */
+export const initiateAccessGrantWaiver = (responseId: number) =>
+  httpService.post<{ data: { document_id: number; status: string } }>(`/playtest/responses/${responseId}/waiver/initiate`)
+
+/** Verifies the OTP code; on success the response includes the revealed key/link. */
+export const verifyAccessGrantWaiver = (responseId: number, otpCode: string) =>
+  httpService.post<{ data: PlaytestAccessGrant }>(`/playtest/responses/${responseId}/waiver/verify`, { otp_code: otpCode })
+
+// ---------------------------------------------------------------------------
+// Video Playtest — recording upload + timestamped markers ("minutagem")
+// ---------------------------------------------------------------------------
+
+export interface PlaytestRecording {
+  id: number
+  status: 'uploading' | 'processing' | 'ready' | 'failed'
+  duration_seconds: number | null
+  playback_url: string | null
+  external_id: string
+  markers?: PlaytestRecordingMarker[]
+}
+
+export interface PlaytestRecordingMarker {
+  id: number
+  timestamp_seconds: number
+  comment: string
+  severity: 'blocker' | 'major' | 'minor' | 'note' | null
+  created_by_user_id: number
+}
+
+/** Requests a direct-upload URL from the video provider — the browser uploads straight to it, never through this API. */
+export const requestRecordingUploadUrl = (campaignId: number) =>
+  httpService.post<{ data: { recording_id: number; upload_url: string } }>(
+    `/playtest/campaigns/${campaignId}/recording/upload-url`,
+  )
+
+/** Poll this until status === 'ready' (set by the provider's webhook once processing finishes). */
+export const fetchRecording = (responseId: number) =>
+  httpService.get<{ data: PlaytestRecording | null }>(`/playtest/responses/${responseId}/recording`)
+
+export const storeRecordingMarker = (
+  responseId: number,
+  payload: { timestamp_seconds: number; comment: string; severity?: 'blocker' | 'major' | 'minor' | 'note' },
+) => httpService.post<{ data: PlaytestRecordingMarker }>(`/playtest/responses/${responseId}/recording/markers`, payload)