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-1969 Plus In App Promo & GH-1970 Telemetry #509

Merged
merged 18 commits into from Apr 20, 2020
+869 −379
Merged

GH-1969 Plus In App Promo & GH-1970 Telemetry #509

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d7a2d6d
Design spring-plus promo modal
benstrumeyer Mar 5, 2020
95280ff
Add click events to promo modal
benstrumeyer Mar 9, 2020
887f445
Remove comments and console.logs
benstrumeyer Mar 9, 2020
c14cf55
Add translations
benstrumeyer Mar 9, 2020
6301df3
Unfinished PromoModal superclass
benstrumeyer Mar 31, 2020
bedad10
Add base class for promo modals
benstrumeyer Apr 1, 2020
04a9760
Insights promo modal broken
benstrumeyer Apr 1, 2020
31121c1
Fix handlePromoXClick, comment in PromoModal structure
Eden12345 Apr 2, 2020
2b54972
Merge insights, plus, and premium PromoModal methods
benstrumeyer Apr 6, 2020
70c9fa1
Fix error
benstrumeyer Apr 7, 2020
56d0716
Refactor X button out to PromoModal.jsx. Move Insights and Plus Promo…
benstrumeyer Apr 7, 2020
4f187af
Fix imports and remove debug flag from manifest.json
benstrumeyer Apr 7, 2020
ea8f83f
Use React.Fragment, update class names, factor out repeat code, updat…
Eden12345 Apr 8, 2020
e3140f5
Update InsightsPromoModal class name and fix display
Eden12345 Apr 8, 2020
121cafb
Merge branch 'develop' into GH-1969/plus-in-app-promo
benstrumeyer Apr 15, 2020
406fec5
Fix premium promo modal in hub. Refactor promo modal pings. Style mod…
benstrumeyer Apr 16, 2020
e6771a4
Merge branch 'develop' into GH-1969/plus-in-app-promo
benstrumeyer Apr 16, 2020
16ed0d1
Merge branch 'develop' into GH-1969/plus-in-app-promo
benstrumeyer Apr 16, 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…

Merge insights, plus, and premium PromoModal methods

  • Loading branch information
@benstrumeyer
benstrumeyer committed Apr 6, 2020
commit 2b54972e666a51ac3042666cbc33a907c9affa8b
83 app/panel/components/InsightsPromoModal.jsx
View file
Open in desktop

This file was deleted.

