diff --git a/assets/css/src/admin.styl b/assets/css/src/admin.styl
index cbc530bd5e..b037c74fba 100644
--- a/assets/css/src/admin.styl
+++ b/assets/css/src/admin.styl
@@ -1,6 +1,7 @@
@import 'nib'
@require 'select2/dist/css/select2.css'
+@require 'datepicker'
@require 'common'
@require 'modal'
@@ -18,4 +19,4 @@
@require 'settings'
@require 'progress_bar'
-@require 'subscribers'
\ No newline at end of file
+@require 'subscribers'
diff --git a/assets/css/src/datepicker.styl b/assets/css/src/datepicker.styl
new file mode 100644
index 0000000000..9f8e358c82
--- /dev/null
+++ b/assets/css/src/datepicker.styl
@@ -0,0 +1,97 @@
+/*
+ Taken from: https://github.com/rtsinani/jquery-datepicker-skins
+ Skin: Melon
+*/
+
+.ui-widget
+ font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+ background: #2e3641;
+ border: none;
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+
+.ui-datepicker
+ padding: 0;
+
+.ui-datepicker-header
+ border: none;
+ background: transparent;
+ font-weight: normal;
+ font-size: 15px;
+
+.ui-datepicker-header .ui-state-hover
+ background: transparent;
+ border-color: transparent;
+ cursor: pointer;
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+
+.ui-datepicker .ui-datepicker-title
+ margin-top: .4em;
+ margin-bottom: .3em;
+ color: #e9f0f4;
+
+.ui-datepicker .ui-datepicker-prev-hover
+.ui-datepicker .ui-datepicker-next-hover
+.ui-datepicker .ui-datepicker-next
+.ui-datepicker .ui-datepicker-prev
+ top: .9em;
+ border:none;
+
+.ui-datepicker .ui-datepicker-prev-hover
+ left: 2px;
+
+.ui-datepicker .ui-datepicker-next-hover
+ right: 2px;
+
+.ui-datepicker .ui-datepicker-next span
+.ui-datepicker .ui-datepicker-prev span
+ background-image: url(../img/datepicker/ui-icons_ffffff_256x240.png);
+ background-position: -32px 0;
+ margin-top: 0;
+ top: 0;
+ font-weight: normal;
+
+
+.ui-datepicker .ui-datepicker-prev span
+ background-position: -96px 0;
+
+
+.ui-datepicker table
+ margin: 0;
+
+.ui-datepicker th
+ padding: 1em 0;
+ color: #ccc;
+ font-size: 13px;
+ font-weight: normal;
+ border: none;
+ border-top: 1px solid #3a414d;
+
+.ui-datepicker td
+ background: #f97e76;
+ border: none;
+ padding: 0;
+
+
+td .ui-state-default
+ background: transparent;
+ border: none;
+ text-align: center;
+ padding: .5em;
+ margin: 0;
+ font-weight: normal;
+ color: #efefef;
+ font-size: 16px;
+
+.ui-state-disabled
+ opacity: 1;
+
+.ui-state-disabled .ui-state-default
+ color: #fba49e;
+
+td .ui-state-active
+td .ui-state-hover
+ background: #2e3641;
diff --git a/assets/img/datepicker/ui-icons_ffffff_256x240.png b/assets/img/datepicker/ui-icons_ffffff_256x240.png
new file mode 100644
index 0000000000..4f624bb2b1
Binary files /dev/null and b/assets/img/datepicker/ui-icons_ffffff_256x240.png differ
diff --git a/assets/js/src/newsletters/send.jsx b/assets/js/src/newsletters/send.jsx
index 52b3eaba9a..f75b4df096 100644
--- a/assets/js/src/newsletters/send.jsx
+++ b/assets/js/src/newsletters/send.jsx
@@ -35,9 +35,9 @@ define(
},
getFieldsByNewsletter: function(newsletter) {
switch(newsletter.type) {
- case 'notification': return NotificationNewsletterFields;
- case 'welcome': return WelcomeNewsletterFields;
- default: return StandardNewsletterFields;
+ case 'notification': return NotificationNewsletterFields(newsletter);
+ case 'welcome': return WelcomeNewsletterFields(newsletter);
+ default: return StandardNewsletterFields(newsletter);
}
},
isAutomatedNewsletter: function() {
diff --git a/assets/js/src/newsletters/send/standard.jsx b/assets/js/src/newsletters/send/standard.jsx
index 2a03f8a3ad..8b87fbda62 100644
--- a/assets/js/src/newsletters/send/standard.jsx
+++ b/assets/js/src/newsletters/send/standard.jsx
@@ -1,12 +1,180 @@
define(
[
- 'mailpoet'
+ 'react',
+ 'jquery',
+ 'mailpoet',
+ 'form/fields/checkbox.jsx',
+ 'form/fields/select.jsx',
+ 'form/fields/text.jsx',
],
function(
- MailPoet
+ React,
+ jQuery,
+ MailPoet,
+ Checkbox,
+ Select,
+ Text
) {
- var settings = window.mailpoet_settings || {};
+ var settings = window.mailpoet_settings || {},
+ currentTime = window.mailpoet_current_time || '00:00',
+ timeOfDayItems = window.mailpoet_schedule_time_of_day;
+
+ var isScheduledField = {
+ name: 'isScheduled',
+ };
+
+ var DateText = React.createClass({
+ componentDidMount: function() {
+ var $element = jQuery(this.refs.dateInput);
+ if ($element.datepicker) {
+ $element.datepicker({
+ dateFormat: "yy-mm-dd",
+ });
+ }
+ },
+ render: function() {
+ return (
+
+ );
+ },
+ });
+
+ var TimeSelect = React.createClass({
+ render: function() {
+ const options = Object.keys(timeOfDayItems).map(
+ (value, index) => {
+ return (
+
+ );
+ }
+ );
+
+ return (
+
+ );
+ }
+ });
+
+ var DateTime = React.createClass({
+ _DATE_TIME_SEPARATOR: " ",
+ getInitialState: function() {
+ return this._buildStateFromProps(this.props);
+ },
+ componentWillReceiveProps: function(nextProps) {
+ this.setState(this._buildStateFromProps(nextProps));
+ },
+ _buildStateFromProps: function(props) {
+ const [date, time] = props.value.split(this._DATE_TIME_SEPARATOR)
+ return {
+ date: date,
+ time: time,
+ };
+ },
+ handleChange: function(event) {
+ var newState = {};
+ newState[event.target.name] = event.target.value;
+
+ this.setState(newState, function() {
+ this.propagateChange();
+ });
+ },
+ propagateChange: function() {
+ if (this.props.onChange) {
+ this.props.onChange({
+ target: {
+ name: this.props.name || '',
+ value: this.getDateTime(),
+ }
+ })
+ }
+ },
+ getDateTime: function() {
+ return [this.state.date, this.state.time].join(this._DATE_TIME_SEPARATOR);
+ },
+ render: function() {
+ return (
+
+ {currentTime}
+
+
+ );
+ }
+
+ return (
+