Remove global Google Analytics and simplify privacy package. (#824)

* Remove global Google Analytics and mock in dev mode. * Move analytics to react-ga component, use GA4 id. * Refactor privacy system. Use js-cookie lib. Simpler helpers for isAnalyticsEnabled, isFirstTime and theme preferences. * Fix typo breaking tests on GH. * Update cypress tests for isFirstTime cookie value. Fix typo breaking tests on GH.
bldrs-ai · Oct 26, 2023 · 6b0f760 · 6b0f760
1 parent 8788975
commit 6b0f760
Show file tree

Hide file tree

Showing 28 changed files with 397 additions and 513 deletions.
diff --git a/cypress/e2e/appStore/appStore.cy.js b/cypress/e2e/appStore/appStore.cy.js
@@ -1,7 +1,7 @@
 describe('appStore side drawer', () => {
   context('enable/disable feature using url parameter', () => {
     beforeEach(() => {
-      cy.setCookie('isFirstTime', 'false')
+      cy.setCookie('isFirstTime', '1')
       cy.visit('/')
     })
 

diff --git a/cypress/e2e/hide-feat/hide-feat.cy.js b/cypress/e2e/hide-feat/hide-feat.cy.js
@@ -1,7 +1,7 @@
 describe('Ifc Hide/Unhide E2E test suite', () => {
   context('Hide icon toggle', () => {
     beforeEach(() => {
-      cy.setCookie('isFirstTime', 'false')
+      cy.setCookie('isFirstTime', '1')
       cy.visit('/')
     })
 

diff --git a/cypress/e2e/home/homepage.cy.js b/cypress/e2e/home/homepage.cy.js
@@ -13,7 +13,7 @@ describe('home page', () => {
 
   context('with a false first-time visit cookie', () => {
     it('should NOT display the about dialog', () => {
-      cy.setCookie('isFirstTime', 'false')
+      cy.setCookie('isFirstTime', '1')
       cy.visit('/')
       cy.findByRole('dialog', {timeout: 300000})
           .should('not.exist')

diff --git a/cypress/e2e/ifc-model/load-sample-model.cy.js b/cypress/e2e/ifc-model/load-sample-model.cy.js
@@ -5,7 +5,7 @@ describe('sample models', () => {
 
   context.skip('when no model is loaded', () => {
     beforeEach(() => {
-      cy.setCookie('isFirstTime', 'false')
+      cy.setCookie('isFirstTime', '1')
       cy.visit('/')
       cy.get('#viewer-container').get('canvas').should('be.visible')
       cy.get('[data-model-ready="true"]').should('exist')

diff --git a/cypress/e2e/screenshot/screen-from-note.cy.js b/cypress/e2e/screenshot/screen-from-note.cy.js
@@ -1,7 +1,7 @@
 describe('Note screenshot', () => {
   context('enable/disable feature using url parameter', () => {
     beforeEach(() => {
-      cy.setCookie('isFirstTime', 'false')
+      cy.setCookie('isFirstTime', '1')
       cy.visit('/')
     })
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r755",
+  "version": "1.0.0-r749",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
@@ -53,6 +53,7 @@
     "bldrs-conway": "./bldrs-conway-v0.0.1.tgz",
     "clsx": "^1.2.1",
     "cypress-react-router": "^2.0.1",
+    "js-cookie": "^3.0.5",
     "material-ui-popup-state": "^5.0.4",
     "matrix-widget-api": "^1.1.1",
     "normalize.css": "^8.0.1",
@@ -62,6 +63,7 @@
     "react-cosmos-plugin-webpack": "^6.0.0-beta.6",
     "react-dom": "^18.2.0",
     "react-feature-flags": "^1.0.0",
+    "react-ga4": "^2.1.0",
     "react-helmet-async": "^1.3.0",
     "react-markdown": "^8.0.3",
     "react-qr-code": "^2.0.12",

diff --git a/public/index.html b/public/index.html
@@ -17,19 +17,6 @@
     rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-
-  <!-- Global site tag (gtag.js) - Google Analytics snippet -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-210924287-3"></script>
-  <script>
-    window.dataLayer = window.dataLayer || []
-    function gtag() {
-      dataLayer.push(arguments)
-    }
-    gtag('js', new Date())
-    gtag('config', 'UA-210924287-3', {
-      test: `random`,
-    })
-  </script>
   <title>bldrs.ai</title>
   <!-- Start Single Page Apps for GitHub Pages -->
   <script type="text/javascript">

diff --git a/src/Components/About/AboutControl.jsx b/src/Components/About/AboutControl.jsx
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box'
 import Stack from '@mui/material/Stack'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
-import {getCookieBoolean, setCookieBoolean} from '../../privacy/Privacy'
+import * as FirstTime from '../../privacy/firstTime'
 import useStore from '../../store/useStore'
 import Dialog from '../Dialog'
 import {ControlButton} from '../Buttons'
@@ -19,18 +19,14 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
  */
 export default function AboutControl() {
   const isAboutDialogSuppressed = useStore((state) => state.isAboutDialogSuppressed)
-  const [isDialogDisplayed, setIsDialogDisplayed] = useState(getCookieBoolean({
-    component: 'about',
-    name: 'isFirstTime',
-    defaultValue: true,
-  }))
+  const [isDialogDisplayed, setIsDialogDisplayed] = useState(FirstTime.isFirst())
   const setIsDialogDisplayedLocal = (value) => {
     setIsDialogDisplayed(value)
   }
 
   const setIsDialogDisplayedForDialog = () => {
     setIsDialogDisplayed(false)
-    setCookieBoolean({component: 'about', name: 'isFirstTime', value: false})
+    FirstTime.setVisited()
   }
 
   return (

diff --git a/src/Components/About/PrivacyControl.jsx b/src/Components/About/PrivacyControl.jsx
@@ -2,33 +2,28 @@ import React, {useEffect, useState} from 'react'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import Link from '@mui/material/Link'
-import * as Privacy from '../../privacy/Privacy'
+import * as Analytics from '../../privacy/analytics'
 import Toggle from '../Toggle'
 
 
 /**
- * The PrivacyControl component contains and "accept cookies" checkbox.
+ * The PrivacyControl component contains and "accept analytics" checkbox.
  *
  * @return {React.ReactElement}
  */
 export default function PrivacyControl() {
-  const [acceptCookies, setAcceptCookies] = useState(true)
-
+  const [isAnalyticsEnabled, setIsAnalyticsEnabled] = useState(true)
 
   useEffect(() => {
-    if (Privacy.isPrivacySocialEnabled()) {
-      setAcceptCookies(true)
-    } else {
-      setAcceptCookies(false)
-    }
+    setIsAnalyticsEnabled(Analytics.isAllowed())
   }, [])
 
-  const changePrivacy = () => {
-    setPrivacy(acceptCookies)
-    setAcceptCookies(!acceptCookies)
+  const togglePrivacy = () => {
+    const newVal = !isAnalyticsEnabled
+    setIsAnalyticsEnabled(newVal)
+    Analytics.setIsAllowed(newVal)
   }
 
-
   return (
     <Stack
       spacing={2}
@@ -47,16 +42,7 @@ export default function PrivacyControl() {
           read more
         </Link>
       </Stack>
-      <Toggle checked={acceptCookies} onChange={changePrivacy}/>
+      <Toggle checked={isAnalyticsEnabled} onChange={togglePrivacy}/>
     </Stack>
   )
 }
-
-
-export const setPrivacy = (acceptCookies) => {
-  if (acceptCookies) {
-    Privacy.setUsageAndSocialEnabled(false, false)
-  } else {
-    Privacy.setUsageAndSocialEnabled(true, true)
-  }
-}
diff --git a/src/Components/About/PrivacyControl.test.jsx b/src/Components/About/PrivacyControl.test.jsx
@@ -1,14 +1,21 @@
-import * as Privacy from '../../privacy/Privacy'
-import {setPrivacy} from './PrivacyControl'
-
-
-describe('PrivacyControl tests', () => {
-  test('sets privacy settings correctly', () => {
-    // Test setting privacy to disabled
-    setPrivacy(true)
-    expect(Privacy.isPrivacySocialEnabled()).toBe(false)
-    // Test setting privacy to enabled
-    setPrivacy(false)
-    expect(Privacy.isPrivacySocialEnabled()).toBe(true)
+import React from 'react'
+import {fireEvent, render} from '@testing-library/react'
+import * as Analytics from '../../privacy/analytics'
+import PrivacyControl from './PrivacyControl'
+
+
+describe('PrivacyControl', () => {
+  test('toggle sets analytics cookie correctly', () => {
+    expect(Analytics.isAllowed()).toBe(true)
+
+    const {getByRole} = render(<PrivacyControl/>)
+    const enableAnalyticsToggle = getByRole('checkbox')
+    expect(enableAnalyticsToggle).toBeInTheDocument()
+
+    fireEvent.click(enableAnalyticsToggle)
+    expect(Analytics.isAllowed()).toBe(false)
+
+    fireEvent.click(enableAnalyticsToggle)
+    expect(Analytics.isAllowed()).toBe(true)
   })
 })
diff --git a/src/Containers/CadView.jsx b/src/Containers/CadView.jsx
@@ -18,7 +18,7 @@ import {hasValidUrlParams as urlHasCameraParams} from '../Components/CameraContr
 import {useWindowDimensions} from '../Components/Hooks'
 import {useIsMobile} from '../Components/Hooks'
 import {IfcViewerAPIExtended} from '../Infrastructure/IfcViewerAPIExtended'
-import * as Privacy from '../privacy/Privacy'
+import * as Analytics from '../privacy/analytics'
 import debug from '../utils/debug'
 import useStore from '../store/useStore'
 import {loadLocalFile, getUploadedBlobPath} from '../utils/loader'
@@ -318,7 +318,7 @@ export default function CadView({
 
     await viewer.isolator.setModel(loadedModel)
 
-    Privacy.recordEvent('select_content', {
+    Analytics.recordEvent('select_content', {
       content_type: 'ifc_model',
       item_id: filepath,
     })
@@ -407,7 +407,7 @@ export default function CadView({
       if (types.length > 0) {
         setDefaultExpandedTypes(types)
       }
-      Privacy.recordEvent('search', {
+      Analytics.recordEvent('search', {
         search_term: query,
       })
     } else {