@mundogamernetwork/shared-ui 1.2.6 → 1.2.8

package/components/MediaKit/MgRateCardBundleEditor.vue

@@ -0,0 +1,623 @@
+<template>
+	<div id="bundle-editor">
+		<div class="header">
+			<h3>{{ $t("media_kit.bundles.title") }}</h3>
+			<button class="btn-add" v-if="!showForm" @click="openNewForm">
+				+ {{ $t("media_kit.bundles.add_bundle") }}
+			</button>
+		</div>
+
+		<p class="section-desc">{{ $t("media_kit.bundles.description") }}</p>
+
+		<!-- Bundle Form -->
+		<div v-if="showForm" class="bundle-form">
+			<div class="form-group">
+				<label>{{ $t("media_kit.bundles.bundle_name") }}</label>
+				<input v-model="form.name" type="text" :placeholder="$t('media_kit.bundles.name_placeholder')" />
+			</div>
+
+			<div class="form-group">
+				<label>{{ $t("media_kit.bundles.bundle_description") }}</label>
+				<textarea v-model="form.description" rows="2" :placeholder="$t('media_kit.bundles.description_placeholder')"></textarea>
+			</div>
+
+			<!-- Select rate cards to include -->
+			<div class="form-group">
+				<label>{{ $t("media_kit.bundles.select_services") }}</label>
+				<div class="rate-cards-selector">
+					<label
+						v-for="card in availableRateCards"
+						:key="card.id"
+						class="card-checkbox"
+						:class="{ selected: form.rate_card_ids.includes(card.id) }"
+					>
+						<input
+							type="checkbox"
+							:value="card.id"
+							v-model="form.rate_card_ids"
+							class="hidden-checkbox"
+						/>
+						<div class="card-checkbox-content">
+							<span class="card-name">{{ card.content_format?.name || card.label }}</span>
+							<span class="card-channel">{{ card.ad_channel?.name }}</span>
+							<span class="card-price">{{ formatPrice(card.price_min, card.currency) }}</span>
+						</div>
+						<div class="check-indicator">
+							<MGIcon icon="checkmark" v-if="form.rate_card_ids.includes(card.id)" />
+						</div>
+						<div v-if="form.rate_card_ids.includes(card.id)" class="card-qty" @click.stop.prevent>
+							<span>×</span>
+							<input
+								type="number"
+								min="1"
+								:value="qtyFor(card.id)"
+								@input="setQty(card.id, Number(($event.target as HTMLInputElement).value))"
+								@click.stop
+							/>
+						</div>
+					</label>
+				</div>
+				<p v-if="form.rate_card_ids.length === 0" class="hint-text">
+					{{ $t("media_kit.bundles.select_hint") }}
+				</p>
+			</div>
+
+			<!-- Pricing -->
+			<div class="pricing-row">
+				<div class="form-group">
+					<label>{{ $t("media_kit.bundles.original_price") }}</label>
+					<div class="price-display">
+						{{ formatPrice(String(calculatedOriginalPrice), form.currency) }}
+					</div>
+					<span class="hint-text">{{ $t("media_kit.bundles.original_hint") }}</span>
+				</div>
+				<div class="form-group">
+					<label>{{ $t("media_kit.bundles.bundle_price") }}</label>
+					<input v-model="form.bundle_price" type="number" step="0.01" min="0" />
+				</div>
+				<div class="form-group">
+					<label>{{ $t("media_kit.bundles.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>
+
+			<!-- Discount badge -->
+			<div v-if="discountPercent > 0" class="discount-preview">
+				<span class="discount-badge">-{{ discountPercent }}%</span>
+				<span class="discount-label">{{ $t("media_kit.bundles.savings") }}</span>
+			</div>
+
+			<div class="form-row">
+				<div class="form-group">
+					<label>{{ $t("media_kit.bundles.delivery_days") }}</label>
+					<input v-model="form.delivery_time_days" type="number" min="1" />
+				</div>
+				<div class="form-group">
+					<label>{{ $t("media_kit.bundles.is_active") }}</label>
+					<label class="switch">
+						<input type="checkbox" v-model="form.is_active" />
+						<span class="slider"></span>
+					</label>
+				</div>
+			</div>
+
+			<div class="form-actions">
+				<button class="btn-cancel" @click="cancelForm">{{ $t("media_kit.editor.cancel") }}</button>
+				<button class="btn-save" @click="saveBundle" :disabled="saving || form.rate_card_ids.length < 2">
+					{{ editing ? $t("media_kit.editor.update") : $t("media_kit.editor.save") }}
+				</button>
+			</div>
+		</div>
+
+		<!-- Bundles List -->
+		<div class="bundles-list">
+			<div v-for="bundle in bundles" :key="bundle.id" class="bundle-card">
+				<div class="bundle-header">
+					<div class="bundle-name">{{ bundle.name }}</div>
+					<div class="bundle-actions">
+						<button @click="editBundle(bundle)" class="btn-edit"><MGIcon icon="edit" /></button>
+						<button @click="removeBundle(bundle.id)" class="btn-delete"><MGIcon icon="trash" /></button>
+					</div>
+				</div>
+				<p v-if="bundle.description" class="bundle-desc">{{ bundle.description }}</p>
+				<div class="bundle-items">
+					<span v-for="item in bundle.rate_cards?.data || bundle.rate_cards || []" :key="item.id" class="bundle-item-tag">
+						{{ item.content_format?.name || item.label }}
+					</span>
+				</div>
+				<div class="bundle-pricing">
+					<span class="original-price">{{ formatPrice(String(bundle.original_price), bundle.currency) }}</span>
+					<span class="bundle-price">{{ formatPrice(String(bundle.bundle_price), bundle.currency) }}</span>
+					<span v-if="getBundleDiscount(bundle) > 0" class="discount-badge">-{{ getBundleDiscount(bundle) }}%</span>
+				</div>
+				<span v-if="!bundle.is_active" class="inactive-badge">{{ $t("media_kit.bundles.inactive") }}</span>
+			</div>
+		</div>
+
+		<div v-if="!bundles.length && !showForm" class="empty-state">
+			{{ $t("media_kit.bundles.empty") }}
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	createRateCardBundle,
+	updateRateCardBundle,
+	deleteRateCardBundle,
+} 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;
+	content_format?: { id: number; name: string };
+	ad_channel?: { id: number; name: string };
+}
+
+interface Bundle {
+	id: number;
+	name: string;
+	description?: string;
+	original_price: number;
+	bundle_price: number;
+	currency: string;
+	delivery_time_days?: number;
+	is_active: boolean;
+	rate_cards?: { data: RateCard[] } | RateCard[];
+	rate_card_ids?: number[];
+}
+
+const props = withDefaults(
+	defineProps<{
+		bundles: Bundle[];
+		availableRateCards: RateCard[];
+		influencerProInfoId: number;
+		isEnabled?: boolean;
+	}>(),
+	{
+		isEnabled: true,
+	}
+);
+
+const emit = defineEmits<{
+	(e: "refresh"): void;
+	(e: "error", message: string): void;
+	/** Bundles remain a premium feature — host app decides how to react (e.g. show its own paywall modal). */
+	(e: "paywall", feature: string): void;
+}>();
+
+const showForm = ref(false);
+const editing = ref<number | null>(null);
+const saving = ref(false);
+
+const defaultForm = {
+	name: '',
+	description: '',
+	rate_card_ids: [] as number[],
+	quantities: {} as Record<number, number>,
+	bundle_price: '',
+	currency: 'USD',
+	delivery_time_days: '',
+	is_active: true,
+};
+
+const form = ref({ ...defaultForm, quantities: {} });
+
+function qtyFor(id: number): number {
+	return form.value.quantities[id] || 1;
+}
+function setQty(id: number, value: number) {
+	form.value.quantities = { ...form.value.quantities, [id]: Math.max(1, value || 1) };
+}
+
+const calculatedOriginalPrice = computed(() => {
+	const selected = props.availableRateCards.filter(c => form.value.rate_card_ids.includes(c.id));
+	return selected.reduce((sum, c) => sum + Number(c.price_min) * qtyFor(c.id), 0);
+});
+
+const discountPercent = computed(() => {
+	const original = calculatedOriginalPrice.value;
+	const bundle = Number(form.value.bundle_price);
+	if (!original || !bundle || bundle >= original) return 0;
+	return Math.round(((original - bundle) / original) * 100);
+});
+
+function getBundleDiscount(bundle: Bundle): number {
+	if (!bundle.original_price || !bundle.bundle_price || bundle.bundle_price >= bundle.original_price) return 0;
+	return Math.round(((bundle.original_price - bundle.bundle_price) / bundle.original_price) * 100);
+}
+
+const formatPrice = (value: string, currency = 'USD') => {
+	return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(Number(value));
+};
+
+function openNewForm() {
+	form.value = { ...defaultForm, rate_card_ids: [], quantities: {} };
+	editing.value = null;
+	showForm.value = true;
+}
+
+function cancelForm() {
+	showForm.value = false;
+	editing.value = null;
+	form.value = { ...defaultForm, rate_card_ids: [], quantities: {} };
+}
+
+function editBundle(bundle: Bundle) {
+	editing.value = bundle.id;
+	const cards = Array.isArray(bundle.rate_cards)
+		? bundle.rate_cards
+		: bundle.rate_cards?.data || [];
+	const items = (bundle as any).items || [];
+	const quantities: Record<number, number> = {};
+	items.forEach((it: any) => { quantities[it.rate_card_id] = it.quantity || 1; });
+	form.value = {
+		name: bundle.name,
+		description: bundle.description || '',
+		rate_card_ids: bundle.rate_card_ids || cards.map(c => c.id),
+		quantities,
+		bundle_price: String(bundle.bundle_price),
+		currency: bundle.currency,
+		delivery_time_days: bundle.delivery_time_days ? String(bundle.delivery_time_days) : '',
+		is_active: bundle.is_active,
+	};
+	showForm.value = true;
+}
+
+async function saveBundle() {
+	if (props.isEnabled === false) {
+		emit('paywall', 'rates');
+		return;
+	}
+	saving.value = true;
+	try {
+		const payload = {
+			influencer_professional_info_id: props.influencerProInfoId,
+			name: form.value.name,
+			description: form.value.description || null,
+			items: form.value.rate_card_ids.map(id => ({ rate_card_id: id, quantity: qtyFor(id) })),
+			original_price: calculatedOriginalPrice.value,
+			bundle_price: Number(form.value.bundle_price),
+			currency: form.value.currency,
+			delivery_time_days: form.value.delivery_time_days ? Number(form.value.delivery_time_days) : null,
+			is_active: form.value.is_active,
+		};
+
+		if (editing.value) {
+			await updateRateCardBundle(editing.value, payload);
+		} else {
+			await createRateCardBundle(payload);
+		}
+
+		cancelForm();
+		emit('refresh');
+	} catch (error) {
+		emit('error', t('media_kit.editor.error_generic'));
+		console.error('Error saving bundle:', error);
+	} finally {
+		saving.value = false;
+	}
+}
+
+async function removeBundle(id: number) {
+	try {
+		await deleteRateCardBundle(id);
+		emit('refresh');
+	} catch (error) {
+		emit('error', t('media_kit.editor.error_generic'));
+		console.error('Error deleting bundle:', error);
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+#bundle-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.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;
+		}
+	}
+
+	.section-desc {
+		color: #888;
+		font-size: 13px;
+		margin: -8px 0 0;
+	}
+
+	.bundle-form {
+		background: #1E1E22;
+		padding: 20px;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		.form-group {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+
+			label {
+				color: #AAA;
+				font-size: 12px;
+				font-weight: 500;
+			}
+
+			input, select, textarea {
+				background: #272930;
+				border: 1px solid #333;
+				color: #FFF;
+				padding: 10px 12px;
+				font-size: 13px;
+				outline: none;
+				&:focus { border-color: #FDB215; }
+			}
+		}
+
+		.pricing-row, .form-row {
+			display: flex;
+			gap: 16px;
+			@media (max-width: 576px) { flex-direction: column; }
+
+			.form-group { flex: 1; }
+		}
+
+		.price-display {
+			background: #272930;
+			border: 1px solid #333;
+			color: #FDB215;
+			padding: 10px 12px;
+			font-size: 14px;
+			font-weight: 600;
+		}
+
+		.hint-text {
+			color: #666;
+			font-size: 11px;
+		}
+
+		.rate-cards-selector {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+
+			.card-checkbox {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				background: #272930;
+				border: 1px solid #333;
+				padding: 10px 14px;
+				cursor: pointer;
+				transition: all 0.2s;
+
+				&.selected {
+					border-color: #FDB215;
+					background: rgba(253, 178, 21, 0.08);
+				}
+
+				&:hover { border-color: #555; }
+
+				.hidden-checkbox { display: none; }
+
+				.card-checkbox-content {
+					display: flex;
+					gap: 12px;
+					align-items: center;
+					flex: 1;
+
+					.card-name { color: #FFF; font-size: 13px; font-weight: 600; }
+					.card-channel { color: #888; font-size: 12px; }
+					.card-price { color: #FDB215; font-size: 13px; font-weight: 600; margin-left: auto; }
+				}
+
+				.check-indicator {
+					width: 20px;
+					height: 20px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					color: #FDB215;
+					margin-left: 8px;
+				}
+			}
+		}
+
+		.discount-preview {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			padding: 8px 12px;
+			background: rgba(46, 204, 113, 0.1);
+
+			.discount-badge {
+				background: #27ae60;
+				color: #FFF;
+				padding: 2px 8px;
+				font-size: 12px;
+				font-weight: 700;
+			}
+
+			.discount-label {
+				color: #27ae60;
+				font-size: 13px;
+			}
+		}
+
+		.switch {
+			position: relative;
+			display: inline-block;
+			width: 44px;
+			height: 24px;
+
+			input { opacity: 0; width: 0; height: 0; }
+
+			.slider {
+				position: absolute;
+				cursor: pointer;
+				inset: 0;
+				background-color: #333;
+				transition: 0.3s;
+				&::before {
+					content: "";
+					position: absolute;
+					height: 18px; width: 18px;
+					left: 3px; bottom: 3px;
+					background-color: white;
+					transition: 0.3s;
+				}
+			}
+
+			input:checked + .slider { background-color: #FDB215; }
+			input:checked + .slider::before { transform: translateX(20px); }
+		}
+
+		.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 20px;
+				font-weight: 600;
+				cursor: pointer;
+				&:disabled { opacity: 0.4; cursor: not-allowed; }
+			}
+		}
+	}
+
+	.bundles-list {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		.bundle-card {
+			background: #191B20;
+			padding: 16px 20px;
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
+			.bundle-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.bundle-name { color: #FFF; font-size: 15px; font-weight: 600; }
+
+				.bundle-actions {
+					display: flex;
+					gap: 6px;
+
+					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; }
+				}
+			}
+
+			.bundle-desc { color: #888; font-size: 13px; margin: 0; }
+
+			.bundle-items {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 6px;
+
+				.bundle-item-tag {
+					background: rgba(253, 178, 21, 0.12);
+					color: #FDB215;
+					padding: 3px 10px;
+					font-size: 11px;
+					font-weight: 500;
+				}
+			}
+
+			.bundle-pricing {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				margin-top: 4px;
+
+				.original-price {
+					color: #666;
+					font-size: 14px;
+					text-decoration: line-through;
+				}
+
+				.bundle-price {
+					color: #FDB215;
+					font-size: 16px;
+					font-weight: 700;
+				}
+
+				.discount-badge {
+					background: #27ae60;
+					color: #FFF;
+					padding: 2px 8px;
+					font-size: 11px;
+					font-weight: 700;
+				}
+			}
+
+			.inactive-badge {
+				background: rgba(149, 165, 166, 0.15);
+				color: #95a5a6;
+				padding: 2px 8px;
+				font-size: 11px;
+				align-self: flex-start;
+			}
+		}
+	}
+
+	.empty-state {
+		color: #666;
+		font-size: 13px;
+		text-align: center;
+		padding: 24px;
+		background: #18181A;
+	}
+}
+</style>