diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 90e7cdc..0bcfce7 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,5 +1,5 @@ import { useState, useEffect, useMemo, useCallback } from 'react' -import { useNavigate, useLocation } from 'react-router-dom' +import { useNavigate, useLocation, useSearchParams } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { useQuery } from '@tanstack/react-query' import { useAuthStore } from '../store/auth' @@ -12,9 +12,18 @@ export default function Login() { const { t } = useTranslation() const navigate = useNavigate() const location = useLocation() + const [searchParams] = useSearchParams() const { isAuthenticated, loginWithTelegram, loginWithEmail, registerWithEmail } = useAuthStore() - const [activeTab, setActiveTab] = useState<'telegram' | 'email'>('telegram') - const [authMode, setAuthMode] = useState<'login' | 'register'>('login') + + // Extract referral code from URL + const referralCode = searchParams.get('ref') || '' + + const [activeTab, setActiveTab] = useState<'telegram' | 'email'>(() => + referralCode ? 'email' : 'telegram' + ) + const [authMode, setAuthMode] = useState<'login' | 'register'>(() => + referralCode ? 'register' : 'login' + ) const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [confirmPassword, setConfirmPassword] = useState('') @@ -126,7 +135,7 @@ export default function Login() { if (authMode === 'login') { await loginWithEmail(email, password) } else { - await registerWithEmail(email, password, firstName || undefined) + await registerWithEmail(email, password, firstName || undefined, referralCode || undefined) } navigate(getReturnUrl(), { replace: true }) } catch (err: unknown) { @@ -185,6 +194,18 @@ export default function Login() {

{t('auth.loginSubtitle')}

+ + {/* Referral Banner */} + {referralCode && ( +
+
+ + + + {t('auth.referralInvite')} +
+
+ )} {/* Card */} diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index ddc9079..5eba475 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -1,9 +1,38 @@ import { useState } from 'react' +import { Link } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' import { useAuthStore } from '../store/auth' import { authApi } from '../api/auth' import { notificationsApi, NotificationSettings, NotificationSettingsUpdate } from '../api/notifications' +import { referralApi } from '../api/referral' +import { brandingApi } from '../api/branding' + +// Icons +const CopyIcon = () => ( + + + +) + +const CheckIcon = () => ( + + + +) + +const ShareIcon = () => ( + + + + +) + +const ArrowRightIcon = () => ( + + + +) export default function Profile() { const { t } = useTranslation() @@ -15,6 +44,58 @@ export default function Profile() { const [confirmPassword, setConfirmPassword] = useState('') const [error, setError] = useState(null) const [success, setSuccess] = useState(null) + const [copied, setCopied] = useState(false) + + // Referral data + const { data: referralInfo } = useQuery({ + queryKey: ['referral-info'], + queryFn: referralApi.getReferralInfo, + }) + + const { data: referralTerms } = useQuery({ + queryKey: ['referral-terms'], + queryFn: referralApi.getReferralTerms, + }) + + const { data: branding } = useQuery({ + queryKey: ['branding'], + queryFn: brandingApi.getBranding, + staleTime: 60000, + }) + + // Build referral link + const botUsername = import.meta.env.VITE_TELEGRAM_BOT_USERNAME + const referralLink = referralInfo?.referral_code && botUsername + ? `https://t.me/${botUsername}?start=${referralInfo.referral_code}` + : referralInfo?.referral_link || '' + + const copyReferralLink = () => { + if (referralLink) { + navigator.clipboard.writeText(referralLink) + setCopied(true) + setTimeout(() => setCopied(false), 2000) + } + } + + const shareReferralLink = () => { + if (!referralLink) return + const shareText = t('referral.shareMessage', { + percent: referralInfo?.commission_percent || 0, + botName: branding?.name || import.meta.env.VITE_APP_NAME || 'Cabinet', + }) + + if (navigator.share) { + navigator.share({ + title: t('referral.title'), + text: shareText, + url: referralLink, + }).catch(() => {}) + return + } + + const telegramUrl = `https://t.me/share/url?url=${encodeURIComponent(referralLink)}&text=${encodeURIComponent(shareText)}` + window.open(telegramUrl, '_blank', 'noopener,noreferrer') + } const registerEmailMutation = useMutation({ mutationFn: ({ email, password }: { email: string; password: string }) => @@ -127,6 +208,50 @@ export default function Profile() { + {/* Referral Link Widget */} + {referralTerms?.is_enabled && referralLink && ( +
+
+

{t('referral.yourLink')}

+ + {t('referral.title')} + + +
+
+
+ +
+
+ + +
+
+

+ {t('referral.shareHint', { percent: referralInfo?.commission_percent || 0 })} +

+
+ )} + {/* Email Section */}

{t('profile.emailAuth')}