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 }