Use stimulus-bridge

templates/_cookieAlert.html.twig

@@ -1,7 +1,7 @@
-<div class="alert text-center cookiealert" role="alert" {{ sylius_test_html_attribute('cookie-alert') }}>
+<div  class="alert text-center cookiealert" {{ stimulus_controller('cookie-alert') }}  role="alert" {{ sylius_test_html_attribute('cookie-alert') }}>
     {{ 'black_sylius_cookie_alert.ui.message'|trans|raw }} <a href="https://cookiesandyou.com/" target="_blank">{{ 'black_sylius_cookie_alert.ui.link'|trans }}</a>
 
-    <button type="button" class="btn btn-primary btn-sm acceptcookies" aria-label="Close">
+    <button type="button" data-action="cookie-alert#acceptCookie" class="btn btn-primary btn-sm acceptcookies" aria-label="Close">
         {{ 'black_sylius_cookie_alert.ui.agree'|trans }}
     </button>
 </div>

tests/Application/assets/shop/app.css

@@ -0,0 +1,21 @@
+.cookiealert {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0 !important;
+    z-index: 999;
+    opacity: 0;
+    visibility: hidden;
+    border-radius: 0;
+    transform: translateY(100%);
+    transition: all 500ms ease-out;
+    color: #ecf0f1;
+    background: #212327;
+}
+.cookiealert.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0%);
+    transition-delay: 1000ms;
+}

tests/Application/assets/shop/app.js

@@ -2,4 +2,4 @@ import 'sylius/bundle/ShopBundle/Resources/private/entry';
 
 import './bootstrap';
 
-require('./app.scss');
+require('./app.css');

tests/Application/assets/shop/controllers/cookie-alert_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from 'stimulus';
+
+
+export default class extends Controller {
+  constructor() {
+    super();
+    // eslint-disable-next-line no-undef
+    this.cookieAlert = document.querySelector('.cookiealert');
+    // eslint-disable-next-line no-undef
+    this.acceptCookies = document.querySelector('.acceptcookies');
+  }
+  connect() {
+    console.log('salut');
+    if (!this.getCookie('acceptCookies')) {
+      this.cookieAlert.classList.add('show');
+    }
+  }
+
+  setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+    const expires = `expires=${d.toUTCString()}`;
+    document.cookie = `${cname}=${cvalue};${expires};path=/`;
+  }
+
+  acceptCookie() {
+    this.setCookie('acceptCookies', true, 365);
+    this.cookieAlert.classList.remove('show');
+    alert('cookies accepted');
+  }
+
+  getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === ' ') {
+        c = c.substring(1);
+      }
+      if (c.indexOf(name) === 0) {
+        return c.substring(name.length, c.length);
+      }
+    }
+    return '';
+  }
+}