@defra/flood-webchat 0.0.1-alpha.9 → 0.0.1-beta.2

package/package.json

@@ -1,20 +1,19 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-alpha.9",
+  "version": "0.0.1-beta.2",
   "description": "",
-  "type": "module",
-  "main": "src/server/index.js",
-  "browser": "src/client/index.js",
+  "main": "dist/server.js",
+  "browser": "dist/client.js",
   "scripts": {
-    "test": "npm run compile-templates && npm run lint && npm run unit-test",
-    "dev": "npm run compile-templates && node -r dotenv/config node_modules/.bin/webpack server --config demo/webpack.config.mjs",
+    "test": "npm run lint && npm run unit-test",
+    "dev": "(cd demo && webpack server)",
+    "build": "webpack",
     "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 } }\"",
-    "compile-templates": "mkdir -p dist && nunjucks-precompile templates > ./dist/templates.js"
+    "prepare": "node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') { throw e } }\""
   },
   "standard": {
     "ignore": [
@@ -30,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",
@@ -49,14 +51,17 @@
     "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"
+    "govuk-frontend": "^4.0.0"
   },
   "dependencies": {
-    "@nice-devone/nice-cxone-chat-web-sdk": "1.3.0",
-    "axios": "^0.24.0",
-    "nunjucks": "^3.2.4"
+    "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

@@ -1,4 +1,4 @@
-import { authenticate, getHost, getIsOpen, getActivity } from './client.js'
+const { authenticate, getHost, getIsOpen, getActivity } = require('./lib/client.js')
 
 /**
  * Returns webchat availability
@@ -12,7 +12,7 @@ import { authenticate, getHost, getIsOpen, getActivity } from './client.js'
  * @param options.maxQueueCount {string}
  * @returns {Promise<{date: Date, availability: (string)}>}
  */
-export default async function getAvailability ({
+module.exports = async function getAvailability ({
   clientId,
   clientSecret,
   accessKey,
@@ -25,6 +25,7 @@ export default async function getAvailability ({
 
   // 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([
@@ -32,12 +33,16 @@ export default async function getAvailability ({
     getIsOpen({ token, tokenType, host, hoursEndpoint })
   ])
 
-  // Hours of operation
-
-  // Availability
   const isAvailable = isOpen && hasAgentsAvailable && hasCapacity
   const isExistingOnly = isOpen && hasAgentsAvailable && !hasCapacity
-  const availability = isAvailable ? 'AVAILABLE' : isExistingOnly ? 'EXISTING' : 'UNAVAILABLE'
+
+  let availability = 'UNAVAILABLE'
+
+  if (isAvailable) {
+    availability = 'AVAILABLE'
+  } else if (isExistingOnly) {
+    availability = 'EXISTING'
+  }
 
   return {
     date: new Date(),

package/src/server/{client.js → lib/client.js}

@@ -1,15 +1,18 @@
-import querystring from 'querystring'
-import axios from 'axios'
-import { isWithinHours, extractTenantId } from './utils.js'
+const querystring = require('querystring')
+const axios = require('axios')
+const jwtdecode = require('jwt-decode')
+const { isWithinHours } = require('./utils.js')
 
-export async function authenticate ({ authorisation, accessKey, accessSecret }) {
+const contentType = 'application/x-www-form-urlencoded'
+
+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',
+      'Content-Type': contentType,
       Authorization: authorisation
     }
   }
@@ -19,54 +22,71 @@ export async function authenticate ({ authorisation, accessKey, accessSecret })
     username: accessKey,
     password: accessSecret
   })
-  // Cache authentication and re-authenticate when needed (lasts 1 hour?)
+
   const auth = await axios.post(uri, body, config)
+
   return {
     token: auth.data.access_token,
     tokenType: auth.data.token_type,
-    tenantId: extractTenantId(auth.data.id_token)
+    tenantId: jwtdecode(auth.data.id_token)?.tenantId
   }
 }
 
-export async function getHost ({ 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`
 }
 
-export async function getActivity ({ tokenType, token, host, skillEndpoint, maxQueueCount }) {
+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'
+      'Content-Type': contentType
     }
   }
   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
   }
 }
 
-export async function getIsOpen ({ host, token, tokenType, hoursEndpoint }) {
+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'
+      'Content-Type': contentType
     }
   }
 
   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/{utils.js → lib/utils.js}

@@ -1,19 +1,14 @@
-export const extractTenantId = (token) => {
-  const base64Url = token.split('.')[1]
-  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
-  const jsonPayload = decodeURIComponent(Buffer.from(base64, 'base64').toString('ascii').split('').map(c => {
-    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
-  }).join(''))
-
-  return JSON.parse(jsonPayload).tenantId
-}
-
-export const isWithinHours = (days) => {
+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}`
-  const close = `${date[2]}-${date[1]}-${date[0]}T${day.closeTime}`
+  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/babel.config.cjs

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