Try out previewing messages

app/__init__.py

@@ -46,6 +46,7 @@ def create_app(config_name):
     admin_api_client.init_app(application)
 
     application.add_template_filter(placeholders)
+    application.add_template_filter(replace_placeholders)
 
     return application
 
@@ -166,3 +167,13 @@ def placeholders(value):
         lambda match: "<span class='placeholder'>{}</span>".format(match.group(1)),
         value
     ))
+
+
+def replace_placeholders(template, values):
+    if not template:
+        return template
+    return Markup(re.sub(
+        r"\(\(([^\)]+)\)\)",  # anything that looks like ((registration number))
+        lambda match: values.get(match.group(1), ''),
+        template
+    ))

app/assets/stylesheets/components/sms-message.scss

@@ -38,4 +38,10 @@
     white-space: normal;
   }
 
+  &-recipient {
+    @include copy-16;
+    color: $secondary-text-colour;
+    margin: 0;
+  }
+
 }

app/assets/stylesheets/main.scss

@@ -29,10 +29,9 @@
 
 // Extra CSS for this application
 @import "components/template-picker";
-@import "components/sms-message";
 @import "components/placeholder";
+@import "components/sms-message";
 @import "components/button";
 @import "components/table";
-
 // TODO: break this up into components
 @import "app";

app/main/views/sms.py

@@ -36,11 +36,11 @@ def checksms():
         return render_template(
             'views/check-sms.html',
             recipients=[
-                {'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '24 December 2015'},
+                {'phone': "+44 7700 900989", 'registration number': 'LC12 BFL', 'date': '24 December 2015'},
-                {'phone': "+44 7815838437", 'registration': 'DU04 AOM', 'date': '25 December 2015'},
+                {'phone': "+44 7700 900479", 'registration number': 'DU04 AOM', 'date': '25 December 2015'},
-                {'phone': "+44 7815838437", 'registration': 'M91 MJB', 'date': '26 December 2015'},
+                {'phone': "+44 7700 900964", 'registration number': 'M91 MJB', 'date': '26 December 2015'},
-                {'phone': "+44 7815838437", 'registration': 'Y249 NPU', 'date': '31 December 2015'},
+                {'phone': "+44 7700 900703", 'registration number': 'Y249 NPU', 'date': '31 December 2015'},
-                {'phone': "+44 7815838437", 'registration': 'LG55 UGB', 'date': '1 January 2016'}
+                {'phone': "+44 7700 900730", 'registration number': 'LG55 UGB', 'date': '1 January 2016'}
             ],
             message_template="""
                 Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)).

app/templates/components/sms-message.html

@@ -1,4 +1,9 @@
-{% macro sms_message(body) %}
+{% macro sms_message(body, recipient) %}
+  {% if recipient %}
+    <p class="sms-message-recipient">
+      {{ recipient }}
+    </p>
+  {% endif %}
   <div class="sms-message">
     <div class="sms-message-wrapper">
       {{ body|placeholders }}

app/templates/views/check-sms.html

@@ -23,6 +23,14 @@
 					<a class="button-secondary" role="button" href="{{ url_for(".sendsms") }}">Back</a>
 				</form>
 	  	</p>
+
+			{% for recipient in recipients %}
+				{{ sms_message(
+					message_template|replace_placeholders(recipient),
+					recipient['phone']
+				) }}
+			{% endfor %}
+
 		</div>
 	</div>
 
@@ -33,9 +41,9 @@
 			'Recipient', placeholder('registration number'), placeholder('date')
 		]
 	) %}
-		{% call field() %}{{item.phone}}{% endcall %}
+		{% call field() %}{{item['phone']}}{% endcall %}
-		{% call field() %}{{item.registration}}{% endcall %}
+		{% call field() %}{{item['registration number']}}{% endcall %}
-		{% call field() %}{{item.date}}{% endcall %}
+		{% call field() %}{{item['date']}}{% endcall %}
 	{% endcall %}
 
 {% endblock %}