@mundogamernetwork/shared-ui 1.16.25 → 1.16.27

package/components/errors/MgErrorNewsCta.vue

@@ -7,17 +7,36 @@
  * instead of dead ends.
  */
 
+// community-api's /feed/trending wraps the actual pulse/review/video fields
+// in a nested `content` object — content_type/content_id/views are the only
+// fields it puts at the top level (confirmed against the live response).
+// A previous version of this component read title/slug/image/author off the
+// top level directly, which is always undefined: every card silently fell
+// back to the placeholder image and linked to ".../undefined".
 interface FeedItem {
-	id: number;
-	slug: string;
-	title: string;
-	url_image_src?: string;
-	url_image?: string;
 	content_type?: "pulse" | "review" | "video" | string;
-	author?: { nickname?: string; name?: string };
-	created_at_diff?: string;
+	content: {
+		id: number;
+		slug: string;
+		title: string;
+		url_image_src?: string;
+		url_image?: string;
+		author?: { nickname?: string; name?: string };
+		created_at_diff?: string;
+	};
 }
 
+const CONTENT_TYPE_LABELS: Record<string, string> = {
+	pulse: "News",
+	review: "Review",
+	video: "Video",
+};
+
+const contentTypeLabel = (item: FeedItem): string => {
+	const type = item.content_type ?? "pulse";
+	return CONTENT_TYPE_LABELS[type] ?? type;
+};
+
 const props = defineProps({
 	limit: { type: Number, default: 4 },
 });
@@ -58,11 +77,11 @@ const articlePath = (item: FeedItem): string => {
 		video: "videos",
 	};
 	const type = typeMap[item.content_type ?? "pulse"] ?? "articles";
-	return `${communitySiteUrl.value}/${locale}/${type}/${item.slug}`;
+	return `${communitySiteUrl.value}/${locale}/${type}/${item.content.slug}`;
 };
 
 const imageUrl = (item: FeedItem): string =>
-	item.url_image_src || item.url_image || "/imgs/default/no_img_large_dark.png";
+	item.content.url_image_src || item.content.url_image || "/imgs/default/no_img_large_dark.png";
 
 onMounted(async () => {
 	try {
@@ -108,7 +127,7 @@ onMounted(async () => {
 		<div v-else class="error-news-cta__grid">
 			<a
 				v-for="item in articles"
-				:key="item.id"
+				:key="item.content.id"
 				:href="articlePath(item)"
 				target="_blank"
 				class="error-news-cta__card"
@@ -119,11 +138,11 @@ onMounted(async () => {
 				/>
 				<div class="error-news-cta__card-body">
 					<span v-if="item.content_type" class="error-news-cta__card-tag">
-						{{ item.content_type }}
+						{{ contentTypeLabel(item) }}
 					</span>
-					<p class="error-news-cta__card-title">{{ item.title }}</p>
-					<span v-if="item.created_at_diff" class="error-news-cta__card-date">
-						{{ item.created_at_diff }}
+					<p class="error-news-cta__card-title">{{ item.content.title }}</p>
+					<span v-if="item.content.created_at_diff" class="error-news-cta__card-date">
+						{{ item.content.created_at_diff }}
 					</span>
 				</div>
 			</a>

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",

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",

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",

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",

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",

package/package.json

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

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

@@ -242,14 +242,6 @@ interface FormData {
 	submitted_at: string
 }
 
-const contentTypesMap: Record<ContentType, number> = {
-	article: 1,
-	video: 2,
-	stream: 3,
-	web: 4,
-	print: 5,
-}
-
 const forms = ref<FormData[]>([
 	{ content_types: [], material_url: "", description: "", submitted_at: "" },
 ])
@@ -363,7 +355,12 @@ const submitForm = async () => {
 			await submitMaterial({
 				key_request_id: requestId.value,
 				user_id: unref(currentUserId),
-				content_types: form.content_types.map((type) => contentTypesMap[type]),
+				// Slugs, not guessed ids. article/video/stream/web/print already
+				// match content_types.slug (Spatie\Sluggable on the model's own
+				// `name`) — the backend resolves them, which is what makes this
+				// work regardless of what numeric ids that table happens to hold
+				// in a given environment.
+				content_types: form.content_types,
 				material_url: form.material_url,
 				description: form.description,
 				submitted_at: new Date(form.submitted_at).toISOString(),