Merge branch 'main' into dev

README.md

@@ -26,7 +26,7 @@
 </p>
 
 <p align="center">
-  <a href="https://openreplay.com">
+  <a href="https://github.com/openreplay/openreplay">
     <img src="static/replayer.png">
   </a>
 </p>
@@ -83,7 +83,7 @@ Also, feel free to join our [Slack](https://slack.openreplay.com) to ask questio
 
 ## Roadmap
 
-Check out our roadmap and keep an eye on what's coming next. You're free to submit new ideas and vote on features.
+Check out our [roadmap](https://www.notion.so/openreplay/Roadmap-889d2c3d968b4786ab9b281ab2394a94) and keep an eye on what's coming next. You're free to [submit](https://github.com/openreplay/openreplay/issues/new) new ideas and vote on features.
 
 ## License
 

ee/LICENSE.md

@@ -9,7 +9,7 @@ and are in compliance with, the OpenReplay Subscription Terms of Service, availa
 at https://openreplay.com/terms.html (the “Enterprise Edition”), or other
 agreement governing the use of the Software, as agreed by you and OpenReplay,
 and otherwise have a valid OpenReplay Enterprise license for the
-correct volume and number of seats. Subject to the foregoing sentence, you are free to
+correct usage. Subject to the foregoing sentence, you are free to
 modify this Software and publish patches to the Software. You agree that OpenReplay
 and/or its licensors (as applicable) retain all right, title and interest in and
 to all such modifications and/or patches, and all such modifications and/or

frontend/README.md

@@ -1,10 +1,9 @@
 # openreplay-ui
-Openreplay prototype UI
+OpenReplay prototype UI
 
 On new icon addition: 
 `npm run generate:icons`
 
-
 ## Documentation
 
 * [Redux](https://redux.js.org/)
@@ -12,7 +11,6 @@ On new icon addition:
 * [Ducks](https://github.com/erikras/ducks-modular-redux)
 * [CSS Modules](https://github.com/css-modules/css-modules)
 
-
 Labels in comments:
 TEMP = temporary code
-TODO = things to implement
+TODO = things to implement

frontend/app/components/Announcements/Announcements.js

@@ -73,8 +73,8 @@ class Announcements extends React.Component {
           content={ 
             <div className="mx-4">
               <NoContent
-                title="No Alerts found!"
-                subtext="There are no alerts created."
+                title="No Announcements found!"
+                subtext="There are no announcements to show."
                 icon="exclamation-circle"
                 show={ !loading && announcements.size === 0 }
                 size="small"

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

@@ -1,9 +1,15 @@
 import React from 'react'
+import { connect } from 'react-redux'
 
-export default function Licenses() {
+function Licenses({ account }) {
   return (
     <div>
-      License Number
+      <div>{account.license}</div>
+      <div className="font-medium text-sm">Expires At: {account.expirationDate && account.expirationDate.toFormat('LLL dd, yyyy')}</div>
     </div>
   )
 }
+
+export default connect(state => ({
+  account: state.getIn([ 'user', 'account' ]),
+}))(Licenses)

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

@@ -53,8 +53,7 @@ export default class ProfileSettings extends React.PureComponent {
 
         <div className="flex items-center">
           <div className={ styles.left }>
-            <h4 className="text-lg mb-4">{ 'Licenses' }</h4>
-            {/* <div className={ styles.info }>{ 'Your API key gives you access to an extra set of services.' }</div> */}
+            <h4 className="text-lg mb-4">{ 'License' }</h4>
           </div>
           <div><Licenses /></div>
         </div>

frontend/app/components/Client/Sites/Sites.js

@@ -162,7 +162,7 @@ class Sites extends React.PureComponent {
           <TextLink
             icon="book"
             className="ml-auto"
-            href="https://docs.openreplay.com/getting-started/quick-start"
+            href="https://docs.openreplay.com/installation"
             label="Documentation"
           />
           </div>

frontend/app/components/Header/OnboardingExplore/FeatureItem.js

@@ -9,7 +9,7 @@ const FeatureItem = ({ label, completed = false, subText, onClick }) => {
       className={ cn(stl.wrapper, stl.activeLink, { [stl.completed]: completed }) }
       onClick={onClick && onClick}
     >
-      <div className={ cn("h-6 w-6 flex-shrink-0 rounded-full flex items-center justify-center", { 'bg-white' : !completed, 'bg-teal' : completed })}>
+      <div className={ cn("h-6 w-6 flex-shrink-0 rounded-full flex items-center justify-center", { 'bg-gray-lightest border' : !completed, 'bg-teal' : completed })}>
         { completed && <Icon name="check" size="16" color="white" /> }
       </div>
       <div className="ml-3">{label}</div>     

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

@@ -28,11 +28,10 @@ const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
   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(){};
-  r.i="https://${window.location.hostname}/ingest";
-})(0, "PROJECT_KEY", "//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",1,XXX);
-<script>`;
+  r.isActive=r.active=function(){return false};
+  r.getSessionToken=r.sessionID=function(){};
+})(0,PROJECT_HASH,"//${window.location.hostname}/static/openreplay.js",1,XXX);
+</script>`;
 
 
 const ProjectCodeSnippet = props  => {

frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js

@@ -7,10 +7,9 @@ import * as routes from '../../../routes';
 const withSiteId = routes.withSiteId;
 
 const NoSessionsMessage= (props) => {
-  const { site, sites, match: { params: { siteId } } } = props;
+  const { sites, match: { params: { siteId } } } = props;
   const activeSite = sites.find(s => s.id == siteId);
   const showNoSessions = !!activeSite && !activeSite.recorded;
-  console.log('site', activeSite);
   return (
     <>
       {showNoSessions && (

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

@@ -27,11 +27,10 @@ const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
   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(){};
-  r.i="https://${window.location.hostname}/ingest";
-})(0, "PROJECT_KEY", "//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",1,XXX);
-<script>`;
+  r.isActive=r.active=function(){return false};
+  r.getSessionToken=r.sessionID=function(){};
+})(0,PROJECT_HASH,"//${window.location.hostname}/static/openreplay.js",1,XXX);
+</script>`;
 
 
 const ProjectCodeSnippet = props  => {

frontend/app/types/account/account.js

@@ -1,6 +1,7 @@
 import Member from 'Types/member';
 import Appearance from './appearance';
 import Limit from './limit';
+import { DateTime } from 'luxon';
 
 export default Member.extend({
   changePassword: undefined,
@@ -10,9 +11,13 @@ export default Member.extend({
   email: '',
   verifiedEmail: undefined,
   smtp: false,
+  license: '',
+  expirationDate: undefined,
 }, {
-  fromJS: account => ({
+  fromJS: ({ current = {}, ...account})=> ({
     ...account,
+    license: current.license,
+    expirationDate: current.expirationDate && DateTime.fromMillis(current.expirationDate * 1000 || 0),
     appearance: Appearance(account.appearance),
   })
 });

frontend/app/types/filter/filter.js

@@ -75,7 +75,7 @@ export const defaultFilters = [
       { label: 'Click', key: KEYS.CLICK, type: KEYS.CLICK, filterKey: KEYS.CLICK, icon: 'filters/click', isFilter: false },
       { label: 'Input', key: KEYS.INPUT, type: KEYS.INPUT, filterKey: KEYS.INPUT, icon: 'event/input', isFilter: false },
       { label: 'Page', key: KEYS.LOCATION, type: KEYS.LOCATION, filterKey: KEYS.LOCATION, icon: 'event/link', isFilter: false },
-      { label: 'View', key: KEYS.VIEW, type: KEYS.VIEW, filterKey: KEYS.VIEW, icon: 'event/view', isFilter: false }
+      // { label: 'View', key: KEYS.VIEW, type: KEYS.VIEW, filterKey: KEYS.VIEW, icon: 'event/view', isFilter: false }
 		]
 	},
   {

tests/e2e/app.test.js

@@ -25,6 +25,13 @@ beforeAll(async () => {
   await page.setJavaScriptEnabled(true);
   await page.setDefaultNavigationTimeout(10000);
   await page.setRequestInterception(true);
+
+  await page.evaluate(async () => {
+    const response = await fetch(appUrlBase + '/API_TESTING/update');
+    const text = await response.text();
+    return text;
+  });
+
   page.on('request', (req) => {
     if (['image', 'font'].indexOf(req.resourceType()) !== -1) {
       req.abort();