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

Add base class for promo modals

  • Loading branch information
@benstrumeyer
benstrumeyer committed Apr 1, 2020
commit bedad100a01667f524b73785916469b74e93593c
118 app/panel/components/InsightsPromoModal.jsx
View file
Open in desktop
@@ -15,77 +15,69 @@ import React from 'react';
import Modal from '../../shared-components/Modal';
import ModalExitButton from './BuildingBlocks/ModalExitButton';

const INSIGHTS = 'insights';

/**
* @class Implements the Insights Promo Modal
* @memberof PanelClasses
*/
class InsightsPromoModal extends React.Component {
handleGoAwayClick = () => { this.props.handleGoAwayClick(INSIGHTS); }

handleSubscribeClick = () => { this.props.handleSubscribeClick(INSIGHTS); }

handleXClick = () => { this.props.handleXClick(INSIGHTS); }

render() {
const { show } = this.props;
return (
<Modal show={show}>
<div className="InsightsModal__content flex-container flex-dir-column align-middle">
<ModalExitButton className="InsightsModal__exitButton" toggleModal={this.handleXClick} />
<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>
const InsightsPromoModal = (props) => {
const {
handleGoAwayClick,
handleSignInClick,
handleSubscribeClick,
handleXClick,
show
} = props;
return (
<Modal show={show}>
<div className="InsightsModal__content flex-container flex-dir-column align-middle">
<ModalExitButton className="InsightsModal__exitButton" toggleModal={handleXClick} />
<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="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 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__call-to-action-container">
<div className="flex-container align-center">
<span onClick={this.handleSubscribeClick} className="btn InsightsModal__call-to-action">
<span className="button-text">{t('panel_insights_promotion_call_to_action')}</span>
</span>
<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="InsightsModal__other-options-container flex-container align-justify">
<span onClick={this.props.handleSignInClick} className="InsightsModal__link">{t('subscribe_pitch_sign_in')}</span>
<span onClick={this.handleGoAwayClick} className="InsightsModal__link">{t('no_thanks_turn_promos_off')}</span>
<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>
</Modal>
);
}
}
<div className="InsightsModal__call-to-action-container">
<div className="flex-container align-center">
<span onClick={handleSubscribeClick} 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>
</Modal>
);
};

export default InsightsPromoModal;
14 app/panel/components/Panel.jsx
View file
Open in desktop
@@ -15,9 +15,6 @@ import React from 'react';
import { NavLink } from 'react-router-dom';
import Header from '../containers/HeaderContainer';
import PromoModal from '../../shared-components/PromoModal';
import { PremiumPromoModal } from '../../shared-components';
import InsightsPromoModal from './InsightsPromoModal';
import PlusPromoModal from '../containers/PlusPromoModalContainer';
import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
import { sendMessage } from '../utils/msg';
import { setTheme } from '../utils/utils';
@@ -386,10 +383,10 @@ class Panel extends React.Component {
return (
<PromoModal
type={INSIGHTS}
handleGoAwayClick={this._handlePromoGoAwayClick}
handleSignInClick={this._handlePromoSignInClick}
handleSubscribeClick={this._handlePromoSubscribeClick}
handleXClick={this._handlePromoXClick}
handleGoAwayClick={() => this._handlePromoGoAwayClick(INSIGHTS)}
handleSignInClick={() => this._handlePromoSignInClick}
handleSubscribeClick={() => this._handlePromoSubscribeClick(INSIGHTS)}
handleXClick={() => this._handlePromoXClick(INSIGHTS)}
show
/>
);
@@ -406,14 +403,15 @@ class Panel extends React.Component {
sendMessage('promoModals.sawPlusPromo', {});
sendMessage('ping', 'promo_modals_show_plus');

const { loggedIn } = this.props;
return (
<PromoModal
type={PLUS}
handleGoAwayClick={this._handlePromoGoAwayClick}
handleSignInClick={this._handlePromoSignInClick}
handleSubscribeClick={this._handlePromoSubscribeClick}
handleTryPlusClick={this._handlePromoTryPlusClick}
handleXClick={this._handlePromoXClick}
loggedIn={loggedIn}
show
/>
);
36 app/shared-components/PromoModal/PromoModal.jsx
View file
Open in desktop
@@ -20,32 +20,26 @@ import PremiumPromoModal from '../PremiumPromoModal';
const INSIGHTS = 'insights';
const PLUS = 'plus';
const PREMIUM = 'premium';

/**
* A superclass for Promo Modals
* A base functional component for Promo Modals
This conversation was marked as resolved by wlycdgr

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr Apr 13, 2020
Member

Update description to reflect that this is a class component, not a functional one

This comment has been minimized.

Sign in to view
@benstrumeyer

benstrumeyer Apr 15, 2020
Author Contributor

Updated comment to a class component
* @return {JSX}
* @memberof HubComponents
*/
class PromoModal extends React.Component {
handleGoAwayClick = () => { this.props.handleGoAwayClick(this.props.type); }

handleSubscribeClick = () => { this.props.handleSubscribeClick(this.props.type); }

handleXClick = () => { this.props.handleXClick(this.props.type); }

render() {
const { type } = this.props;
switch (type) {
case INSIGHTS:
return <InsightsPromoModal {...this.props} />;
case PLUS:
return <PlusPromoModal {...this.props} />;
case PREMIUM:
return <PremiumPromoModal {...this.props} />;
default:
return <InsightsPromoModal {...this.props} />;
}
const PromoModal = (props) => {
const { type } = props;
switch (type) {
case INSIGHTS:
return <InsightsPromoModal {...props} />;
case PLUS:
return <PlusPromoModal {...props} />;
case PREMIUM:
return <PremiumPromoModal {...props} />;
default:
return <InsightsPromoModal {...props} />;
}
}
};

// PropTypes ensure we pass required props of the correct type
PromoModal.propTypes = {
@@ -61,7 +55,7 @@ PromoModal.propTypes = {
isPlus: PropTypes.bool,
};

const noop = () => {};
const noop = () => { };
PromoModal.defaultProps = {
handleGoAwayClick: noop,
handleSignInClick: noop,
ProTip! Use n and p to navigate between commits in a pull request.