From 721099747e2b38a9b9acad81a3f22812c14b96c0 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 00:26:23 -0500 Subject: [PATCH 01/19] Fix the StepProgressBar width for each screen, step4 needs to be a little bigger --- .../Views/OnboardingView/OnboardingView.jsx | 4 +--- .../Views/OnboardingView/OnboardingView.scss | 9 +++++++++ .../Step1_CreateAccountForm.jsx | 12 ++++++------ .../Step1_CreateAccountView.jsx | 10 +++++----- .../Step1_LogInForm/Step1_LogInForm.jsx | 6 +++--- app/scss/hub_ghostery_browser.scss | 1 + 6 files changed, 25 insertions(+), 17 deletions(-) create mode 100644 app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx index bb224f6fe..50e9f57fc 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx @@ -26,8 +26,6 @@ import StepNavigator from '../OnboardingViews/StepNavigator'; const OnboardingView = (props) => { const { sendMountActions, steps } = props; - console.log('in OnboardingView'); - return (
@@ -36,7 +34,7 @@ const OnboardingView = (props) => { key={`route-${step.index}`} path={step.path} render={() => ( -
+
diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss new file mode 100644 index 000000000..e05ccd34f --- /dev/null +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss @@ -0,0 +1,9 @@ +.OnboardingView__screenContainer { + max-width: 724px; + margin: 0 auto; + padding: 0 20px; + + &.step4 { + max-width: 910px; + } +} diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx index 5cfdfdc89..33c96999c 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx @@ -61,7 +61,7 @@ const Step1_CreateAccountForm = (props) => { return (
-
+
@@ -84,7 +84,7 @@ const Step1_CreateAccountForm = (props) => {
)}
-
+
@@ -108,7 +108,7 @@ const Step1_CreateAccountForm = (props) => {
-
+
@@ -123,7 +123,7 @@ const Step1_CreateAccountForm = (props) => { autoComplete="off" />
-
+
@@ -140,7 +140,7 @@ const Step1_CreateAccountForm = (props) => {
-
+
@@ -169,7 +169,7 @@ const Step1_CreateAccountForm = (props) => {
)}
-
+
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx index 0451de371..fe115ab9e 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx @@ -93,8 +93,8 @@ const Step1_CreateAccountView = (props) => { const renderSkipLink = () => (
-
-
+
+
setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}> {t('ghostery_browser_hub_onboarding_skip')} @@ -123,12 +123,12 @@ const Step1_CreateAccountView = (props) => {
{ t('ghostery_browser_hub_onboarding_sync_settings') }
{view === CREATE_ACCOUNT && ( -
setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}
+
setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}
)} {view === SIGN_IN && ( -
setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}
+
setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}
)} -
+
{view === CREATE_ACCOUNT ? ( diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.jsx index 0f70b5e26..26c86f4f2 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.jsx @@ -41,7 +41,7 @@ const Step1_LogInForm = (props) => { return (
-
+
@@ -64,7 +64,7 @@ const Step1_LogInForm = (props) => {
-
+
@@ -85,7 +85,7 @@ const Step1_LogInForm = (props) => {
-
+
{t('forgot_password')} diff --git a/app/scss/hub_ghostery_browser.scss b/app/scss/hub_ghostery_browser.scss index 78abaa56e..950c0a83a 100644 --- a/app/scss/hub_ghostery_browser.scss +++ b/app/scss/hub_ghostery_browser.scss @@ -70,6 +70,7 @@ html, body, #root { @import './partials/radio_button'; // Imports from ../ghostery-browser-hub directory +@import '../ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss'; @import '../ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss'; @import '../ghostery-browser-hub/Views/OnboardingViews/StepProgressbar/StepProgressbar.scss'; @import '../ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss'; From 69b62f60f71f8d11bec8e2fca86adcb03f18f616 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 01:45:45 -0500 Subject: [PATCH 02/19] Add back button to all pages --- _locales/en/messages.json | 3 ++ .../BlockSettingsView.jsx | 9 +++++ .../BlockSettingsView.scss | 32 +++++++++++++++-- .../ChooseDefaultSearchView.jsx | 9 +++++ .../ChooseDefaultSearchView.scss | 34 +++++++++++++++++++ .../Step4_ChoosePlanView/ChoosePlanView.jsx | 8 +++++ .../Step4_ChoosePlanView/ChoosePlanView.scss | 27 +++++++++++++++ 7 files changed, 120 insertions(+), 2 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 208af51b1..63fbca71e 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1854,6 +1854,9 @@ "ghostery_browser_hub_onboarding_skip": { "message": "Skip" }, + "ghostery_browser_hub_onboarding_back": { + "message": "Back" + }, "ghostery_browser_hub_onboarding_we_take_your_privacy_very_seriously": { "message": "We take your privacy very seriously. Learn more" }, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index b281816db..b00c88206 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -12,6 +12,7 @@ */ import React, { Component } from 'react'; +import { NavLink } from 'react-router-dom'; // import Tooltip from '../../../../panel/components/Tooltip'; import RadioButton from '../../../../shared-components/RadioButton/RadioButton'; @@ -109,6 +110,14 @@ class BlockSettingsView extends Component { } = this.state; return (
+
+
+ + + {t('ghostery_browser_hub_onboarding_back')} + +
+
{t('ghostery_browser_hub_onboarding_which_privacy_plan')}
{t('ghostery_browser_hub_onboarding_tell_us_your_preferences')}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss index fb5731d04..e827f5107 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss @@ -1,7 +1,5 @@ .BlockSettingsView__container { display: flex; - justify-content: center; - align-items: center; flex-direction: column; font-size: 18px; line-height: 2.33; @@ -9,6 +7,36 @@ margin: 45px auto 83px auto; } +.BlockSettingsView__relativeContainer { + position: relative; +} + +.BlockSettingsView__caret.left { + margin: 15px auto 0 auto; + height: 10px; + width: 10px; + border-left: 2px solid $tundora; + border-top: 2px solid $tundora; + cursor: pointer; + transform: rotate(-45deg); +} + +.BlockSettingsView__backContainer { + position: absolute; + display: flex; + width: 68px; + margin-top: 5px; + @include breakpoint(small down) { + position: relative; + } + .BlockSettingsView__back { + margin-top: 8px; + font-size: 16px; + color: $tundora; + text-decoration: underline; + } +} + .BlockSettingsView__title { font-size: 24px; font-weight: 500; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index c16351340..f5912b549 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -12,6 +12,7 @@ */ import React, { Component, Fragment } from 'react'; +import { NavLink } from 'react-router-dom'; import RadioButton from '../../../../shared-components/RadioButton'; import { ONBOARDING, CHOOSE_PLAN, CHOOSE_DEFAULT_SEARCH } from '../../OnboardingView/OnboardingConstants'; @@ -57,6 +58,14 @@ class ChooseDefaultSearchView extends Component { return (
+
+
+ + + {t('ghostery_browser_hub_onboarding_back')} + +
+
{t('choose_your_default_search')}
{t('pick_a_default_search_engine')}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index 98a53c6dd..617b0f3f9 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -9,6 +9,40 @@ margin: 45px auto 83px auto; } +.ChooseSearchView__relativeContainer { + position: relative; + margin-left: -748px; + @include breakpoint(small down) { + margin-left: 0; + } +} +.ChooseSearchView__caret.left { + margin: 15px auto 0 auto; + height: 10px; + width: 10px; + border-left: 2px solid $tundora; + border-top: 2px solid $tundora; + cursor: pointer; + transform: rotate(-45deg); +} + +.ChooseSearchView__backContainer { + position: absolute; + display: flex; + width: 68px; + margin-top: 5px; + @include breakpoint(small down) { + position: relative; + } + .ChooseSearchView__back { + margin-top: 8px; + font-size: 16px; + color: $tundora; + text-decoration: underline; + } +} + + .ChooseSearchView__title { font-size: 24px; font-weight: 500; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 93960f467..51537cbf9 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -295,6 +295,14 @@ class ChoosePlanView extends React.Component { return (
+
+
+ + + {t('ghostery_browser_hub_onboarding_back')} + +
+
{this.renderTitleText()}
{this.renderSubtitleText(didNotSelectGhosterySearch)}
{didNotSelectGhosterySearch && isBasic && ( diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss index 034fa539f..e80f1f6e8 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -3,6 +3,33 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t .ChoosePlanView { padding-bottom: 20px; } +.ChoosePlanView__relativeContainer { + position: relative; +} +.ChoosePlanView__caret.left { + margin: 7px auto 0 auto; + height: 10px; + width: 10px; + border-left: 2px solid $tundora; + border-top: 2px solid $tundora; + cursor: pointer; + transform: rotate(-45deg); +} +.ChoosePlanView__backContainer { + position: absolute; + display: flex; + width: 68px; + margin-top: 5px; + @include breakpoint(small down) { + position: relative; + } + .ChoosePlanView__back { + margin-top: 8px; + font-size: 16px; + color: $tundora; + text-decoration: underline; + } +} .ChoosePlanView__yourPrivacyPlan { margin: auto; font-size: 24px; From fc6fbf27bafff3f7f1002fe5edd0f7f2b6361a0d Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 01:50:38 -0500 Subject: [PATCH 03/19] Add margin top to Step Progress Bar --- .../OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss | 1 + .../Views/OnboardingViews/StepProgressBar/StepProgressBar.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss index e80f1f6e8..01abd9c5a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -1,6 +1,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow to next line .ChoosePlanView { + margin: 45px auto 0 auto; padding-bottom: 20px; } .ChoosePlanView__relativeContainer { diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss index d5908215e..342f40307 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss @@ -12,6 +12,7 @@ */ .StepProgressBarContainer { + margin-top: 40px; display: flex; justify-content: space-around; align-items: center; From 9266a97484729dede802da982fc3609ecdcf6f2d Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 02:02:52 -0500 Subject: [PATCH 04/19] Add back button for success view --- .../Step5_SuccessView/SuccessView.jsx | 26 +++++++++++++----- .../Step5_SuccessView/SuccessView.scss | 27 +++++++++++++++++++ 2 files changed, 46 insertions(+), 7 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx index c1a87cc37..9982bd03e 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx @@ -11,7 +11,8 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -import React from 'react'; +import React, { Fragment } from 'react'; +import { NavLink } from 'react-router-dom'; /** * A Functional React component for rendering the Browser Success View @@ -22,12 +23,23 @@ const SuccessView = (props) => { const { actions } = props; const { sendPing } = actions; return ( -
-
{t('ghostery_browser_hub_onboarding_yay_youre_all_set')}
-
{`${t('ghostery_browser_hub_onboarding_start_browsing_the_web_with')} Ghostery`}
- - -
+ +
+
+ + + {t('ghostery_browser_hub_onboarding_back')} + +
+
+
+
{t('ghostery_browser_hub_onboarding_yay_youre_all_set')}
+ +
{`${t('ghostery_browser_hub_onboarding_start_browsing_the_web_with')} Ghostery`}
+ + +
+ ); }; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss index 9ef034fb7..3710e9356 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss @@ -5,6 +5,33 @@ flex-direction: column; } +.SuccessView__relativeContainer { + position: relative; +} + +.SuccessView__caret.left { + margin: 7px auto 0 auto; + height: 10px; + width: 10px; + border-left: 2px solid $tundora; + border-top: 2px solid $tundora; + cursor: pointer; + transform: rotate(-45deg); +} + +.SuccessView__backContainer { + position: absolute; + display: flex; + width: 68px; + margin-top: 142px; + .SuccessView__back { + margin-top: 8px; + font-size: 16px; + color: $tundora; + text-decoration: underline; + } +} + .SuccessView__title { margin-top: 125px; font-size: 24px; From 065d70cb279fc9bcdb337cbccd87ff5b5b410305 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 02:13:34 -0500 Subject: [PATCH 05/19] Refactor back button for all pages --- .../BlockSettingsView.jsx | 166 +++++++++--------- .../BlockSettingsView.scss | 6 +- .../ChooseDefaultSearchView.jsx | 36 ++-- .../ChooseDefaultSearchView.scss | 7 +- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 119 +++++++------ .../Step4_ChoosePlanView/ChoosePlanView.scss | 2 +- 6 files changed, 171 insertions(+), 165 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index b00c88206..540531d2b 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -11,7 +11,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -import React, { Component } from 'react'; +import React, { Fragment, Component } from 'react'; import { NavLink } from 'react-router-dom'; // import Tooltip from '../../../../panel/components/Tooltip'; @@ -109,7 +109,7 @@ class BlockSettingsView extends Component { recommendedChoices, blockAds, kindsOfTrackers, antiTracking, smartBrowsing } = this.state; return ( -
+
@@ -118,97 +118,99 @@ class BlockSettingsView extends Component {
-
{t('ghostery_browser_hub_onboarding_which_privacy_plan')}
-
{t('ghostery_browser_hub_onboarding_tell_us_your_preferences')}
-
-
- this.toggleRecommendedChoices(!recommendedChoices)} - /> -
{t('ghostery_browser_hub_onboarding_recommended_choices')}
-
-
    -
  1. {t('ghostery_browser_hub_onboarding_question_block_ads')}
    2. -
    -
    - this.handleAnswerChange('blockAds', true)} altDesign /> -
    -
    {t('hub_setup_modal_button_yes')}
    +
    +
    {t('ghostery_browser_hub_onboarding_which_privacy_plan')}
    +
    {t('ghostery_browser_hub_onboarding_tell_us_your_preferences')}
    +
    +
    + this.toggleRecommendedChoices(!recommendedChoices)} + /> +
    {t('ghostery_browser_hub_onboarding_recommended_choices')}
    -
    -
    - this.handleAnswerChange('blockAds', false)} altDesign /> +
      +
    1. {t('ghostery_browser_hub_onboarding_question_block_ads')}
      2. +
      +
      + this.handleAnswerChange('blockAds', true)} altDesign /> +
      +
      {t('hub_setup_modal_button_yes')}
      -
      {t('hub_setup_modal_button_no')}
      -
    -
  2. -
    - {t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')} -
    +
    +
    + this.handleAnswerChange('blockAds', false)} altDesign /> +
    +
    {t('hub_setup_modal_button_no')}
    -
    3. -
    -
    - this.handleAnswerChange('kindsOfTrackers', 0)} altDesign /> +
  3. +
    + {t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')} +
    +
    +
    4. +
    +
    + this.handleAnswerChange('kindsOfTrackers', 0)} altDesign /> +
    +
    {t('ghostery_browser_hub_onboarding_kinds_of_trackers_all')}
    -
    {t('ghostery_browser_hub_onboarding_kinds_of_trackers_all')}
    -
    -
    -
    - this.handleAnswerChange('kindsOfTrackers', 1)} altDesign /> +
    +
    + this.handleAnswerChange('kindsOfTrackers', 1)} altDesign /> +
    +
    {t('ghostery_browser_hub_onboarding_kinds_of_trackers_ad_and_analytics')}
    -
    {t('ghostery_browser_hub_onboarding_kinds_of_trackers_ad_and_analytics')}
    -
    -
    -
    - this.handleAnswerChange('kindsOfTrackers', 2)} altDesign /> +
    +
    + this.handleAnswerChange('kindsOfTrackers', 2)} altDesign /> +
    +
    {t('ghostery_browser_hub_onboarding_kinds_of_trackers_none')}
    -
    {t('ghostery_browser_hub_onboarding_kinds_of_trackers_none')}
    -
    -
  4. - {t('ghostery_browser_hub_onboarding_question_anti_tracking')} -
    -
    5. -
    -
    - this.handleAnswerChange('antiTracking', true)} altDesign /> +
  5. + {t('ghostery_browser_hub_onboarding_question_anti_tracking')} +
    +
    6. +
    +
    + this.handleAnswerChange('antiTracking', true)} altDesign /> +
    +
    {t('hub_setup_modal_button_yes')}
    -
    {t('hub_setup_modal_button_yes')}
    -
    -
    -
    - this.handleAnswerChange('antiTracking', false)} altDesign /> +
    +
    + this.handleAnswerChange('antiTracking', false)} altDesign /> +
    +
    {t('hub_setup_modal_button_no')}
    -
    {t('hub_setup_modal_button_no')}
    -
    -
  6. - {t('ghostery_browser_hub_onboarding_question_smart_browsing')} -
    -
    7. -
    -
    - this.handleAnswerChange('smartBrowsing', true)} altDesign /> +
  7. + {t('ghostery_browser_hub_onboarding_question_smart_browsing')} +
    +
    8. +
    +
    + this.handleAnswerChange('smartBrowsing', true)} altDesign /> +
    +
    {t('hub_setup_modal_button_yes')}
    -
    {t('hub_setup_modal_button_yes')}
    -
    -
    -
    - this.handleAnswerChange('smartBrowsing', false)} altDesign /> +
    +
    + this.handleAnswerChange('smartBrowsing', false)} altDesign /> +
    +
    {t('hub_setup_modal_button_no')}
    -
    {t('hub_setup_modal_button_no')}
    -
    -
+ +
+
- -
+ ); } } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss index e827f5107..fa10e705b 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss @@ -12,7 +12,7 @@ } .BlockSettingsView__caret.left { - margin: 15px auto 0 auto; + margin: 7px auto 0 auto; height: 10px; width: 10px; border-left: 2px solid $tundora; @@ -25,9 +25,9 @@ position: absolute; display: flex; width: 68px; - margin-top: 5px; + margin-top: 60px; @include breakpoint(small down) { - position: relative; + margin-top: 22px; } .BlockSettingsView__back { margin-top: 8px; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index f5912b549..2e420893a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -57,7 +57,7 @@ class ChooseDefaultSearchView extends Component { const { chosenSearch } = this.state; return ( -
+
@@ -66,23 +66,25 @@ class ChooseDefaultSearchView extends Component {
-
{t('choose_your_default_search')}
-
{t('pick_a_default_search_engine')}
-
- {this.renderOptionContainer(chosenSearch, SEARCH_GHOSTERY, 'Ghostery Search')} - {this.renderOptionContainer(chosenSearch, SEARCH_STARTPAGE, 'StartPage')} - {this.renderOptionContainer(chosenSearch, SEARCH_BING, 'Bing')} -
Choose Your Own
- {this.renderOptionContainer(chosenSearch, SEARCH_YAHOO, 'Yahoo')} +
+
{t('choose_your_default_search')}
+
{t('pick_a_default_search_engine')}
+
+ {this.renderOptionContainer(chosenSearch, SEARCH_GHOSTERY, 'Ghostery Search')} + {this.renderOptionContainer(chosenSearch, SEARCH_STARTPAGE, 'StartPage')} + {this.renderOptionContainer(chosenSearch, SEARCH_BING, 'Bing')} +
Choose Your Own
+ {this.renderOptionContainer(chosenSearch, SEARCH_YAHOO, 'Yahoo')} +
+
- -
+ ); } } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index 617b0f3f9..37e0d4fc0 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -11,13 +11,12 @@ .ChooseSearchView__relativeContainer { position: relative; - margin-left: -748px; @include breakpoint(small down) { margin-left: 0; } } .ChooseSearchView__caret.left { - margin: 15px auto 0 auto; + margin: 7px auto 0 auto; height: 10px; width: 10px; border-left: 2px solid $tundora; @@ -30,9 +29,9 @@ position: absolute; display: flex; width: 68px; - margin-top: 5px; + margin-top: 61px; @include breakpoint(small down) { - position: relative; + margin-top: 20px; } .ChooseSearchView__back { margin-top: 8px; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 51537cbf9..1a161b4cd 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -294,7 +294,7 @@ class ChoosePlanView extends React.Component { }); return ( -
+
@@ -303,69 +303,72 @@ class ChoosePlanView extends React.Component {
-
{this.renderTitleText()}
-
{this.renderSubtitleText(didNotSelectGhosterySearch)}
- {didNotSelectGhosterySearch && isBasic && ( - - {searchPromo()} - {/* TODO: For the CTA button below, +
+ +
{this.renderTitleText()}
+
{this.renderSubtitleText(didNotSelectGhosterySearch)}
+ {didNotSelectGhosterySearch && isBasic && ( + + {searchPromo()} + {/* TODO: For the CTA button below, 1. If user is signed in, activate the user’s 7-day free trial for the Ghostery Search Plus plan and move them to Step 5 if signed in 2. If user is signed out, clicking this should take them to Step 4b (linked) */} -
{t('ghostery_browser_hub_onboarding_start_trial')}
-
{t('ghostery_browser_hub_onboarding_see_all_plans')}
-
- - )} - {((isBasic && !didNotSelectGhosterySearch) || expanded || isPlus || isPremium) && ( -
- {(isPlus) ? ( -
-
- {this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan, isPlus)} +
{t('ghostery_browser_hub_onboarding_start_trial')}
+
{t('ghostery_browser_hub_onboarding_see_all_plans')}
+
+ + )} + {((isBasic && !didNotSelectGhosterySearch) || expanded || isPlus || isPremium) && ( +
+ {(isPlus) ? ( +
+
+ {this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan, isPlus)} +
+
{t('ghostery_browser_hub_onboarding_or')}
+
+ {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan, isPlus)} +
-
{t('ghostery_browser_hub_onboarding_or')}
-
- {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan, isPlus)} + ) : ( +
+ {isBasic && ( + basicCard(this.isBasicPlanChecked(), this.selectBasicPlan) + )} + {!isPremium && ( + + {this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan)} + + )} + {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan)}
-
- ) : ( -
- {isBasic && ( - basicCard(this.isBasicPlanChecked(), this.selectBasicPlan) - )} - {!isPremium && ( - - {this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan)} - - )} - {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan)} -
- )} - {(isBasic && ( -
- {(selectedPlan === BASIC) && ( - setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> - {t('next')} - - )} - {selectedPlan === PLUS && ( - {t('next')} - )} - {selectedPlan === PREMIUM && ( - {t('next')} - )} -
- ))} - {isPremium && ( - setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> - {t('next')} - - )} -
- )} -
+ )} + {(isBasic && ( +
+ {(selectedPlan === BASIC) && ( + setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> + {t('next')} + + )} + {selectedPlan === PLUS && ( + {t('next')} + )} + {selectedPlan === PREMIUM && ( + {t('next')} + )} +
+ ))} + {isPremium && ( + setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> + {t('next')} + + )} +
+ )} +
+ ); } } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss index 01abd9c5a..6b56bd4b6 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -20,7 +20,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t position: absolute; display: flex; width: 68px; - margin-top: 5px; + margin-top: 52px; @include breakpoint(small down) { position: relative; } From a20f0d21b5bbd05d1460d8c692be3d4066ba6d98 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 02:28:55 -0500 Subject: [PATCH 06/19] Log the user out if they are returning to step 1 --- .../Step2_BlockSettingsView/BlockSettingsView.jsx | 4 +++- .../Views/OnboardingViews/Step2_BlockSettingsView/index.js | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index 540531d2b..372dbc433 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -108,12 +108,14 @@ class BlockSettingsView extends Component { const { recommendedChoices, blockAds, kindsOfTrackers, antiTracking, smartBrowsing } = this.state; + const { actions } = this.props; + const { logout } = actions; return (
- + logout()}> {t('ghostery_browser_hub_onboarding_back')}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js index 12c2c9950..9394bfdc0 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js @@ -13,12 +13,14 @@ import BlockSettingsView from './BlockSettingsView'; import { buildReduxHOC } from '../../../../shared-hub/utils'; +import { logout } from '../../../../Account/AccountActions'; import { setAntiTracking, setAdBlock, setSmartBlocking } from '../../../../shared-hub/actions/AntiSuiteActions'; import setBlockingPolicy from '../../../../shared-hub/actions/BlockingPolicyActions'; import setToast from '../../../../shared-hub/actions/ToastActions'; import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { + logout, setAntiTracking, setAdBlock, setSmartBlocking, From 010b3d9b9e0871f1d287480e54ad25ed10a07336 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 02:41:59 -0500 Subject: [PATCH 07/19] Add logout behavior to navbar --- .../OnboardingViews/StepProgressBar/StepProgressBar.jsx | 8 +++++++- .../Views/OnboardingViews/StepProgressBar/index.js | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx index 93029a213..cb2e504f8 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx @@ -56,6 +56,12 @@ const StepProgressBar = (props) => { const { currentStep } = props; const totalSteps = steps.length; + const logoutIfStepOne = (stepId) => { + const { actions } = props; + const { logout } = actions; + if (stepId === LOGIN) logout(); + }; + const renderStep = (step, isCurrent, stepClass) => { const labelClasses = ClassNames('StepProgressBar__label', { current: isCurrent, @@ -66,7 +72,7 @@ const StepProgressBar = (props) => { return (
- + logoutIfStepOne(step.id)}>
{step.label}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js index 21d943533..127b75783 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js @@ -12,5 +12,11 @@ */ import StepProgressBar from './StepProgressBar'; +import { buildReduxHOC } from '../../../../shared-hub/utils'; +import { logout } from '../../../../Account/AccountActions'; -export default StepProgressBar; +const actionCreators = { + logout +}; + +export default buildReduxHOC(null, actionCreators, StepProgressBar); From b7cdd1e975ad127ec1886ecef39dba269c525392 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 11:33:22 -0500 Subject: [PATCH 08/19] Add highestSetupStepReached() method to next buttons --- .../OnboardingView/OnboardingViewContainer.jsx | 3 +++ .../Views/OnboardingView/index.js | 4 +++- .../Step0_WelcomeView/WelcomeView.jsx | 12 +++++++++--- .../OnboardingViews/Step0_WelcomeView/index.js | 3 ++- .../Step1_CreateAccountView.jsx | 13 +++++++++---- .../Step1_CreateAccountView/index.js | 3 ++- .../BlockSettingsView.jsx | 3 ++- .../Step2_BlockSettingsView/index.js | 3 ++- .../ChooseDefaultSearchView.jsx | 3 ++- .../Step3_ChooseDefaultSearchView/index.js | 3 ++- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 9 ++++++++- .../Step4_ChoosePlanView/index.jsx | 3 ++- .../StepProgressBar/StepProgressBar.jsx | 3 ++- .../OnboardingViews/StepProgressBar/index.js | 3 ++- .../actions/SetupLifecycleActions.js | 10 +++++++++- .../constants/SetupLifecycleConstants.js | 1 + .../reducers/SetupLifecycleReducer.js | 18 ++++++++++++++++-- src/classes/Metrics.js | 1 - 18 files changed, 76 insertions(+), 22 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx index a09ada285..2fcf3ee13 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx @@ -44,6 +44,7 @@ class OnboardingViewContainer extends Component { this.state = { sendMountActions: false, }; + console.log('props container: ', props); const { history } = this.props; history.push(`/${ONBOARDING}/${WELCOME}`); @@ -56,6 +57,8 @@ class OnboardingViewContainer extends Component { const { actions, setup } = this.props; actions.setSetupStep({ setup_step: 7, origin: ONBOARDING }); actions.initSetupProps(setup); + actions.setHighestSetupStepReached({ setup_step: SUCCESS }); + console.log('props after setup: ', props); // TODO modify this as needed const { origin, pathname, hash } = window.location; diff --git a/app/ghostery-browser-hub/Views/OnboardingView/index.js b/app/ghostery-browser-hub/Views/OnboardingView/index.js index a332709b4..04cf40d45 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingView/index.js @@ -19,7 +19,8 @@ import OnboardingViewContainer from './OnboardingViewContainer'; import { initSetupProps, setSetupStep, - setSetupComplete + setSetupComplete, + setHighestSetupStepReached } from '../../../shared-hub/actions/SetupLifecycleActions'; import { setAdBlock, @@ -34,6 +35,7 @@ export default withRouter(buildReduxHOC( initSetupProps, setSetupStep, setSetupComplete, + setHighestSetupStepReached, setBlockingPolicy, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx index d11dbfe1a..ac2b7fab6 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx @@ -13,7 +13,7 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; -import { LOGIN, WELCOME } from '../../OnboardingView/OnboardingConstants'; +import { LOGIN, WELCOME, BLOCK_SETTINGS } from '../../OnboardingView/OnboardingConstants'; /** * A Functional React component for rendering the Browser Welcome View @@ -22,13 +22,19 @@ import { LOGIN, WELCOME } from '../../OnboardingView/OnboardingConstants'; */ const WelcomeView = (props) => { const { actions } = props; - const { setSetupStep } = actions; + const { setSetupStep, setHighestSetupStepReached } = actions; + + const handleSetupStep = () => { + setSetupStep({ setup_step: LOGIN, origin: WELCOME }); + setHighestSetupStepReached({ setup_step: BLOCK_SETTINGS }); + }; + return (
{t('ghostery_browser_hub_onboarding_welcome')}
{t('ghostery_browser_hub_onboarding_lets_begin')}
- setSetupStep({ setup_step: LOGIN, origin: WELCOME })}> + handleSetupStep()}> {t('ghostery_browser_hub_onboarding_lets_do_this')}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js index c649d5a74..a3c4f65e8 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js @@ -13,10 +13,11 @@ import { buildReduxHOC } from '../../../../shared-hub/utils'; import WelcomeView from './WelcomeView'; -import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { setSetupStep, setHighestSetupStepReached } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { setSetupStep, + setHighestSetupStepReached }; export default buildReduxHOC([], actionCreators, WelcomeView); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx index fe115ab9e..70f2aa10d 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx @@ -18,7 +18,7 @@ import ClassNames from 'classnames'; import Step1_LogInForm from '../Step1_LogInForm'; import Step1_CreateAccountForm from '../Step1_CreateAccountForm'; import globals from '../../../../../src/classes/Globals'; -import { LOGIN, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; +import { LOGIN, ONBOARDING, BLOCK_SETTINGS } from '../../OnboardingView/OnboardingConstants'; const SIGN_IN = 'SIGN_IN'; const CREATE_ACCOUNT = 'CREATE_ACCOUNT'; @@ -70,7 +70,7 @@ const renderFAQListItem = (icon, label, description) => ( */ const Step1_CreateAccountView = (props) => { const { user, actions } = props; - const { setSetupStep } = actions; + const { setSetupStep, setHighestSetupStepReached } = actions; const email = user && user.email; const [expanded, setExpanded] = useState(false); @@ -91,11 +91,16 @@ const Step1_CreateAccountView = (props) => { setExpanded(!expanded); }; + const handleSetupStep = () => { + setSetupStep({ setup_step: LOGIN, origin: ONBOARDING }); + setHighestSetupStepReached({ setup_step: BLOCK_SETTINGS }); + }; + const renderSkipLink = () => (
- setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}> + handleSetupStep()}> {t('ghostery_browser_hub_onboarding_skip')}
@@ -107,7 +112,7 @@ const Step1_CreateAccountView = (props) => {
{t('ghostery_browser_hub_onboarding_you_are_signed_in_as')}
{email}
- setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}> + handleSetupStep()}> {t('next')}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js index 3015cae6f..812fe19d8 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js @@ -14,10 +14,11 @@ import { withRouter } from 'react-router-dom'; import { buildReduxHOC } from '../../../../shared-hub/utils'; import Step1_CreateAccountView from './Step1_CreateAccountView'; -import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { setSetupStep, setHighestSetupStepReached } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { setSetupStep, + setHighestSetupStepReached }; export default withRouter(buildReduxHOC(['account'], actionCreators, Step1_CreateAccountView)); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index 372dbc433..2e130e3c3 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -69,7 +69,7 @@ class BlockSettingsView extends Component { if (blockAds !== null && kindsOfTrackers !== null && antiTracking !== null && smartBrowsing !== null) { const { actions } = this.props; const { - setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep + setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep, setHighestSetupStepReached } = actions; const { history } = this.props; @@ -93,6 +93,7 @@ class BlockSettingsView extends Component { } setBlockingPolicy({ blockingPolicy }); setSetupStep({ setup_step: CHOOSE_DEFAULT_SEARCH, origin: ONBOARDING }); + setHighestSetupStepReached({ setup_step: CHOOSE_DEFAULT_SEARCH }); history.push('/onboarding/3'); } else { const { setToast } = this.props; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js index 9394bfdc0..386d1fa57 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js @@ -17,7 +17,7 @@ import { logout } from '../../../../Account/AccountActions'; import { setAntiTracking, setAdBlock, setSmartBlocking } from '../../../../shared-hub/actions/AntiSuiteActions'; import setBlockingPolicy from '../../../../shared-hub/actions/BlockingPolicyActions'; import setToast from '../../../../shared-hub/actions/ToastActions'; -import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { setSetupStep, setHighestSetupStepReached } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { logout, @@ -27,6 +27,7 @@ const actionCreators = { setBlockingPolicy, setToast, setSetupStep, + setHighestSetupStepReached, }; export default buildReduxHOC(null, actionCreators, BlockSettingsView); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index 2e420893a..e27ba0430 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -35,9 +35,10 @@ class ChooseDefaultSearchView extends Component { handleSubmit = () => { const { actions, history } = this.props; - const { setSetupStep } = actions; + const { setSetupStep, setHighestSetupStepReached } = actions; setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING }); + setHighestSetupStepReached({ setup_step: CHOOSE_PLAN }); history.push(`/${ONBOARDING}/${CHOOSE_PLAN}`); } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js index a3a19d61d..963c524ab 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js @@ -13,10 +13,11 @@ import ChooseDefaultSearchView from './ChooseDefaultSearchView'; import { buildReduxHOC } from '../../../../shared-hub/utils'; -import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { setSetupStep, setHighestSetupStepReached } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { setSetupStep, + setHighestSetupStepReached }; export default buildReduxHOC(null, actionCreators, ChooseDefaultSearchView); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 1a161b4cd..56c2a4221 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -18,7 +18,7 @@ import PropTypes from 'prop-types'; import RadioButton from '../../../../shared-components/RadioButton'; import globals from '../../../../../src/classes/Globals'; import { BASIC, PLUS, PREMIUM } from '../../../../hub/Views/UpgradePlanView/UpgradePlanViewConstants'; -import { CHOOSE_PLAN, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; +import { CHOOSE_PLAN, ONBOARDING, SUCCESS } from '../../OnboardingView/OnboardingConstants'; const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/plus`; const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/premium`; @@ -218,6 +218,13 @@ class ChoosePlanView extends React.Component { return t('ghostery_browser_hub_onboarding_choose_an_option'); }; + handleSetupStep = () => { + const { actions } = this.props; + const { setSetupStep, setHighestSetupStepReached } = actions; + setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING }); + setHighestSetupStepReached({ setup_step: SUCCESS }); + } + plusCard = (checked, handleClick, showCTAButton = false) => { const { actions } = this.props; const { setSetupStep } = actions; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx index 397a0ab66..7d373b261 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx @@ -13,10 +13,11 @@ import { buildReduxHOC } from '../../../../shared-hub/utils'; import ChoosePlanView from './ChoosePlanView'; -import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { setSetupStep, setHighestSetupStepReached } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { setSetupStep, + setHighestSetupStepReached }; export default buildReduxHOC(['account'], actionCreators, ChoosePlanView); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx index cb2e504f8..0e19b9dc8 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx @@ -53,7 +53,8 @@ const steps = [ * @memberof HubComponents */ const StepProgressBar = (props) => { - const { currentStep } = props; + const { currentStep, setup } = props; + console.log('setup: ', props); const totalSteps = steps.length; const logoutIfStepOne = (stepId) => { diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js index 127b75783..deef818a3 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js @@ -15,8 +15,9 @@ import StepProgressBar from './StepProgressBar'; import { buildReduxHOC } from '../../../../shared-hub/utils'; import { logout } from '../../../../Account/AccountActions'; +const stateSlices = ['setup']; const actionCreators = { logout }; -export default buildReduxHOC(null, actionCreators, StepProgressBar); +export default buildReduxHOC(stateSlices, actionCreators, StepProgressBar); diff --git a/app/shared-hub/actions/SetupLifecycleActions.js b/app/shared-hub/actions/SetupLifecycleActions.js index 3f40698e9..9c5b00d04 100644 --- a/app/shared-hub/actions/SetupLifecycleActions.js +++ b/app/shared-hub/actions/SetupLifecycleActions.js @@ -15,7 +15,8 @@ import { makeDeferredDispatcher } from '../utils'; import { INIT_SETUP_PROPS, SET_SETUP_STEP, - SET_SETUP_COMPLETE + SET_SETUP_COMPLETE, + SET_HIGHEST_SETUP_STEP_REACHED } from '../constants/SetupLifecycleConstants'; export function initSetupProps(data) { @@ -30,3 +31,10 @@ export const setSetupStep = export const setSetupComplete = actionData => makeDeferredDispatcher(SET_SETUP_COMPLETE, actionData); + +export function setHighestSetupStepReached(data) { + return { + type: SET_HIGHEST_SETUP_STEP_REACHED, + data, + }; +} diff --git a/app/shared-hub/constants/SetupLifecycleConstants.js b/app/shared-hub/constants/SetupLifecycleConstants.js index 97c968d3e..0d3113008 100644 --- a/app/shared-hub/constants/SetupLifecycleConstants.js +++ b/app/shared-hub/constants/SetupLifecycleConstants.js @@ -14,3 +14,4 @@ export const INIT_SETUP_PROPS = 'INIT_SETUP_PROPS'; export const SET_SETUP_STEP = 'SET_SETUP_STEP'; export const SET_SETUP_COMPLETE = 'SET_SETUP_COMPLETE'; +export const SET_HIGHEST_SETUP_STEP_REACHED = 'SET_HIGHEST_SETUP_STEP_REACHED'; diff --git a/app/shared-hub/reducers/SetupLifecycleReducer.js b/app/shared-hub/reducers/SetupLifecycleReducer.js index 3d30ac6c8..8f5976324 100644 --- a/app/shared-hub/reducers/SetupLifecycleReducer.js +++ b/app/shared-hub/reducers/SetupLifecycleReducer.js @@ -12,10 +12,15 @@ */ import { - INIT_SETUP_PROPS + INIT_SETUP_PROPS, + SET_HIGHEST_SETUP_STEP_REACHED } from '../constants/SetupLifecycleConstants'; -const initialState = {}; +const initialState = { + setup_step: 0 // To be used in only. Prevents the user from navigating to a page they have not yet completed the previous steps for +}; + +// const initialState = {}; function SetupLifecycleReducer(state = initialState, action) { switch (action.type) { @@ -34,6 +39,15 @@ function SetupLifecycleReducer(state = initialState, action) { enable_anti_tracking, enable_ad_block, enable_smart_block, + setup_step: 0 + } + }; + } + case SET_HIGHEST_SETUP_STEP_REACHED: { + return { + ...state, + setup: { + ...{ setup_step: action.data } } }; } diff --git a/src/classes/Metrics.js b/src/classes/Metrics.js index 3f7280635..c2ada585c 100644 --- a/src/classes/Metrics.js +++ b/src/classes/Metrics.js @@ -407,7 +407,6 @@ class Metrics { * @return {number} The deepest setup page reached by user during setup */ static _getSetupStep(type) { - console.log('conf.setup_step', conf.setup_step); if (conf.metrics.install_complete_all || type === 'install_complete' || type === 'gb_onboarding' From fd2fb31b591ceca1e727d391170cf1fd2bc1baf4 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 11:41:10 -0500 Subject: [PATCH 09/19] Trying to add setup_step to SetupLifeCycleReducer --- app/shared-hub/reducers/SetupLifecycleReducer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/shared-hub/reducers/SetupLifecycleReducer.js b/app/shared-hub/reducers/SetupLifecycleReducer.js index 8f5976324..cc0f3c6db 100644 --- a/app/shared-hub/reducers/SetupLifecycleReducer.js +++ b/app/shared-hub/reducers/SetupLifecycleReducer.js @@ -47,7 +47,8 @@ function SetupLifecycleReducer(state = initialState, action) { return { ...state, setup: { - ...{ setup_step: action.data } + ...state.setup, + setup_step: action.data } }; } From 271e0edbded9eadf13a35e06c9979b5b6702a223 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 19:06:22 -0500 Subject: [PATCH 10/19] Revert "Trying to add setup_step to SetupLifeCycleReducer" This reverts commit fd2fb31b591ceca1e727d391170cf1fd2bc1baf4. --- app/shared-hub/reducers/SetupLifecycleReducer.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/shared-hub/reducers/SetupLifecycleReducer.js b/app/shared-hub/reducers/SetupLifecycleReducer.js index cc0f3c6db..8f5976324 100644 --- a/app/shared-hub/reducers/SetupLifecycleReducer.js +++ b/app/shared-hub/reducers/SetupLifecycleReducer.js @@ -47,8 +47,7 @@ function SetupLifecycleReducer(state = initialState, action) { return { ...state, setup: { - ...state.setup, - setup_step: action.data + ...{ setup_step: action.data } } }; } From 581e83f5685a2a1455482e48f79e579eae71ea1b Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 19:06:43 -0500 Subject: [PATCH 11/19] Revert "Add highestSetupStepReached() method to next buttons" This reverts commit b7cdd1e975ad127ec1886ecef39dba269c525392. --- .../OnboardingView/OnboardingViewContainer.jsx | 3 --- .../Views/OnboardingView/index.js | 4 +--- .../Step0_WelcomeView/WelcomeView.jsx | 12 +++--------- .../OnboardingViews/Step0_WelcomeView/index.js | 3 +-- .../Step1_CreateAccountView.jsx | 13 ++++--------- .../Step1_CreateAccountView/index.js | 3 +-- .../BlockSettingsView.jsx | 3 +-- .../Step2_BlockSettingsView/index.js | 3 +-- .../ChooseDefaultSearchView.jsx | 3 +-- .../Step3_ChooseDefaultSearchView/index.js | 3 +-- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 9 +-------- .../Step4_ChoosePlanView/index.jsx | 3 +-- .../StepProgressBar/StepProgressBar.jsx | 3 +-- .../OnboardingViews/StepProgressBar/index.js | 3 +-- .../actions/SetupLifecycleActions.js | 10 +--------- .../constants/SetupLifecycleConstants.js | 1 - .../reducers/SetupLifecycleReducer.js | 18 ++---------------- src/classes/Metrics.js | 1 + 18 files changed, 22 insertions(+), 76 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx index 2fcf3ee13..a09ada285 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx @@ -44,7 +44,6 @@ class OnboardingViewContainer extends Component { this.state = { sendMountActions: false, }; - console.log('props container: ', props); const { history } = this.props; history.push(`/${ONBOARDING}/${WELCOME}`); @@ -57,8 +56,6 @@ class OnboardingViewContainer extends Component { const { actions, setup } = this.props; actions.setSetupStep({ setup_step: 7, origin: ONBOARDING }); actions.initSetupProps(setup); - actions.setHighestSetupStepReached({ setup_step: SUCCESS }); - console.log('props after setup: ', props); // TODO modify this as needed const { origin, pathname, hash } = window.location; diff --git a/app/ghostery-browser-hub/Views/OnboardingView/index.js b/app/ghostery-browser-hub/Views/OnboardingView/index.js index 04cf40d45..a332709b4 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingView/index.js @@ -19,8 +19,7 @@ import OnboardingViewContainer from './OnboardingViewContainer'; import { initSetupProps, setSetupStep, - setSetupComplete, - setHighestSetupStepReached + setSetupComplete } from '../../../shared-hub/actions/SetupLifecycleActions'; import { setAdBlock, @@ -35,7 +34,6 @@ export default withRouter(buildReduxHOC( initSetupProps, setSetupStep, setSetupComplete, - setHighestSetupStepReached, setBlockingPolicy, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx index ac2b7fab6..d11dbfe1a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx @@ -13,7 +13,7 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; -import { LOGIN, WELCOME, BLOCK_SETTINGS } from '../../OnboardingView/OnboardingConstants'; +import { LOGIN, WELCOME } from '../../OnboardingView/OnboardingConstants'; /** * A Functional React component for rendering the Browser Welcome View @@ -22,19 +22,13 @@ import { LOGIN, WELCOME, BLOCK_SETTINGS } from '../../OnboardingView/OnboardingC */ const WelcomeView = (props) => { const { actions } = props; - const { setSetupStep, setHighestSetupStepReached } = actions; - - const handleSetupStep = () => { - setSetupStep({ setup_step: LOGIN, origin: WELCOME }); - setHighestSetupStepReached({ setup_step: BLOCK_SETTINGS }); - }; - + const { setSetupStep } = actions; return (
{t('ghostery_browser_hub_onboarding_welcome')}
{t('ghostery_browser_hub_onboarding_lets_begin')}
- handleSetupStep()}> + setSetupStep({ setup_step: LOGIN, origin: WELCOME })}> {t('ghostery_browser_hub_onboarding_lets_do_this')}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js index a3c4f65e8..c649d5a74 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js @@ -13,11 +13,10 @@ import { buildReduxHOC } from '../../../../shared-hub/utils'; import WelcomeView from './WelcomeView'; -import { setSetupStep, setHighestSetupStepReached } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { setSetupStep, - setHighestSetupStepReached }; export default buildReduxHOC([], actionCreators, WelcomeView); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx index 70f2aa10d..fe115ab9e 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx @@ -18,7 +18,7 @@ import ClassNames from 'classnames'; import Step1_LogInForm from '../Step1_LogInForm'; import Step1_CreateAccountForm from '../Step1_CreateAccountForm'; import globals from '../../../../../src/classes/Globals'; -import { LOGIN, ONBOARDING, BLOCK_SETTINGS } from '../../OnboardingView/OnboardingConstants'; +import { LOGIN, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; const SIGN_IN = 'SIGN_IN'; const CREATE_ACCOUNT = 'CREATE_ACCOUNT'; @@ -70,7 +70,7 @@ const renderFAQListItem = (icon, label, description) => ( */ const Step1_CreateAccountView = (props) => { const { user, actions } = props; - const { setSetupStep, setHighestSetupStepReached } = actions; + const { setSetupStep } = actions; const email = user && user.email; const [expanded, setExpanded] = useState(false); @@ -91,16 +91,11 @@ const Step1_CreateAccountView = (props) => { setExpanded(!expanded); }; - const handleSetupStep = () => { - setSetupStep({ setup_step: LOGIN, origin: ONBOARDING }); - setHighestSetupStepReached({ setup_step: BLOCK_SETTINGS }); - }; - const renderSkipLink = () => (
- handleSetupStep()}> + setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}> {t('ghostery_browser_hub_onboarding_skip')}
@@ -112,7 +107,7 @@ const Step1_CreateAccountView = (props) => {
{t('ghostery_browser_hub_onboarding_you_are_signed_in_as')}
{email}
- handleSetupStep()}> + setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}> {t('next')}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js index 812fe19d8..3015cae6f 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js @@ -14,11 +14,10 @@ import { withRouter } from 'react-router-dom'; import { buildReduxHOC } from '../../../../shared-hub/utils'; import Step1_CreateAccountView from './Step1_CreateAccountView'; -import { setSetupStep, setHighestSetupStepReached } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { setSetupStep, - setHighestSetupStepReached }; export default withRouter(buildReduxHOC(['account'], actionCreators, Step1_CreateAccountView)); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index 2e130e3c3..372dbc433 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -69,7 +69,7 @@ class BlockSettingsView extends Component { if (blockAds !== null && kindsOfTrackers !== null && antiTracking !== null && smartBrowsing !== null) { const { actions } = this.props; const { - setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep, setHighestSetupStepReached + setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep } = actions; const { history } = this.props; @@ -93,7 +93,6 @@ class BlockSettingsView extends Component { } setBlockingPolicy({ blockingPolicy }); setSetupStep({ setup_step: CHOOSE_DEFAULT_SEARCH, origin: ONBOARDING }); - setHighestSetupStepReached({ setup_step: CHOOSE_DEFAULT_SEARCH }); history.push('/onboarding/3'); } else { const { setToast } = this.props; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js index 386d1fa57..9394bfdc0 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js @@ -17,7 +17,7 @@ import { logout } from '../../../../Account/AccountActions'; import { setAntiTracking, setAdBlock, setSmartBlocking } from '../../../../shared-hub/actions/AntiSuiteActions'; import setBlockingPolicy from '../../../../shared-hub/actions/BlockingPolicyActions'; import setToast from '../../../../shared-hub/actions/ToastActions'; -import { setSetupStep, setHighestSetupStepReached } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { logout, @@ -27,7 +27,6 @@ const actionCreators = { setBlockingPolicy, setToast, setSetupStep, - setHighestSetupStepReached, }; export default buildReduxHOC(null, actionCreators, BlockSettingsView); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index e27ba0430..2e420893a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -35,10 +35,9 @@ class ChooseDefaultSearchView extends Component { handleSubmit = () => { const { actions, history } = this.props; - const { setSetupStep, setHighestSetupStepReached } = actions; + const { setSetupStep } = actions; setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING }); - setHighestSetupStepReached({ setup_step: CHOOSE_PLAN }); history.push(`/${ONBOARDING}/${CHOOSE_PLAN}`); } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js index 963c524ab..a3a19d61d 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js @@ -13,11 +13,10 @@ import ChooseDefaultSearchView from './ChooseDefaultSearchView'; import { buildReduxHOC } from '../../../../shared-hub/utils'; -import { setSetupStep, setHighestSetupStepReached } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { setSetupStep, - setHighestSetupStepReached }; export default buildReduxHOC(null, actionCreators, ChooseDefaultSearchView); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 56c2a4221..1a161b4cd 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -18,7 +18,7 @@ import PropTypes from 'prop-types'; import RadioButton from '../../../../shared-components/RadioButton'; import globals from '../../../../../src/classes/Globals'; import { BASIC, PLUS, PREMIUM } from '../../../../hub/Views/UpgradePlanView/UpgradePlanViewConstants'; -import { CHOOSE_PLAN, ONBOARDING, SUCCESS } from '../../OnboardingView/OnboardingConstants'; +import { CHOOSE_PLAN, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/plus`; const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/premium`; @@ -218,13 +218,6 @@ class ChoosePlanView extends React.Component { return t('ghostery_browser_hub_onboarding_choose_an_option'); }; - handleSetupStep = () => { - const { actions } = this.props; - const { setSetupStep, setHighestSetupStepReached } = actions; - setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING }); - setHighestSetupStepReached({ setup_step: SUCCESS }); - } - plusCard = (checked, handleClick, showCTAButton = false) => { const { actions } = this.props; const { setSetupStep } = actions; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx index 7d373b261..397a0ab66 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx @@ -13,11 +13,10 @@ import { buildReduxHOC } from '../../../../shared-hub/utils'; import ChoosePlanView from './ChoosePlanView'; -import { setSetupStep, setHighestSetupStepReached } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { setSetupStep, - setHighestSetupStepReached }; export default buildReduxHOC(['account'], actionCreators, ChoosePlanView); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx index 0e19b9dc8..cb2e504f8 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx @@ -53,8 +53,7 @@ const steps = [ * @memberof HubComponents */ const StepProgressBar = (props) => { - const { currentStep, setup } = props; - console.log('setup: ', props); + const { currentStep } = props; const totalSteps = steps.length; const logoutIfStepOne = (stepId) => { diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js index deef818a3..127b75783 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js @@ -15,9 +15,8 @@ import StepProgressBar from './StepProgressBar'; import { buildReduxHOC } from '../../../../shared-hub/utils'; import { logout } from '../../../../Account/AccountActions'; -const stateSlices = ['setup']; const actionCreators = { logout }; -export default buildReduxHOC(stateSlices, actionCreators, StepProgressBar); +export default buildReduxHOC(null, actionCreators, StepProgressBar); diff --git a/app/shared-hub/actions/SetupLifecycleActions.js b/app/shared-hub/actions/SetupLifecycleActions.js index 9c5b00d04..3f40698e9 100644 --- a/app/shared-hub/actions/SetupLifecycleActions.js +++ b/app/shared-hub/actions/SetupLifecycleActions.js @@ -15,8 +15,7 @@ import { makeDeferredDispatcher } from '../utils'; import { INIT_SETUP_PROPS, SET_SETUP_STEP, - SET_SETUP_COMPLETE, - SET_HIGHEST_SETUP_STEP_REACHED + SET_SETUP_COMPLETE } from '../constants/SetupLifecycleConstants'; export function initSetupProps(data) { @@ -31,10 +30,3 @@ export const setSetupStep = export const setSetupComplete = actionData => makeDeferredDispatcher(SET_SETUP_COMPLETE, actionData); - -export function setHighestSetupStepReached(data) { - return { - type: SET_HIGHEST_SETUP_STEP_REACHED, - data, - }; -} diff --git a/app/shared-hub/constants/SetupLifecycleConstants.js b/app/shared-hub/constants/SetupLifecycleConstants.js index 0d3113008..97c968d3e 100644 --- a/app/shared-hub/constants/SetupLifecycleConstants.js +++ b/app/shared-hub/constants/SetupLifecycleConstants.js @@ -14,4 +14,3 @@ export const INIT_SETUP_PROPS = 'INIT_SETUP_PROPS'; export const SET_SETUP_STEP = 'SET_SETUP_STEP'; export const SET_SETUP_COMPLETE = 'SET_SETUP_COMPLETE'; -export const SET_HIGHEST_SETUP_STEP_REACHED = 'SET_HIGHEST_SETUP_STEP_REACHED'; diff --git a/app/shared-hub/reducers/SetupLifecycleReducer.js b/app/shared-hub/reducers/SetupLifecycleReducer.js index 8f5976324..3d30ac6c8 100644 --- a/app/shared-hub/reducers/SetupLifecycleReducer.js +++ b/app/shared-hub/reducers/SetupLifecycleReducer.js @@ -12,15 +12,10 @@ */ import { - INIT_SETUP_PROPS, - SET_HIGHEST_SETUP_STEP_REACHED + INIT_SETUP_PROPS } from '../constants/SetupLifecycleConstants'; -const initialState = { - setup_step: 0 // To be used in only. Prevents the user from navigating to a page they have not yet completed the previous steps for -}; - -// const initialState = {}; +const initialState = {}; function SetupLifecycleReducer(state = initialState, action) { switch (action.type) { @@ -39,15 +34,6 @@ function SetupLifecycleReducer(state = initialState, action) { enable_anti_tracking, enable_ad_block, enable_smart_block, - setup_step: 0 - } - }; - } - case SET_HIGHEST_SETUP_STEP_REACHED: { - return { - ...state, - setup: { - ...{ setup_step: action.data } } }; } diff --git a/src/classes/Metrics.js b/src/classes/Metrics.js index c2ada585c..3f7280635 100644 --- a/src/classes/Metrics.js +++ b/src/classes/Metrics.js @@ -407,6 +407,7 @@ class Metrics { * @return {number} The deepest setup page reached by user during setup */ static _getSetupStep(type) { + console.log('conf.setup_step', conf.setup_step); if (conf.metrics.install_complete_all || type === 'install_complete' || type === 'gb_onboarding' From 94d8d365d6c803126c33d0d53907bee57a482554 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 19:28:57 -0500 Subject: [PATCH 12/19] Prevent user from moving forwards in the StepProgress bar, only back --- .../StepProgressBar/StepProgressBar.jsx | 11 ++++++++++- .../StepProgressBar/StepProgressBar.scss | 1 + 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx index cb2e504f8..f6a024059 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx @@ -70,9 +70,18 @@ const StepProgressBar = (props) => { [`step-${step.id}`]: stepClass !== 'step-completed', }); + if (stepClass === 'incomplete') { + return ( +
+
{step.label}
+
+
+ ); + } + return (
- logoutIfStepOne(step.id)}> + logoutIfStepOne(step.id)}>
{step.label}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss index 342f40307..3513c5c4e 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss @@ -17,6 +17,7 @@ justify-content: space-around; align-items: center; } + .StepProgressBar__Step { height: 34px; width: 32px; From c04012f4e9878ce97b764287d22f9916c065d9a7 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 19:48:03 -0500 Subject: [PATCH 13/19] Add back console log --- app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx index 50e9f57fc..2a3ee0c9d 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx @@ -25,6 +25,7 @@ import StepNavigator from '../OnboardingViews/StepNavigator'; */ const OnboardingView = (props) => { const { sendMountActions, steps } = props; + console.log('in OnboardingView'); return (
From e8ade344c75b0f59c135365db4a2fef94ad4147a Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 20:03:22 -0500 Subject: [PATCH 14/19] Remove test class --- .../Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx index f6a024059..d4be7e485 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx @@ -81,7 +81,7 @@ const StepProgressBar = (props) => { return (
- logoutIfStepOne(step.id)}> + logoutIfStepOne(step.id)}>
{step.label}
From 7d8c57a6f5ee119a793be3ad25dc7f60aed6ac45 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 5 Jan 2021 20:43:47 -0500 Subject: [PATCH 15/19] Fix tooltips --- .../Step2_BlockSettingsView/BlockSettingsView.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index 6af58989d..22bb3c554 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -150,7 +150,7 @@ class BlockSettingsView extends Component {
{t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')}
- +
@@ -175,7 +175,7 @@ class BlockSettingsView extends Component {
{t('ghostery_browser_hub_onboarding_question_anti_tracking')}
- +
@@ -195,7 +195,7 @@ class BlockSettingsView extends Component {
{t('ghostery_browser_hub_onboarding_question_smart_browsing')}
- +
From d946e2e5b34b8504615608bc0af3f8e19425a5cb Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 6 Jan 2021 02:46:54 -0500 Subject: [PATCH 16/19] Get rid of margin-left on all screens. Fix success view strings. Center CTA button on BlockSettings --- .../Step2_BlockSettingsView/BlockSettingsView.jsx | 14 +++++++------- .../Step5_SuccessView/SuccessView.jsx | 4 ++-- app/scss/hub_ghostery_browser.scss | 3 --- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index 22bb3c554..6e74690cb 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -213,14 +213,14 @@ class BlockSettingsView extends Component {
-
+
); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx index 9982bd03e..e4ae3351e 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx @@ -33,9 +33,9 @@ const SuccessView = (props) => {
-
{t('ghostery_browser_hub_onboarding_yay_youre_all_set')}
+
{t('ghostery_browser_hub_onboarding_youve_successfully_set_up_your_browser')}
-
{`${t('ghostery_browser_hub_onboarding_start_browsing_the_web_with')} Ghostery`}
+
{`${t('ghostery_browser_hub_onboarding_surf_with_ease')} Ghostery`}
diff --git a/app/scss/hub_ghostery_browser.scss b/app/scss/hub_ghostery_browser.scss index 65da3ff46..03c0b0635 100644 --- a/app/scss/hub_ghostery_browser.scss +++ b/app/scss/hub_ghostery_browser.scss @@ -30,9 +30,6 @@ html, body, #root { overflow-x: hidden; } @media only screen and (max-width: 740px) { - .App__mainContent { - margin-left: 54px; - } .android-relative {position: relative;} } From 9c126d9b291bb745300e84021d9754c02f0f42dc Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 6 Jan 2021 02:50:45 -0500 Subject: [PATCH 17/19] Fix back button on small screen sizes for SuccessView --- .../Views/OnboardingViews/Step5_SuccessView/SuccessView.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss index 3710e9356..074ce5302 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss @@ -24,6 +24,9 @@ display: flex; width: 68px; margin-top: 142px; + @include breakpoint(small down) { + margin-top: 90px; + } .SuccessView__back { margin-top: 8px; font-size: 16px; From ecb8d986aa7576e0f36dd07be7cb825d4c127f54 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 6 Jan 2021 03:03:10 -0500 Subject: [PATCH 18/19] Bold current step label --- .../Views/OnboardingViews/StepProgressBar/StepProgressBar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss index cf58a860b..7fbbb2a02 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss @@ -80,7 +80,7 @@ width: 38px; font-size: 12px; color: $tundora; - &.currentStep { + &.current { font-weight: 700; } } From 17448c4ade68e6c9976e3b38707d1b35a78a9f42 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 6 Jan 2021 03:06:40 -0500 Subject: [PATCH 19/19] Fix ChoosePlanView price font sizes --- .../OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx | 2 +- .../OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 1a161b4cd..71ac9b443 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -92,7 +92,7 @@ const premiumCard = (checked, handleClick, showCTAButton = false) => {

Ghostery Premium

-

$11.99

+

$11.99

{t('per_month')}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss index 6b56bd4b6..31312470f 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -287,6 +287,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t .ChoosePlanView__price { min-height: 85px; margin-bottom: rem-calc(20); + font-size: 36px; &-blue { color: $price-blue; } @@ -307,6 +308,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t } } &.sub-text { + font-size: 12px; font-weight: 500; } }