feat: multi-subscription frontend support

- Add SubscriptionListItem and SubscriptionsListResponse types - Add getSubscriptions/getSubscriptionById API methods - Add optional subscriptionId parameter to all 30+ API methods - Create /subscriptions page with subscription list cards - Add /subscription/:subscriptionId route for per-subscription management - Dashboard: show multi-tariff navigation block when user has 2+ subscriptions - Subscription page: read subscriptionId from URL params, pass to all queries - SubscriptionPurchase: accept subscriptionId from query params - SubscriptionCardExpired: pass subscription.id to API calls - Full backward compatibility: without subscriptionId, works as before
2026-07-30 10:27:49 +00:00 · 2026-03-19 19:26:42 +03:00
parent 84bded7974
commit 820ba46cc4
8 changed files with 562 additions and 173 deletions
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -51,7 +51,7 @@ export default function Dashboard() {

  const { data: subscriptionResponse, isLoading: subLoading } = useQuery({
    queryKey: ['subscription'],
-    queryFn: subscriptionApi.getSubscription,
+    queryFn: () => subscriptionApi.getSubscription(),
    retry: false,
    staleTime: API.BALANCE_STALE_TIME_MS,
    refetchOnMount: 'always',
@@ -59,15 +59,24 @@ export default function Dashboard() {

  const subscription = subscriptionResponse?.subscription ?? null;

+  // Multi-tariff: check if user has multiple subscriptions
+  const { data: multiSubData } = useQuery({
+    queryKey: ['subscriptions-list'],
+    queryFn: () => subscriptionApi.getSubscriptions(),
+    staleTime: 60_000,
+  });
+  const isMultiTariff = multiSubData?.multi_tariff_enabled ?? false;
+  const multiSubCount = multiSubData?.subscriptions?.length ?? 0;
+
  const { data: trialInfo, isLoading: trialLoading } = useQuery({
    queryKey: ['trial-info'],
-    queryFn: subscriptionApi.getTrialInfo,
+    queryFn: () => subscriptionApi.getTrialInfo(),
    enabled: !subscription && !subLoading,
  });

  const { data: devicesData } = useQuery({
    queryKey: ['devices'],
-    queryFn: subscriptionApi.getDevices,
+    queryFn: () => subscriptionApi.getDevices(),
    enabled: !!subscription,
    staleTime: API.BALANCE_STALE_TIME_MS,
  });
@@ -99,7 +108,7 @@ export default function Dashboard() {
  });

  const activateTrialMutation = useMutation({
-    mutationFn: subscriptionApi.activateTrial,
+    mutationFn: () => subscriptionApi.activateTrial(),
    onSuccess: () => {
      setTrialError(null);
      queryClient.invalidateQueries({ queryKey: ['subscription'] });
@@ -122,7 +131,7 @@ export default function Dashboard() {
  } | null>(null);

  const refreshTrafficMutation = useMutation({
-    mutationFn: subscriptionApi.refreshTraffic,
+    mutationFn: () => subscriptionApi.refreshTraffic(),
    onSuccess: (data) => {
      setTrafficData({
        traffic_used_gb: data.traffic_used_gb,
@@ -266,6 +275,21 @@ export default function Dashboard() {
      {/* Pending Gift Activations */}
      {pendingGifts && pendingGifts.length > 0 && <PendingGiftCard gifts={pendingGifts} />}

+      {/* Multi-tariff: show link to subscriptions list */}
+      {isMultiTariff && multiSubCount > 1 && (
+        <Link to="/subscriptions" className="bento-card flex items-center justify-between">
+          <div>
+            <div className="text-sm font-medium opacity-60">
+              {t('dashboard.subscriptions', 'Подписки')}
+            </div>
+            <div className="text-lg font-bold">
+              {multiSubCount} {t('dashboard.activeTariffs', 'активных тарифов')}
+            </div>
+          </div>
+          <ChevronRightIcon />
+        </Link>
+      )}
+
      {/* Subscription Status Card */}
      {subLoading ? (
        <div className="bento-card">
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback, memo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import { subscriptionApi } from '../api/subscription';
 import TrafficProgressBar from '../components/dashboard/TrafficProgressBar';
 import { HoverBorderGradient } from '../components/ui/hover-border-gradient';
@@ -168,6 +168,8 @@ export default function Subscription() {
  const queryClient = useQueryClient();
  const { formatAmount, currencySymbol } = useCurrency();
  const navigate = useNavigate();
+  const { subscriptionId: subIdParam } = useParams<{ subscriptionId?: string }>();
+  const subscriptionId = subIdParam ? parseInt(subIdParam, 10) : undefined;
  const { isDark } = useTheme();
  const g = getGlassColors(isDark);
  const haptic = useHaptic();
@@ -195,10 +197,10 @@ export default function Subscription() {
  } | null>(null);

  const { data: subscriptionResponse, isLoading } = useQuery({
-    queryKey: ['subscription'],
-    queryFn: subscriptionApi.getSubscription,
+    queryKey: ['subscription', subscriptionId],
+    queryFn: () => subscriptionApi.getSubscription(subscriptionId),
    retry: false,
-    staleTime: 0, // Always refetch to get latest data
+    staleTime: 0,
    refetchOnMount: 'always',
  });

@@ -211,8 +213,8 @@ export default function Subscription() {

  // Purchase options (needed for balance_kopeks in device/traffic/server management)
  const { data: purchaseOptions } = useQuery({
-    queryKey: ['purchase-options'],
-    queryFn: subscriptionApi.getPurchaseOptions,
+    queryKey: ['purchase-options', subscriptionId],
+    queryFn: () => subscriptionApi.getPurchaseOptions(subscriptionId),
    staleTime: 0,
    refetchOnMount: 'always',
  });
@@ -220,40 +222,41 @@ export default function Subscription() {
  const isTariffsMode = purchaseOptions?.sales_mode === 'tariffs';

  const autopayMutation = useMutation({
-    mutationFn: (enabled: boolean) => subscriptionApi.updateAutopay(enabled),
+    mutationFn: (enabled: boolean) =>
+      subscriptionApi.updateAutopay(enabled, undefined, subscriptionId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
    },
  });

  // Devices query
  const { data: devicesData, isLoading: devicesLoading } = useQuery({
-    queryKey: ['devices'],
-    queryFn: subscriptionApi.getDevices,
+    queryKey: ['devices', subscriptionId],
+    queryFn: () => subscriptionApi.getDevices(subscriptionId),
    enabled: !!subscription,
  });

  // Delete device mutation
  const deleteDeviceMutation = useMutation({
-    mutationFn: (hwid: string) => subscriptionApi.deleteDevice(hwid),
+    mutationFn: (hwid: string) => subscriptionApi.deleteDevice(hwid, subscriptionId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['devices'] });
+      queryClient.invalidateQueries({ queryKey: ['devices', subscriptionId] });
    },
  });

  // Delete all devices mutation
  const deleteAllDevicesMutation = useMutation({
-    mutationFn: () => subscriptionApi.deleteAllDevices(),
+    mutationFn: () => subscriptionApi.deleteAllDevices(subscriptionId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['devices'] });
+      queryClient.invalidateQueries({ queryKey: ['devices', subscriptionId] });
    },
  });

  // Pause subscription mutation
  const pauseMutation = useMutation({
-    mutationFn: () => subscriptionApi.togglePause(),
+    mutationFn: () => subscriptionApi.togglePause(subscriptionId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
      queryClient.invalidateQueries({ queryKey: ['balance'] });
    },
  });
@@ -269,17 +272,17 @@ export default function Subscription() {

  // Device price query
  const { data: devicePriceData } = useQuery({
-    queryKey: ['device-price', devicesToAdd],
-    queryFn: () => subscriptionApi.getDevicePrice(devicesToAdd),
+    queryKey: ['device-price', devicesToAdd, subscriptionId],
+    queryFn: () => subscriptionApi.getDevicePrice(devicesToAdd, subscriptionId),
    enabled: showDeviceTopup && !!subscription,
  });

  // Device purchase mutation
  const devicePurchaseMutation = useMutation({
-    mutationFn: () => subscriptionApi.purchaseDevices(devicesToAdd),
+    mutationFn: () => subscriptionApi.purchaseDevices(devicesToAdd, subscriptionId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
-      queryClient.invalidateQueries({ queryKey: ['devices'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['devices', subscriptionId] });
      queryClient.invalidateQueries({ queryKey: ['device-price'] });
      setShowDeviceTopup(false);
      setDevicesToAdd(1);
@@ -288,8 +291,8 @@ export default function Subscription() {

  // Device reduction info query
  const { data: deviceReductionInfo } = useQuery({
-    queryKey: ['device-reduction-info'],
-    queryFn: subscriptionApi.getDeviceReductionInfo,
+    queryKey: ['device-reduction-info', subscriptionId],
+    queryFn: () => subscriptionApi.getDeviceReductionInfo(subscriptionId),
    enabled: showDeviceReduction && !!subscription,
  });

@@ -307,27 +310,27 @@ export default function Subscription() {

  // Device reduction mutation
  const deviceReductionMutation = useMutation({
-    mutationFn: () => subscriptionApi.reduceDevices(targetDeviceLimit),
+    mutationFn: () => subscriptionApi.reduceDevices(targetDeviceLimit, subscriptionId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
-      queryClient.invalidateQueries({ queryKey: ['devices'] });
-      queryClient.invalidateQueries({ queryKey: ['device-reduction-info'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['devices', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['device-reduction-info', subscriptionId] });
      setShowDeviceReduction(false);
    },
  });

  // Traffic packages query
  const { data: trafficPackages } = useQuery({
-    queryKey: ['traffic-packages'],
-    queryFn: subscriptionApi.getTrafficPackages,
+    queryKey: ['traffic-packages', subscriptionId],
+    queryFn: () => subscriptionApi.getTrafficPackages(subscriptionId),
    enabled: showTrafficTopup && !!subscription,
  });

  // Traffic purchase mutation
  const trafficPurchaseMutation = useMutation({
-    mutationFn: (gb: number) => subscriptionApi.purchaseTraffic(gb),
+    mutationFn: (gb: number) => subscriptionApi.purchaseTraffic(gb, subscriptionId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
      setShowTrafficTopup(false);
      setSelectedTrafficPackage(null);
    },
@@ -335,8 +338,8 @@ export default function Subscription() {

  // Countries/servers query
  const { data: countriesData, isLoading: countriesLoading } = useQuery({
-    queryKey: ['countries'],
-    queryFn: subscriptionApi.getCountries,
+    queryKey: ['countries', subscriptionId],
+    queryFn: () => subscriptionApi.getCountries(subscriptionId),
    enabled: showServerManagement && !!subscription && !subscription.is_trial,
  });

@@ -350,17 +353,17 @@ export default function Subscription() {

  // Countries update mutation
  const updateCountriesMutation = useMutation({
-    mutationFn: (countries: string[]) => subscriptionApi.updateCountries(countries),
+    mutationFn: (countries: string[]) => subscriptionApi.updateCountries(countries, subscriptionId),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
-      queryClient.invalidateQueries({ queryKey: ['countries'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
+      queryClient.invalidateQueries({ queryKey: ['countries', subscriptionId] });
      setShowServerManagement(false);
    },
  });

  // Traffic refresh mutation
  const refreshTrafficMutation = useMutation({
-    mutationFn: subscriptionApi.refreshTraffic,
+    mutationFn: () => subscriptionApi.refreshTraffic(subscriptionId),
    onSuccess: (data) => {
      setTrafficData({
        traffic_used_gb: data.traffic_used_gb,
@@ -1381,7 +1384,7 @@ export default function Subscription() {
                          }
                          compact
                          onBeforeTopUp={async () => {
-                            await subscriptionApi.saveDevicesCart(devicesToAdd);
+                            await subscriptionApi.saveDevicesCart(devicesToAdd, subscriptionId);
                          }}
                        />
                      )}
@@ -1721,7 +1724,10 @@ export default function Subscription() {
                                    compact
                                    className="mb-3"
                                    onBeforeTopUp={async () => {
-                                      await subscriptionApi.saveTrafficCart(selectedTrafficPackage);
+                                      await subscriptionApi.saveTrafficCart(
+                                        selectedTrafficPackage,
+                                        subscriptionId,
+                                      );
                                    }}
                                  />
                                )}
--- a/src/pages/SubscriptionPurchase.tsx
+++ b/src/pages/SubscriptionPurchase.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router';
+import { useNavigate, useSearchParams } from 'react-router';
 import { AxiosError } from 'axios';
 import { subscriptionApi } from '../api/subscription';
 import { promoApi } from '../api/promo';
@@ -28,6 +28,10 @@ export default function SubscriptionPurchase() {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const subscriptionId = searchParams.get('subscriptionId')
+    ? parseInt(searchParams.get('subscriptionId')!, 10)
+    : undefined;
  const { formatAmount, currencySymbol } = useCurrency();
  const { isDark } = useTheme();
  const g = getGlassColors(isDark);
@@ -37,7 +41,7 @@ export default function SubscriptionPurchase() {
  // Subscription query (shares cache with /subscription page)
  const { data: subscriptionResponse, isLoading } = useQuery({
    queryKey: ['subscription'],
-    queryFn: subscriptionApi.getSubscription,
+    queryFn: () => subscriptionApi.getSubscription(subscriptionId),
    retry: false,
    staleTime: 0,
    refetchOnMount: 'always',
@@ -52,7 +56,7 @@ export default function SubscriptionPurchase() {
    refetch: refetchOptions,
  } = useQuery({
    queryKey: ['purchase-options'],
-    queryFn: subscriptionApi.getPurchaseOptions,
+    queryFn: () => subscriptionApi.getPurchaseOptions(subscriptionId),
    staleTime: 0,
    refetchOnMount: 'always',
  });
@@ -217,13 +221,13 @@ export default function SubscriptionPurchase() {
  // Preview query (classic)
  const { data: preview, isLoading: previewLoading } = useQuery({
    queryKey: ['purchase-preview', currentSelection],
-    queryFn: () => subscriptionApi.previewPurchase(currentSelection),
+    queryFn: () => subscriptionApi.previewPurchase(currentSelection, subscriptionId),
    enabled: !!selectedPeriod && showPurchaseForm && currentStep === 'confirm',
  });

  // Classic purchase mutation
  const purchaseMutation = useMutation({
-    mutationFn: () => subscriptionApi.submitPurchase(currentSelection),
+    mutationFn: () => subscriptionApi.submitPurchase(currentSelection, subscriptionId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['subscription'] });
      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
@@ -234,13 +238,13 @@ export default function SubscriptionPurchase() {
  // Switch preview query
  const { data: switchPreview, isLoading: switchPreviewLoading } = useQuery({
    queryKey: ['tariff-switch-preview', switchTariffId],
-    queryFn: () => subscriptionApi.previewTariffSwitch(switchTariffId!),
+    queryFn: () => subscriptionApi.previewTariffSwitch(switchTariffId!, subscriptionId),
    enabled: !!switchTariffId,
  });

  // Tariff switch mutation
  const switchTariffMutation = useMutation({
-    mutationFn: (tariffId: number) => subscriptionApi.switchTariff(tariffId),
+    mutationFn: (tariffId: number) => subscriptionApi.switchTariff(tariffId, subscriptionId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['subscription'] });
      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
--- a/src/pages/Subscriptions.tsx
+++ b/src/pages/Subscriptions.tsx
@@ -0,0 +1,176 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { subscriptionApi } from '../api/subscription';
+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}`} />;
+}
+
+function SubscriptionCard({
+  subscription,
+  onClick,
+}: {
+  subscription: SubscriptionListItem;
+  onClick: () => void;
+}) {
+  const { theme } = useTheme();
+  const glass = getGlassColors(theme);
+  const haptic = useHaptic();
+
+  const handleClick = () => {
+    haptic?.();
+    onClick();
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`w-full rounded-2xl p-4 text-left transition-all duration-200 hover:scale-[1.01] active:scale-[0.99] ${glass.card} ${glass.border} border`}
+    >
+      <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 || 'Подписка'}</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">Трафик</div>
+          <div>
+            {formatTrafficDisplay(subscription.traffic_used_gb, subscription.traffic_limit_gb)}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs opacity-60">Устройства</div>
+          <div>{subscription.device_limit}</div>
+        </div>
+        <div>
+          <div className="text-xs opacity-60">До</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">
+            Тестовая
+          </span>
+        </div>
+      )}
+    </button>
+  );
+}
+
+function EmptyState({ onBuy }: { onBuy: () => void }) {
+  const { theme } = useTheme();
+  const glass = getGlassColors(theme);
+
+  return (
+    <div className={`rounded-2xl p-6 text-center ${glass.card} ${glass.border} border`}>
+      <div className="mb-3 text-4xl">📋</div>
+      <h3 className="mb-1 text-lg font-semibold">Нет подписок</h3>
+      <p className="mb-4 text-sm opacity-60">У вас пока нет активных подписок</p>
+      <button
+        onClick={onBuy}
+        className="rounded-xl bg-blue-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-600"
+      >
+        Купить подписку
+      </button>
+    </div>
+  );
+}
+
+export default function Subscriptions() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['subscriptions-list'],
+    queryFn: () => subscriptionApi.getSubscriptions(),
+    staleTime: 30_000,
+    refetchOnMount: 'always',
+  });
+
+  // If multi_tariff not enabled, redirect to legacy subscription page
+  if (data && !data.multi_tariff_enabled) {
+    navigate('/subscription', { replace: true });
+    return null;
+  }
+
+  const subscriptions = data?.subscriptions ?? [];
+
+  return (
+    <div className="mx-auto max-w-lg space-y-4 p-4">
+      <h1 className="text-2xl font-bold">{t('subscriptions.title', 'Мои подписки')}</h1>
+
+      {isLoading && (
+        <div className="space-y-3">
+          {[1, 2].map((i) => (
+            <div key={i} className="h-28 animate-pulse rounded-2xl bg-white/5" />
+          ))}
+        </div>
+      )}
+
+      {!isLoading && subscriptions.length === 0 && (
+        <EmptyState onBuy={() => navigate('/subscription/purchase')} />
+      )}
+
+      {subscriptions.map((sub) => (
+        <SubscriptionCard
+          key={sub.id}
+          subscription={sub}
+          onClick={() => navigate(`/subscription/${sub.id}`)}
+        />
+      ))}
+
+      {!isLoading && subscriptions.length > 0 && (
+        <button
+          onClick={() => navigate('/subscription/purchase')}
+          className="flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-white/20 p-4 text-sm opacity-60 transition-opacity hover:opacity-100"
+        >
+          <span className="text-lg">+</span>
+          {t('subscriptions.buyAnother', 'Купить ещё тариф')}
+        </button>
+      )}
+    </div>
+  );
+}