@mundogamernetwork/shared-ui 1.1.79 → 1.1.81

package/components/keys/KeyCampaignDashboardCard.vue

@@ -250,7 +250,7 @@ const detailRoute = computed(() =>
 		top: 6px;
 		right: 6px;
 		background: var(--primary);
-		color: #fff;
+		color: var(--key-accent-ink, #13161C);
 		font-size: 11px;
 		font-weight: 700;
 		padding: 2px 7px;
@@ -280,7 +280,7 @@ const detailRoute = computed(() =>
 		bottom: 6px;
 		left: 6px;
 		background: var(--primary);
-		color: #fff;
+		color: var(--key-accent-ink, #13161C);
 		font-size: 10px;
 		font-weight: 700;
 		padding: 3px 7px;

package/locales/de.json

@@ -169,7 +169,22 @@
       },
       "status_label": "Status",
       "error_no_keys": "Derzeit sind keine Schlüssel für diese Kampagne verfügbar.",
-      "error_not_approved": "Ihre Anfrage wurde noch nicht genehmigt."
+      "error_not_approved": "Ihre Anfrage wurde noch nicht genehmigt.",
+      "quantity": "Anzahl der Schlüssel",
+      "error_duplicate": "Sie haben bereits eine Anfrage für diese Kampagne. Überprüfen Sie 'Meine Bestellungen' für den Status.",
+      "error_user_blocked": "Ihr Zugang zu Key-Anfragen wurde vorübergehend gesperrt, da Material-Einreichungen überfällig sind. Bitte reichen Sie Ihre ausstehenden Materialien ein.",
+      "error_not_eligible": "Diese Kampagne ist für Ihren aktuellen Plan nicht verfügbar.",
+      "error_pending_limit": "Sie haben das gleichzeitige Anfragenlimit Ihres Plans erreicht. Bitte erfüllen Sie Ihre ausstehenden Verpflichtungen, bevor Sie einen neuen Key anfordern.",
+      "select_option": "Option auswählen",
+      "required_data": "Erforderliche Angaben",
+      "already_requested": "Sie haben bereits eine Anfrage für diese Kampagne gestellt.",
+      "back_to_campaign": "Zur Kampagne zurückkehren",
+      "status_pending": "Anfrage ausstehend — bitte warten Sie auf die Genehmigung",
+      "status_approved": "Anfrage genehmigt — Sie können jetzt Ihren Schlüssel abrufen",
+      "status_completed": "Anfrage abgeschlossen",
+      "status_refused": "Anfrage abgelehnt",
+      "status_cancelled": "Anfrage storniert",
+      "refused_reason": "Grund der Ablehnung:"
     },
     "materials": {
       "title": "Submit material",

package/locales/en.json

@@ -169,7 +169,22 @@
       },
       "status_label": "Status",
       "error_no_keys": "No keys available for this campaign at the moment.",
-      "error_not_approved": "Your request has not been approved yet."
+      "error_not_approved": "Your request has not been approved yet.",
+      "quantity": "Number of keys",
+      "error_duplicate": "You already have a request for this campaign. Check 'My Orders' to see the status.",
+      "error_user_blocked": "Your key request access has been temporarily blocked due to overdue material submissions. Please submit your pending materials to restore access.",
+      "error_not_eligible": "This campaign is not available for your current plan.",
+      "error_pending_limit": "You have reached the simultaneous request limit for your plan. Please fulfill your pending obligations before requesting a new key.",
+      "select_option": "Select an option",
+      "required_data": "Required data",
+      "already_requested": "You have already submitted a request for this campaign.",
+      "back_to_campaign": "Back to campaign",
+      "status_pending": "Request pending — waiting for approval",
+      "status_approved": "Request approved — you can now retrieve your key",
+      "status_completed": "Request completed",
+      "status_refused": "Request refused",
+      "status_cancelled": "Request cancelled",
+      "refused_reason": "Reason for refusal:"
     },
     "materials": {
       "title": "Submit material",

package/locales/pt-BR.json

@@ -169,7 +169,22 @@
       },
       "status_label": "Status",
       "error_no_keys": "Não há chaves disponíveis para esta campanha no momento.",
-      "error_not_approved": "Sua solicitação ainda não foi aprovada."
+      "error_not_approved": "Sua solicitação ainda não foi aprovada.",
+      "quantity": "Quantidade de chaves",
+      "error_duplicate": "Você já tem um pedido para esta campanha. Acesse 'Meus Pedidos' para ver o status.",
+      "error_user_blocked": "Seu acesso a pedidos de chave está temporariamente bloqueado por materiais não entregues. Envie seus materiais pendentes para restaurar o acesso.",
+      "error_not_eligible": "Esta campanha não está disponível para o seu plano atual.",
+      "error_pending_limit": "Você atingiu o limite de pedidos simultâneos do seu plano. Entregue o material pendente antes de solicitar uma nova chave.",
+      "select_option": "Selecione uma opção",
+      "required_data": "Dados obrigatórios",
+      "already_requested": "Você já enviou uma solicitação para esta campanha.",
+      "back_to_campaign": "Voltar para a campanha",
+      "status_pending": "Solicitação pendente — aguardando aprovação",
+      "status_approved": "Solicitação aprovada — você pode resgatar sua chave",
+      "status_completed": "Solicitação concluída",
+      "status_refused": "Solicitação recusada",
+      "status_cancelled": "Solicitação cancelada",
+      "refused_reason": "Motivo da recusa:"
     },
     "materials": {
       "title": "Submit material",

package/locales/ro.json

@@ -169,7 +169,22 @@
       },
       "status_label": "Status",
       "error_no_keys": "Nu există chei disponibile pentru această campanie în acest moment.",
