Add preview step to branding selection flow

Gives platform admins a chance to preview the
combination of brand type and custom brand
(coloured banner and logo) set for service before
saving.

app/main/forms.py

@@ -717,6 +717,12 @@ class ServiceSetBranding(StripWhitespaceForm):
     )
 
 
+class ServicePreviewBranding(StripWhitespaceForm):
+
+    branding_type = HiddenField('branding_type')
+    branding_style = HiddenField('branding_style')
+
+
 class ServiceSelectEmailBranding(StripWhitespaceForm):
 
     def __init__(self, email_brandings=[], *args, **kwargs):

app/main/views/service_settings.py

@@ -41,6 +41,7 @@ from app.main.forms import (
     ServiceEditInboundNumberForm,
     ServiceInboundNumberForm,
     ServiceLetterContactBlockForm,
+    ServicePreviewBranding,
     ServiceReplyToEmailForm,
     ServiceSetBranding,
     ServiceSmsSenderForm,
@@ -895,12 +896,36 @@ def set_free_sms_allowance(service_id):
 @user_is_platform_admin
 def service_set_email_branding(service_id):
     email_branding = email_branding_client.get_all_email_branding()
+    branding_type = current_service.get('branding')
 
-    form = ServiceSetBranding(branding_type=current_service.get('branding'))
+    form = ServiceSetBranding(branding_type=branding_type)
 
     # dynamically create org choices, including the null option
     form.branding_style.choices = [('None', 'None')] + get_branding_as_value_and_label(email_branding)
 
+    if form.validate_on_submit():
+        branding_style = None if form.branding_style.data == 'None' else form.branding_style.data
+        return redirect(url_for('.service_preview_email_branding', service_id=service_id,
+                        branding_type=form.branding_type.data, branding_style=branding_style))
+
+    form.branding_style.data = current_service['email_branding'] or 'None'
+
+    return render_template(
+        'views/service-settings/set-email-branding.html',
+        form=form,
+        branding_dict=get_branding_as_dict(email_branding)
+    )
+
+
+@main.route("/services/<service_id>/service-settings/preview-email-branding", methods=['GET', 'POST'])
+@login_required
+@user_is_platform_admin
+def service_preview_email_branding(service_id):
+    branding_type = request.args.get('branding_type', None)
+    branding_style = request.args.get('branding_style', None)
+
+    form = ServicePreviewBranding(branding_type=branding_type, branding_style=branding_style)
+
     if form.validate_on_submit():
         branding_style = None if form.branding_style.data == 'None' else form.branding_style.data
         service_api_client.update_service(
@@ -910,12 +935,11 @@ def service_set_email_branding(service_id):
         )
         return redirect(url_for('.service_settings', service_id=service_id))
 
-    form.branding_style.data = current_service.email_branding or 'None'
-
     return render_template(
-        'views/service-settings/set-email-branding.html',
+        'views/service-settings/preview-email-branding.html',
         form=form,
-        branding_dict=get_branding_as_dict(email_branding)
+        service_id=service_id,
+        action=url_for('main.service_preview_email_branding', service_id=service_id),
     )
 
 

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

@@ -0,0 +1,24 @@
+{% extends "views/platform-admin/_base_template.html" %}
+
+{% block service_page_title %}
+  Preview email branding
+{% endblock %}
+
+{% block platform_admin_content %}
+
+  <h1 class="heading-large">Preview email branding</h1>
+  <div class="grid-row">
+    <div class="column-full">
+      <iframe src="{{ url_for('main.email_template', branding_type=form.branding_type.data, branding_style=form.branding_style.data) }}" class="email-branding-preview"></iframe>
+      <form method="post" action="{{ action }}">
+        <div class="form-group">
+          {{ form.hidden_tag() }}
+          <div class="page-footer">
+            <button type="submit" class="button">Save</button>
+            <a class="page-footer-back-link" href="{{ url_for('main.service_settings', service_id=service_id) }}">Back to service settings</a>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+{% endblock %}

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

@@ -9,18 +9,24 @@
 {% block maincolumn_content %}
 
   <h1 class="heading-large">Set email branding</h1>
-  <div class="grid-row">
-    <div class="column-three-quarters">
-      <form method="post">
+  <form method="post">
+    <div class="grid-row">
+      <div class="column-one-half">
         {{ radios(form.branding_type) }}
+      </div>
+      <div class="column-one-half">
         {{ branding_radios(form.branding_style, branding_dict=branding_dict) }}
+      </div>
+    </div>
+    <div class="grid-row">
+      <div class="column-three-quarters">
         {{ page_footer(
-          'Save',
+          'Preview',
           back_link=url_for('.service_settings', service_id=current_service.id),
           back_link_text='Back to settings'
         ) }}
-      </form>
+      </div>
     </div>
-  </div>
+  </form>
 
 {% endblock %}