fix: multi-subscription UI audit fixes and cache invalidation improvements

- Fix AdminUserDetail multi-subscription display with useMemo optimization - Update Dashboard subscription cards and purchase entry points - Fix WebSocket notification handlers for multi-subscription context - Update SubscriptionPurchase cache invalidation for multi-tariff mode - Fix Subscriptions list page and navigation patterns - Update App routing, DeepLinkRedirect, and CommandPalette for multi-sub - Add SubscriptionListCard component - Fix TopUpResult and PromoOffersSection navigation
2026-07-30 02:23:47 +00:00 · 2026-03-23 11:32:03 +03:00
parent 258bfd7654
commit f4de6d8ad8
18 changed files with 426 additions and 270 deletions
--- a/src/components/PromoOffersSection.tsx
+++ b/src/components/PromoOffersSection.tsx
@@ -114,6 +114,7 @@ export default function PromoOffersSection({ className = '' }: PromoOffersSectio
      queryClient.invalidateQueries({ queryKey: ['promo-offers'] });
      queryClient.invalidateQueries({ queryKey: ['active-discount'] });
      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
      queryClient.invalidateQueries({ queryKey: ['balance'] });
      setSuccessMessage(result.message);
--- a/src/components/SuccessNotificationModal.tsx
+++ b/src/components/SuccessNotificationModal.tsx
@@ -190,7 +190,7 @@ export default function SuccessNotificationModal() {

  const handleGoToSubscription = () => {
    hide();
-    navigate('/subscription');
+    navigate('/subscriptions');
  };

  const handleGoToBalance = () => {
--- a/src/components/WebSocketNotifications.tsx
+++ b/src/components/WebSocketNotifications.tsx
@@ -82,7 +82,11 @@ export default function WebSocketNotifications() {
          expiresAt: message.expires_at,
          tariffName: message.tariff_name,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        queryClient.invalidateQueries({ queryKey: ['balance'] });
        queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
        refreshUser();
@@ -96,7 +100,11 @@ export default function WebSocketNotifications() {
          amountKopeks: message.amount_kopeks,
          expiresAt: message.new_expires_at,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        queryClient.invalidateQueries({ queryKey: ['balance'] });
        queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
        refreshUser();
@@ -115,7 +123,7 @@ export default function WebSocketNotifications() {
            },
          ),
          icon: <span className="text-lg">⏰</span>,
-          onClick: () => navigate('/subscription'),
+          onClick: () => navigate('/subscriptions'),
          duration: 10000,
        });
        return;
@@ -130,10 +138,14 @@ export default function WebSocketNotifications() {
            'Your subscription has expired. Renew to continue using the service.',
          ),
          icon: <span className="text-lg">😢</span>,
-          onClick: () => navigate('/subscription'),
+          onClick: () => navigate('/subscriptions'),
          duration: 10000,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        refreshUser();
        return;
      }
@@ -171,7 +183,11 @@ export default function WebSocketNotifications() {
          icon: <span className="text-lg">🔄</span>,
          duration: 5000,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        return;
      }

@@ -183,7 +199,11 @@ export default function WebSocketNotifications() {
          devicesAdded: message.devices_added,
          newDeviceLimit: message.new_device_limit,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        queryClient.invalidateQueries({ queryKey: ['balance'] });
        queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
        queryClient.invalidateQueries({ queryKey: ['transactions'] });
@@ -199,7 +219,11 @@ export default function WebSocketNotifications() {
          trafficGbAdded: message.traffic_gb_added,
          newTrafficLimitGb: message.new_traffic_limit_gb,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        queryClient.invalidateQueries({ queryKey: ['balance'] });
        queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
        queryClient.invalidateQueries({ queryKey: ['transactions'] });
@@ -222,10 +246,14 @@ export default function WebSocketNotifications() {
            },
          ),
          icon: <span className="text-lg">🔁</span>,
-          onClick: () => navigate('/subscription'),
+          onClick: () => navigate('/subscriptions'),
          duration: 8000,
        });
-        queryClient.invalidateQueries({ queryKey: ['subscription'] });
+        queryClient.invalidateQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+        });
+        queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
        queryClient.invalidateQueries({ queryKey: ['balance'] });
        queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
        refreshUser();