-      "error_not_approved": "Cererea ta nu a fost aprobată încă."
+      "error_not_approved": "Cererea ta nu a fost aprobată încă.",
+      "quantity": "Numărul de chei",
+      "error_duplicate": "Aveți deja o cerere pentru această campanie. Verificați 'Comenzile mele' pentru status.",
+      "error_user_blocked": "Accesul dvs. la solicitările de chei a fost blocat temporar din cauza transmisiilor de materiale restante. Trimiteți materialele dvs. pentru a restabili accesul.",
+      "error_not_eligible": "Această campanie nu este disponibilă pentru planul dvs. actual.",
+      "error_pending_limit": "Ați atins limita de cereri simultane a planului dvs. Îndepliniți-vă obligațiile restante înainte de a solicita o nouă cheie.",
+      "select_option": "Selectează o opțiune",
+      "required_data": "Date obligatorii",
+      "already_requested": "Ați trimis deja o cerere pentru această campanie.",
+      "back_to_campaign": "Înapoi la campanie",
+      "status_pending": "Cerere în așteptare — așteptați aprobarea",
+      "status_approved": "Cerere aprobată — puteți prelua cheia",
+      "status_completed": "Cerere finalizată",
+      "status_refused": "Cerere refuzată",
+      "status_cancelled": "Cerere anulată",
+      "refused_reason": "Motivul refuzului:"
     },
     "materials": {
       "title": "Submit material",

package/package.json

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

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

@@ -302,7 +302,7 @@ function goBack() {
 		font-size: 14px;
 		font-weight: 700;
 		background: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
-		color: #fff;
+		color: var(--key-accent-ink, #13161C);
 		border: none;
 		cursor: pointer;
 		transition: opacity 0.15s;

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

@@ -35,6 +35,15 @@ const requestError = ref("")
 const selectedPlatformId = ref<number | null>(null)
 const selectedRegionId = ref<number | null>(null)
 const description = ref("")
+const quantity = ref<number | null>(1)
+
+const maxKeysForUser = computed(() => campaign.value?.max_keys_for_user ?? 1)
+
+function clampQuantity() {
+	if (quantity.value === null) return
+	if (quantity.value < 1) quantity.value = 1
+	if (quantity.value > maxKeysForUser.value) quantity.value = maxKeysForUser.value
+}
 
 onMounted(async () => {
 	if (!currentUser) {
@@ -63,9 +72,36 @@ onMounted(async () => {
 })
 
 const canSubmit = computed(() =>
-	!!selectedPlatformId.value && !!selectedRegionId.value && !submitting.value,
+	!!selectedPlatformId.value && !!selectedRegionId.value && !!quantity.value && !submitting.value,
 )
 
+// Collapsible "Required data" box — matches tv's original toggle behavior
+const isBoxOpen = ref(true)
+function toggleBox() {
+	isBoxOpen.value = !isBoxOpen.value
+}
+
+// request_status: null/undefined/1 = no request yet, anything else = existing request
+const hasExistingRequest = computed(() => {
+	const s = campaign.value?.request_status
+	return s !== null && s !== undefined && s !== 1
+})
+
+const existingRequestStatus = computed(() => {
+	switch (campaign.value?.request_status) {
+		case 2: return $i18n.t("keys.campaigns.status_pending")
+		case 3: return $i18n.t("keys.campaigns.status_approved")
+		case 4: return $i18n.t("keys.campaigns.status_approved")
+		case 5: return $i18n.t("keys.campaigns.status_completed")
+		case 6: return $i18n.t("keys.campaigns.status_refused")
+		case 7: return $i18n.t("keys.campaigns.status_cancelled")
+		default: return ""
+	}
+})
+
+const isRefused = computed(() => campaign.value?.request_status === 6)
+const refusedReason = computed(() => campaign.value?.request_admin_notes || "")
+
 async function submit() {
 	if (!canSubmit.value) return
 	submitting.value = true
@@ -76,15 +112,27 @@ async function submit() {
 			platform_ids: [selectedPlatformId.value],
 			region_ids: [selectedRegionId.value],
 			description: description.value || "-",
-			quantity_keys: 1,
+			quantity_keys: Number(quantity.value) || 1,
 		})
 		success.value = true
 		setTimeout(() => {
 			navigateTo(`/${locale.value}/key-campaigns`)
 		}, 2000)
 	} catch (e: any) {
-		const msg = e?.response?.data?.message || e?.message || ""
-		requestError.value = msg || $i18n.t("keys.campaigns.error_request")
+		const status = e?.response?.status
+		const errorCode = e?.response?.data?.error_code
+		if (status === 409) {
+			requestError.value = $i18n.t("keys.campaigns.error_duplicate")
+		} else if (status === 403 && errorCode === "user_key_blocked") {
+			requestError.value = $i18n.t("keys.campaigns.error_user_blocked")
+		} else if (status === 403) {
+			requestError.value = $i18n.t("keys.campaigns.error_not_eligible")
+		} else if (status === 422 && errorCode === "pending_limit_reached") {
+			requestError.value = $i18n.t("keys.campaigns.error_pending_limit")
+		} else {
+			const msg = e?.response?.data?.message || e?.message || ""
+			requestError.value = msg || $i18n.t("keys.campaigns.error_request")
+		}
 	} finally {
 		submitting.value = false
 	}
@@ -126,50 +174,74 @@ function goBack() {
 					<p v-if="campaign?.name" class="campaign-name">{{ campaign.name }}</p>
 				</div>
 
-				<form class="form" @submit.prevent="submit">
-					<!-- Platform -->
-					<div class="field">
-						<label class="label">{{ $t("keys.campaigns.platform") }}</label>
-						<div class="options">
-							<button
-								v-for="p in platforms"
-								:key="p.id"
-								type="button"
-								class="option"
-								:class="{ selected: selectedPlatformId === p.id }"
-								@click="selectedPlatformId = p.id"
-							>
-								{{ p.name }}
-							</button>
+				<!-- Already has a request -->
+				<div v-if="hasExistingRequest" class="existing-request-notice">
+					<MGIcon size="1x" icon="version" class="notice-icon" />
+					<div class="notice-texts">
+						<div class="notice-title">{{ $t("keys.campaigns.already_requested") }}</div>
+						<div class="notice-status">{{ existingRequestStatus }}</div>
+						<div v-if="isRefused && refusedReason" class="notice-reason">
+							<span class="notice-reason-label">{{ $t("keys.campaigns.refused_reason") }}</span>
+							<span class="notice-reason-text">{{ refusedReason }}</span>
 						</div>
 					</div>
+					<button class="btn notice-back" @click="goBack">
+						{{ $t("keys.campaigns.back_to_campaign") }}
+					</button>
+				</div>
 
-					<!-- Region -->
-					<div class="field">
-						<label class="label">{{ $t("keys.campaigns.region") }}</label>
-						<div class="options">
-							<button
-								v-for="r in regions"
-								:key="r.id"
-								type="button"
-								class="option"
-								:class="{ selected: selectedRegionId === r.id }"
-								@click="selectedRegionId = r.id"
-							>
-								{{ r.name }}
+				<form v-else class="form" @submit.prevent="submit">
+					<div class="required-data">
+						<div class="required-data-header" @click="toggleBox">
+							<div class="required-data-header-left">
+								<MGIcon size="1x" icon="check" :style="{ color: isBoxOpen ? 'var(--key-accent, var(--primary, #D297FF))' : 'var(--inactive)' }" />
+								<span>{{ $t("keys.campaigns.required_data") }}</span>
+							</div>
+							<button type="button" class="box-toggler" :aria-expanded="isBoxOpen">
+								<MGIcon icon="chevron-down" :class="{ rotate: isBoxOpen }" />
 							</button>
 						</div>
-					</div>
 
-					<!-- Description (optional) -->
-					<div class="field">
-						<label class="label">{{ $t("keys.campaigns.description_optional") }}</label>
-						<textarea
-							v-model="description"
-							class="textarea"
-							:placeholder="$t('keys.campaigns.description_placeholder')"
-							rows="3"
-						/>
+						<div v-show="isBoxOpen" class="required-data-body">
+							<div class="form-row">
+								<label class="label">{{ $t("keys.campaigns.platform") }}</label>
+								<select v-model.number="selectedPlatformId" class="select">
+									<option :value="null" disabled>{{ $t("keys.campaigns.select_option") }}</option>
+									<option v-for="p in platforms" :key="p.id" :value="p.id">{{ p.name }}</option>
+								</select>
+							</div>
+
+							<div class="form-row">
+								<label class="label">{{ $t("keys.campaigns.region") }}</label>
+								<select v-model.number="selectedRegionId" class="select">
+									<option :value="null" disabled>{{ $t("keys.campaigns.select_option") }}</option>
+									<option v-for="r in regions" :key="r.id" :value="r.id">{{ r.name }}</option>
+								</select>
+							</div>
+
+							<div class="form-row" v-if="maxKeysForUser > 1">
+								<label class="label">{{ $t("keys.campaigns.quantity") }}</label>
+								<input
+									v-model.number="quantity"
+									type="number"
+									min="1"
+									:max="maxKeysForUser"
+									class="input quantity-input"
+									:placeholder="$t('keys.campaigns.quantity')"
+									@change="clampQuantity"
+								/>
+							</div>
+
+							<div class="form-row">
+								<label class="label">{{ $t("keys.campaigns.description_optional") }}</label>
+								<textarea
+									v-model="description"
+									class="textarea"
+									:placeholder="$t('keys.campaigns.description_placeholder')"
+									rows="3"
+								/>
+							</div>
+						</div>
 					</div>
 
 					<div v-if="requestError" class="req-error">{{ requestError }}</div>
@@ -242,55 +314,120 @@ function goBack() {
 
 	.form { display: flex; flex-direction: column; gap: 24px; }
 
-	.field {
+	.required-data {
 		display: flex;
 		flex-direction: column;
-		gap: 10px;
+		background: var(--bg-app-badge);
+		border: 1px solid var(--button-secondary-default-bg);
 	}
 
-	.label {
-		font-size: 13px;
+	.required-data-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 10px;
+		padding: 16px 20px;
+		font-size: 14px;
 		font-weight: 600;
 		color: var(--card-article-title);
+		border-bottom: 1px solid var(--button-secondary-default-bg);
+		cursor: pointer;
 	}
 
-	.options {
+	.required-data-header-left {
 		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
+		align-items: center;
+		gap: 10px;
 	}
 
-	.option {
-		padding: 8px 16px;
-		font-size: 13px;
-		font-weight: 500;
-		border: 1px solid var(--button-secondary-default-bg);
+	.box-toggler {
+		display: flex;
+		align-items: center;
 		background: transparent;
+		border: none;
 		color: var(--secondary-info-fg);
 		cursor: pointer;
-		transition: border-color 0.15s, color 0.15s;
 
-		&:hover { border-color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); color: var(--card-article-title); }
-		&.selected {
-			border-color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
-			color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
-			background: var(--key-accent-subtle-bg, rgba(210, 151, 255, 0.08));
-		}
+		svg { transition: transform 0.15s; }
+		svg.rotate { transform: rotate(180deg); }
 	}
 
-	.textarea {
-		width: 100%;
+	.existing-request-notice {
+		display: flex;
+		align-items: flex-start;
+		gap: 14px;
+		padding: 20px;
 		background: var(--bg-app-badge);
 		border: 1px solid var(--button-secondary-default-bg);
+	}
+
+	.notice-icon { color: var(--key-accent, var(--primary, #D297FF)); margin-top: 2px; }
+
+	.notice-texts { flex: 1; display: flex; flex-direction: column; gap: 4px; }
+
+	.notice-title { font-size: 14px; font-weight: 600; color: var(--card-article-title); }
+	.notice-status { font-size: 13px; color: var(--secondary-info-fg); }
+
+	.notice-reason {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin-top: 6px;
+		font-size: 13px;
+
+		.notice-reason-label { font-weight: 600; color: var(--card-article-title); }
+		.notice-reason-text { color: var(--secondary-info-fg); }
+	}
+
+	.notice-back {
+		background: transparent;
+		border: 1px solid var(--button-secondary-default-bg);
+		color: var(--card-article-title);
+		padding: 8px 16px;
+		font-size: 13px;
+		font-weight: 600;
+		cursor: pointer;
+		white-space: nowrap;
+		&:hover { border-color: var(--key-accent, var(--primary, #D297FF)); }
+	}
+
+	.form-row {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		padding: 20px;
+		& + .form-row { border-top: 1px solid var(--button-secondary-default-bg); }
+	}
+
+	.label {
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--card-article-title);
+	}
+
+	.select, .input, .textarea {
+		width: 100%;
+		background: var(--body-bg-card, var(--bg-app-badge));
+		border: 1px solid var(--button-secondary-default-bg);
 		color: var(--card-article-title);
 		font-size: 13px;
 		padding: 10px 12px;
-		resize: vertical;
 		outline: none;
 		font-family: inherit;
 		&:focus { border-color: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF)))); }
 	}
 
+	.select {
+		appearance: auto;
+		cursor: pointer;
+	}
+
+	.textarea { resize: vertical; }
+
+	.quantity-input {
+		width: 120px;
+	}
+
 	.req-error {
 		font-size: 13px;
 		color: var(--danger, #e53935);
@@ -303,7 +440,7 @@ function goBack() {
 		font-size: 14px;
 		font-weight: 700;
 		background: var(--key-accent, var(--primary, var(--key-accent, var(--primary, #D297FF))));
-		color: #fff;
+		color: var(--key-accent-ink, #13161C);
 		border: none;
 		cursor: pointer;
 		transition: opacity 0.15s;