Add setupStep constants to Step 4 and update BlockSettingsView render…

…Helpers

app/dawn-hub/Views/OnboardingView/OnboardingConstants.js

@@ -19,6 +19,19 @@ export const BLOCK_SETTINGS = '2';
 export const CHOOSE_DEFAULT_SEARCH = '3';
 export const CHOOSE_PLAN = '4';
 export const SUCCESS = '5';
+
+// Setup Step Constants
+
+// Step 1
 export const SIGN_IN_SUCCESSFUL = '1';
 export const CREATE_ACCOUNT_SUCCESSFUL = '2';
 export const SKIP_ACCOUNT_CREATION = '3';
+
+// Step 4
+export const FREE_USER_NO_TRIAL = '1';
+export const FREE_USER_PLUS_TRIAL = '2';
+export const FREE_USER_PLUS_SUBSCRIPTION = '3';
+export const FREE_USER_PREMIUM_SUBSCRIPTION = '4';
+export const PLUS_SUBSCRIBER_KEEP_SUBSCRIPTION = '5';
+export const PLUS_SUBSCRIBER_PREMIUM_SUBSCRIPTION = '6';
+export const PREMIUM_SUBSCRIBER_KEEP_SUBSCRIPTION = '7';

app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx

@@ -181,9 +181,9 @@ class BlockSettingsView extends Component {
 									</div>
 								</div>
 							</li>
-							{this.renderAnswerBlock((kindsOfTrackers === 0), 'kindsOfTrackers', 0, t('ghostery_dawn_onboarding_kinds_of_trackers_all'))}
-							{this.renderAnswerBlock((kindsOfTrackers === 1), 'kindsOfTrackers', 1, t('ghostery_dawn_onboarding_kinds_of_trackers_ad_and_analytics'))}
-							{this.renderAnswerBlock((kindsOfTrackers === 2), 'kindsOfTrackers', 2, t('ghostery_dawn_onboarding_kinds_of_trackers_none'))}
+							{this.renderAnswerBlock((kindsOfTrackers === 1), 'kindsOfTrackers', 1, t('ghostery_dawn_onboarding_kinds_of_trackers_all'))}
+							{this.renderAnswerBlock((kindsOfTrackers === 2), 'kindsOfTrackers', 2, t('ghostery_dawn_onboarding_kinds_of_trackers_ad_and_analytics'))}
+							{this.renderAnswerBlock((kindsOfTrackers === 3), 'kindsOfTrackers', 3, t('ghostery_dawn_onboarding_kinds_of_trackers_none'))}
 							<li className="BlockSettingsView_question">
 								<div className="BlockSettingsView_questionBlock">
 									{t('ghostery_dawn_onboarding_question_anti_tracking')}

app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx

@@ -145,13 +145,6 @@ class ChooseDefaultSearchView extends Component {
 			console.error(error);
 		}
 
-		// chrome.runtime.sendMessage('search@ghostery.com', payload, () => {
-		// 	// TODO handle errors if needed
-		// 	// TODO save user's search setting to redux / background if needed
-		// 	setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING });
-		// 	history.push(`/${ONBOARDING}/${CHOOSE_PLAN}`);
-		// });
-
 		setDefaultSearch(chosenSearchName);
 		setSetupStep({
 			setup_step: CHOOSE_PLAN,

app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx

@@ -18,7 +18,17 @@ 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,
+	FREE_USER_NO_TRIAL,
+	FREE_USER_PLUS_TRIAL,
+	FREE_USER_PLUS_SUBSCRIPTION,
+	FREE_USER_PREMIUM_SUBSCRIPTION,
+	PLUS_SUBSCRIBER_KEEP_SUBSCRIPTION,
+	PLUS_SUBSCRIBER_PREMIUM_SUBSCRIPTION,
+	PREMIUM_SUBSCRIBER_KEEP_SUBSCRIPTION
+} from '../../OnboardingView/OnboardingConstants';
 import { SEARCH_GHOSTERY } from '../Step3_ChooseDefaultSearchView/ChooseDefaultSearchConstants';
 
 const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/plus`;
@@ -208,7 +218,7 @@ class ChoosePlanView extends React.Component {
 					</div>
 				</div>
 				{showCTAButton && (
-					<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 5, origin: ONBOARDING })}>
+					<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: PLUS_SUBSCRIBER_KEEP_SUBSCRIPTION, origin: ONBOARDING })}>
 						<span>{t('ghostery_dawn_onboarding_keep')}</span>
 					</NavLink>
 				)}
@@ -278,7 +288,7 @@ class ChoosePlanView extends React.Component {
 					</div>
 				</div>
 				{showCTAButton && (
-					<a className="ChoosePlanView__premiumCTAButton" href={premiumCheckoutLink} target="_blank" rel="noreferrer" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 6, origin: ONBOARDING }); history.push('/onboarding/5'); }}>{t('ghostery_dawn_onboarding_upgrade')}</a>
+					<a className="ChoosePlanView__premiumCTAButton" href={premiumCheckoutLink} target="_blank" rel="noreferrer" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: PLUS_SUBSCRIBER_PREMIUM_SUBSCRIPTION, origin: ONBOARDING }); history.push('/onboarding/5'); }}>{t('ghostery_dawn_onboarding_upgrade')}</a>
 				)}
 			</Fragment>
 		);
@@ -329,10 +339,10 @@ class ChoosePlanView extends React.Component {
 							*/}
 							{/* May have to change the below links depending on GH-2248 */}
 							{loggedIn && (
-								<a className="ChoosePlanView__searchCTAButton" href={plusCheckoutLink} target="_blank" rel="noreferrer" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 2, origin: ONBOARDING }); history.push('/onboarding/5'); }}>{t('ghostery_dawn_onboarding_start_trial')}</a>
+								<a className="ChoosePlanView__searchCTAButton" href={plusCheckoutLink} target="_blank" rel="noreferrer" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: FREE_USER_PLUS_TRIAL, origin: ONBOARDING }); history.push('/onboarding/5'); }}>{t('ghostery_dawn_onboarding_start_trial')}</a>
 							)}
 							{!loggedIn && (
-								<div className="ChoosePlanView__searchCTAButton" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 2, origin: ONBOARDING }); history.push('/onboarding/5'); }}>{t('ghostery_dawn_onboarding_start_trial')}</div>
+								<div className="ChoosePlanView__searchCTAButton" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: FREE_USER_PLUS_TRIAL, origin: ONBOARDING }); history.push('/onboarding/5'); }}>{t('ghostery_dawn_onboarding_start_trial')}</div>
 							)}
 							<div className="ChoosePlanView__seeAllPlans" onClick={this.toggleSection}>{t('ghostery_dawn_onboarding_see_all_plans')}</div>
 							<div className={arrowClassNames} onClick={this.toggleSection} />
@@ -366,20 +376,20 @@ class ChoosePlanView extends React.Component {
 							{(isBasic && (
 								<div className="ChoosePlanView__ctaButtonContainer">
 									{(selectedPlan === BASIC) && (
-										<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 1, origin: ONBOARDING })}>
+										<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: FREE_USER_NO_TRIAL, origin: ONBOARDING })}>
 											<span>{t('next_or_start_trial')}</span>
 										</NavLink>
 									)}
 									{selectedPlan === PLUS && (
-										<a className="ChoosePlanView__searchCTAButton" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 3, origin: ONBOARDING }); history.push('/onboarding/5'); }} href={plusCheckoutLink} target="_blank" rel="noreferrer">{t('next_or_start_trial')}</a>
+										<a className="ChoosePlanView__searchCTAButton" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: FREE_USER_PLUS_SUBSCRIPTION, origin: ONBOARDING }); history.push('/onboarding/5'); }} href={plusCheckoutLink} target="_blank" rel="noreferrer">{t('next_or_start_trial')}</a>
 									)}
 									{selectedPlan === PREMIUM && (
-										<a className="ChoosePlanView__searchCTAButton" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 4, origin: ONBOARDING }); history.push('/onboarding/5'); }} href={premiumCheckoutLink} target="_blank" rel="noreferrer">{t('next_or_start_trial')}</a>
+										<a className="ChoosePlanView__searchCTAButton" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: FREE_USER_PREMIUM_SUBSCRIPTION, origin: ONBOARDING }); history.push('/onboarding/5'); }} href={premiumCheckoutLink} target="_blank" rel="noreferrer">{t('next_or_start_trial')}</a>
 									)}
 								</div>
 							))}
 							{isPremium && (
-								<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 7, origin: ONBOARDING })}>
+								<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: PREMIUM_SUBSCRIBER_KEEP_SUBSCRIPTION, origin: ONBOARDING })}>
 									<span>{t('next')}</span>
 								</NavLink>
 							)}