From 0cce5db3d1a801eb3ad7826fcd7738a149bdbc4b Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 26 Feb 2016 16:22:07 +0000
Subject: [PATCH] Give users better guidance about CSV files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit adds some guidance on the ‘Add recipients’ page about what should
be in the CSV file. The guidance is contextual to the template, and based on
the problems that we saw users having yesterday.
---
 app/assets/stylesheets/_grids.scss |  4 ++++
 app/templates/views/send.html      | 28 +++++++++++++++++-----------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/_grids.scss b/app/assets/stylesheets/_grids.scss
index 7f8eb724f..5e8643173 100644
--- a/app/assets/stylesheets/_grids.scss
+++ b/app/assets/stylesheets/_grids.scss
@@ -15,3 +15,7 @@
   margin-bottom: $gutter;
   clear: both;
 }
+
+.bottom-gutter-2-3 {
+  margin-bottom: $gutter * 2/3;
+}
diff --git a/app/templates/views/send.html b/app/templates/views/send.html
index 25eda7364..7b0dcf027 100644
--- a/app/templates/views/send.html
+++ b/app/templates/views/send.html
@@ -30,19 +30,25 @@
 
   <div class="grid-row">
     <div class="column-two-thirds">
-      {{ banner(
-        'You can upload real data, but we’ll only send to your mobile number until you <a href="{}">request to go live</a>'.format(
-          url_for('.service_request_to_go_live', service_id=service_id)
-        )|safe,
-        'info'
-      )}}
+      <p>
+        Add recipients by uploading a .csv file with
+        {{ template.placeholders|length + 1 }}
+        {% if template.placeholders %}
+          columns:
+        {% else %}
+          column:
+        {% endif %}
+      </p>
+      <p class="bottom-gutter-2-3">
+        <span class='placeholder'>to</span>
+        {{ template.placeholders_as_markup|join(" ") }}
+      </p>
+      <p>
+        <a href="{{ url_for('.get_example_csv', service_id=service_id, template_id=template.id) }}">Download an example</a>
+      </p>
     </div>
   </div>
 
-  {{file_upload(form.file, button_text='Upload a CSV file')}}
-
-  <p>
-    <a href="{{ url_for('.get_example_csv', service_id=service_id, template_id=template.id) }}">Download an example CSV file</a>
-  </p>
+  {{file_upload(form.file, button_text='Upload your CSV file')}}
 
 {% endblock %}