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 { 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>
+          <a href="https://github.com/EcrituresNumeriques/stylo/releases" rel="noopener noreferrer" target="_blank">
+            Stylo v1.5
+          </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

@@ -43,3 +43,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

@@ -24,6 +24,9 @@ const initialState = {
     charCountPlusSpace: 0,
     citationNb: 0,
   },
+  userPreferences: {
+    trackingConsent: true /* default value should be false */
+  }
 }
 
 const reducer = createReducer([], {
@@ -41,6 +44,9 @@ const reducer = createReducer([], {
   UPDATE_ARTICLE_STATS: updateArticleStats,
   UPDATE_ARTICLE_STRUCTURE: updateArticleStructure,
   UPDATE_ARTICLE_BIB: updateArticleBib,
+
+  // user preferences reducers
+  USER_PREFERENCES_TOGGLE: toggleUserPreferences
 })
 
 
@@ -182,4 +188,16 @@ function updateArticleBib(state, { bib }) {
   return { ...state, articleBib: bib, articleBibTeXEntries }
 }
 
+function toggleUserPreferences (state, { key }) {
+  const { userPreferences } = state
+
+  return {
+    ...state,
+    userPreferences: {
+      ...userPreferences,
+      [key]: !userPreferences[key]
+    }
+  }
+}
+
 export default () => createStore(reducer, initialState, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

front/gatsby/src/index.jsx

@@ -52,6 +52,10 @@ const TrackPageViews = () => {
 
   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'])

front/gatsby/src/layouts/App.jsx

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react'
 import { useSelector } from 'react-redux'
 
 import Header from '../components/Header'
+import Footer from '../components/Footer'
 import Loading from '../components/Loading'
 
 import centeredStyles from './centered.module.scss'
@@ -31,6 +32,7 @@ export default function StyloApp (props) {
           {!hasBooted && <Loading />}
         </Suspense>
       </main>
+      {shell && <Footer />}
     </div>
   )
 }

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),