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

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "description": "",
   "type": "module",
   "main": "src/server/index.js",
   "browser": "src/client/index.js",
   "scripts": {
     "test": "npm run lint && npm run unit-test",
-    "dev": "(cd demo && webpack server)",
+    "dev": "npm run compile-templates && node -r dotenv/config node_modules/.bin/webpack server --config demo/webpack.config.mjs",
     "unit-test": "jest",
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:fix": "npm run lint:js -- --fix && npm run lint:scss -- --fix",
     "lint:js": "standard",
     "lint:scss": "stylelint \"**/*.scss\"",
-    "prepare": "node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') { throw e } }\""
+    "postinstall": "npm run compile-templates",
+    "prepare": "node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') { throw e } }\"",
+    "compile-templates": "mkdir -p dist && nunjucks-precompile templates > ./dist/templates.js"
   },
   "standard": {
     "ignore": [
@@ -34,21 +36,28 @@
     "babel-loader": "^9.1.3",
     "core-js": "^2.6.11",
     "css-loader": "^6.8.1",
+    "dotenv": "^16.3.1",
     "husky": "^8.0.3",
     "jest": "^29.6.3",
     "jest-environment-jsdom": "^29.6.3",
     "mini-css-extract-plugin": "^2.7.6",
+    "node-cache": "^5.1.2",
     "node-sass": "^9.0.0",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "standard": "^17.1.0",
     "stylelint": "^15.10.3",
-    "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-config-gds": "^1.0.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "peerDependencies": {
     "govuk-frontend": "^3.14.0"
+  },
+  "dependencies": {
+    "@nice-devone/nice-cxone-chat-web-sdk": "1.3.0",
+    "axios": "^0.24.0",
+    "nunjucks": "^3.2.4"
   }
 }

package/src/client/index.js

