Merge pull request 'feat: implement dynamic pricing from remnawave-minishop API' (#4) from dev into main

Reviewed-on: #4

package.json

@@ -1,13 +1,13 @@
 {
   "name": "uvpn.shop",
-  "version": "0.6.0",
+  "version": "0.7.2",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "postbuild": "scp -r dist root@uvpn.shop:/opt/uvpn.shop"
+    "postbuild": "scp -r dist/* root@uvpn.shop:/opt/uvpn.shop/frontend"
   },
   "dependencies": {
     "@lucide/vue": "^1.16.0",

src/components/IpSecurity.vue

@@ -3,7 +3,7 @@
     <div class="container mx-auto px-6 py-2 md:px-12">
       <div class="flex items-center justify-between gap-3 flex-wrap">
 
-        <!-- IP и статус защиты -->
+        <!-- Блок с IP и защитой -->
         <div class="flex items-center gap-3">
           <div class="flex items-center gap-2">
             <span class="text-gray-500 dark:text-gray-400 text-xs">🌐 Ваш IP:</span>
@@ -11,18 +11,10 @@
               {{ ipData.ip }}
             </code>
           </div>
-          
+          <span class="inline-flex items-center gap-2 text-xs px-2 py-0.5 rounded-full font-medium" :class="isProtected ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'">
-          <span 
-            class="inline-flex items-center gap-2 text-xs px-2 py-0.5 rounded-full font-medium"
-            :class="isProtected 
-              ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' 
-              : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'"
-          >
             <span class="relative flex h-1.5 w-1.5">
-              <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+              <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" :class="isProtected ? 'bg-green-500' : 'bg-amber-500'"></span>
-                :class="isProtected ? 'bg-green-500' : 'bg-amber-500'"></span>
+              <span class="relative inline-flex rounded-full h-1.5 w-1.5" :class="isProtected ? 'bg-green-600' : 'bg-amber-600'"></span>
-              <span class="relative inline-flex rounded-full h-1.5 w-1.5"
-                :class="isProtected ? 'bg-green-600' : 'bg-amber-600'"></span>
             </span>
             {{ isProtected ? 'Защищено' : 'Не защищено' }}
           </span>
@@ -30,15 +22,13 @@
 
         <!-- Локация с флагом -->
         <div class="flex items-center justify-center gap-1 text-xs text-gray-500 dark:text-gray-400">
-        <div class="flex h-4 items-center">
+          <!-- Локальный SVG-флаг -->
           <img 
-            v-if="flagUrl" 
+            v-if="countryCode" 
-            :src="flagUrl" 
+            :src="`https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/flags/4x3/${countryCode}.svg`" 
             :alt="countryCode"
-            class="w-4 h-3 object-cover"
+            class="h-3 w-auto"
-            @error="handleFlagError"
           />
-        </div>
 
           <template v-if="ipData.location?.city">
             <span class="hidden sm:inline">{{ ipData.location.city }}</span>
@@ -56,6 +46,7 @@
             </span>
           </template>
         </div>
+
       </div>
     </div>
   </div>
@@ -83,67 +74,47 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { getAllCountries, withFlags } from '@tw-labs/countries'
+import { getAllCountries } from '@tw-labs/countries'
 
 const ipData = ref(null)
 const loading = ref(true)
 const error = ref(false)
-const flagError = ref(false)
 
-// Загружаем список стран один раз
+// Список стран для маппинга названия -> код
 const countriesList = getAllCountries()
 
-// Функция поиска страны по названию
 function findCountryByName(countryName) {
   if (!countryName) return null
-  
+  const found = countriesList.find(c => c.label.toLowerCase() === countryName.toLowerCase())
-  // Точное совпадение
-  const found = countriesList.find(
-    c => c.label.toLowerCase() === countryName.toLowerCase()
-  )
-  
   if (found) return found
-  
+  // частичное совпадение (например "Russian Federation" vs "Russia")
-  // Частичное совпадение (для "Russian Federation" vs "Russia" и т.п.)
+  const partial = countriesList.find(c =>
-  const partial = countriesList.find(
+    countryName.toLowerCase().includes(c.label.toLowerCase()) ||
-    c => countryName.toLowerCase().includes(c.label.toLowerCase()) ||
     c.label.toLowerCase().includes(countryName.toLowerCase())
   )
-  
   return partial || null
 }
 
 async function fetchIp() {
   loading.value = true
   error.value = false
-  flagError.value = false
 
   try {
     const response = await fetch('/api/v1/ip')
     if (!response.ok) throw new Error(`HTTP ${response.status}`)
 
     const data = await response.json()
-    
-    // Находим код страны по названию
     const countryName = data.location?.country
     const foundCountry = findCountryByName(countryName)
     const countryCode = foundCountry?.code || null
 
-    // Добавляем флаговые данные через withFlags
-    let countryWithFlags = null
-    if (foundCountry) {
-      countryWithFlags = withFlags(foundCountry)
-    }
-    
     ipData.value = {
       ...data,
       location: {
         ...data.location,
         computed_country_code: countryCode
-      },
-      _flags: countryWithFlags
       }
-    
+    }
   } catch (err) {
     console.error('IP fetch error:', err)
     error.value = true
@@ -155,32 +126,17 @@ async function fetchIp() {
 
 const isProtected = computed(() => {
   if (!ipData.value) return false
-  return ipData.value.security?.vpn || ipData.value.security?.proxy || ipData.value.security?.tor || ipData.value.security?.hosting
+  return ipData.value.security?.vpn ||
+         ipData.value.security?.proxy ||
+         ipData.value.security?.tor ||
+         ipData.value.security?.hosting
 })
 
-// Код страны (вычисленный)
 const countryCode = computed(() => {
-  return ipData.value?.location?.computed_country_code || null
+  const code = ipData.value?.location?.computed_country_code
+  return code ? code.toLowerCase() : null
 })
 
-// URL флага
-const flagUrl = computed(() => {
-  // Сначала пробуем взять SVG из withFlags
-  if (ipData.value?._flags?.flagSvg && !flagError.value) {
-    return ipData.value._flags.flagSvg
-  }
-  
-  // Если нет — формируем сами через flagcdn
-  const code = countryCode.value
-  if (!code || flagError.value) return null
-  
-  return `https://flagcdn.com/${code.toLowerCase()}.svg`
-})
-
-function handleFlagError() {
-  flagError.value = true
-}
-
 function truncateText(text, maxLength) {
   if (!text) return ''
   return text.length > maxLength ? text.slice(0, maxLength) + '...' : text

src/components/PricingSection.vue

@@ -4,8 +4,20 @@
       Прозрачные тарифы
     </h2>
 
+    <!-- Состояние загрузки -->
+    <div v-if="loading" class="flex justify-center py-12">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+    </div>
+
+    <!-- Состояние ошибки -->
+    <div v-else-if="error" class="text-center text-red-500 py-12">
+      {{ error }}
+    </div>
+
+    <!-- Основной контент -->
+    <template v-else>
       <!-- Переключатель периода -->
-    <div class="flex justify-center gap-2 mb-10">
+      <div class="flex justify-center gap-2 mb-10 flex-wrap">
         <button
           v-for="period in availablePeriods"
           :key="period.value"
@@ -20,17 +32,20 @@
       </div>
 
       <!-- Сетка тарифов -->
-    <div class="grid md:grid-cols-2 gap-12">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
+        style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));"
+      >
         <div
           v-for="tariff in tariffCards"
           :key="tariff.key"
-        class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border transition"
+          class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border transition relative"
           :class="[
             tariff.isPopular
-            ? 'border-2 border-blue-600 relative transform scale-105 shadow-2xl shadow-blue-600/20'
+              ? 'border-2 border-blue-600 shadow-xl shadow-blue-600/20'
               : 'border border-gray-200 dark:border-gray-800 hover:border-blue-600'
           ]"
         >
+          <!-- Бейдж "ПОПУЛЯРНЫЙ" -->
           <span
             v-if="tariff.isPopular"
             class="absolute top-0 right-0 bg-blue-600 dark:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold px-4 py-1 rounded-bl-xl rounded-tr-xl"
@@ -49,98 +64,126 @@
             </li>
           </ul>
 
-        <button
+          <a
-          class="w-full transition py-3 rounded-xl font-medium text-white"
+            :href="'https://app.uvpn.shop'"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="w-full transition py-3 rounded-xl font-medium text-white block text-center"
             :class="tariff.isPopular
               ? 'bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 font-bold'
               : 'bg-gray-800 hover:bg-gray-700'"
           >
             {{ tariff.isPopular ? 'Выбрать тариф' : 'Выбрать' }}
-        </button>
+          </a>
         </div>
       </div>
+
+    </template>
   </section>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { Check } from '@lucide/vue'
 
-// Исходный конфиг
+// Состояния
-const pricingConfig = {
+const loading = ref(true)
-  default_tariff: "premium",
+const error = ref(null)
-  tariffs: [
+const tariffsData = ref([])        // исходные тарифы (из API)
-    {
+const defaultTariffKey = ref('')   // ключ популярного тарифа
-      key: "standard",
+const selectedPeriod = ref(1)      // выбранный период (месяцев)
-      names: { ru: "Standard", en: "Standard" },
+
-      descriptions: { ru: "До 3 устройств", en: "up to 3 devices" },
+// Доступные периоды (вычисляются динамически)
-      prices_rub: { "1": 179.0, "3": 387.0, "6": 594.0, "12": 996.0 },
+const availablePeriods = computed(() => {
-      hwid_device_limit: 2,
+  const periodsSet = new Set()
-      monthly_gb: 0.0
+  for (const tariff of tariffsData.value) {
-    },
+    if (tariff.enabled && tariff.enabled_periods) {
-    {
+      tariff.enabled_periods.forEach(p => periodsSet.add(p))
-      key: "premium",
-      names: { ru: "Premium", en: "Premium"},
-      descriptions: { ru: "До 10 устройств, сервера РФ и США", en: "Up to 10 devices, RU, USA servers" },
-      prices_rub: { "1": 349.0, "3": 987.0, "6": 1734.0, "12": 1992.0 },
-      hwid_device_limit: 10,
-      monthly_gb: 0.0
     }
-  ]
   }
+  const sorted = Array.from(periodsSet).sort((a, b) => a - b)
+  return sorted.map(value => ({
+    value,
+    label: value === 1 ? '1 мес' : `${value} мес`
+  }))
+})
 
-// Доступные периоды
+// Активные (включённые) тарифы, отфильтрованные по выбранному периоду
-const availablePeriods = [
+const activeTariffs = computed(() => {
-  { value: 1, label: '1 мес' },
+  return tariffsData.value.filter(tariff =>
-  { value: 3, label: '3 мес' },
+    tariff.enabled && tariff.enabled_periods?.includes(selectedPeriod.value)
-  { value: 6, label: '6 мес' },
+  )
-  { value: 12, label: '12 мес' }
+})
-]
 
-// Выбранный период (по умолчанию 1 месяц)
+// Карточки для отображения (с ценами, фичами и флагом популярности)
-const selectedPeriod = ref(1)
-
-// Функция для получения цены за месяц
-const getMonthlyPrice = (tariff, period) => {
-  const total = tariff.prices_rub[String(period)]
-  if (!total) return '—'
-  const monthly = total / period
-  return Number.isInteger(monthly) ? monthly : monthly.toFixed(2)
-}
-
-// Подготовка данных для карточек
 const tariffCards = computed(() => {
-  const tariffs = pricingConfig.tariffs
+  return activeTariffs.value.map(tariff => {
-  const defaultKey = pricingConfig.default_tariff
+    const totalPrice = tariff.prices_rub?.[String(selectedPeriod.value)]
+    let monthlyPrice = '—'
+    if (totalPrice && totalPrice > 0) {
+      const monthly = totalPrice / selectedPeriod.value
+      monthlyPrice = Number.isInteger(monthly) ? monthly : monthly.toFixed(2)
+    }
 
-  // Разделяем тарифы: популярный (премиум) и остальные
+    // Формируем список особенностей (features)
-  const premiumTariff = tariffs.find(t => t.key === defaultKey)
+    const features = []
-  const otherTariffs = tariffs.filter(t => t.key !== defaultKey)
 
-  // Порядок: первый обычный, премиум, второй обычный
+    // 1. Описание из JSON (если есть)
-  const ordered = [
+    const description = tariff.descriptions?.ru?.trim()
-    { ...otherTariffs[0], isPopular: false },
+    if (description) {
-    { ...premiumTariff, isPopular: true },
+      features.push(description)
-  ]
+    }
 
-  return ordered.map(tariff => {
+    // 2. Лимит устройств
-    const price = getMonthlyPrice(tariff, selectedPeriod.value)
+    if (tariff.hwid_device_limit) {
+      features.push(`До ${tariff.hwid_device_limit} устройств`)
+    }
 
-    // Фичи: разбиваем описание по запятой и добавляем общие пункты
+    // 3. Безлимитный трафик (всегда)
-    const descriptionFeatures = tariff.descriptions.ru
+    features.push('Безлимитный трафик')
-      .split(',')
+
-      .map(s => s.trim())
+    // 4. Поддержка 24/7
-      .filter(Boolean)
+    features.push('Поддержка 24/7')
-    const staticFeatures = ['Безлимитный трафик', 'Поддержка 24/7']
-    const features = [...new Set([...descriptionFeatures, ...staticFeatures])]
 
     return {
       key: tariff.key,
-      name: tariff.names.ru,
+      name: tariff.names?.ru || tariff.key,
-      price: `${price} ₽`,
+      price: `${monthlyPrice} ₽`,
       features,
-      isPopular: tariff.isPopular
+      isPopular: tariff.key === defaultTariffKey.value
     }
   })
 })
+
+// Загрузка данных с API
+const fetchTariffs = async () => {
+  loading.value = true
+  error.value = null
+  try {
+    const response = await fetch('/api/v1/tariffs')
+    if (!response.ok) {
+      throw new Error(`Ошибка загрузки: ${response.status}`)
+    }
+    const data = await response.json()
+    tariffsData.value = data.tariffs || []
+    defaultTariffKey.value = data.default_tariff || ''
+
+    // Установка начального периода (первый доступный)
+    if (availablePeriods.value.length > 0) {
+      const exists = availablePeriods.value.some(p => p.value === selectedPeriod.value)
+      if (!exists) {
+        selectedPeriod.value = availablePeriods.value[0].value
+      }
+    }
+  } catch (err) {
+    console.error('Failed to load tariffs:', err)
+    error.value = 'Не удалось загрузить тарифы. Попробуйте позже.'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchTariffs()
+})
 </script>

vite.config.js

@@ -5,7 +5,6 @@ import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
 import { default as Sitemap } from 'vite-plugin-sitemap';
 
-
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
@@ -13,12 +12,8 @@ export default defineConfig({
     tailwindcss(),
     Sitemap({
       hostname: 'https://uvpn.shop',
-      // Плагин сам прочитает маршруты из вашего router, но если нужно указать вручную:
+      dynamicRoutes: ['/docs/policy', '/docs/agreement'],
-      // routes: ['/', '/docs'], // можно опустить — он определит автоматически
+      outDir: 'dist',
-      // Если у вас динамические маршруты (например, /docs/:docName), их нужно добавить отдельно:
-      dynamicRoutes: ['/docs/policy', '/docs/agreement'], // сюда перечислите все возможные динамические URL
-      // Настройки changefreq, priority и т.д.:
-      outDir: 'dist', // папка сборки
       changefreq: 'weekly',
       priority: 0.8
     })
@@ -28,4 +23,7 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  build: {
+    chunkSizeWarningLimit: 1000
+  }
 })