Merge pull request #4163 from alphagov/branding-previews

Show a preview of GOV.UK and NHS email branding and apply straight away

app/main/views/service_settings.py

@@ -80,6 +80,8 @@ PLATFORM_ADMIN_SERVICE_PERMISSIONS = OrderedDict([
     ('international_letters', {'title': 'Send international letters', 'requires': 'letter'}),
 ])
 
+NHS_BRANDING_ID = 'a7dc4e56-660b-4db7-8cff-12c37b12b5ea'
+
 
 @main.route("/services/<uuid:service_id>/service-settings")
 @user_has_permissions('manage_service', 'manage_api_keys')
@@ -1196,9 +1198,9 @@ def email_branding_govuk(service_id):
     check_branding_allowed_for_service('govuk')
 
     if request.method == 'POST':
-        create_email_branding_zendesk_ticket(request.form['branding_choice'])
+        current_service.update(email_branding=None)
 
-        flash('Thanks for your branding request. We’ll get back to you within one working day.', 'default')
+        flash('You’ve updated your email branding', 'default')
         return redirect(url_for('.service_settings', service_id=current_service.id))
 
     return render_template('views/service-settings/branding/email-branding-govuk.html')
@@ -1210,12 +1212,12 @@ def email_branding_govuk_and_org(service_id):
     check_branding_allowed_for_service('govuk_and_org')
 
     if request.method == 'POST':
-        create_email_branding_zendesk_ticket(request.form['branding_choice'])
+        create_email_branding_zendesk_ticket('govuk_and_org')
 
         flash('Thanks for your branding request. We’ll get back to you within one working day.', 'default')
         return redirect(url_for('.service_settings', service_id=current_service.id))
 
-    return render_template('views/service-settings/branding/email-branding-govuk.html', with_org=True)
+    return render_template('views/service-settings/branding/email-branding-govuk-org.html')
 
 
 @main.route("/services/<uuid:service_id>/service-settings/email-branding/nhs", methods=['GET', 'POST'])
@@ -1224,12 +1226,12 @@ def email_branding_nhs(service_id):
     check_branding_allowed_for_service('nhs')
 
     if request.method == 'POST':
-        create_email_branding_zendesk_ticket('nhs')
+        current_service.update(email_branding=NHS_BRANDING_ID)
 
-        flash('Thanks for your branding request. We’ll get back to you within one working day.', 'default')
+        flash('You’ve updated your email branding', 'default')
         return redirect(url_for('.service_settings', service_id=current_service.id))
 
-    return render_template('views/service-settings/branding/email-branding-nhs.html')
+    return render_template('views/service-settings/branding/email-branding-nhs.html', nhs_branding_id=NHS_BRANDING_ID)
 
 
 @main.route("/services/<uuid:service_id>/service-settings/email-branding/organisation", methods=['GET', 'POST'])

app/navigation.py

@@ -220,6 +220,7 @@ class MainNavigation(Navigation):
             'add_organisation_from_gp_service',
             'add_organisation_from_nhs_local_service',
             'email_branding_govuk',
+            'email_branding_govuk_and_org',
             'email_branding_nhs',
             'email_branding_organisation',
             'email_branding_request',

app/templates/views/service-settings/branding/email-branding-govuk-org.html

