From 4188b7894d9d19ad05ab926b6323485d6ac0355a Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 8 Jun 2022 16:29:00 +0200
Subject: [PATCH] change(ui) - tracking code changes

---
 .../ProjectCodeSnippet/ProjectCodeSnippet.js         | 12 ++++--------
 .../components/shared/CodeSnippet/CodeSnippet.tsx    |  4 +++-
 .../ProjectCodeSnippet/ProjectCodeSnippet.js         |  5 +----
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js b/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
index b71d4123a..8b520aa49 100644
--- a/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
+++ b/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
@@ -9,6 +9,7 @@ import stl from './projectCodeSnippet.module.css'
 import CircleNumber from '../../CircleNumber';
 import Highlight from 'react-highlight'
 import Select from 'Shared/Select'
+import CodeSnippet from 'Shared/CodeSnippet';
 
 const inputModeOptions = [
   { label: 'Record all inputs', value: 'plain' },
@@ -38,7 +39,7 @@ const ProjectCodeSnippet = props  => {
     var initOpts = {
       projectKey: "PROJECT_KEY",
       ingestPoint: "https://${window.location.hostname}/ingest",
-      defaultInputMode: ${inputModeOptionsMap[gdpr.defaultInputMode]},
+      defaultInputMode: ${gdpr.defaultInputMode},
       obscureTextNumbers: ${gdpr.maskNumbers},
       obscureTextEmails: ${gdpr.maskEmails},
     };
@@ -65,18 +66,13 @@ const ProjectCodeSnippet = props  => {
   }
 
   const onChangeSelect = ({ name, value }) => {
-    // console.log(name, value)
-    // const { gdpr } = site;
     const _gdpr = { ...gdpr.toData() };
-    props.editGDPR({ [ name ]: value });
     _gdpr[name] = value;
     props.editGDPR({ [ name ]: value }); 
     saveGDPR(_gdpr)
   };
 
   const onChangeOption = ({ target: { name, checked } }) => {
-    // const { gdpr } = site;
-    console.log(name, checked)
     const _gdpr = { ...gdpr.toData() };
     _gdpr[name] = checked;
     props.editGDPR({ [ name ]: checked });
@@ -121,7 +117,7 @@ const ProjectCodeSnippet = props  => {
           <Select
             name="defaultInputMode"
             options={ inputModeOptions }
-            onChange={ ({ value }) => onChangeSelect({ name: 'defaultInputMode', value }) }
+            onChange={ ({ value }) => onChangeSelect({ name: 'defaultInputMode', value: value.value }) }
             placeholder="Default Input Mode"
             defaultValue={ gdpr.defaultInputMode }
           />
@@ -170,7 +166,7 @@ const ProjectCodeSnippet = props  => {
           host={ site && site.host }
           projectKey={ site && site.projectKey }
           ingestPoint={`"https://${window.location.hostname}/ingest"`}
-          defaultInputMode={ inputModeOptionsMap[gdpr.defaultInputMode] }
+          defaultInputMode={ gdpr.defaultInputMode }
           obscureTextNumbers={ gdpr.maskNumbers }
           obscureTextEmails={ gdpr.maskEmails }
         />
diff --git a/frontend/app/components/shared/CodeSnippet/CodeSnippet.tsx b/frontend/app/components/shared/CodeSnippet/CodeSnippet.tsx
index 0979684bd..8302800f9 100644
--- a/frontend/app/components/shared/CodeSnippet/CodeSnippet.tsx
+++ b/frontend/app/components/shared/CodeSnippet/CodeSnippet.tsx
@@ -10,6 +10,7 @@ const inputModeOptions = [
   
 const inputModeOptionsMap: any = {}
 inputModeOptions.forEach((o: any, i: any) => inputModeOptionsMap[o.value] = i)
+console.log('inputModeOptionsMap', inputModeOptionsMap)
 
 
 interface Props {
@@ -22,12 +23,13 @@ interface Props {
 }
 function CodeSnippet(props: Props) {
     const { host, projectKey, ingestPoint, defaultInputMode, obscureTextNumbers, obscureTextEmails } = props;
+    console.log('defaultInputMode', defaultInputMode)
     const codeSnippet = `<!-- OpenReplay Tracking Code for ${host} -->
 <script>
   var initOpts = {
     projectKey: "${projectKey}",
     ingestPoint: ${ingestPoint},
-    defaultInputMode: ${inputModeOptions[defaultInputMode]},
+    defaultInputMode: ${inputModeOptionsMap[defaultInputMode]},
     obscureTextNumbers: ${obscureTextNumbers},
     obscureTextEmails: ${obscureTextEmails},
   };
diff --git a/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js b/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
index bf8393f41..5a7a1848f 100644
--- a/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
+++ b/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
@@ -58,9 +58,6 @@ const ProjectCodeSnippet = props  => {
 
   const onChangeSelect = ({ name, value }) => {
     const { gdpr } = site;
-    // const _gdpr = { ...gdpr.toData() };
-    // props.editGDPR({ [ name ]: value });
-    // _gdpr[name] = value;
     props.editGDPR({ [ name ]: value });
     saveGDPR({ ...gdpr, [ name ]: value });
   };
@@ -107,7 +104,7 @@ const ProjectCodeSnippet = props  => {
           <Select
             name="defaultInputMode"
             options={ inputModeOptions }
-            onChange={ ({ value }) => onChangeSelect({ name: 'defaultInputMode', value }) }
+            onChange={ ({ value }) => onChangeSelect({ name: 'defaultInputMode', value: value.value }) }
             placeholder="Default Input Mode"
             value={ inputModeOptions.find(o => o.value === gdpr.defaultInputMode) }
           />