78 app/panel/components/InsightsPromoModalContent.jsx
View file
Open in desktop
@@ -0,0 +1,78 @@
/**
* Insights Promo Modal Component
This conversation was marked as resolved by Eden12345

This comment has been minimized.

Sign in to view
@Eden12345

Eden12345 Apr 7, 2020
Contributor

Is this component not with the other modal content components because it is only used in the panel? Even if that's the case, I would opt for keeping them together in one modal-content directory in shared-components.

This comment has been minimized.

Sign in to view
@benstrumeyer

benstrumeyer Apr 7, 2020
Author Contributor

The PremiumPromoModal is the only one that's being used in the hub. But yeah it makes more sense just to bag them all together in there too since it might be an option at one point. Moved!
*
* Ghostery Browser Extension
* https://www.ghostery.com/
*
* Copyright 2019 Ghostery, Inc. All rights reserved.
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/

import React from 'react';

const InsightsPromoModalContent = (props) => {
const {
handleGoAwayClick,
handleSignInClick,
handleTryInsightsClick,
XButton,
} = props;
return (
<div className="InsightsModal__content flex-container flex-dir-column align-middle">
{XButton}
This conversation was marked as resolved by Eden12345
Comment on lines +24 to +25

This comment has been minimized.

Sign in to view
@Eden12345

Eden12345 Apr 7, 2020 •
edited
Contributor

I'm still confused as to why this outer <div /> and <ExitButton /> can't be moved out of each individual modal content component and into the parent <PromoModal /> component. From what I can tell, the only difference between them is the main class name (which you can determine in <PromoModal /> with the classnames library), and the <ExitButton /> click handler (which you're already determining in <PromoModal />, but then pass down to the child components).

This comment has been minimized.

Sign in to view
@benstrumeyer

benstrumeyer Apr 7, 2020 •
edited
Author Contributor

Moved the ExitButton out! Making a fragment inside each PromoModalContent class messed up the CSS so I couldn't abstract out the flex styles, but the Exit button is inside the PromoModal.jsx component nonetheless!
<div className="InsightsModal__image" />
<div className="InsightsModal__header">
{t('panel_insights_promotion_header')}
</div>
<div className="InsightsModal__description">
{t('panel_insights_promotion_description')}
</div>
<div className="flex-container">
<div className="InsightsModal__features">
<div className="flex-container align-middle">
<span className="InsightsModal__checked-circle-icon" />
<div className="InsightsModal__feature-text">
{t('panel_insights_audit_tags')}
</div>
</div>
<div className="flex-container align-middle">
<span className="InsightsModal__checked-circle-icon" />
<div className="InsightsModal__feature-text">
{t('panel_insights_promotion_trace_poor_performance')}
</div>
</div>
</div>
<div className="InsightsModal__features">
<div className="flex-container align-middle">
<span className="InsightsModal__checked-circle-icon" />
<div className="InsightsModal__feature-text">
{t('panel_insights_promotion_watch_pings')}
</div>
</div>
<div className="flex-container align-middle">
<span className="InsightsModal__checked-circle-icon" />
<div className="InsightsModal__feature-text">
{t('panel_insights_promotion_explore_trends')}
</div>
</div>
</div>
</div>
<div className="InsightsModal__call-to-action-container">
<div className="flex-container align-center">
<span onClick={handleTryInsightsClick} className="btn InsightsModal__call-to-action">
<span className="button-text">{t('panel_insights_promotion_call_to_action')}</span>
</span>
</div>
<div className="InsightsModal__other-options-container flex-container align-justify">
<span onClick={handleSignInClick} className="InsightsModal__link">{t('subscribe_pitch_sign_in')}</span>
<span onClick={handleGoAwayClick} className="InsightsModal__link">{t('no_thanks_turn_promos_off')}</span>
</div>
</div>
</div>
);
};

export default InsightsPromoModalContent;
157 app/panel/components/Panel.jsx
View file
Open in desktop
@@ -14,14 +14,11 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
import Header from '../containers/HeaderContainer';
// import PromoModal from '../../shared-components/PromoModal';
import PromoModalContainer from '../../shared-components/PromoModal/PromoModalContainer';
import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
import { sendMessage } from '../utils/msg';
import { setTheme } from '../utils/utils';
import globals from '../../../src/classes/Globals';

const DOMAIN = globals.DEBUG ? 'ghosterystage' : 'ghostery';
const INSIGHTS = 'insights';
const PLUS = 'plus';
const PREMIUM = 'premium';
@@ -197,118 +194,9 @@ class Panel extends React.Component {
</span>
);
}

return false;
}

/**
* @param modal 'insights' or 'premium'
* @private
* Handle clicks on the link to turn off promos in the promo modals
*/
_handlePromoGoAwayClick = (modal) => {
this.props.actions.togglePromoModal();

sendMessage('promoModals.turnOffPromos', {});

if (modal === 'insights') {
sendMessage('ping', 'promo_modals_decline_insights_upgrade');
}

this.props.actions.showNotification({
classes: 'warning',
reload: false,
text: t('promos_turned_off_notification'),
});
};

// /**
// * @private
// * Handle clicks on sign in links in promo modals
// */
// _handlePromoSignInClick = () => {
// this.props.actions.togglePromoModal();
// history.push({
// pathname: '/login',
// });
// };

/**
* @private
* Handle clicks on the download button in the Premium promo modals
*/
_handlePromoTryMidnightClick = () => {
this.props.actions.togglePromoModal();

const url = 'https://ghostery.com/thanks-for-downloading-midnight?utm_source=gbe&utm_campaign=in_app';
sendMessage('openNewTab', {
url,
become_active: true,
});
}