@@ -240,7 +268,7 @@ export default function WebSocketNotifications() {
            message.reason ||
            t('wsNotifications.autopay.failedMessage', 'Failed to auto-renew your subscription'),
          icon: <span className="text-lg">❌</span>,
-          onClick: () => navigate('/subscription'),
+          onClick: () => navigate('/subscriptions'),
          duration: 10000,
        });
        return;
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -312,7 +312,7 @@ export default function SubscriptionCardActive({
      <div className="mb-5 flex gap-2.5">
        {/* Tariff badge — clickable */}
        <Link
-          to="/subscription"
+          to={`/subscriptions/${subscription.id}`}
          className="flex-1 rounded-[14px] p-3.5 transition-all duration-500"
          style={{
            background: `linear-gradient(135deg, rgba(${zone.mainVarRaw}, 0.07), rgba(${zone.mainVarRaw}, 0.02))`,
@@ -396,7 +396,7 @@ export default function SubscriptionCardActive({
          {trafficRefreshCooldown > 0 ? `${trafficRefreshCooldown}s` : t('common.refresh')}
        </button>
        <Link
-          to="/subscription"
+          to={`/subscriptions/${subscription.id}`}
          className="text-[11px] font-medium text-dark-50/25 transition-colors hover:text-dark-50/40"
        >
          {t('dashboard.viewSubscription')} &rarr;
--- a/src/components/dashboard/SubscriptionCardExpired.tsx
+++ b/src/components/dashboard/SubscriptionCardExpired.tsx
@@ -65,7 +65,10 @@ export default function SubscriptionCardExpired({
        await subscriptionApi.renewSubscription(30, subscription.id);
      }
      haptic.success();
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({
+        predicate: (query) => Array.isArray(query.queryKey) && query.queryKey[0] === 'subscription',
+      });
+      queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
      queryClient.invalidateQueries({ queryKey: ['balance'] });
      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
    } catch (err: unknown) {
@@ -257,7 +260,7 @@ export default function SubscriptionCardExpired({
      <div className="flex gap-2.5">
        {isLimited ? (
          <Link
-            to="/subscription"
+            to={`/subscriptions/${subscription.id}`}
            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,
--- a/src/components/navigation/CommandPalette/CommandPalette.tsx
+++ b/src/components/navigation/CommandPalette/CommandPalette.tsx
@@ -78,7 +78,7 @@ export function CommandPalette({
  // Navigation items
  const navigationItems = [
    { label: t('nav.dashboard'), icon: HomeIcon, path: '/' },
-    { label: t('nav.subscription'), icon: SubscriptionIcon, path: '/subscription' },
+    { label: t('nav.subscription'), icon: SubscriptionIcon, path: '/subscriptions' },
    { label: t('nav.balance'), icon: WalletIcon, path: '/balance' },
    ...(referralEnabled ? [{ label: t('nav.referral'), icon: UsersIcon, path: '/referral' }] : []),
    { label: t('nav.support'), icon: ChatIcon, path: '/support' },
@@ -100,7 +100,7 @@ export function CommandPalette({
    {
      label: t('subscription.get_config') || 'Get VPN config',
      icon: DownloadIcon,
-      action: () => navigate('/subscription'),
+      action: () => navigate('/subscriptions'),
    },
    {
      label: isDark ? t('theme.light') || 'Light mode' : t('theme.dark') || 'Dark mode',
--- a/src/components/subscription/SubscriptionListCard.tsx
+++ b/src/components/subscription/SubscriptionListCard.tsx
@@ -0,0 +1,102 @@
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '../../hooks/useTheme';
+import { getGlassColors } from '../../utils/glassTheme';
+import { useHaptic } from '../../platform';
+import type { SubscriptionListItem } from '../../types';
+
+function formatTrafficDisplay(used: number, limit: number): string {
+  if (limit === 0) return '∞';
+  return `${used.toFixed(1)} / ${limit} ГБ`;
+}
+
+function formatDate(iso: string | null): string {
+  if (!iso) return '—';
+  try {
+    return new Date(iso).toLocaleDateString('ru-RU', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    });
+  } catch {
+    return '—';
+  }
+}
+
+function StatusDot({ status }: { status: string }) {
+  const color =
+    status === 'active' || status === 'trial'
+      ? 'bg-emerald-400'
+      : status === 'limited'
+        ? 'bg-amber-400'
+        : 'bg-red-400';
+  return <span className={`inline-block h-2.5 w-2.5 rounded-full ${color}`} />;
+}
+
+export default function SubscriptionListCard({
+  subscription,
+  onClick,
+}: {
+  subscription: SubscriptionListItem;
+  onClick: () => void;
+}) {
+  const { t } = useTranslation();
+  const { isDark } = useTheme();
+  const g = getGlassColors(isDark);
+  const { impact } = useHaptic();
+
+  const handleClick = () => {
+    impact('light');
+    onClick();
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="bento-card w-full text-left transition-all duration-200 hover:scale-[1.01] active:scale-[0.99]"
+      style={{ background: g.cardBg, borderColor: g.cardBorder }}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <StatusDot status={subscription.status} />
+          <span className="text-base font-semibold">
+            {subscription.tariff_name || t('subscription.defaultName', 'Подписка')}
+          </span>
+        </div>
+        <svg
+          className="h-5 w-5 opacity-40"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+        </svg>
+      </div>
+
+      <div className="mt-3 grid grid-cols-3 gap-3 text-sm opacity-70">
+        <div>
+          <div className="text-xs opacity-60">{t('subscription.traffic', 'Трафик')}</div>
+          <div>
+            {formatTrafficDisplay(subscription.traffic_used_gb, subscription.traffic_limit_gb)}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs opacity-60">{t('subscription.devices', 'Устройства')}</div>
+          <div>{subscription.device_limit}</div>
+        </div>
+        <div>
+          <div className="text-xs opacity-60">{t('subscription.until', 'До')}</div>
+          <div>{formatDate(subscription.end_date)}</div>
+        </div>
+      </div>
+
+      {subscription.is_trial && (
+        <div className="mt-2">
+          <span className="inline-block rounded-full bg-amber-500/20 px-2 py-0.5 text-xs text-amber-300">
+            {t('subscription.trial', 'Тестовая')}
+          </span>
+        </div>
+      )}
+    </button>
+  );
+}