Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GH-2220: Onboarding - Telemetry #650

Merged
merged 7 commits into from Jan 4, 2021
+193 −145
Merged

GH-2220: Onboarding - Telemetry #650

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a627651
Set the setup_step ConfData property for Welcome and Login/Create Acc…
benstrumeyer Dec 30, 2020
97fdf24
History not working
benstrumeyer Dec 30, 2020
aad8ce6
Add setup step pings to Step4_ChoosePlanView
benstrumeyer Dec 30, 2020
81310fb
Send gb_onboarding and gb_onboarding_success pings. Refactor setSetup…
benstrumeyer Dec 31, 2020
2f24701
Update gb_onboarding setup_step to index 0-4 instead of 1-5
benstrumeyer Dec 31, 2020
70902b4
Remove LoginView since it is replaced with Step1_CreateAccountView
benstrumeyer Dec 31, 2020
ccc26c2
Add TODO
benstrumeyer Dec 31, 2020
File filter
Filter file types
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next
Loading status checks…

Add setup step pings to Step4_ChoosePlanView

  • Loading branch information
@benstrumeyer
benstrumeyer committed Dec 30, 2020
commit aad8ce64b66e31a32e82c9153df7f6c3e81c9ce4
137 app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx
View file
Open in desktop
@@ -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 (
<Fragment>
<div className="ChoosePlanView__cardOuter">
<div className={cardClassNames} onClick={handleClick} data-equalizer-watch>
<div className="ChoosePlanView__radioButtonContainer">
<RadioButton checked={checked} handleClick={handleClick} altDesign />
</div>
<div className="ghostery-plus-image-container">
<div className="ghostery-plus-image" title="Ghostery Plus" alt="Ghostery Plus" />
</div>
<h2>Ghostery Plus</h2>
<div className="ChoosePlanView__price">
<Fragment>
<p className="ChoosePlanView__price-gold font-size-36">$4.99</p>
<p className="ChoosePlanView__price-gold sub-text font-size-12">{t('per_month')}</p>
</Fragment>
</div>
<p className="card-sub-header"><strong>{t('hub_upgrade_additional_protection')}</strong></p>
<div className="ChoosePlanView__valuePropList">
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_private_search')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_tracker_protection')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_speedy_page_loads')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_intelligence_technology')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_ad_free')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_supports_ghosterys_mission')}
</div>
</div>
</div>
</div>
{showCTAButton && (
// Route to next screen
<button className="ChoosePlanView__searchCTAButton" type="button">{t('ghostery_browser_hub_onboarding_keep')}</button>
)}
</Fragment>
);
};

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 (
<Fragment>
<div className="ChoosePlanView__cardOuter">
<div className={cardClassNames} onClick={handleClick} data-equalizer-watch>
<div className="ChoosePlanView__radioButtonContainer">
<RadioButton checked={checked} handleClick={handleClick} altDesign />
</div>
<div className="ghostery-plus-image-container">
<div className="ghostery-plus-image" title="Ghostery Plus" alt="Ghostery Plus" />
</div>
<h2>Ghostery Plus</h2>
<div className="ChoosePlanView__price">
<Fragment>
<p className="ChoosePlanView__price-gold font-size-36">$4.99</p>
<p className="ChoosePlanView__price-gold sub-text font-size-12">{t('per_month')}</p>
</Fragment>
</div>
<p className="card-sub-header"><strong>{t('hub_upgrade_additional_protection')}</strong></p>
<div className="ChoosePlanView__valuePropList">
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_private_search')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_tracker_protection')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_speedy_page_loads')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_intelligence_technology')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_ad_free')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_supports_ghosterys_mission')}
</div>
</div>
</div>
</div>
{showCTAButton && (
<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: 5 })}>
<span>{t('ghostery_browser_hub_onboarding_keep')}</span>
</NavLink>
)}
</Fragment>
);
};

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) ? (
<div className="ChoosePlanView__keepOrUpgradeContainer row align-center align-middle">
<div className="small-12 medium-12 large-4">
{plusCard(this.isPlusPlanChecked(), this.selectPlusPlan, isPlus)}
{this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan, isPlus)}
</div>
<div className="ChoosePlanView__or small-12 large-2">{t('ghostery_browser_hub_onboarding_or')}</div>
<div className="small-12 medium-12 large-4">
@@ -323,7 +328,7 @@ class ChoosePlanView extends React.Component {
)}
{!isPremium && (
<Fragment>
{plusCard(this.isPlusPlanChecked(), this.selectPlusPlan)}
{this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan)}
</Fragment>
)}
{premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan)}
@@ -332,8 +337,9 @@ class ChoosePlanView extends React.Component {
{(isBasic && (
<div className="ChoosePlanView__ctaButtonContainer">
{(selectedPlan === BASIC) && (
// Change to route to next page
<button className="ChoosePlanView__searchCTAButton" type="button">{t('next')}</button>
<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: 5 })}>
<span>{t('next')}</span>
</NavLink>
)}
{selectedPlan === PLUS && (
<a className="ChoosePlanView__searchCTAButton" href={plusCheckoutLink} target="_blank" rel="noreferrer">{t('next')}</a>
@@ -344,8 +350,9 @@ class ChoosePlanView extends React.Component {
</div>
))}
{isPremium && (
// Change to route to next page
<button className="ChoosePlanView__searchCTAButton" type="button">{t('next')}</button>
<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: 5 })}>
<span>{t('next')}</span>
</NavLink>
)}
</div>
)}
8 app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx
View file
Open in desktop
@@ -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);
ProTip! Use n and p to navigate between commits in a pull request.