@mundogamernetwork/shared-ui 1.1.95 → 1.2.0

package/components/playtest/PlaytestBrief.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+// Shared chrome: campaign brief header shown atop every category flow —
+// title, category/engine badges, reward disclaimer ("paid on acceptance, not
+// on submission" — matches PlaytestService::acceptResponse() being the only
+// place that releases a reward), and a slot for category-specific teaser
+// content (poll question, locales in scope, accessibility criteria list —
+// supplied by the consuming app/orchestrator, not hardcoded here).
+import { computed } from "vue";
+import type { PlaytestCampaign } from "../../services/playtestTesterService";
+
+const props = defineProps<{
+	campaign: PlaytestCampaign | null;
+	loading?: boolean;
+}>();
+
+const rewardLabel = computed(() => {
+	const c = props.campaign;
+	if (!c) return "";
+	const amount = c.reward_amount;
+	return c.reward_type === "cash"
+		? `${amount} ${c.reward_currency ?? "USD"}`
+		: `${amount} MGC`;
+});
+
+const categoryLabel = computed(() => {
+	const map: Record<string, string> = {
+		concept_poll: "Concept Poll",
+		localization_qa: "Localization QA",
+		accessibility_audit: "Accessibility Audit",
+	};
+	return props.campaign?.category ? map[props.campaign.category] ?? props.campaign.category : "Baseline Playtest";
+});
+</script>
+
+<template>
+	<div class="pt-brief">
+		<div v-if="loading" class="pt-brief__skeleton" />
+
+		<template v-else-if="campaign">
+			<div class="pt-brief__badges">
+				<span class="pt-brief__badge pt-brief__badge--category">{{ categoryLabel }}</span>
+				<span class="pt-brief__badge">{{ campaign.engine }}</span>
+			</div>
+
+			<h2 class="pt-brief__title">{{ campaign.title }}</h2>
+
+			<div class="pt-brief__meta">
+				<span class="pt-brief__reward">
+					{{ $t("playtest.brief.reward", "Reward") }}: <strong>{{ rewardLabel }}</strong>
+				</span>
+				<span class="pt-brief__disclaimer">
+					{{ $t("playtest.brief.paid_on_acceptance", "Paid when the studio accepts your response, not on submission.") }}
+				</span>
+			</div>
+
+			<div v-if="campaign.eligible === false" class="pt-brief__ineligible">
+				<i class="fa-solid fa-lock" />
+				<span>{{ campaign.ineligibility_reason || $t("playtest.brief.ineligible_generic", "You don't currently qualify for this playtest.") }}</span>
+			</div>
+
+			<div class="pt-brief__slot">
+				<slot />
+			</div>
+		</template>
+
+		<div v-else class="pt-brief__empty">
+			{{ $t("playtest.brief.not_found", "This playtest campaign could not be found.") }}
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.pt-brief {
+	border: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+	padding: 20px;
+	margin-bottom: 20px;
+
+	&__skeleton {
+		height: 120px;
+		background: var(--bg-app-badge, #1a1a1a);
+		animation: pt-pulse 1.4s ease-in-out infinite;
+	}
+
+	&__badges {
+		display: flex;
+		gap: 8px;
+		margin-bottom: 10px;
+	}
+
+	&__badge {
+		font-size: 11px;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.4px;
+		padding: 3px 8px;
+		border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
+		color: var(--secondary-info-fg, #aaa);
+
+		&--category {
+			color: var(--primary, #D297FF);
+			border-color: var(--primary, #D297FF);
+		}
+	}
+
+	&__title {
+		font-size: 1.3rem;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0 0 12px;
+	}
+
+	&__meta {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		margin-bottom: 12px;
+	}
+
+	&__reward {
+		font-size: 14px;
+		color: var(--text-primary, #fff);
+	}
+
+	&__disclaimer {
+		font-size: 12px;
+		color: var(--secondary-info-fg, #888);
+	}
+
+	&__ineligible {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 10px 12px;
+		background: rgba(229, 57, 53, 0.1);
+		border: 1px solid rgba(229, 57, 53, 0.35);
+		color: var(--danger, #e53935);
+		font-size: 13px;
+		margin-bottom: 12px;
+	}
+
+	&__empty {
+		padding: 40px 0;
+		text-align: center;
+		color: var(--secondary-info-fg, #888);
+	}
+}
+
+@keyframes pt-pulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.4; }
+}
+</style>

package/components/playtest/PlaytestPendingConfirmation.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+// Shared chrome: terminal "you're done" state shown after a successful
+// submit — every category ends here (no cross-category variance needed,
+// since acceptance/rejection always happens later, asynchronously, via the
+// studio's own review dashboard in agency-frontend).
+withDefaults(defineProps<{
+	title?: string;
+	message?: string;
+	ineligible?: boolean;
+	ineligibilityReason?: string | null;
+}>(), {
+	title: undefined,
+	message: undefined,
+	ineligible: false,
+	ineligibilityReason: null,
+});
+
+const emit = defineEmits<{
+	(e: "browse-more"): void;
+}>();
+</script>
+
+<template>
+	<div class="pt-pending" :class="{ 'pt-pending--ineligible': ineligible }">
+		<div class="pt-pending__icon">
+			<i v-if="ineligible" class="fa-solid fa-circle-exclamation" />
+			<i v-else class="fa-solid fa-circle-check" />
+		</div>
+
+		<h3 class="pt-pending__title">
+			{{ ineligible
+				? (title ?? $t("playtest.pending.ineligible_title", "You no longer qualify for this playtest"))
+				: (title ?? $t("playtest.pending.title", "Response submitted")) }}
+		</h3>
+
+		<p class="pt-pending__message">
+			{{ ineligible
+				? (ineligibilityReason ?? message ?? $t("playtest.pending.ineligible_message", "Something changed since you started — this campaign's requirements are no longer met."))
+				: (message ?? $t("playtest.pending.message", "Thanks for testing! The studio will review your response — you'll be paid if it's accepted.")) }}
+		</p>
+
+		<button type="button" class="btn primary pt-pending__cta" @click="emit('browse-more')">
+			{{ $t("playtest.pending.browse_more", "Browse more playtests") }}
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.pt-pending {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	padding: 48px 24px;
+	gap: 12px;
+
+	&__icon {
+		font-size: 2.4rem;
+		color: var(--primary, #D297FF);
+	}
+
+	&--ineligible &__icon {
+		color: var(--danger, #e53935);
+	}
+
+	&__title {
+		font-size: 1.2rem;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0;
+	}
+
+	&__message {
+		font-size: 14px;
+		color: var(--secondary-info-fg, #aaa);
+		max-width: 420px;
+		margin: 0;
+	}
+
+	&__cta {
+		margin-top: 12px;
+	}
+}
+</style>

package/components/playtest/PlaytestResponseFlow.vue

@@ -0,0 +1,371 @@
+<script setup lang="ts">
+// Top-level orchestrator — the single component both agency-frontend and
+// community-frontend actually mount. Dispatches to the right per-category
+// flow given {campaignId, category}. `category` mirrors
+// PlaytestCampaign.category: null (baseline quick/deep), 'concept_poll',
+// 'localization_qa', 'accessibility_audit'. `moderated` is a distinct mode
+// (not a campaign.category — moderated sessions layer on top of any
+// campaign) selected explicitly via the `mode` prop when the consuming app
+// is showing a specific booked/available session rather than a
+// submission form.
+//
+// SSR-safety: campaign eligibility/catalog data is fetched via
+// usePlaytestResponse's load*() methods inside onMounted — this flow is
+// gated behind auth (every route requires a logged-in tester with real
+// eligibility state, which cannot be resolved during SSR without the
+// request's auth cookies plumbed through a server-side composable this repo
+// doesn't currently have for this module) — same posture as
+// KeyBrowser/key-materials flows in this repo, which are also
+// onMounted-driven for their authenticated, highly-interactive parts. The
+// purely public catalog/criteria lookups (loadCatalog,
+// loadAccessibilityCriteria) are cheap and idempotent to re-run client-side.
+import { ref, computed, onMounted, watch } from "vue";
+import { usePlaytestResponse } from "../../composables/usePlaytestResponse";
+
+import PlaytestBrief from "./PlaytestBrief.vue";
+import PlaytestPendingConfirmation from "./PlaytestPendingConfirmation.vue";
+import BaselineSectionStep from "./baseline/BaselineSectionStep.vue";
+import HeadToHeadVote from "./concept-poll/HeadToHeadVote.vue";
+import SingleSelectVote from "./concept-poll/SingleSelectVote.vue";
+import MultiSelectVote from "./concept-poll/MultiSelectVote.vue";
+import RankedChoiceVote from "./concept-poll/RankedChoiceVote.vue";
+import FiveSecondTestVote from "./concept-poll/FiveSecondTestVote.vue";
+import StarRatingVote from "./concept-poll/StarRatingVote.vue";
+import EmojiReactionVote from "./concept-poll/EmojiReactionVote.vue";
+import LocaleSelector from "./lqa/LocaleSelector.vue";
+import IssueList from "./lqa/IssueList.vue";
+import FileIssueForm from "./lqa/FileIssueForm.vue";
+import CriterionRow from "./accessibility/CriterionRow.vue";
+import ChecklistItemRow from "./compliance/ChecklistItemRow.vue";
+import SessionCard from "./moderated/SessionCard.vue";
+import JoinCallPanel from "./moderated/JoinCallPanel.vue";
+
+type PlaytestCategory = "baseline" | "concept_poll" | "localization_qa" | "accessibility_audit" | "compliance" | "moderated";
+
+const props = defineProps<{
+	campaignId: number;
+	category: PlaytestCategory;
+	// concept_poll: id of the poll to vote on (campaign can host one poll)
+	pollId?: number;
+	// compliance: id of the checklist being answered (a campaign can have
+	// multiple checklists — consuming app picks which one to mount, or loops)
+	checklistId?: number;
+	// moderated: explicit session id when resuming/joining a specific
+	// already-booked session (skips the slot-browse step)
+	sessionId?: number;
+}>();
+
+const emit = defineEmits<{
+	(e: "completed"): void
+	(e: "browse-more"): void
+}>();
+
+const flow = usePlaytestResponse(props.campaignId);
+
+const done = ref(false);
+
+onMounted(async () => {
+	await flow.loadCampaignEligibility();
+
+	if (props.category === "baseline") {
+		await flow.loadCatalog();
+	} else if (props.category === "concept_poll" && props.pollId) {
+		await flow.loadConceptPoll(props.pollId);
+	} else if (props.category === "localization_qa") {
+		await flow.loadCampaignLocales();
+	} else if (props.category === "accessibility_audit") {
+		await flow.loadAccessibilityCriteria();
+	} else if (props.category === "compliance") {
+		await flow.loadComplianceChecklists();
+	} else if (props.category === "moderated") {
+		if (props.sessionId) {
+			await flow.loadSession(props.sessionId);
+		} else {
+			await flow.loadAvailableModeratedSlots();
+		}
+	}
+});
+
+function handleDone() {
+	done.value = true;
+	emit("completed");
+}
+
+function browseMore() {
+	done.value = false;
+	flow.resetErrors();
+	emit("browse-more");
+}
+
+// ── Baseline ──────────────────────────────────────────────────────────────
+
+const enabledSectionKeys = computed(() => flow.campaign.value?.enabled_sections ?? []);
+
+async function submitBaselineFlow() {
+	const result = await flow.submitBaseline();
+	if (result) handleDone();
+}
+
+// ── Concept poll dispatch ───────────────────────────────────────────────────
+
+const conceptPollComponent = computed(() => {
+	switch (flow.poll.value?.poll_type) {
+		case "head_to_head": return HeadToHeadVote;
+		case "single_select": return SingleSelectVote;
+		case "multi_select": return MultiSelectVote;
+		case "ranked_choice": return RankedChoiceVote;
+		case "five_second_test": return FiveSecondTestVote;
+		case "star_rating": return StarRatingVote;
+		case "emoji_reaction": return EmojiReactionVote;
+		default: return null;
+	}
+});
+
+async function submitConceptPollFlow(payload: { answer: any; reason: string }) {
+	if (!props.pollId) return;
+	const result = await flow.submitConceptPollVote(props.pollId, payload.answer, payload.reason);
+	if (result) handleDone();
+}
+
+// ── Localization QA ─────────────────────────────────────────────────────────
+
+const selectedLocaleId = ref<number | null>(null);
+
+async function submitIssueFlow(payload: Parameters<typeof flow.fileLocalizationIssue>[0]) {
+	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
+	// (e.g. an explicit "Finish session" button of its own).
+}
+
+async function uploadLqaMedia(file: File) {
+	return flow.uploadMedia(file);
+}
+
+// ── Accessibility ────────────────────────────────────────────────────────────
+
+const accessibilityKeys = computed(() => {
+	const enabled = flow.campaign.value?.accessibility_criteria;
+	const all = Object.keys(flow.accessibilityCriteria.value);
+	return enabled && enabled.length > 0 ? all.filter((k) => enabled.includes(k)) : all;
+});
+
+const completedCriteriaCount = computed(() => Object.keys(flow.accessibilityEvaluations).length);
+const allCriteriaComplete = computed(
+	() => accessibilityKeys.value.length > 0 && completedCriteriaCount.value >= accessibilityKeys.value.length
+);
+
+async function saveAccessibilityEvaluation(entry: Parameters<typeof flow.setAccessibilityEvaluation>[0]) {
+	flow.setAccessibilityEvaluation(entry);
+	await flow.submitAccessibilityBatch([entry]);
+}
+
+watch(allCriteriaComplete, (complete) => {
+	if (complete) handleDone();
+});
+
+// ── Compliance ────────────────────────────────────────────────────────────
+
+const activeChecklist = computed(() =>
+	flow.complianceChecklists.value.find((c) => c.id === props.checklistId) ?? flow.complianceChecklists.value[0] ?? null
+);
+
+function saveComplianceResult(entry: Parameters<typeof flow.setComplianceResult>[1]) {
+	if (!activeChecklist.value) return;
+	flow.setComplianceResult(activeChecklist.value.id, entry);
+}
+
+async function uploadComplianceEvidence(file: File) {
+	return flow.uploadMedia(file);
+}
+
+const complianceComplete = computed(() => {
+	if (!activeChecklist.value) return false;
+	const results = flow.complianceResults[activeChecklist.value.id] ?? {};
+	return activeChecklist.value.items.every((i) => !!results[i.key]);
+});
+
+async function submitComplianceFlow() {
+	if (!activeChecklist.value) return;
+	const result = await flow.submitComplianceChecklist(activeChecklist.value.id);
+	if (result) handleDone();
+}
+
+// ── Moderated ─────────────────────────────────────────────────────────────
+
+async function claimSlotFlow(slotId: number) {
+	const result = await flow.claimSlot(slotId);
+	if (result) handleDone();
+}
+
+async function confirmSessionFlow() {
+	if (flow.currentSession.value) await flow.confirmSession(flow.currentSession.value.id);
+}
+
+async function cancelSessionFlow() {
+	if (flow.currentSession.value) await flow.cancelSession(flow.currentSession.value.id);
+}
+</script>
+
+<template>
+	<div class="playtest-response-flow">
+		<PlaytestPendingConfirmation
+			v-if="done || flow.ineligible.value"
+			:ineligible="flow.ineligible.value"
+			:ineligibility-reason="flow.ineligibilityReason.value"
+			@browse-more="browseMore"
+		/>
+
+		<template v-else>
+			<PlaytestBrief :campaign="flow.campaign.value" :loading="flow.loading.value">
+				<p v-if="flow.genericError.value" class="playtest-response-flow__error">
+					{{ flow.genericError.value }}
+				</p>
+
+				<!-- ── Baseline ── -->
+				<div v-if="category === 'baseline' && flow.catalog.value">
+					<BaselineSectionStep
+						v-for="key in enabledSectionKeys"
+						:key="key"
+						:section-key="key"
+						:meta="flow.catalog.value.sections[key]"
+						:model-value="flow.baselineAnswers[key] ?? {}"
+						@update:model-value="(v) => flow.setBaselineAnswer(key, v)"
+					/>
+					<button
+						type="button"
+						class="btn primary playtest-response-flow__submit"
+						:disabled="flow.submitting.value"
+						@click="submitBaselineFlow"
+					>
+						{{ $t("playtest.flow.submit_response", "Submit response") }}
+					</button>
+				</div>
+
+				<!-- ── Concept poll ── -->
+				<div v-else-if="category === 'concept_poll' && flow.poll.value">
+					<h3 class="playtest-response-flow__question">{{ flow.poll.value.question }}</h3>
+					<p v-if="flow.poll.value.description" class="playtest-response-flow__description">
+						{{ flow.poll.value.description }}
+					</p>
+					<component
+						:is="conceptPollComponent"
+						v-if="conceptPollComponent"
+						:options="flow.poll.value.options"
+						:submitting="flow.submitting.value"
+						@submit="submitConceptPollFlow"
+					/>
+				</div>
+
+				<!-- ── Localization QA ── -->
+				<div v-else-if="category === 'localization_qa'">
+					<LocaleSelector :locales="flow.locales.value" v-model="selectedLocaleId" />
+					<FileIssueForm
+						:campaign-locale-id="selectedLocaleId"
+						:submitting="flow.submitting.value"
+						:uploading="flow.uploading.value"
+						@submit="submitIssueFlow"
+						@upload-media="uploadLqaMedia"
+					/>
+					<IssueList :issues="flow.filedIssues.value" />
+				</div>
+
+				<!-- ── Accessibility ── -->
+				<div v-else-if="category === 'accessibility_audit'">
+					<p class="playtest-response-flow__progress">
+						{{ completedCriteriaCount }} / {{ accessibilityKeys.length }}
+						{{ $t("playtest.flow.criteria_completed", "criteria completed") }}
+					</p>
+					<CriterionRow
+						v-for="key in accessibilityKeys"
+						:key="key"
+						:criterion-key="key"
+						:meta="flow.accessibilityCriteria.value[key]"
+						@save="saveAccessibilityEvaluation"
+					/>
+				</div>
+
+				<!-- ── Compliance ── -->
+				<div v-else-if="category === 'compliance' && activeChecklist">
+					<h3 class="playtest-response-flow__question">{{ activeChecklist.name }}</h3>
+					<ChecklistItemRow
+						v-for="item in activeChecklist.items"
+						:key="item.key"
+						:item="item"
+						:uploading="flow.uploading.value"
+						@change="saveComplianceResult"
+						@upload-evidence="uploadComplianceEvidence"
+					/>
+					<button
+						type="button"
+						class="btn primary playtest-response-flow__submit"
+						:disabled="!complianceComplete || flow.submitting.value"
+						@click="submitComplianceFlow"
+					>
+						{{ $t("playtest.flow.submit_checklist", "Submit checklist") }}
+					</button>
+				</div>
+
+				<!-- ── Moderated ── -->
+				<div v-else-if="category === 'moderated'">
+					<JoinCallPanel
+						v-if="sessionId && flow.currentSession.value"
+						:session="flow.currentSession.value"
+						:acting="flow.submitting.value"
+						@confirm="confirmSessionFlow"
+						@cancel="cancelSessionFlow"
+					/>
+					<div v-else class="playtest-response-flow__slots">
+						<SessionCard
+							v-for="slot in flow.moderatedSlots.value"
+							:key="slot.id"
+							variant="slot"
+							:slot="slot"
+							:claiming="flow.submitting.value"
+							@claim="claimSlotFlow"
+						/>
+					</div>
+				</div>
+			</PlaytestBrief>
+		</template>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.playtest-response-flow {
+	&__error {
+		color: var(--danger, #e53935);
+		font-size: 13px;
+		margin-bottom: 12px;
+	}
+
+	&__question {
+		font-size: 16px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0 0 8px;
+	}
+
+	&__description {
+		font-size: 13px;
+		color: var(--secondary-info-fg, #aaa);
+		margin: 0 0 16px;
+	}
+
+	&__progress {
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+		margin: 0 0 10px;
+	}
+
+	&__submit {
+		margin-top: 20px;
+	}
+
+	&__slots {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+}
+</style>