From 09d18204032cbb435b6d744b696931c601c0ac7b Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Fri, 15 Mar 2024 10:57:29 +0100
Subject: [PATCH] fix(ui): fix onboarding state (#1959)

---
 frontend/app/components/Onboarding/Onboarding.tsx    |  9 +++++++++
 .../components/IdentifyUsersTab/IdentifyUsersTab.tsx | 12 ++++++++----
 .../InstallOpenReplayTab/InstallOpenReplayTab.tsx    |  7 ++++---
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Onboarding/Onboarding.tsx b/frontend/app/components/Onboarding/Onboarding.tsx
index c6f7676da..b82a41e5e 100644
--- a/frontend/app/components/Onboarding/Onboarding.tsx
+++ b/frontend/app/components/Onboarding/Onboarding.tsx
@@ -20,6 +20,13 @@ interface Props {
   history: RouteComponentProps['history'];
 }
 
+
+const platformMap = {
+  'ios': 'mobile',
+  'web': 'web',
+}
+
+
 const Onboarding = (props: Props) => {
   const platforms = [
     {
@@ -70,6 +77,7 @@ const Onboarding = (props: Props) => {
                 platforms={platforms}
                 platform={platform}
                 setPlatform={setPlatform}
+                platformMap={platformMap}
               />
             </Route>
             <Route exact strict path={route(OB_TABS.IDENTIFY_USERS)}>
@@ -77,6 +85,7 @@ const Onboarding = (props: Props) => {
                 platforms={platforms}
                 platform={platform}
                 setPlatform={setPlatform}
+                platformMap={platformMap}
               />
             </Route>
             <Route exact strict path={route(OB_TABS.MANAGE_USERS)} component={ManageUsersTab} />
diff --git a/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx b/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx
index 6f6668b06..21a5d623e 100644
--- a/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx
+++ b/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx
@@ -18,14 +18,15 @@ interface Props extends WithOnboardingProps {
     value: string;
   };
   setPlatform: (val: { label: string; value: string }) => void;
+  platformMap: Record<string, any>;
 }
 
 function IdentifyUsersTab(props: Props) {
-  const { site, platforms, platform, setPlatform } = props;
+  const { site, platforms, platform, setPlatform, platformMap } = props;
 
   React.useEffect(() => {
     if (site.platform)
-      setPlatform(platforms.find(({ value }) => value === site.platform) || platforms[0]);
+      setPlatform(platforms.find(({ value }) => value === platformMap[site.platform]) ?? platform ?? platforms[0]);
   }, [site]);
 
   return (
@@ -37,7 +38,7 @@ function IdentifyUsersTab(props: Props) {
         </div>
 
         <a
-          href="https://docs.openreplay.com/en/v1.10.0/installation/identify-user/"
+          href={`https://docs.openreplay.com/en/installation/identify-user${platform.value === "web" ? "/#with-npm" : "/#with-ios-app"}`}
           target="_blank"
         >
           <Button variant="text-primary" icon="question-circle" className="ml-2">
@@ -68,7 +69,10 @@ function IdentifyUsersTab(props: Props) {
           {platform.value === 'web' ? (
             <HighlightCode className="js" text={`tracker.setUserID('john@doe.com');`} />
           ) : (
-            <HighlightCode className="swift" text={`OpenReplay.shared.setUserID('john@doe.com');`} />
+            <HighlightCode
+              className="swift"
+              text={`OpenReplay.shared.setUserID('john@doe.com');`}
+            />
           )}
           {platform.value === 'web' ? (
             <div className="flex items-center my-2">
diff --git a/frontend/app/components/Onboarding/components/InstallOpenReplayTab/InstallOpenReplayTab.tsx b/frontend/app/components/Onboarding/components/InstallOpenReplayTab/InstallOpenReplayTab.tsx
index 3986ae10a..66fa8a092 100644
--- a/frontend/app/components/Onboarding/components/InstallOpenReplayTab/InstallOpenReplayTab.tsx
+++ b/frontend/app/components/Onboarding/components/InstallOpenReplayTab/InstallOpenReplayTab.tsx
@@ -19,14 +19,15 @@ interface Props extends WithOnboardingProps {
     value: string;
   };
   setPlatform: (val: { label: string; value: string }) => void;
+  platformMap: Record<string, any>
 }
 
 function InstallOpenReplayTab(props: Props) {
-  const { site, platforms, platform, setPlatform } = props;
+  const { site, platforms, platform, setPlatform, platformMap } = props;
 
   React.useEffect(() => {
     if (site.platform)
-      setPlatform(platforms.find(({ value }) => value === site.platform) || platforms[0]);
+      setPlatform(platforms.find(({ value }) => value === platformMap[site.platform]) || platforms[0]);
   }, [site]);
   return (
     <>
@@ -38,7 +39,7 @@ function InstallOpenReplayTab(props: Props) {
             <ProjectFormButton />
           </div>
         </div>
-        <a href="https://docs.openreplay.com/en/sdk/" target="_blank">
+        <a href={platform.value === 'web' ? 'https://docs.openreplay.com/en/sdk/' : 'https://docs.openreplay.com/en/ios-sdk/'} target="_blank">
           <Button variant="text-primary" icon="question-circle" className="ml-2">
             See Documentation
           </Button>