From 82ceecbef997321c2fc379d672972cfed4d16b2e Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 4 Mar 2022 17:55:24 +0100
Subject: [PATCH] feat(ui) - code snippet changes as per the latest tracker

---
 .../ProjectCodeSnippet/ProjectCodeSnippet.js  |  9 ++++---
 .../ProjectCodeSnippet/ProjectCodeSnippet.js  | 25 +++++++------------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js b/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
index fb52d0e5f..bf0e83791 100644
--- a/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
+++ b/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
@@ -17,9 +17,11 @@ const inputModeOptions = [
 
 const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
 <script>
+var initOpts = { projectKey: "PROJECT_KEY", ingestPoint: "https://${window.location.hostname}/ingest"};
+var startOpts = { userID: "" };
 (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;
+  r=window.OpenReplay=[e,r,y,[s-1, e]];
+  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])};
@@ -30,8 +32,7 @@ const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
   r.issue=function(k,p){r.push([6,k,p])};
   r.isActive=function(){return false};
   r.getSessionToken=function(){};
-  r.i="https://${window.location.hostname}/ingest";
-})(0, "PROJECT_KEY", "//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",1,XXX);
+})("//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",XXX,0,initOpts,startOpts);
 </script>`;
 
 
diff --git a/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js b/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
index 1fc8eea7b..e269c2cc7 100644
--- a/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
+++ b/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
@@ -1,12 +1,12 @@
 import React, { useState } from 'react'
 import { connect } from 'react-redux';
 import { editGDPR, saveGDPR } from 'Duck/site';
-import { Controlled as CodeMirror } from 'react-codemirror2';
 import copy from 'copy-to-clipboard';
 import { Select, Checkbox } from 'UI';
 import GDPR from 'Types/site/gdpr';
 import cn from 'classnames'
 import styles from './projectCodeSnippet.css'
+import Highlight from 'react-highlight'
 
 const inputModeOptions = [
   { text: 'Record all inputs', value: 'plain' },
@@ -16,9 +16,11 @@ const inputModeOptions = [
 
 const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
 <script>
+var initOpts = { projectKey: "PROJECT_KEY", ingestPoint: "https://${window.location.hostname}/ingest"};
+var startOpts = { userID: "" };
 (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;
+  r=window.OpenReplay=[e,r,y,[s-1, e]];
+  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])};
@@ -29,8 +31,7 @@ const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
   r.issue=function(k,p){r.push([6,k,p])};
   r.isActive=function(){return false};
   r.getSessionToken=function(){};
-  r.i="https://${window.location.hostname}/ingest";
-})(0, "PROJECT_KEY", "//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",1,XXX);
+})("//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",XXX,0,initOpts,startOpts);
 </script>`;
 
 
@@ -132,17 +133,9 @@ const ProjectCodeSnippet = props  => {
       </div>
       <div className={ styles.snippetsWrapper }>
         <button className={ styles.codeCopy } onClick={ () => copyHandler(_snippet) }>{ copied ? 'copied' : 'copy' }</button>
-        <CodeMirror
-          value={ _snippet }
-          className={ styles.snippet }
-          options={{
-            height: 340,
-            mode: 'html',
-            readOnly: true,
-            showCursorWhenSelecting: false,
-            scroll: false
-          }}
-        />
+        <Highlight className="html">
+          {_snippet}
+        </Highlight>
       </div>
       <div className="my-4">You can also setup OpenReplay using <a className="link" href="https://docs.openreplay.com/integrations/google-tag-manager" target="_blank">Google Tag Manager (GTM)</a>. </div>
     </div>