@mundogamernetwork/shared-ui 1.2.7 → 1.2.8

package/components/MediaKit/MgRateCardEditor.vue

@@ -0,0 +1,479 @@
+<template>
+	<div id="rate-card-editor">
+		<div class="header">
+			<h3>{{ $t("media_kit.editor.rate_cards_title") }}</h3>
+			<button class="btn-add" @click="showForm = true" v-if="!showForm">
+				+ {{ $t("media_kit.editor.add_rate_card") }}
+			</button>
+		</div>
+
+		<div v-if="showForm" class="rate-card-form">
+			<div class="form-row">
+				<div class="form-group">
+					<label>{{ $t("media_kit.editor.content_format") }}</label>
+					<select v-model="form.content_format_id" :class="{ 'input-error': rateCardErrors.content_format_id }" @change="delete rateCardErrors.content_format_id" required>
+						<option value="">{{ $t("media_kit.editor.select") }}</option>
+						<option v-for="format in contentFormats" :key="format.id" :value="format.id">
+							{{ format.name }}
+						</option>
+					</select>
+				</div>
+				<div class="form-group">
+					<label>{{ $t("media_kit.editor.ad_channel") }}</label>
+					<select v-model="form.ad_channel_id" :class="{ 'input-error': rateCardErrors.ad_channel_id }" @change="delete rateCardErrors.ad_channel_id" required>
+						<option value="">{{ $t("media_kit.editor.select") }}</option>
+						<option v-for="channel in adChannels" :key="channel.id" :value="channel.id">
+							{{ channel.name }}
+						</option>
+					</select>
+				</div>
+			</div>
+			<div class="form-row">
+				<div class="form-group">
+					<label>{{ $t("media_kit.editor.price_min") }}</label>
+					<input v-model="form.price_min" type="number" step="0.01" min="0" :class="{ 'input-error': rateCardErrors.price_min }" @input="delete rateCardErrors.price_min" required />
+					<span v-if="rateCardErrors.price_min" class="field-error">{{ $t('media_kit.editor.error_required') }}</span>
+				</div>
+				<div class="form-group">
+					<label>{{ $t("media_kit.editor.price_max") }}</label>
+					<input v-model="form.price_max" type="number" step="0.01" min="0" />
+				</div>
+				<div class="form-group">
+					<label>{{ $t("media_kit.editor.currency") }}</label>
+					<select v-model="form.currency">
+						<option value="USD">USD</option>
+						<option value="BRL">BRL</option>
+						<option value="EUR">EUR</option>
+					</select>
+				</div>
+			</div>
+
+			<div v-if="showFee" class="mgn-fee-note">
+				<div class="fee-row">
+					<span class="fee-label">
+						{{ $t("media_kit.editor.mgn_fee_label", { percent: commissionPercent, plan: planName }) }}
+					</span>
+					<span class="fee-amount">- {{ feeAmount }}</span>
+				</div>
+				<div class="fee-row net">
+					<span>{{ $t("media_kit.editor.you_receive") }}</span>
+					<strong>{{ netDisplay }}</strong>
+				</div>
+				<small v-if="commissionPercent > 10" class="fee-upsell">
+					{{ $t("media_kit.editor.fee_upsell") }}
+				</small>
+			</div>
+
+			<div class="form-row">
+				<div class="form-group">
+					<label>{{ $t("media_kit.editor.delivery_days") }}</label>
+					<input v-model="form.delivery_time_days" type="number" min="1" />
+				</div>
+				<div class="form-group flex-2">
+					<label>{{ $t("media_kit.editor.label") }}</label>
+					<input v-model="form.label" type="text" :placeholder="$t('media_kit.editor.label_placeholder')" />
+				</div>
+			</div>
+			<div class="form-group">
+				<label>{{ $t("media_kit.editor.description") }}</label>
+				<textarea v-model="form.description" rows="3"
+					:placeholder="$t('media_kit.editor.description_placeholder')"></textarea>
+			</div>
+			<div class="form-actions">
+				<button class="btn-cancel" @click="cancelForm">{{ $t("media_kit.editor.cancel") }}</button>
+				<button class="btn-save" @click="saveRateCard" :disabled="saving">
+					{{ editing ? $t("media_kit.editor.update") : $t("media_kit.editor.save") }}
+				</button>
+			</div>
+		</div>
+
+		<div class="rate-cards-list">
+			<div v-for="card in rateCards" :key="card.id" class="rate-card-item">
+				<div class="card-info">
+					<span class="format">{{ card.content_format?.name || card.label }}</span>
+					<span class="channel">{{ card.ad_channel?.name }}</span>
+					<span class="price">{{ formatPrice(card.price_min, card.price_max, card.currency) }}</span>
+				</div>
+				<div class="card-actions">
+					<button @click="editCard(card)" class="btn-edit">
+						<MGIcon icon="edit" />
+					</button>
+					<button @click="removeCard(card.id)" class="btn-delete">
+						<MGIcon icon="trash" />
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { createRateCard, updateRateCard, deleteRateCard } from "../../services/mediaKitService";
+
+const { t } = useI18n();
+
+interface RateCard {
+	id: number;
+	content_format_id: number;
+	ad_channel_id: number;
+	label?: string;
+	price_min: string;
+	price_max?: string;
+	currency: string;
+	delivery_time_days?: number;
+	description?: string;
+	is_active: boolean;
+	content_format?: { id: number; name: string };
+	ad_channel?: { id: number; name: string };
+}
+
+interface LookupItem {
+	id: number;
+	name: string;
+}
+
+const props = withDefaults(
+	defineProps<{
+		rateCards: RateCard[];
+		influencerProInfoId: number;
+		contentFormats: LookupItem[];
+		adChannels: LookupItem[];
+		isEnabled?: boolean;
+		/** MGN commission % for the current plan (host app resolves this, e.g. from feature_limits). */
+		commissionPercent?: number;
+		/** Current plan name, used in the fee label. */
+		planName?: string;
+	}>(),
+	{
+		isEnabled: true,
+		commissionPercent: 20,
+		planName: "Free",
+	}
+);
+
+const emit = defineEmits<{
+	(e: "refresh"): void;
+	(e: "error", message: string): void;
+}>();
+
+const showForm = ref(false);
+const editing = ref<number | null>(null);
+const saving = ref(false);
+
+const defaultForm = {
+	content_format_id: '',
+	ad_channel_id: '',
+	price_min: '',
+	price_max: '',
+	currency: 'USD',
+	delivery_time_days: '',
+	label: '',
+	description: '',
+};
+
+const form = ref({ ...defaultForm });
+
+const cancelForm = () => {
+	showForm.value = false;
+	editing.value = null;
+	form.value = { ...defaultForm };
+};
+
+const editCard = (card: RateCard) => {
+	editing.value = card.id;
+	form.value = {
+		content_format_id: String(card.content_format_id),
+		ad_channel_id: String(card.ad_channel_id),
+		price_min: card.price_min,
+		price_max: card.price_max || '',
+		currency: card.currency,
+		delivery_time_days: card.delivery_time_days ? String(card.delivery_time_days) : '',
+		label: card.label || '',
+		description: card.description || '',
+	};
+	showForm.value = true;
+};
+
+const rateCardErrors = reactive<Record<string, string>>({});
+
+const saveRateCard = async () => {
+	// Individual rate cards are free on every plan — no paywall gate here.
+	// Client-side required field check (HTML required bypassed by @click)
+	Object.keys(rateCardErrors).forEach(k => delete rateCardErrors[k]);
+	if (!form.value.content_format_id) rateCardErrors.content_format_id = 'required';
+	if (!form.value.ad_channel_id) rateCardErrors.ad_channel_id = 'required';
+	if (!form.value.price_min && form.value.price_min !== 0) rateCardErrors.price_min = 'required';
+	if (Object.keys(rateCardErrors).length) return;
+
+	saving.value = true;
+	try {
+		const payload = {
+			...form.value,
+			influencer_professional_info_id: props.influencerProInfoId,
+			content_format_id: Number(form.value.content_format_id),
+			ad_channel_id: Number(form.value.ad_channel_id),
+			price_min: Number(form.value.price_min),
+			price_max: form.value.price_max ? Number(form.value.price_max) : null,
+			delivery_time_days: form.value.delivery_time_days ? Number(form.value.delivery_time_days) : null,
+		};
+
+		if (editing.value) {
+			await updateRateCard(editing.value, payload);
+		} else {
+			await createRateCard(payload);
+		}
+
+		cancelForm();
+		emit('refresh');
+	} catch (error) {
+		emit('error', t('media_kit.editor.error_generic'));
+		console.error('Error saving rate card:', error);
+	} finally {
+		saving.value = false;
+	}
+};
+
+const removeCard = async (id: number) => {
+	try {
+		await deleteRateCard(id);
+		emit('refresh');
+	} catch (error) {
+		emit('error', t('media_kit.editor.error_generic'));
+		console.error('Error deleting rate card:', error);
+	}
+};
+
+const formatPrice = (min: string, max?: string, currency = 'USD') => {
+	const fmt = (v: string) => new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(Number(v));
+	if (max && Number(max) > Number(min)) return `${fmt(min)} - ${fmt(max)}`;
+	return fmt(min);
+};
+
+// --- MGN fee preview -------------------------------------------------------
+const fmtMoney = (v: number) =>
+	new Intl.NumberFormat('en-US', { style: 'currency', currency: form.value.currency || 'USD' }).format(v);
+
+const netOf = (v: string): number | null => {
+	const n = Number(v);
+	if (!n || n <= 0) return null;
+	return n * (1 - props.commissionPercent / 100);
+};
+
+const showFee = computed(() => Number(form.value.price_min) > 0);
+
+const feeAmount = computed(() => {
+	const n = Number(form.value.price_min);
+	if (!n || n <= 0) return '';
+	return fmtMoney(n * (props.commissionPercent / 100));
+});
+
+const netDisplay = computed(() => {
+	const min = netOf(form.value.price_min);
+	if (min == null) return '';
+	const max = netOf(form.value.price_max);
+	if (max != null && Number(form.value.price_max) > Number(form.value.price_min)) {
+		return `${fmtMoney(min)} – ${fmtMoney(max)}`;
+	}
+	return fmtMoney(min);
+});
+</script>
+
+<style lang="scss" scoped>
+#rate-card-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.mgn-fee-note {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		padding: 12px 14px;
+		margin-bottom: 4px;
+		background: rgba(253, 178, 21, 0.06);
+		border: 1px solid rgba(253, 178, 21, 0.18);
+		border-left: 3px solid #FDB215;
+
+		.fee-row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 13px;
+			color: #B7BAC4;
+
+			.fee-amount { color: #E36464; }
+
+			&.net {
+				color: #FFF;
+				font-size: 14px;
+
+				strong { color: #3FB37F; }
+			}
+		}
+
+		.fee-upsell {
+			color: #FDB215;
+			font-size: 12px;
+		}
+	}
+
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		h3 {
+			color: #FFF;
+			font-size: 16px;
+			font-weight: 600;
+		}
+
+		.btn-add {
+			background: #FDB215;
+			color: #13161C;
+			border: none;
+			padding: 8px 16px;
+			font-size: 13px;
+			font-weight: 500;
+			cursor: pointer;
+		}
+	}
+
+	.rate-card-form {
+		background: #1E1E22;
+		padding: 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		.form-row {
+			display: flex;
+			gap: 12px;
+
+			@media (max-width: 576px) {
+				flex-direction: column;
+			}
+		}
+
+		.form-group {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+			flex: 1;
+
+			&.flex-2 {
+				flex: 2;
+			}
+
+			label {
+				color: #AAA;
+				font-size: 12px;
+			}
+
+			input,
+			select,
+			textarea {
+				background: #272930;
+				border: 1px solid #333;
+				color: #FFF;
+				padding: 8px;
+				font-size: 13px;
+				outline: none;
+
+				&:focus {
+					border-color: #FDB215;
+				}
+			}
+		}
+
+		.form-actions {
+			display: flex;
+			justify-content: flex-end;
+			gap: 8px;
+
+			.btn-cancel {
+				background: transparent;
+				color: #AAA;
+				border: 1px solid #333;
+				padding: 8px 16px;
+				cursor: pointer;
+			}
+
+			.btn-save {
+				background: #FDB215;
+				color: #13161C;
+				border: none;
+				padding: 8px 16px;
+				font-weight: 500;
+				cursor: pointer;
+
+				&:disabled {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	.rate-cards-list {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		.rate-card-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background: #191B20;
+			padding: 12px 16px;
+
+			.card-info {
+				display: flex;
+				gap: 16px;
+				align-items: center;
+
+				.format {
+					color: #FFF;
+					font-size: 14px;
+					font-weight: 600;
+				}
+
+				.channel {
+					color: #AAA;
+					font-size: 12px;
+				}
+
+				.price {
+					color: #FDB215;
+					font-size: 14px;
+					font-weight: 600;
+				}
+			}
+
+			.card-actions {
+				display: flex;
+				gap: 8px;
+
+				button {
+					background: transparent;
+					border: none;
+					cursor: pointer;
+					padding: 4px;
+
+					i {
+						color: #AAA;
+						font-size: 16px;
+					}
+
+					&:hover i {
+						color: #FFF;
+					}
+				}
+
+				.btn-delete:hover i {
+					color: #ff4d4f;
+				}
+			}
+		}
+	}
+}
+</style>

package/package.json

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

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

@@ -26,10 +26,18 @@ const SUPPORTED_LOCALES = ['en', 'pt-BR', 'es', 'de', 'ro', 'ar-AE'];
 const routePath = route.path.split('/');
 const lang = SUPPORTED_LOCALES.find(l => routePath.includes(l)) || 'en';
 
+// Admin-generated preview links (network-adminV3) pass this so drafts/archived
+// 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(
 	`press-kit-${slug}`,
 	() => $fetch<any>(`${apiBase}/public/press-kits/${slug}`, {
-		params: { include: 'assets,videos,credits,awards,quotes', lang },
+		params: {
+			include: 'assets,videos,credits,awards,quotes',
+			lang,
+			...(previewToken ? { preview_token: previewToken } : {}),
+		},
 	}),
 	{ lazy: false },
 );
@@ -48,7 +56,7 @@ const loading = pending;
 const error = computed(() => !!fetchError.value || (!pending.value && !kit.value));
 
 onMounted(() => {
-	if (kit.value) {
+	if (kit.value && !previewToken) {
 		trackPressKitEvent(slug, {
 			event_type: 'view',
 			referrer: document.referrer || undefined,
@@ -165,6 +173,7 @@ const moreKits = computed(() => {
 });
 
 function track(type: 'click' | 'download' | 'contact') {
+	if (previewToken) return;
 	trackPressKitEvent(slug, { event_type: type, referrer: document.referrer || undefined }).catch(() => {});
 }
 

package/services/mediaKitService.ts

@@ -52,3 +52,50 @@ export const trackMediaKitEvent = (
 	userId: number | string,
 	data: { type?: "view" | "click" | "download" | "contact"; referrer?: string } = {},
 ) => mk.post(`media-kit/${userId}/track`, data)
+
+// ── Authoring (dashboard builder) ──────────────────────────────────────────
+// Shared across every front's media-kit builder (agency, tv, community…). The
+// base URL already ends in /api/v1, so paths are relative (no leading slash).
+
+export const fetchRateCards = (params: Record<string, any> = {}) =>
+	mk.get("rate-cards", { params })
+export const createRateCard = (data: Record<string, any>) =>
+	mk.post("rate-cards", data)
+export const updateRateCard = (id: number, data: Record<string, any>) =>
+	mk.put(`rate-cards/${id}`, data)
+export const deleteRateCard = (id: number) =>
+	mk.delete(`rate-cards/${id}`)
+
+export const fetchRateCardBundles = (params: Record<string, any> = {}) =>
+	mk.get("rate-card-bundles", { params })
+export const createRateCardBundle = (data: Record<string, any>) =>
+	mk.post("rate-card-bundles", data)
+export const updateRateCardBundle = (id: number, data: Record<string, any>) =>
+	mk.put(`rate-card-bundles/${id}`, data)
+export const deleteRateCardBundle = (id: number) =>
+	mk.delete(`rate-card-bundles/${id}`)
+
+export const fetchMediaKitSettings = (influencerProInfoId: number) =>
+	mk.get(`media-kit-settings/${influencerProInfoId}`)
+export const createMediaKitSettings = (data: Record<string, any>) =>
+	mk.post("media-kit-settings", data)
+export const updateMediaKitSettings = (influencerProInfoId: number, data: Record<string, any>) =>
+	mk.put(`media-kit-settings/${influencerProInfoId}`, data)
+
+// Uploads a single image (avatar / cover / portfolio / brand logo) → public URL.
+export const uploadMediaKitImage = async (file: File): Promise<string> => {
+	const form = new FormData()
+	form.append("image", file)
+	const res = await mk.post("me/media-kit/upload-image", form, {
+		headers: { "Content-Type": "multipart/form-data" },
+	})
+	return (res?.data as any)?.data?.url as string
+}
+
+// Rate card editor dropdown lookups — public, auth-free, shared across every
+// front's builder (mirrors agency's /public/influencer-lookups/* but reachable
+// from any service that registers MediaKitProvider, not just agency-api).
+export const fetchMediaKitContentFormats = () =>
+	mk.get("media-kit-lookups/content-formats")
+export const fetchMediaKitAdChannels = () =>
+	mk.get("media-kit-lookups/ad-channels")