feat: support disabled daily subscription status in cabinet UI

- Show SubscriptionCardExpired for disabled daily subscriptions - Use togglePause() API for resume instead of renewSubscription() - Add "Suspended" status badge and balance query invalidation - Add dashboard.suspended and subscription.pause.suspended translations (ru, en, zh, fa)
2026-07-28 09:33:46 +00:00 · 2026-03-08 21:35:00 +03:00
parent 9aae9cc0e6
commit 7940410d7d
7 changed files with 269 additions and 36 deletions
--- a/src/components/dashboard/SubscriptionCardExpired.tsx
+++ b/src/components/dashboard/SubscriptionCardExpired.tsx
@@ -1,23 +1,98 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
+import { Link, useNavigate, useLocation } from 'react-router';
+import { useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import type { Subscription } from '../../types';
+import { subscriptionApi } from '../../api/subscription';
 import { useTheme } from '../../hooks/useTheme';
+import { useCurrency } from '../../hooks/useCurrency';
+import { useHapticFeedback } from '../../platform/hooks/useHaptic';
 import { getGlassColors } from '../../utils/glassTheme';
+import { getInsufficientBalanceError } from '../../utils/subscriptionHelpers';

 interface SubscriptionCardExpiredProps {
  subscription: Subscription;
+  balanceKopeks?: number;
+  balanceRubles?: number;
+  className?: string;
 }

-export default function SubscriptionCardExpired({ subscription }: SubscriptionCardExpiredProps) {
+export default function SubscriptionCardExpired({
+  subscription,
+  balanceKopeks = 0,
+  balanceRubles = 0,
+  className,
+}: SubscriptionCardExpiredProps) {
  const { t } = useTranslation();
  const { isDark } = useTheme();
  const g = getGlassColors(isDark);
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { formatAmount, currencySymbol } = useCurrency();
+  const haptic = useHapticFeedback();
+
+  const [isRenewing, setIsRenewing] = useState(false);
+  const [renewError, setRenewError] = useState<string | null>(null);

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

+  // Detect DISABLED daily subscription (suspended by system due to insufficient balance)
+  const isDisabledDaily = subscription.status === 'disabled' && subscription.is_daily;
+
+  // For disabled daily subs, check if balance covers daily price
+  const dailyPrice = subscription.daily_price_kopeks ?? 0;
+  const hasBalance = isDisabledDaily
+    ? balanceKopeks >= dailyPrice && dailyPrice > 0
+    : balanceKopeks >= 100;
+
+  const handleQuickRenew = async () => {
+    setIsRenewing(true);
+    setRenewError(null);
+    haptic.buttonPressHeavy();
+
+    try {
+      if (isDisabledDaily) {
+        // Resume daily subscription via toggle pause endpoint
+        await subscriptionApi.togglePause();
+      } else {
+        await subscriptionApi.renewSubscription(30);
+      }
+      haptic.success();
+      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['balance'] });
+      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
+    } catch (err: unknown) {
+      haptic.error();
+      const insufficientData = getInsufficientBalanceError(err);
+      if (insufficientData) {
+        setRenewError(t('dashboard.expired.insufficientFunds'));
+      } else if (err instanceof AxiosError) {
+        const detail = err.response?.data?.detail;
+        if (typeof detail === 'string') {
+          setRenewError(detail);
+        } else {
+          setRenewError(t('dashboard.expired.renewError'));
+        }
+      } else {
+        setRenewError(t('dashboard.expired.renewError'));
+      }
+    } finally {
+      setIsRenewing(false);
+    }
+  };
+
+  const handleTopUp = () => {
+    haptic.buttonPress();
+    const params = new URLSearchParams();
+    params.set('returnTo', location.pathname);
+    navigate(`/balance/top-up?${params.toString()}`);
+  };
+
  return (
    <div
-      className="relative overflow-hidden rounded-3xl"
+      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)',
@@ -81,39 +156,121 @@ export default function SubscriptionCardExpired({ subscription }: SubscriptionCa
          </svg>
        </div>
        <h2 className="text-lg font-bold tracking-tight text-dark-50">
-          {subscription.is_trial ? t('dashboard.expired.trialTitle') : t('dashboard.expired.title')}
+          {isDisabledDaily
+            ? t('dashboard.suspended.title')
+            : subscription.is_trial
+              ? t('dashboard.expired.trialTitle')
+              : t('dashboard.expired.title')}
        </h2>
      </div>

-      {/* Expired date */}
+      {/* Expired date + Balance row */}
      <div
-        className="mb-5 flex items-center justify-center rounded-[14px]"
+        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)',
          padding: '14px 18px',
        }}
      >
-        <div className="mb-0.5 font-mono text-[10px] font-medium uppercase tracking-wider text-dark-50/30">
-          {t('dashboard.expired.expiredDate')}
+        <div className="flex items-center">
+          <div className="mb-0.5 font-mono text-[10px] font-medium uppercase tracking-wider text-dark-50/30">
+            {t('dashboard.expired.expiredDate')}
+          </div>
+          <div className="ml-3 text-base font-bold tracking-tight text-dark-50/50">
+            {formattedDate}
+          </div>
        </div>
