Merge pull request #47 from ihorvansach/17-notification-banner

17 notification banner

app/code/Magento/LoginAsCustomer/CustomerData/LoginAsCustomer.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento\LoginAsCustomer\CustomerData;
+
+use Magento\Customer\CustomerData\SectionSourceInterface;
+use Magento\Customer\Model\Session;
+use Magento\Store\Model\StoreManagerInterface;
+
+/**
+ * Customer data for the logged_as_customer section
+ */
+class LoginAsCustomer implements SectionSourceInterface
+{
+    /**
+     * @var Session
+     */
+    private $customerSession;
+
+    /**
+     * @var StoreManagerInterface
+     */
+    private $storeManager;
+
+    /**
+     * LoginAsCustomer constructor.
+     * @param Session $customerSession
+     * @param StoreManagerInterface $storeManager
+     */
+    public function __construct(
+        Session $customerSession,
+        StoreManagerInterface $storeManager
+    ) {
+        $this->customerSession = $customerSession;
+        $this->storeManager = $storeManager;
+    }
+
+    /**
+     * Retrieve private customer data for the logged_as_customer section
+     * @return array
+     */
+    public function getSectionData():array
+    {
+        if (!$this->customerSession->getCustomerId()) {
+            return [];
+        }
+
+        return [
+            'admin_user_id' => $this->customerSession->getLoggedAsCustomerAdmindId(),
+            'website_name' => $this->storeManager->getWebsite()->getName()
+        ];
+    }
+}

app/code/Magento/LoginAsCustomer/ViewModel/Configuration.php

@@ -0,0 +1,61 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento\LoginAsCustomer\ViewModel;
+
+use Magento\Customer\Model\Context;
+
+/**
+ * View model to get extension configuration in the template
+ */
+class Configuration implements \Magento\Framework\View\Element\Block\ArgumentInterface
+{
+
+    /**
+     * @var \Magento\LoginAsCustomer\Model\Config
+     */
+    private $config;
+
+    /**
+     * Customer session
+     *
+     * @var \Magento\Framework\App\Http\Context
+     */
+    private $httpContext;
+
+    /**
+     * Configuration constructor.
+     * @param \Magento\LoginAsCustomer\Model\Config $config
+     * @param \Magento\Framework\App\Http\Context $httpContext
+     */
+    public function __construct(
+        \Magento\LoginAsCustomer\Model\Config $config,
+        \Magento\Framework\App\Http\Context $httpContext
+    ) {
+        $this->config = $config;
+        $this->httpContext = $httpContext;
+    }
+
+    /**
+     * Retrieve true if login as a customer is enabled
+     * @return bool
+     */
+    public function isEnabled():bool
+    {
+        return $this->config->isEnabled() && $this->isLoggedIn();
+    }
+
+    /**
+     * Is logged in
+     *
+     * @return bool
+     */
+    private function isLoggedIn():bool
+    {
+        return (bool)$this->httpContext->getValue(Context::CONTEXT_AUTH);
+    }
+}

app/code/Magento/LoginAsCustomer/etc/frontend/di.xml

@@ -9,4 +9,12 @@
     <type name="Magento\PageCache\Model\Config">
         <plugin name="las-cache-is-enabled" type="Magento\LoginAsCustomer\Model\PageCache\ConfigPlugin"/>
     </type>
+
+    <type name="Magento\Customer\CustomerData\SectionPoolInterface">
+        <arguments>
+            <argument name="sectionSourceMap" xsi:type="array">
+                <item name="logged_as_customer" xsi:type="string">Magento\LoginAsCustomer\CustomerData\LoginAsCustomer</item>
+            </argument>
+        </arguments>
+    </type>
 </config>

app/code/Magento/LoginAsCustomer/i18n/en_US.csv

@@ -0,0 +1,2 @@
+"Close Session","Close Session"
+"You are connected as <strong>%1</strong> on %2","You are connected as <strong>%1</strong> on %2"

app/code/Magento/LoginAsCustomer/view/frontend/layout/default.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceContainer name="after.body.start">
+            <block name="login-as-customer-notice" template="Magento_LoginAsCustomer::html/notices.phtml">
+                <arguments>
+                    <argument name="config" xsi:type="object">Magento\LoginAsCustomer\ViewModel\Configuration</argument>
+                </arguments>
+
+                <container name="login-as-customer-notice-links">
+                    <block class="Magento\Customer\Block\Account\AuthorizationLink" name="login-as-customer-logout-link"
+                       template="Magento_LoginAsCustomer::html/notices/logout-link.phtml" />
+                </container>
+            </block>
+        </referenceContainer>
+    </body>
+</page>

