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

Send text flow revised

app/assets/stylesheets/app.scss

@@ -38,3 +38,11 @@ a:visited {
     width: 5em;
   }
 }
+
+.column-main {
+
+  > .heading-large {
+    margin-top: $gutter;
+  }
+
+}

app/assets/stylesheets/components/banner.scss

@@ -10,10 +10,12 @@
   margin: $gutter-half 0 $gutter 0;
   text-align: left;
   position: relative;
+  clear: both;
 
 }
 
-.banner-with-tick {
+.banner-with-tick,
+.banner-default-with-tick {
 
   @extend %banner;
   padding: $gutter-half ($gutter + $gutter-half);
@@ -75,4 +77,19 @@
     text-decoration: underline;
   }
 
+  ol {
+    list-style-type: decimal;
+  }
+
+}
+
+.banner-important {
+  @extend %banner;
+  background: $white;
+  color: $text-colour;
+  background-image: file-url("icon-important-2x.png");
+  background-size: 34px 34px;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  padding: 7px 0 5px 50px;
 }

app/assets/stylesheets/components/file-upload.scss

@@ -29,6 +29,7 @@
     &-filename {
       display: inline-block;
       padding-left: $gutter-half;
+      @include bold-19;
     }
 
   }

app/assets/stylesheets/components/page-footer.scss

@@ -3,8 +3,10 @@
   margin-bottom: 50px;
 
   &-back-link {
-    display: block;
-    margin-top: $gutter;
+    @include button($grey-1);
+    display: inline-block;
+    padding: 0.52632em 0.78947em 0.26316em 0.78947em;
+    margin-left: 10px;
   }
 
   &-delete-link {

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

@@ -24,7 +24,7 @@
 
 .sms-message-name {
   @include bold-19;
-  margin: 30px 0 10px 0;
+  margin: 20px 0 10px 0;
 }
 
 .sms-message-picker {
@@ -61,3 +61,8 @@ label.sms-message-option {
   }
 
 }
+
+.sms-message-use-link {
+  margin-top: 70px;
+  @include bold-19;
+}

app/assets/stylesheets/components/table.scss

@@ -4,6 +4,7 @@
 
 .table-heading {
   text-align: left;
+  margin: 40px 0 5px 0;
 }
 
 %table-field,
@@ -56,7 +57,6 @@
 .table-empty-message {
   @include core-16;
   color: $secondary-text-colour;
-  border-top: 1px solid $border-colour;
   border-bottom: 1px solid $border-colour;
   padding: 0.75em 0 0.5625em 0;
 }

app/assets/stylesheets/main.scss

@@ -1,3 +1,6 @@
+// Path to assets for use with file-url()
+$path: '/static/images/';
+
 // Dependencies from GOV.UK Frontend Toolkit
 // https://github.com/alphagov/govuk_frontend_toolkit/
 @import 'conditionals';

app/main/forms.py

@@ -217,7 +217,7 @@ class ChangePasswordForm(Form):
 
 
 class CsvUploadForm(Form):
-    file = FileField('Upload a CSV file to add your recipients’ details', validators=[DataRequired(
+    file = FileField('Add recipients', validators=[DataRequired(
                      message='Please pick a file'), CsvFileValidator()])
 
 

app/main/views/add_service.py

@@ -10,8 +10,8 @@ from app.main.forms import AddServiceForm
 def add_service():
     form = AddServiceForm(services_dao.find_all_service_names)
     services = services_dao.get_services(current_user.id)
-    if len(services) == 0:
-        heading = 'Set up notifications for your service'
+    if len(services['data']) == 0:
+        heading = 'Which service do you want to set up notifications for?'
     else:
         heading = 'Add a new service'
     if form.validate_on_submit():

app/main/views/dashboard.py

@@ -4,7 +4,7 @@ from app.main import main
 from app.main.dao.services_dao import get_service_by_id
 from app.main.dao import templates_dao
 from client.errors import HTTPError
-from ._jobs import jobs
+from app import job_api_client
 
 
 @main.route("/services/<service_id>/dashboard")
@@ -12,6 +12,7 @@ from ._jobs import jobs
 def service_dashboard(service_id):
     try:
         templates = templates_dao.get_service_templates(service_id)['data']
+        jobs = job_api_client.get_job(service_id)['data']
     except HTTPError as e:
         if e.status_code == 404:
             abort(404)
@@ -27,8 +28,8 @@ def service_dashboard(service_id):
             raise e
     return render_template(
         'views/service_dashboard.html',
-        jobs=jobs,
-        free_text_messages_remaining='25,000',
+        jobs=list(reversed(jobs)),
+        free_text_messages_remaining='250,000',
         spent_this_month='0.00',
         template_count=len(templates),
         service_id=str(service_id))

app/main/views/jobs.py

@@ -11,6 +11,7 @@ from client.errors import HTTPError
 
 from app import job_api_client
 from app.main import main
+from app.main.dao import templates_dao
 
 now = time.strftime('%H:%M')
 
@@ -37,6 +38,7 @@ def view_jobs(service_id):
 def view_job(service_id, job_id):
     try:
         job = job_api_client.get_job(service_id, job_id)['data']
+        template = templates_dao.get_service_template(service_id, job['template'])['data']
         messages = []
         return render_template(
             'views/job.html',
@@ -53,8 +55,7 @@ def view_job(service_id, job_id):
             cost=u'£0.00',
             uploaded_file_name=job['original_file_name'],
             uploaded_file_time=job['created_at'],
-            template_used=job['template'],
-            flash_message="We’ve accepted {} for processing".format(job['original_file_name']),
+            template=template,
             service_id=service_id
         )
     except HTTPError as e:

app/main/views/sms.py

@@ -32,13 +32,8 @@ from app.main.utils import (
 )
 
 
-@main.route("/services/<service_id>/sms/send", methods=['GET', 'POST'])
+@main.route("/services/<service_id>/sms/send", methods=['GET'])
 def choose_sms_template(service_id):
-    if request.method == 'POST':
-        return redirect(url_for('.send_sms',
-                                service_id=service_id,
-                                template_id=request.form.get('template')))
-
     try:
         templates = templates_dao.get_service_templates(service_id)['data']
     except HTTPError as e:
@@ -103,6 +98,7 @@ def check_sms(service_id, upload_id):
             'views/check-sms.html',
             upload_result=upload_result,
             message_template=template['content'],
+            original_file_name=original_file_name,
             template_id=template_id,
             service_id=service_id
         )

app/main/views/templates.py

@@ -3,6 +3,7 @@ from flask_login import login_required
 
 from app.main import main
 from app.main.forms import TemplateForm
+from app import job_api_client
 from app.main.dao.services_dao import get_service_by_id
 from app.main.dao import templates_dao as tdao
 from app.main.dao import services_dao as sdao
@@ -13,6 +14,7 @@ from client.errors import HTTPError
 @login_required
 def manage_service_templates(service_id):
     try:
+        jobs = job_api_client.get_job(service_id)['data']
         templates = tdao.get_service_templates(service_id)['data']
     except HTTPError as e:
         if e.status_code == 404:
@@ -22,6 +24,7 @@ def manage_service_templates(service_id):
     return render_template(
         'views/manage-templates.html',
         service_id=service_id,
+        has_jobs=bool(jobs),
         templates=[tdao.TemplatesBrowsableItem(x) for x in templates])
 
 

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>