@@ -0,0 +1,36 @@
+{% extends "withnav_template.html" %}
+{% from "components/form.html" import form_wrapper %}
+{% from "components/back-link/macro.njk" import govukBackLink %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/page-header.html" import page_header %}
+
+{% block service_page_title %}
+  Before you request new branding
+{% endblock %}
+
+{% block backLink %}
+  {{ govukBackLink({
+    "href": url_for('.email_branding_request', service_id=current_service.id)
+  }) }}
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  {{ page_header('Before you request new branding') }}
+
+  <p class="govuk-body">You can only use GOV.UK branding if people go to GOV.UK to access your service.</p>
+
+  <p class="govuk-body">
+    You cannot use GOV.UK branding if your organisation is
+    <a class="govuk-link govuk-link--no-visited-state"
+      href="https://www.gov.uk/government/publications/govuk-proposition/govuk-proposition#organisations-independent-from-government">independent
+      from government</a>.
+  </p>
+
+  <p class="govuk-body">We’ll email you once your branding’s ready to use, or if we need any more information.</p>
+
+  {% call form_wrapper() %}
+    {{ page_footer('Request new branding') }}
+  {% endcall %}
+
+{% endblock %}

app/templates/views/service-settings/branding/email-branding-govuk.html

@@ -5,7 +5,7 @@
 {% from "components/page-header.html" import page_header %}
 
 {% block service_page_title %}
-  Before you request new branding
+  Check your new branding
 {% endblock %}
 
 {% block backLink %}
@@ -16,16 +16,17 @@
 
 {% block maincolumn_content %}
 
-  {{ page_header('Before you request new branding') }}
+  {{ page_header('Check your new branding') }}
 
-  <p class="govuk-body">Check that your new branding matches the rest of your service.</p>
+  <p class="govuk-body">
+    Emails from {{ current_service.name }} will look like this.
+  </p>
 
-  <p class="govuk-body">You can use the GOV.UK logo on your emails if:</p>
-  <ul class="list list-bullet">
-    <li>your website looks like GOV.UK</li>
-    <li>your email links to a website that looks like GOV.UK</li>
-    <li>people get an email from your service after using GOV.UK</li>
-  </ul>
+  <iframe src="{{ url_for('main.email_template', branding_style='__NONE__') }}" class="branding-preview"></iframe>
+
+  <h2 class="heading-medium">Before you continue</h2>
+
+  <p class="govuk-body">You can only use GOV.UK branding if people go to GOV.UK to access your service.</p>
 
   <p class="govuk-body">
     You cannot use GOV.UK branding if your organisation is
@@ -34,10 +35,8 @@
       from government</a>.
   </p>
 
-  <p class="govuk-body">We’ll email you once your branding’s ready to use, or if we need any more information.</p>
-
   {% call form_wrapper() %}
-    {{ page_footer('Request new branding', button_name='branding_choice', button_value=('govuk_and_org' if with_org else 'govuk')) }}
+    {{ page_footer('Use this branding') }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/branding/email-branding-nhs.html

@@ -5,7 +5,7 @@
 {% from "components/page-header.html" import page_header %}
 
 {% block service_page_title %}
-  Before you request new branding
+  Check your new branding
 {% endblock %}
 
 {% block backLink %}
@@ -16,18 +16,24 @@
 
 {% block maincolumn_content %}
 
-  {{ page_header('Before you request new branding') }}
+  {{ page_header('Check your new branding') }}
 
   <p class="govuk-body">
-    <a class="govuk-link govuk-link--no-visited-state" href="https://www.england.nhs.uk/nhsidentity/identity-guidelines/who-can-use-the-nhs-identity/">Check that your service is allowed to use the NHS identity</a>.
+    Emails from {{ current_service.name }} will look like this.
   </p>
 
-  <p class="govuk-body">Your new branding should match the rest of your service.</p>
+  <iframe src="{{ url_for('main.email_template', branding_style=nhs_branding_id) }}" class="branding-preview"></iframe>
 
-  <p class="govuk-body">We’ll email you once your branding’s ready to use, or if we need any more information.</p>
+  <h2 class="heading-medium">Before you continue</h2>
+
+  <p class="govuk-body">Make sure you’re allowed to use NHS branding.</p>
+
+  <p class="govuk-body">
+    If you’re not sure, <a class="govuk-link govuk-link--no-visited-state" href="https://www.england.nhs.uk/nhsidentity/identity-guidelines/who-can-use-the-nhs-identity/">check the guidance on the NHS website</a>.
+  </p>
 
   {% call form_wrapper() %}
-    {{ page_footer('Request new branding') }}
+    {{ page_footer('Use this branding') }}
   {% endcall %}
 
 {% endblock %}

app/templates/views/service-settings/branding/email-branding-options.html

@@ -25,9 +25,12 @@
     Your emails currently have {{ branding_name }} branding.
   </p>
 
+  {% set branding_id = current_service.email_branding_id if current_service.email_branding else '__NONE__' %}
+  <iframe src="{{ url_for('main.email_template', branding_style=branding_id) }}" class="branding-preview"></iframe>
+
   {% if current_service.needs_to_change_email_branding %}
     <p class="govuk-body">
-      You should be using your own branding instead. We can help you to set this up.
+      You should be using your own branding instead.
     </p>
   {% endif %}