@mundogamernetwork/shared-ui 1.8.23 → 1.9.0

package/pages/key-campaigns/redeem-key-approved.vue

@@ -8,7 +8,12 @@ import {
 	isSessionExpired,
 	buildReLoginUrl,
 } from "../../services/campaignService"
-import { formatEmbargoDateTime, formatEmbargoCountdown, isEmbargoActive } from "../../utils/embargo"
+import {
+	formatEmbargoDateTime,
+	formatEmbargoCountdown,
+	isEmbargoActive,
+	type EmbargoDisplay,
+} from "../../utils/embargo"
 
 const route = useRoute()
 const { $i18n } = useNuxtApp()
@@ -38,7 +43,7 @@ const platform = ref("")
 // (needsEmbargoAck) — a real consent step, not just the neutral, unenforced
 // date line this page used to show.
 const needsEmbargoAck = ref(false)
-const embargoAckDate = ref<string | null>(null)
+const embargoAckDisplay = ref<EmbargoDisplay | null>(null)
 const embargoAckChecked = ref(false)
 
 // Maps a platform name to its official key-activation page.
@@ -120,7 +125,7 @@ async function reveal(acknowledgeEmbargo = false) {
 			error.value = $i18n.t("keys.campaigns.error_session_expired")
 		} else if (errorCode === "embargo_acknowledgment_required") {
 			needsEmbargoAck.value = true
-			embargoAckDate.value = body.embargo_date || null
+			embargoAckDisplay.value = body.embargo_display || null
 		} else if (code === "NO_KEYS_AVAILABLE" || code === "KEY_ITEM_NOT_FOUND") {
 			error.value = $i18n.t("keys.campaigns.error_no_keys")
 		} else if (code === "KEY_NOT_APPROVED") {
@@ -150,11 +155,11 @@ async function copyCode() {
 }
 
 /**
- * Embargo shown with day AND time, in the timezone the campaign creator set it
- * in — a date alone is not something a creator can comply with.
+ * Embargo shown with day AND time, on the clock the campaign creator set it in
+ * — a date alone is not something a creator can comply with.
  */
-function formatEmbargo(dateString: string | null | undefined): string {
-	return formatEmbargoDateTime(dateString, requestData.value?.key?.embargo_timezone, locale.value)
+function formatEmbargo(display: EmbargoDisplay | null | undefined): string {
+	return formatEmbargoDateTime(display, locale.value)
 }
 
 // Embargo state stays on screen AFTER the code is revealed and on every later
@@ -172,12 +177,16 @@ const prContact = computed(() =>
 		.join(" · "),
 )
 
-const embargoDate = computed<string | null>(() => requestData.value?.key?.embargo_date ?? null)
-const embargoIsActive = computed(() => isEmbargoActive(embargoDate.value))
-const embargoMoment = computed(() => formatEmbargo(embargoDate.value))
+const embargoDisplay = computed<EmbargoDisplay | null>(
+	() => requestData.value?.key?.embargo_display ?? null,
+)
+const embargoIsActive = computed(() => isEmbargoActive(embargoDisplay.value))
+const embargoMoment = computed(() => formatEmbargo(embargoDisplay.value))
 // Recomputed on every reveal/visit; a live ticker would be noise on a page the
 // user opens, copies from and leaves.
-const embargoCountdown = computed(() => formatEmbargoCountdown(embargoDate.value, locale.value))
+const embargoCountdown = computed(() =>
+	formatEmbargoCountdown(embargoDisplay.value, locale.value),
+)
 
 function formatDate(dateString: string | null | undefined): string {
 	if (!dateString) return "-"
@@ -241,7 +250,7 @@ function goBack() {
 								{{ $t("keys.campaigns.embargo_countdown", { relative: embargoCountdown }) }}
 							</p>
 						</template>
-						<template v-else-if="embargoDate">
+						<template v-else-if="embargoDisplay">
 							<strong>{{ $t("keys.campaigns.embargo_lifted_title") }}</strong>
 							<p>{{ $t("keys.campaigns.no_embargo_desc") }}</p>
 						</template>
@@ -261,7 +270,7 @@ function goBack() {
 									<div class="embargo-ack" v-if="!keyCode && needsEmbargoAck">
 										<label class="embargo-ack-label">
 											<input type="checkbox" v-model="embargoAckChecked" />
-											{{ $t("keys.campaigns.embargo_ack_label", { date: formatEmbargo(embargoAckDate) }) }}
+											{{ $t("keys.campaigns.embargo_ack_label", { date: formatEmbargo(embargoAckDisplay) }) }}
 										</label>
 										<button
 											class="btn"

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

@@ -59,7 +59,7 @@ const campaignPath = computed(
 let redirectTimer: ReturnType<typeof setTimeout> | null = null
 
 const embargoDateTime = computed(() =>
-	formatEmbargoDateTime(campaign.value?.embargo_date, campaign.value?.embargo_timezone, locale.value),
+	formatEmbargoDateTime(campaign.value?.embargo_display, locale.value),
 )
 const hasEmbargo = computed(() => !!embargoDateTime.value)
 
@@ -125,11 +125,38 @@ watch(
 	},
 )
 
-// True once options finished loading and either list came back empty — every
-// platform/region combo this campaign ever had is now fully redeemed.
-const soldOut = computed(() => !loading.value && (platforms.value.length === 0 || regions.value.length === 0))
+// `available_count` is what the API actually reports as unclaimed. The
+// platform/region lists only describe how those keys are TAGGED, so inferring
+// "sold out" from an empty list told creators every key had been claimed on
+// campaigns where nothing had been requested at all — any key stored without a
+// region (bulk import, seed, legacy row, a campaign with no regional split)
+// made the whole campaign vanish. Fall back to the old inference only when the
+// API omits the field.
+const availableCount = computed(() => {
+	const raw = campaign.value?.available_count
+	return typeof raw === "number" ? raw : null
+})
+
+const soldOut = computed(() => {
+	if (loading.value) return false
+	if (availableCount.value !== null) return availableCount.value <= 0
+	return platforms.value.length === 0 || regions.value.length === 0
+})
 
-const canSubmit = computed(() => !submitting.value && !soldOut.value)
+// A pool with no regions is legitimate — the studio-side upload offers
+// "Global" and stores region_id = null (KeyPoolController::store). So only a
+// missing PLATFORM makes a pool impossible to request from; the request
+// endpoint requires a platform always, and a region only when the pool has
+// region-locked keys. Calling the global case "sold out" blamed other creators
+// for a campaign nobody had touched.
+const missingOptions = computed(
+	() => !loading.value && !soldOut.value && platforms.value.length === 0,
+)
+
+// Drives both the client-side guard and whether region_ids goes on the wire.
+const regionRequired = computed(() => regions.value.length > 0)
+
+const canSubmit = computed(() => !submitting.value && !soldOut.value && !missingOptions.value)
 
 // Collapsible "Required data" box — matches tv's original toggle behavior
 const isBoxOpen = ref(true)
@@ -166,7 +193,15 @@ async function submit() {
 	if (!canSubmit.value) return
 	requestError.value = ""
 	sessionExpired.value = false
-	if (!selectedPlatformId.value || !selectedRegionId.value || !quantity.value || !description.value?.trim()) {
+	// Region is only demanded when the pool actually offers one — a global pool
+	// (region_id null on every key item) has nothing for the creator to pick,
+	// and requiring it here left the submit button dead with no explanation.
+	if (
+		!selectedPlatformId.value
+		|| (regionRequired.value && !selectedRegionId.value)
+		|| !quantity.value
+		|| !description.value?.trim()
+	) {
 		requestError.value = $i18n.t("keys.campaigns.required_fields")
 		return
 	}
@@ -179,7 +214,9 @@ async function submit() {
 		const response = await requestKey({
 			key_id: keyId,
 			platform_ids: [selectedPlatformId.value],
-			region_ids: [selectedRegionId.value],
+			// Omitted entirely on a global pool — sending [null] would fail
+			// `region_ids.*` => integer.
+			...(selectedRegionId.value ? { region_ids: [selectedRegionId.value] } : {}),
 			description: description.value || "-",
 			quantity_keys: Number(quantity.value) || 1,
 			// Recorded on the request so the acknowledgment is provable, not just
@@ -284,7 +321,7 @@ onUnmounted(() => {
 					<p v-if="campaign?.name" class="campaign-name">{{ campaign.name }}</p>
 				</div>
 
-				<!-- All platform/region combos are fully redeemed -->
+				<!-- Every key really has been claimed -->
 				<div v-if="!hasExistingRequest && soldOut" class="existing-request-notice">
 					<MGIcon size="1x" icon="version" class="notice-icon" />
 					<div class="notice-texts">
@@ -295,6 +332,17 @@ onUnmounted(() => {
 					</button>
 				</div>
 
+				<!-- Keys left, but no platform/region to request them against -->
+				<div v-if="!hasExistingRequest && missingOptions" class="existing-request-notice">
+					<MGIcon size="1x" icon="version" class="notice-icon" />
+					<div class="notice-texts">
+						<div class="notice-title">{{ $t("keys.campaigns.options_unavailable") }}</div>
+					</div>
+					<button class="btn notice-back" @click="goBack">
+						{{ $t("keys.campaigns.back_to_campaign") }}
+					</button>
+				</div>
+
 				<!-- Already has a request -->
 				<div v-else-if="hasExistingRequest" class="existing-request-notice">
 					<MGIcon size="1x" icon="version" class="notice-icon" />

package/pages/presskit/game/[slug].vue

@@ -32,7 +32,7 @@ const lang = SUPPORTED_LOCALES.find(l => routePath.includes(l)) || 'en';
 // kits render on the same public page without needing to be published first.
 const previewToken = route.query.preview_token as string | undefined;
 
-const { data: kitData, error: fetchError, pending } = await useAsyncData(
+const { data: kitData, error: fetchError, pending, refresh: refreshKit } = await useAsyncData(
 	`press-kit-${slug}`,
 	() => $fetch<any>(`${apiBase}/public/press-kits/${slug}`, {
 		params: {
@@ -55,7 +55,30 @@ const { data: moreKitsData } = await useAsyncData(
 
 const kit = computed(() => kitData.value?.data || kitData.value || null);
 const loading = pending;
-const error = computed(() => !!fetchError.value || (!pending.value && !kit.value));
+
+// A request that FAILED is not the same as a kit that does not EXIST. Collapsing
+// both into one "not found" state meant any hiccup — a 5xx, a network blip, SSR
+// unable to reach the API — told the studio its published kit had been removed,
+// on the exact link it sends to journalists, with HTTP 200 and no way to retry.
+// 404/410 is a real absence; everything else is a fault worth retrying.
+const fetchStatus = computed<number | null>(() => {
+	const e = fetchError.value as any;
+	return e?.statusCode ?? e?.status ?? e?.response?.status ?? null;
+});
+const loadFailed = computed(
+	() => !!fetchError.value && !(fetchStatus.value === 404 || fetchStatus.value === 410),
+);
+const notFound = computed(() => !pending.value && !loadFailed.value && !kit.value);
+
+const retrying = ref(false);
+async function retryKit() {
+	retrying.value = true;
+	try {
+		await refreshKit();
+	} finally {
+		retrying.value = false;
+	}
+}
 
 onMounted(() => {
 	if (kit.value && !previewToken) {
@@ -323,7 +346,14 @@ useHead(() => ({
 <template>
 	<div class="kit-press" :data-tpl="tpl" :data-layout="layout">
 		<div v-if="loading" class="kit-state">{{ $t('kit.loading') }}</div>
-		<div v-else-if="error || !kit" class="kit-state kit-state--not-found">
+		<div v-else-if="loadFailed" class="kit-state kit-state--not-found">
+			<h2>{{ $t('kit.press.load_failed') }}</h2>
+			<p class="kit-state__desc">{{ $t('kit.press.load_failed_desc') }}</p>
+			<button type="button" class="kit-footer__cta" :disabled="retrying" @click="retryKit">
+				{{ retrying ? $t('kit.loading') : $t('kit.press.retry') }}
+			</button>
+		</div>
+		<div v-else-if="notFound" class="kit-state kit-state--not-found">
 			<h2>{{ $t('kit.press.not_found') }}</h2>
 			<p class="kit-state__desc">{{ $t('kit.press.not_found_desc') }}</p>
 			<a :href="`${agencyBase}/presskit`" target="_blank" rel="noopener" class="kit-footer__cta">

package/services/campaignService.ts

@@ -376,6 +376,15 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		cover_focal_y: k.cover_focal_y ?? 0.5,
 		game_cover: k.game?.url_cover_src,
 		game_slug: k.game?.slug,
+		game_name: k.game?.name ?? null,
+		// Creator feedback. The can_* flags are computed server-side by
+		// KeyTransformer (detail endpoint only) so the wall and the rating form
+		// never offer an action the API would reject.
+		allow_comments: k.allow_comments !== false,
+		comments_count: k.comments_count ?? 0,
+		can_comment: k.can_comment ?? false,
+		can_rate: k.can_rate ?? false,
+		can_moderate_comments: k.can_moderate_comments ?? false,
 		game_genres: ((k.game?.genres || []) as Array<{ name?: string }>)
 			.map((g) => g.name)
 			.filter(Boolean) as string[],
@@ -408,8 +417,11 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		game_videos: (k.game?.videos || []) as Array<{ external_id: string; name?: string }>,
 		press_kit_link: k.press_kit_link ?? null,
 		review_guideline: k.review_guideline ?? null,
-		embargo_date: k.embargo_date ?? null,
-		embargo_timezone: k.embargo_timezone ?? null,
+		// The instant plus a zone the server has already resolved. Replaces the
+		// raw embargo_date/embargo_timezone pair, which nothing read once the
+		// formatter moved onto this block — the campaign write forms use those
+		// names too, but against their own payload, not this mapping.
+		embargo_display: k.embargo_display ?? null,
 		embargo_active: k.embargo_active ?? false,
 		request_id: k.requests?.[0]?.id,
 		request_item_id: k.requests?.[0]?.key_item_id,
@@ -474,6 +486,34 @@ export const fetchMyRequests = (params: Record<string, any> = {}) => {
 	return authClient.get(`/key-requests-me${queryString ? `?${queryString}` : ""}`)
 }
 
+/**
+ * Download the creator's content calendar as a file.
+ *
+ * Fetched through the same authenticated client rather than dropped into a
+ * plain <a download> link: the endpoint is session-authenticated, and a bare
+ * anchor navigation would not carry the client's auth headers or the `lang`
+ * param the API needs to localise the event titles.
+ *
+ * The response is a file, so responseType has to be "blob" — axios would
+ * otherwise decode it as text and, for the CSV, strip the byte-order mark that
+ * makes Excel read it as UTF-8.
+ */
+export const downloadContentCalendar = async (format: "ics" | "csv") => {
+	const response = await authClient.get(`/public/key-requests-me/calendar.${format}`, {
+		responseType: "blob",
+	})
+
+	const url = URL.createObjectURL(response.data as Blob)
+	const link = document.createElement("a")
+	link.href = url
+	link.download = `mundogamer-content-calendar.${format}`
+	document.body.appendChild(link)
+	link.click()
+	link.remove()
+	// Revoking immediately can cancel the download in Safari; a tick is enough.
+	setTimeout(() => URL.revokeObjectURL(url), 1000)
+}
+
 /**
  * Fetch users who have redeemed a specific campaign key.
  */
@@ -563,3 +603,110 @@ export const fetchMaterialsByRequest = (requestId: number) => {
 export const fetchKeyRequestById = (requestId: number) => {
 	return authClient.get(`/public/key-requests/${requestId}`)
 }
+
+// ---------------------------------------------------------------------------
+// Creator feedback: comments + the game rating a creator leaves after playing.
+//
+// Served by api-main's Shared\Comments module, which is registered in api-main,
+// community-api, agency-api and tv-api alike — so, unlike a route declared in
+// api-main's own routes/api.php, authClient reaches it from every front.
+// ---------------------------------------------------------------------------
+
+export type CampaignCommentAuthor = {
+	uuid: string | null
+	name: string | null
+	nickname: string | null
+	avatar: string | null
+}
+
+export type CampaignComment = {
+	uuid: string
+	body: string
+	edited: boolean
+	parent_uuid: string | null
+	created_at: string | null
+	updated_at: string | null
+	replies_count: number
+	replies?: CampaignComment[]
+	author: CampaignCommentAuthor | null
+	is_author: boolean
+	can_edit: boolean
+	can_delete: boolean
+	is_hidden: boolean
+	hidden_reason?: string | null
+}
+
+export type CampaignCommentsResponse = {
+	data: CampaignComment[]
+	meta: { current_page: number; last_page: number; per_page: number; total: number }
+	can_comment: boolean
+	can_moderate: boolean
+}
+
+/**
+ * Reading the wall is public, so it goes through mainClient — a signed-out
+ * visitor deciding whether to request a key should still see what other
+ * creators said.
+ */
+export const fetchCampaignComments = (keyId: number, page = 1) => {
+	return mainClient.get<CampaignCommentsResponse>(
+		`/public/commentables/key/${keyId}/comments`,
+		{ params: { page } },
+	)
+}
+
+export const postCampaignComment = (keyId: number, body: string) => {
+	return authClient.post(`/public/commentables/key/${keyId}/comments`, { body })
+}
+
+export const replyCampaignComment = (uuid: string, body: string) => {
+	return authClient.post(`/public/comments/${uuid}/reply`, { body })
+}
+
+export const updateCampaignComment = (uuid: string, body: string) => {
+	return authClient.put(`/public/comments/${uuid}`, { body })
+}
+
+export const deleteCampaignComment = (uuid: string) => {
+	return authClient.delete(`/public/comments/${uuid}`)
+}
+
+export const fetchCampaignCommentReplies = (uuid: string) => {
+	return mainClient.get(`/public/comments/${uuid}/replies`)
+}
+
+export const reportCampaignComment = (
+	uuid: string,
+	payload: { subcategory_id: number; description?: string },
+) => {
+	return authClient.post(`/public/comments/${uuid}/report`, payload)
+}
+
+/** Studio-side moderation. Hiding is reversible and never deletes the comment. */
+export const hideCampaignComment = (uuid: string, reason?: string) => {
+	return authClient.post(`/public/comments/${uuid}/hide`, { reason })
+}
+
+export const unhideCampaignComment = (uuid: string) => {
+	return authClient.delete(`/public/comments/${uuid}/hide`)
+}
+
+/**
+ * Rate the campaign's game as a creator who received a key.
+ *
+ * This writes an ordinary rating against the *game*, so it lands in the game
+ * page's ratings tab and counts towards the public average — which is only
+ * defensible because disclosure_acknowledged is recorded and shown as a badge.
+ * The API rejects the request outright if it is not accepted.
+ */
+export const submitCampaignGameRating = (
+	keyId: number,
+	payload: {
+		rating: number
+		comment_title?: string
+		user_comment?: string
+		disclosure_acknowledged: boolean
+	},
+) => {
+	return authClient.post(`/public/keys/${keyId}/game-rating`, payload)
+}

package/utils/embargo.ts

@@ -3,20 +3,49 @@
  *
  * An embargo is a day AND a time: "August 12" alone is not something a creator
  * can comply with — publishing at 09:00 or at 23:00 on that day are very
- * different acts. The API stores `embargo_date` as an instant (UTC) plus the
- * `embargo_timezone` the campaign creator confirmed it in.
+ * different acts.
  *
- * Both matter to the creator, so both are shown: the campaign's own wall-clock
- * (how the studio communicates the embargo everywhere else) and, when the
- * viewer is somewhere else, the same instant on their own clock — so nobody has
- * to do timezone arithmetic to know when they may publish.
+ * Both clocks matter to the creator, so both are shown: the campaign's own
+ * wall-clock (how the studio communicates the embargo everywhere else) and,
+ * when the viewer is somewhere else, the same instant on their own clock — so
+ * nobody has to do timezone arithmetic to know when they may publish.
+ *
+ * The *instant and the zone* come from the API's `embargo_display` block rather
+ * than from the raw `embargo_date`/`embargo_timezone` columns, so every client
+ * agrees on which moment is being described — the mobile app cannot name a zone
+ * itself (Dart ships no timezone database) and reads the server's rendering.
+ * `campaign_zone` there is already resolved: an unusable stored value has been
+ * collapsed to UTC server-side instead of reaching the formatter.
+ *
+ * The *formatting* stays here on purpose. Rendering the server's pre-built
+ * string would freeze the text in whatever locale the payload was fetched
+ * under, so switching language would leave a stale line until a refetch;
+ * Intl re-runs on every locale change.
  */
 
+/** The API's `embargo_display` block. Null/absent means: no embargo. */
+export interface EmbargoDisplay {
+	utc: string
+	campaign_zone: string
+	campaign_zone_label?: string | null
+	campaign_offset?: string | null
+	campaign_wall_clock?: string | null
+	locale?: string | null
+}
+
+type MaybeEmbargo = EmbargoDisplay | null | undefined
+
+/** The embargo instant, or null when there is none / it is unparseable. */
+function instantOf(display: MaybeEmbargo): Date | null {
+	if (!display?.utc) return null
+	const date = new Date(display.utc)
+	return isNaN(date.getTime()) ? null : date
+}
+
 /** True while the embargo is set and has not lifted yet. */
-export function isEmbargoActive(dateString: string | null | undefined): boolean {
-	if (!dateString) return false
-	const date = new Date(dateString)
-	return !isNaN(date.getTime()) && date.getTime() > Date.now()
+export function isEmbargoActive(display: MaybeEmbargo): boolean {
+	const date = instantOf(display)
+	return date !== null && date.getTime() > Date.now()
 }
 
 /**
@@ -27,11 +56,12 @@ export function isEmbargoActive(dateString: string | null | undefined): boolean
  * Returns "" once the embargo has lifted (or when there is none).
  */
 export function formatEmbargoCountdown(
-	dateString: string | null | undefined,
+	display: MaybeEmbargo,
 	locale: string,
 ): string {
-	if (!isEmbargoActive(dateString)) return ""
-	const diffMs = new Date(dateString as string).getTime() - Date.now()
+	const date = instantOf(display)
+	if (!date || date.getTime() <= Date.now()) return ""
+	const diffMs = date.getTime() - Date.now()
 
 	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" })
 	const minutes = Math.round(diffMs / 60000)
@@ -88,14 +118,13 @@ function dayIn(date: Date, timeZone?: string): string {
  * Returns "" for a missing/invalid date so callers can `v-if` on it.
  */
 export function formatEmbargoDateTime(
-	dateString: string | null | undefined,
-	timezone: string | null | undefined,
+	display: MaybeEmbargo,
 	locale: string,
 ): string {
-	if (!dateString) return ""
-	const date = new Date(dateString)
-	if (isNaN(date.getTime())) return ""
+	const date = instantOf(display)
+	if (!date) return ""
 
+	const timezone = display?.campaign_zone
 	const viewerZone = Intl.DateTimeFormat().resolvedOptions().timeZone
 
 	if (!timezone || timezone === viewerZone) {