Uses 'slug' instead of 'id' for newsletter types

assets/js/src/newsletters/newsletters.jsx

@@ -30,8 +30,8 @@ const getAutomaticEmailsRoutes = () => {
   if (!window.mailpoet_automatic_emails) return null;
 
   return _.map(window.mailpoet_automatic_emails, automaticEmail => ({
-    path: `new/${automaticEmail.id}`,
-    name: automaticEmail.id,
+    path: `new/${automaticEmail.slug}`,
+    name: automaticEmail.slug,
     component: AutomaticEmailsEventsList,
     data: {
       automaticEmail: automaticEmail,

assets/js/src/newsletters/types.jsx

@@ -63,7 +63,7 @@ define(
             <div>
               <a className="button button-primary"
                 disabled={disabled}
-                onClick={!disabled ? this.setupNewsletter.bind(null, automaticEmail.id) : null}
+                onClick={!disabled ? this.setupNewsletter.bind(null, automaticEmail.slug) : null}
               >
                 { MailPoet.I18n.t('setUp') }
               </a>
@@ -76,7 +76,7 @@ define(
       render: function () {
         const defaultTypes = [
           {
-            id: 'standard',
+            slug: 'standard',
             title: MailPoet.I18n.t('regularNewsletterTypeTitle'),
             description: MailPoet.I18n.t('regularNewsletterTypeDescription'),
             action: function () {
@@ -88,7 +88,7 @@ define(
             }.bind(this)(),
           },
           {
-            id: 'welcome',
+            slug: 'welcome',
             title: MailPoet.I18n.t('welcomeNewsletterTypeTitle'),
             description: MailPoet.I18n.t('welcomeNewsletterTypeDescription'),
             action: (function () {
@@ -102,7 +102,7 @@ define(
             }()),
           },
           {
-            id: 'notification',
+            slug: 'notification',
             title: MailPoet.I18n.t('postNotificationNewsletterTypeTitle'),
             description: MailPoet.I18n.t('postNotificationNewsletterTypeDescription'),
             action: function () {
@@ -125,7 +125,7 @@ define(
 
             <ul className="mailpoet_boxes clearfix">
               {types.map((type, index) => (
-                <li key={index} data-type={type.id}>
+                <li key={index} data-type={type.slug}>
                   <div>
                     <div className="mailpoet_thumbnail">
                       {type.thumbnailImage ? <img src={type.thumbnailImage} /> : null}

assets/js/src/newsletters/types/automatic_emails/events_list.jsx

@@ -11,8 +11,8 @@ class AutomaticEmailsEventsList extends React.Component {
     this.eventsConfigurator = this.eventsConfigurator.bind(this);
   }
 
-  eventsConfigurator(eventId) {
-    this.props.router.push(`new/${this.automaticEmail.id}/${eventId}/conditions`);
+  eventsConfigurator(eventSlug) {
+    this.props.router.push(`new/${this.automaticEmail.slug}/${eventSlug}/conditions`);
   }
 
   displayEvents() {
@@ -32,7 +32,7 @@ class AutomaticEmailsEventsList extends React.Component {
         action = (
           <a className="button button-primary"
             disabled={disabled}
-            onClick={!disabled ? this.eventsConfigurator.bind(null, event.id) : null}
+            onClick={!disabled ? this.eventsConfigurator.bind(null, event.slug) : null}
           >
             {event.actionButtonTitle || MailPoet.I18n.t('setUp')}
           </a>
@@ -40,7 +40,7 @@ class AutomaticEmailsEventsList extends React.Component {
       }
 
       return (
-        <li key={index} data-type={event.id}>
+        <li key={index} data-type={event.slug}>
           <div>
             <div className="mailpoet_thumbnail">
               {event.thumbnailImage ? <img src={event.thumbnailImage} /> : null}