From 44781e3b69cbdd1b00ac0a913634cbb12348a140 Mon Sep 17 00:00:00 2001
From: Katie Smith <katie.smith@digital.cabinet-office.gov.uk>
Date: Thu, 14 Feb 2019 14:06:31 +0000
Subject: [PATCH] Change preview pane JS to preview letters as well as emails

---
 .../javascripts/{emailPreviewPane.js => previewPane.js}  | 9 ++++-----
 .../views/service-settings/set-email-branding.html       | 2 +-
 gulpfile.babel.js                                        | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)
 rename app/assets/javascripts/{emailPreviewPane.js => previewPane.js} (66%)

diff --git a/app/assets/javascripts/emailPreviewPane.js b/app/assets/javascripts/previewPane.js
similarity index 66%
rename from app/assets/javascripts/emailPreviewPane.js
rename to app/assets/javascripts/previewPane.js
index c614bba5a..7a8172861 100644
--- a/app/assets/javascripts/emailPreviewPane.js
+++ b/app/assets/javascripts/previewPane.js
@@ -13,9 +13,8 @@
 
   const $paneWrapper = $('<div class="column-full"></div>');
   const $form = $('form');
-  const $previewPane = $('<iframe src="/_email?' +
-                          buildQueryString(['branding_style', branding_style]) +
-                          '" class="branding-preview"></iframe>');
+  const previewType = $form.data('previewType');
+  const $previewPane = $(`<iframe src="/_${previewType}?${buildQueryString(['branding_style', branding_style])}" class="branding-preview"></iframe>`);
 
   function buildQueryString () {
     return $.map(arguments, (val, idx) => encodeURI(val[0]) + '=' + encodeURI(val[1])).join('&');
@@ -26,12 +25,12 @@
     if ($target.attr('name') == 'branding_style') {
       branding_style = $target.val();
     }
-    $previewPane.attr('src', '/_email?' + buildQueryString(['branding_style', branding_style]));
+    $previewPane.attr('src', `/_${previewType}?${buildQueryString(['branding_style', branding_style])}`);
   }
 
   $paneWrapper.append($previewPane);
   $form.find('.grid-row').eq(0).prepend($paneWrapper);
-  $form.attr('action', location.pathname.replace(/set-email-branding$/, 'preview-email-branding'));
+  $form.attr('action', location.pathname.replace(new RegExp(`set-${previewType}-branding$`), `preview-${previewType}-branding`));
   $form.find('button[type="submit"]').text('Save');
 
   $('fieldset').on('change', 'input[name="branding_style"]', setPreviewPane);
diff --git a/app/templates/views/service-settings/set-email-branding.html b/app/templates/views/service-settings/set-email-branding.html
index 62ddd583d..886c02afa 100644
--- a/app/templates/views/service-settings/set-email-branding.html
+++ b/app/templates/views/service-settings/set-email-branding.html
@@ -11,7 +11,7 @@
 {% block maincolumn_content %}
 
   <h1 class="heading-large">Set email branding</h1>
-  {% call form_wrapper() %}
+  {% call form_wrapper(data_kwargs={'preview-type': 'email'}) %}
     <div class="grid-row">
       <div class="column-full preview-pane">
       </div>
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index cc9ea9b6f..9c4100cb4 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -74,7 +74,7 @@ gulp.task('javascripts', () => gulp
     paths.src + 'javascripts/errorTracking.js',
     paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
     paths.src + 'javascripts/fullscreenTable.js',
-    paths.src + 'javascripts/emailPreviewPane.js',
+    paths.src + 'javascripts/previewPane.js',
     paths.src + 'javascripts/colourPreview.js',
     paths.src + 'javascripts/templateFolderForm.js',
     paths.src + 'javascripts/main.js'