Pretend we have consent for now, and expose Matomo env variables to t…

…he frontend app

front/gatsby/index.html

@@ -26,7 +26,7 @@
       var _paq = window._paq = window._paq || [];
       /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
       _paq.push(["setDoNotTrack", true]);
-      // _paq.push(['requireConsent']);
+      _paq.push(['requireConsent']);
       _paq.push(['trackPageView']);
       _paq.push(['enableLinkTracking']);
       (function() {

front/gatsby/src/components/Footer.jsx

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { Switch, Route, Link } from 'react-router-dom'
+
+import styles from './header.module.scss'
+
+function Footer () {
+  const dispatch = useDispatch()
+  const userHasConsent = useSelector(state => state.userPreferences.trackingConsent)
+  const toggleConsent = useCallback(() => dispatch({ type: 'USER_PREFERENCES_TOGGLE', key: 'trackingConsent' }), [])
+
+  return (
+    <footer className={styles.footerContainer}>
+      <ul className={styles.footerList}>
+        <li>Stylo</li>
+        <li>
+          <a href="https://github.com/EcrituresNumeriques/stylo/releases" rel="noopener noreferrer" target="_blank">
+            Changelog
+          </a>
+        </li>
+        <li><Link to="/privacy">Privacy</Link></li>
+        { import.meta.env.SNOWPACK_MATOMO_URL && (<li>
+          <label className={styles.consentLabel}>
+            <input type="checkbox" checked={userHasConsent} onChange={toggleConsent} disabled={true} />
+            I accept to share my navigation stats
+          </label>
+        </li>) }
+      </ul>
+    </footer>
+  )
+}
+
+export default Footer

front/gatsby/src/components/header.module.scss

@@ -53,3 +53,26 @@
   margin: 0 .2em;
   vertical-align: middle;
 }
+
+.footerContainer {
+  margin: 1em 0;
+  text-align: center;
+}
+
+.footerList {
+  list-style: none;
+
+  > li {
+    display: inline;
+
+    &:not(:last-child):after {
+      content: " • ";
+    }
+  }
+}
+
+.consentLabel {
+  cursor: pointer;
+  font-size: .8em;
+  vertical-align: middle;
+}

front/gatsby/src/createReduxStore.js

@@ -38,6 +38,9 @@ const initialState = {
     charCountPlusSpace: 0,
     citationNb: 0,
   },
+  userPreferences: {
+    trackingConsent: true /* default value should be false */
+  }
 }
 
 const reducer = createReducer(initialState, {
@@ -56,6 +59,9 @@ const reducer = createReducer(initialState, {
   UPDATE_ARTICLE_STRUCTURE: updateArticleStructure,
   UPDATE_ARTICLE_BIB: updateArticleBib,
 
+  // user preferences reducers
+  USER_PREFERENCES_TOGGLE: toggleUserPreferences,
+
   SET_ARTICLE_VERSIONS: setArticleVersions,
   SET_WORKING_ARTICLE_UPDATED_AT: setWorkingArticleUpdatedAt,
   SET_WORKING_ARTICLE_TEXT: setWorkingArticleText,
@@ -287,6 +293,18 @@ function toggleArticlePreferences (state, { key, value }) {
   }
 }
 
+function toggleUserPreferences (state, { key }) {
+  const { userPreferences } = state
+
+  return {
+    ...state,
+    userPreferences: {
+      ...userPreferences,
+      [key]: !userPreferences[key]
+    }
+  }
+}
+
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 export default () => createStore(reducer, composeEnhancers(

front/gatsby/src/index.jsx

@@ -41,22 +41,15 @@ const store = createStore()
   )
 })()
 
-<<<<<<< HEAD
-=======
-const ArticleID = (props) => {
-  const { id, version, compareTo } = useParams()
-  return (
-    <App layout="fullPage">
-      <Write {...props} id={id} version={version} compareTo={compareTo} />
-    </App>
-  )
-}
-
 const TrackPageViews = () => {
   const history = useHistory()
 
   history.listen(({ pathname, search, state }, action) => {
     /* global _paq */
+
+    //@todo do this dynamically, based on a subscription to the store
+    //otherwise, we should use _paq.push(['forgetConsentGiven'])
+    _paq.push(['setConsentGiven'])
     _paq.push(['setCustomUrl', '/' + pathname])
     //_paq.push(['setDocumentTitle', 'My New Title'])
     _paq.push(['trackPageView'])
@@ -65,7 +58,6 @@ const TrackPageViews = () => {
   return null
 }
 
->>>>>>> f10a6a4 (Track page views on router history change)
 render(
   <React.StrictMode>
     <Provider store={store}>

front/gatsby/vite.config.js

@@ -8,6 +8,7 @@ const { NODE_ENV, SNOWPACK_MATOMO_URL, SNOWPACK_MATOMO_SITE_ID } = env
 // https://vitejs.dev/config/
 export default defineConfig({
   base: env.DEPLOY_PRIME_URL ?? '/',
+  envPrefix: 'SNOWPACK_',
   build: {
     outDir: 'build',
     sourcemap: Boolean(env.ENABLE_SOURCEMAPS),