@mundogamernetwork/shared-ui 1.4.2 → 1.6.0

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>

package/components/playtest/video/VideoPlaytestCapture.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+// Tester-facing capture step for the "Video Playtest" category — record,
+// upload, optionally drop timestamped markers, then submit. Mounted by
+// PlaytestResponseFlow.vue as the video_playtest category branch.
+import { ref, computed } from "vue";
+import { usePlaytestVideoRecording } from "../../../composables/usePlaytestVideoRecording";
+
+const props = defineProps<{
+	campaignId: number;
+}>();
+
+const emit = defineEmits<{
+	(e: "submitted"): void;
+}>();
+
+const rec = usePlaytestVideoRecording(props.campaignId);
+
+const markerDraft = ref("");
+const step = computed<"record" | "review" | "upload" | "done">(() => {
+	if (rec.recordedBlob.value && !rec.recordingId.value) return "review";
+	if (rec.recordingId.value) return "upload";
+	return "record";
+});
+
+function addMarker() {
+	if (!markerDraft.value.trim()) return;
+	rec.markNow(markerDraft.value.trim());
+	markerDraft.value = "";
+}
+
+async function submit() {
+	const result = await rec.submitVideoResponse();
+	if (result) emit("submitted");
+}
+
+function formatSeconds(s: number): string {
+	const m = Math.floor(s / 60);
+	const sec = s % 60;
+	return `${m}:${sec.toString().padStart(2, "0")}`;
+}
+</script>
+
+<template>
+	<div class="video-capture">
+		<p v-if="rec.genericError.value" class="video-capture__error">{{ rec.genericError.value }}</p>
+
+		<!-- Record -->
+		<template v-if="step === 'record'">
+			<p class="video-capture__hint">
+				{{ $t("playtest.video_capture.hint", "Record your screen while you play. You can drop timestamped notes as you go.") }}
+			</p>
+
+			<div v-if="!rec.capturing.value" class="video-capture__actions">
+				<button type="button" class="btn primary" @click="rec.startCapture">
+					{{ $t("playtest.video_capture.start", "Start recording") }}
+				</button>
+			</div>
+
+			<div v-else class="video-capture__recording">
+				<span class="video-capture__rec-dot" />
+				{{ $t("playtest.video_capture.recording", "Recording…") }}
+
+				<div class="video-capture__marker-form">
+					<input
+						v-model="markerDraft"
+						type="text"
+						:placeholder="$t('playtest.video_capture.marker_placeholder', 'Note something at this moment…')"
+						@keyup.enter="addMarker"
+					/>
+					<button type="button" class="btn" @click="addMarker">
+						{{ $t("playtest.video_capture.mark", "Mark") }}
+					</button>
+				</div>
+
+				<ul v-if="rec.markers.value.length" class="video-capture__marker-list">
+					<li v-for="(m, i) in rec.markers.value" :key="i">
+						<strong>{{ formatSeconds(m.timestamp_seconds) }}</strong> — {{ m.comment }}
+					</li>
+				</ul>
+
+				<button type="button" class="btn danger" @click="rec.stopCapture">
+					{{ $t("playtest.video_capture.stop", "Stop recording") }}
+				</button>
+			</div>
+		</template>
+
+		<!-- Review before upload -->
+		<template v-else-if="step === 'review'">
+			<p class="video-capture__hint">
+				{{ $t("playtest.video_capture.review_hint", "Recording captured ({v}). Upload it to submit your response.", { v: formatSeconds(rec.recordedDurationSeconds.value) }) }}
+			</p>
+			<button type="button" class="btn primary" :disabled="rec.uploading.value" @click="rec.uploadRecording">
+				{{ rec.uploading.value
+					? $t("playtest.video_capture.uploading", "Uploading… {v}%", { v: rec.uploadProgress.value })
+					: $t("playtest.video_capture.upload", "Upload recording") }}
+			</button>
+		</template>
+
+		<!-- Upload done, waiting on provider processing — submit -->
+		<template v-else-if="step === 'upload'">
+			<p class="video-capture__hint">
+				{{ $t("playtest.video_capture.processing_hint", "Your recording is uploaded and processing. Submit when you're ready — we'll finish confirming it's ready in the background.") }}
+			</p>
+			<button type="button" class="btn primary" :disabled="rec.submitting.value" @click="submit">
+				{{ rec.submitting.value
+					? $t("playtest.video_capture.submitting", "Submitting…")
+					: $t("playtest.video_capture.submit", "Submit response") }}
+			</button>
+		</template>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.video-capture {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	&__hint {
+		font-size: 13px;
+		color: var(--secondary-info-fg, #aaa);
+		margin: 0;
+	}
+
+	&__error {
+		font-size: 12px;
+		color: var(--danger, #e53935);
+		margin: 0;
+	}
+
+	&__actions {
+		display: flex;
+	}
+
+	&__recording {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		align-items: flex-start;
+		font-size: 13px;
+		color: var(--card-article-title, #fff);
+	}
+
+	&__rec-dot {
+		display: inline-block;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: var(--danger, #e53935);
+		margin-right: 6px;
+		animation: video-capture-pulse 1.2s ease-in-out infinite;
+	}
+
+	&__marker-form {
+		display: flex;
+		gap: 8px;
+		width: 100%;
+
+		input {
+			flex: 1;
+			height: 40px;
+			padding: 0 10px;
+			background: transparent;
+			border: 1px solid var(--bg-app-badge);
+			color: var(--card-article-title, #fff);
+			font-size: 13px;
+		}
+	}
+
+	&__marker-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		strong {
+			color: var(--primary, #d297ff);
+		}
+	}
+}
+
+.btn.danger {
+	background: var(--danger, #e53935);
+	color: #fff;
+}
+
+@keyframes video-capture-pulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.3; }
+}
+</style>

package/components/ui/MgPaymentMethods.vue

@@ -119,6 +119,26 @@
 			/>
 		</svg>
 	</div>
+	<div v-if="method === 4">
+		<svg width="52" height="18" viewBox="0 0 52 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M9.5 2.2L11.8 4.5C12.5 5.2 12.5 6.3 11.8 7L9.5 9.3C8.8 10 7.7 10 7 9.3L4.7 7C4 6.3 4 5.2 4.7 4.5L7 2.2C7.7 1.5 8.8 1.5 9.5 2.2Z"
+				:fill="theme === 'dark' ? 'white' : '#32BCAD'"
+			/>
+			<path
+				d="M9.5 8.7L11.8 11C12.5 11.7 12.5 12.8 11.8 13.5L9.5 15.8C8.8 16.5 7.7 16.5 7 15.8L4.7 13.5C4 12.8 4 11.7 4.7 11L7 8.7C7.7 8 8.8 8 9.5 8.7Z"
+				:fill="theme === 'dark' ? 'white' : '#32BCAD'"
+			/>
+			<text
+				x="17"
+				y="13.5"
+				font-family="Arial, Helvetica, sans-serif"
+				font-size="13"
+				font-weight="700"
+				:fill="theme === 'dark' ? 'white' : '#111827'"
+			>Pix</text>
+		</svg>
+	</div>
 </template>
 <script setup lang="ts">
 const props = defineProps({

package/composables/usePaymentMethods.ts

@@ -9,40 +9,71 @@ export interface PaymentMethod {
 /**
  * Payment gateways shown in the checkout UI.
  *
- * These are FIXED to PayPal + Stripe — the only gateways live across the
- * ecosystem. We do NOT read the `payment_methods` table: that table holds
- * generic legacy methods (Cash, Credit Card, Transfer, Bitcoin...) and has no
- * notion of PayPal/Stripe.
+ * These are FIXED across the ecosystem — we do NOT read the
+ * `payment_methods` table: that table holds generic legacy methods (Cash,
+ * Credit Card, Transfer, Bitcoin...) and has no notion of PayPal/Stripe/Pix.
  *
  * The actual gateway *account* (which api_credential to charge) is resolved by
  * the backend at checkout time, honouring the existing active / default /
  * production flags on `api_credentials`. That lets admins switch accounts
  * without any frontend change. The frontend only sends
- * `payment_gateway: 'paypal' | 'stripe'`.
+ * `payment_gateway: 'paypal' | 'stripe' | 'pix'`.
  *
- * The numeric `id` here (PayPal = 2, Stripe = 3) is the convention used by
- * <MgPaymentMethods> to pick which inline SVG logo to render. It is unrelated
- * to the payment_methods table ids and to api ids (PayPal = 4, Stripe = 5).
+ * The numeric `id` here (PayPal = 2, Stripe = 3, Pix = 4) is the convention
+ * used by <MgPaymentMethods> to pick which inline SVG logo to render. It is
+ * unrelated to the payment_methods table ids and to api ids.
  */
-const GATEWAYS: PaymentMethod[] = [
+const ALL_GATEWAYS: PaymentMethod[] = [
   { id: 2, name: "paypal" },
   { id: 3, name: "stripe" },
+  { id: 4, name: "pix" },
 ];
 
+/**
+ * Emergency/operational kill-switch: pulling a gateway from every checkout
+ * across the whole ecosystem is a name added here (ecosystem-wide default,
+ * requires bump + republish) or via a consuming app's
+ * NUXT_PUBLIC_DISABLED_PAYMENT_GATEWAYS runtime config (e.g. a provider
+ * outage), no per-app code change needed either way.
+ */
+const DISABLED_BY_DEFAULT: string[] = [];
+
+function disabledGatewayNames(): string[] {
+  let fromRuntimeConfig: string[] = [];
+  try {
+    // useRuntimeConfig is auto-imported by Nuxt; guarded for non-Nuxt/test contexts.
+    const raw = useRuntimeConfig?.()?.public?.disabledPaymentGateways;
+    if (Array.isArray(raw)) {
+      fromRuntimeConfig = raw;
+    } else if (typeof raw === "string" && raw.length) {
+      fromRuntimeConfig = raw.split(",").map((n) => n.trim());
+    }
+  } catch {
+    // Not inside a Nuxt context (e.g. unit test) — fall back to the default list.
+  }
+
+  return [...DISABLED_BY_DEFAULT, ...fromRuntimeConfig].map((n) => n.toLowerCase());
+}
+
+function enabledGateways(): PaymentMethod[] {
+  const disabled = disabledGatewayNames();
+  return ALL_GATEWAYS.filter((g) => !disabled.includes(g.name));
+}
+
 export function usePaymentMethods(_httpService?: AxiosInstance) {
-  const methods = ref<PaymentMethod[]>([...GATEWAYS]);
+  const methods = ref<PaymentMethod[]>(enabledGateways());
   const selectedMethod = ref<string>("");
   const loading = ref(false);
   const error = ref<string | null>(null);
 
   // No HTTP call. Kept async + the context arg for call-site compatibility.
   async function fetchMethods(_context: "checkout" | "subscription" = "checkout") {
-    methods.value = [...GATEWAYS];
+    methods.value = enabledGateways();
   }
 
   const isStripe = computed(() => selectedMethod.value.toLowerCase() === "stripe");
   const isPaypal = computed(() => selectedMethod.value.toLowerCase() === "paypal");
-  const isPix = computed(() => false); // Pix not enabled yet
+  const isPix = computed(() => selectedMethod.value.toLowerCase() === "pix");
 
   function selectMethod(name: string) {
     selectedMethod.value = name.toLowerCase();