Use a real account for the demo experience (#485)

* Use a real account for the demo experience

* Update puppeteer tests

README.md

@@ -9,7 +9,7 @@ The frontend to the comma connect progressive web app. This a react app using [C
 
 ## Contributing
 
-If you don't have a comma device, connect has a demo mode with an example drive. This should allow for testing most functionality except for interactions with the device, such as getting the car battery voltage.
+If you don't have a comma device, connect has a demo mode with some example drives. This should allow for testing most functionality except for interactions with the device, such as getting the car battery voltage.
 
 * Use best practices
 * Write test cases

src/App.jsx

@@ -12,7 +12,6 @@ import MyCommaAuth, { config as AuthConfig, storage as AuthStorage } from '@comm
 import { athena as Athena, auth as Auth, billing as Billing, request as Request } from '@commaai/api';
 
 import { getZoom } from './url';
-import { isDemo } from './demo';
 import store, { history } from './store';
 
 import ErrorFallback from './components/ErrorFallback';
@@ -123,7 +122,7 @@ class App extends Component {
       return this.renderLoading();
     }
 
-    const showLogin = !MyCommaAuth.isAuthenticated() && !isDemo() && !getZoom(window.location.pathname);
+    const showLogin = !MyCommaAuth.isAuthenticated() && !getZoom(window.location.pathname);
     let content = (
       <Suspense fallback={this.renderLoading()}>
         { showLogin ? this.anonymousRoutes() : this.authRoutes() }

src/__puppeteer__/demo.test.js

@@ -9,7 +9,8 @@ describe('demo mode', () => {
   });
 
   it('should load demo route', async () => {
-    await goto('/a2a0ccea32023010', { waitUntil: 'networkidle2' });
+    await goto('/');
+    await page.click('xpath=//a[contains(string(), "Try the demo")]');
 
     await page.waitForSelector('.DriveList');
     await page.waitForSelector('.DriveEntry');

src/__puppeteer__/drive.test.js

@@ -1,15 +1,19 @@
 /* eslint-env jest */
 import { configureViewport, goto } from './utils';
 
-const DEMO_DEVICE_URL = '/4cf7a6ad03080c90';
-const DEMO_ROUTE_URL = '/4cf7a6ad03080c90/1632948396703/1632949028503';
-const ZOOMED_DEMO_URL = '/4cf7a6ad03080c90/1632948397703/1632949027503';
+const DEMO_DEVICE_URL = '/1d3dc3e03047b0c7';
+const DEMO_ROUTE_URL = '/1d3dc3e03047b0c7/1716484475499/1716485004466';
+const ZOOMED_DEMO_URL = '/1d3dc3e03047b0c7/1716484476499/1716485003466';
 
 jest.setTimeout(60000);
 
 describe('drive view', () => {
   beforeAll(async () => {
     await configureViewport();
+
+    // Log in to demo account
+    await goto('/');
+    await page.click('xpath=//a[contains(string(), "Try the demo")]');
   });
 
   it('back button disabled when in route bounds', async () => {

src/__puppeteer__/routing.test.js

@@ -6,26 +6,25 @@ jest.setTimeout(30000);
 describe('routing', () => {
   beforeAll(async () => {
     await configureViewport();
-  });
 
-  it('login page', async () => {
+    // Log in to demo account
     await goto('/');
-    await page.waitForXPath('//*[contains(string(), "Try the demo")]');
+    await page.click('xpath=//a[contains(string(), "Try the demo")]');
   });
 
   it('load route list', async () => {
-    await goto('/a2a0ccea32023010');
+    await goto('/1d3dc3e03047b0c7');
 
     await page.waitForSelector('.DriveList');
     await page.waitForSelector('.DriveEntry');
 
-    // Page should have one ".DriveEntry" element
+    // Page should have at least one ".DriveEntry" element
     const driveEntries = await page.$$('.DriveEntry');
-    expect(driveEntries.length).toBe(1);
+    expect(driveEntries.length).toBeGreaterThanOrEqual(1);
   });
 
   it('load route from URL', async () => {
-    await goto('/a2a0ccea32023010/1690488081496/1690488851596', { timeout: 50000 });
+    await goto('/1d3dc3e03047b0c7/1716484475499/1716485004466', { timeout: 50000 });
 
     // Wait for video src to be set
     await page.waitForFunction(

src/actions/startup.js

@@ -2,13 +2,9 @@ import * as Sentry from '@sentry/react';
 import { account as Account, devices as Devices } from '@commaai/api';
 import MyCommaAuth from '@commaai/my-comma-auth';
 
-import * as Demo from '../demo';
 import { ACTION_STARTUP_DATA } from './types';
 import { primeFetchSubscription, checkRoutesData, selectDevice, fetchSharedDevice } from '.';
 
-import demoProfile from '../demo/profile.json';
-import demoDevices from '../demo/devices.json';
-
 async function initProfile() {
   if (MyCommaAuth.isAuthenticated()) {
     try {
@@ -21,19 +17,13 @@ async function initProfile() {
         Sentry.captureException(err, { fingerprint: 'init_api_get_profile' });
       }
     }
-  } else if (Demo.isDemo()) {
-    return demoProfile;
   }
   return null;
 }
 
 async function initDevices() {
   let devices = [];
 
-  if (Demo.isDemo()) {
-    devices = devices.concat(demoDevices);
-  }
-
   if (MyCommaAuth.isAuthenticated()) {
     try {
       devices = devices.concat(await Devices.listDevices());

src/analytics.js

@@ -7,7 +7,6 @@ import * as Types from './actions/types';
 import { sendEvent } from './analytics-v2';
 import { getDongleID, getZoom } from './url';
 import { deviceIsOnline } from './utils';
-import { isDemoDevice } from './demo';
 
 function getPageViewEventLocation(pathname) {
   let pageLocation = pathname;
@@ -129,7 +128,6 @@ function logAction(action, prevState, state) {
           superuser: state.profile?.superuser,
           has_prime: state.profile?.prime,
           devices_count: state.devices?.length,
-          device_is_demo: isDemoDevice(state.device?.dongle_id),
           device_prime_type: state.device?.prime_type,
           device_type: state.device?.device_type,
           device_version: state.device?.openpilot_version,
@@ -154,7 +152,6 @@ function logAction(action, prevState, state) {
     case Types.ACTION_SELECT_DEVICE:
       gtag('event', 'select_device', {
         ...params,
-        device_is_demo: isDemoDevice(state.device?.dongle_id),
         device_prime_type: state.device?.prime_type,
         device_type: state.device?.device_type,
         device_version: state.device?.openpilot_version,
@@ -171,7 +168,6 @@ function logAction(action, prevState, state) {
 
       gtag('set', {
         user_properties: {
-          device_is_demo: isDemoDevice(state.device?.dongle_id),
           device_prime_type: state.device?.prime_type,
           device_type: state.device?.device_type,
           device_version: state.device?.openpilot_version,

src/components/Navigation/index.jsx

@@ -13,7 +13,6 @@ import { athena as Athena, devices as Devices, navigation as NavigationApi } fro
 import { primeNav, analyticsEvent } from '../../actions';
 import { DEFAULT_LOCATION, forwardLookup, getDirections, MAPBOX_STYLE, MAPBOX_TOKEN, networkPositioning, reverseLookup } from '../../utils/geocode';
 import Colors from '../../colors';
-import * as Demo from '../../demo';
 import { PinCarIcon, PinMarkerIcon, PinHomeIcon, PinWorkIcon, PinPinnedIcon } from '../../icons';
 import { timeFromNow } from '../../utils';
 import ResizeHandler from '../ResizeHandler';
@@ -395,10 +394,6 @@ class Navigation extends Component {
   }
 
   updateDevice() {
-    if (Demo.isDemo()) {
-      return;
-    }
-
     this.getDeviceLastLocation();
     this.getDeviceNetworkLocation();
     this.updateFavoriteLocations();
@@ -480,7 +475,7 @@ class Navigation extends Component {
 
   updateFavoriteLocations() {
     const { dongleId, hasNav } = this.props;
-    if (!hasNav || Demo.isDemo()) {
+    if (!hasNav) {
       return;
     }
 

src/components/anonymous.jsx

@@ -9,15 +9,13 @@ import qs from 'query-string';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 
-import { config as AuthConfig } from '@commaai/my-comma-auth';
+import {config as AuthConfig, storage as AuthStorage} from '@commaai/my-comma-auth';
 
 import Colors from '../colors';
 import { AuthAppleIcon, AuthGithubIcon, AuthGoogleIcon, RightArrow } from '../icons';
 
 import PWAIcon from './PWAIcon';
 
-import demoDevices from '../demo/devices.json';
-
 const styles = () => ({
   baseContainer: {
     width: '100%',
@@ -130,6 +128,11 @@ class AnonymousLanding extends Component {
   render() {
     const { classes } = this.props;
 
+    const loginAsDemoUser = function() {
+      AuthStorage.setCommaAccessToken('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDg1ODI0NjUsIm5iZiI6MTcxNzA0NjQ2NSwiaWF0IjoxNzE3MDQ2NDY1LCJpZGVudGl0eSI6IjBkZWNkZGNmZGYyNDFhNjAifQ.g3khyJgOkNvZny6Vh579cuQj1HLLGSDeauZbfZri9jw');
+      window.location = window.location.origin;
+    };
+
     return (
       <div className={classes.baseContainer}>
         <div className={classes.base}>
@@ -159,9 +162,8 @@ class AnonymousLanding extends Component {
             paired your comma device.
           </span>
 
-          <a
+          <a onClick={loginAsDemoUser}
             className="flex items-center pl-4 pr-3 py-2 font-medium border border-white rounded-full hover:bg-[rgba(255,255,255,0.1)] active:bg-[rgba(255,255,255,0.2)] transition-colors"
-            href={`${window.location.origin}/${demoDevices[0].dongle_id}`}
           >
             Try the demo
             <RightArrow className="ml-1 h-4" />

src/initialState.js

@@ -1,17 +1,9 @@
 import { getDongleID, getZoom, getPrimeNav } from './url';
-import * as Demo from './demo';
 
 export function getDefaultFilter() {
   const d = new Date();
   d.setHours(d.getHours() + 1, 0, 0, 0);
 
-  if (Demo.isDemo()) {
-    return {
-      start: 1690488081496,
-      end: 1690488851596,
-    };
-  }
-
   return {
     start: (new Date(d.getTime() - 1000 * 60 * 60 * 24 * 14)).getTime(),
     end: d.getTime(),