From c006b8748cac19380b7b640c8e5e89ee352ac65a Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 12 Jul 2016 12:48:09 +0100
Subject: [PATCH] Add conditional placeholder detection

Implements: https://github.com/alphagov/notifications-utils/pull/51

Copies the same regex.

Adds some CSS to display conditional placeholders differently to
normal placeholders (vertical rather that curved right-hand edge).
---
 app/assets/javascripts/highlightTags.js          |  6 ++++--
 .../stylesheets/components/placeholder.scss      | 16 ++++++++++++++++
 app/templates/views/check.html                   |  4 ++--
 requirements.txt                                 |  2 +-
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js
index 97ab56bfb..896c83358 100644
--- a/app/assets/javascripts/highlightTags.js
+++ b/app/assets/javascripts/highlightTags.js
@@ -5,7 +5,7 @@
     !('oninput' in document.createElement('input'))
   ) return;
 
-  const tagPattern = /\(\([^\)\(]+\)\)/g;
+  const tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
 
   Modules.HighlightTags = function() {
 
@@ -43,7 +43,9 @@
 
     this.replacePlaceholders = () => this.$background.html(
       this.escapedMessage().replace(
-        tagPattern, match => `<span class='placeholder'>${match}</span>`
+        tagPattern, (match, name, separator, value) => value && separator ?
+          `<span class='placeholder-conditional'>((${name}??</span>${value}))` :
+          `<span class='placeholder'>((${name}${value}))</span>`
       )
     );
 
diff --git a/app/assets/stylesheets/components/placeholder.scss b/app/assets/stylesheets/components/placeholder.scss
index e4b6b9fb9..2d76d8ff0 100644
--- a/app/assets/stylesheets/components/placeholder.scss
+++ b/app/assets/stylesheets/components/placeholder.scss
@@ -22,3 +22,19 @@
   border-radius: 1px;
   box-shadow: inset 0 -2px 0 0 $white, inset 0 2px 0 0 $white;
 }
+
+.placeholder-conditional {
+
+  @extend %placeholder;
+  border-radius: 0;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  box-shadow: inset 9px 0 0 0 $white, inset -17px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
+
+  .sms-message-wrapper & {
+    box-shadow: inset 9px 0 0 0 $panel-colour, inset -17px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
+  }
+
+}
diff --git a/app/templates/views/check.html b/app/templates/views/check.html
index ab638153b..5c5c4db5b 100644
--- a/app/templates/views/check.html
+++ b/app/templates/views/check.html
@@ -144,7 +144,7 @@
   {% if 'email' == template.template_type %}
     {{ email_message(
       template.formatted_subject_as_markup if errors else template.replaced_subject,
-      template.formatted_as_markup if errors else template.replaced,
+      template.formatted_as_markup if errors else template.replaced|safe,
       from_address='{}@notifications.service.gov.uk'.format(current_service.email_from),
       from_name=current_service.name,
       recipient=first_recipient,
@@ -154,7 +154,7 @@
     <div class="grid-row">
       <div class="column-two-thirds">
         {{ sms_message(
-          template.formatted_as_markup if errors else template.replaced,
+          template.formatted_as_markup if errors else template.replaced|safe,
           recipient=first_recipient,
           show_placeholder_for_recipient=errors
         )}}
diff --git a/requirements.txt b/requirements.txt
index 72d032994..20ab05704 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -18,4 +18,4 @@ pytz==2016.4
 
 git+https://github.com/alphagov/notifications-python-client.git@1.0.0#egg=notifications-python-client==1.0.0
 
-git+https://github.com/alphagov/notifications-utils.git@8.3.0#egg=notifications-utils==8.3.0
+git+https://github.com/alphagov/notifications-utils.git@8.4.1#egg=notifications-utils==8.4.1