-        <div className="ml-3 text-base font-bold tracking-tight text-dark-50/50">
-          {formattedDate}
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] font-medium uppercase tracking-wider text-dark-50/30">
+            {t('dashboard.expired.balance')}
+          </span>
+          <span
+            className={`text-sm font-semibold ${hasBalance ? 'text-success-400' : 'text-dark-50/30'}`}
+          >
+            {formatAmount(balanceRubles)} {currencySymbol}
+          </span>
        </div>
      </div>

+      {/* Renew error */}
+      {renewError && (
+        <div
+          className="mb-4 rounded-xl border border-error-500/30 bg-error-500/10 p-3 text-center text-sm text-error-400"
+          role="alert"
+        >
+          {renewError}
+        </div>
+      )}
+
      {/* Action buttons */}
      <div className="flex gap-2.5">
-        <Link
-          to="/subscription/purchase"
-          className="flex flex-1 items-center justify-center 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)',
-          }}
-        >
-          {t('dashboard.expired.renew')}
-        </Link>
+        {/* Quick Renew or Top Up button */}
+        {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"
+              >
+                <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: '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>
+        )}
+
+        {/* Renew (go to purchase page) */}
        <Link
          to="/subscription/purchase"
          className="flex items-center justify-center rounded-[14px] px-5 py-3.5 text-[15px] font-semibold tracking-tight text-dark-50/50 transition-colors duration-200"
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -254,11 +254,20 @@
      "trialSubtitle": "Trial period ended",
      "paidSubtitle": "Subscription has expired",
      "renew": "Renew Subscription",
+      "quickRenew": "Quick Renew",
+      "insufficientFunds": "Insufficient balance",
+      "renewError": "Renewal error, try again",
+      "topUp": "Top up balance",
+      "balance": "Balance",
      "tariffs": "Tariffs",
      "traffic": "Traffic",
      "devices": "Devices",
      "expiredDate": "Expired"
    },
+    "suspended": {
+      "title": "Subscription Suspended",
+      "resume": "Resume"
+    },
    "trialOffer": {
      "freeTitle": "Free Trial Available",
      "paidTitle": "Trial Subscription",
@@ -446,6 +455,7 @@
    "pause": {
      "title": "Subscription Pause",
      "paused": "Paused",
+      "suspended": "Suspended (insufficient funds)",
      "active": "Active",
      "pauseBtn": "Pause",
      "resumeBtn": "Resume",
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -219,7 +219,27 @@
    "noActiveSubscription": "اشتراک فعال ندارید",
    "devicesUsed": "دستگاه‌ها: {{used}} از {{total}}",
    "trafficUsed": "ترافیک: {{used}} از {{total}} گیگ",
-    "unlimitedTraffic": "ترافیک نامحدود"
+    "unlimitedTraffic": "ترافیک نامحدود",
+    "expired": {
+      "title": "اشتراک منقضی شده",
+      "trialTitle": "دوره آزمایشی منقضی شده",
+      "trialSubtitle": "دوره آزمایشی پایان یافته",
+      "paidSubtitle": "اشتراک منقضی شده",
+      "renew": "تمدید اشتراک",
+      "quickRenew": "تمدید سریع",
+      "insufficientFunds": "موجودی ناکافی",
+      "renewError": "خطا در تمدید، دوباره تلاش کنید",
+      "topUp": "شارژ موجودی",
+      "balance": "موجودی",
+      "tariffs": "تعرفه‌ها",
+      "traffic": "ترافیک",
+      "devices": "دستگاه‌ها",
+      "expiredDate": "منقضی شده"
+    },
+    "suspended": {
+      "title": "اشتراک معلق شده",
+      "resume": "از سرگیری"
+    }
  },
  "subscription": {
    "title": "اشتراک",
@@ -428,6 +448,7 @@
      "nextCharge": "تا کسر بعدی",
      "pauseBtn": "توقف",
      "paused": "متوقف شده",
+      "suspended": "معلق شده (موجودی ناکافی)",
      "pausedDescription": "کسر متوقف شد. اشتراک فعال خواهد بود تا",
      "pausedInfo": "اشتراک متوقف شده",
      "resumeBtn": "ادامه",
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -266,11 +266,20 @@
      "trialSubtitle": "Пробный период завершён",
      "paidSubtitle": "Срок действия закончился",
      "renew": "Продлить подписку",
+      "quickRenew": "Продлить",
+      "topUp": "Пополнить баланс",
+      "balance": "Баланс",
+      "insufficientFunds": "Недостаточно средств на балансе",
+      "renewError": "Ошибка продления, попробуйте ещё раз",
      "tariffs": "Тарифы",
      "traffic": "Трафик",
      "devices": "Устройства",
      "expiredDate": "Истекла"
    },
+    "suspended": {
+      "title": "Подписка приостановлена",
+      "resume": "Возобновить"
+    },
    "trialOffer": {
      "freeTitle": "Бесплатный пробный период",
      "paidTitle": "Пробная подписка",
@@ -469,6 +478,7 @@
    "pause": {
      "title": "Пауза подписки",
      "paused": "На паузе",
+      "suspended": "Приостановлена (недостаточно средств)",
      "active": "Активна",
      "pauseBtn": "Приостановить",
      "resumeBtn": "Возобновить",
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -219,7 +219,27 @@
    "noActiveSubscription": "无有效订阅",
    "devicesUsed": "设备：{{used}} / {{total}}",
    "trafficUsed": "流量：{{used}} / {{total}} GB",
-    "unlimitedTraffic": "无限流量"
+    "unlimitedTraffic": "无限流量",
+    "expired": {
+      "title": "订阅已过期",
+      "trialTitle": "试用已过期",
+      "trialSubtitle": "试用期已结束",
+      "paidSubtitle": "订阅已到期",
+      "renew": "续订",
+      "quickRenew": "快速续订",
+      "insufficientFunds": "余额不足",
+      "renewError": "续订失败，请重试",
+      "topUp": "充值",
+      "balance": "余额",
+      "tariffs": "套餐",
+      "traffic": "流量",
+      "devices": "设备",
+      "expiredDate": "过期时间"
+    },
+    "suspended": {
+      "title": "订阅已暂停",
+      "resume": "恢复"
+    }
  },
  "subscription": {
    "title": "订阅",
@@ -428,6 +448,7 @@
      "nextCharge": "距下次扣费",
      "pauseBtn": "暂停",
      "paused": "已暂停",
+      "suspended": "已暂停（余额不足）",
      "pausedDescription": "扣费已停止。订阅有效期至",
      "pausedInfo": "订阅已暂停",
      "resumeBtn": "恢复",
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -235,8 +235,12 @@ export default function Dashboard() {
            <div className="skeleton h-12 w-full rounded-xl" />
          </div>
        </div>
-      ) : subscription?.is_expired ? (
-        <SubscriptionCardExpired subscription={subscription} />
+      ) : subscription?.is_expired || subscription?.status === 'disabled' ? (
+        <SubscriptionCardExpired
+          subscription={subscription}
+          balanceKopeks={balanceData?.balance_kopeks ?? 0}
+          balanceRubles={balanceData?.balance_rubles ?? 0}
+        />
      ) : subscription ? (
        <SubscriptionCardActive
          subscription={subscription}
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -250,6 +250,7 @@ export default function Subscription() {
    mutationFn: () => subscriptionApi.togglePause(),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['balance'] });
    },
  });

