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

setup_number ping parameter #669

Merged
merged 16 commits into from Jan 29, 2021
+254 −110
Merged

setup_number ping parameter #669

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
071e835
Add setup_number for step 1 and step 2
benstrumeyer Jan 26, 2021
17047d9
Get rid of dawn_setup_number, replace with setup_number
benstrumeyer Jan 26, 2021
3e55b83
Merge branch 'ghostery-browser-intro-hub' into setup-number-ping-param
benstrumeyer Jan 27, 2021
6c7ecff
Add setup_number to ChooseSearchView
benstrumeyer Jan 27, 2021
c5dbdb1
Add setup_number to ChooseDefaultSearchView. TODO: Add trial setup pi…
benstrumeyer Jan 27, 2021
cd47952
Add back in subscriptionType ping param...
benstrumeyer Jan 27, 2021
2053005
Merge branch 'ghostery-browser-intro-hub' into setup-number-ping-param
benstrumeyer Jan 27, 2021
d1c5923
Update setup_number to use fetchSearchEnginesAsync value for other dr…
benstrumeyer Jan 27, 2021
9b5a66c
Update setSetupStep setup_numbers
benstrumeyer Jan 27, 2021
2ae2f7d
Move user to success screen if they get redirected to checkout-web in…
benstrumeyer Jan 27, 2021
381ba91
Merge branch 'ghostery-browser-intro-hub' into setup-number-ping-param
benstrumeyer Jan 28, 2021
6db22fd
Add setupStep constants to Step 4 and update BlockSettingsView render…
benstrumeyer Jan 28, 2021
8ec0ab7
One liner onClick handlers
benstrumeyer Jan 28, 2021
d65d2b2
Merge branch 'ghostery-browser-intro-hub' into setup-number-ping-param
benstrumeyer Jan 28, 2021
623fc0c
Change setup_number to dawn_setup_number
benstrumeyer Jan 28, 2021
9ecaf06
Add list of possible search engines, minus SEARCH_ENCRYPT and update …
benstrumeyer Jan 29, 2021
File filter
Filter file types
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next

Update setSetupStep setup_numbers

  • Loading branch information
@benstrumeyer
benstrumeyer committed Jan 27, 2021
commit 9b5a66cddb2bf60e193b1554c7064150c969ef4a
150 app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx
View file
Open in desktop
@@ -77,72 +77,6 @@ const basicCard = (checked, handleClick) => {
);
};

const premiumCard = (checked, handleClick, showCTAButton = false) => {
const cardClassNames = ClassNames('ChoosePlanView__card premium', {
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-premium-image-container">
<div className="ghostery-premium-image card-image-top" title="Ghostery Premium" alt="Ghostery Premium" />
</div>
<div className="ghostery-premium-image-background" />
<h2>Ghostery Premium</h2>
<div className="ChoosePlanView__price">
<Fragment>
<p className="ChoosePlanView__price-purple font-size-36">$11.99</p>
<p className="ChoosePlanView__price-purple sub-text font-size-12">{t('per_month')}</p>
</Fragment>
</div>
<p className="card-sub-header"><strong>{t('hub_upgrade_maximum_protection')}</strong></p>
<div className="ChoosePlanView__valuePropList">
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_private_search')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_tracker_protection')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_speedy_page_loads')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_intelligence_technology')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_ad_free')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_supports_ghosterys_mission')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
VPN
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_unlimited_bandwidth')}
</div>
</div>
</div>
</div>
{showCTAButton && (
<a className="ChoosePlanView__premiumCTAButton" href={premiumCheckoutLink} target="_blank" rel="noreferrer">{t('ghostery_dawn_onboarding_upgrade')}</a>
)}
</Fragment>
);
};

