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,36 @@
+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 (<Switch>
+    <Route path="*/preview" />
+    <Route path="*">
+      <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>
+    </Route>
+  </Switch>)
+}
+
+export default Footer

front/gatsby/src/components/Header.jsx

@@ -33,8 +33,7 @@ function Header () {
   )
 
   return (<Switch>
-    <Route path="*/preview">
-    </Route>
+    <Route path="*/preview" />
     <Route path="*">
       <header className={styles.headerContainer}>
         <section className={styles.header}>

front/gatsby/src/components/Privacy.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import styles from '../components/Write/write.module.scss'
+
+export default function Privacy () {
+  return (
+    <section className={styles.container}>
+      <article className={styles.simplePage}>
+        <h2>Privacy Terms</h2>
+
+        <p>Coming soon…</p>
+      </article>
+    </section>
+  )
+}

front/gatsby/src/components/Write/write.module.scss

@@ -28,11 +28,16 @@
   }
 }
 
-.error {
+.simplePage {
   background-color: $extra-background-color;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, .3);
   margin: 5em auto;
   padding: 10em 2em;
   width: 50%;
+}
+
+.error {
+  @extend .simplePage;
   color: $error-color;
 }
 

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

@@ -53,3 +53,27 @@
   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: "•";
+      margin: 0 .5em;
+    }
+  }
+}
+
+.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

@@ -12,6 +12,7 @@ import { getUserProfile } from './helpers/userProfile'
 import { getApplicationConfig } from './helpers/applicationConfig'
 
 import Header from './components/Header'
+import Footer from './components/Footer'
 import Register from './components/Register'
 import PrivateRoute from './components/PrivateRoute'
 import NotFound from './components/404'
@@ -28,6 +29,7 @@ const Articles = lazy(() => import('./components/Articles'))
 const Credentials = lazy(() => import('./components/Credentials'))
 const Write = lazy(() => import('./components/Write/Write'))
 const ArticlePreview = lazy(() => import('./components/ArticlePreview'))
+const Privacy = lazy(() => import('./components/Privacy'))
 
 const store = createStore()
 
@@ -41,22 +43,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 +60,6 @@ const TrackPageViews = () => {
   return null
 }
 
->>>>>>> f10a6a4 (Track page views on router history change)
 render(
   <React.StrictMode>
     <Provider store={store}>
@@ -108,6 +102,9 @@ render(
             <PrivateRoute path={`/article/:id`}>
               <Write />
             </PrivateRoute>
+            <Route exact path="/privacy">
+              <Privacy />
+            </Route>
             <Route exact path="/ux">
               <h2>Buttons</h2>
               <h4>Primary</h4>
@@ -145,6 +142,8 @@ render(
             </Route>
           </Switch>
         </App>
+
+        <Footer />
       </Router>
     </Provider>
   </React.StrictMode>,

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