Remove StatsMixin

This commit is contained in:
Amine Ben hammou
2019-06-21 11:58:57 +01:00
committed by M. Shull
parent baf21dcaf4
commit ca1dc6fe59
4 changed files with 203 additions and 208 deletions

View File

@@ -194,227 +194,227 @@ function wrapInLink(content, params, id, totalSent) {
); );
} }
const StatisticsMixin = { const addStatsCTALink = (params) => {
renderStatistics: function renderStatistics(newsletter, isSent, currentTime) { if (window.mailpoet_premium_active) {
let sent = isSent; return params;
if (sent === undefined) { }
// condition for standard and post notification listings const newParams = params;
sent = newsletter.statistics newParams.link = 'admin.php?page=mailpoet-premium';
newParams.externalLink = true;
newParams.onClick = trackStatsCTAClicked;
return newParams;
};
export const renderStatistics = (newsletter, isSent, currentTime) => {
let sent = isSent;
if (sent === undefined) {
// condition for standard and post notification listings
sent = newsletter.statistics
&& newsletter.queue && newsletter.queue
&& newsletter.queue.status !== 'scheduled'; && newsletter.queue.status !== 'scheduled';
} }
if (!sent) { if (!sent) {
return ( return (
<span>{MailPoet.I18n.t('notSentYet')}</span> <span>{MailPoet.I18n.t('notSentYet')}</span>
); );
} }
let params = {}; let params = {};
Hooks.addFilter('mailpoet_newsletters_listing_stats_before', 'mailpoet', StatisticsMixin.addStatsCTALink); Hooks.addFilter('mailpoet_newsletters_listing_stats_before', 'mailpoet', addStatsCTALink);
params = Hooks.applyFilters('mailpoet_newsletters_listing_stats_before', params, newsletter); params = Hooks.applyFilters('mailpoet_newsletters_listing_stats_before', params, newsletter);
// welcome emails provide explicit total_sent value // welcome emails provide explicit total_sent value
const totalSent = Number((newsletter.total_sent || newsletter.queue.count_processed)); const totalSent = Number((newsletter.total_sent || newsletter.queue.count_processed));
let percentageClicked = 0; let percentageClicked = 0;
let percentageOpened = 0; let percentageOpened = 0;
let percentageUnsubscribed = 0; let percentageUnsubscribed = 0;
let revenue = null; let revenue = null;
if (totalSent > 0) { if (totalSent > 0) {
percentageClicked = (newsletter.statistics.clicked * 100) / totalSent; percentageClicked = (newsletter.statistics.clicked * 100) / totalSent;
percentageOpened = (newsletter.statistics.opened * 100) / totalSent; percentageOpened = (newsletter.statistics.opened * 100) / totalSent;
percentageUnsubscribed = (newsletter.statistics.unsubscribed * 100) / totalSent; percentageUnsubscribed = (newsletter.statistics.unsubscribed * 100) / totalSent;
revenue = newsletter.statistics.revenue; revenue = newsletter.statistics.revenue;
} }
// format to 1 decimal place // format to 1 decimal place
const percentageClickedDisplay = MailPoet.Num.toLocaleFixed(percentageClicked, 1); const percentageClickedDisplay = MailPoet.Num.toLocaleFixed(percentageClicked, 1);
const percentageOpenedDisplay = MailPoet.Num.toLocaleFixed(percentageOpened, 1); const percentageOpenedDisplay = MailPoet.Num.toLocaleFixed(percentageOpened, 1);
const percentageUnsubscribedDisplay = MailPoet.Num.toLocaleFixed(percentageUnsubscribed, 1); const percentageUnsubscribedDisplay = MailPoet.Num.toLocaleFixed(percentageUnsubscribed, 1);
let showStatsTimeout; let showStatsTimeout;
let newsletterDate; let newsletterDate;
let sentHoursAgo; let sentHoursAgo;
let tooEarlyForStats; let tooEarlyForStats;
let showKbLink; let showKbLink;
if (currentTime !== undefined) { if (currentTime !== undefined) {
// standard emails and post notifications: // standard emails and post notifications:
// display green box for newsletters that were just sent // display green box for newsletters that were just sent
showStatsTimeout = 6; // in hours showStatsTimeout = 6; // in hours
newsletterDate = newsletter.queue.scheduled_at || newsletter.queue.created_at; newsletterDate = newsletter.queue.scheduled_at || newsletter.queue.created_at;
sentHoursAgo = moment(currentTime).diff(moment(newsletterDate), 'hours'); sentHoursAgo = moment(currentTime).diff(moment(newsletterDate), 'hours');
tooEarlyForStats = sentHoursAgo < showStatsTimeout; tooEarlyForStats = sentHoursAgo < showStatsTimeout;
showKbLink = true; showKbLink = true;
} else { } else {
// welcome emails: no green box and KB link // welcome emails: no green box and KB link
tooEarlyForStats = false; tooEarlyForStats = false;
showKbLink = false; showKbLink = false;
} }
const improveStatsKBLink = 'http://beta.docs.mailpoet.com/article/191-how-to-improve-my-open-and-click-rates'; const improveStatsKBLink = 'http://beta.docs.mailpoet.com/article/191-how-to-improve-my-open-and-click-rates';
// thresholds to display badges // thresholds to display badges
const minNewslettersSent = 20; const minNewslettersSent = 20;
const minNewsletterOpens = 5; const minNewsletterOpens = 5;
let openedAndClickedStats; let openedAndClickedStats;
if (totalSent >= minNewslettersSent if (totalSent >= minNewslettersSent
&& newsletter.statistics.opened >= minNewsletterOpens && newsletter.statistics.opened >= minNewsletterOpens
&& !tooEarlyForStats && !tooEarlyForStats
) { ) {
// display stats with badges // display stats with badges
openedAndClickedStats = ( openedAndClickedStats = (
<div className="mailpoet_stats_text"> <div className="mailpoet_stats_text">
<div>
<span>
{ percentageOpenedDisplay }
%
{' '}
</span>
<StatsBadge
stat="opened"
rate={percentageOpened}
tooltipId={`opened-${newsletter.id}`}
/>
</div>
<div>
<span>
{ percentageClickedDisplay }
%
{' '}
</span>
<StatsBadge
stat="clicked"
rate={percentageClicked}
tooltipId={`clicked-${newsletter.id}`}
/>
</div>
<div>
<span className="mailpoet_stat_hidden">
{ percentageUnsubscribedDisplay }
%
</span>
</div>
</div>
);
} else {
// display simple stats
openedAndClickedStats = (
<div> <div>
<span className="mailpoet_stats_text"> <span>
{ percentageOpenedDisplay } { percentageOpenedDisplay }
%,
{ ' ' }
{ percentageClickedDisplay }
%
<span className="mailpoet_stat_hidden">
,
{' '}
{ percentageUnsubscribedDisplay }
% %
</span> {' '}
</span>
<StatsBadge
stat="opened"
rate={percentageOpened}
tooltipId={`opened-${newsletter.id}`}
/>
</div>
<div>
<span>
{ percentageClickedDisplay }
%
{' '}
</span>
<StatsBadge
stat="clicked"
rate={percentageClicked}
tooltipId={`clicked-${newsletter.id}`}
/>
</div>
<div>
<span className="mailpoet_stat_hidden">
{ percentageUnsubscribedDisplay }
%
</span> </span>
</div> </div>
); </div>
}
const wrapContentInLink = (content, idPrefix) => wrapInLink(
content,
params,
`${idPrefix}-${newsletter.id}`,
totalSent
); );
} else {
const content = ( // display simple stats
<> openedAndClickedStats = (
{ wrapContentInLink(openedAndClickedStats, 'opened-and-clicked') } <div>
{ revenue !== null && revenue.value > 0 && ( <span className="mailpoet_stats_text">
<div className="mailpoet_stats_text"> { percentageOpenedDisplay }
{ wrapContentInLink(revenue.formatted, 'revenue') } %,
{ ' ' }
{ percentageClickedDisplay }
%
<span className="mailpoet_stat_hidden">
,
{' '} {' '}
<HelpTooltip { percentageUnsubscribedDisplay }
tooltip={MailPoet.I18n.t('revenueStatsTooltip')} %
place="left" </span>
tooltipId="helpTooltipStatsRevenue" </span>
/> </div>
</div>
) }
{ tooEarlyForStats && wrapContentInLink(
(
<div className="mailpoet_badge mailpoet_badge_green">
{MailPoet.I18n.t('checkBackInHours').replace('%$1d', showStatsTimeout - sentHoursAgo)}
</div>
),
'check-back'
) }
</>
); );
}
// thresholds to display bad open rate help const wrapContentInLink = (content, idPrefix) => wrapInLink(
const maxPercentageOpened = 5; content,
const minSentHoursAgo = 24; params,
const minTotalSent = 10; `${idPrefix}-${newsletter.id}`,
totalSent
);
let afterContent; const content = (
if (showKbLink <>
{ wrapContentInLink(openedAndClickedStats, 'opened-and-clicked') }
{ revenue !== null && revenue.value > 0 && (
<div className="mailpoet_stats_text">
{ wrapContentInLink(revenue.formatted, 'revenue') }
{' '}
<HelpTooltip
tooltip={MailPoet.I18n.t('revenueStatsTooltip')}
place="left"
tooltipId="helpTooltipStatsRevenue"
/>
</div>
) }
{ tooEarlyForStats && wrapContentInLink(
(
<div className="mailpoet_badge mailpoet_badge_green">
{MailPoet.I18n.t('checkBackInHours').replace('%$1d', showStatsTimeout - sentHoursAgo)}
</div>
),
'check-back'
) }
</>
);
// thresholds to display bad open rate help
const maxPercentageOpened = 5;
const minSentHoursAgo = 24;
const minTotalSent = 10;
let afterContent;
if (showKbLink
&& percentageOpened < maxPercentageOpened && percentageOpened < maxPercentageOpened
&& sentHoursAgo >= minSentHoursAgo && sentHoursAgo >= minSentHoursAgo
&& totalSent >= minTotalSent && totalSent >= minTotalSent
) { ) {
// help link for bad open rate // help link for bad open rate
afterContent = ( afterContent = (
<div>
<a
href={improveStatsKBLink}
target="_blank"
rel="noopener noreferrer"
className="mailpoet_stat_link_small"
>
{MailPoet.I18n.t('improveThisLinkText')}
</a>
</div>
);
}
return (
<div> <div>
{content} <a
{afterContent} href={improveStatsKBLink}
target="_blank"
rel="noopener noreferrer"
className="mailpoet_stat_link_small"
>
{MailPoet.I18n.t('improveThisLinkText')}
</a>
</div> </div>
); );
}, }
addStatsCTAAction: function addStatsCTAAction(actions) {
if (window.mailpoet_premium_active) { return (
return actions; <div>
} {content}
actions.unshift({ {afterContent}
name: 'stats', </div>
link: function link() { );
return ( };
<a href="admin.php?page=mailpoet-premium" onClick={trackStatsCTAClicked}>
{MailPoet.I18n.t('statsListingActionTitle')} export const addStatsCTAAction = (actions) => {
</a> if (window.mailpoet_premium_active) {
);
},
display: function display(newsletter) {
// welcome emails provide explicit total_sent value
const countProcessed = newsletter.queue && newsletter.queue.count_processed;
return Number(newsletter.total_sent || countProcessed) > 0;
},
});
return actions; return actions;
}, }
addStatsCTALink: function addStatsCTALink(params) { actions.unshift({
if (window.mailpoet_premium_active) { name: 'stats',
return params; link: function link() {
} return (
const newParams = params; <a href="admin.php?page=mailpoet-premium" onClick={trackStatsCTAClicked}>
newParams.link = 'admin.php?page=mailpoet-premium'; {MailPoet.I18n.t('statsListingActionTitle')}
newParams.externalLink = true; </a>
newParams.onClick = trackStatsCTAClicked; );
return newParams; },
}, display: function display(newsletter) {
// welcome emails provide explicit total_sent value
const countProcessed = newsletter.queue && newsletter.queue.count_processed;
return Number(newsletter.total_sent || countProcessed) > 0;
},
});
return actions;
}; };
export const checkMailerStatus = (state) => { export const checkMailerStatus = (state) => {
@@ -465,5 +465,3 @@ export const checkCronStatus = (state) => {
jQuery('[data-id="mailpoet_cron_error"]')[0] jQuery('[data-id="mailpoet_cron_error"]')[0]
); );
}; };
export { StatisticsMixin };

