@mundogamernetwork/shared-ui 1.8.15 → 1.8.16

package/locales/de.json

@@ -120,6 +120,8 @@
         "status_active": "Active",
         "status_upcoming": "Coming soon",
         "opens_in": "Opens in",
+        "follow_campaign": "Benachrichtige mich bei Eröffnung",
+        "following": "Du wirst benachrichtigt",
         "status_closed": "Closed",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
@@ -137,7 +139,6 @@
           "official": "Official streamers",
           "affiliate": "Affiliate or above"
         },
-        "rp_label": "Redeemed by",
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
         "no_data": "Diese Kampagne ist noch keinem Spiel im System zugeordnet",

package/locales/en.json

@@ -120,6 +120,8 @@
         "status_active": "Active",
         "status_upcoming": "Coming soon",
         "opens_in": "Opens in",
+        "follow_campaign": "Notify me when it opens",
+        "following": "You'll be notified",
         "status_closed": "Closed",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
@@ -137,7 +139,6 @@
           "official": "Official streamers",
           "affiliate": "Affiliate or above"
         },
-        "rp_label": "Redeemed by",
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
         "no_data": "This campaign is not associated with a game in our system yet",

package/locales/pt-BR.json

@@ -120,6 +120,8 @@
         "status_active": "Active",
         "status_upcoming": "Coming soon",
         "opens_in": "Opens in",
+        "follow_campaign": "Me avise quando abrir",
+        "following": "Você será avisado",
         "status_closed": "Closed",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
@@ -137,7 +139,6 @@
           "official": "Official streamers",
           "affiliate": "Affiliate or above"
         },
-        "rp_label": "Redeemed by",
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
         "no_data": "Esta campanha ainda não foi associada a um jogo no sistema",

package/locales/ro.json

@@ -120,6 +120,8 @@
         "status_active": "Active",
         "status_upcoming": "Coming soon",
         "opens_in": "Opens in",
+        "follow_campaign": "Anunță-mă când se deschide",
+        "following": "Vei fi anunțat",
         "status_closed": "Closed",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
@@ -137,7 +139,6 @@
           "official": "Official streamers",
           "affiliate": "Affiliate or above"
         },
-        "rp_label": "Redeemed by",
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
         "no_data": "Această campanie nu este încă asociată cu un joc în sistem",

package/package.json

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

package/pages/key-campaigns/[slug].vue

@@ -9,6 +9,8 @@ import {
 	fetchKeyRequestById,
 	revealKey,
 	requestKey,
+	followCampaign,
+	unfollowCampaign,
 } from "../../services/campaignService"
 import { fetchDetailGame, fetchDetailGameImage } from "../../services/gamesService"
 
@@ -201,6 +203,35 @@ const campaignNotYetOpen = computed(() => {
 	return !!start && new Date(start).getTime() > Date.now()
 })
 
+// Personal "notify me when this opens" toggle — distinct from the global,
+// one-time key_campaigns alert opt-in (enableKeyCampaignNotifications()).
+// Most useful while campaignNotYetOpen, since that's the only case where
+// KeyCampaignOpenedNotification will ever actually fire for this campaign.
+const following = ref(!!campaign.value?.is_following)
+const followBusy = ref(false)
+
+async function toggleFollow() {
+	if (!currentUser) {
+		return navigateTo(`${loginUrl}?redirect_to=${encodeURIComponent(route.fullPath)}`, { external: true })
+	}
+	if (!campaign.value?.id || followBusy.value) return
+
+	followBusy.value = true
+	const wasFollowing = following.value
+	following.value = !wasFollowing
+	try {
+		if (wasFollowing) {
+			await unfollowCampaign(campaign.value.id)
+		} else {
+			await followCampaign(campaign.value.id)
+		}
+	} catch {
+		following.value = wasFollowing
+	} finally {
+		followBusy.value = false
+	}
+}
+
 let countdownInterval: ReturnType<typeof setInterval> | null = null
 
 const updateCountdown = () => {
@@ -827,6 +858,18 @@ onMounted(async () => {
 							</div>
 						</div>
 
+						<button
+							v-if="campaignNotYetOpen"
+							type="button"
+							class="follow-btn"
+							:class="{ following }"
+							:disabled="followBusy"
+							@click="toggleFollow"
+						>
+							<MGIcon :icon="following ? 'check' : 'bell'" />
+							{{ following ? $t("keys.campaigns.campaign.following") : $t("keys.campaigns.campaign.follow_campaign") }}
+						</button>
+
 						<div class="requirements">
 							{{ $t("keys.campaigns.campaign.requirements") }}
 							<div class="tags">
@@ -938,7 +981,7 @@ onMounted(async () => {
 									</div>
 									<div class="texts">
 										{{ campaign?.company || "" }}
-										<div class="small">{{ $t("keys.campaigns.campaign.rp_label") }}</div>
+										<div v-if="campaign?.company_type" class="small">{{ campaign.company_type }}</div>
 									</div>
 								</div>
 								<div class="badge-tag" v-if="campaign?.email">
@@ -1364,6 +1407,31 @@ onMounted(async () => {
 					}
 				}
 
+				.follow-btn {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					gap: 8px;
+					width: 100%;
+					padding: 10px;
+					border: 1px solid var(--key-accent, var(--primary, #D297FF));
+					background: transparent;
+					color: var(--key-accent, var(--primary, #D297FF));
+					font-size: 13px;
+					font-weight: 600;
+					font-family: inherit;
+					cursor: pointer;
+					transition: background-color 0.15s, opacity 0.15s;
+
+					&:hover:not(:disabled) { background-color: rgba(210, 151, 255, 0.1); }
+					&:disabled { opacity: 0.6; cursor: not-allowed; }
+
+					&.following {
+						background-color: var(--key-accent, var(--primary, #D297FF));
+						color: var(--body-bg, #101012);
+					}
+				}
+
 				.requirements {
 					display: flex;
 					flex-direction: column;

package/services/campaignService.ts

@@ -306,7 +306,9 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		request_status: k.request_user_status,
 		end: k.end_date,
 		start: k.start_date,
+		is_following: k.is_following ?? false,
 		company: k.company?.name,
+		company_type: k.company?.company_type ?? null,
 		email: k.company?.email,
 		twitter: k.company?.twitter,
 		logo: k.company?.thumbnail_url,
@@ -448,6 +450,20 @@ export const fetchKeyActions = (keyId: number) => {
 	return authClient.get(`/public/keys/${keyId}/actions`)
 }
 
+/**
+ * Follow/unfollow a specific campaign — a personal reminder distinct from
+ * enableKeyCampaignNotifications() above (a one-time global opt-in to every
+ * eligible campaign). Most useful before a campaign with a future start
+ * date has opened: the user gets notified the moment it does.
+ */
+export const followCampaign = (keyId: number) => {
+	return authClient.post(`/public/keys/${keyId}/follow`)
+}
+
+export const unfollowCampaign = (keyId: number) => {
+	return authClient.delete(`/public/keys/${keyId}/follow`)
+}
+
 /**
  * Submit a content material for a key request.
  */