/**
* @private
* Handle clicks on the download button in the Premium promo modals
*/
_handlePromoTryPlusClick = () => {
this.props.actions.togglePromoModal();

const url = `https://checkout.${DOMAIN}.com/plus?utm_source=gbe&utm_campaign=in_app_spring2020`;
sendMessage('openNewTab', {
url,
become_active: true,
});
}

/**
* @private
* Handle clicks on the 'Get Plus' option in the Premium modals
*/
_handlePromoGetPlusClick = () => {
this.props.actions.togglePromoModal();

const url = `https://checkout.${DOMAIN}.com/plus?utm_source=gbe&utm_campaign=in_app`;
sendMessage('openNewTab', {
url,
become_active: true,
});
};

// /**
// * @private
// * Handle click action when user selects Subscribe button in the Insights modal
// * @param {string} modal Modal type (insights or plus)
// */
// _handlePromoSubscribeClick = (modal) => {
// this.props.actions.togglePromoModal();

// let url = `https://checkout.${DOMAIN}.com/`;

// if (modal === 'insights') {
// sendMessage('ping', 'promo_modals_insights_upgrade_cta');
// url += 'insights?utm_source=gbe&utm_campaign=in_app_upgrade';
// }

// sendMessage('openNewTab', {
// url,
// become_active: true,
// });
// };

/**
* @param modal 'insights' or 'premium'
* @private
* Handle clicks on the 'X' close icon in promo modals
*/
_handlePromoXClick = (modal) => {
this.props.actions.togglePromoModal();

if (modal === 'insights') {
sendMessage('ping', 'promo_modals_decline_insights_upgrade');
}
};

/**
* @returns {bool}
* @private
@@ -355,17 +243,11 @@ class Panel extends React.Component {
const isPlus = this._plusSubscriber();

return (
// <PromoModal
// type={PREMIUM}
// location="panel"
// isPlus={isPlus}
// handleGoAwayClick={this._handlePromoGoAwayClick}
// handleGetPlusClick={this._handlePromoGetPlusClick}
// handleTryMidnightClick={this._handlePromoTryMidnightClick}
// handleXClick={this._handlePromoXClick}
// show
// />
<div />
<PromoModalContainer
type={PREMIUM}
location="panel"
isPlus={isPlus}
/>
);
}

@@ -378,20 +260,12 @@ class Panel extends React.Component {
if (this._insightsSubscriber()) return null;

sendMessage('promoModals.sawInsightsPromo', {});

sendMessage('ping', 'promo_modals_show_insights');
console.log('the props: ', this.props);

return (
<PromoModalContainer type={INSIGHTS} />
// <PromoModal
// type={INSIGHTS}
// handleGoAwayClick={() => this._handlePromoGoAwayClick(INSIGHTS)}
// handleSignInClick={() => this._handlePromoSignInClick}
// handleSubscribeClick={() => this._handlePromoSubscribeClick(INSIGHTS)}
// handleXClick={() => this._handlePromoXClick(INSIGHTS)}
// show
// />
<PromoModalContainer
type={INSIGHTS}
/>
);
}

@@ -404,20 +278,13 @@ class Panel extends React.Component {
if (this._plusSubscriber() || this._premiumSubscriber()) { return null; }

sendMessage('promoModals.sawPlusPromo', {});
sendMessage('ping', 'promo_modals_show_plus');

const { loggedIn } = this.props;
return (
// <PromoModal
// type={PLUS}
// handleGoAwayClick={this._handlePromoGoAwayClick}
// handleSignInClick={this._handlePromoSignInClick}
// handleTryPlusClick={this._handlePromoTryPlusClick}
// handleXClick={this._handlePromoXClick}
// loggedIn={loggedIn}
// show
// />
<div />
<PromoModalContainer
type={PLUS}
loggedIn={loggedIn}
/>
);
}

ProTip! Use n and p to navigate between commits in a pull request.