From a7440094d80e326c5ecaccce6083fa80eb4e3229 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 10 Sep 2021 18:26:47 +0530
Subject: [PATCH] change(ui) - assist docs

---
 .../Integrations/AssistDoc/AssistDoc.js       | 74 +++++++++----------
 .../Integrations/AssistDoc/AssistNpm.tsx      | 53 +++++++++++++
 .../Integrations/AssistDoc/AssistScript.tsx   | 33 +++++++++
 .../OnboardingTabs/OnboardingTabs.js          |  1 -
 4 files changed, 119 insertions(+), 42 deletions(-)
 create mode 100644 frontend/app/components/Client/Integrations/AssistDoc/AssistNpm.tsx
 create mode 100644 frontend/app/components/Client/Integrations/AssistDoc/AssistScript.tsx

diff --git a/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js b/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
index 828051f57..a0aef3cad 100644
--- a/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
+++ b/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
@@ -1,61 +1,53 @@
 import Highlight from 'react-highlight'
 import ToggleContent from 'Shared/ToggleContent'
 import DocLink from 'Shared/DocLink/DocLink';
+import AssistScript from './AssistScript'
+import AssistNpm from './AssistNpm'
+import { Tabs } from 'UI';
+import { useState } from 'react';
+
+const NPM = 'NPM'
+const SCRIPT = 'SCRIPT'
+const TABS = [
+  { key: SCRIPT, text: SCRIPT },
+  { key: NPM, text: NPM },
+]
 
 const AssistDoc = (props) => {
   const { projectKey } = props;
+  const [activeTab, setActiveTab] = useState(SCRIPT)
+  
+
+  const renderActiveTab = () => {
+    switch (activeTab) {
+      case SCRIPT:
+        return <AssistScript projectKey={projectKey} />
+      case NPM:
+        return <AssistNpm  projectKey={projectKey} />
+    }
+    return null;
+  }
+
+
   return (
     <div className="p-4">
       <div>OpenReplay Assist allows you to support your users by seeing their live screen and instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen sharing software.</div>
-      
+
       <div className="font-bold my-2">Installation</div>
       <Highlight className="js">
         {`npm i @openreplay/tracker-assist`}
       </Highlight>
-      
-      <div className="font-bold my-2">Usage</div>
-      <p>Initialize the tracker then load the @openreplay/tracker-assist plugin.</p>
-      <div className="py-3" />
+      <div className="mb-4" />
 
       <div className="font-bold my-2">Usage</div>
-      <ToggleContent
-        label="Server-Side-Rendered (SSR)?"
-        first={
-          <Highlight className="js">
-        {`import Tracker from '@openreplay/tracker';
-import trackerAssist from '@openreplay/tracker-assist';
-const tracker = new Tracker({
-  projectKey: '${projectKey}',
-});
-tracker.start();
-tracker.use(trackerAssist(options)); // check the list of available options below`}
-      </Highlight>
-        }
-        second={
-          <Highlight className="js">
-        {`import OpenReplay from '@openreplay/tracker/cjs';
-import trackerFetch from '@openreplay/tracker-assist/cjs';
-const tracker = new OpenReplay({
-  projectKey: '${projectKey}'
-});
-const trackerAssist = tracker.use(trackerAssist(options)); // check the list of available options below
-//...
-function MyApp() {
-  useEffect(() => { // use componentDidMount in case of React Class Component
-    tracker.start();
-  }, [])
-//...
-}`}
-      </Highlight>
-        }
+      <Tabs
+        tabs={ TABS }
+        active={ activeTab } onClick={ (tab) => setActiveTab(tab) }
       />
 
-      <div className="font-bold my-2">Options</div>
-      <Highlight className="js">
-        {`trackerAssist({
-  confirmText: string;
-})`}
-      </Highlight>
+      <div className="py-5">
+        { renderActiveTab() }
+      </div>
 
       <DocLink className="mt-4" label="Install Assist" url="https://docs.openreplay.com/installation/assist" />
     </div>
diff --git a/frontend/app/components/Client/Integrations/AssistDoc/AssistNpm.tsx b/frontend/app/components/Client/Integrations/AssistDoc/AssistNpm.tsx
new file mode 100644
index 000000000..28c12bd30
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/AssistDoc/AssistNpm.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Highlight from 'react-highlight'
+import ToggleContent from 'Shared/ToggleContent'
+
+function AssistNpm(props) {
+  return (
+    <div>
+      <p>Initialize the tracker then load the @openreplay/tracker-assist plugin.</p>
+
+      <div className="font-bold my-2">Usage</div>
+      <ToggleContent
+        label="Server-Side-Rendered (SSR)?"
+        first={
+          <Highlight className="js">
+        {`import Tracker from '@openreplay/tracker';
+import trackerAssist from '@openreplay/tracker-assist';
+const tracker = new Tracker({
+  projectKey: '${props.projectKey}',
+});
+tracker.start();
+tracker.use(trackerAssist(options)); // check the list of available options below`}
+      </Highlight>
+        }
+        second={
+          <Highlight className="js">
+        {`import OpenReplay from '@openreplay/tracker/cjs';
+import trackerFetch from '@openreplay/tracker-assist/cjs';
+const tracker = new OpenReplay({
+  projectKey: '${props.projectKey}'
+});
+const trackerAssist = tracker.use(trackerAssist(options)); // check the list of available options below
+//...
+function MyApp() {
+  useEffect(() => { // use componentDidMount in case of React Class Component
+    tracker.start();
+  }, [])
+//...
+}`}
+      </Highlight>
+        }
+      />
+
+      <div className="font-bold my-2">Options</div>
+      <Highlight className="js">
+        {`trackerAssist({
+  confirmText: string;
+})`}
+      </Highlight>
+    </div>
+  );
+}
+
+export default AssistNpm;
\ No newline at end of file
diff --git a/frontend/app/components/Client/Integrations/AssistDoc/AssistScript.tsx b/frontend/app/components/Client/Integrations/AssistDoc/AssistScript.tsx
new file mode 100644
index 000000000..932926a1a
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/AssistDoc/AssistScript.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import Highlight from 'react-highlight'
+
+function AssistScript(props) {
+  return (
+    <div>
+      <p>If your OpenReplay tracker is set up using the JS snippet, then simply replace the .../openreplay.js occurrence with .../openreplay-assist.js. Below is an example of how the script should like after the change:</p>
+      <div className="py-3" />
+
+      <Highlight className="js">
+        {`<!-- OpenReplay Tracking Code -->
+<script>
+(function(A,s,a,y,e,r){
+  r=window.OpenReplay=[s,r,e,[y-1]];
+  s=document.createElement('script');s.src=a;s.async=!A;
+  document.getElementsByTagName('head')[0].appendChild(s);
+  r.start=function(v){r.push([0])};
+  r.stop=function(v){r.push([1])};
+  r.setUserID=function(id){r.push([2,id])};
+  r.setUserAnonymousID=function(id){r.push([3,id])};
+  r.setMetadata=function(k,v){r.push([4,k,v])};
+  r.event=function(k,p,i){r.push([5,k,p,i])};
+  r.issue=function(k,p){r.push([6,k,p])};
+  r.isActive=function(){return false};
+  r.getSessionToken=function(){};
+})(0, "${props.projectKey}", "//static.openreplay.com/3.3.1/openreplay-assist.js",1,28);
+</script>`}
+      </Highlight>
+    </div>
+  );
+}
+
+export default AssistScript;
\ No newline at end of file
diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingTabs.js b/frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingTabs.js
index 6ec2db234..fd05da5b6 100644
--- a/frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingTabs.js
+++ b/frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingTabs.js
@@ -22,7 +22,6 @@ class TrackingCodeModal extends React.PureComponent {
   }
 
   renderActiveTab = () => {
-    console.log('rendering...')
     switch (this.state.activeTab) {
       case PROJECT:
         return <ProjectCodeSnippet />