feat(frontend): align with API schema updates and improve subscription UX

src/api/client.ts

@@ -1,9 +1,10 @@
 import { useAuthStore } from '../store/useStore';
 import type {
+  AuthenticatedUser,
   CheckoutResponse,
   Device,
+  LinkCodeResponse,
   LoginPayload,
-  LoginResponse,
   OperationResult,
   OrderDetails,
   PricingPlans,
@@ -154,11 +155,11 @@ async function request<T>(path: string, opts: RequestOptions = {}): Promise<T> {
 
 /* ── Public API ───────────────────────────────────────────── */
 export const api = {
-  signup(payload: SignupPayload): Promise<LoginResponse> {
+  signup(payload: SignupPayload): Promise<AuthenticatedUser> {
-    return request<LoginResponse>('/api/auth/signup', { method: 'POST', body: payload, auth: false });
+    return request<AuthenticatedUser>('/api/auth/signup', { method: 'POST', body: payload, auth: false });
   },
-  login(payload: LoginPayload): Promise<LoginResponse> {
+  login(payload: LoginPayload): Promise<AuthenticatedUser> {
-    return request<LoginResponse>('/api/auth/login', { method: 'POST', body: payload, auth: false });
+    return request<AuthenticatedUser>('/api/auth/login', { method: 'POST', body: payload, auth: false });
   },
   getPlans(): Promise<PricingPlans> {
     return request<PricingPlans>('/api/plans/', { auth: false });
@@ -181,4 +182,7 @@ export const api = {
       { method: 'DELETE' },
     );
   },
+  createTelegramLinkCode(): Promise<LinkCodeResponse> {
+    return request<LinkCodeResponse>('/api/link-codes', { method: 'POST' });
+  },
 };

src/components/DeviceSlider.tsx

@@ -117,7 +117,7 @@ export function DeviceSlider({ min, max, value, onChange }: DeviceSliderProps) {
       <div className="slider-axis">
         <span>Устройства</span>
         <span>
-          <span className="axis-now">{value}</span> &nbsp;мест
+          <span className="axis-now">{value}</span> &nbsp;устройств
         </span>
       </div>
       <div className="slider-track-frame" ref={frameRef} onClick={onFrameClick}>

src/components/StatStrip.tsx

@@ -32,6 +32,7 @@ export function StatStrip({ user, subscription, deviceCount }: StatStripProps) {
   const telegramId = user?.telegram_id ?? null;
   const devicesLimit = subscription?.devices ?? null;
   const expiresAt = subscription?.expires_at ?? null;
+  const isExpired = expiresAt !== null && new Date(expiresAt).getTime() < Date.now();
   const bonusBalance = user?.bonus_balance ?? 0;
 
   return (
@@ -57,7 +58,7 @@ export function StatStrip({ user, subscription, deviceCount }: StatStripProps) {
         }
         label="Telegram ID"
       >
-        {telegramId ? <span className="is-mono">@{telegramId}</span> : <span className="is-empty">не привязан</span>}
+        {telegramId ? <span className="is-mono">{telegramId}</span> : <span className="is-empty">не привязан</span>}
       </Stat>
 
       <Stat
@@ -86,9 +87,13 @@ export function StatStrip({ user, subscription, deviceCount }: StatStripProps) {
             <path d="M3 9h18M8 3v4M16 3v4" />
           </svg>
         }
-        label="Продление"
+        label="Подписка до"
       >
-        {expiresAt ? <span>{formatDate(expiresAt)}</span> : <span className="is-empty">—</span>}
+        {expiresAt ? (
+          <span>{isExpired ? 'Истекла' : formatDate(expiresAt)}</span>
+        ) : (
+          <span className="is-empty">—</span>
+        )}
       </Stat>
 
       <Stat

src/components/SubscriptionQrModal.tsx

@@ -53,17 +53,16 @@ export function SubscriptionQrModal({
       className="modal-veil is-open"
       role="dialog"
       aria-modal="true"
-      aria-labelledby="subscription-qr-title"
+      aria-label="Откройте на устройстве"
       onClick={(event) => {
         if (event.target === event.currentTarget) onClose();
       }}
     >
       <div className="modal subscription-qr-modal" role="document">
-        <div className="modal-kicker">{label}</div>
+        <div className="modal-kicker">Сканировать</div>
         <h3 className="modal-title" id="subscription-qr-title">
-          Откройте на устройстве
+          {label}
         </h3>
-        <p className="modal-body">Отсканируйте код камерой или приложением Malenia.</p>
         <div className="subscription-qr-image">
           {image ? <img src={image} alt={imageAlt} /> : <span>Генерируем QR-код</span>}
         </div>

src/pages/AccountPage.test.tsx

@@ -5,6 +5,7 @@ import { MemoryRouter, Routes, Route, useLocation } from 'react-router-dom';
 import { AccountPage } from './AccountPage';
 import { api } from '../api/client';
 import { useAuthStore } from '../store/useStore';
+import { redirectTo } from '../lib/redirect';
 
 vi.mock('qrcode', () => ({
   default: { toDataURL: () => Promise.resolve('data:image/png;base64,qr') },
@@ -18,6 +19,7 @@ vi.mock('../api/client', () => ({
     getSubscription: vi.fn(),
     getDevices: vi.fn(),
     deleteDevice: vi.fn(),
+    createTelegramLinkCode: vi.fn(),
     login: vi.fn(),
     signup: vi.fn(),
   },
@@ -30,13 +32,17 @@ vi.mock('../api/client', () => ({
   clearStoredTokens: vi.fn(),
 }));
 
+vi.mock('../lib/redirect', () => ({
+  redirectTo: vi.fn(),
+}));
+
 function renderAccount(authed = true) {
   if (authed) {
     useAuthStore.setState({
       access: 'a',
       refresh: 'r',
       expiresAt: 9999999999,
-      user: { username: 'alice', telegram_id: 'alice_id', referal_code: 'c', bonus_balance: 150 },
+      user: { username: 'alice', telegram_id: 123456789, referal_code: 'c', bonus_balance: 150 },
       remember: true,
     });
   } else {
@@ -65,11 +71,11 @@ function PlanLocation() {
   return <div>{`plan page${location.search}`}</div>;
 }
 
-const ME = { username: 'alice', telegram_id: 'alice_id', referal_code: 'c', bonus_balance: 150 };
+const ME = { username: 'alice', telegram_id: 123456789, referal_code: 'c', bonus_balance: 150 };
 const SUB = {
   devices: 6,
   duration_days: 90,
-  expires_at: '2026-03-14T00:00:00Z',
+  expires_at: '2099-03-14T00:00:00Z',
   addon_ids: [],
   subscription_link: 'link',
   has_subscription: true,
@@ -85,6 +91,7 @@ describe('AccountPage', () => {
     vi.mocked(api.getSubscription).mockReset();
     vi.mocked(api.getDevices).mockReset();
     vi.mocked(api.deleteDevice).mockReset();
+    vi.mocked(api.createTelegramLinkCode).mockReset();
   });
 
   afterEach(() => vi.restoreAllMocks());
@@ -100,7 +107,7 @@ describe('AccountPage', () => {
     vi.mocked(api.getDevices).mockResolvedValue(DEVICES);
     renderAccount();
     expect(await screen.findByText('alice')).toBeInTheDocument();
-    expect(screen.getByText('@alice_id')).toBeInTheDocument();
+    expect(screen.getByText('123456789')).toBeInTheDocument();
     expect(screen.getByText(/150\s*₽/)).toBeInTheDocument();
     expect(screen.getByText(/только на подписку/i)).toBeInTheDocument();
     expect(screen.getAllByText(/iPhone 15/)).toHaveLength(1);
@@ -113,7 +120,17 @@ describe('AccountPage', () => {
     renderAccount();
 
     expect(screen.queryByText(/активная подписка отсутствует/i)).not.toBeInTheDocument();
-    expect(await screen.findByText(/подписка до/i)).toBeInTheDocument();
+    expect(await screen.findAllByText(/подписка до/i)).toHaveLength(2);
+  });
+
+  it('renders expired subscription status', async () => {
+    vi.mocked(api.getMe).mockResolvedValue(ME);
+    vi.mocked(api.getSubscription).mockResolvedValue({ ...SUB, expires_at: '2020-01-01T00:00:00Z' });
+    vi.mocked(api.getDevices).mockResolvedValue(DEVICES);
+    renderAccount();
+
+    expect(await screen.findAllByText('Истекла')).toHaveLength(2);
+    expect(screen.queryByText(/^Подписка до \d/)).not.toBeInTheDocument();
   });
 
   it('renders the subscription link and copy action', async () => {
@@ -148,6 +165,24 @@ describe('AccountPage', () => {
     );
   });
 
+  it('requests a Telegram link code and follows its deeplink', async () => {
+    vi.mocked(api.getMe).mockResolvedValue(ME);
+    vi.mocked(api.getSubscription).mockResolvedValue(SUB);
+    vi.mocked(api.getDevices).mockResolvedValue(DEVICES);
+    vi.mocked(api.createTelegramLinkCode).mockResolvedValue({
+      code: 'code-1',
+      expires_at: '2026-03-14T00:00:00Z',
+      deep_link: 'https://t.me/malenia_bot?start=code-1',
+    });
+    const user = userEvent.setup();
+    renderAccount();
+
+    await user.click(await screen.findByRole('button', { name: /привязать telegram/i }));
+
+    await waitFor(() => expect(api.createTelegramLinkCode).toHaveBeenCalledOnce());
+    expect(redirectTo).toHaveBeenCalledWith('https://t.me/malenia_bot?start=code-1');
+  });
+
   it('opens the plan page with current subscription settings when renewal is adjusted', async () => {
     vi.mocked(api.getMe).mockResolvedValue(ME);
     vi.mocked(api.getSubscription).mockResolvedValue(SUB);

src/pages/AccountPage.tsx

@@ -31,6 +31,7 @@ export function AccountPage() {
   const [isClientLinksOpen, setIsClientLinksOpen] = useState(false);
   const [isRenewalOpen, setIsRenewalOpen] = useState(false);
   const [isRenewing, setIsRenewing] = useState(false);
+  const [isLinkingTelegram, setIsLinkingTelegram] = useState(false);
 
   useEffect(() => {
     if (!isAuthenticated) {
@@ -137,6 +138,19 @@ export function AccountPage() {
     }
   };
 
+  const linkTelegram = async () => {
+    setIsLinkingTelegram(true);
+    try {
+      const { deep_link } = await api.createTelegramLinkCode();
+      redirectTo(deep_link);
+    } catch (err: unknown) {
+      const message = err instanceof ApiError ? err.message : 'Не удалось начать привязку Telegram';
+      showToast(message);
+    } finally {
+      setIsLinkingTelegram(false);
+    }
+  };
+
   return (
     <Shell active="account">
       <section className="account-hero">
@@ -145,16 +159,28 @@ export function AccountPage() {
           <h1 className="hero-title">{userInfo?.username ?? 'Аккаунт'}</h1>
            {!loadingMeta ? (
              <>
-               <p className="hero-sub">
+                <p className="hero-sub">
-                 {subscription?.has_subscription && subscription.expires_at
+                  {subscription?.has_subscription && subscription.expires_at
-                   ? `Подписка до ${new Date(subscription.expires_at).toLocaleDateString('ru-RU')}`
+                    ? new Date(subscription.expires_at).getTime() < Date.now()
-                   : 'Активная подписка отсутствует'}
+                      ? 'Истекла'
-               </p>
+                      : `Подписка до ${new Date(subscription.expires_at).toLocaleDateString('ru-RU')}`
-               {subscription?.has_subscription ? (
+                    : 'Активная подписка отсутствует'}
-                 <button type="button" className="btn btn-primary account-renew" onClick={() => setIsRenewalOpen(true)}>
+                </p>
-                   Продлить
+                <div className="account-actions">
-                 </button>
+                  {subscription?.has_subscription ? (
-               ) : null}
+                    <button type="button" className="btn btn-primary" onClick={() => setIsRenewalOpen(true)}>
+                      Продлить
+                    </button>
+                  ) : null}
+                  <button
+                    type="button"
+                    className="btn btn-secondary"
+                    disabled={isLinkingTelegram}
+                    onClick={() => void linkTelegram()}
+                  >
+                    {isLinkingTelegram ? 'Подготовка…' : 'Привязать Telegram'}
+                  </button>
+                </div>
              </>
           ) : null}
         </Reveal>

src/pages/PlanPage.tsx

@@ -100,9 +100,9 @@ export function PlanPage() {
       <section className="plan-hero">
         <Reveal>
           <div className="kicker">Соберите свой план</div>
-          <h1 className="hero-title">Круг, подогнанный под вас.</h1>
+          <h1 className="hero-title">Платите только за то, что используете.</h1>
           <p className="hero-sub">
-            Выберите, сколько устройств разделят вашу свободу. Цена меняется тихо — фиксированная
+            Выберите, сколько устройств разделят вашу свободу. Цена меняется — фиксированная
             ставка за каждое, без уровней и наценок.
           </p>
         </Reveal>

src/store/useStore.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import type { LoginResponse, Tokens, UserInfo } from '../types';
+import type { AuthenticatedUser, Tokens, UserInfo } from '../types';
 import { clearStoredTokens, setStoredTokens } from '../api/client';
 
 interface AuthState {
@@ -8,7 +8,7 @@ interface AuthState {
   expiresAt: number | null;
   user: UserInfo | null;
   remember: boolean;
-  setSession: (session: LoginResponse, remember: boolean) => void;
+  setSession: (session: AuthenticatedUser, remember: boolean) => void;
   setTokens: (tokens: Tokens) => void;
   updateUser: (user: UserInfo) => void;
   setRemember: (remember: boolean) => void;

src/styles/pages.css

@@ -522,8 +522,12 @@
 .account-hero .hero-sub {
   max-width: none;
 }
-.account-renew {
+.account-actions {
   margin-top: 24px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 12px;
 }
 .checkout-confirmation {
   text-align: center;

src/types.ts

@@ -2,18 +2,21 @@ export type Provider = 'credentials' | 'telegram' | 'api';
 
 export interface UserInfo {
   username: string | null;
-  telegram_id: string | null;
+  telegram_id: number | null;
   referal_code: string;
   bonus_balance: number;
 }
 
-export interface LoginResponse {
+export interface AuthenticatedUser {
   access_token: string;
   refresh_token: string;
   expires_at: number;
   user: UserInfo;
 }
 
+/** @deprecated Переименовано в AuthenticatedUser вслед за бэкендом. */
+export type LoginResponse = AuthenticatedUser;
+
 export interface Tokens {
   access_token: string;
   refresh_token: string;
@@ -67,6 +70,12 @@ export interface OperationResult {
   success: boolean;
 }
 
+export interface LinkCodeResponse {
+  code: string;
+  expires_at: string;
+  deep_link: string;
+}
+
 export interface SignupPayload {
   provider: 'credentials';
   username: string;