Merge pull request #37 from BEDOLAGA-DEV/dev

Dev

src/components/ConnectionModal.tsx

@@ -227,8 +227,9 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
 
     if (isCustomScheme && tg?.openLink) {
       // For custom URL schemes - open redirect page in external browser via Telegram
+      // try_browser: true - показывает диалог для перехода во внешний браузер (важно для мобильных)
       try {
-        tg.openLink(redirectUrl, { try_instant_view: false })
+        tg.openLink(redirectUrl, { try_instant_view: false, try_browser: true })
         return
       } catch (e) {
         console.warn('tg.openLink failed:', e)
@@ -286,7 +287,7 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
               <h2 className="text-lg font-semibold text-dark-100">
                 {t('subscription.connection.title')}
               </h2>
-              <button onClick={onClose} className="btn-icon" aria-label="Close">
+              <button onClick={onClose} className="btn-icon">
                 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                 </svg>

src/components/TopUpModal.tsx

@@ -9,55 +9,24 @@ import type { PaymentMethod } from '../types'
 const TELEGRAM_LINK_REGEX = /^https?:\/\/t\.me\//i
 const isTelegramPaymentLink = (url: string): boolean => TELEGRAM_LINK_REGEX.test(url)
 
-/**
+const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
- * Открывает платёжную ссылку разными способами в зависимости от окружения.
+  if (typeof window === 'undefined' || !url) return
- * Возвращает true если ссылка успешно открыта, false если все методы не сработали.
- */
-const openPaymentLink = (url: string, reservedWindow?: Window | null): boolean => {
-  if (typeof window === 'undefined' || !url) return false
   const webApp = window.Telegram?.WebApp
 
-  // Попытка 1: Telegram openTelegramLink для t.me ссылок
   if (isTelegramPaymentLink(url) && webApp?.openTelegramLink) {
-    try {
+    try { webApp.openTelegramLink(url); return } catch (e) { console.warn('[TopUpModal] openTelegramLink failed:', e) }
-      webApp.openTelegramLink(url)
-      return true
-    } catch (e) {
-      console.warn('[TopUpModal] openTelegramLink failed:', e)
   }
-  }
-
-  // Попытка 2: Telegram WebApp openLink
   if (webApp?.openLink) {
-    try {
+    // try_browser: true - открывает диалог для перехода во внешний браузер (важно для мобильных)
-      webApp.openLink(url, { try_instant_view: false })
+    try { webApp.openLink(url, { try_instant_view: false, try_browser: true }); return } catch (e) { console.warn('[TopUpModal] webApp.openLink failed:', e) }
-      return true
-    } catch (e) {
-      console.warn('[TopUpModal] webApp.openLink failed:', e)
   }
-  }
-
-  // Попытка 3: Зарезервированное окно браузера
   if (reservedWindow && !reservedWindow.closed) {
-    try {
+    try { reservedWindow.location.href = url; reservedWindow.focus?.() } catch (e) { console.warn('[TopUpModal] Failed to use reserved window:', e) }
-      reservedWindow.location.href = url
+    return
-      reservedWindow.focus?.()
-      return true
-    } catch (e) {
-      console.warn('[TopUpModal] Failed to use reserved window:', e)
   }
-  }
-
-  // Попытка 4: window.open
   const w2 = window.open(url, '_blank', 'noopener,noreferrer')
-  if (w2) {
+  if (w2) { w2.opener = null; return }
-    w2.opener = null
-    return true
-  }
-
-  // Последний вариант: редирект текущей страницы
   window.location.href = url
-  return true
 }
 
 interface TopUpModalProps {
@@ -114,47 +83,24 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
   })
 
   const topUpMutation = useMutation<{
-    payment_id: string
+    payment_id: string; payment_url?: string; invoice_url?: string
-    payment_url?: string
+    amount_kopeks: number; amount_rubles: number; status: string; expires_at: string | null
-    invoice_url?: string
-    amount_kopeks: number
-    amount_rubles: number
-    status: string
-    expires_at: string | null
   }, unknown, number>({
     mutationFn: (amountKopeks: number) => balanceApi.createTopUp(amountKopeks, method.id, selectedOption || undefined),
     onSuccess: (data) => {
-      const redirectUrl = data.payment_url || data.invoice_url
+      const redirectUrl = data.payment_url || (data as any).invoice_url
-      if (!redirectUrl) {
+      if (redirectUrl) openPaymentLink(redirectUrl, popupRef.current)
-        setError(t('balance.noPaymentUrl', 'Сервер не вернул ссылку для оплаты'))
-        closePopupSafely()
-        return
-      }
-      const opened = openPaymentLink(redirectUrl, popupRef.current)
-      if (!opened) {
-        setError(t('balance.openLinkFailed', 'Не удалось открыть страницу оплаты'))
-      }
       popupRef.current = null
       onClose()
     },
     onError: (err: unknown) => {
-      closePopupSafely()
+      try { if (popupRef.current && !popupRef.current.closed) popupRef.current.close() } catch {}
+      popupRef.current = null
       const detail = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail || ''
       setError(detail.includes('not yet implemented') ? t('balance.useBot') : (detail || t('common.error')))
     },
   })
 
-  const closePopupSafely = () => {
-    try {
-      if (popupRef.current && !popupRef.current.closed) {
-        popupRef.current.close()
-      }
-    } catch (e) {
-      console.warn('[TopUpModal] Failed to close popup:', e)
-    }
-    popupRef.current = null
-  }
-
   const handleSubmit = () => {
     setError(null)
     inputRef.current?.blur()
@@ -194,7 +140,7 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-3 bg-dark-800/50">
           <span className="font-semibold text-dark-100">{methodName}</span>
-          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-dark-700 text-dark-400" aria-label="Close">
+          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-dark-700 text-dark-400">
             <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>

src/pages/Support.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useEffect } from 'react'
+import { useState, useRef } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { ticketsApi } from '../api/tickets'
@@ -91,7 +91,6 @@ function MessageMedia({ message, t }: { message: TicketMessage; t: (key: string)
             <button
               className="absolute top-4 right-4 text-white/70 hover:text-white"
               onClick={() => setShowFullImage(false)}
-              aria-label="Close fullscreen"
             >
               <CloseIcon />
             </button>
@@ -142,29 +141,6 @@ export default function Support() {
   const createFileInputRef = useRef<HTMLInputElement>(null)
   const replyFileInputRef = useRef<HTMLInputElement>(null)
 
-  // Cleanup function to revoke object URLs and prevent memory leaks
-  const clearAttachment = useCallback((
-    attachment: MediaAttachment | null,
-    setAttachment: (a: MediaAttachment | null) => void
-  ) => {
-    if (attachment?.preview) {
-      URL.revokeObjectURL(attachment.preview)
-    }
-    setAttachment(null)
-  }, [])
-
-  // Cleanup on unmount to prevent memory leaks
-  useEffect(() => {
-    return () => {
-      if (createAttachment?.preview) {
-        URL.revokeObjectURL(createAttachment.preview)
-      }
-      if (replyAttachment?.preview) {
-        URL.revokeObjectURL(replyAttachment.preview)
-      }
-    }
-  }, []) // Empty deps - only run on unmount
-
   // Get support configuration
   const { data: supportConfig, isLoading: configLoading } = useQuery({
     queryKey: ['support-config'],
@@ -186,14 +162,8 @@ export default function Support() {
   // Handle file selection
   const handleFileSelect = async (
     file: File,
-    setAttachment: (a: MediaAttachment | null) => void,
+    setAttachment: (a: MediaAttachment | null) => void
-    currentAttachment: MediaAttachment | null
   ) => {
-    // Revoke old object URL before creating new one
-    if (currentAttachment?.preview) {
-      URL.revokeObjectURL(currentAttachment.preview)
-    }
-
     // Validate file type
     const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
     if (!allowedTypes.includes(file.type)) {
@@ -254,7 +224,7 @@ export default function Support() {
       setShowCreateForm(false)
       setNewTitle('')
       setNewMessage('')
-      clearAttachment(createAttachment, setCreateAttachment)
+      setCreateAttachment(null)
       setSelectedTicket(ticket)
     },
   })
@@ -272,7 +242,7 @@ export default function Support() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['ticket', selectedTicket?.id] })
       setReplyMessage('')
-      clearAttachment(replyAttachment, setReplyAttachment)
+      setReplyAttachment(null)
     },
   })
 
@@ -348,7 +318,7 @@ export default function Support() {
             if (webApp?.openLink) {
               log.debug('Using openLink')
               try {
-                webApp.openLink(webUrl)
+                webApp.openLink(webUrl, { try_browser: true })
                 return
               } catch (e) {
                 log.error('openLink failed:', e)
@@ -370,7 +340,7 @@ export default function Support() {
           buttonAction: () => {
             const webApp = window.Telegram?.WebApp
             if (webApp?.openLink) {
-              webApp.openLink(supportConfig.support_url!)
+              webApp.openLink(supportConfig.support_url!, { try_browser: true })
             } else {
               window.open(supportConfig.support_url!, '_blank')
             }
@@ -402,7 +372,7 @@ export default function Support() {
             webApp.openTelegramLink(webUrl)
           } else if (webApp?.openLink) {
             log.debug('Fallback using openLink')
-            webApp.openLink(webUrl)
+            webApp.openLink(webUrl, { try_browser: true })
           } else {
             log.debug('Fallback using window.open')
             window.open(webUrl, '_blank')
@@ -473,7 +443,7 @@ export default function Support() {
           onClick={() => {
             setShowCreateForm(true)
             setSelectedTicket(null)
-            clearAttachment(createAttachment, setCreateAttachment)
+            setCreateAttachment(null)
           }}
           className="btn-primary"
         >
@@ -499,7 +469,7 @@ export default function Support() {
                   onClick={() => {
                     setSelectedTicket(ticket as unknown as TicketDetail)
                     setShowCreateForm(false)
-                    clearAttachment(replyAttachment, setReplyAttachment)
+                    setReplyAttachment(null)
                   }}
                   className={`w-full text-left p-4 rounded-xl border transition-all ${
                     selectedTicket?.id === ticket.id
@@ -585,14 +555,14 @@ export default function Support() {
                     className="hidden"
                     onChange={(e) => {
                       const file = e.target.files?.[0]
-                      if (file) handleFileSelect(file, setCreateAttachment, createAttachment)
+                      if (file) handleFileSelect(file, setCreateAttachment)
                       e.target.value = ''
                     }}
                   />
                   {createAttachment ? (
                     <AttachmentPreview
                       attachment={createAttachment}
-                      onRemove={() => clearAttachment(createAttachment, setCreateAttachment)}
+                      onRemove={() => setCreateAttachment(null)}
                     />
                   ) : (
                     <button
@@ -634,7 +604,7 @@ export default function Support() {
                     type="button"
                     onClick={() => {
                       setShowCreateForm(false)
-                      clearAttachment(createAttachment, setCreateAttachment)
+                      setCreateAttachment(null)
                     }}
                     className="btn-secondary"
                   >
@@ -734,14 +704,14 @@ export default function Support() {
                           className="hidden"
                           onChange={(e) => {
                             const file = e.target.files?.[0]
-                            if (file) handleFileSelect(file, setReplyAttachment, replyAttachment)
+                            if (file) handleFileSelect(file, setReplyAttachment)
                             e.target.value = ''
                           }}
                         />
                         {replyAttachment ? (
                           <AttachmentPreview
                             attachment={replyAttachment}
-                            onRemove={() => clearAttachment(replyAttachment, setReplyAttachment)}
+                            onRemove={() => setReplyAttachment(null)}
                           />
                         ) : (
                           <button