From 8c32beae83e34ef6bf31a5101ab2418bfb0f9ace Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 13 Sep 2024 16:51:53 +0200
Subject: [PATCH] ui: spot signup fixes

---
 frontend/app/PrivateRoutes.tsx                | 14 +--
 frontend/app/Router.tsx                       | 14 ++-
 .../app/components/ScopeForm/ScopeForm.tsx    | 96 +++++++++++--------
 3 files changed, 68 insertions(+), 56 deletions(-)

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 (
     <Suspense fallback={<Loader loading={true} className="flex-1" />}>
       <Switch key="content">
+        <Route
+          exact
+          strict
+          path={SCOPE_SETUP}
+          component={enhancedComponents.ScopeSetup}
+        />
+        {redirectToSetup ? <Redirect to={SCOPE_SETUP} /> : null}
         <Route path={CLIENT_PATH} component={enhancedComponents.Client} />
         <Route
           path={withSiteId(ONBOARDING_PATH, siteIdList)}
@@ -143,12 +151,6 @@ function PrivateRoutes(props: Props) {
           path={SPOT_PATH}
           component={enhancedComponents.Spot}
         />
-        <Route
-          exact
-          strict
-          path={SCOPE_SETUP}
-          component={enhancedComponents.ScopeSetup}
-        />
         {props.scope === 1 ? <Redirect to={SPOTS_LIST_PATH} /> : null}
         <Route
           path="/integrations/"
diff --git a/frontend/app/Router.tsx b/frontend/app/Router.tsx
index 106fcb0b1..c050096b1 100644
--- a/frontend/app/Router.tsx
+++ b/frontend/app/Router.tsx
@@ -69,6 +69,7 @@ const Router: React.FC<RouterProps> = (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<RouterProps> = (props) => {
     if (spotCb) {
       setIsSpotCb(true);
     }
+    if (location.pathname.includes('signup')) {
+      setIsSignup(true);
+    }
   }, [spotCb]);
 
   useEffect(() => {
@@ -161,20 +165,14 @@ const Router: React.FC<RouterProps> = (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 (
     <div className={'flex items-center justify-center w-screen h-screen'}>
-    <Card
-      style={{ width: 540 }}
-      title={'👋 Welcome to OpenReplay'}
-      classNames={{
-        header: 'text-2xl font-semibold text-center',
-        body: 'flex flex-col gap-2',
-      }}
-    >
-      <div className={'font-semibold'}>
-        How will you primarily use OpenReplay?{' '}
-      </div>
-      <div className={'text-disabled-text'}>
-        <div>
-          You will have access to all OpenReplay features regardless of your
-          choice.
-        </div>
-        <div>
-          Your preference will simply help us tailor your onboarding experience.
-        </div>
-      </div>
-      <Radio.Group
-        value={scope}
-        onChange={(e) => setScope(e.target.value)}
-        className={'flex flex-col gap-2 mt-4 '}
+      <Card
+        style={{ width: 540 }}
+        title={'👋 Welcome to OpenReplay'}
+        classNames={{
+          header: 'text-2xl font-semibold text-center',
+          body: 'flex flex-col gap-2',
+        }}
       >
-        <Radio value={'full'}>
-          Session Replay & Debugging, Customer Support and more
-        </Radio>
-        <Radio value={'spot'}>Report bugs via Spot</Radio>
-      </Radio.Group>
-
-      <div className={'self-end'}>
-        <Button
-          type={'primary'}
-          onClick={() => onContinue()}
-          icon={<ArrowRightOutlined />}
-          iconPosition={'end'}
+        <div className={'font-semibold'}>
+          How will you primarily use OpenReplay?{' '}
+        </div>
+        <div className={'text-disabled-text'}>
+          <div>
+            You will have access to all OpenReplay features regardless of your
+            choice.
+          </div>
+          <div>
+            Your preference will simply help us tailor your onboarding experience.
+          </div>
+        </div>
+        <Radio.Group
+          value={scope}
+          onChange={(e) => setScope(e.target.value)}
+          className={'flex flex-col gap-2 mt-4 '}
         >
-          Continue
-        </Button>
-      </div>
-    </Card>
+          <Radio value={'full'}>
+            Session Replay & Debugging, Customer Support and more
+          </Radio>
+          <Radio value={'spot'}>Report bugs via Spot</Radio>
+        </Radio.Group>
+
+        <div className={'self-end'}>
+          <Button
+            type={'primary'}
+            onClick={() => onContinue()}
+            icon={<ArrowRightOutlined />}
+            iconPosition={'end'}
+          >
+            Continue
+          </Button>
+        </div>
+      </Card>
     </div>
   );
 }
 
-export default connect(null, { upgradeScope, downgradeScope })(ScopeForm);
+export default connect((state) => ({
+  scopeState: getScope(state),
+}), { upgradeScope, downgradeScope })(ScopeForm);