483 lines
19 KiB
Vue
483 lines
19 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
|
@click.self="$emit('close')"
|
|
>
|
|
<div class="bg-gray-800 border border-gray-700 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between px-6 py-5 border-b border-gray-700">
|
|
<h2 class="text-xl font-bold text-white">
|
|
{{ isEditing ? $t('admin.packages.modal_edit_title') : $t('admin.packages.modal_create_title') }}
|
|
</h2>
|
|
<button
|
|
class="p-2 text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded-lg transition-colors"
|
|
@click="$emit('close')"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="px-6 py-5 space-y-6">
|
|
<!-- Display Name (human-readable) -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_display_name') || 'Megjelenített név' }}
|
|
</label>
|
|
<input
|
|
v-model="form.display_name"
|
|
type="text"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Pl. Privát Ingyenes"
|
|
/>
|
|
<p class="text-xs text-gray-500 mt-1">Emberi olvasásra szánt megjelenítési név</p>
|
|
</div>
|
|
|
|
<!-- Name (technical) -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_name') }}
|
|
</label>
|
|
<input
|
|
v-model="form.name"
|
|
type="text"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
:placeholder="$t('admin.packages.field_name_placeholder')"
|
|
/>
|
|
<p class="text-xs text-gray-500 mt-1">Technikai azonosító (pl. private_free_v1)</p>
|
|
</div>
|
|
|
|
<!-- Type -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_type') }}
|
|
</label>
|
|
<select
|
|
v-model="form.type"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="private">{{ $t('admin.packages.type_private') }}</option>
|
|
<option value="corporate">{{ $t('admin.packages.type_corporate') }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Pricing Row -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_monthly_price') }}
|
|
</label>
|
|
<input
|
|
v-model.number="form.monthly_price"
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_yearly_price') }}
|
|
</label>
|
|
<input
|
|
v-model.number="form.yearly_price"
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_currency') }}
|
|
</label>
|
|
<select
|
|
v-model="form.currency"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="EUR">EUR</option>
|
|
<option value="HUF">HUF</option>
|
|
<option value="USD">USD</option>
|
|
<option value="GBP">GBP</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Allowances Row -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_max_vehicles') }}
|
|
</label>
|
|
<input
|
|
v-model.number="form.max_vehicles"
|
|
type="number"
|
|
min="0"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_max_garages') }}
|
|
</label>
|
|
<input
|
|
v-model.number="form.max_garages"
|
|
type="number"
|
|
min="0"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_free_credits') }}
|
|
</label>
|
|
<input
|
|
v-model.number="form.monthly_free_credits"
|
|
type="number"
|
|
min="0"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Credit Price (Kredit Ár) -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_credit_price') }}
|
|
</label>
|
|
<input
|
|
v-model.number="form.credit_price"
|
|
type="number"
|
|
min="0"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
|
/>
|
|
<p class="text-xs text-gray-500 mt-1">Havi kredit költség a csomaghoz</p>
|
|
</div>
|
|
|
|
<!-- Lifecycle Row -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_is_public') }}
|
|
</label>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
v-model="form.is_public"
|
|
type="checkbox"
|
|
class="sr-only peer"
|
|
/>
|
|
<div class="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
|
<span class="ms-3 text-sm text-gray-300">{{ form.is_public ? $t('admin.packages.active') : $t('admin.packages.inactive') }}</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_available_until') }}
|
|
</label>
|
|
<input
|
|
v-model="form.available_until"
|
|
type="date"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<p class="text-xs text-gray-500 mt-1">Ha üres, nincs lejárat</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Affiliate Row -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_commission_rate') }}
|
|
</label>
|
|
<input
|
|
v-model.number="form.commission_rate_percent"
|
|
type="number"
|
|
min="0"
|
|
max="100"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1.5">
|
|
{{ $t('admin.packages.field_referral_bonus') }}
|
|
</label>
|
|
<input
|
|
v-model.number="form.referral_bonus_credits"
|
|
type="number"
|
|
min="0"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entitlements (Chip Selector) -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">
|
|
{{ $t('admin.packages.field_entitlements') }}
|
|
</label>
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
<span
|
|
v-for="ent in selectedEntitlements"
|
|
:key="ent"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-900/50 text-blue-300 border border-blue-700 rounded-full text-sm"
|
|
>
|
|
{{ ent }}
|
|
<button
|
|
class="p-0.5 hover:bg-blue-800 rounded-full transition-colors"
|
|
@click="removeEntitlement(ent)"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div class="relative">
|
|
<select
|
|
v-model="entitlementToAdd"
|
|
class="w-full px-4 py-2.5 bg-gray-700 border border-gray-600 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
@change="addEntitlement"
|
|
>
|
|
<option value="">{{ $t('admin.packages.entitlement_placeholder') }}</option>
|
|
<option
|
|
v-for="ent in availableEntitlements"
|
|
:key="ent"
|
|
:value="ent"
|
|
:disabled="selectedEntitlements.includes(ent)"
|
|
>
|
|
{{ ent }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Display -->
|
|
<div
|
|
v-if="errorMessage"
|
|
class="px-4 py-3 bg-red-900/40 border border-red-700 rounded-lg text-red-300 text-sm"
|
|
>
|
|
{{ errorMessage }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-700">
|
|
<button
|
|
class="px-4 py-2.5 text-sm font-medium text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
|
|
@click="$emit('close')"
|
|
>
|
|
{{ $t('admin.packages.cancel') }}
|
|
</button>
|
|
<button
|
|
class="px-4 py-2.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
:disabled="isSaving || !isFormValid"
|
|
@click="handleSave"
|
|
>
|
|
<span v-if="isSaving" class="flex items-center gap-2">
|
|
<svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
{{ $t('admin.packages.saving') }}
|
|
</span>
|
|
<span v-else>
|
|
{{ isEditing ? $t('admin.packages.save_changes') : $t('admin.packages.create') }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue'
|
|
import { useAdminPackagesStore, AVAILABLE_ENTITLEMENTS } from '../../stores/adminPackages'
|
|
import type { SubscriptionTierItem, SubscriptionRulesModel } from '../../stores/adminPackages'
|
|
|
|
const props = defineProps<{
|
|
package?: SubscriptionTierItem | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
close: []
|
|
saved: []
|
|
}>()
|
|
|
|
const store = useAdminPackagesStore()
|
|
|
|
const isEditing = computed(() => !!props.package)
|
|
|
|
// ── Form State ──────────────────────────────────────────────────────────────
|
|
|
|
const form = ref({
|
|
name: '',
|
|
display_name: '',
|
|
type: 'private' as 'private' | 'corporate',
|
|
monthly_price: 0,
|
|
yearly_price: 0,
|
|
currency: 'EUR',
|
|
credit_price: null as number | null,
|
|
max_vehicles: 0,
|
|
max_garages: 0,
|
|
monthly_free_credits: 0,
|
|
is_public: true,
|
|
available_until: '' as string,
|
|
commission_rate_percent: 0,
|
|
referral_bonus_credits: 0,
|
|
})
|
|
|
|
const selectedEntitlements = ref<string[]>([])
|
|
const entitlementToAdd = ref('')
|
|
const isSaving = ref(false)
|
|
const errorMessage = ref<string | null>(null)
|
|
|
|
const availableEntitlements = computed(() => {
|
|
return AVAILABLE_ENTITLEMENTS.filter((e) => !selectedEntitlements.value.includes(e))
|
|
})
|
|
|
|
const isFormValid = computed(() => {
|
|
return form.value.name.trim().length >= 2
|
|
})
|
|
|
|
// ── Initialize form when editing ────────────────────────────────────────────
|
|
|
|
watch(
|
|
() => props.package,
|
|
(pkg) => {
|
|
if (pkg) {
|
|
const rules = pkg.rules
|
|
form.value.name = pkg.name
|
|
form.value.display_name = rules.display_name || ''
|
|
form.value.type = rules.type
|
|
form.value.monthly_price = rules.pricing.monthly_price
|
|
form.value.yearly_price = rules.pricing.yearly_price
|
|
form.value.currency = rules.pricing.currency
|
|
form.value.credit_price = rules.pricing.credit_price ?? null
|
|
form.value.max_vehicles = rules.allowances.max_vehicles
|
|
form.value.max_garages = rules.allowances.max_garages
|
|
form.value.monthly_free_credits = rules.allowances.monthly_free_credits
|
|
form.value.is_public = rules.lifecycle?.is_public ?? true
|
|
form.value.available_until = rules.lifecycle?.available_until
|
|
? rules.lifecycle.available_until.slice(0, 10)
|
|
: ''
|
|
form.value.commission_rate_percent = rules.affiliate.commission_rate_percent
|
|
form.value.referral_bonus_credits = rules.affiliate.referral_bonus_credits
|
|
selectedEntitlements.value = [...rules.entitlements]
|
|
} else {
|
|
resetForm()
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
function resetForm() {
|
|
form.value = {
|
|
name: '',
|
|
display_name: '',
|
|
type: 'private',
|
|
monthly_price: 0,
|
|
yearly_price: 0,
|
|
currency: 'EUR',
|
|
credit_price: null,
|
|
max_vehicles: 0,
|
|
max_garages: 0,
|
|
monthly_free_credits: 0,
|
|
is_public: true,
|
|
available_until: '',
|
|
commission_rate_percent: 0,
|
|
referral_bonus_credits: 0,
|
|
}
|
|
selectedEntitlements.value = []
|
|
errorMessage.value = null
|
|
}
|
|
|
|
// ── Entitlement Chip Management ─────────────────────────────────────────────
|
|
|
|
function addEntitlement() {
|
|
const val = entitlementToAdd.value
|
|
if (val && !selectedEntitlements.value.includes(val)) {
|
|
selectedEntitlements.value.push(val)
|
|
}
|
|
entitlementToAdd.value = ''
|
|
}
|
|
|
|
function removeEntitlement(ent: string) {
|
|
selectedEntitlements.value = selectedEntitlements.value.filter((e) => e !== ent)
|
|
}
|
|
|
|
// ── Build Rules Object ──────────────────────────────────────────────────────
|
|
|
|
function buildRules(): SubscriptionRulesModel {
|
|
const rules: SubscriptionRulesModel = {
|
|
type: form.value.type,
|
|
pricing: {
|
|
monthly_price: form.value.monthly_price,
|
|
yearly_price: form.value.yearly_price,
|
|
currency: form.value.currency,
|
|
},
|
|
allowances: {
|
|
max_vehicles: form.value.max_vehicles,
|
|
max_garages: form.value.max_garages,
|
|
monthly_free_credits: form.value.monthly_free_credits,
|
|
},
|
|
entitlements: [...selectedEntitlements.value],
|
|
affiliate: {
|
|
commission_rate_percent: form.value.commission_rate_percent,
|
|
referral_bonus_credits: form.value.referral_bonus_credits,
|
|
},
|
|
}
|
|
if (form.value.display_name.trim()) {
|
|
rules.display_name = form.value.display_name.trim()
|
|
}
|
|
// Credit price
|
|
if (form.value.credit_price !== null && form.value.credit_price >= 0) {
|
|
rules.pricing.credit_price = form.value.credit_price
|
|
}
|
|
// Lifecycle
|
|
const lifecycle: Record<string, any> = {
|
|
is_public: form.value.is_public,
|
|
}
|
|
if (form.value.available_until) {
|
|
lifecycle.available_until = form.value.available_until
|
|
}
|
|
rules.lifecycle = lifecycle as any
|
|
return rules
|
|
}
|
|
|
|
// ── Save Handler ────────────────────────────────────────────────────────────
|
|
|
|
async function handleSave() {
|
|
if (!isFormValid.value) return
|
|
|
|
isSaving.value = true
|
|
errorMessage.value = null
|
|
|
|
try {
|
|
const rules = buildRules()
|
|
|
|
if (isEditing.value && props.package) {
|
|
await store.updatePackage(props.package.id, {
|
|
name: form.value.name,
|
|
rules,
|
|
})
|
|
} else {
|
|
// Create: do NOT send id — PostgreSQL auto-increments it
|
|
await store.createPackage({
|
|
name: form.value.name,
|
|
rules,
|
|
})
|
|
}
|
|
|
|
emit('saved')
|
|
} catch (err: any) {
|
|
errorMessage.value = err.response?.data?.detail || store.error || 'An error occurred'
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
</script>
|