diff --git a/assets/js/src/newsletters/listings/notification.jsx b/assets/js/src/newsletters/listings/notification.jsx index ee2f3d0c49..c7e47ef741 100644 --- a/assets/js/src/newsletters/listings/notification.jsx +++ b/assets/js/src/newsletters/listings/notification.jsx @@ -9,6 +9,13 @@ import classNames from 'classnames' import jQuery from 'jquery' import MailPoet from 'mailpoet' +import { + timeOfDayValues, + weekDayValues, + monthDayValues, + nthWeekDayValues +} from 'newsletters/scheduling/common.jsx' + const messages = { onTrash(response) { const count = ~~response; @@ -179,63 +186,6 @@ const NewsletterListNotification = React.createClass({ ); }, renderSettings: function(newsletter) { - /// TO REFACTOR in order to avoid duplication with */scheduling.jsx - /// ======================================================================== - const SECONDS_IN_DAY = 86400; - const TIME_STEP_SECONDS = 3600; - const numberOfTimeSteps = SECONDS_IN_DAY / TIME_STEP_SECONDS; - - const timeOfDayValues = _.object(_.map( - _.times(numberOfTimeSteps,function(step) { - return step * TIME_STEP_SECONDS; - }), function(seconds) { - let date = new Date(null); - date.setSeconds(seconds); - const timeLabel = date.toISOString().substr(11, 5); - return [seconds, timeLabel]; - }) - ); - - const weekDayValues = { - 0: MailPoet.I18n.t('sunday'), - 1: MailPoet.I18n.t('monday'), - 2: MailPoet.I18n.t('tuesday'), - 3: MailPoet.I18n.t('wednesday'), - 4: MailPoet.I18n.t('thursday'), - 5: MailPoet.I18n.t('friday'), - 6: MailPoet.I18n.t('saturday') - }; - - const NUMBER_OF_DAYS_IN_MONTH = 28; - const monthDayValues = _.object( - _.map( - _.times(NUMBER_OF_DAYS_IN_MONTH, function(day) { - return day; - }), function(day) { - const labels = { - 0: MailPoet.I18n.t('first'), - 1: MailPoet.I18n.t('second'), - 2: MailPoet.I18n.t('third') - }; - let label; - if (labels[day] !== undefined) { - label = labels[day]; - } else { - label = MailPoet.I18n.t('nth').replace("%$1d", day + 1); - } - return [day, label]; - } - ) - ); - - const nthWeekDayValues = { - '1': MailPoet.I18n.t('first'), - '2': MailPoet.I18n.t('second'), - '3': MailPoet.I18n.t('third'), - 'L': MailPoet.I18n.t('last') - }; - /// ======================================================================== - let sendingFrequency; let sendingToSegments; diff --git a/assets/js/src/newsletters/scheduling/common.jsx b/assets/js/src/newsletters/scheduling/common.jsx new file mode 100644 index 0000000000..b8f45a31ec --- /dev/null +++ b/assets/js/src/newsletters/scheduling/common.jsx @@ -0,0 +1,80 @@ +import _ from 'underscore' +import MailPoet from 'mailpoet' + +// welcome emails +const _timeDelayValues = { + 'immediate': MailPoet.I18n.t('delayImmediately'), + 'hours': MailPoet.I18n.t('delayHoursAfter'), + 'days': MailPoet.I18n.t('delayDaysAfter'), + 'weeks': MailPoet.I18n.t('delayWeeksAfter'), +}; + +const _intervalValues = { + 'daily': MailPoet.I18n.t('daily'), + 'weekly': MailPoet.I18n.t('weekly'), + 'monthly': MailPoet.I18n.t('monthly'), + 'nthWeekDay': MailPoet.I18n.t('monthlyEvery'), + 'immediately': MailPoet.I18n.t('immediately'), +}; + +// notification emails +const SECONDS_IN_DAY = 86400; +const TIME_STEP_SECONDS = 3600; +const numberOfTimeSteps = SECONDS_IN_DAY / TIME_STEP_SECONDS; + +const _timeOfDayValues = _.object(_.map( + _.times(numberOfTimeSteps,function(step) { + return step * TIME_STEP_SECONDS; + }), function(seconds) { + let date = new Date(null); + date.setSeconds(seconds); + const timeLabel = date.toISOString().substr(11, 5); + return [seconds, timeLabel]; + }) +); + +const _weekDayValues = { + 0: MailPoet.I18n.t('sunday'), + 1: MailPoet.I18n.t('monday'), + 2: MailPoet.I18n.t('tuesday'), + 3: MailPoet.I18n.t('wednesday'), + 4: MailPoet.I18n.t('thursday'), + 5: MailPoet.I18n.t('friday'), + 6: MailPoet.I18n.t('saturday') +}; + +const NUMBER_OF_DAYS_IN_MONTH = 28; +const _monthDayValues = _.object( + _.map( + _.times(NUMBER_OF_DAYS_IN_MONTH, function(day) { + return day; + }), function(day) { + const labels = { + 0: MailPoet.I18n.t('first'), + 1: MailPoet.I18n.t('second'), + 2: MailPoet.I18n.t('third') + }; + let label; + if (labels[day] !== undefined) { + label = labels[day]; + } else { + label = MailPoet.I18n.t('nth').replace("%$1d", day + 1); + } + return [day, label]; + } + ) +); + +const _nthWeekDayValues = { + '1': MailPoet.I18n.t('first'), + '2': MailPoet.I18n.t('second'), + '3': MailPoet.I18n.t('third'), + 'L': MailPoet.I18n.t('last') +}; + +export { _timeDelayValues as timeDelayValues }; +export { _intervalValues as intervalValues }; +export { _timeOfDayValues as timeOfDayValues }; +export { _weekDayValues as weekDayValues }; +export { _monthDayValues as monthDayValues }; +export { _nthWeekDayValues as nthWeekDayValues }; \ No newline at end of file diff --git a/assets/js/src/newsletters/types/notification/notification.jsx b/assets/js/src/newsletters/types/notification/notification.jsx index 1322c1dc36..50be63ed34 100644 --- a/assets/js/src/newsletters/types/notification/notification.jsx +++ b/assets/js/src/newsletters/types/notification/notification.jsx @@ -18,7 +18,6 @@ define( var field = { name: 'options', - label: 'Periodicity', type: 'reactComponent', component: Scheduling, }; diff --git a/assets/js/src/newsletters/types/notification/scheduling.jsx b/assets/js/src/newsletters/types/notification/scheduling.jsx index a5c7f28ca3..617ec5b9a2 100644 --- a/assets/js/src/newsletters/types/notification/scheduling.jsx +++ b/assets/js/src/newsletters/types/notification/scheduling.jsx @@ -1,200 +1,144 @@ -define( - [ - 'underscore', - 'react', - 'react-router', - 'mailpoet', - 'form/fields/select.jsx' - ], - function( - _, - React, - Router, - MailPoet, - Select - ) { +import _ from 'underscore' +import React from 'react' +import MailPoet from 'mailpoet' +import Select from 'form/fields/select.jsx' +import { + intervalValues, + timeOfDayValues, + weekDayValues, + monthDayValues, + nthWeekDayValues +} from 'newsletters/scheduling/common.jsx' - var intervalField = { - name: 'intervalType', - values: { - 'daily': MailPoet.I18n.t('daily'), - 'weekly': MailPoet.I18n.t('weekly'), - 'monthly': MailPoet.I18n.t('monthly'), - 'nthWeekDay': MailPoet.I18n.t('monthlyEvery'), - 'immediately': MailPoet.I18n.t('immediately'), - }, - }; +const intervalField = { + name: 'intervalType', + values: intervalValues +}; - var SECONDS_IN_DAY = 86400; - var TIME_STEP_SECONDS = 3600; // Default: 3600 - var numberOfTimeSteps = SECONDS_IN_DAY / TIME_STEP_SECONDS; - var timeOfDayValues = _.object(_.map( - _.times(numberOfTimeSteps, function(step) { return step * TIME_STEP_SECONDS; }), - function(seconds) { - var date = new Date(null); - date.setSeconds(seconds); - var timeLabel = date.toISOString().substr(11, 5); - return [seconds, timeLabel]; +const timeOfDayField = { + name: 'timeOfDay', + values: timeOfDayValues +}; + +const weekDayField = { + name: 'weekDay', + values: weekDayValues +}; + +const monthDayField = { + name: 'monthDay', + values: monthDayValues +}; + +const nthWeekDayField = { + name: 'nthWeekDay', + values: nthWeekDayValues +}; + +const NotificationScheduling = React.createClass({ + _getCurrentValue: function() { + return (this.props.item[this.props.field.name] || {}); + }, + handleValueChange: function(name, value) { + const oldValue = this._getCurrentValue(); + let newValue = {}; + + newValue[name] = value; + + return this.props.onValueChange({ + target: { + name: this.props.field.name, + value: _.extend({}, oldValue, newValue) } - )); - var timeOfDayField = { - name: 'timeOfDay', - values: timeOfDayValues, - }; - - var weekDayField = { - name: 'weekDay', - values: { - 0: MailPoet.I18n.t('sunday'), - 1: MailPoet.I18n.t('monday'), - 2: MailPoet.I18n.t('tuesday'), - 3: MailPoet.I18n.t('wednesday'), - 4: MailPoet.I18n.t('thursday'), - 5: MailPoet.I18n.t('friday'), - 6: MailPoet.I18n.t('saturday') - }, - }; - - var NUMBER_OF_DAYS_IN_MONTH = 28; // 28 for compatibility with MP2 - var monthDayField = { - name: 'monthDay', - values: _.object(_.map( - _.times(NUMBER_OF_DAYS_IN_MONTH, function(day) { return day; }), - function(day) { - var labels = { - 0: MailPoet.I18n.t('first'), - 1: MailPoet.I18n.t('second'), - 2: MailPoet.I18n.t('third') - }, - label; - if (labels[day] !== undefined) { - label = labels[day]; - } else { - label = MailPoet.I18n.t('nth').replace("%$1d", day + 1); - } - - return [day, label]; - }, - )), - }; - - var nthWeekDayField = { - name: 'nthWeekDay', - values: { - '1': MailPoet.I18n.t('first'), - '2': MailPoet.I18n.t('second'), - '3': MailPoet.I18n.t('third'), - 'L': MailPoet.I18n.t('last'), - }, - }; - - var NotificationScheduling = React.createClass({ - _getCurrentValue: function() { - return this.props.item[this.props.field.name] || {}; - }, - handleValueChange: function(name, value) { - var oldValue = this._getCurrentValue(), - newValue = {}; - newValue[name] = value; - - return this.props.onValueChange({ - target: { - name: this.props.field.name, - value: _.extend({}, oldValue, newValue) - } - }); - }, - handleIntervalChange: function(event) { - return this.handleValueChange( - 'intervalType', - event.target.value - ); - }, - handleTimeOfDayChange: function(event) { - return this.handleValueChange( - 'timeOfDay', - event.target.value - ); - }, - handleWeekDayChange: function(event) { - return this.handleValueChange( - 'weekDay', - event.target.value - ); - }, - handleMonthDayChange: function(event) { - return this.handleValueChange( - 'monthDay', - event.target.value - ); - }, - handleNthWeekDayChange: function(event) { - return this.handleValueChange( - 'nthWeekDay', - event.target.value - ); - }, - render: function() { - var value = this._getCurrentValue(), - timeOfDaySelection, - weekDaySelection, - monthDaySelection, - nthWeekDaySelection; - - - if (value.intervalType !== 'immediately') { - timeOfDaySelection = ( - - ); - } - - if (value.intervalType === 'weekly' - || value.intervalType === 'nthWeekDay') { - weekDaySelection = ( - - ); - } - - if (value.intervalType === 'monthly') { - monthDaySelection = ( - - ); - } - - if (value.intervalType === 'nthWeekDay') { - nthWeekDaySelection = ( - - ); - } - - return ( -