copy button

frontend/app/components/Client/ProfileSettings/OptOut.js

@@ -17,7 +17,7 @@ function OptOut(props) {
         checked={ optOut }
         onClick={ onChange }
         className="mr-8"
-        label="Enable/Disable"
+        label="Anonymize"
       />
     </div>
   )

frontend/app/components/Client/ProfileSettings/ProfileSettings.js

@@ -31,16 +31,6 @@ export default class ProfileSettings extends React.PureComponent {
 
         <div className="divider" />
 
-        <div className="flex items-center">
-          <div className={ styles.left }>
-            <h4 className="text-lg mb-4">{ 'Opt out' }</h4>
-            {/* <div className={ styles.info }>{ 'Your API key gives you access to an extra set of services.' }</div> */}
-          </div>
-          <div><OptOut /></div>
-        </div>
-
-        <div className="divider" />
-
         <div className="flex items-center">
           <div className={ styles.left }>
             <h4 className="text-lg mb-4">{ 'Organization API Key' }</h4>
@@ -53,8 +43,8 @@ export default class ProfileSettings extends React.PureComponent {
 
         <div className="flex items-center">
           <div className={ styles.left }>
-            <h4 className="text-lg mb-4">{ 'Opt Out' }</h4>
-            {/* <div className={ styles.info }>{ 'Your API key gives you access to an extra set of services.' }</div> */}
+            <h4 className="text-lg mb-4">{ 'Data Collection' }</h4>
+            <div className={ styles.info }>{ 'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.' }</div>
           </div>
           <div><OptOut /></div>
         </div>

frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import CircleNumber from '../CircleNumber'
 import MetadataList from '../MetadataList/MetadataList'
-import Snippet from '../Snippet/Snippet'
-import Highlight from 'react-highlight'
+import { HighlightCode } from 'UI'
 
 export default function IdentifyUsersTab() {
   return (
@@ -17,10 +16,7 @@ export default function IdentifyUsersTab() {
           <div className="mb-2">
             Call <span className="highlight-gray">userID</span> to identify your users when recording a session. The identity of the user can be changed, but OpenReplay will only keep the last communicated user ID.
           </div>
-          <Highlight className="js">
-            {`tracker.userID('john@doe.com');`}
-          </Highlight>
-          {/* <Snippet text="tracker.userID('john@doe.com');" /> */}
+          <HighlightCode className="js" text={`tracker.userID('john@doe.com');`} />
         </div>
 
         <div className="my-8" />
@@ -37,19 +33,15 @@ export default function IdentifyUsersTab() {
             </div>
           </div>
           
-          
           <div className="my-6" />
           <div className="flex items-start">
             <CircleNumber text="2" />
             <div className="pt-1">
               <span className="font-bold">Inject metadata when recording sessions</span>
               <div className="my-2">Use the <span className="highlight-gray">metadata</span> method in your code to inject custom user data in the form of a key/value pair (string).</div>
-              <Highlight className="js">
-                {`tracker.metadata('plan', 'premium');`}
-              </Highlight>
+              <HighlightCode className="js" text={`tracker.metadata('plan', 'premium');`} />
             </div>
           </div>
-          {/* <Snippet text="tracker.metadata('plan', 'premium');" /> */}
         </div>
       </div>
 

frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js

@@ -2,10 +2,9 @@ import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import stl from './installDocs.css'
 import cn from 'classnames'
-import CopyButton from '../CopyButton'
 import Highlight from 'react-highlight'
 import CircleNumber from '../../CircleNumber'
-import { Slider } from 'UI'
+import { Slider, CopyButton } from 'UI'
 
 const installationCommand = 'npm i @openreplay/tracker --save'
 const usageCode = `import Tracker from '@openreplay/tracker';

frontend/app/components/Onboarding/components/SideMenu.js

@@ -24,21 +24,18 @@ export default function SideMenu() {
       </div>
 
       <SideMenuitem
-        // active={activeTab.type === 'all'}
         title="Documentation"
         iconName="journal-code"
-        onClick={() => window.open('https://docs.openreplay.com/api', '_blank')}
+        onClick={() => window.open('https://docs.openreplay.com', '_blank')}
       />
 
       <SideMenuitem
-        // active={activeTab.type === 'all'}
         title="Report Issue"
         iconName="github"
-        onClick={() => window.open('https://github.com/openreplay/openreplay/issues/new', '_blank')}
+        onClick={() => window.open('https://github.com/openreplay/openreplay/issues', '_blank')}
       />
 
       <SideMenuitem
-        // active={activeTab.type === 'all'}
         title="Chat with us"
         iconName="chat-dots"
         onClick={() => $crisp.push(['do', 'chat:open']) }

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { Controlled as CodeMirror } from 'react-codemirror2'
 import stl from './installDocs.css'
 import cn from 'classnames'
-import CopyButton from '../CopyButton';
+import { CopyButton } from 'UI';
 
 const installationCommand = 'npm i @openreplay/tracker --save'
 const usageCode = `import Tracker from '@openreplay/tracker';

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import { useState } from 'react';
+import copy from 'copy-to-clipboard';
+
+function CopyButton({ content, className }) {
+  const [copied, setCopied] = useState(false)
+
+  const copyHandler = () => {
+    setCopied(true);
+    copy(content);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  };
+  return (
+    <button
+      className={ className }
+      onClick={ copyHandler }
+    >
+      { copied ? 'copied' : 'copy' }
+    </button>
+  )
+}
+
+export default CopyButton

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

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

frontend/app/components/ui/HighlightCode/HighlightCode.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import Highlight from 'react-highlight'
+import stl from './highlightCode.css'
+import cn from 'classnames'
+import { CopyButton } from 'UI'
+
+function HighlightCode({ className = 'js', text = ''}) {
+  return (
+    <div className={stl.snippetWrapper}>
+      <CopyButton content={text} className={cn(stl.codeCopy, 'mt-2 mr-2')} />
+      <Highlight className={className}>
+        {text}
+      </Highlight>
+    </div>
+  )
+}
+
+export default HighlightCode

frontend/app/components/ui/HighlightCode/highlightCode.css

@@ -0,0 +1,29 @@
+@import 'zindex.css';
+
+.snippetWrapper {
+  position: relative;
+  & .codeCopy {
+    position: absolute;
+    right: 0px;
+    top: -3px;
+    z-index: $codeSnippet;
+    padding: 5px 10px; 
+    color: $teal;
+    text-transform: uppercase;
+    cursor: pointer;
+    border-radius: 3px;
+    transition: all 0.4s;
+    user-select: none;
+
+    &:hover {
+      background-color: $gray-light;
+      transition: all 0.2s;
+    }
+  }
+  & .snippet {
+    overflow: hidden;
+    line-height: 20px;
+    border-radius: 5px;
+    user-select: none;
+  }
+}

frontend/app/components/ui/HighlightCode/index.js

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

frontend/app/components/ui/index.js

@@ -50,5 +50,7 @@ export { default as TextLink } from './TextLink';
 export { default as Information } from './Information';
 export { default as QuestionMarkHint } from './QuestionMarkHint';
 export { default as TimelinePointer } from './TimelinePointer';
+export { default as CopyButton } from './CopyButton';
+export { default as HighlightCode } from './HighlightCode';
 
 export { Input, Modal, Form, Message, Card } from 'semantic-ui-react';

frontend/env.js

@@ -8,7 +8,7 @@ const oss = {
 	CAPTCHA_ENABLED: process.env.CAPTCHA_ENABLED,
 	CAPTCHA_SITE_KEY: process.env.CAPTCHA_SITE_KEY,
 	ORIGIN: () => 'window.location.origin',
-	API_EDP: 'https://staging-parrot.asayer.io',
+	API_EDP: () => 'window.location.origin + "/api"',
 	ASSETS_HOST: () => 'window.location.origin + "/assets"',
 	VERSION: '1.0.1',
 	SOURCEMAP: true,