Dcj/223474 - cookie bar

src/css/cookie.css

@@ -0,0 +1,39 @@
+.cookie-bar{
+  background-color: var(--cookie-background);
+  display: none;
+}
+.cookie-bar .privacy-settings {
+  max-height: 50vh;
+}
+.container-max{
+  z-index: auto;
+  max-width: 1200px;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.container-max p {
+  color: var(--navbar-font-color);
+}
+.container-max a {
+  color: var(--doc-font-color);
+}
+.cookie-bar .btn-appearance {
+  color: var(--cookie-button-color);
+  background-color: var(--cookie-button-background);
+  border-color: var(--cookie-button-border);
+}
+.custom-control-label {
+  color: var(--navbar-font-color);
+}
+#cookie-further-settings {
+  display: none;
+}
+.cookie-bar .flex-fill, .cookie-bar .card-text {
+  color: var(--plentyBluesTealBlue);
+}
+.cookie-bar .card-link {
+  color: var(--plentyBluesPacificBlue);
+}

src/css/dark-theme.css

@@ -43,6 +43,10 @@
   --footer-background-color: var(--plentyGreysLimedSpruce);
   --footer-link-font-color: var(--plenty-secondaries-white);
   --footer-link-hover-color: var(--link_hover-font-color);
+  --cookie-background: var(--plentyBluesTealBlue);
+  --cookie-button-background: var(--plentyBluesFadedJade);
+  --cookie-button-color: var(--plenty-secondaries-white);
+  --cookie-button-border: var(--plentyBluesFadedJade);
   /* docsearch */
   --docsearch-searchbox-background: var(--plentyBluesTealBlue);
   --docsearch-muted-color: var(--color-white);

src/css/light-theme.css

@@ -43,6 +43,10 @@
   --footer-background-color: var(--plentyGreysLimedSpruce);
   --footer-link-font-color: var(--plenty-secondaries-white);
   --footer-link-hover-color: var(--link_hover-font-color);
+  --cookie-background: var(--plenty-secondaries-white);
+  --cookie-button-background: var(--plentyRedCrimson);
+  --cookie-button-color: var(--plenty-secondaries-white);
+  --cookie-button-border: var(--plentyRedCrimson);
   /* docsearch */
   --docsearch-searchbox-background: var(--plenty-secondaries-white);
   --docsearch-muted-color: var(--plentyGreysLimedSpruce);

src/css/site-light-theme.css

@@ -23,3 +23,4 @@
 @import "easter-egg.css";
 @import "swagger-ui.css";
 @import "plenty-icon-font.css";
+@import "cookie.css";

src/css/site.css

@@ -23,3 +23,4 @@
 @import "easter-egg.css";
 @import "swagger-ui.css";
 @import "plenty-icon-font.css";
+@import "cookie.css";

src/js/11-cookies.js

