From 8b5d777f0a94296330227b5fab34c65c83fb3baa Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 07:02:21 +0300
Subject: [PATCH 01/29] =?UTF-8?q?feat:=20=D0=BF=D1=83=D0=B1=D0=BB=D0=B8?=
 =?UTF-8?q?=D1=87=D0=BD=D1=8B=D0=B5=20=D0=BB=D0=B5=D0=BD=D0=B4=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B3-=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=B1=D1=8B=D1=81=D1=82=D1=80=D0=BE=D0=B9?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D0=BA=D1=83=D0=BF=D0=BA=D0=B8=20VPN-=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=BF=D0=B8=D1=81=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- QuickPurchase: публичная страница покупки с выбором тарифа/периода/оплаты
- PurchaseSuccess: статус покупки с поллингом и копированием ссылки
- AdminLandings: управление лендингами (создание, сортировка, удаление)
- AdminLandingEditor: полнофункциональный редактор лендинга
- API-клиент landings.ts для всех эндпоинтов
- Роутинг /buy/:slug и /buy/success/:token
- Локализация ru/en/zh/fa для всех текстов лендинга
- Санитизация HTML/CSS, rate limit защита, DOMPurify
---
 src/App.tsx                                   |   50 +
 src/api/client.ts                             |    1 +
 src/api/landings.ts                           |  199 +++
 .../dashboard/SubscriptionCardActive.tsx      |   19 +-
 src/components/dashboard/TrialOfferCard.tsx   |    5 +-
 src/locales/en.json                           |   92 +-
 src/locales/fa.json                           |   90 +-
 src/locales/ru.json                           |   92 +-
 src/locales/zh.json                           |   90 +-
 src/pages/AdminLandingEditor.tsx              |  829 +++++++++
 src/pages/AdminLandings.tsx                   |  457 +++++
 src/pages/AdminPanel.tsx                      |   17 +
 src/pages/PurchaseSuccess.tsx                 |  283 +++
 src/pages/QuickPurchase.tsx                   |  831 +++++++++
 src/pages/Subscription.tsx                    | 1518 +++++++++--------
 src/pages/SubscriptionPurchase.tsx            |    6 +-
 16 files changed, 3813 insertions(+), 766 deletions(-)
 create mode 100644 src/api/landings.ts
 create mode 100644 src/pages/AdminLandingEditor.tsx
 create mode 100644 src/pages/AdminLandings.tsx
 create mode 100644 src/pages/PurchaseSuccess.tsx
 create mode 100644 src/pages/QuickPurchase.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 26e0dad..404dc99 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,6 +37,8 @@ const Info = lazy(() => import('./pages/Info'));
 const Wheel = lazy(() => import('./pages/Wheel'));
 const Connection = lazy(() => import('./pages/Connection'));
 const ConnectionQR = lazy(() => import('./pages/ConnectionQR'));
+const QuickPurchase = lazy(() => import('./pages/QuickPurchase'));
+const PurchaseSuccess = lazy(() => import('./pages/PurchaseSuccess'));
 const TopUpMethodSelect = lazy(() => import('./pages/TopUpMethodSelect'));
 const TopUpAmount = lazy(() => import('./pages/TopUpAmount'));
 const ConnectedAccounts = lazy(() => import('./pages/ConnectedAccounts'));
@@ -104,6 +106,8 @@ const AdminRoleAssign = lazy(() => import('./pages/AdminRoleAssign'));
 const AdminPolicies = lazy(() => import('./pages/AdminPolicies'));
 const AdminPolicyEdit = lazy(() => import('./pages/AdminPolicyEdit'));
 const AdminAuditLog = lazy(() => import('./pages/AdminAuditLog'));
+const AdminLandings = lazy(() => import('./pages/AdminLandings'));
+const AdminLandingEditor = lazy(() => import('./pages/AdminLandingEditor'));
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
@@ -194,6 +198,22 @@ function App() {
             </LazyPage>
           }
         />
+        <Route
+          path="/buy/success/:token"
+          element={
+            <LazyPage>
+              <PurchaseSuccess />
+            </LazyPage>
+          }
+        />
+        <Route
+          path="/buy/:slug"
+          element={
+            <LazyPage>
+              <QuickPurchase />
+            </LazyPage>
+          }
+        />
 
         {/* Protected routes */}
         <Route
@@ -476,6 +496,36 @@ function App() {
             </PermissionRoute>
           }
         />
+        <Route
+          path="/admin/landings"
+          element={
+            <PermissionRoute permission="landings:read">
+              <LazyPage>
+                <AdminLandings />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
+        <Route
+          path="/admin/landings/create"
+          element={
+            <PermissionRoute permission="landings:create">
+              <LazyPage>
+                <AdminLandingEditor />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
+        <Route
+          path="/admin/landings/:id/edit"
+          element={
+            <PermissionRoute permission="landings:edit">
+              <LazyPage>
+                <AdminLandingEditor />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
         <Route
           path="/admin/servers"
           element={
diff --git a/src/api/client.ts b/src/api/client.ts
index 1f27460..d200982 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -77,6 +77,7 @@ const AUTH_ENDPOINTS = [
   '/cabinet/auth/oauth/',
   '/cabinet/auth/merge/',
   '/cabinet/auth/account/link/server-complete',
+  '/cabinet/landing/',
 ];
 
 function isAuthEndpoint(url: string | undefined): boolean {
diff --git a/src/api/landings.ts b/src/api/landings.ts
new file mode 100644
index 0000000..5fe13f3
--- /dev/null
+++ b/src/api/landings.ts
@@ -0,0 +1,199 @@
+import apiClient from './client';
+
+// ============================================================
+// Public types
+// ============================================================
+
+export interface LandingFeature {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+export interface LandingTariffPeriod {
+  days: number;
+  label: string;
+  price_kopeks: number;
+  price_label: string;
+}
+
+export interface LandingTariff {
+  id: number;
+  name: string;
+  description: string | null;
+  traffic_limit_gb: number;
+  device_limit: number;
+  tier_level: number;
+  periods: LandingTariffPeriod[];
+}
+
+export interface LandingPaymentMethod {
+  method_id: string;
+  display_name: string;
+  description: string;
+  icon_url: string;
+  sort_order: number;
+}
+
+export interface LandingConfig {
+  slug: string;
+  title: string;
+  subtitle: string | null;
+  features: LandingFeature[];
+  footer_text: string | null;
+  tariffs: LandingTariff[];
+  payment_methods: LandingPaymentMethod[];
+  gift_enabled: boolean;
+  custom_css: string | null;
+  meta_title: string | null;
+  meta_description: string | null;
+}
+
+export interface PurchaseRequest {
+  tariff_id: number;
+  period_days: number;
+  contact_type: 'email' | 'telegram';
+  contact_value: string;
+  payment_method: string;
+  is_gift: boolean;
+  gift_recipient_type?: 'email' | 'telegram';
+  gift_recipient_value?: string;
+  gift_message?: string;
+}
+
+export interface PurchaseResponse {
+  purchase_token: string;
+  payment_url: string;
+}
+
+export interface PurchaseStatus {
+  status: 'pending' | 'paid' | 'delivered' | 'failed' | 'expired';
+  subscription_url: string | null;
+  subscription_crypto_link: string | null;
+  is_gift: boolean;
+  contact_value: string | null;
+  period_days: number | null;
+  tariff_name: string | null;
+}
+
+// ============================================================
+// Admin types
+// ============================================================
+
+export interface LandingListItem {
+  id: number;
+  slug: string;
+  title: string;
+  is_active: boolean;
+  display_order: number;
+  gift_enabled: boolean;
+  tariff_count: number;
+  method_count: number;
+  purchase_stats: {
+    total: number;
+    paid: number;
+    pending: number;
+    failed: number;
+  };
+  created_at: string | null;
+  updated_at: string | null;
+}
+
+export interface LandingDetail {
+  id: number;
+  slug: string;
+  title: string;
+  subtitle: string | null;
+  is_active: boolean;
+  features: LandingFeature[];
+  footer_text: string | null;
+  allowed_tariff_ids: number[];
+  allowed_periods: Record<string, number[]>;
+  payment_methods: LandingPaymentMethod[];
+  gift_enabled: boolean;
+  custom_css: string | null;
+  meta_title: string | null;
+  meta_description: string | null;
+  display_order: number;
+  created_at: string | null;
+  updated_at: string | null;
+}
+
+export interface LandingCreateRequest {
+  slug: string;
+  title: string;
+  subtitle?: string;
+  is_active?: boolean;
+  features?: LandingFeature[];
+  footer_text?: string;
+  allowed_tariff_ids?: number[];
+  allowed_periods?: Record<string, number[]>;
+  payment_methods?: LandingPaymentMethod[];
+  gift_enabled?: boolean;
+  custom_css?: string;
+  meta_title?: string;
+  meta_description?: string;
+}
+
+export type LandingUpdateRequest = Partial<LandingCreateRequest>;
+
+// ============================================================
+// Public API
+// ============================================================
+
+export const landingApi = {
+  getConfig: async (slug: string): Promise<LandingConfig> => {
+    const response = await apiClient.get(`/cabinet/landing/${slug}`);
+    return response.data;
+  },
+
+  createPurchase: async (slug: string, data: PurchaseRequest): Promise<PurchaseResponse> => {
+    const response = await apiClient.post(`/cabinet/landing/${slug}/purchase`, data);
+    return response.data;
+  },
+
+  getPurchaseStatus: async (token: string): Promise<PurchaseStatus> => {
+    const response = await apiClient.get(`/cabinet/landing/purchase/${token}`);
+    return response.data;
+  },
+};
+
+// ============================================================
+// Admin API
+// ============================================================
+
+export const adminLandingsApi = {
+  list: async (): Promise<LandingListItem[]> => {
+    const response = await apiClient.get('/cabinet/admin/landings');
+    return response.data;
+  },
+
+  get: async (id: number): Promise<LandingDetail> => {
+    const response = await apiClient.get(`/cabinet/admin/landings/${id}`);
+    return response.data;
+  },
+
+  create: async (data: LandingCreateRequest): Promise<LandingDetail> => {
+    const response = await apiClient.post('/cabinet/admin/landings', data);
+    return response.data;
+  },
+
+  update: async (id: number, data: LandingUpdateRequest): Promise<LandingDetail> => {
+    const response = await apiClient.put(`/cabinet/admin/landings/${id}`, data);
+    return response.data;
+  },
+
+  delete: async (id: number): Promise<{ message: string }> => {
+    const response = await apiClient.delete(`/cabinet/admin/landings/${id}`);
+    return response.data;
+  },
+
+  toggle: async (id: number): Promise<{ id: number; is_active: boolean; message: string }> => {
+    const response = await apiClient.post(`/cabinet/admin/landings/${id}/toggle`);
+    return response.data;
+  },
+
+  reorder: async (landingIds: number[]): Promise<void> => {
+    await apiClient.put('/cabinet/admin/landings/order', { landing_ids: landingIds });
+  },
+};
diff --git a/src/components/dashboard/SubscriptionCardActive.tsx b/src/components/dashboard/SubscriptionCardActive.tsx
index e290930..64b487e 100644
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -236,15 +236,24 @@ export default function SubscriptionCardActive({
               {t('dashboard.connectDevice')}
             </div>
             <div className="mt-0.5 text-[11px] text-dark-50/30">
-              {t('dashboard.devicesOfMax', {
-                used: connectedDevices,
-                max: subscription.device_limit,
-              })}
+              {subscription.device_limit === 0
+                ? t('dashboard.devicesConnectedUnlimited', { used: connectedDevices })
+                : t('dashboard.devicesOfMax', {
+                    used: connectedDevices,
+                    max: subscription.device_limit,
+                  })}
             </div>
           </div>
 
           {/* Device indicator */}
-          {subscription.device_limit <= 10 ? (
+          {subscription.device_limit === 0 ? (
+            <div
+              className="flex flex-shrink-0 items-center text-lg text-dark-50/40"
+              aria-hidden="true"
+            >
+              ∞
+            </div>
+          ) : subscription.device_limit <= 10 ? (
             <div className="flex flex-shrink-0 gap-1.5" aria-hidden="true">
               {Array.from({ length: subscription.device_limit }, (_, i) => (
                 <div
diff --git a/src/components/dashboard/TrialOfferCard.tsx b/src/components/dashboard/TrialOfferCard.tsx
index 734a096..2b20af6 100644
--- a/src/components/dashboard/TrialOfferCard.tsx
+++ b/src/components/dashboard/TrialOfferCard.tsx
@@ -175,7 +175,10 @@ export default function TrialOfferCard({
             value: trialInfo.traffic_limit_gb === 0 ? '∞' : String(trialInfo.traffic_limit_gb),
             label: t('common.units.gb'),
           },
-          { value: String(trialInfo.device_limit), label: t('subscription.trial.devices') },
+          {
+            value: trialInfo.device_limit === 0 ? '∞' : String(trialInfo.device_limit),
+            label: t('subscription.trial.devices'),
+          },
         ].map((stat, i) => (
           <div key={i} className="text-center">
             <div className="text-4xl font-extrabold leading-none tracking-tight text-dark-50">
diff --git a/src/locales/en.json b/src/locales/en.json
index ec4ad25..ec55915 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -235,13 +235,13 @@
     "connectDevice": "Connect Device",
     "devicesConnected": "{{count}} connected",
     "devicesOfMax": "{{used}} of {{max}} connected",
+    "devicesConnectedUnlimited": "{{used}} connected · unlimited",
     "devicesShort": "dev.",
     "trafficUsage": "{{used}} / {{limit}} GB",
     "trafficUsageTitle": "Traffic Usage",
     "usedTraffic": "used {{amount}}",
     "usedSuffix": "used",
     "unlimited": "Unlimited",
-    "unlimitedTraffic": "Unlimited traffic",
     "tariff": "Tariff",
     "validUntil": "until {{date}}",
     "remaining": "Remaining",
@@ -1043,7 +1043,8 @@
       "roleAssign": "Role Assignment",
       "policies": "Access Policies",
       "auditLog": "Audit Log",
-      "salesStats": "Sales Statistics"
+      "salesStats": "Sales Statistics",
+      "landings": "Landings"
     },
     "panel": {
       "title": "Admin Panel",
@@ -1076,7 +1077,8 @@
       "roleAssignDesc": "Assign and revoke user roles",
       "policiesDesc": "Configure ABAC access policies",
       "auditLogDesc": "Review system activity and access history",
-      "salesStatsDesc": "Sales analytics and trends"
+      "salesStatsDesc": "Sales analytics and trends",
+      "landingsDesc": "Quick purchase landing pages"
     },
     "salesStats": {
       "title": "Sales Statistics",
@@ -3138,6 +3140,51 @@
         "loadFailed": "Failed to load audit log",
         "retry": "Try again"
       }
+    },
+    "landings": {
+      "title": "Landing Pages",
+      "create": "Create Landing",
+      "edit": "Edit",
+      "slug": "URL Identifier",
+      "slugHint": "Lowercase, numbers and hyphens",
+      "pageTitle": "Title",
+      "subtitle": "Subtitle",
+      "footerText": "Footer (HTML)",
+      "features": "Features",
+      "addFeature": "Add",
+      "featureIcon": "Icon",
+      "featureTitle": "Title",
+      "featureDesc": "Description",
+      "tariffs": "Plans",
+      "selectTariffs": "Select plans",
+      "periods": "Periods",
+      "paymentMethods": "Payment Methods",
+      "addMethod": "Add method",
+      "methodId": "Method ID",
+      "methodName": "Name",
+      "methodDesc": "Description",
+      "methodIcon": "Icon URL",
+      "gifts": "Gifts",
+      "giftEnabled": "Gift purchases",
+      "customCss": "CSS",
+      "seo": "SEO",
+      "metaTitle": "Meta Title",
+      "metaDesc": "Meta Description",
+      "active": "Active",
+      "inactive": "Inactive",
+      "purchases": "purchases",
+      "copyUrl": "Copy URL",
+      "urlCopied": "URL copied",
+      "deleteConfirm": "Delete landing \"{{title}}\"?",
+      "created": "Landing created",
+      "updated": "Landing updated",
+      "deleted": "Landing deleted",
+      "saveOrder": "Save order",
+      "orderSaved": "Order saved",
+      "general": "General",
+      "content": "Content",
+      "save": "Save",
+      "back": "Back"
     }
   },
   "adminUpdates": {
@@ -3865,5 +3912,44 @@
     "error": "Failed to merge accounts. Please try again later.",
     "expiresIn": "Expires in {{minutes}}",
     "merging": "Merging..."
+  },
+  "landing": {
+    "notFound": "Page not found",
+    "forMe": "For me",
+    "asGift": "As a gift",
+    "contactLabel": "Your email or @username",
+    "yourContact": "Your email or @username",
+    "contactPlaceholder": "email@example.com or @username",
+    "contactHint": "Enter email or Telegram @username",
+    "recipientLabel": "Gift recipient",
+    "recipientPlaceholder": "Recipient email or @username",
+    "giftMessageLabel": "Greeting (optional)",
+    "giftMessagePlaceholder": "Write a greeting...",
+    "chooseTariff": "Choose a plan",
+    "devices": "devices",
+    "paymentMethod": "Payment method",
+    "processing": "Processing...",
+    "payButton": "Pay {{price}}",
+    "accessFor": "Access for {{period}}",
+    "purchaseError": "Failed to create payment",
+    "purchaseNotFound": "Purchase not found",
+    "awaitingPayment": "Awaiting payment",
+    "awaitingPaymentDesc": "Complete the payment in the opened window",
+    "purchaseSuccess": "Payment successful!",
+    "keySentTo": "Subscription key sent to {{contact}}",
+    "giftSentTo": "Gift sent to {{contact}}",
+    "purchaseFailed": "Payment failed",
+    "purchaseFailedDesc": "Payment was unsuccessful. Try again.",
+    "subscriptionLink": "Subscription link",
+    "daysAccess": "days of access",
+    "error": "Error",
+    "gb": "GB",
+    "selectedTariff": "Tariff",
+    "period": "Period",
+    "total": "Total",
+    "pay": "Pay",
+    "choosePeriod": "Choose period",
+    "copied": "Copied!",
+    "copyLink": "Copy link"
   }
 }
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 7530135..bfe612a 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -866,7 +866,8 @@
       "roleAssign": "تخصیص نقش",
       "policies": "سیاست‌های دسترسی",
       "auditLog": "گزارش بازرسی",
-      "salesStats": "آمار فروش"
+      "salesStats": "آمار فروش",
+      "landings": "صفحات فرود"
     },
     "panel": {
       "title": "پنل مدیریت",
@@ -899,7 +900,8 @@
       "roleAssignDesc": "تخصیص و لغو نقش‌های کاربران",
       "policiesDesc": "تنظیم سیاست‌های کنترل دسترسی ABAC",
       "auditLogDesc": "بررسی فعالیت سیستم و تاریخچه دسترسی",
-      "salesStatsDesc": "تحلیل فروش و روندها"
+      "salesStatsDesc": "تحلیل فروش و روندها",
+      "landingsDesc": "صفحات خرید سریع"
     },
     "salesStats": {
       "title": "آمار فروش",
@@ -2864,6 +2866,51 @@
         "loadFailed": "بارگذاری گزارش بازرسی ناموفق بود",
         "retry": "تلاش مجدد"
       }
+    },
+    "landings": {
+      "title": "صفحات فرود",
+      "create": "ایجاد صفحه فرود",
+      "edit": "ویرایش",
+      "slug": "شناسه URL",
+      "slugHint": "حروف کوچک، اعداد و خط تیره",
+      "pageTitle": "عنوان",
+      "subtitle": "زیرعنوان",
+      "footerText": "متن پاورقی (HTML)",
+      "features": "ویژگی‌ها",
+      "addFeature": "افزودن",
+      "featureIcon": "آیکون",
+      "featureTitle": "عنوان",
+      "featureDesc": "توضیحات",
+      "tariffs": "طرح‌ها",
+      "selectTariffs": "انتخاب طرح‌ها",
+      "periods": "دوره‌ها",
+      "paymentMethods": "روش‌های پرداخت",
+      "addMethod": "افزودن روش",
+      "methodId": "شناسه روش",
+      "methodName": "نام",
+      "methodDesc": "توضیحات",
+      "methodIcon": "URL آیکون",
+      "gifts": "هدایا",
+      "giftEnabled": "خرید هدیه",
+      "customCss": "CSS",
+      "seo": "SEO",
+      "metaTitle": "عنوان متا",
+      "metaDesc": "توضیحات متا",
+      "active": "فعال",
+      "inactive": "غیرفعال",
+      "purchases": "خرید",
+      "copyUrl": "کپی URL",
+      "urlCopied": "URL کپی شد",
+      "deleteConfirm": "حذف صفحه فرود «{{title}}»؟",
+      "created": "صفحه فرود ایجاد شد",
+      "updated": "صفحه فرود به‌روز شد",
+      "deleted": "صفحه فرود حذف شد",
+      "saveOrder": "ذخیره ترتیب",
+      "orderSaved": "ترتیب ذخیره شد",
+      "general": "عمومی",
+      "content": "محتوا",
+      "save": "ذخیره",
+      "back": "بازگشت"
     }
   },
   "adminUpdates": {
@@ -3416,5 +3463,44 @@
     "error": "ادغام ناموفق بود. لطفاً بعداً دوباره تلاش کنید.",
     "expiresIn": "{{minutes}} دقیقه باقی مانده",
     "merging": "در حال ادغام..."
+  },
+  "landing": {
+    "notFound": "صفحه یافت نشد",
+    "forMe": "برای خودم",
+    "asGift": "به عنوان هدیه",
+    "contactLabel": "ایمیل یا @نام کاربری شما",
+    "yourContact": "ایمیل یا @نام کاربری شما",
+    "contactPlaceholder": "email@example.com یا @username",
+    "contactHint": "ایمیل یا @نام کاربری تلگرام را وارد کنید",
+    "recipientLabel": "گیرنده هدیه",
+    "recipientPlaceholder": "ایمیل یا @نام کاربری گیرنده",
+    "giftMessageLabel": "پیام تبریک (اختیاری)",
+    "giftMessagePlaceholder": "یک پیام تبریک بنویسید...",
+    "chooseTariff": "یک طرح انتخاب کنید",
+    "devices": "دستگاه",
+    "paymentMethod": "روش پرداخت",
+    "processing": "در حال پردازش...",
+    "payButton": "پرداخت {{price}}",
+    "accessFor": "دسترسی برای {{period}}",
+    "purchaseError": "خطا در ایجاد پرداخت",
+    "purchaseNotFound": "خرید یافت نشد",
+    "awaitingPayment": "در انتظار پرداخت",
+    "awaitingPaymentDesc": "پرداخت را در پنجره باز شده تکمیل کنید",
+    "purchaseSuccess": "پرداخت موفق بود!",
+    "keySentTo": "کلید اشتراک به {{contact}} ارسال شد",
+    "giftSentTo": "هدیه به {{contact}} ارسال شد",
+    "purchaseFailed": "پرداخت ناموفق",
+    "purchaseFailedDesc": "پرداخت انجام نشد. دوباره تلاش کنید.",
+    "subscriptionLink": "لینک اشتراک",
+    "daysAccess": "روز دسترسی",
+    "error": "خطا",
+    "gb": "گیگابایت",
+    "selectedTariff": "تعرفه",
+    "period": "دوره",
+    "total": "مجموع",
+    "pay": "پرداخت",
+    "choosePeriod": "انتخاب دوره",
+    "copied": "کپی شد!",
+    "copyLink": "کپی لینک"
   }
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 17146de..feeda29 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -247,13 +247,13 @@
     "connectDevice": "Подключить устройство",
     "devicesConnected": "{{count}} подключено",
     "devicesOfMax": "{{used}} из {{max}} подключено",
+    "devicesConnectedUnlimited": "{{used}} подключено · без лимита",
     "devicesShort": "устр.",
     "trafficUsage": "{{used}} / {{limit}} ГБ",
     "trafficUsageTitle": "Расход трафика",
     "usedTraffic": "использовано {{amount}}",
     "usedSuffix": "израсходовано",
     "unlimited": "Безлимит",
-    "unlimitedTraffic": "Безлимитный трафик",
     "tariff": "Тариф",
     "validUntil": "до {{date}}",
     "remaining": "Осталось",
@@ -1064,7 +1064,8 @@
       "roleAssign": "Назначение ролей",
       "policies": "Политики доступа",
       "auditLog": "Журнал аудита",
-      "salesStats": "Статистика продаж"
+      "salesStats": "Статистика продаж",
+      "landings": "Лендинги"
     },
     "panel": {
       "title": "Панель администратора",
@@ -1097,7 +1098,8 @@
       "roleAssignDesc": "Назначение и отзыв ролей пользователей",
       "policiesDesc": "Настройка политик контроля доступа ABAC",
       "auditLogDesc": "Просмотр активности системы и истории доступа",
-      "salesStatsDesc": "Аналитика продаж и тренды"
+      "salesStatsDesc": "Аналитика продаж и тренды",
+      "landingsDesc": "Страницы быстрой покупки"
     },
     "salesStats": {
       "title": "Статистика продаж",
@@ -3693,6 +3695,51 @@
         "loadFailed": "Не удалось загрузить журнал аудита",
         "retry": "Попробовать снова"
       }
+    },
+    "landings": {
+      "title": "Лендинги",
+      "create": "Создать лендинг",
+      "edit": "Редактировать",
+      "slug": "URL-идентификатор",
+      "slugHint": "Латиница, цифры и дефис",
+      "pageTitle": "Заголовок",
+      "subtitle": "Подзаголовок",
+      "footerText": "Текст внизу (HTML)",
+      "features": "Преимущества",
+      "addFeature": "Добавить",
+      "featureIcon": "Иконка",
+      "featureTitle": "Заголовок",
+      "featureDesc": "Описание",
+      "tariffs": "Тарифы",
+      "selectTariffs": "Выберите тарифы",
+      "periods": "Периоды",
+      "paymentMethods": "Способы оплаты",
+      "addMethod": "Добавить метод",
+      "methodId": "ID метода",
+      "methodName": "Название",
+      "methodDesc": "Описание",
+      "methodIcon": "URL иконки",
+      "gifts": "Подарки",
+      "giftEnabled": "Покупка в подарок",
+      "customCss": "CSS",
+      "seo": "SEO",
+      "metaTitle": "Meta Title",
+      "metaDesc": "Meta Description",
+      "active": "Активен",
+      "inactive": "Неактивен",
+      "purchases": "покупок",
+      "copyUrl": "Скопировать URL",
+      "urlCopied": "URL скопирован",
+      "deleteConfirm": "Удалить лендинг «{{title}}»?",
+      "created": "Лендинг создан",
+      "updated": "Лендинг обновлён",
+      "deleted": "Лендинг удалён",
+      "saveOrder": "Сохранить порядок",
+      "orderSaved": "Порядок сохранён",
+      "general": "Основное",
+      "content": "Контент",
+      "save": "Сохранить",
+      "back": "Назад"
     }
   },
   "adminUpdates": {
@@ -4428,5 +4475,44 @@
     "error": "Ошибка при объединении. Попробуйте позже.",
     "expiresIn": "Действует ещё {{minutes}}",
     "merging": "Объединение..."
+  },
+  "landing": {
+    "notFound": "Страница не найдена",
+    "forMe": "Для себя",
+    "asGift": "В подарок",
+    "contactLabel": "Ваш email или @username Telegram",
+    "yourContact": "Ваш email или @username",
+    "contactPlaceholder": "email@example.com или @username",
+    "contactHint": "Введите email или Telegram @username",
+    "recipientLabel": "Кому подарить",
+    "recipientPlaceholder": "email или @username получателя",
+    "giftMessageLabel": "Поздравление (необязательно)",
+    "giftMessagePlaceholder": "Напишите поздравление...",
+    "chooseTariff": "Выберите тариф",
+    "devices": "устройств",
+    "paymentMethod": "Способ оплаты",
+    "processing": "Обработка...",
+    "payButton": "Оплатить {{price}}",
+    "accessFor": "Доступ на {{period}}",
+    "purchaseError": "Ошибка при создании оплаты",
+    "purchaseNotFound": "Покупка не найдена",
+    "awaitingPayment": "Ожидание оплаты",
+    "awaitingPaymentDesc": "Завершите оплату в открывшемся окне",
+    "purchaseSuccess": "Оплата прошла успешно!",
+    "keySentTo": "Ключ подписки отправлен на {{contact}}",
+    "giftSentTo": "Подарок отправлен на {{contact}}",
+    "purchaseFailed": "Ошибка оплаты",
+    "purchaseFailedDesc": "Оплата не прошла. Попробуйте снова.",
+    "subscriptionLink": "Ссылка подписки",
+    "daysAccess": "дней доступа",
+    "error": "Ошибка",
+    "gb": "ГБ",
+    "selectedTariff": "Тариф",
+    "period": "Период",
+    "total": "Итого",
+    "pay": "Оплатить",
+    "choosePeriod": "Выберите период",
+    "copied": "Скопировано!",
+    "copyLink": "Скопировать ссылку"
   }
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 86b3489..7665974 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -866,7 +866,8 @@
       "roleAssign": "角色分配",
       "policies": "访问策略",
       "auditLog": "审计日志",
-      "salesStats": "销售统计"
+      "salesStats": "销售统计",
+      "landings": "落地页"
     },
     "panel": {
       "title": "管理面板",
@@ -899,7 +900,8 @@
       "roleAssignDesc": "分配和撤销用户角色",
       "policiesDesc": "配置ABAC访问控制策略",
       "auditLogDesc": "查看系统活动和访问历史",
-      "salesStatsDesc": "销售分析与趋势"
+      "salesStatsDesc": "销售分析与趋势",
+      "landingsDesc": "快速购买落地页"
     },
     "salesStats": {
       "title": "销售统计",
@@ -2863,6 +2865,51 @@
         "loadFailed": "加载审计日志失败",
         "retry": "重试"
       }
+    },
+    "landings": {
+      "title": "落地页",
+      "create": "创建落地页",
+      "edit": "编辑",
+      "slug": "URL标识符",
+      "slugHint": "小写字母、数字和连字符",
+      "pageTitle": "标题",
+      "subtitle": "副标题",
+      "footerText": "底部文本 (HTML)",
+      "features": "功能特点",
+      "addFeature": "添加",
+      "featureIcon": "图标",
+      "featureTitle": "标题",
+      "featureDesc": "描述",
+      "tariffs": "套餐",
+      "selectTariffs": "选择套餐",
+      "periods": "周期",
+      "paymentMethods": "支付方式",
+      "addMethod": "添加方式",
+      "methodId": "方式ID",
+      "methodName": "名称",
+      "methodDesc": "描述",
+      "methodIcon": "图标URL",
+      "gifts": "礼物",
+      "giftEnabled": "礼物购买",
+      "customCss": "CSS",
+      "seo": "SEO",
+      "metaTitle": "Meta标题",
+      "metaDesc": "Meta描述",
+      "active": "已激活",
+      "inactive": "未激活",
+      "purchases": "次购买",
+      "copyUrl": "复制URL",
+      "urlCopied": "URL已复制",
+      "deleteConfirm": "删除落地页「{{title}}」？",
+      "created": "落地页已创建",
+      "updated": "落地页已更新",
+      "deleted": "落地页已删除",
+      "saveOrder": "保存排序",
+      "orderSaved": "排序已保存",
+      "general": "基本设置",
+      "content": "内容",
+      "save": "保存",
+      "back": "返回"
     }
   },
   "adminUpdates": {
@@ -3415,5 +3462,44 @@
     "error": "合并失败，请稍后重试。",
     "expiresIn": "剩余 {{minutes}} 分钟",
     "merging": "合并中..."
+  },
+  "landing": {
+    "notFound": "页面未找到",
+    "forMe": "为自己",
+    "asGift": "作为礼物",
+    "contactLabel": "您的邮箱或 @用户名",
+    "yourContact": "您的邮箱或 @用户名",
+    "contactPlaceholder": "email@example.com 或 @username",
+    "contactHint": "输入邮箱或 Telegram @用户名",
+    "recipientLabel": "赠送对象",
+    "recipientPlaceholder": "收件人邮箱或 @用户名",
+    "giftMessageLabel": "祝福语（可选）",
+    "giftMessagePlaceholder": "写一段祝福语...",
+    "chooseTariff": "选择套餐",
+    "devices": "设备",
+    "paymentMethod": "支付方式",
+    "processing": "处理中...",
+    "payButton": "支付 {{price}}",
+    "accessFor": "{{period}} 访问权限",
+    "purchaseError": "创建支付失败",
+    "purchaseNotFound": "未找到购买记录",
+    "awaitingPayment": "等待支付",
+    "awaitingPaymentDesc": "请在打开的窗口中完成支付",
+    "purchaseSuccess": "支付成功！",
+    "keySentTo": "订阅密钥已发送至 {{contact}}",
+    "giftSentTo": "礼物已发送至 {{contact}}",
+    "purchaseFailed": "支付失败",
+    "purchaseFailedDesc": "支付未成功，请重试。",
+    "subscriptionLink": "订阅链接",
+    "daysAccess": "天访问权限",
+    "error": "错误",
+    "gb": "GB",
+    "selectedTariff": "套餐",
+    "period": "时长",
+    "total": "总计",
+    "pay": "支付",
+    "choosePeriod": "选择时长",
+    "copied": "已复制！",
+    "copyLink": "复制链接"
   }
 }
diff --git a/src/pages/AdminLandingEditor.tsx b/src/pages/AdminLandingEditor.tsx
new file mode 100644
index 0000000..a6cf745
--- /dev/null
+++ b/src/pages/AdminLandingEditor.tsx
@@ -0,0 +1,829 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import {
+  adminLandingsApi,
+  LandingCreateRequest,
+  LandingFeature,
+  LandingPaymentMethod,
+} from '../api/landings';
+import { tariffsApi, TariffListItem } from '../api/tariffs';
+import { Toggle } from '../components/admin';
+import { useNotify } from '@/platform';
+import { usePlatform } from '../platform/hooks/usePlatform';
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+// Icons
+const BackIcon = () => (
+  <svg
+    className="h-5 w-5 text-dark-400"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+  </svg>
+);
+
+const PlusIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+  </svg>
+);
+
+const TrashIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+    />
+  </svg>
+);
+
+const GripIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+    />
+  </svg>
+);
+
+const ChevronDownIcon = ({ open }: { open: boolean }) => (
+  <svg
+    className={`h-5 w-5 transition-transform ${open ? 'rotate-180' : ''}`}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+);
+
+// ============ Sortable Feature Item ============
+
+interface SortableFeatureProps {
+  feature: LandingFeature;
+  featureId: string;
+  index: number;
+  onUpdate: (index: number, field: keyof LandingFeature, value: string) => void;
+  onRemove: (index: number) => void;
+}
+
+function SortableFeatureItem({
+  feature,
+  featureId,
+  index,
+  onUpdate,
+  onRemove,
+}: SortableFeatureProps) {
+  const { t } = useTranslation();
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: featureId,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : undefined,
+    position: isDragging ? 'relative' : undefined,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`flex items-start gap-2 rounded-lg border p-3 ${
+        isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50'
+      }`}
+    >
+      <button
+        {...attributes}
+        {...listeners}
+        className="mt-2 flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
+      >
+        <GripIcon />
+      </button>
+      <div className="min-w-0 flex-1 space-y-2">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={feature.icon}
+            onChange={(e) => onUpdate(index, 'icon', e.target.value)}
+            placeholder={t('admin.landings.featureIcon')}
+            className="w-16 rounded-lg border border-dark-700 bg-dark-800 px-2 py-1.5 text-center text-sm text-dark-100 outline-none focus:border-accent-500"
+          />
+          <input
+            type="text"
+            value={feature.title}
+            onChange={(e) => onUpdate(index, 'title', e.target.value)}
+            placeholder={t('admin.landings.featureTitle')}
+            className="min-w-0 flex-1 rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+          />
+        </div>
+        <input
+          type="text"
+          value={feature.description}
+          onChange={(e) => onUpdate(index, 'description', e.target.value)}
+          placeholder={t('admin.landings.featureDesc')}
+          className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+        />
+      </div>
+      <button
+        onClick={() => onRemove(index)}
+        className="mt-2 flex-shrink-0 text-dark-500 hover:text-error-400"
+      >
+        <TrashIcon />
+      </button>
+    </div>
+  );
+}
+
+// ============ Sortable Payment Method ============
+
+interface SortableMethodProps {
+  method: LandingPaymentMethod;
+  methodId: string;
+  index: number;
+  onUpdate: (index: number, field: keyof LandingPaymentMethod, value: string) => void;
+  onRemove: (index: number) => void;
+}
+
+function SortableMethodItem({ method, methodId, index, onUpdate, onRemove }: SortableMethodProps) {
+  const { t } = useTranslation();
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: methodId,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : undefined,
+    position: isDragging ? 'relative' : undefined,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`flex items-start gap-2 rounded-lg border p-3 ${
+        isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50'
+      }`}
+    >
+      <button
+        {...attributes}
+        {...listeners}
+        className="mt-2 flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
+      >
+        <GripIcon />
+      </button>
+      <div className="min-w-0 flex-1 space-y-2">
+        <div className="grid grid-cols-2 gap-2">
+          <input
+            type="text"
+            value={method.method_id}
+            onChange={(e) => onUpdate(index, 'method_id', e.target.value)}
+            placeholder={t('admin.landings.methodId')}
+            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+          />
+          <input
+            type="text"
+            value={method.display_name}
+            onChange={(e) => onUpdate(index, 'display_name', e.target.value)}
+            placeholder={t('admin.landings.methodName')}
+            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <input
+            type="text"
+            value={method.description}
+            onChange={(e) => onUpdate(index, 'description', e.target.value)}
+            placeholder={t('admin.landings.methodDesc')}
+            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+          />
+          <input
+            type="text"
+            value={method.icon_url}
+            onChange={(e) => onUpdate(index, 'icon_url', e.target.value)}
+            placeholder={t('admin.landings.methodIcon')}
+            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+          />
+        </div>
+      </div>
+      <button
+        onClick={() => onRemove(index)}
+        className="mt-2 flex-shrink-0 text-dark-500 hover:text-error-400"
+      >
+        <TrashIcon />
+      </button>
+    </div>
+  );
+}
+
+// ============ Collapsible Section ============
+
+interface SectionProps {
+  title: string;
+  open: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}
+
+function Section({ title, open, onToggle, children }: SectionProps) {
+  return (
+    <div className="overflow-hidden rounded-xl border border-dark-700 bg-dark-900/50">
+      <button
+        onClick={onToggle}
+        className="flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium text-dark-100 hover:bg-dark-800/50"
+      >
+        {title}
+        <ChevronDownIcon open={open} />
+      </button>
+      {open && <div className="border-t border-dark-700 px-4 py-4">{children}</div>}
+    </div>
+  );
+}
+
+// ============ Main Editor ============
+
+export default function AdminLandingEditor() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const queryClient = useQueryClient();
+  const notify = useNotify();
+  const { capabilities } = usePlatform();
+  const isEdit = !!id;
+
+  // Section visibility
+  const [openSections, setOpenSections] = useState<Record<string, boolean>>({
+    general: true,
+    features: false,
+    tariffs: false,
+    methods: false,
+    gifts: false,
+    footer: false,
+  });
+
+  const toggleSection = (key: string) => {
+    setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  // Form state
+  const [slug, setSlug] = useState('');
+  const [title, setTitle] = useState('');
+  const [subtitle, setSubtitle] = useState('');
+  const [isActive, setIsActive] = useState(true);
+  const [metaTitle, setMetaTitle] = useState('');
+  const [metaDescription, setMetaDescription] = useState('');
+  const [features, setFeatures] = useState<LandingFeature[]>([]);
+  const [selectedTariffIds, setSelectedTariffIds] = useState<number[]>([]);
+  const [allowedPeriods, setAllowedPeriods] = useState<Record<string, number[]>>({});
+  const [paymentMethods, setPaymentMethods] = useState<LandingPaymentMethod[]>([]);
+  const [giftEnabled, setGiftEnabled] = useState(false);
+  const [footerText, setFooterText] = useState('');
+  const [customCss, setCustomCss] = useState('');
+
+  // DnD sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  // Fetch tariffs for selection
+  const { data: tariffsData } = useQuery({
+    queryKey: ['admin-tariffs'],
+    queryFn: () => tariffsApi.getTariffs(true),
+  });
+
+  const allTariffs = tariffsData?.tariffs ?? [];
+
+  // Fetch landing for editing
+  const { data: landingData } = useQuery({
+    queryKey: ['admin-landing', id],
+    queryFn: () => adminLandingsApi.get(Number(id)),
+    enabled: isEdit,
+    staleTime: 0,
+    gcTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: false,
+  });
+
+  // Populate form from fetched data (only once)
+  const formPopulated = useRef(false);
+
+  // Reset formPopulated when navigating to a different landing
+  useEffect(() => {
+    formPopulated.current = false;
+  }, [id]);
+
+  useEffect(() => {
+    if (!landingData || formPopulated.current) return;
+    formPopulated.current = true;
+    setSlug(landingData.slug);
+    setTitle(landingData.title);
+    setSubtitle(landingData.subtitle ?? '');
+    setIsActive(landingData.is_active);
+    setMetaTitle(landingData.meta_title ?? '');
+    setMetaDescription(landingData.meta_description ?? '');
+    setFeatures(landingData.features ?? []);
+    setSelectedTariffIds(landingData.allowed_tariff_ids ?? []);
+    setAllowedPeriods(landingData.allowed_periods ?? {});
+    setPaymentMethods(landingData.payment_methods ?? []);
+    setGiftEnabled(landingData.gift_enabled);
+    setFooterText(landingData.footer_text ?? '');
+    setCustomCss(landingData.custom_css ?? '');
+  }, [landingData]);
+
+  // Create mutation
+  const createMutation = useMutation({
+    mutationFn: adminLandingsApi.create,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-landings'] });
+      notify.success(t('admin.landings.created'));
+      navigate('/admin/landings');
+    },
+    onError: (err: unknown) => {
+      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
+        ?.detail;
+      notify.error(message || t('common.error'));
+    },
+  });
+
+  // Update mutation
+  const updateMutation = useMutation({
+    mutationFn: ({ landingId, data }: { landingId: number; data: LandingCreateRequest }) =>
+      adminLandingsApi.update(landingId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-landings'] });
+      queryClient.invalidateQueries({ queryKey: ['admin-landing', id] });
+      notify.success(t('admin.landings.updated'));
+      navigate('/admin/landings');
+    },
+    onError: (err: unknown) => {
+      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
+        ?.detail;
+      notify.error(message || t('common.error'));
+    },
+  });
+
+  const handleSubmit = () => {
+    const data: LandingCreateRequest = {
+      slug,
+      title,
+      subtitle: subtitle || undefined,
+      is_active: isActive,
+      features,
+      footer_text: footerText || undefined,
+      allowed_tariff_ids: selectedTariffIds,
+      allowed_periods: allowedPeriods,
+      payment_methods: paymentMethods,
+      gift_enabled: giftEnabled,
+      custom_css: customCss || undefined,
+      meta_title: metaTitle || undefined,
+      meta_description: metaDescription || undefined,
+    };
+
+    if (isEdit) {
+      updateMutation.mutate({ landingId: Number(id), data });
+    } else {
+      createMutation.mutate(data);
+    }
+  };
+
+  const isPending = createMutation.isPending || updateMutation.isPending;
+
+  // ---- Features helpers ----
+  const addFeature = () => {
+    setFeatures((prev) => [...prev, { icon: '', title: '', description: '' }]);
+  };
+
+  const updateFeature = (index: number, field: keyof LandingFeature, value: string) => {
+    setFeatures((prev) => prev.map((f, i) => (i === index ? { ...f, [field]: value } : f)));
+  };
+
+  const removeFeature = (index: number) => {
+    setFeatures((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleFeatureDragEnd = useCallback((event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setFeatures((prev) => {
+        const oldIndex = prev.findIndex((_, i) => `feature-${i}` === active.id);
+        const newIndex = prev.findIndex((_, i) => `feature-${i}` === over.id);
+        if (oldIndex === -1 || newIndex === -1) return prev;
+        return arrayMove(prev, oldIndex, newIndex);
+      });
+    }
+  }, []);
+
+  // ---- Payment methods helpers ----
+  const addMethod = () => {
+    setPaymentMethods((prev) => [
+      ...prev,
+      {
+        method_id: '',
+        display_name: '',
+        description: '',
+        icon_url: '',
+        sort_order: prev.length,
+      },
+    ]);
+  };
+
+  const updateMethod = (index: number, field: keyof LandingPaymentMethod, value: string) => {
+    setPaymentMethods((prev) => prev.map((m, i) => (i === index ? { ...m, [field]: value } : m)));
+  };
+
+  const removeMethod = (index: number) => {
+    setPaymentMethods((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleMethodDragEnd = useCallback((event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setPaymentMethods((prev) => {
+        const oldIndex = prev.findIndex((_, i) => `method-${i}` === active.id);
+        const newIndex = prev.findIndex((_, i) => `method-${i}` === over.id);
+        if (oldIndex === -1 || newIndex === -1) return prev;
+        return arrayMove(prev, oldIndex, newIndex);
+      });
+    }
+  }, []);
+
+  // ---- Tariff/period helpers ----
+  const toggleTariff = (tariffId: number) => {
+    setSelectedTariffIds((prev) =>
+      prev.includes(tariffId) ? prev.filter((id) => id !== tariffId) : [...prev, tariffId],
+    );
+  };
+
+  const togglePeriod = (tariffId: number, days: number) => {
+    const key = String(tariffId);
+    setAllowedPeriods((prev) => {
+      const current = prev[key] ?? [];
+      const updated = current.includes(days)
+        ? current.filter((d) => d !== days)
+        : [...current, days];
+      return { ...prev, [key]: updated };
+    });
+  };
+
+  // Feature IDs for DnD
+  const featureIds = features.map((_, i) => `feature-${i}`);
+  const methodIds = paymentMethods.map((_, i) => `method-${i}`);
+
+  return (
+    <div className="animate-fade-in">
+      {/* Header */}
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-3">
+          {!capabilities.hasBackButton && (
+            <button
+              onClick={() => navigate('/admin/landings')}
+              className="flex h-10 w-10 items-center justify-center rounded-xl border border-dark-700 bg-dark-800 transition-colors hover:border-dark-600"
+            >
+              <BackIcon />
+            </button>
+          )}
+          <h1 className="text-xl font-semibold text-dark-100">
+            {isEdit ? t('admin.landings.edit') : t('admin.landings.create')}
+          </h1>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => navigate('/admin/landings')}
+            className="rounded-lg border border-dark-700 bg-dark-800 px-4 py-2 text-sm text-dark-300 transition-colors hover:border-dark-600"
+          >
+            {t('admin.landings.back')}
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={isPending || !slug || !title}
+            className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-sm text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
+          >
+            {isPending && (
+              <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+            )}
+            {t('admin.landings.save')}
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {/* General Section */}
+        <Section
+          title={t('admin.landings.general')}
+          open={openSections.general}
+          onToggle={() => toggleSection('general')}
+        >
+          <div className="space-y-4">
+            <div>
+              <label className="mb-1 block text-sm text-dark-400">{t('admin.landings.slug')}</label>
+              <input
+                type="text"
+                value={slug}
+                onChange={(e) => setSlug(e.target.value)}
+                disabled={isEdit}
+                placeholder="my-landing"
+                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500 disabled:opacity-50"
+              />
+              <p className="mt-1 text-xs text-dark-500">{t('admin.landings.slugHint')}</p>
+            </div>
+
+            <div>
+              <label className="mb-1 block text-sm text-dark-400">
+                {t('admin.landings.pageTitle')}
+              </label>
+              <input
+                type="text"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500"
+              />
+            </div>
+
+            <div>
+              <label className="mb-1 block text-sm text-dark-400">
+                {t('admin.landings.subtitle')}
+              </label>
+              <textarea
+                value={subtitle}
+                onChange={(e) => setSubtitle(e.target.value)}
+                rows={2}
+                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500"
+              />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <label className="text-sm text-dark-400">{t('admin.landings.active')}</label>
+              <Toggle checked={isActive} onChange={() => setIsActive(!isActive)} />
+            </div>
+
+            {/* SEO */}
+            <div className="border-t border-dark-700 pt-4">
+              <h4 className="mb-3 text-sm font-medium text-dark-300">{t('admin.landings.seo')}</h4>
+              <div className="space-y-3">
+                <div>
+                  <label className="mb-1 block text-sm text-dark-400">
+                    {t('admin.landings.metaTitle')}
+                  </label>
+                  <input
+                    type="text"
+                    value={metaTitle}
+                    onChange={(e) => setMetaTitle(e.target.value)}
+                    className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm text-dark-400">
+                    {t('admin.landings.metaDesc')}
+                  </label>
+                  <textarea
+                    value={metaDescription}
+                    onChange={(e) => setMetaDescription(e.target.value)}
+                    rows={2}
+                    className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Section>
+
+        {/* Features Section */}
+        <Section
+          title={t('admin.landings.features')}
+          open={openSections.features}
+          onToggle={() => toggleSection('features')}
+        >
+          <div className="space-y-3">
+            <DndContext sensors={sensors} onDragEnd={handleFeatureDragEnd}>
+              <SortableContext items={featureIds} strategy={verticalListSortingStrategy}>
+                {features.map((feature, index) => (
+                  <SortableFeatureItem
+                    key={featureIds[index]}
+                    feature={feature}
+                    featureId={featureIds[index]}
+                    index={index}
+                    onUpdate={updateFeature}
+                    onRemove={removeFeature}
+                  />
+                ))}
+              </SortableContext>
+            </DndContext>
+            <button
+              onClick={addFeature}
+              className="flex items-center gap-2 rounded-lg border border-dashed border-dark-600 px-4 py-2 text-sm text-dark-400 transition-colors hover:border-dark-500 hover:text-dark-300"
+            >
+              <PlusIcon />
+              {t('admin.landings.addFeature')}
+            </button>
+          </div>
+        </Section>
+
+        {/* Tariffs Section */}
+        <Section
+          title={t('admin.landings.tariffs')}
+          open={openSections.tariffs}
+          onToggle={() => toggleSection('tariffs')}
+        >
+          <div className="space-y-3">
+            <p className="text-sm text-dark-500">{t('admin.landings.selectTariffs')}</p>
+            {allTariffs.map((tariff: TariffListItem) => (
+              <div key={tariff.id} className="rounded-lg border border-dark-700 bg-dark-800/50 p-3">
+                <label className="flex items-center gap-3">
+                  <input
+                    type="checkbox"
+                    checked={selectedTariffIds.includes(tariff.id)}
+                    onChange={() => toggleTariff(tariff.id)}
+                    className="h-4 w-4 rounded border-dark-600 bg-dark-700 text-accent-500"
+                  />
+                  <span className="text-sm font-medium text-dark-100">{tariff.name}</span>
+                  {!tariff.is_active && (
+                    <span className="rounded bg-dark-600 px-2 py-0.5 text-xs text-dark-400">
+                      {t('admin.landings.inactive')}
+                    </span>
+                  )}
+                </label>
+                {/* Period checkboxes if tariff is selected and is not daily */}
+                {selectedTariffIds.includes(tariff.id) && !tariff.is_daily && (
+                  <div className="ml-7 mt-2 flex flex-wrap gap-2">
+                    <span className="text-xs text-dark-500">{t('admin.landings.periods')}:</span>
+                    {/* We show known periods from the tariff detail. Since TariffListItem doesn't have period_prices,
+                        we let the user type periods or rely on the backend returning allowed_periods.
+                        For simplicity, show the allowed_periods for this tariff if any are set. */}
+                    {(allowedPeriods[String(tariff.id)] ?? []).map((days) => (
+                      <button
+                        key={days}
+                        onClick={() => togglePeriod(tariff.id, days)}
+                        className="rounded bg-accent-500/20 px-2 py-0.5 text-xs text-accent-400 hover:bg-accent-500/30"
+                      >
+                        {days}d<span className="ml-1 text-accent-300">x</span>
+                      </button>
+                    ))}
+                    <AddPeriodButton tariffId={tariff.id} onAdd={togglePeriod} />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        {/* Payment Methods Section */}
+        <Section
+          title={t('admin.landings.paymentMethods')}
+          open={openSections.methods}
+          onToggle={() => toggleSection('methods')}
+        >
+          <div className="space-y-3">
+            <DndContext sensors={sensors} onDragEnd={handleMethodDragEnd}>
+              <SortableContext items={methodIds} strategy={verticalListSortingStrategy}>
+                {paymentMethods.map((method, index) => (
+                  <SortableMethodItem
+                    key={methodIds[index]}
+                    method={method}
+                    methodId={methodIds[index]}
+                    index={index}
+                    onUpdate={updateMethod}
+                    onRemove={removeMethod}
+                  />
+                ))}
+              </SortableContext>
+            </DndContext>
+            <button
+              onClick={addMethod}
+              className="flex items-center gap-2 rounded-lg border border-dashed border-dark-600 px-4 py-2 text-sm text-dark-400 transition-colors hover:border-dark-500 hover:text-dark-300"
+            >
+              <PlusIcon />
+              {t('admin.landings.addMethod')}
+            </button>
+          </div>
+        </Section>
+
+        {/* Gift Settings Section */}
+        <Section
+          title={t('admin.landings.gifts')}
+          open={openSections.gifts}
+          onToggle={() => toggleSection('gifts')}
+        >
+          <div className="flex items-center justify-between">
+            <label className="text-sm text-dark-400">{t('admin.landings.giftEnabled')}</label>
+            <Toggle checked={giftEnabled} onChange={() => setGiftEnabled(!giftEnabled)} />
+          </div>
+        </Section>
+
+        {/* Footer & Custom CSS Section */}
+        <Section
+          title={t('admin.landings.content')}
+          open={openSections.footer}
+          onToggle={() => toggleSection('footer')}
+        >
+          <div className="space-y-4">
+            <div>
+              <label className="mb-1 block text-sm text-dark-400">
+                {t('admin.landings.footerText')}
+              </label>
+              <textarea
+                value={footerText}
+                onChange={(e) => setFooterText(e.target.value)}
+                rows={4}
+                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-sm text-dark-400">
+                {t('admin.landings.customCss')}
+              </label>
+              <textarea
+                value={customCss}
+                onChange={(e) => setCustomCss(e.target.value)}
+                rows={6}
+                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 font-mono text-sm text-dark-100 outline-none focus:border-accent-500"
+              />
+            </div>
+          </div>
+        </Section>
+      </div>
+    </div>
+  );
+}
+
+// ============ Tiny helper for adding a period ============
+
+function AddPeriodButton({
+  tariffId,
+  onAdd,
+}: {
+  tariffId: number;
+  onAdd: (tariffId: number, days: number) => void;
+}) {
+  const [value, setValue] = useState('');
+  const [showInput, setShowInput] = useState(false);
+
+  if (!showInput) {
+    return (
+      <button
+        onClick={() => setShowInput(true)}
+        className="rounded border border-dashed border-dark-600 px-2 py-0.5 text-xs text-dark-500 hover:border-dark-500 hover:text-dark-400"
+      >
+        +
+      </button>
+    );
+  }
+
+  return (
+    <input
+      type="number"
+      autoFocus
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onBlur={() => {
+        const days = parseInt(value, 10);
+        if (days > 0) {
+          onAdd(tariffId, days);
+        }
+        setValue('');
+        setShowInput(false);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          const days = parseInt(value, 10);
+          if (days > 0) {
+            onAdd(tariffId, days);
+          }
+          setValue('');
+          setShowInput(false);
+        }
+        if (e.key === 'Escape') {
+          setValue('');
+          setShowInput(false);
+        }
+      }}
+      placeholder="30"
+      className="w-16 rounded border border-dark-600 bg-dark-800 px-2 py-0.5 text-xs text-dark-100 outline-none focus:border-accent-500"
+    />
+  );
+}
diff --git a/src/pages/AdminLandings.tsx b/src/pages/AdminLandings.tsx
new file mode 100644
index 0000000..49e5494
--- /dev/null
+++ b/src/pages/AdminLandings.tsx
@@ -0,0 +1,457 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { adminLandingsApi, LandingListItem } from '../api/landings';
+import { useNotify } from '@/platform';
+import { copyToClipboard } from '../utils/clipboard';
+import { usePlatform } from '../platform/hooks/usePlatform';
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+// Icons
+const PlusIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+  </svg>
+);
+
+const EditIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+    />
+  </svg>
+);
+
+const TrashIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+    />
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+  </svg>
+);
+
+const XIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+const GiftIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+    />
+  </svg>
+);
+
+const BackIcon = () => (
+  <svg
+    className="h-5 w-5 text-dark-400"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+  </svg>
+);
+
+const GripIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+    />
+  </svg>
+);
+
+const SaveIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+    />
+  </svg>
+);
+
+const CopyIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+    />
+  </svg>
+);
+
+// ============ Sortable Landing Card ============
+
+interface SortableLandingCardProps {
+  landing: LandingListItem;
+  onEdit: () => void;
+  onDelete: () => void;
+  onToggle: () => void;
+  onCopyUrl: () => void;
+  isPendingDelete?: boolean;
+}
+
+function SortableLandingCard({
+  landing,
+  onEdit,
+  onDelete,
+  onToggle,
+  onCopyUrl,
+  isPendingDelete,
+}: SortableLandingCardProps) {
+  const { t } = useTranslation();
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: landing.id,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : undefined,
+    position: isDragging ? 'relative' : undefined,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`rounded-xl border bg-dark-800 p-4 transition-colors ${
+        isDragging
+          ? 'border-accent-500/50 shadow-xl shadow-accent-500/20'
+          : landing.is_active
+            ? 'border-dark-700'
+            : 'border-dark-700/50 opacity-60'
+      }`}
+    >
+      <div className="flex items-start gap-3">
+        {/* Drag handle */}
+        <button
+          {...attributes}
+          {...listeners}
+          className="mt-1 flex-shrink-0 cursor-grab touch-none rounded-lg p-2.5 text-dark-500 hover:bg-dark-700/50 hover:text-dark-300 active:cursor-grabbing sm:p-1.5"
+          title={t('admin.tariffs.dragToReorder')}
+        >
+          <GripIcon />
+        </button>
+
+        {/* Content */}
+        <div className="min-w-0 flex-1">
+          <div className="mb-1 flex items-center gap-2">
+            <h3 className="truncate font-medium text-dark-100">{landing.title}</h3>
+            <span className="rounded bg-dark-800 px-2 py-0.5 text-xs text-dark-400">
+              {landing.slug}
+            </span>
+            {landing.is_active ? (
+              <span className="rounded bg-success-500/20 px-2 py-0.5 text-xs text-success-400">
+                {t('admin.landings.active')}
+              </span>
+            ) : (
+              <span className="rounded bg-dark-600 px-2 py-0.5 text-xs text-dark-400">
+                {t('admin.landings.inactive')}
+              </span>
+            )}
+            {landing.gift_enabled && (
+              <span className="rounded bg-accent-500/20 px-2 py-0.5 text-xs text-accent-400">
+                <GiftIcon />
+              </span>
+            )}
+          </div>
+          <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-dark-400">
+            <span>
+              {landing.purchase_stats.paid} {t('admin.landings.purchases')}
+            </span>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onCopyUrl}
+            className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
+            title={t('admin.landings.copyUrl')}
+          >
+            <CopyIcon />
+          </button>
+
+          <button
+            onClick={onToggle}
+            className={`rounded-lg p-2 transition-colors ${
+              landing.is_active
+                ? 'bg-success-500/20 text-success-400 hover:bg-success-500/30'
+                : 'bg-dark-700 text-dark-400 hover:bg-dark-600'
+            }`}
+            title={landing.is_active ? t('admin.landings.inactive') : t('admin.landings.active')}
+          >
+            {landing.is_active ? <CheckIcon /> : <XIcon />}
+          </button>
+
+          <button
+            onClick={onEdit}
+            className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
+            title={t('admin.landings.edit')}
+          >
+            <EditIcon />
+          </button>
+
+          <button
+            onClick={onDelete}
+            className={`rounded-lg p-2 transition-colors ${
+              isPendingDelete
+                ? 'bg-error-500/20 text-error-400 ring-1 ring-error-500/30'
+                : 'bg-dark-700 text-dark-300 hover:bg-error-500/20 hover:text-error-400'
+            }`}
+            title={
+              isPendingDelete
+                ? t('admin.landings.deleteConfirm', { title: landing.title })
+                : t('common.delete')
+            }
+          >
+            {isPendingDelete ? (
+              <span className="px-1 text-xs font-medium">{t('common.delete')}?</span>
+            ) : (
+              <TrashIcon />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============ Main Page ============
+
+export default function AdminLandings() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const notify = useNotify();
+  const { capabilities } = usePlatform();
+
+  const [localLandings, setLocalLandings] = useState<LandingListItem[]>([]);
+  const [orderChanged, setOrderChanged] = useState(false);
+  const [pendingDeleteId, setPendingDeleteId] = useState<number | null>(null);
+  const deleteTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => {
+    return () => {
+      if (deleteTimeoutRef.current) clearTimeout(deleteTimeoutRef.current);
+    };
+  }, []);
+
+  // Queries
+  const { data: landingsData, isLoading } = useQuery({
+    queryKey: ['admin-landings'],
+    queryFn: () => adminLandingsApi.list(),
+  });
+
+  // Sync fetched data to local state
+  useEffect(() => {
+    if (landingsData && !orderChanged) {
+      setLocalLandings(landingsData);
+    }
+  }, [landingsData, orderChanged]);
+
+  // Save order mutation
+  const saveOrderMutation = useMutation({
+    mutationFn: (landingIds: number[]) => adminLandingsApi.reorder(landingIds),
+    onSuccess: () => {
+      setOrderChanged(false);
+      queryClient.invalidateQueries({ queryKey: ['admin-landings'] });
+      notify.success(t('admin.landings.orderSaved'));
+    },
+    onError: (err: unknown) => {
+      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
+        ?.detail;
+      notify.error(message || t('common.error'));
+    },
+  });
+
+  // Mutations
+  const deleteMutation = useMutation({
+    mutationFn: adminLandingsApi.delete,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-landings'] });
+      notify.success(t('admin.landings.deleted'));
+    },
+    onError: (err: unknown) => {
+      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
+        ?.detail;
+      notify.error(message || t('common.error'));
+    },
+  });
+
+  const handleDelete = (landing: LandingListItem) => {
+    if (pendingDeleteId === landing.id) {
+      deleteMutation.mutate(landing.id);
+      setPendingDeleteId(null);
+    } else {
+      setPendingDeleteId(landing.id);
+      deleteTimeoutRef.current = setTimeout(
+        () => setPendingDeleteId((prev) => (prev === landing.id ? null : prev)),
+        3000,
+      );
+    }
+  };
+
+  const toggleMutation = useMutation({
+    mutationFn: adminLandingsApi.toggle,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-landings'] });
+    },
+    onError: (err: unknown) => {
+      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
+        ?.detail;
+      notify.error(message || t('common.error'));
+    },
+  });
+
+  const handleCopyUrl = async (slug: string) => {
+    const url = `${window.location.origin}/buy/${slug}`;
+    try {
+      await copyToClipboard(url);
+      notify.success(t('admin.landings.urlCopied'));
+    } catch {
+      // Clipboard write failed silently
+    }
+  };
+
+  // DnD sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const handleDragEnd = useCallback((event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setLocalLandings((prev) => {
+        const oldIndex = prev.findIndex((l) => l.id === active.id);
+        const newIndex = prev.findIndex((l) => l.id === over.id);
+        if (oldIndex === -1 || newIndex === -1) return prev;
+        return arrayMove(prev, oldIndex, newIndex);
+      });
+      setOrderChanged(true);
+    }
+  }, []);
+
+  const handleSaveOrder = () => {
+    saveOrderMutation.mutate(localLandings.map((l) => l.id));
+  };
+
+  return (
+    <div className="animate-fade-in">
+      {/* Header */}
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-3">
+          {/* Show back button only on web, not in Telegram Mini App */}
+          {!capabilities.hasBackButton && (
+            <button
+              onClick={() => navigate('/admin')}
+              className="flex h-10 w-10 items-center justify-center rounded-xl border border-dark-700 bg-dark-800 transition-colors hover:border-dark-600"
+            >
+              <BackIcon />
+            </button>
+          )}
+          <div>
+            <h1 className="text-xl font-semibold text-dark-100">{t('admin.landings.title')}</h1>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {orderChanged && (
+            <button
+              onClick={handleSaveOrder}
+              disabled={saveOrderMutation.isPending}
+              className="flex items-center gap-2 rounded-lg bg-success-500 px-4 py-2 text-white transition-colors hover:bg-success-600"
+            >
+              {saveOrderMutation.isPending ? (
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+              ) : (
+                <SaveIcon />
+              )}
+              {t('admin.landings.saveOrder')}
+            </button>
+          )}
+          <button
+            onClick={() => navigate('/admin/landings/create')}
+            className="flex items-center justify-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
+          >
+            <PlusIcon />
+            {t('admin.landings.create')}
+          </button>
+        </div>
+      </div>
+
+      {/* Drag hint */}
+      <div className="mb-4 flex items-center gap-2 text-sm text-dark-500">
+        <GripIcon />
+        {t('admin.tariffs.dragToReorder')}
+      </div>
+
+      {/* Landings List */}
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+        </div>
+      ) : localLandings.length === 0 ? (
+        <div className="py-12 text-center">
+          <p className="text-dark-400">{t('common.noData')}</p>
+        </div>
+      ) : (
+        <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
+          <SortableContext
+            items={localLandings.map((l) => l.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="space-y-3">
+              {localLandings.map((landing) => (
+                <SortableLandingCard
+                  key={landing.id}
+                  landing={landing}
+                  onEdit={() => navigate(`/admin/landings/${landing.id}/edit`)}
+                  onDelete={() => handleDelete(landing)}
+                  onToggle={() => toggleMutation.mutate(landing.id)}
+                  onCopyUrl={() => handleCopyUrl(landing.slug)}
+                  isPendingDelete={pendingDeleteId === landing.id}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/AdminPanel.tsx b/src/pages/AdminPanel.tsx
index 32f90b1..c95f1bd 100644
--- a/src/pages/AdminPanel.tsx
+++ b/src/pages/AdminPanel.tsx
@@ -304,6 +304,16 @@ const ClipboardDocumentListIcon = () => (
   </svg>
 );
 
+const RectangleGroupIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z"
+    />
+  </svg>
+);
+
 interface AdminItem {
   to: string;
   icon: React.ReactNode;
@@ -499,6 +509,13 @@ export default function AdminPanel() {
           description: t('admin.panel.paymentMethodsDesc'),
           permission: 'payment_methods:read',
         },
+        {
+          to: '/admin/landings',
+          icon: <RectangleGroupIcon />,
+          title: t('admin.nav.landings'),
+          description: t('admin.panel.landingsDesc'),
+          permission: 'landings:read',
+        },
       ],
     },
     {
diff --git a/src/pages/PurchaseSuccess.tsx b/src/pages/PurchaseSuccess.tsx
new file mode 100644
index 0000000..6fdf888
--- /dev/null
+++ b/src/pages/PurchaseSuccess.tsx
@@ -0,0 +1,283 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useParams } from 'react-router';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+import { QRCodeSVG } from 'qrcode.react';
+import { landingApi } from '../api/landings';
+import { copyToClipboard } from '../utils/clipboard';
+import { cn } from '../lib/utils';
+
+const MAX_POLL_MS = 10 * 60 * 1000; // 10 minutes
+
+// ============================================================
+// Sub-components
+// ============================================================
+
+function Spinner({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        'animate-spin rounded-full border-2 border-dark-600 border-t-accent-500',
+        className,
+      )}
+    />
+  );
+}
+
+function PendingState() {
+  const { t } = useTranslation();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      <Spinner className="h-16 w-16 border-[3px]" />
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">
+          {t('landing.awaitingPayment', 'Awaiting payment')}
+        </h1>
+        <p className="mt-2 text-sm text-dark-400">{t('landing.awaitingPaymentDesc')}</p>
+      </div>
+    </motion.div>
+  );
+}
+
+function SuccessState({
+  subscriptionUrl,
+  cryptoLink,
+  contactValue,
+  tariffName,
+  periodDays,
+  isGift,
+}: {
+  subscriptionUrl: string | null;
+  cryptoLink: string | null;
+  contactValue: string | null;
+  tariffName: string | null;
+  periodDays: number | null;
+  isGift: boolean;
+}) {
+  const { t } = useTranslation();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    const url = subscriptionUrl ?? cryptoLink;
+    if (!url) return;
+
+    try {
+      await copyToClipboard(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard write failed silently
+    }
+  }, [subscriptionUrl, cryptoLink]);
+
+  const displayUrl = subscriptionUrl ?? cryptoLink;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      {/* Animated checkmark */}
+      <motion.div
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
+        className="flex h-20 w-20 items-center justify-center rounded-full bg-success-500/10"
+      >
+        <motion.svg
+          initial={{ pathLength: 0, opacity: 0 }}
+          animate={{ pathLength: 1, opacity: 1 }}
+          transition={{ duration: 0.4, delay: 0.3 }}
+          className="h-10 w-10 text-success-500"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.5}
+        >
+          <motion.path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M5 13l4 4L19 7"
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 0.4, delay: 0.3 }}
+          />
+        </motion.svg>
+      </motion.div>
+
+      {/* Title */}
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">{t('landing.purchaseSuccess')}</h1>
+        {tariffName && periodDays && (
+          <p className="mt-1 text-sm text-dark-300">
+            {tariffName} — {periodDays} {t('landing.daysAccess')}
+          </p>
+        )}
+        {contactValue && (
+          <p className="mt-2 text-sm text-dark-400">
+            {isGift
+              ? t('landing.giftSentTo', { contact: contactValue })
+              : t('landing.keySentTo', { contact: contactValue })}
+          </p>
+        )}
+      </div>
+
+      {/* QR Code */}
+      {displayUrl && (
+        <div className="space-y-4">
+          <div className="rounded-2xl bg-white p-5">
+            <QRCodeSVG
+              value={displayUrl}
+              size={200}
+              level="M"
+              includeMargin={false}
+              className="h-[200px] w-[200px]"
+            />
+          </div>
+
+          {/* Copy button */}
+          <button
+            type="button"
+            onClick={handleCopy}
+            className={cn(
+              'flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-medium transition-all duration-200',
+              copied
+                ? 'bg-success-500/10 text-success-500'
+                : 'bg-dark-800/50 text-dark-200 hover:bg-dark-700/50',
+            )}
+          >
+            {copied ? (
+              <>
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+                {t('landing.copied', 'Copied!')}
+              </>
+            ) : (
+              <>
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={1.5}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+                  />
+                </svg>
+                {t('landing.copyLink', 'Copy link')}
+              </>
+            )}
+          </button>
+        </div>
+      )}
+    </motion.div>
+  );
+}
+
+function FailedState() {
+  const { t } = useTranslation();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      <div className="flex h-20 w-20 items-center justify-center rounded-full bg-error-500/10">
+        <svg
+          className="h-10 w-10 text-error-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </div>
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">{t('landing.purchaseFailed')}</h1>
+        <p className="mt-2 text-sm text-dark-400">{t('landing.purchaseFailedDesc')}</p>
+      </div>
+    </motion.div>
+  );
+}
+
+// ============================================================
+// Main Component
+// ============================================================
+
+export default function PurchaseSuccess() {
+  const { token } = useParams<{ token: string }>();
+  const pollStart = useRef(Date.now());
+
+  // Referrer-Policy: prevent leaking payment token via referer header
+  useEffect(() => {
+    const meta = document.createElement('meta');
+    meta.name = 'referrer';
+    meta.content = 'no-referrer';
+    document.head.appendChild(meta);
+    return () => {
+      document.head.removeChild(meta);
+    };
+  }, []);
+
+  const { data: status, isError } = useQuery({
+    queryKey: ['purchase-status', token],
+    queryFn: () => landingApi.getPurchaseStatus(token!),
+    enabled: !!token,
+    refetchInterval: (query) => {
+      const currentStatus = query.state.data?.status;
+      if (currentStatus === 'pending' || currentStatus === 'paid') {
+        if (Date.now() - pollStart.current > MAX_POLL_MS) {
+          return false;
+        }
+        return 3_000;
+      }
+      return false;
+    },
+    retry: 2,
+  });
+
+  const isSuccess = status?.status === 'delivered';
+  const isFailed = status?.status === 'failed' || status?.status === 'expired';
+
+  return (
+    <div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4">
+      <div className="w-full max-w-md rounded-2xl border border-dark-800/50 bg-dark-900/50 p-8">
+        {isError ? (
+          <FailedState />
+        ) : isSuccess ? (
+          <SuccessState
+            subscriptionUrl={status.subscription_url}
+            cryptoLink={status.subscription_crypto_link}
+            contactValue={status.contact_value}
+            tariffName={status.tariff_name}
+            periodDays={status.period_days}
+            isGift={status.is_gift}
+          />
+        ) : isFailed ? (
+          <FailedState />
+        ) : (
+          <PendingState />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
new file mode 100644
index 0000000..8c9c5ce
--- /dev/null
+++ b/src/pages/QuickPurchase.tsx
@@ -0,0 +1,831 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useParams } from 'react-router';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { motion, AnimatePresence } from 'framer-motion';
+import DOMPurify from 'dompurify';
+import { landingApi } from '../api/landings';
+import type {
+  LandingConfig,
+  LandingTariff,
+  LandingTariffPeriod,
+  LandingPaymentMethod,
+  PurchaseRequest,
+} from '../api/landings';
+import { cn } from '../lib/utils';
+
+// ============================================================
+// Helpers
+// ============================================================
+
+function formatPrice(kopeks: number): string {
+  const rubles = kopeks / 100;
+  return new Intl.NumberFormat('ru-RU', {
+    style: 'currency',
+    currency: 'RUB',
+    maximumFractionDigits: 0,
+  }).format(rubles);
+}
+
+function detectContactType(value: string): 'email' | 'telegram' {
+  return value.startsWith('@') ? 'telegram' : 'email';
+}
+
+function isValidContact(value: string): boolean {
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+
+  if (trimmed.startsWith('@')) {
+    return trimmed.length >= 4;
+  }
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed);
+}
+
+// ============================================================
+// Sub-components
+// ============================================================
+
+function LoadingSkeleton() {
+  return (
+    <div className="flex min-h-dvh items-center justify-center bg-dark-950">
+      <div className="flex flex-col items-center gap-4">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-dark-600 border-t-accent-500" />
+      </div>
+    </div>
+  );
+}
+
+function ErrorState({ message }: { message: string }) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4">
+      <div className="flex max-w-sm flex-col items-center gap-4 text-center">
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-error-500/10">
+          <svg
+            className="h-8 w-8 text-error-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={1.5}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+            />
+          </svg>
+        </div>
+        <h2 className="text-lg font-semibold text-dark-50">{t('landing.error', 'Error')}</h2>
+        <p className="text-sm text-dark-300">{message}</p>
+      </div>
+    </div>
+  );
+}
+
+function PeriodTabs({
+  periods,
+  selectedDays,
+  onSelect,
+}: {
+  periods: LandingTariffPeriod[];
+  selectedDays: number;
+  onSelect: (days: number) => void;
+}) {
+  return (
+    <div className="scrollbar-none flex gap-2 overflow-x-auto pb-1">
+      {periods.map((period) => (
+        <button
+          key={period.days}
+          type="button"
+          onClick={() => onSelect(period.days)}
+          className={cn(
+            'whitespace-nowrap rounded-full px-5 py-2.5 text-sm font-medium transition-all duration-200',
+            selectedDays === period.days
+              ? 'bg-accent-500 text-white shadow-lg shadow-accent-500/25'
+              : 'bg-dark-800/50 text-dark-300 hover:bg-dark-700/50 hover:text-dark-100',
+          )}
+        >
+          {period.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function GiftToggle({ isGift, onToggle }: { isGift: boolean; onToggle: (v: boolean) => void }) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex rounded-xl bg-dark-800/50 p-1">
+      <button
+        type="button"
+        onClick={() => onToggle(false)}
+        className={cn(
+          'flex-1 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200',
+          !isGift ? 'bg-dark-700 text-dark-50 shadow-sm' : 'text-dark-400 hover:text-dark-200',
+        )}
+      >
+        {t('landing.forMe', 'For me')}
+      </button>
+      <button
+        type="button"
+        onClick={() => onToggle(true)}
+        className={cn(
+          'flex-1 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200',
+          isGift ? 'bg-dark-700 text-dark-50 shadow-sm' : 'text-dark-400 hover:text-dark-200',
+        )}
+      >
+        {t('landing.asGift', 'As a gift')}
+      </button>
+    </div>
+  );
+}
+
+function ContactForm({
+  contactValue,
+  onContactChange,
+  isGift,
+  giftRecipient,
+  onGiftRecipientChange,
+  giftMessage,
+  onGiftMessageChange,
+}: {
+  contactValue: string;
+  onContactChange: (v: string) => void;
+  isGift: boolean;
+  giftRecipient: string;
+  onGiftRecipientChange: (v: string) => void;
+  giftMessage: string;
+  onGiftMessageChange: (v: string) => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-4 rounded-2xl border border-dark-800/50 bg-dark-900/50 p-5">
+      {/* Main contact */}
+      <div>
+        <label className="mb-2 block text-sm font-medium text-dark-200">
+          {t('landing.yourContact', 'Your contact')}
+        </label>
+        <input
+          type="text"
+          value={contactValue}
+          onChange={(e) => onContactChange(e.target.value)}
+          placeholder={t('landing.contactPlaceholder', 'email@example.com or @telegram')}
+          className="w-full rounded-xl border border-dark-700/50 bg-dark-800/50 px-4 py-3 text-sm text-dark-50 placeholder-dark-500 outline-none transition-colors focus:border-accent-500/50 focus:ring-1 focus:ring-accent-500/25"
+        />
+        <p className="mt-1.5 text-xs text-dark-500">{t('landing.contactHint')}</p>
+      </div>
+
+      {/* Gift fields */}
+      <AnimatePresence mode="wait">
+        {isGift && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="space-y-4 overflow-hidden"
+          >
+            <div className="border-t border-dark-800/50 pt-4">
+              <label className="mb-2 block text-sm font-medium text-dark-200">
+                {t('landing.recipientLabel')}
+              </label>
+              <input
+                type="text"
+                value={giftRecipient}
+                onChange={(e) => onGiftRecipientChange(e.target.value)}
+                placeholder={t('landing.recipientPlaceholder', 'Recipient email or @telegram')}
+                className="w-full rounded-xl border border-dark-700/50 bg-dark-800/50 px-4 py-3 text-sm text-dark-50 placeholder-dark-500 outline-none transition-colors focus:border-accent-500/50 focus:ring-1 focus:ring-accent-500/25"
+              />
+            </div>
+            <div>
+              <label className="mb-2 block text-sm font-medium text-dark-200">
+                {t('landing.giftMessageLabel')}
+              </label>
+              <textarea
+                value={giftMessage}
+                onChange={(e) => onGiftMessageChange(e.target.value)}
+                placeholder={t(
+                  'landing.giftMessagePlaceholder',
+                  'Add a personal message (optional)',
+                )}
+                rows={3}
+                className="w-full resize-none rounded-xl border border-dark-700/50 bg-dark-800/50 px-4 py-3 text-sm text-dark-50 placeholder-dark-500 outline-none transition-colors focus:border-accent-500/50 focus:ring-1 focus:ring-accent-500/25"
+              />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+function TariffCard({
+  tariff,
+  isSelected,
+  selectedPeriod,
+  onSelect,
+}: {
+  tariff: LandingTariff;
+  isSelected: boolean;
+  selectedPeriod: LandingTariffPeriod | undefined;
+  onSelect: () => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        'relative flex w-full flex-col rounded-2xl border p-5 text-left transition-all duration-200',
+        isSelected
+          ? 'border-accent-500/50 bg-accent-500/5 ring-1 ring-accent-500/25'
+          : 'border-dark-800/50 bg-dark-900/50 hover:border-dark-700/50 hover:bg-dark-800/30',
+      )}
+    >
+      {/* Header */}
+      <div className="mb-3 flex items-start justify-between">
+        <div>
+          <h3 className="text-base font-semibold text-dark-50">{tariff.name}</h3>
+          {tariff.description && (
+            <p className="mt-0.5 text-xs text-dark-400">{tariff.description}</p>
+          )}
+        </div>
+        <div
+          className={cn(
+            'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors',
+            isSelected ? 'border-accent-500 bg-accent-500' : 'border-dark-600',
+          )}
+        >
+          {isSelected && (
+            <svg
+              className="h-3 w-3 text-white"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={3}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          )}
+        </div>
+      </div>
+
+      {/* Info row */}
+      <div className="flex items-center gap-3 text-xs text-dark-400">
+        <span className="flex items-center gap-1">
+          <svg
+            className="h-3.5 w-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={1.5}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+            />
+          </svg>
+          {tariff.traffic_limit_gb} {t('landing.gb', 'GB')}
+        </span>
+        <span className="flex items-center gap-1">
+          <svg
+            className="h-3.5 w-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={1.5}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
+            />
+          </svg>
+          {tariff.device_limit} {t('landing.devices', 'devices')}
+        </span>
+      </div>
+
+      {/* Price */}
+      {selectedPeriod && (
+        <div className="mt-3 border-t border-dark-800/30 pt-3">
+          <span className="text-lg font-bold text-accent-400">
+            {formatPrice(selectedPeriod.price_kopeks)}
+          </span>
+        </div>
+      )}
+    </button>
+  );
+}
+
+function PaymentMethodCard({
+  method,
+  isSelected,
+  onSelect,
+}: {
+  method: LandingPaymentMethod;
+  isSelected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        'flex w-full items-center gap-4 rounded-2xl border p-4 text-left transition-all duration-200',
+        isSelected
+          ? 'border-accent-500/50 bg-accent-500/5'
+          : 'border-dark-800/50 bg-dark-900/50 hover:border-dark-700/50 hover:bg-dark-800/30',
+      )}
+    >
+      {/* Icon */}
+      {method.icon_url && (
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-dark-800/50">
+          <img src={method.icon_url} alt="" className="h-6 w-6 object-contain" />
+        </div>
+      )}
+
+      {/* Text */}
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium text-dark-100">{method.display_name}</p>
+        {method.description && (
+          <p className="mt-0.5 truncate text-xs text-dark-400">{method.description}</p>
+        )}
+      </div>
+
+      {/* Radio */}
+      <div
+        className={cn(
+          'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors',
+          isSelected ? 'border-accent-500 bg-accent-500' : 'border-dark-600',
+        )}
+      >
+        {isSelected && <div className="h-2 w-2 rounded-full bg-white" />}
+      </div>
+    </button>
+  );
+}
+
+function SanitizedHtml({ html, className }: { html: string; className?: string }) {
+  const sanitized = useMemo(
+    () =>
+      DOMPurify.sanitize(html, {
+        ALLOWED_TAGS: ['p', 'a', 'strong', 'em', 'b', 'i', 'br', 'span', 'ul', 'ol', 'li', 'div'],
+        ALLOWED_ATTR: ['href', 'target', 'rel', 'class'],
+      }),
+    [html],
+  );
+
+  return (
+    <div
+      className={className}
+      // Content is sanitized via DOMPurify above
+      dangerouslySetInnerHTML={{ __html: sanitized }}
+    />
+  );
+}
+
+function SummaryCard({
+  config,
+  selectedTariff,
+  selectedPeriod,
+  currentPrice,
+  isSubmitting,
+  canSubmit,
+  submitError,
+  onSubmit,
+}: {
+  config: LandingConfig;
+  selectedTariff: LandingTariff | undefined;
+  selectedPeriod: LandingTariffPeriod | undefined;
+  currentPrice: number;
+  isSubmitting: boolean;
+  canSubmit: boolean;
+  submitError: string | null;
+  onSubmit: () => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-5">
+      {/* Summary */}
+      <div className="rounded-2xl border border-dark-800/50 bg-dark-900/50 p-5">
+        {selectedTariff && (
+          <div className="mb-3">
+            <p className="text-xs font-medium uppercase tracking-wider text-dark-500">
+              {t('landing.selectedTariff', 'Tariff')}
+            </p>
+            <p className="mt-1 text-sm font-semibold text-dark-50">{selectedTariff.name}</p>
+          </div>
+        )}
+        {selectedPeriod && (
+          <div className="mb-4">
+            <p className="text-xs font-medium uppercase tracking-wider text-dark-500">
+              {t('landing.period', 'Period')}
+            </p>
+            <p className="mt-1 text-sm text-dark-200">{selectedPeriod.label}</p>
+          </div>
+        )}
+        <div className="border-t border-dark-800/50 pt-4">
+          <p className="text-xs font-medium uppercase tracking-wider text-dark-500">
+            {t('landing.total', 'Total')}
+          </p>
+          <p className="mt-1 text-2xl font-bold text-accent-400">{formatPrice(currentPrice)}</p>
+        </div>
+      </div>
+
+      {/* Features */}
+      {config.features.length > 0 && (
+        <div className="space-y-3">
+          {config.features.map((feature, idx) => (
+            <div key={idx} className="flex gap-3">
+              <div className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-success-500/10">
+                <svg
+                  className="h-3 w-3 text-success-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={3}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <div>
+                <p className="text-sm font-medium text-dark-100">{feature.title}</p>
+                <p className="text-xs text-dark-400">{feature.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Error */}
+      <AnimatePresence>
+        {submitError && (
+          <motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            className="rounded-xl border border-error-500/20 bg-error-500/5 p-3"
+          >
+            <p className="text-sm text-error-400">{submitError}</p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Pay button */}
+      <button
+        type="button"
+        onClick={onSubmit}
+        disabled={!canSubmit || isSubmitting}
+        className={cn(
+          'flex w-full items-center justify-center gap-2 rounded-2xl px-6 py-4 text-base font-semibold transition-all duration-200',
+          canSubmit && !isSubmitting
+            ? 'bg-accent-500 text-white shadow-lg shadow-accent-500/25 hover:bg-accent-400 hover:shadow-accent-500/40 active:scale-[0.98]'
+            : 'cursor-not-allowed bg-dark-800 text-dark-500',
+        )}
+      >
+        {isSubmitting ? (
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+        ) : (
+          <>
+            {t('landing.pay', 'Pay')} {formatPrice(currentPrice)}
+          </>
+        )}
+      </button>
+
+      {/* Footer */}
+      {config.footer_text && (
+        <SanitizedHtml
+          html={config.footer_text}
+          className="text-center text-xs leading-relaxed text-dark-500 [&_a]:text-accent-400 [&_a]:underline [&_a]:underline-offset-2"
+        />
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// Main Component
+// ============================================================
+
+export default function QuickPurchase() {
+  const { slug } = useParams<{ slug: string }>();
+  const { t } = useTranslation();
+
+  // Fetch config
+  const {
+    data: config,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ['landing-config', slug],
+    queryFn: () => landingApi.getConfig(slug!),
+    enabled: !!slug,
+    staleTime: 60_000,
+    retry: 1,
+  });
+
+  // Selection state
+  const [selectedTariffId, setSelectedTariffId] = useState<number | null>(null);
+  const [selectedPeriodDays, setSelectedPeriodDays] = useState<number | null>(null);
+  const [contactValue, setContactValue] = useState('');
+  const [isGift, setIsGift] = useState(false);
+  const [giftRecipient, setGiftRecipient] = useState('');
+  const [giftMessage, setGiftMessage] = useState('');
+  const [selectedMethod, setSelectedMethod] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  // Auto-select first tariff, period, method on config load
+  useEffect(() => {
+    if (!config) return;
+
+    if (config.tariffs.length > 0 && selectedTariffId === null) {
+      const firstTariff = config.tariffs[0];
+      setSelectedTariffId(firstTariff.id);
+      if (firstTariff.periods.length > 0 && selectedPeriodDays === null) {
+        setSelectedPeriodDays(firstTariff.periods[0].days);
+      }
+    }
+
+    if (config.payment_methods.length > 0 && selectedMethod === null) {
+      setSelectedMethod(config.payment_methods[0].method_id);
+    }
+  }, [config, selectedTariffId, selectedPeriodDays, selectedMethod]);
+
+  // SEO: set document title
+  useEffect(() => {
+    if (!config?.meta_title) return;
+    const prev = document.title;
+    document.title = config.meta_title;
+    return () => {
+      document.title = prev;
+    };
+  }, [config?.meta_title]);
+
+  // SEO: set meta description
+  useEffect(() => {
+    if (!config?.meta_description) return;
+    let meta = document.querySelector('meta[name="description"]') as HTMLMetaElement | null;
+    if (!meta) {
+      meta = document.createElement('meta');
+      meta.name = 'description';
+      document.head.appendChild(meta);
+    }
+    const prev = meta.content;
+    meta.content = config.meta_description;
+    return () => {
+      meta!.content = prev;
+    };
+  }, [config?.meta_description]);
+
+  // Inject custom CSS (sanitized: strip JS expressions, imports, and url() with non-data schemes)
+  useEffect(() => {
+    if (!config?.custom_css) return;
+
+    let css = config.custom_css;
+    // Remove @import rules
+    css = css.replace(/@import\b[^;]*;?/gi, '');
+    // Remove expression() (IE)
+    css = css.replace(/expression\s*\([^)]*\)/gi, '');
+    // Block all url() except safe data:image/* — prevents data exfiltration via external URLs
+    css = css.replace(
+      /url\s*\(\s*['"]?\s*(?!data:image\/)(.*?)\s*['"]?\s*\)/gi,
+      'url(about:blank)',
+    );
+    // Remove behavior and -moz-binding (IE/Firefox legacy)
+    css = css.replace(/behavior\s*:/gi, '/* blocked */');
+    css = css.replace(/-moz-binding\s*:/gi, '/* blocked */');
+    // Strip @font-face blocks (can load external fonts for tracking)
+    css = css.replace(/@font-face\s*\{[^}]*\}/gi, '');
+    // Strip @charset declarations
+    css = css.replace(/@charset\b[^;]*;?/gi, '');
+    // Strip @namespace declarations
+    css = css.replace(/@namespace\b[^;]*;?/gi, '');
+
+    const style = document.createElement('style');
+    style.setAttribute('data-landing-css', 'true');
+    style.textContent = css;
+    document.head.appendChild(style);
+
+    return () => {
+      style.remove();
+    };
+  }, [config?.custom_css]);
+
+  // Derived data
+  const selectedTariff = useMemo(
+    () => config?.tariffs.find((tr) => tr.id === selectedTariffId),
+    [config?.tariffs, selectedTariffId],
+  );
+
+  const availablePeriods = useMemo(() => selectedTariff?.periods ?? [], [selectedTariff]);
+
+  const selectedPeriod = useMemo(
+    () => availablePeriods.find((p) => p.days === selectedPeriodDays),
+    [availablePeriods, selectedPeriodDays],
+  );
+
+  const currentPrice = selectedPeriod?.price_kopeks ?? 0;
+
+  // When tariff changes, reset period to first available if current is invalid
+  useEffect(() => {
+    if (!selectedTariff) return;
+    const hasCurrent = selectedTariff.periods.some((p) => p.days === selectedPeriodDays);
+    if (!hasCurrent && selectedTariff.periods.length > 0) {
+      setSelectedPeriodDays(selectedTariff.periods[0].days);
+    }
+  }, [selectedTariff, selectedPeriodDays]);
+
+  // Validation
+  const canSubmit = useMemo(() => {
+    if (!selectedTariffId || !selectedPeriodDays || !selectedMethod) return false;
+    if (!isValidContact(contactValue)) return false;
+    if (isGift && !isValidContact(giftRecipient)) return false;
+    return true;
+  }, [selectedTariffId, selectedPeriodDays, selectedMethod, contactValue, isGift, giftRecipient]);
+
+  // Submit handler
+  const handleSubmit = async () => {
+    if (!canSubmit || !slug || isSubmitting) return;
+
+    setIsSubmitting(true);
+    setSubmitError(null);
+
+    const data: PurchaseRequest = {
+      tariff_id: selectedTariffId!,
+      period_days: selectedPeriodDays!,
+      contact_type: detectContactType(contactValue),
+      contact_value: contactValue.trim(),
+      payment_method: selectedMethod!,
+      is_gift: isGift,
+    };
+
+    if (isGift && giftRecipient) {
+      data.gift_recipient_type = detectContactType(giftRecipient);
+      data.gift_recipient_value = giftRecipient.trim();
+      data.gift_message = giftMessage.trim() || undefined;
+    }
+
+    try {
+      const result = await landingApi.createPurchase(slug, data);
+      window.location.href = result.payment_url;
+      // If redirect blocked (popup blocker etc.), reset after 5s
+      setTimeout(() => setIsSubmitting(false), 5000);
+    } catch (err) {
+      const axiosErr = err as { response?: { data?: { detail?: string } } };
+      const message =
+        axiosErr?.response?.data?.detail ??
+        t('landing.purchaseError', 'Something went wrong. Please try again.');
+      setSubmitError(message);
+      setIsSubmitting(false);
+    }
+  };
+
+  // Loading state
+  if (isLoading) {
+    return <LoadingSkeleton />;
+  }
+
+  // Error state
+  if (error || !config) {
+    const errMsg =
+      (error as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
+      t('landing.notFound', 'Landing page not found');
+    return <ErrorState message={errMsg} />;
+  }
+
+  const showTariffCards = config.tariffs.length > 1;
+
+  return (
+    <div className="min-h-dvh bg-dark-950">
+      <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-10 text-center"
+        >
+          <h1 className="text-3xl font-bold tracking-tight text-dark-50 sm:text-4xl">
+            {config.title}
+          </h1>
+          {config.subtitle && (
+            <p className="mt-3 text-base text-dark-300 sm:text-lg">{config.subtitle}</p>
+          )}
+        </motion.div>
+
+        {/* Two-column layout */}
+        <div className="grid gap-8 lg:grid-cols-[1fr_380px]">
+          {/* Left column */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+            className="space-y-6"
+          >
+            {/* Period tabs */}
+            {availablePeriods.length > 0 && (
+              <div>
+                <h2 className="mb-3 text-sm font-medium uppercase tracking-wider text-dark-400">
+                  {t('landing.choosePeriod', 'Choose period')}
+                </h2>
+                <PeriodTabs
+                  periods={availablePeriods}
+                  selectedDays={selectedPeriodDays ?? 0}
+                  onSelect={setSelectedPeriodDays}
+                />
+              </div>
+            )}
+
+            {/* Gift toggle */}
+            {config.gift_enabled && <GiftToggle isGift={isGift} onToggle={setIsGift} />}
+
+            {/* Contact form */}
+            <ContactForm
+              contactValue={contactValue}
+              onContactChange={(v) => {
+                setContactValue(v);
+                setSubmitError(null);
+              }}
+              isGift={isGift}
+              giftRecipient={giftRecipient}
+              onGiftRecipientChange={(v) => {
+                setGiftRecipient(v);
+                setSubmitError(null);
+              }}
+              giftMessage={giftMessage}
+              onGiftMessageChange={setGiftMessage}
+            />
+
+            {/* Tariff cards */}
+            {showTariffCards && (
+              <div>
+                <h2 className="mb-3 text-sm font-medium uppercase tracking-wider text-dark-400">
+                  {t('landing.chooseTariff', 'Choose tariff')}
+                </h2>
+                <div className="grid gap-3 sm:grid-cols-2">
+                  {config.tariffs.map((tariff) => {
+                    const period = tariff.periods.find((p) => p.days === selectedPeriodDays);
+                    return (
+                      <TariffCard
+                        key={tariff.id}
+                        tariff={tariff}
+                        isSelected={tariff.id === selectedTariffId}
+                        selectedPeriod={period}
+                        onSelect={() => setSelectedTariffId(tariff.id)}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {/* Payment methods */}
+            {config.payment_methods.length > 0 && (
+              <div>
+                <h2 className="mb-3 text-sm font-medium uppercase tracking-wider text-dark-400">
+                  {t('landing.paymentMethod', 'Payment method')}
+                </h2>
+                <div className="space-y-2">
+                  {config.payment_methods.map((method) => (
+                    <PaymentMethodCard
+                      key={method.method_id}
+                      method={method}
+                      isSelected={method.method_id === selectedMethod}
+                      onSelect={() => setSelectedMethod(method.method_id)}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </motion.div>
+
+          {/* Right column (sticky sidebar / bottom on mobile) */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="lg:sticky lg:top-8 lg:self-start"
+          >
+            <SummaryCard
+              config={config}
+              selectedTariff={selectedTariff}
+              selectedPeriod={selectedPeriod}
+              currentPrice={currentPrice}
+              isSubmitting={isSubmitting}
+              canSubmit={canSubmit}
+              submitError={submitError}
+              onSubmit={handleSubmit}
+            />
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 761e3e7..6e0a54a 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -598,7 +598,7 @@ export default function Subscription() {
                             className="font-mono text-[12px] font-semibold"
                             style={{ color: 'rgb(var(--color-accent-400))' }}
                           >
-                            {subscription.device_limit}
+                            {subscription.device_limit === 0 ? '∞' : subscription.device_limit}
                           </span>
                           <span className="text-[11px] text-dark-50/30">
                             {t('subscription.devices')}
@@ -696,13 +696,22 @@ export default function Subscription() {
                       {t('dashboard.connectDevice')}
                     </div>
                     <div className="mt-0.5 text-[11px] text-dark-50/30">
-                      {t('dashboard.devicesOfMax', {
-                        used: connectedDevices,
-                        max: subscription.device_limit,
-                      })}
+                      {subscription.device_limit === 0
+                        ? t('dashboard.devicesConnectedUnlimited', { used: connectedDevices })
+                        : t('dashboard.devicesOfMax', {
+                            used: connectedDevices,
+                            max: subscription.device_limit,
+                          })}
                     </div>
                   </div>
-                  {subscription.device_limit <= 10 ? (
+                  {subscription.device_limit === 0 ? (
+                    <div
+                      className="flex flex-shrink-0 items-center text-lg text-dark-50/40"
+                      aria-hidden="true"
+                    >
+                      ∞
+                    </div>
+                  ) : subscription.device_limit <= 10 ? (
                     <div className="flex flex-shrink-0 gap-1.5" aria-hidden="true">
                       {Array.from({ length: subscription.device_limit }, (_, i) => (
                         <div
@@ -1117,227 +1126,38 @@ export default function Subscription() {
       <PurchaseCTAButton subscription={subscription} />
 
       {/* Additional Options (Buy Devices) */}
-      {subscription && subscription.is_active && !subscription.is_trial && (
-        <div
-          className="relative overflow-hidden rounded-3xl"
-          style={{
-            background: g.cardBg,
-            border: `1px solid ${g.cardBorder}`,
-            boxShadow: g.shadow,
-            padding: '24px 28px',
-          }}
-        >
-          <h2 className="mb-4 text-base font-bold tracking-tight text-dark-50">
-            {t('subscription.additionalOptions.title')}
-          </h2>
+      {subscription &&
+        subscription.is_active &&
+        !subscription.is_trial &&
+        subscription.device_limit !== 0 && (
+          <div
+            className="relative overflow-hidden rounded-3xl"
+            style={{
+              background: g.cardBg,
+              border: `1px solid ${g.cardBorder}`,
+              boxShadow: g.shadow,
+              padding: '24px 28px',
+            }}
+          >
+            <h2 className="mb-4 text-base font-bold tracking-tight text-dark-50">
+              {t('subscription.additionalOptions.title')}
+            </h2>
 
-          {/* Buy Devices */}
-          {!showDeviceTopup ? (
-            <button
-              onClick={() => setShowDeviceTopup(true)}
-              className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
-            >
-              <div className="flex items-center justify-between">
-                <div>
-                  <div className="font-medium text-dark-100">
-                    {t('subscription.additionalOptions.buyDevices')}
-                  </div>
-                  <div className="mt-1 text-sm text-dark-400">
-                    {t('subscription.additionalOptions.currentDeviceLimit', {
-                      count: subscription.device_limit,
-                    })}
-                  </div>
-                </div>
-                <svg
-                  className="h-5 w-5 text-dark-400"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  strokeWidth={2}
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-                </svg>
-              </div>
-            </button>
-          ) : (
-            <div
-              className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
-            >
-              <div className="mb-4 flex items-center justify-between">
-                <h3 className="font-medium text-dark-100">{t('subscription.buyDevices')}</h3>
-                <button
-                  onClick={() => setShowDeviceTopup(false)}
-                  className="text-sm text-dark-400 hover:text-dark-200"
-                >
-                  ✕
-                </button>
-              </div>
-
-              {/* Check if completely unavailable (no subscription, price not set, etc.) */}
-              {devicePriceData?.available === false && !devicePriceData?.max_device_limit ? (
-                <div className="py-4 text-center text-sm text-dark-400">
-                  {devicePriceData.reason || t('subscription.additionalOptions.devicesUnavailable')}
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  {/* Device selector - show even at max limit */}
-                  <div className="flex items-center justify-center gap-6">
-                    <button
-                      onClick={() => setDevicesToAdd(Math.max(1, devicesToAdd - 1))}
-                      disabled={devicesToAdd <= 1}
-                      className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
-                    >
-                      -
-                    </button>
-                    <div className="text-center">
-                      <div className="text-4xl font-bold text-dark-100">{devicesToAdd}</div>
-                      <div className="text-sm text-dark-500">
-                        {t('subscription.additionalOptions.devicesUnit')}
-                      </div>
-                    </div>
-                    <button
-                      onClick={() => setDevicesToAdd(devicesToAdd + 1)}
-                      disabled={
-                        devicePriceData?.max_device_limit
-                          ? (devicePriceData.current_device_limit || 0) + devicesToAdd >=
-                            devicePriceData.max_device_limit
-                          : false
-                      }
-                      className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
-                    >
-                      +
-                    </button>
-                  </div>
-
-                  {/* Show limit info when at or near max */}
-                  {devicePriceData?.max_device_limit && (
-                    <div className="text-center text-sm text-dark-400">
-                      {t('subscription.additionalOptions.currentDeviceLimit', {
-                        count: devicePriceData.current_device_limit || subscription.device_limit,
-                      })}{' '}
-                      /{' '}
-                      {t('subscription.additionalOptions.maxDevices', {
-                        count: devicePriceData.max_device_limit,
-                      })}
-                    </div>
-                  )}
-
-                  {/* Show reason if can't add requested amount */}
-                  {devicePriceData?.available === false && devicePriceData?.reason && (
-                    <div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
-                      {devicePriceData.reason}
-                    </div>
-                  )}
-
-                  {/* Price info - only when available */}
-                  {devicePriceData?.available && devicePriceData.price_per_device_label && (
-                    <div className="text-center">
-                      <div className="mb-2 text-sm text-dark-400">
-                        {/* Show original price with strikethrough if discount */}
-                        {devicePriceData.discount_percent &&
-                        devicePriceData.discount_percent > 0 ? (
-                          <span>
-                            <span className="text-dark-500 line-through">
-                              {formatPrice(devicePriceData.original_price_per_device_kopeks || 0)}
-                            </span>
-                            <span className="mx-1">{devicePriceData.price_per_device_label}</span>
-                          </span>
-                        ) : (
-                          devicePriceData.price_per_device_label
-                        )}
-                        /{t('subscription.perDevice').replace('/ ', '')} (
-                        {t('subscription.days', { count: devicePriceData.days_left })})
-                      </div>
-                      {/* Discount badge */}
-                      {devicePriceData.discount_percent && devicePriceData.discount_percent > 0 && (
-                        <div className="mb-2">
-                          <span className="inline-block rounded-full bg-success-500/20 px-2.5 py-0.5 text-sm font-medium text-success-400">
-                            -{devicePriceData.discount_percent}%
-                          </span>
-                        </div>
-                      )}
-                      {/* Total price - show as free if 100% discount or 0 */}
-                      {devicePriceData.total_price_kopeks === 0 ? (
-                        <div className="text-2xl font-bold text-success-400">
-                          {t('subscription.switchTariff.free')}
-                        </div>
-                      ) : (
-                        <div className="text-2xl font-bold text-accent-400">
-                          {/* Show original total with strikethrough if discount */}
-                          {devicePriceData.discount_percent &&
-                            devicePriceData.discount_percent > 0 &&
-                            devicePriceData.base_total_price_kopeks && (
-                              <span className="mr-2 text-lg text-dark-500 line-through">
-                                {formatPrice(devicePriceData.base_total_price_kopeks)}
-                              </span>
-                            )}
-                          {devicePriceData.total_price_label}
-                        </div>
-                      )}
-                    </div>
-                  )}
-
-                  {devicePriceData?.available &&
-                    purchaseOptions &&
-                    devicePriceData.total_price_kopeks &&
-                    devicePriceData.total_price_kopeks > purchaseOptions.balance_kopeks && (
-                      <InsufficientBalancePrompt
-                        missingAmountKopeks={
-                          devicePriceData.total_price_kopeks - purchaseOptions.balance_kopeks
-                        }
-                        compact
-                        onBeforeTopUp={async () => {
-                          await subscriptionApi.saveDevicesCart(devicesToAdd);
-                        }}
-                      />
-                    )}
-
-                  <button
-                    onClick={() => devicePurchaseMutation.mutate()}
-                    disabled={
-                      devicePurchaseMutation.isPending ||
-                      !devicePriceData?.available ||
-                      !!(
-                        devicePriceData?.total_price_kopeks &&
-                        purchaseOptions &&
-                        devicePriceData.total_price_kopeks > purchaseOptions.balance_kopeks
-                      )
-                    }
-                    className="btn-primary w-full py-3"
-                  >
-                    {devicePurchaseMutation.isPending ? (
-                      <span className="flex items-center justify-center gap-2">
-                        <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                      </span>
-                    ) : (
-                      t('subscription.additionalOptions.buy')
-                    )}
-                  </button>
-
-                  {devicePurchaseMutation.isError && (
-                    <div className="text-center text-sm text-error-400">
-                      {getErrorMessage(devicePurchaseMutation.error)}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Reduce Devices */}
-          <div className="mt-4">
-            {!showDeviceReduction ? (
+            {/* Buy Devices */}
+            {!showDeviceTopup ? (
               <button
-                onClick={() => setShowDeviceReduction(true)}
+                onClick={() => setShowDeviceTopup(true)}
                 className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
               >
                 <div className="flex items-center justify-between">
                   <div>
                     <div className="font-medium text-dark-100">
-                      {t('subscription.additionalOptions.reduceDevices')}
+                      {t('subscription.additionalOptions.buyDevices')}
                     </div>
                     <div className="mt-1 text-sm text-dark-400">
-                      {t('subscription.additionalOptions.reduceDevicesDescription')}
+                      {t('subscription.additionalOptions.currentDeviceLimit', {
+                        count: subscription.device_limit,
+                      })}
                     </div>
                   </div>
                   <svg
@@ -1356,592 +1176,793 @@ export default function Subscription() {
                 className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
               >
                 <div className="mb-4 flex items-center justify-between">
-                  <h3 className="font-medium text-dark-100">
-                    {t('subscription.additionalOptions.reduceDevicesTitle')}
-                  </h3>
+                  <h3 className="font-medium text-dark-100">{t('subscription.buyDevices')}</h3>
                   <button
-                    onClick={() => setShowDeviceReduction(false)}
+                    onClick={() => setShowDeviceTopup(false)}
                     className="text-sm text-dark-400 hover:text-dark-200"
                   >
                     ✕
                   </button>
                 </div>
 
-                {deviceReductionInfo?.available === false ? (
+                {/* Check if completely unavailable (no subscription, price not set, etc.) */}
+                {devicePriceData?.available === false && !devicePriceData?.max_device_limit ? (
                   <div className="py-4 text-center text-sm text-dark-400">
-                    {deviceReductionInfo.reason ||
-                      t('subscription.additionalOptions.reduceUnavailable')}
+                    {devicePriceData.reason ||
+                      t('subscription.additionalOptions.devicesUnavailable')}
                   </div>
-                ) : deviceReductionInfo ? (
+                ) : (
                   <div className="space-y-4">
-                    {/* Device limit selector */}
+                    {/* Device selector - show even at max limit */}
                     <div className="flex items-center justify-center gap-6">
                       <button
-                        onClick={() =>
-                          setTargetDeviceLimit(
-                            Math.max(
-                              Math.max(
-                                deviceReductionInfo.min_device_limit,
-                                deviceReductionInfo.connected_devices_count,
-                              ),
-                              targetDeviceLimit - 1,
-                            ),
-                          )
-                        }
-                        disabled={
-                          targetDeviceLimit <=
-                          Math.max(
-                            deviceReductionInfo.min_device_limit,
-                            deviceReductionInfo.connected_devices_count,
-                          )
-                        }
+                        onClick={() => setDevicesToAdd(Math.max(1, devicesToAdd - 1))}
+                        disabled={devicesToAdd <= 1}
                         className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
                       >
                         -
                       </button>
                       <div className="text-center">
-                        <div className="text-4xl font-bold text-dark-100">{targetDeviceLimit}</div>
+                        <div className="text-4xl font-bold text-dark-100">{devicesToAdd}</div>
                         <div className="text-sm text-dark-500">
                           {t('subscription.additionalOptions.devicesUnit')}
                         </div>
                       </div>
                       <button
-                        onClick={() =>
-                          setTargetDeviceLimit(
-                            Math.min(
-                              deviceReductionInfo.current_device_limit - 1,
-                              targetDeviceLimit + 1,
-                            ),
-                          )
+                        onClick={() => setDevicesToAdd(devicesToAdd + 1)}
+                        disabled={
+                          devicePriceData?.max_device_limit
+                            ? (devicePriceData.current_device_limit || 0) + devicesToAdd >=
+                              devicePriceData.max_device_limit
+                            : false
                         }
-                        disabled={targetDeviceLimit >= deviceReductionInfo.current_device_limit - 1}
                         className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
                       >
                         +
                       </button>
                     </div>
 
-                    {/* Info */}
-                    <div className="space-y-1 text-center text-sm text-dark-400">
-                      <div>
+                    {/* Show limit info when at or near max */}
+                    {devicePriceData?.max_device_limit && (
+                      <div className="text-center text-sm text-dark-400">
                         {t('subscription.additionalOptions.currentDeviceLimit', {
-                          count: deviceReductionInfo.current_device_limit,
-                        })}
-                      </div>
-                      <div>
-                        {t('subscription.additionalOptions.minDeviceLimit', {
-                          count: deviceReductionInfo.min_device_limit,
-                        })}
-                      </div>
-                      <div>
-                        {t('subscription.additionalOptions.connectedDevices', {
-                          count: deviceReductionInfo.connected_devices_count,
-                        })}
-                      </div>
-                    </div>
-
-                    {/* Warning if connected devices block reduction */}
-                    {deviceReductionInfo.connected_devices_count >
-                      deviceReductionInfo.min_device_limit && (
-                      <div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
-                        {t('subscription.additionalOptions.disconnectDevicesFirst', {
-                          count: deviceReductionInfo.connected_devices_count,
+                          count: devicePriceData.current_device_limit || subscription.device_limit,
+                        })}{' '}
+                        /{' '}
+                        {t('subscription.additionalOptions.maxDevices', {
+                          count: devicePriceData.max_device_limit,
                         })}
                       </div>
                     )}
 
-                    {/* New limit preview */}
-                    <div className="text-center">
-                      <div className="text-sm text-dark-400">
-                        {t('subscription.additionalOptions.newDeviceLimit', {
-                          count: targetDeviceLimit,
-                        })}
+                    {/* Show reason if can't add requested amount */}
+                    {devicePriceData?.available === false && devicePriceData?.reason && (
+                      <div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
+                        {devicePriceData.reason}
                       </div>
-                    </div>
+                    )}
+
+                    {/* Price info - only when available */}
+                    {devicePriceData?.available && devicePriceData.price_per_device_label && (
+                      <div className="text-center">
+                        <div className="mb-2 text-sm text-dark-400">
+                          {/* Show original price with strikethrough if discount */}
+                          {devicePriceData.discount_percent &&
+                          devicePriceData.discount_percent > 0 ? (
+                            <span>
+                              <span className="text-dark-500 line-through">
+                                {formatPrice(devicePriceData.original_price_per_device_kopeks || 0)}
+                              </span>
+                              <span className="mx-1">{devicePriceData.price_per_device_label}</span>
+                            </span>
+                          ) : (
+                            devicePriceData.price_per_device_label
+                          )}
+                          /{t('subscription.perDevice').replace('/ ', '')} (
+                          {t('subscription.days', { count: devicePriceData.days_left })})
+                        </div>
+                        {/* Discount badge */}
+                        {devicePriceData.discount_percent &&
+                          devicePriceData.discount_percent > 0 && (
+                            <div className="mb-2">
+                              <span className="inline-block rounded-full bg-success-500/20 px-2.5 py-0.5 text-sm font-medium text-success-400">
+                                -{devicePriceData.discount_percent}%
+                              </span>
+                            </div>
+                          )}
+                        {/* Total price - show as free if 100% discount or 0 */}
+                        {devicePriceData.total_price_kopeks === 0 ? (
+                          <div className="text-2xl font-bold text-success-400">
+                            {t('subscription.switchTariff.free')}
+                          </div>
+                        ) : (
+                          <div className="text-2xl font-bold text-accent-400">
+                            {/* Show original total with strikethrough if discount */}
+                            {devicePriceData.discount_percent &&
+                              devicePriceData.discount_percent > 0 &&
+                              devicePriceData.base_total_price_kopeks && (
+                                <span className="mr-2 text-lg text-dark-500 line-through">
+                                  {formatPrice(devicePriceData.base_total_price_kopeks)}
+                                </span>
+                              )}
+                            {devicePriceData.total_price_label}
+                          </div>
+                        )}
+                      </div>
+                    )}
+
+                    {devicePriceData?.available &&
+                      purchaseOptions &&
+                      devicePriceData.total_price_kopeks &&
+                      devicePriceData.total_price_kopeks > purchaseOptions.balance_kopeks && (
+                        <InsufficientBalancePrompt
+                          missingAmountKopeks={
+                            devicePriceData.total_price_kopeks - purchaseOptions.balance_kopeks
+                          }
+                          compact
+                          onBeforeTopUp={async () => {
+                            await subscriptionApi.saveDevicesCart(devicesToAdd);
+                          }}
+                        />
+                      )}
 
                     <button
-                      onClick={() => deviceReductionMutation.mutate()}
+                      onClick={() => devicePurchaseMutation.mutate()}
                       disabled={
-                        deviceReductionMutation.isPending ||
-                        targetDeviceLimit >= deviceReductionInfo.current_device_limit ||
-                        targetDeviceLimit < deviceReductionInfo.min_device_limit ||
-                        targetDeviceLimit < deviceReductionInfo.connected_devices_count
+                        devicePurchaseMutation.isPending ||
+                        !devicePriceData?.available ||
+                        !!(
+                          devicePriceData?.total_price_kopeks &&
+                          purchaseOptions &&
+                          devicePriceData.total_price_kopeks > purchaseOptions.balance_kopeks
+                        )
                       }
                       className="btn-primary w-full py-3"
                     >
-                      {deviceReductionMutation.isPending ? (
+                      {devicePurchaseMutation.isPending ? (
                         <span className="flex items-center justify-center gap-2">
                           <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                          {t('subscription.additionalOptions.reducing')}
                         </span>
                       ) : (
-                        t('subscription.additionalOptions.reduce')
+                        t('subscription.additionalOptions.buy')
                       )}
                     </button>
 
-                    {deviceReductionMutation.isError && (
+                    {devicePurchaseMutation.isError && (
                       <div className="text-center text-sm text-error-400">
-                        {getErrorMessage(deviceReductionMutation.error)}
+                        {getErrorMessage(devicePurchaseMutation.error)}
                       </div>
                     )}
                   </div>
+                )}
+              </div>
+            )}
+
+            {/* Reduce Devices */}
+            <div className="mt-4">
+              {!showDeviceReduction ? (
+                <button
+                  onClick={() => setShowDeviceReduction(true)}
+                  className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
+                >
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <div className="font-medium text-dark-100">
+                        {t('subscription.additionalOptions.reduceDevices')}
+                      </div>
+                      <div className="mt-1 text-sm text-dark-400">
+                        {t('subscription.additionalOptions.reduceDevicesDescription')}
+                      </div>
+                    </div>
+                    <svg
+                      className="h-5 w-5 text-dark-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                    </svg>
+                  </div>
+                </button>
+              ) : (
+                <div
+                  className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
+                >
+                  <div className="mb-4 flex items-center justify-between">
+                    <h3 className="font-medium text-dark-100">
+                      {t('subscription.additionalOptions.reduceDevicesTitle')}
+                    </h3>
+                    <button
+                      onClick={() => setShowDeviceReduction(false)}
+                      className="text-sm text-dark-400 hover:text-dark-200"
+                    >
+                      ✕
+                    </button>
+                  </div>
+
+                  {deviceReductionInfo?.available === false ? (
+                    <div className="py-4 text-center text-sm text-dark-400">
+                      {deviceReductionInfo.reason ||
+                        t('subscription.additionalOptions.reduceUnavailable')}
+                    </div>
+                  ) : deviceReductionInfo ? (
+                    <div className="space-y-4">
+                      {/* Device limit selector */}
+                      <div className="flex items-center justify-center gap-6">
+                        <button
+                          onClick={() =>
+                            setTargetDeviceLimit(
+                              Math.max(
+                                Math.max(
+                                  deviceReductionInfo.min_device_limit,
+                                  deviceReductionInfo.connected_devices_count,
+                                ),
+                                targetDeviceLimit - 1,
+                              ),
+                            )
+                          }
+                          disabled={
+                            targetDeviceLimit <=
+                            Math.max(
+                              deviceReductionInfo.min_device_limit,
+                              deviceReductionInfo.connected_devices_count,
+                            )
+                          }
+                          className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
+                        >
+                          -
+                        </button>
+                        <div className="text-center">
+                          <div className="text-4xl font-bold text-dark-100">
+                            {targetDeviceLimit}
+                          </div>
+                          <div className="text-sm text-dark-500">
+                            {t('subscription.additionalOptions.devicesUnit')}
+                          </div>
+                        </div>
+                        <button
+                          onClick={() =>
+                            setTargetDeviceLimit(
+                              Math.min(
+                                deviceReductionInfo.current_device_limit - 1,
+                                targetDeviceLimit + 1,
+                              ),
+                            )
+                          }
+                          disabled={
+                            targetDeviceLimit >= deviceReductionInfo.current_device_limit - 1
+                          }
+                          className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
+                        >
+                          +
+                        </button>
+                      </div>
+
+                      {/* Info */}
+                      <div className="space-y-1 text-center text-sm text-dark-400">
+                        <div>
+                          {t('subscription.additionalOptions.currentDeviceLimit', {
+                            count: deviceReductionInfo.current_device_limit,
+                          })}
+                        </div>
+                        <div>
+                          {t('subscription.additionalOptions.minDeviceLimit', {
+                            count: deviceReductionInfo.min_device_limit,
+                          })}
+                        </div>
+                        <div>
+                          {t('subscription.additionalOptions.connectedDevices', {
+                            count: deviceReductionInfo.connected_devices_count,
+                          })}
+                        </div>
+                      </div>
+
+                      {/* Warning if connected devices block reduction */}
+                      {deviceReductionInfo.connected_devices_count >
+                        deviceReductionInfo.min_device_limit && (
+                        <div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
+                          {t('subscription.additionalOptions.disconnectDevicesFirst', {
+                            count: deviceReductionInfo.connected_devices_count,
+                          })}
+                        </div>
+                      )}
+
+                      {/* New limit preview */}
+                      <div className="text-center">
+                        <div className="text-sm text-dark-400">
+                          {t('subscription.additionalOptions.newDeviceLimit', {
+                            count: targetDeviceLimit,
+                          })}
+                        </div>
+                      </div>
+
+                      <button
+                        onClick={() => deviceReductionMutation.mutate()}
+                        disabled={
+                          deviceReductionMutation.isPending ||
+                          targetDeviceLimit >= deviceReductionInfo.current_device_limit ||
+                          targetDeviceLimit < deviceReductionInfo.min_device_limit ||
+                          targetDeviceLimit < deviceReductionInfo.connected_devices_count
+                        }
+                        className="btn-primary w-full py-3"
+                      >
+                        {deviceReductionMutation.isPending ? (
+                          <span className="flex items-center justify-center gap-2">
+                            <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                            {t('subscription.additionalOptions.reducing')}
+                          </span>
+                        ) : (
+                          t('subscription.additionalOptions.reduce')
+                        )}
+                      </button>
+
+                      {deviceReductionMutation.isError && (
+                        <div className="text-center text-sm text-error-400">
+                          {getErrorMessage(deviceReductionMutation.error)}
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="flex items-center justify-center py-4">
+                      <span className="h-5 w-5 animate-spin rounded-full border-2 border-accent-400/30 border-t-accent-400" />
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Buy Traffic */}
+            {subscription.traffic_limit_gb > 0 && (
+              <div className="mt-4">
+                {!showTrafficTopup ? (
+                  <button
+                    onClick={() => setShowTrafficTopup(true)}
+                    className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="font-medium text-dark-100">
+                          {t('subscription.additionalOptions.buyTraffic')}
+                        </div>
+                        <div className="mt-1 text-sm text-dark-400">
+                          {t('subscription.additionalOptions.currentTrafficLimit', {
+                            limit: subscription.traffic_limit_gb,
+                            used: subscription.traffic_used_gb.toFixed(1),
+                          })}
+                        </div>
+                      </div>
+                      <svg
+                        className="h-5 w-5 text-dark-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={2}
+                      >
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                      </svg>
+                    </div>
+                  </button>
                 ) : (
-                  <div className="flex items-center justify-center py-4">
-                    <span className="h-5 w-5 animate-spin rounded-full border-2 border-accent-400/30 border-t-accent-400" />
+                  <div
+                    className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
+                  >
+                    <div className="mb-4 flex items-center justify-between">
+                      <h3 className="font-medium text-dark-100">
+                        {t('subscription.additionalOptions.buyTrafficTitle')}
+                      </h3>
+                      <button
+                        onClick={() => {
+                          setShowTrafficTopup(false);
+                          setSelectedTrafficPackage(null);
+                        }}
+                        className="text-sm text-dark-400 hover:text-dark-200"
+                      >
+                        ✕
+                      </button>
+                    </div>
+
+                    <div
+                      className={`mb-4 rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
+                    >
+                      ⚠️ {t('subscription.additionalOptions.trafficWarning')}
+                    </div>
+
+                    {!trafficPackages || trafficPackages.length === 0 ? (
+                      <div className="py-4 text-center text-sm text-dark-400">
+                        {t('subscription.additionalOptions.trafficUnavailable')}
+                      </div>
+                    ) : (
+                      <div className="space-y-4">
+                        <div className="grid grid-cols-2 gap-3">
+                          {trafficPackages.map((pkg) => (
+                            <button
+                              key={pkg.gb}
+                              onClick={() => setSelectedTrafficPackage(pkg.gb)}
+                              className={`rounded-xl border p-4 text-center transition-all ${
+                                selectedTrafficPackage === pkg.gb
+                                  ? 'border-accent-500 bg-accent-500/10'
+                                  : isDark
+                                    ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
+                                    : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
+                              }`}
+                            >
+                              <div className="text-lg font-semibold text-dark-100">
+                                {pkg.is_unlimited
+                                  ? '♾️ ' + t('subscription.additionalOptions.unlimited')
+                                  : `${pkg.gb} ${t('common.units.gb')}`}
+                              </div>
+                              {/* Discount badge */}
+                              {pkg.discount_percent && pkg.discount_percent > 0 && (
+                                <div className="mb-1">
+                                  <span className="inline-block rounded-full bg-success-500/20 px-2 py-0.5 text-xs font-medium text-success-400">
+                                    -{pkg.discount_percent}%
+                                  </span>
+                                </div>
+                              )}
+                              {/* Price with original strikethrough if discount */}
+                              <div className="font-medium text-accent-400">
+                                {pkg.discount_percent &&
+                                pkg.discount_percent > 0 &&
+                                pkg.base_price_kopeks ? (
+                                  <>
+                                    <span className="mr-1 text-sm text-dark-500 line-through">
+                                      {formatPrice(pkg.base_price_kopeks)}
+                                    </span>
+                                    {formatPrice(pkg.price_kopeks)}
+                                  </>
+                                ) : (
+                                  formatPrice(pkg.price_kopeks)
+                                )}
+                              </div>
+                            </button>
+                          ))}
+                        </div>
+
+                        {selectedTrafficPackage !== null &&
+                          (() => {
+                            const selectedPkg = trafficPackages.find(
+                              (p) => p.gb === selectedTrafficPackage,
+                            );
+                            const hasEnoughBalance =
+                              !selectedPkg ||
+                              !purchaseOptions ||
+                              selectedPkg.price_kopeks <= purchaseOptions.balance_kopeks;
+                            const missingAmount =
+                              selectedPkg && purchaseOptions
+                                ? selectedPkg.price_kopeks - purchaseOptions.balance_kopeks
+                                : 0;
+
+                            return (
+                              <>
+                                {!hasEnoughBalance && missingAmount > 0 && (
+                                  <InsufficientBalancePrompt
+                                    missingAmountKopeks={missingAmount}
+                                    compact
+                                    className="mb-3"
+                                    onBeforeTopUp={async () => {
+                                      await subscriptionApi.saveTrafficCart(selectedTrafficPackage);
+                                    }}
+                                  />
+                                )}
+                                <button
+                                  onClick={() =>
+                                    trafficPurchaseMutation.mutate(selectedTrafficPackage)
+                                  }
+                                  disabled={trafficPurchaseMutation.isPending || !hasEnoughBalance}
+                                  className="btn-primary w-full py-3"
+                                >
+                                  {trafficPurchaseMutation.isPending ? (
+                                    <span className="flex items-center justify-center gap-2">
+                                      <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                                    </span>
+                                  ) : selectedPkg?.is_unlimited ? (
+                                    t('subscription.additionalOptions.buyUnlimited')
+                                  ) : (
+                                    t('subscription.additionalOptions.buyTrafficGb', {
+                                      gb: selectedTrafficPackage,
+                                    })
+                                  )}
+                                </button>
+                              </>
+                            );
+                          })()}
+
+                        {trafficPurchaseMutation.isError && (
+                          <div className="text-center text-sm text-error-400">
+                            {getErrorMessage(trafficPurchaseMutation.error)}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Server Management - only in classic mode */}
+            {!isTariffsMode && (
+              <div className="mt-4">
+                {!showServerManagement ? (
+                  <button
+                    onClick={() => setShowServerManagement(true)}
+                    className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="font-medium text-dark-100">
+                          {t('subscription.additionalOptions.manageServers')}
+                        </div>
+                        <div className="mt-1 text-sm text-dark-400">
+                          {t('subscription.servers', { count: subscription.servers?.length || 0 })}
+                        </div>
+                      </div>
+                      <svg
+                        className="h-5 w-5 text-dark-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={2}
+                      >
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                      </svg>
+                    </div>
+                  </button>
+                ) : (
+                  <div
+                    className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
+                  >
+                    <div className="mb-4 flex items-center justify-between">
+                      <h3 className="font-medium text-dark-100">
+                        {t('subscription.additionalOptions.manageServersTitle')}
+                      </h3>
+                      <button
+                        onClick={() => {
+                          setShowServerManagement(false);
+                          setSelectedServersToUpdate([]);
+                        }}
+                        className="text-sm text-dark-400 hover:text-dark-200"
+                      >
+                        ✕
+                      </button>
+                    </div>
+
+                    {countriesLoading ? (
+                      <div className="flex items-center justify-center py-8">
+                        <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+                      </div>
+                    ) : countriesData && countriesData.countries.length > 0 ? (
+                      <div className="space-y-4">
+                        <div
+                          className={`rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
+                        >
+                          {t('subscription.serverManagement.statusLegend')}
+                        </div>
+
+                        {countriesData.discount_percent > 0 && (
+                          <div className="rounded-lg border border-success-500/30 bg-success-500/10 p-2 text-xs text-success-400">
+                            🎁{' '}
+                            {t('subscription.serverManagement.discountBanner', {
+                              percent: countriesData.discount_percent,
+                            })}
+                          </div>
+                        )}
+
+                        <div className="max-h-64 space-y-2 overflow-y-auto">
+                          {countriesData.countries
+                            .filter((country) => country.is_available || country.is_connected)
+                            .map((country) => {
+                              const isCurrentlyConnected = country.is_connected;
+                              const isSelected = selectedServersToUpdate.includes(country.uuid);
+                              const willBeAdded = !isCurrentlyConnected && isSelected;
+                              const willBeRemoved = isCurrentlyConnected && !isSelected;
+
+                              return (
+                                <button
+                                  key={country.uuid}
+                                  onClick={() => {
+                                    if (isSelected) {
+                                      setSelectedServersToUpdate((prev) =>
+                                        prev.filter((u) => u !== country.uuid),
+                                      );
+                                    } else {
+                                      setSelectedServersToUpdate((prev) => [...prev, country.uuid]);
+                                    }
+                                  }}
+                                  disabled={!country.is_available && !isCurrentlyConnected}
+                                  className={`flex w-full items-center justify-between rounded-xl border p-3 text-left transition-all ${
+                                    isSelected
+                                      ? willBeAdded
+                                        ? 'border-success-500 bg-success-500/10'
+                                        : 'border-accent-500 bg-accent-500/10'
+                                      : willBeRemoved
+                                        ? 'border-error-500/50 bg-error-500/5'
+                                        : isDark
+                                          ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
+                                          : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
+                                  } ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
+                                >
+                                  <div className="flex items-center gap-3">
+                                    <span className="text-lg">
+                                      {willBeAdded
+                                        ? '➕'
+                                        : willBeRemoved
+                                          ? '➖'
+                                          : isSelected
+                                            ? '✅'
+                                            : '⚪'}
+                                    </span>
+                                    <div>
+                                      <div className="flex items-center gap-2 font-medium text-dark-100">
+                                        {country.name}
+                                        {country.has_discount && !isCurrentlyConnected && (
+                                          <span className="rounded bg-success-500/20 px-1.5 py-0.5 text-xs text-success-400">
+                                            -{country.discount_percent}%
+                                          </span>
+                                        )}
+                                      </div>
+                                      {willBeAdded && (
+                                        <div className="text-xs text-success-400">
+                                          +{formatPrice(country.price_kopeks)}{' '}
+                                          {t('subscription.serverManagement.forDays', {
+                                            days: countriesData.days_left,
+                                          })}
+                                          {country.has_discount && (
+                                            <span className="ml-1 text-dark-500 line-through">
+                                              {formatPrice(
+                                                Math.round(
+                                                  (country.base_price_kopeks *
+                                                    countriesData.days_left) /
+                                                    30,
+                                                ),
+                                              )}
+                                            </span>
+                                          )}
+                                        </div>
+                                      )}
+                                      {!willBeAdded && !isCurrentlyConnected && (
+                                        <div className="text-xs text-dark-500">
+                                          {formatPrice(country.price_per_month_kopeks)}
+                                          {t('subscription.serverManagement.perMonth')}
+                                          {country.has_discount && (
+                                            <span className="ml-1 text-dark-600 line-through">
+                                              {formatPrice(country.base_price_kopeks)}
+                                            </span>
+                                          )}
+                                        </div>
+                                      )}
+                                      {!country.is_available && !isCurrentlyConnected && (
+                                        <div className="text-xs text-dark-500">
+                                          {t('subscription.serverManagement.unavailable')}
+                                        </div>
+                                      )}
+                                    </div>
+                                  </div>
+                                  {country.country_code && (
+                                    <span className="text-xl">
+                                      {getFlagEmoji(country.country_code)}
+                                    </span>
+                                  )}
+                                </button>
+                              );
+                            })}
+                        </div>
+
+                        {(() => {
+                          const currentConnected = countriesData.countries
+                            .filter((c) => c.is_connected)
+                            .map((c) => c.uuid);
+                          const added = selectedServersToUpdate.filter(
+                            (u) => !currentConnected.includes(u),
+                          );
+                          const removed = currentConnected.filter(
+                            (u) => !selectedServersToUpdate.includes(u),
+                          );
+                          const hasChanges = added.length > 0 || removed.length > 0;
+
+                          // Calculate cost for added servers
+                          const addedServers = countriesData.countries.filter((c) =>
+                            added.includes(c.uuid),
+                          );
+                          const totalCost = addedServers.reduce(
+                            (sum, s) => sum + s.price_kopeks,
+                            0,
+                          );
+                          const hasEnoughBalance =
+                            !purchaseOptions || totalCost <= purchaseOptions.balance_kopeks;
+                          const missingAmount = purchaseOptions
+                            ? totalCost - purchaseOptions.balance_kopeks
+                            : 0;
+
+                          return hasChanges ? (
+                            <div
+                              className={`space-y-3 border-t pt-3 ${isDark ? 'border-dark-700/50' : 'border-champagne-300/60'}`}
+                            >
+                              {added.length > 0 && (
+                                <div className="text-sm">
+                                  <span className="text-success-400">
+                                    {t('subscription.serverManagement.toAdd')}
+                                  </span>{' '}
+                                  <span className="text-dark-300">
+                                    {addedServers.map((s) => s.name).join(', ')}
+                                  </span>
+                                </div>
+                              )}
+                              {removed.length > 0 && (
+                                <div className="text-sm">
+                                  <span className="text-error-400">
+                                    {t('subscription.serverManagement.toDisconnect')}
+                                  </span>{' '}
+                                  <span className="text-dark-300">
+                                    {countriesData.countries
+                                      .filter((c) => removed.includes(c.uuid))
+                                      .map((s) => s.name)
+                                      .join(', ')}
+                                  </span>
+                                </div>
+                              )}
+                              {totalCost > 0 && (
+                                <div className="text-center">
+                                  <div className="text-sm text-dark-400">
+                                    {t('subscription.serverManagement.paymentProrated')}
+                                  </div>
+                                  <div className="text-xl font-bold text-accent-400">
+                                    {formatPrice(totalCost)}
+                                  </div>
+                                </div>
+                              )}
+
+                              {totalCost > 0 && !hasEnoughBalance && missingAmount > 0 && (
+                                <InsufficientBalancePrompt
+                                  missingAmountKopeks={missingAmount}
+                                  compact
+                                />
+                              )}
+
+                              <button
+                                onClick={() =>
+                                  updateCountriesMutation.mutate(selectedServersToUpdate)
+                                }
+                                disabled={
+                                  updateCountriesMutation.isPending ||
+                                  selectedServersToUpdate.length === 0 ||
+                                  (totalCost > 0 && !hasEnoughBalance)
+                                }
+                                className="btn-primary w-full py-3"
+                              >
+                                {updateCountriesMutation.isPending ? (
+                                  <span className="flex items-center justify-center gap-2">
+                                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                                  </span>
+                                ) : (
+                                  t('subscription.serverManagement.applyChanges')
+                                )}
+                              </button>
+                            </div>
+                          ) : (
+                            <div className="py-2 text-center text-sm text-dark-500">
+                              {t('subscription.serverManagement.selectServersHint')}
+                            </div>
+                          );
+                        })()}
+
+                        {updateCountriesMutation.isError && (
+                          <div className="text-center text-sm text-error-400">
+                            {getErrorMessage(updateCountriesMutation.error)}
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="py-4 text-center text-sm text-dark-400">
+                        {t('subscription.serverManagement.noServersAvailable')}
+                      </div>
+                    )}
                   </div>
                 )}
               </div>
             )}
           </div>
-
-          {/* Buy Traffic */}
-          {subscription.traffic_limit_gb > 0 && (
-            <div className="mt-4">
-              {!showTrafficTopup ? (
-                <button
-                  onClick={() => setShowTrafficTopup(true)}
-                  className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
-                >
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <div className="font-medium text-dark-100">
-                        {t('subscription.additionalOptions.buyTraffic')}
-                      </div>
-                      <div className="mt-1 text-sm text-dark-400">
-                        {t('subscription.additionalOptions.currentTrafficLimit', {
-                          limit: subscription.traffic_limit_gb,
-                          used: subscription.traffic_used_gb.toFixed(1),
-                        })}
-                      </div>
-                    </div>
-                    <svg
-                      className="h-5 w-5 text-dark-400"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      strokeWidth={2}
-                    >
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-                    </svg>
-                  </div>
-                </button>
-              ) : (
-                <div
-                  className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
-                >
-                  <div className="mb-4 flex items-center justify-between">
-                    <h3 className="font-medium text-dark-100">
-                      {t('subscription.additionalOptions.buyTrafficTitle')}
-                    </h3>
-                    <button
-                      onClick={() => {
-                        setShowTrafficTopup(false);
-                        setSelectedTrafficPackage(null);
-                      }}
-                      className="text-sm text-dark-400 hover:text-dark-200"
-                    >
-                      ✕
-                    </button>
-                  </div>
-
-                  <div
-                    className={`mb-4 rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
-                  >
-                    ⚠️ {t('subscription.additionalOptions.trafficWarning')}
-                  </div>
-
-                  {!trafficPackages || trafficPackages.length === 0 ? (
-                    <div className="py-4 text-center text-sm text-dark-400">
-                      {t('subscription.additionalOptions.trafficUnavailable')}
-                    </div>
-                  ) : (
-                    <div className="space-y-4">
-                      <div className="grid grid-cols-2 gap-3">
-                        {trafficPackages.map((pkg) => (
-                          <button
-                            key={pkg.gb}
-                            onClick={() => setSelectedTrafficPackage(pkg.gb)}
-                            className={`rounded-xl border p-4 text-center transition-all ${
-                              selectedTrafficPackage === pkg.gb
-                                ? 'border-accent-500 bg-accent-500/10'
-                                : isDark
-                                  ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
-                                  : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
-                            }`}
-                          >
-                            <div className="text-lg font-semibold text-dark-100">
-                              {pkg.is_unlimited
-                                ? '♾️ ' + t('subscription.additionalOptions.unlimited')
-                                : `${pkg.gb} ${t('common.units.gb')}`}
-                            </div>
-                            {/* Discount badge */}
-                            {pkg.discount_percent && pkg.discount_percent > 0 && (
-                              <div className="mb-1">
-                                <span className="inline-block rounded-full bg-success-500/20 px-2 py-0.5 text-xs font-medium text-success-400">
-                                  -{pkg.discount_percent}%
-                                </span>
-                              </div>
-                            )}
-                            {/* Price with original strikethrough if discount */}
-                            <div className="font-medium text-accent-400">
-                              {pkg.discount_percent &&
-                              pkg.discount_percent > 0 &&
-                              pkg.base_price_kopeks ? (
-                                <>
-                                  <span className="mr-1 text-sm text-dark-500 line-through">
-                                    {formatPrice(pkg.base_price_kopeks)}
-                                  </span>
-                                  {formatPrice(pkg.price_kopeks)}
-                                </>
-                              ) : (
-                                formatPrice(pkg.price_kopeks)
-                              )}
-                            </div>
-                          </button>
-                        ))}
-                      </div>
-
-                      {selectedTrafficPackage !== null &&
-                        (() => {
-                          const selectedPkg = trafficPackages.find(
-                            (p) => p.gb === selectedTrafficPackage,
-                          );
-                          const hasEnoughBalance =
-                            !selectedPkg ||
-                            !purchaseOptions ||
-                            selectedPkg.price_kopeks <= purchaseOptions.balance_kopeks;
-                          const missingAmount =
-                            selectedPkg && purchaseOptions
-                              ? selectedPkg.price_kopeks - purchaseOptions.balance_kopeks
-                              : 0;
-
-                          return (
-                            <>
-                              {!hasEnoughBalance && missingAmount > 0 && (
-                                <InsufficientBalancePrompt
-                                  missingAmountKopeks={missingAmount}
-                                  compact
-                                  className="mb-3"
-                                  onBeforeTopUp={async () => {
-                                    await subscriptionApi.saveTrafficCart(selectedTrafficPackage);
-                                  }}
-                                />
-                              )}
-                              <button
-                                onClick={() =>
-                                  trafficPurchaseMutation.mutate(selectedTrafficPackage)
-                                }
-                                disabled={trafficPurchaseMutation.isPending || !hasEnoughBalance}
-                                className="btn-primary w-full py-3"
-                              >
-                                {trafficPurchaseMutation.isPending ? (
-                                  <span className="flex items-center justify-center gap-2">
-                                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                                  </span>
-                                ) : selectedPkg?.is_unlimited ? (
-                                  t('subscription.additionalOptions.buyUnlimited')
-                                ) : (
-                                  t('subscription.additionalOptions.buyTrafficGb', {
-                                    gb: selectedTrafficPackage,
-                                  })
-                                )}
-                              </button>
-                            </>
-                          );
-                        })()}
-
-                      {trafficPurchaseMutation.isError && (
-                        <div className="text-center text-sm text-error-400">
-                          {getErrorMessage(trafficPurchaseMutation.error)}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Server Management - only in classic mode */}
-          {!isTariffsMode && (
-            <div className="mt-4">
-              {!showServerManagement ? (
-                <button
-                  onClick={() => setShowServerManagement(true)}
-                  className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
-                >
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <div className="font-medium text-dark-100">
-                        {t('subscription.additionalOptions.manageServers')}
-                      </div>
-                      <div className="mt-1 text-sm text-dark-400">
-                        {t('subscription.servers', { count: subscription.servers?.length || 0 })}
-                      </div>
-                    </div>
-                    <svg
-                      className="h-5 w-5 text-dark-400"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      strokeWidth={2}
-                    >
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-                    </svg>
-                  </div>
-                </button>
-              ) : (
-                <div
-                  className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
-                >
-                  <div className="mb-4 flex items-center justify-between">
-                    <h3 className="font-medium text-dark-100">
-                      {t('subscription.additionalOptions.manageServersTitle')}
-                    </h3>
-                    <button
-                      onClick={() => {
-                        setShowServerManagement(false);
-                        setSelectedServersToUpdate([]);
-                      }}
-                      className="text-sm text-dark-400 hover:text-dark-200"
-                    >
-                      ✕
-                    </button>
-                  </div>
-
-                  {countriesLoading ? (
-                    <div className="flex items-center justify-center py-8">
-                      <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
-                    </div>
-                  ) : countriesData && countriesData.countries.length > 0 ? (
-                    <div className="space-y-4">
-                      <div
-                        className={`rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
-                      >
-                        {t('subscription.serverManagement.statusLegend')}
-                      </div>
-
-                      {countriesData.discount_percent > 0 && (
-                        <div className="rounded-lg border border-success-500/30 bg-success-500/10 p-2 text-xs text-success-400">
-                          🎁{' '}
-                          {t('subscription.serverManagement.discountBanner', {
-                            percent: countriesData.discount_percent,
-                          })}
-                        </div>
-                      )}
-
-                      <div className="max-h-64 space-y-2 overflow-y-auto">
-                        {countriesData.countries
-                          .filter((country) => country.is_available || country.is_connected)
-                          .map((country) => {
-                            const isCurrentlyConnected = country.is_connected;
-                            const isSelected = selectedServersToUpdate.includes(country.uuid);
-                            const willBeAdded = !isCurrentlyConnected && isSelected;
-                            const willBeRemoved = isCurrentlyConnected && !isSelected;
-
-                            return (
-                              <button
-                                key={country.uuid}
-                                onClick={() => {
-                                  if (isSelected) {
-                                    setSelectedServersToUpdate((prev) =>
-                                      prev.filter((u) => u !== country.uuid),
-                                    );
-                                  } else {
-                                    setSelectedServersToUpdate((prev) => [...prev, country.uuid]);
-                                  }
-                                }}
-                                disabled={!country.is_available && !isCurrentlyConnected}
-                                className={`flex w-full items-center justify-between rounded-xl border p-3 text-left transition-all ${
-                                  isSelected
-                                    ? willBeAdded
-                                      ? 'border-success-500 bg-success-500/10'
-                                      : 'border-accent-500 bg-accent-500/10'
-                                    : willBeRemoved
-                                      ? 'border-error-500/50 bg-error-500/5'
-                                      : isDark
-                                        ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
-                                        : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
-                                } ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
-                              >
-                                <div className="flex items-center gap-3">
-                                  <span className="text-lg">
-                                    {willBeAdded
-                                      ? '➕'
-                                      : willBeRemoved
-                                        ? '➖'
-                                        : isSelected
-                                          ? '✅'
-                                          : '⚪'}
-                                  </span>
-                                  <div>
-                                    <div className="flex items-center gap-2 font-medium text-dark-100">
-                                      {country.name}
-                                      {country.has_discount && !isCurrentlyConnected && (
-                                        <span className="rounded bg-success-500/20 px-1.5 py-0.5 text-xs text-success-400">
-                                          -{country.discount_percent}%
-                                        </span>
-                                      )}
-                                    </div>
-                                    {willBeAdded && (
-                                      <div className="text-xs text-success-400">
-                                        +{formatPrice(country.price_kopeks)}{' '}
-                                        {t('subscription.serverManagement.forDays', {
-                                          days: countriesData.days_left,
-                                        })}
-                                        {country.has_discount && (
-                                          <span className="ml-1 text-dark-500 line-through">
-                                            {formatPrice(
-                                              Math.round(
-                                                (country.base_price_kopeks *
-                                                  countriesData.days_left) /
-                                                  30,
-                                              ),
-                                            )}
-                                          </span>
-                                        )}
-                                      </div>
-                                    )}
-                                    {!willBeAdded && !isCurrentlyConnected && (
-                                      <div className="text-xs text-dark-500">
-                                        {formatPrice(country.price_per_month_kopeks)}
-                                        {t('subscription.serverManagement.perMonth')}
-                                        {country.has_discount && (
-                                          <span className="ml-1 text-dark-600 line-through">
-                                            {formatPrice(country.base_price_kopeks)}
-                                          </span>
-                                        )}
-                                      </div>
-                                    )}
-                                    {!country.is_available && !isCurrentlyConnected && (
-                                      <div className="text-xs text-dark-500">
-                                        {t('subscription.serverManagement.unavailable')}
-                                      </div>
-                                    )}
-                                  </div>
-                                </div>
-                                {country.country_code && (
-                                  <span className="text-xl">
-                                    {getFlagEmoji(country.country_code)}
-                                  </span>
-                                )}
-                              </button>
-                            );
-                          })}
-                      </div>
-
-                      {(() => {
-                        const currentConnected = countriesData.countries
-                          .filter((c) => c.is_connected)
-                          .map((c) => c.uuid);
-                        const added = selectedServersToUpdate.filter(
-                          (u) => !currentConnected.includes(u),
-                        );
-                        const removed = currentConnected.filter(
-                          (u) => !selectedServersToUpdate.includes(u),
-                        );
-                        const hasChanges = added.length > 0 || removed.length > 0;
-
-                        // Calculate cost for added servers
-                        const addedServers = countriesData.countries.filter((c) =>
-                          added.includes(c.uuid),
-                        );
-                        const totalCost = addedServers.reduce((sum, s) => sum + s.price_kopeks, 0);
-                        const hasEnoughBalance =
-                          !purchaseOptions || totalCost <= purchaseOptions.balance_kopeks;
-                        const missingAmount = purchaseOptions
-                          ? totalCost - purchaseOptions.balance_kopeks
-                          : 0;
-
-                        return hasChanges ? (
-                          <div
-                            className={`space-y-3 border-t pt-3 ${isDark ? 'border-dark-700/50' : 'border-champagne-300/60'}`}
-                          >
-                            {added.length > 0 && (
-                              <div className="text-sm">
-                                <span className="text-success-400">
-                                  {t('subscription.serverManagement.toAdd')}
-                                </span>{' '}
-                                <span className="text-dark-300">
-                                  {addedServers.map((s) => s.name).join(', ')}
-                                </span>
-                              </div>
-                            )}
-                            {removed.length > 0 && (
-                              <div className="text-sm">
-                                <span className="text-error-400">
-                                  {t('subscription.serverManagement.toDisconnect')}
-                                </span>{' '}
-                                <span className="text-dark-300">
-                                  {countriesData.countries
-                                    .filter((c) => removed.includes(c.uuid))
-                                    .map((s) => s.name)
-                                    .join(', ')}
-                                </span>
-                              </div>
-                            )}
-                            {totalCost > 0 && (
-                              <div className="text-center">
-                                <div className="text-sm text-dark-400">
-                                  {t('subscription.serverManagement.paymentProrated')}
-                                </div>
-                                <div className="text-xl font-bold text-accent-400">
-                                  {formatPrice(totalCost)}
-                                </div>
-                              </div>
-                            )}
-
-                            {totalCost > 0 && !hasEnoughBalance && missingAmount > 0 && (
-                              <InsufficientBalancePrompt
-                                missingAmountKopeks={missingAmount}
-                                compact
-                              />
-                            )}
-
-                            <button
-                              onClick={() =>
-                                updateCountriesMutation.mutate(selectedServersToUpdate)
-                              }
-                              disabled={
-                                updateCountriesMutation.isPending ||
-                                selectedServersToUpdate.length === 0 ||
-                                (totalCost > 0 && !hasEnoughBalance)
-                              }
-                              className="btn-primary w-full py-3"
-                            >
-                              {updateCountriesMutation.isPending ? (
-                                <span className="flex items-center justify-center gap-2">
-                                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                                </span>
-                              ) : (
-                                t('subscription.serverManagement.applyChanges')
-                              )}
-                            </button>
-                          </div>
-                        ) : (
-                          <div className="py-2 text-center text-sm text-dark-500">
-                            {t('subscription.serverManagement.selectServersHint')}
-                          </div>
-                        );
-                      })()}
-
-                      {updateCountriesMutation.isError && (
-                        <div className="text-center text-sm text-error-400">
-                          {getErrorMessage(updateCountriesMutation.error)}
-                        </div>
-                      )}
-                    </div>
-                  ) : (
-                    <div className="py-4 text-center text-sm text-dark-400">
-                      {t('subscription.serverManagement.noServersAvailable')}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      )}
+        )}
 
       {/* My Devices Section */}
       {subscription && (
@@ -1987,8 +2008,9 @@ export default function Subscription() {
           ) : devicesData && devicesData.devices.length > 0 ? (
             <div className="space-y-2">
               <div className="mb-2 font-mono text-[11px] text-dark-50/30">
-                {devicesData.total} /{' '}
-                {t('subscription.devices', { count: devicesData.device_limit })}
+                {devicesData.device_limit === 0
+                  ? `${devicesData.total} · ∞`
+                  : `${devicesData.total} / ${t('subscription.devices', { count: devicesData.device_limit })}`}
               </div>
               {devicesData.devices.map((device) => (
                 <div
diff --git a/src/pages/SubscriptionPurchase.tsx b/src/pages/SubscriptionPurchase.tsx
index 040a26e..f7b99d5 100644
--- a/src/pages/SubscriptionPurchase.tsx
+++ b/src/pages/SubscriptionPurchase.tsx
@@ -772,7 +772,9 @@ export default function SubscriptionPurchase() {
                               />
                             </svg>
                             <span className="text-dark-300">
-                              {t('subscription.devices', { count: tariff.device_limit })}
+                              {tariff.device_limit === 0
+                                ? '∞'
+                                : t('subscription.devices', { count: tariff.device_limit })}
                             </span>
                           </div>
                           {tariff.traffic_reset_mode &&
@@ -959,7 +961,7 @@ export default function SubscriptionPurchase() {
                     <div>
                       <span className="text-dark-500">{t('subscription.devices')}:</span>
                       <span className="ml-2 text-dark-200">
-                        {selectedTariff.device_limit}
+                        {selectedTariff.device_limit === 0 ? '∞' : selectedTariff.device_limit}
                         {selectedTariff.extra_devices_count > 0 && (
                           <span className="ml-1 text-xs text-accent-400">
                             (+{selectedTariff.extra_devices_count})

From 3cea48235f373412071afbb7d811a2306ad15b78 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 07:23:11 +0300
Subject: [PATCH 02/29] =?UTF-8?q?fix:=20=D0=B1=D0=B5=D0=B7=D0=BE=D0=BF?=
 =?UTF-8?q?=D0=B0=D1=81=D0=BD=D0=BE=D1=81=D1=82=D1=8C=20=D0=B8=20UX=20?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B4=D0=B8=D0=BD=D0=B3=D0=BE=D0=B2=20?=
 =?UTF-8?q?=E2=80=94=2016=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CRITICAL: усиленная CSS-санитизация (escape-последовательности, at-rules)
- CRITICAL: очистка setTimeout при unmount
- HIGH: useMutation для создания покупки (вместо ручного fetch)
- HIGH: DOMPurify + rel="noopener noreferrer" на ссылках
- HIGH: ErrorBoundary для публичных страниц покупки
- MEDIUM: стабильные UUID для DnD элементов
- MEDIUM: race condition в delete timeout
- MEDIUM: клиентская валидация формы лендинга
- MEDIUM: staleTime для админ-запросов
- MEDIUM: общая утилита getApiErrorMessage
- MEDIUM: уведомление о таймауте поллинга
- LOW: ARIA роли для radio-карточек и форм
- LOW: дедупликация иконок в LandingIcons.tsx
- LOW: cn() вместо template literals
---
 src/App.tsx                           |  17 ++-
 src/components/icons/LandingIcons.tsx |  69 +++++++++++
 src/locales/en.json                   |  11 +-
 src/locales/fa.json                   |  11 +-
 src/locales/ru.json                   |  11 +-
 src/locales/zh.json                   |  11 +-
 src/pages/AdminLandingEditor.tsx      | 165 +++++++++++++-------------
 src/pages/AdminLandings.tsx           |  78 ++++--------
 src/pages/PurchaseSuccess.tsx         |  74 +++++++++++-
 src/pages/QuickPurchase.tsx           | 151 ++++++++++++++---------
 src/utils/api-error.ts                |   8 ++
 11 files changed, 389 insertions(+), 217 deletions(-)
 create mode 100644 src/components/icons/LandingIcons.tsx
 create mode 100644 src/utils/api-error.ts

diff --git a/src/App.tsx b/src/App.tsx
index 404dc99..7b70b76 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import {
   ChannelSubscriptionScreen,
   BlacklistedScreen,
 } from './components/blocking';
+import { ErrorBoundary } from './components/ErrorBoundary';
 import { PermissionRoute } from '@/components/auth/PermissionRoute';
 import { saveReturnUrl } from './utils/token';
 import { useAnalyticsCounters } from './hooks/useAnalyticsCounters';
@@ -201,17 +202,21 @@ function App() {
         <Route
           path="/buy/success/:token"
           element={
-            <LazyPage>
-              <PurchaseSuccess />
-            </LazyPage>
+            <ErrorBoundary level="app">
+              <LazyPage>
+                <PurchaseSuccess />
+              </LazyPage>
+            </ErrorBoundary>
           }
         />
         <Route
           path="/buy/:slug"
           element={
-            <LazyPage>
-              <QuickPurchase />
-            </LazyPage>
+            <ErrorBoundary level="app">
+              <LazyPage>
+                <QuickPurchase />
+              </LazyPage>
+            </ErrorBoundary>
           }
         />
 
diff --git a/src/components/icons/LandingIcons.tsx b/src/components/icons/LandingIcons.tsx
new file mode 100644
index 0000000..378d3e4
--- /dev/null
+++ b/src/components/icons/LandingIcons.tsx
@@ -0,0 +1,69 @@
+import { cn } from '../../lib/utils';
+
+interface IconProps {
+  className?: string;
+}
+
+export function BackIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={cn('h-5 w-5 text-dark-400', className)}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+    </svg>
+  );
+}
+
+export function PlusIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={cn('h-4 w-4', className)}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </svg>
+  );
+}
+
+export function TrashIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={cn('h-4 w-4', className)}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+      />
+    </svg>
+  );
+}
+
+export function GripIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={cn('h-4 w-4', className)}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+      />
+    </svg>
+  );
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index ec55915..8922cc4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3184,7 +3184,11 @@
       "general": "General",
       "content": "Content",
       "save": "Save",
-      "back": "Back"
+      "back": "Back",
+      "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
+      "titleRequired": "Title is required",
+      "noTariffs": "Select at least one tariff",
+      "noPaymentMethods": "Add at least one payment method"
     }
   },
   "adminUpdates": {
@@ -3950,6 +3954,9 @@
     "pay": "Pay",
     "choosePeriod": "Choose period",
     "copied": "Copied!",
-    "copyLink": "Copy link"
+    "copyLink": "Copy link",
+    "giftToggleLabel": "Purchase type",
+    "pollTimedOut": "Taking longer than expected",
+    "pollTimedOutDesc": "Payment processing is taking longer than usual. You can try checking again."
   }
 }
diff --git a/src/locales/fa.json b/src/locales/fa.json
index bfe612a..82cf1ee 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -2910,7 +2910,11 @@
       "general": "عمومی",
       "content": "محتوا",
       "save": "ذخیره",
-      "back": "بازگشت"
+      "back": "بازگشت",
+      "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
+      "titleRequired": "Title is required",
+      "noTariffs": "Select at least one tariff",
+      "noPaymentMethods": "Add at least one payment method"
     }
   },
   "adminUpdates": {
@@ -3501,6 +3505,9 @@
     "pay": "پرداخت",
     "choosePeriod": "انتخاب دوره",
     "copied": "کپی شد!",
-    "copyLink": "کپی لینک"
+    "copyLink": "کپی لینک",
+    "giftToggleLabel": "Purchase type",
+    "pollTimedOut": "Taking longer than expected",
+    "pollTimedOutDesc": "Payment processing is taking longer than usual. You can try checking again."
   }
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
index feeda29..250e706 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -3739,7 +3739,11 @@
       "general": "Основное",
       "content": "Контент",
       "save": "Сохранить",
-      "back": "Назад"
+      "back": "Назад",
+      "invalidSlug": "Slug может содержать только строчные буквы, цифры и дефисы",
+      "titleRequired": "Заголовок обязателен",
+      "noTariffs": "Выберите хотя бы один тариф",
+      "noPaymentMethods": "Добавьте хотя бы один способ оплаты"
     }
   },
   "adminUpdates": {
@@ -4513,6 +4517,9 @@
     "pay": "Оплатить",
     "choosePeriod": "Выберите период",
     "copied": "Скопировано!",
-    "copyLink": "Скопировать ссылку"
+    "copyLink": "Скопировать ссылку",
+    "giftToggleLabel": "Тип покупки",
+    "pollTimedOut": "Занимает больше времени, чем ожидалось",
+    "pollTimedOutDesc": "Обработка платежа занимает больше времени, чем обычно. Вы можете попробовать проверить ещё раз."
   }
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 7665974..ac80a4d 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -2909,7 +2909,11 @@
       "general": "基本设置",
       "content": "内容",
       "save": "保存",
-      "back": "返回"
+      "back": "返回",
+      "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
+      "titleRequired": "Title is required",
+      "noTariffs": "Select at least one tariff",
+      "noPaymentMethods": "Add at least one payment method"
     }
   },
   "adminUpdates": {
@@ -3500,6 +3504,9 @@
     "pay": "支付",
     "choosePeriod": "选择时长",
     "copied": "已复制！",
-    "copyLink": "复制链接"
+    "copyLink": "复制链接",
+    "giftToggleLabel": "Purchase type",
+    "pollTimedOut": "Taking longer than expected",
+    "pollTimedOutDesc": "Payment processing is taking longer than usual. You can try checking again."
   }
 }
diff --git a/src/pages/AdminLandingEditor.tsx b/src/pages/AdminLandingEditor.tsx
index a6cf745..a714087 100644
--- a/src/pages/AdminLandingEditor.tsx
+++ b/src/pages/AdminLandingEditor.tsx
@@ -12,6 +12,8 @@ import { tariffsApi, TariffListItem } from '../api/tariffs';
 import { Toggle } from '../components/admin';
 import { useNotify } from '@/platform';
 import { usePlatform } from '../platform/hooks/usePlatform';
+import { getApiErrorMessage } from '../utils/api-error';
+import { BackIcon, PlusIcon, TrashIcon, GripIcon } from '../components/icons/LandingIcons';
 import {
   DndContext,
   KeyboardSensor,
@@ -28,49 +30,15 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { cn } from '../lib/utils';
 
-// Icons
-const BackIcon = () => (
-  <svg
-    className="h-5 w-5 text-dark-400"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth={2}
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-  </svg>
-);
-
-const PlusIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-  </svg>
-);
-
-const TrashIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-    />
-  </svg>
-);
-
-const GripIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-    />
-  </svg>
-);
+// Types with stable IDs for DnD
+type FeatureWithId = LandingFeature & { _id: string };
+type MethodWithId = LandingPaymentMethod & { _id: string };
 
 const ChevronDownIcon = ({ open }: { open: boolean }) => (
   <svg
-    className={`h-5 w-5 transition-transform ${open ? 'rotate-180' : ''}`}
+    className={cn('h-5 w-5 transition-transform', open && 'rotate-180')}
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -83,23 +51,16 @@ const ChevronDownIcon = ({ open }: { open: boolean }) => (
 // ============ Sortable Feature Item ============
 
 interface SortableFeatureProps {
-  feature: LandingFeature;
-  featureId: string;
+  feature: FeatureWithId;
   index: number;
   onUpdate: (index: number, field: keyof LandingFeature, value: string) => void;
   onRemove: (index: number) => void;
 }
 
-function SortableFeatureItem({
-  feature,
-  featureId,
-  index,
-  onUpdate,
-  onRemove,
-}: SortableFeatureProps) {
+function SortableFeatureItem({ feature, index, onUpdate, onRemove }: SortableFeatureProps) {
   const { t } = useTranslation();
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: featureId,
+    id: feature._id,
   });
 
   const style: React.CSSProperties = {
@@ -113,9 +74,10 @@ function SortableFeatureItem({
     <div
       ref={setNodeRef}
       style={style}
-      className={`flex items-start gap-2 rounded-lg border p-3 ${
-        isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50'
-      }`}
+      className={cn(
+        'flex items-start gap-2 rounded-lg border p-3',
+        isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50',
+      )}
     >
       <button
         {...attributes}
@@ -162,17 +124,16 @@ function SortableFeatureItem({
 // ============ Sortable Payment Method ============
 
 interface SortableMethodProps {
-  method: LandingPaymentMethod;
-  methodId: string;
+  method: MethodWithId;
   index: number;
   onUpdate: (index: number, field: keyof LandingPaymentMethod, value: string) => void;
   onRemove: (index: number) => void;
 }
 
-function SortableMethodItem({ method, methodId, index, onUpdate, onRemove }: SortableMethodProps) {
+function SortableMethodItem({ method, index, onUpdate, onRemove }: SortableMethodProps) {
   const { t } = useTranslation();
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: methodId,
+    id: method._id,
   });
 
   const style: React.CSSProperties = {
@@ -186,9 +147,10 @@ function SortableMethodItem({ method, methodId, index, onUpdate, onRemove }: Sor
     <div
       ref={setNodeRef}
       style={style}
-      className={`flex items-start gap-2 rounded-lg border p-3 ${
-        isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50'
-      }`}
+      className={cn(
+        'flex items-start gap-2 rounded-lg border p-3',
+        isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50',
+      )}
     >
       <button
         {...attributes}
@@ -297,10 +259,10 @@ export default function AdminLandingEditor() {
   const [isActive, setIsActive] = useState(true);
   const [metaTitle, setMetaTitle] = useState('');
   const [metaDescription, setMetaDescription] = useState('');
-  const [features, setFeatures] = useState<LandingFeature[]>([]);
+  const [features, setFeatures] = useState<FeatureWithId[]>([]);
   const [selectedTariffIds, setSelectedTariffIds] = useState<number[]>([]);
   const [allowedPeriods, setAllowedPeriods] = useState<Record<string, number[]>>({});
-  const [paymentMethods, setPaymentMethods] = useState<LandingPaymentMethod[]>([]);
+  const [paymentMethods, setPaymentMethods] = useState<MethodWithId[]>([]);
   const [giftEnabled, setGiftEnabled] = useState(false);
   const [footerText, setFooterText] = useState('');
   const [customCss, setCustomCss] = useState('');
@@ -315,6 +277,7 @@ export default function AdminLandingEditor() {
   const { data: tariffsData } = useQuery({
     queryKey: ['admin-tariffs'],
     queryFn: () => tariffsApi.getTariffs(true),
+    staleTime: 30_000,
   });
 
   const allTariffs = tariffsData?.tariffs ?? [];
@@ -347,10 +310,12 @@ export default function AdminLandingEditor() {
     setIsActive(landingData.is_active);
     setMetaTitle(landingData.meta_title ?? '');
     setMetaDescription(landingData.meta_description ?? '');
-    setFeatures(landingData.features ?? []);
+    setFeatures((landingData.features ?? []).map((f) => ({ ...f, _id: crypto.randomUUID() })));
     setSelectedTariffIds(landingData.allowed_tariff_ids ?? []);
     setAllowedPeriods(landingData.allowed_periods ?? {});
-    setPaymentMethods(landingData.payment_methods ?? []);
+    setPaymentMethods(
+      (landingData.payment_methods ?? []).map((m) => ({ ...m, _id: crypto.randomUUID() })),
+    );
     setGiftEnabled(landingData.gift_enabled);
     setFooterText(landingData.footer_text ?? '');
     setCustomCss(landingData.custom_css ?? '');
@@ -365,9 +330,7 @@ export default function AdminLandingEditor() {
       navigate('/admin/landings');
     },
     onError: (err: unknown) => {
-      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
-        ?.detail;
-      notify.error(message || t('common.error'));
+      notify.error(getApiErrorMessage(err, t('common.error')));
     },
   });
 
@@ -382,23 +345,48 @@ export default function AdminLandingEditor() {
       navigate('/admin/landings');
     },
     onError: (err: unknown) => {
-      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
-        ?.detail;
-      notify.error(message || t('common.error'));
+      notify.error(getApiErrorMessage(err, t('common.error')));
     },
   });
 
   const handleSubmit = () => {
+    // Client-side validation
+    if (!isEdit && !/^[a-z0-9-]+$/.test(slug)) {
+      notify.error(
+        t(
+          'admin.landings.invalidSlug',
+          'Slug can only contain lowercase letters, numbers, and hyphens',
+        ),
+      );
+      return;
+    }
+    if (!title.trim()) {
+      notify.error(t('admin.landings.titleRequired', 'Title is required'));
+      return;
+    }
+    if (selectedTariffIds.length === 0) {
+      notify.error(t('admin.landings.noTariffs', 'Select at least one tariff'));
+      return;
+    }
+    if (paymentMethods.length === 0) {
+      notify.error(t('admin.landings.noPaymentMethods', 'Add at least one payment method'));
+      return;
+    }
+
+    // Strip _id before sending to API
+    const cleanFeatures = features.map(({ _id: _, ...rest }) => rest);
+    const cleanMethods = paymentMethods.map(({ _id: _, ...rest }) => rest);
+
     const data: LandingCreateRequest = {
       slug,
       title,
       subtitle: subtitle || undefined,
       is_active: isActive,
-      features,
+      features: cleanFeatures,
       footer_text: footerText || undefined,
       allowed_tariff_ids: selectedTariffIds,
       allowed_periods: allowedPeriods,
-      payment_methods: paymentMethods,
+      payment_methods: cleanMethods,
       gift_enabled: giftEnabled,
       custom_css: customCss || undefined,
       meta_title: metaTitle || undefined,
@@ -416,7 +404,10 @@ export default function AdminLandingEditor() {
 
   // ---- Features helpers ----
   const addFeature = () => {
-    setFeatures((prev) => [...prev, { icon: '', title: '', description: '' }]);
+    setFeatures((prev) => [
+      ...prev,
+      { _id: crypto.randomUUID(), icon: '', title: '', description: '' },
+    ]);
   };
 
   const updateFeature = (index: number, field: keyof LandingFeature, value: string) => {
@@ -431,8 +422,8 @@ export default function AdminLandingEditor() {
     const { active, over } = event;
     if (over && active.id !== over.id) {
       setFeatures((prev) => {
-        const oldIndex = prev.findIndex((_, i) => `feature-${i}` === active.id);
-        const newIndex = prev.findIndex((_, i) => `feature-${i}` === over.id);
+        const oldIndex = prev.findIndex((f) => f._id === active.id);
+        const newIndex = prev.findIndex((f) => f._id === over.id);
         if (oldIndex === -1 || newIndex === -1) return prev;
         return arrayMove(prev, oldIndex, newIndex);
       });
@@ -444,6 +435,7 @@ export default function AdminLandingEditor() {
     setPaymentMethods((prev) => [
       ...prev,
       {
+        _id: crypto.randomUUID(),
         method_id: '',
         display_name: '',
         description: '',
@@ -465,8 +457,8 @@ export default function AdminLandingEditor() {
     const { active, over } = event;
     if (over && active.id !== over.id) {
       setPaymentMethods((prev) => {
-        const oldIndex = prev.findIndex((_, i) => `method-${i}` === active.id);
-        const newIndex = prev.findIndex((_, i) => `method-${i}` === over.id);
+        const oldIndex = prev.findIndex((m) => m._id === active.id);
+        const newIndex = prev.findIndex((m) => m._id === over.id);
         if (oldIndex === -1 || newIndex === -1) return prev;
         return arrayMove(prev, oldIndex, newIndex);
       });
@@ -492,8 +484,8 @@ export default function AdminLandingEditor() {
   };
 
   // Feature IDs for DnD
-  const featureIds = features.map((_, i) => `feature-${i}`);
-  const methodIds = paymentMethods.map((_, i) => `method-${i}`);
+  const featureIds = features.map((f) => f._id);
+  const methodIds = paymentMethods.map((m) => m._id);
 
   return (
     <div className="animate-fade-in">
@@ -541,8 +533,11 @@ export default function AdminLandingEditor() {
         >
           <div className="space-y-4">
             <div>
-              <label className="mb-1 block text-sm text-dark-400">{t('admin.landings.slug')}</label>
+              <label htmlFor="landing-slug" className="mb-1 block text-sm text-dark-400">
+                {t('admin.landings.slug')}
+              </label>
               <input
+                id="landing-slug"
                 type="text"
                 value={slug}
                 onChange={(e) => setSlug(e.target.value)}
@@ -554,10 +549,11 @@ export default function AdminLandingEditor() {
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-dark-400">
+              <label htmlFor="landing-title" className="mb-1 block text-sm text-dark-400">
                 {t('admin.landings.pageTitle')}
               </label>
               <input
+                id="landing-title"
                 type="text"
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
@@ -566,10 +562,11 @@ export default function AdminLandingEditor() {
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-dark-400">
+              <label htmlFor="landing-subtitle" className="mb-1 block text-sm text-dark-400">
                 {t('admin.landings.subtitle')}
               </label>
               <textarea
+                id="landing-subtitle"
                 value={subtitle}
                 onChange={(e) => setSubtitle(e.target.value)}
                 rows={2}
@@ -624,9 +621,8 @@ export default function AdminLandingEditor() {
               <SortableContext items={featureIds} strategy={verticalListSortingStrategy}>
                 {features.map((feature, index) => (
                   <SortableFeatureItem
-                    key={featureIds[index]}
+                    key={feature._id}
                     feature={feature}
-                    featureId={featureIds[index]}
                     index={index}
                     onUpdate={updateFeature}
                     onRemove={removeFeature}
@@ -703,9 +699,8 @@ export default function AdminLandingEditor() {
               <SortableContext items={methodIds} strategy={verticalListSortingStrategy}>
                 {paymentMethods.map((method, index) => (
                   <SortableMethodItem
-                    key={methodIds[index]}
+                    key={method._id}
                     method={method}
-                    methodId={methodIds[index]}
                     index={index}
                     onUpdate={updateMethod}
                     onRemove={removeMethod}
diff --git a/src/pages/AdminLandings.tsx b/src/pages/AdminLandings.tsx
index 49e5494..e65ff2c 100644
--- a/src/pages/AdminLandings.tsx
+++ b/src/pages/AdminLandings.tsx
@@ -5,7 +5,10 @@ import { useTranslation } from 'react-i18next';
 import { adminLandingsApi, LandingListItem } from '../api/landings';
 import { useNotify } from '@/platform';
 import { copyToClipboard } from '../utils/clipboard';
+import { getApiErrorMessage } from '../utils/api-error';
 import { usePlatform } from '../platform/hooks/usePlatform';
+import { cn } from '../lib/utils';
+import { BackIcon, PlusIcon, TrashIcon, GripIcon } from '../components/icons/LandingIcons';
 import {
   DndContext,
   KeyboardSensor,
@@ -23,13 +26,7 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
-// Icons
-const PlusIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-  </svg>
-);
-
+// Icons (non-shared, page-specific)
 const EditIcon = () => (
   <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path
@@ -40,16 +37,6 @@ const EditIcon = () => (
   </svg>
 );
 
-const TrashIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-    />
-  </svg>
-);
-
 const CheckIcon = () => (
   <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
@@ -72,28 +59,6 @@ const GiftIcon = () => (
   </svg>
 );
 
-const BackIcon = () => (
-  <svg
-    className="h-5 w-5 text-dark-400"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth={2}
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-  </svg>
-);
-
-const GripIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-    />
-  </svg>
-);
-
 const SaveIcon = () => (
   <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path
@@ -149,13 +114,14 @@ function SortableLandingCard({
     <div
       ref={setNodeRef}
       style={style}
-      className={`rounded-xl border bg-dark-800 p-4 transition-colors ${
+      className={cn(
+        'rounded-xl border bg-dark-800 p-4 transition-colors',
         isDragging
           ? 'border-accent-500/50 shadow-xl shadow-accent-500/20'
           : landing.is_active
             ? 'border-dark-700'
-            : 'border-dark-700/50 opacity-60'
-      }`}
+            : 'border-dark-700/50 opacity-60',
+      )}
     >
       <div className="flex items-start gap-3">
         {/* Drag handle */}
@@ -209,11 +175,12 @@ function SortableLandingCard({
 
           <button
             onClick={onToggle}
-            className={`rounded-lg p-2 transition-colors ${
+            className={cn(
+              'rounded-lg p-2 transition-colors',
               landing.is_active
                 ? 'bg-success-500/20 text-success-400 hover:bg-success-500/30'
-                : 'bg-dark-700 text-dark-400 hover:bg-dark-600'
-            }`}
+                : 'bg-dark-700 text-dark-400 hover:bg-dark-600',
+            )}
             title={landing.is_active ? t('admin.landings.inactive') : t('admin.landings.active')}
           >
             {landing.is_active ? <CheckIcon /> : <XIcon />}
@@ -229,11 +196,12 @@ function SortableLandingCard({
 
           <button
             onClick={onDelete}
-            className={`rounded-lg p-2 transition-colors ${
+            className={cn(
+              'rounded-lg p-2 transition-colors',
               isPendingDelete
                 ? 'bg-error-500/20 text-error-400 ring-1 ring-error-500/30'
-                : 'bg-dark-700 text-dark-300 hover:bg-error-500/20 hover:text-error-400'
-            }`}
+                : 'bg-dark-700 text-dark-300 hover:bg-error-500/20 hover:text-error-400',
+            )}
             title={
               isPendingDelete
                 ? t('admin.landings.deleteConfirm', { title: landing.title })
@@ -276,6 +244,7 @@ export default function AdminLandings() {
   const { data: landingsData, isLoading } = useQuery({
     queryKey: ['admin-landings'],
     queryFn: () => adminLandingsApi.list(),
+    staleTime: 30_000,
   });
 
   // Sync fetched data to local state
@@ -294,9 +263,7 @@ export default function AdminLandings() {
       notify.success(t('admin.landings.orderSaved'));
     },
     onError: (err: unknown) => {
-      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
-        ?.detail;
-      notify.error(message || t('common.error'));
+      notify.error(getApiErrorMessage(err, t('common.error')));
     },
   });
 
@@ -308,9 +275,7 @@ export default function AdminLandings() {
       notify.success(t('admin.landings.deleted'));
     },
     onError: (err: unknown) => {
-      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
-        ?.detail;
-      notify.error(message || t('common.error'));
+      notify.error(getApiErrorMessage(err, t('common.error')));
     },
   });
 
@@ -320,6 +285,7 @@ export default function AdminLandings() {
       setPendingDeleteId(null);
     } else {
       setPendingDeleteId(landing.id);
+      if (deleteTimeoutRef.current) clearTimeout(deleteTimeoutRef.current);
       deleteTimeoutRef.current = setTimeout(
         () => setPendingDeleteId((prev) => (prev === landing.id ? null : prev)),
         3000,
@@ -333,9 +299,7 @@ export default function AdminLandings() {
       queryClient.invalidateQueries({ queryKey: ['admin-landings'] });
     },
     onError: (err: unknown) => {
-      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
-        ?.detail;
-      notify.error(message || t('common.error'));
+      notify.error(getApiErrorMessage(err, t('common.error')));
     },
   });
 
diff --git a/src/pages/PurchaseSuccess.tsx b/src/pages/PurchaseSuccess.tsx
index 6fdf888..bc4ddf1 100644
--- a/src/pages/PurchaseSuccess.tsx
+++ b/src/pages/PurchaseSuccess.tsx
@@ -62,6 +62,13 @@ function SuccessState({
 }) {
   const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
+  const copyTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    return () => {
+      if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current);
+    };
+  }, []);
 
   const handleCopy = useCallback(async () => {
     const url = subscriptionUrl ?? cryptoLink;
@@ -70,7 +77,8 @@ function SuccessState({
     try {
       await copyToClipboard(url);
       setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
+      if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current);
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
     } catch {
       // Clipboard write failed silently
     }
@@ -219,6 +227,52 @@ function FailedState() {
   );
 }
 
+function PollTimedOutState({ onRetry }: { onRetry: () => void }) {
+  const { t } = useTranslation();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      <div className="flex h-20 w-20 items-center justify-center rounded-full bg-dark-800/50">
+        <svg
+          className="h-10 w-10 text-dark-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">
+          {t('landing.pollTimedOut', 'Taking longer than expected')}
+        </h1>
+        <p className="mt-2 text-sm text-dark-400">
+          {t(
+            'landing.pollTimedOutDesc',
+            'Payment processing is taking longer than usual. You can try checking again.',
+          )}
+        </p>
+      </div>
+      <button
+        type="button"
+        onClick={onRetry}
+        className="rounded-xl bg-accent-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-accent-400"
+      >
+        {t('common.retry', 'Retry')}
+      </button>
+    </motion.div>
+  );
+}
+
 // ============================================================
 // Main Component
 // ============================================================
@@ -226,6 +280,7 @@ function FailedState() {
 export default function PurchaseSuccess() {
   const { token } = useParams<{ token: string }>();
   const pollStart = useRef(Date.now());
+  const [pollTimedOut, setPollTimedOut] = useState(false);
 
   // Referrer-Policy: prevent leaking payment token via referer header
   useEffect(() => {
@@ -238,14 +293,19 @@ export default function PurchaseSuccess() {
     };
   }, []);
 
-  const { data: status, isError } = useQuery({
+  const {
+    data: status,
+    isError,
+    refetch,
+  } = useQuery({
     queryKey: ['purchase-status', token],
     queryFn: () => landingApi.getPurchaseStatus(token!),
-    enabled: !!token,
+    enabled: !!token && !pollTimedOut,
     refetchInterval: (query) => {
       const currentStatus = query.state.data?.status;
       if (currentStatus === 'pending' || currentStatus === 'paid') {
         if (Date.now() - pollStart.current > MAX_POLL_MS) {
+          setPollTimedOut(true);
           return false;
         }
         return 3_000;
@@ -255,6 +315,12 @@ export default function PurchaseSuccess() {
     retry: 2,
   });
 
+  const handleRetryPoll = useCallback(() => {
+    pollStart.current = Date.now();
+    setPollTimedOut(false);
+    refetch();
+  }, [refetch]);
+
   const isSuccess = status?.status === 'delivered';
   const isFailed = status?.status === 'failed' || status?.status === 'expired';
 
@@ -274,6 +340,8 @@ export default function PurchaseSuccess() {
           />
         ) : isFailed ? (
           <FailedState />
+        ) : pollTimedOut ? (
+          <PollTimedOutState onRetry={handleRetryPoll} />
         ) : (
           <PendingState />
         )}
diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
index 8c9c5ce..64029d5 100644
--- a/src/pages/QuickPurchase.tsx
+++ b/src/pages/QuickPurchase.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useParams } from 'react-router';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { motion, AnimatePresence } from 'framer-motion';
 import DOMPurify from 'dompurify';
@@ -13,6 +13,7 @@ import type {
   PurchaseRequest,
 } from '../api/landings';
 import { cn } from '../lib/utils';
+import { getApiErrorMessage } from '../utils/api-error';
 
 // ============================================================
 // Helpers
@@ -117,10 +118,15 @@ function GiftToggle({ isGift, onToggle }: { isGift: boolean; onToggle: (v: boole
   const { t } = useTranslation();
 
   return (
-    <div className="flex rounded-xl bg-dark-800/50 p-1">
+    <div
+      role="group"
+      aria-label={t('landing.giftToggleLabel', 'Purchase type')}
+      className="flex rounded-xl bg-dark-800/50 p-1"
+    >
       <button
         type="button"
         onClick={() => onToggle(false)}
+        aria-pressed={!isGift}
         className={cn(
           'flex-1 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200',
           !isGift ? 'bg-dark-700 text-dark-50 shadow-sm' : 'text-dark-400 hover:text-dark-200',
@@ -131,6 +137,7 @@ function GiftToggle({ isGift, onToggle }: { isGift: boolean; onToggle: (v: boole
       <button
         type="button"
         onClick={() => onToggle(true)}
+        aria-pressed={isGift}
         className={cn(
           'flex-1 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200',
           isGift ? 'bg-dark-700 text-dark-50 shadow-sm' : 'text-dark-400 hover:text-dark-200',
@@ -165,10 +172,11 @@ function ContactForm({
     <div className="space-y-4 rounded-2xl border border-dark-800/50 bg-dark-900/50 p-5">
       {/* Main contact */}
       <div>
-        <label className="mb-2 block text-sm font-medium text-dark-200">
+        <label htmlFor="contact-input" className="mb-2 block text-sm font-medium text-dark-200">
           {t('landing.yourContact', 'Your contact')}
         </label>
         <input
+          id="contact-input"
           type="text"
           value={contactValue}
           onChange={(e) => onContactChange(e.target.value)}
@@ -189,10 +197,14 @@ function ContactForm({
             className="space-y-4 overflow-hidden"
           >
             <div className="border-t border-dark-800/50 pt-4">
-              <label className="mb-2 block text-sm font-medium text-dark-200">
+              <label
+                htmlFor="gift-recipient-input"
+                className="mb-2 block text-sm font-medium text-dark-200"
+              >
                 {t('landing.recipientLabel')}
               </label>
               <input
+                id="gift-recipient-input"
                 type="text"
                 value={giftRecipient}
                 onChange={(e) => onGiftRecipientChange(e.target.value)}
@@ -201,10 +213,14 @@ function ContactForm({
               />
             </div>
             <div>
-              <label className="mb-2 block text-sm font-medium text-dark-200">
+              <label
+                htmlFor="gift-message-input"
+                className="mb-2 block text-sm font-medium text-dark-200"
+              >
                 {t('landing.giftMessageLabel')}
               </label>
               <textarea
+                id="gift-message-input"
                 value={giftMessage}
                 onChange={(e) => onGiftMessageChange(e.target.value)}
                 placeholder={t(
@@ -238,6 +254,8 @@ function TariffCard({
   return (
     <button
       type="button"
+      role="radio"
+      aria-checked={isSelected}
       onClick={onSelect}
       className={cn(
         'relative flex w-full flex-col rounded-2xl border p-5 text-left transition-all duration-200',
@@ -334,6 +352,8 @@ function PaymentMethodCard({
   return (
     <button
       type="button"
+      role="radio"
+      aria-checked={isSelected}
       onClick={onSelect}
       className={cn(
         'flex w-full items-center gap-4 rounded-2xl border p-4 text-left transition-all duration-200',
@@ -371,22 +391,22 @@ function PaymentMethodCard({
 }
 
 function SanitizedHtml({ html, className }: { html: string; className?: string }) {
-  const sanitized = useMemo(
-    () =>
-      DOMPurify.sanitize(html, {
-        ALLOWED_TAGS: ['p', 'a', 'strong', 'em', 'b', 'i', 'br', 'span', 'ul', 'ol', 'li', 'div'],
-        ALLOWED_ATTR: ['href', 'target', 'rel', 'class'],
-      }),
-    [html],
-  );
+  const sanitized = useMemo(() => {
+    const clean = DOMPurify.sanitize(html, {
+      ALLOWED_TAGS: ['p', 'a', 'strong', 'em', 'b', 'i', 'br', 'span', 'ul', 'ol', 'li'],
+      ALLOWED_ATTR: ['href', 'target', 'rel'],
+    });
+    // Enforce rel="noopener noreferrer" and target="_blank" on all links
+    const container = document.createElement('div');
+    container.innerHTML = clean;
+    container.querySelectorAll('a').forEach((a) => {
+      a.setAttribute('rel', 'noopener noreferrer');
+      a.setAttribute('target', '_blank');
+    });
+    return container.innerHTML;
+  }, [html]);
 
-  return (
-    <div
-      className={className}
-      // Content is sanitized via DOMPurify above
-      dangerouslySetInnerHTML={{ __html: sanitized }}
-    />
-  );
+  return <div className={className} dangerouslySetInnerHTML={{ __html: sanitized }} />;
 }
 
 function SummaryCard({
@@ -540,6 +560,14 @@ export default function QuickPurchase() {
   const [selectedMethod, setSelectedMethod] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const redirectTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // Cleanup redirect timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (redirectTimeoutRef.current) clearTimeout(redirectTimeoutRef.current);
+    };
+  }, []);
 
   // Auto-select first tariff, period, method on config load
   useEffect(() => {
@@ -584,29 +612,24 @@ export default function QuickPurchase() {
     };
   }, [config?.meta_description]);
 
-  // Inject custom CSS (sanitized: strip JS expressions, imports, and url() with non-data schemes)
+  // Inject custom CSS (sanitized)
   useEffect(() => {
     if (!config?.custom_css) return;
 
     let css = config.custom_css;
-    // Remove @import rules
-    css = css.replace(/@import\b[^;]*;?/gi, '');
-    // Remove expression() (IE)
+    // Strip all at-rules (including @font-face, @import, @charset, @namespace, @keyframes, @media)
+    css = css.replace(/@[a-zA-Z-]+\s*[^{}]*\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}/g, '');
+    css = css.replace(/@[a-zA-Z-]+\s*[^;{}]+;/g, '');
+    // Strip ALL url() including data: URIs
+    css = css.replace(/url\s*\([^)]*\)/gi, 'url(about:blank)');
+    // Strip expression(), behavior, -moz-binding
     css = css.replace(/expression\s*\([^)]*\)/gi, '');
-    // Block all url() except safe data:image/* — prevents data exfiltration via external URLs
-    css = css.replace(
-      /url\s*\(\s*['"]?\s*(?!data:image\/)(.*?)\s*['"]?\s*\)/gi,
-      'url(about:blank)',
-    );
-    // Remove behavior and -moz-binding (IE/Firefox legacy)
-    css = css.replace(/behavior\s*:/gi, '/* blocked */');
-    css = css.replace(/-moz-binding\s*:/gi, '/* blocked */');
-    // Strip @font-face blocks (can load external fonts for tracking)
-    css = css.replace(/@font-face\s*\{[^}]*\}/gi, '');
-    // Strip @charset declarations
-    css = css.replace(/@charset\b[^;]*;?/gi, '');
-    // Strip @namespace declarations
-    css = css.replace(/@namespace\b[^;]*;?/gi, '');
+    css = css.replace(/behavior\s*:[^;]+/gi, '');
+    css = css.replace(/-moz-binding\s*:[^;]+/gi, '');
+    // Strip content property (prevents text injection via ::before/::after)
+    css = css.replace(/content\s*:[^;]+;/gi, '');
+    // Strip CSS escape sequences that could bypass filters
+    css = css.replace(/\\[0-9a-fA-F]{1,6}\s?/g, '');
 
     const style = document.createElement('style');
     style.setAttribute('data-landing-css', 'true');
@@ -650,8 +673,26 @@ export default function QuickPurchase() {
     return true;
   }, [selectedTariffId, selectedPeriodDays, selectedMethod, contactValue, isGift, giftRecipient]);
 
+  // Purchase mutation
+  const purchaseMutation = useMutation({
+    mutationFn: (data: PurchaseRequest) => landingApi.createPurchase(slug!, data),
+    onSuccess: (result) => {
+      window.location.href = result.payment_url;
+      // If redirect blocked (popup blocker etc.), reset after 5s
+      redirectTimeoutRef.current = setTimeout(() => setIsSubmitting(false), 5000);
+    },
+    onError: (err) => {
+      const msg = getApiErrorMessage(
+        err,
+        t('landing.purchaseError', 'Something went wrong. Please try again.'),
+      );
+      setSubmitError(msg);
+      setIsSubmitting(false);
+    },
+  });
+
   // Submit handler
-  const handleSubmit = async () => {
+  const handleSubmit = () => {
     if (!canSubmit || !slug || isSubmitting) return;
 
     setIsSubmitting(true);
@@ -672,19 +713,7 @@ export default function QuickPurchase() {
       data.gift_message = giftMessage.trim() || undefined;
     }
 
-    try {
-      const result = await landingApi.createPurchase(slug, data);
-      window.location.href = result.payment_url;
-      // If redirect blocked (popup blocker etc.), reset after 5s
-      setTimeout(() => setIsSubmitting(false), 5000);
-    } catch (err) {
-      const axiosErr = err as { response?: { data?: { detail?: string } } };
-      const message =
-        axiosErr?.response?.data?.detail ??
-        t('landing.purchaseError', 'Something went wrong. Please try again.');
-      setSubmitError(message);
-      setIsSubmitting(false);
-    }
+    purchaseMutation.mutate(data);
   };
 
   // Loading state
@@ -694,9 +723,7 @@ export default function QuickPurchase() {
 
   // Error state
   if (error || !config) {
-    const errMsg =
-      (error as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
-      t('landing.notFound', 'Landing page not found');
+    const errMsg = getApiErrorMessage(error, t('landing.notFound', 'Landing page not found'));
     return <ErrorState message={errMsg} />;
   }
 
@@ -769,7 +796,11 @@ export default function QuickPurchase() {
                 <h2 className="mb-3 text-sm font-medium uppercase tracking-wider text-dark-400">
                   {t('landing.chooseTariff', 'Choose tariff')}
                 </h2>
-                <div className="grid gap-3 sm:grid-cols-2">
+                <div
+                  role="radiogroup"
+                  aria-label={t('landing.chooseTariff', 'Choose tariff')}
+                  className="grid gap-3 sm:grid-cols-2"
+                >
                   {config.tariffs.map((tariff) => {
                     const period = tariff.periods.find((p) => p.days === selectedPeriodDays);
                     return (
@@ -792,7 +823,11 @@ export default function QuickPurchase() {
                 <h2 className="mb-3 text-sm font-medium uppercase tracking-wider text-dark-400">
                   {t('landing.paymentMethod', 'Payment method')}
                 </h2>
-                <div className="space-y-2">
+                <div
+                  role="radiogroup"
+                  aria-label={t('landing.paymentMethod', 'Payment method')}
+                  className="space-y-2"
+                >
                   {config.payment_methods.map((method) => (
                     <PaymentMethodCard
                       key={method.method_id}
diff --git a/src/utils/api-error.ts b/src/utils/api-error.ts
new file mode 100644
index 0000000..04384e0
--- /dev/null
+++ b/src/utils/api-error.ts
@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+export function getApiErrorMessage(err: unknown, fallback: string): string {
+  if (axios.isAxiosError(err)) {
+    return err.response?.data?.detail ?? fallback;
+  }
+  return fallback;
+}

From e01c9f51439fe74bbf74d7d40a7f7027252dbd17 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 07:33:19 +0300
Subject: [PATCH 03/29] =?UTF-8?q?fix:=20=D0=B0=D0=B4=D0=BC=D0=B8=D0=BD-?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=BE=D1=80=20=E2=80=94=20?=
 =?UTF-8?q?=D1=81=D0=B8=D1=81=D1=82=D0=B5=D0=BC=D0=BD=D1=8B=D0=B5=20=D0=BC?=
 =?UTF-8?q?=D0=B5=D1=82=D0=BE=D0=B4=D1=8B=20=D0=BE=D0=BF=D0=BB=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8B,=20=D1=80=D0=B5=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B8=D0=BE=D0=B4=D1=8B=20=D1=82=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B8=D1=84=D0=BE=D0=B2,=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82?=
 =?UTF-8?q?=D1=80=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BD=D0=B0=20=D0=BF=D1=83?=
 =?UTF-8?q?=D0=B1=D0=BB=D0=B8=D1=87=D0=BD=D0=BE=D0=B9=20=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=86=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Способы оплаты: загрузка из системного API вместо ручного ввода, toggleable чекбоксы
- Периоды тарифов: загрузка из period_prices через useQueries вместо произвольного ввода
- Публичная страница: глобальный список периодов, скрытие тарифов без цены для выбранного периода
- Локализация: добавлены ключи для 4 языков (ru/en/zh/fa)
---
 src/locales/en.json              |   7 +-
 src/locales/fa.json              |   7 +-
 src/locales/ru.json              |   7 +-
 src/locales/zh.json              |   7 +-
 src/pages/AdminLandingEditor.tsx | 346 ++++++++++++++++---------------
 src/pages/QuickPurchase.tsx      |  68 +++---
 6 files changed, 250 insertions(+), 192 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 8922cc4..e25c87f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3188,7 +3188,12 @@
       "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
       "titleRequired": "Title is required",
       "noTariffs": "Select at least one tariff",
-      "noPaymentMethods": "Add at least one payment method"
+      "noPaymentMethods": "Add at least one payment method",
+      "selectMethods": "Select available methods",
+      "noSystemMethods": "No payment methods configured in the system",
+      "methodOrder": "Drag to reorder",
+      "loadingPeriods": "Loading...",
+      "periodDaySuffix": "d"
     }
   },
   "adminUpdates": {
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 82cf1ee..c89577b 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -2914,7 +2914,12 @@
       "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
       "titleRequired": "Title is required",
       "noTariffs": "Select at least one tariff",
-      "noPaymentMethods": "Add at least one payment method"
+      "noPaymentMethods": "Add at least one payment method",
+      "selectMethods": "انتخاب روش‌های پرداخت موجود",
+      "noSystemMethods": "هیچ روش پرداختی در سیستم پیکربندی نشده است",
+      "methodOrder": "برای تغییر ترتیب بکشید",
+      "loadingPeriods": "در حال بارگذاری...",
+      "periodDaySuffix": "روز"
     }
   },
   "adminUpdates": {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 250e706..db7764f 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -3743,7 +3743,12 @@
       "invalidSlug": "Slug может содержать только строчные буквы, цифры и дефисы",
       "titleRequired": "Заголовок обязателен",
       "noTariffs": "Выберите хотя бы один тариф",
-      "noPaymentMethods": "Добавьте хотя бы один способ оплаты"
+      "noPaymentMethods": "Добавьте хотя бы один способ оплаты",
+      "selectMethods": "Выберите доступные методы",
+      "noSystemMethods": "В системе не настроено ни одного способа оплаты",
+      "methodOrder": "Перетащите для изменения порядка",
+      "loadingPeriods": "Загрузка...",
+      "periodDaySuffix": "д"
     }
   },
   "adminUpdates": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index ac80a4d..5b4cb7c 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -2913,7 +2913,12 @@
       "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
       "titleRequired": "Title is required",
       "noTariffs": "Select at least one tariff",
-      "noPaymentMethods": "Add at least one payment method"
+      "noPaymentMethods": "Add at least one payment method",
+      "selectMethods": "选择可用的支付方式",
+      "noSystemMethods": "系统中未配置任何支付方式",
+      "methodOrder": "拖动以调整顺序",
+      "loadingPeriods": "加载中...",
+      "periodDaySuffix": "天"
     }
   },
   "adminUpdates": {
diff --git a/src/pages/AdminLandingEditor.tsx b/src/pages/AdminLandingEditor.tsx
index a714087..fb94fda 100644
--- a/src/pages/AdminLandingEditor.tsx
+++ b/src/pages/AdminLandingEditor.tsx
@@ -1,6 +1,6 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import {
   adminLandingsApi,
@@ -8,7 +8,8 @@ import {
   LandingFeature,
   LandingPaymentMethod,
 } from '../api/landings';
-import { tariffsApi, TariffListItem } from '../api/tariffs';
+import { tariffsApi, TariffListItem, PeriodPrice } from '../api/tariffs';
+import { adminPaymentMethodsApi } from '../api/adminPaymentMethods';
 import { Toggle } from '../components/admin';
 import { useNotify } from '@/platform';
 import { usePlatform } from '../platform/hooks/usePlatform';
@@ -48,6 +49,10 @@ const ChevronDownIcon = ({ open }: { open: boolean }) => (
   </svg>
 );
 
+function formatPrice(kopeks: number): string {
+  return `${(kopeks / 100).toLocaleString('ru-RU')} \u20BD`;
+}
+
 // ============ Sortable Feature Item ============
 
 interface SortableFeatureProps {
@@ -121,17 +126,14 @@ function SortableFeatureItem({ feature, index, onUpdate, onRemove }: SortableFea
   );
 }
 
-// ============ Sortable Payment Method ============
+// ============ Sortable Selected Payment Method Card ============
 
-interface SortableMethodProps {
+interface SortableSelectedMethodProps {
   method: MethodWithId;
-  index: number;
-  onUpdate: (index: number, field: keyof LandingPaymentMethod, value: string) => void;
-  onRemove: (index: number) => void;
+  onRemove: (methodId: string) => void;
 }
 
-function SortableMethodItem({ method, index, onUpdate, onRemove }: SortableMethodProps) {
-  const { t } = useTranslation();
+function SortableSelectedMethodCard({ method, onRemove }: SortableSelectedMethodProps) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: method._id,
   });
@@ -148,54 +150,21 @@ function SortableMethodItem({ method, index, onUpdate, onRemove }: SortableMetho
       ref={setNodeRef}
       style={style}
       className={cn(
-        'flex items-start gap-2 rounded-lg border p-3',
+        'flex items-center gap-2 rounded-lg border px-3 py-2',
         isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50',
       )}
     >
       <button
         {...attributes}
         {...listeners}
-        className="mt-2 flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
+        className="flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
       >
         <GripIcon />
       </button>
-      <div className="min-w-0 flex-1 space-y-2">
-        <div className="grid grid-cols-2 gap-2">
-          <input
-            type="text"
-            value={method.method_id}
-            onChange={(e) => onUpdate(index, 'method_id', e.target.value)}
-            placeholder={t('admin.landings.methodId')}
-            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-          />
-          <input
-            type="text"
-            value={method.display_name}
-            onChange={(e) => onUpdate(index, 'display_name', e.target.value)}
-            placeholder={t('admin.landings.methodName')}
-            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-          />
-        </div>
-        <div className="grid grid-cols-2 gap-2">
-          <input
-            type="text"
-            value={method.description}
-            onChange={(e) => onUpdate(index, 'description', e.target.value)}
-            placeholder={t('admin.landings.methodDesc')}
-            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-          />
-          <input
-            type="text"
-            value={method.icon_url}
-            onChange={(e) => onUpdate(index, 'icon_url', e.target.value)}
-            placeholder={t('admin.landings.methodIcon')}
-            className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-          />
-        </div>
-      </div>
+      <span className="min-w-0 flex-1 truncate text-sm text-dark-100">{method.display_name}</span>
       <button
-        onClick={() => onRemove(index)}
-        className="mt-2 flex-shrink-0 text-dark-500 hover:text-error-400"
+        onClick={() => onRemove(method.method_id)}
+        className="flex-shrink-0 text-dark-500 hover:text-error-400"
       >
         <TrashIcon />
       </button>
@@ -282,6 +251,38 @@ export default function AdminLandingEditor() {
 
   const allTariffs = tariffsData?.tariffs ?? [];
 
+  // Fetch system payment methods
+  const { data: systemMethods } = useQuery({
+    queryKey: ['admin-payment-methods'],
+    queryFn: () => adminPaymentMethodsApi.getAll(),
+    staleTime: 30_000,
+  });
+
+  const availablePaymentMethods = useMemo(
+    () => (systemMethods ?? []).filter((m) => m.is_enabled && m.is_provider_configured),
+    [systemMethods],
+  );
+
+  // Fetch tariff details for period info
+  const tariffDetailQueries = useQueries({
+    queries: selectedTariffIds.map((tariffId) => ({
+      queryKey: ['admin-tariff-detail', tariffId],
+      queryFn: () => tariffsApi.getTariff(tariffId),
+      staleTime: 60_000,
+      enabled: selectedTariffIds.includes(tariffId),
+    })),
+  });
+
+  const tariffPeriodsMap = useMemo(() => {
+    const map: Record<number, PeriodPrice[]> = {};
+    tariffDetailQueries.forEach((q, i) => {
+      if (q.data) {
+        map[selectedTariffIds[i]] = q.data.period_prices;
+      }
+    });
+    return map;
+  }, [tariffDetailQueries, selectedTariffIds]);
+
   // Fetch landing for editing
   const { data: landingData } = useQuery({
     queryKey: ['admin-landing', id],
@@ -431,26 +432,30 @@ export default function AdminLandingEditor() {
   }, []);
 
   // ---- Payment methods helpers ----
-  const addMethod = () => {
-    setPaymentMethods((prev) => [
-      ...prev,
-      {
-        _id: crypto.randomUUID(),
-        method_id: '',
-        display_name: '',
-        description: '',
-        icon_url: '',
-        sort_order: prev.length,
-      },
-    ]);
+  const togglePaymentMethod = (methodId: string) => {
+    setPaymentMethods((prev) => {
+      const exists = prev.find((m) => m.method_id === methodId);
+      if (exists) {
+        return prev.filter((m) => m.method_id !== methodId);
+      }
+      const systemMethod = availablePaymentMethods.find((m) => m.method_id === methodId);
+      if (!systemMethod) return prev;
+      return [
+        ...prev,
+        {
+          _id: crypto.randomUUID(),
+          method_id: systemMethod.method_id,
+          display_name: systemMethod.display_name ?? systemMethod.default_display_name,
+          description: '',
+          icon_url: '',
+          sort_order: prev.length,
+        },
+      ];
+    });
   };
 
-  const updateMethod = (index: number, field: keyof LandingPaymentMethod, value: string) => {
-    setPaymentMethods((prev) => prev.map((m, i) => (i === index ? { ...m, [field]: value } : m)));
-  };
-
-  const removeMethod = (index: number) => {
-    setPaymentMethods((prev) => prev.filter((_, i) => i !== index));
+  const removePaymentMethod = (methodId: string) => {
+    setPaymentMethods((prev) => prev.filter((m) => m.method_id !== methodId));
   };
 
   const handleMethodDragEnd = useCallback((event: DragEndEvent) => {
@@ -472,13 +477,27 @@ export default function AdminLandingEditor() {
     );
   };
 
-  const togglePeriod = (tariffId: number, days: number) => {
+  const togglePeriodFromTariff = (tariffId: number, days: number, allPeriods: PeriodPrice[]) => {
     const key = String(tariffId);
+    const allDays = allPeriods.map((p) => p.days);
+
     setAllowedPeriods((prev) => {
-      const current = prev[key] ?? [];
-      const updated = current.includes(days)
-        ? current.filter((d) => d !== days)
-        : [...current, days];
+      const current = prev[key];
+      if (!current) {
+        // No override yet -- all periods allowed. Remove this one.
+        const updated = allDays.filter((d) => d !== days);
+        return { ...prev, [key]: updated };
+      }
+
+      const hasDay = current.includes(days);
+      const updated = hasDay ? current.filter((d) => d !== days) : [...current, days];
+
+      // If all periods are selected again, remove the override
+      if (updated.length === allDays.length) {
+        const { [key]: _, ...rest } = prev;
+        return rest;
+      }
+
       return { ...prev, [key]: updated };
     });
   };
@@ -664,23 +683,44 @@ export default function AdminLandingEditor() {
                     </span>
                   )}
                 </label>
-                {/* Period checkboxes if tariff is selected and is not daily */}
+                {/* Period checkboxes from tariff detail */}
                 {selectedTariffIds.includes(tariff.id) && !tariff.is_daily && (
-                  <div className="ml-7 mt-2 flex flex-wrap gap-2">
+                  <div className="ml-7 mt-2">
                     <span className="text-xs text-dark-500">{t('admin.landings.periods')}:</span>
-                    {/* We show known periods from the tariff detail. Since TariffListItem doesn't have period_prices,
-                        we let the user type periods or rely on the backend returning allowed_periods.
-                        For simplicity, show the allowed_periods for this tariff if any are set. */}
-                    {(allowedPeriods[String(tariff.id)] ?? []).map((days) => (
-                      <button
-                        key={days}
-                        onClick={() => togglePeriod(tariff.id, days)}
-                        className="rounded bg-accent-500/20 px-2 py-0.5 text-xs text-accent-400 hover:bg-accent-500/30"
-                      >
-                        {days}d<span className="ml-1 text-accent-300">x</span>
-                      </button>
-                    ))}
-                    <AddPeriodButton tariffId={tariff.id} onAdd={togglePeriod} />
+                    {tariffPeriodsMap[tariff.id] ? (
+                      <div className="mt-1 flex flex-wrap gap-2">
+                        {tariffPeriodsMap[tariff.id].map((period) => {
+                          const override = allowedPeriods[String(tariff.id)];
+                          const isAllowed = !override || override.includes(period.days);
+                          return (
+                            <button
+                              key={period.days}
+                              onClick={() =>
+                                togglePeriodFromTariff(
+                                  tariff.id,
+                                  period.days,
+                                  tariffPeriodsMap[tariff.id],
+                                )
+                              }
+                              className={cn(
+                                'rounded-full px-3 py-1 text-xs font-medium transition-colors',
+                                isAllowed
+                                  ? 'bg-accent-500/20 text-accent-400'
+                                  : 'bg-dark-700/50 text-dark-500 line-through',
+                              )}
+                            >
+                              {period.days}
+                              {t('admin.landings.periodDaySuffix')} —{' '}
+                              {formatPrice(period.price_kopeks)}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <span className="ml-2 text-xs text-dark-600">
+                        {t('admin.landings.loadingPeriods')}
+                      </span>
+                    )}
                   </div>
                 )}
               </div>
@@ -694,27 +734,62 @@ export default function AdminLandingEditor() {
           open={openSections.methods}
           onToggle={() => toggleSection('methods')}
         >
-          <div className="space-y-3">
-            <DndContext sensors={sensors} onDragEnd={handleMethodDragEnd}>
-              <SortableContext items={methodIds} strategy={verticalListSortingStrategy}>
-                {paymentMethods.map((method, index) => (
-                  <SortableMethodItem
-                    key={method._id}
-                    method={method}
-                    index={index}
-                    onUpdate={updateMethod}
-                    onRemove={removeMethod}
-                  />
-                ))}
-              </SortableContext>
-            </DndContext>
-            <button
-              onClick={addMethod}
-              className="flex items-center gap-2 rounded-lg border border-dashed border-dark-600 px-4 py-2 text-sm text-dark-400 transition-colors hover:border-dark-500 hover:text-dark-300"
-            >
-              <PlusIcon />
-              {t('admin.landings.addMethod')}
-            </button>
+          <div className="space-y-4">
+            {/* Available system methods as toggleable list */}
+            <div>
+              <p className="mb-2 text-sm text-dark-500">{t('admin.landings.selectMethods')}</p>
+              <div className="space-y-2">
+                {availablePaymentMethods.map((sysMethod) => {
+                  const isSelected = paymentMethods.some(
+                    (m) => m.method_id === sysMethod.method_id,
+                  );
+                  return (
+                    <label
+                      key={sysMethod.method_id}
+                      className={cn(
+                        'flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors',
+                        isSelected
+                          ? 'border-accent-500/50 bg-accent-500/5'
+                          : 'border-dark-700 bg-dark-800/50 hover:border-dark-600',
+                      )}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isSelected}
+                        onChange={() => togglePaymentMethod(sysMethod.method_id)}
+                        className="h-4 w-4 rounded border-dark-600 bg-dark-700 text-accent-500"
+                      />
+                      <span className="text-sm font-medium text-dark-100">
+                        {sysMethod.display_name ?? sysMethod.default_display_name}
+                      </span>
+                    </label>
+                  );
+                })}
+                {availablePaymentMethods.length === 0 && (
+                  <p className="text-sm text-dark-600">{t('admin.landings.noSystemMethods')}</p>
+                )}
+              </div>
+            </div>
+
+            {/* Selected methods with drag-to-reorder */}
+            {paymentMethods.length > 0 && (
+              <div>
+                <p className="mb-2 text-sm text-dark-500">{t('admin.landings.methodOrder')}</p>
+                <DndContext sensors={sensors} onDragEnd={handleMethodDragEnd}>
+                  <SortableContext items={methodIds} strategy={verticalListSortingStrategy}>
+                    <div className="space-y-2">
+                      {paymentMethods.map((method) => (
+                        <SortableSelectedMethodCard
+                          key={method._id}
+                          method={method}
+                          onRemove={removePaymentMethod}
+                        />
+                      ))}
+                    </div>
+                  </SortableContext>
+                </DndContext>
+              </div>
+            )}
           </div>
         </Section>
 
@@ -765,60 +840,3 @@ export default function AdminLandingEditor() {
     </div>
   );
 }
-
-// ============ Tiny helper for adding a period ============
-
-function AddPeriodButton({
-  tariffId,
-  onAdd,
-}: {
-  tariffId: number;
-  onAdd: (tariffId: number, days: number) => void;
-}) {
-  const [value, setValue] = useState('');
-  const [showInput, setShowInput] = useState(false);
-
-  if (!showInput) {
-    return (
-      <button
-        onClick={() => setShowInput(true)}
-        className="rounded border border-dashed border-dark-600 px-2 py-0.5 text-xs text-dark-500 hover:border-dark-500 hover:text-dark-400"
-      >
-        +
-      </button>
-    );
-  }
-
-  return (
-    <input
-      type="number"
-      autoFocus
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-      onBlur={() => {
-        const days = parseInt(value, 10);
-        if (days > 0) {
-          onAdd(tariffId, days);
-        }
-        setValue('');
-        setShowInput(false);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter') {
-          const days = parseInt(value, 10);
-          if (days > 0) {
-            onAdd(tariffId, days);
-          }
-          setValue('');
-          setShowInput(false);
-        }
-        if (e.key === 'Escape') {
-          setValue('');
-          setShowInput(false);
-        }
-      }}
-      placeholder="30"
-      className="w-16 rounded border border-dark-600 bg-dark-800 px-2 py-0.5 text-xs text-dark-100 outline-none focus:border-accent-500"
-    />
-  );
-}
diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
index 64029d5..85453fe 100644
--- a/src/pages/QuickPurchase.tsx
+++ b/src/pages/QuickPurchase.tsx
@@ -569,22 +569,53 @@ export default function QuickPurchase() {
     };
   }, []);
 
+  // Collect ALL unique periods across ALL tariffs
+  const allPeriods = useMemo(() => {
+    if (!config) return [];
+    const periodMap = new Map<number, LandingTariffPeriod>();
+    for (const tariff of config.tariffs) {
+      for (const period of tariff.periods) {
+        if (!periodMap.has(period.days)) {
+          periodMap.set(period.days, period);
+        }
+      }
+    }
+    return Array.from(periodMap.values()).sort((a, b) => a.days - b.days);
+  }, [config]);
+
+  // Filter tariffs to only those that have the selected period
+  const visibleTariffs = useMemo(() => {
+    if (!config || !selectedPeriodDays) return config?.tariffs ?? [];
+    return config.tariffs.filter((t) => t.periods.some((p) => p.days === selectedPeriodDays));
+  }, [config, selectedPeriodDays]);
+
   // Auto-select first tariff, period, method on config load
   useEffect(() => {
     if (!config) return;
 
-    if (config.tariffs.length > 0 && selectedTariffId === null) {
-      const firstTariff = config.tariffs[0];
-      setSelectedTariffId(firstTariff.id);
-      if (firstTariff.periods.length > 0 && selectedPeriodDays === null) {
-        setSelectedPeriodDays(firstTariff.periods[0].days);
-      }
+    // Auto-select first period from all available periods
+    if (allPeriods.length > 0 && selectedPeriodDays === null) {
+      setSelectedPeriodDays(allPeriods[0].days);
+    }
+
+    // Auto-select first visible tariff
+    if (visibleTariffs.length > 0 && selectedTariffId === null) {
+      setSelectedTariffId(visibleTariffs[0].id);
     }
 
     if (config.payment_methods.length > 0 && selectedMethod === null) {
       setSelectedMethod(config.payment_methods[0].method_id);
     }
-  }, [config, selectedTariffId, selectedPeriodDays, selectedMethod]);
+  }, [config, allPeriods, visibleTariffs, selectedTariffId, selectedPeriodDays, selectedMethod]);
+
+  // When period changes, auto-select first visible tariff if current is hidden
+  useEffect(() => {
+    if (!visibleTariffs.length) return;
+    const currentVisible = visibleTariffs.find((t) => t.id === selectedTariffId);
+    if (!currentVisible) {
+      setSelectedTariffId(visibleTariffs[0].id);
+    }
+  }, [visibleTariffs, selectedTariffId]);
 
   // SEO: set document title
   useEffect(() => {
@@ -647,24 +678,13 @@ export default function QuickPurchase() {
     [config?.tariffs, selectedTariffId],
   );
 
-  const availablePeriods = useMemo(() => selectedTariff?.periods ?? [], [selectedTariff]);
-
   const selectedPeriod = useMemo(
-    () => availablePeriods.find((p) => p.days === selectedPeriodDays),
-    [availablePeriods, selectedPeriodDays],
+    () => selectedTariff?.periods.find((p) => p.days === selectedPeriodDays),
+    [selectedTariff, selectedPeriodDays],
   );
 
   const currentPrice = selectedPeriod?.price_kopeks ?? 0;
 
-  // When tariff changes, reset period to first available if current is invalid
-  useEffect(() => {
-    if (!selectedTariff) return;
-    const hasCurrent = selectedTariff.periods.some((p) => p.days === selectedPeriodDays);
-    if (!hasCurrent && selectedTariff.periods.length > 0) {
-      setSelectedPeriodDays(selectedTariff.periods[0].days);
-    }
-  }, [selectedTariff, selectedPeriodDays]);
-
   // Validation
   const canSubmit = useMemo(() => {
     if (!selectedTariffId || !selectedPeriodDays || !selectedMethod) return false;
@@ -727,7 +747,7 @@ export default function QuickPurchase() {
     return <ErrorState message={errMsg} />;
   }
 
-  const showTariffCards = config.tariffs.length > 1;
+  const showTariffCards = visibleTariffs.length > 1;
 
   return (
     <div className="min-h-dvh bg-dark-950">
@@ -757,13 +777,13 @@ export default function QuickPurchase() {
             className="space-y-6"
           >
             {/* Period tabs */}
-            {availablePeriods.length > 0 && (
+            {allPeriods.length > 0 && (
               <div>
                 <h2 className="mb-3 text-sm font-medium uppercase tracking-wider text-dark-400">
                   {t('landing.choosePeriod', 'Choose period')}
                 </h2>
                 <PeriodTabs
-                  periods={availablePeriods}
+                  periods={allPeriods}
                   selectedDays={selectedPeriodDays ?? 0}
                   onSelect={setSelectedPeriodDays}
                 />
@@ -801,7 +821,7 @@ export default function QuickPurchase() {
                   aria-label={t('landing.chooseTariff', 'Choose tariff')}
                   className="grid gap-3 sm:grid-cols-2"
                 >
-                  {config.tariffs.map((tariff) => {
+                  {visibleTariffs.map((tariff) => {
                     const period = tariff.periods.find((p) => p.days === selectedPeriodDays);
                     return (
                       <TariffCard

From ab13616b0f0d31eac007a4c4b7f4f360f0f3c9b4 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 16:11:58 +0300
Subject: [PATCH 04/29] =?UTF-8?q?feat:=20=D0=BC=D1=83=D0=BB=D1=8C=D1=82?=
 =?UTF-8?q?=D0=B8=D1=8F=D0=B7=D1=8B=D1=87=D0=BD=D1=8B=D0=B5=20=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B4=D0=B8=D0=BD=D0=B3=D0=B8=20+=20=D0=BF=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B0=D1=82=D0=B5=D0=BB=D1=8C=20?=
 =?UTF-8?q?=D1=8F=D0=B7=D1=8B=D0=BA=D0=B0=20+=20=D0=B8=D1=81=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BF=D0=BE=20?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B2=D1=8C=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Мультиязычность:
- LanguageSwitcher на публичной странице покупки
- Вкладки локалей в админ-редакторе (ru/en/zh/fa)
- LocaleTabs и LocalizedInput компоненты
- Типы: LocaleDict, AdminLandingFeature, toLocaleDict хелпер
- ?lang= параметр при запросе конфига лендинга

Исправления по ревью:
- contentIndicators включает все локализуемые поля
- LocaleTabs вынесен над секциями аккордеона
- text-left → text-start для RTL
- nonEmptyDict: защита от undefined
- featureIds/methodIds обёрнуты в useMemo
- toggleSection/updateFeature* обёрнуты в useCallback
- formatPrice вынесен в shared utils/format.ts
- RTL через LOCALE_META.rtl вместо хардкода
- Переводы zh/fa для валидации и landing
- Variable shadowing: t → tariff
---
 src/api/landings.ts                     |  68 +++++++--
 src/components/admin/LocaleTabs.tsx     |  74 +++++++++
 src/components/admin/LocalizedInput.tsx |  70 +++++++++
 src/components/admin/index.ts           |   2 +
 src/locales/en.json                     |   4 +-
 src/locales/fa.json                     |  18 ++-
 src/locales/ru.json                     |   4 +-
 src/locales/zh.json                     |  18 ++-
 src/pages/AdminLandingEditor.tsx        | 195 +++++++++++++++---------
 src/pages/QuickPurchase.tsx             |  36 ++---
 src/utils/format.ts                     |   8 +
 11 files changed, 375 insertions(+), 122 deletions(-)
 create mode 100644 src/components/admin/LocaleTabs.tsx
 create mode 100644 src/components/admin/LocalizedInput.tsx
 create mode 100644 src/utils/format.ts

diff --git a/src/api/landings.ts b/src/api/landings.ts
index 5fe13f3..b40ecfc 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -76,10 +76,35 @@ export interface PurchaseStatus {
   tariff_name: string | null;
 }
 
+// ============================================================
+// Locale helpers
+// ============================================================
+
+/** Locale dict for multi-language text fields (admin API) */
+export type LocaleDict = Record<string, string>;
+
+/** Supported locales for the admin editor */
+export const SUPPORTED_LOCALES = ['ru', 'en', 'zh', 'fa'] as const;
+export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];
+
+export const LOCALE_META: Record<SupportedLocale, { flag: string; name: string; rtl: boolean }> = {
+  ru: { flag: '\u{1F1F7}\u{1F1FA}', name: 'RU', rtl: false },
+  en: { flag: '\u{1F1EC}\u{1F1E7}', name: 'EN', rtl: false },
+  zh: { flag: '\u{1F1E8}\u{1F1F3}', name: 'ZH', rtl: false },
+  fa: { flag: '\u{1F1EE}\u{1F1F7}', name: 'FA', rtl: true },
+};
+
 // ============================================================
 // Admin types
 // ============================================================
 
+/** Admin feature type with localized title/description */
+export interface AdminLandingFeature {
+  icon: string;
+  title: LocaleDict;
+  description: LocaleDict;
+}
+
 export interface LandingListItem {
   id: number;
   slug: string;
@@ -102,18 +127,18 @@ export interface LandingListItem {
 export interface LandingDetail {
   id: number;
   slug: string;
-  title: string;
-  subtitle: string | null;
+  title: LocaleDict;
+  subtitle: LocaleDict | null;
   is_active: boolean;
-  features: LandingFeature[];
-  footer_text: string | null;
+  features: AdminLandingFeature[];
+  footer_text: LocaleDict | null;
   allowed_tariff_ids: number[];
   allowed_periods: Record<string, number[]>;
   payment_methods: LandingPaymentMethod[];
   gift_enabled: boolean;
   custom_css: string | null;
-  meta_title: string | null;
-  meta_description: string | null;
+  meta_title: LocaleDict | null;
+  meta_description: LocaleDict | null;
   display_order: number;
   created_at: string | null;
   updated_at: string | null;
@@ -121,29 +146,44 @@ export interface LandingDetail {
 
 export interface LandingCreateRequest {
   slug: string;
-  title: string;
-  subtitle?: string;
+  title: LocaleDict;
+  subtitle?: LocaleDict;
   is_active?: boolean;
-  features?: LandingFeature[];
-  footer_text?: string;
+  features?: AdminLandingFeature[];
+  footer_text?: LocaleDict;
   allowed_tariff_ids?: number[];
   allowed_periods?: Record<string, number[]>;
   payment_methods?: LandingPaymentMethod[];
   gift_enabled?: boolean;
   custom_css?: string;
-  meta_title?: string;
-  meta_description?: string;
+  meta_title?: LocaleDict;
+  meta_description?: LocaleDict;
 }
 
 export type LandingUpdateRequest = Partial<LandingCreateRequest>;
 
+/**
+ * Normalize a value that might be a plain string (old API) or a LocaleDict.
+ * If it's a string, wraps it as `{ ru: value }`.
+ * If null/undefined, returns the fallback.
+ */
+export function toLocaleDict(
+  value: string | LocaleDict | null | undefined,
+  fallback: LocaleDict = {},
+): LocaleDict {
+  if (value === null || value === undefined) return fallback;
+  if (typeof value === 'string') return value ? { ru: value } : fallback;
+  return value;
+}
+
 // ============================================================
 // Public API
 // ============================================================
 
 export const landingApi = {
-  getConfig: async (slug: string): Promise<LandingConfig> => {
-    const response = await apiClient.get(`/cabinet/landing/${slug}`);
+  getConfig: async (slug: string, lang?: string): Promise<LandingConfig> => {
+    const params = lang ? `?lang=${lang}` : '';
+    const response = await apiClient.get(`/cabinet/landing/${slug}${params}`);
     return response.data;
   },
 
diff --git a/src/components/admin/LocaleTabs.tsx b/src/components/admin/LocaleTabs.tsx
new file mode 100644
index 0000000..db192e4
--- /dev/null
+++ b/src/components/admin/LocaleTabs.tsx
@@ -0,0 +1,74 @@
+import { useTranslation } from 'react-i18next';
+import {
+  SUPPORTED_LOCALES,
+  LOCALE_META,
+  type SupportedLocale,
+  type LocaleDict,
+} from '../../api/landings';
+import { cn } from '../../lib/utils';
+
+interface LocaleTabsProps {
+  activeLocale: SupportedLocale;
+  onChange: (locale: SupportedLocale) => void;
+  /** Pass locale dicts to show a green dot indicator when content exists */
+  contentIndicators?: LocaleDict[];
+  className?: string;
+}
+
+/**
+ * Horizontal locale tab bar for the admin landing editor.
+ * Shows a green dot on tabs that have content filled in.
+ */
+export function LocaleTabs({
+  activeLocale,
+  onChange,
+  contentIndicators,
+  className,
+}: LocaleTabsProps) {
+  const { t } = useTranslation();
+
+  const hasContent = (locale: SupportedLocale): boolean => {
+    if (!contentIndicators || contentIndicators.length === 0) return false;
+    return contentIndicators.some((dict) => {
+      const value = dict[locale];
+      return typeof value === 'string' && value.trim().length > 0;
+    });
+  };
+
+  return (
+    <div className={cn('space-y-1', className)}>
+      <div className="flex items-center gap-1.5">
+        {SUPPORTED_LOCALES.map((locale) => {
+          const meta = LOCALE_META[locale];
+          const isActive = locale === activeLocale;
+          const filled = hasContent(locale);
+          const isRtl = meta.rtl;
+
+          return (
+            <button
+              key={locale}
+              type="button"
+              onClick={() => onChange(locale)}
+              dir={isRtl ? 'rtl' : 'ltr'}
+              className={cn(
+                'relative flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-all',
+                isActive
+                  ? 'bg-accent-500/15 text-accent-400 ring-1 ring-accent-500/30'
+                  : 'bg-dark-800/50 text-dark-400 hover:bg-dark-700/50 hover:text-dark-300',
+              )}
+              aria-label={`${t('admin.landings.localeTab')}: ${meta.name}`}
+              aria-pressed={isActive}
+            >
+              <span>{meta.flag}</span>
+              <span>{meta.name}</span>
+              {filled && !isActive && (
+                <span className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-success-500" />
+              )}
+            </button>
+          );
+        })}
+      </div>
+      <p className="text-xs text-dark-500">{t('admin.landings.localeHint')}</p>
+    </div>
+  );
+}
diff --git a/src/components/admin/LocalizedInput.tsx b/src/components/admin/LocalizedInput.tsx
new file mode 100644
index 0000000..faa3edd
--- /dev/null
+++ b/src/components/admin/LocalizedInput.tsx
@@ -0,0 +1,70 @@
+import { LOCALE_META, type LocaleDict, type SupportedLocale } from '../../api/landings';
+import { cn } from '../../lib/utils';
+
+interface LocalizedInputProps {
+  value: LocaleDict;
+  onChange: (value: LocaleDict) => void;
+  locale: SupportedLocale;
+  placeholder?: string;
+  multiline?: boolean;
+  rows?: number;
+  maxLength?: number;
+  id?: string;
+  className?: string;
+}
+
+/**
+ * An input (or textarea) that edits a single locale key within a LocaleDict.
+ * Shows `value[locale]` and updates the dict immutably on change.
+ */
+export function LocalizedInput({
+  value,
+  onChange,
+  locale,
+  placeholder,
+  multiline = false,
+  rows = 2,
+  maxLength,
+  id,
+  className,
+}: LocalizedInputProps) {
+  const currentValue = value[locale] ?? '';
+  const isRtl = LOCALE_META[locale].rtl;
+
+  const handleChange = (newText: string) => {
+    onChange({ ...value, [locale]: newText });
+  };
+
+  const inputClasses = cn(
+    'w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500',
+    className,
+  );
+
+  if (multiline) {
+    return (
+      <textarea
+        id={id}
+        dir={isRtl ? 'rtl' : 'ltr'}
+        value={currentValue}
+        onChange={(e) => handleChange(e.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        maxLength={maxLength}
+        className={inputClasses}
+      />
+    );
+  }
+
+  return (
+    <input
+      id={id}
+      type="text"
+      dir={isRtl ? 'rtl' : 'ltr'}
+      value={currentValue}
+      onChange={(e) => handleChange(e.target.value)}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      className={inputClasses}
+    />
+  );
+}
diff --git a/src/components/admin/index.ts b/src/components/admin/index.ts
index 9771d97..bd7cb4b 100644
--- a/src/components/admin/index.ts
+++ b/src/components/admin/index.ts
@@ -12,6 +12,8 @@ export * from './FavoritesTab';
 export * from './SettingsTab';
 export * from './SettingsMobileTabs';
 export * from './SettingsSearch';
+export * from './LocaleTabs';
+export * from './LocalizedInput';
 
 // Constants and utils
 export * from './constants';
diff --git a/src/locales/en.json b/src/locales/en.json
index e25c87f..16558f9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3193,7 +3193,9 @@
       "noSystemMethods": "No payment methods configured in the system",
       "methodOrder": "Drag to reorder",
       "loadingPeriods": "Loading...",
-      "periodDaySuffix": "d"
+      "periodDaySuffix": "d",
+      "localeTab": "Language",
+      "localeHint": "Switch language to edit text in that language"
     }
   },
   "adminUpdates": {
diff --git a/src/locales/fa.json b/src/locales/fa.json
index c89577b..49b426f 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -2911,15 +2911,17 @@
       "content": "محتوا",
       "save": "ذخیره",
       "back": "بازگشت",
-      "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
-      "titleRequired": "Title is required",
-      "noTariffs": "Select at least one tariff",
-      "noPaymentMethods": "Add at least one payment method",
+      "invalidSlug": "Slug \u0641\u0642\u0637 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0634\u0627\u0645\u0644 \u062d\u0631\u0648\u0641 \u06a9\u0648\u0686\u06a9\u060c \u0627\u0639\u062f\u0627\u062f \u0648 \u062e\u0637 \u062a\u06cc\u0631\u0647 \u0628\u0627\u0634\u062f",
+      "titleRequired": "\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0632\u0627\u0645\u06cc \u0627\u0633\u062a",
+      "noTariffs": "\u062d\u062f\u0627\u0642\u0644 \u06cc\u06a9 \u062a\u0639\u0631\u0641\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f",
+      "noPaymentMethods": "\u062d\u062f\u0627\u0642\u0644 \u06cc\u06a9 \u0631\u0648\u0634 \u067e\u0631\u062f\u0627\u062e\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f",
       "selectMethods": "انتخاب روش‌های پرداخت موجود",
       "noSystemMethods": "هیچ روش پرداختی در سیستم پیکربندی نشده است",
       "methodOrder": "برای تغییر ترتیب بکشید",
       "loadingPeriods": "در حال بارگذاری...",
-      "periodDaySuffix": "روز"
+      "periodDaySuffix": "روز",
+      "localeTab": "زبان",
+      "localeHint": "زبان را تغییر دهید تا متن را به آن زبان ویرایش کنید"
     }
   },
   "adminUpdates": {
@@ -3511,8 +3513,8 @@
     "choosePeriod": "انتخاب دوره",
     "copied": "کپی شد!",
     "copyLink": "کپی لینک",
-    "giftToggleLabel": "Purchase type",
-    "pollTimedOut": "Taking longer than expected",
-    "pollTimedOutDesc": "Payment processing is taking longer than usual. You can try checking again."
+    "giftToggleLabel": "\u0646\u0648\u0639 \u062e\u0631\u06cc\u062f",
+    "pollTimedOut": "\u0632\u0645\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f",
+    "pollTimedOutDesc": "\u067e\u0631\u062f\u0627\u0632\u0634 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u062d\u062f \u0645\u0639\u0645\u0648\u0644 \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f\u0647 \u0627\u0633\u062a. \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f."
   }
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
index db7764f..35b82d4 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -3748,7 +3748,9 @@
       "noSystemMethods": "В системе не настроено ни одного способа оплаты",
       "methodOrder": "Перетащите для изменения порядка",
       "loadingPeriods": "Загрузка...",
-      "periodDaySuffix": "д"
+      "periodDaySuffix": "д",
+      "localeTab": "Язык",
+      "localeHint": "Переключите язык для редактирования текста на этом языке"
     }
   },
   "adminUpdates": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 5b4cb7c..8e35549 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -2910,15 +2910,17 @@
       "content": "内容",
       "save": "保存",
       "back": "返回",
-      "invalidSlug": "Slug can only contain lowercase letters, numbers, and hyphens",
-      "titleRequired": "Title is required",
-      "noTariffs": "Select at least one tariff",
-      "noPaymentMethods": "Add at least one payment method",
+      "invalidSlug": "Slug\u53ea\u80fd\u5305\u542b\u5c0f\u5199\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u8fde\u5b57\u7b26",
+      "titleRequired": "\u6807\u9898\u4e3a\u5fc5\u586b\u9879",
+      "noTariffs": "\u8bf7\u81f3\u5c11\u9009\u62e9\u4e00\u4e2a\u5957\u9910",
+      "noPaymentMethods": "\u8bf7\u81f3\u5c11\u6dfb\u52a0\u4e00\u4e2a\u652f\u4ed8\u65b9\u5f0f",
       "selectMethods": "选择可用的支付方式",
       "noSystemMethods": "系统中未配置任何支付方式",
       "methodOrder": "拖动以调整顺序",
       "loadingPeriods": "加载中...",
-      "periodDaySuffix": "天"
+      "periodDaySuffix": "天",
+      "localeTab": "语言",
+      "localeHint": "切换语言以编辑该语言的文本"
     }
   },
   "adminUpdates": {
@@ -3510,8 +3512,8 @@
     "choosePeriod": "选择时长",
     "copied": "已复制！",
     "copyLink": "复制链接",
-    "giftToggleLabel": "Purchase type",
-    "pollTimedOut": "Taking longer than expected",
-    "pollTimedOutDesc": "Payment processing is taking longer than usual. You can try checking again."
+    "giftToggleLabel": "\u8d2d\u4e70\u7c7b\u578b",
+    "pollTimedOut": "\u5904\u7406\u65f6\u95f4\u8f83\u957f",
+    "pollTimedOutDesc": "\u4ed8\u6b3e\u5904\u7406\u65f6\u95f4\u6bd4\u5e73\u65f6\u957f\u3002\u60a8\u53ef\u4ee5\u5c1d\u8bd5\u518d\u6b21\u68c0\u67e5\u3002"
   }
 }
diff --git a/src/pages/AdminLandingEditor.tsx b/src/pages/AdminLandingEditor.tsx
index fb94fda..640eb07 100644
--- a/src/pages/AdminLandingEditor.tsx
+++ b/src/pages/AdminLandingEditor.tsx
@@ -4,13 +4,17 @@ import { useQuery, useQueries, useMutation, useQueryClient } from '@tanstack/rea
 import { useTranslation } from 'react-i18next';
 import {
   adminLandingsApi,
-  LandingCreateRequest,
-  LandingFeature,
-  LandingPaymentMethod,
+  type LandingCreateRequest,
+  type AdminLandingFeature,
+  type LandingPaymentMethod,
+  type LocaleDict,
+  type SupportedLocale,
+  toLocaleDict,
 } from '../api/landings';
 import { tariffsApi, TariffListItem, PeriodPrice } from '../api/tariffs';
+import { formatPrice } from '../utils/format';
 import { adminPaymentMethodsApi } from '../api/adminPaymentMethods';
-import { Toggle } from '../components/admin';
+import { Toggle, LocaleTabs, LocalizedInput } from '../components/admin';
 import { useNotify } from '@/platform';
 import { usePlatform } from '../platform/hooks/usePlatform';
 import { getApiErrorMessage } from '../utils/api-error';
@@ -34,7 +38,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { cn } from '../lib/utils';
 
 // Types with stable IDs for DnD
-type FeatureWithId = LandingFeature & { _id: string };
+type FeatureWithId = AdminLandingFeature & { _id: string };
 type MethodWithId = LandingPaymentMethod & { _id: string };
 
 const ChevronDownIcon = ({ open }: { open: boolean }) => (
@@ -49,20 +53,25 @@ const ChevronDownIcon = ({ open }: { open: boolean }) => (
   </svg>
 );
 
-function formatPrice(kopeks: number): string {
-  return `${(kopeks / 100).toLocaleString('ru-RU')} \u20BD`;
-}
-
 // ============ Sortable Feature Item ============
 
 interface SortableFeatureProps {
   feature: FeatureWithId;
   index: number;
-  onUpdate: (index: number, field: keyof LandingFeature, value: string) => void;
+  locale: SupportedLocale;
+  onUpdateIcon: (index: number, value: string) => void;
+  onUpdateLocalized: (index: number, field: 'title' | 'description', value: LocaleDict) => void;
   onRemove: (index: number) => void;
 }
 
-function SortableFeatureItem({ feature, index, onUpdate, onRemove }: SortableFeatureProps) {
+function SortableFeatureItem({
+  feature,
+  index,
+  locale,
+  onUpdateIcon,
+  onUpdateLocalized,
+  onRemove,
+}: SortableFeatureProps) {
   const { t } = useTranslation();
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: feature._id,
@@ -96,22 +105,22 @@ function SortableFeatureItem({ feature, index, onUpdate, onRemove }: SortableFea
           <input
             type="text"
             value={feature.icon}
-            onChange={(e) => onUpdate(index, 'icon', e.target.value)}
+            onChange={(e) => onUpdateIcon(index, e.target.value)}
             placeholder={t('admin.landings.featureIcon')}
             className="w-16 rounded-lg border border-dark-700 bg-dark-800 px-2 py-1.5 text-center text-sm text-dark-100 outline-none focus:border-accent-500"
           />
-          <input
-            type="text"
+          <LocalizedInput
             value={feature.title}
-            onChange={(e) => onUpdate(index, 'title', e.target.value)}
+            onChange={(v) => onUpdateLocalized(index, 'title', v)}
+            locale={locale}
             placeholder={t('admin.landings.featureTitle')}
             className="min-w-0 flex-1 rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
           />
         </div>
-        <input
-          type="text"
+        <LocalizedInput
           value={feature.description}
-          onChange={(e) => onUpdate(index, 'description', e.target.value)}
+          onChange={(v) => onUpdateLocalized(index, 'description', v)}
+          locale={locale}
           placeholder={t('admin.landings.featureDesc')}
           className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
         />
@@ -186,7 +195,7 @@ function Section({ title, open, onToggle, children }: SectionProps) {
     <div className="overflow-hidden rounded-xl border border-dark-700 bg-dark-900/50">
       <button
         onClick={onToggle}
-        className="flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium text-dark-100 hover:bg-dark-800/50"
+        className="flex w-full items-center justify-between px-4 py-3 text-start text-sm font-medium text-dark-100 hover:bg-dark-800/50"
       >
         {title}
         <ChevronDownIcon open={open} />
@@ -217,23 +226,26 @@ export default function AdminLandingEditor() {
     footer: false,
   });
 
-  const toggleSection = (key: string) => {
+  const toggleSection = useCallback((key: string) => {
     setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
-  };
+  }, []);
 
-  // Form state
+  // Locale editing state
+  const [editingLocale, setEditingLocale] = useState<SupportedLocale>('ru');
+
+  // Form state — text fields are now LocaleDict
   const [slug, setSlug] = useState('');
-  const [title, setTitle] = useState('');
-  const [subtitle, setSubtitle] = useState('');
+  const [title, setTitle] = useState<LocaleDict>({ ru: '' });
+  const [subtitle, setSubtitle] = useState<LocaleDict>({});
   const [isActive, setIsActive] = useState(true);
-  const [metaTitle, setMetaTitle] = useState('');
-  const [metaDescription, setMetaDescription] = useState('');
+  const [metaTitle, setMetaTitle] = useState<LocaleDict>({});
+  const [metaDescription, setMetaDescription] = useState<LocaleDict>({});
   const [features, setFeatures] = useState<FeatureWithId[]>([]);
   const [selectedTariffIds, setSelectedTariffIds] = useState<number[]>([]);
   const [allowedPeriods, setAllowedPeriods] = useState<Record<string, number[]>>({});
   const [paymentMethods, setPaymentMethods] = useState<MethodWithId[]>([]);
   const [giftEnabled, setGiftEnabled] = useState(false);
-  const [footerText, setFooterText] = useState('');
+  const [footerText, setFooterText] = useState<LocaleDict>({});
   const [customCss, setCustomCss] = useState('');
 
   // DnD sensors
@@ -273,15 +285,17 @@ export default function AdminLandingEditor() {
     })),
   });
 
+  const tariffPeriodsData = tariffDetailQueries.map((q) => q.data);
   const tariffPeriodsMap = useMemo(() => {
     const map: Record<number, PeriodPrice[]> = {};
-    tariffDetailQueries.forEach((q, i) => {
-      if (q.data) {
-        map[selectedTariffIds[i]] = q.data.period_prices;
+    tariffPeriodsData.forEach((data, i) => {
+      if (data) {
+        map[selectedTariffIds[i]] = data.period_prices;
       }
     });
     return map;
-  }, [tariffDetailQueries, selectedTariffIds]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(tariffPeriodsData.map((d) => d?.id)), selectedTariffIds]);
 
   // Fetch landing for editing
   const { data: landingData } = useQuery({
@@ -306,19 +320,26 @@ export default function AdminLandingEditor() {
     if (!landingData || formPopulated.current) return;
     formPopulated.current = true;
     setSlug(landingData.slug);
-    setTitle(landingData.title);
-    setSubtitle(landingData.subtitle ?? '');
+    setTitle(toLocaleDict(landingData.title, { ru: '' }));
+    setSubtitle(toLocaleDict(landingData.subtitle));
     setIsActive(landingData.is_active);
-    setMetaTitle(landingData.meta_title ?? '');
-    setMetaDescription(landingData.meta_description ?? '');
-    setFeatures((landingData.features ?? []).map((f) => ({ ...f, _id: crypto.randomUUID() })));
+    setMetaTitle(toLocaleDict(landingData.meta_title));
+    setMetaDescription(toLocaleDict(landingData.meta_description));
+    setFeatures(
+      (landingData.features ?? []).map((f) => ({
+        ...f,
+        _id: crypto.randomUUID(),
+        title: toLocaleDict(f.title),
+        description: toLocaleDict(f.description),
+      })),
+    );
     setSelectedTariffIds(landingData.allowed_tariff_ids ?? []);
     setAllowedPeriods(landingData.allowed_periods ?? {});
     setPaymentMethods(
       (landingData.payment_methods ?? []).map((m) => ({ ...m, _id: crypto.randomUUID() })),
     );
     setGiftEnabled(landingData.gift_enabled);
-    setFooterText(landingData.footer_text ?? '');
+    setFooterText(toLocaleDict(landingData.footer_text));
     setCustomCss(landingData.custom_css ?? '');
   }, [landingData]);
 
@@ -350,6 +371,14 @@ export default function AdminLandingEditor() {
     },
   });
 
+  /** Return a LocaleDict only if it has at least one non-empty value, else undefined */
+  const nonEmptyDict = (dict: LocaleDict): LocaleDict | undefined => {
+    const filtered = Object.fromEntries(
+      Object.entries(dict).filter(([, v]) => typeof v === 'string' && v.trim().length > 0),
+    );
+    return Object.keys(filtered).length > 0 ? filtered : undefined;
+  };
+
   const handleSubmit = () => {
     // Client-side validation
     if (!isEdit && !/^[a-z0-9-]+$/.test(slug)) {
@@ -361,7 +390,8 @@ export default function AdminLandingEditor() {
       );
       return;
     }
-    if (!title.trim()) {
+    const titleHasContent = Object.values(title).some((v) => v.trim().length > 0);
+    if (!titleHasContent) {
       notify.error(t('admin.landings.titleRequired', 'Title is required'));
       return;
     }
@@ -375,23 +405,23 @@ export default function AdminLandingEditor() {
     }
 
     // Strip _id before sending to API
-    const cleanFeatures = features.map(({ _id: _, ...rest }) => rest);
+    const cleanFeatures: AdminLandingFeature[] = features.map(({ _id: _, ...rest }) => rest);
     const cleanMethods = paymentMethods.map(({ _id: _, ...rest }) => rest);
 
     const data: LandingCreateRequest = {
       slug,
       title,
-      subtitle: subtitle || undefined,
+      subtitle: nonEmptyDict(subtitle),
       is_active: isActive,
       features: cleanFeatures,
-      footer_text: footerText || undefined,
+      footer_text: nonEmptyDict(footerText),
       allowed_tariff_ids: selectedTariffIds,
       allowed_periods: allowedPeriods,
       payment_methods: cleanMethods,
       gift_enabled: giftEnabled,
       custom_css: customCss || undefined,
-      meta_title: metaTitle || undefined,
-      meta_description: metaDescription || undefined,
+      meta_title: nonEmptyDict(metaTitle),
+      meta_description: nonEmptyDict(metaDescription),
     };
 
     if (isEdit) {
@@ -407,17 +437,24 @@ export default function AdminLandingEditor() {
   const addFeature = () => {
     setFeatures((prev) => [
       ...prev,
-      { _id: crypto.randomUUID(), icon: '', title: '', description: '' },
+      { _id: crypto.randomUUID(), icon: '', title: {}, description: {} },
     ]);
   };
 
-  const updateFeature = (index: number, field: keyof LandingFeature, value: string) => {
-    setFeatures((prev) => prev.map((f, i) => (i === index ? { ...f, [field]: value } : f)));
-  };
+  const updateFeatureIcon = useCallback((index: number, value: string) => {
+    setFeatures((prev) => prev.map((f, i) => (i === index ? { ...f, icon: value } : f)));
+  }, []);
 
-  const removeFeature = (index: number) => {
+  const updateFeatureLocalized = useCallback(
+    (index: number, field: 'title' | 'description', value: LocaleDict) => {
+      setFeatures((prev) => prev.map((f, i) => (i === index ? { ...f, [field]: value } : f)));
+    },
+    [],
+  );
+
+  const removeFeature = useCallback((index: number) => {
     setFeatures((prev) => prev.filter((_, i) => i !== index));
-  };
+  }, []);
 
   const handleFeatureDragEnd = useCallback((event: DragEndEvent) => {
     const { active, over } = event;
@@ -503,8 +540,8 @@ export default function AdminLandingEditor() {
   };
 
   // Feature IDs for DnD
-  const featureIds = features.map((f) => f._id);
-  const methodIds = paymentMethods.map((m) => m._id);
+  const featureIds = useMemo(() => features.map((f) => f._id), [features]);
+  const methodIds = useMemo(() => paymentMethods.map((m) => m._id), [paymentMethods]);
 
   return (
     <div className="animate-fade-in">
@@ -532,7 +569,7 @@ export default function AdminLandingEditor() {
           </button>
           <button
             onClick={handleSubmit}
-            disabled={isPending || !slug || !title}
+            disabled={isPending || !slug || !Object.values(title).some((v) => v.trim())}
             className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-sm text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
           >
             {isPending && (
@@ -543,6 +580,21 @@ export default function AdminLandingEditor() {
         </div>
       </div>
 
+      {/* Locale tabs — always visible above sections */}
+      <LocaleTabs
+        activeLocale={editingLocale}
+        onChange={setEditingLocale}
+        contentIndicators={[
+          title,
+          subtitle,
+          metaTitle,
+          metaDescription,
+          footerText,
+          ...features.flatMap((f) => [f.title, f.description]),
+        ]}
+        className="mb-4"
+      />
+
       <div className="space-y-4">
         {/* General Section */}
         <Section
@@ -571,12 +623,11 @@ export default function AdminLandingEditor() {
               <label htmlFor="landing-title" className="mb-1 block text-sm text-dark-400">
                 {t('admin.landings.pageTitle')}
               </label>
-              <input
+              <LocalizedInput
                 id="landing-title"
-                type="text"
                 value={title}
-                onChange={(e) => setTitle(e.target.value)}
-                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500"
+                onChange={setTitle}
+                locale={editingLocale}
               />
             </div>
 
@@ -584,12 +635,13 @@ export default function AdminLandingEditor() {
               <label htmlFor="landing-subtitle" className="mb-1 block text-sm text-dark-400">
                 {t('admin.landings.subtitle')}
               </label>
-              <textarea
+              <LocalizedInput
                 id="landing-subtitle"
                 value={subtitle}
-                onChange={(e) => setSubtitle(e.target.value)}
+                onChange={setSubtitle}
+                locale={editingLocale}
+                multiline
                 rows={2}
-                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500"
               />
             </div>
 
@@ -606,22 +658,22 @@ export default function AdminLandingEditor() {
                   <label className="mb-1 block text-sm text-dark-400">
                     {t('admin.landings.metaTitle')}
                   </label>
-                  <input
-                    type="text"
+                  <LocalizedInput
                     value={metaTitle}
-                    onChange={(e) => setMetaTitle(e.target.value)}
-                    className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500"
+                    onChange={setMetaTitle}
+                    locale={editingLocale}
                   />
                 </div>
                 <div>
                   <label className="mb-1 block text-sm text-dark-400">
                     {t('admin.landings.metaDesc')}
                   </label>
-                  <textarea
+                  <LocalizedInput
                     value={metaDescription}
-                    onChange={(e) => setMetaDescription(e.target.value)}
+                    onChange={setMetaDescription}
+                    locale={editingLocale}
+                    multiline
                     rows={2}
-                    className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500"
                   />
                 </div>
               </div>
@@ -643,7 +695,9 @@ export default function AdminLandingEditor() {
                     key={feature._id}
                     feature={feature}
                     index={index}
-                    onUpdate={updateFeature}
+                    locale={editingLocale}
+                    onUpdateIcon={updateFeatureIcon}
+                    onUpdateLocalized={updateFeatureLocalized}
                     onRemove={removeFeature}
                   />
                 ))}
@@ -816,11 +870,12 @@ export default function AdminLandingEditor() {
               <label className="mb-1 block text-sm text-dark-400">
                 {t('admin.landings.footerText')}
               </label>
-              <textarea
+              <LocalizedInput
                 value={footerText}
-                onChange={(e) => setFooterText(e.target.value)}
+                onChange={setFooterText}
+                locale={editingLocale}
+                multiline
                 rows={4}
-                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500"
               />
             </div>
             <div>
diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
index 85453fe..5f237ff 100644
--- a/src/pages/QuickPurchase.tsx
+++ b/src/pages/QuickPurchase.tsx
@@ -12,21 +12,10 @@ import type {
   LandingPaymentMethod,
   PurchaseRequest,
 } from '../api/landings';
+import LanguageSwitcher from '../components/LanguageSwitcher';
 import { cn } from '../lib/utils';
 import { getApiErrorMessage } from '../utils/api-error';
-
-// ============================================================
-// Helpers
-// ============================================================
-
-function formatPrice(kopeks: number): string {
-  const rubles = kopeks / 100;
-  return new Intl.NumberFormat('ru-RU', {
-    style: 'currency',
-    currency: 'RUB',
-    maximumFractionDigits: 0,
-  }).format(rubles);
-}
+import { formatPrice } from '../utils/format';
 
 function detectContactType(value: string): 'email' | 'telegram' {
   return value.startsWith('@') ? 'telegram' : 'email';
@@ -258,7 +247,7 @@ function TariffCard({
       aria-checked={isSelected}
       onClick={onSelect}
       className={cn(
-        'relative flex w-full flex-col rounded-2xl border p-5 text-left transition-all duration-200',
+        'relative flex w-full flex-col rounded-2xl border p-5 text-start transition-all duration-200',
         isSelected
           ? 'border-accent-500/50 bg-accent-500/5 ring-1 ring-accent-500/25'
           : 'border-dark-800/50 bg-dark-900/50 hover:border-dark-700/50 hover:bg-dark-800/30',
@@ -356,7 +345,7 @@ function PaymentMethodCard({
       aria-checked={isSelected}
       onClick={onSelect}
       className={cn(
-        'flex w-full items-center gap-4 rounded-2xl border p-4 text-left transition-all duration-200',
+        'flex w-full items-center gap-4 rounded-2xl border p-4 text-start transition-all duration-200',
         isSelected
           ? 'border-accent-500/50 bg-accent-500/5'
           : 'border-dark-800/50 bg-dark-900/50 hover:border-dark-700/50 hover:bg-dark-800/30',
@@ -535,7 +524,7 @@ function SummaryCard({
 
 export default function QuickPurchase() {
   const { slug } = useParams<{ slug: string }>();
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   // Fetch config
   const {
@@ -543,8 +532,8 @@ export default function QuickPurchase() {
     isLoading,
     error,
   } = useQuery({
-    queryKey: ['landing-config', slug],
-    queryFn: () => landingApi.getConfig(slug!),
+    queryKey: ['landing-config', slug, i18n.language],
+    queryFn: () => landingApi.getConfig(slug!, i18n.language),
     enabled: !!slug,
     staleTime: 60_000,
     retry: 1,
@@ -586,7 +575,9 @@ export default function QuickPurchase() {
   // Filter tariffs to only those that have the selected period
   const visibleTariffs = useMemo(() => {
     if (!config || !selectedPeriodDays) return config?.tariffs ?? [];
-    return config.tariffs.filter((t) => t.periods.some((p) => p.days === selectedPeriodDays));
+    return config.tariffs.filter((tariff) =>
+      tariff.periods.some((p) => p.days === selectedPeriodDays),
+    );
   }, [config, selectedPeriodDays]);
 
   // Auto-select first tariff, period, method on config load
@@ -611,7 +602,7 @@ export default function QuickPurchase() {
   // When period changes, auto-select first visible tariff if current is hidden
   useEffect(() => {
     if (!visibleTariffs.length) return;
-    const currentVisible = visibleTariffs.find((t) => t.id === selectedTariffId);
+    const currentVisible = visibleTariffs.find((tariff) => tariff.id === selectedTariffId);
     if (!currentVisible) {
       setSelectedTariffId(visibleTariffs[0].id);
     }
@@ -752,6 +743,11 @@ export default function QuickPurchase() {
   return (
     <div className="min-h-dvh bg-dark-950">
       <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
+        {/* Language switcher */}
+        <div className="mb-4 flex justify-end">
+          <LanguageSwitcher />
+        </div>
+
         {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
diff --git a/src/utils/format.ts b/src/utils/format.ts
new file mode 100644
index 0000000..ca851a1
--- /dev/null
+++ b/src/utils/format.ts
@@ -0,0 +1,8 @@
+export function formatPrice(kopeks: number): string {
+  const rubles = kopeks / 100;
+  return new Intl.NumberFormat('ru-RU', {
+    style: 'currency',
+    currency: 'RUB',
+    maximumFractionDigits: 0,
+  }).format(rubles);
+}

From 6a92814ce25bb718ce29450adbd7d01775e4e1dc Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 16:55:13 +0300
Subject: [PATCH 05/29] =?UTF-8?q?fix:=20admin=20landing=20editor=20?=
 =?UTF-8?q?=E2=80=94=20tariff=20period=20mapping=20and=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use data.id instead of positional index for tariffPeriodsMap
- Clean up allowedPeriods when tariff is unchecked
- Filter out empty period arrays and orphaned tariff keys on submit
---
 src/pages/AdminLandingEditor.tsx | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/pages/AdminLandingEditor.tsx b/src/pages/AdminLandingEditor.tsx
index 640eb07..fc732da 100644
--- a/src/pages/AdminLandingEditor.tsx
+++ b/src/pages/AdminLandingEditor.tsx
@@ -288,9 +288,9 @@ export default function AdminLandingEditor() {
   const tariffPeriodsData = tariffDetailQueries.map((q) => q.data);
   const tariffPeriodsMap = useMemo(() => {
     const map: Record<number, PeriodPrice[]> = {};
-    tariffPeriodsData.forEach((data, i) => {
+    tariffPeriodsData.forEach((data) => {
       if (data) {
-        map[selectedTariffIds[i]] = data.period_prices;
+        map[data.id] = data.period_prices;
       }
     });
     return map;
@@ -408,6 +408,13 @@ export default function AdminLandingEditor() {
     const cleanFeatures: AdminLandingFeature[] = features.map(({ _id: _, ...rest }) => rest);
     const cleanMethods = paymentMethods.map(({ _id: _, ...rest }) => rest);
 
+    // Filter out empty period arrays and periods for non-selected tariffs
+    const cleanPeriods = Object.fromEntries(
+      Object.entries(allowedPeriods).filter(
+        ([key, days]) => days.length > 0 && selectedTariffIds.includes(Number(key)),
+      ),
+    );
+
     const data: LandingCreateRequest = {
       slug,
       title,
@@ -416,7 +423,7 @@ export default function AdminLandingEditor() {
       features: cleanFeatures,
       footer_text: nonEmptyDict(footerText),
       allowed_tariff_ids: selectedTariffIds,
-      allowed_periods: allowedPeriods,
+      allowed_periods: cleanPeriods,
       payment_methods: cleanMethods,
       gift_enabled: giftEnabled,
       custom_css: customCss || undefined,
@@ -509,9 +516,19 @@ export default function AdminLandingEditor() {
 
   // ---- Tariff/period helpers ----
   const toggleTariff = (tariffId: number) => {
-    setSelectedTariffIds((prev) =>
-      prev.includes(tariffId) ? prev.filter((id) => id !== tariffId) : [...prev, tariffId],
-    );
+    setSelectedTariffIds((prev) => {
+      if (prev.includes(tariffId)) {
+        // Clean up allowedPeriods for unchecked tariff
+        const key = String(tariffId);
+        setAllowedPeriods((ap) => {
+          if (!(key in ap)) return ap;
+          const { [key]: _, ...rest } = ap;
+          return rest;
+        });
+        return prev.filter((id) => id !== tariffId);
+      }
+      return [...prev, tariffId];
+    });
   };
 
   const togglePeriodFromTariff = (tariffId: number, days: number, allPeriods: PeriodPrice[]) => {

From 6755c1dc458e7f3ff68fb180306f72b17ff2a5b8 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 17:00:05 +0300
Subject: [PATCH 06/29] =?UTF-8?q?fix:=20landing=20list=20crash=20=E2=80=94?=
 =?UTF-8?q?=20title=20is=20now=20LocaleDict,=20not=20string?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update LandingListItem.title type to LocaleDict
- Add resolveLocaleDisplay() helper for extracting display string
- Use resolveLocaleDisplay() in landing list and delete confirm
---
 src/api/landings.ts         | 9 ++++++++-
 src/pages/AdminLandings.tsx | 8 +++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/api/landings.ts b/src/api/landings.ts
index b40ecfc..d940139 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -108,7 +108,7 @@ export interface AdminLandingFeature {
 export interface LandingListItem {
   id: number;
   slug: string;
-  title: string;
+  title: LocaleDict;
   is_active: boolean;
   display_order: number;
   gift_enabled: boolean;
@@ -167,6 +167,13 @@ export type LandingUpdateRequest = Partial<LandingCreateRequest>;
  * If it's a string, wraps it as `{ ru: value }`.
  * If null/undefined, returns the fallback.
  */
+/** Extract best display string from a LocaleDict: ru → en → first available → '' */
+export function resolveLocaleDisplay(dict: LocaleDict | string | null | undefined): string {
+  if (!dict) return '';
+  if (typeof dict === 'string') return dict;
+  return dict.ru || dict.en || Object.values(dict).find((v) => v?.trim()) || '';
+}
+
 export function toLocaleDict(
   value: string | LocaleDict | null | undefined,
   fallback: LocaleDict = {},
diff --git a/src/pages/AdminLandings.tsx b/src/pages/AdminLandings.tsx
index e65ff2c..1511d0a 100644
--- a/src/pages/AdminLandings.tsx
+++ b/src/pages/AdminLandings.tsx
@@ -2,7 +2,7 @@ import { useState, useCallback, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { adminLandingsApi, LandingListItem } from '../api/landings';
+import { adminLandingsApi, LandingListItem, resolveLocaleDisplay } from '../api/landings';
 import { useNotify } from '@/platform';
 import { copyToClipboard } from '../utils/clipboard';
 import { getApiErrorMessage } from '../utils/api-error';
@@ -137,7 +137,9 @@ function SortableLandingCard({
         {/* Content */}
         <div className="min-w-0 flex-1">
           <div className="mb-1 flex items-center gap-2">
-            <h3 className="truncate font-medium text-dark-100">{landing.title}</h3>
+            <h3 className="truncate font-medium text-dark-100">
+              {resolveLocaleDisplay(landing.title)}
+            </h3>
             <span className="rounded bg-dark-800 px-2 py-0.5 text-xs text-dark-400">
               {landing.slug}
             </span>
@@ -204,7 +206,7 @@ function SortableLandingCard({
             )}
             title={
               isPendingDelete
-                ? t('admin.landings.deleteConfirm', { title: landing.title })
+                ? t('admin.landings.deleteConfirm', { title: resolveLocaleDisplay(landing.title) })
                 : t('common.delete')
             }
           >

From 9bd58cb914623b75ec2a035e8c6e077b0fe45e8d Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 18:03:27 +0300
Subject: [PATCH 07/29] fix: handle Pydantic validation errors in notify +
 nullify empty optional fields

- getApiErrorMessage now formats Pydantic [{loc, msg}] arrays as readable strings
- LandingPaymentMethod description/icon_url nullable
- Send null instead of empty string for optional payment method fields
---
 src/api/landings.ts              |  4 ++--
 src/pages/AdminLandingEditor.tsx |  6 +++++-
 src/utils/api-error.ts           | 13 ++++++++++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/api/landings.ts b/src/api/landings.ts
index d940139..2b41bb4 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -30,8 +30,8 @@ export interface LandingTariff {
 export interface LandingPaymentMethod {
   method_id: string;
   display_name: string;
-  description: string;
-  icon_url: string;
+  description: string | null;
+  icon_url: string | null;
   sort_order: number;
 }
 
diff --git a/src/pages/AdminLandingEditor.tsx b/src/pages/AdminLandingEditor.tsx
index fc732da..6fb1729 100644
--- a/src/pages/AdminLandingEditor.tsx
+++ b/src/pages/AdminLandingEditor.tsx
@@ -406,7 +406,11 @@ export default function AdminLandingEditor() {
 
     // Strip _id before sending to API
     const cleanFeatures: AdminLandingFeature[] = features.map(({ _id: _, ...rest }) => rest);
-    const cleanMethods = paymentMethods.map(({ _id: _, ...rest }) => rest);
+    const cleanMethods = paymentMethods.map(({ _id: _, ...rest }) => ({
+      ...rest,
+      description: rest.description || null,
+      icon_url: rest.icon_url || null,
+    }));
 
     // Filter out empty period arrays and periods for non-selected tariffs
     const cleanPeriods = Object.fromEntries(
diff --git a/src/utils/api-error.ts b/src/utils/api-error.ts
index 04384e0..b33e2ff 100644
--- a/src/utils/api-error.ts
+++ b/src/utils/api-error.ts
@@ -2,7 +2,18 @@ import axios from 'axios';
 
 export function getApiErrorMessage(err: unknown, fallback: string): string {
   if (axios.isAxiosError(err)) {
-    return err.response?.data?.detail ?? fallback;
+    const detail = err.response?.data?.detail;
+    if (typeof detail === 'string') return detail;
+    // Pydantic V2 validation errors: [{type, loc, msg, input, ctx}]
+    if (Array.isArray(detail) && detail.length > 0) {
+      return detail
+        .map((e: { loc?: (string | number)[]; msg?: string }) => {
+          const field = e.loc?.filter((s) => s !== 'body').join('.') ?? '';
+          return field ? `${field}: ${e.msg}` : (e.msg ?? '');
+        })
+        .join('; ');
+    }
+    return fallback;
   }
   return fallback;
 }

From b852e1e4cda7303e19ac7af8c3826e2ba52ac68a Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 19:56:38 +0300
Subject: [PATCH 08/29] feat: guest purchase activation UI & landing editor
 improvements

- Add PendingActivationState component with activate button
- Add double-click ref guard on activation handler
- Add activatePurchase API function
- Update PurchaseStatus type with new fields
- Show gift message and recipient contact in success state
- Add pending activation i18n translations (ru, en, zh, fa)
- Improve AdminLandingEditor with allowed_periods support
---
 src/api/landings.ts              |  23 +++-
 src/locales/en.json              |   8 +-
 src/locales/fa.json              |   8 +-
 src/locales/ru.json              |   8 +-
 src/locales/zh.json              |   8 +-
 src/pages/AdminLandingEditor.tsx | 230 +++++++++++++++++++++++++------
 src/pages/PurchaseSuccess.tsx    | 150 ++++++++++++++++++--
 7 files changed, 378 insertions(+), 57 deletions(-)

diff --git a/src/api/landings.ts b/src/api/landings.ts
index 2b41bb4..947dcad 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -33,8 +33,22 @@ export interface LandingPaymentMethod {
   description: string | null;
   icon_url: string | null;
   sort_order: number;
+  min_amount_kopeks: number | null;
+  max_amount_kopeks: number | null;
+  currency: string | null;
+  return_url: string | null;
 }
 
+/** Editable fields on a payment method in the landing editor */
+export type EditableMethodField =
+  | 'display_name'
+  | 'description'
+  | 'icon_url'
+  | 'min_amount_kopeks'
+  | 'max_amount_kopeks'
+  | 'currency'
+  | 'return_url';
+
 export interface LandingConfig {
   slug: string;
   title: string;
@@ -67,13 +81,15 @@ export interface PurchaseResponse {
 }
 
 export interface PurchaseStatus {
-  status: 'pending' | 'paid' | 'delivered' | 'failed' | 'expired';
+  status: 'pending' | 'paid' | 'delivered' | 'pending_activation' | 'failed' | 'expired';
   subscription_url: string | null;
   subscription_crypto_link: string | null;
   is_gift: boolean;
   contact_value: string | null;
+  recipient_contact_value: string | null;
   period_days: number | null;
   tariff_name: string | null;
+  gift_message: string | null;
 }
 
 // ============================================================
@@ -203,6 +219,11 @@ export const landingApi = {
     const response = await apiClient.get(`/cabinet/landing/purchase/${token}`);
     return response.data;
   },
+
+  activatePurchase: async (token: string): Promise<PurchaseStatus> => {
+    const response = await apiClient.post(`/cabinet/landing/activate/${token}`);
+    return response.data;
+  },
 };
 
 // ============================================================
diff --git a/src/locales/en.json b/src/locales/en.json
index 16558f9..c186498 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3964,6 +3964,12 @@
     "copyLink": "Copy link",
     "giftToggleLabel": "Purchase type",
     "pollTimedOut": "Taking longer than expected",
-    "pollTimedOutDesc": "Payment processing is taking longer than usual. You can try checking again."
+    "pollTimedOutDesc": "Payment processing is taking longer than usual. You can try checking again.",
+    "pendingActivation": "Subscription ready to activate",
+    "pendingActivationDesc": "You already have an active subscription. Activating will replace it.",
+    "activateNow": "Activate now",
+    "activating": "Activating...",
+    "activationFailed": "Activation failed",
+    "giftMessage": "Message"
   }
 }
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 49b426f..e4188f0 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -3515,6 +3515,12 @@
     "copyLink": "کپی لینک",
     "giftToggleLabel": "\u0646\u0648\u0639 \u062e\u0631\u06cc\u062f",
     "pollTimedOut": "\u0632\u0645\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f",
-    "pollTimedOutDesc": "\u067e\u0631\u062f\u0627\u0632\u0634 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u062d\u062f \u0645\u0639\u0645\u0648\u0644 \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f\u0647 \u0627\u0633\u062a. \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f."
+    "pollTimedOutDesc": "\u067e\u0631\u062f\u0627\u0632\u0634 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u062d\u062f \u0645\u0639\u0645\u0648\u0644 \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f\u0647 \u0627\u0633\u062a. \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.",
+    "pendingActivation": "اشتراک آماده فعال‌سازی",
+    "pendingActivationDesc": "شما قبلاً اشتراک فعالی دارید. فعال‌سازی اشتراک جدید جایگزین اشتراک فعلی می‌شود.",
+    "activateNow": "فعال‌سازی",
+    "activating": "در حال فعال‌سازی...",
+    "activationFailed": "خطا در فعال‌سازی",
+    "giftMessage": "پیام"
   }
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 35b82d4..dcc866b 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -4527,6 +4527,12 @@
     "copyLink": "Скопировать ссылку",
     "giftToggleLabel": "Тип покупки",
     "pollTimedOut": "Занимает больше времени, чем ожидалось",
-    "pollTimedOutDesc": "Обработка платежа занимает больше времени, чем обычно. Вы можете попробовать проверить ещё раз."
+    "pollTimedOutDesc": "Обработка платежа занимает больше времени, чем обычно. Вы можете попробовать проверить ещё раз.",
+    "pendingActivation": "Подписка готова к активации",
+    "pendingActivationDesc": "У вас уже есть активная подписка. Активация новой заменит текущую.",
+    "activateNow": "Активировать",
+    "activating": "Активация...",
+    "activationFailed": "Ошибка активации",
+    "giftMessage": "Сообщение"
   }
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 8e35549..19db57b 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -3514,6 +3514,12 @@
     "copyLink": "复制链接",
     "giftToggleLabel": "\u8d2d\u4e70\u7c7b\u578b",
     "pollTimedOut": "\u5904\u7406\u65f6\u95f4\u8f83\u957f",
-    "pollTimedOutDesc": "\u4ed8\u6b3e\u5904\u7406\u65f6\u95f4\u6bd4\u5e73\u65f6\u957f\u3002\u60a8\u53ef\u4ee5\u5c1d\u8bd5\u518d\u6b21\u68c0\u67e5\u3002"
+    "pollTimedOutDesc": "\u4ed8\u6b3e\u5904\u7406\u65f6\u95f4\u6bd4\u5e73\u65f6\u957f\u3002\u60a8\u53ef\u4ee5\u5c1d\u8bd5\u518d\u6b21\u68c0\u67e5\u3002",
+    "pendingActivation": "订阅准备激活",
+    "pendingActivationDesc": "您已有活跃订阅。激活新订阅将替换当前订阅。",
+    "activateNow": "立即激活",
+    "activating": "激活中...",
+    "activationFailed": "激活失败",
+    "giftMessage": "留言"
   }
 }
diff --git a/src/pages/AdminLandingEditor.tsx b/src/pages/AdminLandingEditor.tsx
index 6fb1729..32349da 100644
--- a/src/pages/AdminLandingEditor.tsx
+++ b/src/pages/AdminLandingEditor.tsx
@@ -7,6 +7,7 @@ import {
   type LandingCreateRequest,
   type AdminLandingFeature,
   type LandingPaymentMethod,
+  type EditableMethodField,
   type LocaleDict,
   type SupportedLocale,
   toLocaleDict,
@@ -139,10 +140,13 @@ function SortableFeatureItem({
 
 interface SortableSelectedMethodProps {
   method: MethodWithId;
+  onUpdate: (methodId: string, field: EditableMethodField, value: string | number | null) => void;
   onRemove: (methodId: string) => void;
 }
 
-function SortableSelectedMethodCard({ method, onRemove }: SortableSelectedMethodProps) {
+function SortableSelectedMethodCard({ method, onUpdate, onRemove }: SortableSelectedMethodProps) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: method._id,
   });
@@ -159,24 +163,142 @@ function SortableSelectedMethodCard({ method, onRemove }: SortableSelectedMethod
       ref={setNodeRef}
       style={style}
       className={cn(
-        'flex items-center gap-2 rounded-lg border px-3 py-2',
+        'rounded-lg border',
         isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50',
       )}
     >
-      <button
-        {...attributes}
-        {...listeners}
-        className="flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
-      >
-        <GripIcon />
-      </button>
-      <span className="min-w-0 flex-1 truncate text-sm text-dark-100">{method.display_name}</span>
-      <button
-        onClick={() => onRemove(method.method_id)}
-        className="flex-shrink-0 text-dark-500 hover:text-error-400"
-      >
-        <TrashIcon />
-      </button>
+      <div className="flex items-center gap-2 px-3 py-2">
+        <button
+          {...attributes}
+          {...listeners}
+          className="flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
+        >
+          <GripIcon />
+        </button>
+        <button onClick={() => setExpanded((v) => !v)} className="min-w-0 flex-1 text-start">
+          <span className="truncate text-sm text-dark-100">{method.display_name}</span>
+        </button>
+        <button
+          onClick={() => setExpanded((v) => !v)}
+          className="flex-shrink-0 text-dark-500 hover:text-dark-300"
+        >
+          <ChevronDownIcon open={expanded} />
+        </button>
+        <button
+          onClick={() => onRemove(method.method_id)}
+          className="flex-shrink-0 text-dark-500 hover:text-error-400"
+        >
+          <TrashIcon />
+        </button>
+      </div>
+      {expanded && (
+        <div className="space-y-3 border-t border-dark-700 px-3 py-3">
+          <div>
+            <label className="mb-1 block text-xs text-dark-500">
+              {t('admin.landings.methodDisplayName', 'Display name')}
+            </label>
+            <input
+              type="text"
+              value={method.display_name}
+              onChange={(e) => onUpdate(method.method_id, 'display_name', e.target.value)}
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-dark-500">
+              {t('admin.landings.methodDescription', 'Description')}
+            </label>
+            <input
+              type="text"
+              value={method.description ?? ''}
+              onChange={(e) => onUpdate(method.method_id, 'description', e.target.value || null)}
+              placeholder={t('admin.landings.methodDescPlaceholder', 'Optional description')}
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-dark-500">
+              {t('admin.landings.methodIconUrl', 'Icon URL')}
+            </label>
+            <input
+              type="text"
+              value={method.icon_url ?? ''}
+              onChange={(e) => onUpdate(method.method_id, 'icon_url', e.target.value || null)}
+              placeholder="https://..."
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="mb-1 block text-xs text-dark-500">
+                {t('admin.landings.methodMinAmount', 'Min amount (kopeks)')}
+              </label>
+              <input
+                type="number"
+                min={0}
+                step={1}
+                value={method.min_amount_kopeks ?? ''}
+                onChange={(e) =>
+                  onUpdate(
+                    method.method_id,
+                    'min_amount_kopeks',
+                    e.target.value ? Math.max(0, Math.floor(Number(e.target.value))) : null,
+                  )
+                }
+                placeholder="—"
+                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs text-dark-500">
+                {t('admin.landings.methodMaxAmount', 'Max amount (kopeks)')}
+              </label>
+              <input
+                type="number"
+                min={0}
+                step={1}
+                value={method.max_amount_kopeks ?? ''}
+                onChange={(e) =>
+                  onUpdate(
+                    method.method_id,
+                    'max_amount_kopeks',
+                    e.target.value ? Math.max(0, Math.floor(Number(e.target.value))) : null,
+                  )
+                }
+                placeholder="—"
+                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-dark-500">
+              {t('admin.landings.methodCurrency', 'Currency')}
+            </label>
+            <input
+              type="text"
+              value={method.currency ?? ''}
+              onChange={(e) => onUpdate(method.method_id, 'currency', e.target.value || null)}
+              placeholder="RUB"
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-dark-500">
+              {t('admin.landings.methodReturnUrl', 'Return URL after payment')}
+            </label>
+            <input
+              type="text"
+              value={method.return_url ?? ''}
+              onChange={(e) => onUpdate(method.method_id, 'return_url', e.target.value || null)}
+              placeholder={t(
+                'admin.landings.methodReturnUrlPlaceholder',
+                'Default: cabinet success page. Use {token} for purchase token',
+              )}
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -336,7 +458,14 @@ export default function AdminLandingEditor() {
     setSelectedTariffIds(landingData.allowed_tariff_ids ?? []);
     setAllowedPeriods(landingData.allowed_periods ?? {});
     setPaymentMethods(
-      (landingData.payment_methods ?? []).map((m) => ({ ...m, _id: crypto.randomUUID() })),
+      (landingData.payment_methods ?? []).map((m) => ({
+        ...m,
+        _id: crypto.randomUUID(),
+        min_amount_kopeks: m.min_amount_kopeks ?? null,
+        max_amount_kopeks: m.max_amount_kopeks ?? null,
+        currency: m.currency ?? null,
+        return_url: m.return_url ?? null,
+      })),
     );
     setGiftEnabled(landingData.gift_enabled);
     setFooterText(toLocaleDict(landingData.footer_text));
@@ -410,6 +539,10 @@ export default function AdminLandingEditor() {
       ...rest,
       description: rest.description || null,
       icon_url: rest.icon_url || null,
+      min_amount_kopeks: rest.min_amount_kopeks ?? null,
+      max_amount_kopeks: rest.max_amount_kopeks ?? null,
+      currency: rest.currency || null,
+      return_url: rest.return_url || null,
     }));
 
     // Filter out empty period arrays and periods for non-selected tariffs
@@ -480,31 +613,47 @@ export default function AdminLandingEditor() {
   }, []);
 
   // ---- Payment methods helpers ----
-  const togglePaymentMethod = (methodId: string) => {
-    setPaymentMethods((prev) => {
-      const exists = prev.find((m) => m.method_id === methodId);
-      if (exists) {
-        return prev.filter((m) => m.method_id !== methodId);
-      }
-      const systemMethod = availablePaymentMethods.find((m) => m.method_id === methodId);
-      if (!systemMethod) return prev;
-      return [
-        ...prev,
-        {
-          _id: crypto.randomUUID(),
-          method_id: systemMethod.method_id,
-          display_name: systemMethod.display_name ?? systemMethod.default_display_name,
-          description: '',
-          icon_url: '',
-          sort_order: prev.length,
-        },
-      ];
-    });
-  };
+  const togglePaymentMethod = useCallback(
+    (methodId: string) => {
+      setPaymentMethods((prev) => {
+        const exists = prev.find((m) => m.method_id === methodId);
+        if (exists) {
+          return prev.filter((m) => m.method_id !== methodId);
+        }
+        const systemMethod = availablePaymentMethods.find((m) => m.method_id === methodId);
+        if (!systemMethod) return prev;
+        return [
+          ...prev,
+          {
+            _id: crypto.randomUUID(),
+            method_id: systemMethod.method_id,
+            display_name: systemMethod.display_name ?? systemMethod.default_display_name,
+            description: null,
+            icon_url: null,
+            sort_order: prev.length,
+            min_amount_kopeks: systemMethod.min_amount_kopeks ?? null,
+            max_amount_kopeks: systemMethod.max_amount_kopeks ?? null,
+            currency: null,
+            return_url: null,
+          },
+        ];
+      });
+    },
+    [availablePaymentMethods],
+  );
 
-  const removePaymentMethod = (methodId: string) => {
+  const updatePaymentMethod = useCallback(
+    (methodId: string, field: EditableMethodField, value: string | number | null) => {
+      setPaymentMethods((prev) =>
+        prev.map((m) => (m.method_id === methodId ? { ...m, [field]: value } : m)),
+      );
+    },
+    [],
+  );
+
+  const removePaymentMethod = useCallback((methodId: string) => {
     setPaymentMethods((prev) => prev.filter((m) => m.method_id !== methodId));
-  };
+  }, []);
 
   const handleMethodDragEnd = useCallback((event: DragEndEvent) => {
     const { active, over } = event;
@@ -857,6 +1006,7 @@ export default function AdminLandingEditor() {
                         <SortableSelectedMethodCard
                           key={method._id}
                           method={method}
+                          onUpdate={updatePaymentMethod}
                           onRemove={removePaymentMethod}
                         />
                       ))}
diff --git a/src/pages/PurchaseSuccess.tsx b/src/pages/PurchaseSuccess.tsx
index bc4ddf1..c904ab4 100644
--- a/src/pages/PurchaseSuccess.tsx
+++ b/src/pages/PurchaseSuccess.tsx
@@ -49,16 +49,20 @@ function SuccessState({
   subscriptionUrl,
   cryptoLink,
   contactValue,
+  recipientContactValue,
   tariffName,
   periodDays,
   isGift,
+  giftMessage,
 }: {
   subscriptionUrl: string | null;
   cryptoLink: string | null;
   contactValue: string | null;
+  recipientContactValue: string | null;
   tariffName: string | null;
   periodDays: number | null;
   isGift: boolean;
+  giftMessage: string | null;
 }) {
   const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
@@ -85,6 +89,7 @@ function SuccessState({
   }, [subscriptionUrl, cryptoLink]);
 
   const displayUrl = subscriptionUrl ?? cryptoLink;
+  const displayContact = isGift ? recipientContactValue : contactValue;
 
   return (
     <motion.div
@@ -128,11 +133,16 @@ function SuccessState({
             {tariffName} — {periodDays} {t('landing.daysAccess')}
           </p>
         )}
-        {contactValue && (
+        {displayContact && (
           <p className="mt-2 text-sm text-dark-400">
             {isGift
-              ? t('landing.giftSentTo', { contact: contactValue })
-              : t('landing.keySentTo', { contact: contactValue })}
+              ? t('landing.giftSentTo', { contact: displayContact })
+              : t('landing.keySentTo', { contact: displayContact })}
+          </p>
+        )}
+        {isGift && giftMessage && (
+          <p className="mt-2 text-sm italic text-dark-400">
+            {t('landing.giftMessage')}: {giftMessage}
           </p>
         )}
       </div>
@@ -199,6 +209,85 @@ function SuccessState({
   );
 }
 
+function PendingActivationState({
+  tariffName,
+  periodDays,
+  giftMessage,
+  isGift,
+  isActivating,
+  onActivate,
+}: {
+  tariffName: string | null;
+  periodDays: number | null;
+  giftMessage: string | null;
+  isGift: boolean;
+  isActivating: boolean;
+  onActivate: () => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      {/* Warning icon */}
+      <div className="flex h-20 w-20 items-center justify-center rounded-full bg-warning-500/10">
+        <svg
+          className="h-10 w-10 text-warning-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+          />
+        </svg>
+      </div>
+
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">{t('landing.pendingActivation')}</h1>
+        {tariffName && periodDays && (
+          <p className="mt-1 text-sm text-dark-300">
+            {tariffName} — {periodDays} {t('landing.daysAccess')}
+          </p>
+        )}
+        <p className="mt-2 text-sm text-dark-400">{t('landing.pendingActivationDesc')}</p>
+        {isGift && giftMessage && (
+          <p className="mt-2 text-sm italic text-dark-400">
+            {t('landing.giftMessage')}: {giftMessage}
+          </p>
+        )}
+      </div>
+
+      <button
+        type="button"
+        onClick={onActivate}
+        disabled={isActivating}
+        className={cn(
+          'flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium text-white transition-colors',
+          isActivating
+            ? 'cursor-not-allowed bg-accent-500/50'
+            : 'bg-accent-500 hover:bg-accent-400',
+        )}
+      >
+        {isActivating ? (
+          <>
+            <Spinner className="h-4 w-4" />
+            {t('landing.activating')}
+          </>
+        ) : (
+          t('landing.activateNow')
+        )}
+      </button>
+    </motion.div>
+  );
+}
+
 function FailedState() {
   const { t } = useTranslation();
 
@@ -278,9 +367,13 @@ function PollTimedOutState({ onRetry }: { onRetry: () => void }) {
 // ============================================================
 
 export default function PurchaseSuccess() {
+  const { t } = useTranslation();
   const { token } = useParams<{ token: string }>();
   const pollStart = useRef(Date.now());
   const [pollTimedOut, setPollTimedOut] = useState(false);
+  const [isActivating, setIsActivating] = useState(false);
+  const [activationError, setActivationError] = useState(false);
+  const activatingRef = useRef(false);
 
   // Referrer-Policy: prevent leaking payment token via referer header
   useEffect(() => {
@@ -294,7 +387,7 @@ export default function PurchaseSuccess() {
   }, []);
 
   const {
-    data: status,
+    data: purchaseStatus,
     isError,
     refetch,
   } = useQuery({
@@ -321,8 +414,25 @@ export default function PurchaseSuccess() {
     refetch();
   }, [refetch]);
 
-  const isSuccess = status?.status === 'delivered';
-  const isFailed = status?.status === 'failed' || status?.status === 'expired';
+  const handleActivate = useCallback(async () => {
+    if (!token || activatingRef.current) return;
+    activatingRef.current = true;
+    setIsActivating(true);
+    setActivationError(false);
+    try {
+      await landingApi.activatePurchase(token);
+      await refetch();
+    } catch {
+      setActivationError(true);
+    } finally {
+      activatingRef.current = false;
+      setIsActivating(false);
+    }
+  }, [token, refetch]);
+
+  const isSuccess = purchaseStatus?.status === 'delivered';
+  const isPendingActivation = purchaseStatus?.status === 'pending_activation';
+  const isFailed = purchaseStatus?.status === 'failed' || purchaseStatus?.status === 'expired';
 
   return (
     <div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4">
@@ -331,13 +441,29 @@ export default function PurchaseSuccess() {
           <FailedState />
         ) : isSuccess ? (
           <SuccessState
-            subscriptionUrl={status.subscription_url}
-            cryptoLink={status.subscription_crypto_link}
-            contactValue={status.contact_value}
-            tariffName={status.tariff_name}
-            periodDays={status.period_days}
-            isGift={status.is_gift}
+            subscriptionUrl={purchaseStatus.subscription_url}
+            cryptoLink={purchaseStatus.subscription_crypto_link}
+            contactValue={purchaseStatus.contact_value}
+            recipientContactValue={purchaseStatus.recipient_contact_value}
+            tariffName={purchaseStatus.tariff_name}
+            periodDays={purchaseStatus.period_days}
+            isGift={purchaseStatus.is_gift}
+            giftMessage={purchaseStatus.gift_message}
           />
+        ) : isPendingActivation ? (
+          <div className="space-y-4">
+            <PendingActivationState
+              tariffName={purchaseStatus.tariff_name}
+              periodDays={purchaseStatus.period_days}
+              giftMessage={purchaseStatus.gift_message}
+              isGift={purchaseStatus.is_gift}
+              isActivating={isActivating}
+              onActivate={handleActivate}
+            />
+            {activationError && (
+              <p className="text-center text-sm text-error-400">{t('landing.activationFailed')}</p>
+            )}
+          </div>
         ) : isFailed ? (
           <FailedState />
         ) : pollTimedOut ? (

From d228d997d8360f8a15a23ec007a06048af7bd47d Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 21:59:59 +0300
Subject: [PATCH 09/29] feat: guest purchase cabinet credentials UI

- CabinetCredentialsState with copyable email/password fields
- Auto-login via JWT token with checkAdminStatus
- /auto-login route with ErrorBoundary and no-referrer meta
- Narrowed contact_type to 'email' | 'telegram' | null
- Disabled button styling for PendingActivation go-to-cabinet
- i18n: added landing.copy key to all 4 locales
---
 src/App.tsx                   |  11 ++
 src/api/auth.ts               |   6 +
 src/api/landings.ts           |   4 +
 src/locales/en.json           |  13 +-
 src/locales/fa.json           |  13 +-
 src/locales/ru.json           |  13 +-
 src/locales/zh.json           |  13 +-
 src/pages/AutoLogin.tsx       |  82 ++++++++++
 src/pages/PurchaseSuccess.tsx | 286 ++++++++++++++++++++++++++++++----
 9 files changed, 410 insertions(+), 31 deletions(-)
 create mode 100644 src/pages/AutoLogin.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 7b70b76..f7ace2c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,6 +40,7 @@ const Connection = lazy(() => import('./pages/Connection'));
 const ConnectionQR = lazy(() => import('./pages/ConnectionQR'));
 const QuickPurchase = lazy(() => import('./pages/QuickPurchase'));
 const PurchaseSuccess = lazy(() => import('./pages/PurchaseSuccess'));
+const AutoLogin = lazy(() => import('./pages/AutoLogin'));
 const TopUpMethodSelect = lazy(() => import('./pages/TopUpMethodSelect'));
 const TopUpAmount = lazy(() => import('./pages/TopUpAmount'));
 const ConnectedAccounts = lazy(() => import('./pages/ConnectedAccounts'));
@@ -219,6 +220,16 @@ function App() {
             </ErrorBoundary>
           }
         />
+        <Route
+          path="/auto-login"
+          element={
+            <ErrorBoundary level="app">
+              <LazyPage>
+                <AutoLogin />
+              </LazyPage>
+            </ErrorBoundary>
+          }
+        />
 
         {/* Protected routes */}
         <Route
diff --git a/src/api/auth.ts b/src/api/auth.ts
index bd5e1e6..88fd9ec 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -280,6 +280,12 @@ export const authApi = {
     return response.data;
   },
 
+  // Auto-login from guest purchase success page
+  autoLogin: async (token: string): Promise<AuthResponse> => {
+    const response = await apiClient.post<AuthResponse>('/cabinet/auth/login/auto', { token });
+    return response.data;
+  },
+
   // Account merge (no JWT required)
   getMergePreview: async (mergeToken: string): Promise<MergePreviewResponse> => {
     const response = await apiClient.get<MergePreviewResponse>(
diff --git a/src/api/landings.ts b/src/api/landings.ts
index 947dcad..610b831 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -90,6 +90,10 @@ export interface PurchaseStatus {
   period_days: number | null;
   tariff_name: string | null;
   gift_message: string | null;
+  contact_type: 'email' | 'telegram' | null;
+  cabinet_email: string | null;
+  cabinet_password: string | null;
+  auto_login_token: string | null;
 }
 
 // ============================================================
diff --git a/src/locales/en.json b/src/locales/en.json
index c186498..f6ca25d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3960,6 +3960,7 @@
     "total": "Total",
     "pay": "Pay",
     "choosePeriod": "Choose period",
+    "copy": "Copy",
     "copied": "Copied!",
     "copyLink": "Copy link",
     "giftToggleLabel": "Purchase type",
@@ -3970,6 +3971,16 @@
     "activateNow": "Activate now",
     "activating": "Activating...",
     "activationFailed": "Activation failed",
-    "giftMessage": "Message"
+    "giftMessage": "Message",
+    "cabinetReady": "Your account is ready",
+    "cabinetEmail": "Email",
+    "cabinetPassword": "Password",
+    "goToCabinet": "Go to Cabinet",
+    "saveCredentials": "Save these login credentials",
+    "credentialsSentToEmail": "Login credentials sent to your email",
+    "giftSentSuccess": "Gift sent!",
+    "giftSentDesc": "Recipient will be notified by email",
+    "autoLoginFailed": "Auto-login failed",
+    "autoLoginProcessing": "Signing in..."
   }
 }
diff --git a/src/locales/fa.json b/src/locales/fa.json
index e4188f0..5b1bbb9 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -3511,6 +3511,7 @@
     "total": "مجموع",
     "pay": "پرداخت",
     "choosePeriod": "انتخاب دوره",
+    "copy": "کپی",
     "copied": "کپی شد!",
     "copyLink": "کپی لینک",
     "giftToggleLabel": "\u0646\u0648\u0639 \u062e\u0631\u06cc\u062f",
@@ -3521,6 +3522,16 @@
     "activateNow": "فعال‌سازی",
     "activating": "در حال فعال‌سازی...",
     "activationFailed": "خطا در فعال‌سازی",
-    "giftMessage": "پیام"
+    "giftMessage": "پیام",
+    "cabinetReady": "حساب شما آماده است",
+    "cabinetEmail": "ایمیل",
+    "cabinetPassword": "رمز عبور",
+    "goToCabinet": "رفتن به پنل کاربری",
+    "saveCredentials": "این اطلاعات ورود را ذخیره کنید",
+    "credentialsSentToEmail": "اطلاعات ورود به ایمیل شما ارسال شد",
+    "giftSentSuccess": "هدیه ارسال شد!",
+    "giftSentDesc": "گیرنده از طریق ایمیل مطلع خواهد شد",
+    "autoLoginFailed": "ورود خودکار ناموفق بود",
+    "autoLoginProcessing": "در حال ورود..."
   }
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
index dcc866b..774e1a8 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -4523,6 +4523,7 @@
     "total": "Итого",
     "pay": "Оплатить",
     "choosePeriod": "Выберите период",
+    "copy": "Скопировать",
     "copied": "Скопировано!",
     "copyLink": "Скопировать ссылку",
     "giftToggleLabel": "Тип покупки",
@@ -4533,6 +4534,16 @@
     "activateNow": "Активировать",
     "activating": "Активация...",
     "activationFailed": "Ошибка активации",
-    "giftMessage": "Сообщение"
+    "giftMessage": "Сообщение",
+    "cabinetReady": "Ваш аккаунт готов",
+    "cabinetEmail": "Email",
+    "cabinetPassword": "Пароль",
+    "goToCabinet": "Перейти в кабинет",
+    "saveCredentials": "Сохраните эти данные для входа",
+    "credentialsSentToEmail": "Данные для входа отправлены на email",
+    "giftSentSuccess": "Подарок отправлен!",
+    "giftSentDesc": "Получатель получит уведомление на email",
+    "autoLoginFailed": "Не удалось выполнить автоматический вход",
+    "autoLoginProcessing": "Выполняется вход..."
   }
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 19db57b..fd4cb1f 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -3510,6 +3510,7 @@
     "total": "总计",
     "pay": "支付",
     "choosePeriod": "选择时长",
+    "copy": "复制",
     "copied": "已复制！",
     "copyLink": "复制链接",
     "giftToggleLabel": "\u8d2d\u4e70\u7c7b\u578b",
@@ -3520,6 +3521,16 @@
     "activateNow": "立即激活",
     "activating": "激活中...",
     "activationFailed": "激活失败",
-    "giftMessage": "留言"
+    "giftMessage": "留言",
+    "cabinetReady": "您的账户已准备就绪",
+    "cabinetEmail": "邮箱",
+    "cabinetPassword": "密码",
+    "goToCabinet": "前往个人中心",
+    "saveCredentials": "请保存这些登录信息",
+    "credentialsSentToEmail": "登录信息已发送到您的邮箱",
+    "giftSentSuccess": "礼物已发送！",
+    "giftSentDesc": "收件人将通过邮件收到通知",
+    "autoLoginFailed": "自动登录失败",
+    "autoLoginProcessing": "正在登录..."
   }
 }
diff --git a/src/pages/AutoLogin.tsx b/src/pages/AutoLogin.tsx
new file mode 100644
index 0000000..0587951
--- /dev/null
+++ b/src/pages/AutoLogin.tsx
@@ -0,0 +1,82 @@
+import { useEffect, useState, useRef } from 'react';
+import { useSearchParams, useNavigate } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { authApi } from '../api/auth';
+import { useAuthStore } from '../store/auth';
+
+export default function AutoLogin() {
+  const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const { setTokens, setUser, checkAdminStatus } = useAuthStore();
+  const [error, setError] = useState(false);
+  const attemptedRef = useRef(false);
+
+  const token = searchParams.get('token');
+
+  useEffect(() => {
+    // Prevent referrer leaking the token
+    const meta = document.createElement('meta');
+    meta.name = 'referrer';
+    meta.content = 'no-referrer';
+    document.head.appendChild(meta);
+    return () => {
+      document.head.removeChild(meta);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!token || attemptedRef.current) {
+      if (!token) setError(true);
+      return;
+    }
+    attemptedRef.current = true;
+
+    authApi
+      .autoLogin(token)
+      .then(async (response) => {
+        setTokens(response.access_token, response.refresh_token);
+        setUser(response.user);
+        await checkAdminStatus();
+        navigate('/', { replace: true });
+      })
+      .catch(() => {
+        setError(true);
+      });
+  }, [token, navigate, setTokens, setUser, checkAdminStatus]);
+
+  return (
+    <div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4">
+      <div className="w-full max-w-sm rounded-2xl border border-dark-800/50 bg-dark-900/50 p-8 text-center">
+        {error ? (
+          <div className="space-y-4">
+            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-error-500/10">
+              <svg
+                className="h-8 w-8 text-error-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </div>
+            <p className="text-sm text-dark-300">{t('landing.autoLoginFailed')}</p>
+            <button
+              type="button"
+              onClick={() => navigate('/login', { replace: true })}
+              className="rounded-xl bg-accent-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent-400"
+            >
+              {t('auth.login', 'Login')}
+            </button>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="mx-auto h-10 w-10 animate-spin rounded-full border-2 border-dark-600 border-t-accent-500" />
+            <p className="text-sm text-dark-300">{t('landing.autoLoginProcessing')}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/PurchaseSuccess.tsx b/src/pages/PurchaseSuccess.tsx
index c904ab4..aacb47c 100644
--- a/src/pages/PurchaseSuccess.tsx
+++ b/src/pages/PurchaseSuccess.tsx
@@ -1,10 +1,12 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
-import { useParams } from 'react-router';
-import { useQuery } from '@tanstack/react-query';
+import { useParams, useNavigate } from 'react-router';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
 import { QRCodeSVG } from 'qrcode.react';
 import { landingApi } from '../api/landings';
+import { authApi } from '../api/auth';
+import { useAuthStore } from '../store/auth';
 import { copyToClipboard } from '../utils/clipboard';
 import { cn } from '../lib/utils';
 
@@ -45,6 +47,168 @@ function PendingState() {
   );
 }
 
+function CopyableField({ label, value }: { label: string; value: string }) {
+  const { t } = useTranslation();
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await copyToClipboard(value);
+      setCopied(true);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard write failed silently
+    }
+  }, [value]);
+
+  return (
+    <div className="flex items-center gap-2 rounded-xl bg-dark-800/50 px-4 py-3">
+      <div className="flex-1 text-left">
+        <p className="text-xs text-dark-400">{label}</p>
+        <p className="mt-0.5 font-mono text-sm text-dark-100">{value}</p>
+      </div>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className={cn(
+          'shrink-0 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors',
+          copied
+            ? 'bg-success-500/10 text-success-500'
+            : 'bg-dark-700/50 text-dark-300 hover:bg-dark-600/50',
+        )}
+      >
+        {copied ? t('landing.copied', 'Copied!') : t('landing.copy', 'Copy')}
+      </button>
+    </div>
+  );
+}
+
+function CabinetCredentialsState({
+  cabinetEmail,
+  cabinetPassword,
+  autoLoginToken,
+  tariffName,
+  periodDays,
+}: {
+  cabinetEmail: string;
+  cabinetPassword: string | null;
+  autoLoginToken: string | null;
+  tariffName: string | null;
+  periodDays: number | null;
+}) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { setTokens, setUser, checkAdminStatus } = useAuthStore();
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const [loginError, setLoginError] = useState(false);
+
+  const handleGoToCabinet = useCallback(async () => {
+    if (!autoLoginToken) {
+      navigate('/login');
+      return;
+    }
+    setIsLoggingIn(true);
+    setLoginError(false);
+    try {
+      const response = await authApi.autoLogin(autoLoginToken);
+      setTokens(response.access_token, response.refresh_token);
+      setUser(response.user);
+      await checkAdminStatus();
+      navigate('/');
+    } catch {
+      setLoginError(true);
+      setIsLoggingIn(false);
+    }
+  }, [autoLoginToken, navigate, setTokens, setUser, checkAdminStatus]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      {/* Animated checkmark */}
+      <motion.div
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
+        className="flex h-20 w-20 items-center justify-center rounded-full bg-success-500/10"
+      >
+        <motion.svg
+          initial={{ pathLength: 0, opacity: 0 }}
+          animate={{ pathLength: 1, opacity: 1 }}
+          transition={{ duration: 0.4, delay: 0.3 }}
+          className="h-10 w-10 text-success-500"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.5}
+        >
+          <motion.path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M5 13l4 4L19 7"
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 0.4, delay: 0.3 }}
+          />
+        </motion.svg>
+      </motion.div>
+
+      {/* Title */}
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">{t('landing.cabinetReady')}</h1>
+        {tariffName && periodDays !== null && (
+          <p className="mt-1 text-sm text-dark-300">
+            {tariffName} — {periodDays} {t('landing.daysAccess')}
+          </p>
+        )}
+      </div>
+
+      {/* Credentials */}
+      <div className="w-full space-y-3">
+        <CopyableField label={t('landing.cabinetEmail')} value={cabinetEmail} />
+        {cabinetPassword && (
+          <CopyableField label={t('landing.cabinetPassword')} value={cabinetPassword} />
+        )}
+        {cabinetPassword && <p className="text-xs text-dark-400">{t('landing.saveCredentials')}</p>}
+        {!cabinetPassword && (
+          <p className="text-xs text-dark-400">{t('landing.credentialsSentToEmail')}</p>
+        )}
+      </div>
+
+      {/* Go to Cabinet button */}
+      <button
+        type="button"
+        onClick={handleGoToCabinet}
+        disabled={isLoggingIn}
+        className={cn(
+          'flex w-full items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium text-white transition-colors',
+          isLoggingIn ? 'cursor-not-allowed bg-accent-500/50' : 'bg-accent-500 hover:bg-accent-400',
+        )}
+      >
+        {isLoggingIn ? (
+          <>
+            <Spinner className="h-4 w-4" />
+            {t('landing.autoLoginProcessing')}
+          </>
+        ) : (
+          t('landing.goToCabinet')
+        )}
+      </button>
+      {loginError && <p className="text-xs text-error-400">{t('landing.autoLoginFailed')}</p>}
+    </motion.div>
+  );
+}
+
 function SuccessState({
   subscriptionUrl,
   cryptoLink,
@@ -127,8 +291,10 @@ function SuccessState({
 
       {/* Title */}
       <div>
-        <h1 className="text-xl font-bold text-dark-50">{t('landing.purchaseSuccess')}</h1>
-        {tariffName && periodDays && (
+        <h1 className="text-xl font-bold text-dark-50">
+          {isGift ? t('landing.giftSentSuccess') : t('landing.purchaseSuccess')}
+        </h1>
+        {tariffName && periodDays !== null && (
           <p className="mt-1 text-sm text-dark-300">
             {tariffName} — {periodDays} {t('landing.daysAccess')}
           </p>
@@ -216,6 +382,7 @@ function PendingActivationState({
   isGift,
   isActivating,
   onActivate,
+  autoLoginToken,
 }: {
   tariffName: string | null;
   periodDays: number | null;
@@ -223,8 +390,30 @@ function PendingActivationState({
   isGift: boolean;
   isActivating: boolean;
   onActivate: () => void;
+  autoLoginToken: string | null;
 }) {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { setTokens, setUser, checkAdminStatus } = useAuthStore();
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+
+  const handleGoToCabinet = useCallback(async () => {
+    if (!autoLoginToken) {
+      navigate('/login');
+      return;
+    }
+    setIsLoggingIn(true);
+    try {
+      const response = await authApi.autoLogin(autoLoginToken);
+      setTokens(response.access_token, response.refresh_token);
+      setUser(response.user);
+      await checkAdminStatus();
+      navigate('/');
+    } catch {
+      setIsLoggingIn(false);
+      navigate('/login');
+    }
+  }, [autoLoginToken, navigate, setTokens, setUser, checkAdminStatus]);
 
   return (
     <motion.div
@@ -251,7 +440,7 @@ function PendingActivationState({
 
       <div>
         <h1 className="text-xl font-bold text-dark-50">{t('landing.pendingActivation')}</h1>
-        {tariffName && periodDays && (
+        {tariffName && periodDays !== null && (
           <p className="mt-1 text-sm text-dark-300">
             {tariffName} — {periodDays} {t('landing.daysAccess')}
           </p>
@@ -264,26 +453,51 @@ function PendingActivationState({
         )}
       </div>
 
-      <button
-        type="button"
-        onClick={onActivate}
-        disabled={isActivating}
-        className={cn(
-          'flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium text-white transition-colors',
-          isActivating
-            ? 'cursor-not-allowed bg-accent-500/50'
-            : 'bg-accent-500 hover:bg-accent-400',
+      <div className="flex w-full flex-col gap-3">
+        <button
+          type="button"
+          onClick={onActivate}
+          disabled={isActivating}
+          className={cn(
+            'flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium text-white transition-colors',
+            isActivating
+              ? 'cursor-not-allowed bg-accent-500/50'
+              : 'bg-accent-500 hover:bg-accent-400',
+          )}
+        >
+          {isActivating ? (
+            <>
+              <Spinner className="h-4 w-4" />
+              {t('landing.activating')}
+            </>
+          ) : (
+            t('landing.activateNow')
+          )}
+        </button>
+
+        {autoLoginToken && (
+          <button
+            type="button"
+            onClick={handleGoToCabinet}
+            disabled={isLoggingIn}
+            className={cn(
+              'flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium transition-colors',
+              isLoggingIn
+                ? 'cursor-not-allowed bg-dark-800/30 text-dark-400'
+                : 'bg-dark-800/50 text-dark-200 hover:bg-dark-700/50',
+            )}
+          >
+            {isLoggingIn ? (
+              <>
+                <Spinner className="h-4 w-4" />
+                {t('landing.autoLoginProcessing')}
+              </>
+            ) : (
+              t('landing.goToCabinet')
+            )}
+          </button>
         )}
-      >
-        {isActivating ? (
-          <>
-            <Spinner className="h-4 w-4" />
-            {t('landing.activating')}
-          </>
-        ) : (
-          t('landing.activateNow')
-        )}
-      </button>
+      </div>
     </motion.div>
   );
 }
@@ -386,6 +600,8 @@ export default function PurchaseSuccess() {
     };
   }, []);
 
+  const queryClient = useQueryClient();
+
   const {
     data: purchaseStatus,
     isError,
@@ -420,25 +636,40 @@ export default function PurchaseSuccess() {
     setIsActivating(true);
     setActivationError(false);
     try {
-      await landingApi.activatePurchase(token);
-      await refetch();
+      const result = await landingApi.activatePurchase(token);
+      queryClient.setQueryData(['purchase-status', token], result);
     } catch {
       setActivationError(true);
     } finally {
       activatingRef.current = false;
       setIsActivating(false);
     }
-  }, [token, refetch]);
+  }, [token, queryClient]);
 
   const isSuccess = purchaseStatus?.status === 'delivered';
   const isPendingActivation = purchaseStatus?.status === 'pending_activation';
   const isFailed = purchaseStatus?.status === 'failed' || purchaseStatus?.status === 'expired';
 
+  // Email self-purchase delivered → show cabinet credentials
+  const isEmailSelfPurchase =
+    isSuccess &&
+    purchaseStatus.contact_type === 'email' &&
+    !purchaseStatus.is_gift &&
+    purchaseStatus.cabinet_email;
+
   return (
     <div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4">
       <div className="w-full max-w-md rounded-2xl border border-dark-800/50 bg-dark-900/50 p-8">
         {isError ? (
           <FailedState />
+        ) : isEmailSelfPurchase ? (
+          <CabinetCredentialsState
+            cabinetEmail={purchaseStatus.cabinet_email!}
+            cabinetPassword={purchaseStatus.cabinet_password}
+            autoLoginToken={purchaseStatus.auto_login_token}
+            tariffName={purchaseStatus.tariff_name}
+            periodDays={purchaseStatus.period_days}
+          />
         ) : isSuccess ? (
           <SuccessState
             subscriptionUrl={purchaseStatus.subscription_url}
@@ -459,6 +690,7 @@ export default function PurchaseSuccess() {
               isGift={purchaseStatus.is_gift}
               isActivating={isActivating}
               onActivate={handleActivate}
+              autoLoginToken={purchaseStatus.auto_login_token}
             />
             {activationError && (
               <p className="text-center text-sm text-error-400">{t('landing.activationFailed')}</p>

From b9f1f59e3cbcd5c9839a4a2e9eebeefa01364898 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 22:16:41 +0300
Subject: [PATCH 10/29] fix: show total purchase count instead of paid on admin
 landings

---
 src/api/landings.ts         | 5 ++++-
 src/pages/AdminLandings.tsx | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/api/landings.ts b/src/api/landings.ts
index 610b831..c6addc0 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -136,9 +136,12 @@ export interface LandingListItem {
   method_count: number;
   purchase_stats: {
     total: number;
-    paid: number;
     pending: number;
+    paid: number;
+    delivered: number;
+    pending_activation: number;
     failed: number;
+    expired: number;
   };
   created_at: string | null;
   updated_at: string | null;
diff --git a/src/pages/AdminLandings.tsx b/src/pages/AdminLandings.tsx
index 1511d0a..dcc0746 100644
--- a/src/pages/AdminLandings.tsx
+++ b/src/pages/AdminLandings.tsx
@@ -160,7 +160,7 @@ function SortableLandingCard({
           </div>
           <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-dark-400">
             <span>
-              {landing.purchase_stats.paid} {t('admin.landings.purchases')}
+              {landing.purchase_stats.total} {t('admin.landings.purchases')}
             </span>
           </div>
         </div>

From d0be127d30574af1cb90503943bfa721dda8e645 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 23:30:53 +0300
Subject: [PATCH 11/29] feat: add sub-options UI for landing payment methods +
 extract components

Add interactive sub-option toggles (Card/SBP/Crypto) to the landing editor
payment method configuration. Extract SortableFeatureItem and
SortableSelectedMethodCard into dedicated component files to reduce
AdminLandingEditor from ~1160 to ~860 lines.
---
 src/api/landings.ts                           |   1 +
 src/components/admin/SortableFeatureItem.tsx  |  89 ++++++
 .../admin/SortableSelectedMethodCard.tsx      | 251 +++++++++++++++
 src/locales/en.json                           |   1 +
 src/locales/fa.json                           |   1 +
 src/locales/ru.json                           |   1 +
 src/locales/zh.json                           |   1 +
 src/pages/AdminLandingEditor.tsx              | 301 +++---------------
 8 files changed, 388 insertions(+), 258 deletions(-)
 create mode 100644 src/components/admin/SortableFeatureItem.tsx
 create mode 100644 src/components/admin/SortableSelectedMethodCard.tsx

diff --git a/src/api/landings.ts b/src/api/landings.ts
index c6addc0..27fd3ae 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -37,6 +37,7 @@ export interface LandingPaymentMethod {
   max_amount_kopeks: number | null;
   currency: string | null;
   return_url: string | null;
+  sub_options: Record<string, boolean> | null;
 }
 
 /** Editable fields on a payment method in the landing editor */
diff --git a/src/components/admin/SortableFeatureItem.tsx b/src/components/admin/SortableFeatureItem.tsx
new file mode 100644
index 0000000..c8ce4a0
--- /dev/null
+++ b/src/components/admin/SortableFeatureItem.tsx
@@ -0,0 +1,89 @@
+import { useTranslation } from 'react-i18next';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '../../lib/utils';
+import { GripIcon, TrashIcon } from '../icons/LandingIcons';
+import { LocalizedInput } from './LocalizedInput';
+import type { AdminLandingFeature, LocaleDict, SupportedLocale } from '../../api/landings';
+
+export type FeatureWithId = AdminLandingFeature & { _id: string };
+
+interface SortableFeatureProps {
+  feature: FeatureWithId;
+  index: number;
+  locale: SupportedLocale;
+  onUpdateIcon: (index: number, value: string) => void;
+  onUpdateLocalized: (index: number, field: 'title' | 'description', value: LocaleDict) => void;
+  onRemove: (index: number) => void;
+}
+
+export function SortableFeatureItem({
+  feature,
+  index,
+  locale,
+  onUpdateIcon,
+  onUpdateLocalized,
+  onRemove,
+}: SortableFeatureProps) {
+  const { t } = useTranslation();
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: feature._id,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : undefined,
+    position: isDragging ? 'relative' : undefined,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'flex items-start gap-2 rounded-lg border p-3',
+        isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50',
+      )}
+    >
+      <button
+        {...attributes}
+        {...listeners}
+        className="mt-2 flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
+      >
+        <GripIcon />
+      </button>
+      <div className="min-w-0 flex-1 space-y-2">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={feature.icon}
+            onChange={(e) => onUpdateIcon(index, e.target.value)}
+            placeholder={t('admin.landings.featureIcon')}
+            className="w-16 rounded-lg border border-dark-700 bg-dark-800 px-2 py-1.5 text-center text-sm text-dark-100 outline-none focus:border-accent-500"
+          />
+          <LocalizedInput
+            value={feature.title}
+            onChange={(v) => onUpdateLocalized(index, 'title', v)}
+            locale={locale}
+            placeholder={t('admin.landings.featureTitle')}
+            className="min-w-0 flex-1 rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+          />
+        </div>
+        <LocalizedInput
+          value={feature.description}
+          onChange={(v) => onUpdateLocalized(index, 'description', v)}
+          locale={locale}
+          placeholder={t('admin.landings.featureDesc')}
+          className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+        />
+      </div>
+      <button
+        onClick={() => onRemove(index)}
+        className="mt-2 flex-shrink-0 text-dark-500 hover:text-error-400"
+      >
+        <TrashIcon />
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/admin/SortableSelectedMethodCard.tsx b/src/components/admin/SortableSelectedMethodCard.tsx
new file mode 100644
index 0000000..e86ed6d
--- /dev/null
+++ b/src/components/admin/SortableSelectedMethodCard.tsx
@@ -0,0 +1,251 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '../../lib/utils';
+import { GripIcon, TrashIcon } from '../icons/LandingIcons';
+import type { LandingPaymentMethod, EditableMethodField } from '../../api/landings';
+import type { PaymentMethodSubOptionInfo } from '../../types';
+
+export type MethodWithId = LandingPaymentMethod & { _id: string };
+
+const ChevronDownIcon = ({ open }: { open: boolean }) => (
+  <svg
+    className={cn('h-5 w-5 transition-transform', open && 'rotate-180')}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+);
+
+interface SortableSelectedMethodProps {
+  method: MethodWithId;
+  availableSubOptions: PaymentMethodSubOptionInfo[] | null;
+  onUpdate: (methodId: string, field: EditableMethodField, value: string | number | null) => void;
+  onSubOptionsChange: (methodId: string, subOptions: Record<string, boolean>) => void;
+  onRemove: (methodId: string) => void;
+}
+
+export function SortableSelectedMethodCard({
+  method,
+  availableSubOptions,
+  onUpdate,
+  onSubOptionsChange,
+  onRemove,
+}: SortableSelectedMethodProps) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: method._id,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : undefined,
+    position: isDragging ? 'relative' : undefined,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'rounded-lg border',
+        isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50',
+      )}
+    >
+      <div className="flex items-center gap-2 px-3 py-2">
+        <button
+          {...attributes}
+          {...listeners}
+          className="flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
+        >
+          <GripIcon />
+        </button>
+        <button onClick={() => setExpanded((v) => !v)} className="min-w-0 flex-1 text-start">
+          <span className="truncate text-sm text-dark-100">{method.display_name}</span>
+        </button>
+        <button
+          onClick={() => setExpanded((v) => !v)}
+          className="flex-shrink-0 text-dark-500 hover:text-dark-300"
+        >
+          <ChevronDownIcon open={expanded} />
+        </button>
+        <button
+          onClick={() => onRemove(method.method_id)}
+          className="flex-shrink-0 text-dark-500 hover:text-error-400"
+        >
+          <TrashIcon />
+        </button>
+      </div>
+      {expanded && (
+        <div className="space-y-3 border-t border-dark-700 px-3 py-3">
+          <div>
+            <label className="mb-1 block text-xs text-dark-500">
+              {t('admin.landings.methodDisplayName', 'Display name')}
+            </label>
+            <input
+              type="text"
+              value={method.display_name}
+              onChange={(e) => onUpdate(method.method_id, 'display_name', e.target.value)}
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-dark-500">
+              {t('admin.landings.methodDescription', 'Description')}
+            </label>
+            <input
+              type="text"
+              value={method.description ?? ''}
+              onChange={(e) => onUpdate(method.method_id, 'description', e.target.value || null)}
+              placeholder={t('admin.landings.methodDescPlaceholder', 'Optional description')}
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-dark-500">
+              {t('admin.landings.methodIconUrl', 'Icon URL')}
+            </label>
+            <input
+              type="text"
+              value={method.icon_url ?? ''}
+              onChange={(e) => onUpdate(method.method_id, 'icon_url', e.target.value || null)}
+              placeholder="https://..."
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="mb-1 block text-xs text-dark-500">
+                {t('admin.landings.methodMinAmount', 'Min amount (kopeks)')}
+              </label>
+              <input
+                type="number"
+                min={0}
+                step={1}
+                value={method.min_amount_kopeks ?? ''}
+                onChange={(e) =>
+                  onUpdate(
+                    method.method_id,
+                    'min_amount_kopeks',
+                    e.target.value ? Math.max(0, Math.floor(Number(e.target.value))) : null,
+                  )
+                }
+                placeholder="—"
+                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs text-dark-500">
+                {t('admin.landings.methodMaxAmount', 'Max amount (kopeks)')}
+              </label>
+              <input
+                type="number"
+                min={0}
+                step={1}
+                value={method.max_amount_kopeks ?? ''}
+                onChange={(e) =>
+                  onUpdate(
+                    method.method_id,
+                    'max_amount_kopeks',
+                    e.target.value ? Math.max(0, Math.floor(Number(e.target.value))) : null,
+                  )
+                }
+                placeholder="—"
+                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-dark-500">
+              {t('admin.landings.methodCurrency', 'Currency')}
+            </label>
+            <input
+              type="text"
+              value={method.currency ?? ''}
+              onChange={(e) => onUpdate(method.method_id, 'currency', e.target.value || null)}
+              placeholder="RUB"
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-dark-500">
+              {t('admin.landings.methodReturnUrl', 'Return URL after payment')}
+            </label>
+            <input
+              type="text"
+              value={method.return_url ?? ''}
+              onChange={(e) => onUpdate(method.method_id, 'return_url', e.target.value || null)}
+              placeholder={t(
+                'admin.landings.methodReturnUrlPlaceholder',
+                'Default: cabinet success page. Use {token} for purchase token',
+              )}
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+            />
+          </div>
+          {availableSubOptions && availableSubOptions.length > 0 && (
+            <div>
+              <label className="mb-1.5 block text-xs text-dark-500">
+                {t('admin.landings.methodSubOptions', 'Payment sub-options')}
+              </label>
+              <div className="flex flex-wrap gap-2">
+                {availableSubOptions.map((opt) => {
+                  // Missing keys treated as enabled (opt-out model)
+                  const enabled = method.sub_options?.[opt.id] !== false;
+                  return (
+                    <button
+                      key={opt.id}
+                      type="button"
+                      role="checkbox"
+                      aria-checked={enabled}
+                      onClick={() => {
+                        const current =
+                          method.sub_options ??
+                          Object.fromEntries(availableSubOptions.map((o) => [o.id, true]));
+                        onSubOptionsChange(method.method_id, { ...current, [opt.id]: !enabled });
+                      }}
+                      className={cn(
+                        'flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs transition-colors',
+                        enabled
+                          ? 'border-accent-500/30 bg-accent-500/10 text-accent-300'
+                          : 'border-dark-700 bg-dark-800 text-dark-500',
+                      )}
+                    >
+                      <div
+                        aria-hidden="true"
+                        className={cn(
+                          'flex h-3.5 w-3.5 items-center justify-center rounded',
+                          enabled
+                            ? 'bg-accent-500 text-white'
+                            : 'border border-dark-600 bg-dark-700',
+                        )}
+                      >
+                        {enabled && (
+                          <svg
+                            className="h-2.5 w-2.5"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            strokeWidth={3}
+                          >
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                          </svg>
+                        )}
+                      </div>
+                      {opt.name}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index f6ca25d..64544e9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3192,6 +3192,7 @@
       "selectMethods": "Select available methods",
       "noSystemMethods": "No payment methods configured in the system",
       "methodOrder": "Drag to reorder",
+      "methodSubOptions": "Payment sub-options",
       "loadingPeriods": "Loading...",
       "periodDaySuffix": "d",
       "localeTab": "Language",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 5b1bbb9..1108247 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -2918,6 +2918,7 @@
       "selectMethods": "انتخاب روش‌های پرداخت موجود",
       "noSystemMethods": "هیچ روش پرداختی در سیستم پیکربندی نشده است",
       "methodOrder": "برای تغییر ترتیب بکشید",
+      "methodSubOptions": "گزینه‌های فرعی پرداخت",
       "loadingPeriods": "در حال بارگذاری...",
       "periodDaySuffix": "روز",
       "localeTab": "زبان",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 774e1a8..c6d5fb8 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -3747,6 +3747,7 @@
       "selectMethods": "Выберите доступные методы",
       "noSystemMethods": "В системе не настроено ни одного способа оплаты",
       "methodOrder": "Перетащите для изменения порядка",
+      "methodSubOptions": "Варианты оплаты",
       "loadingPeriods": "Загрузка...",
       "periodDaySuffix": "д",
       "localeTab": "Язык",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index fd4cb1f..8f100c2 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -2917,6 +2917,7 @@
       "selectMethods": "选择可用的支付方式",
       "noSystemMethods": "系统中未配置任何支付方式",
       "methodOrder": "拖动以调整顺序",
+      "methodSubOptions": "支付子选项",
       "loadingPeriods": "加载中...",
       "periodDaySuffix": "天",
       "localeTab": "语言",
diff --git a/src/pages/AdminLandingEditor.tsx b/src/pages/AdminLandingEditor.tsx
index 32349da..5e09214 100644
--- a/src/pages/AdminLandingEditor.tsx
+++ b/src/pages/AdminLandingEditor.tsx
@@ -6,7 +6,6 @@ import {
   adminLandingsApi,
   type LandingCreateRequest,
   type AdminLandingFeature,
-  type LandingPaymentMethod,
   type EditableMethodField,
   type LocaleDict,
   type SupportedLocale,
@@ -16,10 +15,15 @@ import { tariffsApi, TariffListItem, PeriodPrice } from '../api/tariffs';
 import { formatPrice } from '../utils/format';
 import { adminPaymentMethodsApi } from '../api/adminPaymentMethods';
 import { Toggle, LocaleTabs, LocalizedInput } from '../components/admin';
+import { SortableFeatureItem, type FeatureWithId } from '../components/admin/SortableFeatureItem';
+import {
+  SortableSelectedMethodCard,
+  type MethodWithId,
+} from '../components/admin/SortableSelectedMethodCard';
 import { useNotify } from '@/platform';
 import { usePlatform } from '../platform/hooks/usePlatform';
 import { getApiErrorMessage } from '../utils/api-error';
-import { BackIcon, PlusIcon, TrashIcon, GripIcon } from '../components/icons/LandingIcons';
+import { BackIcon, PlusIcon } from '../components/icons/LandingIcons';
 import {
   DndContext,
   KeyboardSensor,
@@ -32,15 +36,10 @@ import {
   arrayMove,
   SortableContext,
   sortableKeyboardCoordinates,
-  useSortable,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
 import { cn } from '../lib/utils';
-
-// Types with stable IDs for DnD
-type FeatureWithId = AdminLandingFeature & { _id: string };
-type MethodWithId = LandingPaymentMethod & { _id: string };
+import type { PaymentMethodSubOptionInfo } from '../types';
 
 const ChevronDownIcon = ({ open }: { open: boolean }) => (
   <svg
@@ -54,255 +53,6 @@ const ChevronDownIcon = ({ open }: { open: boolean }) => (
   </svg>
 );
 
-// ============ Sortable Feature Item ============
-
-interface SortableFeatureProps {
-  feature: FeatureWithId;
-  index: number;
-  locale: SupportedLocale;
-  onUpdateIcon: (index: number, value: string) => void;
-  onUpdateLocalized: (index: number, field: 'title' | 'description', value: LocaleDict) => void;
-  onRemove: (index: number) => void;
-}
-
-function SortableFeatureItem({
-  feature,
-  index,
-  locale,
-  onUpdateIcon,
-  onUpdateLocalized,
-  onRemove,
-}: SortableFeatureProps) {
-  const { t } = useTranslation();
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: feature._id,
-  });
-
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    zIndex: isDragging ? 50 : undefined,
-    position: isDragging ? 'relative' : undefined,
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        'flex items-start gap-2 rounded-lg border p-3',
-        isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50',
-      )}
-    >
-      <button
-        {...attributes}
-        {...listeners}
-        className="mt-2 flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
-      >
-        <GripIcon />
-      </button>
-      <div className="min-w-0 flex-1 space-y-2">
-        <div className="flex gap-2">
-          <input
-            type="text"
-            value={feature.icon}
-            onChange={(e) => onUpdateIcon(index, e.target.value)}
-            placeholder={t('admin.landings.featureIcon')}
-            className="w-16 rounded-lg border border-dark-700 bg-dark-800 px-2 py-1.5 text-center text-sm text-dark-100 outline-none focus:border-accent-500"
-          />
-          <LocalizedInput
-            value={feature.title}
-            onChange={(v) => onUpdateLocalized(index, 'title', v)}
-            locale={locale}
-            placeholder={t('admin.landings.featureTitle')}
-            className="min-w-0 flex-1 rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-          />
-        </div>
-        <LocalizedInput
-          value={feature.description}
-          onChange={(v) => onUpdateLocalized(index, 'description', v)}
-          locale={locale}
-          placeholder={t('admin.landings.featureDesc')}
-          className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-        />
-      </div>
-      <button
-        onClick={() => onRemove(index)}
-        className="mt-2 flex-shrink-0 text-dark-500 hover:text-error-400"
-      >
-        <TrashIcon />
-      </button>
-    </div>
-  );
-}
-
-// ============ Sortable Selected Payment Method Card ============
-
-interface SortableSelectedMethodProps {
-  method: MethodWithId;
-  onUpdate: (methodId: string, field: EditableMethodField, value: string | number | null) => void;
-  onRemove: (methodId: string) => void;
-}
-
-function SortableSelectedMethodCard({ method, onUpdate, onRemove }: SortableSelectedMethodProps) {
-  const { t } = useTranslation();
-  const [expanded, setExpanded] = useState(false);
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: method._id,
-  });
-
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    zIndex: isDragging ? 50 : undefined,
-    position: isDragging ? 'relative' : undefined,
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        'rounded-lg border',
-        isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50',
-      )}
-    >
-      <div className="flex items-center gap-2 px-3 py-2">
-        <button
-          {...attributes}
-          {...listeners}
-          className="flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
-        >
-          <GripIcon />
-        </button>
-        <button onClick={() => setExpanded((v) => !v)} className="min-w-0 flex-1 text-start">
-          <span className="truncate text-sm text-dark-100">{method.display_name}</span>
-        </button>
-        <button
-          onClick={() => setExpanded((v) => !v)}
-          className="flex-shrink-0 text-dark-500 hover:text-dark-300"
-        >
-          <ChevronDownIcon open={expanded} />
-        </button>
-        <button
-          onClick={() => onRemove(method.method_id)}
-          className="flex-shrink-0 text-dark-500 hover:text-error-400"
-        >
-          <TrashIcon />
-        </button>
-      </div>
-      {expanded && (
-        <div className="space-y-3 border-t border-dark-700 px-3 py-3">
-          <div>
-            <label className="mb-1 block text-xs text-dark-500">
-              {t('admin.landings.methodDisplayName', 'Display name')}
-            </label>
-            <input
-              type="text"
-              value={method.display_name}
-              onChange={(e) => onUpdate(method.method_id, 'display_name', e.target.value)}
-              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-            />
-          </div>
-          <div>
-            <label className="mb-1 block text-xs text-dark-500">
-              {t('admin.landings.methodDescription', 'Description')}
-            </label>
-            <input
-              type="text"
-              value={method.description ?? ''}
-              onChange={(e) => onUpdate(method.method_id, 'description', e.target.value || null)}
-              placeholder={t('admin.landings.methodDescPlaceholder', 'Optional description')}
-              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-            />
-          </div>
-          <div>
-            <label className="mb-1 block text-xs text-dark-500">
-              {t('admin.landings.methodIconUrl', 'Icon URL')}
-            </label>
-            <input
-              type="text"
-              value={method.icon_url ?? ''}
-              onChange={(e) => onUpdate(method.method_id, 'icon_url', e.target.value || null)}
-              placeholder="https://..."
-              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-            />
-          </div>
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="mb-1 block text-xs text-dark-500">
-                {t('admin.landings.methodMinAmount', 'Min amount (kopeks)')}
-              </label>
-              <input
-                type="number"
-                min={0}
-                step={1}
-                value={method.min_amount_kopeks ?? ''}
-                onChange={(e) =>
-                  onUpdate(
-                    method.method_id,
-                    'min_amount_kopeks',
-                    e.target.value ? Math.max(0, Math.floor(Number(e.target.value))) : null,
-                  )
-                }
-                placeholder="—"
-                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-              />
-            </div>
-            <div>
-              <label className="mb-1 block text-xs text-dark-500">
-                {t('admin.landings.methodMaxAmount', 'Max amount (kopeks)')}
-              </label>
-              <input
-                type="number"
-                min={0}
-                step={1}
-                value={method.max_amount_kopeks ?? ''}
-                onChange={(e) =>
-                  onUpdate(
-                    method.method_id,
-                    'max_amount_kopeks',
-                    e.target.value ? Math.max(0, Math.floor(Number(e.target.value))) : null,
-                  )
-                }
-                placeholder="—"
-                className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-              />
-            </div>
-          </div>
-          <div>
-            <label className="mb-1 block text-xs text-dark-500">
-              {t('admin.landings.methodCurrency', 'Currency')}
-            </label>
-            <input
-              type="text"
-              value={method.currency ?? ''}
-              onChange={(e) => onUpdate(method.method_id, 'currency', e.target.value || null)}
-              placeholder="RUB"
-              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-            />
-          </div>
-          <div>
-            <label className="mb-1 block text-xs text-dark-500">
-              {t('admin.landings.methodReturnUrl', 'Return URL after payment')}
-            </label>
-            <input
-              type="text"
-              value={method.return_url ?? ''}
-              onChange={(e) => onUpdate(method.method_id, 'return_url', e.target.value || null)}
-              placeholder={t(
-                'admin.landings.methodReturnUrlPlaceholder',
-                'Default: cabinet success page. Use {token} for purchase token',
-              )}
-              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
 // ============ Collapsible Section ============
 
 interface SectionProps {
@@ -397,6 +147,16 @@ export default function AdminLandingEditor() {
     [systemMethods],
   );
 
+  const subOptionsMap = useMemo(() => {
+    const map: Record<string, PaymentMethodSubOptionInfo[]> = {};
+    for (const m of availablePaymentMethods) {
+      if (m.available_sub_options && m.available_sub_options.length > 0) {
+        map[m.method_id] = m.available_sub_options;
+      }
+    }
+    return map;
+  }, [availablePaymentMethods]);
+
   // Fetch tariff details for period info
   const tariffDetailQueries = useQueries({
     queries: selectedTariffIds.map((tariffId) => ({
@@ -465,6 +225,7 @@ export default function AdminLandingEditor() {
         max_amount_kopeks: m.max_amount_kopeks ?? null,
         currency: m.currency ?? null,
         return_url: m.return_url ?? null,
+        sub_options: m.sub_options ?? null,
       })),
     );
     setGiftEnabled(landingData.gift_enabled);
@@ -543,6 +304,7 @@ export default function AdminLandingEditor() {
       max_amount_kopeks: rest.max_amount_kopeks ?? null,
       currency: rest.currency || null,
       return_url: rest.return_url || null,
+      sub_options: rest.sub_options ?? null,
     }));
 
     // Filter out empty period arrays and periods for non-selected tariffs
@@ -622,6 +384,14 @@ export default function AdminLandingEditor() {
         }
         const systemMethod = availablePaymentMethods.find((m) => m.method_id === methodId);
         if (!systemMethod) return prev;
+        // Seed sub_options from global config defaults; if no global overrides exist,
+        // explicitly set all available sub-options to enabled
+        const subOptions =
+          systemMethod.available_sub_options && systemMethod.available_sub_options.length > 0
+            ? systemMethod.sub_options
+              ? { ...systemMethod.sub_options }
+              : Object.fromEntries(systemMethod.available_sub_options.map((o) => [o.id, true]))
+            : null;
         return [
           ...prev,
           {
@@ -635,6 +405,7 @@ export default function AdminLandingEditor() {
             max_amount_kopeks: systemMethod.max_amount_kopeks ?? null,
             currency: null,
             return_url: null,
+            sub_options: subOptions,
           },
         ];
       });
@@ -651,6 +422,12 @@ export default function AdminLandingEditor() {
     [],
   );
 
+  const updateSubOptions = useCallback((methodId: string, subOptions: Record<string, boolean>) => {
+    setPaymentMethods((prev) =>
+      prev.map((m) => (m.method_id === methodId ? { ...m, sub_options: subOptions } : m)),
+    );
+  }, []);
+
   const removePaymentMethod = useCallback((methodId: string) => {
     setPaymentMethods((prev) => prev.filter((m) => m.method_id !== methodId));
   }, []);
@@ -983,8 +760,14 @@ export default function AdminLandingEditor() {
                         onChange={() => togglePaymentMethod(sysMethod.method_id)}
                         className="h-4 w-4 rounded border-dark-600 bg-dark-700 text-accent-500"
                       />
-                      <span className="text-sm font-medium text-dark-100">
+                      <span className="flex items-center gap-2 text-sm font-medium text-dark-100">
                         {sysMethod.display_name ?? sysMethod.default_display_name}
+                        {sysMethod.available_sub_options &&
+                          sysMethod.available_sub_options.length > 0 && (
+                            <span className="rounded-full bg-dark-700 px-1.5 py-0.5 text-[10px] text-dark-400">
+                              {sysMethod.available_sub_options.map((o) => o.name).join(' / ')}
+                            </span>
+                          )}
                       </span>
                     </label>
                   );
@@ -1006,7 +789,9 @@ export default function AdminLandingEditor() {
                         <SortableSelectedMethodCard
                           key={method._id}
                           method={method}
+                          availableSubOptions={subOptionsMap[method.method_id] ?? null}
                           onUpdate={updatePaymentMethod}
+                          onSubOptionsChange={updateSubOptions}
                           onRemove={removePaymentMethod}
                         />
                       ))}

From 58e93cd2b72979ec95dd43ba7d6670d879e2f07d Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 6 Mar 2026 23:53:31 +0300
Subject: [PATCH 12/29] feat: add payment sub-option selection on quick
 purchase page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show sub-options (e.g. СБП, Карта) as selectable buttons when a
payment method has multiple enabled variants. Send suffixed
payment_method ID to backend for correct provider routing.
Split LandingPaymentMethod into public and admin types.
---
 src/api/landings.ts                           |  24 +++-
 .../admin/SortableSelectedMethodCard.tsx      |   4 +-
 src/pages/QuickPurchase.tsx                   | 121 +++++++++++++-----
 3 files changed, 113 insertions(+), 36 deletions(-)

diff --git a/src/api/landings.ts b/src/api/landings.ts
index 27fd3ae..a9739bf 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -27,7 +27,27 @@ export interface LandingTariff {
   periods: LandingTariffPeriod[];
 }
 
+export interface LandingPaymentMethodSubOption {
+  id: string;
+  name: string;
+}
+
+/** Payment method as returned by the public landing config API */
 export interface LandingPaymentMethod {
+  method_id: string;
+  display_name: string;
+  description: string | null;
+  icon_url: string | null;
+  sort_order: number;
+  min_amount_kopeks: number | null;
+  max_amount_kopeks: number | null;
+  currency: string | null;
+  return_url: string | null;
+  sub_options: LandingPaymentMethodSubOption[] | null;
+}
+
+/** Payment method as stored/returned by the admin landing API (sub_options is a dict) */
+export interface AdminLandingPaymentMethod {
   method_id: string;
   display_name: string;
   description: string | null;
@@ -158,7 +178,7 @@ export interface LandingDetail {
   footer_text: LocaleDict | null;
   allowed_tariff_ids: number[];
   allowed_periods: Record<string, number[]>;
-  payment_methods: LandingPaymentMethod[];
+  payment_methods: AdminLandingPaymentMethod[];
   gift_enabled: boolean;
   custom_css: string | null;
   meta_title: LocaleDict | null;
@@ -177,7 +197,7 @@ export interface LandingCreateRequest {
   footer_text?: LocaleDict;
   allowed_tariff_ids?: number[];
   allowed_periods?: Record<string, number[]>;
-  payment_methods?: LandingPaymentMethod[];
+  payment_methods?: AdminLandingPaymentMethod[];
   gift_enabled?: boolean;
   custom_css?: string;
   meta_title?: LocaleDict;
diff --git a/src/components/admin/SortableSelectedMethodCard.tsx b/src/components/admin/SortableSelectedMethodCard.tsx
index e86ed6d..e8063d8 100644
--- a/src/components/admin/SortableSelectedMethodCard.tsx
+++ b/src/components/admin/SortableSelectedMethodCard.tsx
@@ -4,10 +4,10 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { cn } from '../../lib/utils';
 import { GripIcon, TrashIcon } from '../icons/LandingIcons';
-import type { LandingPaymentMethod, EditableMethodField } from '../../api/landings';
+import type { AdminLandingPaymentMethod, EditableMethodField } from '../../api/landings';
 import type { PaymentMethodSubOptionInfo } from '../../types';
 
-export type MethodWithId = LandingPaymentMethod & { _id: string };
+export type MethodWithId = AdminLandingPaymentMethod & { _id: string };
 
 const ChevronDownIcon = ({ open }: { open: boolean }) => (
   <svg
diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
index 5f237ff..dcff5af 100644
--- a/src/pages/QuickPurchase.tsx
+++ b/src/pages/QuickPurchase.tsx
@@ -332,50 +332,83 @@ function TariffCard({
 function PaymentMethodCard({
   method,
   isSelected,
+  selectedSubOption,
   onSelect,
+  onSelectSubOption,
 }: {
   method: LandingPaymentMethod;
   isSelected: boolean;
+  selectedSubOption: string | null;
   onSelect: () => void;
+  onSelectSubOption: (subOptionId: string) => void;
 }) {
+  const hasSubOptions = method.sub_options && method.sub_options.length > 1;
+
   return (
-    <button
-      type="button"
-      role="radio"
-      aria-checked={isSelected}
-      onClick={onSelect}
+    <div
       className={cn(
-        'flex w-full items-center gap-4 rounded-2xl border p-4 text-start transition-all duration-200',
+        'rounded-2xl border transition-all duration-200',
         isSelected
           ? 'border-accent-500/50 bg-accent-500/5'
           : 'border-dark-800/50 bg-dark-900/50 hover:border-dark-700/50 hover:bg-dark-800/30',
       )}
     >
-      {/* Icon */}
-      {method.icon_url && (
-        <div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-dark-800/50">
-          <img src={method.icon_url} alt="" className="h-6 w-6 object-contain" />
+      <button
+        type="button"
+        role="radio"
+        aria-checked={isSelected}
+        onClick={onSelect}
+        className="flex w-full items-center gap-4 p-4 text-start"
+      >
+        {/* Icon */}
+        {method.icon_url && (
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-dark-800/50">
+            <img src={method.icon_url} alt="" className="h-6 w-6 object-contain" />
+          </div>
+        )}
+
+        {/* Text */}
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-dark-100">{method.display_name}</p>
+          {method.description && (
+            <p className="mt-0.5 truncate text-xs text-dark-400">{method.description}</p>
+          )}
+        </div>
+
+        {/* Radio */}
+        <div
+          className={cn(
+            'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors',
+            isSelected ? 'border-accent-500 bg-accent-500' : 'border-dark-600',
+          )}
+        >
+          {isSelected && <div className="h-2 w-2 rounded-full bg-white" />}
+        </div>
+      </button>
+
+      {/* Sub-options */}
+      {isSelected && hasSubOptions && (
+        <div className="border-t border-dark-800/30 px-4 pb-4 pt-3">
+          <div className="flex flex-wrap gap-2">
+            {method.sub_options!.map((opt) => (
+              <button
+                key={opt.id}
+                type="button"
+                onClick={() => onSelectSubOption(opt.id)}
+                className={cn(
+                  'rounded-xl px-4 py-2 text-sm font-medium transition-all duration-200',
+                  selectedSubOption === opt.id
+                    ? 'bg-accent-500 text-white shadow-sm shadow-accent-500/25'
+                    : 'bg-dark-800/50 text-dark-300 hover:bg-dark-700/50 hover:text-dark-100',
+                )}
+              >
+                {opt.name}
+              </button>
+            ))}
+          </div>
         </div>
       )}
-
-      {/* Text */}
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium text-dark-100">{method.display_name}</p>
-        {method.description && (
-          <p className="mt-0.5 truncate text-xs text-dark-400">{method.description}</p>
-        )}
-      </div>
-
-      {/* Radio */}
-      <div
-        className={cn(
-          'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors',
-          isSelected ? 'border-accent-500 bg-accent-500' : 'border-dark-600',
-        )}
-      >
-        {isSelected && <div className="h-2 w-2 rounded-full bg-white" />}
-      </div>
-    </button>
+    </div>
   );
 }
 
@@ -547,6 +580,7 @@ export default function QuickPurchase() {
   const [giftRecipient, setGiftRecipient] = useState('');
   const [giftMessage, setGiftMessage] = useState('');
   const [selectedMethod, setSelectedMethod] = useState<string | null>(null);
+  const [selectedSubOption, setSelectedSubOption] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
   const redirectTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
@@ -595,7 +629,11 @@ export default function QuickPurchase() {
     }
 
     if (config.payment_methods.length > 0 && selectedMethod === null) {
-      setSelectedMethod(config.payment_methods[0].method_id);
+      const firstMethod = config.payment_methods[0];
+      setSelectedMethod(firstMethod.method_id);
+      if (firstMethod.sub_options && firstMethod.sub_options.length > 1) {
+        setSelectedSubOption(firstMethod.sub_options[0].id);
+      }
     }
   }, [config, allPeriods, visibleTariffs, selectedTariffId, selectedPeriodDays, selectedMethod]);
 
@@ -709,12 +747,19 @@ export default function QuickPurchase() {
     setIsSubmitting(true);
     setSubmitError(null);
 
+    // Build the payment_method string: append sub-option suffix if selected
+    // e.g. "platega" + "2" → "platega_2", "yookassa" + "sbp" → "yookassa_sbp"
+    let paymentMethod = selectedMethod!;
+    if (selectedSubOption) {
+      paymentMethod = `${paymentMethod}_${selectedSubOption}`;
+    }
+
     const data: PurchaseRequest = {
       tariff_id: selectedTariffId!,
       period_days: selectedPeriodDays!,
       contact_type: detectContactType(contactValue),
       contact_value: contactValue.trim(),
-      payment_method: selectedMethod!,
+      payment_method: paymentMethod,
       is_gift: isGift,
     };
 
@@ -849,7 +894,19 @@ export default function QuickPurchase() {
                       key={method.method_id}
                       method={method}
                       isSelected={method.method_id === selectedMethod}
-                      onSelect={() => setSelectedMethod(method.method_id)}
+                      selectedSubOption={
+                        method.method_id === selectedMethod ? selectedSubOption : null
+                      }
+                      onSelect={() => {
+                        setSelectedMethod(method.method_id);
+                        // Auto-select first sub-option when switching methods
+                        if (method.sub_options && method.sub_options.length > 1) {
+                          setSelectedSubOption(method.sub_options[0].id);
+                        } else {
+                          setSelectedSubOption(null);
+                        }
+                      }}
+                      onSelectSubOption={setSelectedSubOption}
                     />
                   ))}
                 </div>

From 83fbd0e44564a3b5f174f52549ff29b638701067 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 00:01:47 +0300
Subject: [PATCH 13/29] fix: auto-select single sub-option and remove unused
 return_url field

- Auto-select sub-option even when only 1 exists (backend needs suffix)
- Remove return_url from public LandingPaymentMethod (backend doesn't send it)
- Add else branch in auto-select for defensive null reset
---
 src/api/landings.ts         | 1 -
 src/pages/QuickPurchase.tsx | 8 +++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/api/landings.ts b/src/api/landings.ts
index a9739bf..28f6a05 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -42,7 +42,6 @@ export interface LandingPaymentMethod {
   min_amount_kopeks: number | null;
   max_amount_kopeks: number | null;
   currency: string | null;
-  return_url: string | null;
   sub_options: LandingPaymentMethodSubOption[] | null;
 }
 
diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
index dcff5af..b494be4 100644
--- a/src/pages/QuickPurchase.tsx
+++ b/src/pages/QuickPurchase.tsx
@@ -631,8 +631,10 @@ export default function QuickPurchase() {
     if (config.payment_methods.length > 0 && selectedMethod === null) {
       const firstMethod = config.payment_methods[0];
       setSelectedMethod(firstMethod.method_id);
-      if (firstMethod.sub_options && firstMethod.sub_options.length > 1) {
+      if (firstMethod.sub_options && firstMethod.sub_options.length >= 1) {
         setSelectedSubOption(firstMethod.sub_options[0].id);
+      } else {
+        setSelectedSubOption(null);
       }
     }
   }, [config, allPeriods, visibleTariffs, selectedTariffId, selectedPeriodDays, selectedMethod]);
@@ -899,8 +901,8 @@ export default function QuickPurchase() {
                       }
                       onSelect={() => {
                         setSelectedMethod(method.method_id);
-                        // Auto-select first sub-option when switching methods
-                        if (method.sub_options && method.sub_options.length > 1) {
+                        // Auto-select first sub-option (even for single — backend needs suffix)
+                        if (method.sub_options && method.sub_options.length >= 1) {
                           setSelectedSubOption(method.sub_options[0].id);
                         } else {
                           setSelectedSubOption(null);

From 2c65ca8a7ff372725bcbaa002e96bd043022bad1 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 01:48:18 +0300
Subject: [PATCH 14/29] feat: migrate Telegram Login Widget to v23 with
 admin-configurable settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Upgrade telegram-widget.js from v22 to v23 (TelegramLoginButton + ConnectedAccounts)
- TelegramLoginButton fetches widget config from API instead of hardcoded values
- Add TelegramWidgetConfig type and API method with fallback to env defaults
- Remove botUsername prop — now sourced from backend API
- Add useEffect cleanup to prevent orphaned iframes on unmount
- Add TELEGRAM_WIDGET category to admin interface settings menu
- Add i18n translations for widget settings (ru, en, zh, fa)
---
 src/api/branding.ts                    | 26 +++++++++++++
 src/components/TelegramLoginButton.tsx | 52 ++++++++++++++++----------
 src/components/admin/constants.ts      |  1 +
 src/locales/en.json                    | 11 +++++-
 src/locales/fa.json                    | 11 +++++-
 src/locales/ru.json                    |  5 +++
 src/locales/zh.json                    | 11 +++++-
 src/pages/ConnectedAccounts.tsx        |  2 +-
 src/pages/Login.tsx                    |  5 +--
 9 files changed, 97 insertions(+), 27 deletions(-)

diff --git a/src/api/branding.ts b/src/api/branding.ts
index 1d1e013..f146f58 100644
--- a/src/api/branding.ts
+++ b/src/api/branding.ts
@@ -23,6 +23,14 @@ export interface EmailAuthEnabled {
   enabled: boolean;
 }
 
+export interface TelegramWidgetConfig {
+  bot_username: string;
+  size: 'large' | 'medium' | 'small';
+  radius: number;
+  userpic: boolean;
+  request_access: boolean;
+}
+
 export interface AnalyticsCounters {
   yandex_metrika_id: string;
   google_ads_id: string;
@@ -251,6 +259,24 @@ export const brandingApi = {
     }
   },
 
+  // Get Telegram widget config (public, no auth required)
+  getTelegramWidgetConfig: async (): Promise<TelegramWidgetConfig> => {
+    try {
+      const response = await apiClient.get<TelegramWidgetConfig>(
+        '/cabinet/branding/telegram-widget',
+      );
+      return response.data;
+    } catch {
+      return {
+        bot_username: import.meta.env.VITE_TELEGRAM_BOT_USERNAME || '',
+        size: 'large',
+        radius: 8,
+        userpic: true,
+        request_access: true,
+      };
+    }
+  },
+
   // Update analytics counters (admin only)
   updateAnalyticsCounters: async (data: Partial<AnalyticsCounters>): Promise<AnalyticsCounters> => {
     const response = await apiClient.patch<AnalyticsCounters>('/cabinet/branding/analytics', data);
diff --git a/src/components/TelegramLoginButton.tsx b/src/components/TelegramLoginButton.tsx
index ebbd986..ad09aed 100644
--- a/src/components/TelegramLoginButton.tsx
+++ b/src/components/TelegramLoginButton.tsx
@@ -1,42 +1,58 @@
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { brandingApi, type TelegramWidgetConfig } from '../api/branding';
 
 interface TelegramLoginButtonProps {
-  botUsername: string;
   referralCode?: string;
 }
 
-export default function TelegramLoginButton({
-  botUsername,
-  referralCode,
-}: TelegramLoginButtonProps) {
+export default function TelegramLoginButton({ referralCode }: TelegramLoginButtonProps) {
   const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const { data: widgetConfig } = useQuery<TelegramWidgetConfig>({
+    queryKey: ['telegram-widget-config'],
+    queryFn: brandingApi.getTelegramWidgetConfig,
+    staleTime: 60000,
+  });
+
+  const botUsername =
+    widgetConfig?.bot_username || import.meta.env.VITE_TELEGRAM_BOT_USERNAME || '';
+
   // Load widget script
   useEffect(() => {
-    if (!containerRef.current || !botUsername) return;
+    if (!containerRef.current || !botUsername || !widgetConfig) return;
 
-    // Clear previous widget using safe DOM API
-    while (containerRef.current.firstChild) {
-      containerRef.current.removeChild(containerRef.current.firstChild);
+    const container = containerRef.current;
+
+    // Clear previous widget
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
     }
 
-    // Get current URL for redirect
     const redirectUrl = `${window.location.origin}/auth/telegram/callback`;
 
-    // Create script element for Telegram Login Widget
     const script = document.createElement('script');
-    script.src = 'https://telegram.org/js/telegram-widget.js?22';
+    script.src = 'https://telegram.org/js/telegram-widget.js?23';
     script.setAttribute('data-telegram-login', botUsername);
-    script.setAttribute('data-size', 'large');
-    script.setAttribute('data-radius', '8');
+    script.setAttribute('data-size', widgetConfig.size);
+    script.setAttribute('data-radius', String(widgetConfig.radius));
+    script.setAttribute('data-userpic', String(widgetConfig.userpic));
     script.setAttribute('data-auth-url', redirectUrl);
-    script.setAttribute('data-request-access', 'write');
+    if (widgetConfig.request_access) {
+      script.setAttribute('data-request-access', 'write');
+    }
     script.async = true;
 
-    containerRef.current.appendChild(script);
-  }, [botUsername]);
+    container.appendChild(script);
+
+    return () => {
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
+      }
+    };
+  }, [botUsername, widgetConfig]);
 
   if (!botUsername || botUsername === 'your_bot') {
     return (
@@ -48,10 +64,8 @@ export default function TelegramLoginButton({
 
   return (
     <div className="flex flex-col items-center space-y-4">
-      {/* Telegram Widget will be inserted here */}
       <div ref={containerRef} className="flex justify-center" />
 
-      {/* Fallback link for mobile */}
       <div className="text-center">
         <p className="mb-2 text-xs text-gray-500">{t('auth.orOpenInApp')}</p>
         <a
diff --git a/src/components/admin/constants.ts b/src/components/admin/constants.ts
index 30ab6a4..b0d7d20 100644
--- a/src/components/admin/constants.ts
+++ b/src/components/admin/constants.ts
@@ -67,6 +67,7 @@ export const MENU_SECTIONS: MenuSection[] = [
           'INTERFACE_SUBSCRIPTION',
           'CONNECT_BUTTON',
           'MINIAPP',
+          'TELEGRAM_WIDGET',
           'HAPP',
           'SKIP',
           'ADDITIONAL',
diff --git a/src/locales/en.json b/src/locales/en.json
index 64544e9..5df6f4d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1681,7 +1681,16 @@
       "projectName": "Project name",
       "quickPresets": "Quick presets",
       "resetAllColors": "Reset all colors",
-      "statusColors": "Status colors"
+      "statusColors": "Status colors",
+      "categories": {
+        "TELEGRAM_WIDGET": "Telegram Login Widget"
+      },
+      "settingNames": {
+        "Telegram Widget Size": "Widget Size",
+        "Telegram Widget Radius": "Corner Radius",
+        "Telegram Widget Userpic": "Show User Photo",
+        "Telegram Widget Request Access": "Request Access"
+      }
     },
     "theme": {
       "accentColor": "Accent color",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 1108247..ae126b2 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -1341,7 +1341,16 @@
       "projectName": "نام پروژه",
       "quickPresets": "پیش‌تنظیم‌های سریع",
       "resetAllColors": "بازنشانی همه رنگ‌ها",
-      "statusColors": "رنگ‌های وضعیت"
+      "statusColors": "رنگ‌های وضعیت",
+      "categories": {
+        "TELEGRAM_WIDGET": "Telegram Login Widget"
+      },
+      "settingNames": {
+        "Telegram Widget Size": "اندازه ویجت",
+        "Telegram Widget Radius": "شعاع گوشه",
+        "Telegram Widget Userpic": "نمایش تصویر کاربر",
+        "Telegram Widget Request Access": "درخواست دسترسی"
+      }
     },
     "buttons": {
       "color": "رنگ دکمه",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index c6d5fb8..ef9e741 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -1762,6 +1762,10 @@
         "Subscription Show Devices": "Показывать устройства",
         "Telegram Stars Enabled": "Stars включены",
         "Telegram Stars Rate Rub": "Курс Stars (₽)",
+        "Telegram Widget Size": "Размер виджета",
+        "Telegram Widget Radius": "Скругление углов",
+        "Telegram Widget Userpic": "Показывать аватар",
+        "Telegram Widget Request Access": "Запрос доступа",
         "Tribute Api Key": "API ключ",
         "Tribute Donate Link": "Ссылка доната",
         "Tribute Enabled": "Tribute включен",
@@ -2164,6 +2168,7 @@
         "PAL24": "PAL24",
         "WATA": "Wata",
         "TELEGRAM": "Telegram",
+        "TELEGRAM_WIDGET": "Telegram Login Widget",
         "SUBSCRIPTIONS_CORE": "Основные",
         "SIMPLE_SUBSCRIPTION": "Простая подписка",
         "PERIODS": "Периоды",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 8f100c2..640f9d7 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -1379,7 +1379,16 @@
       "projectName": "项目名称",
       "quickPresets": "快速预设",
       "resetAllColors": "重置所有颜色",
-      "statusColors": "状态颜色"
+      "statusColors": "状态颜色",
+      "categories": {
+        "TELEGRAM_WIDGET": "Telegram Login Widget"
+      },
+      "settingNames": {
+        "Telegram Widget Size": "小部件大小",
+        "Telegram Widget Radius": "圆角半径",
+        "Telegram Widget Userpic": "显示头像",
+        "Telegram Widget Request Access": "请求访问权限"
+      }
     },
     "buttons": {
       "color": "按钮颜色",
diff --git a/src/pages/ConnectedAccounts.tsx b/src/pages/ConnectedAccounts.tsx
index 94f3ada..4217dbf 100644
--- a/src/pages/ConnectedAccounts.tsx
+++ b/src/pages/ConnectedAccounts.tsx
@@ -44,7 +44,7 @@ function TelegramLinkWidget() {
     const redirectUrl = `${window.location.origin}/auth/link/telegram/callback?csrf_state=${encodeURIComponent(csrfState)}`;
 
     const script = document.createElement('script');
-    script.src = 'https://telegram.org/js/telegram-widget.js?22';
+    script.src = 'https://telegram.org/js/telegram-widget.js?23';
     script.setAttribute('data-telegram-login', botUsername);
     script.setAttribute('data-size', 'small');
     script.setAttribute('data-radius', '8');
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index e346551..0b06de2 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -485,10 +485,7 @@ export default function Login() {
                   </p>
                 </div>
               ) : (
-                <TelegramLoginButton
-                  botUsername={botUsername}
-                  referralCode={referralCode || undefined}
-                />
+                <TelegramLoginButton referralCode={referralCode || undefined} />
               )}
             </div>
 

From 91f0e9e2fcd0d9c3f3dc7f7e31b763244350f754 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 02:37:12 +0300
Subject: [PATCH 15/29] feat: TelegramLoginButton with OIDC popup + legacy
 widget fallback

- Add oidc_enabled/oidc_client_id to TelegramWidgetConfig interface and fallback
- Add loginTelegramOIDC API method for id_token auth
- Add loginWithTelegramOIDC to auth store
- Rewrite TelegramLoginButton: OIDC popup when enabled, legacy widget otherwise
- Extend Window.Telegram type with Login SDK in vite-env.d.ts
---
 src/api/auth.ts                        |  14 ++++
 src/api/branding.ts                    |   4 +
 src/components/TelegramLoginButton.tsx | 100 +++++++++++++++++++++++--
 src/store/auth.ts                      |  16 ++++
 src/vite-env.d.ts                      |  15 ++++
 5 files changed, 142 insertions(+), 7 deletions(-)

diff --git a/src/api/auth.ts b/src/api/auth.ts
index 88fd9ec..228e8f7 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -49,6 +49,20 @@ export const authApi = {
     return response.data;
   },
 
+  // Telegram OIDC authentication (popup flow with id_token)
+  loginTelegramOIDC: async (
+    idToken: string,
+    campaignSlug?: string | null,
+    referralCode?: string | null,
+  ): Promise<AuthResponse> => {
+    const response = await apiClient.post<AuthResponse>('/cabinet/auth/telegram/oidc', {
+      id_token: idToken,
+      campaign_slug: campaignSlug || undefined,
+      referral_code: referralCode || undefined,
+    });
+    return response.data;
+  },
+
   // Email login
   loginEmail: async (
     email: string,
diff --git a/src/api/branding.ts b/src/api/branding.ts
index f146f58..235d511 100644
--- a/src/api/branding.ts
+++ b/src/api/branding.ts
@@ -29,6 +29,8 @@ export interface TelegramWidgetConfig {
   radius: number;
   userpic: boolean;
   request_access: boolean;
+  oidc_enabled: boolean;
+  oidc_client_id: string;
 }
 
 export interface AnalyticsCounters {
@@ -273,6 +275,8 @@ export const brandingApi = {
         radius: 8,
         userpic: true,
         request_access: true,
+        oidc_enabled: false,
+        oidc_client_id: '',
       };
     }
   },
diff --git a/src/components/TelegramLoginButton.tsx b/src/components/TelegramLoginButton.tsx
index ad09aed..8077acb 100644
--- a/src/components/TelegramLoginButton.tsx
+++ b/src/components/TelegramLoginButton.tsx
@@ -1,7 +1,9 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from '@tanstack/react-query';
 import { brandingApi, type TelegramWidgetConfig } from '../api/branding';
+import { useAuthStore } from '../store/auth';
+import { useNavigate } from 'react-router';
 
 interface TelegramLoginButtonProps {
   referralCode?: string;
@@ -9,7 +11,11 @@ interface TelegramLoginButtonProps {
 
 export default function TelegramLoginButton({ referralCode }: TelegramLoginButtonProps) {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const containerRef = useRef<HTMLDivElement>(null);
+  const [oidcLoading, setOidcLoading] = useState(false);
+  const [oidcError, setOidcError] = useState('');
+  const loginWithTelegramOIDC = useAuthStore((s) => s.loginWithTelegramOIDC);
 
   const { data: widgetConfig } = useQuery<TelegramWidgetConfig>({
     queryKey: ['telegram-widget-config'],
@@ -19,14 +25,68 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
 
   const botUsername =
     widgetConfig?.bot_username || import.meta.env.VITE_TELEGRAM_BOT_USERNAME || '';
+  const isOIDC = widgetConfig?.oidc_enabled && widgetConfig?.oidc_client_id;
 
-  // Load widget script
+  // OIDC callback handler
+  const handleOIDCCallback = useCallback(
+    async (data: { id_token?: string; error?: string }) => {
+      if (data.error || !data.id_token) {
+        setOidcError(data.error || t('auth.loginFailed'));
+        setOidcLoading(false);
+        return;
+      }
+      try {
+        setOidcLoading(true);
+        await loginWithTelegramOIDC(data.id_token);
+        navigate('/');
+      } catch (err: unknown) {
+        const error = err as { response?: { data?: { detail?: string } } };
+        setOidcError(error.response?.data?.detail || t('common.error'));
+      } finally {
+        setOidcLoading(false);
+      }
+    },
+    [loginWithTelegramOIDC, navigate, t],
+  );
+
+  // Load OIDC script and init
   useEffect(() => {
-    if (!containerRef.current || !botUsername || !widgetConfig) return;
+    if (!isOIDC || !widgetConfig?.oidc_client_id) return;
+
+    const scriptId = 'telegram-login-oidc-script';
+    let script = document.getElementById(scriptId) as HTMLScriptElement | null;
+
+    const initTelegramLogin = () => {
+      if (window.Telegram?.Login) {
+        window.Telegram.Login.init(
+          {
+            client_id: widgetConfig.oidc_client_id,
+            request_access: widgetConfig.request_access ? ['write'] : undefined,
+            lang: document.documentElement.lang || 'en',
+          },
+          handleOIDCCallback,
+        );
+      }
+    };
+
+    if (!script) {
+      script = document.createElement('script');
+      script.id = scriptId;
+      script.src = 'https://oauth.telegram.org/js/telegram-login.js?3';
+      script.async = true;
+      script.onload = initTelegramLogin;
+      document.head.appendChild(script);
+    } else {
+      // Script already loaded, just re-init
+      initTelegramLogin();
+    }
+  }, [isOIDC, widgetConfig?.oidc_client_id, widgetConfig?.request_access, handleOIDCCallback]);
+
+  // Legacy widget effect (only when NOT OIDC)
+  useEffect(() => {
+    if (isOIDC || !containerRef.current || !botUsername || !widgetConfig) return;
 
     const container = containerRef.current;
-
-    // Clear previous widget
     while (container.firstChild) {
       container.removeChild(container.firstChild);
     }
@@ -52,7 +112,7 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
         container.removeChild(container.firstChild);
       }
     };
-  }, [botUsername, widgetConfig]);
+  }, [isOIDC, botUsername, widgetConfig]);
 
   if (!botUsername || botUsername === 'your_bot') {
     return (
@@ -64,7 +124,33 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
 
   return (
     <div className="flex flex-col items-center space-y-4">
-      <div ref={containerRef} className="flex justify-center" />
+      {/* OIDC mode: custom button that opens popup */}
+      {isOIDC ? (
+        <div className="flex flex-col items-center space-y-2">
+          <button
+            type="button"
+            onClick={() => {
+              setOidcError('');
+              if (window.Telegram?.Login) {
+                window.Telegram.Login.open();
+              }
+            }}
+            disabled={oidcLoading}
+            className="inline-flex items-center gap-2 rounded-lg bg-[#54a9eb] px-6 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-[#4a96d2] disabled:opacity-50"
+          >
+            <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+            </svg>
+            {oidcLoading
+              ? t('common.loading')
+              : t('auth.loginWithTelegram', 'Sign in with Telegram')}
+          </button>
+          {oidcError && <p className="text-xs text-red-500">{oidcError}</p>}
+        </div>
+      ) : (
+        /* Legacy widget mode: iframe-based widget */
+        <div ref={containerRef} className="flex justify-center" />
+      )}
 
       <div className="text-center">
         <p className="mb-2 text-xs text-gray-500">{t('auth.orOpenInApp')}</p>
diff --git a/src/store/auth.ts b/src/store/auth.ts
index f7e555f..c147b31 100644
--- a/src/store/auth.ts
+++ b/src/store/auth.ts
@@ -37,6 +37,7 @@ interface AuthState {
   checkAdminStatus: () => Promise<void>;
   loginWithTelegram: (initData: string) => Promise<void>;
   loginWithTelegramWidget: (data: TelegramWidgetData) => Promise<void>;
+  loginWithTelegramOIDC: (idToken: string) => Promise<void>;
   loginWithEmail: (email: string, password: string) => Promise<void>;
   loginWithOAuth: (
     provider: string,
@@ -285,6 +286,21 @@ export const useAuthStore = create<AuthState>()(
         await get().checkAdminStatus();
       },
 
+      loginWithTelegramOIDC: async (idToken) => {
+        const campaignSlug = consumeCampaignSlug();
+        const referralCode = consumeReferralCode();
+        const response = await authApi.loginTelegramOIDC(idToken, campaignSlug, referralCode);
+        tokenStorage.setTokens(response.access_token, response.refresh_token);
+        set({
+          accessToken: response.access_token,
+          refreshToken: response.refresh_token,
+          user: response.user,
+          isAuthenticated: true,
+          pendingCampaignBonus: response.campaign_bonus || null,
+        });
+        await get().checkAdminStatus();
+      },
+
       loginWithEmail: async (email, password) => {
         const campaignSlug = consumeCampaignSlug();
         const referralCode = consumeReferralCode();
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 7c33e43..c13e555 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -19,8 +19,23 @@ interface TelegramWebAppGlobal {
   offEvent?: (event: string, callback: () => void) => void;
 }
 
+/** Telegram Login JS SDK — loaded from https://oauth.telegram.org/js/telegram-login.js */
+interface TelegramLoginGlobal {
+  init: (
+    options: {
+      client_id: string;
+      request_access?: string[];
+      lang?: string;
+    },
+    callback: (data: { id_token?: string; user?: Record<string, unknown>; error?: string }) => void,
+  ) => void;
+  open: () => void;
+  auth: () => void;
+}
+
 interface Window {
   Telegram?: {
     WebApp?: TelegramWebAppGlobal;
+    Login?: TelegramLoginGlobal;
   };
 }

From c221c6e8bfc15b160565083f0198816d4c84c146 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 02:40:04 +0300
Subject: [PATCH 16/29] feat: add i18n translations and admin category for
 Telegram OIDC

---
 src/components/admin/constants.ts | 1 +
 src/locales/en.json               | 8 ++++++--
 src/locales/fa.json               | 8 ++++++--
 src/locales/ru.json               | 6 +++++-
 src/locales/zh.json               | 8 ++++++--
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/admin/constants.ts b/src/components/admin/constants.ts
index b0d7d20..812f33f 100644
--- a/src/components/admin/constants.ts
+++ b/src/components/admin/constants.ts
@@ -68,6 +68,7 @@ export const MENU_SECTIONS: MenuSection[] = [
           'CONNECT_BUTTON',
           'MINIAPP',
           'TELEGRAM_WIDGET',
+          'TELEGRAM_OIDC',
           'HAPP',
           'SKIP',
           'ADDITIONAL',
diff --git a/src/locales/en.json b/src/locales/en.json
index 5df6f4d..1efc1e3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1683,13 +1683,17 @@
       "resetAllColors": "Reset all colors",
       "statusColors": "Status colors",
       "categories": {
-        "TELEGRAM_WIDGET": "Telegram Login Widget"
+        "TELEGRAM_WIDGET": "Telegram Login Widget",
+        "TELEGRAM_OIDC": "Telegram Login (OIDC)"
       },
       "settingNames": {
         "Telegram Widget Size": "Widget Size",
         "Telegram Widget Radius": "Corner Radius",
         "Telegram Widget Userpic": "Show User Photo",
-        "Telegram Widget Request Access": "Request Access"
+        "Telegram Widget Request Access": "Request Access",
+        "telegramOidcEnabled": "OIDC Enabled",
+        "telegramOidcClientId": "Client ID (Bot ID)",
+        "telegramOidcClientSecret": "Client Secret"
       }
     },
     "theme": {
diff --git a/src/locales/fa.json b/src/locales/fa.json
index ae126b2..4c6526e 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -1343,13 +1343,17 @@
       "resetAllColors": "بازنشانی همه رنگ‌ها",
       "statusColors": "رنگ‌های وضعیت",
       "categories": {
-        "TELEGRAM_WIDGET": "Telegram Login Widget"
+        "TELEGRAM_WIDGET": "Telegram Login Widget",
+        "TELEGRAM_OIDC": "Telegram Login (OIDC)"
       },
       "settingNames": {
         "Telegram Widget Size": "اندازه ویجت",
         "Telegram Widget Radius": "شعاع گوشه",
         "Telegram Widget Userpic": "نمایش تصویر کاربر",
-        "Telegram Widget Request Access": "درخواست دسترسی"
+        "Telegram Widget Request Access": "درخواست دسترسی",
+        "telegramOidcEnabled": "فعال‌سازی OIDC",
+        "telegramOidcClientId": "Client ID (شناسه ربات)",
+        "telegramOidcClientSecret": "Client Secret"
       }
     },
     "buttons": {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index ef9e741..6dc8b0d 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -2154,7 +2154,10 @@
         "External Admin Token": "Токен внешней админки",
         "External Admin Token Bot Id": "ID бота",
         "Bot Username": "Username бота",
-        "Debug": "Отладка"
+        "Debug": "Отладка",
+        "telegramOidcEnabled": "OIDC включён",
+        "telegramOidcClientId": "Client ID (ID бота)",
+        "telegramOidcClientSecret": "Client Secret"
       },
       "categories": {
         "PAYMENT": "Платежи",
@@ -2169,6 +2172,7 @@
         "WATA": "Wata",
         "TELEGRAM": "Telegram",
         "TELEGRAM_WIDGET": "Telegram Login Widget",
+        "TELEGRAM_OIDC": "Telegram Login (OIDC)",
         "SUBSCRIPTIONS_CORE": "Основные",
         "SIMPLE_SUBSCRIPTION": "Простая подписка",
         "PERIODS": "Периоды",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 640f9d7..1d346da 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -1381,13 +1381,17 @@
       "resetAllColors": "重置所有颜色",
       "statusColors": "状态颜色",
       "categories": {
-        "TELEGRAM_WIDGET": "Telegram Login Widget"
+        "TELEGRAM_WIDGET": "Telegram Login Widget",
+        "TELEGRAM_OIDC": "Telegram Login (OIDC)"
       },
       "settingNames": {
         "Telegram Widget Size": "小部件大小",
         "Telegram Widget Radius": "圆角半径",
         "Telegram Widget Userpic": "显示头像",
-        "Telegram Widget Request Access": "请求访问权限"
+        "Telegram Widget Request Access": "请求访问权限",
+        "telegramOidcEnabled": "启用 OIDC",
+        "telegramOidcClientId": "Client ID（机器人 ID）",
+        "telegramOidcClientSecret": "Client Secret"
       }
     },
     "buttons": {

From 5c11f1251a9bdbb60f49c105b1a3ebcbd477d8b8 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 02:51:18 +0300
Subject: [PATCH 17/29] fix: address code review findings for
 TelegramLoginButton

- Replace useCallback with ref pattern to prevent stale closures and
  unnecessary Telegram.Login.init() re-calls
- Make isOIDC a proper boolean with Boolean() wrapper
- Clear previous error on successful login attempt
- Remove hardcoded fallback string from t() call
---
 src/components/TelegramLoginButton.tsx | 55 +++++++++++++-------------
 1 file changed, 27 insertions(+), 28 deletions(-)

diff --git a/src/components/TelegramLoginButton.tsx b/src/components/TelegramLoginButton.tsx
index 8077acb..70746bc 100644
--- a/src/components/TelegramLoginButton.tsx
+++ b/src/components/TelegramLoginButton.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from '@tanstack/react-query';
 import { brandingApi, type TelegramWidgetConfig } from '../api/branding';
@@ -25,29 +25,30 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
 
   const botUsername =
     widgetConfig?.bot_username || import.meta.env.VITE_TELEGRAM_BOT_USERNAME || '';
-  const isOIDC = widgetConfig?.oidc_enabled && widgetConfig?.oidc_client_id;
+  const isOIDC = Boolean(widgetConfig?.oidc_enabled && widgetConfig?.oidc_client_id);
 
-  // OIDC callback handler
-  const handleOIDCCallback = useCallback(
-    async (data: { id_token?: string; error?: string }) => {
-      if (data.error || !data.id_token) {
-        setOidcError(data.error || t('auth.loginFailed'));
-        setOidcLoading(false);
-        return;
-      }
-      try {
-        setOidcLoading(true);
-        await loginWithTelegramOIDC(data.id_token);
-        navigate('/');
-      } catch (err: unknown) {
-        const error = err as { response?: { data?: { detail?: string } } };
-        setOidcError(error.response?.data?.detail || t('common.error'));
-      } finally {
-        setOidcLoading(false);
-      }
-    },
-    [loginWithTelegramOIDC, navigate, t],
-  );
+  // OIDC callback handler (ref pattern to avoid stale closures and unnecessary re-inits)
+  const handleOIDCCallbackRef =
+    useRef<(data: { id_token?: string; error?: string }) => void>(undefined);
+
+  handleOIDCCallbackRef.current = async (data: { id_token?: string; error?: string }) => {
+    if (data.error || !data.id_token) {
+      setOidcError(data.error || t('auth.loginFailed'));
+      setOidcLoading(false);
+      return;
+    }
+    try {
+      setOidcLoading(true);
+      setOidcError('');
+      await loginWithTelegramOIDC(data.id_token);
+      navigate('/');
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } };
+      setOidcError(error.response?.data?.detail || t('common.error'));
+    } finally {
+      setOidcLoading(false);
+    }
+  };
 
   // Load OIDC script and init
   useEffect(() => {
@@ -64,7 +65,7 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
             request_access: widgetConfig.request_access ? ['write'] : undefined,
             lang: document.documentElement.lang || 'en',
           },
-          handleOIDCCallback,
+          (data) => handleOIDCCallbackRef.current?.(data),
         );
       }
     };
@@ -80,7 +81,7 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
       // Script already loaded, just re-init
       initTelegramLogin();
     }
-  }, [isOIDC, widgetConfig?.oidc_client_id, widgetConfig?.request_access, handleOIDCCallback]);
+  }, [isOIDC, widgetConfig?.oidc_client_id, widgetConfig?.request_access]);
 
   // Legacy widget effect (only when NOT OIDC)
   useEffect(() => {
@@ -141,9 +142,7 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
             <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
               <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
             </svg>
-            {oidcLoading
-              ? t('common.loading')
-              : t('auth.loginWithTelegram', 'Sign in with Telegram')}
+            {oidcLoading ? t('common.loading') : t('auth.loginWithTelegram')}
           </button>
           {oidcError && <p className="text-xs text-red-500">{oidcError}</p>}
         </div>

From 45e68ffac231516577ac1f5230bf90fd5a1b5cdb Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 03:04:46 +0300
Subject: [PATCH 18/29] fix: safe error handling and numeric client_id in OIDC
 login

- Replace unsafe `as` cast with runtime type guard
- Pass client_id as Number() per Telegram OIDC spec
- Update TypeScript type to string | number
---
 src/components/TelegramLoginButton.tsx | 10 +++++++---
 src/vite-env.d.ts                      |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/TelegramLoginButton.tsx b/src/components/TelegramLoginButton.tsx
index 70746bc..02a1ff3 100644
--- a/src/components/TelegramLoginButton.tsx
+++ b/src/components/TelegramLoginButton.tsx
@@ -43,8 +43,12 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
       await loginWithTelegramOIDC(data.id_token);
       navigate('/');
     } catch (err: unknown) {
-      const error = err as { response?: { data?: { detail?: string } } };
-      setOidcError(error.response?.data?.detail || t('common.error'));
+      let message = t('common.error');
+      if (err && typeof err === 'object' && 'response' in err) {
+        const resp = (err as { response?: { data?: { detail?: string } } }).response;
+        if (resp?.data?.detail) message = resp.data.detail;
+      }
+      setOidcError(message);
     } finally {
       setOidcLoading(false);
     }
@@ -61,7 +65,7 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
       if (window.Telegram?.Login) {
         window.Telegram.Login.init(
           {
-            client_id: widgetConfig.oidc_client_id,
+            client_id: Number(widgetConfig.oidc_client_id) || widgetConfig.oidc_client_id,
             request_access: widgetConfig.request_access ? ['write'] : undefined,
             lang: document.documentElement.lang || 'en',
           },
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index c13e555..2e44efe 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -23,7 +23,7 @@ interface TelegramWebAppGlobal {
 interface TelegramLoginGlobal {
   init: (
     options: {
-      client_id: string;
+      client_id: string | number;
       request_access?: string[];
       lang?: string;
     },

From b335d666c2c1fb557288d70fb249e4166f99b146 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 03:18:49 +0300
Subject: [PATCH 19/29] fix: OIDC login UX improvements from review

- Add loading state on button click (not just after callback)
- Add onerror handler for script load failure
- Disable button until OIDC script is loaded
---
 src/components/TelegramLoginButton.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/TelegramLoginButton.tsx b/src/components/TelegramLoginButton.tsx
index 02a1ff3..28cc619 100644
--- a/src/components/TelegramLoginButton.tsx
+++ b/src/components/TelegramLoginButton.tsx
@@ -15,6 +15,7 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
   const containerRef = useRef<HTMLDivElement>(null);
   const [oidcLoading, setOidcLoading] = useState(false);
   const [oidcError, setOidcError] = useState('');
+  const [scriptLoaded, setScriptLoaded] = useState(false);
   const loginWithTelegramOIDC = useAuthStore((s) => s.loginWithTelegramOIDC);
 
   const { data: widgetConfig } = useQuery<TelegramWidgetConfig>({
@@ -79,10 +80,17 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
       script.id = scriptId;
       script.src = 'https://oauth.telegram.org/js/telegram-login.js?3';
       script.async = true;
-      script.onload = initTelegramLogin;
+      script.onload = () => {
+        setScriptLoaded(true);
+        initTelegramLogin();
+      };
+      script.onerror = () => {
+        setOidcError(t('auth.loginFailed'));
+      };
       document.head.appendChild(script);
     } else {
       // Script already loaded, just re-init
+      setScriptLoaded(true);
       initTelegramLogin();
     }
   }, [isOIDC, widgetConfig?.oidc_client_id, widgetConfig?.request_access]);
@@ -136,11 +144,14 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
             type="button"
             onClick={() => {
               setOidcError('');
+              setOidcLoading(true);
               if (window.Telegram?.Login) {
                 window.Telegram.Login.open();
+              } else {
+                setOidcLoading(false);
               }
             }}
-            disabled={oidcLoading}
+            disabled={oidcLoading || !scriptLoaded}
             className="inline-flex items-center gap-2 rounded-lg bg-[#54a9eb] px-6 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-[#4a96d2] disabled:opacity-50"
           >
             <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">

From dfa7a09a7cb53ebbbc5de057fd587897d77dcb9b Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 03:27:14 +0300
Subject: [PATCH 20/29] fix: add unmount safety guard to OIDC callback handler

Prevent stale navigate('/') and setState calls after unmount
using mountedRef pattern.
---
 src/components/TelegramLoginButton.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/TelegramLoginButton.tsx b/src/components/TelegramLoginButton.tsx
index 28cc619..08ebd8d 100644
--- a/src/components/TelegramLoginButton.tsx
+++ b/src/components/TelegramLoginButton.tsx
@@ -31,8 +31,17 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
   // OIDC callback handler (ref pattern to avoid stale closures and unnecessary re-inits)
   const handleOIDCCallbackRef =
     useRef<(data: { id_token?: string; error?: string }) => void>(undefined);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
 
   handleOIDCCallbackRef.current = async (data: { id_token?: string; error?: string }) => {
+    if (!mountedRef.current) return;
     if (data.error || !data.id_token) {
       setOidcError(data.error || t('auth.loginFailed'));
       setOidcLoading(false);
@@ -42,8 +51,9 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
       setOidcLoading(true);
       setOidcError('');
       await loginWithTelegramOIDC(data.id_token);
-      navigate('/');
+      if (mountedRef.current) navigate('/');
     } catch (err: unknown) {
+      if (!mountedRef.current) return;
       let message = t('common.error');
       if (err && typeof err === 'object' && 'response' in err) {
         const resp = (err as { response?: { data?: { detail?: string } } }).response;
@@ -51,7 +61,7 @@ export default function TelegramLoginButton({ referralCode }: TelegramLoginButto
       }
       setOidcError(message);
     } finally {
-      setOidcLoading(false);
+      if (mountedRef.current) setOidcLoading(false);
     }
   };
 

From 6d5c6fb9b3905d8a0c22f39317fd5f77743d3505 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 04:04:39 +0300
Subject: [PATCH 21/29] fix: mobile layout and period label translations for
 quick purchase landing

- Add i18n period labels (ru/en/zh/fa) instead of backend English-only labels
- Period tabs wrap on mobile instead of horizontal scroll
- Prevent horizontal overflow shifting the layout
---
 src/locales/en.json         | 20 +++++++++++++++++++-
 src/locales/fa.json         | 18 +++++++++++++++++-
 src/locales/ru.json         | 22 +++++++++++++++++++++-
 src/locales/zh.json         | 18 +++++++++++++++++-
 src/pages/QuickPurchase.tsx | 30 +++++++++++++++++++++++++-----
 5 files changed, 99 insertions(+), 9 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 1efc1e3..ea0c06b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3995,6 +3995,24 @@
     "giftSentSuccess": "Gift sent!",
     "giftSentDesc": "Recipient will be notified by email",
     "autoLoginFailed": "Auto-login failed",
-    "autoLoginProcessing": "Signing in..."
+    "autoLoginProcessing": "Signing in...",
+    "periodLabels": {
+      "d1": "1 day",
+      "d2": "2 days",
+      "d3": "3 days",
+      "d5": "5 days",
+      "d7": "1 week",
+      "d14": "2 weeks",
+      "d30": "1 month",
+      "d60": "2 months",
+      "d90": "3 months",
+      "d180": "6 months",
+      "d365": "1 year",
+      "d456": "1 year + 3 mo.",
+      "nDays_one": "{{count}} day",
+      "nDays_other": "{{count}} days",
+      "nMonths_one": "{{count}} month",
+      "nMonths_other": "{{count}} months"
+    }
   }
 }
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 4c6526e..1a64896 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -3546,6 +3546,22 @@
     "giftSentSuccess": "هدیه ارسال شد!",
     "giftSentDesc": "گیرنده از طریق ایمیل مطلع خواهد شد",
     "autoLoginFailed": "ورود خودکار ناموفق بود",
-    "autoLoginProcessing": "در حال ورود..."
+    "autoLoginProcessing": "در حال ورود...",
+    "periodLabels": {
+      "d1": "۱ روز",
+      "d2": "۲ روز",
+      "d3": "۳ روز",
+      "d5": "۵ روز",
+      "d7": "۱ هفته",
+      "d14": "۲ هفته",
+      "d30": "۱ ماه",
+      "d60": "۲ ماه",
+      "d90": "۳ ماه",
+      "d180": "۶ ماه",
+      "d365": "۱ سال",
+      "d456": "۱ سال و ۳ ماه",
+      "nDays": "{{count}} روز",
+      "nMonths": "{{count}} ماه"
+    }
   }
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 6dc8b0d..2c672ed 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -4554,6 +4554,26 @@
     "giftSentSuccess": "Подарок отправлен!",
     "giftSentDesc": "Получатель получит уведомление на email",
     "autoLoginFailed": "Не удалось выполнить автоматический вход",
-    "autoLoginProcessing": "Выполняется вход..."
+    "autoLoginProcessing": "Выполняется вход...",
+    "periodLabels": {
+      "d1": "1 день",
+      "d2": "2 дня",
+      "d3": "3 дня",
+      "d5": "5 дней",
+      "d7": "1 неделя",
+      "d14": "2 недели",
+      "d30": "1 месяц",
+      "d60": "2 месяца",
+      "d90": "3 месяца",
+      "d180": "6 месяцев",
+      "d365": "1 год",
+      "d456": "1 год + 3 мес.",
+      "nDays_one": "{{count}} день",
+      "nDays_few": "{{count}} дня",
+      "nDays_many": "{{count}} дней",
+      "nMonths_one": "{{count}} месяц",
+      "nMonths_few": "{{count}} месяца",
+      "nMonths_many": "{{count}} месяцев"
+    }
   }
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 1d346da..7d9a881 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -3545,6 +3545,22 @@
     "giftSentSuccess": "礼物已发送！",
     "giftSentDesc": "收件人将通过邮件收到通知",
     "autoLoginFailed": "自动登录失败",
-    "autoLoginProcessing": "正在登录..."
+    "autoLoginProcessing": "正在登录...",
+    "periodLabels": {
+      "d1": "1天",
+      "d2": "2天",
+      "d3": "3天",
+      "d5": "5天",
+      "d7": "1周",
+      "d14": "2周",
+      "d30": "1个月",
+      "d60": "2个月",
+      "d90": "3个月",
+      "d180": "6个月",
+      "d365": "1年",
+      "d456": "1年3个月",
+      "nDays": "{{count}}天",
+      "nMonths": "{{count}}个月"
+    }
   }
 }
diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
index b494be4..8c95659 100644
--- a/src/pages/QuickPurchase.tsx
+++ b/src/pages/QuickPurchase.tsx
@@ -31,6 +31,22 @@ function isValidContact(value: string): boolean {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed);
 }
 
+function formatPeriodLabel(
+  days: number,
+  t: (key: string, options?: Record<string, unknown>) => string,
+): string {
+  const key = `landing.periodLabels.d${days}`;
+  const result = t(key);
+  if (result !== key) return result;
+
+  const months = Math.floor(days / 30);
+  const remainder = days % 30;
+  if (months > 0 && remainder === 0) {
+    return t('landing.periodLabels.nMonths', { count: months });
+  }
+  return t('landing.periodLabels.nDays', { count: days });
+}
+
 // ============================================================
 // Sub-components
 // ============================================================
@@ -82,21 +98,23 @@ function PeriodTabs({
   selectedDays: number;
   onSelect: (days: number) => void;
 }) {
+  const { t } = useTranslation();
+
   return (
-    <div className="scrollbar-none flex gap-2 overflow-x-auto pb-1">
+    <div className="flex flex-wrap gap-2">
       {periods.map((period) => (
         <button
           key={period.days}
           type="button"
           onClick={() => onSelect(period.days)}
           className={cn(
-            'whitespace-nowrap rounded-full px-5 py-2.5 text-sm font-medium transition-all duration-200',
+            'whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all duration-200',
             selectedDays === period.days
               ? 'bg-accent-500 text-white shadow-lg shadow-accent-500/25'
               : 'bg-dark-800/50 text-dark-300 hover:bg-dark-700/50 hover:text-dark-100',
           )}
         >
-          {period.label}
+          {formatPeriodLabel(period.days, t)}
         </button>
       ))}
     </div>
@@ -469,7 +487,9 @@ function SummaryCard({
             <p className="text-xs font-medium uppercase tracking-wider text-dark-500">
               {t('landing.period', 'Period')}
             </p>
-            <p className="mt-1 text-sm text-dark-200">{selectedPeriod.label}</p>
+            <p className="mt-1 text-sm text-dark-200">
+              {formatPeriodLabel(selectedPeriod.days, t)}
+            </p>
           </div>
         )}
         <div className="border-t border-dark-800/50 pt-4">
@@ -788,7 +808,7 @@ export default function QuickPurchase() {
   const showTariffCards = visibleTariffs.length > 1;
 
   return (
-    <div className="min-h-dvh bg-dark-950">
+    <div className="min-h-dvh overflow-x-hidden bg-dark-950">
       <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
         {/* Language switcher */}
         <div className="mb-4 flex justify-end">

From b7c7decfd0f2818b65861699336d6221ba0e0ae2 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 04:56:12 +0300
Subject: [PATCH 22/29] fix: adapt admin landings list for mobile layout

- Badges (active/inactive, gift) now wrap on narrow screens
- Action buttons move to a separate row on mobile (hidden/shown via sm:)
- Delete button pushed to the right on mobile for safety
- Reduced padding and gaps on small screens
- Desktop layout unchanged
---
 src/pages/AdminLandings.tsx | 223 +++++++++++++++++++++++-------------
 1 file changed, 141 insertions(+), 82 deletions(-)

diff --git a/src/pages/AdminLandings.tsx b/src/pages/AdminLandings.tsx
index dcc0746..24211c8 100644
--- a/src/pages/AdminLandings.tsx
+++ b/src/pages/AdminLandings.tsx
@@ -115,7 +115,7 @@ function SortableLandingCard({
       ref={setNodeRef}
       style={style}
       className={cn(
-        'rounded-xl border bg-dark-800 p-4 transition-colors',
+        'rounded-xl border bg-dark-800 p-3 transition-colors sm:p-4',
         isDragging
           ? 'border-accent-500/50 shadow-xl shadow-accent-500/20'
           : landing.is_active
@@ -123,100 +123,159 @@ function SortableLandingCard({
             : 'border-dark-700/50 opacity-60',
       )}
     >
-      <div className="flex items-start gap-3">
+      <div className="flex items-start gap-2 sm:gap-3">
         {/* Drag handle */}
         <button
           {...attributes}
           {...listeners}
-          className="mt-1 flex-shrink-0 cursor-grab touch-none rounded-lg p-2.5 text-dark-500 hover:bg-dark-700/50 hover:text-dark-300 active:cursor-grabbing sm:p-1.5"
+          className="mt-0.5 flex-shrink-0 cursor-grab touch-none rounded-lg p-2 text-dark-500 hover:bg-dark-700/50 hover:text-dark-300 active:cursor-grabbing sm:mt-1 sm:p-1.5"
           title={t('admin.tariffs.dragToReorder')}
         >
           <GripIcon />
         </button>
 
-        {/* Content */}
+        {/* Content + Actions wrapper */}
         <div className="min-w-0 flex-1">
-          <div className="mb-1 flex items-center gap-2">
-            <h3 className="truncate font-medium text-dark-100">
-              {resolveLocaleDisplay(landing.title)}
-            </h3>
-            <span className="rounded bg-dark-800 px-2 py-0.5 text-xs text-dark-400">
-              {landing.slug}
-            </span>
-            {landing.is_active ? (
-              <span className="rounded bg-success-500/20 px-2 py-0.5 text-xs text-success-400">
-                {t('admin.landings.active')}
-              </span>
-            ) : (
-              <span className="rounded bg-dark-600 px-2 py-0.5 text-xs text-dark-400">
-                {t('admin.landings.inactive')}
-              </span>
-            )}
-            {landing.gift_enabled && (
-              <span className="rounded bg-accent-500/20 px-2 py-0.5 text-xs text-accent-400">
-                <GiftIcon />
-              </span>
-            )}
+          {/* Top row: title/slug + actions (desktop) */}
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0 flex-1">
+              <div className="mb-1 flex flex-wrap items-center gap-1.5 sm:gap-2">
+                <h3 className="truncate font-medium text-dark-100">
+                  {resolveLocaleDisplay(landing.title)}
+                </h3>
+                <span className="shrink-0 rounded bg-dark-800 px-2 py-0.5 text-xs text-dark-400">
+                  {landing.slug}
+                </span>
+                {landing.is_active ? (
+                  <span className="shrink-0 rounded bg-success-500/20 px-2 py-0.5 text-xs text-success-400">
+                    {t('admin.landings.active')}
+                  </span>
+                ) : (
+                  <span className="shrink-0 rounded bg-dark-600 px-2 py-0.5 text-xs text-dark-400">
+                    {t('admin.landings.inactive')}
+                  </span>
+                )}
+                {landing.gift_enabled && (
+                  <span className="shrink-0 rounded bg-accent-500/20 px-1.5 py-0.5 text-xs text-accent-400">
+                    <GiftIcon />
+                  </span>
+                )}
+              </div>
+              <div className="text-sm text-dark-400">
+                <span>
+                  {landing.purchase_stats.total} {t('admin.landings.purchases')}
+                </span>
+              </div>
+            </div>
+
+            {/* Actions: hidden on mobile, shown on desktop */}
+            <div className="hidden shrink-0 items-center gap-1.5 sm:flex">
+              <button
+                onClick={onCopyUrl}
+                className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
+                title={t('admin.landings.copyUrl')}
+              >
+                <CopyIcon />
+              </button>
+              <button
+                onClick={onToggle}
+                className={cn(
+                  'rounded-lg p-2 transition-colors',
+                  landing.is_active
+                    ? 'bg-success-500/20 text-success-400 hover:bg-success-500/30'
+                    : 'bg-dark-700 text-dark-400 hover:bg-dark-600',
+                )}
+                title={
+                  landing.is_active ? t('admin.landings.inactive') : t('admin.landings.active')
+                }
+              >
+                {landing.is_active ? <CheckIcon /> : <XIcon />}
+              </button>
+              <button
+                onClick={onEdit}
+                className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
+                title={t('admin.landings.edit')}
+              >
+                <EditIcon />
+              </button>
+              <button
+                onClick={onDelete}
+                className={cn(
+                  'rounded-lg p-2 transition-colors',
+                  isPendingDelete
+                    ? 'bg-error-500/20 text-error-400 ring-1 ring-error-500/30'
+                    : 'bg-dark-700 text-dark-300 hover:bg-error-500/20 hover:text-error-400',
+                )}
+                title={
+                  isPendingDelete
+                    ? t('admin.landings.deleteConfirm', {
+                        title: resolveLocaleDisplay(landing.title),
+                      })
+                    : t('common.delete')
+                }
+              >
+                {isPendingDelete ? (
+                  <span className="px-1 text-xs font-medium">{t('common.delete')}?</span>
+                ) : (
+                  <TrashIcon />
+                )}
+              </button>
+            </div>
           </div>
-          <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-dark-400">
-            <span>
-              {landing.purchase_stats.total} {t('admin.landings.purchases')}
-            </span>
+
+          {/* Actions: shown on mobile only */}
+          <div className="mt-2 flex items-center gap-1.5 sm:hidden">
+            <button
+              onClick={onCopyUrl}
+              className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
+              title={t('admin.landings.copyUrl')}
+            >
+              <CopyIcon />
+            </button>
+            <button
+              onClick={onToggle}
+              className={cn(
+                'rounded-lg p-2 transition-colors',
+                landing.is_active
+                  ? 'bg-success-500/20 text-success-400 hover:bg-success-500/30'
+                  : 'bg-dark-700 text-dark-400 hover:bg-dark-600',
+              )}
+              title={landing.is_active ? t('admin.landings.inactive') : t('admin.landings.active')}
+            >
+              {landing.is_active ? <CheckIcon /> : <XIcon />}
+            </button>
+            <button
+              onClick={onEdit}
+              className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
+              title={t('admin.landings.edit')}
+            >
+              <EditIcon />
+            </button>
+            <div className="flex-1" />
+            <button
+              onClick={onDelete}
+              className={cn(
+                'rounded-lg p-2 transition-colors',
+                isPendingDelete
+                  ? 'bg-error-500/20 text-error-400 ring-1 ring-error-500/30'
+                  : 'bg-dark-700 text-dark-300 hover:bg-error-500/20 hover:text-error-400',
+              )}
+              title={
+                isPendingDelete
+                  ? t('admin.landings.deleteConfirm', {
+                      title: resolveLocaleDisplay(landing.title),
+                    })
+                  : t('common.delete')
+              }
+            >
+              {isPendingDelete ? (
+                <span className="px-1 text-xs font-medium">{t('common.delete')}?</span>
+              ) : (
+                <TrashIcon />
+              )}
+            </button>
           </div>
         </div>
-
-        {/* Actions */}
-        <div className="flex items-center gap-2">
-          <button
-            onClick={onCopyUrl}
-            className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
-            title={t('admin.landings.copyUrl')}
-          >
-            <CopyIcon />
-          </button>
-
-          <button
-            onClick={onToggle}
-            className={cn(
-              'rounded-lg p-2 transition-colors',
-              landing.is_active
-                ? 'bg-success-500/20 text-success-400 hover:bg-success-500/30'
-                : 'bg-dark-700 text-dark-400 hover:bg-dark-600',
-            )}
-            title={landing.is_active ? t('admin.landings.inactive') : t('admin.landings.active')}
-          >
-            {landing.is_active ? <CheckIcon /> : <XIcon />}
-          </button>
-
-          <button
-            onClick={onEdit}
-            className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
-            title={t('admin.landings.edit')}
-          >
-            <EditIcon />
-          </button>
-
-          <button
-            onClick={onDelete}
-            className={cn(
-              'rounded-lg p-2 transition-colors',
-              isPendingDelete
-                ? 'bg-error-500/20 text-error-400 ring-1 ring-error-500/30'
-                : 'bg-dark-700 text-dark-300 hover:bg-error-500/20 hover:text-error-400',
-            )}
-            title={
-              isPendingDelete
-                ? t('admin.landings.deleteConfirm', { title: resolveLocaleDisplay(landing.title) })
-                : t('common.delete')
-            }
-          >
-            {isPendingDelete ? (
-              <span className="px-1 text-xs font-medium">{t('common.delete')}?</span>
-            ) : (
-              <TrashIcon />
-            )}
-          </button>
-        </div>
       </div>
     </div>
   );

From bc452944876b64c5346dc04d53c561831fb31bd8 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 05:44:29 +0300
Subject: [PATCH 23/29] feat: add external squad selection to tariff admin form

- Add ExternalSquadInfo type and getAvailableExternalSquads API method
- Add external_squad_uuid field to TariffDetail, TariffCreateRequest, TariffUpdateRequest
- Add radio-button external squad picker in Servers tab of tariff create/edit
- Add translations for external squad UI in all 4 locales (en, ru, zh, fa)
---
 src/api/tariffs.ts              | 18 ++++++++
 src/locales/en.json             |  4 ++
 src/locales/fa.json             |  4 ++
 src/locales/ru.json             |  4 ++
 src/locales/zh.json             |  4 ++
 src/pages/AdminTariffCreate.tsx | 81 +++++++++++++++++++++++++++++++++
 6 files changed, 115 insertions(+)

diff --git a/src/api/tariffs.ts b/src/api/tariffs.ts
index 5e4234f..8664f24 100644
--- a/src/api/tariffs.ts
+++ b/src/api/tariffs.ts
@@ -85,6 +85,8 @@ export interface TariffDetail {
   daily_price_kopeks: number;
   // Режим сброса трафика
   traffic_reset_mode: string | null; // 'DAY', 'WEEK', 'MONTH', 'NO_RESET', null = глобальная настройка
+  // Внешний сквад RemnaWave
+  external_squad_uuid: string | null;
   created_at: string;
   updated_at: string | null;
 }
@@ -121,6 +123,14 @@ export interface TariffCreateRequest {
   daily_price_kopeks?: number;
   // Режим сброса трафика
   traffic_reset_mode?: string | null;
+  // Внешний сквад RemnaWave
+  external_squad_uuid?: string | null;
+}
+
+export interface ExternalSquadInfo {
+  uuid: string;
+  name: string;
+  members_count: number;
 }
 
 export interface TariffUpdateRequest {
@@ -156,6 +166,8 @@ export interface TariffUpdateRequest {
   daily_price_kopeks?: number;
   // Режим сброса трафика
   traffic_reset_mode?: string | null;
+  // Внешний сквад RemnaWave
+  external_squad_uuid?: string | null;
 }
 
 export interface TariffToggleResponse {
@@ -249,4 +261,10 @@ export const tariffsApi = {
     const response = await apiClient.get('/cabinet/admin/payment-methods/promo-groups');
     return response.data;
   },
+
+  // Get available external squads from RemnaWave
+  getAvailableExternalSquads: async (): Promise<ExternalSquadInfo[]> => {
+    const response = await apiClient.get('/cabinet/admin/tariffs/available-external-squads');
+    return response.data;
+  },
 };
diff --git a/src/locales/en.json b/src/locales/en.json
index ea0c06b..042121d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1923,6 +1923,10 @@
       "noPeriodsHint": "No added periods. Add at least one period.",
       "daysShort": "d.",
       "serversTitle": "Servers",
+      "externalSquadTitle": "External Squad",
+      "externalSquadHint": "Assign a RemnaWave external squad for users on this tariff. When a subscription is created, the user will be automatically added to the selected squad.",
+      "noExternalSquad": "No external squad",
+      "externalSquadUsers": "users",
       "serversTabHint": "Select servers available on this tariff.",
       "noServersAvailable": "No servers available",
       "promoGroupsTitle": "Promo Groups",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 1a64896..3e84979 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -1567,6 +1567,10 @@
       "noPeriodsHint": "هیچ دوره‌ای اضافه نشده. حداقل یک دوره اضافه کنید.",
       "daysShort": "روز",
       "serversTitle": "سرورها",
+      "externalSquadTitle": "گروه خارجی",
+      "externalSquadHint": "یک گروه خارجی RemnaWave برای کاربران این تعرفه تعیین کنید. هنگام ایجاد اشتراک، کاربر به طور خودکار به گروه انتخاب شده اضافه می‌شود.",
+      "noExternalSquad": "بدون گروه خارجی",
+      "externalSquadUsers": "کاربران",
       "serversTabHint": "سرورهای موجود در این تعرفه را انتخاب کنید.",
       "noServersAvailable": "هیچ سروری در دسترس نیست",
       "promoGroupsTitle": "گروه‌های تبلیغاتی",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 2c672ed..10dcf2d 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -2437,6 +2437,10 @@
       "noPeriodsHint": "Нет добавленных периодов. Добавьте хотя бы один период.",
       "daysShort": "дн.",
       "serversTitle": "Серверы",
+      "externalSquadTitle": "Внешний сквад",
+      "externalSquadHint": "Назначьте внешний сквад RemnaWave для пользователей этого тарифа. При создании подписки пользователь будет автоматически добавлен в выбранный сквад.",
+      "noExternalSquad": "Без внешнего сквада",
+      "externalSquadUsers": "пользователей",
       "serversTabHint": "Выберите серверы, доступные на этом тарифе.",
       "noServersAvailable": "Нет доступных серверов",
       "promoGroupsTitle": "Промо-группы",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 7d9a881..2ae4911 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -1604,6 +1604,10 @@
       "noPeriodsHint": "没有添加的周期。请至少添加一个周期。",
       "daysShort": "天",
       "serversTitle": "服务器",
+      "externalSquadTitle": "外部小组",
+      "externalSquadHint": "为此套餐的用户分配RemnaWave外部小组。创建订阅时，用户将自动添加到所选小组。",
+      "noExternalSquad": "无外部小组",
+      "externalSquadUsers": "用户",
       "serversTabHint": "选择此套餐上可用的服务器。",
       "noServersAvailable": "没有可用的服务器",
       "promoGroupsTitle": "促销组",
diff --git a/src/pages/AdminTariffCreate.tsx b/src/pages/AdminTariffCreate.tsx
index 6d62191..f88ccbf 100644
--- a/src/pages/AdminTariffCreate.tsx
+++ b/src/pages/AdminTariffCreate.tsx
@@ -9,6 +9,7 @@ import {
   TariffUpdateRequest,
   PeriodPrice,
   ServerInfo,
+  ExternalSquadInfo,
 } from '../api/tariffs';
 import { AdminBackButton } from '../components/admin';
 import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
@@ -105,6 +106,7 @@ export default function AdminTariffCreate() {
   const [tierLevel, setTierLevel] = useState<number | ''>(1);
   const [periodPrices, setPeriodPrices] = useState<PeriodPrice[]>([]);
   const [selectedSquads, setSelectedSquads] = useState<string[]>([]);
+  const [selectedExternalSquad, setSelectedExternalSquad] = useState<string | null>(null);
   const [selectedPromoGroups, setSelectedPromoGroups] = useState<number[]>([]);
   const [dailyPriceKopeks, setDailyPriceKopeks] = useState<number | ''>(0);
 
@@ -138,6 +140,12 @@ export default function AdminTariffCreate() {
     queryFn: () => tariffsApi.getAvailableServers(),
   });
 
+  // Fetch external squads
+  const { data: externalSquads = [] } = useQuery({
+    queryKey: ['admin-tariffs-external-squads'],
+    queryFn: () => tariffsApi.getAvailableExternalSquads(),
+  });
+
   // Fetch promo groups
   const { data: promoGroups = [] } = useQuery({
     queryKey: ['admin-tariffs-promo-groups'],
@@ -165,6 +173,7 @@ export default function AdminTariffCreate() {
       setTierLevel(data.tier_level || 1);
       setPeriodPrices(data.period_prices?.length ? data.period_prices : []);
       setSelectedSquads(data.allowed_squads || []);
+      setSelectedExternalSquad(data.external_squad_uuid || null);
       setSelectedPromoGroups(
         data.promo_groups?.filter((pg) => pg.is_selected).map((pg) => pg.id) || [],
       );
@@ -211,6 +220,7 @@ export default function AdminTariffCreate() {
       tier_level: toNumber(tierLevel, 1),
       period_prices: isDaily ? [] : periodPrices.filter((p) => p.price_kopeks >= 0),
       allowed_squads: selectedSquads,
+      external_squad_uuid: selectedExternalSquad || null,
       promo_group_ids: selectedPromoGroups.length > 0 ? selectedPromoGroups : undefined,
       traffic_topup_enabled: trafficTopupEnabled,
       traffic_topup_packages: trafficTopupPackages,
@@ -660,6 +670,77 @@ export default function AdminTariffCreate() {
 
       {activeTab === 'servers' && (
         <div className="space-y-4">
+          {/* External Squad */}
+          {externalSquads.length > 0 && (
+            <div className="card space-y-4">
+              <h4 className="text-sm font-medium text-dark-200">
+                {t('admin.tariffs.externalSquadTitle')}
+              </h4>
+              <p className="text-sm text-dark-400">{t('admin.tariffs.externalSquadHint')}</p>
+              <div className="space-y-2">
+                <button
+                  type="button"
+                  onClick={() => setSelectedExternalSquad(null)}
+                  className={`flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors ${
+                    !selectedExternalSquad
+                      ? isDaily
+                        ? 'bg-warning-500/20 text-warning-300'
+                        : 'bg-accent-500/20 text-accent-300'
+                      : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
+                  }`}
+                >
+                  <div
+                    className={`flex h-5 w-5 items-center justify-center rounded-full ${
+                      !selectedExternalSquad
+                        ? isDaily
+                          ? 'bg-warning-500 text-white'
+                          : 'bg-accent-500 text-white'
+                        : 'bg-dark-600'
+                    }`}
+                  >
+                    {!selectedExternalSquad && <CheckIcon />}
+                  </div>
+                  <span className="flex-1 text-sm font-medium">
+                    {t('admin.tariffs.noExternalSquad')}
+                  </span>
+                </button>
+                {externalSquads.map((squad: ExternalSquadInfo) => {
+                  const isSelected = selectedExternalSquad === squad.uuid;
+                  return (
+                    <button
+                      key={squad.uuid}
+                      type="button"
+                      onClick={() => setSelectedExternalSquad(squad.uuid)}
+                      className={`flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors ${
+                        isSelected
+                          ? isDaily
+                            ? 'bg-warning-500/20 text-warning-300'
+                            : 'bg-accent-500/20 text-accent-300'
+                          : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
+                      }`}
+                    >
+                      <div
+                        className={`flex h-5 w-5 items-center justify-center rounded-full ${
+                          isSelected
+                            ? isDaily
+                              ? 'bg-warning-500 text-white'
+                              : 'bg-accent-500 text-white'
+                            : 'bg-dark-600'
+                        }`}
+                      >
+                        {isSelected && <CheckIcon />}
+                      </div>
+                      <span className="flex-1 text-sm font-medium">{squad.name}</span>
+                      <span className="text-xs text-dark-500">
+                        {squad.members_count} {t('admin.tariffs.externalSquadUsers')}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
           {/* Servers */}
           <div className="card space-y-4">
             <h4 className="text-sm font-medium text-dark-200">{t('admin.tariffs.serversTitle')}</h4>

From 97959b013241597e77ed3223fb5aa2d1de8be2d0 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 06:00:17 +0300
Subject: [PATCH 24/29] fix: prevent buyer from activating gift pending
 subscription

When a gift purchase results in pending_activation (recipient has active
subscription), the buyer was shown an Activate button and could replace
the recipient's subscription without consent.

- Add GiftPendingActivationState component showing "Gift sent" message
- Use ?activate=1 URL hint from recipient email to distinguish viewer
- Buyer sees success message, recipient sees activate button
- Add giftPendingActivationDesc translations (ru, en, zh, fa)
---
 src/locales/en.json           |  1 +
 src/locales/fa.json           |  1 +
 src/locales/ru.json           |  1 +
 src/locales/zh.json           |  1 +
 src/pages/PurchaseSuccess.tsx | 85 ++++++++++++++++++++++++++++++++++-
 5 files changed, 88 insertions(+), 1 deletion(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 042121d..1972b8f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3998,6 +3998,7 @@
     "credentialsSentToEmail": "Login credentials sent to your email",
     "giftSentSuccess": "Gift sent!",
     "giftSentDesc": "Recipient will be notified by email",
+    "giftPendingActivationDesc": "The recipient already has an active subscription. They will receive a link to activate the gift.",
     "autoLoginFailed": "Auto-login failed",
     "autoLoginProcessing": "Signing in...",
     "periodLabels": {
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 3e84979..08fe356 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -3549,6 +3549,7 @@
     "credentialsSentToEmail": "اطلاعات ورود به ایمیل شما ارسال شد",
     "giftSentSuccess": "هدیه ارسال شد!",
     "giftSentDesc": "گیرنده از طریق ایمیل مطلع خواهد شد",
+    "giftPendingActivationDesc": "گیرنده در حال حاضر اشتراک فعال دارد. لینک فعال‌سازی هدیه برای او ارسال خواهد شد.",
     "autoLoginFailed": "ورود خودکار ناموفق بود",
     "autoLoginProcessing": "در حال ورود...",
     "periodLabels": {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 10dcf2d..83f3e65 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -4557,6 +4557,7 @@
     "credentialsSentToEmail": "Данные для входа отправлены на email",
     "giftSentSuccess": "Подарок отправлен!",
     "giftSentDesc": "Получатель получит уведомление на email",
+    "giftPendingActivationDesc": "У получателя уже есть активная подписка. Ему будет отправлена ссылка для активации подарка.",
     "autoLoginFailed": "Не удалось выполнить автоматический вход",
     "autoLoginProcessing": "Выполняется вход...",
     "periodLabels": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 2ae4911..cf376ec 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -3548,6 +3548,7 @@
     "credentialsSentToEmail": "登录信息已发送到您的邮箱",
     "giftSentSuccess": "礼物已发送！",
     "giftSentDesc": "收件人将通过邮件收到通知",
+    "giftPendingActivationDesc": "收件人已有活跃订阅。他们将收到激活礼物的链接。",
     "autoLoginFailed": "自动登录失败",
     "autoLoginProcessing": "正在登录...",
     "periodLabels": {
diff --git a/src/pages/PurchaseSuccess.tsx b/src/pages/PurchaseSuccess.tsx
index aacb47c..a4e9575 100644
--- a/src/pages/PurchaseSuccess.tsx
+++ b/src/pages/PurchaseSuccess.tsx
@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router';
+import { useParams, useNavigate, useSearchParams } from 'react-router';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
@@ -502,6 +502,76 @@ function PendingActivationState({
   );
 }
 
+function GiftPendingActivationState({
+  tariffName,
+  periodDays,
+  recipientContactValue,
+  giftMessage,
+}: {
+  tariffName: string | null;
+  periodDays: number | null;
+  recipientContactValue: string | null;
+  giftMessage: string | null;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      {/* Animated checkmark */}
+      <motion.div
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
+        className="flex h-20 w-20 items-center justify-center rounded-full bg-success-500/10"
+      >
+        <motion.svg
+          initial={{ pathLength: 0, opacity: 0 }}
+          animate={{ pathLength: 1, opacity: 1 }}
+          transition={{ duration: 0.4, delay: 0.3 }}
+          className="h-10 w-10 text-success-500"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.5}
+        >
+          <motion.path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M5 13l4 4L19 7"
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 0.4, delay: 0.3 }}
+          />
+        </motion.svg>
+      </motion.div>
+
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">{t('landing.giftSentSuccess')}</h1>
+        {tariffName && periodDays !== null && (
+          <p className="mt-1 text-sm text-dark-300">
+            {tariffName} — {periodDays} {t('landing.daysAccess')}
+          </p>
+        )}
+        {recipientContactValue && (
+          <p className="mt-2 text-sm text-dark-400">
+            {t('landing.giftSentTo', { contact: recipientContactValue })}
+          </p>
+        )}
+        <p className="mt-2 text-sm text-dark-400">{t('landing.giftPendingActivationDesc')}</p>
+        {giftMessage && (
+          <p className="mt-2 text-sm italic text-dark-400">
+            {t('landing.giftMessage')}: {giftMessage}
+          </p>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
 function FailedState() {
   const { t } = useTranslation();
 
@@ -583,6 +653,8 @@ function PollTimedOutState({ onRetry }: { onRetry: () => void }) {
 export default function PurchaseSuccess() {
   const { t } = useTranslation();
   const { token } = useParams<{ token: string }>();
+  const [searchParams] = useSearchParams();
+  const isActivateHint = searchParams.get('activate') === '1';
   const pollStart = useRef(Date.now());
   const [pollTimedOut, setPollTimedOut] = useState(false);
   const [isActivating, setIsActivating] = useState(false);
@@ -650,6 +722,10 @@ export default function PurchaseSuccess() {
   const isPendingActivation = purchaseStatus?.status === 'pending_activation';
   const isFailed = purchaseStatus?.status === 'failed' || purchaseStatus?.status === 'expired';
 
+  // Gift pending activation → buyer sees "gift sent" message, not the activate button.
+  // Recipient arrives via email link with ?activate=1 and sees the activate button instead.
+  const isGiftPendingActivation = isPendingActivation && purchaseStatus?.is_gift && !isActivateHint;
+
   // Email self-purchase delivered → show cabinet credentials
   const isEmailSelfPurchase =
     isSuccess &&
@@ -681,6 +757,13 @@ export default function PurchaseSuccess() {
             isGift={purchaseStatus.is_gift}
             giftMessage={purchaseStatus.gift_message}
           />
+        ) : isGiftPendingActivation ? (
+          <GiftPendingActivationState
+            tariffName={purchaseStatus.tariff_name}
+            periodDays={purchaseStatus.period_days}
+            recipientContactValue={purchaseStatus.recipient_contact_value}
+            giftMessage={purchaseStatus.gift_message}
+          />
         ) : isPendingActivation ? (
           <div className="space-y-4">
             <PendingActivationState

From 5228b2dea6f1adc78c521c197d09726a286516ba Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 06:04:57 +0300
Subject: [PATCH 25/29] feat: add landings permission section translations for
 role editor

---
 src/locales/en.json | 1 +
 src/locales/fa.json | 1 +
 src/locales/ru.json | 1 +
 src/locales/zh.json | 1 +
 4 files changed, 4 insertions(+)

diff --git a/src/locales/en.json b/src/locales/en.json
index 1972b8f..c0a42f7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2885,6 +2885,7 @@
           "apps": "Apps",
           "email_templates": "Email templates",
           "pinned_messages": "Pinned messages",
+          "landings": "Landing pages",
           "updates": "Updates"
         },
         "permissionActions": {
diff --git a/src/locales/fa.json b/src/locales/fa.json
index 08fe356..a9b2c93 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -2618,6 +2618,7 @@
           "apps": "برنامه‌ها",
           "email_templates": "قالب‌های ایمیل",
           "pinned_messages": "پیام‌های سنجاق‌شده",
+          "landings": "صفحات فرود",
           "updates": "به‌روزرسانی‌ها"
         },
         "permissionActions": {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 83f3e65..4f5fc71 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -3429,6 +3429,7 @@
           "apps": "Приложения",
           "email_templates": "Шаблоны писем",
           "pinned_messages": "Закреплённые сообщения",
+          "landings": "Лендинги",
           "updates": "Обновления"
         },
         "permissionActions": {
diff --git a/src/locales/zh.json b/src/locales/zh.json
index cf376ec..c177bf2 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -2617,6 +2617,7 @@
           "apps": "应用",
           "email_templates": "邮件模板",
           "pinned_messages": "置顶消息",
+          "landings": "落地页",
           "updates": "更新"
         },
         "permissionActions": {

From 40722747e33c2dcc5d5ccc1d213b4d2eb39e0f26 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 06:17:25 +0300
Subject: [PATCH 26/29] feat: add user filter chips and resource types to audit
 log

- Replace user ID text input with checkbox-style user chips extracted from log entries
- Add sales_stats and landings to resource type filter
- Fix export not respecting status filter
- Remove dead auto-refresh interval code
- Add aria-pressed and focus-visible styles for accessibility
---
 src/locales/en.json         |  1 +
 src/locales/fa.json         |  1 +
 src/locales/ru.json         |  1 +
 src/locales/zh.json         |  1 +
 src/pages/AdminAuditLog.tsx | 94 ++++++++++++++++++++++++++++++-------
 5 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index c0a42f7..1f8fdec 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3097,6 +3097,7 @@
       "filters": {
         "title": "Filters",
         "active": "Active",
+        "user": "User",
         "action": "Action",
         "actionPlaceholder": "Search by action...",
         "resource": "Resource type",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index a9b2c93..3cda2af 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -2826,6 +2826,7 @@
       "filters": {
         "title": "فیلترها",
         "active": "فعال",
+        "user": "کاربر",
         "action": "عملیات",
         "actionPlaceholder": "جستجو بر اساس عملیات...",
         "resource": "نوع منبع",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 4f5fc71..96d9915 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -3645,6 +3645,7 @@
       "filters": {
         "title": "Фильтры",
         "active": "Активны",
+        "user": "Пользователь",
         "action": "Действие",
         "actionPlaceholder": "Поиск по действию...",
         "resource": "Тип ресурса",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index c177bf2..d6560b1 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -2825,6 +2825,7 @@
       "filters": {
         "title": "筛选",
         "active": "已激活",
+        "user": "用户",
         "action": "操作",
         "actionPlaceholder": "按操作搜索...",
         "resource": "资源类型",
diff --git a/src/pages/AdminAuditLog.tsx b/src/pages/AdminAuditLog.tsx
index 6d27586..a4dc8f3 100644
--- a/src/pages/AdminAuditLog.tsx
+++ b/src/pages/AdminAuditLog.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
@@ -84,6 +84,7 @@ const RESOURCE_TYPES = [
   'users',
   'tickets',
   'stats',
+  'sales_stats',
   'broadcasts',
   'tariffs',
   'promocodes',
@@ -106,6 +107,7 @@ const RESOURCE_TYPES = [
   'apps',
   'email_templates',
   'pinned_messages',
+  'landings',
   'updates',
 ] as const;
 
@@ -116,6 +118,7 @@ const PAGE_SIZE_OPTIONS = [20, 50, 100] as const;
 const AUTO_REFRESH_INTERVAL = 30_000;
 
 interface FiltersState {
+  userId: string;
   action: string;
   resource: string;
   status: string;
@@ -124,6 +127,7 @@ interface FiltersState {
 }
 
 const INITIAL_FILTERS: FiltersState = {
+  userId: '',
   action: '',
   resource: '',
   status: '',
@@ -411,6 +415,11 @@ function LogEntryCard({ entry, isExpanded, onToggle }: LogEntryCardProps) {
 
 // === Main Page ===
 
+interface KnownUser {
+  name: string;
+  email: string | null;
+}
+
 export default function AdminAuditLog() {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -431,8 +440,8 @@ export default function AdminAuditLog() {
   const [exporting, setExporting] = useState(false);
   const [exportError, setExportError] = useState<string | null>(null);
 
-  // Auto-refresh interval ref
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  // Known users accumulated from audit log entries
+  const [knownUsers, setKnownUsers] = useState<Map<number, KnownUser>>(new Map());
 
   // Build query params
   const queryParams = useMemo((): AuditLogFilters => {
@@ -441,6 +450,10 @@ export default function AdminAuditLog() {
       offset: page * pageSize,
     };
 
+    const parsedUserId = parseInt(appliedFilters.userId, 10);
+    if (!isNaN(parsedUserId) && parsedUserId > 0) {
+      params.user_id = parsedUserId;
+    }
     if (appliedFilters.action.trim()) {
       params.action = appliedFilters.action.trim();
     }
@@ -467,21 +480,23 @@ export default function AdminAuditLog() {
     refetchInterval: autoRefresh ? AUTO_REFRESH_INTERVAL : false,
   });
 
-  // Auto-refresh visual indicator
+  // Accumulate unique users from audit log entries
   useEffect(() => {
-    if (autoRefresh) {
-      intervalRef.current = setInterval(() => {
-        // The visual indicator updates are driven by isFetching from react-query
-      }, AUTO_REFRESH_INTERVAL);
-    }
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
+    if (!data?.items?.length) return;
+    setKnownUsers((prev) => {
+      const next = new Map(prev);
+      let changed = false;
+      for (const entry of data.items) {
+        const name = entry.user_first_name || entry.user_email || `#${entry.user_id}`;
+        const existing = next.get(entry.user_id);
+        if (!existing || existing.name !== name || existing.email !== entry.user_email) {
+          next.set(entry.user_id, { name, email: entry.user_email });
+          changed = true;
+        }
       }
-    };
-  }, [autoRefresh]);
+      return changed ? next : prev;
+    });
+  }, [data?.items]);
 
   const entries = data?.items ?? [];
   const total = data?.total ?? 0;
@@ -517,8 +532,11 @@ export default function AdminAuditLog() {
     setExporting(true);
     try {
       const exportParams: AuditLogFilters = {};
+      const exportUserId = parseInt(appliedFilters.userId, 10);
+      if (!isNaN(exportUserId) && exportUserId > 0) exportParams.user_id = exportUserId;
       if (appliedFilters.action.trim()) exportParams.action = appliedFilters.action.trim();
       if (appliedFilters.resource) exportParams.resource_type = appliedFilters.resource;
+      if (appliedFilters.status) exportParams.status = appliedFilters.status;
       if (appliedFilters.dateFrom) exportParams.date_from = appliedFilters.dateFrom;
       if (appliedFilters.dateTo) exportParams.date_to = appliedFilters.dateTo;
 
@@ -548,6 +566,7 @@ export default function AdminAuditLog() {
 
   const hasActiveFilters = useMemo(() => {
     return (
+      appliedFilters.userId.trim() !== '' ||
       appliedFilters.action.trim() !== '' ||
       appliedFilters.resource !== '' ||
       appliedFilters.status !== '' ||
@@ -649,6 +668,49 @@ export default function AdminAuditLog() {
         {filtersOpen && (
           <div className="border-t border-dark-700 p-4">
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {/* User filter */}
+              {knownUsers.size > 0 && (
+                <div className="sm:col-span-2 lg:col-span-3">
+                  <label className="mb-1 block text-sm font-medium text-dark-300">
+                    {t('admin.auditLog.filters.user')}
+                  </label>
+                  <div className="flex flex-wrap gap-2">
+                    {Array.from(knownUsers.entries()).map(([uid, user]) => {
+                      const isSelected = filters.userId === String(uid);
+                      return (
+                        <button
+                          key={uid}
+                          type="button"
+                          aria-pressed={isSelected}
+                          onClick={() =>
+                            setFilters((prev) => ({
+                              ...prev,
+                              userId: isSelected ? '' : String(uid),
+                            }))
+                          }
+                          className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-1 focus-visible:ring-offset-dark-900 ${
+                            isSelected
+                              ? 'border-accent-500 bg-accent-500/20 text-accent-300'
+                              : 'border-dark-600 bg-dark-900 text-dark-300 hover:border-dark-500 hover:text-dark-200'
+                          }`}
+                        >
+                          <span
+                            className={`flex h-4 w-4 items-center justify-center rounded border text-xs ${
+                              isSelected
+                                ? 'border-accent-500 bg-accent-500 text-white'
+                                : 'border-dark-500 bg-dark-800'
+                            }`}
+                          >
+                            {isSelected && '✓'}
+                          </span>
+                          <span>{user.name}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
               {/* Action search */}
               <div>
                 <label

From c3cf8058278464c2390f38c1fb8be72036f2edd4 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 06:23:39 +0300
Subject: [PATCH 27/29] refactor: load RBAC users from API for audit log user
 filter

Instead of extracting users from log entries, fetch all users
with RBAC roles via dedicated endpoint for complete user list.
---
 src/api/rbac.ts             | 17 ++++++++++++++
 src/pages/AdminAuditLog.tsx | 47 ++++++++++++-------------------------
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/api/rbac.ts b/src/api/rbac.ts
index a0af13b..39cbd45 100644
--- a/src/api/rbac.ts
+++ b/src/api/rbac.ts
@@ -49,6 +49,16 @@ export interface UserRoleAssignment {
   user_telegram_id: number | null;
 }
 
+export interface AdminWithRoles {
+  user_id: number;
+  telegram_id: number | null;
+  username: string | null;
+  first_name: string | null;
+  last_name: string | null;
+  email: string | null;
+  role_names: string[];
+}
+
 export interface AssignRolePayload {
   user_id: number;
   role_id: number;
@@ -167,6 +177,13 @@ export const rbacApi = {
     return response.data;
   },
 
+  // --- RBAC Users ---
+
+  getRbacUsers: async (): Promise<AdminWithRoles[]> => {
+    const response = await apiClient.get<AdminWithRoles[]>(`${BASE}/users`);
+    return response.data;
+  },
+
   // --- Role Users ---
 
   getRoleUsers: async (roleId: number): Promise<UserRoleAssignment[]> => {
diff --git a/src/pages/AdminAuditLog.tsx b/src/pages/AdminAuditLog.tsx
index a4dc8f3..96fec9b 100644
--- a/src/pages/AdminAuditLog.tsx
+++ b/src/pages/AdminAuditLog.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
@@ -415,11 +415,6 @@ function LogEntryCard({ entry, isExpanded, onToggle }: LogEntryCardProps) {
 
 // === Main Page ===
 
-interface KnownUser {
-  name: string;
-  email: string | null;
-}
-
 export default function AdminAuditLog() {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -440,9 +435,6 @@ export default function AdminAuditLog() {
   const [exporting, setExporting] = useState(false);
   const [exportError, setExportError] = useState<string | null>(null);
 
-  // Known users accumulated from audit log entries
-  const [knownUsers, setKnownUsers] = useState<Map<number, KnownUser>>(new Map());
-
   // Build query params
   const queryParams = useMemo((): AuditLogFilters => {
     const params: AuditLogFilters = {
@@ -480,23 +472,12 @@ export default function AdminAuditLog() {
     refetchInterval: autoRefresh ? AUTO_REFRESH_INTERVAL : false,
   });
 
-  // Accumulate unique users from audit log entries
-  useEffect(() => {
-    if (!data?.items?.length) return;
-    setKnownUsers((prev) => {
-      const next = new Map(prev);
-      let changed = false;
-      for (const entry of data.items) {
-        const name = entry.user_first_name || entry.user_email || `#${entry.user_id}`;
-        const existing = next.get(entry.user_id);
-        if (!existing || existing.name !== name || existing.email !== entry.user_email) {
-          next.set(entry.user_id, { name, email: entry.user_email });
-          changed = true;
-        }
-      }
-      return changed ? next : prev;
-    });
-  }, [data?.items]);
+  // RBAC users for filter chips
+  const { data: rbacUsers } = useQuery({
+    queryKey: ['rbac-users'],
+    queryFn: () => rbacApi.getRbacUsers(),
+    staleTime: 5 * 60 * 1000,
+  });
 
   const entries = data?.items ?? [];
   const total = data?.total ?? 0;
@@ -669,23 +650,25 @@ export default function AdminAuditLog() {
           <div className="border-t border-dark-700 p-4">
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
               {/* User filter */}
-              {knownUsers.size > 0 && (
+              {rbacUsers && rbacUsers.length > 0 && (
                 <div className="sm:col-span-2 lg:col-span-3">
                   <label className="mb-1 block text-sm font-medium text-dark-300">
                     {t('admin.auditLog.filters.user')}
                   </label>
                   <div className="flex flex-wrap gap-2">
-                    {Array.from(knownUsers.entries()).map(([uid, user]) => {
-                      const isSelected = filters.userId === String(uid);
+                    {rbacUsers.map((ru) => {
+                      const isSelected = filters.userId === String(ru.user_id);
+                      const displayName =
+                        ru.first_name || ru.email || ru.username || `#${ru.user_id}`;
                       return (
                         <button
-                          key={uid}
+                          key={ru.user_id}
                           type="button"
                           aria-pressed={isSelected}
                           onClick={() =>
                             setFilters((prev) => ({
                               ...prev,
-                              userId: isSelected ? '' : String(uid),
+                              userId: isSelected ? '' : String(ru.user_id),
                             }))
                           }
                           className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-1 focus-visible:ring-offset-dark-900 ${
@@ -703,7 +686,7 @@ export default function AdminAuditLog() {
                           >
                             {isSelected && '✓'}
                           </span>
-                          <span>{user.name}</span>
+                          <span>{displayName}</span>
                         </button>
                       );
                     })}

From f7afa002f08cfde0421ab8cfed8f699608fd6bc9 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 07:01:46 +0300
Subject: [PATCH 28/29] feat: add discount UI for landing pages

Add discount configuration in admin editor and countdown timer
display on public purchase page.

- Add discount section to AdminLandingEditor with toggle, percent
  slider, datetime pickers, per-tariff overrides, live preview
- Add DiscountBanner with countdown timer to QuickPurchase page
  using AnimatePresence exit animation and proper interval cleanup
- Add strikethrough prices and discount badges to tariff cards,
  summary card and pay button with null/equality guards
- Add discount translations for ru and en locales
- Fix delete/toggle API return types to match backend contracts
- Fix isoToDatetimeLocal to preserve seconds on re-edit
- Fix preview rounding to match backend integer division
---
 src/api/landings.ts              |  25 +++-
 src/locales/en.json              |  19 ++-
 src/locales/ru.json              |  19 ++-
 src/pages/AdminLandingEditor.tsx | 243 ++++++++++++++++++++++++++++++-
 src/pages/AdminLandings.tsx      |   5 +
 src/pages/QuickPurchase.tsx      | 175 +++++++++++++++++++++-
 6 files changed, 474 insertions(+), 12 deletions(-)

diff --git a/src/api/landings.ts b/src/api/landings.ts
index 28f6a05..db99399 100644
--- a/src/api/landings.ts
+++ b/src/api/landings.ts
@@ -15,6 +15,9 @@ export interface LandingTariffPeriod {
   label: string;
   price_kopeks: number;
   price_label: string;
+  original_price_kopeks: number | null;
+  original_price_label: string | null;
+  discount_percent: number | null;
 }
 
 export interface LandingTariff {
@@ -69,6 +72,12 @@ export type EditableMethodField =
   | 'currency'
   | 'return_url';
 
+export interface LandingDiscountInfo {
+  percent: number;
+  ends_at: string; // ISO datetime
+  badge_text: string | null;
+}
+
 export interface LandingConfig {
   slug: string;
   title: string;
@@ -81,6 +90,7 @@ export interface LandingConfig {
   custom_css: string | null;
   meta_title: string | null;
   meta_description: string | null;
+  discount: LandingDiscountInfo | null;
 }
 
 export interface PurchaseRequest {
@@ -165,6 +175,7 @@ export interface LandingListItem {
   };
   created_at: string | null;
   updated_at: string | null;
+  has_active_discount: boolean;
 }
 
 export interface LandingDetail {
@@ -185,6 +196,11 @@ export interface LandingDetail {
   display_order: number;
   created_at: string | null;
   updated_at: string | null;
+  discount_percent: number | null;
+  discount_overrides: Record<string, number> | null;
+  discount_starts_at: string | null;
+  discount_ends_at: string | null;
+  discount_badge_text: LocaleDict | null;
 }
 
 export interface LandingCreateRequest {
@@ -201,6 +217,11 @@ export interface LandingCreateRequest {
   custom_css?: string;
   meta_title?: LocaleDict;
   meta_description?: LocaleDict;
+  discount_percent?: number | null;
+  discount_overrides?: Record<string, number> | null;
+  discount_starts_at?: string | null;
+  discount_ends_at?: string | null;
+  discount_badge_text?: LocaleDict | null;
 }
 
 export type LandingUpdateRequest = Partial<LandingCreateRequest>;
@@ -278,12 +299,12 @@ export const adminLandingsApi = {
     return response.data;
   },
 
-  delete: async (id: number): Promise<{ message: string }> => {
+  delete: async (id: number): Promise<{ success: boolean }> => {
     const response = await apiClient.delete(`/cabinet/admin/landings/${id}`);
     return response.data;
   },
 
-  toggle: async (id: number): Promise<{ id: number; is_active: boolean; message: string }> => {
+  toggle: async (id: number): Promise<LandingDetail> => {
     const response = await apiClient.post(`/cabinet/admin/landings/${id}/toggle`);
     return response.data;
   },
diff --git a/src/locales/en.json b/src/locales/en.json
index 1f8fdec..a5065b9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3215,7 +3215,18 @@
       "loadingPeriods": "Loading...",
       "periodDaySuffix": "d",
       "localeTab": "Language",
-      "localeHint": "Switch language to edit text in that language"
+      "localeHint": "Switch language to edit text in that language",
+      "discount": "Discount",
+      "discountEnabled": "Enable discount",
+      "discountPercent": "Discount %",
+      "discountStartsAt": "Start date",
+      "discountEndsAt": "End date",
+      "discountBadge": "Banner text (optional)",
+      "discountBadgePlaceholder": "e.g. Spring sale!",
+      "discountOverrides": "Per-tariff overrides",
+      "discountOverridesHint": "Leave empty to use global discount",
+      "discountPreview": "Preview",
+      "discountActive": "Discount"
     }
   },
   "adminUpdates": {
@@ -4003,6 +4014,12 @@
     "giftPendingActivationDesc": "The recipient already has an active subscription. They will receive a link to activate the gift.",
     "autoLoginFailed": "Auto-login failed",
     "autoLoginProcessing": "Signing in...",
+    "discount": {
+      "days": "d",
+      "hours": "h",
+      "minutes": "m",
+      "seconds": "s"
+    },
     "periodLabels": {
       "d1": "1 day",
       "d2": "2 days",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 96d9915..4ddc25a 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -3766,7 +3766,18 @@
       "loadingPeriods": "Загрузка...",
       "periodDaySuffix": "д",
       "localeTab": "Язык",
-      "localeHint": "Переключите язык для редактирования текста на этом языке"
+      "localeHint": "Переключите язык для редактирования текста на этом языке",
+      "discount": "Скидка",
+      "discountEnabled": "Включить скидку",
+      "discountPercent": "Скидка %",
+      "discountStartsAt": "Дата начала",
+      "discountEndsAt": "Дата окончания",
+      "discountBadge": "Текст баннера (необязательно)",
+      "discountBadgePlaceholder": "напр. Весенняя распродажа!",
+      "discountOverrides": "Индивидуальные скидки по тарифам",
+      "discountOverridesHint": "Оставьте пустым для использования общей скидки",
+      "discountPreview": "Предпросмотр",
+      "discountActive": "Скидка"
     }
   },
   "adminUpdates": {
@@ -4562,6 +4573,12 @@
     "giftPendingActivationDesc": "У получателя уже есть активная подписка. Ему будет отправлена ссылка для активации подарка.",
     "autoLoginFailed": "Не удалось выполнить автоматический вход",
     "autoLoginProcessing": "Выполняется вход...",
+    "discount": {
+      "days": "д",
+      "hours": "ч",
+      "minutes": "м",
+      "seconds": "с"
+    },
     "periodLabels": {
       "d1": "1 день",
       "d2": "2 дня",
diff --git a/src/pages/AdminLandingEditor.tsx b/src/pages/AdminLandingEditor.tsx
index 5e09214..961aaa2 100644
--- a/src/pages/AdminLandingEditor.tsx
+++ b/src/pages/AdminLandingEditor.tsx
@@ -41,6 +41,12 @@ import {
 import { cn } from '../lib/utils';
 import type { PaymentMethodSubOptionInfo } from '../types';
 
+function isoToDatetimeLocal(iso: string): string {
+  const d = new Date(iso);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+
 const ChevronDownIcon = ({ open }: { open: boolean }) => (
   <svg
     className={cn('h-5 w-5 transition-transform', open && 'rotate-180')}
@@ -93,6 +99,7 @@ export default function AdminLandingEditor() {
     general: true,
     features: false,
     tariffs: false,
+    discount: false,
     methods: false,
     gifts: false,
     footer: false,
@@ -120,6 +127,13 @@ export default function AdminLandingEditor() {
   const [footerText, setFooterText] = useState<LocaleDict>({});
   const [customCss, setCustomCss] = useState('');
 
+  // Discount state
+  const [discountPercent, setDiscountPercent] = useState<number | null>(null);
+  const [discountOverrides, setDiscountOverrides] = useState<Record<string, number>>({});
+  const [discountStartsAt, setDiscountStartsAt] = useState('');
+  const [discountEndsAt, setDiscountEndsAt] = useState('');
+  const [discountBadgeText, setDiscountBadgeText] = useState<LocaleDict>({});
+
   // DnD sensors
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -231,6 +245,15 @@ export default function AdminLandingEditor() {
     setGiftEnabled(landingData.gift_enabled);
     setFooterText(toLocaleDict(landingData.footer_text));
     setCustomCss(landingData.custom_css ?? '');
+    setDiscountPercent(landingData.discount_percent ?? null);
+    setDiscountOverrides(landingData.discount_overrides ?? {});
+    setDiscountStartsAt(
+      landingData.discount_starts_at ? isoToDatetimeLocal(landingData.discount_starts_at) : '',
+    );
+    setDiscountEndsAt(
+      landingData.discount_ends_at ? isoToDatetimeLocal(landingData.discount_ends_at) : '',
+    );
+    setDiscountBadgeText(toLocaleDict(landingData.discount_badge_text));
   }, [landingData]);
 
   // Create mutation
@@ -328,6 +351,19 @@ export default function AdminLandingEditor() {
       custom_css: customCss || undefined,
       meta_title: nonEmptyDict(metaTitle),
       meta_description: nonEmptyDict(metaDescription),
+      discount_percent: discountPercent ?? null,
+      discount_overrides:
+        discountPercent !== null && Object.keys(discountOverrides).length > 0
+          ? discountOverrides
+          : null,
+      discount_starts_at:
+        discountPercent !== null && discountStartsAt
+          ? new Date(discountStartsAt).toISOString()
+          : null,
+      discount_ends_at:
+        discountPercent !== null && discountEndsAt ? new Date(discountEndsAt).toISOString() : null,
+      discount_badge_text:
+        discountPercent !== null ? (nonEmptyDict(discountBadgeText) ?? null) : null,
     };
 
     if (isEdit) {
@@ -448,13 +484,19 @@ export default function AdminLandingEditor() {
   const toggleTariff = (tariffId: number) => {
     setSelectedTariffIds((prev) => {
       if (prev.includes(tariffId)) {
-        // Clean up allowedPeriods for unchecked tariff
         const key = String(tariffId);
+        // Clean up allowedPeriods for unchecked tariff
         setAllowedPeriods((ap) => {
           if (!(key in ap)) return ap;
           const { [key]: _, ...rest } = ap;
           return rest;
         });
+        // Clean up discount override for unchecked tariff
+        setDiscountOverrides((overrides) => {
+          if (!(key in overrides)) return overrides;
+          const { [key]: _, ...rest } = overrides;
+          return rest;
+        });
         return prev.filter((id) => id !== tariffId);
       }
       return [...prev, tariffId];
@@ -537,6 +579,7 @@ export default function AdminLandingEditor() {
           metaTitle,
           metaDescription,
           footerText,
+          discountBadgeText,
           ...features.flatMap((f) => [f.title, f.description]),
         ]}
         className="mb-4"
@@ -729,6 +772,204 @@ export default function AdminLandingEditor() {
           </div>
         </Section>
 
+        {/* Discount Section */}
+        <Section
+          title={t('admin.landings.discount', 'Discount')}
+          open={openSections.discount}
+          onToggle={() => toggleSection('discount')}
+        >
+          <div className="space-y-4">
+            {/* Enable/disable discount */}
+            <div className="flex items-center justify-between">
+              <label className="text-sm text-dark-400">
+                {t('admin.landings.discountEnabled', 'Enable discount')}
+              </label>
+              <Toggle
+                checked={discountPercent !== null}
+                onChange={() => {
+                  if (discountPercent !== null) {
+                    setDiscountPercent(null);
+                    setDiscountOverrides({});
+                    setDiscountStartsAt('');
+                    setDiscountEndsAt('');
+                    setDiscountBadgeText({});
+                  } else {
+                    setDiscountPercent(10);
+                  }
+                }}
+              />
+            </div>
+
+            {discountPercent !== null && (
+              <div className="space-y-4">
+                {/* Global percent */}
+                <div>
+                  <label className="mb-1 block text-sm text-dark-400">
+                    {t('admin.landings.discountPercent', 'Discount %')}
+                  </label>
+                  <div className="flex items-center gap-3">
+                    <input
+                      type="range"
+                      min={1}
+                      max={99}
+                      value={discountPercent}
+                      onChange={(e) => setDiscountPercent(Number(e.target.value))}
+                      className="h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-dark-700 accent-accent-500"
+                    />
+                    <div className="flex w-20 items-center rounded-lg border border-dark-700 bg-dark-800">
+                      <input
+                        type="number"
+                        min={1}
+                        max={99}
+                        value={discountPercent}
+                        onChange={(e) => {
+                          const v = Math.min(99, Math.max(1, Number(e.target.value) || 1));
+                          setDiscountPercent(v);
+                        }}
+                        className="w-full bg-transparent px-2 py-1.5 text-center text-sm text-dark-100 outline-none"
+                      />
+                      <span className="pr-2 text-sm text-dark-400">%</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Date range */}
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <div>
+                    <label className="mb-1 block text-sm text-dark-400">
+                      {t('admin.landings.discountStartsAt', 'Start date')}
+                    </label>
+                    <input
+                      type="datetime-local"
+                      value={discountStartsAt}
+                      onChange={(e) => setDiscountStartsAt(e.target.value)}
+                      className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500 [&::-webkit-calendar-picker-indicator]:invert"
+                    />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-sm text-dark-400">
+                      {t('admin.landings.discountEndsAt', 'End date')}
+                    </label>
+                    <input
+                      type="datetime-local"
+                      value={discountEndsAt}
+                      onChange={(e) => setDiscountEndsAt(e.target.value)}
+                      className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 outline-none focus:border-accent-500 [&::-webkit-calendar-picker-indicator]:invert"
+                    />
+                  </div>
+                </div>
+
+                {/* Badge text */}
+                <div>
+                  <label className="mb-1 block text-sm text-dark-400">
+                    {t('admin.landings.discountBadge', 'Banner text (optional)')}
+                  </label>
+                  <LocalizedInput
+                    value={discountBadgeText}
+                    onChange={setDiscountBadgeText}
+                    locale={editingLocale}
+                    placeholder={t('admin.landings.discountBadgePlaceholder', 'e.g. Spring sale!')}
+                  />
+                </div>
+
+                {/* Per-tariff overrides */}
+                {selectedTariffIds.length > 0 && (
+                  <div>
+                    <label className="mb-2 block text-sm text-dark-400">
+                      {t('admin.landings.discountOverrides', 'Per-tariff overrides')}
+                    </label>
+                    <p className="mb-2 text-xs text-dark-500">
+                      {t(
+                        'admin.landings.discountOverridesHint',
+                        'Leave empty to use global discount',
+                      )}
+                    </p>
+                    <div className="space-y-2">
+                      {selectedTariffIds.map((tariffId) => {
+                        const tariff = allTariffs.find((tr) => tr.id === tariffId);
+                        if (!tariff) return null;
+                        const override = discountOverrides[String(tariffId)];
+                        const hasOverride = override !== undefined;
+                        return (
+                          <div
+                            key={tariffId}
+                            className="flex items-center gap-3 rounded-lg border border-dark-700 bg-dark-800/50 px-3 py-2"
+                          >
+                            <span className="min-w-0 flex-1 truncate text-sm text-dark-200">
+                              {tariff.name}
+                            </span>
+                            <span className="text-xs text-dark-500">
+                              {hasOverride ? `${override}%` : `${discountPercent}%`}
+                            </span>
+                            <input
+                              type="number"
+                              min={1}
+                              max={99}
+                              value={hasOverride ? override : ''}
+                              placeholder={String(discountPercent)}
+                              onChange={(e) => {
+                                const val = e.target.value;
+                                setDiscountOverrides((prev) => {
+                                  if (!val) {
+                                    const { [String(tariffId)]: _, ...rest } = prev;
+                                    return rest;
+                                  }
+                                  return {
+                                    ...prev,
+                                    [String(tariffId)]: Math.min(99, Math.max(1, Number(val))),
+                                  };
+                                });
+                              }}
+                              className="w-16 rounded border border-dark-600 bg-dark-700 px-2 py-1 text-center text-sm text-dark-100 outline-none focus:border-accent-500"
+                            />
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* Preview */}
+                {selectedTariffIds.length > 0 && (
+                  <div className="rounded-lg border border-dark-600 bg-dark-800/30 p-3">
+                    <p className="mb-2 text-xs font-medium uppercase tracking-wider text-dark-500">
+                      {t('admin.landings.discountPreview', 'Preview')}
+                    </p>
+                    {selectedTariffIds.slice(0, 3).map((tariffId) => {
+                      const tariff = allTariffs.find((tr) => tr.id === tariffId);
+                      if (!tariff) return null;
+                      const override = discountOverrides[String(tariffId)];
+                      const pct = override ?? discountPercent ?? 0;
+                      const periods = tariffPeriodsMap[tariffId];
+                      if (!periods || periods.length === 0) return null;
+                      const firstPeriod = periods[0];
+                      const discounted = Math.max(
+                        1,
+                        firstPeriod.price_kopeks -
+                          Math.floor((firstPeriod.price_kopeks * pct) / 100),
+                      );
+                      return (
+                        <div key={tariffId} className="flex items-center gap-2 py-1">
+                          <span className="text-sm text-dark-300">{tariff.name}:</span>
+                          <span className="text-xs text-dark-500 line-through">
+                            {formatPrice(firstPeriod.price_kopeks)}
+                          </span>
+                          <span className="text-sm font-semibold text-accent-400">
+                            {formatPrice(discounted)}
+                          </span>
+                          <span className="rounded-full bg-accent-500/20 px-1.5 py-0.5 text-[10px] font-medium text-accent-400">
+                            -{pct}%
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </Section>
+
         {/* Payment Methods Section */}
         <Section
           title={t('admin.landings.paymentMethods')}
diff --git a/src/pages/AdminLandings.tsx b/src/pages/AdminLandings.tsx
index 24211c8..96fd103 100644
--- a/src/pages/AdminLandings.tsx
+++ b/src/pages/AdminLandings.tsx
@@ -160,6 +160,11 @@ function SortableLandingCard({
                     <GiftIcon />
                   </span>
                 )}
+                {landing.has_active_discount && (
+                  <span className="rounded-full bg-accent-500/20 px-2 py-0.5 text-[10px] font-medium text-accent-400">
+                    {t('admin.landings.discountActive', 'Discount')}
+                  </span>
+                )}
               </div>
               <div className="text-sm text-dark-400">
                 <span>
diff --git a/src/pages/QuickPurchase.tsx b/src/pages/QuickPurchase.tsx
index 8c95659..730c5e2 100644
--- a/src/pages/QuickPurchase.tsx
+++ b/src/pages/QuickPurchase.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { useParams } from 'react-router';
-import { useQuery, useMutation } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { motion, AnimatePresence } from 'framer-motion';
 import DOMPurify from 'dompurify';
@@ -338,9 +338,24 @@ function TariffCard({
       {/* Price */}
       {selectedPeriod && (
         <div className="mt-3 border-t border-dark-800/30 pt-3">
-          <span className="text-lg font-bold text-accent-400">
-            {formatPrice(selectedPeriod.price_kopeks)}
-          </span>
+          <div className="flex items-center gap-2">
+            <span className="text-lg font-bold text-accent-400">
+              {formatPrice(selectedPeriod.price_kopeks)}
+            </span>
+            {selectedPeriod.original_price_kopeks != null &&
+              selectedPeriod.original_price_kopeks > selectedPeriod.price_kopeks && (
+                <>
+                  <span className="text-sm text-dark-500 line-through">
+                    {formatPrice(selectedPeriod.original_price_kopeks)}
+                  </span>
+                  {selectedPeriod.discount_percent != null && (
+                    <span className="rounded-full bg-accent-500/20 px-1.5 py-0.5 text-[10px] font-bold text-accent-400">
+                      -{selectedPeriod.discount_percent}%
+                    </span>
+                  )}
+                </>
+              )}
+          </div>
         </div>
       )}
     </button>
@@ -496,7 +511,22 @@ function SummaryCard({
           <p className="text-xs font-medium uppercase tracking-wider text-dark-500">
             {t('landing.total', 'Total')}
           </p>
-          <p className="mt-1 text-2xl font-bold text-accent-400">{formatPrice(currentPrice)}</p>
+          <div className="mt-1 flex items-center gap-2">
+            <span className="text-2xl font-bold text-accent-400">{formatPrice(currentPrice)}</span>
+            {selectedPeriod?.original_price_kopeks != null &&
+              selectedPeriod.original_price_kopeks > selectedPeriod.price_kopeks && (
+                <>
+                  <span className="text-base text-dark-500 line-through">
+                    {formatPrice(selectedPeriod.original_price_kopeks)}
+                  </span>
+                  {selectedPeriod.discount_percent != null && (
+                    <span className="rounded-full bg-accent-500/20 px-2 py-0.5 text-xs font-bold text-accent-400">
+                      -{selectedPeriod.discount_percent}%
+                    </span>
+                  )}
+                </>
+              )}
+          </div>
         </div>
       </div>
 
@@ -555,7 +585,14 @@ function SummaryCard({
           <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
         ) : (
           <>
-            {t('landing.pay', 'Pay')} {formatPrice(currentPrice)}
+            {t('landing.pay', 'Pay')}{' '}
+            {selectedPeriod?.original_price_kopeks != null &&
+              selectedPeriod.original_price_kopeks > selectedPeriod.price_kopeks && (
+                <span className="mr-1 text-sm font-normal text-white/50 line-through">
+                  {formatPrice(selectedPeriod.original_price_kopeks)}
+                </span>
+              )}
+            {formatPrice(currentPrice)}
           </>
         )}
       </button>
@@ -571,6 +608,110 @@ function SummaryCard({
   );
 }
 
+// ============================================================
+// Discount Countdown
+// ============================================================
+
+function TimeUnit({ value, label }: { value: number; label: string }) {
+  return (
+    <div className="flex flex-col items-center">
+      <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-dark-800/80 text-lg font-bold tabular-nums text-dark-50 sm:h-12 sm:w-12 sm:text-xl">
+        {String(value).padStart(2, '0')}
+      </span>
+      <span className="mt-1 text-[10px] uppercase tracking-wider text-dark-500">{label}</span>
+    </div>
+  );
+}
+
+function calcTimeLeft(endTime: number) {
+  const diff = Math.max(0, endTime - Date.now());
+  return {
+    diff,
+    days: Math.floor(diff / 86_400_000),
+    hours: Math.floor((diff % 86_400_000) / 3_600_000),
+    minutes: Math.floor((diff % 3_600_000) / 60_000),
+    seconds: Math.floor((diff % 60_000) / 1_000),
+  };
+}
+
+function DiscountBanner({
+  discount,
+  onExpired,
+}: {
+  discount: { percent: number; ends_at: string; badge_text: string | null };
+  onExpired: () => void;
+}) {
+  const { t } = useTranslation();
+  const endTime = useMemo(() => new Date(discount.ends_at).getTime(), [discount.ends_at]);
+  const initial = useMemo(() => calcTimeLeft(endTime), [endTime]);
+  const [timeLeft, setTimeLeft] = useState(initial);
+  const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined);
+  const expiredRef = useRef(false);
+
+  useEffect(() => {
+    expiredRef.current = false;
+    const fresh = calcTimeLeft(endTime);
+    setTimeLeft(fresh);
+    if (fresh.diff === 0) {
+      if (!expiredRef.current) {
+        expiredRef.current = true;
+        onExpired();
+      }
+      return;
+    }
+
+    intervalRef.current = setInterval(() => {
+      const tl = calcTimeLeft(endTime);
+      setTimeLeft(tl);
+      if (tl.diff === 0) {
+        clearInterval(intervalRef.current);
+        if (!expiredRef.current) {
+          expiredRef.current = true;
+          onExpired();
+        }
+      }
+    }, 1000);
+
+    return () => clearInterval(intervalRef.current);
+  }, [endTime, onExpired]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -10 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -10 }}
+      className="mb-8 overflow-hidden rounded-2xl border border-accent-500/30 bg-gradient-to-r from-accent-500/10 via-accent-500/5 to-transparent"
+    >
+      <div className="flex flex-col items-center gap-4 px-5 py-5 sm:flex-row sm:justify-between">
+        {/* Left: badge + text */}
+        <div className="flex items-center gap-3">
+          <span className="shrink-0 rounded-full bg-accent-500 px-3 py-1 text-sm font-bold text-white shadow-lg shadow-accent-500/25">
+            -{discount.percent}%
+          </span>
+          {discount.badge_text && (
+            <span className="text-sm font-medium text-dark-100">{discount.badge_text}</span>
+          )}
+        </div>
+
+        {/* Right: countdown */}
+        <div className="flex items-center gap-1.5">
+          {timeLeft.days > 0 && (
+            <>
+              <TimeUnit value={timeLeft.days} label={t('landing.discount.days', 'd')} />
+              <span className="text-lg font-bold text-dark-500">:</span>
+            </>
+          )}
+          <TimeUnit value={timeLeft.hours} label={t('landing.discount.hours', 'h')} />
+          <span className="text-lg font-bold text-dark-500">:</span>
+          <TimeUnit value={timeLeft.minutes} label={t('landing.discount.minutes', 'm')} />
+          <span className="text-lg font-bold text-dark-500">:</span>
+          <TimeUnit value={timeLeft.seconds} label={t('landing.discount.seconds', 's')} />
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
 // ============================================================
 // Main Component
 // ============================================================
@@ -578,6 +719,7 @@ function SummaryCard({
 export default function QuickPurchase() {
   const { slug } = useParams<{ slug: string }>();
   const { t, i18n } = useTranslation();
+  const queryClient = useQueryClient();
 
   // Fetch config
   const {
@@ -592,6 +734,18 @@ export default function QuickPurchase() {
     retry: 1,
   });
 
+  const [discountExpired, setDiscountExpired] = useState(false);
+
+  const handleDiscountExpired = useCallback(() => {
+    setDiscountExpired(true);
+    queryClient.invalidateQueries({ queryKey: ['landing-config', slug] });
+  }, [queryClient, slug]);
+
+  // Reset expired flag when config changes (e.g. new discount scheduled)
+  useEffect(() => {
+    if (config?.discount) setDiscountExpired(false);
+  }, [config?.discount]);
+
   // Selection state
   const [selectedTariffId, setSelectedTariffId] = useState<number | null>(null);
   const [selectedPeriodDays, setSelectedPeriodDays] = useState<number | null>(null);
@@ -830,6 +984,13 @@ export default function QuickPurchase() {
           )}
         </motion.div>
 
+        {/* Discount banner */}
+        <AnimatePresence>
+          {config.discount && !discountExpired && (
+            <DiscountBanner discount={config.discount} onExpired={handleDiscountExpired} />
+          )}
+        </AnimatePresence>
+
         {/* Two-column layout */}
         <div className="grid gap-8 lg:grid-cols-[1fr_380px]">
           {/* Left column */}

From 46f640a7e0c2026c7629f0cd4cd01f7f4758bbe5 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Mar 2026 07:04:56 +0300
Subject: [PATCH 29/29] fix: add pagination to campaigns list

The campaigns page was fetching only the first 50 items with no way
to load more. Switched from useQuery to useInfiniteQuery with a
"Load more" button so all campaigns are accessible.
---
 src/locales/en.json          |  1 +
 src/locales/ru.json          |  1 +
 src/pages/AdminCampaigns.tsx | 36 ++++++++++++++++++++++++++++++++----
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index a5065b9..5f7347f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2031,6 +2031,7 @@
       "subtitle": "Manage advertising links",
       "createButton": "Create",
       "noData": "No ad campaigns",
+      "loadMore": "Load more",
       "bonusType": {
         "balance": "Balance",
         "subscription": "Subscription",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 4ddc25a..341951f 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -2545,6 +2545,7 @@
       "subtitle": "Управление рекламными ссылками",
       "createButton": "Создать",
       "noData": "Нет рекламных кампаний",
+      "loadMore": "Загрузить ещё",
       "bonusType": {
         "balance": "Баланс",
         "subscription": "Подписка",
diff --git a/src/pages/AdminCampaigns.tsx b/src/pages/AdminCampaigns.tsx
index d6eae21..2d298f0 100644
--- a/src/pages/AdminCampaigns.tsx
+++ b/src/pages/AdminCampaigns.tsx
@@ -1,12 +1,14 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import i18n from '../i18n';
 import { campaignsApi, CampaignListItem, CampaignBonusType } from '../api/campaigns';
 import { PlusIcon, EditIcon, TrashIcon, CheckIcon, XIcon, ChartIcon } from '../components/icons';
 import { usePlatform } from '../platform/hooks/usePlatform';
 
+const PAGE_SIZE = 50;
+
 // Bonus type labels and colors
 const bonusTypeConfig: Record<
   CampaignBonusType,
@@ -69,9 +71,20 @@ export default function AdminCampaigns() {
   const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
 
   // Queries
-  const { data: campaignsData, isLoading } = useQuery({
+  const {
+    data: campaignsData,
+    isLoading,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
     queryKey: ['admin-campaigns'],
-    queryFn: () => campaignsApi.getCampaigns(true),
+    queryFn: ({ pageParam = 0 }) => campaignsApi.getCampaigns(true, pageParam, PAGE_SIZE),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      const loaded = allPages.reduce((sum, p) => sum + p.campaigns.length, 0);
+      return loaded < lastPage.total ? loaded : undefined;
+    },
   });
 
   const { data: overview } = useQuery({
@@ -96,7 +109,7 @@ export default function AdminCampaigns() {
     },
   });
 
-  const campaigns = campaignsData?.campaigns || [];
+  const campaigns = campaignsData?.pages.flatMap((p) => p.campaigns) ?? [];
 
   return (
     <div className="animate-fade-in">
@@ -261,6 +274,21 @@ export default function AdminCampaigns() {
               </div>
             </div>
           ))}
+
+          {/* Load more */}
+          {hasNextPage && (
+            <button
+              onClick={() => fetchNextPage()}
+              disabled={isFetchingNextPage}
+              className="flex w-full items-center justify-center gap-2 rounded-xl border border-dark-700 bg-dark-800 py-3 text-sm font-medium text-dark-300 transition-colors hover:border-dark-600 hover:text-dark-100 disabled:opacity-50"
+            >
+              {isFetchingNextPage ? (
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-dark-500 border-t-accent-500" />
+              ) : (
+                t('admin.campaigns.loadMore', 'Load more')
+              )}
+            </button>
+          )}
         </div>
       )}