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

package/src/javascripts/ui/components/options/options-button.js

@@ -2,12 +2,13 @@ import { createRef } from 'preact'
 import { useState, useRef, useEffect, useMemo } from 'preact/hooks'
 import { className } from 'lib/css'
 import { useSeamlyOptions, useOptionButton } from 'ui/hooks/seamly-hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
 import { getKey, keyNames, focusElement } from 'ui/utils/general-utils'
+import { timeout } from 'ui/hooks/focus-helper-hooks'
 import Options from './options'
 
 const OptionsButton = () => {
@@ -41,15 +42,15 @@ const OptionsButton = () => {
 
   useEffect(() => {
     if (menuIsOpen && !prevMenuIsOpen.current) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          const firstActiveOptionIndex = menuOptions.findIndex(
-            (option) => option.available,
-          )
-          const focusIndex =
-            firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex
-          focusElement(menuItemButtons.current[focusIndex])
-        })
+      requestAnimationFrame(async () => {
+        await timeout(60) // Wait for next frame tick
+        const firstActiveOptionIndex = menuOptions.findIndex(
+          (option) => option.available,
+        )
+
+        const focusIndex =
+          firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex
+        focusElement(menuItemButtons.current[focusIndex])
       })
     }
     prevMenuIsOpen.current = menuIsOpen
@@ -155,11 +156,14 @@ const OptionsButton = () => {
   if (!optionsLength) {
     return null
   }
+
   return (
     <div
       className={className('options__container')}
       onKeyDown={onMainKeyDownHandler}
+      // eslint-disable-next-line react/no-unknown-property
       onfocusout={onFocusOutHandler}
+      // eslint-disable-next-line react/no-unknown-property
       onfocusin={onFocusInHandler}
     >
       <InOutTransition

package/src/javascripts/ui/components/options/transcript/index.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import OptionsFrame from 'ui/components/options/options-frame'
 import { className } from 'lib/css'
 import {
@@ -9,7 +9,7 @@ import {
   useSeamlyOptions,
 } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
-import { FormProvider } from 'domains/forms'
+import FormProvider from 'domains/forms/provider'
 import { getValidator } from 'ui/utils/form-utils'
 import { isEmailString, isNotEmptyString } from 'ui/utils/validations'
 import TranscriptForm from './transcript-form'

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

@@ -1,5 +1,5 @@
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import Form from 'ui/components/form-controls/form'
 import Input from 'ui/components/form-controls/input'
 

package/src/javascripts/ui/components/suggestions/index.js

@@ -1,8 +1,10 @@
-import { useUserHasResponded } from 'domains/app'
-import { useI18n } from 'domains/i18n'
-import { useInterrupt } from 'domains/interrupt'
-import { useTranslatedEventData } from 'domains/translations'
-import { useVisibility, visibilityStates } from 'domains/visibility'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useTranslatedEventData } from 'domains/translations/hooks'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import SuggestionsList from 'ui/components/suggestions/suggestions-list'
@@ -28,6 +30,7 @@ const Suggestions = ({ isAside = false }) => {
   const { t } = useI18n()
   const { sendAction, addMessageBubble } = useSeamlyCommands()
   const { isOpen, setVisibility } = useVisibility()
+  const { showSuggestions } = useConfig()
   // a11y hooks
   const sectionId = useGeneratedId()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
@@ -38,9 +41,9 @@ const Suggestions = ({ isAside = false }) => {
   const { hasCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
   const { hasPrompt, continueChat } = useSeamlyResumeConversationPrompt()
   // data hooks
-  const hasResponded = useUserHasResponded()
+  const userHasResponded = useUserHasResponded()
   const payload = useSeamlyServiceData('suggestion')
-  const [eventBody] = useTranslatedEventData({ payload })
+  const { body: eventBody } = useTranslatedEventData({ payload })
   const suggestions = useMemo(
     () => (payload && !hasInterrupt ? eventBody : []),
     [payload, hasInterrupt, eventBody],
@@ -52,10 +55,11 @@ const Suggestions = ({ isAside = false }) => {
   const previousRenderedSuggestions = useRef([])
   const hasSuggestions = !!suggestions.length
   const hideSuggestions = isInline
-    ? (hasResponded || isOpen) && !isAside
-    : hasResponded
+    ? (userHasResponded || isOpen) && !isAside
+    : userHasResponded
   const prevHideSuggestions = useRef(hideSuggestions)
-  const showSuggestionsContainer = hasSuggestions && !hideSuggestions
+  const showSuggestionsContainer =
+    hasSuggestions && !hideSuggestions && showSuggestions
   const renderedSuggestions = hasSuggestions
     ? suggestions
     : previousRenderedSuggestions.current

package/src/javascripts/ui/components/view/deprecated-view.js

@@ -1,4 +1,4 @@
-import { useVisibility, useShowInlineView } from 'domains/visibility'
+import { useVisibility, useShowInlineView } from 'domains/visibility/hooks'
 import DeprecatedAppFrame from '../layout/deprecated-app-frame'
 import ChatFrame from '../layout/chat-frame'
 import AgentInfo from '../layout/agent-info'
@@ -9,27 +9,30 @@ import Interrupt from '../layout/interrupt'
 import { useSeamlyChat } from '../../hooks/seamly-hooks'
 import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 
+const ShowInlineView = ({ children }) => {
+  const { showInlineView, containerRef } = useShowInlineView()
+
+  return <div ref={containerRef}>{showInlineView && children}</div>
+}
+
 const DeprecatedView = () => {
   const { isVisible } = useVisibility()
   const { openChat, closeChat } = useSeamlyChat()
-  const { showInlineView, containerRef } = useShowInlineView()
 
   return (
     isVisible && (
-      <div ref={containerRef}>
-        {showInlineView && (
-          <DeprecatedAppFrame>
-            <DeprecatedToggleButton onOpenChat={openChat} />
-            <Header onCloseChat={closeChat}>
-              <AgentInfo />
-            </Header>
-            <ChatFrame interruptComponent={Interrupt}>
-              <Conversation />
-              <EntryContainer />
-            </ChatFrame>
-          </DeprecatedAppFrame>
-        )}
-      </div>
+      <ShowInlineView>
+        <DeprecatedAppFrame>
+          <DeprecatedToggleButton onOpenChat={openChat} />
+          <Header onCloseChat={closeChat}>
+            <AgentInfo />
+          </Header>
+          <ChatFrame interruptComponent={Interrupt}>
+            <Conversation />
+            <EntryContainer />
+          </ChatFrame>
+        </DeprecatedAppFrame>
+      </ShowInlineView>
     )
   )
 }

package/src/javascripts/ui/components/view/index.js

@@ -1,14 +1,14 @@
+import { useUserHasResponded } from 'domains/app/hooks'
 import { useCallback, useMemo } from 'preact/hooks'
-import { useConfig } from '../../../domains/config'
-import AppView from './app-view'
-import InlineView from './inline-view'
-import WindowView from './window-view'
-import { useVisibility } from '../../../domains/visibility'
-import { className } from '../../../lib/css'
-import { useSeamlyAppContainerClassNames } from '../../hooks/component-helper-hooks'
-import { useUserHasResponded } from '../../../domains/app'
-import { useI18n } from '../../../domains/i18n'
-import { useSeamlyContainerElement } from '../../hooks/focus-helper-hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { useSeamlyContainerElement } from 'ui/hooks/focus-helper-hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import AppView from 'ui/components/view/app-view'
+import InlineView from 'ui/components/view/inline-view'
+import WindowView from 'ui/components/view/window-view'
+import { className } from 'lib/css'
 
 const ViewComponentsMap = {
   app: AppView,
@@ -21,7 +21,7 @@ const View = ({ children }) => {
   const { namespace, layoutMode, zIndex } = useConfig()
   const { isOpen, isVisible } = useVisibility()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
-  const userResponded = useUserHasResponded()
+  const userHasResponded = useUserHasResponded()
   const { locale } = useI18n()
   const ViewComponent = ViewComponentsMap[layoutMode]
 
@@ -60,7 +60,7 @@ const View = ({ children }) => {
     classNames.push('app--collapsed')
   }
 
-  if (userResponded) {
+  if (userHasResponded) {
     classNames.push('app--user-responded')
   }
 

package/src/javascripts/ui/components/view/inline-view.js

@@ -1,6 +1,6 @@
 import { className } from 'lib/css'
-import { useVisibility, useShowInlineView } from 'domains/visibility'
-import { useInterrupt } from 'domains/interrupt'
+import { useVisibility, useShowInlineView } from 'domains/visibility/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
 import Chat from '../layout/chat'
 import Interrupt from '../layout/interrupt'
 import Conversation from '../conversation/conversation'

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

@@ -1,7 +1,7 @@
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
 import { useCallback } from 'preact/hooks'
-import { className } from '../../../../lib/css'
-import Icon from '../../layout/icon'
-import { useI18n } from '../../../../domains/i18n'
 
 const CollapseButton = ({ onClick }) => {
   const { t } = useI18n()

package/src/javascripts/ui/components/view/window-view/index.js

@@ -1,26 +1,26 @@
+import { useUserHasResponded } from 'domains/app/hooks'
 import { useMemo } from 'preact/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 import { useSeamlyChat } from '../../../hooks/seamly-hooks'
-import { useVisibility } from '../../../../domains/visibility'
+import Conversation from '../../conversation/conversation'
+import Text from '../../conversation/event/text'
+import EntryContainer from '../../entry/entry-container'
 import Chat from '../../layout/chat'
 import ChatFrame from '../../layout/chat-frame'
 import Interrupt from '../../layout/interrupt'
-import Conversation from '../../conversation/conversation'
-import EntryContainer from '../../entry/entry-container'
-import WindowOpenButton from './window-open-button'
-import CollapseButton from './collapse-button'
+import PreChatMessages from '../../layout/pre-chat-messages'
 import InOutTransition, {
   transitionStartStates,
 } from '../../widgets/in-out-transition'
-import PreChatMessages from '../../layout/pre-chat-messages'
-import { useUserHasResponded } from '../../../../domains/app'
-import { className } from '../../../../lib/css'
-import Text from '../../conversation/event/text'
-import { useI18n } from '../../../../domains/i18n'
+import CollapseButton from './collapse-button'
+import WindowOpenButton from './window-open-button'
 
 const WindowView = () => {
   const { openChat, closeChat } = useSeamlyChat()
   const { isOpen } = useVisibility()
-  const hasResponded = useUserHasResponded()
+  const userHasResponded = useUserHasResponded()
   const { t } = useI18n()
   const continueChatText = t('window.chat.continue')
   const continueChatEvent = useMemo(
@@ -37,7 +37,7 @@ const WindowView = () => {
     <>
       <WindowOpenButton onClick={openChat} />
       <InOutTransition
-        isActive={!isOpen && !hasResponded}
+        isActive={!isOpen && !userHasResponded}
         transitionStartState={transitionStartStates.rendered}
       >
         <div
@@ -50,7 +50,7 @@ const WindowView = () => {
         </div>
       </InOutTransition>
       <InOutTransition
-        isActive={!isOpen && hasResponded}
+        isActive={!isOpen && userHasResponded}
         transitionStartState={transitionStartStates.notRendered}
       >
         <div

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,
   }
 }