📝 Документация: Исправление user_... при trial подписке

✅ Что сделано:
- app/page.tsx: Добавлена проверка tgUser?.id перед созданием trial
- app/plans/page.tsx: Добавлена валидация user?.id в createUser()
- app/api/create-user/route.ts: Серверная валидация telegramId (400 если отсутствует)
- types/telegram.ts: Расширен TelegramWebApp интерфейс (MainButton, BackButton, HapticFeedback)
- types/telegram.d.ts: Глобальная декларация Window.Telegram
- hooks/useTelegramWebApp.ts: Упрощено - использует (window as any)

❌ ПРОБЛЕМА (user_... имена):
Имена вида user_1770605873419 появляются когда Telegram WebApp не передает данные пользователя.
Теперь система блокирует создание trial/подписки если нет tgUser.id

✅ РЕШЕНИЕ:
Приложение должно быть открыто ВНУТРИ Telegram Mini App, а не в браузере!
Если пользователь видит user_..., значит открыто не через бота.

TRIAL-USERNAME-FIX.md

@@ -0,0 +1,181 @@
+# 🔒 Исправление: Имена user_... при trial подписке
+
+## 📋 Описание проблемы
+
+При оформлении **trial (пробной) подписки** username генерировался в формате `user_1770605873419` (timestamp) вместо реального имени пользователя.
+
+## 🔍 Причина
+
+**Это НЕ баг кода!** Telegram WebApp API не передает данные пользователя (`tgUser.id`, `tgUser.username`, `tgUser.first_name`) когда:
+
+1. ❌ Приложение открыто **в браузере напрямую** (не через Telegram бота)
+2. ❌ Telegram WebApp **не инициализирован** (например, в dev режиме)
+3. ❌ Недостаточно **прав доступа** к Telegram API
+
+### Старое поведение (до фикса):
+
+```typescript
+// app/page.tsx (handleActivateTrial)
+telegramId: tgUser?.id || Date.now(),  // ❌ Fallback на timestamp!
+```
+
+**Результат**: Если `tgUser?.id` = undefined → username = `user_1770605873419` (таймстамп)
+
+## ✅ Решение
+
+Добавлена **обязательная валидация** Telegram ID на всех уровнях:
+
+### 1. Frontend - app/page.tsx (Trial кнопка)
+
+```typescript
+const tgUser = telegramWebApp?.initDataUnsafe?.user;
+
+// 🔍 DEBUG логирование
+console.log('🎁 TRIAL ACTIVATION - Telegram data:', {
+  hasWebApp: !!telegramWebApp,
+  hasUser: !!tgUser,
+  userId: tgUser?.id,
+  username: tgUser?.username,
+  firstName: tgUser?.first_name
+});
+
+// ⚠️ БЛОКИРУЕМ создание без Telegram ID
+if (!tgUser?.id) {
+  console.error('❌ TRIAL BLOCKED: No Telegram user data!');
+  showToastNotification('❌ Откройте приложение через Telegram бота');
+  return;
+}
+
+// Теперь tgUser.id 100% есть
+const response = await fetch('/api/create-user', {
+  body: JSON.stringify({
+    planType: 'trial',
+    telegramId: tgUser.id,  // ✅ Без fallback!
+    telegramUsername: tgUser?.username,
+    firstName: tgUser?.first_name,
+  })
+});
+```
+
+### 2. Frontend - app/plans/page.tsx (3-step flow)
+
+```typescript
+async function createUser(planType, period, locationIds) {
+  const user = telegramWebApp?.initDataUnsafe?.user;
+
+  // ⚠️ БЛОКИРУЕМ без user.id
+  if (!user?.id) {
+    console.error('❌ USER CREATION BLOCKED: No Telegram user ID!');
+    alert('❌ Откройте приложение через Telegram бота\n\nПриложение должно быть открыто в Telegram Mini App.');
+    return;
+  }
+
+  const requestBody = {
+    telegramId: user.id,  // ✅ 100% существует
+    telegramUsername: user?.username || null,
+    firstName: user?.first_name || null,
+  };
+}
+```
+
+### 3. Backend - app/api/create-user/route.ts
+
+```typescript
+export async function POST(request: NextRequest) {
+  const { telegramId, telegramUsername, firstName } = await request.json();
+
+  // ⚠️ СЕРВЕРНАЯ ВАЛИДАЦИЯ
+  if (!telegramId) {
+    logger.error('❌ VALIDATION FAILED: No telegramId provided');
+    return NextResponse.json(
+      { 
+        success: false, 
+        error: 'Telegram ID is required. Please open the app through Telegram bot.' 
+      },
+      { status: 400 }
+    );
+  }
+
+  // Генерация username с приоритетами
+  let username: string;
+  if (telegramUsername) {
+    username = telegramUsername.toLowerCase().replace(/[^a-z0-9_]/g, '_');
+  } else if (firstName && telegramId) {
+    username = `${firstName.toLowerCase().replace(/[^a-z0-9]/g, '_')}_${telegramId}`;
+  } else {
+    username = `user_${telegramId}`;  // ✅ Используем реальный ID, не timestamp
+  }
+}
+```
+
+## 📊 Результат
+
+### До фикса:
+- ❌ `user_1770605873419` (timestamp) - когда Telegram не передает данные
+- ❌ Создается подписка даже без Telegram ID
+- ❌ Невозможно отследить пользователя
+
+### После фикса:
+- ✅ **БЛОКИРОВКА** создания если нет `tgUser.id`
+- ✅ Понятное сообщение: "Откройте приложение через Telegram бота"
+- ✅ Debug логи показывают причину блокировки
+- ✅ Все имена генерируются из **реальных Telegram данных**
+
+## 🧪 Тестирование
+
+### Правильный путь (через Telegram бота):
+
+1. Открыть Telegram бот `@Chat_8n8_bot`
+2. Нажать "Открыть приложение" / `Start`
+3. Telegram WebApp передаст: `{ id: 123456789, username: "john_doe", first_name: "John" }`
+4. Username: `john_doe` ✅
+
+### Неправильный путь (в браузере напрямую):
+
+1. Открыть `https://app.umbrix.net` в Chrome
+2. Telegram WebApp недоступен: `window.Telegram?.WebApp = undefined`
+3. Попытка создать trial → **БЛОКИРОВКА** ❌
+4. Сообщение: "Откройте приложение через Telegram бота"
+
+## 📝 Debug логи
+
+При попытке создать trial без Telegram данных в консоли браузера:
+
+```
+🎁 TRIAL ACTIVATION - Telegram data: {
+  hasWebApp: false,
+  hasInitData: false,
+  hasUser: false,
+  userId: undefined,
+  username: undefined,
+  firstName: undefined,
+  fullData: undefined
+}
+❌ TRIAL BLOCKED: No Telegram user data!
+```
+
+## 🚀 Production деплой
+
+Изменения задеплоены:
+- ✅ Локальный билд: PASSED
+- ✅ Production билд: PASSED
+- ✅ PM2 перезапущен: pid 48353
+- ✅ Git коммит: `806b668`
+
+## 🔑 Ключевые файлы
+
+- [app/page.tsx](app/page.tsx) - handleActivateTrial (строки 188-245)
+- [app/plans/page.tsx](app/plans/page.tsx) - createUser (строки 171-225)
+- [app/api/create-user/route.ts](app/api/create-user/route.ts) - telegramId validation (строки 22-47)
+- [types/telegram.ts](types/telegram.ts) - TelegramWebApp интерфейс
+- [types/telegram.d.ts](types/telegram.d.ts) - Window.Telegram декларация
+- [hooks/useTelegramWebApp.ts](hooks/useTelegramWebApp.ts) - Telegram WebApp hook
+
+## 💡 Важно!
+
+Если пользователь видит имена `user_...` - это означает, что:
+1. Приложение открыто **не через Telegram бота**
+2. Telegram WebApp **не инициализирован**
+3. Нужно переоткрыть через `@Chat_8n8_bot` → "Открыть приложение"
+
+**Теперь система автоматически блокирует такие попытки!** ✅

