@defra/flood-webchat 0.0.1-alpha.1 → 0.0.1-alpha.11

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.11",
   "description": "",
-  "main": "src/main.mjs",
-  "browser": "src/browser.mjs",
+  "main": "dist/server.js",
+  "browser": "dist/client.js",
   "scripts": {
     "test": "npm run lint && npm run unit-test",
     "dev": "(cd demo && webpack server)",
+    "build": "webpack",
     "unit-test": "jest",
-    "lint": "standard",
+    "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 } }\""
   },
   "standard": {
@@ -25,6 +29,9 @@
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.15",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.4",
     "babel-jest": "^29.6.4",
     "babel-loader": "^9.1.3",
@@ -34,15 +41,26 @@
     "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-gds": "^1.0.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.1",
+    "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
     "govuk-frontend": "^3.14.0"
+  },
+  "dependencies": {
+    "axios": "^1.5.0",
+    "jwt-decode": "^3.1.2",
+    "querystring": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

package/src/client/components/availability/availability.jsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { classnames } from '../../lib/classnames'
+import { useMessageThread, useWebchatOpenState } from '../../lib/external-stores'
+
+export function Availability (props) {
+  const [isOpen, setOpen] = useWebchatOpenState()
+  const [isFixed, setFixed] = useState(false)
+  const buttonRef = useRef()
+  const onClick = () => {
+    setOpen(!isOpen)
+  }
+  const onKeyDown = event => {
+    if (event.key === ' ') {
+      event.preventDefault()
+    }
+  }
+  const onKeyUp = event => {
+    if (event.key === ' ') {
+      setOpen(!isOpen)
+    }
+  }
+
+  const intersectionCallback = entries => {
+    const [entry] = entries
+    const isBelowFold = !entry.isIntersecting && entry.boundingClientRect.top > 0
+    setFixed(!isOpen && isBelowFold)
+  }
+
+  useEffect(() => {
+    const observer = new window.IntersectionObserver(intersectionCallback, {
+      rootMargin: '35px'
+    })
+    const parentElement = buttonRef.current?.parentElement
+    if (parentElement) {
+      observer.observe(parentElement)
+    }
+    return () => {
+      if (parentElement) {
+        observer.unobserve(parentElement)
+      }
+    }
+  }, [buttonRef, isOpen])
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('wc-scroll-padding', isFixed)
+    document.body.classList.toggle('wc-scroll-padding', isFixed)
+  }, [isFixed])
+
+  switch (props.availability) {
+    case 'AVAILABLE':
+      return (
+        <div
+          className={classnames('wc-availability', isFixed && 'wc-availability--fixed')}
+          ref={buttonRef}
+        >
+          <div className='wc-availability__inner'>
+            <a
+              className='wc-availability__link'
+              href='#webchat' role='button' draggable='false'
+              onClick={onClick}
+              onKeyUp={onKeyUp}
+              onKeyDown={onKeyDown}
+            >
+              <AvailabilityContent />
+            </a>
+          </div>
+        </div>
+      )
+    case 'EXISTING':
+    case 'UNAVAILABLE':
+      return (
+        <p className='govuk-body'>When it is available, a 'start chat' link will appear.</p>
+      )
+    default:
+      return (
+        <p className='govuk-body'>Checking availability</p>
+      )
+  }
+}
+
+function AvailabilityContent () {
+  const [thread] = useMessageThread()
+  const unreadMessageCount = thread.filter(message => !message.read).length
+  if (!thread.length) {
+    return (
+      <>
+        Start Chat
+      </>
+    )
+  }
+  return (
+    <>
+      Show Chat {!!unreadMessageCount && (
+        <>
+          <span className='wc-availability__unseen'>{unreadMessageCount}</span>
+          <span className='govuk-visually-hidden'> {unreadMessageCount === 1 ? 'new message' : 'new messages'}</span>
+        </>
+    )}
+    </>
+  )
+}

package/src/client/components/availability/availability.scss