@@ -0,0 +1,92 @@
+const name = 'plenty-cookies'
+
+class Cookies {
+  constructor () {
+    this.addListeners()
+    if (document.cookie.indexOf(name) === -1) {
+      this.toggleCookies()
+    }
+    this.setDefaultSettings()
+  }
+
+  addListeners () {
+    const acceptAllButton = document.getElementsByClassName('cookie-accept')
+    const acceptSelectedButton = document.getElementsByClassName('cookie-accept-selection')
+    const declineButton = document.getElementsByClassName('cookie-deny')
+    const showfurtherSettings = document.getElementById('show-cookie-further-settings')
+    const hidefurtherSettings = document.getElementById('hide-cookie-further-settings')
+
+    acceptAllButton[0].addEventListener('click', () => { this.setCookie(true, true, true, true) })
+    acceptSelectedButton[0].addEventListener('click', () => {
+      this.setCookie(this.consent, this.statistics, this.external, this.functional)
+    })
+    declineButton[0].addEventListener('click', () => { this.setCookie(false, false, false, false) })
+    showfurtherSettings.addEventListener('click', () => { this.toggleExtraSettings('show') })
+    hidefurtherSettings.addEventListener('click', () => { this.toggleExtraSettings('hide') })
+
+    document.querySelectorAll('.cookie-settings').forEach((item) => {
+      item.addEventListener('click', (event) => {
+        this[item.getAttribute('source')] = !this[item.getAttribute('source')]
+      })
+    })
+  }
+
+  toggleCookies (action) {
+    let display = 'block'
+    if (action === 'hide') {
+      display = 'none'
+    }
+    document.getElementsByClassName('cookie-bar')[0].style.display = display
+  }
+
+  toggleExtraSettings (action) {
+    let cookieSettingsDisplay = 'none'
+    let cookieFurtherSettingsDisplay = 'block'
+    if (action === 'hide') {
+      cookieSettingsDisplay = 'flex'
+      cookieFurtherSettingsDisplay = 'none'
+    }
+    document.getElementById('cookie-further-settings').style.display = cookieFurtherSettingsDisplay
+    document.getElementById('cookie-settings').style.display = cookieSettingsDisplay
+  }
+
+  setCookie (consent, statistics, external, functional) {
+    this.consent = consent
+    this.statistics = statistics
+    this.external = external
+    this.functional = functional
+    document.cookie = name + '= ' + this.createCookie() + '; Secure'
+    this.toggleCookies('hide')
+    this.setDefaultSettings()
+  }
+
+  createCookie () {
+    const cookie = {}
+    cookie.necessary = {}
+    cookie.tracking = {}
+    cookie.media = {}
+    cookie.convenience = {}
+    cookie.necessary.convenienceHype = this.consent
+    cookie.necessary.consent = this.consent
+    cookie.necessary.session = this.consent
+    cookie.necessary.csrf = this.consent
+    cookie.tracking.googleAnalytics = this.statistics
+    cookie.media.youtube = this.external
+    cookie.convenience.languageDetection = this.functional
+    return JSON.stringify(cookie)
+  }
+
+  setDefaultSettings () {
+    this.consent = true
+    this.statistics = false
+    this.external = false
+    this.functional = false
+  }
+}
+
+(function () {
+  window.addEventListener('DOMContentLoaded', (event) => {
+    // eslint-disable-next-line no-new
+    new Cookies()
+  })
+})()

src/lang/de-de.json

@@ -12,6 +12,100 @@
   "terms_and_conditions_text": "AGB",
   "terms_and_conditions_link": "https://www.plentymarkets.com/de/agb/",
 
