diff --git a/assets/js/src/newsletters/listings/mixins.jsx b/assets/js/src/newsletters/listings/mixins.jsx
new file mode 100644
index 0000000000..0b6204a6b9
--- /dev/null
+++ b/assets/js/src/newsletters/listings/mixins.jsx
@@ -0,0 +1,152 @@
+import React from 'react'
+import MailPoet from 'mailpoet'
+import classNames from 'classnames'
+import jQuery from 'jquery'
+
+const _QueueMixin = {
+ pauseSending: function(newsletter) {
+ MailPoet.Ajax.post({
+ endpoint: 'sendingQueue',
+ action: 'pause',
+ data: newsletter.id
+ }).done(function() {
+ jQuery('#resume_'+newsletter.id).show();
+ jQuery('#pause_'+newsletter.id).hide();
+ });
+ },
+ resumeSending: function(newsletter) {
+ MailPoet.Ajax.post({
+ endpoint: 'sendingQueue',
+ action: 'resume',
+ data: newsletter.id
+ }).done(function() {
+ jQuery('#pause_'+newsletter.id).show();
+ jQuery('#resume_'+newsletter.id).hide();
+ });
+ },
+ renderQueueStatus: function(newsletter) {
+ if (!newsletter.queue) {
+ return (
+ {MailPoet.I18n.t('notSentYet')}
+ );
+ } else {
+ if (newsletter.queue.status === 'scheduled') {
+ return (
+
+ { MailPoet.I18n.t('scheduledFor') } { MailPoet.Date.format(newsletter.queue.scheduled_at) }
+
+ )
+ }
+ const progressClasses = classNames(
+ 'mailpoet_progress',
+ { 'mailpoet_progress_complete': newsletter.queue.status === 'completed'}
+ );
+
+ // calculate percentage done
+ const percentage = Math.round(
+ (newsletter.queue.count_processed * 100) / (newsletter.queue.count_total)
+ );
+
+ let label;
+
+ if (newsletter.queue.status === 'completed') {
+ label = (
+
+ {
+ MailPoet.I18n.t('newsletterQueueCompleted')
+ .replace(
+ "%$1d",
+ newsletter.queue.count_processed - newsletter.queue.count_failed
+ )
+ .replace(
+ "%$2d",
+ newsletter.queue.count_total
+ )
+ }
+
+ );
+ } else {
+ label = (
+
+ { newsletter.queue.count_processed } / { newsletter.queue.count_total }
+
+ {MailPoet.I18n.t('resume')}
+ {MailPoet.I18n.t('pause')}
+
+ );
+ }
+
+ return (
+
+
+
+
+ { percentage + "%" }
+
+
+
+ { label }
+
+
+ );
+ }
+ },
+};
+
+const _StatisticsMixin = {
+ renderStatistics: function(newsletter) {
+ if (
+ newsletter.statistics
+ && newsletter.queue
+ && newsletter.queue.status !== 'scheduled'
+ ) {
+ const total_sent = ~~(newsletter.queue.count_processed);
+
+ let percentage_clicked = 0;
+ let percentage_opened = 0;
+ let percentage_unsubscribed = 0;
+
+ if (total_sent > 0) {
+ percentage_clicked = Math.round(
+ (~~(newsletter.statistics.clicked) * 100) / total_sent
+ );
+ percentage_opened = Math.round(
+ (~~(newsletter.statistics.opened) * 100) / total_sent
+ );
+ percentage_unsubscribed = Math.round(
+ (~~(newsletter.statistics.unsubscribed) * 100) / total_sent
+ );
+ }
+
+ return (
+
+ { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
+
+ );
+ } else {
+ return (
+ {MailPoet.I18n.t('notSentYet')}
+ );
+ }
+ }
+}
+
+export { _QueueMixin as QueueMixin };
+export { _StatisticsMixin as StatisticsMixin };
\ No newline at end of file
diff --git a/assets/js/src/newsletters/listings/notification_history.jsx b/assets/js/src/newsletters/listings/notification_history.jsx
index a5b6f2380a..6b1d1bd4d2 100644
--- a/assets/js/src/newsletters/listings/notification_history.jsx
+++ b/assets/js/src/newsletters/listings/notification_history.jsx
@@ -7,6 +7,8 @@ import MailPoet from 'mailpoet'
import Listing from 'listing/listing.jsx'
import ListingTabs from 'newsletters/listings/tabs.jsx'
+import { QueueMixin, StatisticsMixin } from 'newsletters/listings/mixins.jsx'
+
const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
const columns = [
@@ -47,135 +49,7 @@ const newsletter_actions = [
];
const NewsletterListNotificationHistory = React.createClass({
- pauseSending: function(newsletter) {
- MailPoet.Ajax.post({
- endpoint: 'sendingQueue',
- action: 'pause',
- data: newsletter.id
- }).done(function() {
- jQuery('#resume_'+newsletter.id).show();
- jQuery('#pause_'+newsletter.id).hide();
- });
- },
- resumeSending: function(newsletter) {
- MailPoet.Ajax.post({
- endpoint: 'sendingQueue',
- action: 'resume',
- data: newsletter.id
- }).done(function() {
- jQuery('#pause_'+newsletter.id).show();
- jQuery('#resume_'+newsletter.id).hide();
- });
- },
- renderStatus: function(newsletter) {
- if (!newsletter.queue) {
- return (
- {MailPoet.I18n.t('notSentYet')}
- );
- } else {
- if (newsletter.queue.status === 'scheduled') {
- return (
- {MailPoet.I18n.t('scheduledFor')} { MailPoet.Date.format(newsletter.queue.scheduled_at) }
- )
- }
- const progressClasses = classNames(
- 'mailpoet_progress',
- { 'mailpoet_progress_complete': newsletter.queue.status === 'completed'}
- );
-
- // calculate percentage done
- const percentage = Math.round(
- (newsletter.queue.count_processed * 100) / (newsletter.queue.count_total)
- );
-
- let label;
-
- if (newsletter.queue.status === 'completed') {
- label = (
-
- {
- MailPoet.I18n.t('newsletterQueueCompleted')
- .replace("%$1d", newsletter.queue.count_processed - newsletter.queue.count_failed)
- .replace("%$2d", newsletter.queue.count_total)
- }
-
- );
- } else {
- label = (
-
- { newsletter.queue.count_processed } / { newsletter.queue.count_total }
-
- {MailPoet.I18n.t('resume')}
- {MailPoet.I18n.t('pause')}
-
- );
- }
-
- return (
-
-
-
-
- { percentage + "%" }
-
-
-
- { label }
-
-
- );
- }
- },
- renderStatistics: function(newsletter) {
- if (mailpoet_tracking_enabled === false) {
- return;
- }
-
- if (newsletter.statistics && newsletter.queue && newsletter.queue.status !== 'scheduled') {
- const total_sent = ~~(newsletter.queue.count_processed);
-
- let percentage_clicked = 0;
- let percentage_opened = 0;
- let percentage_unsubscribed = 0;
-
- if (total_sent > 0) {
- percentage_clicked = Math.round(
- (~~(newsletter.statistics.clicked) * 100) / total_sent
- );
- percentage_opened = Math.round(
- (~~(newsletter.statistics.opened) * 100) / total_sent
- );
- percentage_unsubscribed = Math.round(
- (~~(newsletter.statistics.unsubscribed) * 100) / total_sent
- );
- }
-
- return (
-
- { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
-
- );
- } else {
- return (
- {MailPoet.I18n.t('notSentYet')}
- );
- }
- },
+ mixins: [QueueMixin, StatisticsMixin],
renderItem: function(newsletter, actions) {
const rowClasses = classNames(
'manage-column',
@@ -199,7 +73,7 @@ const NewsletterListNotificationHistory = React.createClass({
{ actions }
- { this.renderStatus(newsletter) }
+ { this.renderQueueStatus(newsletter) }
|
{ segments }
diff --git a/assets/js/src/newsletters/listings/standard.jsx b/assets/js/src/newsletters/listings/standard.jsx
index 59006bde0b..1a4031c0f6 100644
--- a/assets/js/src/newsletters/listings/standard.jsx
+++ b/assets/js/src/newsletters/listings/standard.jsx
@@ -7,6 +7,8 @@ import MailPoet from 'mailpoet'
import Listing from 'listing/listing.jsx'
import ListingTabs from 'newsletters/listings/tabs.jsx'
+import { QueueMixin, StatisticsMixin } from 'newsletters/listings/mixins.jsx'
+
const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
const messages = {
@@ -139,135 +141,7 @@ const newsletter_actions = [
];
const NewsletterListStandard = React.createClass({
- pauseSending: function(newsletter) {
- MailPoet.Ajax.post({
- endpoint: 'sendingQueue',
- action: 'pause',
- data: newsletter.id
- }).done(function() {
- jQuery('#resume_'+newsletter.id).show();
- jQuery('#pause_'+newsletter.id).hide();
- });
- },
- resumeSending: function(newsletter) {
- MailPoet.Ajax.post({
- endpoint: 'sendingQueue',
- action: 'resume',
- data: newsletter.id
- }).done(function() {
- jQuery('#pause_'+newsletter.id).show();
- jQuery('#resume_'+newsletter.id).hide();
- });
- },
- renderStatus: function(newsletter) {
- if (!newsletter.queue) {
- return (
- {MailPoet.I18n.t('notSentYet')}
- );
- } else {
- if (newsletter.queue.status === 'scheduled') {
- return (
- {MailPoet.I18n.t('scheduledFor')} { MailPoet.Date.format(newsletter.queue.scheduled_at) }
- )
- }
- const progressClasses = classNames(
- 'mailpoet_progress',
- { 'mailpoet_progress_complete': newsletter.queue.status === 'completed'}
- );
-
- // calculate percentage done
- const percentage = Math.round(
- (newsletter.queue.count_processed * 100) / (newsletter.queue.count_total)
- );
-
- let label;
-
- if (newsletter.queue.status === 'completed') {
- label = (
-
- {
- MailPoet.I18n.t('newsletterQueueCompleted')
- .replace("%$1d", newsletter.queue.count_processed - newsletter.queue.count_failed)
- .replace("%$2d", newsletter.queue.count_total)
- }
-
- );
- } else {
- label = (
-
- { newsletter.queue.count_processed } / { newsletter.queue.count_total }
-
- {MailPoet.I18n.t('resume')}
- {MailPoet.I18n.t('pause')}
-
- );
- }
-
- return (
-
-
-
-
- { percentage + "%" }
-
-
-
- { label }
-
-
- );
- }
- },
- renderStatistics: function(newsletter) {
- if (mailpoet_tracking_enabled === false) {
- return;
- }
-
- if (newsletter.statistics && newsletter.queue && newsletter.queue.status !== 'scheduled') {
- const total_sent = ~~(newsletter.queue.count_processed);
-
- let percentage_clicked = 0;
- let percentage_opened = 0;
- let percentage_unsubscribed = 0;
-
- if (total_sent > 0) {
- percentage_clicked = Math.round(
- (~~(newsletter.statistics.clicked) * 100) / total_sent
- );
- percentage_opened = Math.round(
- (~~(newsletter.statistics.opened) * 100) / total_sent
- );
- percentage_unsubscribed = Math.round(
- (~~(newsletter.statistics.unsubscribed) * 100) / total_sent
- );
- }
-
- return (
-
- { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
-
- );
- } else {
- return (
- {MailPoet.I18n.t('notSentYet')}
- );
- }
- },
+ mixins: [QueueMixin, StatisticsMixin],
renderItem: function(newsletter, actions) {
const rowClasses = classNames(
'manage-column',
@@ -291,7 +165,7 @@ const NewsletterListStandard = React.createClass({
{ actions }
|
- { this.renderStatus(newsletter) }
+ { this.renderQueueStatus(newsletter) }
|
{ segments }
|