From eb30c6affdf7a23ce3007e00528ebc1edaa3700c Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 2 Feb 2021 12:33:33 -0500 Subject: [PATCH 01/13] Expand toggle and select plus plan if user is basic and selects ghostery search --- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 90b569e3c..edf58b2b3 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -99,7 +99,8 @@ class ChoosePlanView extends React.Component { } setDefaultPlan = () => { - const { user } = this.props; + const { user, defaultSearch } = this.props; + const isBasic = !user || (user && !user.plusAccess && !user.premiumAccess); const isPlus = (user && user.plusAccess) || false; const isPremium = (user && user.premiumAccess) || false; @@ -111,7 +112,12 @@ class ChoosePlanView extends React.Component { this.selectPlusPlan(); return; } - this.selectBasicPlan(); + if (isBasic && defaultSearch === SEARCH_GHOSTERY) { + this.selectPlusPlan(); + this.setState({ expanded: true }); + } else { + this.selectBasicPlan(); + } } isBasicPlanChecked = () => { From 6c964ec5221e01ab0e8f58813ff88ff8b7dea326 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 2 Feb 2021 13:14:46 -0500 Subject: [PATCH 02/13] Make ghostery glow icon bigger in select default search modal --- .../ChooseDefaultSearchView.jsx | 5 ++++- .../ChooseDefaultSearchView.scss | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index 7a422102c..44cba337d 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -269,6 +269,9 @@ class ChooseDefaultSearchView extends Component { renderConfirmationModal = () => { const { searchBeingConsidered, otherSearchSelected } = this.state; const logoFilename = `/app/images/hub/ChooseDefaultSearchView/search-engine-logo-${searchBeingConsidered.toLocaleLowerCase()}.svg`; + const modalOptionLogoClassNames = ClassNames('ChooseSearchView__modalOptionLogo', { + ghostery: searchBeingConsidered === SEARCH_GHOSTERY + }); return ( @@ -280,7 +283,7 @@ class ChooseDefaultSearchView extends Component { {SEARCH_OTHER} ) : - + }
{searchBeingConsidered === SEARCH_STARTPAGE && t('ghostery_dawn_onboarding_startpage_warning')} diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index d46a498ee..b6b084c22 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -288,7 +288,11 @@ } .ChooseSearchView__modalOptionLogo { - padding: 70px 0; + padding: 70px 0; + + &.ghostery { + width: 266px; + } } .ChooseSearchView__modalDescription { From fe1225ceb650d9326d9d5ac910013a777dc07abe Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 2 Feb 2021 13:24:06 -0500 Subject: [PATCH 03/13] Move ghostery logo on search option selection container a little to the left --- .../ChooseDefaultSearchView.jsx | 5 ++++- .../ChooseDefaultSearchView.scss | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index 44cba337d..2c17be1f8 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -234,6 +234,9 @@ class ChooseDefaultSearchView extends Component { const selected = (chosenSearch === optionName); const containerClasses = ClassNames('ChooseSearchView__optionContainer', { selected }); const logoFilename = `/app/images/hub/ChooseDefaultSearchView/search-engine-logo-${optionName.toLocaleLowerCase()}.svg`; + const optionDescriptionContainerClassNames = ClassNames('ChooseSearchView__optionDescriptionContainer', { + ghostery: optionName === SEARCH_GHOSTERY + }); return (
-
+
{(optionName !== SEARCH_OTHER) && ( )} diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index b6b084c22..3300378bd 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -110,6 +110,10 @@ justify-content: center; width: 75%; padding-right: 15%; + + &.ghostery { + margin-left: -14px; + } } .ChooseSearchView__optionDescriptionHeader { From ae1198538a01a2534fc7e24143699b53597301f6 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 2 Feb 2021 14:15:20 -0500 Subject: [PATCH 04/13] Remove expansion by default --- .../OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index edf58b2b3..8531eb0aa 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -114,7 +114,6 @@ class ChoosePlanView extends React.Component { } if (isBasic && defaultSearch === SEARCH_GHOSTERY) { this.selectPlusPlan(); - this.setState({ expanded: true }); } else { this.selectBasicPlan(); } From 31793f86bd199e0a24487d66439498e6c8970ce3 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 8 Feb 2021 17:43:49 -0500 Subject: [PATCH 05/13] Update logo sizes on choose default search view --- .../ChooseDefaultSearchView.jsx | 4 +++- .../ChooseDefaultSearchView.scss | 6 ++++++ .../hub/ChooseDefaultSearchView/search-engine-logo-bing.svg | 2 +- .../search-engine-logo-startpage.svg | 4 ++-- .../ChooseDefaultSearchView/search-engine-logo-yahoo.svg | 2 +- 5 files changed, 13 insertions(+), 5 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index 44fbef73a..1ade0a72d 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -242,7 +242,9 @@ class ChooseDefaultSearchView extends Component { const containerClasses = ClassNames('ChooseSearchView__optionContainer', { selected }); const logoFilename = `/app/images/hub/ChooseDefaultSearchView/search-engine-logo-${optionName.toLocaleLowerCase().replace(' ', '')}.svg`; const optionDescriptionContainerClassNames = ClassNames('ChooseSearchView__optionDescriptionContainer', { - ghostery: optionName === SEARCH_GHOSTERY + ghostery: optionName === SEARCH_GHOSTERY, + startpage: optionName === SEARCH_STARTPAGE, + yahoo: optionName === SEARCH_YAHOO, }); return ( diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index 3300378bd..a5e17367b 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -114,6 +114,12 @@ &.ghostery { margin-left: -14px; } + &.startpage { + margin-left: -9px; + } + &.yahoo { + margin-left: -9px; + } } .ChooseSearchView__optionDescriptionHeader { diff --git a/app/images/hub/ChooseDefaultSearchView/search-engine-logo-bing.svg b/app/images/hub/ChooseDefaultSearchView/search-engine-logo-bing.svg index 9e3a092b1..de92711f1 100644 --- a/app/images/hub/ChooseDefaultSearchView/search-engine-logo-bing.svg +++ b/app/images/hub/ChooseDefaultSearchView/search-engine-logo-bing.svg @@ -1,4 +1,4 @@ - + diff --git a/app/images/hub/ChooseDefaultSearchView/search-engine-logo-startpage.svg b/app/images/hub/ChooseDefaultSearchView/search-engine-logo-startpage.svg index 96ba1cf85..baeecc059 100644 --- a/app/images/hub/ChooseDefaultSearchView/search-engine-logo-startpage.svg +++ b/app/images/hub/ChooseDefaultSearchView/search-engine-logo-startpage.svg @@ -1,9 +1,9 @@ - + Startpage-Logo - \ No newline at end of file + diff --git a/app/images/hub/ChooseDefaultSearchView/search-engine-logo-yahoo.svg b/app/images/hub/ChooseDefaultSearchView/search-engine-logo-yahoo.svg index 9bc76d1c9..297da6493 100644 --- a/app/images/hub/ChooseDefaultSearchView/search-engine-logo-yahoo.svg +++ b/app/images/hub/ChooseDefaultSearchView/search-engine-logo-yahoo.svg @@ -1,4 +1,4 @@ - + From 2b4009f482f3060d9203a53aff9cf839ac6ee246 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Tue, 9 Feb 2021 11:30:42 -0500 Subject: [PATCH 06/13] Adjust sizing for Yahoo, Startpage, and Bing logos in search selection modals to better match Zeplins --- .../ChooseDefaultSearchView.jsx | 5 ++++- .../ChooseDefaultSearchView.scss | 12 ++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index 1ade0a72d..c2ec9ba32 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -282,7 +282,10 @@ class ChooseDefaultSearchView extends Component { const { searchBeingConsidered, otherSearchSelected } = this.state; const logoFilename = `/app/images/hub/ChooseDefaultSearchView/search-engine-logo-${searchBeingConsidered.toLocaleLowerCase().replace(' ', '')}.svg`; const modalOptionLogoClassNames = ClassNames('ChooseSearchView__modalOptionLogo', { - ghostery: searchBeingConsidered === SEARCH_GHOSTERY + ghostery: searchBeingConsidered === SEARCH_GHOSTERY, + yahoo: searchBeingConsidered === SEARCH_YAHOO, + bing: searchBeingConsidered === SEARCH_BING, + startpage: searchBeingConsidered === SEARCH_STARTPAGE, }); return ( diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index a5e17367b..3138ea340 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -303,6 +303,18 @@ &.ghostery { width: 266px; } + + &.yahoo { + width: 256px; + } + + &.bing { + width: 325px; + } + + &.startpage { + width: 235px; + } } .ChooseSearchView__modalDescription { From b318fbea1821af29d655ca10ec67275188415dfa Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Tue, 9 Feb 2021 12:05:24 -0500 Subject: [PATCH 07/13] Increase chance user object is available before choose plan view render. Show expanded view if user picked Glow to match expected UX. Add TODOs so we remember to update AccountReducer to help distinguish between no user present and user not fetched yet --- app/Account/AccountReducer.js | 2 +- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/app/Account/AccountReducer.js b/app/Account/AccountReducer.js index e8b63cc0b..1cb0055dc 100644 --- a/app/Account/AccountReducer.js +++ b/app/Account/AccountReducer.js @@ -28,7 +28,7 @@ import { UPDATE_PANEL_DATA } from '../panel/constants/constants'; const initialState = { loggedIn: false, userID: '', - user: null, + user: null, // TODO It would be better to have a way to distinguish between 'no user' and 'user not fetched yet' userSettings: null, subscriptionData: null, toastMessage: '', diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index ee33886bf..18f4135ec 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -93,9 +93,11 @@ class ChoosePlanView extends React.Component { super(props); this.state = { selectedPlan: '', - expanded: false + expanded: false, + readyToRender: false, // setTimeout does not block }; - // User object doesn't get populated immediately, let's delay the first render + // TODO can we do this in a way that guarantees user object will be available when we need it? + // TODO we prob need to updated AccountReducer so we have a way to distinguish between 'no user' and 'user not fetched yet' setTimeout(this.setDefaultPlan, 200); } @@ -115,8 +117,13 @@ class ChoosePlanView extends React.Component { } if (isBasic && defaultSearch === SEARCH_GHOSTERY) { this.selectPlusPlan(); + this.setState({ + expanded: true, + readyToRender: true, + }); } else { this.selectBasicPlan(); + this.setState({ readyToRender: true }); } } @@ -306,6 +313,9 @@ class ChoosePlanView extends React.Component { }; render() { + const { readyToRender } = this.state; + if (!readyToRender) return null; + const { actions, defaultSearch, From e253c7f8c6e2ba23db8d930d862ec7f472e7563d Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Tue, 9 Feb 2021 13:40:46 -0500 Subject: [PATCH 08/13] Factor out option card checkmark item rendering to a helper to reduce duplication. --- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 37 +++++++------------ 1 file changed, 13 insertions(+), 24 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 18f4135ec..13cb1098a 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -46,6 +46,13 @@ const searchPromo = () => (
); +const cardSubCopy = copy => ( +
+ + {copy} +
+); + const basicCard = (checked, handleClick) => { const cardClassNames = ClassNames('ChoosePlanView__card basic', { checked @@ -66,22 +73,10 @@ const basicCard = (checked, handleClick) => {

{t('hub_upgrade_basic_protection')}

-
- - {t('ghostery_dawn_onboarding_private_search')} -
-
- - {t('ghostery_dawn_onboarding_tracker_protection')} -
-
- - {t('ghostery_dawn_onboarding_speedy_page_loads')} -
-
- - {t('ghostery_dawn_onboarding_intelligence_technology')} -
+ {cardSubCopy(t('ghostery_dawn_onboarding_private_search'))} + {cardSubCopy(t('ghostery_dawn_onboarding_tracker_protection'))} + {cardSubCopy(t('ghostery_dawn_onboarding_speedy_page_loads'))} + {cardSubCopy(t('ghostery_dawn_onboarding_intelligence_technology'))}
@@ -210,14 +205,8 @@ class ChoosePlanView extends React.Component {

{t('hub_upgrade_additional_protection')}

-
- - {t('ghostery_dawn_onboarding_private_search')} -
-
- - {t('ghostery_dawn_onboarding_tracker_protection')} -
+ {cardSubCopy(t('ghostery_dawn_onboarding_private_search'))} + {cardSubCopy(t('ghostery_dawn_onboarding_tracker_protection'))}
{t('ghostery_dawn_onboarding_speedy_page_loads')} From 72f14518c5fa3da0922a59a66da0dafcbf5ed7d6 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Mon, 15 Mar 2021 10:06:29 -0400 Subject: [PATCH 09/13] Update test snapshots --- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 20 +---- .../ChoosePlanView.test.jsx.snap | 86 +------------------ 2 files changed, 5 insertions(+), 101 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index c0ed21023..bde3394d8 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -207,22 +207,10 @@ class ChoosePlanView extends React.Component {
{cardSubCopy(t('ghostery_dawn_onboarding_private_search'))} {cardSubCopy(t('ghostery_dawn_onboarding_tracker_protection'))} -
- - {t('ghostery_dawn_onboarding_speedy_page_loads')} -
-
- - {t('ghostery_dawn_onboarding_intelligence_technology')} -
-
- - {t('ghostery_dawn_onboarding_ad_free')} -
-
- - {t('ghostery_dawn_onboarding_supports_ghosterys_mission')} -
+ {cardSubCopy(t('ghostery_dawn_onboarding_speedy_page_loads'))} + {cardSubCopy(t('ghostery_dawn_onboarding_intelligence_technology'))} + {cardSubCopy(t('ghostery_dawn_onboarding_ad_free'))} + {cardSubCopy(t('ghostery_dawn_onboarding_supports_ghosterys_mission'))}
diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap index 27698192c..18d83d7d7 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap @@ -8,88 +8,4 @@ exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView. exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.test.jsx Shallow snapshot tests rendered with Enzyme ChoosePlanView View with user not logged in 1`] = `ShallowWrapper {}`; -exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.test.jsx Snapshot tests with react-test-renderer ChoosePlanView is rendered correctly 1`] = ` -Array [ -
-
- - - - ghostery_dawn_onboarding_back - - -
-
, -
-
- ghostery_dawn_onboarding_your_privacy_plan -
-
- ghostery_dawn_onboarding_based_on_your_privacy_preferences -
-
-
-
- ghostery_dawn_onboarding_ad_free_with_ghostery_plus_subscription -
-
- (ghostery_dawn_onboarding_ad_free_promo) -
-
- ghostery_dawn_onboarding_ad_free_promo_description -
-
- -
- ghostery_dawn_onboarding_see_all_plans -
-
-
, -] -`; +exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.test.jsx Snapshot tests with react-test-renderer ChoosePlanView is rendered correctly 1`] = `null`; From 0bd2e3b3cdb9b3dc901976351ffea182455832e0 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Mon, 15 Mar 2021 10:14:42 -0400 Subject: [PATCH 10/13] Refactor choose plan view plan card feature copy rendering to a helper to reduce duplication --- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 40 ++++--------------- 1 file changed, 8 insertions(+), 32 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index bde3394d8..e2c8c4cc9 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -247,38 +247,14 @@ class ChoosePlanView extends React.Component {

{t('hub_upgrade_maximum_protection')}

-
- - {t('ghostery_dawn_onboarding_private_search')} -
-
- - {t('ghostery_dawn_onboarding_tracker_protection')} -
-
- - {t('ghostery_dawn_onboarding_speedy_page_loads')} -
-
- - {t('ghostery_dawn_onboarding_intelligence_technology')} -
-
- - {t('ghostery_dawn_onboarding_ad_free')} -
-
- - {t('ghostery_dawn_onboarding_supports_ghosterys_mission')} -
-
- - VPN -
-
- - {t('ghostery_dawn_onboarding_unlimited_bandwidth')} -
+ {cardSubCopy(t('ghostery_dawn_onboarding_private_search'))} + {cardSubCopy(t('ghostery_dawn_onboarding_tracker_protection'))} + {cardSubCopy(t('ghostery_dawn_onboarding_speedy_page_loads'))} + {cardSubCopy(t('ghostery_dawn_onboarding_intelligence_technology'))} + {cardSubCopy(t('ghostery_dawn_onboarding_ad_free'))} + {cardSubCopy(t('ghostery_dawn_onboarding_supports_ghosterys_mission'))} + {cardSubCopy('VPN')} + {cardSubCopy(t('ghostery_dawn_onboarding_unlimited_bandwidth'))}
From b9a1c83c25adc433a09ff78c0b60b2af4b89302c Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Mon, 15 Mar 2021 10:38:08 -0400 Subject: [PATCH 11/13] Factor user status checks in select plan view out to helpers to reduce duplication and bug surface --- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 80 +++++++++++-------- 1 file changed, 45 insertions(+), 35 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index e2c8c4cc9..96b3640a0 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -96,11 +96,45 @@ class ChoosePlanView extends React.Component { setTimeout(this.setDefaultPlan, 200); } + isBasicUser = () => { + const { user } = this.props; + + return (!user || (user && !user.plusAccess && !user.premiumAccess)); + } + + isPlusUser = () => { + const { user } = this.props; + + return (user && user.plusAccess && !user.premiumAccess) || false; + } + + isPremiumUser = () => { + const { user } = this.props; + + return (user && user.premiumAccess) || false; + } + + isBasicPlanChecked = () => { + const { selectedPlan } = this.state; + return (selectedPlan === BASIC); + }; + + isPlusPlanChecked = () => { + const { selectedPlan } = this.state; + return (selectedPlan === PLUS); + }; + + isPremiumPlanChecked = () => { + const { selectedPlan } = this.state; + return (selectedPlan === PREMIUM); + }; + setDefaultPlan = () => { - const { user, defaultSearch } = this.props; - const isBasic = !user || (user && !user.plusAccess && !user.premiumAccess); - const isPlus = (user && user.plusAccess) || false; - const isPremium = (user && user.premiumAccess) || false; + const { defaultSearch } = this.props; + + const isBasic = this.isBasicUser(); + const isPlus = this.isPlusUser(); + const isPremium = this.isPremiumUser(); if (isPremium) { this.selectPremiumPlan(); @@ -122,21 +156,6 @@ class ChoosePlanView extends React.Component { } } - isBasicPlanChecked = () => { - const { selectedPlan } = this.state; - return (selectedPlan === BASIC); - }; - - isPlusPlanChecked = () => { - const { selectedPlan } = this.state; - return (selectedPlan === PLUS); - }; - - isPremiumPlanChecked = () => { - const { selectedPlan } = this.state; - return (selectedPlan === PREMIUM); - }; - selectBasicPlan = () => this.setState({ selectedPlan: BASIC }); selectPlusPlan = () => this.setState({ selectedPlan: PLUS }); @@ -153,23 +172,15 @@ class ChoosePlanView extends React.Component { }; renderTitleText = () => { - const { user } = this.props; - const isPlus = (user && user.plusAccess) || false; - const isPremium = (user && user.premiumAccess) || false; - - if (isPremium) return t('ghostery_dawn_onboarding_already_premium_subscriber'); - if (isPlus) return t('ghostery_dawn_onboarding_already_plus_subscriber'); + if (this.isPremiumUser()) return t('ghostery_dawn_onboarding_already_premium_subscriber'); + if (this.isPlusUser()) return t('ghostery_dawn_onboarding_already_plus_subscriber'); return t('ghostery_dawn_onboarding_your_privacy_plan'); }; renderSubtitleText = (selectedGhosteryGlow) => { - const { user } = this.props; - const isPlus = (user && user.plusAccess) || false; - const isPremium = (user && user.premiumAccess) || false; - if (selectedGhosteryGlow) return t('ghostery_dawn_onboarding_based_on_your_privacy_preferences'); - if (isPremium) return ''; - if (isPlus) return t('ghostery_dawn_onboarding_keep_your_current_plan_or_upgrade'); + if (this.isPremiumUser()) return ''; + if (this.isPlusUser()) return t('ghostery_dawn_onboarding_keep_your_current_plan_or_upgrade'); return t('ghostery_dawn_onboarding_choose_an_option'); }; @@ -272,14 +283,13 @@ class ChoosePlanView extends React.Component { const { actions, defaultSearch, - user, } = this.props; const { setSetupStep } = actions; const { expanded, selectedPlan } = this.state; - const isBasic = !user || (user && !user.plusAccess && !user.premiumAccess); - const isPlus = (user && user.plusAccess && !user.premiumAccess) || false; - const isPremium = (user && user.premiumAccess) || false; + const isBasic = this.isBasicUser(); + const isPlus = this.isPlusUser(); + const isPremium = this.isPremiumUser(); const arrowClassNames = ClassNames('ChoosePlanView__arrow', { up: !expanded, From c00e26f07bc580f53106662f5b3754fc78e111b5 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Mon, 15 Mar 2021 11:29:09 -0400 Subject: [PATCH 12/13] Move setting of default plan in plan select view to componentDidMount to avoid using setTimeout to setState in constructor --- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 9 +- .../ChoosePlanView.test.jsx.snap | 433 +++++++++++++++++- 2 files changed, 437 insertions(+), 5 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 96b3640a0..58758030f 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -89,11 +89,12 @@ class ChoosePlanView extends React.Component { this.state = { selectedPlan: '', expanded: false, - readyToRender: false, // setTimeout does not block + readyToRender: false, // after the component mounts, we need to setDefaultPlan() }; - // TODO can we do this in a way that guarantees user object will be available when we need it? - // TODO we prob need to updated AccountReducer so we have a way to distinguish between 'no user' and 'user not fetched yet' - setTimeout(this.setDefaultPlan, 200); + } + + componentDidMount() { + this.setDefaultPlan(); } isBasicUser = () => { diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap index 18d83d7d7..ce27250aa 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap @@ -8,4 +8,435 @@ exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView. exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.test.jsx Shallow snapshot tests rendered with Enzyme ChoosePlanView View with user not logged in 1`] = `ShallowWrapper {}`; -exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.test.jsx Snapshot tests with react-test-renderer ChoosePlanView is rendered correctly 1`] = `null`; +exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.test.jsx Snapshot tests with react-test-renderer ChoosePlanView is rendered correctly 1`] = ` +Array [ + , +
+
+ ghostery_dawn_onboarding_your_privacy_plan +
+
+ ghostery_dawn_onboarding_based_on_your_privacy_preferences +
+
+
+
+ ghostery_dawn_onboarding_ad_free_with_ghostery_plus_subscription +
+
+ (ghostery_dawn_onboarding_ad_free_promo) +
+
+ ghostery_dawn_onboarding_ad_free_promo_description +
+
+ +
+ ghostery_dawn_onboarding_see_all_plans +
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+

+ Ghostery +

+
+

+ hub_upgrade_plan_free +

+
+

+ + hub_upgrade_basic_protection + +

+
+
+ + ghostery_dawn_onboarding_private_search +
+
+ + ghostery_dawn_onboarding_tracker_protection +
+
+ + ghostery_dawn_onboarding_speedy_page_loads +
+
+ + ghostery_dawn_onboarding_intelligence_technology +
+
+
+
+
+
+
+ + + + + +
+
+
+
+

+ Ghostery Plus +

+
+

+ $4.99 +

+

+ per_month +

+
+

+ + hub_upgrade_additional_protection + +

+
+
+ + ghostery_dawn_onboarding_private_search +
+
+ + ghostery_dawn_onboarding_tracker_protection +
+
+ + ghostery_dawn_onboarding_speedy_page_loads +
+
+ + ghostery_dawn_onboarding_intelligence_technology +
+
+ + ghostery_dawn_onboarding_ad_free +
+
+ + ghostery_dawn_onboarding_supports_ghosterys_mission +
+
+
+
+
+
+
+ + + + + +
+
+
+
+
+

+ Ghostery Premium +

+
+

+ $11.99 +

+

+ per_month +

+
+

+ + hub_upgrade_maximum_protection + +

+
+
+ + ghostery_dawn_onboarding_private_search +
+
+ + ghostery_dawn_onboarding_tracker_protection +
+
+ + ghostery_dawn_onboarding_speedy_page_loads +
+
+ + ghostery_dawn_onboarding_intelligence_technology +
+
+ + ghostery_dawn_onboarding_ad_free +
+
+ + ghostery_dawn_onboarding_supports_ghosterys_mission +
+
+ + VPN +
+
+ + ghostery_dawn_onboarding_unlimited_bandwidth +
+
+
+
+
+ +
+
, +] +`; From 7af8bc569f2900160649a1234096711fa4fc8682 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Tue, 16 Mar 2021 16:19:35 -0400 Subject: [PATCH 13/13] Revised setDefaultPlan() logic in ChoosePlanView to make sure everything renders as expected when user is Plus or Premium --- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 19 +++++++------------ manifest.json | 3 ++- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 58758030f..a8a8210b9 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -136,25 +136,20 @@ class ChoosePlanView extends React.Component { const isBasic = this.isBasicUser(); const isPlus = this.isPlusUser(); const isPremium = this.isPremiumUser(); + const basicGlow = isBasic && defaultSearch === SEARCH_GHOSTERY; if (isPremium) { this.selectPremiumPlan(); - return; - } - if (isPlus) { - this.selectPlusPlan(); - return; - } - if (isBasic && defaultSearch === SEARCH_GHOSTERY) { + } else if (isPlus || basicGlow) { this.selectPlusPlan(); - this.setState({ - expanded: true, - readyToRender: true, - }); } else { this.selectBasicPlan(); - this.setState({ readyToRender: true }); } + + this.setState({ + expanded: basicGlow, + readyToRender: true, + }); } selectBasicPlan = () => this.setState({ selectedPlan: BASIC }); diff --git a/manifest.json b/manifest.json index edef02a03..44662c2e9 100644 --- a/manifest.json +++ b/manifest.json @@ -1,5 +1,6 @@ { "manifest_version": 2, + "debug": true, "author": "Ghostery", "name": "__MSG_name__", "short_name": "Ghostery", @@ -94,4 +95,4 @@ "web_accessible_resources": [ "app/images/*" ] -} \ No newline at end of file +}