From 9ca42d5acabeab63aa6aa4a794babb680e6bbfd7 Mon Sep 17 00:00:00 2001
From: ShiKhu <alex.kaminsky.11@gmail.com>
Date: Wed, 12 May 2021 20:58:16 +0200
Subject: [PATCH] fix (frontend): snippets & sentences

---
 frontend/app/components/Login/Login.js        |  2 +-
 .../IdentifyUsersTab/IdentifyUsersTab.js      |  8 +++---
 .../OnboardingTabs/InstallDocs/InstallDocs.js | 27 ++++++++++++-------
 .../ProjectCodeSnippet/ProjectCodeSnippet.js  | 18 +++++++------
 frontend/app/components/Signup/Signup.js      |  2 +-
 .../Signup/SignupForm/SignupForm.js           | 12 ++++-----
 .../EmailVerificationMessage.js               |  2 +-
 .../NoSessionsMessage/NoSessionsMessage.js    |  2 +-
 .../InstallDocs/InstallDocs.js                | 22 ++++++++++++---
 .../ProjectCodeSnippet/ProjectCodeSnippet.js  | 18 +++++++------
 frontend/env.js                               |  6 ++++-
 11 files changed, 75 insertions(+), 44 deletions(-)

diff --git a/frontend/app/components/Login/Login.js b/frontend/app/components/Login/Login.js
index 80cc6d12f..f79b2fc05 100644
--- a/frontend/app/components/Login/Login.js
+++ b/frontend/app/components/Login/Login.js
@@ -63,7 +63,7 @@ export default class Login extends React.Component {
             <form onSubmit={ this.onSubmit }>
               <div className="mb-8">
                 <h2 className="text-center text-3xl mb-6">Login to OpenReplay</h2>
-                { tenants.length === 0 && <div className="text-center text-xl">Don't have an a Account? <span className="link"><Link to={ SIGNUP_ROUTE }>Sign up</Link></span></div> }
+                { tenants.length === 0 && <div className="text-center text-xl">Don't have an account?<span className="link"><Link to={ SIGNUP_ROUTE }>Sign up</Link></span></div> }
               </div>
               <Loader loading={ loading }>
                 { window.ENV.CAPTCHA_ENABLED && (
diff --git a/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.js b/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.js
index bee33974b..b4ba5b0a9 100644
--- a/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.js
+++ b/frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.js
@@ -14,9 +14,9 @@ export default function IdentifyUsersTab() {
         <div>
           <div className="font-bold mb-4 text-lg">By User ID</div>
           <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.
+            Call <span className="highlight-gray">setUserID</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>
-          <HighlightCode className="js" text={`tracker.userID('john@doe.com');`} />
+          <HighlightCode className="js" text={`tracker.setUserID('john@doe.com');`} />
         </div>
 
         <div className="my-8" />
@@ -38,8 +38,8 @@ export default function IdentifyUsersTab() {
             <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>
-              <HighlightCode className="js" text={`tracker.metadata('plan', 'premium');`} />
+              <div className="my-2">Use the <span className="highlight-gray">setMetadata</span> method in your code to inject custom user data in the form of a key/value pair (string).</div>
+              <HighlightCode className="js" text={`tracker.setMetadata('plan', 'premium');`} />
             </div>
           </div>
         </div>
diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js
index 09e5fd4c9..bd2cb7d21 100644
--- a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js
+++ b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js
@@ -6,26 +6,33 @@ import Highlight from 'react-highlight'
 import CircleNumber from '../../CircleNumber'
 import { Slider, CopyButton } from 'UI'
 
-const installationCommand = 'npm i @openreplay/tracker --save'
+const installationCommand = 'npm i @openreplay/tracker'
 const usageCode = `import Tracker from '@openreplay/tracker';
+
 const tracker = new Tracker({
-  projectID: PROJECT_ID
+  projectKey: "PROJECT_KEY",
+  ingestPoint: "https://${window.location.hostname}/ingest",
 });
 tracker.start();`
 const usageCodeSST = `import Tracker from '@openreplay/tracker/cjs';
-//...
+
 const tracker = new Tracker({
-      projectID: PROJECT_ID,
-      onStart: () => { tracker.userID('MY_USER_ID'); },
+  projectKey: "PROJECT_KEY",
+  ingestPoint: "https://${window.location.hostname}/ingest",
 });
-//...
-  useEffect(() => { // or componentDidMount
+
+function MyApp() {
+  useEffect(() => { // use componentDidMount in case of React Class Component
     tracker.start();
-  }, [])`
+  }, []);
+  
+  //...
+}`
+
 
 function InstallDocs({ site }) {  
-  const _usageCode = usageCode.replace('PROJECT_ID', site.projectKey)
-  const _usageCodeSST = usageCodeSST.replace('PROJECT_ID', site.projectKey)
+  const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey)
+  const _usageCodeSST = usageCodeSST.replace('PROJECT_KEY', site.projectKey)
   const [isSpa, setIsSpa] = useState(true)
   return (
     <div>
diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js b/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
index d4989b5a4..65c1527d6 100644
--- a/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
+++ b/frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
@@ -23,16 +23,18 @@ const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
   document.getElementsByTagName('head')[0].appendChild(s);
   r.start=function(v){r.push([0])};
   r.stop=function(v){r.push([1])};
-  r.setUserID=r.userID=function(id){r.push([2,id])};
-  r.setUserAnonymousID=r.userAnonymousID=function(id){r.push([3,id])};
-  r.setMetadata=r.metadata=function(k,v){r.push([4,k,v])};
+  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=r.active=function(){return false};
-  r.getSessionToken=r.sessionID=function(){};
-})(0,PROJECT_HASH,"//${window.location.hostname}/static/openreplay.js",1,XXX);
+  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);
 <script>`;
 
+
 const ProjectCodeSnippet = props  => {
   const { site, gdpr } = props;
   const [changed, setChanged] = useState(false)
@@ -69,7 +71,7 @@ const ProjectCodeSnippet = props  => {
   const getCodeSnippet = site => {
     let snippet = codeSnippet;
     if (site && site.id) {
-      snippet = snippet.replace('PROJECT_HASH', site.projectKey);
+      snippet = snippet.replace('PROJECT_KEY', site.projectKey);
     }
     return snippet
       .replace('XXX', getOptionValues())
@@ -132,7 +134,7 @@ const ProjectCodeSnippet = props  => {
           <CircleNumber text="2" />
           <span>Install SDK</span>
         </div>
-        <div className={ stl.siteId }>{ 'Project ID: ' } <span>{ site.projectKey }</span></div>
+        <div className={ stl.siteId }>{ 'Project Key: ' } <span>{ site.projectKey }</span></div>
       </div>
 
       <div className="ml-10 mb-2 text-sm">
diff --git a/frontend/app/components/Signup/Signup.js b/frontend/app/components/Signup/Signup.js
index 7979c5f57..0c393dbc0 100644
--- a/frontend/app/components/Signup/Signup.js
+++ b/frontend/app/components/Signup/Signup.js
@@ -28,7 +28,7 @@ export default class Signup extends React.Component {
             <div className="flex items-center text-3xl font-bold mb-6">
               OpenReplay Cloud <div className="ml-2"><Icon name="signup" size="28" color="white" /></div>
             </div>
-            <div>OpenReplay Cloud is the hosted version of our open source package.</div>
+            <div>OpenReplay Cloud is the hosted version of our open-source project.</div>
             <div>We’ll manage hosting, scaling and upgrades.</div>
             
             <div className="mt-8">
diff --git a/frontend/app/components/Signup/SignupForm/SignupForm.js b/frontend/app/components/Signup/SignupForm/SignupForm.js
index 2bfd480bc..b5ea500f3 100644
--- a/frontend/app/components/Signup/SignupForm/SignupForm.js
+++ b/frontend/app/components/Signup/SignupForm/SignupForm.js
@@ -51,7 +51,7 @@ export default class SignupForm extends React.Component {
       <form onSubmit={ this.onSubmit }>
         <div className="mb-8">
           <h2 className="text-center text-3xl mb-6">Get Started</h2>
-          <div className="text-center text-xl">Already having an account? <span className="link"><Link to={ LOGIN_ROUTE }>Sign In</Link></span></div>
+          <div className="text-center text-xl">Already having an account? <span className="link"><Link to={ LOGIN_ROUTE }>Sign in</Link></span></div>
         </div>
         <>
           { window.ENV.CAPTCHA_ENABLED && (
@@ -69,7 +69,7 @@ export default class SignupForm extends React.Component {
                 <div className={ stl.inputWithIcon }>              
                   <Dropdown
                     className="w-full"
-                    placeholder="Select tenant"
+                    placeholder="Select account"
                     selection
                     options={ tenants }
                     name="tenantId"
@@ -95,7 +95,7 @@ export default class SignupForm extends React.Component {
               </div>
             </div>
             <div className="mb-6">
-              <label className="mb-2">Create Password</label>
+              <label className="mb-2">Password</label>
               <div className={ stl.inputWithIcon }>            
                 <input
                   type="password"
@@ -109,7 +109,7 @@ export default class SignupForm extends React.Component {
               </div>
             </div>
             <div className="mb-6">
-              <label>Your Name</label>
+              <label>Name</label>
               <div className={ stl.inputWithIcon }>              
                 <input                
                   type="text"
@@ -123,7 +123,7 @@ export default class SignupForm extends React.Component {
             </div>
   
             <div className="mb-6">
-              <label>Organization Name</label>
+              <label>Organization</label>
               <div className={ stl.inputWithIcon }>              
                 <input                
                   type="text"
@@ -156,7 +156,7 @@ export default class SignupForm extends React.Component {
           <Button type="submit" primary >
             { loading ? 
               <CircularLoader loading={true} /> :
-              'Signup' 
+              'Create account' 
             }
           </Button>
         </div>
diff --git a/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js b/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js
index 5e181e9ae..6ae212645 100644
--- a/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js
+++ b/frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js
@@ -21,7 +21,7 @@ function EmailVerificationMessage(props) {
           className="mt-3 px-3 rounded-2xl font-medium"
           style={{ paddingTop: '3px', height: '28px', backgroundColor: 'rgba(255, 239, 239, 1)', border: 'solid thin rgba(221, 181, 181, 1)' }}
         >
-          <span>Verify your registered email.</span> <a href="#" className="link" onClick={send}>Resend</a>
+          <span>Please, verify your email.</span> <a href="#" className="link" onClick={send}>Resend</a>
         </div>
       }
       content={
diff --git a/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js b/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
index d8b266529..7639d9c4b 100644
--- a/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
+++ b/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
@@ -24,7 +24,7 @@ const NoSessionsMessage= (props) => {
                 <Icon name="info-circle" size="14" color="gray-darkest" />
               </div>
               <div className="ml-2color-gray-darkest mr-auto">
-                It takes a few minutes for first recordings to appear. <strong>All set but they are still not showing up?</strong> Check our <a>troubleshooting</a> section.
+                It takes a few minutes for first recordings to appear. All set but they are still not showing up? Check our <a href="https://docs.openreplay.com/troubleshooting">troubleshooting</a> section.
               </div>
               <Button outline size="smallest" onClick={() => props.history.push(withSiteId(onboardingRoute('installing'), siteId))}>Go to project setup</Button>
             </div>
diff --git a/frontend/app/components/shared/TrackingCodeModal/InstallDocs/InstallDocs.js b/frontend/app/components/shared/TrackingCodeModal/InstallDocs/InstallDocs.js
index 32e94aa1e..c64cd922c 100644
--- a/frontend/app/components/shared/TrackingCodeModal/InstallDocs/InstallDocs.js
+++ b/frontend/app/components/shared/TrackingCodeModal/InstallDocs/InstallDocs.js
@@ -4,15 +4,31 @@ import stl from './installDocs.css'
 import cn from 'classnames'
 import { CopyButton } from 'UI';
 
-const installationCommand = 'npm i @openreplay/tracker --save'
+const installationCommand = 'npm i @openreplay/tracker'
 const usageCode = `import Tracker from '@openreplay/tracker';
+
 const tracker = new Tracker({
-  projectID: PROJECT_ID
+  projectKey: "PROJECT_KEY",
+  ingestPoint: "https://${window.location.hostname}/ingest",
 });
 tracker.start();`
+const usageCodeSST = `import Tracker from '@openreplay/tracker/cjs';
+
+const tracker = new Tracker({
+  projectKey: "PROJECT_KEY",
+  ingestPoint: "https://${window.location.hostname}/ingest",
+});
+
+function MyApp() {
+  useEffect(() => { // use componentDidMount in case of React Class Component
+    tracker.start();
+  }, []);
+  
+  //...
+}`
 
 function InstallDocs({ site }) {
-  const _usageCode = usageCode.replace('PROJECT_ID', site.projectKey)
+  const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey)
   return (
     <div>
       <div className="mb-3">
diff --git a/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js b/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
index c585cecf4..bac018a87 100644
--- a/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
+++ b/frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
@@ -22,16 +22,18 @@ const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
   document.getElementsByTagName('head')[0].appendChild(s);
   r.start=function(v){r.push([0])};
   r.stop=function(v){r.push([1])};
-  r.setUserID=r.userID=function(id){r.push([2,id])};
-  r.setUserAnonymousID=r.userAnonymousID=function(id){r.push([3,id])};
-  r.setMetadata=r.metadata=function(k,v){r.push([4,k,v])};
+  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=r.active=function(){return false};
-  r.getSessionToken=r.sessionID=function(){};
-})(0,PROJECT_HASH,"//${window.location.hostname}/static/openreplay.js",1,XXX);
+  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);
 <script>`;
 
+
 const ProjectCodeSnippet = props  => {
   const { site, gdpr, saving } = props;
   const [changed, setChanged] = useState(false)
@@ -68,7 +70,7 @@ const ProjectCodeSnippet = props  => {
   const getCodeSnippet = site => {
     let snippet = codeSnippet;
     if (site && site.id) {
-      snippet = snippet.replace('PROJECT_HASH', site.projectKey);
+      snippet = snippet.replace('PROJECT_KEY', site.projectKey);
     }
     return snippet
       .replace('XXX', getOptionValues())
@@ -126,7 +128,7 @@ const ProjectCodeSnippet = props  => {
           <span className={ styles.highLight }> { '</head>' } </span>
           <span>{ ' tag of your page.' }</span>
         </div>
-        <div className={ styles.siteId }>{ 'Project ID: ' } <span>{ site.projectKey }</span></div>
+        <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>
diff --git a/frontend/env.js b/frontend/env.js
index 4c5902987..fdc173aeb 100644
--- a/frontend/env.js
+++ b/frontend/env.js
@@ -1,5 +1,8 @@
 require('dotenv').config()
 
+// TODO: derive version from the tracker package on build
+//const trackerInfo = require('../tracker/tracker/package.json');
+
 const oss = {
 	name: 'oss',
 	PRODUCTION: true,
@@ -16,7 +19,8 @@ const oss = {
 	MINIO_PORT: process.env.MINIO_PORT,
 	MINIO_USE_SSL: process.env.MINIO_USE_SSL,
 	MINIO_ACCESS_KEY: process.env.MINIO_ACCESS_KEY,
-	MINIO_SECRET_KEY: process.env.MINIO_SECRET_KEY
+	MINIO_SECRET_KEY: process.env.MINIO_SECRET_KEY,
+	TRACKER_VERSION: '3.0.2', // trackerInfo.version,
 }
 module.exports = {
     oss,