krini/src/components/CookieConsent.js at 204b6db8555b1a241d48c538197921f00ffb5101 · elixir-cloud-aai/krini · GitHub

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
import { useEffect } from 'react';
import 'vanilla-cookieconsent';
import 'vanilla-cookieconsent/dist/cookieconsent.css';

const pluginConfig = {
  current_lang: 'en',
  autoclear_cookies: true,
  page_scripts: true,
  force_consent: true,
  gui_options: {
    consent_modal: {
      layout: 'bar',
      position: 'bottom center',
      transition: 'slide',
      swap_buttons: true
    }
  },
  onAccept: function (cookie) {
    // check for production environment
    if (process.env.NODE_ENV === 'production') {
      // handle analytics cookies
      if (cookie.categories.includes('analytics')) {
        window.GAConsentGranted();
      }
    }
  },
  languages: {
    en: {
      consent_modal: {
        title: 'Cookie consent',
        description:
          'We use cookies to recognize your repeated visits and preferences, as well as to measure the effectiveness of our documentation and whether users find what they\'re searching for. With your consent, you\'re helping us to make our documentation better. <button type="button" data-cc="c-settings" class="cc-link"> Let me choose</button>',
        primary_btn: {
          text: 'Accept all',
          role: 'accept_all'
        },
        secondary_btn: {
          text: 'Reject',
          role: 'accept_necessary'
        }
      },
      settings_modal: {
        title: 'Cookie Settings',
        save_settings_btn: 'Save settings',
        accept_all_btn: 'Accept all',
        reject_all_btn: 'Reject',
        close_btn_label: 'Close',
        cookie_table_headers: [
          { col1: 'Name' },
          { col2: 'Domain' },
          { col3: 'Expiration' },
          { col4: 'Description' }
        ],
        blocks: [
          {
            title: 'Cookie usage',
            description:
              'We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want.'
          },
          {
            title: 'Strictly necessary cookies',
            description:
              'These cookies are essential for the proper functioning of the website. Without these cookies, the website would not work properly',
            toggle: {
              value: 'necessary',
              enabled: true,
              readonly: true
            }
          },
          {
            title: 'Analytics cookies',
            description:
              'These cookies are used to collect information about how you use our website. The information collected includes the number of visitors, the source of traffic, and the pages visited anonymously.',
            toggle: {
              value: 'analytics',
              enabled: true,
              readonly: false
            }
          },
          {
            title: 'More information',
            description:
              'For any queries in relation to our policy on cookies and your choices, please <a class="cc-link" href="mailto:cloud-service@elixir-europe.org">contact us</a>.'
          }
        ]
      }
    }
  }
};

const CookieConsent = () => {
  useEffect(() => {
    if (!document.getElementById('cc--main')) {
      window.CookieConsentApi = window.initCookieConsent();
      window.CookieConsentApi.run(pluginConfig);
    }
  }, []);

  return null;
};

export default CookieConsent;