Skip to content

Commit 93bc1d5

Browse files
michaelntechmichaelntech
committed
Updated offer banner show/hide logic and text
Changelog: None Signed-off-by: Michael Clelland <[email protected]>
1 parent 76bf4a8 commit 93bc1d5

File tree

4 files changed

+109
-18
lines changed

4 files changed

+109
-18
lines changed

‎src/js/components/__snapshots__/app.test.js.snap‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,51 @@ exports[`App Component renders correctly 1`] = `
44
<body>
55
<div>
66
<div
7-
class="MuiToolbar-root MuiToolbar-regular header MuiToolbar-gutters"
7+
class="MuiToolbar-root MuiToolbar-regular header banner MuiToolbar-gutters"
88
id="fixedHeader"
99
style="background-color: rgb(255, 255, 255); min-height: unset; padding-left: 32px; padding-right: 40px;"
1010
>
11+
<div
12+
class="offerBox"
13+
id="offerHeader"
14+
>
15+
<svg
16+
aria-hidden="true"
17+
class="MuiSvgIcon-root"
18+
focusable="false"
19+
style="margin-right: 2px; height: 16px; vertical-align: bottom;"
20+
viewBox="0 0 24 24"
21+
>
22+
<path
23+
d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"
24+
/>
25+
</svg>
26+
<span>
27+
Try out the new
28+
<b>
29+
Remote terminal
30+
</b>
31+
feature for free on your current plan until March 31st. 
32+
</span>
33+
<a
34+
href="https://docs.mender.io/add-ons/remote-terminal"
35+
rel="noreferrer"
36+
target="_blank"
37+
>
38+
Read the documentation to learn how to enable it
39+
</a>
40+
<svg
41+
aria-hidden="true"
42+
class="MuiSvgIcon-root"
43+
focusable="false"
44+
style="margin-left: 4px; height: 16px; cursor: pointer;"
45+
viewBox="0 0 24 24"
46+
>
47+
<path
48+
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
49+
/>
50+
</svg>
51+
</div>
1152
<div
1253
class="flexbox"
1354
>

‎src/js/components/header/__snapshots__/offerheader.test.js.snap‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,29 @@ exports[`DeviceNotifications Component renders correctly 1`] = `
1717
/>
1818
</svg>
1919
<span>
20-
End of year offer – receive 20% discount for 6 months when you upgrade to a paid Mender plan before Dec 31.
21-
22-
<a
23-
href="/settings/upgrade"
24-
>
25-
Learn more and upgrade now
26-
</a>
20+
Try out the new
21+
<b>
22+
Remote terminal
23+
</b>
24+
feature for free on your current plan until March 31st. 
2725
</span>
26+
<a
27+
href="https://docs.mender.io/add-ons/remote-terminal"
28+
rel="noreferrer"
29+
target="_blank"
30+
>
31+
Read the documentation to learn how to enable it
32+
</a>
33+
<svg
34+
aria-hidden="true"
35+
class="MuiSvgIcon-root"
36+
focusable="false"
37+
style="margin-left: 4px; height: 16px; cursor: pointer;"
38+
viewBox="0 0 24 24"
39+
>
40+
<path
41+
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
42+
/>
43+
</svg>
2844
</div>
2945
`;

‎src/js/components/header/header.js‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,16 @@ import enterpriseLogo from '../../../assets/img/headerlogo-enterprise.png';
3333

3434
const menuButtonColor = colors.grey;
3535

36+
// Change this when a new feature/offer is introduced
37+
const currentOffer = {
38+
name: 'remote',
39+
expires: '2021-04-01',
40+
trial: true,
41+
os: true,
42+
professional: true,
43+
enterprise: true
44+
};
45+
3646
export class Header extends React.Component {
3747
constructor(props, context) {
3848
super(props, context);
@@ -62,6 +72,7 @@ export class Header extends React.Component {
6272

6373
componentDidMount() {
6474
this._updateUsername();
75+
this._offerBannerCookie();
6576
}
6677

6778
_updateUsername() {
@@ -83,11 +94,23 @@ export class Header extends React.Component {
8394
);
8495
}
8596

97+
_offerBannerCookie() {
98+
const self = this;
99+
const offerCookie = this.cookies.get('offer') === currentOffer.name;
100+
self.setState({ offerCookie: offerCookie });
101+
}
102+
86103
onLogoutClick() {
87104
this.setState({ gettingUser: false, loggingOut: true, anchorEl: null });
88105
this.props.logoutUser();
89106
}
90107

108+
setHideOffer() {
109+
const self = this;
110+
this.cookies.set('offer', 'remote', { path: '/', maxAge: 2629746 });
111+
self._offerBannerCookie();
112+
}
113+
91114
render() {
92115
const self = this;
93116
const { anchorEl } = self.state;
@@ -108,15 +131,18 @@ export class Header extends React.Component {
108131
toggleHelptips,
109132
user
110133
} = self.props;
111-
const offerValid = moment().isBefore('2021-01-01');
112134

135+
const showOffer =
136+
moment().isBefore(currentOffer.expires) &&
137+
(organization && organization.trial ? currentOffer.trial : currentOffer[organization.plan]) &&
138+
!self.state.offerCookie;
113139
return (
114140
<Toolbar
115141
id="fixedHeader"
116-
className={organization && organization.trial && offerValid ? 'header banner' : 'header'}
142+
className={showOffer ? 'header banner' : 'header'}
117143
style={{ backgroundColor: '#fff', minHeight: 'unset', paddingLeft: 32, paddingRight: 40 }}
118144
>
119-
{organization && organization.trial && offerValid && <OfferHeader />}
145+
{showOffer && <OfferHeader organization={organization} onHide={() => self.setHideOffer()} />}
120146
<div className="flexbox">
121147
<Link to="/">
122148
<img id="logo" src={isEnterprise ? enterpriseLogo : logo} />

‎src/js/components/header/offerheader.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
import React from 'react';
2-
import { Link } from 'react-router-dom';
3-
import LocalOfferIcon from '@material-ui/icons/LocalOffer';
2+
import { LocalOffer as LocalOfferIcon, Close as CloseIcon } from '@material-ui/icons';
43

5-
const OfferHeader = () => (
4+
const OfferHeader = ({ organization, onHide }) => (
65
<div id="offerHeader" className="offerBox">
76
<LocalOfferIcon style={{ marginRight: '2px', height: '16px', verticalAlign: 'bottom' }} />
8-
<span>
9-
End of year offer – receive 20% discount for 6 months when you upgrade to a paid Mender plan before Dec 31.{' '}
10-
<Link to="/settings/upgrade">Learn more and upgrade now</Link>
11-
</span>
7+
{organization && organization.trial ? (
8+
<span>
9+
Try out the new <b>Remote terminal</b> feature for free with your current trial.&nbsp;
10+
</span>
11+
) : (
12+
<span>
13+
Try out the new <b>Remote terminal</b> feature for free on your current plan until March 31st.&nbsp;
14+
</span>
15+
)}
16+
<a href="https://docs.mender.io/add-ons/remote-terminal" target="_blank" rel="noreferrer">
17+
Read the documentation to learn how to enable it
18+
</a>
19+
<CloseIcon style={{ marginLeft: '4px', height: '16px', cursor: 'pointer' }} onClick={onHide} />
1220
</div>
1321
);
1422

0 commit comments

Comments
 (0)