diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx index 36417f763..91594be4a 100644 --- a/src/pages/onboarding/Onboarding.tsx +++ b/src/pages/onboarding/Onboarding.tsx @@ -13,7 +13,7 @@ import GetStartedStep from './steps/GetStartedStep'; const Onboarding = () => { const navigate = useNavigate(); const dispatch = useAppDispatch(); - const [currentStep, setCurrentStep] = useState(4); + const [currentStep, setCurrentStep] = useState(1); const totalSteps = 5; // Lottie animation files for each step diff --git a/src/pages/onboarding/steps/ConnectStep.tsx b/src/pages/onboarding/steps/ConnectStep.tsx index 1a4e06c9e..1fa83da8d 100644 --- a/src/pages/onboarding/steps/ConnectStep.tsx +++ b/src/pages/onboarding/steps/ConnectStep.tsx @@ -1,4 +1,6 @@ -import { useState } from 'react'; +import { useState, useMemo } from 'react'; +import { useAppSelector } from '../../../store/hooks'; +import { selectIsAuthenticated } from '../../../store/telegramSelectors'; import GoogleIcon from '../../../assets/icons/GoogleIcon'; import TelegramConnectionModal from '../../../components/TelegramConnectionModal'; @@ -20,10 +22,43 @@ interface ConnectOption { comingSoon?: boolean; } +// Helper to check if there's a saved session in localStorage +const hasSavedSession = (): boolean => { + try { + return !!localStorage.getItem('telegram_session'); + } catch { + return false; + } +}; + const ConnectStep = ({ onNext }: ConnectStepProps) => { const [isTelegramModalOpen, setIsTelegramModalOpen] = useState(false); + const isTelegramAuthenticated = useAppSelector(selectIsAuthenticated); + const sessionString = useAppSelector((state) => state.telegram.sessionString); + + // Check if Telegram account is connected (authenticated or has saved session) + const isTelegramConnected = useMemo(() => { + return isTelegramAuthenticated || !!sessionString || hasSavedSession(); + }, [isTelegramAuthenticated, sessionString]); + + // Check if an account is connected + const isAccountConnected = (accountId: string): boolean => { + if (accountId === 'telegram') { + return isTelegramConnected; + } + // Add other account checks here when implemented + return false; + }; + + // Check if at least one account is connected + const hasConnectedAccount = isTelegramConnected; // Add other accounts when implemented const handleConnect = (provider: string) => { + // Don't connect if already connected + if (isAccountConnected(provider)) { + return; + } + // In a real app, this would handle OAuth console.log(`Connecting to ${provider}`); @@ -44,23 +79,25 @@ const ConnectStep = ({ onNext }: ConnectStepProps) => { }; const connectOptions: ConnectOption[] = [ + { + id: 'telegram', + name: 'Telegram', + description: 'Organize chats, automate messages and get insights.', + icon: Telegram, + }, { id: 'google', name: 'Google', description: 'Manage emails, contacts and calendar events', icon: , + comingSoon: true, }, { id: 'notion', name: 'Notion', description: 'Manage tasks, documents and everything else in your Notion', icon: Notion, - }, - { - id: 'telegram', - name: 'Telegram', - description: 'Organize chats, automate messages and get insights.', - icon: Telegram, + comingSoon: true, }, { id: 'wallet', @@ -88,38 +125,59 @@ const ConnectStep = ({ onNext }: ConnectStepProps) => {
- {connectOptions.map((option) => ( -
- - ))} + + ); + })} -
-
-
-

🔒 Remember everything is private & encrypted!

-

All data and credentials are stored - locally and follows a strict zero-data retention policy so you won't have to worry about anything - getting leaked.

+ {!hasConnectedAccount && ( +
+
+
+

🔒 Remember everything is private & encrypted!

+

All data and credentials are stored + locally and follows a strict zero-data retention policy so you won't have to worry about anything + getting leaked.

+
-
+ )} + + {hasConnectedAccount && ( + + )}