Merge pull request #3588 from alphagov/broadcast-tour-rework

Refine the broadcast tour based on what we’ve learned in research

app/assets/stylesheets/components/banner.scss

@@ -80,9 +80,16 @@
 
   &-no-fixed-height {
     height: auto;
+    padding-top: govuk-spacing(8);
     min-height: 425px;
   }
 
+  &-with-service-name {
+    margin-top: -10px;
+    padding-top: 0;
+    box-shadow: 0 -1px 0 0 darken($govuk-blue, 10%);
+  }
+
   .heading-medium {
     @include core-24;
   }
@@ -143,6 +150,8 @@
   img {
     width: 100%;
     height: auto;
+    position: relative;
+    top: -1 * govuk-spacing(2);
   }
 
   .greyed-out-step {

app/assets/stylesheets/components/navigation.scss

@@ -18,6 +18,23 @@
     text-overflow: ellipsis;
   }
 
+  &-service-type {
+
+    &--training {
+      @include bold-16;
+      position: relative;
+      display: inline-block;
+      margin-left: govuk-spacing(2);
+      padding: 0 govuk-spacing(1);
+      background: $grey-3;
+      color: mix($grey-1, $text-colour);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      box-shadow: 0 -3px 0 0 $grey-3;
+    }
+
+  }
+
   &-service-switch,
   &-service-back-to,
   &-organisation-link {

app/main/views/broadcast.py

@@ -23,7 +23,7 @@ from app.utils import service_has_permission, user_has_permissions
 @user_has_permissions()
 @service_has_permission('broadcast')
 def broadcast_tour(service_id, step_index):
-    if step_index not in (1, 2, 3):
+    if step_index not in (1, 2, 3, 4):
         abort(404)
     return render_template(
         f'views/broadcast/tour/{step_index}.html'

app/templates/views/broadcast/tour/1.html

@@ -3,7 +3,7 @@
 {% extends "admin_template.html" %}
 
 {% block per_page_title %}
-  Step 1
+  You’ve been invited to use GOV.UK Notify for emergency alerts.
 {% endblock %}
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
@@ -14,20 +14,15 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-half">
         <h1 class="heading-medium">
-          You’ve been invited to use GOV.UK Notify to broadcast alerts
+          You’ve been invited to use GOV.UK&nbsp;Notify for emergency alerts.
         </h1>
-        <ul>
-          <li>
-            Broadcasting is a new technology for alerting members of the
-            public
-          </li>
-          <li>
-            It should be used when there’s an imminent risk to life
-          </li>
-        </ul>
+        <p class="govuk-body heading-medium">
+          Emergency alerts let you warn the public about an
+          imminent risk to life.
+        </p>
         <p class="govuk-body heading-medium">
           <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=2) }}'>
-            Find out how it works
+            Continue
           </a>
         </p>
       </div>

app/templates/views/broadcast/tour/2.html

@@ -3,7 +3,8 @@
 {% extends "admin_template.html" %}
 
 {% block per_page_title %}
-  Step 2
+  In an emergency, you can broadcast an alert to every mobile phone in
+  the affected area.
 {% endblock %}
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
@@ -14,23 +15,15 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-half">
         <h1 class="heading-medium">
-          A broadcast will alert every phone in an area
+          In an emergency, you can broadcast an alert to every mobile phone in
+          the affected&nbsp;area.
         </h1>
-        <ul>
-          <li>
-            The alert will appear even if the phone’s screen is locked
-          </li>
-          <li>
-            The phone will play an alarm sound even if it’s set to silent
-          </li>
-          <li>
-            Any phone that enters the area while the broadcast is live will
-            get the alert
-          </li>
-        </ul>
+        <p class="govuk-body heading-medium">
+          You do not need to know people’s phone&nbsp;numbers.
+        </p>
         <p class="govuk-body heading-medium govuk-!-margin-bottom-6">
           <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=3) }}'>
-            How to try it out
+            Continue
           </a>
         </p>
       </div>

app/templates/views/broadcast/tour/3.html

@@ -3,7 +3,7 @@
 {% extends "admin_template.html" %}
 
 {% block per_page_title %}
-  Step 3
+  An emergency alert looks a bit like a text message.
 {% endblock %}
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
@@ -14,23 +14,15 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-half">
         <h1 class="heading-medium">
-          You have a trial account
+          An emergency alert looks a bit like a text&nbsp;message.
         </h1>
