Make developer instructions more explicit

The previous ‘you need to update your API calls’ text isn’t clear enough
now that the context of the spreadsheet has been removed.

app/templates/components/list.html

@@ -5,3 +5,11 @@
     separator=' '
   ) }}
 {%- endmacro %}
+
+{% macro list_of_code_snippets(variables) %}
+  {{ variables | formatted_list(
+    before_each="<code>",
+    after_each='</code>',
+    separator=' '
+  ) }}
+{%- endmacro %}

app/templates/views/templates/breaking-change.html

@@ -2,7 +2,7 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/list.html" import list_of_placeholders %}
+{% from "components/list.html" import list_of_placeholders, list_of_code_snippets %}
 {% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
@@ -15,20 +15,21 @@
     'Confirm changes',
     back_link=url_for(".edit_service_template", service_id=current_service.id, template_id=new_template.id)
   ) }}
-
-  {% if template_change.placeholders_removed %}
-    <p>
-      You removed {{ list_of_placeholders(template_change.placeholders_removed) }}
-    </p>
-  {% endif %}
-  {% if template_change.placeholders_added %}
-    <p>
-      You added {{ list_of_placeholders(template_change.placeholders_added) }}
-    </p>
-  {% endif %}
-  <p>
-    Developers, you’ll need to update your API calls.
-  </p>
+  <div class="grid-row">
+    <div class="column-five-sixths">
+      {% if template_change.placeholders_removed %}
+        <p>
+          You removed {{ list_of_placeholders(template_change.placeholders_removed) }}
+        </p>
+      {% endif %}
+      <p>
+        You added {{ list_of_placeholders(template_change.placeholders_added) }}
+      </p>
+      <p>
+        Before you send any messages, make sure your API calls include {{ list_of_code_snippets(template_change.placeholders_added) }}.
+      </p>
+    </div>
+  </div>
 
   {% call form_wrapper() %}
     <input type="hidden" name="name" value="{{ new_template.name }}" />

tests/app/main/views/test_templates.py

@@ -1476,21 +1476,22 @@ def test_should_403_when_create_template_with_process_type_of_priority_for_non_p
     mock_update_service_template.called == 0
 
 
-@pytest.mark.parametrize('template_mock, template_type, expected_paragraphs', [
+@pytest.mark.parametrize('old_content, new_content, expected_paragraphs', [
     (
-        mock_get_service_email_template,
-        "email",
+        "my favourite colour is blue",
+        "my favourite colour is ((colour))",
         [
-            'You removed ((date))',
-            'You added ((name))',
+            'You added ((colour))',
+            'Before you send any messages, make sure your API calls include colour.',
         ]
     ),
     (
-        mock_get_service_letter_template,
-        "letter",
+        "hello ((name))",
+        "hello ((full name))",
         [
-            'You removed ((date))',
-            'You added ((name))',
+            'You removed ((name))',
+            'You added ((full name))',
+            'Before you send any messages, make sure your API calls include full name.',
         ]
     ),
 ])
@@ -1501,28 +1502,25 @@ def test_should_show_interstitial_when_making_breaking_change(
     mock_get_api_keys,
     fake_uuid,
     mocker,
-    template_mock,
-    template_type,
+    new_content,
+    old_content,
     expected_paragraphs,
 ):
-    template_mock(
+    mock_get_service_email_template(
         mocker,
         subject="Your ((thing)) is due soon",
-        content="Your vehicle tax expires on ((date))",
+        content=old_content,
     )
     data = {
         'id': fake_uuid,
         'name': "new name",
-        'template_content': "hello lets talk about ((thing))",
-        'template_type': template_type,
-        'subject': 'reminder \'" <span> & ((name))',
+        'template_content': new_content,
+        'template_type': 'email',
+        'subject': 'reminder \'" <span> & ((thing))',
         'service': SERVICE_ONE_ID,
         'process_type': 'normal'
     }
 
-    if template_type == "letter":
-        data["postage"] = 'None'
-
     page = client_request.post(
         '.edit_service_template',
         service_id=SERVICE_ONE_ID,
@@ -1537,13 +1535,14 @@ def test_should_show_interstitial_when_making_breaking_change(
         service_id=SERVICE_ONE_ID,
         template_id=fake_uuid,
     )
-    for index, p in enumerate(expected_paragraphs):
-        assert normalize_spaces(page.select('main p')[index].text) == p
+    assert [
+        normalize_spaces(paragraph.text) for paragraph in page.select('main p')
+    ] == expected_paragraphs
 
     for key, value in {
         'name': 'new name',
-        'subject': 'reminder \'" <span> & ((name))',
-        'template_content': 'hello lets talk about ((thing))',
+        'subject': 'reminder \'" <span> & ((thing))',
+        'template_content': new_content,
         'confirm': 'true'
     }.items():
         assert page.find('input', {'name': key})['value'] == value
@@ -1551,7 +1550,7 @@ def test_should_show_interstitial_when_making_breaking_change(
     # BeautifulSoup returns the value attribute as unencoded, let’s make
     # sure that it is properly encoded in the HTML
     assert str(page.find('input', {'name': 'subject'})) == (
-        """<input name="subject" type="hidden" value="reminder '&quot; &lt;span&gt; &amp; ((name))"/>"""
+        """<input name="subject" type="hidden" value="reminder '&quot; &lt;span&gt; &amp; ((thing))"/>"""
     )