Skip to content

Commit 1ac61be

Browse files
ihorvansachnaydav
ihorvansach
authored and
naydav
committed
17 UX design for LoginAsCustomer Notification banner [LoginAsCustomer]
1 parent 4bb360d commit 1ac61be

File tree

9 files changed

+156
-10
lines changed

9 files changed

+156
-10
lines changed

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
use Magento\Customer\CustomerData\SectionSourceInterface;
1111
use Magento\Customer\Model\Session;
12+
use Magento\Store\Model\StoreManagerInterface;
1213

1314
/**
1415
* Customer data for the logged_as_customer section
@@ -20,14 +21,22 @@ class LoginAsCustomer implements SectionSourceInterface
2021
*/
2122
private $customerSession;
2223

24+
/**
25+
* @var StoreManagerInterface
26+
*/
27+
private $storeManager;
28+
2329
/**
2430
* LoginAsCustomer constructor.
2531
* @param Session $customerSession
32+
* @param StoreManagerInterface $storeManager
2633
*/
2734
public function __construct(
28-
Session $customerSession
35+
Session $customerSession,
36+
StoreManagerInterface $storeManager
2937
) {
3038
$this->customerSession = $customerSession;
39+
$this->storeManager = $storeManager;
3140
}
3241

3342
/**
@@ -42,6 +51,7 @@ public function getSectionData():array
4251

4352
return [
4453
'admin_user_id' => $this->customerSession->getLoggedAsCustomerAdmindId(),
54+
'website_name' => $this->storeManager->getWebsite()->getName()
4555
];
4656
}
4757
}

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

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77

88
namespace Magento\LoginAsCustomer\ViewModel;
99

10+
use Magento\Customer\Model\Context;
11+
1012
/**
1113
* View model to get extension configuration in the template
1214
*/
@@ -18,14 +20,24 @@ class Configuration implements \Magento\Framework\View\Element\Block\ArgumentInt
1820
*/
1921
private $config;
2022

23+
/**
24+
* Customer session
25+
*
26+
* @var \Magento\Framework\App\Http\Context
27+
*/
28+
private $httpContext;
29+
2130
/**
2231
* Configuration constructor.
2332
* @param \Magento\LoginAsCustomer\Model\Config $config
33+
* @param \Magento\Framework\App\Http\Context $httpContext
2434
*/
2535
public function __construct(
26-
\Magento\LoginAsCustomer\Model\Config $config
36+
\Magento\LoginAsCustomer\Model\Config $config,
37+
\Magento\Framework\App\Http\Context $httpContext
2738
) {
2839
$this->config = $config;
40+
$this->httpContext = $httpContext;
2941
}
3042

3143
/**
@@ -34,6 +46,16 @@ public function __construct(
3446
*/
3547
public function isEnabled():bool
3648
{
37-
return $this->config->isEnabled();
49+
return $this->config->isEnabled() && $this->isLoggedIn();
50+
}
51+
52+
/**
53+
* Is logged in
54+
*
55+
* @return bool
56+
*/
57+
private function isLoggedIn():bool
58+
{
59+
return (bool)$this->httpContext->getValue(Context::CONTEXT_AUTH);
3860
}
3961
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
"Close Session","Close Session"
2+
"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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,15 @@
88
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
99
<body>
1010
<referenceContainer name="after.body.start">
11-
<block name="login_as_customer_notices" template="Magento_LoginAsCustomer::html/notices.phtml">
11+
<block name="login-as-customer-notice" template="Magento_LoginAsCustomer::html/notices.phtml">
1212
<arguments>
1313
<argument name="config" xsi:type="object">Magento\LoginAsCustomer\ViewModel\Configuration</argument>
1414
</arguments>
15+
16+
<container name="login-as-customer-notice-links">
17+
<block class="Magento\Customer\Block\Account\AuthorizationLink" name="login-as-customer-logout-link"
18+
template="Magento_LoginAsCustomer::html/notices/logout-link.phtml" />
19+
</container>
1520
</block>
1621
</referenceContainer>
1722
</body>

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

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,24 @@
44
* See COPYING.txt for license details.
55
*/
66

