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…

Fix premium promo modal in hub. Refactor promo modal pings. Style mod… 

…al exit button.
  • Loading branch information
@benstrumeyer
benstrumeyer committed Apr 16, 2020
commit 406fec5e9d2b4d1fb31ee2ef35b2699505142cd7
5 app/panel/components/BuildingBlocks/ModalExitButton.jsx
View file
Open in desktop
@@ -14,7 +14,6 @@

import React from 'react';
import PropTypes from 'prop-types';
import ClassNames from 'classnames';

/**
* A Functional React component for a Exit Button
@@ -27,9 +26,7 @@ const ModalExitButton = (props) => {
border
} = props;

const borderClassNames = ClassNames('ModalExitButton__exit flex-container align-middle', {
green: border === 'green'
});
const borderClassNames = `ModalExitButton__exit flex-container align-middle ${border}`;

return (
<button type="button" onClick={toggleModal} className={borderClassNames}>
3 app/panel/components/Panel.jsx
View file
Open in desktop
@@ -247,6 +247,7 @@ class Panel extends React.Component {
type={PREMIUM}
location="panel"
isPlus={isPlus}
show
/>
);
}
@@ -265,6 +266,7 @@ class Panel extends React.Component {
return (
<PromoModalContainer
type={INSIGHTS}
show
/>
);
}
@@ -284,6 +286,7 @@ class Panel extends React.Component {
<PromoModalContainer
type={PLUS}
loggedIn={loggedIn}
show
/>
);
}
28 app/panel/containers/PlusPromoModalContainer.js
View file
Open in desktop

This file was deleted.

31 app/shared-components/PromoModal/PromoModal.jsx
View file
Open in desktop
@@ -29,7 +29,7 @@ const PLUS = 'plus';
const PREMIUM = 'premium';

/**
* A base functional component for Promo Modals
* A base class component for Promo Modals
* @return {JSX}
* @memberof HubComponents
*/
@@ -45,18 +45,9 @@ class PromoModal extends React.Component {

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

switch (modal) {
case INSIGHTS:
sendMessage('ping', 'promo_modals_decline_insights_upgrade');
break;
case PLUS:
sendMessage('ping', 'promo_modals_decline_plus_upgrade');
break;
case PREMIUM:
sendMessage('ping', 'promo_modals_decline_insights_upgrade');
break;
default:
break;
if (modal === INSIGHTS
|| modal === PLUS) {
sendMessage('ping', `promo_modals_decline_${modal}_upgrade`);
}

this.props.actions.showNotification({
@@ -76,8 +67,6 @@ class PromoModal extends React.Component {
let url;
switch (product) {
case PLUS:
// Should we send a plus ping here?
// sendMessage('ping', 'promo_modals_plus_upgrade_cta');
url = `https://checkout.${DOMAIN}.com/plus?utm_source=gbe&utm_campaign=${utm_campaign}`;
break;
case PREMIUM:
@@ -119,10 +108,16 @@ class PromoModal extends React.Component {

_renderXButton = (type) => {
const XButtonClass = ClassNames({ PlusPromoModal__exitButton: type === PLUS });

let border;
if (type === PLUS) {
This conversation was marked as resolved by Eden12345

This comment has been minimized.

Sign in to view
@Eden12345

Eden12345 Apr 7, 2020
Contributor

An else if statement might make more sense here.

This comment has been minimized.

Sign in to view
@benstrumeyer

benstrumeyer Apr 7, 2020
Author Contributor

else if does make more sense here
border = 'green';
} else if (type === INSIGHTS) {
border = 'grey';
}
return (
<ModalExitButton
className={XButtonClass}
border={border}
toggleModal={() => this._handlePromoXClick(type)}
/>
);
@@ -164,7 +159,7 @@ class PromoModal extends React.Component {
}

render() {
const { type } = this.props;
const { type, show } = this.props;
const modalContentClassNames = ClassNames(
'flex-container',
'flex-dir-column',
@@ -176,7 +171,7 @@ class PromoModal extends React.Component {
}
);
return (
<Modal show>
<Modal show={show}>
<div className={modalContentClassNames}>
{this._renderXButton(type)}
{this.renderModalContent()}
ProTip! Use n and p to navigate between commits in a pull request.