Custom GDPR banner test

Author: sanex3339

App/containers/App.js

@@ -1,6 +1,10 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Adsense} from '@ctrl/react-adsense';
+import { ConsentProvider, ConsentBanner } from 'react-hook-consent';
+import 'react-hook-consent/dist/styles/style.css';
+import {Helmet} from "react-helmet";
+import Cookies from 'js-cookie'
 
 import {connect} from 'react-redux';
 
@@ -13,6 +17,10 @@ import OptionsContainer from './OptionsContainer';
 
 class App extends Component {
 
+    state = {
+        cookiesEnabled: Cookies.get('cookies-enabled'),
+    }
+
     static propTypes = {
         dispatch: PropTypes.func,
         code: PropTypes.string,
@@ -25,6 +33,12 @@ class App extends Component {
         options: PropTypes.object,
     };
 
+    constructor() {
+        super();
+
+        window.enableCookies = this.enableCookies.bind(this);
+    }
+
     obfuscate() {
         const {dispatch} = this.props;
         const {code, options} = this.props;
@@ -52,6 +66,10 @@ class App extends Component {
         downloadFile(data);
     }
 
+    enableCookies() {
+        this.setState({cookiesEnabled: true});
+    }
+
     render() {
 
         const {dispatch} = this.props;
@@ -69,6 +87,13 @@ class App extends Component {
 
         return (
             <React.Fragment>
+                <Helmet>
+                    {this.state.cookiesEnabled && (
+                      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5000712498982649"
+                              crossOrigin="anonymous"></script>
+                    )}
+                </Helmet>
+
                 <CodeContainer
                     code={code}
                     obfuscatedCode={obfuscatedCode}
@@ -92,6 +117,31 @@ class App extends Component {
                 </div>
 
                 <OptionsContainer/>
+
+                <ConsentProvider
+                   options={{
+                      services: [
+                          {
+                              id: 'analytics_and_ads',
+                              name: 'Analytics & Ads',
+                              scripts: [
+                                  { id: 'enable-cookies', code: 'window.enableCookies()' },
+                              ],
+                              cookies: [],
+                              mandatory: false,
+                          },
+                      ],
+                      theme: 'light',
+                   }}
+                >
+                    <ConsentBanner
+                      settings={{ hidden: false, label: 'More', modal: { title: 'Cookie settings' } }}
+                      decline={{ show: true, label: 'Reject' }}
+                      approve={{ label: 'Accept' }}
+                    >
+                        Can we use cookies and external services according to our <a href="/docs/cookie-policy.docx">cookie policy</a>?
+                    </ConsentBanner>
+                </ConsentProvider>
             </React.Fragment>
         );
     }

App/util/get-heading-renderer.js

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import { Adsense } from "@ctrl/react-adsense";
 
 const flatten = (text, child) => {
     return typeof child === 'string'
@@ -12,26 +11,12 @@ export const getHeadingRenderer = (props) => {
     const children = React.Children.toArray(props.children)
     const text = children.reduce(flatten, '')
     const slug = text.toLowerCase().replace(/\W/g, '-')
-    const adData = props.adData
 
     const Element = 'h' + props.level
 
     return (
-       <>
-           {/*{!!adData && (
-             <div style={{ width: '100%', marginBottom: '8px' }}>
-                 <Adsense
-                   client={adData.client}
-                   slot={adData.slot}
-                   format="fluid"
-                   layout="in-article"
-                 />
-             </div>
-           )}*/}
-
-          <Element id={slug}>
-              {props.children}
-          </Element>
-       </>
+        <Element id={slug}>
+            {props.children}
+        </Element>
     );
 };

package-lock.json

@@ -40,6 +40,7 @@
     "graceful-fs": "4.2.4",
     "html-webpack-plugin": "^4.5.1",
     "javascript-obfuscator": "4.0.0",
+    "js-cookie": "3.0.5",
     "less": "2.7.1",
     "less-loader": "7.3.0",
     "mini-css-extract-plugin": "^1.3.4",
@@ -51,6 +52,8 @@
     "react-codemirror2": "7.2.1",
     "react-dom": "17.0.1",
     "react-dropzone": "11.2.4",
+    "react-helmet": "6.1.0",
+    "react-hook-consent": "3.3.0",
     "react-markdown": "^5.0.3",
     "react-redux": "7.2.2",
     "redux": "4.0.5",