Enhance the ‘how to do placeholders’ hint

This commit makes the ‘how to do placeholders’ box part of the tour,
with the same blue background.

It also adds some Javascript enhancement so that:
- it responds to the contents of the message template
- has a ‘show me’ link which inserts ‘Dear ((name))’ into the template
  contents textbox

We’ve found that this has helped people understnad what placeholders
are, and how to do them.

app/assets/javascripts/highlightTags.js

@@ -7,6 +7,25 @@
 
   const tagPattern = /\(\([^\)\(]+\)\)/g;
 
+  const getPlaceholderHint = function(placeholders) {
+    if (0 === placeholders.length) {
+      return `
+        <p>Add fields using ((double brackets))</p>
+        <span class='placeholder-hint-action' tabindex='0' role='button'>Show me how</span>
+      `;
+    }
+    if (1 === placeholders.length) {
+        return `
+          <p>Add fields using ((double brackets))</p>
+          <p>You’ll populate the ‘${placeholders[0]}’ field when you send messages using this template</p>
+        `;
+    }    
+    return `
+      <p>Add fields using ((double brackets))</p>
+      <p>You’ll populate your fields when you send some messages</p>
+    `;
+  };
+
   Modules.HighlightTags = function() {
 
     this.start = function(textarea) {
@@ -22,6 +41,9 @@
         `))
         .on("input", this.update);
 
+      this.$placeHolderHint = $('#placeholder-hint')
+        .on("click", ".placeholder-hint-action", this.demo);
+
       this.initialHeight = this.$textbox.height();
 
       this.$backgroundMaskForeground.width(
@@ -40,14 +62,30 @@
       )
     );
 
+    this.escapedMessage = () => $('<div/>').text(this.$textbox.val()).html();
+
+    this.listPlaceholders = () => this.escapedMessage().match(tagPattern) || [];
+
+    this.listPlaceholdersWithoutBrackets = () => this.listPlaceholders().map(
+      placeholder => placeholder.substring(2, placeholder.length - 2)
+    );
+
     this.replacePlaceholders = () => this.$backgroundMaskForeground.html(
-      $('<div/>').text(this.$textbox.val()).html().replace(
+      this.escapedMessage().replace(
         tagPattern, match => `<span class='tag'>${match}</span>`
       )
     );
 
+    this.hint = () => this.$placeHolderHint.html(
+      getPlaceholderHint(this.listPlaceholdersWithoutBrackets())
+    );
+
     this.update = () => (
-      this.replacePlaceholders() && this.resize()
+      this.replacePlaceholders() && this.resize() && this.hint()
+    );
+
+    this.demo = () => (
+      this.$textbox.val((i, current) => `Dear ((name)), ${current}`) && this.update()
     );
 
   };

app/assets/stylesheets/components/banner.scss

@@ -80,6 +80,11 @@
     list-style-type: decimal;
   }
 
+  p {
+    @include core-19;
+    margin: 0 0 10px 0;
+  }
+
 }
 
 .banner-tip-with-tick {

app/assets/stylesheets/components/textbox.scss

@@ -1,6 +1,6 @@
 .textbox-highlight {
 
-  $tag-background: rgba($light-blue, 0.7);
+  $tag-background: rgba($light-blue, 0.6);
 
   &-wrapper {
     position: relative;

app/assets/stylesheets/views/edit-template.scss

@@ -1,9 +1,23 @@
-.edit-template {
+.placeholder-hint {
 
-  &-placeholder-hint {
-    display: block;
-    padding-top: 20px;
-    //color: $secondary-text-colour;
+  display: block;
+
+  &-title {
+    @include bold-19;
   }
 
+  &-action {
+
+    @include bold-19;
+    display: inline-block;
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:active {
+      background: $yellow-25;
+      outline: none;
+    }
+
+  }
+  
 }

app/main/forms.py

@@ -202,7 +202,7 @@ class SMSTemplateForm(Form):
         validators=[DataRequired(message="Template name cannot be empty")])
 
     template_content = TextAreaField(
-        u'Message',
+        u'Message content',
         validators=[DataRequired(message="Template content cannot be empty")])
 
 

app/templates/views/edit-email-template.html

@@ -20,23 +20,20 @@
         </div>
         <div class="column-two-thirds">
           {{ textbox(form.template_content, highlight_tags=True, width='1-1') }}
+          {{ page_footer(
+            'Save',
+            delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
+            delete_link_text='Delete this template'
+          ) }}
         </div>
         <div class="column-one-third">
-          <label for='template_content' class='edit-template-placeholder-hint'>
-            <p>
-              Add personalisation with double brackets, eg Dear ((name))
-            </p>
-            <p>
-              You’ll fill in the real data when you send a message.
-            </p>
+          <label for='template_content' class='placeholder-hint'>
+            <div class="banner-mode" id="placeholder-hint" aria-live="polite">
+              <p>Add fields using ((double brackets))</p>
+            </div>
           </label>
         </div>
       </div>
-      {{ page_footer(
-        'Save',
-        delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
-        delete_link_text='Delete this template'
-      ) }}
     </form>
 
 

app/templates/views/edit-sms-template.html

@@ -19,23 +19,20 @@
         </div>
         <div class="column-two-thirds">
           {{ textbox(form.template_content, highlight_tags=True, width='1-1') }}
+          {{ page_footer(
+            'Save',
+            delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
+            delete_link_text='Delete this template'
+          ) }}
         </div>
         <div class="column-one-third">
-          <label for='template_content' class='edit-template-placeholder-hint'>
-            <p>
-              Add personalisation with double brackets, eg Dear ((name))
-            </p>
-            <p>
-              You'll have to add the real data when you send a message.
-            </p>
+          <label for='template_content' class='placeholder-hint'>
+            <div class="banner-mode" id="placeholder-hint" aria-live="polite">
+              <p>Add fields using ((double brackets))</p>
+            </div>
           </label>
         </div>
       </div>
-      {{ page_footer(
-        'Save',
-        delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
-        delete_link_text='Delete this template'
-      ) }}
     </form>