Merge remote-tracking branch 'origin/module-login-as-customer' into module-login-as-customer

Author: naydav

app/code/Magento/LoginAsCustomerFrontendUi/view/frontend/layout/loginascustomer_login_index.xml

@@ -13,7 +13,7 @@
             </action>
         </referenceBlock>
         <referenceContainer name="content">
-            <block class="Magento\Framework\View\Element\Template" name="loginascustomer_login" template="Magento_LoginAsCustomerFrontendUi::login.phtml"/>
+            <block class="Magento\Framework\View\Element\Template" name="loginascustomer_login" template="Magento_LoginAsCustomerFrontendUi::login.phtml" cacheable="false"/>
         </referenceContainer>
     </body>
 </page>

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

@@ -8,7 +8,7 @@ define([
     'uiComponent',
     'Magento_Customer/js/customer-data',
     'mage/translate'
-], function ($, Component, customerData) {
+], function ($, Component, customer) {
     'use strict';
 
     return Component.extend({
@@ -19,23 +19,53 @@ define([
 
         /** @inheritdoc */
         initialize: function () {
+            var customerData, loggedAsCustomerData;
+
             this._super();
 
-            this.customer = customerData.get('customer');
-            this.loginAsCustomer = customerData.get('loggedAsCustomer');
-            this.isVisible(this.loginAsCustomer().adminUserId);
+            customerData = customer.get('customer');
+            loggedAsCustomerData = customer.get('loggedAsCustomer');
+
+            customerData.subscribe(function (data) {
+                this.fullname = data.fullname;
+                this.updateBanner();
+            }.bind(this));
+            loggedAsCustomerData.subscribe(function (data) {
+                this.adminUserId = data.adminUserId;
+                this.websiteName = data.websiteName;
+                this.updateBanner();
+            }.bind(this));
+
+            this.fullname = customerData().fullname;
+            this.adminUserId = loggedAsCustomerData().adminUserId;
+            this.websiteName = loggedAsCustomerData().websiteName;
 
-            this.notificationText = $.mage.__('You are connected as <strong>%1</strong> on %2')
-                .replace('%1', this.customer().fullname)
-                .replace('%2', this.loginAsCustomer().websiteName);
+            this.updateBanner();
         },
 
         /** @inheritdoc */
         initObservable: function () {
             this._super()
-                .observe('isVisible');
+                .observe(['isVisible', 'notificationText']);
 
             return this;
+        },
+
+        /**
+         * Update banner area
+         *
+         * @returns void
+         */
+        updateBanner: function () {
+            if (this.adminUserId !== undefined) {
+                this.isVisible(this.adminUserId);
+            }
+
+            if (this.fullname !== undefined && this.websiteName !== undefined) {
+                this.notificationText($.mage.__('You are connected as <strong>%1</strong> on %2')
+                    .replace('%1', this.fullname)
+                    .replace('%2', this.websiteName));
+            }
         }
     });
 });