Skip to content
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

GH-1774/In-App Insights Promo #460

Merged
merged 40 commits into from Oct 24, 2019
Merged
Changes from 1 commit
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
0f49440
Created modal UI
benstrumeyer Sep 26, 2019
5f92023
Change feature language. Add exit button.
benstrumeyer Sep 27, 2019
b229c9d
Add insights modal that will appear if a user clicks 3x per day for 3…
benstrumeyer Oct 8, 2019
3d24d70
Refactor insights modal into a component. Reshow modal after prompted…
benstrumeyer Oct 8, 2019
d57c5b3
Clean up insights modal code
benstrumeyer Oct 9, 2019
2f7fcbc
Show plus promo modal on first view of Home view of each Hub session
wlycdgr Sep 16, 2019
e94a749
Stub out intro hub plus promo modal layout and implement its buttons
wlycdgr Sep 16, 2019
894d742
Remove some unnecessary plus promo modal related CSS
wlycdgr Sep 17, 2019
ab4c58a
Continue adding styling for plus promo modal
wlycdgr Sep 17, 2019
3cd79ce
Continue styling plus promo modal
wlycdgr Sep 18, 2019
b476ce1
Refactor plus promo modal CSS to improve alignment of elements
wlycdgr Sep 20, 2019
4666877
Continue CSS work for plus promo modal
wlycdgr Sep 20, 2019
ff4d455
Implement recommended gold banner in plus promo modal
wlycdgr Sep 23, 2019
446d137
Update and tweak plus promo modal design
wlycdgr Sep 27, 2019
5afd2ce
Fix path bug in i18n-checker tool. Consolidate redundant entries in m…
wlycdgr Oct 1, 2019
475143c
Additional consolidation of redundant and unused entries in messages
wlycdgr Oct 2, 2019
2f912b7
Factor plus promo modal rendering out to shared component. Implement …
wlycdgr Oct 6, 2019
6e7be93
Move Plus Promo modal rendering to a PlusPromoModal shared component.…
wlycdgr Oct 7, 2019
41a08b1
Create ModalPromos background class responsible for modal promo relat…
wlycdgr Oct 7, 2019
75fa2da
Add local state to Panel to make sure component rerenders after user …
wlycdgr Oct 8, 2019
4329146
Make PromoModals code more robust
wlycdgr Oct 8, 2019
66c1490
Factor PlusPromoModal rendering out to helper in Panel. Extend condit…
wlycdgr Oct 8, 2019
bb5d74d
Mark PromoModals methods as static. Refine PlusPromoModal implementat…
wlycdgr Oct 8, 2019
dd808b5
Add logic to hide plus promo modal from Insights subscribers. Cleanup…
wlycdgr Oct 9, 2019
a143c18
Clean up. Finish string localization in PlusPromoModal
wlycdgr Oct 9, 2019
3795b25
Plug in insights modal into promo modal class
benstrumeyer Oct 16, 2019
cd467c8
GH-1777 and GH-1776 Plus Promo modals (#458)
wlycdgr Oct 16, 2019
178ebf0
Consolidate insights promo with plus promo
benstrumeyer Oct 18, 2019
4b7b84a
GH-1814/promo toggle (#453)
benstrumeyer Oct 18, 2019
7fb7744
User can opt out of promotions
benstrumeyer Oct 18, 2019
3697774
Remove empty SCSS class
benstrumeyer Oct 18, 2019
2abb7cd
Add newlines
benstrumeyer Oct 18, 2019
be57477
Merge 8.4.5
benstrumeyer Oct 18, 2019
b0aa51b
Add hover effects
benstrumeyer Oct 21, 2019
8231933
Refactor insights promo to use redux. Remove summary component code. …
benstrumeyer Oct 23, 2019
3478857
Refactor hasEngagedFrequently to update in recordEngaged
benstrumeyer Oct 23, 2019
b490d7c
Refactor recordEngaged
benstrumeyer Oct 24, 2019
0edc57c
Fix recordEngaged bug
benstrumeyer Oct 24, 2019
14936c6
Fix font paths
wlycdgr Oct 24, 2019
1d905aa
Remove unused font asset
wlycdgr Oct 24, 2019
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Fix path bug in i18n-checker tool. Consolidate redundant entries in m…

…essages. Add check icon to plus promo modal. Modify plus promo modal css.
  • Loading branch information
wlycdgr authored and benstrumeyer committed Oct 18, 2019
commit 5afd2ce63c947290412a64ed8aeddfb84c77ea6b

Large diffs are not rendered by default.

@@ -74,7 +74,7 @@ class OfferCard extends Component {
message: t('rewards_first_prompt_extended'),
textLink: {
href: 'https://www.ghostery.com/faqs/what-is-ghostery-rewards/',
text: t('rewards_learn_more'),
text: t('learn_more'),
callback: () => {
this.props.actions.sendSignal('offer_first_learn');
sendMessage('ping', 'rewards_first_learn_more');
@@ -73,7 +73,7 @@ const CreateAccountView = (props) => {
<div className="CreateAccountView--addPaddingTop row align-center-middle">
<div className="columns small-12 medium-5">
<label htmlFor="create-account-email" className="CreateAccountView__inputLabel">
{t('hub_create_account_label_email')}
{t('email_colon')}
</label>
<input
id="create-account-email"
@@ -87,13 +87,13 @@ const CreateAccountView = (props) => {
/>
{emailError && (
<div className="CreateAccountView__inputError">
{t('hub_create_account_label_email_invalid')}
{t('please_enter_a_valid_email')}
</div>
)}
</div>
<div className="columns small-12 medium-5">
<label htmlFor="create-account-confirmEmail" className="CreateAccountView__inputLabel">
{t('hub_create_account_label_email_confirm')}
{t('confirm_email_colon')}
</label>
<input
id="create-account-confirmEmail"
@@ -107,7 +107,7 @@ const CreateAccountView = (props) => {
/>
{confirmEmailError && (
<div className="CreateAccountView__inputError">
{t('hub_create_account_label_email_confirm_invalid')}
{t('your_emails_do_not_match')}
</div>
)}
</div>
@@ -147,7 +147,7 @@ const CreateAccountView = (props) => {
<div className="row align-center-middle">
<div className="columns small-12 medium-5">
<label htmlFor="create-account-password" className="CreateAccountView__inputLabel">
{t('hub_create_account_label_password')}
{t('password_colon')}
</label>
<input
id="create-account-password"
@@ -214,7 +214,7 @@ const CreateAccountView = (props) => {
<div className="CreateAccountView--addPaddingTop row align-center">
<div className="CreateAccountView__submit columns small-12 medium-10 flex-container flex-dir-row-reverse">
<button type="submit" className="CreateAccountView__button button success">
{ t('hub_create_account_button_submit') }
{ t('create_account') }
</button>
</div>
</div>
@@ -106,7 +106,7 @@ const HomeView = (props) => {
</a>
) : (
<NavLink to="/create-account">
{t('hub_home_subheader_create_account')}
{t('create_account')}
</NavLink>
)}
</div>
@@ -120,15 +120,15 @@ const HomeView = (props) => {
{t('hub_home_feature_tutorial_text')}
</div>
<NavLink to="/tutorial" className={tutorialButtonClassNames}>
{tutorial_complete ? t('hub_home_feature_tutorial_button_alt') : t('hub_home_feature_tutorial_button')}
{tutorial_complete ? t('hub_home_feature_tutorial_button_alt') : t('start')}
</NavLink>
</div>
<div className="HomeView__dividerVertical column shrink show-for-large" />
<div className="HomeView__dividerHorizontal hide-for-large" />
<div className={setupFeatureClassNames}>
<div className="HomeView__featureIcon" />
<div className="HomeView__featureTitle">
{t('hub_home_feature_setup_title')}
{t('customize_setup')}
</div>
<div className="HomeView__featureText flex-child-grow">
{t('hub_home_feature_setup_text')}
@@ -146,7 +146,7 @@ const HomeView = (props) => {
<div className="HomeView__featureIcon columns shrink feature-plus show-for-large" />
<div className="columns flex-container align-center-middle">
<NavLink to="/plus" className="HomeView__featureButton button primary">
{isPlus ? t('hub_home_feature_supporter_button_alt') : t('hub_home_feature_supporter_button')}
{isPlus ? t('Aready_Subscribed') : t('get_ghostery_plus')}
</NavLink>
</div>
</div>
@@ -271,12 +271,21 @@
text-align: center;
color: #333333;

&.bold {
font-weight: bold;
color: #4a4a4a;
&.italic {
font-style: italic;
}
}

.PlusPromoModal__check-icon {
padding-right: 5px;
margin-top: -18px;
}

.PlusPromoModal__plus-option-description-item-container {
display: flex;
justify-content: center;
}

.PlusPromoModal__button {
margin: 0;
font-size: 11px;
@@ -72,50 +72,59 @@ class HomeViewContainer extends Component {
<div className="PlusPromoModal__content flex-container flex-dir-column align-middle">
<div className="PlusPromoModal__buttons-background" />
<div className="PlusPromoModal__thanks-for-download">
Thanks for downloading Ghostery!
{t('thanks_for_downloading_ghostery')}
</div>
<div className="PlusPromoModal__choose-your-plan">
Choose your privacy plan
{t('choose_your_privacy_plan')}
</div>
<div className="PlusPromoModal__options-container full-width">
<div className="PlusPromoModal__option-container">
<div className="PlusPromoModal__option-description-box basic">
<div className="PlusPromoModal__option-header basic">Ghostery Basic</div>
<div className="PlusPromoModal__option-header basic">{t('ghostery_basic')}</div>
<div className="PlusPromoModal__price-text basic">
<span className="PlusPromoModal__currency-sign">$</span>
<span className="PlusPromoModal__currency-sign">{t('locale_appropriate_currency_icon')}</span>
<span className="PlusPromoModal__amount">0</span>
<span> </span>
<span className="PlusPromoModal__per-month">per month</span>
<span className="PlusPromoModal__per-month">{t('per_month')}</span>
</div>
<div className="PlusPromoModal__option-description">
<p className="PlusPromoModal__option-description-item">Protection for this browser</p>
<p className="PlusPromoModal__option-description-item">Blocks Ads</p>
<p className="PlusPromoModal__option-description-item">Blocks Trackers</p>
<p className="PlusPromoModal__option-description-item">Fast Browsing</p>
<p className="PlusPromoModal__option-description-item no-capitalize">{t('protection_for_this_browser')}</p>
<p className="PlusPromoModal__option-description-item">{t('blocks_ads')}</p>
<p className="PlusPromoModal__option-description-item">{t('blocks_trackers')}</p>
<p className="PlusPromoModal__option-description-item">{t('fast_browsing')}</p>
</div>
</div>
<div className="PlusPromoModal__button basic button" onClick={this._dismissModal}>
<span>Select Basic</span>
<span>{t('select_basic')}</span>
</div>
</div>
<div className="PlusPromoModal__option-container">
<div className="PlusPromoModal__option-description-box plus">
<div className="PlusPromoModal__recommended-banner">
<img src="/app/images/hub/home/recommended-banner.svg" />
<div className="PlusPromoModal__recommended-banner-text">Recommended</div>
<div className="PlusPromoModal__recommended-banner-text">{t('recommended')}</div>
</div>
<div className="PlusPromoModal__option-header plus">Ghostery Plus</div>
<div className="PlusPromoModal__price-text plus">
<span className="PlusPromoModal__currency-sign">$</span>
<span className="PlusPromoModal__amount">2</span>
<span className="PlusPromoModal__currency-sign">{t('locale_appropriate_currency_icon')}</span>
<span className="PlusPromoModal__amount">{t('plus_monthly_subscription_price_number')}</span>
<span> </span>
<span className="PlusPromoModal__per-month">per month</span>
</div>
<div className="PlusPromoModal__option-description">
<p className="PlusPromoModal__option-description-item">All basic features, plus:</p>
<p className="PlusPromoModal__option-description-item bold">Historical Tracker Stats</p>
<p className="PlusPromoModal__option-description-item bold">Priority Support</p>
<p className="PlusPromoModal__option-description-item bold">New Color Themes</p>
<p className="PlusPromoModal__option-description-item italic">All basic features, plus:</p>
<div className="PlusPromoModal__plus-option-description-item-container">
<img className="PlusPromoModal__check-icon" src="/app/images/hub/home/check-icon.svg" />
<p className="PlusPromoModal__option-description-item">Historical Tracker Stats</p>
</div>
<div className="PlusPromoModal__plus-option-description-item-container">
<img className="PlusPromoModal__check-icon" src="/app/images/hub/home/check-icon.svg" />
<p className="PlusPromoModal__option-description-item">Priority Support</p>
</div>
<div className="PlusPromoModal__plus-option-description-item-container">
<img className="PlusPromoModal__check-icon" src="/app/images/hub/home/check-icon.svg" />
<p className="PlusPromoModal__option-description-item">New Color Themes</p>
</div>
</div>
</div>
<a href="http://signon.ghostery.com/en/subscribe/" target="_blank" rel="noopener noreferrer" className="PlusPromoModal__button plus button" onClick={this._dismissModal}>
@@ -56,7 +56,7 @@ const LogInView = (props) => {
<div className="columns small-12 medium-10 large-6">
<form onSubmit={handleSubmit}>
<label htmlFor="login-email" className="LogInView__inputLabel">
{t('hub_login_label_email')}
{t('email_colon')}
</label>
<input
id="login-email"
@@ -70,11 +70,11 @@ const LogInView = (props) => {
/>
{emailError && (
<div className="LogInView__inputError">
{t('hub_login_label_email_invalid')}
{t('please_enter_a_valid_email')}
</div>
)}
<label htmlFor="login-password" className="LogInView__inputLabel">
{t('hub_login_label_password')}
{t('password_colon')}
</label>
<input
id="login-password"
@@ -101,7 +101,7 @@ const LogInView = (props) => {
</div>
<div className="LogInView--addPaddingTop flex-container align-center">
<button type="submit" className="LogInView__button button success">
{ t('hub_login_button_submit') }
{ t('sign_in') }
</button>
</div>
</form>
@@ -36,11 +36,11 @@ class PlusView extends Component {

return isPlus ? (
<div className={buttonClassNames}>
{t('hub_supporter_button_text_alt')}
{t('already_subscribed')}
</div>
) : (
<a className={buttonClassNames} href={buttonHref} onClick={onPlusClick} target="_blank" rel="noopener noreferrer">
{t('hub_supporter_button_text')}
{t('get_ghostery_plus')}
</a>
);
}
@@ -74,7 +74,7 @@ class PlusView extends Component {
<div className="PlusView__perk columns text-center">
<div className="PlusView__perkIcon themes" />
<div className="PlusView__perkTitle">
{t('hub_supporter_perk_themes_title')}
{t('new_themes')}
</div>
<div className="PlusView__perkDescription">
{t('hub_supporter_perk_themes_description')}
@@ -83,7 +83,7 @@ class PlusView extends Component {
<div className="PlusView__perk columns text-center">
<div className="PlusView__perkIcon stats" />
<div className="PlusView__perkTitle">
{t('hub_supporter_perk_stats_title')}
{t('historical_blocking_stats')}
</div>
<div className="PlusView__perkDescription">
{t('hub_supporter_perk_stats_description')}
@@ -110,7 +110,7 @@ class PlusView extends Component {
<div className="row align-center">
<div className="PlusView__feature small-12 medium-6 large-5 large-offset-1 columns">
<div className="PlusView__headingTitle PlusView--addPaddingTop">
{t('hub_supporter_feature_theme_title')}
{t('new_themes')}
</div>
<div className="PlusView__headingDescription">
{t('hub_supporter_feature_theme_description')}
@@ -121,7 +121,7 @@ class PlusView extends Component {
<img
className="PlusView__featureImage theme"
src="/app/images/hub/plus/feature-theme.png"
alt={t('hub_supporter_feature_theme_title')}
alt={t('new_themes')}
/>
</div>
</div>
@@ -139,12 +139,12 @@ class PlusView extends Component {
<img
className="PlusView__featureImage stats"
src="/app/images/hub/plus/feature-stats.svg"
alt={t('hub_supporter_feature_stats_title')}
alt={t('historical_blocking_stats')}
/>
</div>
<div className="PlusView__feature small-12 medium-6 large-5 columns">
<div className="PlusView__headingTitle">
{t('hub_supporter_feature_stats_title')}
{t('historical_blocking_stats')}
</div>
<div className="PlusView__headingDescription">
{t('hub_supporter_feature_stats_description')}
@@ -155,7 +155,7 @@ class PlusView extends Component {
<img
className="PlusView__featureImage stats"
src="/app/images/hub/plus/feature-stats.svg"
alt={t('hub_supporter_feature_stats_title')}
alt={t('historical_blocking_stats')}
/>
</div>
</div>
@@ -171,7 +171,7 @@ class PlusView extends Component {
<div className="row align-center">
<div className="PlusView__feature small-12 medium-6 large-5 large-offset-1 columns">
<div className="PlusView__headingTitle">
{t('hub_supporter_feature_support_title')}
{t('priority_support')}
</div>
<div className="PlusView__headingDescription">
{t('hub_supporter_feature_support_description')}
@@ -182,7 +182,7 @@ class PlusView extends Component {
<img
className="PlusView__featureImage support"
src="/app/images/hub/plus/feature-support.svg"
alt={t('hub_supporter_feature_support_title')}
alt={t('priority_support')}
/>
</div>
</div>
@@ -46,7 +46,7 @@ class RewardsView extends Component {
</div>
<div className="RewardsView__buttonContainer">
<a className="RewardsView__button button success" href="https://www.ghostery.com/faqs/what-is-ghostery-rewards/" target="_blank" rel="noopener noreferrer">
{t('hub_rewards_header_learn_more')}
{t('learn_more')}
</a>
</div>
</div>
@@ -36,8 +36,8 @@ class SetupAntiSuiteViewContainer extends Component {
hrefPrev: `/setup/${index - 1}`,
hrefNext: `/setup/${index + 1}`,
hrefDone: '/',
textPrev: t('hub_setup_nav_previous'),
textNext: t('hub_setup_nav_next'),
textPrev: t('previous'),
textNext: t('next'),
textDone: t('hub_setup_exit_flow'),
});

@@ -80,7 +80,7 @@ class SetupBlockingDropdown extends Component {
<GlobalBlocking settingsData={settingsData} actions={actions} showToast={this._showToast} hideToast={this._hideToastDebounce} language={settingsData.language} />
<div className="SetupBlockingDropdown__buttonContainer flex-container flex-dir-row-reverse">
<div className="button success" onClick={handleDoneClick}>
{t('hub_setup_nav_done')}
{t('done')}
</div>
</div>
</div>
@@ -40,7 +40,7 @@ class SetupBlockingViewContainer extends Component {
hrefNext: `/setup/${index + 1}`,
hrefDone: '/',
textPrev: false,
textNext: t('hub_setup_nav_next'),
textNext: t('next'),
textDone: t('hub_setup_exit_flow'),
});

@@ -33,8 +33,8 @@ class SetupDoneViewContainer extends Component {
hrefPrev: `/setup/${index - 1}`,
hrefNext: '/',
hrefDone: '/',
textPrev: t('hub_setup_nav_previous'),
textNext: t('hub_setup_nav_done'),
textPrev: t('previous'),
textNext: t('done'),
textDone: t('hub_setup_exit_flow'),
});

@@ -56,14 +56,14 @@ class SetupDoneViewContainer extends Component {
id: 'tutorial',
title: t('hub_setup_feature_tutorial_title'),
description: t('hub_setup_feature_tutorial_description'),
buttonText: t('hub_setup_feature_tutorial_button'),
buttonText: t('start'),
buttonHref: '/tutorial/1',
},
{
id: 'plus',
title: t('hub_setup_feature_supporter_title'),
title: t('get_ghostery_plus'),
description: t('hub_setup_feature_supporter_description'),
buttonText: t('hub_setup_feature_supporter_button'),
buttonText: t('support'),
buttonHref: '/plus',
},
{
ProTip! Use n and p to navigate between commits in a pull request.