Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GH-2048: Display premium icons & subscription info & GH-2036: Unlock Plus features on GBE/Midnight for all Premium & Plus users #546

Merged
merged 35 commits into from May 20, 2020
+174 −102
Merged

GH-2048: Display premium icons & subscription info & GH-2036: Unlock Plus features on GBE/Midnight for all Premium & Plus users #546

Changes from 1 commit
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
901c4fa
Show premium subscribers a premium badge in simple/detailed views, he…
benstrumeyer May 7, 2020
f944c6c
Use api version 2.1.0 to get multiple subscriptions
benstrumeyer May 7, 2020
e035e69
Add hover effect for premium icon in menu
benstrumeyer May 7, 2020
659749b
Use css as single source of truth for icon colors
benstrumeyer May 7, 2020
2a83d42
Handle case where a user has multiple subscriptions and display Premi…
benstrumeyer May 7, 2020
de02e6c
Display subscription name
benstrumeyer May 8, 2020
53378f0
Remove duplicate locale string
benstrumeyer May 8, 2020
a10bd6c
Handle case where user only has a premium subscription and clicks the…
benstrumeyer May 8, 2020
7e552d2
Refactor code
benstrumeyer May 8, 2020
eb43832
Merge branch 'develop' into GH-2048
benstrumeyer May 8, 2020
9eb39bd
Refactor subscriber badge css classes, image paths and comments
benstrumeyer May 11, 2020
2d2aa90
Fix account#getUserSubscriptionData behavior
benstrumeyer May 11, 2020
9383ab6
Add subscriptionsPremium property to user object to check if a user h…
benstrumeyer May 11, 2020
f7b36a9
Refactor Header component to use subscriptionsPremium property
benstrumeyer May 11, 2020
f545e7b
Add newline
benstrumeyer May 11, 2020
2fcc862
Refactor svg template literal
benstrumeyer May 11, 2020
ef91547
Refactor account#getUserSubscriptionData to return an array of subscr…
benstrumeyer May 12, 2020
4fc3f53
Pass object that allows destructuring of subscriptionData
benstrumeyer May 12, 2020
2a9ffcb
Add return statement after callbacks
benstrumeyer May 12, 2020
f120d4d
Add guard to account#_setSubscriptionData to prevent overriding premi…
benstrumeyer May 12, 2020
7fe5a24
Give user subscriptionsPlus bool if they have either plus or premium …
benstrumeyer May 12, 2020
33c506a
Rename subscriptionsPlus and subscriptionsPremium to plusAccess and p…
benstrumeyer May 12, 2020
0586ff5
Set subscription property on user object with highest tier subscripti…
benstrumeyer May 12, 2020
a77797c
Refactor menu upsell icon to use user.subscriber instead of plusAcces…
benstrumeyer May 12, 2020
1816764
test
benstrumeyer May 12, 2020
0847e49
Refactor Header logo and menu icon to use subscription instead of pre…
benstrumeyer May 13, 2020
d25d313
Rename subscriber variable to subscription
benstrumeyer May 13, 2020
c9ad1de
Refactor subscriber badge to use plusAccess and premiumAccess on clic…
benstrumeyer May 13, 2020
6398be1
Check if user object exists before accessing subscription property
benstrumeyer May 13, 2020
eb337bc
Display UI elements basedd off user scope
benstrumeyer May 13, 2020
3d51fd0
Remove unused subscription property on user
benstrumeyer May 13, 2020
23e5eb7
Base menu icon off of plusAccess and premiumAccess
benstrumeyer May 13, 2020
49eb749
Refactor isPlus to hasPlusAccess, destructure some things, and save s…
benstrumeyer May 13, 2020
47f1cd5
Use panel#hasPlusAccess() directly
benstrumeyer May 13, 2020
ead0930
Fix menu icon link
benstrumeyer May 14, 2020
File filter
Filter file types
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next

Refactor subscriber badge css classes, image paths and comments

  • Loading branch information
@benstrumeyer
benstrumeyer committed May 11, 2020
commit 9eb39bd0ad11f7a4569f5f9db2c37ba49311fed0
17 app/panel/components/Header.jsx
View file
Open in desktop
@@ -182,7 +182,7 @@ class Header extends React.Component {
const accountLogolink = this.generateAccountLogo();
const badgeClasses = ClassNames('columns', 'shrink', {
'non-subscriber-badge': !(plusSubscriber || premiumSubscriber),
'gold-subscriber-badge': plusSubscriber || premiumSubscriber
'subscriber-badge': plusSubscriber || premiumSubscriber
});

const simpleTab = (
@@ -217,16 +217,11 @@ class Header extends React.Component {
</span>
);

let subscriberType;
if (premiumSubscriber) {
subscriberType = 'premium';
} else if (plusSubscriber) {
subscriberType = 'plus';
}
const plusUpgradeBannerOrSubscriberBadgeLogolink = (
<div className={badgeClasses} onClick={this.clickUpgradeBannerOrSubscriberBadgeIcon}>
{
((premiumSubscriber || plusSubscriber) && <ReactSVG src={`/app/images/panel/${subscriberType}-badge-icon-expanded-view.svg`} />)
((premiumSubscriber) && <ReactSVG src="/app/images/panel/premium-badge-icon-expanded-view.svg" />)
|| ((plusSubscriber) && <ReactSVG src="/app/images/panel/plus-badge-icon-expanded-view.svg" />)
|| <ReactSVG src="/app/images/panel/green-upgrade-banner-expanded-view.svg" />
}
</div>
@@ -242,6 +237,12 @@ class Header extends React.Component {
</div>
);

let subscriberType;
if (premiumSubscriber) {
subscriberType = 'premium';
} else if (plusSubscriber) {
subscriberType = 'plus';
}
const headerMenu = (
<HeaderMenu
loggedIn={loggedIn}
2 app/panel/components/HeaderMenu.jsx
View file
Open in desktop
@@ -234,7 +234,7 @@ class HeaderMenu extends React.Component {
</li>
<li className={optionClasses} onClick={this.clickSubscriber}>
<div>
{/* Upselling plus for users who are not logged in */}
{/* Upselling plus for all users who are not premium subscribers */}

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr May 11, 2020
Member

Much closer to what's going on, but let's tweak this a little more to something like "Show premium icon to premium users and plus icon to basic and plus users" so the comment doesn't leave the reader confused about whether we are mistakenly upselling plus again to people who are already plus subscribers.

This comment has been minimized.

Sign in to view
@benstrumeyer

benstrumeyer May 12, 2020
Author Contributor

Ah okay. Will make comments as clear and descriptive as possible from now on

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr May 12, 2020
Member

Awesome, thank you for your patience with my nittiness about this
{subscriberType !== 'premium' && (
<svg className={iconClasses} width="84" height="77" viewBox="0 0 84 77">
<g className="about-icon" fill="none">
2 app/scss/partials/_header.scss
View file
Open in desktop
@@ -74,7 +74,7 @@
@extend %pointer;
display: block;
}
.gold-subscriber-badge {
.subscriber-badge {
@extend .base-badge;
margin-top: 4px;
}
ProTip! Use n and p to navigate between commits in a pull request.