Add setup_number for step 1 and step 2

app/ghostery-browser-hub/Views/OnboardingView/OnboardingConstants.js

@@ -10,3 +10,7 @@ export const BLOCK_SETTINGS = '2';
 export const CHOOSE_DEFAULT_SEARCH = '3';
 export const CHOOSE_PLAN = '4';
 export const SUCCESS = '5';
+
+export const SIGN_IN_SUCCESSFUL = '1';
+export const CREATE_ACCOUNT_SUCCESSFUL = '2';
+export const SKIP_ACCOUNT_CREATION = '3';

app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx

@@ -17,7 +17,13 @@ import PropTypes from 'prop-types';
 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,
+	SIGN_IN_SUCCESSFUL,
+	CREATE_ACCOUNT_SUCCESSFUL,
+	SKIP_ACCOUNT_CREATION
+} from '../../OnboardingView/OnboardingConstants';
 
 const SIGN_IN = 'SIGN_IN';
 const CREATE_ACCOUNT = 'CREATE_ACCOUNT';
@@ -59,8 +65,12 @@ const Step1_CreateAccountView = (props) => {
 
 	const [view, setView] = useState(CREATE_ACCOUNT);
 
-	const handleSkipButton = () => {
-		setSetupStep({ setup_step: LOGIN, origin: ONBOARDING });
+	const handleSkipButton = (setup_number) => {
+		setSetupStep({
+			setup_step: LOGIN,
+			setup_number,
+			origin: ONBOARDING,
+		});
 		setToast({
 			toastMessage: '',
 			toastClass: ''
@@ -70,6 +80,12 @@ const Step1_CreateAccountView = (props) => {
 	const handleNextOnSelectPlanStep = () => {
 		const { prev } = props;
 
+		setSetupStep({
+			setup_step: LOGIN,
+			setup_number: CREATE_ACCOUNT_SUCCESSFUL,
+			origin: ONBOARDING,
+		});
+
 		setToast({
 			toastMessage: '',
 			toastClass: ''
@@ -82,7 +98,7 @@ const Step1_CreateAccountView = (props) => {
 		<div className="row align-center-middle">
 			<div className="columns small-10 medium-6" />
 			<div className="columns small-10 medium-6">
-				<NavLink className="Step1_CreateAccountView__skip" to="/onboarding/2" onClick={() => handleSkipButton()}>
+				<NavLink className="Step1_CreateAccountView__skip" to="/onboarding/2" onClick={() => handleSkipButton(SKIP_ACCOUNT_CREATION)}>
 					<span>{t('ghostery_dawn_onboarding_skip')}</span>
 				</NavLink>
 			</div>
@@ -99,7 +115,7 @@ const Step1_CreateAccountView = (props) => {
 			<div className="Step1_CreateAccountView__email">{email}</div>
 			<div className="Step1_CreateAccountView__ctaButtonContainer">
 				{step === LOGIN && (
-					<NavLink className="Step1_CreateAccountView__ctaButton" to="/onboarding/2" onClick={() => handleSkipButton()}>
+					<NavLink className="Step1_CreateAccountView__ctaButton" to="/onboarding/2" onClick={() => handleSkipButton(SIGN_IN_SUCCESSFUL)}>
 						<span>{t('next')}</span>
 					</NavLink>
 				)}

app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx

@@ -42,7 +42,7 @@ class BlockSettingsView extends Component {
 			this.setState({
 				recommendedChoices: true,
 				blockAds: true,
-				kindsOfTrackers: 1,
+				kindsOfTrackers: 2,
 				antiTracking: true,
 				smartBrowsing: true
 			});
@@ -61,6 +61,23 @@ class BlockSettingsView extends Component {
 		this.setState({ [category]: answer });
 	}
 
+	// Refer to https://ghostery.atlassian.net/wiki/spaces/BI/pages/488079383/Ghostery+Browser+-+Onboarding+Pings for setup_number string formatting
+	buildSetupNumberString = () => {
+		const {
+			blockAds,
+			kindsOfTrackers,
+			antiTracking,
+			smartBrowsing
+		} = this.state;
+
+		const partOne = (blockAds) ? '1' : '2';
+		const partTwo = kindsOfTrackers.toString();
+		const partThree = (antiTracking) ? '1' : '2';
+		const partFour = (smartBrowsing) ? '1' : '2';
+
+		return partOne + partTwo + partThree + partFour;
+	}
+
 	handleSubmit = () => {
 		const {
 			blockAds, kindsOfTrackers, antiTracking, smartBrowsing
@@ -87,21 +104,25 @@ class BlockSettingsView extends Component {
 
 			let blockingPolicy;
 			switch (kindsOfTrackers) {
-				case 0:
+				case 1:
 					blockingPolicy = 'BLOCKING_POLICY_EVERYTHING';
 					break;
-				case 1:
+				case 2:
 					blockingPolicy = 'BLOCKING_POLICY_RECOMMENDED';
 					break;
-				case 2:
+				case 3:
 					blockingPolicy = 'BLOCKING_POLICY_NOTHING';
 					break;
 				default:
 					break;
 			}
 			setBlockingPolicy({ blockingPolicy });
 
-			setSetupStep({ setup_step: CHOOSE_DEFAULT_SEARCH, origin: ONBOARDING });
+			setSetupStep({
+				setup_step: CHOOSE_DEFAULT_SEARCH,
+				setup_number: this.buildSetupNumberString(),
+				origin: ONBOARDING
+			});
 			history.push('/onboarding/3');
 		} else {
 			setToast({
@@ -163,19 +184,19 @@ class BlockSettingsView extends Component {
 							</li>
 							<div className="BlockSettingsView_answerBlock">
 								<div className="BlockSettingsView__radioButtonContainer">
-									<RadioButton checked={kindsOfTrackers === 0} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 0)} altDesign />
+									<RadioButton checked={kindsOfTrackers === 1} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 1)} altDesign />
 								</div>
 								<div className="BlockSettingsView_answerText">{t('ghostery_dawn_onboarding_kinds_of_trackers_all')}</div>
 							</div>
 							<div className="BlockSettingsView_answerBlock">
 								<div className="BlockSettingsView__radioButtonContainer">
-									<RadioButton checked={kindsOfTrackers === 1} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 1)} altDesign />
+									<RadioButton checked={kindsOfTrackers === 2} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 2)} altDesign />
 								</div>
 								<div className="BlockSettingsView_answerText">{t('ghostery_dawn_onboarding_kinds_of_trackers_ad_and_analytics')}</div>
 							</div>
 							<div className="BlockSettingsView_answerBlock">
 								<div className="BlockSettingsView__radioButtonContainer">
-									<RadioButton checked={kindsOfTrackers === 2} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 2)} altDesign />
+									<RadioButton checked={kindsOfTrackers === 3} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 3)} altDesign />
 								</div>
 								<div className="BlockSettingsView_answerText">{t('ghostery_dawn_onboarding_kinds_of_trackers_none')}</div>
 							</div>