-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.jsx
129 lines (117 loc) · 5.33 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import ReactGA from 'react-ga'
import { Button, Modal, Checkbox } from 'semantic-ui-react'
import { Info } from 'react-feather'
import './style.scss'
function CookieBanner() {
const location = useLocation()
const [cookiesAccepted, setCookiesAccepted] = useState(false)
const [showCookieSettingsModal, setShowCookieSettingsModal] = useState(false)
const [analyticsCookiesChecked, setAnalyticsCookiesChecked] = useState(false)
useEffect(() => {
if (localStorage.getItem('cookies_accepted') == 'true') {
setCookiesAccepted(true)
initializeTracking(location)
} else if (localStorage.getItem('cookies_accepted') == 'technical') {
setCookiesAccepted(true)
}
})
const acceptCookies = (e) => {
setCookiesAccepted(true)
localStorage.setItem('cookies_accepted', 'true')
}
const initializeTracking = (location) => {
if (process.env.REACT_APP_USE_GOOGLE_ANALYTICS == 'true') {
ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS, {
debug: false,
})
ReactGA.pageview(window.location.pathname)
}
}
const saveCookieSettings = () => {
if (analyticsCookiesChecked) {
// Analytics cookies are checked
initializeTracking(location)
localStorage.setItem('cookies_accepted', 'true')
} else {
// Remove cookies
document.cookie = '_ga=; Path=/; Domain=.example.com; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
document.cookie = '_gat=; Path=/; Domain=.example.com; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
document.cookie = '_gid=; Path=/; Domain=.example.com; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
// Remove G-Analytics
if (document.querySelector('script[src="https://www.google-analytics.com/analytics.js"]')) {
document.querySelector('script[src="https://www.google-analytics.com/analytics.js"]').remove()
}
localStorage.removeItem('cookies_accepted')
localStorage.setItem('cookies_accepted', 'technical')
}
setCookiesAccepted(true)
setShowCookieSettingsModal(false)
}
return (
<>
{cookiesAccepted == false && (
<div className="cookie-banner">
<p>
<Info />
We use cookies to improve our products, personalise your feed and advertising and to analyse how our products are used.
<br />
Select "Accept cookies" to consent to this use or set your cookie selection under "Manage settings". You can change your cookie settings at any time and
revoke your consent in your app-settings.
</p>
<Button onClick={acceptCookies} primary>
Accept cookies
</Button>
<Button onClick={() => setShowCookieSettingsModal(true)}>Manage settings</Button>
</div>
)}
<Modal
className="cookie-modal"
onClose={() => {
setShowCookieSettingsModal(false)
}}
onOpen={() => setShowCookieSettingsModal(true)}
open={showCookieSettingsModal}
size="tiny"
>
<Modal.Header>Manage your cookie settings</Modal.Header>
<Modal.Content>
We use cookies for advertising, analysis and to improve our features and products. You can use the "Accept all cookies" button to agree to cookies or adjust your
selection.
<br />
<div className="cookie-explenation">
<Checkbox toggle label="Technical cookies" defaultChecked disabled />
<br />
<p>Technical cookies are required for proper functionality of our products & services.</p>
</div>
<div className="cookie-explenation">
<Checkbox
toggle
checked={analyticsCookiesChecked}
onChange={() => {
setAnalyticsCookiesChecked(!analyticsCookiesChecked)
}}
label="Analysis cookies"
/>
<br />
<p>With analytics cookies we try to improve our products & services by better understanding users & how they interact with services.</p>
</div>
</Modal.Content>
<Modal.Actions>
<Button
onClick={() => {
setShowCookieSettingsModal(false)
}}
>
Dismiss
</Button>
<Button primary onClick={saveCookieSettings}>
Save settings
</Button>
</Modal.Actions>
</Modal>
</>
)
}
export default CookieBanner