Add LokiCookies API and cookie notice

Author: jissereitsma

ViewModel/CookieConfig.php

@@ -0,0 +1,45 @@
+<?php
+declare(strict_types=1);
+
+namespace Loki\Theme\ViewModel;
+
+use Magento\Framework\App\Config\ScopeConfigInterface;
+use Magento\Framework\View\Element\Block\ArgumentInterface;
+use Magento\Store\Model\ScopeInterface;
+
+class CookieConfig implements ArgumentInterface
+{
+    public function __construct(
+        private readonly ScopeConfigInterface $scopeConfig,
+    ) {
+    }
+
+    public function getLifetime(): int
+    {
+        return (int)$this->get('web/cookie/cookie_lifetime');
+    }
+
+    public function getPath(): string
+    {
+        return (string)$this->get('web/cookie/cookie_path');
+    }
+
+    public function getDomain(): string
+    {
+        return (string)$this->get('web/cookie/cookie_domain');
+    }
+
+    public function isHttpOnly(): int
+    {
+        return (int)$this->get('web/cookie/cookie_httponly');
+    }
+
+    public function getSameSite(): string
+    {
+        return 'Strict'; // @todo Strict, Lax or None
+    }
+    private function get(string $path): mixed
+    {
+        return $this->scopeConfig->getValue($path, ScopeInterface::SCOPE_STORE);
+    }
+}

ViewModel/FormKeyValue.php

@@ -3,12 +3,13 @@
 
 namespace Loki\Theme\ViewModel;
 
+use Magento\Framework\Data\Form\FormKey;
 use Magento\Framework\View\Element\Block\ArgumentInterface;
 
 class FormKeyValue implements ArgumentInterface
 {
     public function __construct(
-        private \Magento\Framework\Data\Form\FormKey $formKey,
+        private FormKey $formKey,
     ) {
     }
 

view/frontend/layout/loki_theme_default.xml

@@ -10,13 +10,20 @@
                 </arguments>
             </block>
 
+            <block name="loki.script.cookies" template="Loki_Theme::script/cookies.phtml">
+                <arguments>
+                    <argument name="cookie_config" xsi:type="object">Loki\Theme\ViewModel\CookieConfig</argument>
+                </arguments>
+            </block>
+
             <block name="loki.script.store.local-storage" template="Loki_Theme::script/store/local-storage.phtml"/>
 
             <block name="loki.script.components.main-menu" template="Loki_Theme::script/components/main-menu.phtml"/>
             <block name="loki.script.components.newsletter" template="Loki_Theme::script/components/newsletter.phtml"/>
             <block name="loki.script.components.messages" template="Loki_Theme::script/components/messages.phtml"/>
             <block name="loki.script.components.minicart" template="Loki_Theme::script/components/minicart.phtml"/>
             <block name="loki.script.components.top-links" template="Loki_Theme::script/components/top-links.phtml"/>
+            <block name="loki.script.components.cookie-notice" template="Loki_Theme::script/components/cookie-notice.phtml"/>
         </referenceContainer>
 
         <referenceContainer name="minicart.addons">

view/frontend/templates/script/components/cookie-notice.phtml

@@ -0,0 +1,25 @@
+<?php
+declare(strict_types=1);
+
+use Magento\Framework\View\Element\Template;
+
+/** @var Template $block */
+?>
+<script>
+    (function() {
+        const cookieNoticeBlock = document.getElementById('notice-cookie-block');
+        if (!cookieNoticeBlock) {
+            return;
+        }
+
+        const userAllowedSaveCookie = LokiCookies.get('user_allowed_save_cookie');
+        if (!userAllowedSaveCookie) {
+            cookieNoticeBlock.style.display = 'block';
+        }
+
+        document.getElementById('btn-cookie-allow').addEventListener('click', (e) => {
+            LokiCookies.set('user_allowed_save_cookie', 1);
+            cookieNoticeBlock.style.display = 'none';
+        });
+    })();
+</script>

view/frontend/templates/script/cookies.phtml

@@ -0,0 +1,58 @@
+<?php
+declare(strict_types=1);
+
+use Loki\Theme\ViewModel\CookieConfig;
+use Magento\Framework\View\Element\Template;
+
+/** @var Template $block */
+/** @var CookieConfig $cookieConfig */
+
+$cookieConfig = $block->getCookieConfig();
+?>
+<script>
+    const LokiCookies = {
+        lifetime: <?= /* @noEscape */ $cookieConfig->getLifetime() ?>,
+        domain: '<?= /* @noEscape */ $cookieConfig->getDomain() ?>',
+        path: '<?= /* @noEscape */ $cookieConfig->getPath() ?>',
+        httpOnly: <?= /* @noEscape */ $cookieConfig->isHttpOnly() ?>,
+        sameSite: '<?= /* @noEscape */ $cookieConfig->getSameSite() ?>',
+        getAll() {
+            const cookies = {};
+            document.cookie.split(';').forEach(cookie => {
+                const parts = cookie.split('=');
+                const name = parts[0].trim();
+                let value = parts[1].trim();
+
+                if (value.startsWith('{') && value.endsWith('}')) {
+                    value = JSON.parse(value);
+                } else {
+                    value = decodeURI(value);
+                }
+
+                cookies[name] = value;
+            })
+
+            return cookies;
+        },
+        get(name) {
+            return this.getAll()[name];
+        },
+        set(name, value) {
+            let cookieParts = [];
+            cookieParts.push(name + '=' + value);
+            cookieParts.push('max-age=' + this.lifetime + 20000);
+            cookieParts.push('path=' + this.path);
+
+            if (this.domain) {
+                cookieParts.push('domain=' + this.domain);
+            }
+
+            if (this.httpOnly) {
+                cookieParts.push('secure');
+            }
+
+            cookieParts.push('SameSite=' + this.sameSite);
+            document.cookie = cookieParts.join('; ');
+        }
+    }
+</script>

view/frontend/templates/script/variables.phtml

@@ -4,6 +4,7 @@ declare(strict_types=1);
 /** @version 0.0.4 */
 
 use Loki\Theme\ViewModel\FormKeyValue;
+use Loki\Theme\ViewModel\StoreConfig;
 use Magento\Framework\View\Element\Template;
 
 /** @var Template $block */