@defra/flood-webchat 0.0.1-beta.50 → 0.0.1-beta.52

package/src/client/hooks/useFocusedElements.js

@@ -1,80 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-
-const ariaHidden = 'aria-hidden'
-const dataWcInert = 'data-wc-inert'
-
-const setAriaHidden = isInert => {
-  for (const node of document.body.children) {
-    if (node.id !== 'wc-panel') {
-      // We only want to toggle elements that aren't already inert
-      if (isInert && !node.getAttribute(ariaHidden)) {
-        node.setAttribute(ariaHidden, 'true')
-        node.setAttribute(dataWcInert, '')
-      } else if (node.hasAttribute(dataWcInert)) {
-        node.removeAttribute(ariaHidden)
-        node.removeAttribute(dataWcInert)
-      }
-    }
-  }
-}
-
-export const getFocusableElements = () => {
-  const selectors = [
-    '#wc-panel a:not([disabled])',
-    '#wc-panel button:not([disabled])',
-    '#wc-panel select:not([disabled])',
-    '#wc-panel input:not([disabled])',
-    '#wc-panel textarea:not([disabled])',
-    '#wc-panel *[tabindex="0"]:not([disabled])'
-  ]
-
-  const elements = document.body.querySelectorAll(selectors.join(','))
-  return Array.from(elements).filter(e => !e.closest('[hidden]') && !e.closest('[aria-hidden="true"]'))
-}
-
-const useFocusedElements = screen => {
-  const [panelElements, setPanelElements] = useState([])
-
-  const onKeyDown = useCallback(e => {
-    const webchatPanelElement = document.querySelector('#wc-panel')
-
-    if (e.key === 'Tab') {
-      if (webchatPanelElement && !document.activeElement.closest('#wc-panel')) {
-        webchatPanelElement.focus()
-      }
-
-      if (e.shiftKey) {
-        if (document.activeElement === panelElements[0]) {
-          panelElements[panelElements.length - 1].focus()
-          e.preventDefault()
-        } else if (document.activeElement === document.querySelector('#wc-panel')) {
-          panelElements[panelElements.length - 1]?.focus()
-          e.preventDefault()
-        }
-      } else if (document.activeElement === panelElements[panelElements.length - 1]) {
-        panelElements[0].focus()
-        e.preventDefault()
-      }
-    }
-  }, [panelElements])
-
-  useEffect(() => {
-    setPanelElements(getFocusableElements())
-  }, [screen])
-
-  useEffect(() => {
-    setAriaHidden(true)
-
-    const panelElement = document.querySelector('#wc-panel')
-    panelElement.focus()
-
-    document.addEventListener('keydown', onKeyDown)
-
-    return () => {
-      setAriaHidden()
-      document.removeEventListener('keydown', onKeyDown)
-    }
-  }, [panelElements])
-}
-
-export { useFocusedElements }

package/src/client/hooks/useTextareaAutosize.js

@@ -1,13 +0,0 @@
-import { useEffect } from 'react'
-
-export const useTextareaAutosize = (textAreaRef, value) => {
-  useEffect(() => {
-    if (textAreaRef) {
-      textAreaRef.style.height = '0px'
-
-      const scrollHeight = textAreaRef.scrollHeight
-
-      textAreaRef.style.height = `${scrollHeight}px`
-    }
-  }, [textAreaRef, value])
-}

