Add recipient to message previews

When previewing a template on the send page, having the recipient appear
as a placeholder should help reinforce the relationship between the
columns in the CSV and the placeholders.

Then, when previewing a message, having the template populated with the
first recipient’s email address/phone number should reinforce that
relationship again.

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

@@ -31,7 +31,7 @@
 .sms-message-recipient {
   @include copy-19;
   color: $secondary-text-colour;
-  margin: -20px 0 $gutter 0;
+  margin: 10px 0 5px 0;
 }
 
 .sms-message-name {

app/main/views/send.py

@@ -234,12 +234,14 @@ def check_messages(service_id, template_type, upload_id):
 
     with suppress(StopIteration):
         template.values = next(recipients.rows)
+        first_recipient = template.values.get(recipients.recipient_column_header, '')
 
     session['upload_data']['notification_count'] = len(list(recipients.rows))
     session['upload_data']['valid'] = not recipients.has_errors
     return render_template(
         'views/check.html',
         recipients=recipients,
+        first_recipient=first_recipient,
         template=template,
         page_heading=get_page_headings(template.template_type),
         errors=get_errors_for_csv(recipients, template.template_type),

app/templates/components/email-message.html

@@ -1,4 +1,13 @@
-{% macro email_message(subject, body, name=None, edit_link=None, from_name=None, from_address=None) %}
+{% macro email_message(
+  subject,
+  body,
+  name=None,
+  edit_link=None,
+  from_name=None,
+  from_address=None,
+  recipient=None,
+  show_placeholder_for_recipient=False
+) %}
   {% if name %}
     <h3 class="email-message-name">
       {% if edit_link %}
@@ -20,6 +29,20 @@
               </td>
             </tr>
           {% endif %}
+          {% if recipient is not none %}
+            <tr>
+              <th>To</th>
+              <td>
+                {% if show_placeholder_for_recipient %}
+                  <span class="placeholder">
+                    email address
+                  </span>
+                {% else %}
+                  {{ recipient }}
+                {% endif %}
+              </td>
+            </tr>
+          {% endif %}
           {% if subject %}
             <tr class="email-message-meta">
               <th>Subject</th>

app/templates/components/sms-message.html

@@ -1,4 +1,12 @@
-{% macro sms_message(body, recipient=None, name=None, id=None, edit_link=None, from=None) %}
+{% macro sms_message(
+  body,
+  recipient=None,
+  name=None,
+  id=None,
+  edit_link=None,
+  from=None,
+  show_placeholder_for_recipient=False
+) %}
   {% if name %}
     <h3 class="sms-message-name">
       {% if edit_link %}
@@ -8,6 +16,18 @@
       {% endif %}
     </h3>
   {% endif %}
+  {% if recipient is not none %}
+    <p class="sms-message-recipient">
+      To: 
+      {% if show_placeholder_for_recipient %}
+        <span class="placeholder">
+          phone number
+        </span>
+      {% else %}
+        {{ recipient }}
+      {% endif %}
+    </p>
+  {% endif %}
   <div class="sms-message-wrapper{% if input_name %}-with-radio{% endif %}">
     {% if from %}
       <span class="sms-message-from">
@@ -16,11 +36,6 @@
     {% endif %}
     {{ body|nl2br }}
   </div>
-  {% if recipient %}
-    <p class="sms-message-recipient">
-      {{ recipient }}
-    </p>
-  {% endif %}
   {% if id %}
     <p class="sms-message-recipient">
       Template ID: {{ id }}

app/templates/views/check.html

@@ -77,13 +77,17 @@
       template.formatted_subject_as_markup if errors else template.replaced_subject,
       template.formatted_as_markup if errors else template.replaced,
       from_address='{}@notifications.service.gov.uk'.format(current_service.email_from),
-      from_name=current_service.name
+      from_name=current_service.name,
+      recipient=first_recipient,
+      show_placeholder_for_recipient=errors
     )}}
   {% elif 'sms' == template.template_type %}
     <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,
+          recipient=first_recipient,
+          show_placeholder_for_recipient=errors
         )}}
       </div>
     </div>