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

package/src/javascripts/ui/components/core/seamly-file-upload.js

@@ -1,23 +1,18 @@
-import { useI18n } from 'domains/i18n'
-import { randomId } from 'lib/id'
-import { seamlyActions } from 'ui/utils/seamly-utils'
+import { useI18n } from 'domains/i18n/hooks'
 import {
-  useSeamlyCommands,
-  useSeamlyApiContext,
-  useSeamlyDispatchContext,
-} from 'ui/hooks/seamly-hooks'
+  registerUpload,
+  setUploadComplete,
+  setUploadError,
+  setUploadProgress,
+} from 'domains/store/slice'
+import { randomId } from 'lib/id'
+import { useDispatch } from 'react-redux'
+import { useSeamlyApiContext, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import SeamlyFileUploadContext from './seamly-file-upload-context'
 
-const {
-  REGISTER_UPLOAD,
-  SET_UPLOAD_PROGRESS,
-  SET_UPLOAD_ERROR,
-  SET_UPLOAD_COMPLETE,
-} = seamlyActions
-
 const SeamlyFileUpload = ({ children }) => {
   const { t } = useI18n()
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const api = useSeamlyApiContext()
   const { addUploadBubble } = useSeamlyCommands()
 
@@ -27,7 +22,7 @@ const SeamlyFileUpload = ({ children }) => {
     const uploadHandle = api.uploadFile(
       file,
       (p) => {
-        dispatch({ type: SET_UPLOAD_PROGRESS, fileId, progress: Math.ceil(p) })
+        dispatch(setUploadProgress({ fileId, progress: Math.ceil(p) }))
       },
       (result) => {
         const {
@@ -36,7 +31,7 @@ const SeamlyFileUpload = ({ children }) => {
           occurredAt,
           body: { contentType, filename, filesize, url },
         } = result.body
-        dispatch({ type: SET_UPLOAD_COMPLETE, fileId })
+        dispatch(setUploadComplete(fileId))
         addUploadBubble(
           id,
           transactionId,
@@ -68,16 +63,17 @@ const SeamlyFileUpload = ({ children }) => {
             errorText = t('fileUpload.errors.general')
         }
 
-        dispatch({ type: SET_UPLOAD_ERROR, fileId, errorText })
+        dispatch(setUploadError({ fileId, errorText }))
       },
     )
 
-    dispatch({
-      type: REGISTER_UPLOAD,
-      fileId,
-      fileName: file.name,
-      uploadHandle,
-    })
+    dispatch(
+      registerUpload({
+        fileId,
+        fileName: file.name,
+        uploadHandle,
+      }),
+    )
   }
 
   return (

package/src/javascripts/ui/components/core/seamly-initializer.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'preact/hooks'
 import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
-import { useConfig } from 'domains/config'
+import { useConfig } from 'domains/config/hooks'
 
 const SeamlyInitializer = () => {
   const { initUserSelectedOptions } = useSeamlyOptions()

package/src/javascripts/ui/components/core/seamly-instance-functions-loader.js

@@ -8,10 +8,11 @@ import {
   useSeamlyApiContext,
 } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
-import { useTranslations } from 'domains/translations'
-import { useInterrupt } from 'domains/interrupt'
-import { useConfig } from 'domains/config'
-import { visibilityStates, useVisibility } from 'domains/visibility'
+import { useTranslations } from 'domains/translations/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { visibilityStates } from 'domains/visibility/constants'
 import { SeamlyEventBusContext } from './seamly-api-context'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {

package/src/javascripts/ui/components/core/seamly-new-notifications.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useMemo } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import {
   useEvents,
   useLiveRegion,
@@ -7,7 +7,7 @@ import {
 } from 'ui/hooks/seamly-hooks'
 import { newMessageScreenReaderWait } from 'config'
 import { debounce } from 'ui/utils/general-utils'
-import { useVisibility } from 'domains/visibility'
+import { useVisibility } from 'domains/visibility/hooks'
 
 const SeamlyNewNotifications = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/core/seamly-read-state.js

@@ -1,29 +1,22 @@
-import { useEffect, useRef, useMemo } from 'preact/hooks'
-
+import { useEffect, useMemo, useRef } from 'preact/hooks'
+import { unreadScreenReaderWait } from 'config'
+import { useI18n } from 'domains/i18n/hooks'
+import { isUnreadMessage, setEventsRead } from 'domains/store/slice'
+import { useVisibility } from 'domains/visibility/hooks'
 import {
   useEvents,
-  useSeamlyCommands,
   useLiveRegion,
+  useSeamlyCommands,
   useSeamlyUnreadCount,
-  useSeamlyDispatchContext,
 } from 'ui/hooks/seamly-hooks'
-import { useI18n } from 'domains/i18n'
-import {
-  seamlyActions,
-  readStates,
-  actionTypes,
-  isUnreadMessage,
-} from 'ui/utils/seamly-utils'
 import { debounce } from 'ui/utils/general-utils'
-import { unreadScreenReaderWait } from 'config'
-import { useVisibility } from 'domains/visibility'
-
-const { SET_EVENTS_READ } = seamlyActions
+import { actionTypes, readStates } from 'ui/utils/seamly-utils'
+import { useDispatch } from 'react-redux'
 
 const SeamlyReadState = () => {
   const { t } = useI18n()
   const events = useEvents()
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const { isOpen, isVisible } = useVisibility()
   const { sendAction } = useSeamlyCommands()
   const unreadCount = useSeamlyUnreadCount()
@@ -51,7 +44,7 @@ const SeamlyReadState = () => {
       .map((event) => event.payload.id)
 
     if (unread.length > 0) {
-      dispatch({ type: SET_EVENTS_READ, ids: unread })
+      dispatch(setEventsRead(unread))
       sendAction({ type: actionTypes.read, events: unread })
     }
   }, [events, dispatch, isOpen, sendAction])

package/src/javascripts/ui/components/entry/deprecated-toggle-button.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
 import {
   useSkiplinkTargetFocusing,
@@ -9,8 +9,8 @@ import {
   useGeneratedId,
   useSeamlyStateContext,
 } from 'ui/hooks/seamly-hooks'
-import { useInterrupt } from 'domains/interrupt'
-import { useVisibility } from 'domains/visibility'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
 
 // Deprecated Toggle Button, should be removed once it is removed from clients
 const DeprecatedToggleButton = ({ onOpenChat }) => {

package/src/javascripts/ui/components/entry/entry-container.js

@@ -4,15 +4,15 @@ import {
   useSeamlyIdleDetachCountdown,
   useSeamlyResumeConversationPrompt,
   useSkiplinkTargetFocusing,
-  useSeamlyEntry,
   useFileUploadMeta,
 } from 'ui/hooks/seamly-hooks'
 import { entryTypes } from 'ui/utils/seamly-utils'
 import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
 import IdleDetachWarning from 'ui/components/warnings/idle-detach-warning'
 import ResumeConversationPrompt from 'ui/components/warnings/resume-conversation-prompt'
-import { useConfig } from 'domains/config'
-import { useVisibility } from 'domains/visibility'
+import { useConfig } from 'domains/config/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
 import TextEntry from './text-entry'
 import UploadToggle from './upload-toggle'
 import Upload from './upload'
@@ -38,9 +38,7 @@ const EntryContainer = () => {
   const { accountAllowsUploads } = useFileUploadMeta()
 
   const focusFn = useCallback(() => {
-    runIfElementContainsOrHasFocus(entryContainer.current, () => {
-      focusSkiplinkTarget()
-    })
+    runIfElementContainsOrHasFocus(entryContainer.current, focusSkiplinkTarget)
   }, [focusSkiplinkTarget])
 
   useEffect(() => {

package/src/javascripts/ui/components/entry/text-entry/hooks.js

@@ -1,10 +1,10 @@
+import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
+import { useFormControl } from 'domains/forms/hooks'
+import { useI18n } from 'domains/i18n/hooks'
 import { useEffect, useMemo } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
 import { useLiveRegion } from 'ui/hooks/live-region-hooks'
 import { useEntryTextLimit } from 'ui/hooks/seamly-state-hooks'
 import { debounce } from 'ui/utils/general-utils'
-import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
-import { useFormControl } from 'domains/forms'
 
 export function useCharacterLimit(controlName) {
   const { t } = useI18n()

package/src/javascripts/ui/components/entry/text-entry/index.js

@@ -1,12 +1,13 @@
+import FormProvider from 'domains/forms/provider'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
 import { useCallback } from 'preact/hooks'
 import {
   useSeamlyCommands,
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
-import { FormProvider } from 'domains/forms'
 import TextEntryForm from './text-entry-form'
-import { useVisibility, visibilityStates } from '../../../../domains/visibility'
 
 const controlName = 'userText'
 

package/src/javascripts/ui/components/entry/text-entry/text-entry-form.js

@@ -1,16 +1,12 @@
-import { useCallback, useLayoutEffect, useMemo } from 'preact/hooks'
+import { useFormControl } from 'domains/forms/hooks'
+import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
-import {
-  useLiveRegion,
-  useSeamlyCommands,
-  useSeamlyEntry,
-  useSeamlyTyping,
-} from 'ui/hooks/seamly-hooks'
-import Icon from 'ui/components/layout/icon'
-import { useFormControl } from 'domains/forms'
+import { useCallback, useLayoutEffect, useMemo } from 'preact/hooks'
 import Form from 'ui/components/form-controls/form'
 import Input from 'ui/components/form-controls/input'
-import { useI18n } from 'domains/i18n'
+import Icon from 'ui/components/layout/icon'
+import { useLiveRegion, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
+import { useSeamlyEntry, useSeamlyTyping } from 'ui/hooks/seamly-entry-hooks'
 import { useCharacterLimit } from './hooks'
 
 export default function TextEntryForm({ controlName, skipLinkId }) {

package/src/javascripts/ui/components/entry/upload/file-upload-form.js

@@ -1,8 +1,8 @@
 import { className } from 'lib/css'
 import Form from 'ui/components/form-controls/form'
 import FileInput from 'ui/components/form-controls/file-input'
-import { useI18n } from 'domains/i18n'
-import { useFormControl } from 'domains/forms'
+import { useI18n } from 'domains/i18n/hooks'
+import { useFormControl } from 'domains/forms/hooks'
 
 export default function FileInputForm({
   skiplinkId,

package/src/javascripts/ui/components/entry/upload/index.js

@@ -1,20 +1,20 @@
-import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
+import FormProvider from 'domains/forms/provider'
+import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
+import UploadProgress from 'ui/components/widgets/upload-progress'
 import {
-  useSkiplink,
   useFileUploadMeta,
   useFileUploads,
-  useSkiplinkTargetFocusing,
-  useLiveRegion,
   useGeneratedId,
-  useSeamlyEntry,
+  useLiveRegion,
+  useSkiplink,
+  useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
+import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
 import useSingleFileUpload from 'ui/hooks/use-single-file-upload'
-import { useI18n } from 'domains/i18n'
-import { formatBytes } from 'ui/utils/general-utils'
-import UploadProgress from 'ui/components/widgets/upload-progress'
-import { FormProvider } from 'domains/forms'
 import { getValidator } from 'ui/utils/form-utils'
+import { formatBytes } from 'ui/utils/general-utils'
 import {
   fileListObjectIsNotEmpty,
   validateFileSize,
@@ -186,6 +186,7 @@ const Upload = () => {
             onClickCancel={handleOnClickCancel}
           />
         )}
+
         {!canUpload.current && (
           <>
             <span className={className('notification')} id={notificationId}>

package/src/javascripts/ui/components/entry/upload-toggle.js

@@ -7,11 +7,11 @@ import InOutTransition, {
 import {
   useFileUploadMeta,
   useSkiplinkTargetFocusing,
-  useSeamlyEntry,
   useLiveRegion,
   useSeamlyCurrentAgent,
 } from 'ui/hooks/seamly-hooks'
-import { useI18n } from 'domains/i18n'
+import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
+import { useI18n } from 'domains/i18n/hooks'
 import { entryTypes } from 'ui/utils/seamly-utils'
 import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
 

package/src/javascripts/ui/components/faq/faq.js

@@ -13,13 +13,13 @@ import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
 import { useLiveRegion } from 'ui/hooks/live-region-hooks'
 import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
 import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
-import { useTranslatedEventData } from 'domains/translations'
-import { useInterrupt } from 'domains/interrupt'
-import { useUserHasResponded } from 'domains/app'
+import { useTranslatedEventData } from 'domains/translations/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useUserHasResponded } from 'domains/app/hooks'
 
 const Faq = () => {
   const { t } = useI18n()
@@ -32,7 +32,9 @@ const Faq = () => {
   const { hasPrompt, continueChat } = useSeamlyResumeConversationPrompt()
 
   const lastFaqEventPayload = useSeamlyServiceData('suggestion')
-  const [eventBody] = useTranslatedEventData({ payload: lastFaqEventPayload })
+  const { body: eventBody } = useTranslatedEventData({
+    payload: lastFaqEventPayload,
+  })
   const faqs = useMemo(() => {
     const newFaqs = lastFaqEventPayload && !hasInterrupt ? eventBody : []
     const itemBaseClass = `faqs__item`
@@ -55,8 +57,8 @@ const Faq = () => {
   const prevHasFaqs = useRef(false)
 
   const { isInline } = useSeamlyLayoutMode()
-  const hasResponded = useUserHasResponded()
-  const hideForWindow = !isInline && hasResponded
+  const userHasResponded = useUserHasResponded()
+  const hideForWindow = !isInline && userHasResponded
   const prevHideForWindow = useRef(hideForWindow)
 
   const hasFaqs = !!faqs.length

package/src/javascripts/ui/components/form-controls/file-input.js

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'preact/hooks'
 import { className } from 'lib/css'
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
-import { useFormControl, useFormContext } from 'domains/forms'
+import { useFormControl, useFormContext } from 'domains/forms/hooks'
 import Icon from 'ui/components/layout/icon'
 import Error from './error'
 

package/src/javascripts/ui/components/form-controls/form.js

@@ -1,4 +1,4 @@
-import { useForm } from 'domains/forms'
+import { useForm } from 'domains/forms/hooks'
 import { className } from 'lib/css'
 
 function Form({

package/src/javascripts/ui/components/form-controls/input.js

@@ -1,4 +1,4 @@
-import { useFormContext, useFormControl } from 'domains/forms'
+import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import FormControlWrapper from './wrapper'
 
 function Input({

package/src/javascripts/ui/components/form-controls/select.js

@@ -1,4 +1,4 @@
-import { useFormContext, useFormControl } from 'domains/forms'
+import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import FormControlWrapper from './wrapper'
 
 const Select = ({

package/src/javascripts/ui/components/layout/agent-info.js

@@ -4,10 +4,10 @@ import {
   useSeamlyCurrentAgent,
 } from 'ui/hooks/seamly-hooks'
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
-import { useInterrupt } from 'domains/interrupt'
-import { useStartChatIcon } from 'domains/config'
-import { useVisibility } from 'domains/visibility'
+import { useI18n } from 'domains/i18n/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useStartChatIcon } from 'domains/config/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
 import Icon from './icon'
 
 const AgentInfo = () => {

package/src/javascripts/ui/components/layout/chat-frame.js

@@ -1,8 +1,8 @@
 import { className } from 'lib/css'
 import AppOptions from 'ui/components/app-options'
-import { ChatStatus as TranslationsChatStatus } from 'domains/translations'
-import { useInterrupt } from 'domains/interrupt'
-import { useVisibility } from 'domains/visibility'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import TranslationsChatStatus from 'domains/translations/components/chat-status'
 
 function ChatFrame({ children, interruptComponent: InterruptComponent }) {
   const { hasInterrupt, meta } = useInterrupt()

package/src/javascripts/ui/components/layout/chat.js

@@ -1,14 +1,13 @@
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
 import { forwardRef } from 'preact/compat'
-import { className } from '../../../lib/css'
-import {
-  useSeamlyAppContainerClassNames,
-  useSeamlyLayoutMode,
-} from '../../hooks/seamly-hooks'
-import { useConfig } from '../../../domains/config'
-import { useUserHasResponded } from '../../../domains/app'
-import { useI18n } from '../../../domains/i18n'
-import { useVisibility, visibilityStates } from '../../../domains/visibility'
-import Suggestions from '../suggestions'
+import { className } from 'lib/css'
+import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'
+import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
+import { visibilityStates } from 'domains/visibility/constants'
+import Suggestions from 'ui/components/suggestions'
 
 const Chat = forwardRef(
   ({ children, className: givenClassName = '' }, forwardedRef) => {
@@ -16,7 +15,7 @@ const Chat = forwardRef(
     const { namespace, layoutMode } = useConfig()
     const { isInline } = useSeamlyLayoutMode()
     const appContainerClassNames = useSeamlyAppContainerClassNames()
-    const userResponded = useUserHasResponded()
+    const userHasResponded = useUserHasResponded()
     const { t } = useI18n()
 
     const defaultClassNames = [
@@ -35,7 +34,7 @@ const Chat = forwardRef(
       classNames.push('chat--collapsed')
     }
 
-    if (userResponded) {
+    if (userHasResponded) {
       classNames.push('chat--user-responded')
     }
 

package/src/javascripts/ui/components/layout/deprecated-app-frame.js

@@ -1,15 +1,16 @@
-import { useCallback, useMemo } from 'preact/hooks'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useCallback, useMemo } from 'preact/hooks'
+import Faq from 'ui/components/faq/faq'
 import {
   useSeamlyAppContainerClassNames,
-  useSeamlyLayoutMode,
   useSeamlyContainerElement,
+  useSeamlyLayoutMode,
 } from 'ui/hooks/seamly-hooks'
-import Faq from 'ui/components/faq/faq'
-import { useConfig } from 'domains/config'
-import { useUserHasResponded } from 'domains/app'
-import { useI18n } from 'domains/i18n'
-import { useVisibility, visibilityStates } from 'domains/visibility'
 
 const DeprecatedAppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
@@ -17,7 +18,7 @@ const DeprecatedAppFrame = ({ children }) => {
   const { zIndex, showFaq, layoutMode } = useConfig()
   const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
-  const userResponded = useUserHasResponded()
+  const userHasResponded = useUserHasResponded()
   const { locale } = useI18n()
 
   const containerElementRef = useCallback(
@@ -45,7 +46,7 @@ const DeprecatedAppFrame = ({ children }) => {
     classNames.push('app--collapsed')
   }
 
-  if (userResponded) {
+  if (userHasResponded) {
     classNames.push('app--user-responded')
   }
 

package/src/javascripts/ui/components/layout/header.js

@@ -1,6 +1,6 @@
 import { useRef } from 'preact/hooks'
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import { useSeamlyStateContext } from 'ui/hooks/seamly-hooks'
 import Icon from './icon'
 

package/src/javascripts/ui/components/layout/interrupt.js

@@ -6,7 +6,6 @@ import {
   useGeneratedId,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
-import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
 
 const Interrupt = ({
   originalError,
@@ -20,7 +19,7 @@ const Interrupt = ({
   const headingId = useGeneratedId()
   const { sendPolite } = useLiveRegion()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
-  const isExpiredError = originalError instanceof SeamlySessionExpiredError
+  const isExpiredError = originalError.name === 'SeamlySessionExpiredError'
 
   useEffect(() => {
     if (isExpiredError) {
@@ -43,28 +42,28 @@ const Interrupt = ({
     focusSkiplinkTarget()
   }
 
-  return (
-    !isExpiredError && (
-      <section className={className('interrupt')} aria-labelledby={headingId}>
-        <div className={className('interrupt__body')}>
-          <h2 id={headingId} className={className('interrupt__title')}>
-            {title}
-          </h2>
-          <p className={className('interrupt__message')}>{message}</p>
-          {buttonText && action && (
-            <div className={className('interrupt__actions')}>
-              <button
-                type="button"
-                className={className('button', 'button--primary')}
-                onClick={onClickHandler}
-              >
-                {buttonText}
-              </button>
-            </div>
-          )}
-        </div>
-      </section>
-    )
+  return !isExpiredError ? (
+    <section className={className('interrupt')} aria-labelledby={headingId}>
+      <div className={className('interrupt__body')}>
+        <h2 id={headingId} className={className('interrupt__title')}>
+          {title}
+        </h2>
+        <p className={className('interrupt__message')}>{message}</p>
+        {buttonText && action && (
+          <div className={className('interrupt__actions')}>
+            <button
+              type="button"
+              className={className('button', 'button--primary')}
+              onClick={onClickHandler}
+            >
+              {buttonText}
+            </button>
+          </div>
+        )}
+      </div>
+    </section>
+  ) : (
+    <></>
   )
 }
 

package/src/javascripts/ui/components/layout/pre-chat-messages.js

@@ -1,15 +1,20 @@
-import { className } from '../../../lib/css'
-import { useInterrupt } from '../../../domains/interrupt'
-import { useConfig } from '../../../domains/config'
-import useEventComponentMapping from '../../hooks/use-event-component-mapping'
-import { useVisibility } from '../../../domains/visibility'
+import { useConfig } from 'domains/config/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
+import useEventComponentMapping from 'ui/hooks/use-event-component-mapping'
+
+export function PreChatMessageEvent({ event }) {
+  const [Component] = useEventComponentMapping(event)
+  return <Component event={event} />
+}
 
 export default function PreChatMessages() {
   const { preChatEvents, layoutMode } = useConfig()
   const { hasInterrupt } = useInterrupt()
   const { isOpen } = useVisibility()
 
-  const isVisible = !(hasInterrupt || !preChatEvents.length || isOpen)
+  const isVisible = !(hasInterrupt || !preChatEvents?.length || isOpen)
 
   return (
     isVisible && (
@@ -32,8 +37,3 @@ export default function PreChatMessages() {
     )
   )
 }
-
-export function PreChatMessageEvent({ event }) {
-  const [Component] = useEventComponentMapping(event)
-  return <Component event={event} />
-}

package/src/javascripts/ui/components/layout/privacy-disclaimer.js

@@ -1,6 +1,6 @@
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
-import { useConfig } from 'domains/config'
+import { useI18n } from 'domains/i18n/hooks'
+import { useConfig } from 'domains/config/hooks'
 
 const PrivacyDisclaimer = () => {
   const { t } = useI18n()