Preview service name when adding a new service

This commit adds a new page, which appears after a user enters the name for
their new service. It shows how the service name will appear in emails and
text messages.

This means that the new service is not created until after they have confirmed
that the name is appropriate in context.

This has also involved:
- visual changes to the ‘email template’ pattern, which wasn’t very refined
  before
- removing a bunch of words from the enter service name page, because most users
  don’t read them, and we reckon that showing a preview is a better way of
  getting them to understand what is meant by service name

Still to do:
- validating the the generated email address for a service is unique (on the
  API) side
- having the API return the generated email address, rather than determining it
  in the admin app

app/templates/views/add-from-address.html

@@ -0,0 +1,42 @@
+{% extends "withoutnav_template.html" %}
+{% from "components/textbox.html" import textbox %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/sms-message.html" import sms_message %}
+{% from "components/email-message.html" import email_message %}
+
+{% block page_title %}
+  Preview your service name – GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  <h1 class="heading-large">
+    Preview your service name
+  </h1>
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+        {{ sms_message(
+          "{}: we received your payment, thank you".format(service_name),
+          name="Text message",
+          recipient='Sent from 40604'
+        ) }}
+    </div>
+  </div>
+  <div class="grid-row">
+    <div class='column-two-thirds'>
+      {{ email_message(
+        subject="We received your payment, thank you",
+        body="Dear Alice Smith,\n\nThank you for…",
+        from_name=service_name,
+        from_address=from_address,
+        name="Email",
+      ) }}
+    </div>
+  </div>
+
+  <form method="post">
+    {{page_footer('Looks good', back_link=url_for(".add_service"))}}
+  </form>
+
+{% endblock %}

app/templates/views/add-service.html

@@ -12,27 +12,21 @@
   <div class="column-two-thirds">
 
     <h1 class="heading-large">
-      {{ heading }}
+      When people receive notifications, who should they be from?
     </h1>
 
     <p>
-      Users will see your service name when they receive messages through GOV.UK
-      Notify:
+      Be specific. Remember that there might be other people in your
+      organisation using GOV.UK Notify.
     </p>
 
-    <ul class="list-bullet bottom-gutter">
-      <li>
-        at the start of every text message, eg ‘Vehicle tax: we received your
-        payment, thank you’
-      </li>
-      <li>
-        as your email sender name
-      </li>
-    </ul>
-
     <form autocomplete="off" method="post">
+
       {{ textbox(form.name, hint="You can change this later") }}
+
+
       {{ page_footer('Continue') }}
+
     </form>
 
   </div>