From 34415b71f04344a7cf715cc18106791068507199 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 6 Nov 2023 12:03:24 +0100
Subject: [PATCH] fix(ui): fix onboarding picker

---
 .../app/components/Onboarding/Onboarding.tsx  | 40 ++++++++++++--
 .../IdentifyUsersTab/IdentifyUsersTab.tsx     | 40 +++++++-------
 .../InstallOpenReplayTab.tsx                  | 54 ++++++++++---------
 3 files changed, 85 insertions(+), 49 deletions(-)

diff --git a/frontend/app/components/Onboarding/Onboarding.tsx b/frontend/app/components/Onboarding/Onboarding.tsx
index bdc9413a5..c6f7676da 100644
--- a/frontend/app/components/Onboarding/Onboarding.tsx
+++ b/frontend/app/components/Onboarding/Onboarding.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Icon } from 'UI';
 import SideMenu from './components/SideMenu';
 import { withRouter } from 'react-router-dom';
 import { Switch, Route, Redirect, RouteComponentProps } from 'react-router';
@@ -8,6 +9,7 @@ import IdentifyUsersTab from './components/IdentifyUsersTab';
 import IntegrationsTab from './components/IntegrationsTab';
 import ManageUsersTab from './components/ManageUsersTab';
 import { withSiteId } from 'App/routes';
