Merge pull request #150 from alphagov/send-text-flow-revised

Send text flow revised

app/templates/components/file-upload.html

@@ -1,4 +1,4 @@
-{% macro file_upload(field) %}
+{% macro file_upload(field, button_text="Choose file") %}
   <div class="form-group{% if field.errors %} error{% endif %}" data-module="file-upload">
     <label class="file-upload-label" for="{{ field.name }}">
       {{ field.label }}
@@ -17,7 +17,7 @@
       'class': 'file-upload-field'
     }) }}
     <label class="file-upload-button" for="{{ field.name }}">
-      Choose file
+      {{ button_text }}
     </label>
     <label class="file-upload-filename" for="{{ field.name }}"></label>
   </div>

app/templates/components/table.html

@@ -25,19 +25,21 @@
 {% macro list_table(items, caption='', empty_message='', field_headings=[], field_headings_visible=True, caption_visible=True) -%}
 
   {% set parent_caller = caller %}
-  {% if items %}
-    {% call mapping_table(caption, field_headings, field_headings_visible, caption_visible) %}
-      {% for item in items %}
-        {% call row() %}
-          {{ parent_caller(item) }}
-        {% endcall %}
-      {% endfor %}
-    {%- endcall %}
-  {% else %}
-    <p class="table-empty-message">
-      {{ empty_message }}
-    </p>
-  {% endif %}
+
+  {% call mapping_table(caption, field_headings, field_headings_visible, caption_visible) %}
+    {% for item in items %}
+      {% call row() %}
+        {{ parent_caller(item) }}
+      {% endcall %}
+    {% endfor %}
+    {% if not items %}
+      {% call row() %}
+        <td class="table-empty-message" colspan="10">
+          {{ empty_message }}
+        </td>
+      {% endcall %}
+    {% endif %}
+  {%- endcall %}
 
 {%- endmacro %}
 

app/templates/flash_messages.html

@@ -4,8 +4,9 @@
     {% for category, message in messages %}
       {{ banner(
         message,
-        'default' if category == 'default' else 'dangerous',
-        delete_button="Yes, delete this template" if 'delete' == category else None
+        'default' if category == 'default' or 'default_with_tick' else 'dangerous',
+        delete_button="Yes, delete this template" if 'delete' == category else None,
+        with_tick=True if category == 'default_with_tick' else False
       )}}
     {% endfor %}
   {% endif %}

app/templates/views/add-service.html

@@ -16,7 +16,8 @@ GOV.UK Notify | Set up service
     </h1>
 
     <p>
-      Users will see your service name:
+      Users will see your service name when they receive messages through GOV.UK
+      Notify:
     </p>
 
     <ul class="list-bullet bottom-gutter">
@@ -30,7 +31,7 @@ GOV.UK Notify | Set up service
     </ul>
 
     <form autocomplete="off" method="post">
-      {{ textbox(form.name) }}
+      {{ textbox(form.name, hint="You can change this later") }}
       {{ page_footer('Continue') }}
     </form>
 

app/templates/views/check-sms.html

@@ -1,6 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/sms-message.html" import sms_message %}
-{% from "components/table.html" import table, field %}
+{% from "components/table.html" import list_table, field %}
 {% from "components/placeholder.html" import placeholder %}
 {% from "components/page-footer.html" import page_footer %}
 
@@ -10,7 +10,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Send text messages</h1>
+  <h1 class="heading-large">Check and confirm</h1>
 
   {% if upload_result.rejects %}
     <h3 class="heading-small">The following numbers are invalid</h3>
@@ -21,44 +21,29 @@
 
   {% else %}
 
-    <h2 class="heading-medium">Check and confirm</h2>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        {{ sms_message(
+          message_template|replace_placeholders(upload_result.valid[0])
+        )}}
+      </div>
+    </div>
+
     <form method="POST" enctype="multipart/form-data">
-
-      {{ page_footer(
-          button_text = "Send {} text messages".format(upload_result.valid|count),
-          back_link = url_for(".send_sms", service_id=service_id, template_id=template_id)
-      )}}
-
-      {% if upload_result.valid | count > 6 %}
-        <h3 class="heading-small">First three message in file</h3>
-          {% for recipient in upload_result.valid[:3] %}
-             {{ sms_message(message_template|replace_placeholders(
-                    recipient),
-                    '{}'.format(recipient['phone'])
-            )}}
-          {% endfor %}
-          <h3 class="heading-small">Last three messages in file</h3>
-          {% for recipient in upload_result.valid[-3:] %}
-            {{ sms_message(message_template|replace_placeholders(
-                  recipient),
-                  '{}'.format(recipient['phone'])
-            )}}
-          {% endfor %}
-      {% else %}
-        <h3 class="heading-small">All messages in file</h3>
-          {% for recipient in upload_result.valid %}
-             {{ sms_message(message_template|replace_placeholders(
-                    recipient),
-                    '{}'.format(recipient['phone'])
-            )}}
-          {% endfor %}
-      {% endif %}
-
-      {{ page_footer(
-          button_text = "Send {} text messages".format(upload_result.valid|count),
-          back_link = url_for(".send_sms", service_id=service_id, template_id=template_id)
-      )}}
-
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+      <input type="submit" class="button" value="{{ "Send {} text message{}".format(upload_result.valid|count, '' if upload_result.valid|count == 1 else 's') }}" />
+      <a href="{{url_for('.send_sms', service_id=service_id, template_id=template_id)}}" class="page-footer-back-link">Back</a>
     </form>