View File

@@ -13,7 +13,8 @@ import FeatureAnnouncement from 'announcements/feature_announcement.jsx';
import { import {
renderQueueStatus, renderQueueStatus,
StatisticsMixin, renderStatistics,
addStatsCTAAction,
checkCronStatus, checkCronStatus,
checkMailerStatus, checkMailerStatus,
} from 'newsletters/listings/mixins.jsx'; } from 'newsletters/listings/mixins.jsx';
@@ -57,7 +58,7 @@ let newsletterActions = [
}, },
]; ];
Hooks.addFilter('mailpoet_newsletters_listings_notification_history_actions', 'mailpoet', StatisticsMixin.addStatsCTAAction); Hooks.addFilter('mailpoet_newsletters_listings_notification_history_actions', 'mailpoet', addStatsCTAAction);
newsletterActions = Hooks.applyFilters('mailpoet_newsletters_listings_notification_history_actions', newsletterActions); newsletterActions = Hooks.applyFilters('mailpoet_newsletters_listings_notification_history_actions', newsletterActions);
const NewsletterListNotificationHistory = createReactClass({ // eslint-disable-line react/prefer-es6-class, max-len const NewsletterListNotificationHistory = createReactClass({ // eslint-disable-line react/prefer-es6-class, max-len
@@ -70,8 +71,6 @@ const NewsletterListNotificationHistory = createReactClass({ // eslint-disable-l
}).isRequired, }).isRequired,
}, },
mixins: [StatisticsMixin],
renderItem: function renderItem(newsletter, actions, meta) { renderItem: function renderItem(newsletter, actions, meta) {
const rowClasses = classNames( const rowClasses = classNames(
'manage-column', 'manage-column',
@@ -103,7 +102,7 @@ const NewsletterListNotificationHistory = createReactClass({ // eslint-disable-l
</td> </td>
{ (mailpoetTrackingEnabled === true) ? ( { (mailpoetTrackingEnabled === true) ? (
<td className="column" data-colname={MailPoet.I18n.t('statistics')}> <td className="column" data-colname={MailPoet.I18n.t('statistics')}>
{ this.renderStatistics(newsletter, undefined, meta.current_time) } { renderStatistics(newsletter, undefined, meta.current_time) }
</td> </td>
) : null } ) : null }
<td className="column-date" data-colname={MailPoet.I18n.t('sentOn')}> <td className="column-date" data-colname={MailPoet.I18n.t('sentOn')}>

View File

@@ -13,7 +13,8 @@ import FeatureAnnouncement from 'announcements/feature_announcement.jsx';
import { import {
renderQueueStatus, renderQueueStatus,
StatisticsMixin, renderStatistics,
addStatsCTAAction,
checkCronStatus, checkCronStatus,
checkMailerStatus, checkMailerStatus,
} from 'newsletters/listings/mixins.jsx'; } from 'newsletters/listings/mixins.jsx';
@@ -169,7 +170,7 @@ let newsletterActions = [
}, },
]; ];
Hooks.addFilter('mailpoet_newsletters_listings_standard_actions', 'mailpoet', StatisticsMixin.addStatsCTAAction); Hooks.addFilter('mailpoet_newsletters_listings_standard_actions', 'mailpoet', addStatsCTAAction);
newsletterActions = Hooks.applyFilters('mailpoet_newsletters_listings_standard_actions', newsletterActions); newsletterActions = Hooks.applyFilters('mailpoet_newsletters_listings_standard_actions', newsletterActions);
const NewsletterListStandard = createReactClass({ // eslint-disable-line react/prefer-es6-class const NewsletterListStandard = createReactClass({ // eslint-disable-line react/prefer-es6-class
@@ -182,8 +183,6 @@ const NewsletterListStandard = createReactClass({ // eslint-disable-line react/p
}).isRequired, }).isRequired,
}, },
mixins: [StatisticsMixin],
renderItem: function renderItem(newsletter, actions, meta) { renderItem: function renderItem(newsletter, actions, meta) {
const rowClasses = classNames( const rowClasses = classNames(
'manage-column', 'manage-column',
@@ -215,7 +214,7 @@ const NewsletterListStandard = createReactClass({ // eslint-disable-line react/p
</td> </td>
{ (mailpoetTrackingEnabled === true) ? ( { (mailpoetTrackingEnabled === true) ? (
<td className="column" data-colname={MailPoet.I18n.t('statistics')}> <td className="column" data-colname={MailPoet.I18n.t('statistics')}>
{ this.renderStatistics(newsletter, undefined, meta.current_time) } { renderStatistics(newsletter, undefined, meta.current_time) }
</td> </td>
) : null } ) : null }
<td className="column-date" data-colname={MailPoet.I18n.t('sentOn')}> <td className="column-date" data-colname={MailPoet.I18n.t('sentOn')}>

View File

@@ -9,7 +9,8 @@ import ListingHeading from 'newsletters/listings/heading.jsx';
import FeatureAnnouncement from 'announcements/feature_announcement.jsx'; import FeatureAnnouncement from 'announcements/feature_announcement.jsx';
import { import {
StatisticsMixin, renderStatistics,
addStatsCTAAction,
checkCronStatus, checkCronStatus,
checkMailerStatus, checkMailerStatus,
} from 'newsletters/listings/mixins.jsx'; } from 'newsletters/listings/mixins.jsx';
@@ -154,7 +155,7 @@ let newsletterActions = [
}, },
]; ];
Hooks.addFilter('mailpoet_newsletters_listings_welcome_notification_actions', 'mailpoet', StatisticsMixin.addStatsCTAAction); Hooks.addFilter('mailpoet_newsletters_listings_welcome_notification_actions', 'mailpoet', addStatsCTAAction);
newsletterActions = Hooks.applyFilters('mailpoet_newsletters_listings_welcome_notification_actions', newsletterActions); newsletterActions = Hooks.applyFilters('mailpoet_newsletters_listings_welcome_notification_actions', newsletterActions);
const NewsletterListWelcome = createReactClass({ // eslint-disable-line react/prefer-es6-class const NewsletterListWelcome = createReactClass({ // eslint-disable-line react/prefer-es6-class
@@ -167,8 +168,6 @@ const NewsletterListWelcome = createReactClass({ // eslint-disable-line react/pr
}).isRequired, }).isRequired,
}, },
mixins: [StatisticsMixin],
updateStatus: function updateStatus(e) { updateStatus: function updateStatus(e) {
// make the event persist so that we can still override the selected value // make the event persist so that we can still override the selected value
// in the ajax callback // in the ajax callback
@@ -333,7 +332,7 @@ const NewsletterListWelcome = createReactClass({ // eslint-disable-line react/pr
</td> </td>
{ (mailpoetTrackingEnabled === true) ? ( { (mailpoetTrackingEnabled === true) ? (
<td className="column" data-colname={MailPoet.I18n.t('statistics')}> <td className="column" data-colname={MailPoet.I18n.t('statistics')}>
{ this.renderStatistics( { renderStatistics(
newsletter, newsletter,
newsletter.total_sent > 0 && newsletter.statistics newsletter.total_sent > 0 && newsletter.statistics
) } ) }