-        <ul>
-          <li>
-            There’s no risk of triggering a real, live broadcast
-          </li>
-          <li>
-            Get familiar with the system now, so you’re ready to use it if
-            there’s an emergency
-          </li>
-          <li>
-            When you’re ready, apply for a live account
-          </li>
-        </ul>
         <p class="govuk-body heading-medium">
-          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
-            Continue to dashboard
+          It also makes a loud alarm noise, even if the phone is set
+          on silent.
+        </p>
+        <p class="govuk-body heading-medium">
+          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=4) }}'>
+            Continue
           </a>
         </p>
       </div>

app/templates/views/broadcast/tour/4.html

@@ -0,0 +1,43 @@
+{% from "components/banner.html" import banner_wrapper %}
+
+{% extends "admin_template.html" %}
+
+{% block per_page_title %}
+  You’re in training mode.
+{% endblock %}
+
+{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
+
+{% block content %}
+
+  <div class="navigation-service">
+    <div class="navigation-service-name govuk-!-font-weight-bold">
+      {{ current_service.name }} <span class="navigation-service-type--training">Training</span>
+    </div>
+  </div>
+
+  <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="heading-medium">
+          You’re in training mode.
+        </h1>
+        <p class="govuk-body heading-medium">
+          There’s no risk of broadcasting a real alert.
+        </p>
+        <p class="govuk-body heading-medium">
+          Get used to the system now, so you know what to do in an&nbsp;emergency.
+        </p>
+        <p class="govuk-body heading-medium">
+          When you’re ready, you can turn off training mode.
+        </p>
+        <p class="govuk-body heading-medium">
+          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
+            Continue to dashboard
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+
+{% endblock %}

app/templates/withnav_template.html

@@ -17,6 +17,9 @@
       {% endif %}
       <div class="navigation-service-name govuk-!-font-weight-bold">
         {{ current_service.name }}
+        {% if current_service.has_permission('broadcast') and current_service.trial_mode %}
+          <span class="navigation-service-type--training navigation-service-type--training--with-arrow">Training</span>
+        {% endif %}
       </div>
       <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
     </div>

tests/app/main/views/test_broadcast.py

@@ -133,6 +133,67 @@ def test_broadcast_pages_403_for_user_without_permission(
     )
 
 
+@pytest.mark.parametrize('step_index, expected_link_text, expected_link_href', (
+    (1, 'Continue', partial(url_for, '.broadcast_tour', step_index=2)),
+    (2, 'Continue', partial(url_for, '.broadcast_tour', step_index=3)),
+    (3, 'Continue', partial(url_for, '.broadcast_tour', step_index=4)),
+    (4, 'Continue to dashboard', partial(url_for, '.service_dashboard')),
+))
+def test_broadcast_tour_pages_have_continue_link(
+    client_request,
+    service_one,
+    step_index,
+    expected_link_text,
+    expected_link_href,
+):
+    service_one['permissions'] += ['broadcast']
+    page = client_request.get(
+        '.broadcast_tour',
+        service_id=SERVICE_ONE_ID,
+        step_index=step_index,
+    )
+    link = page.select_one('.banner-tour a')
+    assert normalize_spaces(link.text) == expected_link_text
+    assert link['href'] == expected_link_href(service_id=SERVICE_ONE_ID)
+
+
+@pytest.mark.parametrize('step_index', (
+    pytest.param(1, marks=pytest.mark.xfail),
+    pytest.param(2, marks=pytest.mark.xfail),
+    pytest.param(3, marks=pytest.mark.xfail),
+    4,
+))
+def test_broadcast_tour_page_4_shows_service_name(
+    client_request,
+    service_one,
+    step_index,
+):
+    service_one['permissions'] += ['broadcast']
+    page = client_request.get(
+        '.broadcast_tour',
+        service_id=SERVICE_ONE_ID,
+        step_index=step_index,
+    )
+    assert normalize_spaces(page.select_one('.navigation-service').text) == (
+        'service one Training'
+    )
+
+
+@pytest.mark.parametrize('step_index', (0, 5))
+def test_broadcast_tour_page_404s_out_of_range(
+    client_request,
+    service_one,
+    step_index,
+):
+    service_one['permissions'] += ['broadcast']
+    client_request.get(
+        '.broadcast_tour',
+        service_id=SERVICE_ONE_ID,
+        step_index=step_index,
+        _expected_status=404,
+    )
+
+
 def test_dashboard_redirects_to_broadcast_dashboard(
     client_request,
     service_one,