From a627651544cc42acc532f8ab738f58b134fe5c46 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 29 Dec 2020 22:57:29 -0500 Subject: [PATCH 1/7] Set the setup_step ConfData property for Welcome and Login/Create Account screens --- .../OnboardingViewContainer.jsx | 3 +- .../Step0_WelcomeView/WelcomeView.jsx | 24 ++++++++------- .../Step0_WelcomeView/index.js | 8 ++++- .../Step1_CreateAccountFormContainer.jsx | 2 +- .../Step1_CreateAccountForm/index.js | 2 +- .../Step1_CreateAccountView.jsx | 29 +++++++++++-------- .../Step1_CreateAccountView/index.js | 7 ++++- .../OnboardingViews/Step1_LogInForm/index.js | 4 ++- 8 files changed, 51 insertions(+), 28 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx index 8295db886..5f8ead80a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx @@ -18,6 +18,7 @@ import { BLOCKING_POLICY_RECOMMENDED } from '../../../shared-hub/constants/Block // Component Views import WelcomeView from '../OnboardingViews/Step0_WelcomeView'; +import Step1_CreateAccountView from '../OnboardingViews/Step1_CreateAccountView'; import LoginView from '../OnboardingViews/Step1_LoginView'; import BlockSettingsView from '../OnboardingViews/Step2_BlockSettingsView'; import ChooseDefaultSearchView from '../OnboardingViews/Step3_ChooseDefaultSearchView'; @@ -89,7 +90,7 @@ class OnboardingViewContainer extends Component { { index: 1, path: `/${ONBOARDING}/${LOGIN}`, - bodyComponents: [LoginView], + bodyComponents: [Step1_CreateAccountView], }, { index: 2, 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 6b7fab917..863fde1fe 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx @@ -19,15 +19,19 @@ import { NavLink } from 'react-router-dom'; * @return {JSX} JSX for rendering the Browser Welcome View of the Hub app * @memberof GhosteryBrowserHubViews */ -const WelcomeView = () => ( -
-
{t('ghostery_browser_hub_onboarding_welcome')}
-
{t('ghostery_browser_hub_onboarding_lets_begin')}
- - - { t('ghostery_browser_hub_onboarding_lets_do_this') } - -
-); +const WelcomeView = (props) => { + const { actions } = props; + const { setSetupStep } = actions; + return ( +
+
{t('ghostery_browser_hub_onboarding_welcome')}
+
{t('ghostery_browser_hub_onboarding_lets_begin')}
+ + setSetupStep({ setup_step: 1 })}> + {t('ghostery_browser_hub_onboarding_lets_do_this')} + +
+ ); +}; export default WelcomeView; 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 d5f22aa58..c649d5a74 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js @@ -11,6 +11,12 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ +import { buildReduxHOC } from '../../../../shared-hub/utils'; import WelcomeView from './WelcomeView'; +import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; -export default WelcomeView; +const actionCreators = { + setSetupStep, +}; + +export default buildReduxHOC([], actionCreators, WelcomeView); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx index 8c0180897..31f9ffc76 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx @@ -162,6 +162,7 @@ class CreateAccountFormContainer extends Component { }); actions.register(email, confirmEmail, firstName, lastName, password).then((success) => { if (success) { + // User is automatically logged in, and redirected to the logged in view of BrowserCreateAccountForm actions.getUser().then(() => { if (isUpdatesChecked) actions.handleEmailPreferencesCheckboxChange('global', isUpdatesChecked); }); @@ -170,7 +171,6 @@ class CreateAccountFormContainer extends Component { toastMessage: t('hub_create_account_toast_success'), toastClass: 'success' }); - // Route to next screen } else { actions.setToast({ toastMessage: t('hub_create_account_toast_error'), diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js index 4dcac5d05..3024a3fc1 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js @@ -21,7 +21,7 @@ const actionCreators = { setToast, register, getUser, - handleEmailPreferencesCheckboxChange + handleEmailPreferencesCheckboxChange, }; export default buildReduxHOC(stateSlices, actionCreators, Step1_CreateAccountFormContainer); 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 4b284e200..6804d2878 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 @@ -12,6 +12,7 @@ */ import React, { Fragment, useRef, useState } from 'react'; +import { NavLink } from 'react-router-dom'; import PropTypes from 'prop-types'; import ClassNames from 'classnames'; import Step1_LogInForm from '../Step1_LogInForm'; @@ -61,22 +62,14 @@ const renderFAQListItem = (icon, label, description) => ( ); -const renderSkipLink = () => ( -
-
-
-
{t('ghostery_browser_hub_onboarding_skip')}
-
-
-); - /** * A Functional React component for rendering the Browser Create Account View * @return {JSX} JSX for rendering the Browser Create Account View of the Hub app * @memberof GhosteryBrowserHubViews */ const Step1_CreateAccountView = (props) => { - const { user } = props; + const { user, actions } = props; + const { setSetupStep } = actions; const email = user && user.email; const [expanded, setExpanded] = useState(false); @@ -97,13 +90,25 @@ const Step1_CreateAccountView = (props) => { setExpanded(!expanded); }; + const renderSkipLink = () => ( +
+
+
+ setSetupStep({ setup_step: 2 })}> + {t('ghostery_browser_hub_onboarding_skip')} + +
+
+ ); + return (user ? (
{t('ghostery_browser_hub_onboarding_you_are_signed_in_as')}
{email}
- {/* Link to next page */} - + setSetupStep({ setup_step: 2 })}> + {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 ebf16f74d..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,5 +14,10 @@ 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'; -export default withRouter(buildReduxHOC(['account'], null, Step1_CreateAccountView)); +const actionCreators = { + setSetupStep, +}; + +export default withRouter(buildReduxHOC(['account'], actionCreators, Step1_CreateAccountView)); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/index.js index 0cecb8185..21a7378e6 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/index.js @@ -22,6 +22,7 @@ import { } from '../../../../Account/AccountActions'; import { getTheme } from '../../../../panel/actions/PanelActions'; import setToast from '../../../../shared-hub/actions/ToastActions'; +import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; const stateSlices = ['account']; const actionCreators = { @@ -30,7 +31,8 @@ const actionCreators = { getUser, getUserSettings, getTheme, - resetPassword + resetPassword, + setSetupStep, }; export default buildReduxHOC(stateSlices, actionCreators, Step1_LogInFormContainer); From 97fdf24ac4d346267f633d9e9b241bb8d612b607 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 30 Dec 2020 00:01:01 -0500 Subject: [PATCH 2/7] History not working --- .../Step2_BlockSettingsView/BlockSettingsView.jsx | 9 +++++++-- .../OnboardingViews/Step2_BlockSettingsView/index.js | 2 ++ 2 files changed, 9 insertions(+), 2 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 13cc9fe6d..d49ab4c45 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -65,9 +65,12 @@ class BlockSettingsView extends Component { // Will only change user settings if all questions are answered if (blockAds !== null && kindsOfTrackers !== null && antiTracking !== null && smartBrowsing !== null) { + const { actions } = this.props; const { - setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy - } = this.props; + setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep + } = actions; + // const { context } = this; + // const { history } = context; setAdBlock(blockAds); setAntiTracking(antiTracking); @@ -88,6 +91,8 @@ class BlockSettingsView extends Component { break; } setBlockingPolicy({ blockingPolicy }); + setSetupStep({ setup_step: 3 }); + // 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 93e4cd51f..12c2c9950 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js @@ -16,6 +16,7 @@ import { buildReduxHOC } from '../../../../shared-hub/utils'; 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 = { setAntiTracking, @@ -23,6 +24,7 @@ const actionCreators = { setSmartBlocking, setBlockingPolicy, setToast, + setSetupStep, }; export default buildReduxHOC(null, actionCreators, BlockSettingsView); From aad8ce64b66e31a32e82c9153df7f6c3e81c9ce4 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 30 Dec 2020 02:43:09 -0500 Subject: [PATCH 3/7] Add setup step pings to Step4_ChoosePlanView --- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 137 +++++++++--------- .../Step4_ChoosePlanView/index.jsx | 8 +- 2 files changed, 78 insertions(+), 67 deletions(-) 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 4ce39dc8a..ab37cf71f 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -12,6 +12,7 @@ */ import React, { Fragment } from 'react'; +import { NavLink } from 'react-router-dom'; import ClassNames from 'classnames'; import PropTypes from 'prop-types'; import RadioButton from '../../../../shared-components/RadioButton'; @@ -72,64 +73,6 @@ const basicCard = (checked, handleClick) => { ); }; -const plusCard = (checked, handleClick, showCTAButton = false) => { - const cardClassNames = ClassNames('ChoosePlanView__card plus', { - checked - }); - return ( - -
-
-
- -
-
-
-
-

Ghostery Plus

-
- -

$4.99

-

{t('per_month')}

- -
-

{t('hub_upgrade_additional_protection')}

-
-
- - {t('ghostery_browser_hub_onboarding_private_search')} -
-
- - {t('ghostery_browser_hub_onboarding_tracker_protection')} -
-
- - {t('ghostery_browser_hub_onboarding_speedy_page_loads')} -
-
- - {t('ghostery_browser_hub_onboarding_intelligence_technology')} -
-
- - {t('ghostery_browser_hub_onboarding_ad_free')} -
-
- - {t('ghostery_browser_hub_onboarding_supports_ghosterys_mission')} -
-
-
-
- {showCTAButton && ( - // Route to next screen - - )} - - ); -}; - const premiumCard = (checked, handleClick, showCTAButton = false) => { const cardClassNames = ClassNames('ChoosePlanView__card premium', { checked @@ -274,8 +217,70 @@ class ChoosePlanView extends React.Component { return t('ghostery_browser_hub_onboarding_choose_an_option'); }; + plusCard = (checked, handleClick, showCTAButton = false) => { + const { actions } = this.props; + const { setSetupStep } = actions; + const cardClassNames = ClassNames('ChoosePlanView__card plus', { + checked + }); + return ( + +
+
+
+ +
+
+
+
+

Ghostery Plus

+
+ +

$4.99

+

{t('per_month')}

+ +
+

{t('hub_upgrade_additional_protection')}

+
+
+ + {t('ghostery_browser_hub_onboarding_private_search')} +
+
+ + {t('ghostery_browser_hub_onboarding_tracker_protection')} +
+
+ + {t('ghostery_browser_hub_onboarding_speedy_page_loads')} +
+
+ + {t('ghostery_browser_hub_onboarding_intelligence_technology')} +
+
+ + {t('ghostery_browser_hub_onboarding_ad_free')} +
+
+ + {t('ghostery_browser_hub_onboarding_supports_ghosterys_mission')} +
+
+
+
+ {showCTAButton && ( + setSetupStep({ setup_step: 5 })}> + {t('ghostery_browser_hub_onboarding_keep')} + + )} + + ); + }; + render() { - const { user, didNotSelectGhosterySearch } = this.props; + const { user, didNotSelectGhosterySearch, actions } = this.props; + const { setSetupStep } = actions; const { expanded, selectedPlan } = this.state; const isBasic = !user; @@ -309,7 +314,7 @@ class ChoosePlanView extends React.Component { {(isPlus) ? (
- {plusCard(this.isPlusPlanChecked(), this.selectPlusPlan, isPlus)} + {this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan, isPlus)}
{t('ghostery_browser_hub_onboarding_or')}
@@ -323,7 +328,7 @@ class ChoosePlanView extends React.Component { )} {!isPremium && ( - {plusCard(this.isPlusPlanChecked(), this.selectPlusPlan)} + {this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan)} )} {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan)} @@ -332,8 +337,9 @@ class ChoosePlanView extends React.Component { {(isBasic && (
{(selectedPlan === BASIC) && ( - // Change to route to next page - + setSetupStep({ setup_step: 5 })}> + {t('next')} + )} {selectedPlan === PLUS && ( {t('next')} @@ -344,8 +350,9 @@ class ChoosePlanView extends React.Component {
))} {isPremium && ( - // Change to route to next page - + setSetupStep({ setup_step: 5 })}> + {t('next')} + )}
)} 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 402d19108..397a0ab66 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx @@ -12,7 +12,11 @@ */ import { buildReduxHOC } from '../../../../shared-hub/utils'; - import ChoosePlanView from './ChoosePlanView'; +import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; + +const actionCreators = { + setSetupStep, +}; -export default buildReduxHOC(['account'], null, ChoosePlanView); +export default buildReduxHOC(['account'], actionCreators, ChoosePlanView); From 81310fbb7e9544610e46d33c57ee059043034321 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 31 Dec 2020 00:10:42 -0500 Subject: [PATCH 4/7] Send gb_onboarding and gb_onboarding_success pings. Refactor setSetupStep to use OnboardingConstants. Add react-router to onboarding hub --- .../OnboardingViewContainer.jsx | 4 ++-- .../Step0_WelcomeView/WelcomeView.jsx | 3 ++- .../Step1_CreateAccountView.jsx | 5 ++-- .../BlockSettingsView.jsx | 8 +++---- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 7 +++--- .../Step5_SuccessView/SuccessView.jsx | 20 +++++++++------- .../Step5_SuccessView/index.js | 8 ++++++- app/shared-hub/utils/index.js | 3 ++- src/background.js | 5 ++++ src/classes/Metrics.js | 24 ++++++++++++++++++- 10 files changed, 64 insertions(+), 23 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx index 5f8ead80a..8e17fd419 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx @@ -55,7 +55,7 @@ class OnboardingViewContainer extends Component { // TODO modify this as needed const { actions, setup } = this.props; - actions.setSetupStep({ setup_step: 7 }); + actions.setSetupStep({ setup_step: 7, origin: ONBOARDING }); actions.initSetupProps(setup); // TODO modify this as needed @@ -67,7 +67,7 @@ class OnboardingViewContainer extends Component { this.state = { sendMountActions: true }; - actions.setSetupStep({ setup_step: 8 }); + actions.setSetupStep({ setup_step: 8, origin: ONBOARDING }); actions.setBlockingPolicy({ blockingPolicy: BLOCKING_POLICY_RECOMMENDED }); actions.setAntiTracking({ enable_anti_tracking: true }); // covered actions.setAdBlock({ enable_ad_block: true }); // covered 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 863fde1fe..8b848815d 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx @@ -13,6 +13,7 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; +import { LOGIN, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; /** * A Functional React component for rendering the Browser Welcome View @@ -27,7 +28,7 @@ const WelcomeView = (props) => {
{t('ghostery_browser_hub_onboarding_welcome')}
{t('ghostery_browser_hub_onboarding_lets_begin')}
- setSetupStep({ setup_step: 1 })}> + setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}> {t('ghostery_browser_hub_onboarding_lets_do_this')}
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 6804d2878..b171df01d 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,6 +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 { BLOCK_SETTINGS, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; const SIGN_IN = 'SIGN_IN'; const CREATE_ACCOUNT = 'CREATE_ACCOUNT'; @@ -94,7 +95,7 @@ const Step1_CreateAccountView = (props) => {
- setSetupStep({ setup_step: 2 })}> + setSetupStep({ setup_step: BLOCK_SETTINGS, origin: ONBOARDING })}> {t('ghostery_browser_hub_onboarding_skip')}
@@ -106,7 +107,7 @@ const Step1_CreateAccountView = (props) => {
{t('ghostery_browser_hub_onboarding_you_are_signed_in_as')}
{email}
- setSetupStep({ setup_step: 2 })}> + setSetupStep({ setup_step: BLOCK_SETTINGS, origin: ONBOARDING })}> {t('next')}
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 d49ab4c45..b281816db 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -16,6 +16,7 @@ import React, { Component } from 'react'; // import Tooltip from '../../../../panel/components/Tooltip'; import RadioButton from '../../../../shared-components/RadioButton/RadioButton'; import ToggleCheckbox from '../../../../shared-components/ToggleCheckbox/ToggleCheckbox'; +import { CHOOSE_DEFAULT_SEARCH, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; /** * @class Implement the Block Settings View for the Ghostery Browser Hub @@ -69,8 +70,7 @@ class BlockSettingsView extends Component { const { setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep } = actions; - // const { context } = this; - // const { history } = context; + const { history } = this.props; setAdBlock(blockAds); setAntiTracking(antiTracking); @@ -91,8 +91,8 @@ class BlockSettingsView extends Component { break; } setBlockingPolicy({ blockingPolicy }); - setSetupStep({ setup_step: 3 }); - // history.push('/onboarding/3'); + setSetupStep({ setup_step: CHOOSE_DEFAULT_SEARCH, origin: ONBOARDING }); + history.push('/onboarding/3'); } else { const { setToast } = this.props; 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 ab37cf71f..1d023661e 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -18,6 +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 { SUCCESS, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/plus`; const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/premium`; @@ -270,7 +271,7 @@ class ChoosePlanView extends React.Component {
{showCTAButton && ( - setSetupStep({ setup_step: 5 })}> + setSetupStep({ setup_step: SUCCESS, origin: ONBOARDING })}> {t('ghostery_browser_hub_onboarding_keep')} )} @@ -337,7 +338,7 @@ class ChoosePlanView extends React.Component { {(isBasic && (
{(selectedPlan === BASIC) && ( - setSetupStep({ setup_step: 5 })}> + setSetupStep({ setup_step: SUCCESS, origin: ONBOARDING })}> {t('next')} )} @@ -350,7 +351,7 @@ class ChoosePlanView extends React.Component {
))} {isPremium && ( - setSetupStep({ setup_step: 5 })}> + setSetupStep({ setup_step: SUCCESS, origin: ONBOARDING })}> {t('next')} )} 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 815e60463..c1a87cc37 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx @@ -18,13 +18,17 @@ import React from 'react'; * @return {JSX} JSX for rendering the Browser Success View of the Hub app * @memberof HubComponents */ -const SuccessView = () => ( -
-
{t('ghostery_browser_hub_onboarding_yay_youre_all_set')}
-
{`${t('ghostery_browser_hub_onboarding_start_browsing_the_web_with')} Ghostery`}
- - -
-); +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`}
+ + +
+ ); +}; export default SuccessView; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/index.js index cdcea8832..9b5cf3814 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/index.js @@ -12,5 +12,11 @@ */ import SuccessView from './SuccessView'; +import { buildReduxHOC } from '../../../../shared-hub/utils'; +import sendPing from '../../../../shared-hub/actions/MetricsActions'; -export default SuccessView; +const actionCreators = { + sendPing +}; + +export default buildReduxHOC(null, actionCreators, SuccessView); diff --git a/app/shared-hub/utils/index.js b/app/shared-hub/utils/index.js index 693a05465..55f478196 100644 --- a/app/shared-hub/utils/index.js +++ b/app/shared-hub/utils/index.js @@ -20,6 +20,7 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; // Imports utilities from elsewhere in the codebase to reduce duplicate code import { log } from '../../../src/utils/common'; @@ -106,7 +107,7 @@ function buildReduxHOC(stateKeys, actionCreators, baseComponent) { actions: bindActionCreators(actionCreators, dispatch) }); - return connect(mapStateToProps, mapDispatchToProps)(baseComponent); + return withRouter(connect(mapStateToProps, mapDispatchToProps)(baseComponent)); } export { diff --git a/src/background.js b/src/background.js index 64c6fb206..89e7f08c4 100644 --- a/src/background.js +++ b/src/background.js @@ -557,6 +557,11 @@ function handleGhosteryHub(name, message, callback) { } else { ({ setup_step } = setup_step); } + const origin = message.origin || ''; + if (origin === 'onboarding') { + conf.setup_step = message.setup_step; + metrics.ping('gb_onboarding'); + } callback({ setup_step }); break; } diff --git a/src/classes/Metrics.js b/src/classes/Metrics.js index 0a4d7c16d..e0730d5fa 100644 --- a/src/classes/Metrics.js +++ b/src/classes/Metrics.js @@ -184,6 +184,12 @@ class Metrics { this._sendReq(type, ['all']); break; + // Ghostery Browser Hub - Ghostery 8.5.4+ + case 'gb_onboarding': + case 'gb_onboarding_success': + this._sendReq(type, ['all']); + break; + // Uncaught Pings default: log(`metrics ping() error: ping name ${type} not found`); @@ -285,7 +291,7 @@ class Metrics { // Antitracking state this._buildQueryPair('at', conf.enable_anti_tracking ? '1' : '0') + // The deepest setup page reached by user during setup - this._buildQueryPair('ss', (conf.metrics.install_complete_all || type === 'install_complete') ? conf.setup_step.toString() : '-1') + + this._buildQueryPair('ss', Metrics._getSetupStep(type).toString()) + // The number of times the user has gone through setup this._buildQueryPair('sl', conf.setup_number.toString()) + // Type of blocking selected during setup @@ -393,6 +399,22 @@ class Metrics { return 'gbe'; } + /** + * Get the Setup step + * + * @private + * + * @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' + || type === 'gb_onboarding_success') return conf.setup_step; + return -1; + } + /** * Calculate days since the last daily active ping. * From 2f247013e498992c6b884bd5e69a35313d1edb1b Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 31 Dec 2020 00:20:18 -0500 Subject: [PATCH 5/7] Update gb_onboarding setup_step to index 0-4 instead of 1-5 --- .../OnboardingViews/Step0_WelcomeView/WelcomeView.jsx | 4 ++-- .../OnboardingViews/Step1_CreateAccountForm/index.js | 2 +- .../Step1_CreateAccountView/Step1_CreateAccountView.jsx | 6 +++--- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 8 ++++---- src/classes/Metrics.js | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) 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 8b848815d..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, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; +import { LOGIN, WELCOME } from '../../OnboardingView/OnboardingConstants'; /** * A Functional React component for rendering the Browser Welcome View @@ -28,7 +28,7 @@ const WelcomeView = (props) => {
{t('ghostery_browser_hub_onboarding_welcome')}
{t('ghostery_browser_hub_onboarding_lets_begin')}
- setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}> + setSetupStep({ setup_step: LOGIN, origin: WELCOME })}> {t('ghostery_browser_hub_onboarding_lets_do_this')}
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js index 3024a3fc1..4dcac5d05 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js @@ -21,7 +21,7 @@ const actionCreators = { setToast, register, getUser, - handleEmailPreferencesCheckboxChange, + handleEmailPreferencesCheckboxChange }; export default buildReduxHOC(stateSlices, actionCreators, Step1_CreateAccountFormContainer); 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 b171df01d..0451de371 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 { BLOCK_SETTINGS, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; +import { LOGIN, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; const SIGN_IN = 'SIGN_IN'; const CREATE_ACCOUNT = 'CREATE_ACCOUNT'; @@ -95,7 +95,7 @@ const Step1_CreateAccountView = (props) => {
- setSetupStep({ setup_step: BLOCK_SETTINGS, origin: ONBOARDING })}> + setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}> {t('ghostery_browser_hub_onboarding_skip')}
@@ -107,7 +107,7 @@ const Step1_CreateAccountView = (props) => {
{t('ghostery_browser_hub_onboarding_you_are_signed_in_as')}
{email}
- setSetupStep({ setup_step: BLOCK_SETTINGS, origin: ONBOARDING })}> + setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}> {t('next')}
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 1d023661e..93960f467 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 { SUCCESS, ONBOARDING } 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`; @@ -271,7 +271,7 @@ class ChoosePlanView extends React.Component {
{showCTAButton && ( - setSetupStep({ setup_step: SUCCESS, origin: ONBOARDING })}> + setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> {t('ghostery_browser_hub_onboarding_keep')} )} @@ -338,7 +338,7 @@ class ChoosePlanView extends React.Component { {(isBasic && (
{(selectedPlan === BASIC) && ( - setSetupStep({ setup_step: SUCCESS, origin: ONBOARDING })}> + setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> {t('next')} )} @@ -351,7 +351,7 @@ class ChoosePlanView extends React.Component {
))} {isPremium && ( - setSetupStep({ setup_step: SUCCESS, origin: ONBOARDING })}> + setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> {t('next')} )} diff --git a/src/classes/Metrics.js b/src/classes/Metrics.js index e0730d5fa..3f7280635 100644 --- a/src/classes/Metrics.js +++ b/src/classes/Metrics.js @@ -184,7 +184,7 @@ class Metrics { this._sendReq(type, ['all']); break; - // Ghostery Browser Hub - Ghostery 8.5.4+ + // Ghostery Browser Hub - Ghostery 8.5.5+ case 'gb_onboarding': case 'gb_onboarding_success': this._sendReq(type, ['all']); From 70902b40f2c0cff72648e191f06e57c1f9de8997 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 31 Dec 2020 00:25:32 -0500 Subject: [PATCH 6/7] Remove LoginView since it is replaced with Step1_CreateAccountView --- .../OnboardingView/OnboardingViewContainer.jsx | 3 +-- .../Step1_LoginView/LoginView.jsx | 18 ------------------ .../OnboardingViews/Step1_LoginView/index.js | 16 ---------------- 3 files changed, 1 insertion(+), 36 deletions(-) delete mode 100644 app/ghostery-browser-hub/Views/OnboardingViews/Step1_LoginView/LoginView.jsx delete mode 100644 app/ghostery-browser-hub/Views/OnboardingViews/Step1_LoginView/index.js diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx index 8e17fd419..a09ada285 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx @@ -19,7 +19,6 @@ import { BLOCKING_POLICY_RECOMMENDED } from '../../../shared-hub/constants/Block // Component Views import WelcomeView from '../OnboardingViews/Step0_WelcomeView'; import Step1_CreateAccountView from '../OnboardingViews/Step1_CreateAccountView'; -import LoginView from '../OnboardingViews/Step1_LoginView'; import BlockSettingsView from '../OnboardingViews/Step2_BlockSettingsView'; import ChooseDefaultSearchView from '../OnboardingViews/Step3_ChooseDefaultSearchView'; import ChoosePlanView from '../OnboardingViews/Step4_ChoosePlanView'; @@ -105,7 +104,7 @@ class OnboardingViewContainer extends Component { { index: 4, path: `/${ONBOARDING}/${CHOOSE_PLAN}`, - bodyComponents: [ChoosePlanView, LoginView], + bodyComponents: [ChoosePlanView], }, { index: 5, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LoginView/LoginView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LoginView/LoginView.jsx deleted file mode 100644 index 29806db95..000000000 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LoginView/LoginView.jsx +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Ghostery Browser Hub Login View Component - * - * Ghostery Browser Extension - * https://www.ghostery.com/ - * - * Copyright 2020 Ghostery, Inc. All rights reserved. - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0 - */ - -import React from 'react'; - -const LoginView = () =>

Step 1: Login View

; - -export default LoginView; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LoginView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LoginView/index.js deleted file mode 100644 index d059cb767..000000000 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LoginView/index.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Point of entry index.js file for Ghostery Browser Hub Onboarding Login View - * - * Ghostery Browser Extension - * https://www.ghostery.com/ - * - * Copyright 2020 Ghostery, Inc. All rights reserved. - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0 - */ - -import LoginView from './LoginView'; - -export default LoginView; From ccc26c23f5bd4ceae8de329088759c1278cc5c0c Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 31 Dec 2020 00:30:34 -0500 Subject: [PATCH 7/7] Add TODO --- .../Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx | 1 + 1 file changed, 1 insertion(+) 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 dd0f23058..5c8ad8e93 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -13,6 +13,7 @@ import React from 'react'; +// TODO: Add setSetupStep({ setup_step: CHOOSE_DEFAULT_SEARCH, origin: WELCOME }) to next button const ChooseDefaultSearchView = () =>

Step 3: Choose Default Search View

; export default ChooseDefaultSearchView;