+  "cookies_info": "Wir nutzen Cookies auf unserer Website. Einige von diesen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern. Weitere Informationen zu den von uns verwendeten Cookies und Ihren Rechten als Nutzer finden Sie in unserer <a class='text-appearance' href='https://www.plentymarkets.com/de/datenschutz/' target='_blank'>Datenschutzerklärung</a> und unserem <a class='text-appearance' href='https://www.plentymarkets.com/de/impressum/' target='_blank'>Impressum</a>.",
+  "cookies_accept-selection": "Auswahl akzeptieren",
+  "cookies_accept-all": "Alle akzeptieren",
+  "cookies_reject-all": "Alle ablehnen",
+  "cookies_further_settings_label": "Weitere Einstellungen",
+  "cookies_further_settings_back": "Zurück",
+
+  "cookies_more_information": "Mehr Informationen",
+  "cookies_essential_tag_label": "Essenziell",
+  "cookies_provider_label": "Anbieter",
+  "cookies_purpose_label": "Zweck",
+  "cookies_privacy_policy_label": "Datenschutzerklärung",
+  "cookies_lifespan_label": "Laufzeit",
+
+  "cookies_essential-label": "Essenziell",
+  "cookies_essential": {
+    "amount": "4",
+    "description": "Essenzielle Cookies ermöglichen grundlegende Funktionen und sind für die einwandfreie Funktion der Website erforderlich.",
+    "cookies_convenience_label": "Komfort",
+    "cookies_consent_label": "Consent",
+    "cookies_session_label": "Session",
+    "cookies_csrf_label": "CSRF",
+
+    "cookies_convenience": {
+      "provider": "plentymarkets",
+      "purpose": "Durch Komfort-Cookies wird das Browsen der Seite für dich angenehmer.",
+      "privacy_policy": "<a href='https://www.plentymarkets.com/de/datenschutz/' target='_blank' class='text-primary text-appearance'>https://www.plentymarkets.com/de/datenschutz/</a>",
+      "lifespan": "Session"
+    },
+
+    "cookies_consent": {
+      "provider": "plentymarkets",
+      "purpose": "Der Consent-Cookie speichert den Zustimmungsstatus des Benutzers für Cookies auf unserer Seite.",
+      "privacy_policy": "<a href='https://www.plentymarkets.com/de/datenschutz/' target='_blank' class='text-primary text-appearance'>https://www.plentymarkets.com/de/datenschutz/</a>",
+      "lifespan": "Session"
+    },
+
+    "cookies_session": {
+      "provider": "plentymarkets",
+      "purpose": "Der Session-Cookie behält die Zustände des Benutzers bei allen Seitenanfragen bei.",
+      "privacy_policy": "<a href='https://www.plentymarkets.com/de/datenschutz/' target='_blank' class='text-primary text-appearance'>https://www.plentymarkets.com/de/datenschutz/</a>",
+      "lifespan": "Session"
+    },
+
+    "cookies_csrf": {
+      "provider": "plentymarkets",
+      "purpose": "Der CSRF-Cookie dient dazu, Cross-Site Request Forgery-Angriffe zu verhindern.",
+      "privacy_policy": "<a href='https://www.plentymarkets.com/de/datenschutz/' target='_blank' class='text-primary text-appearance'>https://www.plentymarkets.com/de/datenschutz/</a>",
+      "lifespan": "Session"
+    }
+  },
+
+  "cookies_statistics-label": "Statistik",
+  "cookies_statistics": {
+    "amount": "1",
+    "description": "Statistik-Cookies erfassen Informationen anonym. Diese Informationen helfen uns zu verstehen, wie unsere Besucher unsere Website nutzen.",
+    "cookies_google_analytics_label": "Google Analytics",
+
+    "cookies_google_analytics": {
+      "provider": "Google Ireland Limited, Irland oder Google LLC, USA",
+      "purpose": "Zur Verbesserung unserer Produkte und Werbemaßnahmen",
+      "privacy_policy": "<a href='https://policies.google.com/privacy' target='_blank' class='text-primary text-appearance'>https://policies.google.com/privacy</a>",
+      "lifespan": "2 Jahre"
+    }
+  },
+
+  "cookies_external-media-label": "Externe Medien",
+  "cookies_external_media": {
+    "amount": "1",
+    "description": "Inhalte von Videoplattformen und Social Media Plattformen werden standardmäßig blockiert. Wenn Cookies von externen Medien akzeptiert werden, bedarf der Zugriff auf diese Inhalte keiner manuellen Zustimmung mehr.",
+    "cookies_youtube_label": "Youtube",
+
+    "cookies_youtube": {
+      "provider": "Google Ireland Limited, Irland oder Google LLC, USA",
+      "purpose": "Zur Darstellung wichtiger Inhalte auf der Webseite",
+      "privacy_policy": "<a href='https://policies.google.com/privacy' target='_blank' class='text-primary text-appearance'>https://policies.google.com/privacy</a>",
+      "lifespan": "2 Jahre"
+    }
+  },
+
+  "cookies_functional-label": "Funktional",
+  "cookies_functional": {
+    "amount": "1",
+    "description": "Diese Cookies ermöglichen, dass die von Nutzern getroffenen Auswahlmöglichkeiten und bevorzugte Einstellungen (z.B. das Deaktivieren der Sprachweiterleitung) gespeichert werden können.",
+    "cookies_preferred_language_label": "Automatische Spracherkennung",
+
+    "cookies_preferred_language": {
+      "provider": "plentymarkets",
+      "purpose": "Dieser Cookie erfasst, ob ein Nutzer die Sprachweiterleitung abgelehnt hat.",
+      "privacy_policy": "<a href='https://www.plentymarkets.com/de/datenschutz/' target='_blank' class='text-primary text-appearance'>https://www.plentymarkets.com/de/datenschutz/</a>",
+      "lifespan": "Session"
+    }
+  },
+
   "footer_col_1": "plentymarkets",
   "footer_text_1_1": "Systemvoraussetzungen",
   "footer_link_1_1": "/de-de/manual/main/willkommen/systemvoraussetzungen.html",

src/lang/en-gb.json

@@ -12,6 +12,100 @@
   "terms_and_conditions_text": "Terms and conditions",
   "terms_and_conditions_link": "https://www.plentymarkets.com/en/terms-and-conditions/",
 
