{
+ if (event.target === event.currentTarget) onClose();
+ }}
+ >
+
,
+ document.body,
+ );
+}
diff --git a/src/lib/referral.ts b/src/lib/referral.ts
new file mode 100644
index 0000000..57386a1
--- /dev/null
+++ b/src/lib/referral.ts
@@ -0,0 +1,20 @@
+export const REFERRAL_STORAGE_KEY = 'malenia.referral_code';
+
+export function getReferralCode(): string | null {
+ try {
+ return localStorage.getItem(REFERRAL_STORAGE_KEY);
+ } catch {
+ return null;
+ }
+}
+
+export function saveReferralCode(code: string): void {
+ const normalized = code.trim();
+ if (!normalized) return;
+
+ try {
+ localStorage.setItem(REFERRAL_STORAGE_KEY, normalized);
+ } catch {
+ // Registration can continue when storage is unavailable.
+ }
+}
diff --git a/src/pages/AccountPage.test.tsx b/src/pages/AccountPage.test.tsx
index ebeb312..d132824 100644
--- a/src/pages/AccountPage.test.tsx
+++ b/src/pages/AccountPage.test.tsx
@@ -36,7 +36,7 @@ function renderAccount(authed = true) {
access: 'a',
refresh: 'r',
expiresAt: 9999999999,
- user: { username: 'alice', telegram_id: 'alice_id', referal_code: 'c' },
+ user: { username: 'alice', telegram_id: 'alice_id', referal_code: 'c', bonus_balance: 150 },
remember: true,
});
} else {
@@ -59,7 +59,7 @@ function renderAccount(authed = true) {
);
}
-const ME = { username: 'alice', telegram_id: 'alice_id', referal_code: 'c' };
+const ME = { username: 'alice', telegram_id: 'alice_id', referal_code: 'c', bonus_balance: 150 };
const SUB = {
devices: 6,
expires_at: '2026-03-14T00:00:00Z',
@@ -94,6 +94,8 @@ describe('AccountPage', () => {
renderAccount();
expect(await screen.findByText('alice')).toBeInTheDocument();
expect(screen.getByText('@alice_id')).toBeInTheDocument();
+ expect(screen.getByText(/150\s*₽/)).toBeInTheDocument();
+ expect(screen.getByText(/только на подписку/i)).toBeInTheDocument();
expect(screen.getAllByText(/iPhone 15/)).toHaveLength(1);
});
@@ -149,6 +151,23 @@ describe('AccountPage', () => {
vi.mocked(api.getDevices).mockResolvedValue([]);
renderAccount();
expect(await screen.findByText(/нет подключённых устройств/i)).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /показать клиенты для подключения/i })).toBeEnabled();
+ });
+
+ it('opens the client links dialog from the empty state', async () => {
+ vi.mocked(api.getMe).mockResolvedValue(ME);
+ vi.mocked(api.getSubscription).mockResolvedValue(SUB);
+ vi.mocked(api.getDevices).mockResolvedValue([]);
+ const user = userEvent.setup();
+ renderAccount();
+
+ await user.click(await screen.findByRole('button', { name: /показать клиенты для подключения/i }));
+ expect(await screen.findByRole('dialog', { name: /выберите клиент/i })).toBeInTheDocument();
+ expect(screen.getAllByRole('link', { name: 'v2raytun' })[0]).toHaveAttribute(
+ 'href',
+ 'https://apps.apple.com/en/app/v2raytun/id6476628951',
+ );
+ expect(screen.getAllByText(/разрешить отправку hwid/i)).toHaveLength(2);
});
it('opens confirmation modal and deletes device on confirm', async () => {
diff --git a/src/pages/AccountPage.tsx b/src/pages/AccountPage.tsx
index 64fe43c..7ac1e63 100644
--- a/src/pages/AccountPage.tsx
+++ b/src/pages/AccountPage.tsx
@@ -11,6 +11,7 @@ import { StatStrip } from '../components/StatStrip';
import { DeviceCard } from '../components/DeviceCard';
import { Modal } from '../components/Modal';
import { SubscriptionQrModal } from '../components/SubscriptionQrModal';
+import { ClientLinksModal } from '../components/ClientLinksModal';
import type { Device, SubscriptionData, UserInfo } from '../types';
export function AccountPage() {
@@ -25,6 +26,7 @@ export function AccountPage() {
const [pending, setPending] = useState
+
+ {label}
+ + Откройте на устройстве +
+Отсканируйте код камерой или приложением Malenia.
+
+ {image ? 
: Генерируем QR-код}
+
+
+
- {Array.from({ length: 4 }).map((_, i) => (
+ {Array.from({ length: 5 }).map((_, i) => (
) : (
Нет подключённых устройств
-
- Установите Malenia на устройство и подключите его к этому аккаунту.
-
+
@@ -278,6 +285,7 @@ export function AccountPage() {
imageAlt="QR-код реферальной ссылки"
onClose={() => setIsReferralQrOpen(false)}
/>
+ setIsClientLinksOpen(false)} />
);
}
diff --git a/src/pages/LoginPage.test.tsx b/src/pages/LoginPage.test.tsx
index 4cf51e1..d906066 100644
--- a/src/pages/LoginPage.test.tsx
+++ b/src/pages/LoginPage.test.tsx
@@ -55,7 +55,7 @@ describe('LoginPage', () => {
access_token: 'a',
refresh_token: 'r',
expires_at: 9999999999,
- user: { username: 'alice', telegram_id: null, referal_code: 'c' },
+ user: { username: 'alice', telegram_id: null, referal_code: 'c', bonus_balance: 0 },
});
renderLogin();
await user.type(screen.getByLabelText('Имя пользователя'), 'alice');
@@ -94,7 +94,7 @@ describe('LoginPage', () => {
access_token: 'a',
refresh_token: 'r',
expires_at: 9999999999,
- user: { username: 'alice', telegram_id: null, referal_code: 'new-code' },
+ user: { username: 'alice', telegram_id: null, referal_code: 'new-code', bonus_balance: 0 },
});
renderLogin();
await user.click(screen.getByRole('tab', { name: /Регистрация/i }));
diff --git a/src/pages/PlanPage.test.tsx b/src/pages/PlanPage.test.tsx
index f102d03..d083d57 100644
--- a/src/pages/PlanPage.test.tsx
+++ b/src/pages/PlanPage.test.tsx
@@ -93,7 +93,7 @@ describe('PlanPage', () => {
access: 'a',
refresh: 'r',
expiresAt: 9999999999,
- user: { username: 'u', telegram_id: null, referal_code: 'c' },
+ user: { username: 'u', telegram_id: null, referal_code: 'c', bonus_balance: 0 },
remember: true,
});
const user = userEvent.setup();
@@ -120,7 +120,7 @@ describe('PlanPage', () => {
access: 'a',
refresh: 'r',
expiresAt: 9999999999,
- user: { username: 'u', telegram_id: null, referal_code: 'c' },
+ user: { username: 'u', telegram_id: null, referal_code: 'c', bonus_balance: 0 },
remember: true,
});
const user = userEvent.setup();
diff --git a/src/styles/components.css b/src/styles/components.css
index 5ef862b..a0301f3 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -272,6 +272,12 @@
}
@media (max-width: 560px) {
+ .client-links-modal {
+ padding: 28px 20px 24px;
+ }
+ .client-platforms {
+ grid-template-columns: 1fr;
+ }
.topbar {
flex-direction: column;
align-items: center;
@@ -431,7 +437,7 @@
/* ── Stat strip (account) ───────────────────────────────── */
.profile {
display: grid;
- grid-template-columns: repeat(4, 1fr);
+ grid-template-columns: repeat(5, 1fr);
border-bottom: 1px solid var(--hairline);
}
.stat {
@@ -497,6 +503,47 @@
color: var(--muted);
letter-spacing: 0.04em;
}
+.stat-value .stat-note {
+ display: block;
+ margin-top: 5px;
+ font-family: var(--font-body);
+ font-size: 10px;
+ font-weight: 400;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+@media (max-width: 860px) {
+ .profile {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .stat:nth-child(3) {
+ border-right: none;
+ }
+ .stat:nth-child(4) {
+ border-right: 1px solid var(--hairline);
+ }
+}
+
+@media (max-width: 560px) {
+ .profile {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .stat:nth-child(2n) {
+ border-right: none;
+ }
+ .stat:nth-child(3),
+ .stat:nth-child(4) {
+ border-right: 1px solid var(--hairline);
+ }
+ .stat:nth-child(4) {
+ border-right: none;
+ }
+ .stat:last-child {
+ grid-column: span 2;
+ }
+}
/* ── Subscription link (account) ───────────────────────── */
.subscription-link {
@@ -608,6 +655,52 @@
text-transform: uppercase;
color: var(--muted);
}
+.client-links-modal {
+ max-width: 560px;
+ text-align: left;
+}
+.client-links-modal .modal-kicker,
+.client-links-modal .modal-title {
+ text-align: center;
+}
+.client-platforms {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1px;
+ margin: 0 -8px 26px;
+ border: 1px solid var(--hairline);
+ background: var(--hairline);
+}
+.client-platform {
+ padding: 18px;
+ background: var(--surface);
+}
+.client-platform h4 {
+ margin-bottom: 12px;
+ font-family: var(--font-display);
+ font-size: 19px;
+ font-weight: 500;
+}
+.client-link + .client-link {
+ margin-top: 10px;
+}
+.client-link a {
+ color: var(--fg);
+ font-size: 12px;
+ letter-spacing: 0.06em;
+ text-decoration: underline;
+ text-decoration-color: var(--accent);
+ text-underline-offset: 3px;
+}
+.client-link a:hover {
+ color: var(--accent-dim);
+}
+.client-link p {
+ margin-top: 5px;
+ color: var(--muted);
+ font-size: 11px;
+ line-height: 1.45;
+}
/* ── Device grid (account) ──────────────────────────────── */
.devices-head {
@@ -754,6 +847,24 @@
color: var(--muted);
letter-spacing: 0.02em;
}
+.devices-empty-help {
+ width: 28px;
+ height: 28px;
+ margin-top: 16px;
+ border: 1px solid var(--hairline-strong);
+ border-radius: 50%;
+ background: transparent;
+ color: var(--muted);
+ font-family: var(--font-display);
+ font-size: 18px;
+ line-height: 1;
+ transition: background 0.25s, border-color 0.25s, color 0.25s;
+}
+.devices-empty-help:hover {
+ border-color: var(--accent);
+ background: var(--accent);
+ color: var(--fg);
+}
/* ── Plan slider ────────────────────────────────────────── */
.slider-wrap {
diff --git a/src/types.ts b/src/types.ts
index 906b9c5..b59d929 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -4,6 +4,7 @@ export interface UserInfo {
username: string | null;
telegram_id: string | null;
referal_code: string;
+ bonus_balance: number;
}
export interface LoginResponse {
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
index 2658c81..4bf7d37 100644
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/types.ts","./src/api/client.test.ts","./src/api/client.ts","./src/components/AddonList.tsx","./src/components/Breakdown.tsx","./src/components/Cursor.tsx","./src/components/DeviceCard.tsx","./src/components/DeviceSlider.tsx","./src/components/DurationSelect.tsx","./src/components/Emblem.tsx","./src/components/Logo.tsx","./src/components/Modal.tsx","./src/components/Reveal.tsx","./src/components/Shell.tsx","./src/components/Skeleton.tsx","./src/components/StatStrip.tsx","./src/components/SubscriptionQrModal.tsx","./src/components/Toast.tsx","./src/components/TopBar.tsx","./src/hooks/useAuth.ts","./src/hooks/useDevices.ts","./src/hooks/useLocalStorage.ts","./src/hooks/usePlans.ts","./src/lib/format.test.ts","./src/lib/format.ts","./src/lib/planConfig.test.ts","./src/lib/planConfig.ts","./src/lib/redirect.ts","./src/lib/referral.ts","./src/pages/AccountPage.test.tsx","./src/pages/AccountPage.tsx","./src/pages/Landing.test.tsx","./src/pages/Landing.tsx","./src/pages/LoginPage.test.tsx","./src/pages/LoginPage.tsx","./src/pages/PlanPage.test.tsx","./src/pages/PlanPage.tsx","./src/store/useStore.ts","./src/store/useToast.ts","./src/test/setup.ts"],"version":"5.9.3"}
\ No newline at end of file
+{"root":["./src/App.tsx","./src/main.tsx","./src/types.ts","./src/api/client.test.ts","./src/api/client.ts","./src/components/AddonList.tsx","./src/components/Breakdown.tsx","./src/components/ClientLinksModal.tsx","./src/components/Cursor.tsx","./src/components/DeviceCard.tsx","./src/components/DeviceSlider.tsx","./src/components/DurationSelect.tsx","./src/components/Emblem.tsx","./src/components/Logo.tsx","./src/components/Modal.tsx","./src/components/Reveal.tsx","./src/components/Shell.tsx","./src/components/Skeleton.tsx","./src/components/StatStrip.tsx","./src/components/SubscriptionQrModal.tsx","./src/components/Toast.tsx","./src/components/TopBar.tsx","./src/hooks/useAuth.ts","./src/hooks/useDevices.ts","./src/hooks/useLocalStorage.ts","./src/hooks/usePlans.ts","./src/lib/format.test.ts","./src/lib/format.ts","./src/lib/planConfig.test.ts","./src/lib/planConfig.ts","./src/lib/redirect.ts","./src/lib/referral.ts","./src/pages/AccountPage.test.tsx","./src/pages/AccountPage.tsx","./src/pages/Landing.test.tsx","./src/pages/Landing.tsx","./src/pages/LoginPage.test.tsx","./src/pages/LoginPage.tsx","./src/pages/PlanPage.test.tsx","./src/pages/PlanPage.tsx","./src/store/useStore.ts","./src/store/useToast.ts","./src/test/setup.ts"],"version":"5.9.3"}
\ No newline at end of file