class ChoosePlanView extends React.Component {
constructor(props) {
super(props);
@@ -274,14 +208,82 @@ class ChoosePlanView extends React.Component {
</div>
</div>
{showCTAButton && (
<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}>
<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 5, origin: ONBOARDING })}>
This conversation was marked as resolved by wlycdgr

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr Jan 28, 2021
Member

Let's constantify this magick number

This comment has been minimized.

Sign in to view
@benstrumeyer

benstrumeyer Jan 28, 2021
Author Contributor

Constantified!
<span>{t('ghostery_dawn_onboarding_keep')}</span>
</NavLink>
)}
</Fragment>
);
};

premiumCard = (checked, handleClick, showCTAButton = false) => {
const { actions } = this.props;
const { setSetupStep } = actions;
const cardClassNames = ClassNames('ChoosePlanView__card premium', {
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-premium-image-container">
<div className="ghostery-premium-image card-image-top" title="Ghostery Premium" alt="Ghostery Premium" />
</div>
<div className="ghostery-premium-image-background" />
<h2>Ghostery Premium</h2>
<div className="ChoosePlanView__price">
<Fragment>
<p className="ChoosePlanView__price-purple font-size-36">$11.99</p>
<p className="ChoosePlanView__price-purple sub-text font-size-12">{t('per_month')}</p>
</Fragment>
</div>
<p className="card-sub-header"><strong>{t('hub_upgrade_maximum_protection')}</strong></p>
<div className="ChoosePlanView__valuePropList">
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_private_search')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_tracker_protection')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_speedy_page_loads')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_intelligence_technology')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_ad_free')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_supports_ghosterys_mission')}
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
VPN
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_dawn_onboarding_unlimited_bandwidth')}
</div>
</div>
</div>
</div>
{showCTAButton && (
<a className="ChoosePlanView__premiumCTAButton" href={premiumCheckoutLink} target="_blank" rel="noreferrer" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 6, origin: ONBOARDING })}>{t('ghostery_dawn_onboarding_upgrade')}</a>
)}
</Fragment>
);
};

render() {
const {
actions,
@@ -326,10 +328,10 @@ class ChoosePlanView extends React.Component {
2. DONE If user is signed out, clicking this should take them to Step 4b
*/}
{loggedIn && (
<a className="ChoosePlanView__searchCTAButton" href={plusCheckoutLink} target="_blank" rel="noreferrer">{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: 2, origin: ONBOARDING })}>{t('ghostery_dawn_onboarding_start_trial')}</a>
)}
{!loggedIn && (
<div className="ChoosePlanView__searchCTAButton" onClick={() => next()}>{t('ghostery_dawn_onboarding_start_trial')}</div>
<div className="ChoosePlanView__searchCTAButton" onClick={() => { setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 2, origin: ONBOARDING }); next(); }}>{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} />
@@ -344,7 +346,7 @@ class ChoosePlanView extends React.Component {
</div>
<div className="ChoosePlanView__or small-12 large-2">{t('ghostery_dawn_onboarding_or')}</div>
<div className="small-12 medium-12 large-4">
{premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan, isPlus)}
{this.premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan, isPlus)}
</div>
</div>
) : (
@@ -357,7 +359,7 @@ class ChoosePlanView extends React.Component {
{this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan)}
</Fragment>
)}
{premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan)}
{this.premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan)}
</div>
)}
{(isBasic && (
@@ -368,15 +370,15 @@ class ChoosePlanView extends React.Component {
</NavLink>
)}
{selectedPlan === PLUS && (
<a className="ChoosePlanView__searchCTAButton" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 4, origin: ONBOARDING })} href={plusCheckoutLink} target="_blank" rel="noreferrer">{t('next_or_start_trial')}</a>
<a className="ChoosePlanView__searchCTAButton" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 3, origin: ONBOARDING })} 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: 5, origin: ONBOARDING })} href={premiumCheckoutLink} target="_blank" rel="noreferrer">{t('next_or_start_trial')}</a>
<a className="ChoosePlanView__searchCTAButton" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 4, origin: ONBOARDING })} 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: 5, origin: ONBOARDING })}>
<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, setup_number: 7, origin: ONBOARDING })}>
<span>{t('next')}</span>
</NavLink>
)}
ProTip! Use n and p to navigate between commits in a pull request.