@mundogamernetwork/shared-ui 1.16.24 → 1.16.26

package/components/playtest/PlaytestResponseFlow.vue

@@ -21,6 +21,7 @@
 // loadAccessibilityCriteria) are cheap and idempotent to re-run client-side.
 import { ref, computed, onMounted, watch } from "vue";
 import { usePlaytestResponse } from "../../composables/usePlaytestResponse";
+import type { PlaytestCampaign } from "../../services/playtestTesterService";
 
 import PlaytestBrief from "./PlaytestBrief.vue";
 import PlaytestPendingConfirmation from "./PlaytestPendingConfirmation.vue";
@@ -54,6 +55,19 @@ const props = defineProps<{
 	// moderated: explicit session id when resuming/joining a specific
 	// already-booked session (skips the slot-browse step)
 	sessionId?: number;
+	// Studio "preview as tester" mode (agency-frontend's campaign hub Preview
+	// tab): a campaign owner can never appear in available() (it excludes
+	// their own campaigns) and would never pass real eligibility rules
+	// (certifications they don't hold) anyway. eligibilityFetcher supplies a
+	// synthetic eligible:true snapshot from the owner-only preview endpoint
+	// instead of the tester-only available() list. previewMode disables every
+	// interactive control so the owner sees exactly what a tester would see
+	// without being able to record a response — though every submit endpoint
+	// already independently rejects the campaign owner server-side
+	// regardless (see PlaytestService::submitResponse()), so this is UX
+	// polish on top of a real security boundary, not the boundary itself.
+	eligibilityFetcher?: () => Promise<PlaytestCampaign | null>;
+	previewMode?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -61,7 +75,7 @@ const emit = defineEmits<{
 	(e: "browse-more"): void
 }>();
 
-const flow = usePlaytestResponse(props.campaignId);
+const flow = usePlaytestResponse(props.campaignId, { eligibilityFetcher: props.eligibilityFetcher });
 
 const done = ref(false);
 
@@ -103,6 +117,7 @@ function browseMore() {
 const enabledSectionKeys = computed(() => flow.campaign.value?.enabled_sections ?? []);
 
 async function submitBaselineFlow() {
+	if (props.previewMode) return;
 	const result = await flow.submitBaseline();
 	if (result) handleDone();
 }
@@ -123,7 +138,7 @@ const conceptPollComponent = computed(() => {
 });
 
 async function submitConceptPollFlow(payload: { answer: any; reason: string }) {
-	if (!props.pollId) return;
+	if (props.previewMode || !props.pollId) return;
 	const result = await flow.submitConceptPollVote(props.pollId, payload.answer, payload.reason);
 	if (result) handleDone();
 }
@@ -133,6 +148,7 @@ async function submitConceptPollFlow(payload: { answer: any; reason: string }) {
 const selectedLocaleId = ref<number | null>(null);
 
 async function submitIssueFlow(payload: Parameters<typeof flow.fileLocalizationIssue>[0]) {
+	if (props.previewMode) return;
 	await flow.fileLocalizationIssue(payload);
 	// LQA is a repeatable session (file multiple issues) — no auto "done"
 	// transition; the consuming app decides when the tester is finished
@@ -157,6 +173,9 @@ const allCriteriaComplete = computed(
 );
 
 async function saveAccessibilityEvaluation(entry: Parameters<typeof flow.setAccessibilityEvaluation>[0]) {
+	// CriterionRow auto-saves per row with no busy/disabled prop to gate —
+	// this guard is the only stop for it in preview mode.
+	if (props.previewMode) return;
 	flow.setAccessibilityEvaluation(entry);
 	await flow.submitAccessibilityBatch([entry]);
 }
@@ -187,7 +206,7 @@ const complianceComplete = computed(() => {
 });
 
 async function submitComplianceFlow() {
-	if (!activeChecklist.value) return;
+	if (props.previewMode || !activeChecklist.value) return;
 	const result = await flow.submitComplianceChecklist(activeChecklist.value.id);
 	if (result) handleDone();
 }
@@ -195,15 +214,18 @@ async function submitComplianceFlow() {
 // ── Moderated ─────────────────────────────────────────────────────────────
 
 async function claimSlotFlow(slotId: number) {
+	if (props.previewMode) return;
 	const result = await flow.claimSlot(slotId);
 	if (result) handleDone();
 }
 
 async function confirmSessionFlow() {
+	if (props.previewMode) return;
 	if (flow.currentSession.value) await flow.confirmSession(flow.currentSession.value.id);
 }
 
 async function cancelSessionFlow() {
+	if (props.previewMode) return;
 	if (flow.currentSession.value) await flow.cancelSession(flow.currentSession.value.id);
 }
 </script>
@@ -218,6 +240,10 @@ async function cancelSessionFlow() {
 		/>
 
 		<template v-else>
+			<p v-if="previewMode" class="playtest-response-flow__preview-banner">
+				{{ $t("playtest.flow.preview_banner", "Preview only — this is exactly what a tester sees. Nothing here can be submitted.") }}
+			</p>
+
 			<PlaytestBrief :campaign="flow.campaign.value" :loading="flow.loading.value">
 				<p v-if="flow.genericError.value" class="playtest-response-flow__error">
 					{{ flow.genericError.value }}
@@ -236,7 +262,7 @@ async function cancelSessionFlow() {
 					<button
 						type="button"
 						class="btn primary playtest-response-flow__submit"
-						:disabled="flow.submitting.value"
+						:disabled="previewMode || flow.submitting.value"
 						@click="submitBaselineFlow"
 					>
 						{{ $t("playtest.flow.submit_response", "Submit response") }}
@@ -253,7 +279,7 @@ async function cancelSessionFlow() {
 						:is="conceptPollComponent"
 						v-if="conceptPollComponent"
 						:options="flow.poll.value.options"
-						:submitting="flow.submitting.value"
+						:submitting="previewMode || flow.submitting.value"
 						@submit="submitConceptPollFlow"
 					/>
 				</div>
@@ -263,7 +289,7 @@ async function cancelSessionFlow() {
 					<LocaleSelector :locales="flow.locales.value" v-model="selectedLocaleId" />
 					<FileIssueForm
 						:campaign-locale-id="selectedLocaleId"
-						:submitting="flow.submitting.value"
+						:submitting="previewMode || flow.submitting.value"
 						:uploading="flow.uploading.value"
 						@submit="submitIssueFlow"
 						@upload-media="uploadLqaMedia"
@@ -300,7 +326,7 @@ async function cancelSessionFlow() {
 					<button
 						type="button"
 						class="btn primary playtest-response-flow__submit"
-						:disabled="!complianceComplete || flow.submitting.value"
+						:disabled="previewMode || !complianceComplete || flow.submitting.value"
 						@click="submitComplianceFlow"
 					>
 						{{ $t("playtest.flow.submit_checklist", "Submit checklist") }}
@@ -308,6 +334,9 @@ async function cancelSessionFlow() {
 				</div>
 
 				<!-- ── Video Playtest ── -->
+				<div v-else-if="category === 'video_playtest' && previewMode" class="playtest-response-flow__video-preview-note">
+					{{ $t("playtest.flow.video_preview_unavailable", "Testers record their screen here while playing. Camera/mic capture is not available in preview.") }}
+				</div>
 				<div v-else-if="category === 'video_playtest'">
 					<VideoPlaytestCapture :campaign-id="campaignId" @submitted="handleDone" />
 				</div>
@@ -317,7 +346,7 @@ async function cancelSessionFlow() {
 					<JoinCallPanel
 						v-if="sessionId && flow.currentSession.value"
 						:session="flow.currentSession.value"
-						:acting="flow.submitting.value"
+						:acting="previewMode || flow.submitting.value"
 						@confirm="confirmSessionFlow"
 						@cancel="cancelSessionFlow"
 					/>
@@ -327,7 +356,7 @@ async function cancelSessionFlow() {
 							:key="slot.id"
 							variant="slot"
 							:slot="slot"
-							:claiming="flow.submitting.value"
+							:claiming="previewMode || flow.submitting.value"
 							@claim="claimSlotFlow"
 						/>
 					</div>
@@ -373,5 +402,22 @@ async function cancelSessionFlow() {
 		flex-direction: column;
 		gap: 10px;
 	}
+
+	&__preview-banner {
+		background: rgba(253, 178, 21, 0.1);
+		border: 1px solid rgba(253, 178, 21, 0.3);
+		color: var(--card-article-title, #fff);
+		font-size: 13px;
+		font-weight: 600;
+		padding: 10px 14px;
+		margin-bottom: 16px;
+	}
+
+	&__video-preview-note {
+		color: var(--secondary-info-fg, #aaa);
+		font-size: 13px;
+		padding: 16px;
+		border: 1px dashed var(--card-border, #333);
+	}
 }
 </style>

package/composables/usePlaytestResponse.ts

@@ -47,8 +47,18 @@ import {
  *
  * One instance per campaign visit — instantiate fresh per mount
  * (PlaytestResponseFlow.vue owns the instance), not as a global singleton.
+ *
+ * `options.eligibilityFetcher` lets a caller supply the campaign+eligibility
+ * snapshot from a different source than the tester-only available() list —
+ * used by the studio "preview as tester" mode, which cannot appear in
+ * available() (it excludes the caller's own campaigns) and needs a
+ * synthetic eligible:true snapshot instead. Omit it for every normal
+ * tester-facing caller; behavior is unchanged from before this existed.
  */
-export function usePlaytestResponse(campaignId: number) {
+export function usePlaytestResponse(
+	campaignId: number,
+	options?: { eligibilityFetcher?: () => Promise<PlaytestCampaign | null> },
+) {
 	// ── Shared/global state ────────────────────────────────────────────────
 	const loading = ref(false);
 	const submitting = ref(false);
@@ -121,8 +131,9 @@ export function usePlaytestResponse(campaignId: number) {
 	async function loadCampaignEligibility() {
 		loading.value = true;
 		try {
-			const res = await fetchAvailablePlaytestCampaigns();
-			const found = res.data.find((c) => c.id === campaignId) ?? null;
+			const found = options?.eligibilityFetcher
+				? await options.eligibilityFetcher()
+				: (await fetchAvailablePlaytestCampaigns()).data.find((c) => c.id === campaignId) ?? null;
 			campaign.value = found;
 			if (found && found.eligible === false) {
 				ineligible.value = true;

package/locales/de.json

@@ -84,8 +84,10 @@
     },
     "flow": {
       "criteria_completed": "Kriterien abgeschlossen",
+      "preview_banner": "Nur Vorschau — genau das sieht ein Tester. Hier kann nichts gesendet werden.",
       "submit_checklist": "Checkliste absenden",
-      "submit_response": "Antwort absenden"
+      "submit_response": "Antwort absenden",
+      "video_preview_unavailable": "Hier zeichnen Tester beim Spielen ihren Bildschirm auf. Kamera-/Mikrofonaufnahme ist in der Vorschau nicht verfügbar."
     },
     "lqa": {
       "actual_text": "Tatsächlicher Text",
@@ -389,6 +391,7 @@
       "already_requested": "Sie haben bereits eine Anfrage für diese Kampagne gestellt.",
       "sold_out": "Alle Keys für diese Kampagne wurden bereits eingelöst.",
       "options_unavailable": "Diese Kampagne hat noch Keys, aber es ist noch keine Plattform oder Region dafür eingerichtet, daher können keine Anfragen gesendet werden. Das Studio muss die Einrichtung abschließen — auf deiner Seite ist alles in Ordnung.",
+      "countries_only": "Nur in {countries}",
       "keys_left": "{n} Key übrig | {n} Keys übrig",
       "keys_low_stock": "Letzter Key | Letzte {n}",
       "back_to_campaign": "Zur Kampagne zurückkehren",

package/locales/en.json

@@ -84,8 +84,10 @@
     },
     "flow": {
       "criteria_completed": "criteria completed",
+      "preview_banner": "Preview only — this is exactly what a tester sees. Nothing here can be submitted.",
       "submit_checklist": "Submit checklist",
-      "submit_response": "Submit response"
+      "submit_response": "Submit response",
+      "video_preview_unavailable": "Testers record their screen here while playing. Camera/mic capture is not available in preview."
     },
     "lqa": {
       "actual_text": "Actual text",
@@ -389,6 +391,7 @@
       "already_requested": "You have already submitted a request for this campaign.",
       "sold_out": "All keys for this campaign have already been claimed.",
       "options_unavailable": "This campaign still has keys, but no platform or region is set up for them yet, so requests can't be sent. The studio needs to finish setting it up — nothing on your side is wrong.",
+      "countries_only": "Only in {countries}",
       "keys_left": "{n} key left | {n} keys left",
       "keys_low_stock": "Last key | Last {n}",
       "back_to_campaign": "Back to campaign",

package/locales/es.json

@@ -84,8 +84,10 @@
     },
     "flow": {
       "criteria_completed": "criterios completados",
+      "preview_banner": "Solo vista previa — esto es exactamente lo que ve un tester. Nada aquí se puede enviar.",
       "submit_checklist": "Enviar checklist",
-      "submit_response": "Enviar respuesta"
+      "submit_response": "Enviar respuesta",
+      "video_preview_unavailable": "Aquí es donde los testers graban su pantalla mientras juegan. La captura de cámara/micrófono no está disponible en la vista previa."
     },
     "lqa": {
       "actual_text": "Texto actual",
@@ -389,6 +391,7 @@
       "already_requested": "Ya has enviado una solicitud para esta campaña.",
       "sold_out": "Todas las claves de esta campaña ya fueron reclamadas.",
       "options_unavailable": "Esta campaña todavía tiene claves, pero aún no hay ninguna plataforma o región configurada para ellas, así que no se pueden enviar solicitudes. El estudio debe terminar la configuración — no hay nada mal de tu lado.",
+      "countries_only": "Solo en {countries}",
       "keys_left": "{n} clave restante | {n} claves restantes",
       "keys_low_stock": "Última clave | Últimas {n}",
       "back_to_campaign": "Volver a la campaña",

package/locales/pt-BR.json

@@ -84,8 +84,10 @@
     },
     "flow": {
       "criteria_completed": "critérios concluídos",
+      "preview_banner": "Somente pré-visualização — é exatamente isso que um tester vê. Nada aqui pode ser enviado.",
       "submit_checklist": "Enviar checklist",
-      "submit_response": "Enviar resposta"
+      "submit_response": "Enviar resposta",
+      "video_preview_unavailable": "Aqui é onde os testers gravam a tela enquanto jogam. A captura de câmera/microfone não está disponível na pré-visualização."
     },
     "lqa": {
       "actual_text": "Texto atual",
@@ -389,6 +391,7 @@
       "already_requested": "Você já enviou uma solicitação para esta campanha.",
       "sold_out": "Todas as chaves desta campanha já foram resgatadas.",
       "options_unavailable": "Esta campanha ainda tem chaves, mas nenhuma plataforma ou região foi configurada para elas, então não dá para enviar pedidos. O estúdio precisa concluir a configuração — não há nada errado do seu lado.",
+      "countries_only": "Somente em {countries}",
       "keys_left": "{n} chave restante | {n} chaves restantes",
       "keys_low_stock": "Última chave | Últimas {n}",
       "back_to_campaign": "Voltar para a campanha",

package/locales/ro.json

@@ -84,8 +84,10 @@
     },
     "flow": {
       "criteria_completed": "criterii finalizate",
+      "preview_banner": "Doar previzualizare — exact așa vede un tester. Nimic de aici nu poate fi trimis.",
       "submit_checklist": "Trimite checklist-ul",
-      "submit_response": "Trimite răspunsul"
+      "submit_response": "Trimite răspunsul",
+      "video_preview_unavailable": "Aici testerii își înregistrează ecranul în timp ce joacă. Captura camerei/microfonului nu este disponibilă în previzualizare."
     },
     "lqa": {
       "actual_text": "Text real",
@@ -389,6 +391,7 @@
       "already_requested": "Ați trimis deja o cerere pentru această campanie.",
       "sold_out": "Toate cheile pentru această campanie au fost deja revendicate.",
       "options_unavailable": "Această campanie mai are chei, dar încă nu este configurată nicio platformă sau regiune pentru ele, așa că nu se pot trimite cereri. Studioul trebuie să finalizeze configurarea — nu este nimic greșit din partea ta.",
+      "countries_only": "Doar în {countries}",
       "keys_left": "{n} cheie rămasă | {n} chei rămase",
       "keys_low_stock": "Ultima cheie | Ultimele {n}",
       "back_to_campaign": "Înapoi la campanie",

package/package.json

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

package/pages/key-campaigns/index.vue

@@ -230,13 +230,22 @@
 												{{ card.type }}
 											</span>
 										</div>
-										<div v-if="card.platforms && card.platforms.length" class="card-platforms">
+										<div v-if="(card.platforms && card.platforms.length) || (card.stores && card.stores.length)" class="card-platforms">
 											<span v-for="p in card.platforms.slice(0, 4)" :key="p" class="card-platform-tag">
 												{{ platformAbbr(p) }}
 											</span>
 											<span v-if="card.platforms.length > 4" class="card-platform-tag card-platform-more">
 												+{{ card.platforms.length - 4 }}
 											</span>
+											<span v-for="st in card.stores.slice(0, 3)" :key="st" class="card-platform-tag card-store-tag">
+												{{ st }}
+											</span>
+										</div>
+										<!-- Só aparece quando o estúdio restringiu de verdade: a
+										     lista vazia significa aberta a todo mundo, e mostrar
+										     isso em toda campanha viraria ruído. -->
+										<div v-if="card.countries && card.countries.length" class="card-countries">
+											{{ $t("keys.campaigns.countries_only", { countries: card.countries.slice(0, 3).join(", ") }) }}
 										</div>
 
 										<div class="buttons">
@@ -695,6 +704,13 @@ async function loadCampaigns(page = 1) {
 				genres: (item.game?.genres || []).map((g: any) => g.name).filter(Boolean).slice(0, 2),
 				studioName: item.company?.name || null,
 				regions: (item.regions || []).map((r: any) => r.name).filter(Boolean),
+				// Onde o código é resgatado. Plataforma diz onde o jogo roda;
+				// "PC (Microsoft Windows)" não diz se a chave entra no Steam
+				// ou na Epic, que é a primeira coisa de que quem pede precisa.
+				stores: (item.stores || []).map((st: any) => st.name).filter(Boolean),
+				// Vazio = aberta a todo mundo, que é o caso da maioria. Só
+				// vira informação quando o estúdio restringiu de verdade.
+				countries: (item.countries || []).map((c: any) => c.name).filter(Boolean),
 				userRequestSlug: null,
 			}
 		})
@@ -1608,6 +1624,20 @@ onUnmounted(() => {
 								border-style: dashed;
 								opacity: 0.8;
 							}
+							// A loja é a informação mais acionável das duas: o
+							// destinatário precisa dela pra saber onde colar o
+							// código. Preenchida em vez de contornada pra
+							// separar visualmente da plataforma ao lado.
+							.card-store-tag {
+								background: var(--secondary-info-fg);
+								color: var(--primary-bg);
+								text-transform: none;
+							}
+						}
+						.card-countries {
+							font-size: 11px;
+							color: var(--secondary-info-fg);
+							margin-top: 4px;
 						}
 
 						.buttons {