package/src/client/index.jsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { createRoot } from 'react-dom/client'
-import { ChatSdk } from '@nice-devone/nice-cxone-chat-web-sdk'
-import { Availability } from './components/availability/availability.jsx'
-import { checkAvailability } from './lib/check-availability'
-import { AppProvider } from './store/AppProvider.jsx'
-import { CUSTOMER_ID_STORAGE_KEY } from './store/constants.js'
-import { messageNotification } from './lib/message-notification.js'
-
-export async function init (container, options) {
-  const sdk = new ChatSdk({
-    brandId: options.brandId,
-    channelId: options.channelId,
-    customerId: window.localStorage.getItem(CUSTOMER_ID_STORAGE_KEY) || '',
-    environment: options.environment
-  })
-
-  const root = createRoot(container)
-  let availability
-  let playSound
-  try {
-    const result = await checkAvailability(options.availabilityEndpoint)
-    playSound = await messageNotification(options.audioUrl)
-    availability = result.availability
-  } catch (e) {
-    availability = 'UNAVAILABLE'
-  }
-  root.render(
-    <AppProvider sdk={sdk} availability={availability} playSound={playSound}>
-      <Availability />
-    </AppProvider>
-  )
-}

package/src/client/lib/agent-status-headline.js

@@ -1,17 +0,0 @@
-export const agentStatusHeadline = (availability, agentStatus, agentName) => {
-  if (availability === 'UNAVAILABLE') {
-    return 'Webchat is not currently available'
-  }
-
-  if (!agentStatus) {
-    return 'Connecting to Floodline'
-  }
-
-  switch (agentStatus) {
-    case 'closed':
-    case 'resolved':
-      return agentName ? `${agentName} ended the session` : 'Session ended by advisor'
-    default:
-      return agentName ? `You are speaking with ${agentName}` : 'Waiting for an adviser'
-  }
-}

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

@@ -1,8 +0,0 @@
-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

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

package/src/client/lib/history.js

@@ -1,13 +0,0 @@
-export const historyPushState = () => {
-  const url = window.location.href.split('#')[0]
-  window.history.pushState({ history: true }, null, `${url}#webchat`)
-}
-
-export const historyReplaceState = () => {
-  if (window.history.state?.history) {
-    return window.history.back()
-  }
-
-  const url = window.location.href.split('#')[0]
-  return window.history.replaceState(null, null, url)
-}

package/src/client/lib/message-notification.js

@@ -1,30 +0,0 @@
-export const messageNotification = async audioUrl => {
-  const context = new (window.AudioContext || window.webkitAudioContext)()
-
-  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)
-    })
-  }
-
-  const response = await fetch(audioUrl)
-  const arrayBuffer = await response.arrayBuffer()
-  const buffer = await context.decodeAudioData(arrayBuffer)
-
-  return () => {
-    const source = context.createBufferSource()
-    source.buffer = buffer
-    source.connect(context.destination)
-    source.start()
-  }
-}

package/src/client/lib/transform-messages.js

@@ -1,47 +0,0 @@
-import { DateTime } from 'luxon'
-import parse from 'html-react-parser'
-
-const websiteRegex = /(?:www|https?)[^\s]+/gi
-
-export const formatMessage = message => {
-  if (message.match(websiteRegex)) {
-    message = message.replace(websiteRegex, link => {
-      return `<a class="govuk-link" href="${link}" target="_blank" rel="noreferrer">${link.replace(/https?:\/\//gi, '')}</a>`
-    })
-  }
-
-  return parse(message)
-}
-
-export const transformMessage = message => {
-  return {
-    id: message.id,
-    text: message.messageContent?.text,
-    createdAt: new Date(message.createdAt),
-    user: message.authorEndUserIdentity?.fullName?.trim() || null,
-    assignee: message.authorUser?.firstName || null,
-    direction: message.direction
-  }
-}
-
-export const transformMessages = messages => messages.map(message => transformMessage(message))
-
-export const formatTranscript = messages => {
-  const now = DateTime.local()
-  now.setZone('Europe/London')
-
-  let string = `Floodline webchat transcript, ${now.toFormat('HH:mm:ss a, dd LLLL yyyy')}\n\n`
-
-  for (const message of messages) {
-    const { text, direction, user, assignee, createdAt } = message
-
-    const author = direction === 'inbound' ? user : `${assignee} (Floodline adviser)`
-    const date = DateTime.fromJSDate(new Date(createdAt)).setZone('Europe/London').toFormat('HH:mm:ss a, dd LLLL yyyy')
-
-    string += `[${date}] ${author}: \n${text}\n\n`
-  }
-
-  string = string.replace(/<a\b[^>]*>/i, '').replace(/<\/a>/i, '')
-
-  return encodeURIComponent(string)
-}

