@defra/flood-webchat 0.0.1-alpha.2 → 0.0.1-alpha.4

package/README.md

@@ -1,9 +1,81 @@
 # flood-webchat
 
 ## Useful Links
+
 - [Development Guide](./docs/development-guide.md)
 - [How to Publish](./docs/how-to-publish.md)
 
 ## Usage
-TBC
 
+### Installation
+
+Run:
+
+```shell
+npm i @defra/flood-webchat
+```
+
+### Server Side Javascript
+
+You will need to implement an endpoint on your server which checks the availability of webchat. An express example can
+be seen below:
+
+```js
+
+import getAvailability from '@defra/flood-webchat'
+//... the rest of your server setup
+const webchatOptions = {
+  clientId: process.env.CXONE_CLIENT_ID,
+  clientSecret: process.env.CXONE_CLIENT_SECRET,
+  accessKey: process.env.CXONE_ACCESS_KEY,
+  accessSecret: process.env.CXONE_ACCESS_SECRET,
+  skillEndpoint: process.env.CXONE_SKILL_ENDPOINT,
+  hoursEndpoint: process.env.CXONE_HOURS_ENDPOINT,
+  maxQueueCount: process.env.CXONE_MAX_QUEUE_COUNT
+}
+
+app.get('/webchat-availability', async (req, res, next) => {
+  try {
+    const response = await getAvailability(webchatOptions)
+    return res.status(200).json(response)
+  } catch (err) {
+    next(err)
+  }
+})
+```
+
+### Client Side Javascript
+
+You will also need to initialise webchat in your client side code:
+
+```js
+import * as webchat from '@defra/flood-webchat';
+
+if (document.getElementById('wc-availability')) {
+  webchat.init('wc-availability', {
+    brandId: 'your brand id',
+    channelId: 'your channel id',
+    environmentName: 'your environment name',
+    availabilityEndpoint: '/webchat-availability'
+  })
+}
+```
+
+### HTML
+
+In your html, will need to add the "Start Chat" link with some placeholder text for if webchat is not supported in the
+user's browser.
+```html
+<div id="wc-availability">
+    <p>Webchat is not supported with your browser</p>
+</div>
+```
+
+And finally a script tag, to prevent the webchat widget "flashing" on page load/reload.
+```html
+<script>
+    if (window.location.hash === '#webchat' && window.matchMedia('(max-width: 640px)').matches) {
+        document.body.classList.add('wc-hidden')
+    }
+</script>
+```

package/babel.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
+}

package/dist/templates.js

