From 901c4fab12332997b4a6332b9ce950043f8c9c94 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 7 May 2020 11:42:02 -0400 Subject: [PATCH 01/47] Show premium subscribers a premium badge in simple/detailed views, header, and settings panel --- _locales/en/messages.json | 3 ++ ....svg => plus-badge-icon-expanded-view.svg} | 0 ...gold-plus-icon.svg => plus-badge-icon.svg} | 0 .../premium-badge-icon-expanded-view.svg | 1 + app/images/panel/premium-badge-icon.svg | 1 + app/panel/components/Header.jsx | 27 ++++++++----- app/panel/components/HeaderMenu.jsx | 40 ++++++++++++++----- app/panel/components/Summary.jsx | 18 +++++++-- app/scss/partials/_header.scss | 5 ++- 9 files changed, 70 insertions(+), 25 deletions(-) rename app/images/panel/{gold-plus-icon-expanded-view.svg => plus-badge-icon-expanded-view.svg} (100%) rename app/images/panel/{gold-plus-icon.svg => plus-badge-icon.svg} (100%) create mode 100644 app/images/panel/premium-badge-icon-expanded-view.svg create mode 100644 app/images/panel/premium-badge-icon.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 6b30646c9..6884e60c0 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2207,6 +2207,9 @@ "ghostery_plus": { "message": "Ghostery Plus" }, + "ghostery_premium": { + "message": "Ghostery Premium" + }, "dollar_sign": { "message": "$" }, diff --git a/app/images/panel/gold-plus-icon-expanded-view.svg b/app/images/panel/plus-badge-icon-expanded-view.svg similarity index 100% rename from app/images/panel/gold-plus-icon-expanded-view.svg rename to app/images/panel/plus-badge-icon-expanded-view.svg diff --git a/app/images/panel/gold-plus-icon.svg b/app/images/panel/plus-badge-icon.svg similarity index 100% rename from app/images/panel/gold-plus-icon.svg rename to app/images/panel/plus-badge-icon.svg diff --git a/app/images/panel/premium-badge-icon-expanded-view.svg b/app/images/panel/premium-badge-icon-expanded-view.svg new file mode 100644 index 000000000..1f6390dc0 --- /dev/null +++ b/app/images/panel/premium-badge-icon-expanded-view.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/images/panel/premium-badge-icon.svg b/app/images/panel/premium-badge-icon.svg new file mode 100644 index 000000000..292b7a5e1 --- /dev/null +++ b/app/images/panel/premium-badge-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 5f31d701a..cf03476e8 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -149,8 +149,8 @@ class Header extends React.Component { // TODO check whether this is the message we want to be sending now sendMessage('ping', 'plus_panel_from_badge'); const { user } = this.props; - const subscriber = user && user.subscriptionsPlus; - this.props.history.push(subscriber ? '/subscription/info' : `/subscribe/${!!user}`); + const plusSubscriber = user && user.subscriptionsPlus; + this.props.history.push(plusSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); } /** @@ -176,11 +176,12 @@ class Header extends React.Component { const tabDetailedClassNames = ClassNames('header-tab', { active: is_expert, }); - const subscriber = user && user.subscriptionsPlus; + const premiumSubscriber = user && user.scopes && user.scopes.includes('subscriptions:premium'); + const plusSubscriber = user && user.subscriptionsPlus; const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { - 'non-subscriber-badge': !subscriber, - 'gold-subscriber-badge': subscriber + 'non-subscriber-badge': !(plusSubscriber || premiumSubscriber), + 'gold-subscriber-badge': plusSubscriber || premiumSubscriber }); const simpleTab = ( @@ -215,11 +216,17 @@ class Header extends React.Component { ); - const plusUpgradeBannerOrSubscriberBadgeLogolink = ( + let subscriberType; + if (premiumSubscriber) { + subscriberType = 'premium'; + } else if (plusSubscriber) { + subscriberType = 'plus'; + } + const upgradeBannerOrSubscriberBadgeLogolink = (
{ - (subscriber && ) || - + ((premiumSubscriber || plusSubscriber) && ) + || }
); @@ -237,7 +244,7 @@ class Header extends React.Component { const headerMenu = ( {accountLogolink} - {((is_expert && is_expanded) || !showTabs) && plusUpgradeBannerOrSubscriberBadgeLogolink } + {((is_expert && is_expanded) || !showTabs) && upgradeBannerOrSubscriberBadgeLogolink } {headerMenuKebab} { this.state.dropdownOpen && headerMenu } diff --git a/app/panel/components/HeaderMenu.jsx b/app/panel/components/HeaderMenu.jsx index 6467aa295..0f4ac40fc 100644 --- a/app/panel/components/HeaderMenu.jsx +++ b/app/panel/components/HeaderMenu.jsx @@ -154,7 +154,7 @@ class HeaderMenu extends React.Component { clickSubscriber = () => { sendMessage('ping', 'plus_panel_from_menu'); this.props.toggleDropdown(); - this.props.history.push(this.props.subscriber ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`); + this.props.history.push(this.props.subscriberType ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`); } /** @@ -162,9 +162,13 @@ class HeaderMenu extends React.Component { * @return {ReactComponent} ReactComponent instance */ render() { - const { loggedIn, email } = this.props; - const optionClasses = ClassNames({ 'menu-option': this.props.subscriber, 'menu-option-non-subscriber': !this.props.subscriber }); - const iconClasses = ClassNames('menu-icon-container', { subscriber: this.props.subscriber }, { 'non-subscriber': !this.props.subscriber }); + const { loggedIn, email, subscriberType } = this.props; + const optionClasses = ClassNames({ 'menu-option': this.props.subscriberType, 'menu-option-non-subscriber': !this.props.subscriberType }); + const iconClasses = ClassNames('menu-icon-container', { + premiumSubscriber: subscriberType === 'premium', + plusSubscriber: subscriberType === 'plus', + 'non-subscriber': !subscriberType + }); return (
@@ -230,13 +234,27 @@ class HeaderMenu extends React.Component {
  • - - - - - - - { t('ghostery_plus') } + {/* Upselling plus for users who are not logged in */} + {subscriberType !== 'premium' && ( + + + + + + + )} + {subscriberType === 'premium' && ( + + + + + + + + + + )} + {subscriberType === 'premium' ? t('ghostery_premium') : t('ghostery_plus')}
    • diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 4b9463999..9b46c0c5f 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -312,6 +312,11 @@ class Summary extends React.Component { return user && user.subscriptionsPlus; } + _isPremiumSubscriber() { + const { user } = this.props; + return user && user.scopes && user.scopes.includes('subscriptions:premium'); + } + _pageHost() { return this.props.pageHost || 'page_host'; } @@ -748,23 +753,30 @@ class Summary extends React.Component { _renderPlusUpgradeBannerOrSubscriberIcon() { const { is_expert, current_theme } = this.props; + const isPremiumSubscriber = this._isPremiumSubscriber(); const isPlusSubscriber = this._isPlusSubscriber(); const upgradeBannerClassNames = ClassNames('UpgradeBanner', { 'UpgradeBanner--normal': !is_expert, 'UpgradeBanner--small': is_expert, }); + let subscriberType; + if (isPremiumSubscriber) { + subscriberType = 'premium'; + } else if (isPlusSubscriber) { + subscriberType = 'plus'; + } return (
    - {isPlusSubscriber && ( + {(isPremiumSubscriber || isPlusSubscriber) && (
    - +
    )} - {!isPlusSubscriber && ( + {(!isPremiumSubscriber && !isPlusSubscriber) && (
    {t('subscription_upgrade_to')} diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index 2c29a8281..ead8f6eba 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -148,12 +148,15 @@ .menu-option { @extend .menu-option-base; - .subscriber { + .plusSubscriber { width: 18px; height: 16px; path {fill: $light-gray;} path.text {fill: #4a4a4a;} } + .premiumSubscriber { + margin-left: -4px; + } &:hover { span {color: $ghosty-blue} .menu-icon {fill: $ghosty-blue; stroke: none;} From f944c6ca558bc2f11f92d997836c51d64296485f Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 7 May 2020 11:42:49 -0400 Subject: [PATCH 02/47] Use api version 2.1.0 to get multiple subscriptions --- src/utils/api.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/utils/api.js b/src/utils/api.js index f2e3865f5..64671a0fe 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -154,17 +154,17 @@ class Api { get = (type, id, include = '') => { if (!id) { return Promise.reject(new Error('id is missing')); } - return this._sendAuthenticatedRequest('GET', `/api/v2/${type}/${id}?${include ? `include=${include}` : ''}`); + return this._sendAuthenticatedRequest('GET', `/api/v2.1.0/${type}/${id}?${include ? `include=${include}` : ''}`); } - save = (type, data) => this._sendAuthenticatedRequest('POST', `/api/v2/${type}/`, data) + save = (type, data) => this._sendAuthenticatedRequest('POST', `/api/v2.1.0/${type}/`, data) update = (type, data) => { // TODO check for data.id and fail - this._sendAuthenticatedRequest('PATCH', `/api/v2/${type}/${data.id}`, { data }); + this._sendAuthenticatedRequest('PATCH', `/api/v2.1.0/${type}/${data.id}`, { data }); } - remove = (type, id) => this._sendAuthenticatedRequest('DELETE', `/api/v2/${type}/${id}`) + remove = (type, id) => this._sendAuthenticatedRequest('DELETE', `/api/v2.1.0/${type}/${id}`) } export default Api; From e035e693dd2ce5b8e0343c04b8b0dff2ddc0ae6f Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 7 May 2020 11:55:15 -0400 Subject: [PATCH 03/47] Add hover effect for premium icon in menu --- app/scss/partials/_header.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index ead8f6eba..ad8cdcc96 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -168,6 +168,9 @@ path {stroke: $ghosty-blue;} path.text {fill: $ghosty-blue;} } + .premiumSubscriber > g > g { + fill: $ghosty-blue; + } } span { color: #ffffff; From 659749bfdd0afc4e38e782714a7ad93361adab88 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 7 May 2020 11:59:10 -0400 Subject: [PATCH 04/47] Use css as single source of truth for icon colors --- app/panel/components/HeaderMenu.jsx | 2 +- app/scss/partials/_header.scss | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/app/panel/components/HeaderMenu.jsx b/app/panel/components/HeaderMenu.jsx index 0f4ac40fc..02d0ef313 100644 --- a/app/panel/components/HeaderMenu.jsx +++ b/app/panel/components/HeaderMenu.jsx @@ -246,7 +246,7 @@ class HeaderMenu extends React.Component { {subscriberType === 'premium' && ( - + diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index ad8cdcc96..778d30fc6 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -156,6 +156,9 @@ } .premiumSubscriber { margin-left: -4px; + g > g { + fill: #DEDEDE; + } } &:hover { span {color: $ghosty-blue} From 2a83d4212c93e0d6722847ae43234f3c60f8d142 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 7 May 2020 19:44:32 -0400 Subject: [PATCH 05/47] Handle case where a user has multiple subscriptions and display Premium > Plus --- src/background.js | 14 +------------- src/classes/Account.js | 20 ++++++++++++-------- 2 files changed, 13 insertions(+), 21 deletions(-) diff --git a/src/background.js b/src/background.js index e4fbc0e53..f5e9e21ca 100644 --- a/src/background.js +++ b/src/background.js @@ -824,19 +824,7 @@ function onMessageHandler(request, sender, callback) { if (name === 'account.getUserSubscriptionData') { account.getUserSubscriptionData() .then((customer) => { - // TODO temporary fix to handle multiple subscriptions - let sub = customer.subscriptions; - if (!Array.isArray(sub)) { - sub = [sub]; - } - const subscriptionData = sub.reduce((acc, curr) => { - let a = acc; - if (curr.productName.includes('Plus')) { - a = curr; - } - return a; - }, {}); - callback({ subscriptionData }); + callback({ subscriptionData: customer }); }) .catch((err) => { log('Error getting user subscription data:', err); diff --git a/src/classes/Account.js b/src/classes/Account.js index 4dfd48a30..73790f941 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -168,14 +168,18 @@ class Account { if (!Array.isArray(sub)) { sub = [sub]; } - const subPlus = sub.reduce((acc, curr) => { - let a = acc; - if (curr.productName.includes('Plus')) { - a = curr; - } - return a; - }, {}); - this._setSubscriptionData(subPlus); + // Display premium info if user has both premium and plus subscriptions + const premiumSubscription = sub.find(subscription => subscription.productName.includes('Ghostery Premium')); + if (premiumSubscription) { + this._setSubscriptionData(premiumSubscription); + return premiumSubscription; + } + + const plusSubscription = sub.find(subscription => subscription.productName.includes('Ghostery Plus')); + if (plusSubscription) { + this._setSubscriptionData(plusSubscription); + return plusSubscription; + } return customer; }) ) From de02e6c91bb68757dda84cad96ce86c5882d423e Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 7 May 2020 20:09:04 -0400 Subject: [PATCH 06/47] Display subscription name --- app/panel/components/Subscription.jsx | 3 ++- app/panel/components/Subscription/SubscriptionInfo.jsx | 9 +++++++-- src/classes/Account.js | 3 +++ 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/app/panel/components/Subscription.jsx b/app/panel/components/Subscription.jsx index d39afad65..e6368ca36 100644 --- a/app/panel/components/Subscription.jsx +++ b/app/panel/components/Subscription.jsx @@ -54,7 +54,7 @@ class Subscription extends React.Component { const sd = this.props.subscriptionData; if (sd) { const { - planAmount, planInterval, planCurrency, currentPeriodEnd, cancelAtPeriodEnd, status + productName, planAmount, planInterval, planCurrency, currentPeriodEnd, cancelAtPeriodEnd, status } = sd; const plan_ends = cancelAtPeriodEnd ? moment.duration(moment.unix(currentPeriodEnd).diff(moment(new Date()))).days() : ''; let planAmountAdjusted = planAmount; @@ -66,6 +66,7 @@ class Subscription extends React.Component { currency: planCurrency }); return { + productName, plan_amount: amountWithCurrency, plan_interval: planInterval, active: (status === 'active'), diff --git a/app/panel/components/Subscription/SubscriptionInfo.jsx b/app/panel/components/Subscription/SubscriptionInfo.jsx index 8d115b17b..b5c2de57e 100644 --- a/app/panel/components/Subscription/SubscriptionInfo.jsx +++ b/app/panel/components/Subscription/SubscriptionInfo.jsx @@ -38,14 +38,19 @@ function _handleManageClick() { */ const SubscriptionInfo = (props) => { const { - active, plan_amount, plan_interval, charge_date, plan_ends, loading + productName, active, plan_amount, plan_interval, charge_date, plan_ends, loading } = props.subscriptionData; const subscriptionExpiration = (plan_ends > 1) ? t('subscription_days_left', plan_ends.toString()) : t('subscription_one_day_left'); return (
    -

    { t('ghostery_plus') }

    + {productName === 'Ghostery Premium' && ( +

    { t('ghostery_premium') }

    + )} + {productName === 'Ghostery Plus' && ( +

    { t('ghostery_plus') }

    + )} {loading ? (
    ) : ( diff --git a/src/classes/Account.js b/src/classes/Account.js index 73790f941..57ab030c6 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -163,11 +163,13 @@ class Account { .then(userID => api.get('stripe/customers', userID, 'cards,subscriptions')) .then((res) => { const customer = build(normalize(res), 'customers', res.data.id); + // TODO temporary fix to handle multiple subscriptions let sub = customer.subscriptions; if (!Array.isArray(sub)) { sub = [sub]; } + // Display premium info if user has both premium and plus subscriptions const premiumSubscription = sub.find(subscription => subscription.productName.includes('Ghostery Premium')); if (premiumSubscription) { @@ -180,6 +182,7 @@ class Account { this._setSubscriptionData(plusSubscription); return plusSubscription; } + return customer; }) ) From 53378f0ecdbb9a5ad71d5e9371c22e2f3cbb2455 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 7 May 2020 20:18:59 -0400 Subject: [PATCH 07/47] Remove duplicate locale string --- _locales/en/messages.json | 3 --- app/panel/components/HeaderMenu.jsx | 2 +- app/panel/components/Subscription/SubscriptionInfo.jsx | 2 +- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 6884e60c0..6b30646c9 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2207,9 +2207,6 @@ "ghostery_plus": { "message": "Ghostery Plus" }, - "ghostery_premium": { - "message": "Ghostery Premium" - }, "dollar_sign": { "message": "$" }, diff --git a/app/panel/components/HeaderMenu.jsx b/app/panel/components/HeaderMenu.jsx index 02d0ef313..1a7b5891e 100644 --- a/app/panel/components/HeaderMenu.jsx +++ b/app/panel/components/HeaderMenu.jsx @@ -254,7 +254,7 @@ class HeaderMenu extends React.Component { )} - {subscriberType === 'premium' ? t('ghostery_premium') : t('ghostery_plus')} + {subscriberType === 'premium' ? t('panel_detail_premium_title') : t('ghostery_plus')}
    diff --git a/app/panel/components/Subscription/SubscriptionInfo.jsx b/app/panel/components/Subscription/SubscriptionInfo.jsx index b5c2de57e..704895df8 100644 --- a/app/panel/components/Subscription/SubscriptionInfo.jsx +++ b/app/panel/components/Subscription/SubscriptionInfo.jsx @@ -46,7 +46,7 @@ const SubscriptionInfo = (props) => {
    {productName === 'Ghostery Premium' && ( -

    { t('ghostery_premium') }

    +

    { t('panel_detail_premium_title') }

    )} {productName === 'Ghostery Plus' && (

    { t('ghostery_plus') }

    From a10bd6c2a46a792b02740b0371b1b07c27161b09 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 7 May 2020 20:26:07 -0400 Subject: [PATCH 08/47] Handle case where user only has a premium subscription and clicks the subscriber badge icon --- app/panel/components/Header.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index cf03476e8..1ba455a3b 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -145,12 +145,13 @@ class Header extends React.Component { return this.props.is_expert ? '/detail/blocking' : '/'; } - clickUpgradeBannerOrGoldPlusIcon = () => { + clickUpgradeBannerOrSubscriberBadgeIcon = () => { // TODO check whether this is the message we want to be sending now sendMessage('ping', 'plus_panel_from_badge'); const { user } = this.props; const plusSubscriber = user && user.subscriptionsPlus; - this.props.history.push(plusSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); + const premiumSubscriber = user && user.scopes && user.scopes.includes('subscriptions:premium'); + this.props.history.push(plusSubscriber || premiumSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); } /** @@ -223,7 +224,7 @@ class Header extends React.Component { subscriberType = 'plus'; } const upgradeBannerOrSubscriberBadgeLogolink = ( -
    +
    { ((premiumSubscriber || plusSubscriber) && ) || From 7e552d20e637a9c53c9c7b815916883228733e2c Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 7 May 2020 20:40:59 -0400 Subject: [PATCH 09/47] Refactor code --- app/panel/components/Header.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 1ba455a3b..f07ecf536 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -177,8 +177,8 @@ class Header extends React.Component { const tabDetailedClassNames = ClassNames('header-tab', { active: is_expert, }); - const premiumSubscriber = user && user.scopes && user.scopes.includes('subscriptions:premium'); const plusSubscriber = user && user.subscriptionsPlus; + const premiumSubscriber = user && user.scopes && user.scopes.includes('subscriptions:premium'); const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { 'non-subscriber-badge': !(plusSubscriber || premiumSubscriber), @@ -223,7 +223,7 @@ class Header extends React.Component { } else if (plusSubscriber) { subscriberType = 'plus'; } - const upgradeBannerOrSubscriberBadgeLogolink = ( + const plusUpgradeBannerOrSubscriberBadgeLogolink = (
    { ((premiumSubscriber || plusSubscriber) && ) @@ -267,7 +267,7 @@ class Header extends React.Component {
    {accountLogolink}
    - {((is_expert && is_expanded) || !showTabs) && upgradeBannerOrSubscriberBadgeLogolink } + {((is_expert && is_expanded) || !showTabs) && plusUpgradeBannerOrSubscriberBadgeLogolink } {headerMenuKebab}
    { this.state.dropdownOpen && headerMenu } From 9eb39bd0ad11f7a4569f5f9db2c37ba49311fed0 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 11 May 2020 09:06:49 -0400 Subject: [PATCH 10/47] Refactor subscriber badge css classes, image paths and comments --- app/panel/components/Header.jsx | 17 +++++++++-------- app/panel/components/HeaderMenu.jsx | 2 +- app/scss/partials/_header.scss | 2 +- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index f07ecf536..aaf4902b0 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -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 { ); - let subscriberType; - if (premiumSubscriber) { - subscriberType = 'premium'; - } else if (plusSubscriber) { - subscriberType = 'plus'; - } const plusUpgradeBannerOrSubscriberBadgeLogolink = (
    { - ((premiumSubscriber || plusSubscriber) && ) + ((premiumSubscriber) && ) + || ((plusSubscriber) && ) || }
    @@ -242,6 +237,12 @@ class Header extends React.Component {
    ); + let subscriberType; + if (premiumSubscriber) { + subscriberType = 'premium'; + } else if (plusSubscriber) { + subscriberType = 'plus'; + } const headerMenu = (
  • - {/* Upselling plus for users who are not logged in */} + {/* Upselling plus for all users who are not premium subscribers */} {subscriberType !== 'premium' && ( diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index 778d30fc6..4bd996894 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -74,7 +74,7 @@ @extend %pointer; display: block; } - .gold-subscriber-badge { + .subscriber-badge { @extend .base-badge; margin-top: 4px; } From 2d2aa909a366d7d10f786cbf081bf1503ac9effe Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 11 May 2020 09:50:25 -0400 Subject: [PATCH 11/47] Fix account#getUserSubscriptionData behavior --- src/background.js | 14 +++++++++++++- src/classes/Account.js | 3 --- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/background.js b/src/background.js index f5e9e21ca..388cc3dd4 100644 --- a/src/background.js +++ b/src/background.js @@ -824,7 +824,19 @@ function onMessageHandler(request, sender, callback) { if (name === 'account.getUserSubscriptionData') { account.getUserSubscriptionData() .then((customer) => { - callback({ subscriptionData: customer }); + // TODO temporary fix to handle multiple subscriptions + let sub = customer.subscriptions; + if (!Array.isArray(sub)) { + sub = [sub]; + } + + let subscriptionData = sub.find(subscription => subscription.productName.includes('Ghostery Premium')); + if (subscriptionData) { + callback({ subscriptionData }); + } + + subscriptionData = sub.find(subscription => subscription.productName.includes('Ghostery Plus')); + callback({ subscriptionData }); }) .catch((err) => { log('Error getting user subscription data:', err); diff --git a/src/classes/Account.js b/src/classes/Account.js index 57ab030c6..930e3fc22 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -174,15 +174,12 @@ class Account { const premiumSubscription = sub.find(subscription => subscription.productName.includes('Ghostery Premium')); if (premiumSubscription) { this._setSubscriptionData(premiumSubscription); - return premiumSubscription; } const plusSubscription = sub.find(subscription => subscription.productName.includes('Ghostery Plus')); if (plusSubscription) { this._setSubscriptionData(plusSubscription); - return plusSubscription; } - return customer; }) ) From 9383ab6e411b1d40ea516d5cb72e5c280f64e1a2 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 11 May 2020 11:24:01 -0400 Subject: [PATCH 12/47] Add subscriptionsPremium property to user object to check if a user has a premium subscription --- app/hub/Views/HomeView/HomeViewContainer.jsx | 14 ++------------ app/panel/components/Header.jsx | 4 ++-- app/panel/components/Panel.jsx | 2 +- app/panel/components/Summary.jsx | 2 +- src/background.js | 1 + src/classes/PanelData.js | 1 + 6 files changed, 8 insertions(+), 16 deletions(-) diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx index c98e55b78..7d230c3dd 100644 --- a/app/hub/Views/HomeView/HomeViewContainer.jsx +++ b/app/hub/Views/HomeView/HomeViewContainer.jsx @@ -103,21 +103,11 @@ class HomeViewContainer extends Component { */ _handleTryMidnightClick = () => { this._handlePremiumPromoModalClick('premium'); } - /** - * @returns {bool} - * @private - * Is the user a Premium subscriber? - */ - _premiumSubscriber = () => { - const { loggedIn, user } = this.props; - - return loggedIn && (user && user.scopes && user.scopes.includes('subscriptions:premium')); - } - _render() { const { justInstalled } = this.state; const { home, user } = this.props; const isPlus = user && user.subscriptionsPlus || false; + const isPremium = user && user.subscriptionsPremium || false; const { premium_promo_modal_shown, setup_complete, @@ -134,7 +124,7 @@ class HomeViewContainer extends Component { isPlus, }; - const showPromoModal = !premium_promo_modal_shown && !this._premiumSubscriber(); + const showPromoModal = !premium_promo_modal_shown && !isPremium; return (
    diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index aaf4902b0..3321fa75a 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -150,7 +150,7 @@ class Header extends React.Component { sendMessage('ping', 'plus_panel_from_badge'); const { user } = this.props; const plusSubscriber = user && user.subscriptionsPlus; - const premiumSubscriber = user && user.scopes && user.scopes.includes('subscriptions:premium'); + const premiumSubscriber = user && user.subscriptionsPremium; this.props.history.push(plusSubscriber || premiumSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); } @@ -178,7 +178,7 @@ class Header extends React.Component { active: is_expert, }); const plusSubscriber = user && user.subscriptionsPlus; - const premiumSubscriber = user && user.scopes && user.scopes.includes('subscriptions:premium'); + const premiumSubscriber = user && user.subscriptionsPremium; const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { 'non-subscriber-badge': !(plusSubscriber || premiumSubscriber), diff --git a/app/panel/components/Panel.jsx b/app/panel/components/Panel.jsx index 77055f519..83fe74849 100644 --- a/app/panel/components/Panel.jsx +++ b/app/panel/components/Panel.jsx @@ -217,7 +217,7 @@ class Panel extends React.Component { _premiumSubscriber = () => { const { loggedIn, user } = this.props; - return loggedIn && (user && user.scopes && user.scopes.includes('subscriptions:premium')); + return loggedIn && (user && user.subscriptionsPremium); } /** diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 9b46c0c5f..5720f83cf 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -314,7 +314,7 @@ class Summary extends React.Component { _isPremiumSubscriber() { const { user } = this.props; - return user && user.scopes && user.scopes.includes('subscriptions:premium'); + return user && user.subscriptionsPremium; } _pageHost() { diff --git a/src/background.js b/src/background.js index 388cc3dd4..6596ab53c 100644 --- a/src/background.js +++ b/src/background.js @@ -881,6 +881,7 @@ function onMessageHandler(request, sender, callback) { .then((user) => { if (user) { user.subscriptionsPlus = account.hasScopesUnverified(['subscriptions:plus']); + user.subscriptionsPremium = account.hasScopesUnverified(['subscriptions:premium']); } callback({ user }); }) diff --git a/src/classes/PanelData.js b/src/classes/PanelData.js index 281433511..ce64f454c 100644 --- a/src/classes/PanelData.js +++ b/src/classes/PanelData.js @@ -265,6 +265,7 @@ class PanelData { const currentAccount = conf.account; if (currentAccount && currentAccount.user) { currentAccount.user.subscriptionsPlus = account.hasScopesUnverified(['subscriptions:plus']); + currentAccount.user.subscriptionsPremium = account.hasScopesUnverified(['subscriptions:premium']); } return currentAccount; } From f7b36a9896645b4d1e702a5de35b9ed4c7d6a7d2 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 11 May 2020 12:03:10 -0400 Subject: [PATCH 13/47] Refactor Header component to use subscriptionsPremium property --- app/panel/components/Header.jsx | 9 ++------- app/panel/components/HeaderMenu.jsx | 27 ++++++++++++++++++--------- app/scss/partials/_header.scss | 6 +++--- 3 files changed, 23 insertions(+), 19 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 3321fa75a..f7b84aa58 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -237,16 +237,11 @@ class Header extends React.Component {
    ); - let subscriberType; - if (premiumSubscriber) { - subscriberType = 'premium'; - } else if (plusSubscriber) { - subscriberType = 'plus'; - } const headerMenu = ( { + const { subscriptionsPlus, subscriptionsPremium } = this.props; sendMessage('ping', 'plus_panel_from_menu'); this.props.toggleDropdown(); - this.props.history.push(this.props.subscriberType ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`); + this.props.history.push(subscriptionsPremium || subscriptionsPlus ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`); } /** @@ -162,12 +163,20 @@ class HeaderMenu extends React.Component { * @return {ReactComponent} ReactComponent instance */ render() { - const { loggedIn, email, subscriberType } = this.props; - const optionClasses = ClassNames({ 'menu-option': this.props.subscriberType, 'menu-option-non-subscriber': !this.props.subscriberType }); + const { + loggedIn, + email, + subscriptionsPremium, + subscriptionsPlus + } = this.props; + const optionClasses = ClassNames({ + 'menu-option': subscriptionsPremium || subscriptionsPlus, + 'menu-option-non-subscriber': !subscriptionsPremium || !subscriptionsPlus + }); const iconClasses = ClassNames('menu-icon-container', { - premiumSubscriber: subscriberType === 'premium', - plusSubscriber: subscriberType === 'plus', - 'non-subscriber': !subscriberType + subscriptionsPremium, + subscriptionsPlus: subscriptionsPlus && !subscriptionsPremium, + 'non-subscriber': !subscriptionsPremium && !subscriptionsPlus }); return ( @@ -235,7 +244,7 @@ class HeaderMenu extends React.Component {
  • {/* Upselling plus for all users who are not premium subscribers */} - {subscriberType !== 'premium' && ( + {!subscriptionsPremium && ( @@ -243,7 +252,7 @@ class HeaderMenu extends React.Component { )} - {subscriberType === 'premium' && ( + {subscriptionsPremium && ( @@ -254,7 +263,7 @@ class HeaderMenu extends React.Component { )} - {subscriberType === 'premium' ? t('panel_detail_premium_title') : t('ghostery_plus')} + {subscriptionsPremium ? t('panel_detail_premium_title') : t('ghostery_plus')}
    • diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index 4bd996894..2eaaad57b 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -148,13 +148,13 @@ .menu-option { @extend .menu-option-base; - .plusSubscriber { + .subscriptionsPlus { width: 18px; height: 16px; path {fill: $light-gray;} path.text {fill: #4a4a4a;} } - .premiumSubscriber { + .subscriptionsPremium { margin-left: -4px; g > g { fill: #DEDEDE; @@ -171,7 +171,7 @@ path {stroke: $ghosty-blue;} path.text {fill: $ghosty-blue;} } - .premiumSubscriber > g > g { + .subscriptionsPremium > g > g { fill: $ghosty-blue; } } From f545e7bc07d5957452501897cc633748561e12f7 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 11 May 2020 12:09:15 -0400 Subject: [PATCH 14/47] Add newline --- app/panel/components/Summary.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 5720f83cf..a5cefea1c 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -314,6 +314,7 @@ class Summary extends React.Component { _isPremiumSubscriber() { const { user } = this.props; + return user && user.subscriptionsPremium; } From 2fcc8627bc7cce5fbddc1ae8696220518ef638f0 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 11 May 2020 12:18:37 -0400 Subject: [PATCH 15/47] Refactor svg template literal --- app/panel/components/Summary.jsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index a5cefea1c..0d7313164 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -760,19 +760,21 @@ class Summary extends React.Component { 'UpgradeBanner--normal': !is_expert, 'UpgradeBanner--small': is_expert, }); - let subscriberType; - if (isPremiumSubscriber) { - subscriberType = 'premium'; - } else if (isPlusSubscriber) { - subscriberType = 'plus'; - } return (
    - {(isPremiumSubscriber || isPlusSubscriber) && ( + {(isPremiumSubscriber) && ( +
    +
    + +
    +
    + )} + + {(!isPremiumSubscriber && isPlusSubscriber) && (
    - +
    )} From ef91547d7bb8c1d362a365750488856f92d8c47a Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 11 May 2020 22:56:32 -0400 Subject: [PATCH 16/47] Refactor account#getUserSubscriptionData to return an array of subscriptions, and the background handler to return the highest tier subscription --- app/panel/components/HeaderMenu.jsx | 2 +- src/background.js | 19 +++++++------------ src/classes/Account.js | 10 ++++++++-- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/app/panel/components/HeaderMenu.jsx b/app/panel/components/HeaderMenu.jsx index e5f4fce96..e030d59af 100644 --- a/app/panel/components/HeaderMenu.jsx +++ b/app/panel/components/HeaderMenu.jsx @@ -243,7 +243,7 @@ class HeaderMenu extends React.Component {
  • - {/* Upselling plus for all users who are not premium subscribers */} + {/* Show premium icon to premium users and plus icon to basic and plus users */} {!subscriptionsPremium && ( diff --git a/src/background.js b/src/background.js index 6596ab53c..dbf5b7445 100644 --- a/src/background.js +++ b/src/background.js @@ -823,20 +823,15 @@ function onMessageHandler(request, sender, callback) { } if (name === 'account.getUserSubscriptionData') { account.getUserSubscriptionData() - .then((customer) => { - // TODO temporary fix to handle multiple subscriptions - let sub = customer.subscriptions; - if (!Array.isArray(sub)) { - sub = [sub]; - } + .then((subscriptions) => { + // Return highest tier subscription from array + const premiumSubscription = subscriptions.find(subscription => subscription.productName.includes('Ghostery Premium')); + if (premiumSubscription) callback({ premiumSubscription }); - let subscriptionData = sub.find(subscription => subscription.productName.includes('Ghostery Premium')); - if (subscriptionData) { - callback({ subscriptionData }); - } + const plusSubscription = subscriptions.find(subscription => subscription.productName.includes('Ghostery Plus')); + if (plusSubscription) callback({ plusSubscription }); - subscriptionData = sub.find(subscription => subscription.productName.includes('Ghostery Plus')); - callback({ subscriptionData }); + callback({}); }) .catch((err) => { log('Error getting user subscription data:', err); diff --git a/src/classes/Account.js b/src/classes/Account.js index 930e3fc22..357fb00ab 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -158,6 +158,9 @@ class Account { }) ) + /** + * @return {array} All subscriptions the user has, empty if none + */ getUserSubscriptionData = () => ( this._getUserID() .then(userID => api.get('stripe/customers', userID, 'cards,subscriptions')) @@ -170,17 +173,20 @@ class Account { sub = [sub]; } - // Display premium info if user has both premium and plus subscriptions + const subscriptions = []; + const premiumSubscription = sub.find(subscription => subscription.productName.includes('Ghostery Premium')); if (premiumSubscription) { this._setSubscriptionData(premiumSubscription); + subscriptions.push(premiumSubscription); } const plusSubscription = sub.find(subscription => subscription.productName.includes('Ghostery Plus')); if (plusSubscription) { + subscriptions.push(plusSubscription); this._setSubscriptionData(plusSubscription); } - return customer; + return subscriptions; }) ) From 4fc3f53a392d9d3e049c20b2050468c66e34842f Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 12 May 2020 09:38:32 -0400 Subject: [PATCH 17/47] Pass object that allows destructuring of subscriptionData --- src/background.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/background.js b/src/background.js index dbf5b7445..b77846ab7 100644 --- a/src/background.js +++ b/src/background.js @@ -826,10 +826,10 @@ function onMessageHandler(request, sender, callback) { .then((subscriptions) => { // Return highest tier subscription from array const premiumSubscription = subscriptions.find(subscription => subscription.productName.includes('Ghostery Premium')); - if (premiumSubscription) callback({ premiumSubscription }); + if (premiumSubscription) callback({ subscriptionData: premiumSubscription }); const plusSubscription = subscriptions.find(subscription => subscription.productName.includes('Ghostery Plus')); - if (plusSubscription) callback({ plusSubscription }); + if (plusSubscription) callback({ subscriptionData: plusSubscription }); callback({}); }) From 2a9ffcbba5a30310a0f31a53ea558bd6eabaf006 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 12 May 2020 12:04:36 -0400 Subject: [PATCH 18/47] Add return statement after callbacks --- src/background.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/background.js b/src/background.js index b77846ab7..8747acaa7 100644 --- a/src/background.js +++ b/src/background.js @@ -826,10 +826,16 @@ function onMessageHandler(request, sender, callback) { .then((subscriptions) => { // Return highest tier subscription from array const premiumSubscription = subscriptions.find(subscription => subscription.productName.includes('Ghostery Premium')); - if (premiumSubscription) callback({ subscriptionData: premiumSubscription }); + if (premiumSubscription) { + callback({ subscriptionData: premiumSubscription }); + return; + } const plusSubscription = subscriptions.find(subscription => subscription.productName.includes('Ghostery Plus')); - if (plusSubscription) callback({ subscriptionData: plusSubscription }); + if (plusSubscription) { + callback({ subscriptionData: plusSubscription }); + return; + } callback({}); }) From f120d4d1ab35bdfab5816826215a459278638fa3 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 12 May 2020 12:10:33 -0400 Subject: [PATCH 19/47] Add guard to account#_setSubscriptionData to prevent overriding premium subscription --- src/classes/Account.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/classes/Account.js b/src/classes/Account.js index 357fb00ab..d3ffda0a3 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -184,7 +184,9 @@ class Account { const plusSubscription = sub.find(subscription => subscription.productName.includes('Ghostery Plus')); if (plusSubscription) { subscriptions.push(plusSubscription); - this._setSubscriptionData(plusSubscription); + if (!premiumSubscription) { + this._setSubscriptionData(plusSubscription); + } } return subscriptions; }) From 7fe5a2408e43d7f00fd3e72c64094d3758f47442 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 12 May 2020 13:41:02 -0400 Subject: [PATCH 20/47] Give user subscriptionsPlus bool if they have either plus or premium scope --- src/background.js | 3 ++- src/classes/PanelData.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/background.js b/src/background.js index 8747acaa7..366c2480f 100644 --- a/src/background.js +++ b/src/background.js @@ -881,7 +881,8 @@ function onMessageHandler(request, sender, callback) { account.getUser(message) .then((user) => { if (user) { - user.subscriptionsPlus = account.hasScopesUnverified(['subscriptions:plus']); + user.subscriptionsPlus = account.hasScopesUnverified(['subscriptions:plus']) + || account.hasScopesUnverified(['subscriptions:premium']); user.subscriptionsPremium = account.hasScopesUnverified(['subscriptions:premium']); } callback({ user }); diff --git a/src/classes/PanelData.js b/src/classes/PanelData.js index ce64f454c..c671bbc4b 100644 --- a/src/classes/PanelData.js +++ b/src/classes/PanelData.js @@ -264,7 +264,8 @@ class PanelData { _getCurrentAccount() { const currentAccount = conf.account; if (currentAccount && currentAccount.user) { - currentAccount.user.subscriptionsPlus = account.hasScopesUnverified(['subscriptions:plus']); + currentAccount.user.subscriptionsPlus = account.hasScopesUnverified(['subscriptions:plus']) + || account.hasScopesUnverified(['subscriptions:premium']); currentAccount.user.subscriptionsPremium = account.hasScopesUnverified(['subscriptions:premium']); } return currentAccount; From 33c506a2a7b2014bd18e07460ff056dad5f55fb1 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 12 May 2020 13:45:36 -0400 Subject: [PATCH 21/47] Rename subscriptionsPlus and subscriptionsPremium to plusAccess and premiumAccess --- app/hub/Views/HomeView/HomeViewContainer.jsx | 8 +++---- app/hub/Views/PlusView/PlusViewContainer.jsx | 6 ++--- app/panel/components/Detail.jsx | 2 +- app/panel/components/Header.jsx | 12 +++++----- app/panel/components/HeaderMenu.jsx | 24 ++++++++++---------- app/panel/components/Panel.jsx | 4 ++-- app/panel/components/Stats.jsx | 6 ++--- app/panel/components/Summary.jsx | 4 ++-- app/scss/partials/_header.scss | 6 ++--- src/background.js | 4 ++-- src/classes/PanelData.js | 4 ++-- 11 files changed, 40 insertions(+), 40 deletions(-) diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx index 7d230c3dd..81caf36c6 100644 --- a/app/hub/Views/HomeView/HomeViewContainer.jsx +++ b/app/hub/Views/HomeView/HomeViewContainer.jsx @@ -106,8 +106,8 @@ class HomeViewContainer extends Component { _render() { const { justInstalled } = this.state; const { home, user } = this.props; - const isPlus = user && user.subscriptionsPlus || false; - const isPremium = user && user.subscriptionsPremium || false; + const isPlus = user && user.plusAccess || false; + const isPremium = user && user.premiumAccess || false; const { premium_promo_modal_shown, setup_complete, @@ -164,7 +164,7 @@ HomeViewContainer.propTypes = { }), user: PropTypes.shape({ email: PropTypes.string, - subscriptionsPlus: PropTypes.bool, + plusAccess: PropTypes.bool, }), actions: PropTypes.shape({ getHomeProps: PropTypes.func.isRequired, @@ -184,7 +184,7 @@ HomeViewContainer.defaultProps = { }, user: { email: '', - subscriptionsPlus: false, + plusAccess: false, }, }; diff --git a/app/hub/Views/PlusView/PlusViewContainer.jsx b/app/hub/Views/PlusView/PlusViewContainer.jsx index 5d8332ddc..668d0b842 100644 --- a/app/hub/Views/PlusView/PlusViewContainer.jsx +++ b/app/hub/Views/PlusView/PlusViewContainer.jsx @@ -44,7 +44,7 @@ class PlusViewContainer extends Component { */ render() { const childProps = { - isPlus: this.props.user && this.props.user.subscriptionsPlus || false, + isPlus: this.props.user && this.props.user.plusAccess || false, onPlusClick: this._sendPlusPing, }; @@ -56,7 +56,7 @@ class PlusViewContainer extends Component { PlusViewContainer.propTypes = { user: PropTypes.shape({ email: PropTypes.string, - subscriptionsPlus: PropTypes.bool, + plusAccess: PropTypes.bool, }), actions: PropTypes.shape({ sendPing: PropTypes.func.isRequired, @@ -68,7 +68,7 @@ PlusViewContainer.propTypes = { PlusViewContainer.defaultProps = { user: { email: false, - subscriptionsPlus: false, + plusAccess: false, }, }; diff --git a/app/panel/components/Detail.jsx b/app/panel/components/Detail.jsx index dfb9bf494..8dc0838fd 100644 --- a/app/panel/components/Detail.jsx +++ b/app/panel/components/Detail.jsx @@ -80,7 +80,7 @@ class Detail extends React.Component {
    diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index f7b84aa58..782bb83cf 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -149,8 +149,8 @@ class Header extends React.Component { // TODO check whether this is the message we want to be sending now sendMessage('ping', 'plus_panel_from_badge'); const { user } = this.props; - const plusSubscriber = user && user.subscriptionsPlus; - const premiumSubscriber = user && user.subscriptionsPremium; + const plusSubscriber = user && user.plusAccess; + const premiumSubscriber = user && user.premiumAccess; this.props.history.push(plusSubscriber || premiumSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); } @@ -177,8 +177,8 @@ class Header extends React.Component { const tabDetailedClassNames = ClassNames('header-tab', { active: is_expert, }); - const plusSubscriber = user && user.subscriptionsPlus; - const premiumSubscriber = user && user.subscriptionsPremium; + const plusSubscriber = user && user.plusAccess; + const premiumSubscriber = user && user.premiumAccess; const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { 'non-subscriber-badge': !(plusSubscriber || premiumSubscriber), @@ -240,8 +240,8 @@ class Header extends React.Component { const headerMenu = ( { - const { subscriptionsPlus, subscriptionsPremium } = this.props; + const { plusAccess, premiumAccess } = this.props; sendMessage('ping', 'plus_panel_from_menu'); this.props.toggleDropdown(); - this.props.history.push(subscriptionsPremium || subscriptionsPlus ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`); + this.props.history.push(premiumAccess || plusAccess ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`); } /** @@ -166,17 +166,17 @@ class HeaderMenu extends React.Component { const { loggedIn, email, - subscriptionsPremium, - subscriptionsPlus + premiumAccess, + plusAccess } = this.props; const optionClasses = ClassNames({ - 'menu-option': subscriptionsPremium || subscriptionsPlus, - 'menu-option-non-subscriber': !subscriptionsPremium || !subscriptionsPlus + 'menu-option': premiumAccess || plusAccess, + 'menu-option-non-subscriber': !premiumAccess || !plusAccess }); const iconClasses = ClassNames('menu-icon-container', { - subscriptionsPremium, - subscriptionsPlus: subscriptionsPlus && !subscriptionsPremium, - 'non-subscriber': !subscriptionsPremium && !subscriptionsPlus + premiumAccess, + plusAccess: plusAccess && !premiumAccess, + 'non-subscriber': !premiumAccess && !plusAccess }); return ( @@ -244,7 +244,7 @@ class HeaderMenu extends React.Component {
  • {/* Show premium icon to premium users and plus icon to basic and plus users */} - {!subscriptionsPremium && ( + {!premiumAccess && ( @@ -252,7 +252,7 @@ class HeaderMenu extends React.Component { )} - {subscriptionsPremium && ( + {premiumAccess && ( @@ -263,7 +263,7 @@ class HeaderMenu extends React.Component { )} - {subscriptionsPremium ? t('panel_detail_premium_title') : t('ghostery_plus')} + {premiumAccess ? t('panel_detail_premium_title') : t('ghostery_plus')}
    • diff --git a/app/panel/components/Panel.jsx b/app/panel/components/Panel.jsx index 83fe74849..4e78a5ed6 100644 --- a/app/panel/components/Panel.jsx +++ b/app/panel/components/Panel.jsx @@ -217,7 +217,7 @@ class Panel extends React.Component { _premiumSubscriber = () => { const { loggedIn, user } = this.props; - return loggedIn && (user && user.subscriptionsPremium); + return loggedIn && (user && user.premiumAccess); } /** @@ -228,7 +228,7 @@ class Panel extends React.Component { _plusSubscriber = () => { const { loggedIn, user } = this.props; - return loggedIn && (user && user.subscriptionsPlus); + return loggedIn && (user && user.plusAccess); } /** diff --git a/app/panel/components/Stats.jsx b/app/panel/components/Stats.jsx index 8ec7ac7c7..bcd096597 100644 --- a/app/panel/components/Stats.jsx +++ b/app/panel/components/Stats.jsx @@ -329,7 +329,7 @@ class Stats extends React.Component { monthlyAverageData: clearData, dailyAverageData: clearData, showResetModal: false, - showPitchModal: (!this.props.user || !this.props.user.subscriptionsPlus), + showPitchModal: (!this.props.user || !this.props.user.plusAccess), }; return clearOrDemoState; } @@ -517,7 +517,7 @@ class Stats extends React.Component { return selectionData; } - _isPlus = props => props.user && props.user.subscriptionsPlus; + _isPlus = props => props.user && props.user.plusAccess; /** * Render the the Stats View @@ -529,7 +529,7 @@ class Stats extends React.Component { return ( g { fill: #DEDEDE; @@ -171,7 +171,7 @@ path {stroke: $ghosty-blue;} path.text {fill: $ghosty-blue;} } - .subscriptionsPremium > g > g { + .premiumAccess > g > g { fill: $ghosty-blue; } } diff --git a/src/background.js b/src/background.js index 366c2480f..d7fe9ef53 100644 --- a/src/background.js +++ b/src/background.js @@ -881,9 +881,9 @@ function onMessageHandler(request, sender, callback) { account.getUser(message) .then((user) => { if (user) { - user.subscriptionsPlus = account.hasScopesUnverified(['subscriptions:plus']) + user.plusAccess = account.hasScopesUnverified(['subscriptions:plus']) || account.hasScopesUnverified(['subscriptions:premium']); - user.subscriptionsPremium = account.hasScopesUnverified(['subscriptions:premium']); + user.premiumAccess = account.hasScopesUnverified(['subscriptions:premium']); } callback({ user }); }) diff --git a/src/classes/PanelData.js b/src/classes/PanelData.js index c671bbc4b..3a99b8b5e 100644 --- a/src/classes/PanelData.js +++ b/src/classes/PanelData.js @@ -264,9 +264,9 @@ class PanelData { _getCurrentAccount() { const currentAccount = conf.account; if (currentAccount && currentAccount.user) { - currentAccount.user.subscriptionsPlus = account.hasScopesUnverified(['subscriptions:plus']) + currentAccount.user.plusAccess = account.hasScopesUnverified(['subscriptions:plus']) || account.hasScopesUnverified(['subscriptions:premium']); - currentAccount.user.subscriptionsPremium = account.hasScopesUnverified(['subscriptions:premium']); + currentAccount.user.premiumAccess = account.hasScopesUnverified(['subscriptions:premium']); } return currentAccount; } From 0586ff56e469cff0391ec3f7ad841e0014c519e9 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 12 May 2020 15:08:52 -0400 Subject: [PATCH 22/47] Set subscription property on user object with highest tier subscription in account#getUserSubscriptionData --- src/classes/Account.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/classes/Account.js b/src/classes/Account.js index d3ffda0a3..4548f728a 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -177,8 +177,8 @@ class Account { const premiumSubscription = sub.find(subscription => subscription.productName.includes('Ghostery Premium')); if (premiumSubscription) { - this._setSubscriptionData(premiumSubscription); subscriptions.push(premiumSubscription); + this._setSubscriptionData(premiumSubscription); } const plusSubscription = sub.find(subscription => subscription.productName.includes('Ghostery Plus')); @@ -188,6 +188,7 @@ class Account { this._setSubscriptionData(plusSubscription); } } + return subscriptions; }) ) @@ -488,12 +489,22 @@ class Account { } _setSubscriptionData = (data) => { + const currentAccount = conf.account; + // TODO: Change this so that we aren't writing over data if (!conf.paid_subscription && data) { conf.paid_subscription = true; dispatcher.trigger('conf.save.paid_subscription'); } - conf.account.subscriptionData = data || null; + currentAccount.subscriptionData = data || null; + + if (data.productName.includes('Ghostery Premium')) { + currentAccount.user.subscription = 'premium'; + } else if (data.productName.includes('Ghostery Plus')) { + currentAccount.user.subscription = 'plus'; + } else { + currentAccount.user.subscription = ''; + } dispatcher.trigger('conf.save.account'); } From a77797c019be34bcab87c87a62ff61f7b5f2799a Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 12 May 2020 16:04:49 -0400 Subject: [PATCH 23/47] Refactor menu upsell icon to use user.subscriber instead of plusAccess/premiumAccess --- app/panel/components/Header.jsx | 5 +++-- app/panel/components/HeaderMenu.jsx | 19 +++++++++---------- app/scss/partials/_header.scss | 6 +++--- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 782bb83cf..0871aec54 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -177,8 +177,8 @@ class Header extends React.Component { const tabDetailedClassNames = ClassNames('header-tab', { active: is_expert, }); - const plusSubscriber = user && user.plusAccess; - const premiumSubscriber = user && user.premiumAccess; + const plusSubscriber = user && user.subscription === 'plus'; + const premiumSubscriber = user && user.subscription === 'premium'; const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { 'non-subscriber-badge': !(plusSubscriber || premiumSubscriber), @@ -240,6 +240,7 @@ class Header extends React.Component { const headerMenu = ( @@ -244,7 +243,7 @@ class HeaderMenu extends React.Component {
  • {/* Show premium icon to premium users and plus icon to basic and plus users */} - {!premiumAccess && ( + {subscriber !== 'premium' && ( @@ -252,7 +251,7 @@ class HeaderMenu extends React.Component { )} - {premiumAccess && ( + {subscriber === 'premium' && ( @@ -263,7 +262,7 @@ class HeaderMenu extends React.Component { )} - {premiumAccess ? t('panel_detail_premium_title') : t('ghostery_plus')} + {subscriber === 'premium' ? t('panel_detail_premium_title') : t('ghostery_plus')}
    • diff --git a/app/scss/partials/_header.scss b/app/scss/partials/_header.scss index 9775f5d57..0a49a6a55 100644 --- a/app/scss/partials/_header.scss +++ b/app/scss/partials/_header.scss @@ -148,13 +148,13 @@ .menu-option { @extend .menu-option-base; - .plusAccess { + .plus { width: 18px; height: 16px; path {fill: $light-gray;} path.text {fill: #4a4a4a;} } - .premiumAccess { + .premium { margin-left: -4px; g > g { fill: #DEDEDE; @@ -171,7 +171,7 @@ path {stroke: $ghosty-blue;} path.text {fill: $ghosty-blue;} } - .premiumAccess > g > g { + .premium > g > g { fill: $ghosty-blue; } } From 181676405f437840dab3dda1b66f19b9a8ecb377 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 12 May 2020 18:50:28 -0400 Subject: [PATCH 24/47] test --- src/background.js | 8 +++++++- src/classes/Account.js | 22 ++++++++++++++++------ 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/background.js b/src/background.js index d7fe9ef53..beacd61aa 100644 --- a/src/background.js +++ b/src/background.js @@ -882,9 +882,15 @@ function onMessageHandler(request, sender, callback) { .then((user) => { if (user) { user.plusAccess = account.hasScopesUnverified(['subscriptions:plus']) - || account.hasScopesUnverified(['subscriptions:premium']); + || account.hasScopesUnverified(['subscriptions:premium']); user.premiumAccess = account.hasScopesUnverified(['subscriptions:premium']); + + // const currentAccount = conf.account; + // if (currentAccount.user) { + // user.subscription = currentAccount.user.subscription; + // } } + console.log('the user is: ', user); callback({ user }); }) .catch((err) => { diff --git a/src/classes/Account.js b/src/classes/Account.js index 4548f728a..e981db874 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -140,6 +140,12 @@ class Account { .then(userID => api.get('users', userID)) .then((res) => { const user = build(normalize(res), 'users', res.data.id); + const currentAccount = conf.account; + console.log('currentAccount.user: ', currentAccount.user); + if (currentAccount.user) { + user.subscription = currentAccount.user.subscription; + } + console.log('user: ', user); this._setAccountUserInfo(user); return user; }) @@ -498,13 +504,17 @@ class Account { } currentAccount.subscriptionData = data || null; - if (data.productName.includes('Ghostery Premium')) { - currentAccount.user.subscription = 'premium'; - } else if (data.productName.includes('Ghostery Plus')) { - currentAccount.user.subscription = 'plus'; - } else { - currentAccount.user.subscription = ''; + if (currentAccount.user) { + console.log('here'); + if (data.productName.includes('Ghostery Premium')) { + currentAccount.subscription = 'premium'; + } else if (data.productName.includes('Ghostery Plus')) { + currentAccount.subscription = 'plus'; + } else { + currentAccount.subscription = ''; + } } + console.log(currentAccount.user); dispatcher.trigger('conf.save.account'); } From 0847e49576d42ec6b36a417c8b716d9116393008 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 May 2020 07:54:51 -0400 Subject: [PATCH 25/47] Refactor Header logo and menu icon to use subscription instead of premiumAccess and plusAccess --- app/panel/components/Header.jsx | 22 +++++++++++----------- app/panel/components/HeaderMenu.jsx | 4 ++-- src/background.js | 6 ------ src/classes/Account.js | 8 -------- 4 files changed, 13 insertions(+), 27 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 0871aec54..1c2ffb354 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -149,9 +149,9 @@ class Header extends React.Component { // TODO check whether this is the message we want to be sending now sendMessage('ping', 'plus_panel_from_badge'); const { user } = this.props; - const plusSubscriber = user && user.plusAccess; - const premiumSubscriber = user && user.premiumAccess; - this.props.history.push(plusSubscriber || premiumSubscriber ? '/subscription/info' : `/subscribe/${!!user}`); + const hasPlusAccess = user && user.plusAccess; + const hasPremiumAccess = user && user.premiumAccess; + this.props.history.push(hasPlusAccess || hasPremiumAccess ? '/subscription/info' : `/subscribe/${!!user}`); } /** @@ -177,12 +177,12 @@ class Header extends React.Component { const tabDetailedClassNames = ClassNames('header-tab', { active: is_expert, }); - const plusSubscriber = user && user.subscription === 'plus'; - const premiumSubscriber = user && user.subscription === 'premium'; + const hasPlusAccess = user && user.subscription === 'plus'; + const hasPremiumAccess = user && user.subscription === 'premium'; const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { - 'non-subscriber-badge': !(plusSubscriber || premiumSubscriber), - 'subscriber-badge': plusSubscriber || premiumSubscriber + 'non-subscriber-badge': !(hasPlusAccess || hasPremiumAccess), + 'subscriber-badge': hasPlusAccess || hasPremiumAccess }); const simpleTab = ( @@ -220,8 +220,8 @@ class Header extends React.Component { const plusUpgradeBannerOrSubscriberBadgeLogolink = (
    { - ((premiumSubscriber) && ) - || ((plusSubscriber) && ) + ((hasPremiumAccess) && ) + || ((hasPlusAccess) && ) || }
    @@ -241,8 +241,8 @@ class Header extends React.Component { { - const { plusAccess, premiumAccess } = this.props; + const { hasPlusAccess, hasPremiumAccess } = this.props; sendMessage('ping', 'plus_panel_from_menu'); this.props.toggleDropdown(); - this.props.history.push(premiumAccess || plusAccess ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`); + this.props.history.push(hasPremiumAccess || hasPlusAccess ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`); } /** diff --git a/src/background.js b/src/background.js index beacd61aa..ae5b3a17b 100644 --- a/src/background.js +++ b/src/background.js @@ -884,13 +884,7 @@ function onMessageHandler(request, sender, callback) { user.plusAccess = account.hasScopesUnverified(['subscriptions:plus']) || account.hasScopesUnverified(['subscriptions:premium']); user.premiumAccess = account.hasScopesUnverified(['subscriptions:premium']); - - // const currentAccount = conf.account; - // if (currentAccount.user) { - // user.subscription = currentAccount.user.subscription; - // } } - console.log('the user is: ', user); callback({ user }); }) .catch((err) => { diff --git a/src/classes/Account.js b/src/classes/Account.js index e981db874..0969077b8 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -140,12 +140,6 @@ class Account { .then(userID => api.get('users', userID)) .then((res) => { const user = build(normalize(res), 'users', res.data.id); - const currentAccount = conf.account; - console.log('currentAccount.user: ', currentAccount.user); - if (currentAccount.user) { - user.subscription = currentAccount.user.subscription; - } - console.log('user: ', user); this._setAccountUserInfo(user); return user; }) @@ -505,7 +499,6 @@ class Account { currentAccount.subscriptionData = data || null; if (currentAccount.user) { - console.log('here'); if (data.productName.includes('Ghostery Premium')) { currentAccount.subscription = 'premium'; } else if (data.productName.includes('Ghostery Plus')) { @@ -514,7 +507,6 @@ class Account { currentAccount.subscription = ''; } } - console.log(currentAccount.user); dispatcher.trigger('conf.save.account'); } From d25d313b538b8ae3fc1456262ce0705f72796a64 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 May 2020 08:08:28 -0400 Subject: [PATCH 26/47] Rename subscriber variable to subscription --- app/panel/components/Header.jsx | 2 +- app/panel/components/HeaderMenu.jsx | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 1c2ffb354..8299121fe 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -240,7 +240,7 @@ class Header extends React.Component { const headerMenu = ( @@ -243,7 +243,7 @@ class HeaderMenu extends React.Component {
  • {/* Show premium icon to premium users and plus icon to basic and plus users */} - {subscriber !== 'premium' && ( + {subscription !== 'premium' && ( @@ -251,7 +251,7 @@ class HeaderMenu extends React.Component { )} - {subscriber === 'premium' && ( + {subscription === 'premium' && ( @@ -262,7 +262,7 @@ class HeaderMenu extends React.Component { )} - {subscriber === 'premium' ? t('panel_detail_premium_title') : t('ghostery_plus')} + {subscription === 'premium' ? t('panel_detail_premium_title') : t('ghostery_plus')}
    • From c9ad1de30e94c37f53cd1bcb8efae0e4023151ae Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 May 2020 08:50:28 -0400 Subject: [PATCH 27/47] Refactor subscriber badge to use plusAccess and premiumAccess on click, and user.subscription for UI --- app/panel/components/Summary.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index 6bd44c6b3..cbde11c3b 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -215,7 +215,7 @@ class Summary extends React.Component { clickUpgradeBannerOrGoldPlusIcon() { sendMessage('ping', 'plus_panel_from_badge'); - this.props.history.push(this._isPlusSubscriber() ? '/subscription/info' : `/subscribe/${!!this.props.user}`); + this.props.history.push(this._hasPremiumAccess() || this._hasPlusAccess() ? '/subscription/info' : `/subscribe/${!!this.props.user}`); } /** @@ -306,13 +306,13 @@ class Summary extends React.Component { } } - _isPlusSubscriber() { + _hasPlusAccess() { const { user } = this.props; return user && user.plusAccess; } - _isPremiumSubscriber() { + _hasPremiumAccess() { const { user } = this.props; return user && user.premiumAccess; @@ -752,10 +752,10 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the plus upgrade banner or subscriber icon */ _renderPlusUpgradeBannerOrSubscriberIcon() { - const { is_expert, current_theme } = this.props; + const { is_expert, current_theme, user } = this.props; - const isPremiumSubscriber = this._isPremiumSubscriber(); - const isPlusSubscriber = this._isPlusSubscriber(); + const isPremiumSubscriber = user.subscription === 'premium'; + const isPlusSubscriber = user.subscription === 'plus'; const upgradeBannerClassNames = ClassNames('UpgradeBanner', { 'UpgradeBanner--normal': !is_expert, 'UpgradeBanner--small': is_expert, @@ -763,7 +763,7 @@ class Summary extends React.Component { return (
    - {(isPremiumSubscriber) && ( + {isPremiumSubscriber && (
    @@ -771,7 +771,7 @@ class Summary extends React.Component {
    )} - {(!isPremiumSubscriber && isPlusSubscriber) && ( + {isPlusSubscriber && (
    From 6398be16b8ce7140c8aaf138ec0b5d711741ba70 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 May 2020 09:10:40 -0400 Subject: [PATCH 28/47] Check if user object exists before accessing subscription property --- app/panel/components/Summary.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index cbde11c3b..af3dffdcb 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -754,8 +754,8 @@ class Summary extends React.Component { _renderPlusUpgradeBannerOrSubscriberIcon() { const { is_expert, current_theme, user } = this.props; - const isPremiumSubscriber = user.subscription === 'premium'; - const isPlusSubscriber = user.subscription === 'plus'; + const isPremiumSubscriber = (user && user.subscription === 'premium') || false; + const isPlusSubscriber = (user && user.subscription === 'plus') || false; const upgradeBannerClassNames = ClassNames('UpgradeBanner', { 'UpgradeBanner--normal': !is_expert, 'UpgradeBanner--small': is_expert, From eb337bc4e879da9f533b815254a6877591f92f96 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 May 2020 11:25:06 -0400 Subject: [PATCH 29/47] Display UI elements basedd off user scope --- app/panel/components/Header.jsx | 5 ++--- app/panel/components/HeaderMenu.jsx | 23 +++++++++++++---------- app/panel/components/Summary.jsx | 10 +++++----- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index 8299121fe..4a2ab5fd7 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -177,8 +177,8 @@ class Header extends React.Component { const tabDetailedClassNames = ClassNames('header-tab', { active: is_expert, }); - const hasPlusAccess = user && user.subscription === 'plus'; - const hasPremiumAccess = user && user.subscription === 'premium'; + const hasPlusAccess = user && user.plusAccess; + const hasPremiumAccess = user && user.premiumAccess; const accountLogolink = this.generateAccountLogo(); const badgeClasses = ClassNames('columns', 'shrink', { 'non-subscriber-badge': !(hasPlusAccess || hasPremiumAccess), @@ -240,7 +240,6 @@ class Header extends React.Component { const headerMenu = ( { - const { hasPlusAccess, hasPremiumAccess } = this.props; + const { user } = this.props; + const { hasPlusAccess, hasPremiumAccess } = user; sendMessage('ping', 'plus_panel_from_menu'); this.props.toggleDropdown(); this.props.history.push(hasPremiumAccess || hasPlusAccess ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`); @@ -166,16 +167,18 @@ class HeaderMenu extends React.Component { const { loggedIn, email, - subscription + user } = this.props; + const hasPlusAccess = user && user.hasPlusAccess; + const hasPremiumAccess = user && user.hasPremiumAccess; const optionClasses = ClassNames({ - 'menu-option': subscription, - 'menu-option-non-subscriber': !subscription + 'menu-option': hasPlusAccess || hasPremiumAccess, + 'menu-option-non-subscriber': !(hasPlusAccess || hasPremiumAccess) }); const iconClasses = ClassNames('menu-icon-container', { - premium: subscription === 'premium', - plus: subscription === 'plus', - 'non-subscriber': !subscription + premium: hasPremiumAccess, + plus: !hasPremiumAccess && hasPlusAccess, + 'non-subscriber': !(hasPremiumAccess || hasPlusAccess) }); return ( @@ -243,7 +246,7 @@ class HeaderMenu extends React.Component {
  • {/* Show premium icon to premium users and plus icon to basic and plus users */} - {subscription !== 'premium' && ( + {!hasPremiumAccess && ( @@ -251,7 +254,7 @@ class HeaderMenu extends React.Component { )} - {subscription === 'premium' && ( + {hasPremiumAccess && ( @@ -262,7 +265,7 @@ class HeaderMenu extends React.Component { )} - {subscription === 'premium' ? t('panel_detail_premium_title') : t('ghostery_plus')} + {hasPremiumAccess ? t('panel_detail_premium_title') : t('ghostery_plus')}
    • diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index af3dffdcb..84da9b6ab 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -754,8 +754,8 @@ class Summary extends React.Component { _renderPlusUpgradeBannerOrSubscriberIcon() { const { is_expert, current_theme, user } = this.props; - const isPremiumSubscriber = (user && user.subscription === 'premium') || false; - const isPlusSubscriber = (user && user.subscription === 'plus') || false; + const hasPremiumAccess = user && user.premiumAccess; + const hasPlusAccess = user && user.plusAccess; const upgradeBannerClassNames = ClassNames('UpgradeBanner', { 'UpgradeBanner--normal': !is_expert, 'UpgradeBanner--small': is_expert, @@ -763,7 +763,7 @@ class Summary extends React.Component { return (
    - {isPremiumSubscriber && ( + {hasPremiumAccess && (
    @@ -771,7 +771,7 @@ class Summary extends React.Component {
    )} - {isPlusSubscriber && ( + {hasPlusAccess && !hasPremiumAccess && (
    @@ -779,7 +779,7 @@ class Summary extends React.Component {
    )} - {(!isPremiumSubscriber && !isPlusSubscriber) && ( + {(!hasPlusAccess && !hasPremiumAccess) && (
    {t('subscription_upgrade_to')} From 3d51fd0e44e48d25635ca8e41b22828f8a83d5e8 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 May 2020 11:25:30 -0400 Subject: [PATCH 30/47] Remove unused subscription property on user --- src/classes/Account.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/classes/Account.js b/src/classes/Account.js index 0969077b8..c77e94218 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -489,24 +489,11 @@ class Account { } _setSubscriptionData = (data) => { - const currentAccount = conf.account; - // TODO: Change this so that we aren't writing over data if (!conf.paid_subscription && data) { conf.paid_subscription = true; dispatcher.trigger('conf.save.paid_subscription'); } - currentAccount.subscriptionData = data || null; - - if (currentAccount.user) { - if (data.productName.includes('Ghostery Premium')) { - currentAccount.subscription = 'premium'; - } else if (data.productName.includes('Ghostery Plus')) { - currentAccount.subscription = 'plus'; - } else { - currentAccount.subscription = ''; - } - } dispatcher.trigger('conf.save.account'); } From 23e5eb73ac0fc4aa362b9cbaccf9aa40ddaf97ed Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 May 2020 11:44:57 -0400 Subject: [PATCH 31/47] Base menu icon off of plusAccess and premiumAccess --- app/hub/Views/PlusView/PlusViewContainer.jsx | 3 ++- app/panel/components/Detail.jsx | 9 +++++---- app/panel/components/HeaderMenu.jsx | 21 ++++++++++---------- 3 files changed, 17 insertions(+), 16 deletions(-) diff --git a/app/hub/Views/PlusView/PlusViewContainer.jsx b/app/hub/Views/PlusView/PlusViewContainer.jsx index 668d0b842..2737380ec 100644 --- a/app/hub/Views/PlusView/PlusViewContainer.jsx +++ b/app/hub/Views/PlusView/PlusViewContainer.jsx @@ -43,8 +43,9 @@ class PlusViewContainer extends Component { * @return {JSX} JSX for rendering the Plus View of the Hub app */ render() { + const { user } = this.props; const childProps = { - isPlus: this.props.user && this.props.user.plusAccess || false, + isPlus: user && user.plusAccess || false, onPlusClick: this._sendPlusPing, }; diff --git a/app/panel/components/Detail.jsx b/app/panel/components/Detail.jsx index 8dc0838fd..3846924d7 100644 --- a/app/panel/components/Detail.jsx +++ b/app/panel/components/Detail.jsx @@ -60,13 +60,14 @@ class Detail extends React.Component { * @return {ReactComponent} ReactComponent instance */ render() { + const { is_expanded, user, history } = this.props; const condensedToggleClassNames = ClassNames('condensed-toggle', { - condensed: this.props.is_expanded, + condensed: is_expanded, }); - const activeTab = this.props.history.location.pathname.includes('rewards') ? 'rewards' : 'blocking'; + const activeTab = history.location.pathname.includes('rewards') ? 'rewards' : 'blocking'; const contentDetailsClassNames = ClassNames({ - expanded: this.props.is_expanded, + expanded: is_expanded, rewardsView: activeTab === 'rewards', }); @@ -80,7 +81,7 @@ class Detail extends React.Component {
    diff --git a/app/panel/components/HeaderMenu.jsx b/app/panel/components/HeaderMenu.jsx index e09f7d357..bfbaeac74 100644 --- a/app/panel/components/HeaderMenu.jsx +++ b/app/panel/components/HeaderMenu.jsx @@ -167,10 +167,9 @@ class HeaderMenu extends React.Component { const { loggedIn, email, - user + hasPremiumAccess, + hasPlusAccess } = this.props; - const hasPlusAccess = user && user.hasPlusAccess; - const hasPremiumAccess = user && user.hasPremiumAccess; const optionClasses = ClassNames({ 'menu-option': hasPlusAccess || hasPremiumAccess, 'menu-option-non-subscriber': !(hasPlusAccess || hasPremiumAccess) @@ -246,14 +245,6 @@ class HeaderMenu extends React.Component {
  • {/* Show premium icon to premium users and plus icon to basic and plus users */} - {!hasPremiumAccess && ( - - - - - - - )} {hasPremiumAccess && ( @@ -265,6 +256,14 @@ class HeaderMenu extends React.Component { )} + {!hasPremiumAccess && ( + + + + + + + )} {hasPremiumAccess ? t('panel_detail_premium_title') : t('ghostery_plus')}
    • From 49eb749fb1beef5186adb708494076990a58a66a Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 May 2020 13:10:22 -0400 Subject: [PATCH 32/47] Refactor isPlus to hasPlusAccess, destructure some things, and save subscriptionData in account#setSubscriptionData --- app/panel/components/Panel.jsx | 12 ++++++------ app/panel/components/Stats.jsx | 19 ++++++++++--------- src/classes/Account.js | 1 + 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/app/panel/components/Panel.jsx b/app/panel/components/Panel.jsx index 4e78a5ed6..9d5a98fbb 100644 --- a/app/panel/components/Panel.jsx +++ b/app/panel/components/Panel.jsx @@ -214,7 +214,7 @@ class Panel extends React.Component { * @private * Is the user a Premium subscriber? */ - _premiumSubscriber = () => { + _hasPremiumAccess = () => { const { loggedIn, user } = this.props; return loggedIn && (user && user.premiumAccess); @@ -225,7 +225,7 @@ class Panel extends React.Component { * @private * Is the user a Plus subscriber? */ - _plusSubscriber = () => { + _hasPlusAccess = () => { const { loggedIn, user } = this.props; return loggedIn && (user && user.plusAccess); @@ -237,17 +237,17 @@ class Panel extends React.Component { * Renders the Premium promo modal */ _renderPremiumPromoModal = () => { - if (this._premiumSubscriber()) return null; + if (this._hasPremiumAccess()) return null; sendMessage('promoModals.sawPremiumPromo', {}); - const isPlus = this._plusSubscriber(); + const hasPlusAccess = this.hasPlusAccess(); return ( ); @@ -278,7 +278,7 @@ class Panel extends React.Component { * Renders the Plus promo modal if the user is not already an subscriber */ _renderPlusPromoModal = () => { - if (this._plusSubscriber() || this._premiumSubscriber()) { return null; } + if (this._hasPlusAccess() || this._hasPremiumAccess()) { return null; } sendMessage('promoModals.sawPlusPromo', {}); diff --git a/app/panel/components/Stats.jsx b/app/panel/components/Stats.jsx index bcd096597..bfab2f720 100644 --- a/app/panel/components/Stats.jsx +++ b/app/panel/components/Stats.jsx @@ -31,7 +31,7 @@ class Stats extends React.Component { */ componentDidMount() { sendMessage('ping', 'hist_stats_panel'); - if (!this._isPlus(this.props)) { + if (!this._hasPlusAccess(this.props)) { // eslint-disable-next-line this.setState(this._reset(true)); return; @@ -43,8 +43,8 @@ class Stats extends React.Component { * Lifecycle event */ UNSAFE_componentWillReceiveProps(nextProps) { - const nextPlus = this._isPlus(nextProps); - const thisPlus = this._isPlus(this.props); + const nextPlus = this._hasPlusAccess(nextProps); + const thisPlus = this._hasPlusAccess(this.props); if (nextPlus !== thisPlus) { if (nextPlus) { this._init(); @@ -153,7 +153,7 @@ class Stats extends React.Component { * @param {Object} event click event */ selectView = (event) => { - if (!this._isPlus(this.props)) { + if (!this._hasPlusAccess(this.props)) { return; } const state = Object.assign({}, this.state); @@ -177,7 +177,7 @@ class Stats extends React.Component { * @param {Object} event click event */ selectType = (event) => { - if (!this._isPlus(this.props)) { + if (!this._hasPlusAccess(this.props)) { return; } const state = Object.assign({}, this.state); @@ -227,7 +227,7 @@ class Stats extends React.Component { * @param {Object} event click event */ selectTimeframe = (e) => { - if (!this._isPlus(this.props)) { + if (!this._hasPlusAccess(this.props)) { return; } const state = Object.assign({}, this.state); @@ -256,7 +256,7 @@ class Stats extends React.Component { } resetStats = () => { - if (!this._isPlus(this.props)) { + if (!this._hasPlusAccess(this.props)) { return; } this.setState({ showResetModal: true }); @@ -291,6 +291,7 @@ class Stats extends React.Component { } _reset = (demo) => { + const { user } = this.props; const demoData = [ { date: '2018-12-28', amount: 300, index: 0 }, { date: '2018-12-29', amount: 450, index: 1 }, @@ -329,7 +330,7 @@ class Stats extends React.Component { monthlyAverageData: clearData, dailyAverageData: clearData, showResetModal: false, - showPitchModal: (!this.props.user || !this.props.user.plusAccess), + showPitchModal: (!user || !user.plusAccess), }; return clearOrDemoState; } @@ -517,7 +518,7 @@ class Stats extends React.Component { return selectionData; } - _isPlus = props => props.user && props.user.plusAccess; + _hasPlusAccess = props => props.user && props.user.plusAccess; /** * Render the the Stats View diff --git a/src/classes/Account.js b/src/classes/Account.js index c77e94218..59d00f788 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -494,6 +494,7 @@ class Account { conf.paid_subscription = true; dispatcher.trigger('conf.save.paid_subscription'); } + conf.account.subscriptionData = data || null; dispatcher.trigger('conf.save.account'); } From 47f1cd510e3c2e248a3c2cefe8da12bd7a568059 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 May 2020 15:33:42 -0400 Subject: [PATCH 33/47] Use panel#hasPlusAccess() directly --- app/panel/components/Panel.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/panel/components/Panel.jsx b/app/panel/components/Panel.jsx index 9d5a98fbb..1334abe3f 100644 --- a/app/panel/components/Panel.jsx +++ b/app/panel/components/Panel.jsx @@ -241,13 +241,11 @@ class Panel extends React.Component { sendMessage('promoModals.sawPremiumPromo', {}); - const hasPlusAccess = this.hasPlusAccess(); - return ( ); From ead09300b7699ece8a0de831ed5766e59b33bd44 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 14 May 2020 12:16:49 -0400 Subject: [PATCH 34/47] Fix menu icon link --- app/panel/components/HeaderMenu.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/panel/components/HeaderMenu.jsx b/app/panel/components/HeaderMenu.jsx index bfbaeac74..d5c04581c 100644 --- a/app/panel/components/HeaderMenu.jsx +++ b/app/panel/components/HeaderMenu.jsx @@ -152,11 +152,10 @@ class HeaderMenu extends React.Component { * Handle click on Subscriber menu item. */ clickSubscriber = () => { - const { user } = this.props; - const { hasPlusAccess, hasPremiumAccess } = user; + const { hasPremiumAccess, hasPlusAccess } = this.props; sendMessage('ping', 'plus_panel_from_menu'); this.props.toggleDropdown(); - this.props.history.push(hasPremiumAccess || hasPlusAccess ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`); + this.props.history.push(hasPlusAccess || hasPremiumAccess ? '/subscription/info' : '/subscribe/false'); } /** From cf736934cbd5ee3ca597c3df2287b4adc6bcfcdd Mon Sep 17 00:00:00 2001 From: Ben Date: Fri, 15 May 2020 01:17:08 -0400 Subject: [PATCH 35/47] Add description and button for upgrade prompt --- _locales/de/messages.json | 3 -- _locales/en/messages.json | 10 +++- _locales/es/messages.json | 3 -- _locales/fr/messages.json | 3 -- _locales/hu/messages.json | 3 -- _locales/it/messages.json | 3 -- _locales/ja/messages.json | 3 -- _locales/ko/messages.json | 3 -- _locales/nl/messages.json | 3 -- _locales/pl/messages.json | 3 -- _locales/pt_BR/messages.json | 3 -- _locales/ru/messages.json | 3 -- _locales/zh_CN/messages.json | 3 -- _locales/zh_TW/messages.json | 3 -- app/hub/Views/HomeView/HomeView.jsx | 12 ++--- app/hub/Views/HomeView/HomeView.scss | 52 +++++++++++++------- app/hub/Views/HomeView/HomeViewContainer.jsx | 5 +- app/scss/partials/_hub_svgs.scss | 3 -- 18 files changed, 51 insertions(+), 70 deletions(-) diff --git a/_locales/de/messages.json b/_locales/de/messages.json index 05d889ab8..c0ec6e228 100644 --- a/_locales/de/messages.json +++ b/_locales/de/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "Benutzerdefiniertes Setup abgeschlossen" }, - "hub_home_feature_supporter_text": { - "message": "Stufen Sie hoch auf Ghostery Plus und schalten Sie spezielle Funktionen frei." - }, "hub_setup_page_title": { "message": "Ghostery Hub - Setup" }, diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 6b30646c9..5608d6508 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1294,8 +1294,14 @@ "hub_home_feature_setup_button_alt": { "message": "Custom Setup Complete" }, - "hub_home_feature_supporter_text": { - "message": "Upgrade to Ghostery Plus and unlock special features." + "hub_home_plus_upgrade_text": { + "message": "Go beyond basic privacy. Upgrade your Ghostery plan to receive device-level protection, VPN access, and more!" + }, + "hub_home_plus_upgrade_button_text": { + "message": "Upgrade now" + }, + "hub_home_plus_full_protection": { + "message": "You have full protection" }, "hub_setup_page_title": { "message": "Ghostery Hub - Setup" diff --git a/_locales/es/messages.json b/_locales/es/messages.json index d1bad47e7..1908713a5 100644 --- a/_locales/es/messages.json +++ b/_locales/es/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "Instalación personalizada completa" }, - "hub_home_feature_supporter_text": { - "message": "Mejora a Ghostery Plus y desbloquea funciones especiales." - }, "hub_setup_page_title": { "message": "Centro de Ghostery: instalación" }, diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json index 68805fee4..7eedf11f3 100644 --- a/_locales/fr/messages.json +++ b/_locales/fr/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "Configuration personnalisée terminée" }, - "hub_home_feature_supporter_text": { - "message": "Passez à Ghostery Plus et découvrez des fonctionnalités spéciales." - }, "hub_setup_page_title": { "message": "Hub Ghostery — Configuration" }, diff --git a/_locales/hu/messages.json b/_locales/hu/messages.json index 600f244b3..ea0738980 100644 --- a/_locales/hu/messages.json +++ b/_locales/hu/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "Egyéni telepítés kész" }, - "hub_home_feature_supporter_text": { - "message": "Bővítsen Ghostery Plus verzióra és oldjon fel különleges funkciókat!" - }, "hub_setup_page_title": { "message": "Ghostery Központ - Beállítás" }, diff --git a/_locales/it/messages.json b/_locales/it/messages.json index 92798248f..a8f528d4a 100644 --- a/_locales/it/messages.json +++ b/_locales/it/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "Configurazione Personalizzata Completa" }, - "hub_home_feature_supporter_text": { - "message": "Effettua l'upgrade a Ghostery Plus e sblocca funzioni speciali." - }, "hub_setup_page_title": { "message": "Ghostery Hub - Configurazione" }, diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json index e6a482006..5f9fccaac 100644 --- a/_locales/ja/messages.json +++ b/_locales/ja/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "カスタム設定完了" }, - "hub_home_feature_supporter_text": { - "message": "「Ghostery プラス」にアップグレードして高度な機能をご利用ください。" - }, "hub_setup_page_title": { "message": "Ghostery ハブ - 設定" }, diff --git a/_locales/ko/messages.json b/_locales/ko/messages.json index 6bdbd8f00..97082f915 100644 --- a/_locales/ko/messages.json +++ b/_locales/ko/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "사용자 지정 설정 완료" }, - "hub_home_feature_supporter_text": { - "message": "Ghostery Plus로 업그레이드하고 특별 기능을 새롭게 이용하세요." - }, "hub_setup_page_title": { "message": "Ghostery 허브 - 설정" }, diff --git a/_locales/nl/messages.json b/_locales/nl/messages.json index 2d52a421b..c689fe14a 100644 --- a/_locales/nl/messages.json +++ b/_locales/nl/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "Aangepaste instelling voltooid" }, - "hub_home_feature_supporter_text": { - "message": "Upgrade naar Ghostery Plus en ontgrendel speciale opties." - }, "hub_setup_page_title": { "message": "Ghostery Instellen" }, diff --git a/_locales/pl/messages.json b/_locales/pl/messages.json index cc70873e7..dd632ec92 100644 --- a/_locales/pl/messages.json +++ b/_locales/pl/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "Konfiguracja niestandardowa zakończona" }, - "hub_home_feature_supporter_text": { - "message": "Zaktualizuj do Ghostery Plus i odblokuj funkcje specjalne." - }, "hub_setup_page_title": { "message": "Hub Ghostery - Konfiguracja" }, diff --git a/_locales/pt_BR/messages.json b/_locales/pt_BR/messages.json index 91215905e..1a9259362 100644 --- a/_locales/pt_BR/messages.json +++ b/_locales/pt_BR/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "Configuração personalizada concluída" }, - "hub_home_feature_supporter_text": { - "message": "Atualize para o Ghostery Plus e desbloqueie recursos especiais." - }, "hub_setup_page_title": { "message": "Ghostery Hub - Configuração" }, diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json index 1f89084ca..db62d3ad2 100644 --- a/_locales/ru/messages.json +++ b/_locales/ru/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "Пользовательская настройка завершена" }, - "hub_home_feature_supporter_text": { - "message": "Обновитесь до Ghostery Plus и разблокируйте специальные функции." - }, "hub_setup_page_title": { "message": "Ghostery Hub - Настройка" }, diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json index 413e973d0..7041774cd 100644 --- a/_locales/zh_CN/messages.json +++ b/_locales/zh_CN/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "自定义设置完毕" }, - "hub_home_feature_supporter_text": { - "message": "升级为Ghostery Plus，解锁特别功能。" - }, "hub_setup_page_title": { "message": "Ghostery Hub - 设置" }, diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json index 2b012d12e..5ce56dde7 100644 --- a/_locales/zh_TW/messages.json +++ b/_locales/zh_TW/messages.json @@ -1294,9 +1294,6 @@ "hub_home_feature_setup_button_alt": { "message": "自定義設置完成" }, - "hub_home_feature_supporter_text": { - "message": "升級至Ghostery Plus并解鎖特別特色。" - }, "hub_setup_page_title": { "message": "Ghostery 中心 - 設置 " }, diff --git a/app/hub/Views/HomeView/HomeView.jsx b/app/hub/Views/HomeView/HomeView.jsx index b591fadde..9610b1b57 100644 --- a/app/hub/Views/HomeView/HomeView.jsx +++ b/app/hub/Views/HomeView/HomeView.jsx @@ -141,15 +141,15 @@ const HomeView = (props) => {
    -
    -
    -
    - {t('hub_home_feature_supporter_text')} +
    +
    +
    + {t('hub_home_plus_upgrade_text')}
    -
    + {/* TODO: Change navlink to upgrade tab */} - {isPlus ? t('already_subscribed') : t('get_ghostery_plus')} + {isPlus ? t('hub_home_plus_full_protection') : t('hub_home_plus_upgrade_button_text')}
    diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index 7a228b9cc..9b5bb5f46 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/app/hub/Views/HomeView/HomeView.scss @@ -73,14 +73,15 @@ padding: 0; background-color: #979797; } -.HomeView__plus { +.HomeView__upgrade { + display: flex; margin-top: 22px; padding: 22px 12px; background-color: #f0f3f4; border-radius: 4px; } -.HomeView__plusFeature { - padding: 0 36px; +.HomeView__upgradeIcon { + background-image: url('..') } .HomeView__featureIcon { height: 50px; @@ -89,6 +90,12 @@ background-repeat: no-repeat; background-position: center center; } +.HomeView__upgradeText { + width: 226px; + font-size: 16px; + font-weight: bold; + line-height: 1.69; +} .HomeView__onboardingFeature.feature-tutorial .HomeView__featureIcon { background-image: buildIconWand(#4a4a4a, #daf4ff); } @@ -105,25 +112,20 @@ margin: 0 0 0 50px; background-image: buildIconClipboardCheck(#4a4a4a, #daf4ff, #1dafed); } -.HomeView__featureIcon.feature-plus { - position: relative; - margin-left: auto; - margin-right: auto; - top: -25px; - height: 46px; - background-image: buildIconGhosteryPlus(#4a4a4a, #daf4ff); - background-size: contain; -} +// .HomeView__featureIcon.feature-plus { +// position: relative; +// margin-left: auto; +// margin-right: auto; +// top: -25px; +// height: 46px; +// background-image: buildIconGhosteryPlus(#4a4a4a, #daf4ff); +// background-size: contain; +// } .HomeView__featureTitle { text-align: center; font-size: 18px; padding: 22px 0 10px; } -.HomeView__featureText { - text-align: center; - font-size: 14px; - line-height: 27px; -} .HomeView__featureButton { margin: 0; } @@ -150,8 +152,22 @@ .HomeView__onboardingFeature.feature-setup-complete { margin: 35px 0 15px; } + .HomeView__upgrade { + flex-direction: column; + } + .HomeView__upgradeIcon { + margin: auto; + } + .HomeView__upgradeText { + text-align: center; + margin: auto; + } + .HomeView__featureButton { + margin-top: 25px; + } } - +// @media only screen and (max-width: 768px) { +// } // Firefox Font Size Override and Image Size Override @-moz-document url-prefix() { .HomeView--firefoxFontSize { diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx index c98e55b78..84d47c31e 100644 --- a/app/hub/Views/HomeView/HomeViewContainer.jsx +++ b/app/hub/Views/HomeView/HomeViewContainer.jsx @@ -118,6 +118,7 @@ class HomeViewContainer extends Component { const { justInstalled } = this.state; const { home, user } = this.props; const isPlus = user && user.subscriptionsPlus || false; + console.log('isPlus: ', user); const { premium_promo_modal_shown, setup_complete, @@ -138,7 +139,7 @@ class HomeViewContainer extends Component { return (
    - + /> */}
    ); diff --git a/app/scss/partials/_hub_svgs.scss b/app/scss/partials/_hub_svgs.scss index 2fa697ffa..3e9f5c32d 100644 --- a/app/scss/partials/_hub_svgs.scss +++ b/app/scss/partials/_hub_svgs.scss @@ -76,9 +76,6 @@ @function buildIconWandCheck($primary-color, $secondary-color, $tertiary-color) { @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2290%22%20height%3D%2245%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M68.68%2037C63.443%2032.894%2058.256%2028.823%2053%2024.704c1.29-1.671%202.544-3.303%203.846-4.987l11.089%208.691C73.728%2021.951%2079.521%2015.501%2085.353%209L90%2013.233C82.883%2021.17%2075.8%2029.063%2068.68%2037%22%20fill%3D%22#{_url-friendly-color($tertiary-color)}%22/%3E%3Cpath%20fill%3D%22#{_url-friendly-color($secondary-color)}%22%20d%3D%22M20%2021l6-6%2025%2023-6%207z%22/%3E%3Cpath%20d%3D%22M46.92%2038.41L17.702%2010.42c-.747-.715-1.653-1.022-2.613-1.022s-1.92.358-2.612%201.022l-.587.562a3.5%203.5%200%200%200%200%205.057l29.165%2027.94c.747.715%201.653%201.021%202.613%201.021s1.92-.358%202.612-1.022l.64-.51c1.44-1.43%201.44-3.678%200-5.057zM13.33%2012.413l.586-.562c.32-.306.693-.46%201.12-.46.426%200%20.853.154%201.12.46l4.052%203.882-2.826%202.707-4.052-3.882c-.587-.562-.587-1.532%200-2.145zm32.044%2029.574l-.586.562c-.32.307-.694.46-1.12.46-.427%200-.853-.153-1.12-.46l-23.62-22.627%202.826-2.708%2023.673%2022.68a1.423%201.423%200%200%201-.053%202.093zM26.5%206.896c2.08%200%203.733%202.196%203.733%204.086%200%20.562.48%201.021%201.066%201.021.586%200%201.066-.46%201.066-1.021%200-1.89%201.6-4.086%203.733-4.086.586%200%201.066-.46%201.066-1.022s-.48-1.022-1.066-1.022c-2.026%200-3.733-1.583-3.733-3.575%200-.562-.48-1.022-1.066-1.022-.587%200-1.066.46-1.066%201.022%200%201.94-1.653%203.575-3.733%203.575-.586%200-1.066.46-1.066%201.022s.48%201.022%201.066%201.022zm4.746-2.401c.426.562.96%201.073%201.546%201.43-.587.409-1.12.97-1.546%201.584-.427-.613-.96-1.175-1.547-1.584.64-.357%201.12-.868%201.547-1.43zm-15.57%2027.378c-1.332%200-2.452-1.073-2.452-2.35%200-.562-.48-1.021-1.066-1.021-.587%200-1.067.46-1.067%201.021%200%201.277-1.12%202.35-2.452%202.35-.587%200-1.067.46-1.067%201.021%200%20.562.48%201.022%201.067%201.022%201.28%200%202.452%201.328%202.452%202.707%200%20.562.48%201.022%201.067%201.022.586%200%201.066-.46%201.066-1.022%200-1.379%201.173-2.707%202.453-2.707.586%200%201.066-.46%201.066-1.022%200-.561-.48-1.021-1.066-1.021zm-3.518%201.788c-.214-.256-.427-.511-.694-.715.267-.205.48-.41.694-.613.213.255.426.46.693.613-.267.255-.533.46-.693.715zM9.277%205.414c.587%200%201.067-.46%201.067-1.021%200-.562-.48-1.022-1.067-1.022-1.333%200-2.452-1.072-2.452-2.35C6.825.46%206.345%200%205.758%200c-.586%200-1.066.46-1.066%201.022%200%201.277-1.12%202.35-2.453%202.35-.586%200-1.066.459-1.066%201.02%200%20.563.48%201.022%201.066%201.022%201.28%200%202.453%201.328%202.453%202.707%200%20.562.48%201.022%201.066%201.022.587%200%201.067-.46%201.067-1.022%200-1.379%201.173-2.707%202.452-2.707zM5.758%205.16c-.213-.255-.426-.51-.693-.715.267-.204.48-.409.693-.613.214.255.427.46.694.613-.267.255-.48.46-.694.715zm-.64%2017.162c0%20.562-.48%201.022-1.066%201.022-.213%200-.426.306-.426.613%200%20.562-.48%201.021-1.067%201.021-.586%200-1.066-.46-1.066-1.021%200-.307-.267-.613-.427-.613C.48%2023.343%200%2022.883%200%2022.32S.48%2021.3%201.066%2021.3a.412.412%200%200%200%20.427-.409c0-.562.48-1.022%201.066-1.022.587%200%201.067.46%201.067%201.022%200%20.255.213.409.426.409.64%200%201.067.46%201.067%201.021z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22/%3E%3C/g%3E%3C/svg%3E'); } -@function buildIconGhosteryPlus($primary-color, $secondary-color) { - @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2284%22%20height%3D%2277%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M79.858%2074.75L43.1%2057.9c-.579-.315-1.447-.315-2.026%200L4.604%2074.75c-.867.472-2.604%200-2.604-.63V2.786C2%202.315%202.579%202%203.447%202h76.99c.868%200%201.447.315%201.447.787V74.12c.58.63-1.157%201.103-2.026.63z%22%20fill%3D%22#{_url-friendly-color($secondary-color)}%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%223.353%22/%3E%3Cpath%20d%3D%22M47.156%2037.256c-1.186%201.592-2.981%203.32-4.879%203.184-2.405-.169-2.473-2.676-1.728-4.912.746-2.237%202.474-5.557%204.676-8.64.271-.373.61-.34.88-.034.746%201.118.577%202.642-.643%204.574-1.254%201.999-1.931%203.354-2.643%204.98-.711%201.66-.61%202.88.17%202.948%201.321.102%203.185-2.27%205.014-5.218%202.135-3.456%203.117-5.794%204.202-7.25.339-.475.576-.543.847-.204.508.61.78%202.1-.034%203.795-.746%201.525-2.44%204.066-3.219%205.794-.88%201.931-.745%203.354.474%203.287%201.423-.068%203.151-2.304%204.473-4.676.17-.305.474-.34.61-.034.135.27.17%201.186-.305%202.134-.983%201.898-3.083%203.626-5.083%203.626-2.202%200-3.083-1.39-2.812-3.354zM25.98%2022.754c-1.152-.136-1.796-.712-2.135-1.423-.17-.373-.101-.576.339-.61%202.812-.305%205.353-1.728%207.657-1.83%201.728-.067%203.22.475%204.032%202.813.712%202.032.136%203.998-1.016%205.793-1.694%202.643-5.353%205.184-9.792%206.031-.78.136-1.525%200-2.1-.338-.95%201.863-1.966%204.1-3.152%206.912-.135.338-.305.338-.542.101-.474-.508-.813-1.524-.305-3.354.881-3.083%204.066-9.453%207.014-14.095zm-2.033%208.538c7.59-1.423%2011.384-6.912%2010.47-9.284-.712-1.863-4.1-.101-6.337.543%200%20.914-.338%202.1-1.287%203.727-.881%201.558-1.83%203.117-2.846%205.014zm12.773%201.932c-1.355%203.32-1.728%206.132-.203%206.268%201.627.135%203.998-2.304%205.32-4.913.237-.44.61-.475.745%200%20.17.542.034%201.287-.339%202.1-.474%201.017-2.947%203.83-5.658%203.761-2.338-.067-3.592-1.694-2.812-5.353%201.253-5.895%205.116-12.028%208.572-15.62.508-.542.983-.61%201.457-.17.982.882%201.186%202.135.78%203.728-1.051%204.167-4.846%208.233-7.862%2010.199zm.61-1.457c4.642-3.761%206.54-9.183%206.1-9.454-.441-.27-2.949%203.49-5.286%207.827a18.192%2018.192%200%200%200-.814%201.627zm18.06%202.676c1.389-1.897%202.914-4.1%203.896-5.827.17-1.322.508-1.966%201.22-2.61.745-.677%201.525-.813%201.83-.508.338.34.169.712-.272%201.491-.135.203-.237.407-.372.644-.237%203.117.406%205.76.305%208.098-.068%201.321-.305%202.744-1.525%203.557%202.27-.847%203.693-2.88%204.54-4.71.17-.372.508-.27.644%200%20.136.306.102%201.187-.474%202.237a7.139%207.139%200%200%201-5.998%203.727c-1.965.068-3.862-.44-5.014-2.541-.813-1.525-.712-3.761.44-4.71.407-.339.678-.203.712.34.034.27.034.541.068.812zm3.828-3.659c-.982%201.796-2.236%203.66-3.523%205.489.508%201.965%201.49%203.354%202.609%203.015%201.558-.474%201.05-5.793.914-8.504z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22/%3E%3C/g%3E%3C/svg%3E'); -} // Used in Setup Anti Suite View @function buildAntiTrackingIcon($primary-color) { // Also used in Tutorial Anti Suite View From 01e96c8a0bbd555cd6964e823f5802800c6e0641 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 18 May 2020 09:28:26 -0400 Subject: [PATCH 36/47] Add shield icon without color params --- app/hub/Views/HomeView/HomeView.scss | 15 +++------------ app/scss/partials/_hub_svgs.scss | 4 +++- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index 9b5bb5f46..d58a9b196 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/app/hub/Views/HomeView/HomeView.scss @@ -78,10 +78,12 @@ margin-top: 22px; padding: 22px 12px; background-color: #f0f3f4; + box-shadow: 0 0 8px 5px #920094; + border: solid 1.6px #920094; border-radius: 4px; } .HomeView__upgradeIcon { - background-image: url('..') + background-image: upgradeShieldIcon(); } .HomeView__featureIcon { height: 50px; @@ -112,15 +114,6 @@ margin: 0 0 0 50px; background-image: buildIconClipboardCheck(#4a4a4a, #daf4ff, #1dafed); } -// .HomeView__featureIcon.feature-plus { -// position: relative; -// margin-left: auto; -// margin-right: auto; -// top: -25px; -// height: 46px; -// background-image: buildIconGhosteryPlus(#4a4a4a, #daf4ff); -// background-size: contain; -// } .HomeView__featureTitle { text-align: center; font-size: 18px; @@ -166,8 +159,6 @@ margin-top: 25px; } } -// @media only screen and (max-width: 768px) { -// } // Firefox Font Size Override and Image Size Override @-moz-document url-prefix() { .HomeView--firefoxFontSize { diff --git a/app/scss/partials/_hub_svgs.scss b/app/scss/partials/_hub_svgs.scss index 3e9f5c32d..2d7f215c6 100644 --- a/app/scss/partials/_hub_svgs.scss +++ b/app/scss/partials/_hub_svgs.scss @@ -76,7 +76,9 @@ @function buildIconWandCheck($primary-color, $secondary-color, $tertiary-color) { @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2290%22%20height%3D%2245%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M68.68%2037C63.443%2032.894%2058.256%2028.823%2053%2024.704c1.29-1.671%202.544-3.303%203.846-4.987l11.089%208.691C73.728%2021.951%2079.521%2015.501%2085.353%209L90%2013.233C82.883%2021.17%2075.8%2029.063%2068.68%2037%22%20fill%3D%22#{_url-friendly-color($tertiary-color)}%22/%3E%3Cpath%20fill%3D%22#{_url-friendly-color($secondary-color)}%22%20d%3D%22M20%2021l6-6%2025%2023-6%207z%22/%3E%3Cpath%20d%3D%22M46.92%2038.41L17.702%2010.42c-.747-.715-1.653-1.022-2.613-1.022s-1.92.358-2.612%201.022l-.587.562a3.5%203.5%200%200%200%200%205.057l29.165%2027.94c.747.715%201.653%201.021%202.613%201.021s1.92-.358%202.612-1.022l.64-.51c1.44-1.43%201.44-3.678%200-5.057zM13.33%2012.413l.586-.562c.32-.306.693-.46%201.12-.46.426%200%20.853.154%201.12.46l4.052%203.882-2.826%202.707-4.052-3.882c-.587-.562-.587-1.532%200-2.145zm32.044%2029.574l-.586.562c-.32.307-.694.46-1.12.46-.427%200-.853-.153-1.12-.46l-23.62-22.627%202.826-2.708%2023.673%2022.68a1.423%201.423%200%200%201-.053%202.093zM26.5%206.896c2.08%200%203.733%202.196%203.733%204.086%200%20.562.48%201.021%201.066%201.021.586%200%201.066-.46%201.066-1.021%200-1.89%201.6-4.086%203.733-4.086.586%200%201.066-.46%201.066-1.022s-.48-1.022-1.066-1.022c-2.026%200-3.733-1.583-3.733-3.575%200-.562-.48-1.022-1.066-1.022-.587%200-1.066.46-1.066%201.022%200%201.94-1.653%203.575-3.733%203.575-.586%200-1.066.46-1.066%201.022s.48%201.022%201.066%201.022zm4.746-2.401c.426.562.96%201.073%201.546%201.43-.587.409-1.12.97-1.546%201.584-.427-.613-.96-1.175-1.547-1.584.64-.357%201.12-.868%201.547-1.43zm-15.57%2027.378c-1.332%200-2.452-1.073-2.452-2.35%200-.562-.48-1.021-1.066-1.021-.587%200-1.067.46-1.067%201.021%200%201.277-1.12%202.35-2.452%202.35-.587%200-1.067.46-1.067%201.021%200%20.562.48%201.022%201.067%201.022%201.28%200%202.452%201.328%202.452%202.707%200%20.562.48%201.022%201.067%201.022.586%200%201.066-.46%201.066-1.022%200-1.379%201.173-2.707%202.453-2.707.586%200%201.066-.46%201.066-1.022%200-.561-.48-1.021-1.066-1.021zm-3.518%201.788c-.214-.256-.427-.511-.694-.715.267-.205.48-.41.694-.613.213.255.426.46.693.613-.267.255-.533.46-.693.715zM9.277%205.414c.587%200%201.067-.46%201.067-1.021%200-.562-.48-1.022-1.067-1.022-1.333%200-2.452-1.072-2.452-2.35C6.825.46%206.345%200%205.758%200c-.586%200-1.066.46-1.066%201.022%200%201.277-1.12%202.35-2.453%202.35-.586%200-1.066.459-1.066%201.02%200%20.563.48%201.022%201.066%201.022%201.28%200%202.453%201.328%202.453%202.707%200%20.562.48%201.022%201.066%201.022.587%200%201.067-.46%201.067-1.022%200-1.379%201.173-2.707%202.452-2.707zM5.758%205.16c-.213-.255-.426-.51-.693-.715.267-.204.48-.409.693-.613.214.255.427.46.694.613-.267.255-.48.46-.694.715zm-.64%2017.162c0%20.562-.48%201.022-1.066%201.022-.213%200-.426.306-.426.613%200%20.562-.48%201.021-1.067%201.021-.586%200-1.066-.46-1.066-1.021%200-.307-.267-.613-.427-.613C.48%2023.343%200%2022.883%200%2022.32S.48%2021.3%201.066%2021.3a.412.412%200%200%200%20.427-.409c0-.562.48-1.022%201.066-1.022.587%200%201.067.46%201.067%201.022%200%20.255.213.409.426.409.64%200%201.067.46%201.067%201.021z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22/%3E%3C/g%3E%3C/svg%3E'); } - +@function upgradeShieldIcon() { + @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2249%22%20height%3D%2250%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23DAF4FF%22%20d%3D%22M5%207.108L26.488%200%2049%207.108c-.964%208.337-2.328%2014.769-4.093%2019.293-2.648%206.787-3.803%207.353-8.186%2012.185-2.922%203.222-6.333%205.93-10.233%208.124-.682%201.354-4.093-2.031-10.232-10.154C10.116%2028.432%206.364%2018.616%205%207.108z%22%2F%3E%3Cg%20fill%3D%22%234A4A4A%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M23.885%2025.324c-3.526-.003-6.383-3.099-6.386-6.918%200-.224-.167-.402-.371-.402s-.37.18-.37.402c-.004%203.819-2.861%206.914-6.387%206.918-.206%200-.371.181-.371.402%200%20.221.166.402.37.402%203.527.003%206.384%203.099%206.387%206.918%200%20.223.167.402.371.402s.37-.18.37-.402c.004-3.819%202.861-6.914%206.387-6.918.206%200%20.371-.181.371-.402%200-.221-.166-.402-.37-.402zm13.192-4.628c-2.351-.002-4.256-2.146-4.258-4.79%200-.154-.11-.278-.247-.278s-.247.125-.247.278c-.002%202.644-1.907%204.788-4.258%204.79-.137%200-.247.125-.247.278%200%20.154.11.278.247.278%202.351.002%204.256%202.146%204.258%204.79%200%20.154.11.278.247.278s.247-.125.247-.278c.002-2.644%201.907-4.788%204.258-4.79.137%200%20.247-.125.247-.278%200-.154-.11-.278-.247-.278zm-9.411-9.38a2.665%202.665%200%2001-2.662-2.662.154.154%200%2000-.308%200%202.665%202.665%200%2001-2.662%202.662.154.154%200%20000%20.308%202.665%202.665%200%20012.662%202.662.154.154%200%2000.308%200%202.665%202.665%200%20012.662-2.662.154.154%200%20000-.308z%22%2F%3E%3Cpath%20d%3D%22M23.326%2049.305l-.885-.51c-.08-.045-.14-.087-.178-.112l-.014-.01C9.425%2040.31%201.767%2027.486.109%2011.591c-.03-.286-.067-.748-.1-1.235a3.322%203.322%200%20012.362-3.429c1.79-.539%2010.16-3.601%2017.397-6.288C20.911.215%2022.108%200%2023.326%200s2.416.215%203.558.64c7.237%202.686%2015.608%205.748%2017.394%206.287a3.322%203.322%200%20012.366%203.435c-.033.482-.071.943-.1%201.23-1.66%2015.895-9.317%2028.718-22.146%2037.085l-.008.005c-.038.025-.1.068-.178.113l-.886.51zM3.56%2010.275c.028.383.057.735.08.948%201.505%2014.432%208.305%2026.132%2019.686%2033.902%2011.384-7.774%2018.181-19.472%2019.687-33.902.022-.213.051-.566.079-.947-2.674-.838-13.98-5.023-17.443-6.308a6.653%206.653%200%2000-4.646-.002C17.543%205.252%206.242%209.434%203.56%2010.275z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); +} // Used in Setup Anti Suite View @function buildAntiTrackingIcon($primary-color) { // Also used in Tutorial Anti Suite View @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2230%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(2.08)%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M9.804%209.03a.692.692%200%200%200-.408%200L.613%2011.36a.787.787%200%200%200-.613.777c.041%206.254%203.39%2012.057%209.15%2015.94a.825.825%200%200%200%20.45.123.825.825%200%200%200%20.45-.123c5.76-3.883%209.109-9.686%209.15-15.94a.787.787%200%200%200-.613-.777L9.804%209.03z%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%222.3%22/%3E%3C/g%3E%3C/svg%3E'); From dd113ce1265e1d619a5f8377d783be040f086ad4 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 18 May 2020 09:35:01 -0400 Subject: [PATCH 37/47] Add url-friendly-params to shield icon --- app/hub/Views/HomeView/HomeView.jsx | 2 +- app/hub/Views/HomeView/HomeView.scss | 3 ++- app/scss/partials/_hub_svgs.scss | 5 +++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/hub/Views/HomeView/HomeView.jsx b/app/hub/Views/HomeView/HomeView.jsx index 9610b1b57..c278f0089 100644 --- a/app/hub/Views/HomeView/HomeView.jsx +++ b/app/hub/Views/HomeView/HomeView.jsx @@ -142,7 +142,7 @@ const HomeView = (props) => {
    -
    +
    {t('hub_home_plus_upgrade_text')}
    diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index d58a9b196..000d72959 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/app/hub/Views/HomeView/HomeView.scss @@ -83,7 +83,8 @@ border-radius: 4px; } .HomeView__upgradeIcon { - background-image: upgradeShieldIcon(); + display: flex; + background-image: upgradeShieldIcon(#DAF4FF, #4a4a4a); } .HomeView__featureIcon { height: 50px; diff --git a/app/scss/partials/_hub_svgs.scss b/app/scss/partials/_hub_svgs.scss index 2d7f215c6..5d90c76ac 100644 --- a/app/scss/partials/_hub_svgs.scss +++ b/app/scss/partials/_hub_svgs.scss @@ -76,9 +76,10 @@ @function buildIconWandCheck($primary-color, $secondary-color, $tertiary-color) { @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2290%22%20height%3D%2245%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M68.68%2037C63.443%2032.894%2058.256%2028.823%2053%2024.704c1.29-1.671%202.544-3.303%203.846-4.987l11.089%208.691C73.728%2021.951%2079.521%2015.501%2085.353%209L90%2013.233C82.883%2021.17%2075.8%2029.063%2068.68%2037%22%20fill%3D%22#{_url-friendly-color($tertiary-color)}%22/%3E%3Cpath%20fill%3D%22#{_url-friendly-color($secondary-color)}%22%20d%3D%22M20%2021l6-6%2025%2023-6%207z%22/%3E%3Cpath%20d%3D%22M46.92%2038.41L17.702%2010.42c-.747-.715-1.653-1.022-2.613-1.022s-1.92.358-2.612%201.022l-.587.562a3.5%203.5%200%200%200%200%205.057l29.165%2027.94c.747.715%201.653%201.021%202.613%201.021s1.92-.358%202.612-1.022l.64-.51c1.44-1.43%201.44-3.678%200-5.057zM13.33%2012.413l.586-.562c.32-.306.693-.46%201.12-.46.426%200%20.853.154%201.12.46l4.052%203.882-2.826%202.707-4.052-3.882c-.587-.562-.587-1.532%200-2.145zm32.044%2029.574l-.586.562c-.32.307-.694.46-1.12.46-.427%200-.853-.153-1.12-.46l-23.62-22.627%202.826-2.708%2023.673%2022.68a1.423%201.423%200%200%201-.053%202.093zM26.5%206.896c2.08%200%203.733%202.196%203.733%204.086%200%20.562.48%201.021%201.066%201.021.586%200%201.066-.46%201.066-1.021%200-1.89%201.6-4.086%203.733-4.086.586%200%201.066-.46%201.066-1.022s-.48-1.022-1.066-1.022c-2.026%200-3.733-1.583-3.733-3.575%200-.562-.48-1.022-1.066-1.022-.587%200-1.066.46-1.066%201.022%200%201.94-1.653%203.575-3.733%203.575-.586%200-1.066.46-1.066%201.022s.48%201.022%201.066%201.022zm4.746-2.401c.426.562.96%201.073%201.546%201.43-.587.409-1.12.97-1.546%201.584-.427-.613-.96-1.175-1.547-1.584.64-.357%201.12-.868%201.547-1.43zm-15.57%2027.378c-1.332%200-2.452-1.073-2.452-2.35%200-.562-.48-1.021-1.066-1.021-.587%200-1.067.46-1.067%201.021%200%201.277-1.12%202.35-2.452%202.35-.587%200-1.067.46-1.067%201.021%200%20.562.48%201.022%201.067%201.022%201.28%200%202.452%201.328%202.452%202.707%200%20.562.48%201.022%201.067%201.022.586%200%201.066-.46%201.066-1.022%200-1.379%201.173-2.707%202.453-2.707.586%200%201.066-.46%201.066-1.022%200-.561-.48-1.021-1.066-1.021zm-3.518%201.788c-.214-.256-.427-.511-.694-.715.267-.205.48-.41.694-.613.213.255.426.46.693.613-.267.255-.533.46-.693.715zM9.277%205.414c.587%200%201.067-.46%201.067-1.021%200-.562-.48-1.022-1.067-1.022-1.333%200-2.452-1.072-2.452-2.35C6.825.46%206.345%200%205.758%200c-.586%200-1.066.46-1.066%201.022%200%201.277-1.12%202.35-2.453%202.35-.586%200-1.066.459-1.066%201.02%200%20.563.48%201.022%201.066%201.022%201.28%200%202.453%201.328%202.453%202.707%200%20.562.48%201.022%201.066%201.022.587%200%201.067-.46%201.067-1.022%200-1.379%201.173-2.707%202.452-2.707zM5.758%205.16c-.213-.255-.426-.51-.693-.715.267-.204.48-.409.693-.613.214.255.427.46.694.613-.267.255-.48.46-.694.715zm-.64%2017.162c0%20.562-.48%201.022-1.066%201.022-.213%200-.426.306-.426.613%200%20.562-.48%201.021-1.067%201.021-.586%200-1.066-.46-1.066-1.021%200-.307-.267-.613-.427-.613C.48%2023.343%200%2022.883%200%2022.32S.48%2021.3%201.066%2021.3a.412.412%200%200%200%20.427-.409c0-.562.48-1.022%201.066-1.022.587%200%201.067.46%201.067%201.022%200%20.255.213.409.426.409.64%200%201.067.46%201.067%201.021z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22/%3E%3C/g%3E%3C/svg%3E'); } -@function upgradeShieldIcon() { - @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2249%22%20height%3D%2250%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23DAF4FF%22%20d%3D%22M5%207.108L26.488%200%2049%207.108c-.964%208.337-2.328%2014.769-4.093%2019.293-2.648%206.787-3.803%207.353-8.186%2012.185-2.922%203.222-6.333%205.93-10.233%208.124-.682%201.354-4.093-2.031-10.232-10.154C10.116%2028.432%206.364%2018.616%205%207.108z%22%2F%3E%3Cg%20fill%3D%22%234A4A4A%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M23.885%2025.324c-3.526-.003-6.383-3.099-6.386-6.918%200-.224-.167-.402-.371-.402s-.37.18-.37.402c-.004%203.819-2.861%206.914-6.387%206.918-.206%200-.371.181-.371.402%200%20.221.166.402.37.402%203.527.003%206.384%203.099%206.387%206.918%200%20.223.167.402.371.402s.37-.18.37-.402c.004-3.819%202.861-6.914%206.387-6.918.206%200%20.371-.181.371-.402%200-.221-.166-.402-.37-.402zm13.192-4.628c-2.351-.002-4.256-2.146-4.258-4.79%200-.154-.11-.278-.247-.278s-.247.125-.247.278c-.002%202.644-1.907%204.788-4.258%204.79-.137%200-.247.125-.247.278%200%20.154.11.278.247.278%202.351.002%204.256%202.146%204.258%204.79%200%20.154.11.278.247.278s.247-.125.247-.278c.002-2.644%201.907-4.788%204.258-4.79.137%200%20.247-.125.247-.278%200-.154-.11-.278-.247-.278zm-9.411-9.38a2.665%202.665%200%2001-2.662-2.662.154.154%200%2000-.308%200%202.665%202.665%200%2001-2.662%202.662.154.154%200%20000%20.308%202.665%202.665%200%20012.662%202.662.154.154%200%2000.308%200%202.665%202.665%200%20012.662-2.662.154.154%200%20000-.308z%22%2F%3E%3Cpath%20d%3D%22M23.326%2049.305l-.885-.51c-.08-.045-.14-.087-.178-.112l-.014-.01C9.425%2040.31%201.767%2027.486.109%2011.591c-.03-.286-.067-.748-.1-1.235a3.322%203.322%200%20012.362-3.429c1.79-.539%2010.16-3.601%2017.397-6.288C20.911.215%2022.108%200%2023.326%200s2.416.215%203.558.64c7.237%202.686%2015.608%205.748%2017.394%206.287a3.322%203.322%200%20012.366%203.435c-.033.482-.071.943-.1%201.23-1.66%2015.895-9.317%2028.718-22.146%2037.085l-.008.005c-.038.025-.1.068-.178.113l-.886.51zM3.56%2010.275c.028.383.057.735.08.948%201.505%2014.432%208.305%2026.132%2019.686%2033.902%2011.384-7.774%2018.181-19.472%2019.687-33.902.022-.213.051-.566.079-.947-2.674-.838-13.98-5.023-17.443-6.308a6.653%206.653%200%2000-4.646-.002C17.543%205.252%206.242%209.434%203.56%2010.275z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); +@function upgradeShieldIcon($primary-color, $secondary-color) { + @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2249%22%20height%3D%2250%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20d%3D%22M5%207.108L26.488%200%2049%207.108c-.964%208.337-2.328%2014.769-4.093%2019.293-2.648%206.787-3.803%207.353-8.186%2012.185-2.922%203.222-6.333%205.93-10.233%208.124-.682%201.354-4.093-2.031-10.232-10.154C10.116%2028.432%206.364%2018.616%205%207.108z%22%2F%3E%3Cg%20fill%3D%22#{_url-friendly-color($secondary-color)}%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M23.885%2025.324c-3.526-.003-6.383-3.099-6.386-6.918%200-.224-.167-.402-.371-.402s-.37.18-.37.402c-.004%203.819-2.861%206.914-6.387%206.918-.206%200-.371.181-.371.402%200%20.221.166.402.37.402%203.527.003%206.384%203.099%206.387%206.918%200%20.223.167.402.371.402s.37-.18.37-.402c.004-3.819%202.861-6.914%206.387-6.918.206%200%20.371-.181.371-.402%200-.221-.166-.402-.37-.402zm13.192-4.628c-2.351-.002-4.256-2.146-4.258-4.79%200-.154-.11-.278-.247-.278s-.247.125-.247.278c-.002%202.644-1.907%204.788-4.258%204.79-.137%200-.247.125-.247.278%200%20.154.11.278.247.278%202.351.002%204.256%202.146%204.258%204.79%200%20.154.11.278.247.278s.247-.125.247-.278c.002-2.644%201.907-4.788%204.258-4.79.137%200%20.247-.125.247-.278%200-.154-.11-.278-.247-.278zm-9.411-9.38a2.665%202.665%200%2001-2.662-2.662.154.154%200%2000-.308%200%202.665%202.665%200%2001-2.662%202.662.154.154%200%20000%20.308%202.665%202.665%200%20012.662%202.662.154.154%200%2000.308%200%202.665%202.665%200%20012.662-2.662.154.154%200%20000-.308z%22%2F%3E%3Cpath%20d%3D%22M23.326%2049.305l-.885-.51c-.08-.045-.14-.087-.178-.112l-.014-.01C9.425%2040.31%201.767%2027.486.109%2011.591c-.03-.286-.067-.748-.1-1.235a3.322%203.322%200%20012.362-3.429c1.79-.539%2010.16-3.601%2017.397-6.288C20.911.215%2022.108%200%2023.326%200s2.416.215%203.558.64c7.237%202.686%2015.608%205.748%2017.394%206.287a3.322%203.322%200%20012.366%203.435c-.033.482-.071.943-.1%201.23-1.66%2015.895-9.317%2028.718-22.146%2037.085l-.008.005c-.038.025-.1.068-.178.113l-.886.51zM3.56%2010.275c.028.383.057.735.08.948%201.505%2014.432%208.305%2026.132%2019.686%2033.902%2011.384-7.774%2018.181-19.472%2019.687-33.902.022-.213.051-.566.079-.947-2.674-.838-13.98-5.023-17.443-6.308a6.653%206.653%200%2000-4.646-.002C17.543%205.252%206.242%209.434%203.56%2010.275z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } + // Used in Setup Anti Suite View @function buildAntiTrackingIcon($primary-color) { // Also used in Tutorial Anti Suite View @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2230%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(2.08)%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M9.804%209.03a.692.692%200%200%200-.408%200L.613%2011.36a.787.787%200%200%200-.613.777c.041%206.254%203.39%2012.057%209.15%2015.94a.825.825%200%200%200%20.45.123.825.825%200%200%200%20.45-.123c5.76-3.883%209.109-9.686%209.15-15.94a.787.787%200%200%200-.613-.777L9.804%209.03z%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%222.3%22/%3E%3C/g%3E%3C/svg%3E'); From 4bd057b7c9b13e376b5e9abb2a1fe9dea3676ccc Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 18 May 2020 10:26:00 -0400 Subject: [PATCH 38/47] Add responsive styles for upgrade promo --- app/hub/Views/HomeView/HomeView.jsx | 12 ++++++------ app/hub/Views/HomeView/HomeView.scss | 14 +++++++++----- app/hub/Views/HomeView/HomeViewContainer.jsx | 3 --- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/app/hub/Views/HomeView/HomeView.jsx b/app/hub/Views/HomeView/HomeView.jsx index c278f0089..f1885738e 100644 --- a/app/hub/Views/HomeView/HomeView.jsx +++ b/app/hub/Views/HomeView/HomeView.jsx @@ -141,17 +141,17 @@ const HomeView = (props) => {
    -
    -
    -
    +
    +
    +
    {t('hub_home_plus_upgrade_text')}
    -
    - {/* TODO: Change navlink to upgrade tab */} - +
    + {isPlus ? t('hub_home_plus_full_protection') : t('hub_home_plus_upgrade_button_text')}
    +
    diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index 000d72959..2ac8bafe3 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/app/hub/Views/HomeView/HomeView.scss @@ -83,8 +83,12 @@ border-radius: 4px; } .HomeView__upgradeIcon { - display: flex; background-image: upgradeShieldIcon(#DAF4FF, #4a4a4a); + margin: 0 42px; + height: 50px; + width: 50px; + background-repeat: no-repeat; + background-position: center center; } .HomeView__featureIcon { height: 50px; @@ -99,6 +103,9 @@ font-weight: bold; line-height: 1.69; } +.HomeView__featureButton { + margin: auto; +} .HomeView__onboardingFeature.feature-tutorial .HomeView__featureIcon { background-image: buildIconWand(#4a4a4a, #daf4ff); } @@ -120,9 +127,6 @@ font-size: 18px; padding: 22px 0 10px; } -.HomeView__featureButton { - margin: 0; -} .HomeView__onboarding .HomeView__featureButton { margin-top: 26px; min-width: 130px; @@ -150,7 +154,7 @@ flex-direction: column; } .HomeView__upgradeIcon { - margin: auto; + margin: 0 auto 15px auto; } .HomeView__upgradeText { text-align: center; diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx index 84d47c31e..01b888dde 100644 --- a/app/hub/Views/HomeView/HomeViewContainer.jsx +++ b/app/hub/Views/HomeView/HomeViewContainer.jsx @@ -118,7 +118,6 @@ class HomeViewContainer extends Component { const { justInstalled } = this.state; const { home, user } = this.props; const isPlus = user && user.subscriptionsPlus || false; - console.log('isPlus: ', user); const { premium_promo_modal_shown, setup_complete, @@ -135,8 +134,6 @@ class HomeViewContainer extends Component { isPlus, }; - const showPromoModal = !premium_promo_modal_shown && !this._premiumSubscriber(); - return (
    {/* Date: Mon, 18 May 2020 11:05:19 -0400 Subject: [PATCH 39/47] Add purple border for non-premium users --- app/hub/Views/HomeView/HomeView.jsx | 11 +++++++---- app/hub/Views/HomeView/HomeView.scss | 11 +++++++---- app/hub/Views/HomeView/HomeViewContainer.jsx | 6 +++--- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/app/hub/Views/HomeView/HomeView.jsx b/app/hub/Views/HomeView/HomeView.jsx index f1885738e..188183ddb 100644 --- a/app/hub/Views/HomeView/HomeView.jsx +++ b/app/hub/Views/HomeView/HomeView.jsx @@ -34,7 +34,7 @@ const HomeView = (props) => { enable_metrics, changeMetrics, email, - isPlus, + isPremium } = props; const accountHref = globals.ACCOUNT_BASE_URL; @@ -61,6 +61,9 @@ const HomeView = (props) => { const setupButtonClassNames = ClassNames('HomeView__featureButton button primary', { hollow: setup_complete, }); + const upgradeContainerClassNames = ClassNames('HomeView__upgradeContainer row align-center-middle', { + 'purple-border': !isPremium + }); return (
    @@ -141,14 +144,14 @@ const HomeView = (props) => {
    -
    +
    {t('hub_home_plus_upgrade_text')}
    - {isPlus ? t('hub_home_plus_full_protection') : t('hub_home_plus_upgrade_button_text')} + {isPremium ? t('hub_home_plus_full_protection') : t('hub_home_plus_upgrade_button_text')}
    @@ -166,7 +169,7 @@ HomeView.propTypes = { enable_metrics: PropTypes.bool.isRequired, changeMetrics: PropTypes.func.isRequired, email: PropTypes.string.isRequired, - isPlus: PropTypes.bool.isRequired, + isPremium: PropTypes.bool.isRequired, }; export default HomeView; diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index 2ac8bafe3..497cf541d 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/app/hub/Views/HomeView/HomeView.scss @@ -73,14 +73,17 @@ padding: 0; background-color: #979797; } -.HomeView__upgrade { +.HomeView__upgradeContainer { display: flex; margin-top: 22px; padding: 22px 12px; background-color: #f0f3f4; - box-shadow: 0 0 8px 5px #920094; - border: solid 1.6px #920094; border-radius: 4px; + + &.purple-border { + box-shadow: 0 0 8px 5px #920094; + border: solid 1.6px #920094; + } } .HomeView__upgradeIcon { background-image: upgradeShieldIcon(#DAF4FF, #4a4a4a); @@ -150,7 +153,7 @@ .HomeView__onboardingFeature.feature-setup-complete { margin: 35px 0 15px; } - .HomeView__upgrade { + .HomeView__upgradeContainer { flex-direction: column; } .HomeView__upgradeIcon { diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx index 090bf9561..ea54ec2aa 100644 --- a/app/hub/Views/HomeView/HomeViewContainer.jsx +++ b/app/hub/Views/HomeView/HomeViewContainer.jsx @@ -121,14 +121,14 @@ class HomeViewContainer extends Component { enable_metrics, changeMetrics: this._handleToggleMetrics, email: user ? user.email : '', - isPlus, + isPremium, }; const showPromoModal = !premium_promo_modal_shown && !isPremium; return (
    - {/* */} + />
    ); From b4f891ee1c8ec202363c4e524db2fe4027f30d40 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 18 May 2020 11:21:24 -0400 Subject: [PATCH 40/47] Update snapshot --- .../__snapshots__/HomeView.test.jsx.snap | 34 ++++++++----------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap b/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap index 0df31b9a5..ab236f6c0 100644 --- a/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap +++ b/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap @@ -139,29 +139,26 @@ exports[`app/hub/Views/HomeView component Snapshot tests with react-test-rendere
    - hub_home_feature_supporter_text + hub_home_plus_upgrade_text
    @@ -313,29 +310,26 @@ exports[`app/hub/Views/HomeView component Snapshot tests with react-test-rendere
    - hub_home_feature_supporter_text + hub_home_plus_upgrade_text
    From e992df0cf3113dfe3fac53247912bac561c6995c Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 18 May 2020 14:37:34 -0400 Subject: [PATCH 41/47] Fix button from leaking outside the container right before hitting breakpoint --- app/hub/Views/HomeView/HomeView.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index 497cf541d..158d7f714 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/app/hub/Views/HomeView/HomeView.scss @@ -87,7 +87,7 @@ } .HomeView__upgradeIcon { background-image: upgradeShieldIcon(#DAF4FF, #4a4a4a); - margin: 0 42px; + margin: 0 35px 0 42px; height: 50px; width: 50px; background-repeat: no-repeat; From d44147fd7cda9a05265d9b1903f80aeb9ac9b982 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 18 May 2020 15:58:06 -0400 Subject: [PATCH 42/47] Refactor colors --- app/hub/Views/HomeView/HomeView.scss | 28 ++++++++++++++-------------- app/scss/partials/_colors.scss | 3 +++ 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index 158d7f714..da8023a36 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/app/hub/Views/HomeView/HomeView.scss @@ -15,7 +15,7 @@ .HomeView { padding-top: 45px; padding-bottom: 25px; - color: #4a4a4a; + color: $tundora; } .HomeView--bolded { font-weight: 700; @@ -28,14 +28,14 @@ margin-right: 23px; } .HomeView__header h1 { - color: #4a4a4a; + color: $tundora; margin-bottom: 19px; } .HomeView__headerTagline { margin-top: 7px; font-size: 20px; line-height: 30px; - color: #4a4a4a; + color: $tundora; } .HomeView__supportContainer { margin-top: 12px; @@ -54,7 +54,7 @@ margin-top: 7px; padding: 27px 12px 30px; border-radius: 4px; - background-color: #f0f3f4; + background-color: $porcelain; } .HomeView__onboardingFeature { margin: 0 8px; @@ -64,29 +64,29 @@ margin: 7px 0 4px; max-width: 1px; padding: 0; - background-color: #979797; + background-color: $dark-silver; } .HomeView__dividerHorizontal { margin: 0 25px; height: 1px; width: 100%; padding: 0; - background-color: #979797; + background-color: $dark-silver; } .HomeView__upgradeContainer { display: flex; margin-top: 22px; padding: 22px 12px; - background-color: #f0f3f4; + background-color: $porcelain; border-radius: 4px; &.purple-border { - box-shadow: 0 0 8px 5px #920094; - border: solid 1.6px #920094; + box-shadow: 0 0 8px 5px $dark-magenta; + border: solid 1.6px $dark-magenta; } } .HomeView__upgradeIcon { - background-image: upgradeShieldIcon(#DAF4FF, #4a4a4a); + background-image: upgradeShieldIcon($baby-blue, $tundora); margin: 0 35px 0 42px; height: 50px; width: 50px; @@ -110,20 +110,20 @@ margin: auto; } .HomeView__onboardingFeature.feature-tutorial .HomeView__featureIcon { - background-image: buildIconWand(#4a4a4a, #daf4ff); + background-image: buildIconWand($tundora, $baby-blue); } .HomeView__onboardingFeature.feature-tutorial-complete .HomeView__featureIcon { width: 100px; margin: 0 0 0 50px; - background-image: buildIconWandCheck(#4a4a4a, #daf4ff, #1dafed); + background-image: buildIconWandCheck($tundora, $baby-blue, $ghosty-blue-alt); } .HomeView__onboardingFeature.feature-setup .HomeView__featureIcon { - background-image: buildIconClipboard(#4a4a4a, #daf4ff); + background-image: buildIconClipboard($tundora, $baby-blue); } .HomeView__onboardingFeature.feature-setup-complete .HomeView__featureIcon { width: 100px; margin: 0 0 0 50px; - background-image: buildIconClipboardCheck(#4a4a4a, #daf4ff, #1dafed); + background-image: buildIconClipboardCheck($tundora, $baby-blue, $ghosty-blue-alt); } .HomeView__featureTitle { text-align: center; diff --git a/app/scss/partials/_colors.scss b/app/scss/partials/_colors.scss index 4695aab80..c9152e37d 100644 --- a/app/scss/partials/_colors.scss +++ b/app/scss/partials/_colors.scss @@ -20,6 +20,7 @@ $dark-gray: #111111; //bnkd_top_header $medium-gray: #333333; //form_label $bright-gray: #394045; //bknd_secondary_nav, $header-color $pale-sky: #6E7B86; //secondary_nav_active_tab +$dark-silver: #979797; $silver-chalice: #A3A3A3; //form_field_border $tundora: #4A4A4A; //body-font-color $light-gray: #A6A6A6; //top_nav, button_disabled @@ -34,10 +35,12 @@ $white: #FFFFFF; /* BLUES */ $ghosty-blue: #00AEF0; +$ghosty-blue-alt: #1dafed; $active-blue: #48ACD3; //top_nav_active_tab $link-blue: #2092BF; //primary-color $button-primary: #3AA2CF; $dark-cyan-blue: #325e97; //insights modal border +$baby-blue: #DAF4FF; //plus-upgrade icon /* GREENS */ $spring-green: #6aa103; From 5b22311e0e04b44f03f7b473b299b8a74da05132 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 18 May 2020 16:02:45 -0400 Subject: [PATCH 43/47] Small style changes --- app/hub/Views/HomeView/HomeView.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index da8023a36..0232d5d72 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/app/hub/Views/HomeView/HomeView.scss @@ -89,9 +89,7 @@ background-image: upgradeShieldIcon($baby-blue, $tundora); margin: 0 35px 0 42px; height: 50px; - width: 50px; - background-repeat: no-repeat; - background-position: center center; + width: 49px; } .HomeView__featureIcon { height: 50px; From 5406aafc71ec3c8619a3a087ff6d1602300fb33a Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 19 May 2020 11:35:30 -0400 Subject: [PATCH 44/47] Fix responsive styling for button when logged into a premium account --- app/hub/Views/HomeView/HomeView.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index 0232d5d72..1e0d4a1fc 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/app/hub/Views/HomeView/HomeView.scss @@ -87,7 +87,7 @@ } .HomeView__upgradeIcon { background-image: upgradeShieldIcon($baby-blue, $tundora); - margin: 0 35px 0 42px; + margin: 0px 35px 0 30px; height: 50px; width: 49px; } From 03bdff30fdf1109d2cfdf9b06be5f7e4b8f27e31 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 19 May 2020 17:18:39 -0400 Subject: [PATCH 45/47] Change copy --- _locales/en/messages.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 5608d6508..6c1df23b7 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1301,7 +1301,7 @@ "message": "Upgrade now" }, "hub_home_plus_full_protection": { - "message": "You have full protection" + "message": "You are fully protected!" }, "hub_setup_page_title": { "message": "Ghostery Hub - Setup" From f380b5914e561a81f92535c11517849df72cb50a Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 15 Jun 2020 15:14:03 -0400 Subject: [PATCH 46/47] Fix passing wrong prop --- app/hub/Views/HomeView/HomeViewContainer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx index 53e472312..7183d2a88 100644 --- a/app/hub/Views/HomeView/HomeViewContainer.jsx +++ b/app/hub/Views/HomeView/HomeViewContainer.jsx @@ -137,7 +137,7 @@ class HomeViewContainer extends Component { enable_metrics={enable_metrics} changeMetrics={this._handleToggleMetrics} email={user ? user.email : ''} - isPlus={isPlus} + isPremium={isPremium} />
    ); From f06085795fa4d6816980bb0ce6410a09a2e105f3 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 15 Jun 2020 15:37:38 -0400 Subject: [PATCH 47/47] Update tests and snapshot --- app/hub/Views/HomeView/__tests__/HomeView.test.jsx | 6 +++--- .../HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/hub/Views/HomeView/__tests__/HomeView.test.jsx b/app/hub/Views/HomeView/__tests__/HomeView.test.jsx index 16d25247b..7777bd442 100644 --- a/app/hub/Views/HomeView/__tests__/HomeView.test.jsx +++ b/app/hub/Views/HomeView/__tests__/HomeView.test.jsx @@ -28,7 +28,7 @@ describe('app/hub/Views/HomeView component', () => { enable_metrics: true, changeMetrics: () => {}, email: 'test@example.com', - isPlus: true, + isPremium: true, }; const component = renderer.create( @@ -47,7 +47,7 @@ describe('app/hub/Views/HomeView component', () => { enable_metrics: false, changeMetrics: () => {}, email: '', - isPlus: false, + isPremium: false, }; const component = renderer.create( @@ -67,7 +67,7 @@ describe('app/hub/Views/HomeView component', () => { enable_metrics: false, changeMetrics: jest.fn(), email: '', - isPlus: false, + isPremium: false, }; const component = shallow(); diff --git a/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap b/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap index ab236f6c0..c1523a3f7 100644 --- a/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap +++ b/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap @@ -310,7 +310,7 @@ exports[`app/hub/Views/HomeView component Snapshot tests with react-test-rendere
    - hub_home_plus_upgrade_button_text + hub_home_plus_full_protection