package/src/client/scss/_objects.scss

@@ -1,33 +0,0 @@
-%wc-link-button {
-    @extend %govuk-link;
-    position: relative;
-    display: inline-block;
-    font-size: 16px;
-    color: govuk-colour('black');
-
-    &:hover {
-        color: govuk-colour('black');
-    }
-
-    &:visited:not(:hover):not(:focus) {
-        color: govuk-colour('black');
-    }
-
-    &:active {
-        color: govuk-colour('black');
-    }
-
-    &:focus {
-        box-shadow: none;
-        background-color: transparent;
-        text-decoration: underline;
-        color: govuk-colour('black');
-    }
-
-    &:focus-visible {
-        background-color: $govuk-focus-colour;
-        box-shadow: 0 -2px $govuk-focus-colour, 0 4px govuk-colour('black');
-        text-decoration: none;
-        color: govuk-colour('black');
-    }
-}

package/src/client/scss/_settings.scss

@@ -1,101 +0,0 @@
-.wc-heading {
-    @extend %govuk-heading-m;
-    font-size: 19px;
-    margin-bottom: 15px;
-}
-
-.wc-list {
-    @extend %govuk-list;
-    @extend %govuk-list--bullet;
-    font-size: 16px;
-    line-height: 1.25;
-}
-
-.wc-body p {
-    font-size: 16px;
-    line-height: 1.25;
-    margin-bottom: 15px;
-    @extend %govuk-body-s;
-}
-
-.wc-body .govuk-error-message {
-    color: govuk-colour('red');
-    font-weight: 700;
-}
-
-.wc-link,
-.wc-button,
-.govuk-button-group .wc-button,
-.govuk-button-group .wc-link {
-    font-size: 16px;
-}
-
-.wc-button[aria-disabled="true"] {
-    cursor: not-allowed;
-    opacity: 0.5;
-}
-
-.wc-label {
-    font-size: 16px;
-    line-height: 1.25;
-}
-
-.wc-form-group {
-    margin-bottom: 15px;
-}
-
-.wc-hint {
-    font-size: 16px;
-    line-height: 1.25;
-}
-
-.wc-inset-text {
-    margin: 0 0 20px;
-    padding: 5px 5px 5px 15px;
-    font-size: 16px;
-    border-left-width: 5px;
-}
-
-.wc-error-summary__title {
-    font-size: 19px;
-    line-height: 1.25;
-    margin-bottom: 15px;
-}
-
-.wc-error-summary__list,
-.wc-error-message {
-    font-size: 16px;
-    line-height: 1.25;
-}
-
-.wc-input, .wc-textarea {
-    font-size: 16px;
-    line-height: 1.25;
-}
-
-.wc-back-link {
-    font-size: 16px;
-    line-height: 1.25;
-    margin: 0 0 25px;
-}
-
-// stylelint-disable declaration-no-important
-.wc-live {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    -webkit-clip-path: inset(50%) !important;
-    clip-path: inset(50%) !important;
-    border: 0 !important;
-    white-space: nowrap !important;
-
-    &::before,
-    &::after {
-        content: ' ';
-    }
-}
-// stylelint-enable declaration-no-important

package/src/client/scss/_tools.scss

