Optional qualitative (add the option to disable text responses)

README.md

@@ -21,6 +21,7 @@ import userFeedbackForm from '@nhsuk/user-feedback-form';
 userFeedbackForm({
     cssSelector: "#my-div-id",
     formEndpoint: "https://example.com/my-api-endpoint/",
+    enableTextResponse: false,
 });
 ```
 
@@ -37,12 +38,14 @@ The latest javascript file can be found in github releases https://github.com/nh
 ...
 
 <!-- where you want the form to appear -->
-<div id="nhsuk-user-feedback-form" data-form-endpoint="https://example.com/endpoint/"></div>
+<div id="nhsuk-user-feedback-form" data-form-endpoint="https://example.com/endpoint/" data-enable-text-response="false"></div>
 ```
 
 #### Attributes
 
 `data-form-endpoint` - (required) An HTTP data store endpoint to POST data to. Include the trailing slash
+`data-enable-text-response` - (optional) If "true", text responses will be enabled. If "false" or left out,
+text responses will not be disabled.
 
 ## API
 

local.settings.json

@@ -0,0 +1,12 @@
+{
+    "IsEncrypted": false,
+    "Values": {
+      "FUNCTIONS_WORKER_RUNTIME": "node",
+      "AzureWebJobsStorage": "{AzureWebJobsStorage}",
+      "MONGO_CONNECTION_STRING": "mongodb://localhost"
+    },
+    "Host": {
+      "LocalHttpPort": 7071,
+      "CORS": "*"
+    }
+  }

src/confirmation/index.js

@@ -2,10 +2,26 @@ import Screen from '../screen';
 import html from './template.html';
 
 export default class ConfirmationScreen extends Screen {
+  getEnableTextResponse() {
+    return this.app.enableTextResponse;
+  }
+
   render() {
-    this.updateHtml(html);
+    const textResponseLabel = '<p>We do not check feedback every day and cannot respond to comments.</p>';
+    const blankLabel = '';
+
+    let label;
+
+    /* If data-enable-text-response attribute is "false" show a blank label */
+    if (this.getEnableTextResponse() === false) {
+      label = blankLabel;
+    } else {
+      label = textResponseLabel;
+    }
+
+    const optionalHtml = html.replace('{{ label }}', label);
 
-    const node = this.updateHtml(html);
+    const node = this.updateHtml(optionalHtml);
     const header = node.querySelector('.nhsuk-user-feedback-form-header');
     header.setAttribute('tabIndex', '-1');
     header.focus();

src/confirmation/template.html

@@ -1,5 +1,5 @@
 <div class="nhsuk-panel nhsuk-u-reading-width">
   <h2 class="nhsuk-heading-s nhsuk-user-feedback-form-header">Thank you for your feedback.</h2>
-  <p>We do not check feedback every day and cannot respond to comments.</p>
+   {{ label }}
   <p>Find out how to <a href="/contact-us/">contact the NHS</a> if you need to speak to someone.</p>
 </div>

src/index.js

@@ -8,11 +8,19 @@ import PostData from './post-data';
 
 import './nhsuk-feedback-form.css';
 
+function getEnableTextResponse(container) {
+  if (container.getAttribute('data-enable-text-response') === 'true') {
+    return true;
+  }
+  return false;
+}
+
 /**
  * Get settings from data attributes on the container div
  * @returns {Object} settings
  */
 const getSettingsFromContainer = (container) => ({
+  enableTextResponse: getEnableTextResponse(container),
   formEndpoint: container.getAttribute('data-form-endpoint'),
 });
 
@@ -34,20 +42,32 @@ class App {
 
     // The initial question's yes/no response. true=yes, false=no, null=unanswered.
     this.isSatisfiedResponse = null;
+
+    this.enableTextResponse = this.settings.enableTextResponse;
   }
 
   onYes() {
     this.isSatisfiedResponse = true;
     this.postData.postYes();
-    new TextCommentsScreen(this).render();
+
+    if (this.enableTextResponse === false) {
+      new ConfirmationScreen(this).render();
+    } else {
+      new TextCommentsScreen(this).render();
+    }
 
     onFeedbackEvent(this.container, true);
   }
 
   onNo() {
     this.isSatisfiedResponse = false;
     this.postData.postNo();
-    new TextCommentsScreen(this).render();
+
+    if (this.enableTextResponse === false) {
+      new ConfirmationScreen(this).render();
+    } else {
+      new TextCommentsScreen(this).render();
+    }
 
     onFeedbackEvent(this.container, false);
   }
@@ -67,6 +87,7 @@ class App {
  * @param {Object} settings
  * @param {string} settings.formEndpoint - API endpoint to post data to
  * @param {string} settings.cssSelector - CSS selector to get the container div
+ * @param {boolean} settings.enableTextResponse - Disables text responses from the form
  */
 export default function (settings = {}) {
   const settingsWithDefaults = {

tests/example/disabled-text-response.html

@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+
+    <link rel="shortcut icon" href="">
+
+    <title>User feedback form test page</title>
+
+    <link rel="stylesheet" href="../../node_modules/nhsuk-frontend/dist/nhsuk.css">
+
+    <script src="../../dist/user-feedback-form.js" type="text/javascript" defer></script>
+  </head>
+  <body>
+    <div class="nhsuk-width-container">
+      <main class="nhsuk-main-wrapper">
+        <h1>User feedback form:</h1>
+        <div id="nhsuk-user-feedback-form" data-form-endpoint="http://localhost:8080/my-endpoint/" data-enable-text-response="false"></div>
+
+        <!--
+        If you have the user-feedback-store running locally and want to test it, the endpoint setting should probably be this:
+        <div id="nhsuk-user-feedback-form" data-form-endpoint="http://localhost:7071/"></div>
+        -->
+      </main>
+    </div>
+  </body>
+</html>

tests/example/index.html

@@ -17,7 +17,7 @@
     <div class="nhsuk-width-container">
       <main class="nhsuk-main-wrapper">
         <h1>User feedback form:</h1>
-        <div id="nhsuk-user-feedback-form" data-form-endpoint="http://localhost:8080/my-endpoint/"></div>
+        <div id="nhsuk-user-feedback-form" data-form-endpoint="http://localhost:8080/my-endpoint/" data-enable-text-response="true"></div>
 
         <!--
         If you have the user-feedback-store running locally and want to test it, the endpoint setting should probably be this:

tests/integration/disable-text-response.test.js

@@ -0,0 +1,25 @@
+/* global page expect */
+
+beforeEach(async () => {
+  await page.goto('http://localhost:8080/tests/example/disabled-text-response.html');
+  await page.click('.nhsuk-user-feedback-form--yes');
+});
+
+describe('Form is added to page', () => {
+  it('should display on page', async () => {
+    const banner = await page.$('.nhsuk-user-feedback-form');
+    expect(banner).not.toBe(null);
+  });
+});
+
+describe('Skip text response', () => {
+  it('should load the confirmation page straight away', async () => {
+    const title = await page.$eval('h2', (element) => element.innerText);
+    expect(title).toBe('Thank you for your feedback.');
+  });
+
+  it('should not have feedback message', async () => {
+    const message = await page.$eval('p', (element) => element.innerText);
+    expect(message).not.toBe('We do not check feedback every day and cannot respond to comments.');
+  });
+});