+  "cookies_info": "Our website uses cookies. Some of them are essential, others help us improve this website and your user experience. You can find further information about our use of cookies and your rights as a user in  our <a class='text-appearance' href='https://www.plentymarkets.com/en/privacy-policy/' target='_blank'>privacy policy</a> and our <a class='text-appearance' href='https://www.plentymarkets.com/en/terms-and-conditions/' target='_blank'>terms and conditions</a>.",
+  "cookies_accept_selection": "Accept selection",
+  "cookies_accept_all": "Accept all",
+  "cookies_reject_all": "Reject all",
+  "cookies_further_settings_label": "Further settings",
+  "cookies_further_settings_back": "Back",
+
+  "cookies_more_information": "More information",
+  "cookies_essential_tag_label": "Essential",
+  "cookies_provider_label": "Provider",
+  "cookies_purpose_label": "Purpose",
+  "cookies_privacy_policy_label": "Privacy policy",
+  "cookies_lifespan_label": "Lifespan",
+
+  "cookies_essential_label": "Essential",
+  "cookies_essential": {
+    "amount": "4",
+    "description": "Essential cookies enable basic functions and are necessary for the proper functioning of the website.",
+    "cookies_convenience_label": "Convenience",
+    "cookies_consent_label": "Consent",
+    "cookies_session_label": "Session",
+    "cookies_csrf_label": "CSRF",
+
+    "cookies_convenience": {
+      "provider": "plentymarkets",
+      "purpose": "Convenience cookies improve your user experience.",
+      "privacy_policy": "<a href='https://www.plentymarkets.com/en/privacy-policy/' target='_blank' class='text-primary text-appearance'>https://www.plentymarkets.com/en/privacy-policy/</a>",
+      "lifespan": "Session"
+    },
+
+    "cookies_consent": {
+      "provider": "plentymarkets",
+      "purpose": "The consent cookie stores the user's state of consent for cookies on our site.",
+      "privacy_policy": "<a href='https://www.plentymarkets.com/en/privacy-policy/' target='_blank' class='text-primary text-appearance'>https://www.plentymarkets.com/en/privacy-policy/</a>",
+      "lifespan": "Session"
+    },
+
+    "cookies_session": {
+      "provider": "plentymarkets",
+      "purpose": "The session cookie retains the user's states during all page requests.",
+      "privacy_policy": "<a href='https://www.plentymarkets.com/en/privacy-policy/' target='_blank' class='text-primary text-appearance'>https://www.plentymarkets.com/en/privacy-policy/</a>",
+      "lifespan": "Session"
+    },
+
+    "cookies_csrf": {
+      "provider": "plentymarkets",
+      "purpose": "The CSRF cookie serves to prevent cross-site request forgery attacks.",
+      "privacy_policy": "<a href='https://www.plentymarkets.com/en/privacy-policy/' target='_blank' class='text-primary text-appearance'>https://www.plentymarkets.com/en/privacy-policy/</a>",
+      "lifespan": "Session"
+    }
+  },
+
+  "cookies_statistics_label": "Statistics",
+  "cookies_statistics": {
+    "amount": "1",
+    "description": "",
+    "cookies_google_analytics_label": "Google Analytics",
+
+    "cookies_google_analytics": {
+      "provider": "Google Ireland Limited, Irland or Google LLC, USA",
+      "purpose": "For improving our products and marketing",
+      "privacy_policy": "<a href='https://policies.google.com/privacy' target='_blank' class='text-primary text-appearance'>https://policies.google.com/privacy</a>",
+      "lifespan": "2 years"
+    }
+  },
+
+  "cookies_external_media_label": "External media",
+  "cookies_external_media": {
+    "amount": "1",
+    "description": "Content by video platforms and social media platforms are blocked by default. If you accept cookies by external media, access to these contents requires no further consent.",
+    "cookies_youtube_label": "Youtube",
+
+    "cookies_youtube": {
+      "provider": "Google Ireland Limited, Irland or Google LLC, USA",
+      "purpose": "For displaying important contents on the website",
+      "privacy_policy": "<a href='https://policies.google.com/privacy' target='_blank' class='text-primary text-appearance'>https://policies.google.com/privacy</a>",
+      "lifespan": "2 years"
+    }
+  },
+
+  "cookies_functional_label": "Functional",
+  "cookies_functional": {
+    "amount": "1",
+    "description": "These cookies are used to store preferred settings and certain options selected by the user (e.g. disabling language redirect).",
+    "cookies_preferred_language_label": "Automatic language redirect",
+
+    "cookies_preferred_language": {
+      "provider": "plentymarkets",
+      "purpose": "This cookie saves the information whether a user has disabled the automatic language redirect.",
+      "privacy_policy": "<a href='https://www.plentymarkets.com/en/privacy-policy/' target='_blank' class='text-primary text-appearance'>https://www.plentymarkets.com/en/privacy-policy/</a>",
+      "lifespan": "Session"
+    }
+  },
+
   "footer_col_1": "plentymarkets",
   "footer_text_1_1": "System requirements",
   "footer_link_1_1": "/en-gb/manual/main/welcome/quick-start-system-requirements.html",