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-1774/In-App Insights Promo #460

Merged
merged 40 commits into from Oct 24, 2019
+492 −34
Merged

GH-1774/In-App Insights Promo #460

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
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next

Factor plus promo modal rendering out to shared component. Implement … 

…rendering in panel. Implement display context CSS adjustments.
  • Loading branch information
@wlycdgr @benstrumeyer
wlycdgr authored and benstrumeyer committed Oct 18, 2019
commit 2f912b736a053e44c71a89708d85fe9e56c5b0a7
12 _locales/en/messages.json
View file
Open in desktop
@@ -385,6 +385,15 @@
"password_field_label_required": {
"message": "Password required."
},
"name": {
"description": "The title of this extension (Ghostery).",
"message": "$EXTENSION_NAME$ – Privacy Ad Blocker",
"placeholders": {
"extension_name": {
"content": "Ghostery"
}
}
},
"none": {
"description": "Used to say that this item does not belong to any of the groups, as in \"Groups: None\" (as opposed to \"Groups: Group A, Group B, Group C\").",
"message": "None"
@@ -1990,6 +1999,9 @@
"choose_your_privacy_plan": {
"message": "Choose your privacy plan"
},
"choose_your_ghostery_privacy_plan": {
"message": "Choose your Ghostery privacy plan"
},
"ghostery_basic": {
"message": "Ghostery Basic"
},
20 app/hub/Views/CreateAccountView/__tests__/__snapshots__/CreateAccountView.test.jsx.snap
View file
Open in desktop
@@ -40,7 +40,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
className="CreateAccountView__inputLabel"
htmlFor="create-account-email"
>
hub_create_account_label_email
email_colon
</label>
<input
autoComplete="off"
@@ -60,7 +60,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
className="CreateAccountView__inputLabel"
htmlFor="create-account-confirmEmail"
>
hub_create_account_label_email_confirm
confirm_email_colon
</label>
<input
autoComplete="off"
@@ -128,7 +128,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
className="CreateAccountView__inputLabel"
htmlFor="create-account-password"
>
hub_create_account_label_password
password_colon
</label>
<input
autoComplete="off"
@@ -240,7 +240,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
className="CreateAccountView__button button success"
type="submit"
>
hub_create_account_button_submit
create_account
</button>
</div>
</div>
@@ -288,7 +288,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
className="CreateAccountView__inputLabel"
htmlFor="create-account-email"
>
hub_create_account_label_email
email_colon
</label>
<input
autoComplete="off"
@@ -303,7 +303,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
<div
className="CreateAccountView__inputError"
>
hub_create_account_label_email_invalid
please_enter_a_valid_email
</div>
</div>
<div
@@ -313,7 +313,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
className="CreateAccountView__inputLabel"
htmlFor="create-account-confirmEmail"
>
hub_create_account_label_email_confirm
confirm_email_colon
</label>
<input
autoComplete="off"
@@ -328,7 +328,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
<div
className="CreateAccountView__inputError"
>
hub_create_account_label_email_confirm_invalid
your_emails_do_not_match
</div>
</div>
</div>
@@ -386,7 +386,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
className="CreateAccountView__inputLabel"
htmlFor="create-account-password"
>
hub_create_account_label_password
password_colon
</label>
<input
autoComplete="off"
@@ -508,7 +508,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
className="CreateAccountView__button button success"
type="submit"
>
hub_create_account_button_submit
create_account
</button>
</div>
</div>
170 app/hub/Views/HomeView/HomeView.scss
View file
Open in desktop
@@ -152,176 +152,6 @@
}
}

.PlusPromoModal__content {
position: relative;
width: 646px;
height: 553px;
background-color: #f7f7f7;
border: 1.9px solid #930194;
z-index: 10;
}

.PlusPromoModal__buttons-background {
background-color: #e7ecee;
position: absolute;
bottom: 3px;
width: 99%;
height: 72px;
z-index: -1;
}

.PlusPromoModal__thanks-for-download {
padding-top: 30px;
font-size: 26px;
font-weight: bold;
}

.PlusPromoModal__choose-your-plan {
padding-top: 10px;
font-size: 18px;
font-weight: bold;
}

.PlusPromoModal__options-container {
height: 100%;
margin-top: 44px;
display: flex;
justify-content: space-evenly;
}

