CATL-1890: Update form subject using letterhead title

js/letterheads-dropdown.js

@@ -1,6 +1,6 @@
 (($, _, ManageLetterheads, ts, crmWysiwyg) => {
-  var $htmlMessageEditor, $letterheadDropdown, $templateRow, $templateDropdown,
-    isEmailForm;
+  var $htmlMessageEditor, $letterheadDropdown, $subjectField, $templateRow,
+    $templateDropdown, isEmailForm;
   var letterheadOptions = JSON.parse(ManageLetterheads.letterhead_options);
 
   $(document).ready(function () {
@@ -43,11 +43,10 @@
    * Appends the letterhead for the given ID to the message editor. Removes
    * any previous letterhead references.
    *
-   * @param {string} letterheadId the letterhead's ID to append to the message
+   * @param {string} letterheadContent the letterhead's content to append to the message
    * editor.
    */
-  function appendLetterheadToMessage (letterheadId) {
-    var letterheadContent = _.find(letterheadOptions, { id: letterheadId }).content;
+  function appendLetterheadToMessage (letterheadContent) {
     var letterheadHtml = $('<div class="letterhead-element">' + letterheadContent + '</div>');
     var $messageContent = getMessageDomContent();
 
@@ -85,15 +84,23 @@
   }
 
   /**
-   * Appends the selected letterhead. Removes any existing letterhead when
+   * Handles the events triggered by changing the letterhead:
+   *
+   * - Appends the selected letterhead. Removes any existing letterhead when
    * selecting "None".
+   * - Changes the subject using the letterhead title. Clears the subject
+   * when selecting "None".
    */
   function handleLetterheadChange () {
     var letterheadId = $letterheadDropdown.val();
 
     if (letterheadId) {
-      appendLetterheadToMessage(letterheadId);
+      var letterhead = _.find(letterheadOptions, { id: letterheadId });
+
+      $subjectField.val(letterhead.title);
+      appendLetterheadToMessage(letterhead.content);
     } else {
+      $subjectField.val('');
       removeLetterheadFromMessage();
     }
   }
@@ -113,11 +120,12 @@
       return;
     }
 
+    var letterhead = _.find(letterheadOptions, { id: letterheadId });
     var messageEditorListener = CKEDITOR.instances.html_message
       .on('change', function () {
         messageEditorListener.removeListener();
         setTimeout(function () {
-          appendLetterheadToMessage(letterheadId);
+          appendLetterheadToMessage(letterhead.content);
         });
       });
   }
@@ -133,6 +141,7 @@
     var $emailTemplateRow = $('.crm-contactEmail-form-block-template');
     var $pdfTemplateRow = $('select[name="template"]').parents('tr');
 
+    $subjectField = $('[name="subject"]');
     $templateDropdown = $('[name="template"]');
     $htmlMessageEditor = $('[name="html_message"]');
     isEmailForm = $emailTemplateRow.length > 0;

tests/js/specs/letterheads-dropdown.spec.js

@@ -1,6 +1,7 @@
 (($, crmWysiwyg) => {
   describe('Letterheads Dropdown', () => {
-    let $letterheadDropdown, $letterheadDropdownRow, $templateDropdownRow, $messageEditor;
+    let $letterheadDropdown, $letterheadDropdownRow, $templateDropdownRow,
+      $messageEditor, $subjectField;
 
     afterEach(() => {
       $('body').empty();
@@ -63,6 +64,7 @@
         $('body').append(getEmailFormFixture());
         $().triggerBlockedOnReadyListeners();
 
+        $subjectField = $('[name="subject"]');
         $letterheadDropdown = $(':contains("Select Letterhead")').parents('tr').find('select');
         $messageEditor = $('.crm-form-wysiwyg');
 
@@ -84,16 +86,22 @@
         expect(crmWysiwyg.getVal($messageEditor))
           .toContain('Example content');
       });
+
+      it('updates the subject using the letterhead title', () => {
+        expect($subjectField.val()).toBe('Letterhead (Welsh)');
+      });
     });
 
     describe('when selecting no letterhead', () => {
       beforeEach(() => {
         $('body').append(getEmailFormFixture());
         $().triggerBlockedOnReadyListeners();
 
+        $subjectField = $('[name="subject"]');
         $letterheadDropdown = $(':contains("Select Letterhead")').parents('tr').find('select');
         $messageEditor = $('.crm-form-wysiwyg');
 
+        $subjectField.val('Example Subject');
         crmWysiwyg._create($messageEditor);
         crmWysiwyg.setVal(
           $messageEditor,
@@ -114,6 +122,10 @@
         expect(crmWysiwyg.getVal($messageEditor))
           .toContain('Example content');
       });
+
+      it('clears the subject', () => {
+        expect($subjectField.val()).toBe('');
+      });
     });
 
     describe('when changing the current template', () => {
@@ -152,6 +164,10 @@
         expect(crmWysiwyg.getVal($messageEditor))
           .toContain('Template content');
       });
+
+      it('updates the subject using the letterhead title', () => {
+        expect($subjectField.val()).toBe('Letterhead (Welsh)');
+      });
     });
 
     /**
@@ -167,8 +183,8 @@
             <td><select name="template"></select></td>
           </tr>
           <tr>
-            <td></td>
-            <td></td>
+            <td>Subject</td>
+            <td><input name="subject" /></td>
           </tr>
           <tr>
             <td colspan="2">
@@ -193,8 +209,8 @@
               <td><select name="template"></select></td>
             </tr>
             <tr>
-              <td></td>
-              <td></td>
+              <td>Subject</td>
+              <td><input name="subject" /></td>
             </tr>
             <td colspan="2">
               <textarea name="html_message" class="crm-form-wysiwyg"></textarea>