Add files via upload

src/components/ConnectionModal.tsx

@@ -0,0 +1,562 @@
+import { useState, useMemo, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
+import { subscriptionApi } from '../api/subscription'
+import type { AppInfo, AppConfig, LocalizedText } from '../types'
+
+interface ConnectionModalProps {
+  onClose: () => void
+}
+
+// Platform SVG Icons
+const IosIcon = () => (
+  <svg className="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
+  </svg>
+)
+
+const AndroidIcon = () => (
+  <svg className="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24a11.463 11.463 0 00-8.94 0L5.65 5.67c-.19-.29-.58-.38-.87-.2-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 003 18h18a10.78 10.78 0 00-3.4-8.52zM7 15.25a1.25 1.25 0 110-2.5 1.25 1.25 0 010 2.5zm10 0a1.25 1.25 0 110-2.5 1.25 1.25 0 010 2.5z"/>
+  </svg>
+)
+
+const WindowsIcon = () => (
+  <svg className="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M3 12V6.75l6-1.32v6.48L3 12zm17-9v8.75l-10 .15V5.21L20 3zM3 13l6 .09v6.81l-6-1.15V13zm17 .25V22l-10-1.91V13.1l10 .15z"/>
+  </svg>
+)
+
+const MacosIcon = () => (
+  <svg className="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M4 4h16a2 2 0 012 2v10a2 2 0 01-2 2h-6v2h2a1 1 0 110 2H8a1 1 0 110-2h2v-2H4a2 2 0 01-2-2V6a2 2 0 012-2zm0 2v10h16V6H4zm8 2.5a1 1 0 011 1v3a1 1 0 11-2 0v-3a1 1 0 011-1z"/>
+  </svg>
+)
+
+const LinuxIcon = () => (
+  <svg className="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 2C9.5 2 8 4.5 8 7c0 1.5.5 3 1 4-1.5 1-3 3-3 5 0 .5 0 1 .5 1.5-.5.5-1.5 1-1.5 2 0 1.5 2 2.5 4 2.5h6c2 0 4-1 4-2.5 0-1-1-1.5-1.5-2 .5-.5.5-1 .5-1.5 0-2-1.5-4-3-5 .5-1 1-2.5 1-4 0-2.5-1.5-5-4-5zm-2 5c.5 0 1 .5 1 1s-.5 1-1 1-1-.5-1-1 .5-1 1-1zm4 0c.5 0 1 .5 1 1s-.5 1-1 1-1-.5-1-1 .5-1 1-1zm-2 3c1 0 2 .5 2 1s-1 1-2 1-2-.5-2-1 1-1 2-1z"/>
+  </svg>
+)
+
+const TvIcon = () => (
+  <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="2" y="4" width="20" height="13" rx="2" ry="2"/>
+    <polyline points="8 21 12 17 16 21"/>
+    <line x1="12" y1="17" x2="12" y2="13"/>
+  </svg>
+)
+
+// Platform icon components map
+const platformIconComponents: Record<string, React.FC> = {
+  ios: IosIcon,
+  android: AndroidIcon,
+  macos: MacosIcon,
+  windows: WindowsIcon,
+  linux: LinuxIcon,
+  androidTV: TvIcon,
+  appleTV: TvIcon,
+}
+
+// Platform order for display
+const platformOrder = ['ios', 'android', 'windows', 'macos', 'linux', 'androidTV', 'appleTV']
+
+// Detect user's platform from user agent
+function detectPlatform(): string | null {
+  if (typeof window === 'undefined' || !navigator?.userAgent) {
+    return null
+  }
+
+  const ua = navigator.userAgent.toLowerCase()
+
+  // Check for mobile devices first
+  if (/iphone|ipad|ipod/.test(ua)) {
+    return 'ios'
+  }
+  if (/android/.test(ua)) {
+    // Check if it's Android TV
+    if (/tv|television|smart-tv|smarttv/.test(ua)) {
+      return 'androidTV'
+    }
+    return 'android'
+  }
+
+  // Desktop platforms
+  if (/macintosh|mac os x/.test(ua)) {
+    return 'macos'
+  }
+  if (/windows/.test(ua)) {
+    return 'windows'
+  }
+  if (/linux/.test(ua)) {
+    return 'linux'
+  }
+
+  return null
+}
+
+export default function ConnectionModal({ onClose }: ConnectionModalProps) {
+  const { t, i18n } = useTranslation()
+  const [selectedPlatform, setSelectedPlatform] = useState<string | null>(null)
+  const [selectedApp, setSelectedApp] = useState<AppInfo | null>(null)
+  const [copied, setCopied] = useState(false)
+  const [detectedPlatform, setDetectedPlatform] = useState<string | null>(null)
+
+  const { data: appConfig, isLoading, error } = useQuery<AppConfig>({
+    queryKey: ['appConfig'],
+    queryFn: () => subscriptionApi.getAppConfig(),
+  })
+
+  // Auto-detect platform on mount
+  useEffect(() => {
+    const detected = detectPlatform()
+    setDetectedPlatform(detected)
+  }, [])
+
+  // Helper to get localized text
+  const getLocalizedText = (text: LocalizedText | undefined): string => {
+    if (!text) return ''
+    const lang = i18n.language || 'en'
+    return text[lang] || text['en'] || text['ru'] || Object.values(text)[0] || ''
+  }
+
+  // Get platform name
+  const getPlatformName = (platformKey: string): string => {
+    if (!appConfig?.platformNames?.[platformKey]) {
+      return platformKey
+    }
+    return getLocalizedText(appConfig.platformNames[platformKey])
+  }
+
+  // Get available platforms sorted (detected platform first)
+  const availablePlatforms = useMemo(() => {
+    if (!appConfig?.platforms) return []
+    const available = platformOrder.filter(
+      (key) => appConfig.platforms[key] && appConfig.platforms[key].length > 0
+    )
+    // Move detected platform to the front
+    if (detectedPlatform && available.includes(detectedPlatform)) {
+      const filtered = available.filter(p => p !== detectedPlatform)
+      return [detectedPlatform, ...filtered]
+    }
+    return available
+  }, [appConfig, detectedPlatform])
+
+  // Get apps for selected platform
+  const platformApps = useMemo(() => {
+    if (!selectedPlatform || !appConfig?.platforms?.[selectedPlatform]) return []
+    return appConfig.platforms[selectedPlatform]
+  }, [selectedPlatform, appConfig])
+
+  // Copy subscription link
+  const copySubscriptionLink = async () => {
+    if (!appConfig?.subscriptionUrl) return
+    try {
+      await navigator.clipboard.writeText(appConfig.subscriptionUrl)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Fallback for older browsers
+      const textarea = document.createElement('textarea')
+      textarea.value = appConfig.subscriptionUrl
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }
+
+  // Handle deep link click - use miniapp redirect page like in miniapp index.html
+  const handleConnect = (app: AppInfo) => {
+    if (!app.deepLink) return
+
+    const lang = i18n.language?.startsWith('ru') ? 'ru' : 'en'
+    const redirectUrl = `${window.location.origin}/miniapp/redirect.html?url=${encodeURIComponent(app.deepLink)}&lang=${lang}`
+
+    // Check if it's a custom URL scheme (not http/https)
+    const isCustomScheme = !/^https?:\/\//i.test(app.deepLink)
+    const tg = (window as any).Telegram?.WebApp
+
+    if (isCustomScheme && tg?.openLink) {
+      // For custom URL schemes - open redirect page in external browser via Telegram
+      try {
+        tg.openLink(redirectUrl, { try_instant_view: false })
+        return
+      } catch (e) {
+        console.warn('tg.openLink failed:', e)
+      }
+    }
+
+    // Fallback - direct navigation
+    window.location.href = redirectUrl
+  }
+
+  // Modal wrapper classes - bottom sheet on mobile, centered on desktop
+  const modalOverlayClass = "fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-end sm:items-center sm:justify-center"
+  const modalCardClass = "w-full sm:max-w-lg sm:mx-4 bg-dark-850 sm:rounded-2xl rounded-t-2xl rounded-b-none border-t border-x sm:border border-dark-700/50 shadow-2xl overflow-hidden"
+  const modalContentClass = "p-4 sm:p-6 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] sm:pb-6"
+  // Allow the sheet to almost fill the viewport height on phones
+  const modalScrollableClass = "h-[calc(100vh-1rem)] sm:h-auto sm:max-h-[85vh]"
+
+  if (isLoading) {
+    return (
+      <div className={modalOverlayClass} onClick={onClose}>
+        <div className={modalCardClass} onClick={(e) => e.stopPropagation()}>
+          <div className={modalContentClass}>
+            <div className="flex justify-center py-8">
+              <div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !appConfig) {
+    return (
+      <div className={modalOverlayClass} onClick={onClose}>
+        <div className={modalCardClass} onClick={(e) => e.stopPropagation()}>
+          <div className={modalContentClass}>
+            <div className="text-center py-8">
+              <p className="text-error-400">{t('common.error')}</p>
+              <button onClick={onClose} className="btn-secondary mt-4">
+                {t('common.close')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!appConfig.hasSubscription) {
+    return (
+      <div className={modalOverlayClass} onClick={onClose}>
+        <div className={modalCardClass} onClick={(e) => e.stopPropagation()}>
+          <div className={modalContentClass}>
+            <div className="flex justify-between items-center mb-6">
+              <h2 className="text-lg font-semibold text-dark-100">
+                {t('subscription.connection.title')}
+              </h2>
+              <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>
+              </button>
+            </div>
+            <div className="text-center py-8">
+              <p className="text-dark-400">{t('subscription.connection.noSubscription')}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Step 1: Select platform
+  if (!selectedPlatform) {
+    return (
+      <div className={modalOverlayClass} onClick={onClose}>
+        <div className={`${modalCardClass} ${modalScrollableClass} flex flex-col animate-slide-up`} onClick={(e) => e.stopPropagation()}>
+          {/* Header - fixed */}
+          <div className="flex justify-between items-center p-4 sm:p-6 pb-0 flex-shrink-0">
+            <h2 className="text-lg font-semibold text-dark-100">
+              {t('subscription.connection.title')}
+            </h2>
+            <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>
+            </button>
+          </div>
+
+          {/* Scrollable content */}
+          <div className="flex-1 min-h-0 overflow-y-auto p-4 sm:p-6 pt-3 sm:pt-4">
+            <p className="text-dark-400 text-sm sm:text-base mb-3 sm:mb-4">{t('subscription.connection.selectDevice')}</p>
+
+            <div className="grid grid-cols-2 gap-2 sm:gap-3">
+              {availablePlatforms.map((platform) => {
+                const IconComponent = platformIconComponents[platform]
+                return (
+                  <button
+                    key={platform}
+                    onClick={() => setSelectedPlatform(platform)}
+                    className={`p-3 sm:p-4 rounded-xl border transition-all text-left group ${
+                      platform === detectedPlatform
+                        ? 'bg-accent-500/10 border-accent-500/50 hover:border-accent-500'
+                        : 'bg-dark-800/50 border-dark-700 hover:border-accent-500/50 hover:bg-dark-700/50'
+                    }`}
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className={`${
+                        platform === detectedPlatform ? 'text-accent-400' : 'text-dark-400 group-hover:text-dark-200'
+                      } transition-colors`}>
+                        {IconComponent && <IconComponent />}
+                      </div>
+                      {platform === detectedPlatform && (
+                        <span className="px-2 py-0.5 rounded-full text-xs bg-accent-500/20 text-accent-400">
+                          {t('subscription.connection.yourDevice')}
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-dark-200 font-medium mt-2">{getPlatformName(platform)}</p>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Footer - fixed with safe area */}
+          <div className="flex-shrink-0 p-4 sm:p-6 pt-3 sm:pt-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] sm:pb-6 border-t border-dark-700/50">
+            <button
+              onClick={copySubscriptionLink}
+              className="w-full p-2.5 sm:p-3 rounded-xl bg-dark-800/50 border border-dark-700 hover:border-accent-500/50 transition-all flex items-center justify-center gap-2 text-sm sm:text-base"
+            >
+              {copied ? (
+                <>
+                  <svg className="w-5 h-5 text-success-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                  <span className="text-success-400">{t('subscription.connection.copied')}</span>
+                </>
+              ) : (
+                <>
+                  <svg className="w-5 h-5 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                  </svg>
+                  <span className="text-dark-300">{t('subscription.connection.copyLink')}</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Step 2: Select app (if not selected yet)
+  if (!selectedApp) {
+    return (
+      <div className={modalOverlayClass} onClick={onClose}>
+        <div className={`${modalCardClass} ${modalScrollableClass} flex flex-col animate-slide-up`} onClick={(e) => e.stopPropagation()}>
+          {/* Header - fixed */}
+          <div className="flex justify-between items-center p-4 sm:p-6 pb-0 flex-shrink-0">
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setSelectedPlatform(null)}
+                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="M15.75 19.5L8.25 12l7.5-7.5" />
+                </svg>
+              </button>
+              <h2 className="text-lg font-semibold text-dark-100">
+                {getPlatformName(selectedPlatform)}
+              </h2>
+            </div>
+            <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>
+            </button>
+          </div>
+
+          {/* Scrollable content */}
+          <div className="flex-1 min-h-0 overflow-y-auto p-4 sm:p-6 pt-3 sm:pt-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] sm:pb-6">
+            <p className="text-dark-400 text-sm sm:text-base mb-3 sm:mb-4">{t('subscription.connection.selectApp')}</p>
+
+            {platformApps.length === 0 ? (
+              <div className="text-center py-6 sm:py-8">
+                <p className="text-dark-500">{t('subscription.connection.noApps')}</p>
+              </div>
+            ) : (
+              <div className="space-y-2 sm:space-y-3">
+                {platformApps.map((app) => (
+                  <button
+                    key={app.id}
+                    onClick={() => setSelectedApp(app)}
+                    className="w-full p-3 sm:p-4 rounded-xl bg-dark-800/50 border border-dark-700 hover:border-accent-500/50 hover:bg-dark-700/50 transition-all text-left flex items-center justify-between"
+                  >
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-dark-100 font-medium">{app.name}</span>
+                        {app.isFeatured && (
+                          <span className="px-2 py-0.5 rounded-full text-xs bg-accent-500/20 text-accent-400">
+                            {t('subscription.connection.featured')}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <svg className="w-5 h-5 text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                    </svg>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Step 3: Show app instructions and connect button
+  return (
+    <div className={modalOverlayClass} onClick={onClose}>
+      <div className={`${modalCardClass} ${modalScrollableClass} flex flex-col animate-slide-up`} onClick={(e) => e.stopPropagation()}>
+        {/* Header - fixed */}
+        <div className="flex justify-between items-center p-4 sm:p-6 pb-0 flex-shrink-0">
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setSelectedApp(null)}
+              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="M15.75 19.5L8.25 12l7.5-7.5" />
+              </svg>
+            </button>
+            <h2 className="text-lg font-semibold text-dark-100">
+              {selectedApp.name}
+            </h2>
+          </div>
+          <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>
+          </button>
+        </div>
+
+        {/* Scrollable content */}
+        <div className="flex-1 min-h-0 overflow-y-auto p-4 sm:p-6 pt-3 sm:pt-4">
+          <div className="space-y-4 sm:space-y-6">
+            {/* Step 1: Install */}
+            {selectedApp.installationStep && (
+              <div className="space-y-2 sm:space-y-3">
+                <h3 className="text-sm font-medium text-accent-400">
+                  {t('subscription.connection.installApp')}
+                </h3>
+                <p className="text-sm text-dark-400">
+                  {getLocalizedText(selectedApp.installationStep.description)}
+                </p>
+                {selectedApp.installationStep.buttons && selectedApp.installationStep.buttons.length > 0 && (
+                  <div className="flex flex-wrap gap-2">
+                    {selectedApp.installationStep.buttons.map((btn, idx) => (
+                      <a
+                        key={idx}
+                        href={btn.buttonLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-dark-700 text-dark-200 text-sm hover:bg-dark-600 transition-all"
+                      >
+                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                        </svg>
+                        {getLocalizedText(btn.buttonText)}
+                      </a>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Additional before add subscription */}
+            {selectedApp.additionalBeforeAddSubscriptionStep && (
+              <div className="space-y-2 p-3 rounded-xl bg-dark-800/50 border border-dark-700">
+                {selectedApp.additionalBeforeAddSubscriptionStep.title && (
+                  <h4 className="text-sm font-medium text-dark-200">
+                    {getLocalizedText(selectedApp.additionalBeforeAddSubscriptionStep.title)}
+                  </h4>
+                )}
+                <p className="text-xs text-dark-400">
+                  {getLocalizedText(selectedApp.additionalBeforeAddSubscriptionStep.description)}
+                </p>
+              </div>
+            )}
+
+            {/* Step 2: Add subscription */}
+            {selectedApp.addSubscriptionStep && (
+              <div className="space-y-2 sm:space-y-3">
+                <h3 className="text-sm font-medium text-accent-400">
+                  {t('subscription.connection.addSubscription')}
+                </h3>
+                <p className="text-sm text-dark-400">
+                  {getLocalizedText(selectedApp.addSubscriptionStep.description)}
+                </p>
+
+                {/* Connect button */}
+                {selectedApp.deepLink && (
+                  <button
+                    onClick={() => handleConnect(selectedApp)}
+                    className="btn-primary w-full py-2.5 sm:py-3 flex items-center justify-center gap-2 text-sm sm:text-base"
+                  >
+                    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                    </svg>
+                    {t('subscription.connection.addToApp', { appName: selectedApp.name })}
+                  </button>
+                )}
+
+                {/* Copy link fallback */}
+                <button
+                  onClick={copySubscriptionLink}
+                  className="w-full p-2.5 sm:p-3 rounded-xl bg-dark-800/50 border border-dark-700 hover:border-accent-500/50 transition-all flex items-center justify-center gap-2 text-sm sm:text-base"
+                >
+                  {copied ? (
+                    <>
+                      <svg className="w-5 h-5 text-success-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                      </svg>
+                      <span className="text-success-400">{t('subscription.connection.copied')}</span>
+                    </>
+                  ) : (
+                    <>
+                      <svg className="w-5 h-5 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                      </svg>
+                      <span className="text-dark-300">{t('subscription.connection.copyLink')}</span>
+                    </>
+                  )}
+                </button>
+              </div>
+            )}
+
+            {/* Additional after add subscription */}
+            {selectedApp.additionalAfterAddSubscriptionStep && (
+              <div className="space-y-2 p-3 rounded-xl bg-dark-800/50 border border-dark-700">
+                {selectedApp.additionalAfterAddSubscriptionStep.title && (
+                  <h4 className="text-sm font-medium text-dark-200">
+                    {getLocalizedText(selectedApp.additionalAfterAddSubscriptionStep.title)}
+                  </h4>
+                )}
+                <p className="text-xs text-dark-400">
+                  {getLocalizedText(selectedApp.additionalAfterAddSubscriptionStep.description)}
+                </p>
+              </div>
+            )}
+
+            {/* Step 3: Connect */}
+            {selectedApp.connectAndUseStep && (
+              <div className="space-y-2 sm:space-y-3">
+                <h3 className="text-sm font-medium text-accent-400">
+                  {t('subscription.connection.connectVpn')}
+                </h3>
+                <p className="text-sm text-dark-400">
+                  {getLocalizedText(selectedApp.connectAndUseStep.description)}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer - fixed with safe area */}
+        <div className="flex-shrink-0 p-4 sm:p-6 pt-3 sm:pt-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] sm:pb-6 border-t border-dark-700/50">
+          <button onClick={onClose} className="btn-secondary w-full text-sm sm:text-base">
+            {t('common.close')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}