@seamly/web-ui 20.7.0 → 20.8.0-alpha.1

package/src/javascripts/ui/components/view/window-view/window-open-button.js

@@ -1,19 +1,19 @@
+import { useStartChatIcon } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
 import { useCallback } from 'preact/hooks'
-import { className } from '../../../../lib/css'
+import InOutTransition, {
+  transitionStartStates,
+} from 'ui/components/widgets/in-out-transition'
+import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
+import { useSeamlyHasConversation } from 'ui/hooks/seamly-api-hooks'
 import {
   useSeamlyCurrentAgent,
   useSeamlyUnreadCount,
-  useSkiplinkTargetFocusing,
-} from '../../../hooks/seamly-hooks'
-import { useI18n } from '../../../../domains/i18n'
-import { useStartChatIcon } from '../../../../domains/config'
-import { useVisibility } from '../../../../domains/visibility'
-import Icon from '../../layout/icon'
-import { useInterrupt } from '../../../../domains/interrupt'
-import InOutTransition, {
-  transitionStartStates,
-} from '../../widgets/in-out-transition'
-import { useSeamlyHasConversation } from '../../../hooks/seamly-api-hooks'
+} from 'ui/hooks/seamly-state-hooks'
 
 const ButtonIcon = () => {
   const startChatIcon = useStartChatIcon()
@@ -35,7 +35,7 @@ const ButtonIcon = () => {
 const WindowOpenButton = ({ onClick }) => {
   const hasConversation = useSeamlyHasConversation()
   const { t } = useI18n()
-  const ariaLabel = hasConversation
+  const ariaLabel = hasConversation()
     ? t('window.openButton.srContinue')
     : t('window.openButton.srStart')
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()

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

@@ -1,5 +1,5 @@
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
 import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
 import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'

package/src/javascripts/ui/components/warnings/resume-conversation-prompt.js

@@ -1,5 +1,5 @@
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
 import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
 import { useSeamlyCurrentAgent } from 'ui/hooks/seamly-state-hooks'

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

@@ -1,12 +1,12 @@
 import { useRef } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import {
   useSeamlyActivityEventHandler,
   useSeamlyAppContainerClassNames,
 } from 'ui/hooks/seamly-hooks'
 import { className } from 'lib/css'
 import Icon from 'ui/components/layout/icon'
-import { useConfig } from 'domains/config'
+import { useConfig } from 'domains/config/hooks'
 import Modal from './modal'
 
 const Lightbox = ({ url, description, onClose: onCloseHandler }) => {

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

@@ -1,6 +1,6 @@
 import { className } from 'lib/css'
 import { useFileUploads } from 'ui/hooks/seamly-hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import Error from 'ui/components/form-controls/error'
 
 const UploadProgress = () => {

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

@@ -1,4 +1,4 @@
-import { useConfig } from 'domains/config'
+import { useConfig } from 'domains/config/hooks'
 
 export const useSeamlyAppContainerClassNames = () => {
   return useConfig().appContainerClassNames

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

@@ -1,10 +1,8 @@
+import { clearAllUploads } from 'domains/store/slice'
 import { useCallback, useContext } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
-import { seamlyActions } from 'ui/utils/seamly-utils'
 import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-
-const { CLEAR_ALL_UPLOADS } = seamlyActions
 
 const useSeamlyFileUploadContext = () => useContext(SeamlyFileUploadContext)
 
@@ -47,7 +45,7 @@ export const useFileUploadMeta = () => {
 
 export const useFileUploads = () => {
   const { currentUploads } = useSeamlyStateContext()
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const upload = useSeamlyFileUploadContext()
 
   const uploadFile = useCallback(
@@ -58,7 +56,7 @@ export const useFileUploads = () => {
   )
 
   const clearUploads = useCallback(() => {
-    dispatch({ type: CLEAR_ALL_UPLOADS })
+    dispatch(clearAllUploads())
   }, [dispatch])
 
   return {

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

@@ -1,36 +1,38 @@
+import { setSeamlyContainerElement } from 'domains/store/slice'
 import { useCallback, useRef } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 import {
   focusElement,
   runIfElementContainsOrHasFocus,
 } from 'ui/utils/general-utils'
-import { seamlyActions } from 'ui/utils/seamly-utils'
 import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
 
-const { SET_SEAMLY_CONTAINER_ELEMENT } = seamlyActions
+export const timeout = (ms = 0) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
 
 const focusWithRaf = (el) => {
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      const focusEl = typeof el === 'string' ? document.getElementById(el) : el
-      focusElement(focusEl)
-    })
+  requestAnimationFrame(async () => {
+    await timeout(180) // wait for next 3 ticks
+    const focusEl = typeof el === 'string' ? document.getElementById(el) : el
+    focusElement(focusEl)
   })
 }
 
 export const useSeamlyContainerElement = () => {
   const { seamlyContainerElement } = useSeamlyStateContext()
 
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
 
-  const setSeamlyContainerElement = useCallback(
+  const dispatchSeamlyContainerElement = useCallback(
     (element) => {
-      dispatch({ type: SET_SEAMLY_CONTAINER_ELEMENT, element })
+      dispatch(setSeamlyContainerElement(element))
     },
     [dispatch],
   )
 
-  return [seamlyContainerElement, setSeamlyContainerElement]
+  return [seamlyContainerElement, dispatchSeamlyContainerElement]
 }
 
 export const useElementFocusingById = (elementId) =>

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

@@ -9,6 +9,7 @@ export const useLiveRegion = () => {
   const sendMessage = useSeamlyLiveRegionContext()
   const sendPolite = useCallback(
     (messageText) => {
+      if (!messageText) return
       sendMessage({
         ariaLive: ariaLiveLevels.polite,
         messageText,
@@ -18,6 +19,7 @@ export const useLiveRegion = () => {
   )
   const sendAssertive = useCallback(
     (messageText) => {
+      if (!messageText) return
       sendMessage({
         ariaLive: ariaLiveLevels.assertive,
         messageText,

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

@@ -1,4 +1,4 @@
-import { useContext } from 'preact/hooks'
+import { useCallback, useContext } from 'preact/hooks'
 import { SeamlyApiContext } from 'ui/components/core/seamly-api-context'
 
 export const useSeamlyApiContext = () => useContext(SeamlyApiContext)
@@ -19,6 +19,11 @@ export const useSeamlyConversationUrl = () => {
 }
 
 export const useSeamlyHasConversation = () => {
-  const url = useSeamlyConversationUrl()
-  return !!url
+  const api = useSeamlyApiContext()
+
+  const hasConversation = useCallback(() => {
+    return api.hasConversation()
+  }, [api])
+
+  return hasConversation
 }

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

@@ -1,16 +1,14 @@
-import { useRef, useCallback, useEffect } from 'preact/hooks'
-import { seamlyActions, actionTypes } from 'ui/utils/seamly-utils'
 import { typingTimeout } from 'config'
-import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { useSeamlyOptions } from './seamly-option-hooks'
-import useSeamlyCommands from './use-seamly-commands'
-
-const {
-  SET_BLOCK_AUTO_ENTRY_SWITCH,
-  SET_ACTIVE_ENTRY_TYPE,
-  SET_USER_ENTRY_TYPE,
-} = seamlyActions
+import {
+  setBlockAutoEntrySwitch,
+  setActiveEntryType,
+  setUserEntryType,
+} from 'domains/store/slice'
+import { useSeamlyCommands, useSeamlyOptions } from 'ui/hooks/seamly-hooks'
+import { useRef, useEffect, useCallback } from 'preact/hooks'
+import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
+import { useDispatch } from 'react-redux'
+import { actionTypes } from 'ui/utils/seamly-utils'
 
 export const useSeamlyTyping = () => {
   const { sendAction } = useSeamlyCommands()
@@ -82,47 +80,52 @@ export const useSeamlyEntry = () => {
     options: entryOptions,
     optionsOverride: entryOptionsOverride,
   } = useSeamlyStateContext().entryMeta
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
 
   const activeEntry = userSelected || active || defaultEntry
   const activeEntryOptions =
     entryOptionsOverride[activeEntry] || entryOptions[activeEntry] || {}
 
-  const setBlockAutoEntrySwitch = useCallback(
+  const dispatchBlockAutoEntrySwitch = useCallback(
     (value) => {
-      dispatch({ type: SET_BLOCK_AUTO_ENTRY_SWITCH, value })
+      dispatch(setBlockAutoEntrySwitch(value))
     },
     [dispatch],
   )
 
-  const setActiveEntryType = useCallback(
+  const dispatchActiveEntryType = useCallback(
     (entryType) => {
-      dispatch({ type: SET_ACTIVE_ENTRY_TYPE, entryType })
+      dispatch(setActiveEntryType(entryType))
     },
     [dispatch],
   )
 
-  const setUserEntryType = useCallback(
+  const dispatchUserEntryType = useCallback(
     (entryType) => {
-      dispatch({ type: SET_USER_ENTRY_TYPE, entryType })
+      dispatch(setUserEntryType(entryType))
     },
     [dispatch],
   )
 
   const cancelEntrySelection = useCallback(() => {
     if (userSelected) {
-      setUserEntryType(null)
+      dispatchUserEntryType(null)
     } else {
-      setActiveEntryType(defaultEntry)
+      dispatchActiveEntryType(defaultEntry)
     }
-  }, [userSelected, defaultEntry, setUserEntryType, setActiveEntryType])
+  }, [
+    userSelected,
+    defaultEntry,
+    dispatchUserEntryType,
+    dispatchActiveEntryType,
+  ])
 
   return {
     activeEntry,
     activeEntryOptions,
-    setActiveEntryType,
-    setUserEntryType,
+    setActiveEntryType: dispatchActiveEntryType,
+    setUserEntryType: dispatchUserEntryType,
     cancelEntrySelection,
-    setBlockAutoEntrySwitch,
+    setBlockAutoEntrySwitch: dispatchBlockAutoEntrySwitch,
   }
 }

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

@@ -1,4 +1,5 @@
 import { useEffect } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 
 // Import extracted hooks here for use inside this file
 import { useSeamlyApiContext } from './seamly-api-hooks'
@@ -6,10 +7,27 @@ import { useSeamlyApiContext } from './seamly-api-hooks'
 // although this is a redundant, it prevents a bazillion code changes for now.
 // TODO: Remove exports and import them from the correct files
 export {
-  useLastMessageEventId,
+  useElementFocusingById,
+  useFocusIfSeamlyContainedFocus,
+  useSeamlyContainerElement,
+  useSkiplinkTargetFocusing,
+} from 'ui/hooks/focus-helper-hooks'
+export {
+  useSeamlyAppContainerClassNames,
+  useSeamlyMessageContainerClassNames,
+} from './component-helper-hooks'
+export { useFileUploadMeta, useFileUploads } from './file-upload-hooks'
+export { useLiveRegion, useSeamlyLiveRegionContext } from './live-region-hooks'
+export {
+  useSeamlyApiContext,
+  useSeamlyConversationUrl,
+} from './seamly-api-hooks'
+export { useOptionButton, useSeamlyOptions } from './seamly-option-hooks'
+export {
   useEntryTextLimit,
-  useSeamlyCurrentAgent,
   useEvents,
+  useLastMessageEventId,
+  useSeamlyCurrentAgent,
   useSeamlyHeaderData,
   useSeamlyIsHistoryLoaded,
   useSeamlyIsLoading,
@@ -21,35 +39,17 @@ export {
   useSeamlyUnreadCount,
   useSkiplink,
 } from './seamly-state-hooks'
-export {
-  useSeamlyApiContext,
-  useSeamlyConversationUrl,
-} from './seamly-api-hooks'
-export { default as useSeamlyDispatchContext } from './use-seamly-dispatch'
-export {
-  useSeamlyAppContainerClassNames,
-  useSeamlyMessageContainerClassNames,
-} from './component-helper-hooks'
-export { useSeamlyOptions, useOptionButton } from './seamly-option-hooks'
-export { useFileUploadMeta, useFileUploads } from './file-upload-hooks'
-export { default as useSeamlyCommands } from './use-seamly-commands'
-export { useLiveRegion, useSeamlyLiveRegionContext } from './live-region-hooks'
 export { default as useSeamlyActivityEventHandler } from './use-seamly-activity-event-handler'
-export { useSeamlyTyping, useSeamlyEntry } from './seamly-entry-hooks'
+export { default as useSeamlyChat } from './use-seamly-chat'
+export { default as useSeamlyCommands } from './use-seamly-commands'
+export { default as useSeamlyIdleDetachCountdown } from './use-seamly-idle-detach-countdown'
+export { default as useSeamlyResumeConversationPrompt } from './use-seamly-resume-conversation-prompt'
 export {
   useForceUpdate,
   useGeneratedId,
   useStableCallback,
 } from './utility-hooks'
-export {
-  useElementFocusingById,
-  useSkiplinkTargetFocusing,
-  useFocusIfSeamlyContainedFocus,
-  useSeamlyContainerElement,
-} from './focus-helper-hooks'
-export { default as useSeamlyChat } from './use-seamly-chat'
-export { default as useSeamlyIdleDetachCountdown } from './use-seamly-idle-detach-countdown'
-export { default as useSeamlyResumeConversationPrompt } from './use-seamly-resume-conversation-prompt'
+export { useDispatch as useSeamlyDispatchContext }
 
 // This hook isn't used within the core
 // But it is used in implementations

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

@@ -1,17 +1,15 @@
+import { useI18n } from 'domains/i18n/hooks'
+import {
+  hideOption as dispatchHideOption,
+  setUserSelectedOption as dispatchUserSelectedOption,
+  setUserSelectedOptions as dispatchUserSelectedOptions,
+  showOption as dispatchShowOption,
+} from 'domains/store/slice'
 import { useCallback } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { useSeamlyObjectStore } from './seamly-api-hooks'
-import { useElementFocusingById } from './focus-helper-hooks'
-
-const {
-  SET_USER_SELECTED_OPTION,
-  SET_USER_SELECTED_OPTIONS,
-  SHOW_OPTION,
-  HIDE_OPTION,
-} = seamlyActions
+import { useDispatch } from 'react-redux'
+import { useElementFocusingById } from 'ui/hooks/focus-helper-hooks'
+import { useSeamlyObjectStore } from 'ui/hooks/seamly-api-hooks'
+import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
 
 export const useSeamlyOptions = () => {
   const { t } = useI18n()
@@ -35,17 +33,17 @@ export const useSeamlyOptions = () => {
 
   const allowOptionSelection = cobrowsing || sendTranscript
 
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const { get, set } = useSeamlyObjectStore()
 
   const initUserSelectedOptions = useCallback(() => {
     const storedOptions = get('options') || {}
-    dispatch({ type: SET_USER_SELECTED_OPTIONS, options: storedOptions })
+    dispatch(dispatchUserSelectedOptions(storedOptions))
   }, [get, dispatch])
 
   const setUserSelectedOptions = useCallback(
     (optionValues) => {
-      dispatch({ type: SET_USER_SELECTED_OPTIONS, options: optionValues })
+      dispatch(dispatchUserSelectedOptions(optionValues))
       set('options', optionValues)
     },
     [set, dispatch],
@@ -58,17 +56,17 @@ export const useSeamlyOptions = () => {
         ...storedOptions,
         [option]: value,
       })
-      dispatch({ type: SET_USER_SELECTED_OPTION, option, value })
+      dispatch(dispatchUserSelectedOption({ option, value }))
     },
     [dispatch, get, set],
   )
 
   const showOption = (optionName) => {
-    dispatch({ type: SHOW_OPTION, optionName })
+    dispatch(dispatchShowOption(optionName))
   }
 
   const hideOption = () => {
-    dispatch({ type: HIDE_OPTION })
+    dispatch(dispatchHideOption())
   }
 
   return {

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

@@ -1,23 +1,23 @@
-import { createSelector } from 'reselect'
-import { useSelector } from 'domains/redux'
-import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 import * as ConfigSelectors from 'domains/config/selectors'
-import * as AppSelectors from 'domains/app/selectors'
+import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
+import { createSelector } from '@reduxjs/toolkit'
+import { selectUserHasResponded } from 'domains/app/selectors'
 import { useConfig } from 'domains/config/hooks'
+import { useSelector } from 'react-redux'
 
-export const selectState = (state) => state.state
+export const selectState = ({ state }) => state
 export const useSeamlyStateContext = () => useSelector(selectState)
 
 export const selectEventsWithSuggestion = createSelector(
   selectState,
   ConfigSelectors.selectConfig,
-  AppSelectors.selectUserHasResponded,
-  ({ events, serviceData }, config, userHasResponded) => {
+  selectUserHasResponded,
+  ({ events, serviceData }, config, hasUserResponded) => {
     if (
-      userHasResponded ||
+      hasUserResponded ||
       config.layoutMode === 'inline' ||
-      !serviceData.suggestion ||
-      !serviceData.suggestion?.body.length
+      !serviceData?.suggestion ||
+      !serviceData?.suggestion?.body.length
     ) {
       return events
     }
@@ -63,7 +63,7 @@ export const selectEvents = createSelector(
     return mappedEvents
   },
 )
-export const useEvents = () => useSelector(selectEvents, [])
+export const useEvents = () => useSelector(selectEvents)
 
 export const useSeamlyIsLoading = () => useSeamlyStateContext().isLoading
 
@@ -96,8 +96,9 @@ export const useSeamlyCurrentAgent = () => {
   return currentAgent ? participants[currentAgent] : null
 }
 
-export const useSeamlyServiceData = (key) =>
-  useSeamlyStateContext().serviceData[key]
+export const useSeamlyServiceData = (key) => {
+  return useSeamlyStateContext().serviceData[key]
+}
 
 export const useEntryTextLimit = () => {
   const {

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

@@ -1,23 +1,21 @@
+import { useI18n } from 'domains/i18n/hooks'
+import { setIsLoading } from 'domains/store/slice'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
 import { useCallback, useEffect, useRef } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import { useVisibility, visibilityStates } from 'domains/visibility'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
+import { useDispatch, useSelector } from 'react-redux'
+import { selectShowInlineView } from '../../domains/visibility/selectors'
+import { useLiveRegion } from './live-region-hooks'
+import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useEvents, useSeamlyLayoutMode } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { useSeamlyHasConversation } from './seamly-api-hooks'
-import { useLiveRegion } from './live-region-hooks'
-import { useSelector } from '../../domains/redux/hooks'
-import { selectShowInlineView } from '../../domains/visibility/selectors'
-
-const { SET_IS_LOADING } = seamlyActions
 
 const useSeamlyChat = () => {
   const { t } = useI18n()
   const { isInline, isWindow } = useSeamlyLayoutMode()
   const { isOpen, isVisible, setVisibility } = useVisibility()
   const showInlineView = useSelector(selectShowInlineView)
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const events = useEvents()
   const spinnerTimeout = useRef(null)
   const { start, connect, apiConfigReady, apiConnected } = useSeamlyCommands()
@@ -60,20 +58,14 @@ const useSeamlyChat = () => {
     // This delays the start of the loading inidicator we set when we initialise
     // the application. This is done to only avoid BSOD on initial load if DCX is slow.
     spinnerTimeout.current = setTimeout(() => {
-      dispatch({
-        type: SET_IS_LOADING,
-        isLoading: true,
-      })
+      dispatch(setIsLoading(true))
     }, 500)
   }, [dispatch])
 
   useEffect(() => {
     if (hasEvents) {
       clearTimeout(spinnerTimeout.current)
-      dispatch({
-        type: SET_IS_LOADING,
-        isLoading: false,
-      })
+      dispatch(setIsLoading(false))
     }
   }, [hasEvents, dispatch])
 
@@ -106,21 +98,19 @@ const useSeamlyChat = () => {
     if (
       !apiConfigReady ||
       startCalled.current ||
-      (isWindow && !isOpen && !hasConversation) ||
+      (isWindow && !isOpen && !hasConversation()) ||
       (isInline && !showInlineView)
     ) {
       return
     }
 
-    if (hasConversation && isOpen) {
+    if (hasConversation() && isOpen) {
       // We deactivate the extra startup loading spinner when a conversation is available
       // We also stop setting the loading indicator in the first place to avoid a flash.
       clearTimeout(spinnerTimeout.current)
-      dispatch({
-        type: SET_IS_LOADING,
-        isLoading: false,
-      })
+      dispatch(setIsLoading(false))
     }
+
     connectAndStart()
   }, [
     apiConfigReady,