app/code/Magento/LoginAsCustomer/view/frontend/templates/html/notices.phtml

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/**
+ * @var \Magento\Framework\View\Element\Template $block
+ * @var \Magento\Framework\Escaper $escaper
+ */
+?>
+<?php if ($block->getConfig()->isEnabled()) : ?>
+    <div  data-bind="scope: 'loginAsCustomer'" >
+        <div class="lac-notification clearfix" data-bind="visible: isVisible" style="display: none">
+            <div class="top-container">
+                <div class="lac-notification-icon wrapper">
+                    <img class="logo-img" src="<?= $escaper->escapeUrl($block->getViewFileUrl('Magento_LoginAsCustomer::images/magento-icon.svg')) ?>" alt="Magento" />
+                </div>
+                <div class="lac-notification-text wrapper">
+                    <span data-bind="html: notificationText"></span>
+                </div>
+                <div class="lac-notification-links wrapper">
+                   <?= $block->getChildHtml('login-as-customer-notice-links') ?>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script type="text/x-magento-init">
+    {
+        "*": {
+            "Magento_Ui/js/core/app": {
+                "components": {
+                    "loginAsCustomer": {
+                        "component": "Magento_LoginAsCustomer/js/view/loginAsCustomer"
+                    }
+                }
+            }
+        }
+    }
+    </script>
+<?php endif; ?>

app/code/Magento/LoginAsCustomer/view/frontend/templates/html/notices/logout-link.phtml

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/**
+ * @var \Magento\Customer\Block\Account\AuthorizationLink $block
+ * @var \Magento\Framework\Escaper $escaper
+ */
+$dataPostParam = '';
+if ($block->isLoggedIn()) {
+    $dataPostParam = sprintf(" data-post='%s'", $block->getPostParams());
+}
+?>
+
+<a class="lac-notification-close-link" <?= /* @noEscape */ $block->getLinkAttributes() ?><?= /* @noEscape */ $dataPostParam ?>>
+    <?= $escaper->escapeHtml(__('Close Session')) ?>
+</a>
+

app/code/Magento/LoginAsCustomer/view/frontend/web/css/source/_module.less

@@ -0,0 +1,67 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+& when (@media-common = true) {
+
+    .lac-notification {
+        background-color: #373330;
+        color: #fff;
+        font-size: 16px;
+
+        .lac-notification-icon {
+            float:left;
+            margin: 10px 25px 10px 10px;
+
+            .logo-img {
+                display: block
+            }
+        }
+
+        .lac-notification-text {
+            float:left;
+            padding: 15px 0;
+        }
+
+        .lac-notification-links {
+            float: right;
+            padding: 15px 0;
+            a {
+                color:#fff;
+                font-size: 14px;
+            }
+
+            .lac-notification-close-link {
+                &:after {
+                    content: ' ';
+                    vertical-align: middle;
+                    display: inline-block;
+                    background: url('../Magento_LoginAsCustomer/images/close.svg');
+                    height: 12px;
+                    width: 12px;
+                    margin-left: 5px;
+                }
+            }
+        }
+    }
+}
+
+
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
+    .lac-notification {
+        padding: 5px 0;
+
+        .lac-notification-icon {
+            display: none;
+        }
+
+        .lac-notification-text,
+        .lac-notification-links {
+            float: none;
+            text-align: center;
+            padding: 5px 0;
+        }
+
+    }
+}

app/code/Magento/LoginAsCustomer/view/frontend/web/js/view/loginAsCustomer.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'uiComponent',
+    'Magento_Customer/js/customer-data',
+    'mage/translate'
+], function ($, Component, customerData) {
+    'use strict';
+
+    return Component.extend({
+
+        defaults: {
+            isVisible: false
+        },
+
+        /** @inheritdoc */
+        initialize: function () {
+            this._super();
+
+            this.customer = customerData.get('customer');
+            this.loginAsCustomer = customerData.get('logged_as_customer');
+            this.isVisible(this.loginAsCustomer().admin_user_id);
+
+            this.notificationText = $.mage.__('You are connected as <strong>%1</strong> on %2')
+                .replace('%1', this.customer().fullname)
+                .replace('%2', this.loginAsCustomer().website_name);
+        },
+
+        /** @inheritdoc */
+        initObservable: function () {
+            this._super()
+                .observe('isVisible');
+
+            return this;
+        }
+    });
+});