Show a tour when users first create a service

This commit adds a 3 screen tour, similar to those used on GOV.UK Verify
and Passports.

We guerilla tested this on Friday, and it really helped users to build a
mental model of how Notify works, so that when they’re playing around
with it they have a greater sense of what they’re aiming to do. This
makes concepts like templates and placeholders click more quickly.

https://www.pivotaltracker.com/story/show/116710119

app/templates/views/dashboard/dashboard.html

@@ -5,26 +5,26 @@
 {% endblock %}
 
 {% block maincolumn_content %}
+  
+    {% if not templates and current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], any_=True) %}
+      {% include 'views/dashboard/get-started.html' %}
+    {% elif service.restricted %}
+      <div class="dashboard">
+        {% include 'views/dashboard/trial-mode-banner.html' %}
+      </div>
+    {% endif %}
 
-  {% if service.restricted %}
-    {% include 'views/dashboard/trial-mode-banner.html' %}
-  {% endif %}
 
-  {% if not templates and current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], any_=True) %}
-    {% include 'views/dashboard/get-started.html' %}
-  {% endif %}
-
-  {% if templates %}
-    <div
-      data-module="update-content"
-      data-resource="{{url_for(".service_dashboard_updates", service_id=service_id)}}"
-      data-key="today"
-      data-interval-seconds="10"
-    >
-      {% include 'views/dashboard/today.html' %}
-    </div>
+      <div
+        data-module="update-content"
+        data-resource="{{url_for(".service_dashboard_updates", service_id=service_id)}}"
+        data-key="today"
+        data-interval-seconds="10"
+      >
+        {% include 'views/dashboard/today.html' %}
+      </div>
     
-    {% include 'views/dashboard/jobs.html' %}
-  {% endif %}
+      {% include 'views/dashboard/jobs.html' %}
+  
 
 {% endblock %}

app/templates/views/dashboard/get-started.html

@@ -1,30 +1,23 @@
 {% from "components/banner.html" import banner_wrapper %}
 
-<h2 class="heading-medium">Get started</h2>
 {% if current_user.has_permissions(['manage_templates']) %}
-  <p>
-    You need to set up a template before you can send messages
-  </p>
-  <ol class="grid-row">
-    <li class="column-half">
-      {% call banner_wrapper(type="tip") %}
-        <a href='{{ url_for(".add_service_template", service_id=service_id, template_type="sms") }}' style="white-space: nowrap;">
-          Set up a text message template
-        </a>
-      {% endcall %}
-    </li>
-    <li class="column-half">
-      {% call banner_wrapper(type="tip") %}
-        <a href='{{ url_for(".add_service_template", service_id=service_id, template_type="email") }}'>
-          Set up an email template
-        </a>
-      {% endcall %}
-    </li>
-  </ol>
+  {% call banner_wrapper(type='tour') %}
+    <h2 class="heading-large">You’re ready to get started</h2>
+    <p>
+      <a href='{{ url_for(".add_service_template", service_id=service_id, template_type="sms") }}'>
+        Set up a text message template
+      </a>
+    </p>
+    <p>
+      <a href='{{ url_for(".add_service_template", service_id=service_id, template_type="email") }}'>
+        Set up an email template
+      </a>
+    </p>
+  {% endcall %}
 {% else %}
-  <p>
+  {% call banner_wrapper(type='mode') %}
     <p>
       You need to ask your service manager to set up some templates before you can send messages
     </p>
-  </p>
+  {% endcall %}
 {% endif %}

app/templates/views/dashboard/trial-mode-banner.html

@@ -2,24 +2,12 @@
 {% from "components/big-number.html" import big_number %}
 
 {% call banner_wrapper(type="mode") %}
-
-  <h2 class="heading-medium">Trial mode</h2>
   <div class="grid-row">
     <div class="column-one-half">
-      <p>
-        We’ll only deliver messages to you and members of your team
-        <br>
-        <a href="{{ url_for(".help", _anchor="trial-mode") }}">Find out more</a>
-      </p>
+      Your service is in trial mode
     </div>
-    <div class="column-one-sixth">
-      &nbsp;
-    </div>
-    <div class="column-one-third">
-      {{ big_number(
-        service.limit - statistics.get('emails_requested', 0) - statistics.get('sms_requested', 0),
-        'messages left today'
-      ) }}
+    <div class="column-one-half">
+        <a href="{{ url_for(".help", _anchor="trial-mode") }}" class="banner-mode-action">Find out more</a>
     </div>
   </div>
 {% endcall %}