@@ -1,3 +1,13 @@
-export function init (value) {
-  return value === true
+import WebChat from './lib/webchat.js'
+
+/**
+ * @param {string} id
+ * @param {object} options
+ * @param {string} options.brandId
+ * @param {string} options.channelId
+ * @param {string} options.environmentName
+ * @param {string} options.availabilityEndpoint
+ **/
+export function init (id, options) {
+  return new WebChat(id, options)
 }

package/src/client/lib/availability.js

@@ -0,0 +1,75 @@
+import nunjucks from './nunjucks.js'
+
+class Availability {
+  constructor (id, openChatCb) {
+    // Set availability container
+    this.container = document.getElementById(id)
+
+    // Events
+    document.addEventListener('click', e => {
+      if (e.target.hasAttribute('data-wc-open-btn')) {
+        console.log('click', e.target.id)
+        openChatCb(e, e.target.id)
+      }
+    })
+    document.addEventListener('keydown', e => {
+      if (e.key === ' ' && e.target.hasAttribute('data-wc-open-btn')) {
+        e.preventDefault()
+      }
+    })
+    document.addEventListener('keyup', e => {
+      if (e.key === ' ' && e.target.hasAttribute('data-wc-open-btn')) {
+        openChatCb(e, e.target.id)
+      }
+    })
+  }
+
+  update (state) {
+    console.log('availability.update()')
+
+    const container = this.container
+    const isText = !container.hasAttribute('data-wc-no-text')
+    const hasThread = state.hasThread
+    const isLink = hasThread || (isText && state.availability === 'AVAILABLE')
+    const btnText = hasThread ? 'Show chat' : 'Start chat'
+
+    // Update container
+    container.innerHTML = nunjucks.render('availability.html', {
+      model: {
+        isText,
+        isLink,
+        availability: state.availability,
+        btnText,
+        unseen: state.unseen
+      }
+    })
+
+    // Conditionally reinstate focus after dom replacement
+    const link = container.querySelector('[data-wc-open-btn]')
+    const hasFocus = document.activeElement.hasAttribute('data-wc-open-btn')
+    if (hasFocus && link) {
+      link.focus()
+    }
+  }
+
+  scroll (state) {
+    const container = this.container
+    const link = container.querySelector('[data-wc-link]')
+    if (!link) {
+      return
+    }
+
+    // Calculate offset
+    const rect = container.getBoundingClientRect()
+    const isBelowFold = rect.top + 35 > (window.innerHeight || document.documentElement.clientHeight)
+
+    // Toggle static/sticky display
+    const isHidden = (state.view === 'OPEN' || state.view === 'END') && !state.isOpen
+    const isFixed = isHidden && isBelowFold
+    document.documentElement.classList.toggle('wc-scroll-padding', isFixed)
+    document.body.classList.toggle('wc-scroll-padding', isFixed)
+    link.classList.toggle('wc-link--fixed', isFixed)
+  }
+}
+
+export default Availability

package/src/client/lib/config.js

@@ -0,0 +1,17 @@
+class Config {
+  static _breakpoints = { // Max width
+    mobile: '640px',
+    tablet: '834px'
+  }
+
+  static maxQueue = 2
+  static timeout = -1 // 20 minutes
+  static countdown = -1 // Seconds
+  static poll = -1 // Seconds
+
+  static getBreakpoint (device) {
+    return this._breakpoints[device]
+  }
+}
+
+export default Config

package/src/client/lib/keyboard.js

@@ -0,0 +1,149 @@
+import Utils from './utils.js'
+
+class Keyboard {
+  static _isKeyboard = false
+
+  static init (state) {
+    this._state = state
+    this._detectFocus()
+
+    Utils.listenForDevice('mobile', this._updateInert.bind(this))
+  }
+
+  static _detectFocus () {
+    document.addEventListener('keydown', e => {
+      this._isKeyboard = true
+      if (e.key === 'Tab' || e.key === 'Escape' || e.key === 'Esc') {
+        this._constrainFocus(e)
+      }
+    })
+
+    document.addEventListener('keyup', e => {
+      this._isKeyboard = true
+      if (e.key === 'Tab') {
+        const el = this._focusParent()
+        if (el) {
+          this._toggleInert(el)
+        }
+      }
+    })
+
+    document.addEventListener('pointerdown', e => {
+      this._isKeyboard = false
+    })
+
+    document.addEventListener('focus', e => {
+      const isScope = !!e.target.closest('#wc-availability, #wc-panel')
+      if (!isScope) {
+        return
+      }
+      const target = e.target.hasAttribute('data-wc-focus-parent') ? e.target.parentNode : e.target
+      target.classList.toggle('wc-focus-visible', this._isKeyboard)
+    }, true)
+
+    document.addEventListener('blur', e => {
+      const target = e.target.hasAttribute('data-wc-focus-parent') ? e.target.parentNode : e.target
+      target.classList.remove('wc-focus-visible')
+    }, true)
+  }
+
+  static _isFocusable (el) {
+    const tagNames = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT']
+    const isHidden = el.hidden || el.style.display === 'none'
+    const isTextbox = el.getAttribute('role') === 'textbox'
+
+    return (tagNames.includes(el.tagName) || el.tabIndex >= 0 || isTextbox) && !isHidden
+  }
+
+  static _focusParent () {
+    const el = document.querySelector('[data-wc]')
+
+    if (el && !document.activeElement.closest('[data-wc]')) {
+      el.focus()
+    }
+
+    return el
+  }
+
+  static _constrainFocus (e) {
+    const el = this._focusParent()
+    if (!el) {
+      return
+    }
+
+    const focusableEls = this._getFocusableEls(el)
+    const firstFocusableEl = focusableEls[0]
+    const lastFocusableEl = focusableEls[focusableEls.length - 1]
+
+    if (e.shiftKey) {
+      if (document.activeElement === firstFocusableEl) {
+        lastFocusableEl.focus()
+        e.preventDefault()
+      }
+    } else {
+      if (document.activeElement === lastFocusableEl) {
+        firstFocusableEl.focus()
+        e.preventDefault()
+      }
+    }
+  }
+
+  static _toggleInert (el) {
+    const inert = document.querySelectorAll('[data-wc-inert]')
+    for (let i = 0; i < inert.length; i++) {
+      const el = inert[i]
+      el.removeAttribute('aria-hidden')
+      el.removeAttribute('data-wc-inert')
+    }
+    if (el) {
+      while (el.parentNode && el !== document.body) {
+        let sibling = el.parentNode.firstChild
+        while (sibling) {
+          if (sibling.nodeType === 1 && sibling !== el) {
+            if (!sibling.hasAttribute('aria-hidden')) {
+              sibling.setAttribute('aria-hidden', true)
+              sibling.setAttribute('data-wc-inert', '')
+            }
+          }
+          sibling = sibling.nextSibling
+        }
+        el = el.parentNode
+      }
+    }
+  }
+
+  static _updateInert () {
+    const isOpen = this._state.isOpen
+    const activeElement = document.activeElement
+    const isWithinDialog = activeElement && !!document.activeElement.closest('[data-wc][role="dialog"][open]')
+    const containerEl = document.querySelector('[data-wc]')
+    if (!isWithinDialog) {
+      this._toggleInert(isOpen ? containerEl : null)
+    }
+  }
+
+  static _getFocusableEls (el) {
+    const selectors = [
+      'a[href]:not([disabled])',
+      'button:not([disabled])',
+      'textarea:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      '*[tabindex="0"]:not([disabled])'
+    ]
+    let focusableEls = Array.from(el.querySelectorAll(selectors.join(',')))
+    focusableEls = focusableEls.filter(e => !e.closest('[hidden]') && !e.closest('[aria-hidden="true"]'))
+    return focusableEls
+  }
+
+  static toggleInert (el) {
+    this._toggleInert(el)
+  }
+
+  static getFirstFocusableEl () {
+    const focusableEls = this._getFocusableEls(document)
+    return focusableEls.length ? focusableEls[0] : null
+  }
+}
+
+export default Keyboard

package/src/client/lib/notification.js

@@ -0,0 +1,62 @@
+class Notification {
+  constructor () {
+    const url = '/public/sounds/notification.mp3'
+    this._url = url
+
+    // Create context
+    const context = new (window.AudioContext || window.webkitAudioContext)()
+    // context.addEventListener('statechange', () => {
+    //   console.log('Audio: ', context.state)
+    // })
+    this._context = context
+
+    // Unlock audio
+    this._unlockAudioContext()
+
+    // Load buffer
+    this._init(url)
+  }
+
+  _init () {
+    const context = this._context
+    const url = this._url
+
+    fetch(url)
+      .then(response => response.arrayBuffer())
+      .then(buffer => context.decodeAudioData(buffer))
+      .then(decodedData => {
+        this._buffer = decodedData
+      })
+      .catch(console.error)
+  }
+
+  _unlockAudioContext () {
+    const context = this._context
+    if (context.state === 'suspended') {
+      const events = ['touchstart', 'touchend', 'mousedown', 'wheel', 'keydown', 'click']
+      const unlock = e => {
+        events.forEach(event => {
+          document.body.removeEventListener(event, unlock)
+        })
+        context.resume()
+      }
+      events.forEach(event => {
+        document.body.addEventListener(event, unlock, false)
+      })
+    }
+  }
+
+  playSound () {
+    const context = this._context
+    const buffer = this._buffer
+    console.log('Play sound (context state: ', context.state, ')')
+
+    // Create source
+    const source = context.createBufferSource()
+    source.buffer = buffer
+    source.connect(context.destination)
+    source.start()
+  }
+}
+
+export default Notification

package/src/client/lib/nunjucks.js

@@ -0,0 +1,3 @@
+import '../../../dist/templates.js'
+import nunjucks from 'nunjucks/browser/nunjucks-slim.js'
+export default nunjucks

package/src/client/lib/panel.js

@@ -0,0 +1,293 @@
+import { Button, CharacterCount } from 'govuk-frontend'
+import Utils from './utils.js'
+import Config from './config.js'
+import Keyboard from './keyboard.js'
+import nunjucks from './nunjucks.js'
+
+class Panel {
+  constructor () {
+    this._container = null
+    this._timeout = Utils.getDuration(Config.timeout)
+  }
+
+  _initComponents (el) {
+    // Initialise GOV.UK components
+    const buttons = el.querySelectorAll('[data-module="govuk-button"]')
+    for (const button of buttons) {
+      new Button(button).init()
+    }
+    const characterCounts = el.querySelectorAll('[data-module="govuk-character-count"]')
+    for (const characterCount of characterCounts) {
+      new CharacterCount(characterCount).init()
+    }
+    // Initialise autoresize
+    const textbox = el.querySelector('[data-wc-textbox]')
+    if (textbox) {
+      Utils.autosize(textbox)
+    }
+  }
+
+  _updateMessagesLabel (total) {
+    const body = this.body
+    const label = `Conversation with ${total} message${total > 1 ? 's' : ''}`
+    body.setAttribute('aria-label', label)
+  }
+
+  _scrollToLatest (isScroll) {
+    if (!isScroll) {
+      return
+    }
+
+    // Scroll to latest
+    this.body.scrollTop = this.body.scrollHeight
+  }
+
+  create (state, addEvents) {
+    console.log('panel.create()')
+
+    const model = {
+      ...state
+    }
+    const html = nunjucks.render('panel.html', { model })
+    document.body.insertAdjacentHTML('beforeend', html)
+
+    const container = document.querySelector('[data-wc]')
+    const header = container.querySelector('[data-wc-header]')
+    const body = container.querySelector('[data-wc-body]')
+    const footer = container.querySelector('[data-wc-footer]')
+    this.container = container
+    this.header = header
+    this.body = body
+    this.footer = footer
+
+    // Move focus to container and set inert
+    container.focus()
+    Keyboard.toggleInert(container)
+
+    Utils.listenForDevice('mobile', this.setAttributes.bind(this, state))
+
+    // Message events
+    container.addEventListener('keyup', e => {
+      if (e.target.hasAttribute('data-wc-textbox')) {
+        const textbox = e.target
+        const label = textbox.previousElementSibling
+        // Conditionally show label
+        Utils.toggleLabel(label, e.key, textbox)
+        // Conditionally submit form
+        Utils.submit(e, textbox)
+      }
+    })
+    container.addEventListener('keydown', e => {
+      if (e.target.hasAttribute('data-wc-textbox')) {
+        const textbox = e.target
+        const label = textbox.previousElementSibling
+        // Conditionally hide label
+        Utils.toggleLabel(label, e.key, textbox)
+        // Conditionally suppress enter
+        Utils.suppressEnter(e, textbox)
+      }
+    })
+    container.addEventListener('change', e => {
+      if (e.target.hasAttribute('data-wc-textbox')) {
+        console.log('change', e.target)
+        const textbox = e.target
+        const label = textbox.previousElementSibling
+        Utils.toggleLabel(label, null, textbox)
+      }
+    }, true)
+
+    // Add panel events
+    addEvents()
+  }
+
+  update (state, error) {
+    console.log('panel.updateAll()')
+
+    const container = document.getElementById('wc-panel')
+    if (!container) {
+      return
+    }
+
+    // Update labelledyby
+    this.container.setAttribute('aria-labelledyby', error ? 'wc-title wc-subtitle wc-error' : 'wc-title wc-subtitle')
+
+    this.updateHeader(state)
+    this.updateBody(state, error)
+    this.updateFooter(state)
+  }
+
+  updateHeader (state) {
+    console.log('panel.updateHeader()')
+
+    const container = document.getElementById('wc-panel')
+    if (!container) {
+      return
+    }
+
+    // Model
+    const model = {
+      ...state
+    }
+
+    const header = this.header
+    header.innerHTML = nunjucks.render('header.html', { model })
+
+    this._initComponents(header)
+  }
+
+  updateBody (state, error) {
+    console.log('panel.updateBody()')
+
+    const container = document.getElementById('wc-panel')
+    if (!container) {
+      return
+    }
+
+    // Model
+    const model = {
+      ...state,
+      error,
+      timeout: this._timeout
+    }
+
+    const body = this.body
+    body.innerHTML = nunjucks.render('body.html', { model })
+
+    // Toggle body keyboard accessibility
+    const isViewOpen = state.view === 'OPEN'
+    if (isViewOpen) {
+      body.tabIndex = 0
+      const total = state.messages.length
+      this._updateMessagesLabel(total)
+      this._scrollToLatest(state.isScroll)
+    } else {
+      body.removeAttribute('tabindex')
+      body.removeAttribute('aria-label')
+    }
+
+    this._initComponents(body)
+  }
+
+  updateFooter (state) {
+    console.log('panel.updateFooter()')
+
+    const container = document.getElementById('wc-panel')
+    if (!container) {
+      return
+    }
+
+    // Model
+    const model = {
+      ...state
+    }
+
+    const footer = this.footer
+    footer.innerHTML = nunjucks.render('footer.html', { model })
+
+    this._initComponents(footer)
+  }
+
+  addMessage (state, message) {
+    const list = this.container.querySelector('[data-wc-list]')
+    if (!list) {
+      return
+    }
+
+    list.insertAdjacentHTML('beforeend', message.html)
+
+    // Update message label
+    const total = state.messages.length
+    this._updateMessagesLabel(total)
+
+    // Scroll messages
+    this._scrollToLatest(state.isScroll)
+  }
+
+  toggleAgentTyping (state, isTyping) {
+    const list = this.body.querySelector('[data-wc-list]')
+    if (!list) {
+      return
+    }
+
+    // Add or remove elements from list
+    const el = list.querySelector('[data-wc-agent-typing]')
+    if (isTyping) {
+      list.insertAdjacentHTML('beforeend', nunjucks.render('agent-typing.html', {
+        model: {
+          name: state.assignee
+        }
+      }))
+
+      // Scroll to show new elements
+      this._scrollToLatest(state.isScroll)
+    } else if (el) {
+      el.remove()
+    }
+  }
+
+  toggleTimeout (state, hasTimeout) {
+    const container = this.container
+    const timeout = container.querySelector('[data-wc-timeout]')
+
+    if (hasTimeout) {
+      const list = container.querySelector('[data-wc-list]')
+
+      // *** If we have the list but don't already have the timeout markup
+      if (list && !timeout) {
+        list.insertAdjacentHTML('afterend', `
+          <div class="wc-timeout" data-wc-timeout>
+            <div class="wc-timeout__inner">
+              <div class="wc-timeout__message">Webchat will end in <span data-wc-countdown>${this._timeout} seconds</span></div>
+            </div>
+            <a href="#" class="wc-cancel-timeout-btn" data-wc-cancel-timeout>Continue webchat</a>
+          </div>
+        `)
+        this._scrollToLatest(state.isScroll)
+
+        // Clear timeout
+        const clearBtn = container.querySelector('[data-wc-cancel-timeout]')
+        clearBtn.addEventListener('click', e => {
+          e.preventDefault()
+          this._resetTimeout()
+        })
+      }
+    } else if (timeout) {
+      timeout.remove()
+    }
+  }
+
+  setAttributes (state) {
+    const container = this.container
+    if (!container) {
+      return
+    }
+
+    const isFullscreen = state.isMobile && state.isOpen
+    const root = document.getElementsByTagName('html')[0]
+    root.classList.toggle('wc-html', isFullscreen)
+    document.body.classList.toggle('wc-body', isFullscreen)
+    container.setAttribute('aria-modal', true)
+
+    const backBtn = container.querySelector('[data-wc-back-btn]')
+    const hideBtn = container.querySelector('[data-wc-hide-btn]')
+    const closeBtn = container.querySelector('[data-wc-close-btn]')
+
+    if (backBtn) {
+      backBtn.hidden = !isFullscreen
+    }
+    if (hideBtn) {
+      hideBtn.hidden = isFullscreen
+    }
+    if (closeBtn) {
+      closeBtn.hidden = isFullscreen
+    }
+
+    // Toggle textbox behaviour
+    const textbox = container.querySelector('[data-wc-textbox]')
+    if (textbox) {
+      textbox.toggleAttribute('data-wc-enter-submit', !state.isMobile)
+    }
+  }
+}
+
+export default Panel

package/src/client/lib/provider.js

@@ -0,0 +1,11 @@
+// 'use strict'
+//
+// import { ChatSdk, EnvironmentName, ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
+//
+// class Provider {
+//   static authorise () {
+//     return null
+//   }
+// }
+//
+// export default Provider