+
 interface Props {
   match: {
     params: {
@@ -17,7 +19,27 @@ interface Props {
   };
   history: RouteComponentProps['history'];
 }
+
 const Onboarding = (props: Props) => {
+  const platforms = [
+    {
+      label: (
+        <div className={'font-semibold flex gap-2 items-center'}>
+          <Icon name="browser/browser" size={16} /> Web
+        </div>
+      ),
+      value: 'web',
+    } as const,
+    {
+      label: (
+        <div className={'font-semibold flex gap-2 items-center'}>
+          <Icon name="mobile" size={16} /> Mobile
+        </div>
+      ),
+      value: 'mobile',
+    } as const,
+  ] as const;
+  const [platform, setPlatform] = React.useState(platforms[0]);
   const {
     match: {
       params: { activeTab, siteId },
@@ -30,7 +52,7 @@ const Onboarding = (props: Props) => {
 
   const onMenuItemClick = (tab: string) => {
     props.history.push(withSiteId(onboardingRoute(tab), siteId));
-  }
+  };
 
   return (
     <div className="container-90 flex relative">
@@ -43,8 +65,20 @@ const Onboarding = (props: Props) => {
           style={{ maxWidth: '1360px' }}
         >
           <Switch>
-            <Route exact strict path={route(OB_TABS.INSTALLING)} component={InstallOpenReplayTab} />
-            <Route exact strict path={route(OB_TABS.IDENTIFY_USERS)} component={IdentifyUsersTab} />
+            <Route exact strict path={route(OB_TABS.INSTALLING)}>
+              <InstallOpenReplayTab
+                platforms={platforms}
+                platform={platform}
+                setPlatform={setPlatform}
+              />
+            </Route>
+            <Route exact strict path={route(OB_TABS.IDENTIFY_USERS)}>
+              <IdentifyUsersTab
+                platforms={platforms}
+                platform={platform}
+                setPlatform={setPlatform}
+              />
+            </Route>
             <Route exact strict path={route(OB_TABS.MANAGE_USERS)} component={ManageUsersTab} />
             <Route exact strict path={route(OB_TABS.INTEGRATIONS)} component={IntegrationsTab} />
             <Redirect to={route(OB_TABS.INSTALLING)} />
diff --git a/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx b/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx
index 8f8cdc1ed..2d3572547 100644
--- a/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx
+++ b/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx
@@ -8,29 +8,20 @@ import withOnboarding, { WithOnboardingProps } from '../withOnboarding';
 import { OB_TABS } from 'App/routes';
 import withPageTitle from 'App/components/hocs/withPageTitle';
 
-interface Props extends WithOnboardingProps {}
+interface Props extends WithOnboardingProps {
+  platforms: Array<{
+    label: string;
+    value: string;
+  }>;
+  platform: {
+    label: string;
+    value: string;
+  };
+  setPlatform: (val: { label: string; value: string }) => void;
+}
 
 function IdentifyUsersTab(props: Props) {
-  const platforms = [
-    {
-      label: (
-        <div className={'font-semibold flex gap-2 items-center'}>
-          <Icon name="browser/browser" size={16} /> Web
-        </div>
-      ),
-      value: 'web',
-    } as const,
-    {
-      label: (
-        <div className={'font-semibold flex gap-2 items-center'}>
-          <Icon name="mobile" size={16} /> Mobile
-        </div>
-      ),
-      value: 'mobile',
-    } as const,
-  ];
-  const [platform, setPlatform] = React.useState(platforms[0]);
-  const { site } = props;
+  const { site, platforms, platform, setPlatform } = props;
 
   React.useEffect(() => {
     if (site.platform)
@@ -125,7 +116,12 @@ function IdentifyUsersTab(props: Props) {
                 </div>
                 {platform.value === 'web' ? (
                   <HighlightCode className="js" text={`tracker.setMetadata('plan', 'premium');`} />
-                  ) : <HighlightCode className="swift" text={`ORTracker.shared.setMetadata('plan', 'premium');`} />}
+                ) : (
+                  <HighlightCode
+                    className="swift"
+                    text={`ORTracker.shared.setMetadata('plan', 'premium');`}
+                  />
+                )}
               </div>
             </div>
           </div>
diff --git a/frontend/app/components/Onboarding/components/InstallOpenReplayTab/InstallOpenReplayTab.tsx b/frontend/app/components/Onboarding/components/InstallOpenReplayTab/InstallOpenReplayTab.tsx
index 1b8277538..3986ae10a 100644
--- a/frontend/app/components/Onboarding/components/InstallOpenReplayTab/InstallOpenReplayTab.tsx
+++ b/frontend/app/components/Onboarding/components/InstallOpenReplayTab/InstallOpenReplayTab.tsx
@@ -1,27 +1,33 @@
 import React from 'react';
 import OnboardingTabs from '../OnboardingTabs';
-import MobileOnboardingTabs from '../OnboardingTabs/OnboardingMobileTabs'
+import MobileOnboardingTabs from '../OnboardingTabs/OnboardingMobileTabs';
 import ProjectFormButton from '../ProjectFormButton';
-import {Button, Icon } from 'UI';
+import { Button, Icon } from 'UI';
 import withOnboarding from '../withOnboarding';
 import { WithOnboardingProps } from '../withOnboarding';
 import { OB_TABS } from 'App/routes';
 import withPageTitle from 'App/components/hocs/withPageTitle';
-import { Segmented } from "antd";
+import { Segmented } from 'antd';
 
-interface Props extends WithOnboardingProps {}
+interface Props extends WithOnboardingProps {
+  platforms: Array<{
+    label: string;
+    value: string;
+  }>;
+  platform: {
+    label: string;
+    value: string;
+  };
+  setPlatform: (val: { label: string; value: string }) => void;
+}
 
 function InstallOpenReplayTab(props: Props) {
-  const platforms = [
-    { label: <div className={"font-semibold flex gap-2 items-center"}><Icon name="browser/browser" size={16} /> Web</div>, value: 'web' } as const,
-    { label: <div className={"font-semibold flex gap-2 items-center"}><Icon name="mobile" size={16} /> Mobile</div>, value: 'mobile' } as const,
-  ]
-  const [platform, setPlatform] = React.useState(platforms[0]);
-  const { site } = props;
+  const { site, platforms, platform, setPlatform } = props;
 
   React.useEffect(() => {
-    if (site.platform) setPlatform(platforms.find(({ value }) => value === site.platform) || platforms[0])
-  }, [site])
+    if (site.platform)
+      setPlatform(platforms.find(({ value }) => value === site.platform) || platforms[0]);
+  }, [site]);
   return (
     <>
       <h1 className="flex items-center px-4 py-3 border-b justify-between">
@@ -43,13 +49,13 @@ function InstallOpenReplayTab(props: Props) {
         <Segmented
           options={platforms}
           value={platform.value}
-          onChange={(value) => setPlatform(platforms.find(({ value: v }) => v === value) || platforms[0])}
+          onChange={(value) =>
+            setPlatform(platforms.find(({ value: v }) => v === value) || platforms[0])
+          }
         />
       </div>
       <div className="p-4">
-        {
-          platform.value === 'web' ? <Snippet site={site} /> : <MobileOnboardingTabs site={site} />
-        }
+        {platform.value === 'web' ? <Snippet site={site} /> : <MobileOnboardingTabs site={site} />}
       </div>
       <div className="border-t px-4 py-3 flex justify-end">
         <Button
@@ -65,16 +71,16 @@ function InstallOpenReplayTab(props: Props) {
   );
 }
 
-function Snippet({ site }: { site: Record<string, any>}) {
+function Snippet({ site }: { site: Record<string, any> }) {
   return (
     <>
-    <div className="mb-6 text-lg font-medium">
-      Setup OpenReplay through NPM package <span className="text-sm">(recommended)</span> or
-      script.
-    </div>
-    <OnboardingTabs site={site} />
+      <div className="mb-6 text-lg font-medium">
+        Setup OpenReplay through NPM package <span className="text-sm">(recommended)</span> or
+        script.
+      </div>
+      <OnboardingTabs site={site} />
     </>
-  )
+  );
 }
 
-export default withOnboarding(withPageTitle("Project Setup - OpenReplay")(InstallOpenReplayTab));
+export default withOnboarding(withPageTitle('Project Setup - OpenReplay')(InstallOpenReplayTab));