.PlusPromoModal__option-container {
display: flex;
align-items: center;
flex-direction: column;
}

.PlusPromoModal__option-description-box {
width: 240px;
height: 298px;
margin-bottom: 45px;
border-style: solid;
border-width: 3px;
background-color: #FFFFFF;

&.basic {
border-color: #1dafed;
}

&.plus {
position: relative; // so that the recommended banner is positioned relative to this element
border-image-source: linear-gradient(39deg, #f2daa2, #eab968);
border-image-slice: 1;
}
}

.PlusPromoModal__recommended-banner {
position: absolute;
left: -30px;
top: -30px;
}

.PlusPromoModal__recommended-banner-text {
position: relative;
left: 18px;
top: -47px;
transform: rotate(-15deg);
color: white;
font-size: 16px;
font-weight: bold;
}

.PlusPromoModal__option-header {
margin-top: 20px;
font-size: 19px;
font-weight: bold;
letter-spacing: -0.5px;
text-align: center;

&.basic { color: #1dafed; }
&.plus { color: #ebbf73; }
}

.PlusPromoModal__price-text {
line-height: 1.3;
text-align: center;

&.basic { color: #1dafed; }
&.plus { color: #ebbf73; }
}

.PlusPromoModal__currency-sign {
font-size: 30px;
font-weight: bold;
}

.PlusPromoModal__amount {
vertical-align: middle;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 58px;
}

.PlusPromoModal__per-month {
vertical-align: sub;
font-size: 18px;
font-weight: bold;
}

.PlusPromoModal__option-description-item {
font-size: 16px;
text-align: center;
color: #333333;

&.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;
font-weight: 600;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;

&.basic {
width: 135px;
height: 40px;
border: solid 2px #15b4f2;
background-color: white;
color: #2cbcf4;
}
&.basic:hover {
background-color: #2cbcf4;
color: white;
}

&.plus {
width: 163px;
height: 38px;
border: none;
background-image: linear-gradient(to bottom, #2fdbfa, #15b4f2);
color: white;
font-weight: 600;
letter-spacing: 0.5px;
}
&.plus:hover {
background-image: linear-gradient(to bottom, #1fcbea, #05a4e2);
}
}

// Firefox Font Size Override and Image Size Override
@-moz-document url-prefix() {
.HomeView--firefoxFontSize {
71 app/hub/Views/HomeView/HomeViewContainer.jsx
View file
Open in desktop
@@ -59,7 +59,7 @@ class HomeViewContainer extends Component {

/**
* @private
* Dismisses the Plus promo modal if user opts to stick with the basic plan
* Dismisses the Plus promo modal when user clicks either the Select Plus or Select Basic button
*/
_dismissModal = () => {
this.setState({
@@ -68,73 +68,6 @@ class HomeViewContainer extends Component {
this.props.actions.markPlusPromoModalShown();
}

_renderPlusPromoModal = () => (
<div className="PlusPromoModal__content flex-container flex-dir-column align-middle">
<div className="PlusPromoModal__buttons-background" />
<div className="PlusPromoModal__thanks-for-download">
{t('thanks_for_downloading_ghostery')}
</div>
<div className="PlusPromoModal__choose-your-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">{t('ghostery_basic')}</div>
<div className="PlusPromoModal__price-text basic">
<span className="PlusPromoModal__currency-sign">{t('locale_appropriate_currency_icon')}</span>
<span className="PlusPromoModal__amount">0</span>
<span> </span>
<span className="PlusPromoModal__per-month">{t('per_month')}</span>
</div>
<div className="PlusPromoModal__option-description">
<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>{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">{t('recommended')}</div>
</div>
<div className="PlusPromoModal__option-header plus">Ghostery Plus</div>
<div className="PlusPromoModal__price-text plus">
<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 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}>
<span>Select Plus</span>
</a>
</div>
</div>
</div>
);

_render() {
const { justInstalled, plusPromoModalShown } = this.state;
const { home, user } = this.props;
@@ -157,7 +90,7 @@ class HomeViewContainer extends Component {
return (
<div className="full-height">
<Modal show={!isPlus && !plusPromoModalShown}>
{this._renderPlusPromoModal()}
{Modal.renderPlusPromo('inHub', this._dismissModal)}
</Modal>
<HomeView {...childProps} />
</div>
ProTip! Use n and p to navigate between commits in a pull request.