Form editor update

- when a custom field is updated, the matching form field is now also updated
- ability to toggle "is_required" on First name & Last name
- fixed position of validation errors on segment selection, checkbox and radio
- fixed form subscription not working when using custom fields
- fixed sortable in segment selection after list update (add/remove)
- updated position of messages in form subscription

assets/js/src/form_editor/form_editor.js

@@ -617,6 +617,17 @@ var WysijaForm = {
       // this is a url, so do not encode the protocol
       return encodeURI(str).replace(/[!'()*]/g, escape);
     }
+  },
+  updateBlock: function(data) {
+    var hasUpdated = false;
+    WysijaForm.getBlocks().each(function(b) {
+      if(b.block.getData().id == data.id) {
+        hasUpdated = true;
+        b.block.redraw(data);
+      }
+    });
+
+    return hasUpdated;
   }
 };
 

assets/js/src/public.js

@@ -20,10 +20,7 @@ function(
       $('form.mailpoet_form').each(function() {
         var form = $(this);
 
-        form.parsley({
+        form.parsley().on('form:submit', function(parsley) {
-          errorsWrapper: '<p></p>',
-          errorTemplate: '<span></span>'
-        }).on('form:submit', function(parsley) {
 
           var data = form.serializeObject() || {};
 

lib/Form/Block/Base.php

@@ -13,7 +13,9 @@ abstract class Base {
     if($block['id'] === 'segments') {
       $rules['required'] = true;
       $rules['mincheck'] = 1;
-      $rules['error-message'] = __('You need to select a list');
+      $rules['group'] = $block['id'];
+      $rules['errors-container'] = '.mailpoet_error_'.$block['id'];
+      $rules['required-message'] = __('You need to select a list');
     }
 
     if(!empty($block['params']['required'])) {
@@ -29,7 +31,7 @@ abstract class Base {
       }
     }
 
-    if($block['type'] === 'radio') {
+    if(in_array($block['type'], array('radio', 'checkbox'))) {
       $rules['group'] = 'custom_field_'.$block['id'];
       $rules['errors-container'] = '.mailpoet_error_'.$block['id'];
       $rules['required-message'] = __('You need to select at least one option.');

lib/Form/Block/Checkbox.php

@@ -9,10 +9,6 @@ class Checkbox extends Base {
     $field_name = static::getFieldName($block);
     $field_validation = static::getInputValidation($block);
 
-    // TODO: check if it still makes sense
-    // create hidden default value
-    // $html .= '<input type="hidden"name="'.$field_name.'" value="0" '.static::getInputValidation($block).'/>';
-
     $html .= '<p class="mailpoet_paragraph">';
 
     $html .= static::renderLabel($block);
@@ -35,6 +31,8 @@ class Checkbox extends Base {
       $html .= '</label>';
     }
 
+    $html .= '<span class="mailpoet_error_'.$block['id'].'"></span>';
+
     $html .= '</p>';
 
     return $html;

lib/Form/Block/Radio.php

@@ -13,8 +13,6 @@ class Radio extends Base {
 
     $html .= static::renderLabel($block);
 
-    $html .= '<span class="mailpoet_error_'.$block['id'].'"></span>';
-
     foreach($block['params']['values'] as $option) {
       $html .= '<label class="mailpoet_radio_label">';
 
@@ -33,6 +31,8 @@ class Radio extends Base {
       $html .= '</label>';
     }
 
+    $html .= '<span class="mailpoet_error_'.$block['id'].'"></span>';
+
     $html .= '</p>';
 
     return $html;

lib/Form/Block/Segment.php

@@ -30,6 +30,8 @@ class Segment extends Base {
       }
     }
 
+    $html .= '<span class="mailpoet_error_'.$block['id'].'"></span>';
+
     $html .= '</p>';
 
     return $html;

lib/Form/Block/Submit.php

@@ -6,11 +6,11 @@ class Submit extends Base {
   static function render($block) {
     $html = '';
 
-    $html .= '<input class="mailpoet_submit" type="submit" ';
+    $html .= '<p class="mailpoet_submit"><input type="submit" ';
 
     $html .= 'value="'.static::getFieldLabel($block).'" ';
 
-    $html .= '/>';
+    $html .= '/></p>';
 
     return $html;
   }

lib/Models/Subscriber.php

@@ -237,6 +237,16 @@ class Subscriber extends Model {
       }
     }
 
+    // custom fields
+    $custom_fields = array();
+
+    foreach($data as $key => $value) {
+      if(strpos($key, 'cf_') === 0) {
+        $custom_fields[substr($key, 3)] = $value;
+        unset($data[$key]);
+      }
+    }
+
     if($subscriber === false) {
       $subscriber = static::create();
       $subscriber->hydrate($data);

lib/Router/Subscribers.php

@@ -113,13 +113,19 @@ class Subscribers {
     }
 
     if(!empty($errors)) {
-      wp_send_json(array('errors' => $errors));
+      wp_send_json(array(
+        'result' => false,
+        'errors' => $errors
+      ));
     }
 
     $subscriber = Subscriber::subscribe($data, $segment_ids);
 
+    $result = false;
     if($subscriber === false || !$subscriber->id()) {
       $errors = array_merge($errors, $subscriber->getValidationErrors());
+    } else {
+      $result = true;
     }
 
     if(!empty($errors)) {

views/form/editor.html

@@ -66,7 +66,7 @@
                     type="radio"
                     name="on_success"
                     value="message"
-                    <% if(form.data.settings.on_success is empty or form.data.settings.on_success == 'message') %>
+                    <% if(form.settings.on_success is empty or form.settings.on_success == 'message') %>
                       checked="checked"
                     <% endif %>
                   /><%= __('Show message') %>
@@ -77,15 +77,15 @@
                     type="radio"
                     name="on_success"
                     value="page"
-                    <% if(form.data.settings.on_success == 'page') %>
+                    <% if(form.settings.on_success == 'page') %>
                       checked="checked"
                     <% endif %>
                   /><%= __('Go to page') %>
                 </label>
               </p>
               <!-- default success message -->
-              <% if form.data.settings.success_message %>
+              <% if form.settings.success_message %>
-                <% set success_message = form.data.settings.success_message %>
+                <% set success_message = form.settings.success_message %>
               <% else %>
                 <% set success_message = __('Check your inbox now to confirm your subscription.') %>
               <% endif %>
@@ -103,7 +103,7 @@
                 <select name="success_page">
                   <% for page in pages %>
                     <option value="<%= page.id %>"
-                      <%- if form.data.settings.success_page != page.id %>
+                      <%- if form.settings.success_page == page.id %>
                         <%=- ' selected="selected"' %>
                       <%- endif %>><%= page.title %></option>
                   <% endfor %>
@@ -445,6 +445,7 @@
               return false;
             }
 
+            if(callback !== false) {
               var message = null;
 
               if(response.is_widget === true) {
@@ -465,8 +466,10 @@
               if(callback !== undefined) {
                 callback();
               }
+            }
           });
         }
+        window.mailpoet_form_save = mailpoet_form_save;
 
         // toolbar: on success toggle
         $(document).on('change', 'input[name="on_success"]', toggleOnSuccessOptions);
@@ -506,7 +509,7 @@
           // open popup
           MailPoet.Modal.popup({
             title: "<%= __('Add new field') %>",
-            template: $('#form_template_field_new').html()
+            template: $('#form_template_field_form').html()
           });
 
           return false;
@@ -524,7 +527,7 @@
             if(response.result !== false) {
               MailPoet.Modal.popup({
                 title: "<%= __('Edit field') %>",
-                template: $('#form_template_field_new').html(),
+                template: $('#form_template_field_form').html(),
                 data: response
               });
             }
@@ -685,8 +688,8 @@
   ) %>
 
   <!-- custom field: new -->
-  <%= partial('form_template_field_new',
+  <%= partial('form_template_field_form',
-    'form/templates/settings/field_new.hbs'
+    'form/templates/settings/field_form.hbs'
   ) %>
 
   <!-- form preview -->

views/form/templates/settings/field.hbs

@@ -6,7 +6,7 @@
   {{#ifCond type '==' 'input'}}
     {{> _settings_label }}
     {{> _settings_label_within }}
-    {{#ifCond field 'in' 'first_name,last_name' }}
+    {{#ifCond id 'in' 'first_name,last_name' }}
       {{> _settings_required }}
     {{/ifCond}}
   {{/ifCond}}

views/form/templates/settings/field_form.hbs

@@ -78,7 +78,16 @@
           data: data
         }).done(function(response) {
           if(response.result === true) {
+            // close popup
+            MailPoet.Modal.close();
+
+            if(WysijaForm.updateBlock(response.field) === true) {
+              // trigger save, if a block has been updated
+              mailpoet_form_save(false);
+            }
+
             mailpoet_form_fields();
+
             if(data.id) {
               MailPoet.Notice.success(
                 "<%= __('Updated custom field “"+data.name+"“') %>"
@@ -88,9 +97,6 @@
                 "<%= __('Added custom field “"+data.name+"“') %>"
               );
             }
-
-            // close popup
-            MailPoet.Modal.success();
           } else {
             if(response.errors.length > 0) {
               $(response.errors).each(function(i, error) {

views/form/templates/settings/segment_selection.hbs

@@ -20,7 +20,6 @@
       mailpoet_segment_selection_render();
 
       setInputNames();
-      setupSortableSegments();
 
       // add segment
       $('.mailpoet_segment_add').on('click', function() {
@@ -125,6 +124,7 @@
         $(item).find('.mailpoet_segment_id').attr('name', 'params[values]['+index+'][id]');
         $(item).find('.mailpoet_segment_name').attr('name', 'params[values]['+index+'][name]');
       });
+      setupSortableSegments();
     }
   });
 <{{!}}/script>

views/form/widget.html

@@ -16,8 +16,6 @@
       class="mailpoet_form mailpoet_form_<%= form_type %>"
       novalidate
     >
-      <div class="mailpoet_message"></div>
-
       <input type="hidden" name="form_id" value="<%= form.id %>" />
 
       <% if not(form.settings.segments_selected_by == 'user') %>
@@ -26,6 +24,8 @@
         <% endfor %>
       <% endif %>
       <%= html | raw %>
+
+      <div class="mailpoet_message"></div>
     </form>
   </div>
   <%= after_widget | raw %>