@@ -0,0 +1,89 @@
+
+.wc-availability__inner {
+  max-width: 960px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.wc-availability--fixed {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-left: 15px;
+  padding-right: 15px;
+
+  @include mq ($from: 'tablet') {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+
+  background-color: govuk-colour('light-grey');
+
+  .wc-availability__link {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+
+.wc-availability__link {
+  @include govuk-font($size: 19);
+  position:relative;
+  display:inline-block;
+  margin-right: 5px;
+  margin-bottom: 0;
+  fill: govuk-colour('black');
+
+  @include mq ($from: tablet) {
+    margin-right: 10px;
+  }
+
+  .govuk-visually-hidden, .wc-availability__unseen {
+    pointer-events: none;
+  }
+
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  &:active {
+    color: govuk-colour('black');
+  }
+
+  &:visited {
+    color: $govuk-link-colour;
+  }
+
+  &:focus {
+    box-shadow: none;
+    background-color: transparent;
+    text-decoration: underline;
+    color: $govuk-focus-colour;
+  }
+
+  &:hover:not(:focus):not(:active) {
+    color: $govuk-link-hover-colour;
+
+    .wc-availability__unseen {
+      background-color: govuk-colour('dark-blue');
+    }
+  }
+}
+
+.wc-availability__unseen {
+  display: inline-block;
+  position: relative;
+  border-radius: 10px;
+  background-color: govuk-colour('black');
+  color: govuk-colour('white');
+  font-weight: bold;
+  font-size: 14px;
+  padding: 0 6px;
+  margin-left: 5px;
+
+  @include mq ($from: tablet) {
+    top: -1px;
+    padding-left: 7px;
+    padding-right: 7px;
+  }
+}

package/src/client/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { Availability } from './components/availability/availability.jsx'
+import { checkAvailability } from './lib/check-availability'
+
+export async function init (container, options) {
+  const root = createRoot(container)
+  let availability
+  try {
+    const result = await checkAvailability(options.availabilityEndpoint)
+    availability = result.availability
+  } catch (e) {
+    availability = 'UNAVAILABLE'
+  }
+  root.render(<Availability availability={availability} />)
+}

package/src/client/lib/check-availability.js

@@ -0,0 +1,7 @@
+export async function checkAvailability (endpoint) {
+  const response = await fetch(endpoint)
+  const data = await response.json()
+  return {
+    availability: data.availability || 'UNAVAILABLE'
+  }
+}

package/src/client/lib/classnames.js

@@ -0,0 +1 @@
+export const classnames = (...classes) => classes.filter(classname => classname && typeof classname === 'string').join(' ')

package/src/client/lib/external-stores.js

@@ -0,0 +1,4 @@
+import ExternalSyncStore from './external-sync-store'
+
+export const useWebchatOpenState = ExternalSyncStore.create(false)
+export const useMessageThread = ExternalSyncStore.create([])

package/src/client/lib/external-sync-store.js

@@ -0,0 +1,42 @@
+import { useSyncExternalStore } from 'react'
+
+export default class ExternalSyncStore {
+  constructor (initialValue) {
+    this._value = initialValue
+    this._listeners = []
+  }
+
+  update (value) {
+    this._value = value
+    this.emitChange()
+  }
+
+  subscribe (listener) {
+    this._listeners = [...this._listeners, listener]
+    return () => {
+      this._listeners = this._listeners.filter(l => l !== listener)
+    }
+  }
+
+  emitChange () {
+    for (const listener of this._listeners) {
+      listener()
+    }
+  }
+
+  getSnapshot () {
+    return this._value
+  }
+
+  static create (initialValue) {
+    const store = new ExternalSyncStore(initialValue)
+    const boundSubscribe = store.subscribe.bind(store)
+    const boundGetSnapshot = store.getSnapshot.bind(store)
+    const boundUpdate = store.update.bind(store)
+
+    return () => [
+      useSyncExternalStore(boundSubscribe, boundGetSnapshot),
+      boundUpdate
+    ]
+  }
+}

package/src/server/index.js

@@ -0,0 +1,44 @@
+const { authenticate, getHost, getIsOpen, getActivity } = require('./lib/client.js')
+
+/**
+ * Returns webchat availability
+ * @param options {object}
+ * @param options.clientId {string}
+ * @param options.clientSecret {string}
+ * @param options.accessKey {string}
+ * @param options.accessSecret {string}
+ * @param options.skillEndpoint {string}
+ * @param options.hoursEndpoint {string}
+ * @param options.maxQueueCount {string}
+ * @returns {Promise<{date: Date, availability: (string)}>}
+ */
+module.exports = async function getAvailability ({
+  clientId,
+  clientSecret,
+  accessKey,
+  accessSecret,
+  skillEndpoint,
+  hoursEndpoint,
+  maxQueueCount
+}) {
+  const authorisation = 'Basic ' + Buffer.from(`${encodeURIComponent(clientId)}:${encodeURIComponent(clientSecret)}`).toString('base64')
+
+  // Cache authentication and re-authenticate when needed (lasts 1 hour?)
+  const { tenantId, token, tokenType } = await authenticate({ authorisation, accessKey, accessSecret })
+
+  const host = await getHost({ tenantId })
+
+  const [{ hasCapacity, hasAgentsAvailable }, isOpen] = await Promise.all([
+    getActivity({ tokenType, token, host, skillEndpoint, maxQueueCount }),
+    getIsOpen({ token, tokenType, host, hoursEndpoint })
+  ])
+
+  const isAvailable = isOpen && hasAgentsAvailable && hasCapacity
+  const isExistingOnly = isOpen && hasAgentsAvailable && !hasCapacity
+  const availability = isAvailable ? 'AVAILABLE' : isExistingOnly ? 'EXISTING' : 'UNAVAILABLE'
+
+  return {
+    date: new Date(),
+    availability
+  }
+}

package/src/server/lib/client.js

@@ -0,0 +1,90 @@
+const querystring = require('querystring')
+const axios = require('axios')
+const jwtdecode = require('jwt-decode')
+const { isWithinHours } = require('./utils.js')
+
+const authenticate = async ({ authorisation, accessKey, accessSecret }) => {
+  const uri = 'https://cxone.niceincontact.com/auth/token'
+
+  const config = {
+    signal: AbortSignal.timeout(3000),
+    headers: {
+      Host: 'eu1.niceincontact.com',
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Authorization: authorisation
+    }
+  }
+
+  const body = querystring.stringify({
+    grant_type: 'password',
+    username: accessKey,
+    password: accessSecret
+  })
+
+  const auth = await axios.post(uri, body, config)
+
+  return {
+    token: auth.data.access_token,
+    tokenType: auth.data.token_type,
+    tenantId: jwtdecode(auth.data.id_token)?.tenantId
+  }
+}
+
+const getHost = async ({ tenantId }) => {
+  const uri = `https://cxone.niceincontact.com/.well-known/cxone-configuration?tenantId=${tenantId}`
+
+  const config = {
+    signal: AbortSignal.timeout(3000)
+  }
+
+  const api = await axios.get(uri, config)
+
+  return `api-${api.data.area}.niceincontact.com`
+}
+
+const getActivity = async ({ tokenType, token, host, skillEndpoint, maxQueueCount }) => {
+  const config = {
+    signal: AbortSignal.timeout(3000),
+    headers: {
+      Host: host,
+      Authorization: `${tokenType} ${token}`,
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  }
+  const uri = `https://${host}${skillEndpoint}`
+
+  const skill = await axios.get(uri, config)
+
+  const activity = skill.data.skillActivity[0]
+
+  return {
+    hasCapacity: activity.queueCount < maxQueueCount,
+    hasAgentsAvailable: activity.agentsAvailable >= 1
+  }
+}
+
+const getIsOpen = async ({ host, token, tokenType, hoursEndpoint }) => {
+  const config = {
+    signal: AbortSignal.timeout(3000),
+    headers: {
+      Host: 'api-l36.niceincontact.com',
+      Authorization: `${tokenType} ${token}`,
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  }
+
+  const uri = `https://${host}${hoursEndpoint}`
+
+  const hours = await axios.get(uri, config)
+
+  const days = hours.data.resultSet.hoursOfOperationProfiles[0].days
+
+  return isWithinHours(days)
+}
+
+module.exports = {
+  authenticate,
+  getHost,
+  getIsOpen,
+  getActivity
+}

package/src/server/lib/utils.js

@@ -0,0 +1,14 @@
+const isWithinHours = days => {
+  const now = new Date()
+  const name = now.toLocaleDateString('en-GB', { weekday: 'long' })
+  const day = days.find(d => d.day.toLowerCase() === name.toLowerCase())
+  const date = now.toLocaleDateString('en-GB').split('/')
+  const open = `${date[2]}-${date[1]}-${date[0]}T${day.openTime}.000Z`
+  const close = `${date[2]}-${date[1]}-${date[0]}T${day.closeTime}.000Z`
+
+  return now.getTime() >= Date.parse(open) && now.getTime() <= Date.parse(close)
+}
+
+module.exports = {
+  isWithinHours
+}

package/webpack.config.mjs

@@ -0,0 +1,32 @@
+import path from 'path'
+
+import nodeExternals from 'webpack-node-externals'
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
+
+export default {
+  entry: {
+    client: path.join(__dirname, 'src/client/index.jsx'),
+    server: path.join(__dirname, 'src/server/index.js')
+  },
+  devtool: 'source-map',
+  mode: 'development',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    library: {
+      type: 'commonjs2'
+    }
+  },
+  target: 'node',
+  externals: [nodeExternals()],
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/i,
+        use: [
+          'babel-loader'
+        ]
+      }
+    ]
+  }
+}

package/src/browser.mjs

@@ -1,3 +0,0 @@
-export function init (value) {
-  return value === true
-}