@@ -1,33 +0,0 @@
-// Check there is ot already similar functinality in GOV.UK Frontend
-
-@mixin defra-visually-hidden() {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    -webkit-clip-path: inset(50%);
-    clip-path: inset(50%);
-    border: 0;
-    white-space: nowrap;
-}
-
-// Map specific mixins
-@mixin focus($glow: 8px, $strong: 5px, $background: 2px, $inset: 0) {
-    position:absolute;
-    content:'';
-    left: 5px;
-    right: 5px;
-    top: 5px;
-    bottom: 5px;
-    box-shadow:
-        0 0 0 $background #ffffff,
-        inset 0 0 0 $inset govuk-colour('black'),
-        0 0 0 $strong govuk-colour('black'),
-        0 0 0 $glow $govuk-focus-colour;
-    outline: 3px solid transparent;
-    pointer-events: none;
-    z-index: 99;
-}

package/src/client/scss/_utilities.scss

@@ -1,25 +0,0 @@
-.wc-u-html {
-    @include mq ($until: tablet) {
-        height: 100vh;
-        overflow: hidden;
-    }
-}
-
-.wc-u-body {
-    @include mq ($until: tablet) {
-        position: fixed;
-        overflow: hidden;
-        top:0;
-        right:0;
-        bottom:0;
-        left:0;
-    }
-}
-
-.wc-u-hidden {
-    visibility: hidden;
-}
-
-.wc-u-scroll-padding {
-    scroll-padding-bottom: calc(2rem + 20px);
-}

package/src/client/store/AppProvider.jsx

