@mundogamernetwork/shared-ui 1.10.0 → 1.11.0

package/components/playtest/PlaytestInviteLanding.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+// Public landing for a studio's playtest invitation link.
+//
+// Shared rather than owned by one app for the same reason PlaytestResponseFlow
+// is: the tester experience already mounts in both community-frontend and
+// agency-frontend, and an invitee can legitimately arrive at either. The page
+// files in each app are thin wrappers around this.
+//
+// Deliberately readable with no account. Playtest participation genuinely
+// requires one — playtest_responses.user_id is NOT NULL and rewards are paid
+// in MGC, which needs a wallet — but a login wall in front of a stranger being
+// asked for a favour is the highest-friction possible version of that request.
+// So the game, the reward and the deadline come first, and the account is only
+// asked for at the point of accepting.
+import { computed, onMounted, ref } from "vue";
+import {
+	fetchPlaytestInvitation,
+	type PlaytestInvitationLanding,
+} from "../../services/playtestTesterService";
+
+const props = defineProps<{
+	token: string;
+	/**
+	 * Where accepting sends someone who has no account yet. Supplied by the
+	 * consuming app because the registration host differs per product, and
+	 * carrying the invitation token through means the invite is not lost in
+	 * the signup.
+	 */
+	registerUrl: string;
+	/** Route to the campaign for a visitor who is already signed in. */
+	campaignPath: string;
+	signedIn?: boolean;
+}>();
+
+const { t } = useI18n();
+
+const invitation = ref<PlaytestInvitationLanding | null>(null);
+const loading = ref(true);
+/** 'not_found' (bad link) vs 'gone' (spent or expired) — different messages. */
+const failure = ref<"not_found" | "gone" | "error" | null>(null);
+
+const campaign = computed(() => invitation.value?.campaign ?? null);
+
+const rewardLabel = computed(() => {
+	const c = campaign.value;
+	if (!c || c.reward_amount === null || c.reward_amount === undefined) return "";
+
+	return c.reward_type === "cash"
+		? `${c.reward_amount} ${c.reward_currency ?? "USD"}`
+		: `${c.reward_amount} MGC`;
+});
+
+const expiresLabel = computed(() => {
+	const raw = invitation.value?.expires_at;
+	if (!raw) return "";
+
+	const date = new Date(raw);
+
+	return Number.isNaN(date.getTime()) ? "" : date.toLocaleDateString();
+});
+
+onMounted(async () => {
+	try {
+		const { data } = await fetchPlaytestInvitation(props.token);
+		invitation.value = ((data as any)?.data ?? data) as PlaytestInvitationLanding;
+	} catch (e: any) {
+		// The endpoint separates these on purpose: 404 means the link is wrong,
+		// 410 means it was real and is no longer usable. Telling someone their
+		// link is invalid when it simply expired sends them looking for a
+		// typo that is not there.
+		const status = e?.response?.status;
+		failure.value = status === 404 ? "not_found" : status === 410 ? "gone" : "error";
+	} finally {
+		loading.value = false;
+	}
+});
+</script>
+
+<template>
+	<div class="pil">
+		<div v-if="loading" class="pil__loading">
+			<div class="pil__skeleton pil__skeleton--title" />
+			<div class="pil__skeleton" />
+			<div class="pil__skeleton" />
+		</div>
+
+		<div v-else-if="failure" class="pil__failure">
+			<h1>{{ t(`playtest_invite.failure_${failure}_title`) }}</h1>
+			<p>{{ t(`playtest_invite.failure_${failure}_body`) }}</p>
+		</div>
+
+		<template v-else>
+			<p class="pil__eyebrow">{{ t('playtest_invite.eyebrow') }}</p>
+			<h1 class="pil__title">{{ campaign?.title }}</h1>
+			<p class="pil__lead">{{ t('playtest_invite.lead') }}</p>
+
+			<div class="pil__facts">
+				<div v-if="rewardLabel" class="pil__fact">
+					<strong>{{ rewardLabel }}</strong>
+					<span>{{ t('playtest_invite.fact_reward') }}</span>
+				</div>
+				<div v-if="expiresLabel" class="pil__fact">
+					<strong>{{ expiresLabel }}</strong>
+					<span>{{ t('playtest_invite.fact_expires') }}</span>
+				</div>
+			</div>
+
+			<!-- Someone already signed in has no reason to see a signup CTA. -->
+			<NuxtLink v-if="signedIn" :to="campaignPath" class="pil__cta">
+				{{ t('playtest_invite.cta_open') }}
+			</NuxtLink>
+			<a v-else :href="registerUrl" class="pil__cta">
+				{{ t('playtest_invite.cta_join') }}
+			</a>
+
+			<!-- Stated plainly rather than discovered at the end of a signup:
+			     taking part needs an account because the reward is paid into a
+			     wallet. Surprising someone with that after they commit is worse
+			     than telling them now. -->
+			<p class="pil__note">{{ t('playtest_invite.account_note') }}</p>
+
+			<div class="pil__perks">
+				<h2>{{ t('playtest_invite.perks_title') }}</h2>
+				<ul>
+					<li>{{ t('playtest_invite.perk_playtests') }}</li>
+					<li>{{ t('playtest_invite.perk_keys') }}</li>
+					<li>{{ t('playtest_invite.perk_rewards') }}</li>
+				</ul>
+			</div>
+		</template>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.pil {
+	margin: 0 auto;
+	max-width: 640px;
+	padding: 40px 20px 64px;
+
+	&__eyebrow {
+		color: #fdb215;
+		font-size: 0.8rem;
+		font-weight: 700;
+		letter-spacing: 0.08em;
+		margin: 0 0 8px;
+		text-transform: uppercase;
+	}
+
+	&__title {
+		font-size: 1.9rem;
+		line-height: 1.2;
+		margin: 0 0 12px;
+	}
+
+	&__lead {
+		font-size: 1rem;
+		line-height: 1.6;
+		margin: 0 0 24px;
+		opacity: 0.85;
+	}
+
+	&__facts {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+		margin-bottom: 24px;
+	}
+
+	&__fact {
+		border: 1px solid rgba(128, 128, 128, 0.3);
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 140px;
+		padding: 12px 16px;
+
+		strong { font-size: 1.15rem; }
+		span { font-size: 0.78rem; opacity: 0.7; }
+	}
+
+	&__cta {
+		background: #fdb215;
+		color: #13161c;
+		display: inline-block;
+		font-size: 1rem;
+		font-weight: 700;
+		padding: 14px 32px;
+		text-decoration: none;
+	}
+
+	&__note {
+		font-size: 0.85rem;
+		margin: 14px 0 0;
+		opacity: 0.7;
+	}
+
+	&__perks {
+		border-top: 1px solid rgba(128, 128, 128, 0.25);
+		margin-top: 36px;
+		padding-top: 24px;
+
+		h2 { font-size: 1rem; margin: 0 0 12px; }
+
+		ul { margin: 0; padding-left: 20px; }
+		li { line-height: 1.7; opacity: 0.85; }
+	}
+
+	&__failure {
+		padding: 40px 0;
+		text-align: center;
+
+		h1 { font-size: 1.4rem; margin: 0 0 10px; }
+		p { margin: 0; opacity: 0.75; }
+	}
+
+	&__skeleton {
+		background: rgba(128, 128, 128, 0.18);
+		height: 18px;
+		margin-bottom: 12px;
+
+		&--title { height: 34px; width: 70%; }
+	}
+}
+</style>

package/package.json

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

package/services/playtestTesterService.ts

@@ -293,6 +293,32 @@ export const fetchPlaytestCatalog = () =>
 export const fetchAvailablePlaytestCampaigns = () =>
   httpService.get<PlaytestCampaign[]>('/playtest/available')
 
+export interface PlaytestInvitationLanding {
+  email: string
+  name: string | null
+  expires_at: string | null
+  campaign: {
+    id: number
+    title: string | null
+    category: string | null
+    reward_type: string | null
+    reward_amount: number | string | null
+    reward_currency: string | null
+    closes_at: string | null
+  } | null
+}
+
+/**
+ * Public: what a studio's invitation link resolves to.
+ *
+ * Unauthenticated by design — the invitee may have no account yet, and the
+ * point is to show them what they were invited to before asking for one.
+ * Answers 404 for an unknown token and 410 once the invitation is spent or
+ * expired, so the caller can tell "wrong link" from "too late".
+ */
+export const fetchPlaytestInvitation = (token: string) =>
+  httpService.get<{ data: PlaytestInvitationLanding }>(`/playtest/invitations/${token}`)
+
 // ---------------------------------------------------------------------------
 // Baseline (quick/deep, category=null)
 // ---------------------------------------------------------------------------