From 901c4fab12332997b4a6332b9ce950043f8c9c94 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 7 May 2020 11:42:02 -0400 Subject: [PATCH 001/133] 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 002/133] 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 003/133] 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 004/133] 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 005/133] 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 006/133] 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 007/133] 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 008/133] 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 009/133] 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 010/133] 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 011/133] 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 012/133] 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 013/133] 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 014/133] 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 015/133] 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 016/133] 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 017/133] 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 018/133] 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 019/133] 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 020/133] 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 021/133] 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 022/133] 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 023/133] 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 024/133] 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 025/133] 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 026/133] 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 027/133] 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 028/133] 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 029/133] 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 030/133] 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 031/133] 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 032/133] 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 033/133] 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 034/133] 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 035/133] 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 036/133] 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 037/133] 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 038/133] 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 039/133] 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 040/133] 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 041/133] 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 042/133] 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 043/133] 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 044/133] 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 045/133] 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 bdf4f3053df675a168600546ba8dc891f18e5620 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 20 May 2020 10:48:26 -0400 Subject: [PATCH 046/133] Remove errors from UpgradePlanView --- _locales/en/messages.json | 3 + app/hub/Views/HomeView/HomeViewContainer.jsx | 4 +- .../SideNavigationViewContainer.jsx | 1 + .../Views/UpgradePlanView/UpgradePlanView.jsx | 382 ++++++++++++++++++ .../UpgradePlanView/UpgradePlanView.scss | 0 app/hub/index.jsx | 2 + manifest.json | 3 +- 7 files changed, 392 insertions(+), 3 deletions(-) create mode 100644 app/hub/Views/UpgradePlanView/UpgradePlanView.jsx create mode 100644 app/hub/Views/UpgradePlanView/UpgradePlanView.scss diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 6b30646c9..c4c959d24 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1237,6 +1237,9 @@ "hub_side_navigation_home": { "message": "Home" }, + "hub_side_navigation_upgrade_plan": { + "message": "Upgrade Plan" + }, "hub_side_navigation_tutorial": { "message": "Take a Tutorial" }, diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx index c98e55b78..3f0048959 100644 --- a/app/hub/Views/HomeView/HomeViewContainer.jsx +++ b/app/hub/Views/HomeView/HomeViewContainer.jsx @@ -138,7 +138,7 @@ class HomeViewContainer extends Component { return (
    - + /> */}
    ); diff --git a/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx b/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx index 1388a5ea7..49d2a1fb3 100644 --- a/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx +++ b/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx @@ -50,6 +50,7 @@ class SideNavigationViewContainer extends Component { const menuItems = [ { href: '/', icon: 'home', text: t('hub_side_navigation_home') }, + { href: '/upgrade', icon: 'home', text: t('hub_side_navigation_upgrade_plan') }, { href: '/setup', icon: 'setup', text: t('customize_setup') }, { href: '/tutorial', icon: 'tutorial', text: t('hub_side_navigation_tutorial') }, { href: '/plus', icon: 'plus', text: t('get_ghostery_plus') }, diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx new file mode 100644 index 000000000..78bb03055 --- /dev/null +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx @@ -0,0 +1,382 @@ +/** + * Upgrade Plan View Component + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +import React from 'react'; +import ClassNames from 'classnames'; +import PropTypes from 'prop-types'; +import { NavLink } from 'react-router-dom'; +import globals from '../../../../src/classes/Globals'; +import { ToggleCheckbox } from '../../../shared-components'; + +/** + * A Functional React component for rendering the Home View + * @return {JSX} JSX for rendering the Home View of the Hub app + * @memberof HubComponents + */ +const UpgradePlanView = (props) => { + const test = ''; + return ( +
    +
    +
    +
    +

    Choose the right plan for you

    +
    +
    + Yearly + + Monthly +
    +
    +
    +
    +
    +
    +
    +
    +
    + Ghostery Free +

    Ghostery

    +
    +

    Free

    +
    + Sign up +

    Basic Protection

    +

    + Ghostery Check + Basic Browser Protection +

    +
    +
    +
    +
    + Ghostery Plus +

    Ghostery Plus

    +
    +

    3.99

    +

    4.99

    +

    per month

    +
    + Buy now +

    Additional Protection

    +

    + Ghostery Check + Basic Browser Protection +

    +

    + Ghostery Check + Advanced Device Protection +

    +
    +
    +
    +
    + Ghostery Premium +

    Ghostery Premium

    +
    +

    $8.99

    +

    $11.99

    +

    per month

    +
    + Buy Now +

    Maximum Protection

    +

    + Ghostery Check + Basic Browser Protection +

    +

    + Ghostery Check + Advanced Device Protection +

    +

    + Ghostery Check + VPN +

    +
    +
    +
    +
    +
    + Check out the full list of features +
    +
    +
    +
    + +
    +
    +
    +

    Choose the right plan for you

    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + Ghostery Free +

    Ghostery

    +
    +

    Free

    +
    + Free +

    Basic Protection

    +

    + Ghostery Check + Basic Browser Protection +

    +
    +
    +
    +
    +
    +
    + Ghostery Plus +

    Ghostery Plus

    +
    +

    $3.99

    +

    $4.99

    +

    per month

    +
    +
    +
    + Yearly + + Monthly +
    +
    + Buy now +

    Additional Protection

    +

    + Ghostery Check + Basic Browser Protection +

    +

    + Ghostery Check + Advanced Device Protection +

    +
    +
    +
    +
    +
    +
    + Ghostery Premium +

    Ghostery Premium

    +
    +

    $8.99

    +

    $11.99

    +

    per month

    +
    +
    +
    + Yearly + + Monthly +
    +
    + Buy now +

    Maximum Protection

    +

    + Ghostery Check + Basic Browser Protection +

    +

    + Ghostery Check + Advanced Device Protection +

    +

    + Ghostery Check + VPN +

    +
    +
    +
    +
    + +
    +
    +
    + Ghostery Free +

    Ghostery

    +
    +

    Free

    +
    + Free +
    +
    +
    +
    + Ghostery Plus +

    Ghostery Plus

    +
    +

    $3.99

    +

    per month

    +
    + Buy now +
    +
    +
    +
    + Ghostery Premium +

    Ghostery Premium

    +
    +

    $8..99

    +

    per month

    +
    + Buy now +
    +
    +
    +
    + +
    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* */} + + + + + +
    + GhosteryGhostery PlusGhostery Premium
    Browser Tracker BlockingGhostery CheckGhostery CheckGhostery Check
    Browser Ad BlockingGhostery CheckGhostery CheckGhostery Check
    Custom Blocking PreferencesGhostery CheckGhostery CheckGhostery Check
    Extension ThemesGhostery CheckGhostery Check
    Historical Extension StatsGhostery CheckGhostery Check
    Application Tracker BlockingGhostery CheckGhostery Check
    Application Ad BlockingGhostery CheckGhostery Check
    VPNGhostery Check
    No VPN LogsGhostery Check
    P2P SupportGhostery Check
    IPV6 Leak ProtectionGhostery Check
    Physical ServersGhostery Check
    Unlimited BandwithGhostery Check
    FreeBuy NowBuy Now
    +
    +
    +
    +
    +
    + ); +}; + +export default UpgradePlanView; diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss new file mode 100644 index 000000000..e69de29bb diff --git a/app/hub/index.jsx b/app/hub/index.jsx index 020cde46e..e5bba3e84 100644 --- a/app/hub/index.jsx +++ b/app/hub/index.jsx @@ -30,6 +30,7 @@ import ProductsView from './Views/ProductsView'; import CreateAccountView from './Views/CreateAccountView'; import ForgotPasswordView from '../shared-components/ForgotPassword/ForgotPasswordContainer'; import LogInView from './Views/LogInView'; +import UpgradePlanView from './Views/UpgradePlanView/UpgradePlanView'; const store = createStore(); @@ -40,6 +41,7 @@ const store = createStore(); const Hub = () => ( + diff --git a/manifest.json b/manifest.json index 0a9eb105c..337da89a5 100644 --- a/manifest.json +++ b/manifest.json @@ -7,6 +7,7 @@ "version_name": "8.5.0", "default_locale": "en", "description": "__MSG_short_description__", + "debug": true, "icons": { "16": "app/images/icon16.png", "48": "app/images/icon48.png", @@ -103,4 +104,4 @@ "cliqz/offers-templates/checkout.html", "cliqz/offers-templates/control-center.html" ] -} \ No newline at end of file +} From 0ddb50801644cfc2ffd30c79107f8f50689653b8 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 20 May 2020 11:06:20 -0400 Subject: [PATCH 047/133] Remove sass errors from UpgradePlanView.scss --- .../Views/UpgradePlanView/UpgradePlanView.jsx | 2 +- .../UpgradePlanView/UpgradePlanView.scss | 495 ++++++++++++++++++ app/scss/hub.scss | 1 + 3 files changed, 497 insertions(+), 1 deletion(-) diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx index 78bb03055..f7ab8e543 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx @@ -26,7 +26,7 @@ import { ToggleCheckbox } from '../../../shared-components'; const UpgradePlanView = (props) => { const test = ''; return ( -
    +
    diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss index e69de29bb..a7f3960fa 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss @@ -0,0 +1,495 @@ + +$price-blue: blue; +$price-purple: purple; +.page-template-page-pricing { + main { + padding-bottom: 0; + } + h1 { + margin-top: rem-calc(40); + color: $tundora; + font-size: rem-calc(24); + font-family: Roboto; + font-stretch: condensed; + } + + .toggle-switch { + span { + vertical-align: middle; + @include breakpoint(medium down) { + font-size: rem-calc(12); + } + } + } + + .price-yearly, + .price-monthly { + display: none; + &.active { + display: inline-block; + } + } + + .tabs { + border-radius: 4px; + border: 2px solid #6a6a6a; + } + + .tabs-content { + border: none; + background-color: $white; + } + + .tabs-title { + &-blue { + border-right: 2px solid #6a6a6a; + >a[aria-selected='true'] { + background-color: $price-blue; + } + &.is-active { + background-color: $price-blue; + } + &:hover { + background-color: $price-blue; + color: $white; + } + } + &-gold { + border-right: 2px solid #6a6a6a; + >a[aria-selected='true'] { + background-image: linear-gradient(112deg, #b8860b, #e8cc89); + } + &.is-active { + background-image: linear-gradient(112deg, #b8860b, #e8cc89); + } + a { + &:hover { + background-image: linear-gradient(112deg, #b8860b, #e8cc89); + color: $white; + } + } + } + &-purple { + >a[aria-selected='true'] { + background-image: linear-gradient(112deg, #5c218b, #00aef0); + } + &.is-active { + background-image: linear-gradient(112deg, #5c218b, #00aef0); + } + a { + &:hover { + background-image: linear-gradient(112deg, #5c218b, #00aef0); + color: $white; + } + } + } + } + .tabs-title>a:focus { + background-color: transparent; + color: $white; + } + .tabs-title>a:hover { + background-color: $price-blue; + color: $white; + } + #price-tabs-lower { + + a { + padding: 0.7rem 1rem; + } + } + + .tiers-group { + margin-top: rem-calc(20); + margin-bottom: rem-calc(50); + @include breakpoint(medium down) { + margin-bottom: rem-calc(10); + margin-top: rem-calc(40); + } + li { + width: 120px; + @include breakpoint(small down) { + width: 75px; + } + a { + color: #6a6a6a; + font-size: rem-calc(12); + font-family: 'Roboto'; + } + &.is-active { + a { + color: $white; + } + } + } + } + .switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + margin-left: rem-calc(20); + margin-right: rem-calc(20); + } + + /* Hide default HTML checkbox */ + .switch input { + opacity: 0; + width: 0; + height: 0; + + } + + /* The slider */ + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: $mystic; + -webkit-transition: .4s; + transition: .4s; + border: 2px solid #6a6a6a; + + } + + .slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 2px; + background-color: #6a6a6a; + -webkit-transition: .4s; + transition: .4s; + } + + input.checked + .slider { + background-color: $mystic; + } + + input:focus + .slider { + box-shadow: 0 0 1px $mystic; + } + + input.checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + + /* Rounded sliders */ + .slider.round { + border-radius: 34px; + } + + .slider.round:before { + border-radius: 50%; + } + + .card-wrapper { + margin-top: rem-calc(80); + @include breakpoint(medium down) { + margin-top: 0; + } + } + .card-outer { + flex-shrink: 3; + padding: 0 20px; + &-remove { + @include breakpoint(large up) { + padding-right: 0; + } + @include breakpoint(medium down) { + margin-top: rem-calc(90); + } + } + } + .price { + min-height: 85px; + margin-bottom: rem-calc(20); + &-blue { + color: $price-blue; + } + &-gold { + color: $gold; + } + &-purple { + color: $price-purple; + } + p { + margin-bottom: 0; + } + } + .card { + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.5); + margin-bottom: rem-calc(40); + width: 250px; + margin-left: auto; + margin-right: auto; + text-align: center; + padding-top: rem-calc(3); + padding-bottom: rem-calc(40); + .font-size-36 { + font-size: rem-calc(36); + } + .font-size-12 { + font-size: rem-calc(12); + } + h2 { + color: $tundora; + font-family: "Roboto Condensed"; + font-size: 18px; + font-weight: 400; + margin-top: rem-calc(30); + margin-bottom: rem-calc(15); + } + + &-image-top { + margin-top: -76px; + width: 100%; + } + &-sub-header { + margin-bottom: rem-calc(15); + } + &-sub-copy { + font-size: rem-calc(12); + margin-bottom: rem-calc(15); + text-align: left; + padding-left: rem-calc(40); + img { + padding-right: 10px; + } + } + .button { + margin-top: rem-calc(10); + margin-bottom: rem-calc(20); + width: 140px; + } + } + .hide-for-large { + .card { + box-shadow: none; + margin-bottom: 0; + padding-bottom: rem-calc(15); + } + p { + font-size: rem-calc(12); + } + .price { + min-height: auto; + font-size: rem-calc(12); + } + .toggle-switch { + margin-bottom: rem-calc(50); + } + .protection-header { + margin-bottom: rem-calc(15); + display: none; + &.is-active { + display: block; + } + } + .protection-header-plus-yearly { + display: none; + &.is-active { + display: block; + } + } + .table-header { + margin-top: rem-calc(30); + font-size: rem-calc(18); + } + + .checkmark { + display: none; + &.is-active { + display: inline-block; + } + &-gray { + display: none; + &.is-active { + display: inline-block; + } + } + } + .footer-buttons { + .button { + width: 140px; + margin-top: rem-calc(25); + } + } + } + + + .tick { font-size:18px; color:$price-blue; } + + .page-template-page-content-modules .module-editor .learn-more { + color: $purple; + text-decoration: none; + margin-top: rem-calc(15); + @include breakpoint(medium down) { + margin-top: rem-calc(5); + } + } + .page-template-page-content-modules .module-editor .arrow { + // background-image: url('../images/campaigns/tier-pricing/arrow_purple.png'); + width: 30px; + height: 16px; + margin-top: rem-calc(25); + } + + .button-gold { + background-image: linear-gradient(105deg, #b8860b 3%, #efd396 100%); + border: none; + } + .button-purple-blue { + background-image: linear-gradient(105deg, #720174 3%, #00aef0 100%); + border: none; + } + + .comparison-table { + background-color: $alabaster; + padding-top: rem-calc(100); + padding-bottom: rem-calc(100); + margin-top: rem-calc(40); + @include breakpoint(medium down) { + margin-top: rem-calc(40); + padding-top: 0; + background-color: $white; + } + ul { + display:flex; + top:0px; + z-index:10; + padding-bottom:14px; + margin: 0; + @include breakpoint(medium down) { + padding-bottom: 0; + margin-bottom: rem-calc(40); + } + } + li { + list-style:none; + flex:1; + &:hover { + cursor: pointer; + } + } + li:last-child { + border-right:1px solid #b6b6b6; + @include breakpoint(medium down) { + border-right: none; + } + } + button { + width:100%; + padding: 10px; + font-size:14px; + height:60px; + color: $white; + &:hover { + cursor: pointer; + } + } + li.active button { + color: $white; + font-weight:bold; + } + table { + border-collapse:collapse; table-layout:fixed; + width:100%; + max-width: 750px; + } + tbody { + @include breakpoint(medium down) { + border: 1px solid #b6b6b6; + } + } + th { + background:$alabaster; display:none; color: $white; + font-family: 'Open Sans'; + font-size: rem-calc(14); + font-weight: normal; + } + td { + font-size: rem-calc(12); + } + td, th { + height:53px; + max-width: 120px; + } + td,th { + border: 1px solid #b6b6b6; + padding: 10px; + empty-cells:show; + @include breakpoint(medium down) { + border: none; + } + } + td,th { + text-align:left; + @include breakpoint(medium down) { + text-align: center; + } + } + td+td, th+th { + text-align:center; + //display:none; + } + td.default { + display:table-cell; + } + + .bg-blue { + background-color: $price-blue; + } + .bg-gold { + background-image: linear-gradient(to right, #b8860b 0%, #f1d89e); + } + .bg-purple-blue { + background-image: linear-gradient(120deg, #720174 0%, #5a258e 18%, #2a6ec2 57%, #0c9ce3 86%, #00aef0 100%); + } + .sep { + background:$alabaster; + font-weight:bold; + } + .txt-l { font-size:28px; font-weight:bold; } + .txt-top { position:relative; top:-9px; left:-2px; } + + .hide { + border:0; + background:none; + } + .button { + margin-bottom: 0; + padding-left: rem-calc(40); + padding-right: rem-calc(40); + @include breakpoint(medium down) { + padding-left: rem-calc(20); + padding-right: rem-calc(20); + } + } + + @include breakpoint(large up) { + ul { + display:none; + } + td,th { + display:table-cell !important; + } + td,th { + width: 200px; + max-width: 200px; + + } + td+td, th+th { + width: 166px; + max-width: 166px; + } + } + } +} diff --git a/app/scss/hub.scss b/app/scss/hub.scss index 2c220f43d..60394aad7 100644 --- a/app/scss/hub.scss +++ b/app/scss/hub.scss @@ -73,6 +73,7 @@ html, body, #root { @import '../hub/Views/SignedInView/SignedInView.scss'; @import '../hub/Views/LogInView/LogInView.scss'; @import '../hub/Views/CreateAccountView/CreateAccountView.scss'; +@import '../hub/Views/UpgradePlanView/UpgradePlanView.scss'; // Imports from ../shared-components directory @import '../shared-components/ExitButton/ExitButton.scss'; From b74ada696d8cee422ed053bf2b19d84e56fac3cf Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 20 May 2020 11:58:18 -0400 Subject: [PATCH 048/133] Start replacing strings with messages --- _locales/en/messages.json | 39 ++++++++++ .../Views/UpgradePlanView/UpgradePlanView.jsx | 78 +++++++++---------- 2 files changed, 78 insertions(+), 39 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c4c959d24..aece3d9f7 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1300,6 +1300,42 @@ "hub_home_feature_supporter_text": { "message": "Upgrade to Ghostery Plus and unlock special features." }, + "hub_upgrade_choose_plan": { + "message": "Upgrade your Ghostery protection plan" + }, + "hub_upgrade_yearly": { + "message": "Yearly" + }, + "hub_upgrade_monthly": { + "message": "Monthly" + }, + "hub_upgrade_plan_free": { + "message": "Free" + }, + "hub_upgrade_already_protected": { + "message": "Already Protected" + }, + "hub_upgrade_basic_protection": { + "message": "Basic Protection" + }, + "hub_upgrade_basic_browser_protection": { + "message": "Basic Browser Protection" + }, + "hub_upgrade_advanced_browser_protection": { + "message": "Advanced Browser Protection" + }, + "hub_upgrade_maximum_browser_protection": { + "message": "Maximum Browser Protection" + }, + "hub_upgrade_vpn": { + "message": "Maximum Browser Protection" + }, + "hub_upgrade_buy_now": { + "message": "Buy Now" + }, + "hub_upgrade_additional_protection": { + "message": "Additional Protection" + }, "hub_setup_page_title": { "message": "Ghostery Hub - Setup" }, @@ -2207,6 +2243,9 @@ "ghostery_basic": { "message": "Basic" }, + "ghostery": { + "message": "Ghostery" + }, "ghostery_plus": { "message": "Ghostery Plus" }, diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx index f7ab8e543..29a8c1aeb 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx @@ -19,26 +19,26 @@ import globals from '../../../../src/classes/Globals'; import { ToggleCheckbox } from '../../../shared-components'; /** - * A Functional React component for rendering the Home View + * A React class component for rendering the Home View * @return {JSX} JSX for rendering the Home View of the Hub app * @memberof HubComponents */ -const UpgradePlanView = (props) => { - const test = ''; +const UpgradePlanView = () => { + const test = true; return (
    -

    Choose the right plan for you

    +

    {t('hub_upgrade_choose_plan')}

    - Yearly + {t('hub_upgrade_yearly')} - Monthly + {t('hub_upgrade_monthly')}
    @@ -49,61 +49,61 @@ const UpgradePlanView = (props) => {
    Ghostery Free -

    Ghostery

    +

    {t('ghostery')}

    -

    Free

    +

    {t('hub_upgrade_plan_free')}

    - Sign up -

    Basic Protection

    + {t('hub_upgrade_already_protected')} +

    {t('hub_upgrade_basic_protection')}

    Ghostery Check - Basic Browser Protection + {t('hub_upgrade_basic_browser_protection')}

    Ghostery Plus -

    Ghostery Plus

    +

    {t('ghostery_plus')}

    3.99

    4.99

    -

    per month

    +

    {t('per_month')}

    - Buy now -

    Additional Protection

    + {t('upgrade_to_plus')} +

    {t('hub_upgrade_additional_protection')}

    Ghostery Check - Basic Browser Protection + {t('hub_upgrade_basic_browser_protection')}

    Ghostery Check - Advanced Device Protection + {t('hub_upgrade_advanced_browser_protection')}

    Ghostery Premium -

    Ghostery Premium

    +

    {t('panel_detail_premium_title')}

    $8.99

    $11.99

    -

    per month

    +

    {t('per_month')}

    Buy Now -

    Maximum Protection

    +

    {t('hub_upgrade_maximum_browser_protection')}

    Ghostery Check - Basic Browser Protection + {t('hub_upgrade_basic_browser_protection')}

    Ghostery Check - Advanced Device Protection + {t('hub_upgrade_advanced_browser_protection')}

    Ghostery Check - VPN + {t('hub_upgrade_vpn')}

    @@ -137,7 +137,7 @@ const UpgradePlanView = (props) => {
    Ghostery Free -

    Ghostery

    +

    {t('ghostery')}

    Free

    @@ -154,11 +154,11 @@ const UpgradePlanView = (props) => {
    Ghostery Plus -

    Ghostery Plus

    +

    {t('ghostery_plus')}

    $3.99

    $4.99

    -

    per month

    +

    {t('per_month')}

    @@ -187,11 +187,11 @@ const UpgradePlanView = (props) => {
    Ghostery Premium -

    Ghostery Premium

    +

    {t('panel_detail_premium_title')}

    $8.99

    $11.99

    -

    per month

    +

    {t('per_month')}

    @@ -226,7 +226,7 @@ const UpgradePlanView = (props) => {
    Ghostery Free -

    Ghostery

    +

    {t('ghostery')}

    Free

    @@ -236,10 +236,10 @@ const UpgradePlanView = (props) => {
    Ghostery Plus -

    Ghostery Plus

    +

    {t('ghostery_plus')}

    $3.99

    -

    per month

    +

    {t('per_month')}

    Buy now
    @@ -247,10 +247,10 @@ const UpgradePlanView = (props) => {
    Ghostery Premium -

    Ghostery Premium

    +

    {t('panel_detail_premium_title')}

    $8..99

    -

    per month

    +

    {t('per_month')}

    Buy now
    @@ -264,13 +264,13 @@ const UpgradePlanView = (props) => {
    • - +
    • - +
    • - +
    @@ -278,9 +278,9 @@ const UpgradePlanView = (props) => { - Ghostery - Ghostery Plus - Ghostery Premium + {t('ghostery')} + {t('ghostery_plus')} + {t('panel_detail_premium_title')} From 783c7aa57ddde566714db2ec9ec399da54aa103e Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 20 May 2020 13:54:06 -0400 Subject: [PATCH 049/133] Finish replacing strings with messages --- _locales/en/messages.json | 64 +++++++++- .../Views/UpgradePlanView/UpgradePlanView.jsx | 113 +++++++++--------- 2 files changed, 115 insertions(+), 62 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index aece3d9f7..572780a9e 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1321,21 +1321,75 @@ "hub_upgrade_basic_browser_protection": { "message": "Basic Browser Protection" }, - "hub_upgrade_advanced_browser_protection": { - "message": "Advanced Browser Protection" + "hub_upgrade_advanced_device_protection": { + "message": "Advanced Device Protection" }, "hub_upgrade_maximum_browser_protection": { "message": "Maximum Browser Protection" }, "hub_upgrade_vpn": { - "message": "Maximum Browser Protection" + "message": "vpn" + }, + "hub_upgrade_to_premium": { + "message": "Upgrade to Premium" + }, + "hub_upgrade_scroll_down": { + "message": "Check out the full list of features" }, - "hub_upgrade_buy_now": { - "message": "Buy Now" + "hub_upgrade_plus": { + "message": "Plus" }, "hub_upgrade_additional_protection": { "message": "Additional Protection" }, + "hub_upgrade_browser_tracker_blocking": { + "message": "Browser Tracker Blocking" + }, + "hub_upgrade_browser_ad_blocking": { + "message": "Browser Ad Blocking" + }, + "hub_upgrade_custom_blocking_preferences": { + "message": "Custom Blocking Preferences" + }, + "hub_upgrade_extension_themes": { + "message": "Extension Themes" + }, + "hub_upgrade_historical_extension_stats": { + "message": "Extension Themes" + }, + "hub_upgrade_application_tracker_blocking": { + "message": "Application Tracker Blocking" + }, + "hub_upgrade_application_ad_blocking": { + "message": "Application Tracker Blocking" + }, + "hub_upgrade_no_vpn_logs": { + "message": "No VPN logs" + }, + "hub_upgrade_P2P_support": { + "message": "P2P support" + }, + "hub_upgrade_IPV6_leak_protection": { + "message": "IPV6 Leak Protection" + }, + "hub_upgrade_physical_servers": { + "message": "Physical Servers" + }, + "hub_upgrade_unlimited_bandwidth": { + "message": "Unlimited Bandwidth" + }, + "hub_upgrade_ghostery_plus_yearly_price": { + "message": "$3.99" + }, + "hub_upgrade_g4ostery_plus_monthly_price": { + "message": "$4.99" + }, + "hub_upgrade_ghostery_premium_yearly_price": { + "message": "$8.99" + }, + "hub_upgrade_g4ostery_premium_monthly_price": { + "message": "$11.99" + }, "hub_setup_page_title": { "message": "Ghostery Hub - Setup" }, diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx index 29a8c1aeb..412e6447b 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx @@ -66,8 +66,8 @@ const UpgradePlanView = () => { Ghostery Plus

    {t('ghostery_plus')}

    -

    3.99

    -

    4.99

    +

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    +

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    {t('per_month')}

    {t('upgrade_to_plus')} @@ -78,7 +78,7 @@ const UpgradePlanView = () => {

    Ghostery Check - {t('hub_upgrade_advanced_browser_protection')} + {t('hub_upgrade_advanced_device_protection')}

    @@ -87,19 +87,19 @@ const UpgradePlanView = () => { Ghostery Premium

    {t('panel_detail_premium_title')}

    -

    $8.99

    -

    $11.99

    +

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    +

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    {t('per_month')}

    - Buy Now -

    {t('hub_upgrade_maximum_browser_protection')}

    + {t('hub_upgrade_to_premium')} +

    { t('hub_upgrade_maximum_browser_protection') }

    Ghostery Check {t('hub_upgrade_basic_browser_protection')}

    Ghostery Check - {t('hub_upgrade_advanced_browser_protection')} + {t('hub_upgrade_advanced_device_protection')}

    Ghostery Check @@ -110,7 +110,7 @@ const UpgradePlanView = () => {

    - Check out the full list of features + { t('hub_upgrade_scroll_down') }
    @@ -119,15 +119,15 @@ const UpgradePlanView = () => {
    -

    Choose the right plan for you

    +

    { t('hub_upgrade_choose_plan') }

    @@ -139,13 +139,13 @@ const UpgradePlanView = () => { Ghostery Free

    {t('ghostery')}

    -

    Free

    +

    {t('hub_upgrade_plan_free')}

    - Free -

    Basic Protection

    + {t('hub_upgrade_plan_free')} +

    {t('hub_upgrade_basic_protection')}

    Ghostery Check - Basic Browser Protection + {t('hub_upgrade_basic_browser_protection')}

    @@ -156,29 +156,29 @@ const UpgradePlanView = () => { Ghostery Plus

    {t('ghostery_plus')}

    -

    $3.99

    -

    $4.99

    +

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    +

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    {t('per_month')}

    - Yearly + {t('hub_upgrade_yearly')} - Monthly + {t('hub_upgrade_monthly')}
    - Buy now -

    Additional Protection

    + {t('upgrade_to_plus')} +

    {t('hub_upgrade_additional_protection')}

    Ghostery Check - Basic Browser Protection + {t('hub_upgrade_basic_browser_protection')}

    Ghostery Check - Advanced Device Protection + {t('hub_upgrade_advanced_device_protection')}

    @@ -189,33 +189,33 @@ const UpgradePlanView = () => { Ghostery Premium

    {t('panel_detail_premium_title')}

    -

    $8.99

    -

    $11.99

    +

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    +

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    {t('per_month')}

    - Yearly + {t('hub_upgrade_yearly')} - Monthly + {t('hub_upgrade_monthly')}
    - Buy now -

    Maximum Protection

    + {t('hub_upgrade_to_premium')} +

    { t('hub_upgrade_maximum_browser_protection') }

    Ghostery Check - Basic Browser Protection + {t('hub_upgrade_basic_browser_protection')}

    Ghostery Check - Advanced Device Protection + {t('hub_upgrade_advanced_device_protection')}

    Ghostery Check - VPN + {t('hub_upgrade_vpn')}

    @@ -228,9 +228,9 @@ const UpgradePlanView = () => { Ghostery Free

    {t('ghostery')}

    -

    Free

    +

    {t('hub_upgrade_plan_free')}

    - Free + {t('hub_upgrade_plan_free')}
    @@ -238,10 +238,10 @@ const UpgradePlanView = () => { Ghostery Plus

    {t('ghostery_plus')}

    -

    $3.99

    +

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    {t('per_month')}

    - Buy now + {t('upgrade_to_plus')}
    @@ -249,10 +249,10 @@ const UpgradePlanView = () => { Ghostery Premium

    {t('panel_detail_premium_title')}

    -

    $8..99

    +

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    {t('per_month')}

    - Buy now + {t('hub_upgrade_to_premium')}
    @@ -285,89 +285,88 @@ const UpgradePlanView = () => { - Browser Tracker Blocking + {t('hub_upgrade_browser_tracker_blocking')} Ghostery Check Ghostery Check Ghostery Check - Browser Ad Blocking + {t('hub_upgrade_browser_ad_blocking')} Ghostery Check Ghostery Check Ghostery Check - Custom Blocking Preferences + {t('hub_upgrade_custom_blocking_preferences')} Ghostery Check Ghostery Check Ghostery Check - Extension Themes + {t('hub_upgrade_custom_blocking_preferences')} Ghostery Check Ghostery Check - Historical Extension Stats + {t('hub_upgrade_historical_extension_stats')} Ghostery Check Ghostery Check - Application Tracker Blocking + {t('hub_upgrade_application_tracker_blocking')} Ghostery Check Ghostery Check - Application Ad Blocking + {t('hub_upgrade_application_ad_blocking')} Ghostery Check Ghostery Check - VPN + {t('hub_upgrade_vpn')} Ghostery Check - No VPN Logs + {t('hub_upgrade_no_vpn_logs')} Ghostery Check - P2P Support + {t('hub_upgrade_P2P_support')} Ghostery Check - IPV6 Leak Protection + {t('hub_upgrade_IPV6_leak_protection')} Ghostery Check - Physical Servers + {t('hub_upgrade_physical_servers')} Ghostery Check - Unlimited Bandwith + {t('hub_upgrade_unlimited_bandwidth')} Ghostery Check - {/* */} - Free - Buy Now - Buy Now + {t('hub_upgrade_already_protected')} + {t('upgrade_to_plus')} + {t('hub_upgrade_to_premium')} From 4e8ae406509ce7e47da84a0c663801624c2fa3fd Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 3 Jun 2020 02:34:08 -0400 Subject: [PATCH 050/133] Switch to new designs & fix breakage. Add card images and check marks --- _locales/en/messages.json | 4 +- .../Views/UpgradePlanView/UpgradePlanView.jsx | 562 +++++++++++++----- .../UpgradePlanView/UpgradePlanView.scss | 180 +++++- .../UpgradePlanView/UpgradePlanView3.jsx | 381 ++++++++++++ app/images/hub/upgrade/check.svg | 1 + .../hub/upgrade/ghostery_basic_card.svg | 1 + app/images/hub/upgrade/ghostery_plus_card.svg | 1 + .../hub/upgrade/ghostery_premium_card.svg | 1 + app/scss/partials/_hub_svgs.scss | 6 + 9 files changed, 963 insertions(+), 174 deletions(-) create mode 100644 app/hub/Views/UpgradePlanView/UpgradePlanView3.jsx create mode 100644 app/images/hub/upgrade/check.svg create mode 100644 app/images/hub/upgrade/ghostery_basic_card.svg create mode 100644 app/images/hub/upgrade/ghostery_plus_card.svg create mode 100644 app/images/hub/upgrade/ghostery_premium_card.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 572780a9e..e3bc0bf30 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1355,13 +1355,13 @@ "message": "Extension Themes" }, "hub_upgrade_historical_extension_stats": { - "message": "Extension Themes" + "message": "Historical Estension Stats" }, "hub_upgrade_application_tracker_blocking": { "message": "Application Tracker Blocking" }, "hub_upgrade_application_ad_blocking": { - "message": "Application Tracker Blocking" + "message": "Application Ad Blocking" }, "hub_upgrade_no_vpn_logs": { "message": "No VPN logs" diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx index 412e6447b..13d1ed3f1 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx @@ -26,7 +26,7 @@ import { ToggleCheckbox } from '../../../shared-components'; const UpgradePlanView = () => { const test = true; return ( -
    +
    @@ -48,7 +48,7 @@ const UpgradePlanView = () => {
    - Ghostery Free +

    {t('ghostery')}

    {t('hub_upgrade_plan_free')}

    @@ -56,14 +56,14 @@ const UpgradePlanView = () => { {t('hub_upgrade_already_protected')}

    {t('hub_upgrade_basic_protection')}

    - Ghostery Check + {t('hub_upgrade_basic_browser_protection')}

    - Ghostery Plus +

    {t('ghostery_plus')}

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    @@ -73,36 +73,45 @@ const UpgradePlanView = () => { {t('upgrade_to_plus')}

    {t('hub_upgrade_additional_protection')}

    - Ghostery Check + {t('hub_upgrade_basic_browser_protection')}

    - Ghostery Check + {t('hub_upgrade_advanced_device_protection')}

    - Ghostery Premium +

    {t('panel_detail_premium_title')}

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    {t('per_month')}

    + {/* year */} +

    {t('per_month')}

    - {t('hub_upgrade_to_premium')} -

    { t('hub_upgrade_maximum_browser_protection') }

    + + {t('hub_upgrade_to_premium')} + + + {t('hub_upgrade_ghostery_plus_monthly_price')} + +

    + {t('hub_upgrade_maximum_browser_protection')} +

    - Ghostery Check + {t('hub_upgrade_basic_browser_protection')}

    - Ghostery Check + {t('hub_upgrade_advanced_device_protection')}

    - Ghostery Check + {t('hub_upgrade_vpn')}

    @@ -110,24 +119,195 @@ const UpgradePlanView = () => {
    - { t('hub_upgrade_scroll_down') } + {t('hub_upgrade_scroll_down')}
    +
    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + {t('ghostery')}{t('ghostery_plus')}{t('panel_detail_premium_title')}
    {t('hub_upgrade_browser_tracker_blocking')} + + + + + +
    {t('hub_upgrade_browser_ad_blocking')} + + + + + +
    {t('hub_upgrade_custom_blocking_preferences')} + + + + + +
    {t('hub_upgrade_extension_themes')} + + + +
    {t('hub_upgrade_historical_extension_stats')} + + + +
    {t('hub_upgrade_application_tracker_blocking')} + + + +
    {t('hub_upgrade_application_ad_blocking')} + + + +
    {t('hub_upgrade_vpn')} + +
    {t('hub_upgrade_no_vpn_logs')} + +
    {t('hub_upgrade_P2P_support')} + +
    {t('hub_upgrade_IPV6_leak_protection')} + +
    {t('hub_upgrade_physical_servers')} + +
    {t('hub_upgrade_unlimited_bandwidth')} + +
    + {t('hub_upgrade_plan_free')} + {t('hub_upgrade_basic_protection')} + {t('hub_upgrade_basic_browser_protection')} + + {t('hub_upgrade_basic_protection')} + {t('hub_upgrade_basic_browser_protection')} +
    +
    +
    +
    +
    + +
    -

    { t('hub_upgrade_choose_plan') }

    +

    {t('hub_upgrade_choose_plan')}

    @@ -136,15 +316,15 @@ const UpgradePlanView = () => {
    - Ghostery Free +

    {t('ghostery')}

    {t('hub_upgrade_plan_free')}

    - {t('hub_upgrade_plan_free')} + {t('hub_upgrade_plan_free')}

    {t('hub_upgrade_basic_protection')}

    - Ghostery Check + {t('hub_upgrade_basic_browser_protection')}

    @@ -153,31 +333,22 @@ const UpgradePlanView = () => {
    - Ghostery Plus +

    {t('ghostery_plus')}

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    {t('per_month')}

    -
    -
    - {t('hub_upgrade_yearly')} - - {t('hub_upgrade_monthly')} -
    -
    - {t('upgrade_to_plus')} -

    {t('hub_upgrade_additional_protection')}

    + {t('hub_upgrade_ghostery_plus_yearly_price')} + {t('hub_upgrade_ghostery_plus_monthly_price')} +

    {t('hub_upgrade_additional_protection')}

    - Ghostery Check + {t('hub_upgrade_basic_browser_protection')}

    - Ghostery Check + {t('hub_upgrade_advanced_device_protection')}

    @@ -186,192 +357,259 @@ const UpgradePlanView = () => {
    - Ghostery Premium +

    {t('panel_detail_premium_title')}

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    {t('per_month')}

    -
    -
    - {t('hub_upgrade_yearly')} - - {t('hub_upgrade_monthly')} -
    -
    - {t('hub_upgrade_to_premium')} -

    { t('hub_upgrade_maximum_browser_protection') }

    + {t('hub_upgrade_to_premium')} + {t('hub_upgrade_to_premium')} +

    {t('hub_upgrade_maximum_browser_protection')}

    - Ghostery Check + {t('hub_upgrade_basic_browser_protection')}

    - Ghostery Check + {t('hub_upgrade_advanced_device_protection')}

    - Ghostery Check + {t('hub_upgrade_vpn')}

    +
    +
    + learn more to full list mobile +
    arrow
    +
    +
    +
    -
    -
    -
    - Ghostery Free -

    {t('ghostery')}

    -
    -

    {t('hub_upgrade_plan_free')}

    -
    - {t('hub_upgrade_plan_free')} -
    +
    + +
    +
    + {t('hub_upgrade_yearly')} + + {t('hub_upgrade_monthly')}
    -
    -
    - Ghostery Plus -

    {t('ghostery_plus')}

    -
    -

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    -

    {t('per_month')}

    -
    - {t('upgrade_to_plus')} -
    +
    +
    +
    +

    {t('hub_upgrade_plan_free')}

    -
    -
    - Ghostery Premium -

    {t('panel_detail_premium_title')}

    -
    -

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    -

    {t('per_month')}

    -
    - {t('hub_upgrade_to_premium')} -
    +
    +

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    +

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    +
    +
    +

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    +

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    -
    +
    +
    +

    {t('hub_upgrade_plan_free')}

    -
    +
    +
    +

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    +

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    +
    +
    +

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    +

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    +
    +
    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    - - - - - - - - - +
    - {t('ghostery')}{t('ghostery_plus')}{t('panel_detail_premium_title')}
    - - - - - + + - - - - - + + + + - - - - + - - - - + + + + + + + + + + + - - - - + - - - - + + + + + + + + + + + - - - - + - - - - + + + + + + + + + + + - - - - + - - - - + + + + + + + + + + + - - - - + - - - - + + + + + + + + + + + - - - - + - - - - + + + + + + + + + + +
    {t('hub_upgrade_browser_tracker_blocking')}Ghostery CheckGhostery CheckGhostery Check
    {t('hub_upgrade_browser_tracker_blocking')}
    {t('hub_upgrade_browser_ad_blocking')}Ghostery CheckGhostery CheckGhostery Check
    + + + + + +
    {t('hub_upgrade_custom_blocking_preferences')}Ghostery CheckGhostery CheckGhostery Check{t('hub_upgrade_browser_ad_blocking')}
    {t('hub_upgrade_custom_blocking_preferences')}Ghostery CheckGhostery Check + + + + + +
    {t('hub_upgrade_custom_blocking_preferences')}
    + + + + + +
    {t('hub_upgrade_historical_extension_stats')}Ghostery CheckGhostery CheckExtension Themes
    {t('hub_upgrade_application_tracker_blocking')}Ghostery CheckGhostery Check + Ghostery X + + + + +
    {t('hub_upgrade_historical_extension_stats')}
    Ghostery X + + + +
    {t('hub_upgrade_application_ad_blocking')}Ghostery CheckGhostery Check{t('hub_upgrade_application_tracker_blocking')}
    {t('hub_upgrade_vpn')}Ghostery CheckGhostery X + + + +
    {t('hub_upgrade_application_ad_blocking')}
    Ghostery X + + + +
    {t('hub_upgrade_no_vpn_logs')}Ghostery Check{t('hub_upgrade_vpn')}
    {t('hub_upgrade_P2P_support')}Ghostery CheckGhostery XGhostery X + +
    {t('hub_upgrade_no_vpn_logs')}
    Ghostery XGhostery X + +
    {t('hub_upgrade_IPV6_leak_protection')}Ghostery Check{t('hub_upgrade_P2P_support')}
    {t('hub_upgrade_physical_servers')}Ghostery CheckGhostery XGhostery X + +
    {t('hub_upgrade_IPV6_leak_protection')}
    Ghostery XGhostery X + +
    {t('hub_upgrade_unlimited_bandwidth')}Ghostery Check{t('hub_upgrade_physical_servers')}
    {t('hub_upgrade_already_protected')}{t('upgrade_to_plus')}{t('hub_upgrade_to_premium')}Ghostery XGhostery X + +
    {t('hub_upgrade_unlimited_bandwidth')}
    Ghostery XGhostery X + +
    +
    diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss index a7f3960fa..be5f2fc9a 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss @@ -1,7 +1,28 @@ - $price-blue: blue; $price-purple: purple; -.page-template-page-pricing { + +.mb-20 { + margin-bottom: rem-calc(20); +} +.mb-30 { + margin-bottom: rem-calc(30); +} +.mb-40 { + margin-bottom: rem-calc(40); +} + +.font-size-36 { + font-size: rem-calc(36); + @include breakpoint(medium down) { + font-size: rem-calc(24); + } +} +.font-size-12 { + font-size: rem-calc(12); +} + +.page-template-page-content-modules, +section.home-template .section.section-pricing { main { padding-bottom: 0; } @@ -233,12 +254,7 @@ $price-purple: purple; text-align: center; padding-top: rem-calc(3); padding-bottom: rem-calc(40); - .font-size-36 { - font-size: rem-calc(36); - } - .font-size-12 { - font-size: rem-calc(12); - } + h2 { color: $tundora; font-family: "Roboto Condensed"; @@ -247,7 +263,6 @@ $price-purple: purple; margin-top: rem-calc(30); margin-bottom: rem-calc(15); } - &-image-top { margin-top: -76px; width: 100%; @@ -256,6 +271,8 @@ $price-purple: purple; margin-bottom: rem-calc(15); } &-sub-copy { + display: flex; + align-items: center; font-size: rem-calc(12); margin-bottom: rem-calc(15); text-align: left; @@ -264,10 +281,41 @@ $price-purple: purple; padding-right: 10px; } } + .ghostery-free-image { + margin: auto; + width: 55px; + height: 65px; + background-image: url('/app/images/hub/upgrade/ghostery_basic_card.svg') + } + .ghostery-plus-image { + margin: auto; + width: 225px; + height: 87px; + background-image: url('/app/images/hub/upgrade/ghostery_plus_card.svg') + } + .ghostery-premium-image { + margin-left: 9px; + width: 233px; + height: 161px; + background-image: url('/app/images/hub/upgrade/ghostery_premium_card.svg') + } + .ghostery-premium-imagae { + background-image: url('/app/images/hub/upgrade/ghostery_premium_card.svg') + } .button { margin-top: rem-calc(10); margin-bottom: rem-calc(20); - width: 140px; + } + } + + .check { + display: inline-block; + width: 20px; + height: 20px; + background-repeat: no-repeat; + margin-top: 5px; + &.blue { + background-image: buildCheckIcon($price-blue); } } .hide-for-large { @@ -493,3 +541,115 @@ $price-purple: purple; } } } + +.page-template-page-pricing-professional { + main { + background-color: #1c212b; + padding-top: rem-calc(40); + padding-bottom: rem-calc(40); + } + + .pricing-professional-page { + color: $white; + font-family: 'Roboto'; + a { + color: $white; + } + } + + .card-outer { + border: 2px solid $white; + background-color: $black; + margin: rem-calc(150) auto rem-calc(60) auto; + width: 400px; + padding-bottom: rem-calc(20); + @include breakpoint(medium down) { + border: none; + width: 100%; + background-color: transparent; + } + } + + .card { + position: relative; + &:before{ + position:absolute; + z-index: 1; + top:0; + left:0; + width:100%; + height:140px; + content:""; + background-color:#175672; + @include breakpoint(medium down) { + content: none; + background-color: transparent; + } + } + } + + + .card-top-color { + // position: absolute; + // height: 140px; + // width: 100%; + // background-color: #175672; + // z-index: 1; + } + + .card-image-top { + position: relative; + z-index: 3; + max-width: 300px; + width: 100%; + margin: 0 auto; + margin-top: rem-calc(-100); + @include breakpoint(medium down) { + display: block; + } + } + + .card-insights-logo { + margin-top: rem-calc(75); + margin-bottom: rem-calc(15); + max-width: 260px; + } + + .price { + p { + line-height: normal; + margin-bottom: 0; + } + } + + .button { + margin-top: rem-calc(20); + margin-bottom: rem-calc(20); + font-size: rem-calc(14); + font-family: 'Open Sans'; + line-height: 2.14; + } + + .card-sub-copy { + margin-bottom: rem-calc(20); + font-size: rem-calc(12); + text-align: left; + width: 200px; + margin-left: auto; + margin-right: auto; + img { + margin-right: rem-calc(10); + } + } + + .chrome-icon { + max-width: 150px; + margin-left: auto; + margin-right: auto; + } + + .learn-more { + text-decoration: underline; + font-size: rem-calc(14); + } +} diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView3.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView3.jsx new file mode 100644 index 000000000..757b9e6bb --- /dev/null +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView3.jsx @@ -0,0 +1,381 @@ +/** + * Upgrade Plan View Component + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +import React from 'react'; +import ClassNames from 'classnames'; +import PropTypes from 'prop-types'; +import { NavLink } from 'react-router-dom'; +import globals from '../../../../src/classes/Globals'; +import { ToggleCheckbox } from '../../../shared-components'; + +/** + * A React class component for rendering the Home View + * @return {JSX} JSX for rendering the Home View of the Hub app + * @memberof HubComponents + */ +const UpgradePlanView = () => { + const test = true; + return ( +
    +
    +
    +
    +

    {t('hub_upgrade_choose_plan')}

    +
    +
    + {t('hub_upgrade_yearly')} + + {t('hub_upgrade_monthly')} +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    {t('ghostery')}

    +
    +

    {t('hub_upgrade_plan_free')}

    +
    + {t('hub_upgrade_already_protected')} +

    {t('hub_upgrade_basic_protection')}

    +

    + Ghostery Check + {t('hub_upgrade_basic_browser_protection')} +

    +
    +
    +
    +
    +
    +

    {t('ghostery_plus')}

    +
    +

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    +

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    +

    {t('per_month')}

    +
    + {t('upgrade_to_plus')} +

    {t('hub_upgrade_additional_protection')}

    +

    + Ghostery Check + {t('hub_upgrade_basic_browser_protection')} +

    +

    + Ghostery Check + {t('hub_upgrade_advanced_device_protection')} +

    +
    +
    +
    +
    +
    +

    {t('panel_detail_premium_title')}

    +
    +

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    +

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    +

    {t('per_month')}

    +
    + {t('hub_upgrade_to_premium')} +

    { t('hub_upgrade_maximum_browser_protection') }

    +

    + Ghostery Check + {t('hub_upgrade_basic_browser_protection')} +

    +

    + Ghostery Check + {t('hub_upgrade_advanced_device_protection')} +

    +

    + Ghostery Check + {t('hub_upgrade_vpn')} +

    +
    +
    +
    +
    +
    + { t('hub_upgrade_scroll_down') } +
    +
    +
    +
    + +
    +
    +
    +

    { t('hub_upgrade_choose_plan') }

    +
    +
    + + +
    +
    +
    +
    + Ghostery Free +

    {t('ghostery')}

    +
    +

    {t('hub_upgrade_plan_free')}

    +
    + {t('hub_upgrade_plan_free')} +

    {t('hub_upgrade_basic_protection')}

    +

    + Ghostery Check + {t('hub_upgrade_basic_browser_protection')} +

    +
    +
    +
    +
    +
    +
    + Ghostery Plus +

    {t('ghostery_plus')}

    +
    +

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    +

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    +

    {t('per_month')}

    +
    +
    +
    + {t('hub_upgrade_yearly')} + + {t('hub_upgrade_monthly')} +
    +
    + {t('upgrade_to_plus')} +

    {t('hub_upgrade_additional_protection')}

    +

    + Ghostery Check + {t('hub_upgrade_basic_browser_protection')} +

    +

    + Ghostery Check + {t('hub_upgrade_advanced_device_protection')} +

    +
    +
    +
    +
    +
    +
    + Ghostery Premium +

    {t('panel_detail_premium_title')}

    +
    +

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    +

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    +

    {t('per_month')}

    +
    +
    +
    + {t('hub_upgrade_yearly')} + + {t('hub_upgrade_monthly')} +
    +
    + {t('hub_upgrade_to_premium')} +

    { t('hub_upgrade_maximum_browser_protection') }

    +

    + Ghostery Check + {t('hub_upgrade_basic_browser_protection')} +

    +

    + Ghostery Check + {t('hub_upgrade_advanced_device_protection')} +

    +

    + Ghostery Check + {t('hub_upgrade_vpn')} +

    +
    +
    +
    +
    + +
    +
    +
    + Ghostery Free +

    {t('ghostery')}

    +
    +

    {t('hub_upgrade_plan_free')}

    +
    + {t('hub_upgrade_plan_free')} +
    +
    +
    +
    + Ghostery Plus +

    {t('ghostery_plus')}

    +
    +

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    +

    {t('per_month')}

    +
    + {t('upgrade_to_plus')} +
    +
    +
    +
    + Ghostery Premium +

    {t('panel_detail_premium_title')}

    +
    +

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    +

    {t('per_month')}

    +
    + {t('hub_upgrade_to_premium')} +
    +
    +
    +
    + +
    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + {t('ghostery')}{t('ghostery_plus')}{t('panel_detail_premium_title')}
    {t('hub_upgrade_browser_tracker_blocking')}Ghostery CheckGhostery CheckGhostery Check
    {t('hub_upgrade_browser_ad_blocking')}Ghostery CheckGhostery CheckGhostery Check
    {t('hub_upgrade_custom_blocking_preferences')}Ghostery CheckGhostery CheckGhostery Check
    {t('hub_upgrade_custom_blocking_preferences')}Ghostery CheckGhostery Check
    {t('hub_upgrade_historical_extension_stats')}Ghostery CheckGhostery Check
    {t('hub_upgrade_application_tracker_blocking')}Ghostery CheckGhostery Check
    {t('hub_upgrade_application_ad_blocking')}Ghostery CheckGhostery Check
    {t('hub_upgrade_vpn')}Ghostery Check
    {t('hub_upgrade_no_vpn_logs')}Ghostery Check
    {t('hub_upgrade_P2P_support')}Ghostery Check
    {t('hub_upgrade_IPV6_leak_protection')}Ghostery Check
    {t('hub_upgrade_physical_servers')}Ghostery Check
    {t('hub_upgrade_unlimited_bandwidth')}Ghostery Check
    {t('hub_upgrade_already_protected')}{t('upgrade_to_plus')}{t('hub_upgrade_to_premium')}
    +
    +
    +
    +
    +
    + ); +}; + +export default UpgradePlanView; diff --git a/app/images/hub/upgrade/check.svg b/app/images/hub/upgrade/check.svg new file mode 100644 index 000000000..b1b7defab --- /dev/null +++ b/app/images/hub/upgrade/check.svg @@ -0,0 +1 @@ + diff --git a/app/images/hub/upgrade/ghostery_basic_card.svg b/app/images/hub/upgrade/ghostery_basic_card.svg new file mode 100644 index 000000000..6568c9d6c --- /dev/null +++ b/app/images/hub/upgrade/ghostery_basic_card.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/images/hub/upgrade/ghostery_plus_card.svg b/app/images/hub/upgrade/ghostery_plus_card.svg new file mode 100644 index 000000000..2de48acd2 --- /dev/null +++ b/app/images/hub/upgrade/ghostery_plus_card.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/images/hub/upgrade/ghostery_premium_card.svg b/app/images/hub/upgrade/ghostery_premium_card.svg new file mode 100644 index 000000000..d663891b0 --- /dev/null +++ b/app/images/hub/upgrade/ghostery_premium_card.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/scss/partials/_hub_svgs.scss b/app/scss/partials/_hub_svgs.scss index 2fa697ffa..d33174788 100644 --- a/app/scss/partials/_hub_svgs.scss +++ b/app/scss/partials/_hub_svgs.scss @@ -80,6 +80,12 @@ @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 Upgrade Plan View +@function buildCheckIcon($primary-color) { + // Not taking primary color for some reason + @return url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2213%22%3E%3Cpath%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20d%3D%22M5.47%2012.45L0%206.98l1.54-1.54%203.71%203.71%207-9.15%201.73%201.32z%22/%3E%3C/svg%3E%0A'); +} + // 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 e71ce593bbba8e79bfa0d7aaf6f380c2b1733b73 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 3 Jun 2020 02:34:46 -0400 Subject: [PATCH 051/133] Delete old designs --- .../UpgradePlanView/UpgradePlanView3.jsx | 381 ------------------ 1 file changed, 381 deletions(-) delete mode 100644 app/hub/Views/UpgradePlanView/UpgradePlanView3.jsx diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView3.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView3.jsx deleted file mode 100644 index 757b9e6bb..000000000 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView3.jsx +++ /dev/null @@ -1,381 +0,0 @@ -/** - * Upgrade Plan View Component - * - * Ghostery Browser Extension - * https://www.ghostery.com/ - * - * Copyright 2019 Ghostery, Inc. All rights reserved. - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0 - */ - -import React from 'react'; -import ClassNames from 'classnames'; -import PropTypes from 'prop-types'; -import { NavLink } from 'react-router-dom'; -import globals from '../../../../src/classes/Globals'; -import { ToggleCheckbox } from '../../../shared-components'; - -/** - * A React class component for rendering the Home View - * @return {JSX} JSX for rendering the Home View of the Hub app - * @memberof HubComponents - */ -const UpgradePlanView = () => { - const test = true; - return ( -
    -
    -
    -
    -

    {t('hub_upgrade_choose_plan')}

    -
    -
    - {t('hub_upgrade_yearly')} - - {t('hub_upgrade_monthly')} -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    {t('ghostery')}

    -
    -

    {t('hub_upgrade_plan_free')}

    -
    - {t('hub_upgrade_already_protected')} -

    {t('hub_upgrade_basic_protection')}

    -

    - Ghostery Check - {t('hub_upgrade_basic_browser_protection')} -

    -
    -
    -
    -
    -
    -

    {t('ghostery_plus')}

    -
    -

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    -

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    -

    {t('per_month')}

    -
    - {t('upgrade_to_plus')} -

    {t('hub_upgrade_additional_protection')}

    -

    - Ghostery Check - {t('hub_upgrade_basic_browser_protection')} -

    -

    - Ghostery Check - {t('hub_upgrade_advanced_device_protection')} -

    -
    -
    -
    -
    -
    -

    {t('panel_detail_premium_title')}

    -
    -

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    -

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    -

    {t('per_month')}

    -
    - {t('hub_upgrade_to_premium')} -

    { t('hub_upgrade_maximum_browser_protection') }

    -

    - Ghostery Check - {t('hub_upgrade_basic_browser_protection')} -

    -

    - Ghostery Check - {t('hub_upgrade_advanced_device_protection')} -

    -

    - Ghostery Check - {t('hub_upgrade_vpn')} -

    -
    -
    -
    -
    -
    - { t('hub_upgrade_scroll_down') } -
    -
    -
    -
    - -
    -
    -
    -

    { t('hub_upgrade_choose_plan') }

    -
    -
    - - -
    -
    -
    -
    - Ghostery Free -

    {t('ghostery')}

    -
    -

    {t('hub_upgrade_plan_free')}

    -
    - {t('hub_upgrade_plan_free')} -

    {t('hub_upgrade_basic_protection')}

    -

    - Ghostery Check - {t('hub_upgrade_basic_browser_protection')} -

    -
    -
    -
    -
    -
    -
    - Ghostery Plus -

    {t('ghostery_plus')}

    -
    -

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    -

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    -

    {t('per_month')}

    -
    -
    -
    - {t('hub_upgrade_yearly')} - - {t('hub_upgrade_monthly')} -
    -
    - {t('upgrade_to_plus')} -

    {t('hub_upgrade_additional_protection')}

    -

    - Ghostery Check - {t('hub_upgrade_basic_browser_protection')} -

    -

    - Ghostery Check - {t('hub_upgrade_advanced_device_protection')} -

    -
    -
    -
    -
    -
    -
    - Ghostery Premium -

    {t('panel_detail_premium_title')}

    -
    -

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    -

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    -

    {t('per_month')}

    -
    -
    -
    - {t('hub_upgrade_yearly')} - - {t('hub_upgrade_monthly')} -
    -
    - {t('hub_upgrade_to_premium')} -

    { t('hub_upgrade_maximum_browser_protection') }

    -

    - Ghostery Check - {t('hub_upgrade_basic_browser_protection')} -

    -

    - Ghostery Check - {t('hub_upgrade_advanced_device_protection')} -

    -

    - Ghostery Check - {t('hub_upgrade_vpn')} -

    -
    -
    -
    -
    - -
    -
    -
    - Ghostery Free -

    {t('ghostery')}

    -
    -

    {t('hub_upgrade_plan_free')}

    -
    - {t('hub_upgrade_plan_free')} -
    -
    -
    -
    - Ghostery Plus -

    {t('ghostery_plus')}

    -
    -

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    -

    {t('per_month')}

    -
    - {t('upgrade_to_plus')} -
    -
    -
    -
    - Ghostery Premium -

    {t('panel_detail_premium_title')}

    -
    -

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    -

    {t('per_month')}

    -
    - {t('hub_upgrade_to_premium')} -
    -
    -
    -
    - -
    -
    -
    -
    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - {t('ghostery')}{t('ghostery_plus')}{t('panel_detail_premium_title')}
    {t('hub_upgrade_browser_tracker_blocking')}Ghostery CheckGhostery CheckGhostery Check
    {t('hub_upgrade_browser_ad_blocking')}Ghostery CheckGhostery CheckGhostery Check
    {t('hub_upgrade_custom_blocking_preferences')}Ghostery CheckGhostery CheckGhostery Check
    {t('hub_upgrade_custom_blocking_preferences')}Ghostery CheckGhostery Check
    {t('hub_upgrade_historical_extension_stats')}Ghostery CheckGhostery Check
    {t('hub_upgrade_application_tracker_blocking')}Ghostery CheckGhostery Check
    {t('hub_upgrade_application_ad_blocking')}Ghostery CheckGhostery Check
    {t('hub_upgrade_vpn')}Ghostery Check
    {t('hub_upgrade_no_vpn_logs')}Ghostery Check
    {t('hub_upgrade_P2P_support')}Ghostery Check
    {t('hub_upgrade_IPV6_leak_protection')}Ghostery Check
    {t('hub_upgrade_physical_servers')}Ghostery Check
    {t('hub_upgrade_unlimited_bandwidth')}Ghostery Check
    {t('hub_upgrade_already_protected')}{t('upgrade_to_plus')}{t('hub_upgrade_to_premium')}
    -
    -
    -
    -
    -
    - ); -}; - -export default UpgradePlanView; From 01946f8152ad29aff5f62a303d33d83401defb72 Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 7 Jun 2020 20:46:06 -0400 Subject: [PATCH 052/133] Add x icon, and table style changes --- _locales/en/messages.json | 13 +- .../Views/UpgradePlanView/UpgradePlanView.jsx | 124 +++++++++++------- .../UpgradePlanView/UpgradePlanView.scss | 41 ++++-- .../hub/upgrade/ghostery_basic_card.svg | 2 +- app/images/hub/upgrade/x_icon.svg | 1 + 5 files changed, 119 insertions(+), 62 deletions(-) create mode 100644 app/images/hub/upgrade/x_icon.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index e3bc0bf30..3feccc05b 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1327,14 +1327,17 @@ "hub_upgrade_maximum_browser_protection": { "message": "Maximum Browser Protection" }, + "hub_upgrade_to_plus": { + "message": "Upgrade to Plus" + }, "hub_upgrade_vpn": { - "message": "vpn" + "message": "VPN" }, "hub_upgrade_to_premium": { "message": "Upgrade to Premium" }, "hub_upgrade_scroll_down": { - "message": "Check out the full list of features" + "message": "See full list of features" }, "hub_upgrade_plus": { "message": "Plus" @@ -1355,7 +1358,7 @@ "message": "Extension Themes" }, "hub_upgrade_historical_extension_stats": { - "message": "Historical Estension Stats" + "message": "Historical Extension Stats" }, "hub_upgrade_application_tracker_blocking": { "message": "Application Tracker Blocking" @@ -1381,13 +1384,13 @@ "hub_upgrade_ghostery_plus_yearly_price": { "message": "$3.99" }, - "hub_upgrade_g4ostery_plus_monthly_price": { + "hub_upgrade_ghostery_plus_monthly_price": { "message": "$4.99" }, "hub_upgrade_ghostery_premium_yearly_price": { "message": "$8.99" }, - "hub_upgrade_g4ostery_premium_monthly_price": { + "hub_upgrade_ghostery_premium_monthly_price": { "message": "$11.99" }, "hub_setup_page_title": { diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx index 13d1ed3f1..2be203c7b 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx @@ -24,7 +24,7 @@ import { ToggleCheckbox } from '../../../shared-components'; * @memberof HubComponents */ const UpgradePlanView = () => { - const test = true; + const test = ''; return (
    @@ -48,7 +48,8 @@ const UpgradePlanView = () => {
    -
    +
    +

    {t('ghostery')}

    {t('hub_upgrade_plan_free')}

    @@ -66,8 +67,8 @@ const UpgradePlanView = () => {

    {t('ghostery_plus')}

    -

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    -

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    +

    $3.99

    +

    $4.99

    {t('per_month')}

    {t('upgrade_to_plus')} @@ -87,8 +88,8 @@ const UpgradePlanView = () => {

    {t('panel_detail_premium_title')}

    -

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    -

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    +

    $8.99

    +

    $11.99

    {t('per_month')}

    {/* year */}

    {t('per_month')}

    @@ -96,9 +97,7 @@ const UpgradePlanView = () => { {t('hub_upgrade_to_premium')} - - {t('hub_upgrade_ghostery_plus_monthly_price')} - + $4.99

    {t('hub_upgrade_maximum_browser_protection')}

    @@ -275,17 +274,16 @@ const UpgradePlanView = () => { - - {t('hub_upgrade_plan_free')} + {t('hub_upgrade_already_protected')} - {t('hub_upgrade_basic_protection')} - {t('hub_upgrade_basic_browser_protection')} + {t('hub_upgrade_to_plus')} + {/* {t('hub_upgrade_to_plus')} */} - {t('hub_upgrade_basic_protection')} - {t('hub_upgrade_basic_browser_protection')} + {t('hub_upgrade_to_premium')} + {/* {t('hub_upgrade_to_premium')} */} @@ -336,12 +334,12 @@ const UpgradePlanView = () => {

    {t('ghostery_plus')}

    -

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    -

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    +

    $3.99

    +

    $4.99

    {t('per_month')}

    - {t('hub_upgrade_ghostery_plus_yearly_price')} - {t('hub_upgrade_ghostery_plus_monthly_price')} + $3.99 + {/* $4.99 */}

    {t('hub_upgrade_additional_protection')}

    @@ -360,8 +358,8 @@ const UpgradePlanView = () => {

    {t('panel_detail_premium_title')}

    -

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    -

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    +

    $8.99

    +

    $11.99

    {t('per_month')}

    {t('hub_upgrade_to_premium')} @@ -408,12 +406,12 @@ const UpgradePlanView = () => {

    {t('hub_upgrade_plan_free')}

    -

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    -

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    +

    $4.99

    +

    $3.99

    -

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    -

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    +

    $11.99

    +

    $8.99

    @@ -422,12 +420,12 @@ const UpgradePlanView = () => {
    -

    {t('hub_upgrade_ghostery_plus_yearly_price')}

    -

    {t('hub_upgrade_ghostery_plus_monthly_price')}

    +

    $3.99

    +

    $4.99

    -

    {t('hub_upgrade_ghostery_premium_yearly_price')}

    -

    {t('hub_upgrade_ghostery_premium_monthly_price')}

    +

    $8.99

    +

    $11.99

    @@ -482,7 +480,7 @@ const UpgradePlanView = () => { - Ghostery X + @@ -495,7 +493,9 @@ const UpgradePlanView = () => { {t('hub_upgrade_historical_extension_stats')} - Ghostery X + + + @@ -507,7 +507,9 @@ const UpgradePlanView = () => { {t('hub_upgrade_application_tracker_blocking')} - Ghostery X + + + @@ -519,7 +521,9 @@ const UpgradePlanView = () => { {t('hub_upgrade_application_ad_blocking')} - Ghostery X + + + @@ -531,8 +535,12 @@ const UpgradePlanView = () => { {t('hub_upgrade_vpn')} - Ghostery X - Ghostery X + + + + + + @@ -541,8 +549,12 @@ const UpgradePlanView = () => { {t('hub_upgrade_no_vpn_logs')} - Ghostery X - Ghostery X + + + + + + @@ -551,8 +563,12 @@ const UpgradePlanView = () => { {t('hub_upgrade_P2P_support')} - Ghostery X - Ghostery X + + + + + + @@ -561,8 +577,12 @@ const UpgradePlanView = () => { {t('hub_upgrade_IPV6_leak_protection')} - Ghostery X - Ghostery X + + + + + + @@ -571,8 +591,12 @@ const UpgradePlanView = () => { {t('hub_upgrade_physical_servers')} - Ghostery X - Ghostery X + + + + + + @@ -581,8 +605,12 @@ const UpgradePlanView = () => { {t('hub_upgrade_unlimited_bandwidth')} - Ghostery X - Ghostery X + + + + + + @@ -600,13 +628,13 @@ const UpgradePlanView = () => {
    diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss index be5f2fc9a..fcf66b871 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss @@ -1,5 +1,6 @@ -$price-blue: blue; -$price-purple: purple; +$price-blue: #00AEF0; +$price-purple: #611b87; +$price-gold: #b8860b; .mb-20 { margin-bottom: rem-calc(20); @@ -236,7 +237,7 @@ section.home-template .section.section-pricing { color: $price-blue; } &-gold { - color: $gold; + color: $price-gold; } &-purple { color: $price-purple; @@ -246,6 +247,7 @@ section.home-template .section.section-pricing { } } .card { + height: 536px; box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.5); margin-bottom: rem-calc(40); width: 250px; @@ -282,10 +284,13 @@ section.home-template .section.section-pricing { } } .ghostery-free-image { - margin: auto; - width: 55px; - height: 65px; - background-image: url('/app/images/hub/upgrade/ghostery_basic_card.svg') + margin-top: -3px; + width: 250px; + height: 85px; + background-image: url('/app/images/hub/upgrade/ghostery_basic_card.svg'); + background-repeat: no-repeat; + background-position: center; + background-color: rgba(0, 174, 240, .25); } .ghostery-plus-image { margin: auto; @@ -318,6 +323,12 @@ section.home-template .section.section-pricing { background-image: buildCheckIcon($price-blue); } } + .x-icon { + display: inline-block; + height: 14px; + width: 14px; + background-image: url('/app/images/hub/upgrade/x_icon.svg') + } .hide-for-large { .card { box-shadow: none; @@ -491,7 +502,21 @@ section.home-template .section.section-pricing { td.default { display:table-cell; } - + tbody > tr:nth-child(odd) { + background-color: #FFF; + } + tr:last-child > td { + border: none; + } + tr:last-child > td > a { + width: 100%; + height: 38px; + white-space: nowrap; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + } .bg-blue { background-color: $price-blue; } diff --git a/app/images/hub/upgrade/ghostery_basic_card.svg b/app/images/hub/upgrade/ghostery_basic_card.svg index 6568c9d6c..13f10f619 100644 --- a/app/images/hub/upgrade/ghostery_basic_card.svg +++ b/app/images/hub/upgrade/ghostery_basic_card.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/app/images/hub/upgrade/x_icon.svg b/app/images/hub/upgrade/x_icon.svg new file mode 100644 index 000000000..cde0bd209 --- /dev/null +++ b/app/images/hub/upgrade/x_icon.svg @@ -0,0 +1 @@ + From 6ace9f27425d11a8b50425ae9b925d56c0d06eca Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 7 Jun 2020 21:41:24 -0400 Subject: [PATCH 053/133] Create redux flow for UpgradePlanView --- .../Views/UpgradePlanView/UpgradePlanView.jsx | 4 +- .../UpgradePlanView/UpgradePlanViewActions.js | 59 +++++++++++++++++++ .../UpgradePlanViewConstants.js | 25 ++++++++ .../UpgradePlanView/UpgradePlanViewReducer.js | 55 +++++++++++++++++ app/hub/Views/UpgradePlanView/index.js | 42 +++++++++++++ app/hub/createStore.js | 2 + app/hub/index.jsx | 2 +- 7 files changed, 186 insertions(+), 3 deletions(-) create mode 100644 app/hub/Views/UpgradePlanView/UpgradePlanViewActions.js create mode 100644 app/hub/Views/UpgradePlanView/UpgradePlanViewConstants.js create mode 100644 app/hub/Views/UpgradePlanView/UpgradePlanViewReducer.js create mode 100644 app/hub/Views/UpgradePlanView/index.js diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx index 2be203c7b..b5906dbd2 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx @@ -23,8 +23,8 @@ import { ToggleCheckbox } from '../../../shared-components'; * @return {JSX} JSX for rendering the Home View of the Hub app * @memberof HubComponents */ -const UpgradePlanView = () => { - const test = ''; +const UpgradePlanView = (props) => { + console.log('pls props: ', props); return (
    diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanViewActions.js b/app/hub/Views/UpgradePlanView/UpgradePlanViewActions.js new file mode 100644 index 000000000..ff134020a --- /dev/null +++ b/app/hub/Views/UpgradePlanView/UpgradePlanViewActions.js @@ -0,0 +1,59 @@ +/** + * UpgradePlanView Action creators + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +import { + TOGGLE_MONTHLY_YEARLY_PRICES, + SHOW_BASIC_PROTECTION, + SHOW_PLUS_PROTECTION, + SHOW_PREMIUM_PROTECTION +} from './UpgradePlanViewConstants'; + +/** + * Toggle Monthly/Yearly Prices + * @return {Object} + */ +export function toggleMonthlyYearlyPrices() { + return { + type: TOGGLE_MONTHLY_YEARLY_PRICES, + }; +} + +/** + * Show Basic protection on Mobile View + * @return {Object} + */ +export function showBasicProtection() { + return { + type: SHOW_BASIC_PROTECTION, + }; +} + +/** + * Show Plus protection on Mobile View + * @return {Object} + */ +export function showPlusProtection() { + return { + type: SHOW_PLUS_PROTECTION, + }; +} + +/** + * Show Premium protection on Mobile View + * @return {Object} + */ +export function showPremiumProtection() { + return { + type: SHOW_PREMIUM_PROTECTION, + }; +} diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanViewConstants.js b/app/hub/Views/UpgradePlanView/UpgradePlanViewConstants.js new file mode 100644 index 000000000..3ce9d061f --- /dev/null +++ b/app/hub/Views/UpgradePlanView/UpgradePlanViewConstants.js @@ -0,0 +1,25 @@ +/** + * Upgrade Plan View Constants + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +// Monthly/Yearly toggle +export const TOGGLE_MONTHLY_YEARLY_PRICES = 'TOGGLE_MONTHLY_YEARLY_PRICES'; + +// Free/Plus/Premium on Responsive view +export const SET_BASIC_PROTECTION = 'SET_BASIC_PROTECTION'; +export const SET_PLUS_PROTECTION = 'SET_PLUS_PROTECTION'; +export const SET_PREMIUM_PROTECTION = 'SET_PREMIUM_PROTECTION'; + +// Basic/Plus/Premium +export const BASIC = 'BASIC'; +export const PLUS = 'PLUS'; +export const PREMIUM = 'PREMIUM'; diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanViewReducer.js b/app/hub/Views/UpgradePlanView/UpgradePlanViewReducer.js new file mode 100644 index 000000000..ed52ef30d --- /dev/null +++ b/app/hub/Views/UpgradePlanView/UpgradePlanViewReducer.js @@ -0,0 +1,55 @@ +/** + * Reducer used throughout the UpgradePlanView's flow + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +import { + TOGGLE_MONTHLY_YEARLY_PRICES, + SET_BASIC_PROTECTION, + SET_PLUS_PROTECTION, + SET_PREMIUM_PROTECTION, + BASIC, + PLUS, + PREMIUM +} from './UpgradePlanViewConstants'; + +const initialState = { + show_yearly_prices: true, + set_protection_level: BASIC +}; + +function UpgradePlanViewReducer(state = initialState, action) { + switch (action.type) { + case TOGGLE_MONTHLY_YEARLY_PRICES: { + return Object.assign({}, state, { + set_yearly_prices: !state.set_yearly_prices, + }); + } + case SET_BASIC_PROTECTION: { + return Object.assign({}, state, { + set_protection_level: BASIC, + }); + } + case SET_PLUS_PROTECTION: { + return Object.assign({}, state, { + set_protection_level: PLUS, + }); + } + case SET_PREMIUM_PROTECTION: { + return Object.assign({}, state, { + set_protection_level: PREMIUM, + }); + } + default: return state; + } +} + +export default UpgradePlanViewReducer; diff --git a/app/hub/Views/UpgradePlanView/index.js b/app/hub/Views/UpgradePlanView/index.js new file mode 100644 index 000000000..3ceb4d4ac --- /dev/null +++ b/app/hub/Views/UpgradePlanView/index.js @@ -0,0 +1,42 @@ +/** + * Point of entry index.js file for UpgradePlanView + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import { withRouter } from 'react-router-dom'; + +import UpgradePlanView from './UpgradePlanView'; +import UpgradePlanViewReducer from './UpgradePlanViewReducer'; +import * as UpgradePlanViewActions from './UpgradePlanViewActions'; + +/** + * Map redux store state properties to the component's own properties. + * @param {Object} state entire Redux store's state + * @return {function} this function returns a plain object, which will be merged into the component's props + * @memberof HubContainers + */ +const mapStateToProps = state => Object.assign({}, state.upgrade); + +/** + * Bind the component's action creators using Redux's bindActionCreators. + * @param {function} dispatch redux store method which dispatches actions + * @return {function} to be used as an argument in redux connect call + * @memberof SetupContainers + */ +const mapDispatchToProps = dispatch => ({ + actions: bindActionCreators(Object.assign({}, UpgradePlanViewActions), dispatch), +}); + +export const reducer = UpgradePlanViewReducer; + +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(UpgradePlanView)); diff --git a/app/hub/createStore.js b/app/hub/createStore.js index bfa1bb2dc..8718724ef 100644 --- a/app/hub/createStore.js +++ b/app/hub/createStore.js @@ -25,6 +25,7 @@ import { reducer as app } from './Views/AppView'; import { reducer as home } from './Views/HomeView'; import { reducer as setup } from './Views/SetupView'; import { reducer as tutorial } from './Views/TutorialView'; +import { reducer as upgrade } from './Views/UpgradePlanView'; import account from '../Account/AccountReducer'; import settings from '../panel/reducers/settings'; @@ -35,6 +36,7 @@ const reducer = combineReducers({ tutorial, account, settings, + upgrade }); /** diff --git a/app/hub/index.jsx b/app/hub/index.jsx index e5bba3e84..6c899a6cb 100644 --- a/app/hub/index.jsx +++ b/app/hub/index.jsx @@ -30,7 +30,7 @@ import ProductsView from './Views/ProductsView'; import CreateAccountView from './Views/CreateAccountView'; import ForgotPasswordView from '../shared-components/ForgotPassword/ForgotPasswordContainer'; import LogInView from './Views/LogInView'; -import UpgradePlanView from './Views/UpgradePlanView/UpgradePlanView'; +import UpgradePlanView from './Views/UpgradePlanView'; const store = createStore(); From 0ddf4cec0b665d501cfb291ce4579c18890553be Mon Sep 17 00:00:00 2001 From: Ben Date: Sun, 7 Jun 2020 22:14:38 -0400 Subject: [PATCH 054/133] Make slider work --- .../Views/UpgradePlanView/UpgradePlanView.jsx | 22 ++++++++++++++--- .../UpgradePlanView/UpgradePlanView.scss | 1 - .../UpgradePlanView/UpgradePlanViewActions.js | 24 +++++++++---------- 3 files changed, 31 insertions(+), 16 deletions(-) diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx index b5906dbd2..04c7b8ca1 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx @@ -24,7 +24,23 @@ import { ToggleCheckbox } from '../../../shared-components'; * @memberof HubComponents */ const UpgradePlanView = (props) => { - console.log('pls props: ', props); + const { + set_protection_level, + set_yearly_prices + } = props; + + const { + toggleMonthlyYearlyPrices, + setBasicProtection, + setPlusProtection, + setPremiumProtection + } = props.actions; + // console.log('props: ', props); + // console.log('props.actions: ', props.actions); + + const sliderClassNames = ClassNames('switch-check', { + checked: !set_yearly_prices + }); return (
    @@ -34,8 +50,8 @@ const UpgradePlanView = (props) => {
    {t('hub_upgrade_yearly')} -