Merge pull request #287 from BEDOLAGA-DEV/dev

Dev
2026-07-28 09:33:46 +00:00 · 2026-03-13 06:18:02 +03:00
parent 9f12ca418c 9ae9cccbd9
commit 46ea9067e2
12 changed files with 316 additions and 140 deletions
--- a/src/components/dashboard/SubscriptionCardExpired.tsx
+++ b/src/components/dashboard/SubscriptionCardExpired.tsx
@@ -38,6 +38,9 @@ export default function SubscriptionCardExpired({

  const formattedDate = new Date(subscription.end_date).toLocaleDateString();

+  // Detect limited (traffic exhausted) state
+  const isLimited = subscription.is_limited;
+
  // Detect daily subscription (disabled or expired)
  const isDaily = subscription.is_daily;
  const isDisabledDaily = subscription.status === 'disabled' && isDaily;
@@ -92,19 +95,38 @@ export default function SubscriptionCardExpired({
    navigate(`/balance/top-up?${params.toString()}`);
  };

+  // Color scheme: amber for limited, red for expired/disabled
+  const accent = isLimited
+    ? {
+        r: 255,
+        g: 184,
+        b: 0,
+        hex: '#FFB800',
+        gradient: 'linear-gradient(135deg, #FFB800, #FF8C00)',
+      }
+    : {
+        r: 255,
+        g: 59,
+        b: 92,
+        hex: '#FF3B5C',
+        gradient: 'linear-gradient(135deg, #FF3B5C, #FF6B35)',
+      };
+
  return (
    <div
      className={`relative overflow-hidden rounded-3xl ${className ?? ''}`}
      style={{
        background: g.cardBg,
-        border: isDark ? '1px solid rgba(255,70,70,0.12)' : '1px solid rgba(255,59,92,0.2)',
+        border: isDark
+          ? `1px solid rgba(${accent.r},${accent.g},${accent.b},0.12)`
+          : `1px solid rgba(${accent.r},${accent.g},${accent.b},0.2)`,
        boxShadow: isDark
          ? g.shadow
-          : '0 2px 16px rgba(255,59,92,0.1), 0 0 0 1px rgba(255,59,92,0.06)',
+          : `0 2px 16px rgba(${accent.r},${accent.g},${accent.b},0.1), 0 0 0 1px rgba(${accent.r},${accent.g},${accent.b},0.06)`,
        padding: '28px 28px 24px',
      }}
    >
-      {/* Red glow */}
+      {/* Glow */}
      <div
        className="pointer-events-none absolute"
        style={{
@@ -113,7 +135,7 @@ export default function SubscriptionCardExpired({
          width: 200,
          height: 200,
          borderRadius: '50%',
-          background: 'radial-gradient(circle, rgba(255,59,92,0.08) 0%, transparent 70%)',
+          background: `radial-gradient(circle, rgba(${accent.r},${accent.g},${accent.b},0.08) 0%, transparent 70%)`,
        }}
        aria-hidden="true"
      />
@@ -134,44 +156,70 @@ export default function SubscriptionCardExpired({

      {/* Header */}
      <div className="mb-5 flex items-center gap-3">
-        {/* Clock icon */}
        <div
          className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[14px]"
          style={{
-            background: 'rgba(255,59,92,0.1)',
-            border: '1px solid rgba(255,59,92,0.15)',
+            background: `rgba(${accent.r},${accent.g},${accent.b},0.1)`,
+            border: `1px solid rgba(${accent.r},${accent.g},${accent.b},0.15)`,
          }}
        >
-          <svg
-            width="22"
-            height="22"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="#FF3B5C"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <circle cx="12" cy="12" r="10" />
-            <path d="M12 6v6l4 2" />
-          </svg>
+          {isLimited ? (
+            <svg
+              width="22"
+              height="22"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke={accent.hex}
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+              <line x1="12" y1="9" x2="12" y2="13" />
+              <line x1="12" y1="17" x2="12.01" y2="17" />
+            </svg>
+          ) : (
+            <svg
+              width="22"
+              height="22"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke={accent.hex}
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 6v6l4 2" />
+            </svg>
+          )}
        </div>
        <h2 className="text-lg font-bold tracking-tight text-dark-50">
-          {isDisabledDaily
-            ? t('dashboard.suspended.title')
-            : subscription.is_trial
-              ? t('dashboard.expired.trialTitle')
-              : t('dashboard.expired.title')}
+          {isLimited
+            ? t('subscription.trafficLimitedTitle')
+            : isDisabledDaily
+              ? t('dashboard.suspended.title')
+              : subscription.is_trial
+                ? t('dashboard.expired.trialTitle')
+                : t('dashboard.expired.title')}
        </h2>
      </div>

+      {/* Limited description */}
+      {isLimited && (
+        <p className="mb-4 text-sm text-dark-50/60">
+          {t('subscription.trafficLimitedDescription')}
+        </p>
+      )}
+
      {/* Expired date + Balance row */}
      <div
        className="mb-5 flex items-center justify-between rounded-[14px]"
        style={{
-          background: 'rgba(255,59,92,0.04)',
-          border: '1px solid rgba(255,59,92,0.08)',
+          background: `rgba(${accent.r},${accent.g},${accent.b},0.04)`,
+          border: `1px solid rgba(${accent.r},${accent.g},${accent.b},0.08)`,
          padding: '14px 18px',
        }}
      >
@@ -207,95 +255,123 @@ export default function SubscriptionCardExpired({

      {/* Action buttons */}
      <div className="flex gap-2.5">
-        {/* Quick Renew or Top Up button (hidden for expired trials) */}
-        {!subscription.is_trial && (
+        {isLimited ? (
+          <Link
+            to="/subscription"
+            className="flex flex-1 items-center justify-center gap-2 rounded-[14px] py-3.5 text-[15px] font-semibold tracking-tight text-white transition-all duration-300"
+            style={{
+              background: accent.gradient,
+              boxShadow: `0 4px 20px rgba(${accent.r},${accent.g},${accent.b},0.2)`,
+            }}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+            {t('subscription.trafficLimited')}
+          </Link>
+        ) : (
          <>
-            {hasBalance ? (
-              <button
-                type="button"
-                onClick={handleQuickRenew}
-                disabled={isRenewing}
-                className="flex flex-1 items-center justify-center gap-2 rounded-[14px] py-3.5 text-[15px] font-semibold tracking-tight text-white transition-all duration-300 disabled:opacity-50"
-                style={{
-                  background: 'linear-gradient(135deg, #FF3B5C, #FF6B35)',
-                  boxShadow: '0 4px 20px rgba(255,59,92,0.2)',
-                }}
-              >
-                {isRenewing ? (
-                  <span
-                    className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white"
-                    aria-hidden="true"
-                  />
-                ) : (
-                  <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    aria-hidden="true"
+            {/* Quick Renew or Top Up button (hidden for expired trials) */}
+            {!subscription.is_trial && (
+              <>
+                {hasBalance ? (
+                  <button
+                    type="button"
+                    onClick={handleQuickRenew}
+                    disabled={isRenewing}
+                    className="flex flex-1 items-center justify-center gap-2 rounded-[14px] py-3.5 text-[15px] font-semibold tracking-tight text-white transition-all duration-300 disabled:opacity-50"
+                    style={{
+                      background: accent.gradient,
+                      boxShadow: `0 4px 20px rgba(${accent.r},${accent.g},${accent.b},0.2)`,
+                    }}
                  >
-                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
-                  </svg>
+                    {isRenewing ? (
+                      <span
+                        className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        aria-hidden="true"
+                      >
+                        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+                      </svg>
+                    )}
+                    {isRenewing
+                      ? t('common.loading')
+                      : isDisabledDaily
+                        ? t('dashboard.suspended.resume')
+                        : t('dashboard.expired.quickRenew')}
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={handleTopUp}
+                    className="flex flex-1 items-center justify-center gap-2 rounded-[14px] py-3.5 text-[15px] font-semibold tracking-tight text-white transition-all duration-300"
+                    style={{
+                      background: accent.gradient,
+                      boxShadow: `0 4px 20px rgba(${accent.r},${accent.g},${accent.b},0.2)`,
+                    }}
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M12 4.5v15m7.5-7.5h-15" />
+                    </svg>
+                    {t('dashboard.expired.topUp')}
+                  </button>
                )}
-                {isRenewing
-                  ? t('common.loading')
-                  : isDisabledDaily
-                    ? t('dashboard.suspended.resume')
-                    : t('dashboard.expired.quickRenew')}
-              </button>
-            ) : (
-              <button
-                type="button"
-                onClick={handleTopUp}
-                className="flex flex-1 items-center justify-center gap-2 rounded-[14px] py-3.5 text-[15px] font-semibold tracking-tight text-white transition-all duration-300"
-                style={{
-                  background: 'linear-gradient(135deg, #FF3B5C, #FF6B35)',
-                  boxShadow: '0 4px 20px rgba(255,59,92,0.2)',
-                }}
-              >
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  aria-hidden="true"
-                >
-                  <path d="M12 4.5v15m7.5-7.5h-15" />
-                </svg>
-                {t('dashboard.expired.topUp')}
-              </button>
+              </>
            )}
+
+            {/* Tariffs (go to purchase page) — full-width for trials */}
+            <Link
+              to="/subscription/purchase"
+              className={`flex items-center justify-center rounded-[14px] px-5 py-3.5 text-[15px] font-semibold tracking-tight transition-colors duration-200 ${
+                subscription.is_trial ? 'flex-1 text-white' : 'text-dark-50/50'
+              }`}
+              style={
+                subscription.is_trial
+                  ? {
+                      background: accent.gradient,
+                      boxShadow: `0 4px 20px rgba(${accent.r},${accent.g},${accent.b},0.2)`,
+                    }
+                  : {
+                      background: g.innerBg,
+                      border: `1px solid ${g.innerBorder}`,
+                    }
+              }
+            >
+              {t('dashboard.expired.tariffs')}
+            </Link>
          </>
        )}
-
-        {/* Tariffs (go to purchase page) — full-width for trials */}
-        <Link
-          to="/subscription/purchase"
-          className={`flex items-center justify-center rounded-[14px] px-5 py-3.5 text-[15px] font-semibold tracking-tight transition-colors duration-200 ${
-            subscription.is_trial ? 'flex-1 text-white' : 'text-dark-50/50'
-          }`}
-          style={
-            subscription.is_trial
-              ? {
-                  background: 'linear-gradient(135deg, #FF3B5C, #FF6B35)',
-                  boxShadow: '0 4px 20px rgba(255,59,92,0.2)',
-                }
-              : {
-                  background: g.innerBg,
-                  border: `1px solid ${g.innerBorder}`,
-                }
-          }
-        >
-          {t('dashboard.expired.tariffs')}
-        </Link>
      </div>
    </div>
  );
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -2,25 +2,36 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';

-import ru from './locales/ru.json';
-import en from './locales/en.json';
-import zh from './locales/zh.json';
-import fa from './locales/fa.json';
-
-const resources = {
-  ru: { translation: ru },
-  en: { translation: en },
-  zh: { translation: zh },
-  fa: { translation: fa },
+const localeLoaders: Record<string, () => Promise<{ default: Record<string, string> }>> = {
+  ru: () => import('./locales/ru.json'),
+  en: () => import('./locales/en.json'),
+  zh: () => import('./locales/zh.json'),
+  fa: () => import('./locales/fa.json'),
 };

+const SUPPORTED_LANGS = Object.keys(localeLoaders);
+const FALLBACK_LNG = 'ru';
+
+const loadedLanguages = new Set<string>();
+
+async function loadLanguage(lng: string): Promise<void> {
+  if (loadedLanguages.has(lng)) return;
+
+  const loader = localeLoaders[lng];
+  if (!loader) return;
+
+  const mod = await loader();
+  i18n.addResourceBundle(lng, 'translation', mod.default, true, true);
+  loadedLanguages.add(lng);
+}
+
 i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
-    resources,
-    fallbackLng: 'ru',
-    supportedLngs: ['ru', 'en', 'zh', 'fa'],
+    fallbackLng: FALLBACK_LNG,
+    supportedLngs: SUPPORTED_LANGS,
+    partialBundledLanguages: true,

    detection: {
      order: ['localStorage', 'navigator'],
@@ -37,4 +48,15 @@ i18n
    },
  });

+// Load detected language + fallback on startup
+const detectedLng = i18n.language?.split('-')[0] || FALLBACK_LNG;
+const langsToLoad = [FALLBACK_LNG, ...(detectedLng !== FALLBACK_LNG ? [detectedLng] : [])];
+Promise.all(langsToLoad.map(loadLanguage));
+
+// Lazy-load on language change
+i18n.on('languageChanged', (lng: string) => {
+  const code = lng.split('-')[0];
+  loadLanguage(code);
+});
+
 export default i18n;
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -171,6 +171,7 @@
    "telegramRetryFailed": "Authorization failed. Close the app and try again.",
    "telegramReopenHint": "If the problem persists, close and reopen the app",
    "telegramNotConfigured": "Telegram bot is not configured",
+    "telegramUnavailable": "Telegram login is temporarily unavailable",
    "authenticating": "Authenticating...",
    "orOpenInApp": "Or open the bot in the app",
    "loginFailed": "Login Failed",
@@ -290,6 +291,9 @@
    "inactive": "Inactive",
    "trialStatus": "Trial",
    "expired": "Expired",
+    "trafficLimited": "Traffic Exhausted",
+    "trafficLimitedTitle": "Traffic Limit Reached",
+    "trafficLimitedDescription": "Your traffic has been exhausted. Purchase additional traffic below to continue using VPN.",
    "expiresAt": "Expires at",
    "daysLeft": "Days left",
    "devices": "Devices",
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -163,6 +163,7 @@
    "telegramRetryFailed": "تایید هویت ناموفق بود. برنامه را ببندید و دوباره باز کنید.",
    "telegramReopenHint": "اگر مشکل ادامه دارد، برنامه را ببندید و دوباره باز کنید",
    "telegramNotConfigured": "ربات تلگرام پیکربندی نشده",
+    "telegramUnavailable": "ورود از طریق تلگرام موقتاً در دسترس نیست",
    "authenticating": "در حال تایید هویت...",
    "orOpenInApp": "یا ربات را در برنامه باز کنید",
    "loginFailed": "ورود ناموفق",
@@ -250,6 +251,9 @@
    "inactive": "غیرفعال",
    "trialStatus": "دوره آزمایشی",
    "expired": "منقضی شده",
+    "trafficLimited": "ترافیک تمام شده",
+    "trafficLimitedTitle": "محدودیت ترافیک",
+    "trafficLimitedDescription": "ترافیک شما تمام شده است. برای ادامه استفاده از VPN، ترافیک اضافی خریداری کنید.",
    "expiresAt": "تاریخ انقضا",
    "daysLeft": "روز باقی‌مانده",
    "devices": "دستگاه‌ها",
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -174,6 +174,7 @@
    "telegramRetryFailed": "Авторизация не удалась. Закройте приложение и откройте заново.",
    "telegramReopenHint": "Если проблема повторяется — закройте и откройте приложение заново",
    "telegramNotConfigured": "Telegram бот не настроен",
+    "telegramUnavailable": "Вход через Telegram временно недоступен",
    "authenticating": "Авторизация...",
    "orOpenInApp": "Или откройте бота в приложении",
    "loginFailed": "Ошибка входа",
@@ -302,6 +303,9 @@
    "inactive": "Неактивна",
    "trialStatus": "Пробный период",
    "expired": "Истекла",
+    "trafficLimited": "Трафик исчерпан",
+    "trafficLimitedTitle": "Трафик закончился",
+    "trafficLimitedDescription": "Ваш трафик исчерпан. Докупите дополнительный трафик ниже, чтобы продолжить пользоваться VPN.",
    "expiresAt": "Действует до",
    "daysLeft": "Осталось дней",
    "devices": "Устройства",
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -163,6 +163,7 @@
    "telegramRetryFailed": "授权失败。请关闭应用后重新打开。",
    "telegramReopenHint": "如果问题持续存在，请关闭并重新打开应用",
    "telegramNotConfigured": "Telegram机器人未配置",
+    "telegramUnavailable": "Telegram登录暂时不可用",
    "authenticating": "正在验证...",
    "orOpenInApp": "或在应用中打开机器人",
    "loginFailed": "登录失败",
@@ -250,6 +251,9 @@
    "inactive": "无效",
    "trialStatus": "试用期",
    "expired": "已过期",
+    "trafficLimited": "流量已用尽",
+    "trafficLimitedTitle": "流量已达上限",
+    "trafficLimitedDescription": "您的流量已用尽。请在下方购买额外流量以继续使用VPN。",
    "expiresAt": "到期时间",
    "daysLeft": "剩余天数",
    "devices": "设备",
--- a/src/pages/AdminUserDetail.tsx
+++ b/src/pages/AdminUserDetail.tsx
@@ -119,6 +119,7 @@ function StatusBadge({ status }: { status: string }) {
    deleted: 'bg-dark-600 text-dark-400 border-dark-500',
    trial: 'bg-accent-500/20 text-accent-400 border-accent-500/30',
    expired: 'bg-warning-500/20 text-warning-400 border-warning-500/30',
+    limited: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
    disabled: 'bg-dark-600 text-dark-400 border-dark-500',
  };

--- a/src/pages/AdminUsers.tsx
+++ b/src/pages/AdminUsers.tsx
@@ -147,14 +147,18 @@ function UserRow({ user, onClick, formatAmount }: UserRowProps) {
                  ? 'border-success-500/30 bg-success-500/20 text-success-400'
                  : user.subscription_status === 'trial'
                    ? 'border-accent-500/30 bg-accent-500/20 text-accent-400'
-                    : 'border-warning-500/30 bg-warning-500/20 text-warning-400'
+                    : user.subscription_status === 'limited'
+                      ? 'border-yellow-500/30 bg-yellow-500/20 text-yellow-400'
+                      : 'border-warning-500/30 bg-warning-500/20 text-warning-400'
              }`}
            >
              {user.subscription_status === 'active'
                ? t('admin.users.status.subscription')
                : user.subscription_status === 'trial'
                  ? t('admin.users.status.trial')
-                  : t('admin.users.status.expired')}
+                  : user.subscription_status === 'limited'
+                    ? t('subscription.trafficLimited')
+                    : t('admin.users.status.expired')}
            </span>
          )}
        </div>
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -247,7 +247,9 @@ export default function Dashboard() {
            <div className="skeleton h-12 w-full rounded-xl" />
          </div>
        </div>
-      ) : subscription?.is_expired || subscription?.status === 'disabled' ? (
+      ) : subscription?.is_expired ||
+        subscription?.status === 'disabled' ||
+        subscription?.is_limited ? (
        <SubscriptionCardExpired
          subscription={subscription}
          balanceKopeks={balanceData?.balance_kopeks ?? 0}
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -518,23 +518,76 @@ export default function Subscription() {
                  style={{
                    background: subscription.is_active
                      ? `${zone.mainHex}15`
-                      : 'rgba(255,59,92,0.12)',
+                      : subscription.is_limited
+                        ? 'rgba(255,184,0,0.12)'
+                        : 'rgba(255,59,92,0.12)',
                    border: subscription.is_active
                      ? `1px solid ${zone.mainHex}30`
-                      : '1px solid rgba(255,59,92,0.25)',
-                    color: subscription.is_active ? zone.mainHex : '#FF3B5C',
+                      : subscription.is_limited
+                        ? '1px solid rgba(255,184,0,0.25)'
+                        : '1px solid rgba(255,59,92,0.25)',
+                    color: subscription.is_active
+                      ? zone.mainHex
+                      : subscription.is_limited
+                        ? '#FFB800'
+                        : '#FF3B5C',
                  }}
                >
                  {subscription.is_active
                    ? subscription.is_trial
                      ? t('subscription.trialStatus')
                      : t('subscription.active')
-                    : subscription.status === 'disabled'
-                      ? t('subscription.pause.suspended')
-                      : t('subscription.expired')}
+                    : subscription.is_limited
+                      ? t('subscription.trafficLimited')
+                      : subscription.status === 'disabled'
+                        ? t('subscription.pause.suspended')
+                        : t('subscription.expired')}
                </span>
              </div>

+              {/* ─── Traffic Limited Banner ─── */}
+              {subscription.is_limited && (
+                <div
+                  className="mb-6 rounded-[14px] p-4"
+                  style={{
+                    background:
+                      'linear-gradient(135deg, rgba(255,184,0,0.08), rgba(255,184,0,0.03))',
+                    border: '1px solid rgba(255,184,0,0.2)',
+                  }}
+                >
+                  <div className="flex items-start gap-3">
+                    <div
+                      className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-[10px]"
+                      style={{ background: 'rgba(255,184,0,0.12)' }}
+                    >
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="#FFB800"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        aria-hidden="true"
+                      >
+                        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+                        <line x1="12" y1="9" x2="12" y2="13" />
+                        <line x1="12" y1="17" x2="12.01" y2="17" />
+                      </svg>
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-semibold" style={{ color: '#FFB800' }}>
+                        {t('subscription.trafficLimitedTitle')}
+                      </p>
+                      <p className="mt-1 text-xs text-dark-400">
+                        {t('subscription.trafficLimitedDescription')}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
              {/* ─── Trial Info Banner ─── */}
              {subscription.is_trial && subscription.is_active && (
                <div
@@ -988,11 +1041,13 @@ export default function Subscription() {
                {t('subscription.pause.title')}
              </h2>
              <div className="mt-1 text-[12px] text-dark-50/35">
-                {subscription.status === 'disabled'
-                  ? t('subscription.pause.suspended')
-                  : subscription.is_daily_paused
-                    ? t('subscription.pause.paused')
-                    : t('subscription.pause.active')}
+                {subscription.is_limited
+                  ? t('subscription.trafficLimited')
+                  : subscription.status === 'disabled'
+                    ? t('subscription.pause.suspended')
+                    : subscription.is_daily_paused
+                      ? t('subscription.pause.paused')
+                      : t('subscription.pause.active')}
              </div>
            </div>
            <button
@@ -1140,7 +1195,7 @@ export default function Subscription() {

      {/* Additional Options (Buy Devices) */}
      {subscription &&
-        subscription.is_active &&
+        (subscription.is_active || subscription.is_limited) &&
        !subscription.is_trial &&
        subscription.device_limit !== 0 && (
          <div
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -91,6 +91,7 @@ export interface Subscription {
  hide_subscription_link: boolean;
  is_active: boolean;
  is_expired: boolean;
+  is_limited: boolean;
  traffic_purchases?: TrafficPurchase[];
  // Daily tariff fields
  is_daily?: boolean;
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -36,7 +36,6 @@ export default defineConfig({
    rollupOptions: {
      output: {
        manualChunks(id) {
-          if (id.includes('/src/locales/')) return 'locales';
          if (!id.includes('node_modules')) return;
          if (
            id.includes('react-dom') ||