[Zurich] Improve display of external body message when present

Make external/competent body message read-only and
displayed like public response when submitted.

See mysociety/FixMyStreet-Commercial#718

2 files changed, 50 insertions, 34 deletions

diff --git a/templates/web/zurich/admin/report_edit.html b/templates/web/zurich/admin/report_edit.html
index 8f9b10885..95ddfafa9 100644
--- a/templates/web/zurich/admin/report_edit.html
+++ b/templates/web/zurich/admin/report_edit.html
@@ -198,42 +198,43 @@
 [% END %]
 </ul>
 
-[%# 3rd party messages sent for Extern/Wunsch states %]
-[% SWITCH pstate %]
-    [% CASE ['closed','investigating'] %]
-    <ul class="no-bullets screen-only">
-    <li class="assignation" id="assignation__external">
-    <label for="body_external">
+
+[% IF problem.state == 'planned' %]
+    [%# 3rd party messages sent for Extern/Wunsch states %]
+    [% SWITCH pstate %]
+        [% CASE ['closed','investigating'] %]
+        <ul class="no-bullets screen-only">
+        <li class="assignation" id="assignation__external">
+        <label for="body_external">
+              [% IF pstate == 'closed' %]
+                [% loc('Assign to external body:') %]
+              [% ELSE %]
+                [% loc('Assign to competent body:') %]
+              [% END %]
+            </label>
+            <select name="body_external" id="body_external">
+                <option value="">--</option>
+              [% FOR body IN bodies %]
+                [% NEXT IF body.parent OR body.bodies OR body.deleted %]
+                <option value="[% body.id %]"[% IF body.id == problem.external_body %] selected[% END %]>[% body.name %]</option>
+              [% END %]
+            </select>
+        </li>
+        <li>
           [% IF pstate == 'closed' %]
-            [% loc('Assign to external body:') %]
-          [% ELSE %]
-            [% loc('Assign to competent body:') %]
-          [% END %]
-        </label>
-        <select name="body_external" id="body_external">
-            <option value="">--</option>
-          [% FOR body IN bodies %]
-            [% NEXT IF body.parent OR body.bodies OR body.deleted %]
-            <option value="[% body.id %]"[% IF body.id == problem.external_body %] selected[% END %]>[% body.name %]</option>
+            <input type="checkbox" name="third_personal" id="third_personal" value="1"[% ' checked' IF problem.extra.third_personal %]>
+            <label for="third_personal" class="inline">[% loc('Include reporter personal details') %]</label>
           [% END %]
-        </select>
-    </li>
-    <li>
-      [% IF pstate == 'closed' %]
-        <input type="checkbox" name="third_personal" id="third_personal" value="1"[% ' checked' IF problem.extra.third_personal %]>
-        <label for="third_personal" class="inline">[% loc('Include reporter personal details') %]</label>
-      [% END %]
-    </li>
-    <li>
-        [% INCLUDE 'admin/response_templates_select.html' for='external_body' %]
-        <textarea name='external_message' id='external_body' cols=60 rows=5>[% problem.get_extra_metadata('external_message') | html %]</textarea>
-    </li>
-    </ul>
-[% END %]
+        </li>
+        <li>
+            [% INCLUDE 'admin/response_templates_select.html' for='external_body' %]
+            <textarea name='external_message' id='external_body' cols=60 rows=5>[% problem.get_extra_metadata('external_message') | html %]</textarea>
+        </li>
+        </ul>
+    [% END %]
 
-[%# Public response field shown for Ruckmeldung ausstehend states
-  # (e.g. various pstates) %]
-[% IF problem.state == 'planned' %]
+    [%# Public response field shown for Ruckmeldung ausstehend states
+      # (e.g. various pstates) %]
     <ul class="no-bullets screen-only">
         <li id="status_update_container"><label for="status_update">
         [% SWITCH pstate %]
@@ -273,6 +274,21 @@
     </div>
 [% END %]
 
+[% SWITCH problem.state %]
+    [% CASE ['closed','investigating'] %]
+    <h2>
+          [% IF problem.state == 'closed' %]
+            [% loc('Message to external body:') %]
+          [% ELSE %]
+            [% loc('Message to competent body:') %]
+          [% END %]
+    </h2>
+    <div class="admin-external-message">
+        [% problem.extra.external_message | html_para %]
+    </div>
+[% END %]
+
+
 [% INCLUDE 'admin/list_updates.html' %]
 
 </div>
diff --git a/web/cobrands/zurich/base.scss b/web/cobrands/zurich/base.scss
index 9b3543116..b92485a19 100644
--- a/web/cobrands/zurich/base.scss
+++ b/web/cobrands/zurich/base.scss
@@ -210,7 +210,7 @@ h4.static-with-rule {
     padding-left: 30px;
 }
 
-.admin-official-answer {
+.admin-official-answer, .admin-external-message {
     background-color: #1F52A3; // official Zurich blue colour
     color: #fff;
     padding: 0.8em 1em;