diff --git a/frontend/app/PrivateRoutes.tsx b/frontend/app/PrivateRoutes.tsx index 966f73bc5..97f7fac83 100644 --- a/frontend/app/PrivateRoutes.tsx +++ b/frontend/app/PrivateRoutes.tsx @@ -119,6 +119,7 @@ interface Props { function PrivateRoutes(props: Props) { const { onboarding, sites, siteId } = props; const hasRecordings = sites.some(s => s.recorded); + const redirectToSetup = props.scope === 0; const redirectToOnboarding = !onboarding && (localStorage.getItem(GLOBAL_HAS_NO_RECORDINGS) === 'true' || !hasRecordings) && props.scope > 0; const siteIdList: any = sites.map(({ id }) => id).toJS(); @@ -126,6 +127,13 @@ function PrivateRoutes(props: Props) { return ( }> + + {redirectToSetup ? : null} - {props.scope === 1 ? : null} = (props) => { const spotCb = params.get('spotCallback'); const spotReqSent = React.useRef(false); const [isSpotCb, setIsSpotCb] = React.useState(false); + const [isSignup, setIsSignup] = React.useState(false); const [isIframe, setIsIframe] = React.useState(false); const [isJwt, setIsJwt] = React.useState(false); @@ -146,6 +147,9 @@ const Router: React.FC = (props) => { if (spotCb) { setIsSpotCb(true); } + if (location.pathname.includes('signup')) { + setIsSignup(true); + } }, [spotCb]); useEffect(() => { @@ -161,20 +165,14 @@ const Router: React.FC = (props) => { }, [isLoggedIn]); useEffect(() => { - if (scopeSetup) { - history.push(routes.scopeSetup()); - } - }, [scopeSetup]); - - useEffect(() => { - if (isLoggedIn && isSpotCb) { + if (isLoggedIn && isSpotCb && !isSignup) { if (localSpotJwt && !isTokenExpired(localSpotJwt)) { handleSpotLogin(localSpotJwt); } else { logout(); } } - }, [isSpotCb, location, isLoggedIn, localSpotJwt]); + }, [isSpotCb, isLoggedIn, localSpotJwt, isSignup]); useEffect(() => { if (siteId && siteId !== lastFetchedSiteIdRef.current) { diff --git a/frontend/app/components/ScopeForm/ScopeForm.tsx b/frontend/app/components/ScopeForm/ScopeForm.tsx index 6e762ea94..d87edf752 100644 --- a/frontend/app/components/ScopeForm/ScopeForm.tsx +++ b/frontend/app/components/ScopeForm/ScopeForm.tsx @@ -2,7 +2,7 @@ import { ArrowRightOutlined } from '@ant-design/icons'; import { Button, Card, Radio } from 'antd'; import React from 'react'; import { connect } from 'react-redux'; -import { upgradeScope, downgradeScope } from "App/duck/user"; +import { upgradeScope, downgradeScope, getScope } from 'App/duck/user'; import { useHistory } from 'react-router-dom'; import * as routes from 'App/routes' import { SPOT_ONBOARDING } from "../../constants/storageKeys"; @@ -15,8 +15,18 @@ const Scope = { function ScopeForm({ upgradeScope, downgradeScope, + scopeState, }: any) { const [scope, setScope] = React.useState(Scope.FULL); + React.useEffect(() => { + if (scopeState !== 0) { + if (scopeState === 2) { + history.replace(routes.onboarding()) + } else { + history.replace(routes.spotsList()) + } + } + }, [scopeState]) React.useEffect(() => { const isSpotSetup = localStorage.getItem(SPOT_ONBOARDING) if (isSpotSetup) { @@ -36,50 +46,52 @@ function ScopeForm({ }; return ( - - - How will you primarily use OpenReplay?{' '} - - - - You will have access to all OpenReplay features regardless of your - choice. - - - Your preference will simply help us tailor your onboarding experience. - - - setScope(e.target.value)} - className={'flex flex-col gap-2 mt-4 '} + - - Session Replay & Debugging, Customer Support and more - - Report bugs via Spot - - - - onContinue()} - icon={} - iconPosition={'end'} + + How will you primarily use OpenReplay?{' '} + + + + You will have access to all OpenReplay features regardless of your + choice. + + + Your preference will simply help us tailor your onboarding experience. + + + setScope(e.target.value)} + className={'flex flex-col gap-2 mt-4 '} > - Continue - - - + + Session Replay & Debugging, Customer Support and more + + Report bugs via Spot + + + + onContinue()} + icon={} + iconPosition={'end'} + > + Continue + + + ); } -export default connect(null, { upgradeScope, downgradeScope })(ScopeForm); +export default connect((state) => ({ + scopeState: getScope(state), +}), { upgradeScope, downgradeScope })(ScopeForm);