Enhance onboarding flow with conditional routing

- Introduced OnboardingRoute component to conditionally navigate users based on onboarding status.
- Updated AppRoutes to utilize OnboardingRoute, redirecting users to the home page if onboarding is complete.
- Removed direct Telegram link from GetStartedStep to streamline onboarding process and improve user experience.

This update improves the onboarding experience by ensuring users are only shown the onboarding page when necessary.
This commit is contained in:
Steven Enamakel
2026-01-29 08:02:42 +05:30
parent 520bfdb74c
commit a67cecd009
2 changed files with 13 additions and 5 deletions
+13 -2
View File
@@ -1,4 +1,4 @@
import { Routes, Route } from "react-router-dom";
import { Routes, Route, Navigate } from "react-router-dom";
import Welcome from "./pages/Welcome";
import Login from "./pages/Login";
import Onboarding from "./pages/onboarding/Onboarding";
@@ -7,6 +7,17 @@ import PublicRoute from "./components/PublicRoute";
import ProtectedRoute from "./components/ProtectedRoute";
import DefaultRedirect from "./components/DefaultRedirect";
import SettingsModal from "./components/settings/SettingsModal";
import { useAppSelector } from "./store/hooks";
import { selectIsOnboarded } from "./store/authSelectors";
const OnboardingRoute = () => {
const isOnboarded = useAppSelector(selectIsOnboarded);
// If the user has already completed onboarding, skip this page and go home.
// On first load, when onboarding status is unset/false, we allow showing onboarding.
if (isOnboarded) return <Navigate to="/home" replace />;
return <Onboarding />;
};
const AppRoutes = () => {
return (
@@ -35,7 +46,7 @@ const AppRoutes = () => {
path="/onboarding"
element={
<ProtectedRoute requireAuth={true} requireOnboarded={false}>
<Onboarding />
<OnboardingRoute />
</ProtectedRoute>
}
/>
@@ -1,6 +1,4 @@
import { useState } from "react";
import { openUrl } from "../../../utils/openUrl";
import { TELEGRAM_BOT_USERNAME } from "../../../utils/config";
import ConnectionIndicator from "../../../components/ConnectionIndicator";
interface GetStartedStepProps {
@@ -15,7 +13,6 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
setError(null);
setLoading(true);
try {
await openUrl(`https://t.me/${TELEGRAM_BOT_USERNAME}`);
await onComplete();
} catch (e) {
setError(