Let the user re-open the cookie banner

src/components/CookiesBanner/index.jsx

@@ -5,12 +5,15 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'
 import IconButton from '@material-ui/core/IconButton'
 import React, { useEffect, useState } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
+import { useDispatch, useSelector } from 'react-redux'
 import Link from '~/components/layout/Link'
 import Button from '~/components/layout/Button'
 import { primary, mainFontFamily } from '~/theme/variables'
 import type { CookiesProps } from '~/logic/cookies/model/cookie'
 import { COOKIES_KEY } from '~/logic/cookies/model/cookie'
 import { loadFromCookie, saveCookie } from '~/utils/cookies'
+import { cookieBannerOpen } from '~/logic/cookies/store/selectors'
+import { openCookieBanner } from '~/logic/cookies/store/actions/openCookieBanner'
 
 const useStyles = makeStyles({
   container: {
@@ -68,10 +71,10 @@ const useStyles = makeStyles({
 
 const CookiesBanner = () => {
   const classes = useStyles()
-
+  const dispatch = useDispatch()
-  const [showBanner, setShowBanner] = useState(false)
   const [localNecessary, setLocalNecessary] = useState(true)
   const [localAnalytics, setLocalAnalytics] = useState(false)
+  const showBanner = useSelector(cookieBannerOpen)
 
   useEffect(() => {
     async function fetchCookiesFromStorage() {
@@ -80,13 +83,14 @@ const CookiesBanner = () => {
         const { acceptedNecessary, acceptedAnalytics } = cookiesState
         setLocalAnalytics(acceptedAnalytics)
         setLocalNecessary(acceptedNecessary)
-        setShowBanner(acceptedNecessary === false)
+        const openBanner = acceptedNecessary === false || showBanner
+        dispatch(openCookieBanner(openBanner))
       } else {
-        setShowBanner(true)
+        dispatch(openCookieBanner(true))
       }
     }
     fetchCookiesFromStorage()
-  }, [])
+  }, [showBanner])
 
   const acceptCookiesHandler = async () => {
     const newState = {
@@ -94,7 +98,7 @@ const CookiesBanner = () => {
       acceptedAnalytics: true,
     }
     await saveCookie(COOKIES_KEY, newState, 365)
-    setShowBanner(false)
+    dispatch(openCookieBanner(false))
   }
 
   const closeCookiesBannerHandler = async () => {
@@ -104,7 +108,7 @@ const CookiesBanner = () => {
     }
     const expDays = localAnalytics ? 365 : 7
     await saveCookie(COOKIES_KEY, newState, expDays)
-    setShowBanner(false)
+    dispatch(openCookieBanner(false))
   }
 
 
@@ -141,7 +145,7 @@ const CookiesBanner = () => {
               onChange={() => setLocalAnalytics((prev) => !prev)}
               value={localAnalytics}
               control={(
-                <Checkbox />
+                <Checkbox checked={localAnalytics} />
               )}
             />
           </div>

src/components/Sidebar/LegalLinks.jsx

@@ -1,9 +1,12 @@
 // @flow
 import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
+import { useDispatch } from 'react-redux'
 import Block from '~/components/layout/Block'
 import Link from '~/components/layout/Link'
 import { sm, primary } from '~/theme/variables'
+import { openCookieBanner } from '~/logic/cookies/store/actions/openCookieBanner'
+import GnoButtonLink from '~/components/layout/ButtonLink'
 
 const useStyles = makeStyles({
   container: {
@@ -12,10 +15,15 @@ const useStyles = makeStyles({
   link: {
     color: primary,
   },
+  buttonLink: {
+    textDecoration: 'none',
+    color: primary,
+  },
 })
 
 const LegalLinks = () => {
   const classes = useStyles()
+  const dispatch = useDispatch()
   return (
     <Block className={classes.container} justify="space-around">
       <Link className={classes.link} to="https://safe.gnosis.io/terms" target="_blank">
@@ -30,6 +38,9 @@ const LegalLinks = () => {
       <Link className={classes.link} to="https://safe.gnosis.io/imprint" target="_blank">
         Imprint
       </Link>
+      <GnoButtonLink className={classes.buttonLink} onClick={() => dispatch(openCookieBanner(true))}>
+        Cookies
+      </GnoButtonLink>
     </Block>
   )
 }

src/logic/cookies/model/cookie.js

@@ -6,6 +6,7 @@ export const COOKIES_KEY = 'COOKIES'
 export type CookiesProps = {
   acceptedNecessary: boolean,
   acceptedAnalytics: boolean,
+  cookieBannerOpen: boolean,
 }
 
 export type Cookie = RecordOf<CookiesProps>

src/logic/cookies/store/actions/openCookieBanner.js

@@ -0,0 +1,6 @@
+// @flow
+import { createAction } from 'redux-actions'
+
+export const OPEN_COOKIE_BANNER = 'OPEN_COOKIE_BANNER'
+
+export const openCookieBanner = createAction<string, *, *>(OPEN_COOKIE_BANNER, (cookieBannerOpen: boolean) => ({ cookieBannerOpen }))

src/logic/cookies/store/reducer/cookies.js

@@ -0,0 +1,24 @@
+// @flow
+import { Map } from 'immutable'
+import { handleActions, type ActionType } from 'redux-actions'
+import type { Cookie } from '~/logic/cookies/model/cookie'
+import { OPEN_COOKIE_BANNER } from '~/logic/cookies/store/actions/openCookieBanner'
+
+export const COOKIES_REDUCER_ID = 'cookies'
+
+export type State = Map<string, Map<string, Cookie>>
+
+export default handleActions<State, *>(
+  {
+    [OPEN_COOKIE_BANNER]: (state: State, action: ActionType<Function>): State => {
+      const { cookieBannerOpen } = action.payload
+
+      const newState = state.withMutations((map) => {
+        map.set('cookieBannerOpen', cookieBannerOpen)
+      })
+
+      return newState
+    },
+  },
+  Map(),
+)

src/logic/cookies/store/selectors/index.js

@@ -0,0 +1,5 @@
+// @flow
+import type { Provider } from '~/logic/wallets/store/model/provider'
+import { COOKIES_REDUCER_ID } from '~/logic/cookies/store/reducer/cookies'
+
+export const cookieBannerOpen = (state: any): Provider => state[COOKIES_REDUCER_ID].get('cookieBannerOpen')

src/store/index.js

@@ -18,6 +18,7 @@ import notifications, {
   NOTIFICATIONS_REDUCER_ID,
   type NotificationReducerState as NotificationsState,
 } from '~/logic/notifications/store/reducer/notifications'
+import cookies, { COOKIES_REDUCER_ID } from '~/logic/cookies/store/reducer/cookies'
 
 
 export const history = createBrowserHistory()
@@ -45,6 +46,7 @@ const reducers: Reducer<GlobalState> = combineReducers({
   [TOKEN_REDUCER_ID]: tokens,
   [TRANSACTIONS_REDUCER_ID]: transactions,
   [NOTIFICATIONS_REDUCER_ID]: notifications,
+  [COOKIES_REDUCER_ID]: cookies,
 })
 
 export const store: Store<GlobalState> = createStore(reducers, finalCreateStore)