@@ -0,0 +1,554 @@
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["agent-typing.html"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "<li class=\"wc-list__item wc-list__item--outbound\" data-wc-agent-typing>\n  <div class=\"wc-list__item-meta\">";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"name"), env.opts.autoescape);
+output += " is typing</div>\n  <div class=\"wc-list__item-inner\"><svg width=\"28\" height=\"16\" x=\"0px\" y=\"0px\" viewBox=\"0 0 28 16\"><circle stroke=\"none\" cx=\"3\" cy=\"8\" r=\"3\" fill=\"currentColor\"></circle><circle stroke=\"none\" cx=\"14\" cy=\"8\" r=\"3\" fill=\"currentColor\"></circle><circle stroke=\"none\" cx=\"25\" cy=\"8\" r=\"3\" fill=\"currentColor\"></circle></svg></div>\n</li>";
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["availability.html"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "<div class=\"wc-live\" aria-live=\"polite\" data-wc-availability-live></div>\n";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"isLink")) {
+output += "\n<div class=\"wc-link\" data-wc-link>\n  <div class=\"wc-link__inner\">\n    <a href=\"#webchat\" id=\"wc-open\" role=\"button\" draggable=\"false\" class=\"wc-open-btn\" data-wc-open-btn data-wc-focus-visible>\n      ";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"btnText"), env.opts.autoescape);
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"unseen")) {
+output += "<span class=\"wc-open-btn__unseen\">";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"unseen"), env.opts.autoescape);
+output += "</span> <span class=\"govuk-visually-hidden\">new message";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"unseen") > 1) {
+output += "s";
+;
+}
+output += "</span>";
+;
+}
+output += "\n    </a>\n  </div>\n</div>\n";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"isText")) {
+output += "\n";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"availability") == "EXISTING" || runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"availability") == "UNAVAILABLE") {
+output += "\n<p class=\"govuk-body\">When it is available, a 'start chat' link will appear.</p>\n";
+;
+}
+else {
+output += "\n<p class=\"govuk-body\">Checking availability</p>\n";
+;
+}
+output += "\n";
+;
+}
+;
+}
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["body.html"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "UNAVAILABLE") {
+output += "\n<div class=\"wc-content\">\n  ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"name")) {
+output += "\n  <a href=\"#\" class=\"wc-back-link\" data-wc-start-back-btn>Your name and question</a>\n  ";
+;
+}
+output += "\n  <h3 id=\"wc-subtitle\" class=\"govuk-heading-m\">Webchat is currently not available</h3>\n  <p>Try again later, or call Floodline:</p>\n  <p><strong>Floodline helpline</strong><br/>Telephone: 0345 988 1188<br>Textphone: 0345 602 6340<br>Open 24 hours a day, 7 days a week<br><a href=\"https://gov.uk/call-charges\">Find out more about call charges</a></p>\n  <p>We’re running webchat as a trial, it will not always be available.</p>\n</div>\n\n";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "PRECHAT") {
+output += "\n<div class=\"wc-content\">\n  <h3 id=\"wc-subtitle\" class=\"govuk-heading-m\">What you can use webchat for</h3>\n  <p>Webchat lets you talk directly to a Floodline adviser.</p>\n  <p>You can use webchat to get: </p>\n  <ul class=\"govuk-list govuk-list--bullet\">\n    <li>current flood warnings and alerts in your area</li>\n    <li>information on the flood warning service</li>\n    <li>advice on what to do before, during and after a flood</li>\n  </ul>\n  <p>There are other ways to <a href=\"https://www.gov.uk/sign-up-for-flood-warnings\">sign up for flood warnings</a> and <a href=\"https://defragroup.eu.qualtrics.com/jfe/form/SV_8uMAuaH3kbJl965?Source=https://check-for-flooding.service.gov.uk\">manage your flood warnings account</a>.</p>\n  <p>Do not use webchat to <a href=\"https://www.gov.uk/report-flood-cause\">report a flood</a>.</p>\n  <button class=\"wc-start-btn govuk-!-margin-top-1\" data-module=\"govuk-button\" data-wc-start-btn>\n    Continue\n  </button>\n  <h3 class=\"govuk-heading-m\">Other flood information</h3>\n  <p>Call Floodline for all other flood and flood warning information.</p>\n  <p><strong>Floodline helpline</strong><br/>Telephone: 0345 988 1188<br>Textphone: 0345 602 6340<br>Open 24 hours a day, 7 days a week<br><a href=\"https://gov.uk/call-charges\">Find out more about call charges</a></p>\n</div>\n\n";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "START") {
+output += "\n<div class=\"wc-content\">\n  <a href=\"#\" class=\"wc-back-link\" data-wc-prechat-back-btn>What you can use webchat for</a>\n  ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")) {
+output += "\n  <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\" tabindex=\"-1\" data-wc-error-summary>\n    <div role=\"alert\">\n      <h3 id=\"wc-error\" class=\"govuk-error-summary__title\">\n        There is a problem\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"nameEmpty")) {
+output += "\n          <li>\n            <a href=\"#name\" data-wc-error-summary-link>Enter your name</a>\n          </li>\n          ";
+;
+}
+output += "\n          ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"questionEmpty")) {
+output += "\n          <li>\n            <a href=\"#question\" data-wc-error-summary-link>Enter your question</a>\n          </li>\n          ";
+;
+}
+output += "\n          ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"questionExceeded")) {
+output += "\n          <li>\n            <a href=\"#question\" data-wc-error-summary-link>Your question must be 500 characters or less</a>\n          </li>\n          ";
+;
+}
+output += "\n        </ul>\n      </div>\n    </div>\n  </div>\n  ";
+;
+}
+output += "\n  <h3 id=\"wc-subtitle\" class=\"govuk-heading-m\">Your name and question</h3>\n  <form data-wc-start-form>\n    <div class=\"govuk-form-group ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"nameEmpty")) {
+output += "govuk-form-group--error";
+;
+}
+output += "\">\n      <label class=\"govuk-label\" for=\"name\">\n        Your name\n      </label>\n      ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"nameEmpty")) {
+output += "\n      <p class=\"govuk-error-message\">\n        <span class=\"govuk-visually-hidden\">Error:</span> Enter your name\n      </p>\n      ";
+;
+}
+output += "\n      <input class=\"govuk-input ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"nameEmpty")) {
+output += "govuk-input--error";
+;
+}
+output += "\" id=\"name\" name=\"name\" type=\"text\" value=\"";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"name"), env.opts.autoescape);
+output += "\">\n    </div>\n    <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"500\">\n      <div class=\"govuk-form-group ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"questionEmpty") || runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"questionExceeded")) {
+output += "govuk-form-group--error";
+;
+}
+output += "\">\n        <label class=\"govuk-label\" for=\"question\">\n          Your question\n        </label>\n        ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"questionEmpty") || runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"questionExceeded")) {
+output += "\n        <p class=\"govuk-error-message\">\n          <span class=\"govuk-visually-hidden\">Error:</span>\n          ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"questionEmpty")) {
+output += "\n          Enter your question\n          ";
+;
+}
+else {
+output += "\n          Your question must be 500 characters or less\n          ";
+;
+}
+output += "\n        </p>\n        ";
+;
+}
+output += "\n        <textarea class=\"govuk-textarea wc-textarea-question";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"questionEmpty") || runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"questionExceeded")) {
+output += " wc-textarea--error";
+;
+}
+output += " govuk-js-character-count\" id=\"question\" name=\"question\" rows=\"5\" aria-describedby=\"question-info\">";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"question"), env.opts.autoescape);
+output += "</textarea>\n      </div>\n      <div id=\"question-info\" class=\"wc-hint govuk-hint govuk-character-count__message\">\n        You can enter up to 500 characters\n      </div>\n    </div>\n    <button class=\"wc-submit-btn govuk-!-margin-top-1\" data-module=\"govuk-button\" data-wc-request-chat-btn>\n      Request chat\n    </button>\n  </form>\n</div>\n\n";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "OPEN") {
+output += "\n<ul class=\"wc-list\" data-wc-list>\n  ";
+frame = frame.push();
+var t_3 = runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"messages");
+if(t_3) {t_3 = runtime.fromIterator(t_3);
+var t_2 = t_3.length;
+for(var t_1=0; t_1 < t_3.length; t_1++) {
+var t_4 = t_3[t_1];
+frame.set("message", t_4);
+frame.set("loop.index", t_1 + 1);
+frame.set("loop.index0", t_1);
+frame.set("loop.revindex", t_2 - t_1);
+frame.set("loop.revindex0", t_2 - t_1 - 1);
+frame.set("loop.first", t_1 === 0);
+frame.set("loop.last", t_1 === t_2 - 1);
+frame.set("loop.length", t_2);
+output += "\n  ";
+output += runtime.suppressValue(env.getFilter("safe").call(context, runtime.memberLookup((t_4),"html")), env.opts.autoescape);
+output += "\n  ";
+;
+}
+}
+frame = frame.pop();
+output += "\n</ul>\n\n";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "TIMEOUT") {
+output += "\n<div class=\"wc-content\">\n  <h3 id=\"wc-subtitle\" class=\"govuk-heading-m\">Your session has timed out</h3>\n  <p>You did not do anything for ";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"timeout"), env.opts.autoescape);
+output += ".</p>\n  <div class=\"govuk-button-group\">\n    <button class=\"wc-submit-feedback-btn\" data-module=\"govuk-button\" data-wc-feedback-btn>Give feedback</button>\n    <a href=\"#\" role=\"button\" draggable=\"false\" data-module=\"govuk-button\" data-wc-close-btn>Cancel</a>\n  </div>\n</div>\n\n";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "END") {
+output += "\n<div class=\"wc-content\">\n  <h3 id=\"wc-subtitle\" class=\"govuk-heading-m\">Are you sure you want to end the chat?</h3>\n  <div class=\"govuk-button-group\">\n    <button class=\"wc-confirm-end-btn\" data-module=\"govuk-button\" data-wc-confirm-end-btn>Yes, end chat</button>\n    <a href=\"#\" role=\"button\" draggable=\"false\" data-module=\"govuk-button\" data-wc-resume-btn>No, resume chat</a>\n  </div>\n</div>\n\n";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "FEEDBACK") {
+output += "\n<div class=\"wc-content\">\n  ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")) {
+output += "\n  <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\" tabindex=\"-1\" data-wc-error-summary>\n    <div role=\"alert\">\n      <h3 id=\"wc-error\" class=\"govuk-error-summary__title\">\n        There is a problem\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"satisfactionEmpty")) {
+output += "\n          <li>\n            <a href=\"#satisfaction\" data-wc-error-summary-link>Select how did you feel about webchat</a>\n          </li>\n          ";
+;
+}
+output += "\n        </ul>\n      </div>\n    </div>\n  </div>\n  ";
+;
+}
+output += "\n  <h3 id=\"wc-subtitle\" class=\"govuk-heading-m\">Give feedback</h3>\n  <div class=\"govuk-form-group";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"satisfactionEmpty")) {
+output += " govuk-form-group--error";
+;
+}
+output += "\">\n    <fieldset class=\"govuk-fieldset\">\n      <legend class=\"govuk-fieldset__legend\">\n        Overall, how did you feel about your webchat\n      </legend>\n      ";
+if(runtime.memberLookup((runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"error")),"satisfactionEmpty")) {
+output += "\n      <p class=\"govuk-error-message\">\n        <span class=\"govuk-visually-hidden\">Error:</span> Select how did you feel about your webchat\n      </p>\n      ";
+;
+}
+output += "\n      <div class=\"govuk-radios govuk-radios--small\" data-module=\"govuk-radios\">\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"satisfied\" name=\"satisfaction\" type=\"radio\" value=\"Satisfied\">\n          <label class=\"govuk-label govuk-radios__label\" for=\"satisfied\">\n            Satisfied\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"no-opinion\" name=\"satisfaction\" type=\"radio\" value=\"No opinion\">\n          <label class=\"govuk-label govuk-radios__label\" for=\"no-opinion\">\n            No opinion\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"dissatisfied\" name=\"satisfaction\" type=\"radio\" value=\"Dissatisfied\">\n          <label class=\"govuk-label govuk-radios__label\" for=\"dissatisfied\">\n            Dissatisfied\n          </label>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n  <div class=\"govuk-form-group\">\n    <label class=\"govuk-label\" for=\"improvements\">\n      How can we improve webchat? (optional)\n    </label>\n    <textarea class=\"govuk-textarea govuk-!-margin-bottom-4\" id=\"improvements\" name=\"improvements\" rows=\"5\"></textarea>\n  </div>\n  <div class=\"govuk-button-group\">\n    <button class=\"wc-feedback-btn\" data-module=\"govuk-button\" data-wc-submit-feedback-btn>Submit</button>\n    <a href=\"#\" role=\"button\" draggable=\"false\" data-module=\"govuk-button\" data-wc-close-btn>Cancel</a>\n  </div>\n</div>\n\n";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "FINISH") {
+output += "\n<div class=\"wc-content\">\n  <h3 id=\"wc-subtitle\" class=\"govuk-heading-m\">Thank you for your feedback</h3>\n  <div>\n    <a href=\"#\" role=\"button\" draggable=\"false\" data-module=\"govuk-button\" data-wc-focus-visible data-wc-close-btn>Close window</a>\n  </div>\n</div>\n\n";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "SETTINGS") {
+output += "\n<div class=\"wc-content\">\n  <div class=\"govuk-form-group\">\n    <fieldset class=\"govuk-fieldset\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n        <h3 id=\"wc-subtitle\" class=\"govuk-heading-m\">Change settings</h3>\n      </legend>\n      <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"audio\" name=\"audio\" type=\"checkbox\" value=\"audio\"";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"hasAudio")) {
+output += " checked";
+;
+}
+output += ">\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"audio\">\n            Play a sound when receiving a new message\n          </label>\n        </div>\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"scroll\" name=\"scroll\" type=\"checkbox\" value=\"scroll\"";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"isScroll")) {
+output += " checked";
+;
+}
+output += ">\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"scroll\">\n            Scroll automatically to a new message\n          </label>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n  <div class=\"govuk-button-group\">\n    <button class=\"wc-feedback-btn\" data-module=\"govuk-button\" data-wc-save-settings-btn>Save</button>\n    <a href=\"#\" role=\"button\" draggable=\"false\" data-module=\"govuk-button\" data-wc-cancel-settings-btn>Cancel</a>\n  </div>\n</div>\n\n";
+;
+}
+else {
+output += "\n<div class=\"wc-content\">\n  <p id=\"wc-subtitle\" class=\"govuk-heading-m\">Connecting to Floodline</p>\n</div>\n";
+;
+}
+;
+}
+;
+}
+;
+}
+;
+}
+;
+}
+;
+}
+;
+}
+;
+}
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["footer.html"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "OPEN") {
+output += "\n<form class=\"wc-message\" data-wc-message-form>\n  <label class=\"wc-message__label";
+if(env.getFilter("length").call(context, runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"textboxValue"))) {
+output += " wc-message__label--hidden";
+;
+}
+output += "\" for=\"message\">\n    ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"textboxValue")) {
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"textboxValue"), env.opts.autoescape);
+;
+}
+else {
+output += "Your message<span class=\"govuk-visually-hidden\"> (enter key submits)</span>";
+;
+}
+output += "\n  </label>\n  <textarea rows=\"1\" aria-required=\"true\" class=\"wc-message__textbox\" id=\"message\" name=\"message\"";
+if(!runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"isMobile")) {
+output += " data-wc-enter-submit";
+;
+}
+output += " data-wc-focus-parent data-wc-autosize data-wc-textbox></textarea>\n  <input type=\"submit\" class=\"wc-message__send\" value=\"Send\" data-wc-send-btn />\n</form>\n<div class=\"wc-settings\">\n  <a href=\"#\" class=\"wc-settings-btn\" role=\"button\" data-module=\"govuk-button\" data-wc-settings-btn>Settings</a>\n  <!-- <a href=\"#\" class=\"wc-audio-btn\" role=\"button\" data-module=\"govuk-button\" data-wc-audio-btn>Turn audio <span>";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"hasAudio")) {
+output += "off";
+;
+}
+else {
+output += "on";
+;
+}
+output += "</span></a> -->\n  ";
+if(env.getFilter("length").call(context, runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"messages"))) {
+output += "\n  <a href=\"#\" class=\"wc-transcript-btn\" download=\"transcript.txt\" data-wc-transcript-btn>Save chat</a>\n  ";
+;
+}
+output += "\n</div>\n";
+;
+}
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["header.html"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "<div class=\"wc-header\">\n  ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"isBack")) {
+output += "\n  <button class=\"wc-back-btn\" aria-label=\"Back\" data-wc-back-btn ";
+if(!runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"isMobile")) {
+output += "hidden";
+;
+}
+output += ">\n    <svg aria-hidden=\"true\" focusable=\"false\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n      <path d=\"M4.828,11L12.314,18.485L10.899,19.899L1,10L10.899,0.101L12.314,1.515L4.828,9L19,9L19,11L4.828,11Z\" fill=\"currentColor\"/>\n    </svg>\n  </button>    \n  ";
+;
+}
+output += "\n  <h2 id=\"wc-title\" class=\"wc-title\">Floodline webchat</h2>\n  ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "OPEN" || runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "END") {
+output += "\n  <button class=\"wc-hide-btn\" aria-label=\"Minimise the webchat\" data-wc-hide-btn ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"isMobile")) {
+output += "hidden";
+;
+}
+output += ">\n    <svg aria-hidden=\"true\" focusable=\"false\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n      <path d=\"M10 14.4l-7-7L4.4 6l5.6 5.6L15.6 6 17 7.4l-7 7z\" fill=\"currentColor\"/>\n    </svg>\n  </button>   \n  ";
+;
+}
+else {
+output += "\n  <button class=\"wc-close-btn\" aria-label=\"Close the webchat\" data-wc-close-btn ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"isMobile")) {
+output += "hidden";
+;
+}
+output += ">\n    <svg aria-hidden=\"true\" focusable=\"false\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n      <path d=\"M10,8.6L15.6,3L17,4.4L11.4,10L17,15.6L15.6,17L10,11.4L4.4,17L3,15.6L8.6,10L3,4.4L4.4,3L10,8.6Z\" fill=\"currentColor\"></path>\n    </svg>\n  </button>\n  ";
+;
+}
+output += "\n</div>\n";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"view") == "OPEN") {
+output += "\n<div class=\"wc-status\">\n  <div id=\"wc-subtitle\" class=\"wc-status__content\" data-wc-status>\n    ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"availability") == "AVAILABLE" || runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"availability") == "EXISTING") {
+output += "\n    ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"status") == "closed") {
+output += "\n    ";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"assignee")) {
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"assignee"), env.opts.autoescape);
+output += " ended the session";
+;
+}
+else {
+output += "Session ended by adviser";
+;
+}
+output += "\n    ";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"assignee")) {
+output += "\n    You are speaking with ";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"assignee"), env.opts.autoescape);
+output += "\n    ";
+;
+}
+else {
+output += "\n    No advisers currently available \n    ";
+;
+}
+;
+}
+output += "\n    ";
+;
+}
+else {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"availability") == "UNAVAILABLE") {
+output += "\n    Webchat is not currently available\n    ";
+;
+}
+else {
+output += "\n    Connecting to Floodline\n    ";
+;
+}
+;
+}
+output += "\n  </div>\n  <div class=\"wc-status__button\">\n    <a href=\"#\" role=\"button\" data-module=\"govuk-button\" class=\"wc-end-btn\" data-wc-end-btn>End chat</a>\n  </div>\n</div>\n";
+;
+}
+output += "\n<div class=\"wc-live\" aria-live=\"polite\" data-wc-panel-live></div>";
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["message.html"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "<li class=\"wc-list__item wc-list__item--";
+output += runtime.suppressValue(env.getFilter("lower").call(context, runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"direction")), env.opts.autoescape);
+output += "\">\n  <div class=\"";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"isGroupStart")) {
+output += "wc-list__item-meta";
+;
+}
+else {
+output += "govuk-visually-hidden";
+;
+}
+output += "\">";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"direction") == "outbound") {
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"assignee"), env.opts.autoescape);
+;
+}
+else {
+output += "You";
+;
+}
+output += "<span class=\"govuk-visually-hidden\">:</span></div>\n  <div class=\"wc-list__item-inner\">";
+output += runtime.suppressValue(env.getFilter("safe").call(context, runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"text")), env.opts.autoescape);
+output += "</div>\n</li>";
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["panel.html"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "<div id=\"wc-panel\" class=\"wc";
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "model")),"isOpen")) {
+output += " wc--open";
+;
+}
+output += "\" role=\"dialog\" tabindex=\"-1\" aria-labelledby=\"wc-title wc-subtitle\" aria-modal=\"false\" open data-wc>\n  <div class=\"wc__inner\">\n    <div class=\"wc__header\" data-wc-header></div>\n    <div class=\"wc__body\" data-wc-body></div>\n    <div class=\"wc__footer\" data-wc-footer></div>\n  </div>\n</div>";
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["skiplink.html"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "<a id=\"wc-skip\" href=\"#webchat\" class=\"govuk-skip-link\" data-module=\"govuk-skip-link\" data-wc-skiplink data-wc-open-btn>\n  Skip to webchat\n</a>";
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+

package/docs/development-guide.md

@@ -2,4 +2,5 @@
 
 1) Clone the repo
 2) Run `npm install` to install the dependencies.
-3) Run `npm run dev` to run a demo server with hot module reloading on http://localhost:9000.
+3) Create a `.env` file in the root of the project (variables are with our other secrets under `node/configLocal/flood-webchat.env`)
+4) Run `npm run dev` to run a demo server with hot module reloading on http://localhost:9000.