@mundogamernetwork/shared-ui 1.8.22 → 1.9.0

package/components/keys/KeyCampaignComments.vue

@@ -0,0 +1,355 @@
+<template>
+	<section id="comments" class="campaign-comments">
+		<header class="campaign-comments__header">
+			<h3 class="campaign-comments__title">
+				{{ $t("keys.campaigns.comments.title") }}
+				<span v-if="total" class="campaign-comments__count">{{ total }}</span>
+			</h3>
+			<p class="campaign-comments__subtitle">
+				{{ $t("keys.campaigns.comments.subtitle") }}
+			</p>
+		</header>
+
+		<!-- Composer. Rendered only when the API says this viewer may write, so
+		     the rules live in one place instead of being re-derived here. -->
+		<form v-if="canComment" class="campaign-comments__composer" @submit.prevent="submit">
+			<textarea
+				v-model="draft"
+				class="campaign-comments__input"
+				:placeholder="$t('keys.campaigns.comments.placeholder')"
+				:maxlength="2200"
+				rows="3"
+				:disabled="posting"
+			/>
+			<div class="campaign-comments__composer-footer">
+				<span class="campaign-comments__counter">{{ draft.length }}/2200</span>
+				<button type="submit" class="campaign-comments__submit" :disabled="!canSubmit">
+					{{ posting ? $t("keys.campaigns.comments.sending") : $t("keys.campaigns.comments.send") }}
+				</button>
+			</div>
+		</form>
+
+		<p v-else-if="!signedIn" class="campaign-comments__notice">
+			{{ $t("keys.campaigns.comments.sign_in_notice") }}
+		</p>
+		<p v-else class="campaign-comments__notice">
+			{{ $t("keys.campaigns.comments.creators_only_notice") }}
+		</p>
+
+		<p v-if="error" class="campaign-comments__error">{{ error }}</p>
+
+		<div v-if="loading && !comments.length" class="campaign-comments__skeleton">
+			<div v-for="n in 3" :key="n" class="campaign-comments__skeleton-row" />
+		</div>
+
+		<!-- The empty state is a statement of fact ("nobody has posted yet"), so
+		     it must not show when the list is empty merely because the request
+		     failed — the error message above already says what happened. -->
+		<p v-else-if="!comments.length && !error" class="campaign-comments__empty">
+			{{ $t("keys.campaigns.comments.empty") }}
+		</p>
+
+		<ul v-else class="campaign-comments__list">
+			<li v-for="comment in comments" :key="comment.uuid" class="campaign-comments__item">
+				<KeyCampaignCommentItem
+					:comment="comment"
+					:can-moderate="canModerate"
+					:can-reply="canComment"
+					@edit="onEdit"
+					@delete="onDelete"
+					@reply="onReply"
+					@hide="onHide"
+					@unhide="onUnhide"
+				/>
+			</li>
+		</ul>
+
+		<button
+			v-if="hasMore"
+			class="campaign-comments__more"
+			:disabled="loading"
+			@click="loadMore"
+		>
+			{{ $t("keys.campaigns.comments.load_more") }}
+		</button>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue"
+import { useNuxtApp } from "#app"
+import {
+	fetchCampaignComments,
+	postCampaignComment,
+	replyCampaignComment,
+	updateCampaignComment,
+	deleteCampaignComment,
+	hideCampaignComment,
+	unhideCampaignComment,
+	type CampaignComment,
+} from "../../services/campaignService"
+
+const props = defineProps<{
+	keyId: number
+	/**
+	 * Permission flags come from the campaign payload (KeyTransformer) so the
+	 * composer's visibility matches what the API will actually accept. They are
+	 * refreshed from the comments response, which computes them too.
+	 */
+	canComment?: boolean
+	canModerate?: boolean
+	signedIn?: boolean
+}>()
+
+const { $i18n } = useNuxtApp()
+
+const comments = ref<CampaignComment[]>([])
+const page = ref(1)
+const lastPage = ref(1)
+const total = ref(0)
+const loading = ref(false)
+const posting = ref(false)
+const error = ref("")
+const draft = ref("")
+
+const canComment = ref(props.canComment ?? false)
+const canModerate = ref(props.canModerate ?? false)
+
+const hasMore = computed(() => page.value < lastPage.value)
+const canSubmit = computed(() => !posting.value && draft.value.trim().length >= 2)
+
+async function load(targetPage = 1) {
+	loading.value = true
+	error.value = ""
+	try {
+		const { data } = await fetchCampaignComments(props.keyId, targetPage)
+		comments.value = targetPage === 1 ? data.data : [...comments.value, ...data.data]
+		page.value = data.meta.current_page
+		lastPage.value = data.meta.last_page
+		total.value = data.meta.total
+		canComment.value = data.can_comment
+		canModerate.value = data.can_moderate
+	} catch (_) {
+		// $i18n from useNuxtApp, not globalThis.$nuxt — the latter is undefined
+		// during SSR and on a fresh client load, which rendered the literal
+		// string "undefined" where the error message should be.
+		error.value = $i18n.t("keys.campaigns.comments.load_error")
+	} finally {
+		loading.value = false
+	}
+}
+
+const loadMore = () => load(page.value + 1)
+
+async function submit() {
+	if (!canSubmit.value) return
+	posting.value = true
+	error.value = ""
+	try {
+		await postCampaignComment(props.keyId, draft.value.trim())
+		draft.value = ""
+		// Reload rather than unshifting locally: the server owns ordering and
+		// the permission flags, and a fresh page keeps them honest.
+		await load(1)
+	} catch (e: any) {
+		error.value = e?.response?.data?.message || e?.response?.data?.errors?.body?.[0] || ""
+	} finally {
+		posting.value = false
+	}
+}
+
+async function onReply({ uuid, body }: { uuid: string; body: string }) {
+	await replyCampaignComment(uuid, body)
+	await load(1)
+}
+
+async function onEdit({ uuid, body }: { uuid: string; body: string }) {
+	await updateCampaignComment(uuid, body)
+	await load(page.value)
+}
+
+async function onDelete(uuid: string) {
+	await deleteCampaignComment(uuid)
+	await load(1)
+}
+
+async function onHide({ uuid, reason }: { uuid: string; reason?: string }) {
+	await hideCampaignComment(uuid, reason)
+	await load(page.value)
+}
+
+async function onUnhide(uuid: string) {
+	await unhideCampaignComment(uuid)
+	await load(page.value)
+}
+
+onMounted(() => load(1))
+</script>
+
+<style lang="scss" scoped>
+/* Theme tokens only — no literal colours. Every variable used here is defined
+   in both _light.scss and _dark.scss of agency-frontend, community-frontend and
+   tv-frontend, which are the fronts that render this page. Note the themes are
+   not "light = pale": agency's .light-mode sets --body-bg to #18181a, so a
+   hardcoded translucent-white surface would be invisible in one of them. */
+.campaign-comments {
+	margin-top: 2.5rem;
+}
+
+.campaign-comments__header {
+	margin-bottom: 1.25rem;
+}
+
+.campaign-comments__title {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 1.25rem;
+	font-weight: 700;
+	margin: 0;
+	color: var(--title-fg);
+}
+
+.campaign-comments__count {
+	font-size: 0.875rem;
+	font-weight: 600;
+	padding: 0.125rem 0.5rem;
+	color: var(--title-fg);
+	background: var(--card-article-bg);
+	border: 1px solid var(--card-article-border);
+}
+
+.campaign-comments__subtitle {
+	margin: 0.25rem 0 0;
+	font-size: 0.875rem;
+	color: var(--secondary-info-fg);
+}
+
+.campaign-comments__composer {
+	margin-bottom: 1.5rem;
+}
+
+.campaign-comments__input {
+	width: 100%;
+	padding: 0.75rem;
+	/* Deliberately NOT --input-bg/--input-fg: --input-bg is #CCCCCC in both
+	   themes while --input-fg is #FFFFFF in dark, giving 1.61:1 — unreadable.
+	   These two invert with the theme and measure above 4.5:1 in both. */
+	background: var(--card-article-bg);
+	border: 1px solid var(--input-border-color);
+	color: var(--title-fg);
+	font: inherit;
+	resize: vertical;
+
+	&::placeholder {
+		color: var(--secondary-info-fg);
+	}
+
+	&:focus {
+		outline: none;
+		border-color: var(--key-accent, var(--primary));
+	}
+}
+
+.campaign-comments__composer-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.75rem;
+	margin-top: 0.5rem;
+}
+
+.campaign-comments__counter {
+	font-size: 0.75rem;
+	color: var(--secondary-info-fg);
+}
+
+/* Matches the .btn convention of the campaign page itself. */
+.campaign-comments__submit {
+	height: 44px;
+	padding: 0 1.25rem;
+	background: var(--key-accent, var(--primary));
+	color: #000;
+	border: 0;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.campaign-comments__submit:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.campaign-comments__notice,
+.campaign-comments__empty {
+	font-size: 0.875rem;
+	color: var(--secondary-info-fg);
+	margin: 0 0 1.25rem;
+}
+
+.campaign-comments__error {
+	font-size: 0.875rem;
+	color: var(--danger);
+	margin: 0 0 1rem;
+}
+
+.campaign-comments__list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: grid;
+	gap: 1rem;
+}
+
+.campaign-comments__skeleton {
+	display: grid;
+	gap: 1rem;
+}
+
+/* Skeleton, not spinner — the list shape is known before the data arrives. */
+.campaign-comments__skeleton-row {
+	height: 4.5rem;
+	background: var(--card-article-bg);
+	animation: campaign-comments-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes campaign-comments-pulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.45; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.campaign-comments__skeleton-row { animation: none; }
+}
+
+.campaign-comments__more {
+	margin-top: 1.25rem;
+	height: 44px;
+	padding: 0 1rem;
+	background: transparent;
+	border: 1px solid var(--card-article-border);
+	color: var(--title-fg);
+	cursor: pointer;
+}
+
+/* Same breakpoint the campaign page uses for its own stacking. */
+@media (max-width: 768px) {
+	.campaign-comments {
+		margin-top: 1.75rem;
+	}
+
+	.campaign-comments__title {
+		font-size: 1.125rem;
+	}
+
+	.campaign-comments__composer-footer {
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	.campaign-comments__submit,
+	.campaign-comments__more {
+		width: 100%;
+	}
+}
+</style>

package/components/keys/KeyCampaignDashboardCard.vue

@@ -370,7 +370,7 @@ const detailRoute = computed(() =>
 
 	&__days {
 		font-size: 11px;
-		color: var(--text-secondary, #aaa);
+		color: var(--secondary-info-fg);
 	}
 
 	&__type {
@@ -401,7 +401,7 @@ const detailRoute = computed(() =>
 		font-weight: 600;
 		padding: 2px 6px;
 		border: 1px solid var(--border-color, rgba(255,255,255,0.2));
-		color: var(--text-secondary, #aaa);
+		color: var(--secondary-info-fg);
 		text-transform: uppercase;
 		letter-spacing: 0.4px;
 	}

package/components/keys/KeyCampaignFeedback.vue

@@ -0,0 +1,250 @@
+<template>
+	<section v-if="canRate || submitted" class="campaign-feedback">
+		<header class="campaign-feedback__header">
+			<h3 class="campaign-feedback__title">{{ $t("keys.campaigns.feedback.title") }}</h3>
+			<p class="campaign-feedback__subtitle">
+				{{ $t("keys.campaigns.feedback.subtitle", { game: gameName }) }}
+			</p>
+		</header>
+
+		<p v-if="submitted" class="campaign-feedback__done">
+			{{ $t("keys.campaigns.feedback.submitted", { game: gameName }) }}
+			<a v-if="gameSlug" :href="gameUrl" class="campaign-feedback__link">
+				{{ $t("keys.campaigns.feedback.view_on_game_page") }}
+			</a>
+		</p>
+
+		<form v-else class="campaign-feedback__form" @submit.prevent="submit">
+			<div class="campaign-feedback__stars" role="radiogroup" :aria-label="$t('keys.campaigns.feedback.rating_label')">
+				<button
+					v-for="star in 5"
+					:key="star"
+					type="button"
+					class="campaign-feedback__star"
+					:class="{ 'campaign-feedback__star--on': star <= rating }"
+					role="radio"
+					:aria-checked="star === rating"
+					:aria-label="String(star)"
+					@click="rating = star"
+				>
+					★
+				</button>
+			</div>
+
+			<input
+				v-model="title"
+				type="text"
+				class="campaign-feedback__input"
+				:maxlength="191"
+				:placeholder="$t('keys.campaigns.feedback.title_placeholder')"
+			>
+
+			<textarea
+				v-model="body"
+				class="campaign-feedback__input campaign-feedback__textarea"
+				rows="4"
+				:maxlength="2200"
+				:placeholder="$t('keys.campaigns.feedback.body_placeholder')"
+			/>
+
+			<!-- Not decoration: the API rejects the submission without it, because
+			     this rating counts towards the game's public average. -->
+			<label class="campaign-feedback__disclosure">
+				<input v-model="disclosure" type="checkbox">
+				<span>{{ $t("keys.campaigns.feedback.disclosure") }}</span>
+			</label>
+
+			<p class="campaign-feedback__note">{{ $t("keys.campaigns.feedback.average_note") }}</p>
+
+			<p v-if="error" class="campaign-feedback__error">{{ error }}</p>
+
+			<button type="submit" class="campaign-feedback__submit" :disabled="!canSubmit">
+				{{ sending ? $t("keys.campaigns.feedback.sending") : $t("keys.campaigns.feedback.send") }}
+			</button>
+		</form>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import { submitCampaignGameRating } from "../../services/campaignService"
+
+const props = defineProps<{
+	keyId: number
+	/** From the campaign payload — true only for creators who revealed a key. */
+	canRate?: boolean
+	gameName?: string
+	gameSlug?: string
+	locale?: string
+}>()
+
+const rating = ref(0)
+const title = ref("")
+const body = ref("")
+const disclosure = ref(false)
+const sending = ref(false)
+const submitted = ref(false)
+const error = ref("")
+
+const gameName = computed(() => props.gameName || "")
+const gameUrl = computed(() => `/${props.locale || "en"}/game/${props.gameSlug}?tab=ratings`)
+
+const canSubmit = computed(() => !sending.value && rating.value > 0 && disclosure.value)
+
+async function submit() {
+	if (!canSubmit.value) return
+	sending.value = true
+	error.value = ""
+	try {
+		await submitCampaignGameRating(props.keyId, {
+			rating: rating.value,
+			comment_title: title.value || undefined,
+			user_comment: body.value || undefined,
+			disclosure_acknowledged: disclosure.value,
+		})
+		submitted.value = true
+	} catch (e: any) {
+		error.value =
+			e?.response?.data?.message ||
+			e?.response?.data?.errors?.disclosure_acknowledged?.[0] ||
+			e?.response?.data?.errors?.rating?.[0] ||
+			""
+	} finally {
+		sending.value = false
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+/* Theme tokens only — see KeyCampaignComments.vue for why no literal colours. */
+.campaign-feedback {
+	margin-top: 2.5rem;
+	padding: 1.25rem;
+	background: var(--card-article-bg);
+	border: 1px solid var(--card-article-border);
+}
+
+.campaign-feedback__title {
+	margin: 0;
+	font-size: 1.125rem;
+	font-weight: 700;
+	color: var(--title-fg);
+}
+
+.campaign-feedback__subtitle {
+	margin: 0.25rem 0 1rem;
+	font-size: 0.875rem;
+	color: var(--secondary-info-fg);
+}
+
+.campaign-feedback__stars {
+	display: flex;
+	gap: 0.25rem;
+	margin-bottom: 0.875rem;
+}
+
+.campaign-feedback__star {
+	background: none;
+	border: 0;
+	padding: 0.125rem;
+	font-size: 1.75rem;
+	line-height: 1;
+	cursor: pointer;
+	color: var(--secondary-info-fg);
+}
+
+.campaign-feedback__star--on {
+	color: var(--warning);
+}
+
+.campaign-feedback__input {
+	display: block;
+	width: 100%;
+	margin-bottom: 0.75rem;
+	padding: 0.625rem;
+	/* See KeyCampaignComments.vue: --input-bg/--input-fg is 1.61:1 in dark. */
+	background: var(--card-article-bg);
+	border: 1px solid var(--input-border-color);
+	color: var(--title-fg);
+	font: inherit;
+
+	&::placeholder {
+		color: var(--secondary-info-fg);
+	}
+
+	&:focus {
+		outline: none;
+		border-color: var(--key-accent, var(--primary));
+	}
+}
+
+.campaign-feedback__textarea {
+	resize: vertical;
+}
+
+.campaign-feedback__disclosure {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+	font-size: 0.8125rem;
+	margin-bottom: 0.5rem;
+	color: var(--card-article-title);
+	cursor: pointer;
+}
+
+.campaign-feedback__note {
+	margin: 0 0 0.875rem;
+	font-size: 0.75rem;
+	color: var(--secondary-info-fg);
+}
+
+.campaign-feedback__error {
+	margin: 0 0 0.75rem;
+	font-size: 0.8125rem;
+	color: var(--danger);
+}
+
+.campaign-feedback__submit {
+	height: 44px;
+	padding: 0 1.25rem;
+	background: var(--key-accent, var(--primary));
+	color: #000;
+	border: 0;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.campaign-feedback__submit:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.campaign-feedback__done {
+	margin: 0;
+	font-size: 0.9375rem;
+	color: var(--card-article-title);
+}
+
+.campaign-feedback__link {
+	margin-left: 0.5rem;
+	color: var(--key-accent, var(--primary));
+	text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+	.campaign-feedback {
+		margin-top: 1.75rem;
+		padding: 1rem;
+	}
+
+	/* Bigger hit area: 28px stars at 4px gaps miss constantly on touch. */
+	.campaign-feedback__star {
+		font-size: 2rem;
+		padding: 0.25rem;
+	}
+
+	.campaign-feedback__submit {
+		width: 100%;
+	}
+}
+</style>

package/components/keys/KeyRevealModal.vue

@@ -77,7 +77,7 @@ function copyCode() {
 
   &__sub {
     font-size: 0.88rem;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     margin: 0;
   }
 
@@ -112,7 +112,7 @@ function copyCode() {
   &__copy {
     background: none;
     border: none;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     cursor: pointer;
     font-size: 1.1rem;
     padding: 4px;