@mundogamernetwork/shared-ui 1.4.2 → 1.5.0

package/components/checkout/MgPaymentMethodSelector.vue

@@ -48,6 +48,7 @@ function gatewayKey(m: { id: number; name: string }): string {
   const n = (m.name ?? "").trim().toLowerCase();
   if (n === "paypal" || m.id === 2) return "paypal";
   if (n === "stripe" || m.id === 3) return "stripe";
+  if (n === "pix" || m.id === 4) return "pix";
   return n;
 }
 
@@ -60,11 +61,12 @@ function getMethodId(m: { id: number; name: string }): number {
   const key = gatewayKey(m);
   if (key === "paypal") return 2;
   if (key === "stripe") return 3;
+  if (key === "pix") return 4;
   return m.id;
 }
 
 function getLabel(m: { id: number; name: string }): string {
-  const labels: Record<string, string> = { paypal: "PayPal", stripe: "Stripe" };
+  const labels: Record<string, string> = { paypal: "PayPal", stripe: "Stripe", pix: "Pix" };
   return labels[gatewayKey(m)] ?? m.name;
 }
 </script>

package/components/keys/KeyBrowser.vue

@@ -149,7 +149,7 @@ function handleRequestKey(pool: KeyPool) {
 
 async function _checkNotifPrompt() {
   try {
-    const res = await httpService.get('/user/notification-preferences', {
+    const res = await httpService.get('/public/user/notification-preferences', {
       params: { category: 'key_campaigns' },
     })
     if (res.data?.data === null) {
@@ -163,7 +163,7 @@ async function _checkNotifPrompt() {
 async function enableNotifAlerts() {
   notifSaving.value = true
   try {
-    await httpService.put('/user/notification-preferences', {
+    await httpService.put('/public/user/notification-preferences', {
       category: 'key_campaigns',
       enabled: true,
       channel_email: true,

package/components/playtest/PlaytestResponseFlow.vue

@@ -39,8 +39,9 @@ import CriterionRow from "./accessibility/CriterionRow.vue";
 import ChecklistItemRow from "./compliance/ChecklistItemRow.vue";
 import SessionCard from "./moderated/SessionCard.vue";
 import JoinCallPanel from "./moderated/JoinCallPanel.vue";
+import VideoPlaytestCapture from "./video/VideoPlaytestCapture.vue";
 
-type PlaytestCategory = "baseline" | "concept_poll" | "localization_qa" | "accessibility_audit" | "compliance" | "moderated";
+type PlaytestCategory = "baseline" | "concept_poll" | "localization_qa" | "accessibility_audit" | "compliance" | "moderated" | "video_playtest";
 
 const props = defineProps<{
 	campaignId: number;
@@ -306,6 +307,11 @@ async function cancelSessionFlow() {
 					</button>
 				</div>
 
+				<!-- ── Video Playtest ── -->
+				<div v-else-if="category === 'video_playtest'">
+					<VideoPlaytestCapture :campaign-id="campaignId" @submitted="handleDone" />
+				</div>
+
 				<!-- ── Moderated ── -->
 				<div v-else-if="category === 'moderated'">
 					<JoinCallPanel

package/components/playtest/access-grant/AccessGrantPanel.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+// Single orchestrator for an accepted response's game-access grant — the
+// component both agency-frontend (mirrored /testing section) and
+// community-frontend (My Tests) actually mount, one per accepted response.
+// Mirrors PlaytestResponseFlow.vue's role for the submission side: owns the
+// composable instance, dispatches to AccessGrantWaiver (not yet signed) or
+// AccessGrantReveal (signed), and renders nothing if the response has no
+// configured access grant.
+import { onMounted } from "vue";
+import { usePlaytestAccessGrant } from "../../../composables/usePlaytestAccessGrant";
+import AccessGrantWaiver from "./AccessGrantWaiver.vue";
+import AccessGrantReveal from "./AccessGrantReveal.vue";
+
+const props = defineProps<{
+	responseId: number;
+}>();
+
+const grantState = usePlaytestAccessGrant(props.responseId);
+
+onMounted(() => {
+	grantState.loadAccessGrant();
+});
+
+function sendCode() {
+	grantState.initiateWaiver();
+}
+
+function verifyCode(otpCode: string) {
+	grantState.verifyWaiver(otpCode);
+}
+</script>
+
+<template>
+	<div v-if="grantState.loading.value" class="access-grant-panel access-grant-panel--loading">
+		<div class="access-grant-panel__skeleton" />
+	</div>
+
+	<div v-else-if="grantState.grant.value" class="access-grant-panel">
+		<AccessGrantWaiver
+			v-if="!grantState.grant.value.revealed"
+			:submitting="grantState.submitting.value"
+			:waiver-initiated="grantState.waiverInitiated.value"
+			:error="grantState.genericError.value"
+			@send-code="sendCode"
+			@verify="verifyCode"
+		/>
+		<AccessGrantReveal
+			v-else
+			:access-type="grantState.grant.value.access_type"
+			:key-code="grantState.grant.value.key_code"
+			:external-link="grantState.grant.value.external_link"
+		/>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.access-grant-panel {
+	padding: 16px;
+	background: var(--bg-app-badge);
+	border: 1px solid var(--button-secondary-default-bg);
+
+	&--loading {
+		padding: 0;
+		border: none;
+		background: none;
+	}
+
+	&__skeleton {
+		width: 100%;
+		height: 64px;
+		background: var(--bg-app-badge);
+		animation: access-grant-panel-pulse 1.4s ease-in-out infinite;
+	}
+}
+
+@keyframes access-grant-panel-pulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.4; }
+}
+</style>

package/components/playtest/access-grant/AccessGrantReveal.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+// Masked-reveal-then-copy for a signed access grant. Unlike the key-campaigns
+// redeem flow, the real value already arrived in the API response the moment
+// the waiver was verified — "reveal" here is a deliberate client-side
+// unmask, not a second network round-trip. Mirrors
+// pages/key-campaigns/redeem-key-approved.vue's code-box UI.
+import { ref } from "vue";
+
+const props = defineProps<{
+	accessType: "key" | "link";
+	keyCode?: string | null;
+	externalLink?: string | null;
+}>();
+
+const unmasked = ref(false);
+const copied = ref(false);
+
+const value = props.accessType === "key" ? (props.keyCode ?? "") : (props.externalLink ?? "");
+
+async function copyValue() {
+	if (!value) return;
+	try {
+		await navigator.clipboard.writeText(value);
+		copied.value = true;
+		setTimeout(() => { copied.value = false; }, 2000);
+	} catch {
+		// clipboard API unavailable — the value is still selectable in the input
+	}
+}
+</script>
+
+<template>
+	<div class="access-grant-reveal">
+		<h3 class="access-grant-reveal__title">
+			{{ accessType === "key"
+				? $t("playtest.access_grant.your_key", "Your game key")
+				: $t("playtest.access_grant.your_link", "Your download link") }}
+		</h3>
+
+		<div class="access-grant-reveal__box">
+			<input
+				v-if="!unmasked"
+				type="text"
+				value="••••••••••••••••"
+				readonly
+				class="access-grant-reveal__input access-grant-reveal__input--masked"
+			/>
+			<input
+				v-else
+				type="text"
+				:value="value"
+				readonly
+				class="access-grant-reveal__input"
+			/>
+
+			<button
+				v-if="!unmasked"
+				type="button"
+				class="btn primary"
+				@click="unmasked = true"
+			>
+				{{ $t("playtest.access_grant.reveal", "Reveal") }}
+			</button>
+			<button
+				v-else
+				type="button"
+				class="btn primary"
+				@click="copyValue"
+			>
+				<MGIcon :icon="copied ? 'check' : 'copy'" size="1x" />
+				{{ copied ? $t("playtest.access_grant.copied", "Copied") : $t("playtest.access_grant.copy", "Copy") }}
+			</button>
+		</div>
+
+		<a
+			v-if="unmasked && accessType === 'link'"
+			:href="value"
+			target="_blank"
+			rel="noopener"
+			class="access-grant-reveal__open-link"
+		>
+			{{ $t("playtest.access_grant.open_link", "Open link") }}
+		</a>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.access-grant-reveal {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+
+	&__title {
+		font-size: 15px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0;
+	}
+
+	&__box {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__input {
+		display: flex;
+		padding: 12px;
+		background-color: transparent;
+		height: 44px;
+		border: 1px solid var(--bg-app-badge);
+		width: 100%;
+		font-size: 14px;
+		color: var(--card-article-title, #fff);
+
+		&--masked {
+			letter-spacing: 3px;
+			color: rgba(128, 128, 128, 0.5);
+		}
+	}
+
+	&__open-link {
+		align-self: flex-start;
+		font-size: 12px;
+		color: var(--primary, #d297ff);
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+</style>

package/components/playtest/access-grant/AccessGrantWaiver.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+// Liability-waiver signing step, gating an accepted response's game-access
+// grant. Two-step UI: request the OTP code (sent to the tester's account
+// email via the shared Documents module), then submit it. Purely
+// presentational — AccessGrantPanel.vue owns the actual API calls.
+import { ref } from "vue";
+
+defineProps<{
+	submitting: boolean;
+	waiverInitiated: boolean;
+	error?: string | null;
+}>();
+
+const emit = defineEmits<{
+	(e: "send-code"): void;
+	(e: "verify", otpCode: string): void;
+}>();
+
+const otpCode = ref("");
+
+function submitCode() {
+	if (!otpCode.value) return;
+	emit("verify", otpCode.value);
+}
+</script>
+
+<template>
+	<div class="access-grant-waiver">
+		<h3 class="access-grant-waiver__title">
+			{{ $t("playtest.access_grant.waiver_title", "Sign the liability waiver to unlock your game access") }}
+		</h3>
+		<p class="access-grant-waiver__body">
+			{{ $t(
+				"playtest.access_grant.waiver_body",
+				"The studio requires you to accept a liability waiver before revealing your key or download link. We'll send a verification code to your account email to confirm it's really you."
+			) }}
+		</p>
+
+		<p v-if="error" class="access-grant-waiver__error">{{ error }}</p>
+
+		<div v-if="!waiverInitiated" class="access-grant-waiver__actions">
+			<button
+				type="button"
+				class="btn primary"
+				:disabled="submitting"
+				@click="emit('send-code')"
+			>
+				{{ submitting
+					? $t("playtest.access_grant.sending_code", "Sending code…")
+					: $t("playtest.access_grant.send_code", "Send verification code") }}
+			</button>
+		</div>
+
+		<div v-else class="access-grant-waiver__otp">
+			<label class="access-grant-waiver__label" for="access-grant-otp">
+				{{ $t("playtest.access_grant.enter_code", "Enter the 6-digit code we emailed you") }}
+			</label>
+			<div class="access-grant-waiver__otp-row">
+				<input
+					id="access-grant-otp"
+					v-model="otpCode"
+					type="text"
+					inputmode="numeric"
+					maxlength="6"
+					class="access-grant-waiver__otp-input"
+					:disabled="submitting"
+					@keyup.enter="submitCode"
+				/>
+				<button
+					type="button"
+					class="btn primary"
+					:disabled="submitting || otpCode.length === 0"
+					@click="submitCode"
+				>
+					{{ submitting
+						? $t("playtest.access_grant.verifying", "Verifying…")
+						: $t("playtest.access_grant.verify", "Verify") }}
+				</button>
+			</div>
+			<button
+				type="button"
+				class="access-grant-waiver__resend"
+				:disabled="submitting"
+				@click="emit('send-code')"
+			>
+				{{ $t("playtest.access_grant.resend_code", "Resend code") }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.access-grant-waiver {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	&__title {
+		font-size: 15px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0;
+	}
+
+	&__body {
+		font-size: 13px;
+		color: var(--secondary-info-fg, #aaa);
+		margin: 0;
+	}
+
+	&__error {
+		font-size: 12px;
+		color: var(--danger, #e53935);
+		margin: 0;
+	}
+
+	&__actions {
+		display: flex;
+	}
+
+	&__otp {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__label {
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+	}
+
+	&__otp-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__otp-input {
+		width: 140px;
+		height: 44px;
+		padding: 0 12px;
+		background-color: transparent;
+		border: 1px solid var(--bg-app-badge);
+		color: var(--card-article-title, #fff);
+		font-size: 18px;
+		letter-spacing: 4px;
+		text-align: center;
+
+		&:focus {
+			border-color: var(--primary, #d297ff);
+			outline: 0;
+		}
+	}
+
+	&__resend {
+		align-self: flex-start;
+		background: none;
+		border: none;
+		padding: 0;
+		font-size: 12px;
+		color: var(--primary, #d297ff);
+		cursor: pointer;
+
+		&:disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+		}
+	}
+}
+</style>

package/components/playtest/video/RecordedSessionPlayer.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+// Playback + clickable marker timeline for a Video Playtest recording.
+// Native <video> — plays HLS natively in Safari; other browsers need an
+// hls.js integration this first version doesn't include (documented
+// limitation, not silently broken: shows a note when playback fails).
+import { ref } from "vue";
+
+const props = defineProps<{
+	playbackUrl: string | null;
+	durationSeconds: number | null;
+	markers: { id: number; timestamp_seconds: number; comment: string; severity?: string | null }[];
+}>();
+
+const videoEl = ref<HTMLVideoElement | null>(null);
+const playbackError = ref(false);
+
+function seekTo(seconds: number) {
+	if (videoEl.value) {
+		videoEl.value.currentTime = seconds;
+		videoEl.value.play();
+	}
+}
+
+function markerPosition(seconds: number): string {
+	if (!props.durationSeconds) return "0%";
+	return `${Math.min(100, (seconds / props.durationSeconds) * 100)}%`;
+}
+
+function formatSeconds(s: number): string {
+	const m = Math.floor(s / 60);
+	const sec = s % 60;
+	return `${m}:${sec.toString().padStart(2, "0")}`;
+}
+
+function severityClass(severity?: string | null): string {
+	return severity ? `recorded-session-player__marker--${severity}` : "";
+}
+</script>
+
+<template>
+	<div class="recorded-session-player">
+		<div v-if="!playbackUrl" class="recorded-session-player__pending">
+			{{ $t("playtest.video_player.processing", "Recording is still processing — check back shortly.") }}
+		</div>
+
+		<template v-else>
+			<video
+				ref="videoEl"
+				:src="playbackUrl"
+				controls
+				class="recorded-session-player__video"
+				@error="playbackError = true"
+			/>
+			<p v-if="playbackError" class="recorded-session-player__playback-error">
+				{{ $t("playtest.video_player.playback_error", "This browser can't play the recording directly — try Safari, or open the file link below.") }}
+				<a :href="playbackUrl" target="_blank" rel="noopener">{{ $t("playtest.video_player.open_direct", "Open recording") }}</a>
+			</p>
+
+			<div v-if="durationSeconds" class="recorded-session-player__timeline">
+				<button
+					v-for="marker in markers"
+					:key="marker.id"
+					type="button"
+					class="recorded-session-player__marker"
+					:class="severityClass(marker.severity)"
+					:style="{ left: markerPosition(marker.timestamp_seconds) }"
+					:title="`${formatSeconds(marker.timestamp_seconds)} — ${marker.comment}`"
+					@click="seekTo(marker.timestamp_seconds)"
+				/>
+			</div>
+		</template>
+
+		<ul v-if="markers.length" class="recorded-session-player__marker-list">
+			<li v-for="marker in markers" :key="marker.id">
+				<button type="button" class="recorded-session-player__marker-jump" @click="seekTo(marker.timestamp_seconds)">
+					{{ formatSeconds(marker.timestamp_seconds) }}
+				</button>
+				<span :class="severityClass(marker.severity)">{{ marker.comment }}</span>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.recorded-session-player {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+
+	&__pending {
+		padding: 24px;
+		text-align: center;
+		font-size: 13px;
+		color: var(--secondary-info-fg, #aaa);
+		background: var(--bg-app-badge);
+	}
+
+	&__video {
+		width: 100%;
+		background: #000;
+	}
+
+	&__playback-error {
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+
+		a {
+			color: var(--primary, #d297ff);
+		}
+	}
+
+	&__timeline {
+		position: relative;
+		height: 16px;
+		background: var(--bg-app-badge);
+	}
+
+	&__marker {
+		position: absolute;
+		top: 2px;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background: var(--primary, #d297ff);
+		border: none;
+		cursor: pointer;
+		transform: translateX(-50%);
+
+		&--blocker { background: var(--danger, #e53935); }
+		&--major { background: #f39c12; }
+		&--minor { background: #95a5a6; }
+		&--note { background: var(--primary, #d297ff); }
+	}
+
+	&__marker-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		font-size: 12px;
+
+		li {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			color: var(--secondary-info-fg, #aaa);
+		}
+	}
+
+	&__marker-jump {
+		background: var(--bg-app-badge);
+		border: none;
+		color: var(--primary, #d297ff);
+		font-weight: 700;
+		padding: 2px 8px;
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+}
+</style>