@@ -1,183 +0,0 @@
-import React, { createContext, useEffect, useReducer, useMemo } from 'react'
-import { ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
-
-import { initialState, reducer } from './reducer.js'
-import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY } from './constants.js'
-
-export const AppContext = createContext(initialState)
-
-export const AppProvider = ({ sdk, availability, playSound, children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState)
-
-  /**
-   * SDK event handlers
-   */
-  const onLiveChatRecovered = e => {
-    dispatch({ type: 'SET_AGENT', payload: e.detail.data.inboxAssignee })
-    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.contact.status })
-    dispatch({ type: 'SET_UNSEEN_COUNT', payload: e.detail.data.contact.customerStatistics.unseenMessagesCount })
-  }
-
-  const onAssignedAgentChanged = e => {
-    dispatch({ type: 'SET_AGENT', payload: e.detail.data.inboxAssignee })
-    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
-  }
-
-  const onAgentTypingStarted = () => {
-    dispatch({ type: 'SET_AGENT_TYPING', payload: true })
-  }
-
-  const onAgentTypingEnded = () => {
-    dispatch({ type: 'SET_AGENT_TYPING', payload: false })
-    dispatch({ type: 'SET_LIVE_REGION_TEXT' })
-  }
-
-  const onMessageCreated = e => {
-    dispatch({ type: 'SET_MESSAGE', payload: e.detail.data.message })
-    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
-    dispatch({ type: 'SET_UNSEEN_COUNT', payload: e.detail.data.case.customerStatistics.unseenMessagesCount })
-
-    const isAudioOn = JSON.parse(window.localStorage.getItem(SETTINGS_STORAGE_KEY)).audio
-
-    if (isAudioOn && e.detail.data.message.direction === 'outbound' && playSound) {
-      playSound()
-    }
-  }
-
-  const onContactStatusChanged = e => {
-    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
-  }
-
-  const onMatchMedia = e => {
-    dispatch({ type: 'TOGGLE_IS_MOBILE', payload: e.matches })
-  }
-
-  const onKeydown = () => {
-    dispatch({ type: 'TOGGLE_IS_KEYBOARD', payload: true })
-  }
-
-  const onPointerdown = () => {
-    dispatch({ type: 'TOGGLE_IS_KEYBOARD', payload: false })
-  }
-
-  useEffect(() => {
-    sdk.onChatEvent(ChatEvent.LIVECHAT_RECOVERED, onLiveChatRecovered)
-    sdk.onChatEvent(ChatEvent.MESSAGE_CREATED, onMessageCreated)
-    sdk.onChatEvent(ChatEvent.AGENT_TYPING_STARTED, onAgentTypingStarted)
-    sdk.onChatEvent(ChatEvent.AGENT_TYPING_ENDED, onAgentTypingEnded)
-    sdk.onChatEvent(ChatEvent.ASSIGNED_AGENT_CHANGED, onAssignedAgentChanged)
-    sdk.onChatEvent(ChatEvent.CONTACT_STATUS_CHANGED, onContactStatusChanged)
-    // We need to know if it is a mobile and if it is a keyboard interaction
-    window.matchMedia('(max-width: 640px)').addEventListener('change', onMatchMedia)
-    window.addEventListener('keydown', onKeydown)
-    window.addEventListener('pointerdown', onPointerdown)
-    // Tidying up
-    return () => {
-      window.removeEventListener('change', onMatchMedia)
-      window.removeEventListener('keydown', onKeydown)
-      window.removeEventListener('pointerdown', onPointerdown)
-    }
-  }, [sdk])
-
-  /**
-   * Initialize customerId, threadId and whether the webchat should be open
-   */
-  useEffect(() => {
-    dispatch({ type: 'SET_AVAILABILITY', payload: availability })
-
-    setCustomerId(window.localStorage.getItem(CUSTOMER_ID_STORAGE_KEY))
-    setThreadId(window.localStorage.getItem(THREAD_ID_STORAGE_KEY))
-    setSettings(JSON.parse(window.localStorage.getItem(SETTINGS_STORAGE_KEY)) || state.settings)
-  }, [])
-
-  /**
-   * Set browser history on start chat click
-   */
-  useEffect(() => {
-    if (window.location.hash === '#webchat') {
-      setChatVisibility(true)
-    }
-
-    const onBrowserNavigation = () => {
-      if (window.location.hash === '#webchat') {
-        setChatVisibility(true)
-      } else {
-        setChatVisibility(false)
-      }
-    }
-
-    window.addEventListener('popstate', onBrowserNavigation)
-
-    return () => {
-      window.removeEventListener('popstate', onBrowserNavigation)
-    }
-  }, [])
-
-  /**
-   * State update functions
-   */
-  const setChatVisibility = payload => {
-    dispatch({ type: 'SET_CHAT_VISIBILITY', payload })
-  }
-
-  const setCustomerId = customerId => {
-    dispatch({ type: 'SET_CUSTOMER_ID', payload: customerId })
-  }
-
-  const setThreadId = threadId => {
-    dispatch({ type: 'SET_THREAD_ID', payload: threadId })
-  }
-
-  const setThread = thread => {
-    dispatch({ type: 'SET_THREAD', payload: thread })
-  }
-
-  const setMessages = messages => {
-    dispatch({ type: 'SET_MESSAGES', payload: messages })
-  }
-
-  const setSettings = data => {
-    dispatch({ type: 'SET_SETTINGS', payload: data })
-  }
-
-  const setUnseenCount = unseenCount => {
-    dispatch({ type: 'SET_UNSEEN_COUNT', payload: unseenCount })
-  }
-
-  const setInstigatorId = id => {
-    dispatch({ type: 'SET_INSTIGATOR_ID', payload: id })
-  }
-
-  const setLiveRegionText = text => {
-    dispatch({ type: 'SET_LIVE_REGION_TEXT', payload: text })
-  }
-
-  /**
-   * Application-wide state and state functions
-   */
-  const store = useMemo(() => ({
-    ...state,
-    sdk,
-    setSettings,
-    setCustomerId,
-    setThreadId,
-    setThread,
-    setMessages,
-    setUnseenCount,
-    setChatVisibility,
-    setInstigatorId,
-    setLiveRegionText,
-    onLiveChatRecovered,
-    onAssignedAgentChanged,
-    onAgentTypingStarted,
-    onAgentTypingEnded,
-    onMessageCreated,
-    onContactStatusChanged
-  }))
-
-  return (
-    <AppContext.Provider value={store}>
-      {children}
-    </AppContext.Provider>
-  )
-}