@mundogamernetwork/shared-ui 1.4.2 → 1.6.0

package/components/MediaKit/MgMediaKitLinks.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+type MediaKitLink = { label: string; url: string };
+
+const props = withDefaults(defineProps<{ links?: MediaKitLink[] }>(), {
+	links: () => [],
+});
+const emit = defineEmits<{ update: [key: 'custom_links', value: MediaKitLink[]] }>();
+
+const draft = ref<MediaKitLink[]>([]);
+const saved = ref(false);
+
+watch(
+	() => props.links,
+	(value) => {
+		draft.value = (value || []).map(link => ({ label: link.label || '', url: link.url || '' }));
+	},
+	{ immediate: true, deep: true },
+);
+
+const addLink = () => {
+	if (draft.value.length < 12) draft.value.push({ label: '', url: '' });
+};
+
+const removeLink = (index: number) => draft.value.splice(index, 1);
+
+const move = (index: number, direction: -1 | 1) => {
+	const target = index + direction;
+	if (target < 0 || target >= draft.value.length) return;
+	const [link] = draft.value.splice(index, 1);
+	draft.value.splice(target, 0, link);
+};
+
+const canSave = computed(() => draft.value.every(link => {
+	if (!link.label.trim() || !link.url.trim()) return false;
+	try {
+		const parsed = new URL(link.url);
+		return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+	} catch {
+		return false;
+	}
+}));
+
+const save = () => {
+	if (!canSave.value) return;
+	emit('update', 'custom_links', draft.value.map(link => ({
+		label: link.label.trim(),
+		url: link.url.trim(),
+	})));
+	saved.value = true;
+	setTimeout(() => { saved.value = false; }, 1800);
+};
+</script>
+
+<template>
+	<div class="mk-links-editor">
+		<div class="mk-links-head">
+			<div>
+				<h3>{{ $t('media_kit.links.title') }}</h3>
+				<p>{{ $t('media_kit.links.description') }}</p>
+			</div>
+			<button type="button" class="mk-link-add" :disabled="draft.length >= 12" @click="addLink">
+				+ {{ $t('media_kit.links.add') }}
+			</button>
+		</div>
+
+		<div v-if="draft.length" class="mk-link-list">
+			<div v-for="(link, index) in draft" :key="index" class="mk-link-row">
+				<span class="mk-link-number">{{ index + 1 }}</span>
+				<label>
+					<span>{{ $t('media_kit.links.label') }}</span>
+					<input v-model="link.label" type="text" maxlength="80" :placeholder="$t('media_kit.links.label_placeholder')" />
+				</label>
+				<label class="mk-link-url">
+					<span>{{ $t('media_kit.links.url') }}</span>
+					<input v-model="link.url" type="url" maxlength="2048" placeholder="https://" />
+				</label>
+				<div class="mk-link-actions">
+					<button type="button" :disabled="index === 0" :aria-label="$t('media_kit.links.move_up')" @click="move(index, -1)">↑</button>
+					<button type="button" :disabled="index === draft.length - 1" :aria-label="$t('media_kit.links.move_down')" @click="move(index, 1)">↓</button>
+					<button type="button" class="danger" :aria-label="$t('media_kit.links.remove')" @click="removeLink(index)">×</button>
+				</div>
+			</div>
+		</div>
+		<p v-else class="mk-links-empty">{{ $t('media_kit.links.empty') }}</p>
+
+		<div class="mk-links-footer">
+			<span v-if="draft.length && !canSave" class="mk-links-error">{{ $t('media_kit.links.invalid') }}</span>
+			<button type="button" class="mk-link-save" :disabled="!canSave" @click="save">
+				{{ saved ? $t('media_kit.links.saved') : $t('media_kit.links.save') }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.mk-links-editor { border: 1px solid rgba(140, 140, 160, .3); padding: 20px; background: rgba(255, 255, 255, .02); }
+.mk-links-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
+.mk-links-head h3 { margin: 0 0 5px; font-size: 17px; }
+.mk-links-head p, .mk-links-empty { margin: 0; color: #9292a4; font-size: 13px; line-height: 1.5; }
+.mk-link-add, .mk-link-save { border: 1px solid #ffb000; background: #ffb000; color: #090909; min-height: 38px; padding: 0 16px; font-weight: 750; cursor: pointer; white-space: nowrap; }
+button:disabled { opacity: .42; cursor: not-allowed; }
+.mk-link-list { display: grid; gap: 10px; margin-top: 18px; }
+.mk-link-row { display: grid; grid-template-columns: 30px minmax(150px, .75fr) minmax(220px, 1.4fr) auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid rgba(140, 140, 160, .25); }
+.mk-link-number { align-self: center; color: #ffb000; font-weight: 800; text-align: center; }
+.mk-link-row label { display: grid; gap: 6px; color: #9292a4; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
+.mk-link-row input { min-width: 0; height: 40px; border: 1px solid rgba(140, 140, 160, .35); background: rgba(0, 0, 0, .2); color: inherit; padding: 0 11px; outline: none; }
+.mk-link-row input:focus { border-color: #ffb000; }
+.mk-link-actions { display: flex; gap: 5px; }
+.mk-link-actions button { width: 36px; height: 40px; border: 1px solid rgba(140, 140, 160, .35); background: transparent; color: inherit; cursor: pointer; }
+.mk-link-actions .danger { color: #ff7b7b; }
+.mk-links-empty { padding: 22px 0 6px; }
+.mk-links-footer { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; }
+.mk-links-error { color: #ff9898; font-size: 12px; }
+
+@media (max-width: 760px) {
+	.mk-links-head { flex-direction: column; }
+	.mk-link-row { grid-template-columns: 24px 1fr; }
+	.mk-link-row label, .mk-link-actions { grid-column: 2; }
+	.mk-link-actions { justify-content: flex-end; }
+}
+</style>

package/components/MediaKit/MgMediaKitStore.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+const props = defineProps<{
+	store: Record<string, any>;
+	contactEmail?: string | null;
+}>();
+
+const emit = defineEmits<{
+	click: [type: string];
+}>();
+
+const products = computed(() => props.store?.products ?? []);
+
+function formatPrice(product: Record<string, any>) {
+	try {
+		return new Intl.NumberFormat(undefined, {
+			style: 'currency',
+			currency: product.currency || props.store.currency || 'BRL',
+		}).format(Number(product.price || 0));
+	} catch {
+		return `${product.currency || props.store.currency || 'BRL'} ${Number(product.price || 0).toFixed(2)}`;
+	}
+}
+
+function interestUrl(product: Record<string, any>) {
+	if (!props.contactEmail) return null;
+	const subject = encodeURIComponent(`${props.store.name} — ${product.name}`);
+	return `mailto:${props.contactEmail}?subject=${subject}`;
+}
+</script>
+
+<template>
+	<div class="mks">
+		<div class="mks__head">
+			<div class="mks__identity">
+				<img v-if="store.logo_url" :src="store.logo_url" :alt="store.name" />
+				<div>
+					<p class="mks__eyebrow">{{ $t('kit.media.store_eyebrow') }}</p>
+					<h2>{{ store.name }}</h2>
+					<p v-if="store.description">{{ store.description }}</p>
+				</div>
+			</div>
+			<span class="mks__badge">Mundo Gamer</span>
+		</div>
+
+		<div v-if="products.length" class="mks__grid">
+			<article v-for="product in products" :key="product.id" class="mks__product">
+				<div class="mks__image">
+					<img v-if="product.image" :src="product.image" :alt="product.name" />
+					<span v-else>{{ product.name?.charAt(0) }}</span>
+					<em v-if="product.is_featured">{{ $t('kit.media.store_featured') }}</em>
+				</div>
+				<div class="mks__body">
+					<div>
+						<h3>{{ product.name }}</h3>
+						<p v-if="product.description">{{ product.description }}</p>
+					</div>
+					<div class="mks__footer">
+						<strong>{{ formatPrice(product) }}</strong>
+						<a
+							v-if="interestUrl(product)"
+							:href="interestUrl(product) || undefined"
+							@click="emit('click', 'store_product')"
+						>{{ $t('kit.media.store_interest') }}</a>
+					</div>
+				</div>
+			</article>
+		</div>
+
+		<p v-else class="mks__empty">{{ $t('kit.media.store_empty') }}</p>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.mks { display: grid; gap: 22px; }
+.mks__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
+.mks__identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
+.mks__identity img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--kit-line); }
+.mks__identity h2 { margin: 2px 0 4px; font-size: 24px; color: var(--kit-text); }
+.mks__identity p { margin: 0; color: var(--kit-muted); line-height: 1.5; }
+.mks__eyebrow { color: var(--kit-accent) !important; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 800; }
+.mks__badge { flex: none; padding: 6px 9px; border: 1px solid var(--kit-line); color: var(--kit-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
+.mks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
+.mks__product { display: flex; flex-direction: column; min-height: 290px; overflow: hidden; border: 1px solid var(--kit-line); background: var(--kit-surface-2); }
+.mks__image { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--kit-accent) 10%, var(--kit-bg)); color: var(--kit-accent); font-size: 38px; font-weight: 800; }
+.mks__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
+.mks__product:hover .mks__image img { transform: scale(1.035); }
+.mks__image em { position: absolute; top: 10px; left: 10px; padding: 5px 7px; background: var(--kit-accent); color: #0c0e12; font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
+.mks__body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 18px; padding: 14px; }
+.mks__body h3 { margin: 0 0 6px; color: var(--kit-text); font-size: 15px; }
+.mks__body p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--kit-muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+.mks__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.mks__footer strong { color: var(--kit-text); font-size: 15px; }
+.mks__footer a { padding: 7px 9px; border: 1px solid var(--kit-accent); color: var(--kit-accent); font-size: 11px; font-weight: 700; text-decoration: none; }
+.mks__empty { margin: 0; color: var(--kit-muted); }
+
+@media (max-width: 560px) {
+	.mks__head { flex-direction: column; }
+	.mks__badge { display: none; }
+	.mks__grid { grid-template-columns: 1fr 1fr; }
+	.mks__product { min-height: 250px; }
+	.mks__footer { align-items: flex-start; flex-direction: column; }
+}
+
+@media (max-width: 390px) {
+	.mks__grid { grid-template-columns: 1fr; }
+}
+</style>

package/components/checkout/MgPaymentMethodSelector.vue

@@ -48,6 +48,7 @@ function gatewayKey(m: { id: number; name: string }): string {
   const n = (m.name ?? "").trim().toLowerCase();
   if (n === "paypal" || m.id === 2) return "paypal";
   if (n === "stripe" || m.id === 3) return "stripe";
+  if (n === "pix" || m.id === 4) return "pix";
   return n;
 }
 
@@ -60,11 +61,12 @@ function getMethodId(m: { id: number; name: string }): number {
   const key = gatewayKey(m);
   if (key === "paypal") return 2;
   if (key === "stripe") return 3;
+  if (key === "pix") return 4;
   return m.id;
 }
 
 function getLabel(m: { id: number; name: string }): string {
-  const labels: Record<string, string> = { paypal: "PayPal", stripe: "Stripe" };
+  const labels: Record<string, string> = { paypal: "PayPal", stripe: "Stripe", pix: "Pix" };
   return labels[gatewayKey(m)] ?? m.name;
 }
 </script>

package/components/form/SortInput.vue

@@ -13,8 +13,15 @@ const emit = defineEmits(["update:model"]);
 const props = defineProps<SortInputProps>();
 const sortModel = ref(props.model);
 
-watch(sortModel, () => {
-	emit("update:model", sortModel);
+watch(
+	() => props.model,
+	(value) => {
+		sortModel.value = value;
+	},
+);
+
+watch(sortModel, (value) => {
+	emit("update:model", value);
 });
 
 const toggleSort = () => {

package/components/keys/KeyBrowser.vue

@@ -149,7 +149,7 @@ function handleRequestKey(pool: KeyPool) {
 
 async function _checkNotifPrompt() {
   try {
-    const res = await httpService.get('/user/notification-preferences', {
+    const res = await httpService.get('/public/user/notification-preferences', {
       params: { category: 'key_campaigns' },
     })
     if (res.data?.data === null) {
@@ -163,7 +163,7 @@ async function _checkNotifPrompt() {
 async function enableNotifAlerts() {
   notifSaving.value = true
   try {
-    await httpService.put('/user/notification-preferences', {
+    await httpService.put('/public/user/notification-preferences', {
       category: 'key_campaigns',
       enabled: true,
       channel_email: true,

package/components/playtest/PlaytestResponseFlow.vue

@@ -39,8 +39,9 @@ import CriterionRow from "./accessibility/CriterionRow.vue";
 import ChecklistItemRow from "./compliance/ChecklistItemRow.vue";
 import SessionCard from "./moderated/SessionCard.vue";
 import JoinCallPanel from "./moderated/JoinCallPanel.vue";
+import VideoPlaytestCapture from "./video/VideoPlaytestCapture.vue";
 
-type PlaytestCategory = "baseline" | "concept_poll" | "localization_qa" | "accessibility_audit" | "compliance" | "moderated";
+type PlaytestCategory = "baseline" | "concept_poll" | "localization_qa" | "accessibility_audit" | "compliance" | "moderated" | "video_playtest";
 
 const props = defineProps<{
 	campaignId: number;
@@ -306,6 +307,11 @@ async function cancelSessionFlow() {
 					</button>
 				</div>
 
+				<!-- ── Video Playtest ── -->
+				<div v-else-if="category === 'video_playtest'">
+					<VideoPlaytestCapture :campaign-id="campaignId" @submitted="handleDone" />
+				</div>
+
 				<!-- ── Moderated ── -->
 				<div v-else-if="category === 'moderated'">
 					<JoinCallPanel

package/components/playtest/access-grant/AccessGrantPanel.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+// Single orchestrator for an accepted response's game-access grant — the
+// component both agency-frontend (mirrored /testing section) and
+// community-frontend (My Tests) actually mount, one per accepted response.
+// Mirrors PlaytestResponseFlow.vue's role for the submission side: owns the
+// composable instance, dispatches to AccessGrantWaiver (not yet signed) or
+// AccessGrantReveal (signed), and renders nothing if the response has no
+// configured access grant.
+import { onMounted } from "vue";
+import { usePlaytestAccessGrant } from "../../../composables/usePlaytestAccessGrant";
+import AccessGrantWaiver from "./AccessGrantWaiver.vue";
+import AccessGrantReveal from "./AccessGrantReveal.vue";
+
+const props = defineProps<{
+	responseId: number;
+}>();
+
+const grantState = usePlaytestAccessGrant(props.responseId);
+
+onMounted(() => {
+	grantState.loadAccessGrant();
+});
+
+function sendCode() {
+	grantState.initiateWaiver();
+}
+
+function verifyCode(otpCode: string) {
+	grantState.verifyWaiver(otpCode);
+}
+</script>
+
+<template>
+	<div v-if="grantState.loading.value" class="access-grant-panel access-grant-panel--loading">
+		<div class="access-grant-panel__skeleton" />
+	</div>
+
+	<div v-else-if="grantState.grant.value" class="access-grant-panel">
+		<AccessGrantWaiver
+			v-if="!grantState.grant.value.revealed"
+			:submitting="grantState.submitting.value"
+			:waiver-initiated="grantState.waiverInitiated.value"
+			:error="grantState.genericError.value"
+			@send-code="sendCode"
+			@verify="verifyCode"
+		/>
+		<AccessGrantReveal
+			v-else
+			:access-type="grantState.grant.value.access_type"
+			:key-code="grantState.grant.value.key_code"
+			:external-link="grantState.grant.value.external_link"
+		/>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.access-grant-panel {
+	padding: 16px;
+	background: var(--bg-app-badge);
+	border: 1px solid var(--button-secondary-default-bg);
+
+	&--loading {
+		padding: 0;
+		border: none;
+		background: none;
+	}
+
+	&__skeleton {
+		width: 100%;
+		height: 64px;
+		background: var(--bg-app-badge);
+		animation: access-grant-panel-pulse 1.4s ease-in-out infinite;
+	}
+}
+
+@keyframes access-grant-panel-pulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.4; }
+}
+</style>

package/components/playtest/access-grant/AccessGrantReveal.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+// Masked-reveal-then-copy for a signed access grant. Unlike the key-campaigns
+// redeem flow, the real value already arrived in the API response the moment
+// the waiver was verified — "reveal" here is a deliberate client-side
+// unmask, not a second network round-trip. Mirrors
+// pages/key-campaigns/redeem-key-approved.vue's code-box UI.
+import { ref } from "vue";
+
+const props = defineProps<{
+	accessType: "key" | "link";
+	keyCode?: string | null;
+	externalLink?: string | null;
+}>();
+
+const unmasked = ref(false);
+const copied = ref(false);
+
+const value = props.accessType === "key" ? (props.keyCode ?? "") : (props.externalLink ?? "");
+
+async function copyValue() {
+	if (!value) return;
+	try {
+		await navigator.clipboard.writeText(value);
+		copied.value = true;
+		setTimeout(() => { copied.value = false; }, 2000);
+	} catch {
+		// clipboard API unavailable — the value is still selectable in the input
+	}
+}
+</script>
+
+<template>
+	<div class="access-grant-reveal">
+		<h3 class="access-grant-reveal__title">
+			{{ accessType === "key"
+				? $t("playtest.access_grant.your_key", "Your game key")
+				: $t("playtest.access_grant.your_link", "Your download link") }}
+		</h3>
+
+		<div class="access-grant-reveal__box">
+			<input
+				v-if="!unmasked"
+				type="text"
+				value="••••••••••••••••"
+				readonly
+				class="access-grant-reveal__input access-grant-reveal__input--masked"
+			/>
+			<input
+				v-else
+				type="text"
+				:value="value"
+				readonly
+				class="access-grant-reveal__input"
+			/>
+
+			<button
+				v-if="!unmasked"
+				type="button"
+				class="btn primary"
+				@click="unmasked = true"
+			>
+				{{ $t("playtest.access_grant.reveal", "Reveal") }}
+			</button>
+			<button
+				v-else
+				type="button"
+				class="btn primary"
+				@click="copyValue"
+			>
+				<MGIcon :icon="copied ? 'check' : 'copy'" size="1x" />
+				{{ copied ? $t("playtest.access_grant.copied", "Copied") : $t("playtest.access_grant.copy", "Copy") }}
+			</button>
+		</div>
+
+		<a
+			v-if="unmasked && accessType === 'link'"
+			:href="value"
+			target="_blank"
+			rel="noopener"
+			class="access-grant-reveal__open-link"
+		>
+			{{ $t("playtest.access_grant.open_link", "Open link") }}
+		</a>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.access-grant-reveal {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+
+	&__title {
+		font-size: 15px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0;
+	}
+
+	&__box {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__input {
+		display: flex;
+		padding: 12px;
+		background-color: transparent;
+		height: 44px;
+		border: 1px solid var(--bg-app-badge);
+		width: 100%;
+		font-size: 14px;
+		color: var(--card-article-title, #fff);
+
+		&--masked {
+			letter-spacing: 3px;
+			color: rgba(128, 128, 128, 0.5);
+		}
+	}
+
+	&__open-link {
+		align-self: flex-start;
+		font-size: 12px;
+		color: var(--primary, #d297ff);
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+</style>