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/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index 8e342ecad..5e4ae2b44 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -255,6 +255,11 @@ 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().replace(' ', '')}.svg`; + const optionDescriptionContainerClassNames = ClassNames('ChooseSearchView__optionDescriptionContainer', { + ghostery: optionName === SEARCH_GHOSTERY, + startpage: optionName === SEARCH_STARTPAGE, + yahoo: optionName === SEARCH_YAHOO, + }); return (
-
+
{(optionName !== SEARCH_OTHER) && ( )} @@ -290,6 +295,12 @@ class ChooseDefaultSearchView extends Component { renderConfirmationModal = () => { 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, + yahoo: searchBeingConsidered === SEARCH_YAHOO, + bing: searchBeingConsidered === SEARCH_BING, + startpage: searchBeingConsidered === SEARCH_STARTPAGE, + }); return ( @@ -301,7 +312,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 7788b0f6d..49f9b2a01 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -107,6 +107,16 @@ justify-content: center; width: 75%; padding-right: 15%; + + &.ghostery { + margin-left: -14px; + } + &.startpage { + margin-left: -9px; + } + &.yahoo { + margin-left: -9px; + } } .ChooseSearchView__optionDescriptionHeader { @@ -290,7 +300,23 @@ } .ChooseSearchView__modalOptionLogo { - padding-bottom: 40px; + padding: 70px 0; + + &.ghostery { + width: 266px; + } + + &.yahoo { + width: 256px; + } + + &.bing { + width: 325px; + } + + &.startpage { + width: 235px; + } } .ChooseSearchView__modalDawnLogo { diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index cafc203c9..a8a8210b9 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'))}
@@ -93,26 +88,31 @@ class ChoosePlanView extends React.Component { super(props); this.state = { selectedPlan: '', - expanded: false + expanded: false, + readyToRender: false, // after the component mounts, we need to setDefaultPlan() }; - // User object doesn't get populated immediately, let's delay the first render - setTimeout(this.setDefaultPlan, 200); } - setDefaultPlan = () => { + componentDidMount() { + this.setDefaultPlan(); + } + + isBasicUser = () => { const { user } = this.props; - const isPlus = (user && user.plusAccess) || false; - const isPremium = (user && user.premiumAccess) || false; - if (isPremium) { - this.selectPremiumPlan(); - return; - } - if (isPlus) { - this.selectPlusPlan(); - return; - } - this.selectBasicPlan(); + 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 = () => { @@ -130,6 +130,28 @@ class ChoosePlanView extends React.Component { return (selectedPlan === PREMIUM); }; + setDefaultPlan = () => { + const { defaultSearch } = this.props; + + const isBasic = this.isBasicUser(); + const isPlus = this.isPlusUser(); + const isPremium = this.isPremiumUser(); + const basicGlow = isBasic && defaultSearch === SEARCH_GHOSTERY; + + if (isPremium) { + this.selectPremiumPlan(); + } else if (isPlus || basicGlow) { + this.selectPlusPlan(); + } else { + this.selectBasicPlan(); + } + + this.setState({ + expanded: basicGlow, + readyToRender: true, + }); + } + selectBasicPlan = () => this.setState({ selectedPlan: BASIC }); selectPlusPlan = () => this.setState({ selectedPlan: PLUS }); @@ -146,23 +168,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'); }; @@ -198,30 +212,12 @@ class ChoosePlanView extends React.Component {

{t('hub_upgrade_additional_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')} -
+ {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'))}
@@ -258,38 +254,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'))}
@@ -301,17 +273,19 @@ class ChoosePlanView extends React.Component { }; render() { + const { readyToRender } = this.state; + if (!readyToRender) return null; + 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, 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..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 @@ -87,9 +87,356 @@ Array [ 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 +
+
+
+
+
+ +
, ] `; 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 @@ - + 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 +}