|
| 1 | +import React, { useEffect, useState } from 'react'; |
| 2 | + |
| 3 | +import { Alert, Button, Box, Backdrop } from '@mui/material'; |
| 4 | +import { styled } from '@mui/material/styles'; |
| 5 | + |
| 6 | +const Root = styled(Backdrop)(() => ({ |
| 7 | + '&.backdrop': { |
| 8 | + zIndex: 10000, |
| 9 | + }, |
| 10 | + '& .cookie-alert': { |
| 11 | + minHeight: '100px', |
| 12 | + bottom: 0, |
| 13 | + position: 'fixed', |
| 14 | + }, |
| 15 | +})); |
| 16 | + |
| 17 | +const CookieModal = () => { |
| 18 | + const [consent, setConsent] = useState(); |
| 19 | + |
| 20 | + useEffect(() => { |
| 21 | + setConsent(localStorage.getItem('data-driven-forms-cookie-consent')); |
| 22 | + }, []); |
| 23 | + |
| 24 | + useEffect(() => { |
| 25 | + if (consent === 'google') { |
| 26 | + if (!window.location.origin.includes('localhost')) { |
| 27 | + let s = document.createElement('script'); |
| 28 | + s.type = 'text/javascript'; |
| 29 | + s.async = 'true'; |
| 30 | + s.src = 'https://www.googletagmanager.com/gtag/js?id=UA-164334905-1'; |
| 31 | + let x = document.getElementsByTagName('script')[0]; |
| 32 | + x.parentNode.insertBefore(s, x); |
| 33 | + |
| 34 | + window.dataLayer = window.dataLayer || []; |
| 35 | + |
| 36 | + // eslint-disable-next-line no-inner-declarations |
| 37 | + function gtag() { |
| 38 | + window.dataLayer.push(arguments); |
| 39 | + } |
| 40 | + |
| 41 | + window.gtag = gtag; |
| 42 | + global.gtag = gtag; |
| 43 | + |
| 44 | + gtag('js', new Date()); |
| 45 | + // eslint-disable-next-line camelcase |
| 46 | + gtag('config', 'UA-164334905-1', { anonymize_ip: true }); |
| 47 | + } |
| 48 | + } |
| 49 | + }, [consent]); |
| 50 | + |
| 51 | + const updateConsent = (type) => { |
| 52 | + setConsent(type); |
| 53 | + localStorage.setItem('data-driven-forms-cookie-consent', type); |
| 54 | + }; |
| 55 | + |
| 56 | + if (consent) { |
| 57 | + return null; |
| 58 | + } |
| 59 | + |
| 60 | + return ( |
| 61 | + <Root className="backdrop" open={true}> |
| 62 | + <Alert className="cookie-alert" severity="info"> |
| 63 | + Hello, we would like to use cookies to track your anonymised information in Google Analytics. We are using this information to know what kind |
| 64 | + of users visits and uses our library. It also helps us to know what content is the the most read. We are also using neccessary cookies to know |
| 65 | + what notifications to load and to store information about this consent. |
| 66 | + <Box> |
| 67 | + <Button variant="outlined" sx={{ marginRight: 1 }} onClick={() => updateConsent('neccessary')}> |
| 68 | + Allow only neccessary cookies |
| 69 | + </Button> |
| 70 | + <Button variant="outlined" onClick={() => updateConsent('google')}> |
| 71 | + Allow Google analytics |
| 72 | + </Button> |
| 73 | + </Box> |
| 74 | + </Alert> |
| 75 | + </Root> |
| 76 | + ); |
| 77 | +}; |
| 78 | + |
| 79 | +export default CookieModal; |
0 commit comments