FEATURE: cookie banner

Author: dimaip

Packages/Sites/Sfi.Site/Resources/Private/Fusion/Objects/CookieBanner.fusion

@@ -0,0 +1,63 @@
+prototype(Sfi.Site:CookieBanner) < prototype(Neos.Fusion:Component) {
+    renderer.@process.style = ${'<style>
+        .cross {
+        position: absolute;
+        top: 12px;
+        right: 8px;
+        }
+        .CookieBanner {
+        z-index: 1000;
+        inset-block-start: auto;
+        inset-block-end: 20px;
+        background-color: #fff;
+        border: none !important;
+        box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        padding: 24px;
+        max-width: 400px;
+        }
+    </style>' + value}
+
+    renderer.@process.script = ${value + '<script>
+            const dialog = document.querySelector(".js-cookieBanner");
+            const closeDialogBtns = document.querySelectorAll(".js-closeDialog");
+
+            const closeDialog = (e) => {
+                dialog.close();
+                localStorage.setItem("cookieBannerDismissed", "true");
+            };
+
+            closeDialogBtns.forEach(btn => {
+                btn.addEventListener("click", closeDialog);
+            });
+
+            dialog.addEventListener("cancel", closeDialog);
+            
+            dialog.addEventListener("click", (e) => {
+                if (e.target === dialog) {
+                    closeDialog();
+                }
+            });
+
+            if (!localStorage.getItem("cookieBannerDismissed")) {
+                dialog.showModal();
+            }
+        </script>'}
+    
+
+    renderer = afx`
+        <dialog class="CookieBanner js-cookieBanner" aria-labelledby="CookieBanner" aria-describedby="CookieBanner">
+            <button class="cross js-closeDialog" tabindex="-1">
+                <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1 1L16 16" stroke="black"/>
+                    <path d="M16 1L0.999999 16" stroke="black"/>
+                </svg>
+            </button>
+            <p class="ParagraphAlt textAlign-center paddingVertical-double">
+                Мы используем cookie-файлы для улучшения пользовательского опыта и сбора статистики. Вы&nbsp;можете ознакомиться с нашей <a class="Link" href="https://psmb-neos-resources.hb.bizmrg.com/target/sfi/8a480d710e822b218bf799961082118574449eb8/%D0%9F%D0%BE%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F%20cookies.pdf" target="_blank">Политикой использования cookie-файлов</a>.
+            </p>
+            <div class="flex flex-space-between">
+                <button type="button" class="js-closeDialog Button" style="width: 100%; background-color: #ff8e18;">Понятно</button>
+            </div>
+        </dialog>
+    `
+}

Packages/Sites/Sfi.Site/Resources/Private/Fusion/Root.fusion

@@ -93,6 +93,8 @@ prototype(Sfi.Site:Root) < prototype(Neos.Neos:Page) {
 		contactPersonName = ${q(site).property('contactPersonName')}
 		contactPersonPosition = ${q(site).property('contactPersonPosition')}
 		contactPersonImage = ${q(site).property('contactPersonImage')}
+
+		cookieBanner = Sfi.Site:CookieBanner
 	}
 }