app/api/create-user/route.ts

@@ -43,6 +43,18 @@ export async function POST(request: NextRequest) {
       referrerId 
     });
 
+    // ⚠️ ВАЛИДАЦИЯ: telegramId обязателен!
+    if (!telegramId) {
+      logger.error('❌ VALIDATION FAILED: No telegramId provided');
+      return NextResponse.json(
+        { 
+          success: false, 
+          error: 'Telegram ID is required. Please open the app through Telegram bot.' 
+        },
+        { status: 400 }
+      );
+    }
+
     // 1. Получаем токен админа
     const tokenResponse = await fetch(`${MARZBAN_API}/api/admin/token`, {
       method: 'POST',

app/page.tsx

@@ -202,13 +202,32 @@ export default function Home() {
       // Получаем реальные данные Telegram
       const tgUser = telegramWebApp?.initDataUnsafe?.user;
 
+      // 🔍 DEBUG: Проверяем данные Telegram при TRIAL подписке
+      console.log('🎁 TRIAL ACTIVATION - Telegram data:', {
+        hasWebApp: !!telegramWebApp,
+        hasInitData: !!telegramWebApp?.initDataUnsafe,
+        hasUser: !!tgUser,
+        userId: tgUser?.id,
+        username: tgUser?.username,
+        firstName: tgUser?.first_name,
+        fullData: tgUser
+      });
+
+      // ⚠️ ВАЖНО: Если Telegram не передал данные - НЕ создаем trial!
+      if (!tgUser?.id) {
+        console.error('❌ TRIAL BLOCKED: No Telegram user data!');
+        showToastNotification('❌ Откройте приложение через Telegram бота');
+        setIsLoading(false);
+        return;
+      }
+
       // Создаем trial подписку через API
       const response = await fetch('/api/create-user', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           planType: 'trial',
-          telegramId: tgUser?.id || Date.now(),
+          telegramId: tgUser.id,  // Теперь 100% есть
           telegramUsername: tgUser?.username || undefined,
           firstName: tgUser?.first_name || undefined,
           referrerId: referrerId || undefined,

app/plans/page.tsx

@@ -187,12 +187,21 @@ export default function PlansNew() {
           last_name: user.last_name,
         } : null
       });
+
+      // ⚠️ ВАЖНО: Если Telegram не передал user.id - блокируем создание
+      if (!user?.id) {
+        console.error('❌ USER CREATION BLOCKED: No Telegram user ID!');
+        alert('❌ Откройте приложение через Telegram бота\n\nПриложение должно быть открыто в Telegram Mini App, а не в браузере.');
+        setStep('plan');
+        setIsCreatingUser(false);
+        return;
+      }
       
       const requestBody = {
         planType,
         period,
         locationIds,
-        telegramId: user?.id || null,
+        telegramId: user.id,  // Теперь 100% есть
         telegramUsername: user?.username || null,
         firstName: user?.first_name || null,
         lastName: user?.last_name || null,

hooks/useTelegramWebApp.ts

@@ -3,147 +3,6 @@
 
 import { useEffect, useState } from 'react';
 
-declare global {
-  interface Window {
-    Telegram?: {
-      WebApp: {
-        ready: () => void;
-        expand: () => void;
-        close: () => void;
-        isExpanded: boolean;
-        viewportHeight: number;
-        viewportStableHeight: number;
-        headerColor: string;
-        backgroundColor: string;
-        isClosingConfirmationEnabled: boolean;
-        platform: string;
-        version: string;
-        
-        MainButton: {
-          text: string;
-          color: string;
-          textColor: string;
-          isVisible: boolean;
-          isActive: boolean;
-          isProgressVisible: boolean;
-          setText: (text: string) => void;
-          onClick: (callback: () => void) => void;
-          offClick: (callback: () => void) => void;
-          show: () => void;
-          hide: () => void;
-          enable: () => void;
-          disable: () => void;
-          showProgress: (leaveActive?: boolean) => void;
-          hideProgress: () => void;
-          setParams: (params: { text?: string; color?: string; text_color?: string; is_active?: boolean; is_visible?: boolean }) => void;
-        };
-        
-        BackButton: {
-          isVisible: boolean;
-          onClick: (callback: () => void) => void;
-          offClick: (callback: () => void) => void;
-          show: () => void;
-          hide: () => void;
-        };
-        
-        HapticFeedback: {
-          impactOccurred: (style: 'light' | 'medium' | 'heavy' | 'rigid' | 'soft') => void;
-          notificationOccurred: (type: 'error' | 'success' | 'warning') => void;
-          selectionChanged: () => void;
-        };
-        
-        setHeaderColor: (color: string) => void;
-        setBackgroundColor: (color: string) => void;
-        enableClosingConfirmation: () => void;
-        disableClosingConfirmation: () => void;
-        
-        showPopup: (params: {
-          title?: string;
-          message: string;
-          buttons: Array<{ id?: string; type: string; text?: string }>;
-        }, callback?: (buttonId: string) => void) => void;
-        
-        showAlert: (message: string, callback?: () => void) => void;
-        showConfirm: (message: string, callback?: (confirmed: boolean) => void) => void;
-        
-        openLink: (url: string, options?: { try_instant_view?: boolean }) => void;
-        openTelegramLink: (url: string) => void;
-        openInvoice: (url: string, callback?: (status: string) => void) => void;
-        
-        shareToStory: (media_url: string, params?: {
-          text?: string;
-          widget_link?: {
-            url: string;
-            name?: string;
-          };
-        }) => void;
-        
-        switchInlineQuery: (query: string, choose_chat_types?: string[]) => void;
-        
-        sendData: (data: string) => void;
-        
-        initData: string;
-        initDataUnsafe: {
-          query_id?: string;
-          user?: {
-            id: number;
-            first_name: string;
-            last_name?: string;
-            username?: string;
-            language_code?: string;
-            is_premium?: boolean;
-            photo_url?: string;
-          };
-          receiver?: {
-            id: number;
-            first_name: string;
-            last_name?: string;
-            username?: string;
-            language_code?: string;
-            is_premium?: boolean;
-          };
-          chat?: {
-            id: number;
-            type: string;
-            title: string;
-            username?: string;
-            photo_url?: string;
-          };
-          chat_type?: string;
-          chat_instance?: string;
-          start_param?: string;
-          can_send_after?: number;
-          auth_date: number;
-          hash: string;
-        };
-        
-        themeParams: {
-          bg_color?: string;
-          text_color?: string;
-          hint_color?: string;
-          link_color?: string;
-          button_color?: string;
-          button_text_color?: string;
-          secondary_bg_color?: string;
-          header_bg_color?: string;
-          accent_text_color?: string;
-          section_bg_color?: string;
-          section_header_text_color?: string;
-          subtitle_text_color?: string;
-          destructive_text_color?: string;
-        };
-        
-        colorScheme: 'light' | 'dark';
-        
-        isVersionAtLeast: (version: string) => boolean;
-        
-        onEvent: (eventType: string, eventHandler: () => void) => void;
-        offEvent: (eventType: string, eventHandler: () => void) => void;
-      };
-    };
-  }
-}
-
 export function useTelegramWebApp() {
   const [webApp, setWebApp] = useState<any>(null);
   const [isReady, setIsReady] = useState(false);
@@ -152,7 +11,7 @@ export function useTelegramWebApp() {
     // Проверяем доступность Telegram WebApp только на клиенте
     if (typeof window === 'undefined') return;
     
-    const tg = window.Telegram?.WebApp;
+    const tg = (window as any).Telegram?.WebApp;
     if (!tg) {
       console.warn('[TelegramWebApp] Not running in Telegram');
       setIsReady(true); // Всё равно помечаем как ready для dev

types/telegram.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Global Telegram WebApp type declarations
+ * Расширяет Window interface для доступа к Telegram WebApp API
+ */
+
+import { TelegramWebApp } from './telegram';
+
+declare global {
+  interface Window {
+    Telegram?: {
+      WebApp: TelegramWebApp;
+    };
+  }
+}
+
+export {};

types/telegram.ts

@@ -46,6 +46,39 @@ export interface TelegramWebApp {
   showPopup(params: any, callback?: () => void): void;
   onEvent(eventType: string, callback: () => void): void;
   offEvent(eventType: string, callback: () => void): void;
+  
+  // Additional methods used in useTelegramWebApp
+  setHeaderColor(color: string): void;
+  setBackgroundColor(color: string): void;
+  enableClosingConfirmation(): void;
+  disableClosingConfirmation(): void;
+  
+  MainButton: {
+    text: string;
+    isVisible: boolean;
+    isActive: boolean;
+    setText(text: string): void;
+    onClick(callback: () => void): void;
+    offClick(callback: () => void): void;
+    show(): void;
+    hide(): void;
+    enable(): void;
+    disable(): void;
+  };
+  
+  BackButton: {
+    isVisible: boolean;
+    onClick(callback: () => void): void;
+    offClick(callback: () => void): void;
+    show(): void;
+    hide(): void;
+  };
+  
+  HapticFeedback: {
+    impactOccurred(style: 'light' | 'medium' | 'heavy' | 'rigid' | 'soft'): void;
+    notificationOccurred(type: 'error' | 'success' | 'warning'): void;
+    selectionChanged(): void;
+  };
 }
 
 export interface TelegramUserData {