change(ui) - code snippet

frontend/app/components/shared/CodeSnippet/CodeSnippet.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { CopyButton } from 'UI';
+import Highlight from 'react-highlight';
+
+const inputModeOptions = [
+    { label: 'Record all inputs', value: 'plain' },
+    { label: 'Ignore all inputs', value: 'obscured' },
+    { label: 'Obscure all inputs', value: 'hidden' },
+];
+  
+const inputModeOptionsMap: any = {}
+inputModeOptions.forEach((o: any, i: any) => inputModeOptionsMap[o.value] = i)
+
+
+interface Props {
+    host: string;
+    projectKey: string;
+    ingestPoint: string;
+    defaultInputMode: any;
+    obscureTextNumbers: boolean;
+    obscureTextEmails: boolean;
+}
+function CodeSnippet(props: Props) {
+    const { host, projectKey, ingestPoint, defaultInputMode, obscureTextNumbers, obscureTextEmails } = props;
+    const codeSnippet = `<!-- OpenReplay Tracking Code for ${host} -->
+<script>
+  var initOpts = {
+    projectKey: "${projectKey}",
+    ingestPoint: ${ingestPoint},
+    defaultInputMode: ${inputModeOptions[defaultInputMode]},
+    obscureTextNumbers: ${obscureTextNumbers},
+    obscureTextEmails: ${obscureTextEmails},
+  };
+  var startOpts = { userID: "" };
+  (function(A,s,a,y,e,r){
+    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])};
+    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(){};
+  })("//static.openreplay.com/${window.env.TRACKER_VERSION}/openreplay.js",1,0,initOpts,startOpts);
+</script>`;
+
+    return (
+        <div className="relative">
+            <div className="absolute top-0 right-0 mt-2 mr-2">                
+                <CopyButton content={codeSnippet} className="uppercase" />
+            </div>
+            <Highlight className="html">
+                {codeSnippet}
+            </Highlight>
+        </div>
+    );
+}
+
+export default CodeSnippet;

frontend/app/components/shared/CodeSnippet/index.ts

@@ -0,0 +1 @@
+export { default } from './CodeSnippet';

frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js

@@ -8,6 +8,7 @@ import cn from 'classnames'
 import styles from './projectCodeSnippet.module.css'
 import Highlight from 'react-highlight'
 import Select from 'Shared/Select'
+import CodeSnippet from '../../CodeSnippet';
 
 const inputModeOptions = [
   { label: 'Record all inputs', value: 'plain' },
@@ -142,10 +143,14 @@ const ProjectCodeSnippet = props  => {
         <div className={ styles.siteId }>{ 'Project Key: ' } <span>{ site.projectKey }</span></div>
       </div>
       <div className={ styles.snippetsWrapper }>
-        <button className={ styles.codeCopy } onClick={ () => copyHandler(_snippet) }>{ copied ? 'copied' : 'copy' }</button>
-        <Highlight className="html">
-          {_snippet}
-        </Highlight>
+        <CodeSnippet
+          host={ site && site.host }
+          projectKey={ site && site.projectKey }
+          ingestPoint={`"https://${window.location.hostname}/ingest"`}
+          defaultInputMode={ gdpr.defaultInputMode }
+          obscureTextNumbers={ gdpr.maskNumbers }
+          obscureTextEmails={ gdpr.maskEmails }
+        />
       </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>

frontend/app/components/ui/CopyButton/CopyButton.js

@@ -1,8 +1,9 @@
 import React from 'react'
 import { useState } from 'react';
 import copy from 'copy-to-clipboard';
+import { Button } from 'UI';
 
-function CopyButton({ content, className, btnText = 'copy' }) {
+function CopyButton({ content, variant="text-primary",  className = '', btnText = 'copy' }) {
   const [copied, setCopied] = useState(false)
 
   const copyHandler = () => {
@@ -12,13 +13,15 @@ function CopyButton({ content, className, btnText = 'copy' }) {
       setCopied(false);
     }, 1000);
   };
+  
   return (
-    <button
+    <Button
+      variant={variant}
       className={ className }
       onClick={ copyHandler }
     >
       { copied ? 'copied' : btnText }
-    </button>
+    </Button>
   )
 }