Make the broadcast flow talk to the API

This commit removes the code the puts areas into the session and instead
creates and then updates a draft broadcast in the database.

This is so we can avoid session-related bugs, and potentially having a
large session when we start adding personalisation etc.

Once a broadcast is ready to go it is set to `broadcasting` straight
away with no approval. We’ll revisit this as we learn more about how
users might want to manage who can create and approve broadcasts.

The tests are a bit light in terms of checking what’s on the page, but
clicking through the pages is probably good enough for now.

app/templates/views/broadcast/areas.html

@@ -14,7 +14,7 @@
 
   {{ page_header(
     page_title,
-    back_link=url_for('.choose_broadcast_library', service_id=current_service.id),
+    back_link=url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message_id),
   )}}
 
   {{ live_search(target_selector='.multiple-choice', show=show_search_form, form=search_form, label='Search by name') }}

app/templates/views/broadcast/libraries.html

@@ -10,11 +10,11 @@
 
   {{ page_header(
     "Choose where to broadcast to",
-    back_link=url_for(".preview_broadcast_areas", service_id=current_service.id)
+    back_link=url_for(".preview_broadcast_areas", service_id=current_service.id, broadcast_message_id=broadcast_message_id)
   ) }}
 
   {% for library in libraries|sort %}
-    <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_broadcast_area', service_id=current_service.id, library_slug=library.id) }}">{{ library.name }}</a>
+    <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message_id, library_slug=library.id) }}">{{ library.name }}</a>
     <p class="file-list-hint-large">{{ library.get_examples() }}</p>
   {% endfor %}
 

app/templates/views/broadcast/preview-areas.html

@@ -36,9 +36,9 @@
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(mymap);
 
-    {% for area in area_polygons %}
+    {% for polygon in broadcast_message.polygons %}
       polygons.push(
-        L.polygon({{area}}, {
+        L.polygon({{polygon}}, {
           color: '#0b0b0c', // $black
           fillColor: '#2B8CC4', // $light-blue
           fillOpacity: 0.2,
@@ -58,20 +58,23 @@
 
 {% block maincolumn_content %}
 
-  {{ page_header("Choose where to broadcast to", back_link=url_for('.choose_template', service_id=current_service.id)) }}
+  {{ page_header(
+    "Choose where to broadcast to",
+    back_link=url_for('.view_template', service_id=current_service.id, template_id=broadcast_message.template_id)
+  ) }}
 
-  {% for area in selected %}
+  {% for area in broadcast_message.areas %}
     {% if loop.first %}
       <ul class="area-list">
     {% endif %}
         <li class="area-list-item">
-          {{ area.name }} <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, area_slug=area.id) }}">remove</a>
+          {{ area.name }} <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message_id, area_slug=area.id) }}">remove</a>
         </li>
     {% if loop.last %}
       {{ govukButton({
         "element": "a",
         "text": "Add another area",
-        "href": url_for('.choose_broadcast_library', service_id=current_service.id),
+        "href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
         "classes": "govuk-button--secondary govuk-!-margin-bottom-5"
       }) }}
       </ul>
@@ -81,15 +84,15 @@
       {{ govukButton({
         "element": "a",
         "text": "Add broadcast areas",
-        "href": url_for('.choose_broadcast_library', service_id=current_service.id),
+        "href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
         "classes": "govuk-button--secondary"
       }) }}
     </p>
   {% endfor %}
 
-  {% if selected %}
+  {% if broadcast_message.areas %}
     <div id="map"></div>
-    <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id) }}" method="get">
+    <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get">
       {{ sticky_page_footer('Continue to preview') }}
     </form>
   {% endif %}

app/templates/views/broadcast/preview-message.html

@@ -11,9 +11,9 @@
 
 {% block maincolumn_content %}
 
-  {{ page_header("Preview", back_link=url_for('.preview_broadcast_areas', service_id=current_service.id)) }}
+  {{ page_header("Preview", back_link=url_for('.preview_broadcast_areas', service_id=current_service.id, broadcast_message_id=broadcast_message.id)) }}
 
-  {% for area in selected %}
+  {% for area in broadcast_message.areas %}
     {% if loop.first %}
       <ul class="area-list">
     {% endif %}
@@ -25,17 +25,10 @@
     {% endif %}
   {% endfor %}
 
-  {% if selected %}
-
-    <p class="govuk-body">
-      {{ template|string }}
-    </p>
-
-    {% call form_wrapper() %}
-      {{ sticky_page_footer('Start broadcast') }}
-    {% endcall %}
-
-  {% endif %}
+  {{ broadcast_message.template|string }}
 
+  {% call form_wrapper() %}
+    {{ sticky_page_footer('Start broadcast') }}
+  {% endcall %}
 
 {% endblock %}

app/templates/views/templates/_template.html

@@ -31,7 +31,7 @@
         {% elif template.template_type == 'broadcast' %}
           {% if current_user.has_permissions('send_messages') %}
             <div class="govuk-grid-column-one-half">
-              <a href="{{ url_for(".broadcast", service_id=current_service.id) }}" class="govuk-link govuk-link--no-visited-state pill-separate-item">
+              <a href="{{ url_for(".broadcast", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state pill-separate-item">
                 Prepare broadcast
               </a>
             </div>