From b4f9f332cf714717ed52cd18a82af9d2feb22416 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Thu, 12 Mar 2026 18:33:37 +0300
Subject: [PATCH 1/2] feat: add LIMITED subscription status support with
 traffic-exhausted UX

- Add is_limited to Subscription type
- Show yellow traffic-exhausted badge on Subscription and AdminUsers pages
- SubscriptionCardExpired: amber theme with warning icon and buy-traffic CTA for limited
- Dashboard: route limited subscriptions to SubscriptionCardExpired
- Subscription page: show additional options (buy traffic) for limited subs
- Use is_limited boolean instead of status string comparison
- Add trafficLimited translations for ru, en, zh, fa
- AdminUserDetail StatusBadge: add limited yellow styling
---
 .../dashboard/SubscriptionCardExpired.tsx     | 298 +++++++++++-------
 src/locales/en.json                           |   4 +
 src/locales/fa.json                           |   4 +
 src/locales/ru.json                           |   4 +
 src/locales/zh.json                           |   4 +
 src/pages/AdminUserDetail.tsx                 |   1 +
 src/pages/AdminUsers.tsx                      |   8 +-
 src/pages/Dashboard.tsx                       |   4 +-
 src/pages/Subscription.tsx                    |  79 ++++-
 src/types/index.ts                            |   1 +
 10 files changed, 281 insertions(+), 126 deletions(-)

diff --git a/src/components/dashboard/SubscriptionCardExpired.tsx b/src/components/dashboard/SubscriptionCardExpired.tsx
index 9b13259..7bcfb4e 100644
--- 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>
   );
diff --git a/src/locales/en.json b/src/locales/en.json
index 601f0a3..2462568 100644
--- 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",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 401bef2..5e04133 100644
--- 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": "دستگاه‌ها",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index ff68633..9d7d773 100644
--- 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": "Устройства",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 639f69f..091c92f 100644
--- 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": "设备",
diff --git a/src/pages/AdminUserDetail.tsx b/src/pages/AdminUserDetail.tsx
index 35c14d1..202c96e 100644
--- 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',
   };
 
diff --git a/src/pages/AdminUsers.tsx b/src/pages/AdminUsers.tsx
index ef01046..d869e53 100644
--- 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>
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 7564778..d98767f 100644
--- 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}
diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 64ec03c..95514ae 100644
--- 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
diff --git a/src/types/index.ts b/src/types/index.ts
index 933318b..20b0d6f 100644
--- 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;

From 9ae9cccbd96408c05f70163b50a63d7a33061a75 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 13 Mar 2026 06:16:27 +0300
Subject: [PATCH 2/2] perf: lazy-load locale files per language instead of
 bundling all

Split 574KB monolithic locales chunk into per-language lazy chunks:
- ru: 211KB (loaded on startup as fallback)
- fa: 143KB, en: 121KB, zh: 101KB (loaded on demand)

Russian users save 63% bandwidth. Other languages loaded only when
user switches via LanguageSwitcher.
---
 src/i18n.ts    | 48 +++++++++++++++++++++++++++++++++++-------------
 vite.config.ts |  1 -
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/i18n.ts b/src/i18n.ts
index 5c21382..1f803fd 100644
--- 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;
diff --git a/vite.config.ts b/vite.config.ts
index ce18db2..eb6ae11 100644
--- 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') ||