7-
/** @var \Magento\Framework\View\Element\Template $block */
7+
/**
8+
* @var \Magento\Framework\View\Element\Template $block
9+
* @var \Magento\Framework\Escaper $escaper
10+
*/
811
?>
912
<?php if ($block->getConfig()->isEnabled()) : ?>
1013
<div data-bind="scope: 'loginAsCustomer'" >
11-
<div class="message global demo" data-bind="visible: isVisible" style="display: none">
12-
<div class="content">
13-
<p data-bind="text: new String('Attention! You are logged in as the customer.')"></p>
14+
<div class="lac-notification clearfix" data-bind="visible: isVisible" style="display: none">
15+
<div class="top-container">
16+
<div class="lac-notification-icon wrapper">
17+
<img class="logo-img" src="<?= $escaper->escapeUrl($block->getViewFileUrl('Magento_LoginAsCustomer::images/magento-icon.svg')) ?>" alt="Magento" />
18+
</div>
19+
<div class="lac-notification-text wrapper">
20+
<span data-bind="html: notificationText"></span>
21+
</div>
22+
<div class="lac-notification-links wrapper">
23+
<?= $block->getChildHtml('login-as-customer-notice-links') ?>
24+
</div>
1425
</div>
1526
</div>
1627
</div>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
/**
8+
* @var \Magento\Customer\Block\Account\AuthorizationLink $block
9+
* @var \Magento\Framework\Escaper $escaper
10+
*/
11+
$dataPostParam = '';
12+
if ($block->isLoggedIn()) {
13+
$dataPostParam = sprintf(" data-post='%s'", $block->getPostParams());
14+
}
15+
?>
16+
17+
<a class="lac-notification-close-link" <?= /* @noEscape */ $block->getLinkAttributes() ?><?= /* @noEscape */ $dataPostParam ?>>
18+
<?= $escaper->escapeHtml(__('Close Session')) ?>
19+
</a>
20+

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
& when (@media-common = true) {
7+
8+
.lac-notification {
9+
background-color: #373330;
10+
color: #fff;
11+
font-size: 16px;
12+
13+
.lac-notification-icon {
14+
float:left;
15+
margin-right: 25px;
16+
padding-top: 5px;
17+
}
18+
19+
.lac-notification-text {
20+
float:left;
21+
padding: 15px 0;
22+
}
23+
24+
.lac-notification-links {
25+
float: right;
26+
padding: 15px 0;
27+
a {color:#fff}
28+
29+
.lac-notification-close-link {
30+
&:after {
31+
-webkit-font-smoothing: antialiased;
32+
-moz-osx-font-smoothing: grayscale;
33+
font-size: 14px;
34+
line-height: 24px;
35+
color: #fff;
36+
content: '\e616';
37+
font-family: 'luma-icons';
38+
margin: 0;
39+
vertical-align: top;
40+
display: inline-block;
41+
font-weight: normal;
42+
overflow: hidden;
43+
speak: none;
44+
text-align: center;
45+
padding-left: 5px;
46+
}
47+
}
48+
}
49+
}
50+
}
51+
52+
53+
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
54+
.lac-notification {
55+
padding: 5px 0;
56+
57+
.lac-notification-icon {
58+
display: none;
59+
}
60+
61+
.lac-notification-text,
62+
.lac-notification-links {
63+
float: none;
64+
text-align: center;
65+
padding: 5px 0;
66+
}
67+
68+
}
69+
}

‎app/code/Magento/LoginAsCustomer/view/frontend/web/images/magento-icon.svg

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
*/
55

66
define([
7+
'jquery',
78
'uiComponent',
8-
'Magento_Customer/js/customer-data'
9-
], function (Component, customerData) {
9+
'Magento_Customer/js/customer-data',
10+
'mage/translate'
11+
], function ($, Component, customerData) {
1012
'use strict';
1113

1214
return Component.extend({
@@ -22,6 +24,10 @@ define([
2224
this.customer = customerData.get('customer');
2325
this.loginAsCustomer = customerData.get('logged_as_customer');
2426
this.isVisible(this.loginAsCustomer().admin_user_id);
27+
28+
this.notificationText = $.mage.__('You are connected as <strong>%1</strong> on %2')
29+
.replace('%1', this.customer().fullname)
30+
.replace('%2', this.loginAsCustomer().website_name);
2531
},
2632

2733
/** @inheritdoc */

0 commit comments

Comments
 (0)