Add page explaining how to send template using API

Would like to test something like this and see how well it works.

Intention of having this page is so:
- template IDs are discoverable (https://www.pivotaltracker.com/story/show/115404593)
- it’s obvious there’s an ‘automated’ way to send messages, as well as the CSV
  way (we’ve seen people oblivious to this in research)

app/assets/stylesheets/app.scss

@@ -65,6 +65,7 @@ a {
 .highlight {
   font-family: monospace;
   overflow-x: scroll;
+  padding: 10px 0 10px 10px;
 }
 
 .inline {

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

@@ -43,14 +43,8 @@
   margin-top: 52px;
 
   a {
-
     display: block;
     margin-bottom: 5px;
-
-    &:first-child {
-      @include bold-19;
-    }
-
   }
 
 }

app/main/views/send.py

@@ -1,5 +1,6 @@
 import csv
 import io
+import json
 import uuid
 from contextlib import suppress
 
@@ -197,6 +198,29 @@ def send_message_to_self(service_id, template_id):
                             upload_id=upload_id))
 
 
+@main.route("/services/<service_id>/send/<template_id>/from-api", methods=['GET'])
+@login_required
+@user_has_permissions('manage_api_keys', 'access_developer_docs')
+def send_from_api(service_id, template_id):
+    template = Template(
+        templates_dao.get_service_template_or_404(service_id, template_id)['data']
+    )
+    payload = {
+        "to": current_user.mobile_number,
+        "template": template.id,
+        "personalisation": {
+            placeholder: "{} 1".format(placeholder) for placeholder in template.placeholders
+        }
+    }
+    return render_template(
+        'views/send-from-api.html',
+        template=template,
+        payload=json.dumps(payload, indent=4),
+        api_host=current_app.config['API_HOST_NAME'],
+        service_id=service_id
+    )
+
+
 @main.route("/services/<service_id>/check/<upload_id>", methods=['GET'])
 @login_required
 @user_has_permissions('send_texts', 'send_emails', 'send_letters')

app/templates/views/choose-template.html

@@ -49,20 +49,33 @@
             {{ email_message(
               template.subject,
               template.formatted_as_markup,
-              name=template.name
+              name=template.name,
+              edit_link=(
+                url_for(".edit_service_template", service_id=service_id, template_id=template.id)
+                if current_user.has_permissions(['manage_templates']) else
+                None
+              )
             ) }}
           {% elif 'sms' == template_type %}
-            {{ sms_message(template.formatted_as_markup, name=template.name) }}
+            {{ sms_message(
+                template.formatted_as_markup,
+                name=template.name,
+                edit_link=(
+                  url_for(".edit_service_template", service_id=service_id, template_id=template.id)
+                  if current_user.has_permissions(['manage_templates']) else
+                  None
+                )
+              ) }}
           {% endif %}
         </div>
         <div class="column-one-third">
           <div class="sms-message-use-links">
             {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters']) %}
-            <a href="{{ url_for(".send_messages", service_id=service_id, template_id=template.id) }}">Add recipients</a>
-            <a href="{{ url_for(".send_message_to_self", service_id=service_id, template_id=template.id) }}">Send yourself a test</a>
+              <a href="{{ url_for(".send_messages", service_id=service_id, template_id=template.id) }}">Send a batch</a>
+              <a href="{{ url_for(".send_message_to_self", service_id=service_id, template_id=template.id) }}">Send yourself a test</a>
             {% endif %}
-            {% if current_user.has_permissions(['manage_templates']) %}
-            <a href="{{ url_for(".edit_service_template", service_id=service_id, template_id=template.id) }}">Edit template</a>
+            {% if current_user.has_permissions(['manage_api_keys', 'access_developer_docs']) %}
+              <a href="{{ url_for(".send_from_api", service_id=service_id, template_id=template.id) }}">API integration</a>
             {% endif %}
           </div>
         </div>

app/templates/views/documentation.html

@@ -9,7 +9,7 @@
 {% block maincolumn_content %}
 
 <h1 class="heading-large">
-    Developer documentation
+    Set up API integration
 </h1>
 
 <div class="grid-row">

app/templates/views/send-from-api.html

@@ -0,0 +1,62 @@
+{% extends "withnav_template.html" %}
+{% from "components/email-message.html" import email_message %}
+{% from "components/sms-message.html" import sms_message %}
+
+{% block page_title %}
+  Developer documentation – GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  <h1 class="heading-large">
+      API integration
+  </h1>
+
+  <div class="grid-row">
+    <div class="column-three-quarters">
+
+      {% if 'email' == template.template_type %}
+        {{ email_message(
+          template.subject,
+          template.formatted_as_markup,
+        ) }}
+      {% elif 'sms' == template.template_type %}
+        {{ sms_message(
+          template.formatted_as_markup,
+        ) }}
+      {% endif %}
+
+      <p>
+        You can send this message from your existing apps or systems by
+        connecting them to GOV.UK Notify.
+      </p>
+      <p>
+        You’ll need to work with a developer to do this.
+      </p>
+
+    </div>
+  </div>
+
+  <h3 class="heading-small">
+    Example payload for this template
+  </h3>
+  {{payload|syntax_highlight_json}}
+
+  <h3 class="heading-small">
+    Endpoint
+  </h3>
+
+  <div class="highlight" style="background: #f8f8f8">
+    <pre style="line-height: 125%">
+      {{- 'POST {}/notifications/{}'.format(
+        api_host,
+        template.template_type
+      ) -}}
+    </pre>
+  </div>
+
+  <p>
+    <br />See the <a href="#">developer documentation</a> for full details.
+  </p>
+
+{% endblock %}

app/templates/views/send.html

@@ -11,7 +11,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Add recipients</h1>
+  <h1 class="heading-large">Send a batch</h1>
 
   {% if 'sms' == template.template_type %}
     <div class="grid-row">

tests/app/main/views/test_send.py

@@ -90,6 +90,27 @@ def test_send_test_message_to_self(
         mock_s3_upload.assert_called_with(ANY, '12345', expected_data, 'eu-west-1')
 
 
+def test_send_test_message_from_api_page(
+    app_,
+    mocker,
+    api_user_active,
+    mock_login,
+    mock_get_service,
+    mock_get_service_email_template,
+    mock_s3_upload,
+    mock_has_permissions
+):
+    with app_.test_request_context():
+        with app_.test_client() as client:
+            client.login(api_user_active)
+            response = client.get(
+                url_for('main.send_from_api', service_id=12345, template_id=54321),
+                follow_redirects=True
+            )
+        assert response.status_code == 200
+        assert 'API integration' in response.get_data(as_text=True)
+
+
 def test_download_example_csv(
     app_,
     mocker,