@seamly/web-ui 18.1.1 → 18.3.1

package/src/javascripts/ui/components/options/transcript/transcript-form.js

@@ -9,7 +9,7 @@ export default function TranscriptForm({ controlName, describedById }) {
     <Form noValidate="true">
       <Input
         name={controlName}
-        type="text"
+        type="email"
         className={className('transcript__input')}
         aria-describedby={describedById}
         labelClass={className('label')}

package/src/javascripts/ui/components/warnings/cobrowsing-active-frame.js

@@ -1,16 +1,13 @@
 import { useEffect, useRef } from 'preact/hooks'
 import CobrowsingActive from './cobrowsing-active'
-import {
-  useLiveRegion,
-  useSeamlyInterrupt,
-  useSeamlyOptions,
-} from '../../hooks/seamly-hooks'
+import { useLiveRegion, useSeamlyOptions } from '../../hooks/seamly-hooks'
 import { useI18n } from '../../../domains/i18n'
+import { useInterrupt } from '../../../domains/interrupt'
 
 const CobrowsingActiveFrame = () => {
   const { t } = useI18n()
   const { userSelectedOptions } = useSeamlyOptions()
-  const { hasInterrupt } = useSeamlyInterrupt()
+  const { hasInterrupt } = useInterrupt()
   const { cobrowsing } = userSelectedOptions
   const prevCobrowsing = useRef(cobrowsing)
   const { sendPolite } = useLiveRegion()

package/src/javascripts/ui/components/warnings/idle-detach-warning.js

@@ -12,12 +12,8 @@ const IdleDetachWarning = () => {
   const sendActivity = useSeamlyActivityEventHandler()
   const { emitEvent } = useSeamlyCommands()
 
-  const {
-    isActive,
-    remaining,
-    timer,
-    endCountdown,
-  } = useSeamlyIdleDetachCountdown()
+  const { isActive, remaining, timer, endCountdown } =
+    useSeamlyIdleDetachCountdown()
 
   const continueChat = () => {
     sendActivity()

package/src/javascripts/ui/components/widgets/in-out-transition.js

@@ -99,11 +99,11 @@ const InOutTransition = ({
 
   return (
     renderChildren &&
-    toChildArray(children).map(child => {
+    toChildArray(children).map((child) => {
       const { className: childClassName = '' } = child.props
       const cleanClasses = childClassName
         .split(' ')
-        .filter(cl => !transitionClassesArray.includes(cl))
+        .filter((cl) => !transitionClassesArray.includes(cl))
 
       return cloneElement(child, {
         className: [...cleanClasses, ...activeTransitionClasses].join(' '),

package/src/javascripts/ui/components/widgets/lightbox.js

@@ -4,13 +4,13 @@ import { useI18n } from '../../../domains/i18n'
 import {
   useSeamlyActivityEventHandler,
   useSeamlyAppContainerClassNames,
-  useSeamlyConfig,
 } from '../../hooks/seamly-hooks'
 import { className } from '../../../lib/css'
 import Icon from '../layout/icon'
+import { useConfig } from '../../../domains/config'
 
 const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
-  const { zIndex } = useSeamlyConfig()
+  const { zIndex } = useConfig()
   const onActivityHandler = useSeamlyActivityEventHandler()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const focusContainer = useRef(null)
@@ -18,7 +18,7 @@ const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
 
   const classNames = ['modal', ...appContainerClassNames]
 
-  const onFrameClickHandler = e => {
+  const onFrameClickHandler = (e) => {
     e.stopPropagation()
   }
 
@@ -28,7 +28,7 @@ const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
 
   const style = zIndex ? { zIndex: zIndex + 1 } : undefined
 
-  const getModalContent = onClose => (
+  const getModalContent = (onClose) => (
     <div
       className={className(classNames)}
       onClick={onFloatClickHandler}

package/src/javascripts/ui/components/widgets/modal.js

@@ -42,7 +42,7 @@ const Modal = ({
 
   useEffect(() => {
     if (containerIsSet) {
-      modalContainer.current.addEventListener('keydown', event => {
+      modalContainer.current.addEventListener('keydown', (event) => {
         if ((event.code && event.code === 'Escape') || event.keyCode === 27) {
           onClose()
         }
@@ -93,12 +93,12 @@ const Modal = ({
   return typeof children === 'function'
     ? children({
         onClose,
-        modalRenderFn: els =>
+        modalRenderFn: (els) =>
           modalContainer.current && render(els, modalContainer.current),
       })
     : modalContainer.current &&
         render(
-          toChildArray(children).map(child => {
+          toChildArray(children).map((child) => {
             child.props = { ...child.props, onClose }
             return child
           }),

package/src/javascripts/ui/components/widgets/upload-progress.js

@@ -1,7 +1,7 @@
 import { className } from '../../../lib/css'
 import { useFileUploads } from '../../hooks/seamly-hooks'
 import { useI18n } from '../../../domains/i18n'
-import Icon from '../layout/icon'
+import Error from '../form-controls/error'
 
 const UploadProgress = () => {
   const { t } = useI18n()
@@ -19,18 +19,7 @@ const UploadProgress = () => {
               className={className('progress__text--percentage')}
             >{`${progress}%`}</span>
           </div>
-          <div
-            className={className('error')}
-            aria-live="assertive"
-            aria-atomic="true"
-          >
-            {error && (
-              <span>
-                <Icon name="error" size="16" />
-                {error}
-              </span>
-            )}
-          </div>
+          <Error error={error} />
           <progress
             className={className('progress__bar')}
             role="progressbar"

package/src/javascripts/ui/hooks/component-helper-hooks.js

@@ -1,23 +1,12 @@
-import { useSeamlyConfig, useSeamlyStateContext } from './seamly-state-hooks'
+import { useSeamlyStateContext } from './seamly-state-hooks'
 import { useElementFocusingById } from './focus-helper-hooks'
+import { useConfig } from '../../domains/config'
 
 export const useSeamlyAppContainerClassNames = () => {
-  const config = useSeamlyConfig()
-  const { appContainerClassNames } = config
-
-  if (!appContainerClassNames) {
-    return []
-  }
-
-  switch (typeof config.appContainerClassNames) {
-    case 'function':
-      return config.appContainerClassNames(config)
-    default:
-      return config.appContainerClassNames
-  }
+  return useConfig().appContainerClassNames
 }
 
-export const useSeamlyMessageContainerClassNames = event => {
+export const useSeamlyMessageContainerClassNames = (event) => {
   const { fromClient } = event.payload
   const classNames = ['message']
 

package/src/javascripts/ui/hooks/file-upload-hooks.js

@@ -52,7 +52,7 @@ export const useFileUploads = () => {
   const upload = useSeamlyFileUploadContext()
 
   const uploadFile = useCallback(
-    file => {
+    (file) => {
       upload(file)
     },
     [upload],
@@ -66,7 +66,7 @@ export const useFileUploads = () => {
     uploadFile,
     clearUploads,
     currentUploads,
-    isUploading: currentUploads.some(file => file.uploading),
-    isComplete: currentUploads.every(file => file.complete),
+    isUploading: currentUploads.some((file) => file.uploading),
+    isComplete: currentUploads.every((file) => file.complete),
   }
 }

package/src/javascripts/ui/hooks/focus-helper-hooks.js

@@ -9,7 +9,7 @@ import { seamlyActions } from '../utils/seamly-utils'
 
 const { SET_SEAMLY_CONTAINER_ELEMENT } = seamlyActions
 
-const focusWithRaf = el => {
+const focusWithRaf = (el) => {
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       const focusEl = typeof el === 'string' ? document.getElementById(el) : el
@@ -24,7 +24,7 @@ export const useSeamlyContainerElement = () => {
   const dispatch = useSeamlyDispatchContext()
 
   const setSeamlyContainerElement = useCallback(
-    element => {
+    (element) => {
       dispatch({ type: SET_SEAMLY_CONTAINER_ELEMENT, element })
     },
     [dispatch],
@@ -33,7 +33,7 @@ export const useSeamlyContainerElement = () => {
   return [seamlyContainerElement, setSeamlyContainerElement]
 }
 
-export const useElementFocusingById = elementId =>
+export const useElementFocusingById = (elementId) =>
   useCallback(() => {
     focusWithRaf(elementId)
   }, [elementId])
@@ -49,7 +49,7 @@ export const useFocusIfSeamlyContainedFocus = () => {
 
   containerElementRef.current = seamlyContainerElement
 
-  return useCallback(elementToFocus => {
+  return useCallback((elementToFocus) => {
     const focusFn = () => {
       focusWithRaf(elementToFocus)
     }

package/src/javascripts/ui/hooks/live-region-hooks.js

@@ -8,7 +8,7 @@ export const useSeamlyLiveRegionContext = () =>
 export const useLiveRegion = () => {
   const sendMessage = useSeamlyLiveRegionContext()
   const sendPolite = useCallback(
-    messageText => {
+    (messageText) => {
       sendMessage({
         ariaLive: ariaLiveLevels.polite,
         messageText,
@@ -17,7 +17,7 @@ export const useLiveRegion = () => {
     [sendMessage],
   )
   const sendAssertive = useCallback(
-    messageText => {
+    (messageText) => {
       sendMessage({
         ariaLive: ariaLiveLevels.assertive,
         messageText,

package/src/javascripts/ui/hooks/seamly-entry-hooks.js

@@ -1,9 +1,10 @@
 import { useRef, useCallback, useEffect } from 'preact/hooks'
 import { seamlyActions, actionTypes } from '../utils/seamly-utils'
-import { useSeamlyStateContext, useSeamlyConfig } from './seamly-state-hooks'
+import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyOptions } from './seamly-option-hooks'
 import useSeamlyCommands from './use-seamly-commands'
+import { useConfig } from '../../domains/config'
 
 const {
   SET_BLOCK_AUTO_ENTRY_SWITCH,
@@ -13,7 +14,7 @@ const {
 
 export const useSeamlyTyping = () => {
   const { sendAction } = useSeamlyCommands()
-  const { typing: typingConfig } = useSeamlyConfig()
+  const { typing: typingConfig } = useConfig()
   const { features } = useSeamlyOptions()
   const { typingPeekahead } = features || {}
   const typingTimeout = useRef(null)
@@ -43,7 +44,7 @@ export const useSeamlyTyping = () => {
     })
   }
 
-  return e => {
+  return (e) => {
     if ((e.code && e.code === 'Enter') || e.keyCode === 13) {
       return
     }
@@ -91,21 +92,21 @@ export const useSeamlyEntry = () => {
   const activeEntryOptions = entryOptions[activeEntry] || {}
 
   const setBlockAutoEntrySwitch = useCallback(
-    value => {
+    (value) => {
       dispatch({ type: SET_BLOCK_AUTO_ENTRY_SWITCH, value })
     },
     [dispatch],
   )
 
   const setActiveEntryType = useCallback(
-    entryType => {
+    (entryType) => {
       dispatch({ type: SET_ACTIVE_ENTRY_TYPE, entryType })
     },
     [dispatch],
   )
 
   const setUserEntryType = useCallback(
-    entryType => {
+    (entryType) => {
       dispatch({ type: SET_USER_ENTRY_TYPE, entryType })
     },
     [dispatch],

package/src/javascripts/ui/hooks/seamly-hooks.js

@@ -9,8 +9,6 @@ export {
   useLastMessageEventId,
   useEntryTextLimit,
   useSeamlyCurrentAgent,
-  useSeamlyConfig,
-  useSeamlyDisclaimerState,
   useEvents,
   useSeamlyHeaderData,
   useSeamlyIsHistoryLoaded,
@@ -35,7 +33,6 @@ export {
   useCobrowsingContainer,
 } from './component-helper-hooks'
 export { useSeamlyOptions, useOptionButton } from './seamly-option-hooks'
-export { default as useSeamlyInterrupt } from './use-seamly-interrupt'
 export { useFileUploadMeta, useFileUploads } from './file-upload-hooks'
 export { default as useSeamlyCommands } from './use-seamly-commands'
 export { useLiveRegion, useSeamlyLiveRegionContext } from './live-region-hooks'
@@ -68,12 +65,9 @@ export const useSeamlyEventStream = (nextFn, filterFn) => {
   useEffect(() => {
     if (api.stream) {
       if (filterFn) {
-        api
-          .stream()
-          .filter(filterFn)
-          .subscribe({
-            next: nextFn,
-          })
+        api.stream().filter(filterFn).subscribe({
+          next: nextFn,
+        })
       } else {
         api.stream().subscribe({
           next: nextFn,

package/src/javascripts/ui/hooks/seamly-option-hooks.js

@@ -24,10 +24,10 @@ export const useSeamlyOptions = () => {
   const optionsObj = { cobrowsing, sendTranscript }
 
   const menuOptions = Object.keys(optionsObj)
-    .filter(key => {
+    .filter((key) => {
       return optionsObj[key]
     })
-    .map(option => ({
+    .map((option) => ({
       name: option,
       title: t(`options.${option}.menuTitle`),
       available: optionsObj[option].enabled,
@@ -44,7 +44,7 @@ export const useSeamlyOptions = () => {
   }, [get, dispatch])
 
   const setUserSelectedOptions = useCallback(
-    optionValues => {
+    (optionValues) => {
       dispatch({ type: SET_USER_SELECTED_OPTIONS, options: optionValues })
       set('options', optionValues)
     },
@@ -63,7 +63,7 @@ export const useSeamlyOptions = () => {
     [dispatch, get, set],
   )
 
-  const showOption = optionName => {
+  const showOption = (optionName) => {
     dispatch({ type: SHOW_OPTION, optionName })
   }
 

package/src/javascripts/ui/hooks/seamly-state-hooks.js

@@ -1,19 +1,14 @@
 import { createSelector } from 'reselect'
 import { useSelector } from '../../domains/redux'
 import { microsecondsToMilliseconds } from '../utils/general-utils'
+import { Selectors as ConfigSelectors, useConfig } from '../../domains/config'
 
-export const selectState = state => state.state
+export const selectState = (state) => state.state
 export const useSeamlyStateContext = () => useSelector(selectState)
 
-export const selectConfig = createSelector(
-  selectState,
-  ({ config }) => config || {},
-)
-export const useSeamlyConfig = () => useSelector(selectConfig)
-
 export const selectEvents = createSelector(
   selectState,
-  selectConfig,
+  ConfigSelectors.selectConfig,
   ({ events }, config) => {
     const { enabled, threshold } = config?.messages?.timeIndicator ?? {}
     if (!enabled) {
@@ -53,13 +48,13 @@ export const useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents
 
 export const useSkiplink = () => useSeamlyStateContext().skiplinkTargetId
 
-export const useSeamlyParticipant = participantId =>
+export const useSeamlyParticipant = (participantId) =>
   useSeamlyStateContext().participantInfo.participants[participantId]
 
 export const useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo
 
-const selectLastMessageEventId = createSelector(selectEvents, events => {
-  const filteredEvents = events.filter(event => event.type === 'message')
+const selectLastMessageEventId = createSelector(selectEvents, (events) => {
+  const filteredEvents = events.filter((event) => event.type === 'message')
   return filteredEvents[filteredEvents.length - 1]?.payload.id
 })
 export const useLastMessageEventId = () => useSelector(selectLastMessageEventId)
@@ -67,16 +62,13 @@ export const useLastMessageEventId = () => useSelector(selectLastMessageEventId)
 export const useSeamlyIsHistoryLoaded = () =>
   useSeamlyStateContext().historyLoaded
 
-export const useSeamlyDisclaimerState = () =>
-  useSeamlyStateContext().showDisclaimer
-
 export const useSeamlyCurrentAgent = () => {
   const { participants, currentAgent } = useSeamlyStateContext().participantInfo
 
   return currentAgent ? participants[currentAgent] : null
 }
 
-export const useSeamlyServiceData = key =>
+export const useSeamlyServiceData = (key) =>
   useSeamlyStateContext().serviceData[key]
 
 export const useEntryTextLimit = () => {
@@ -95,7 +87,7 @@ export const useEntryTextLimit = () => {
 }
 
 export const useSeamlyLayoutMode = () => {
-  const { layoutMode } = useSeamlyConfig()
+  const { layoutMode } = useConfig()
 
   return {
     isInline: layoutMode === 'inline',

package/src/javascripts/ui/hooks/use-event-component-mapping.js

@@ -2,7 +2,7 @@ import { useContext } from 'preact/hooks'
 import ComponentContext from '../components/conversation/component-context'
 import { payloadTypes } from '../utils/seamly-utils'
 
-const useEventComponentMapping = event => {
+const useEventComponentMapping = (event) => {
   const components = useContext(ComponentContext)
 
   let SubComponent = null

package/src/javascripts/ui/hooks/use-seamly-chat.js

@@ -88,6 +88,7 @@ const useSeamlyChat = () => {
     // they had been connected before.
     // We also keep track of whether connect was called before to avoid
     // multiple in-flight connection processes.
+
     if (
       (!isOpen && !hasConversation) ||
       connectCalled.current ||

package/src/javascripts/ui/hooks/use-seamly-commands.js

@@ -10,17 +10,17 @@ import {
 } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { SeamlyEventBusContext } from '../components/core/seamly-api-context'
-import useSeamlyInterrupt from './use-seamly-interrupt'
 import { randomId } from '../../lib/id'
 import { userParticipantId } from '../../config'
 import { sanitizeText } from '../utils/general-utils'
 import { actionTypes, seamlyActions } from '../utils/seamly-utils'
 import { useStableCallback } from './utility-hooks'
+import { Actions as InterruptActions } from '../../domains/interrupt'
+import { useConfig } from '../../domains/config'
 
 const {
   ADD_EVENT,
   CLEAR_EVENTS,
-  CLEAR_INTERRUPT,
   SET_IS_LOADING,
   CLEAR_PARTICIPANTS,
   SET_HEADER_SUB_TITLE,
@@ -33,18 +33,15 @@ const {
 
 const useSeamlyCommands = () => {
   const api = useSeamlyApiContext()
-  const seamlyState = useSeamlyStateContext()
+  const appConfig = useConfig()
   const dispatch = useSeamlyDispatchContext()
   const eventBus = useContext(SeamlyEventBusContext)
-  const { setInterrupt } = useSeamlyInterrupt()
 
   const hasResponded = useSeamlyHasUserResponded()
   const hasConversation = useSeamlyHasConversation()
   const { visible: visibility } = useSeamlyStateContext()
   const unreadMessageCount = useSeamlyUnreadCount()
 
-  const { config: appConfig } = seamlyState
-
   const emitEvent = useCallback(
     (...args) => {
       eventBus.emit(...args)
@@ -79,7 +76,7 @@ const useSeamlyCommands = () => {
 
   const reset = useCallback(async () => {
     dispatch({ type: CLEAR_EVENTS })
-    dispatch({ type: CLEAR_INTERRUPT })
+    dispatch(InterruptActions.clear())
     dispatch({
       type: SET_IS_LOADING,
       isLoading: true,
@@ -105,35 +102,25 @@ const useSeamlyCommands = () => {
       dispatch({ type: SET_FEATURES, features })
       dispatch({ type: SET_INITIAL_STATE, initialState })
     } catch (error) {
-      setInterrupt(error)
+      dispatch(InterruptActions.set(error))
     }
-  }, [api, dispatch, appConfig, setInterrupt])
+  }, [api, dispatch, appConfig])
 
   const getMessageBase = useCallback(
-    type => {
-      const { events } = seamlyState
-
-      return {
-        type,
-        id: randomId(),
-        transactionId: randomId(),
-        participant: userParticipantId,
-        fromClient: true,
-        // We add a timestamp of 1 greater than the previous timestamp in the
-        // events array to ensure proper sorting should a history fetch be done
-        // prior to receipt of the related ACK.
-        occurredAt:
-          events.length > 0
-            ? events[events.length - 1].payload.occurredAt + 1
-            : Date.now(),
-        meta: {},
-      }
-    },
-    [seamlyState],
+    (type) => ({
+      type,
+      id: randomId(),
+      transactionId: randomId(),
+      participant: userParticipantId,
+      fromClient: true,
+      occurredAt: Date.now() * 1000,
+      meta: {},
+    }),
+    [],
   )
 
   const getTextMessageBase = useCallback(
-    bodyText => {
+    (bodyText) => {
       const base = getMessageBase('text')
 
       return {
@@ -177,7 +164,7 @@ const useSeamlyCommands = () => {
   )
 
   const addMessageBubble = useCallback(
-    text => {
+    (text) => {
       dispatch({
         type: ADD_EVENT,
         event: { type: 'message', payload: getTextMessageBase(text) },
@@ -187,16 +174,7 @@ const useSeamlyCommands = () => {
   )
 
   const addUploadBubble = useCallback(
-    (
-      id,
-      transactionId,
-      occurredAt,
-      contentType,
-      deleteAt,
-      filename,
-      filesize,
-      url,
-    ) => {
+    (id, transactionId, occurredAt, contentType, filename, filesize, url) => {
       dispatch({
         type: ADD_EVENT,
         event: {
@@ -209,7 +187,7 @@ const useSeamlyCommands = () => {
             fromClient: true,
             occurredAt,
             meta: {},
-            body: { contentType, deleteAt, filename, filesize, url },
+            body: { contentType, filename, filesize, url },
           },
         },
       })
@@ -218,7 +196,7 @@ const useSeamlyCommands = () => {
   )
 
   const addDivider = useCallback(
-    subtype => {
+    (subtype) => {
       const payload = {
         body: { subtype, type: 'divider' },
         fromClient: false,
@@ -253,7 +231,7 @@ const useSeamlyCommands = () => {
   )
 
   const sendAction = useCallback(
-    body => {
+    (body) => {
       if (!body) {
         return
       }
@@ -269,7 +247,7 @@ const useSeamlyCommands = () => {
   )
 
   const sendContext = useCallback(
-    context => {
+    (context) => {
       api.sendContext(context)
     },
     [api],
@@ -282,15 +260,15 @@ const useSeamlyCommands = () => {
 
     return api
       .connect()
-      .then(initialState => {
+      .then((initialState) => {
         if (initialState) {
           dispatch({ type: SET_INITIAL_STATE, initialState })
         }
       })
-      .catch(error => {
-        setInterrupt(error)
+      .catch((error) => {
+        dispatch(InterruptActions.set(error))
       })
-  }, [api, dispatch, setInterrupt])
+  }, [api, dispatch])
 
   return {
     connect,

package/src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js

@@ -41,7 +41,7 @@ const useSeamlyIdleDetachCountdown = () => {
   const { sendAssertive, sendPolite } = useLiveRegion()
 
   const sendAssertiveIfOpen = useCallback(
-    text => {
+    (text) => {
       const { isOpen } = stableState.current
       if (isOpen) {
         sendAssertive(text)
@@ -51,7 +51,7 @@ const useSeamlyIdleDetachCountdown = () => {
   )
 
   const sendPoliteIfOpen = useCallback(
-    text => {
+    (text) => {
       const { isOpen } = stableState.current
       if (isOpen) {
         sendPolite(text)
@@ -61,7 +61,7 @@ const useSeamlyIdleDetachCountdown = () => {
   )
 
   const initCountdown = useCallback(
-    milliseconds => {
+    (milliseconds) => {
       const delaySeconds = millisecondsToSeconds(milliseconds)
       const delayTime = getTimeFromSeconds(delaySeconds)