@mundogamernetwork/shared-ui 1.16.22 → 1.16.24

package/components/indie-wall/MediaKitWallBlock.vue

@@ -47,7 +47,7 @@ const wallUrl = computed(() => {
 
 const detailPixelPageUrl = computed(() => {
 	if (!wall.value || !detailPixel.value) return '#'
-	return localePath(`/${wall.value.url_prefix || 'mural'}/${wall.value.slug}/pixel/${detailPixel.value.id}`)
+	return `${wallUrl.value}?pixel=${detailPixel.value.id}`
 })
 
 function onTapEmpty(coord: { x: number; y: number }) {

package/components/playtest/build-access/BuildAccessPanel.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+// Single orchestrator for a campaign's NDA-gated build access — mounted once
+// per campaign a tester is eligible for, mirroring AccessGrantPanel.vue's
+// role for the (unrelated, accept-time) key/link grant. Renders nothing if
+// the campaign has no ready build asset at all, so campaigns that don't use
+// this feature (concept polls, etc.) show no empty panel.
+import { onMounted, computed, ref } from "vue";
+import { usePlaytestBuildAccess } from "../../../composables/usePlaytestBuildAccess";
+import NdaSign from "./NdaSign.vue";
+import BuildDownload from "./BuildDownload.vue";
+import ReportProblemForm from "./ReportProblemForm.vue";
+import type { StoreBuildProblemReportPayload } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	campaignId: number;
+}>();
+
+const state = usePlaytestBuildAccess(props.campaignId);
+
+const hasAnyBuild = computed(() => state.assets.value.length > 0);
+
+// Available at ANY grant status, including pending_nda/revoked — a tester
+// stuck in the sign flow itself (e.g. never got the OTP email) or whose
+// access was pulled still needs a way to reach the studio privately. Never
+// a public wall.
+const showReportForm = ref(false);
+const reportFormRef = ref<InstanceType<typeof ReportProblemForm> | null>(null);
+
+onMounted(async () => {
+	await state.loadAssets();
+	if (hasAnyBuild.value) {
+		await state.requestAccess();
+	}
+});
+
+async function onDownload(assetId: number) {
+	const url = await state.getDownloadUrl(assetId);
+	if (url) window.open(url, "_blank", "noopener");
+}
+
+function openReportForm() {
+	state.reportSuccess.value = false;
+	showReportForm.value = true;
+}
+
+async function onReportSubmit(payload: StoreBuildProblemReportPayload) {
+	// showReportForm stays true on success — the reportSuccess branch inside
+	// the v-else block below is what actually renders the confirmation.
+	await state.submitProblemReport(payload);
+}
+
+async function onUploadReportMedia(file: File) {
+	const url = await state.uploadReportMedia(file);
+	reportFormRef.value?.setMediaUrl(url);
+}
+</script>
+
+<template>
+	<div v-if="state.loading.value" class="build-access-panel build-access-panel--loading">
+		<div class="build-access-panel__skeleton" />
+	</div>
+
+	<div v-else-if="hasAnyBuild" class="build-access-panel">
+		<NdaSign
+			v-if="state.grant.value?.status === 'pending_nda'"
+			:envelope="state.envelope.value"
+			:signer="state.signer.value"
+			:submitting="state.submitting.value"
+			:otp-initiated="state.otpInitiated.value"
+			:error="state.genericError.value"
+			@send-code="state.sendCode"
+			@verify="state.verifyOtp"
+			@accept-consent="state.acceptConsent"
+			@sign="state.sign"
+		/>
+
+		<BuildDownload
+			v-else-if="state.grant.value?.status === 'nda_signed'"
+			:assets="state.assets.value"
+			:submitting="state.submitting.value"
+			:error="state.genericError.value"
+			@download="onDownload"
+		/>
+
+		<div v-else-if="state.grant.value?.status === 'revoked'" class="build-access-panel__revoked">
+			<p class="build-access-panel__revoked-title">
+				{{ $t("playtest.build_access.revoked", "Your access to this build has been revoked.") }}
+			</p>
+			<p class="build-access-panel__revoked-hint">
+				{{ $t("playtest.build_access.revoked_hint", "This is usually done by the studio running the campaign.") }}
+				<button type="button" class="build-access-panel__revoked-link" @click="openReportForm">
+					{{ $t("playtest.build_access.revoked_contact_link", "If you think this is a mistake, let them know.") }}
+				</button>
+			</p>
+		</div>
+
+		<div v-if="state.grant.value" class="build-access-panel__contact">
+			<button
+				v-if="!showReportForm"
+				type="button"
+				class="build-access-panel__contact-toggle"
+				@click="openReportForm"
+			>
+				{{ $t("playtest.build_access.report_problem", "Report a problem") }}
+			</button>
+
+			<template v-else>
+				<div v-if="state.reportSuccess.value" class="build-access-panel__report-sent-wrap">
+					<p class="build-access-panel__report-sent">
+						{{ $t("playtest.build_access.report_sent", "Sent — only the studio can see this.") }}
+					</p>
+					<button type="button" class="build-access-panel__contact-toggle" @click="openReportForm">
+						{{ $t("playtest.build_access.report_another", "Send another report") }}
+					</button>
+				</div>
+				<template v-else>
+					<ReportProblemForm
+						ref="reportFormRef"
+						:assets="state.assets.value"
+						:submitting="state.reportSubmitting.value"
+						:uploading="state.reportUploading.value"
+						@submit="onReportSubmit"
+						@upload-media="onUploadReportMedia"
+					/>
+					<p v-if="state.reportError.value" class="build-access-panel__report-error">{{ state.reportError.value }}</p>
+				</template>
+			</template>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.build-access-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: build-access-panel-pulse 1.4s ease-in-out infinite;
+	}
+
+	&__revoked {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	&__revoked-title {
+		font-size: 13px;
+		color: var(--danger, #e53935);
+		margin: 0;
+	}
+
+	&__revoked-hint {
+		font-size: 12px;
+		color: var(--secondary-info-fg, #888);
+		margin: 0;
+	}
+
+	&__revoked-link {
+		background: none;
+		border: none;
+		padding: 0;
+		margin-left: 4px;
+		font-size: 12px;
+		color: var(--primary, #d297ff);
+		cursor: pointer;
+		text-decoration: underline;
+	}
+
+	&__contact {
+		margin-top: 14px;
+		padding-top: 14px;
+		border-top: 1px solid var(--button-secondary-default-bg);
+	}
+
+	&__contact-toggle {
+		background: none;
+		border: none;
+		padding: 0;
+		font-size: 12px;
+		color: var(--primary, #d297ff);
+		cursor: pointer;
+	}
+
+	&__report-sent-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		align-items: flex-start;
+	}
+
+	&__report-sent {
+		font-size: 12px;
+		color: var(--primary, #d297ff);
+		margin: 0;
+	}
+
+	&__report-error {
+		font-size: 12px;
+		color: var(--danger, #e53935);
+		margin: 8px 0 0;
+	}
+}
+
+@keyframes build-access-panel-pulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.4; }
+}
+</style>

package/components/playtest/build-access/BuildDownload.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+// Lists a campaign's ready build assets, each with a Download button that
+// calls the download endpoint FRESH every click — the returned URL is a
+// 5-minute presigned S3 link and is never cached/reused, unlike
+// AccessGrantReveal's masked-value-already-in-hand pattern (that value
+// never expires; this one deliberately does).
+import type { PlaytestBuildAsset } from "../../../services/playtestTesterService";
+
+defineProps<{
+	assets: PlaytestBuildAsset[];
+	submitting: boolean;
+	error?: string | null;
+}>();
+
+const emit = defineEmits<{
+	(e: "download", assetId: number): void;
+}>();
+
+function formatSize(bytes: number | null): string {
+	if (!bytes) return "";
+	const mb = bytes / (1024 * 1024);
+	return mb >= 1024 ? `${(mb / 1024).toFixed(1)} GB` : `${mb.toFixed(1)} MB`;
+}
+</script>
+
+<template>
+	<div class="build-download">
+		<h3 class="build-download__title">
+			{{ $t("playtest.build_access.builds_title", "Available builds") }}
+		</h3>
+
+		<p v-if="error" class="build-download__error">{{ error }}</p>
+
+		<div v-if="!assets.length" class="build-download__empty">
+			{{ $t("playtest.build_access.no_builds", "No build has been uploaded yet.") }}
+		</div>
+
+		<div v-else class="build-download__list">
+			<div v-for="asset in assets" :key="asset.id" class="build-download__row">
+				<div class="build-download__main">
+					<div class="build-download__info">
+						<span class="build-download__platform">{{ asset.platform }}</span>
+						<span class="build-download__filename">{{ asset.original_filename }}</span>
+						<span v-if="asset.version_label" class="build-download__version">{{ asset.version_label }}</span>
+						<span v-if="asset.size_bytes" class="build-download__size">{{ formatSize(asset.size_bytes) }}</span>
+					</div>
+					<p v-if="asset.notes" class="build-download__notes">{{ asset.notes }}</p>
+				</div>
+				<button
+					type="button"
+					class="btn primary"
+					:disabled="submitting"
+					@click="emit('download', asset.id)"
+				>
+					{{ $t("playtest.build_access.download", "Download") }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.build-download {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+
+	&__title {
+		font-size: 15px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0;
+	}
+
+	&__empty {
+		font-size: 13px;
+		color: var(--secondary-info-fg, #888);
+	}
+
+	&__error {
+		font-size: 12px;
+		color: var(--danger, #e53935);
+		margin: 0;
+	}
+
+	&__list {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		padding: 10px 12px;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 1px solid var(--bg-app-badge);
+	}
+
+	&__main {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		flex: 1;
+	}
+
+	&__info {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: 8px;
+		font-size: 13px;
+	}
+
+	&__notes {
+		white-space: pre-wrap;
+		font-size: 11px;
+		color: var(--secondary-info-fg, #888);
+		margin: 0;
+	}
+
+	&__platform {
+		text-transform: uppercase;
+		font-size: 10px;
+		font-weight: 700;
+		color: var(--primary, #d297ff);
+	}
+
+	&__filename {
+		color: var(--card-article-title, #fff);
+	}
+
+	&__version,
+	&__size {
+		color: var(--secondary-info-fg, #888);
+		font-size: 11px;
+	}
+}
+</style>

package/components/playtest/build-access/NdaSign.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+// NDA review + sign — document (text or embedded PDF) -> OTP -> consent ->
+// sign. Purely presentational, mirrors AccessGrantWaiver.vue's role:
+// BuildAccessPanel.vue owns the actual usePlaytestBuildAccess() calls. Four
+// steps instead of AccessGrantWaiver's two because a real NDA needs an
+// explicit clickwrap consent step separate from "I have the right code" —
+// the old liability-waiver flow this replaces skipped that.
+import { ref, computed } from "vue";
+import type { EsignatureEnvelope, EsignatureSignerState } from "../../../services/esignatureService";
+
+const props = defineProps<{
+	envelope: EsignatureEnvelope | null;
+	signer: EsignatureSignerState | null;
+	submitting: boolean;
+	otpInitiated: boolean;
+	error?: string | null;
+}>();
+
+const emit = defineEmits<{
+	(e: "send-code"): void;
+	(e: "verify", otpCode: string): void;
+	(e: "accept-consent"): void;
+	(e: "sign"): void;
+}>();
+
+const otpCode = ref("");
+const consentChecked = ref(false);
+
+const step = computed<"otp" | "consent" | "sign">(() => {
+	if (!props.signer?.otp_verified) return "otp";
+	if (props.signer.status !== "consented" && props.signer.status !== "signed") return "consent";
+	return "sign";
+});
+
+function submitCode() {
+	if (!otpCode.value) return;
+	emit("verify", otpCode.value);
+}
+</script>
+
+<template>
+	<div class="nda-sign">
+		<h3 class="nda-sign__title">
+			{{ $t("playtest.build_access.nda_title", "Sign the NDA to access this build") }}
+		</h3>
+
+		<div class="nda-sign__document">
+			<div v-if="envelope?.content_type === 'html'" class="nda-sign__document-html" v-html="envelope.document_html" />
+			<div v-else-if="envelope?.content_type === 'file' && envelope.document_file_preview_url" class="nda-sign__document-file">
+				<a :href="envelope.document_file_preview_url" target="_blank" rel="noopener">
+					{{ $t("playtest.build_access.view_pdf", "View the NDA document (PDF)") }} ↗
+				</a>
+			</div>
+		</div>
+
+		<p v-if="error" class="nda-sign__error">{{ error }}</p>
+
+		<!-- Step 1: OTP -->
+		<div v-if="step === 'otp'" class="nda-sign__step">
+			<div v-if="!otpInitiated" class="nda-sign__actions">
+				<button type="button" class="btn primary" :disabled="submitting" @click="emit('send-code')">
+					{{ submitting
+						? $t("playtest.build_access.sending_code", "Sending code…")
+						: $t("playtest.build_access.send_code", "Send verification code") }}
+				</button>
+			</div>
+			<div v-else class="nda-sign__otp">
+				<label class="nda-sign__label" for="nda-otp">
+					{{ $t("playtest.build_access.enter_code", "Enter the 6-digit code we emailed you") }}
+				</label>
+				<div class="nda-sign__otp-row">
+					<input
+						id="nda-otp"
+						v-model="otpCode"
+						type="text"
+						inputmode="numeric"
+						maxlength="6"
+						class="nda-sign__otp-input"
+						:disabled="submitting"
+						@keyup.enter="submitCode"
+					/>
+					<button type="button" class="btn primary" :disabled="submitting || otpCode.length === 0" @click="submitCode">
+						{{ submitting ? $t("playtest.build_access.verifying", "Verifying…") : $t("playtest.build_access.verify", "Verify") }}
+					</button>
+				</div>
+				<button type="button" class="nda-sign__resend" :disabled="submitting" @click="emit('send-code')">
+					{{ $t("playtest.build_access.resend_code", "Resend code") }}
+				</button>
+			</div>
+		</div>
+
+		<!-- Step 2: Consent -->
+		<div v-else-if="step === 'consent'" class="nda-sign__step">
+			<label class="nda-sign__consent-row">
+				<input type="checkbox" v-model="consentChecked" :disabled="submitting" />
+				{{ $t("playtest.build_access.consent_checkbox", "I have read and agree to the terms of this NDA") }}
+			</label>
+			<button
+				type="button"
+				class="btn primary"
+				:disabled="submitting || !consentChecked"
+				@click="emit('accept-consent')"
+			>
+				{{ submitting ? $t("playtest.build_access.accepting", "Accepting…") : $t("playtest.build_access.accept_consent", "Accept") }}
+			</button>
+		</div>
+
+		<!-- Step 3: Sign -->
+		<div v-else class="nda-sign__step">
+			<button type="button" class="btn primary" :disabled="submitting" @click="emit('sign')">
+				{{ submitting ? $t("playtest.build_access.signing", "Signing…") : $t("playtest.build_access.sign", "Sign NDA") }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.nda-sign {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+
+	&__title {
+		font-size: 15px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0;
+	}
+
+	&__document {
+		max-height: 260px;
+		overflow-y: auto;
+		padding: 12px;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 1px solid var(--bg-app-badge);
+		font-size: 12px;
+		color: var(--secondary-info-fg, #ccc);
+	}
+
+	&__document-html {
+		:deep(p) { margin: 0 0 8px; }
+	}
+
+	&__document-file a {
+		color: var(--primary, #d297ff);
+	}
+
+	&__error {
+		font-size: 12px;
+		color: var(--danger, #e53935);
+		margin: 0;
+	}
+
+	&__step {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	&__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;
+		}
+	}
+
+	&__consent-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		color: var(--secondary-info-fg, #ccc);
+	}
+}
+</style>