+
+    {% call(item) list_table(
+      upload_result.valid,
+      caption=original_file_name,
+      field_headings=['Phone number']
+    ) %}
+      {% call field() %}
+        {{ item.phone }}
+      {% endcall %}
+    {% endcall %}
+
   {% endif %}
 {% endblock %}

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

@@ -8,20 +8,24 @@
 {% endblock %}
 
 {% block maincolumn_content %}
+
+  <h1 class="heading-large">Send text messages</h1>
+
   <form method="POST" enctype="multipart/form-data">
 
-    <h1 class="heading-large">Send text messages</h1>
-
     {% if templates %}
-      <fieldset class='form-group'>
+      <div class="grid-row">
         {% for template in templates %}
-          {{ sms_message(
-            template.content, name=template.name, input_name='template', input_index=template.id
-          ) }}
+          <div class="column-two-thirds">
+            {{ sms_message(template.content, name=template.name) }}
+          </div>
+          <div class="column-one-third">
+            <div class="sms-message-use-link">
+              <a href="{{ url_for(".send_sms", service_id=service_id, template_id=template.id) }}">Use this template</a>
+            </div>
+          </div>
         {% endfor %}
-      </fieldset>
-
-    {{ page_footer("Continue") }}
+      </div>
     {% else %}
       {{ banner(
         '<a href="{}">Add a text message template</a> to start sending messages'.format(

app/templates/views/documentation.html

@@ -8,13 +8,13 @@ GOV.UK Notify | API keys and documentation
 
 {% block maincolumn_content %}
 
+<h1 class="heading-large">
+    Developer documentation
+</h1>
+
 <div class="grid-row">
     <div class="column-two-thirds">
 
-        <h1 class="heading-large">
-            Developer documentation
-        </h1>
-
         <h2 class="heading-medium">
             How to integrate GOV.UK Notify into your service
         </h2>

app/templates/views/job.html

@@ -2,9 +2,10 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading %}
 {% from "components/big-number.html" import big_number %}
 {% from "components/banner.html" import banner %}
+{% from "components/sms-message.html" import sms_message %}
 
 {% block page_title %}
-GOV.UK Notify | Notifications activity
+  GOV.UK Notify | Notifications activity
 {% endblock %}
 
 {% block maincolumn_content %}
@@ -13,55 +14,66 @@ GOV.UK Notify | Notifications activity
       {{ uploaded_file_name }}
     </h1>
 
-    <p>
-      {{ banner(flash_message, with_tick=True) }}
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        {{ sms_message(
+          template['content'],
+        )}}
+      </div>
+    </div>
+
+    <p class='heading-small'>
+      Started {{ uploaded_file_time|format_datetime }}
     </p>
 
     <ul class="grid-row job-totals">
-      <li class="column-one-third">
+      <li class="column-one-quarter">
         {{ big_number(
-          counts.total,
-          'text message' if 1 == counts.total else 'text messages'
+          1, 'queued'
         )}}
       </li>
-      <li class="column-one-third">
+      <li class="column-one-quarter">
+        {{ big_number(
+          0, 'sent'
+        )}}
+      </li>
+      <li class="column-one-quarter">
         {{ big_number(
           counts.failed,
-          'failed delivery' if 1 == counts.failed else 'failed deliveries'
+          'failed'
         )}}
       </li>
-      <li class="column-one-third">
+      <li class="column-one-quarter">
         {{ big_number(
           cost, 'total cost'
         )}}
       </li>
     </ul>
 
-    <p>
-      Sent with template <a href="{{ url_for('.edit_service_template', service_id=service_id, template_id=template_used) }}">{{ template_used }}</a> on {{ uploaded_file_time | format_datetime}}
-    </p>
-
     {% call(item) list_table(
-      messages,
-      caption='Messages',
+      [
+        {'phone': '+447700 900995', 'template': template['name'], 'status': 'queued'}
+      ],
+      caption=uploaded_file_name,
       caption_visible=False,
+      empty_message="Messages go here",
       field_headings=[
-        'To',
-        'Message',
-        right_aligned_field_heading('Delivery status')
+        'Recipient',
+        'Template',
+        right_aligned_field_heading('Status')
       ]
     ) %}
       {% call field() %}
-        <a href="{{ url_for('.view_notification', service_id=service_id, job_id=456, notification_id=item.id) }}">{{item.phone}}</a>
+        {{item.phone}}
       {% endcall %}
       {% call field() %}
-        <a href="{{ url_for('.view_notification', service_id=service_id, job_id=456, notification_id=item.id) }}">{{item.message[:50]}}…</a>
+        {{item.template}}
       {% endcall %}
       {% call field(
         align='right',
         status='error' if item.status == 'Failed' else 'default'
       ) %}
-        {{ item.status }}&emsp;{{ item.time }}
+        {{ item.status }}
       {% endcall %}
     {% endcall %}
 

app/templates/views/manage-templates.html

@@ -11,13 +11,16 @@ GOV.UK Notify | Manage templates
 
     <h1 class="heading-large">Templates</h1>
 
-    {{ banner(
-      '<a href="{}">Try sending a text message</a>'.format(
-        url_for(".choose_sms_template", service_id=service_id)
-      )|safe,
-      subhead='Next step',
-      type="tip"
-    )}}
+
+    {% if not has_jobs %}
+      {{ banner(
+        '<a href="{}">Send yourself a text message</a>'.format(
+          url_for(".choose_sms_template", service_id=service_id)
+        )|safe,
+        subhead='Next step',
+        type="tip"
+      )}}
+    {% endif %}
 
     <div class="grid-row">
       <div class="column-two-thirds">

app/templates/views/send-sms.html

@@ -8,37 +8,28 @@
 {% endblock %}
 
 {% block maincolumn_content %}
+
+  <h1 class="heading-large">Send text messages</h1>
+
   <form method="POST" enctype="multipart/form-data">
 
-    <h1 class="heading-large">Send text messages</h1>
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        {{ sms_message(template.content) }}
+      </div>
+    </div>
 
-    {{ banner(
-      'You can only send notifications to yourself',
-      subhead='Trial mode',
-      type='info'
-    ) }}
-
-    {{ sms_message(
-      template.content, name='Preview'
-    ) }}
+    {{file_upload(form.file, button_text='Choose a CSV file')}}
 
     {{ banner(
       'You can only send messages to yourself until you <a href="{}">request to go live</a>'.format(
         url_for('.service_request_to_go_live', service_id=service_id)
       )|safe,
-      type='info'
+      type='important'
     ) }}
 
-    {{file_upload(form.file)}}
-
-    <p>
-      <a href="#">Download an example CSV</a> to test with.
-    </p>
-
     {{ page_footer(
-      "Continue",
-      back_link=url_for(".choose_sms_template", service_id=service_id),
-      back_link_text="Back to templates"
+      "Continue to preview"
     ) }}
 
   </form>

app/templates/views/service_dashboard.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/table.html" import list_table, field %}
+{% from "components/table.html" import list_table, field, right_aligned_field_heading %}
 {% from "components/big-number.html" import big_number %}
 
 {% block page_title %}
@@ -23,41 +23,38 @@
       </li>
     </ul>
 
-    {% if not template_count %}
+    {% if not jobs %}
       {{ banner(
-        '<a href="{}">Add a text message template</a>'.format(
-          url_for(".add_service_template", service_id=service_id)
+        """
+          <ol>
+            <li>
+              <a href='{}'>Add a template</a>
+            </li>
+            <li>
+              <a href='{}'>Send yourself a text message</a>
+            </li>
+          </ol>
+        """.format(
+          url_for(".add_service_template", service_id=service_id),
+          url_for(".choose_sms_template", service_id=service_id)
         )|safe,
         subhead='Get started',
         type="tip"
       )}}
     {% else %}
-      {{ banner(
-        '<a href="{}">Try sending a text message</a>'.format(
-          url_for(".choose_sms_template", service_id=service_id)
-        )|safe,
-        subhead='Next step',
-        type="tip"
-      )}}
-    {% endif %}
-
-    {% if [] %}
       {% call(item) list_table(
-        [],
+        jobs,
         caption="Recent text messages",
         empty_message='You haven’t sent any text messages yet',
-        field_headings=['Job', 'File', 'Time', 'Status']
+        field_headings=['Job', 'Created', right_aligned_field_heading('Status')]
       ) %}
         {% call field() %}
-          <a href="{{ url_for('.view_job', service_id=service_id, job_id=456) }}">{{ item.file }}</a>
+          <a href="{{ url_for('.view_job', service_id=service_id, job_id=item.id) }}">{{ item.original_file_name }}</a>
         {% endcall %}
         {% call field() %}
-          <a href="{{ url_for('.view_job', service_id=service_id, job_id=456) }}">{{ item.job }}</a>
+          {{ item.created_at|format_datetime }}
         {% endcall %}
-        {% call field() %}
-          {{ item.time }}
-        {% endcall %}
-        {% call field() %}
+        {% call field(align='right') %}
           {{ item.status }}
         {% endcall %}
       {% endcall %}

app/templates/withnav_template.html

@@ -5,7 +5,7 @@
     <div class="column-one-third">
       {% include "main_nav.html" %}
     </div>
-    <div class="column-two-thirds">
+    <div class="column-two-thirds column-main">
       {% include 'flash_messages.html' %}
       {% block maincolumn_content %}{% endblock %}
     </div>