ENGCOM-6378: 13865 safari block cookies breaks javascript scripts #25324

Author: slavvka

app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml

@@ -23,6 +23,7 @@
         </referenceBlock>
         <referenceContainer name="after.body.start">
             <block class="Magento\Framework\View\Element\Js\Components" name="head.components" as="components" template="Magento_Theme::js/components.phtml" before="-"/>
+            <block class="Magento\Framework\View\Element\Template" name="cookie-status-check" as="cookie-status" template="Magento_Theme::js/cookie_status.phtml" />
         </referenceContainer>
     </body>
 </page>

app/code/Magento/Theme/view/frontend/requirejs-config.js

@@ -30,7 +30,8 @@ var config = {
             'welcome':                'Magento_Theme/js/view/welcome',
             'breadcrumbs':            'Magento_Theme/js/view/breadcrumbs',
             'criticalCssLoader':      'Magento_Theme/js/view/critical-css-loader',
-            'jquery/ui':              'jquery/compat'
+            'jquery/ui':              'jquery/compat',
+            'cookieStatus':           'Magento_Theme/js/cookie-status'
         }
     },
     deps: [

app/code/Magento/Theme/view/frontend/templates/js/cookie_status.phtml

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+?>
+
+<div id="cookie-status" style="display: none">
+    <?= $block->escapeHtml(__('The store will not work correctly in the case when cookies are disabled.')); ?>
+</div>
+
+<script type="text/x-magento-init">
+    {
+        "*": {
+            "cookieStatus": {}
+        }
+    }
+</script>
+
+

app/code/Magento/Theme/view/frontend/web/js/cookie-status.js

@@ -0,0 +1,40 @@
+define([
+    'jquery',
+    'Magento_Ui/js/modal/modal',
+    'mage/translate'
+], function ($, modal) {
+    'use strict';
+
+    $.widget('mage.cookieStatus', {
+        options: {
+            type: 'popup',
+            responsive: true,
+            innerScroll: true,
+            autoOpen: true,
+            buttons: [{
+                text: $.mage.__('Close'),
+                class: 'cookie-status',
+
+                /**
+                 * Callback for click event
+                 */
+                click: function () {
+                    this.closeModal();
+                }
+            }]
+        },
+
+        /**
+         * Init object
+         * @private
+         */
+        _init: function () {
+
+            if (!navigator.cookieEnabled) {
+                modal(this.options, $('#cookie-status'));
+            }
+        }
+    });
+
+    return $.mage.cookieStatus;
+});

dev/tests/js/jasmine/tests/app/code/Magento/Theme/view/frontend/web/js/cookie-status.test.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'cookieStatus'
+], function ($, Cookie) {
+    'use strict';
+
+    describe('Magento_Theme/js/cookie-status', function () {
+        var widget,
+            htmlContainer = '<div id="cookie-status" style="display: none"></div>',
+            navigator;
+
+        beforeEach(function () {
+            widget = new Cookie();
+            navigator = window.navigator;
+            $('.modal-popup').remove();
+            $('#cookie-status').remove();
+            $(document.body).append(htmlContainer);
+        });
+
+        afterEach(function () {
+            window.navigator = navigator;
+        });
+
+        it('defines cookieStatus widget', function () {
+            expect($.fn.cookieStatus).toBeDefined();
+        });
+
+        it('does not show a modal when cookies are supported', function () {
+            window.navigator = {
+                cookieEnabled: true
+            };
+            widget._init();
+            expect($(document.body).html()).not.toContain('<aside role="dialog" class="modal-popup');
+        });
+
+        it('shows the modal when cookies are not supported', function () {
+            window.navigator = {
+                cookieEnabled: false
+            };
+            widget._init();
+            expect($(document.body).html()).toContain('<aside role="dialog" class="modal-popup');
+        });
+
+    });
+});