diff --git a/front/gatsby/index.html b/front/gatsby/index.html index b7594d6ab..637c2d0f7 100644 --- a/front/gatsby/index.html +++ b/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() { diff --git a/front/gatsby/src/components/Footer.jsx b/front/gatsby/src/components/Footer.jsx new file mode 100644 index 000000000..12141b258 --- /dev/null +++ b/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 ( + + ) +} + +export default Footer diff --git a/front/gatsby/src/components/header.module.scss b/front/gatsby/src/components/header.module.scss index beb72cbc0..ba696dec1 100644 --- a/front/gatsby/src/components/header.module.scss +++ b/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; +} diff --git a/front/gatsby/src/createReduxStore.js b/front/gatsby/src/createReduxStore.js index b7a6bb6a7..9c8474c84 100644 --- a/front/gatsby/src/createReduxStore.js +++ b/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__()) diff --git a/front/gatsby/src/index.jsx b/front/gatsby/src/index.jsx index 352457dc3..9c0ea6604 100644 --- a/front/gatsby/src/index.jsx +++ b/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']) diff --git a/front/gatsby/src/layouts/App.jsx b/front/gatsby/src/layouts/App.jsx index 66fffe810..6b84850f9 100644 --- a/front/gatsby/src/layouts/App.jsx +++ b/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 && } + {shell &&