@@ -525,7 +526,9 @@ export default function Subscription() {
                    ? subscription.is_trial
                      ? t('subscription.trialStatus')
                      : t('subscription.active')
-                    : t('subscription.expired')}
+                    : subscription.status === 'disabled'
+                      ? t('subscription.pause.suspended')
+                      : t('subscription.expired')}
                </span>
              </div>

@@ -982,9 +985,11 @@ export default function Subscription() {
                {t('subscription.pause.title')}
              </h2>
              <div className="mt-1 text-[12px] text-dark-50/35">
-                {subscription.is_daily_paused
-                  ? t('subscription.pause.paused')
-                  : t('subscription.pause.active')}
+                {subscription.status === 'disabled'
+                  ? t('subscription.pause.suspended')
+                  : subscription.is_daily_paused
+                    ? t('subscription.pause.paused')
+                    : t('subscription.pause.active')}
              </div>
            </div>
            <button
@@ -992,20 +997,25 @@ export default function Subscription() {
              disabled={pauseMutation.isPending}
              className="rounded-[10px] px-4 py-2 text-sm font-semibold transition-colors duration-300"
              style={{
-                background: subscription.is_daily_paused
-                  ? 'rgba(var(--color-accent-400), 0.12)'
-                  : 'rgba(255,184,0,0.12)',
-                border: subscription.is_daily_paused
-                  ? '1px solid rgba(var(--color-accent-400), 0.2)'
-                  : '1px solid rgba(255,184,0,0.2)',
-                color: subscription.is_daily_paused ? 'rgb(var(--color-accent-400))' : '#FFB800',
+                background:
+                  subscription.is_daily_paused || subscription.status === 'disabled'
+                    ? 'rgba(var(--color-accent-400), 0.12)'
+                    : 'rgba(255,184,0,0.12)',
+                border:
+                  subscription.is_daily_paused || subscription.status === 'disabled'
+                    ? '1px solid rgba(var(--color-accent-400), 0.2)'
+                    : '1px solid rgba(255,184,0,0.2)',
+                color:
+                  subscription.is_daily_paused || subscription.status === 'disabled'
+                    ? 'rgb(var(--color-accent-400))'
+                    : '#FFB800',
              }}
            >
              {pauseMutation.isPending ? (
                <span className="flex items-center gap-2">
                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                </span>
-              ) : subscription.is_daily_paused ? (
+              ) : subscription.is_daily_paused || subscription.status === 'disabled' ? (
                t('subscription.pause.resumeBtn')
              ) : (
                t('subscription.pause.pauseBtn')