@seamly/web-ui 18.2.0 → 19.0.0-beta.1

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

@@ -33,18 +33,25 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
 
   const handleFocus = useCallback(() => {
     if (reachedCharacterWarning) {
-      sendAssertive(t('input.srCharacterLimitText', remainingChars))
+      sendAssertive(t('input.srCharacterLimitText', { limit: remainingChars }))
     }
 
     emitEvent('ui.inputFocus')
   }, [t, sendAssertive, reachedCharacterWarning, remainingChars, emitEvent])
   const placeholder = useMemo(
     () =>
-      t('input.inputPlaceholder', hasCharacterLimit ? characterLimit : null),
+      t('input.inputPlaceholder', {
+        hasLimit: hasCharacterLimit,
+        limit: hasCharacterLimit ? characterLimit : null,
+      }),
     [t, hasCharacterLimit, characterLimit],
   )
   const labelText = useMemo(
-    () => t('input.inputLabel', hasCharacterLimit ? characterLimit : null),
+    () =>
+      t('input.inputLabel', {
+        hasLimit: hasCharacterLimit,
+        limit: hasCharacterLimit ? characterLimit : null,
+      }),
     [t, hasCharacterLimit, characterLimit],
   )
   // When the input holds a value, the component should be blocked from switching

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

@@ -7,9 +7,10 @@ import {
   useFocusIfSeamlyContainedFocus,
   useSeamlyCurrentAgent,
   useSeamlyHeaderData,
-  useSeamlyInterrupt,
   useGeneratedId,
+  useSeamlyStateContext,
 } from '../../hooks/seamly-hooks'
+import { useInterrupt } from '../../../domains/interrupt'
 
 const ToggleButton = ({ onOpenChat }) => {
   const { t } = useI18n()
@@ -17,11 +18,13 @@ const ToggleButton = ({ onOpenChat }) => {
   const { isOpen } = useSeamlyVisibility()
   const prevIsOpen = useRef(null)
   const buttonRef = useRef(null)
+  const lastEventRef = useRef()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
   const focusIfContained = useFocusIfSeamlyContainedFocus()
   const currentAgent = useSeamlyCurrentAgent()
   const agentSubtitle = useSeamlyHeaderData().subTitle
-  const { hasInterrupt } = useSeamlyInterrupt()
+  const { hasInterrupt } = useInterrupt()
+  const { headerCollapseButtonId } = useSeamlyStateContext()
 
   const showAgentInfo = currentAgent && !hasInterrupt
 
@@ -35,13 +38,23 @@ const ToggleButton = ({ onOpenChat }) => {
     prevIsOpen.current = isOpen
   }, [isOpen, focusIfContained])
 
-  const onMouseUpHandler = () => {
-    // Sets focus on the input when opening through mouse interaction.
-    // This avoids focus hijacking for keyboard users.
-    // TODO: function is executed before the component is rendered, needs to be fixed.
-    focusSkiplinkTarget()
+  const handleMouseUp = () => {
+    lastEventRef.current = 'mouse'
+  }
+  const handleKeyUp = () => {
+    lastEventRef.current = 'key'
+  }
+  const handleClick = () => {
+    onOpenChat()
+    if (lastEventRef.current === 'mouse') {
+      // Sets focus on the input when opening through mouse interaction.
+      // This avoids focus hijacking for keyboard users.
+      // TODO: function is executed before the component is rendered, needs to be fixed.
+      focusSkiplinkTarget()
+    } else if (lastEventRef.current === 'key') {
+      focusIfContained(headerCollapseButtonId)
+    }
   }
-
   return (
     <div className={className('toggle-button')}>
       <div id={titleId}>
@@ -59,9 +72,10 @@ const ToggleButton = ({ onOpenChat }) => {
         type="button"
         aria-labelledby={titleId}
         className={className('toggle-button__button')}
-        onClick={onOpenChat}
         ref={buttonRef}
-        onMouseUp={onMouseUpHandler}
+        onMouseUp={handleMouseUp}
+        onKeyUp={handleKeyUp}
+        onClick={handleClick}
       />
     </div>
   )

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

@@ -15,8 +15,8 @@ export default function FileInputForm({
 }) {
   const { t } = useI18n()
   const [{ value: fileList }] = useFormControl(controlName)
-  const selectedFileName =
-    fileList && fileList.length > 0 ? fileList[0].name : ''
+  const hasFile = fileList && fileList.length > 0
+  const selectedFileName = hasFile ? fileList[0].name : ''
 
   return (
     <Form className={className('input', 'input--file')}>
@@ -25,7 +25,10 @@ export default function FileInputForm({
         id={skiplinkId}
         accept={accept}
         labelText={t('fileUpload.labelText')}
-        outputText={t('fileUpload.selectedText', selectedFileName)}
+        outputText={t('fileUpload.selectedText', {
+          hasFile,
+          filename: selectedFileName,
+        })}
         contentHint={contentHint}
       />
       <div className={className('upload__button-container')}>

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

@@ -30,11 +30,8 @@ const Upload = () => {
   const skiplinkTargetId = useSkiplink()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
   // This hook should be refactored at some point
-  const {
-    serviceAllowsUploads,
-    allowedMimeTypes,
-    maxSize,
-  } = useFileUploadMeta()
+  const { serviceAllowsUploads, allowedMimeTypes, maxSize } =
+    useFileUploadMeta()
   const cancelButtonRef = useRef(null)
   const canUpload = useRef(serviceAllowsUploads)
 
@@ -43,16 +40,14 @@ const Upload = () => {
 
   const hasError = false
 
-  const {
-    selectedFileName,
-    uploadHandle,
-    hasServerError,
-    progress,
-  } = useSingleFileUpload(formName, fileInputName)
+  const { hasFile, selectedFileName, uploadHandle, hasServerError, progress } =
+    useSingleFileUpload(formName, fileInputName)
   const notificationId = useGeneratedId()
   const prevIsComplete = useRef(true)
 
-  const contentHintText = t('fileUpload.contentHint', formatBytes(maxSize))
+  const contentHintText = t('fileUpload.contentHint', {
+    size: formatBytes(maxSize),
+  })
   const prevContentHintText = useRef('')
   const containerRef = useRef(null)
 
@@ -184,7 +179,10 @@ const Upload = () => {
             contentHint={contentHintText}
             isComplete={isComplete}
             isUploading={isUploading}
-            outputText={t('fileUpload.selectedText', selectedFileName)}
+            outputText={t('fileUpload.selectedText', {
+              hasFile,
+              filename: selectedFileName,
+            })}
             onClickCancel={handleOnClickCancel}
           />
         )}

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

@@ -10,9 +10,7 @@ import {
 } from '../../hooks/seamly-state-hooks'
 import { useGeneratedId } from '../../hooks/utility-hooks'
 import { useSkiplinkTargetFocusing } from '../../hooks/focus-helper-hooks'
-import { useSeamlyHasUserResponded } from '../../hooks/seamly-api-hooks'
 import { useLiveRegion } from '../../hooks/live-region-hooks'
-import useSeamlyInterrupt from '../../hooks/use-seamly-interrupt'
 import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-countdown'
 import useSeamlyResumeConversationPrompt from '../../hooks/use-seamly-resume-conversation-prompt'
 import { useI18n } from '../../../domains/i18n'
@@ -20,6 +18,8 @@ import InOutTransition, {
   transitionStartStates,
 } from '../widgets/in-out-transition'
 import { useTranslatedEventData } from '../../../domains/translations'
+import { useInterrupt } from '../../../domains/interrupt'
+import { useUserHasResponded } from '../../../domains/app'
 
 const Faq = () => {
   const { t } = useI18n()
@@ -27,7 +27,7 @@ const Faq = () => {
   const sectionId = useGeneratedId()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
   const { sendPolite } = useLiveRegion()
-  const { hasInterrupt } = useSeamlyInterrupt()
+  const { hasInterrupt } = useInterrupt()
   const { hasCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
   const { hasPrompt, continueChat } = useSeamlyResumeConversationPrompt()
 
@@ -42,7 +42,7 @@ const Faq = () => {
       classNames: [
         itemBaseClass,
         ...categories.map(
-          cat =>
+          (cat) =>
             `faqs__item--${String(cat)
               .toLowerCase()
               .replace(/[^a-z0-9_\\-]/, '')}`,
@@ -55,7 +55,7 @@ const Faq = () => {
   const prevHasFaqs = useRef(false)
 
   const { isInline } = useSeamlyLayoutMode()
-  const hasResponded = useSeamlyHasUserResponded()
+  const hasResponded = useUserHasResponded()
   const hideForWindow = !isInline && hasResponded
   const prevHideForWindow = useRef(hideForWindow)
 
@@ -138,7 +138,7 @@ const Faq = () => {
         )}
         {!!renderedFaqList.length && (
           <ul className={className('faqs__list')}>
-            {renderedFaqList.map(faq => (
+            {renderedFaqList.map((faq) => (
               <li key={faq.id.toString()} className={className(faq.classNames)}>
                 <button
                   type="button"

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

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'preact/hooks'
+import { className } from '../../../lib/css'
+import Icon from '../layout/icon'
+
+export default function Error({ id, error }) {
+  const [isAvailable, setIsAvailable] = useState(false)
+  useEffect(() => {
+    const timerId = setTimeout(() => setIsAvailable(true), 300) // 300 = magic number, could be less or more
+    return () => clearTimeout(timerId) // clear timer if error is mounted+unmounted within 300
+  }, [])
+
+  return (
+    <div aria-live="assertive" aria-atomic="true">
+      {isAvailable && error && (
+        <span id={id} className={className('error')}>
+          <Icon name="error" size="16" />
+          {error}
+        </span>
+      )}
+    </div>
+  )
+}

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

@@ -3,6 +3,7 @@ import { className } from '../../../lib/css'
 import { useGeneratedId } from '../../hooks/seamly-hooks'
 import { useFormControl, useFormContext } from '../../../domains/forms'
 import Icon from '../layout/icon'
+import Error from './error'
 
 export default function FileInput({
   id,
@@ -38,7 +39,7 @@ export default function FileInput({
   }, [setFocusWithin, onBlur])
 
   const handleChange = useCallback(
-    e => {
+    (e) => {
       const customEvent = {
         target: {
           value: e.target.files,
@@ -57,14 +58,7 @@ export default function FileInput({
           {contentHint}
         </span>
       )}
-      <div aria-live="assertive" aria-atomic="true">
-        {hasError && (
-          <span id={errorId} className={className('error')}>
-            <Icon name="error" size="16" />
-            {error}
-          </span>
-        )}
-      </div>
+      <Error id={errorId} error={hasError && error} />
       <div
         className={className([
           'file-upload',

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

@@ -43,7 +43,7 @@ const Select = ({
         {...field}
         {...restProps}
       >
-        {options.map(option => (
+        {options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}
           </option>

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

@@ -1,5 +1,5 @@
 import { className } from '../../../lib/css'
-import Icon from '../layout/icon'
+import Error from './error'
 
 const FormControlWrapper = ({
   contentHint,
@@ -23,14 +23,7 @@ const FormControlWrapper = ({
           {contentHint}
         </span>
       )}
-      <div aria-live="assertive" aria-atomic="true">
-        {!validity && (
-          <span id={`${id}-error`} className={className('error')}>
-            <Icon name="error" size="16" />
-            {errorText}
-          </span>
-        )}
-      </div>
+      <Error id={`${id}-error`} error={!validity && errorText} />
       {children}
     </>
   )

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

@@ -4,11 +4,11 @@ import {
   useSeamlyUnreadCount,
   useSeamlyVisibility,
   useSeamlyCurrentAgent,
-  useSeamlyInterrupt,
-  useSeamlyConfig,
 } from '../../hooks/seamly-hooks'
 import { className } from '../../../lib/css'
 import { useI18n } from '../../../domains/i18n'
+import { useInterrupt } from '../../../domains/interrupt'
+import { useConfig } from '../../../domains/config'
 
 const AgentInfo = () => {
   const { t } = useI18n()
@@ -16,8 +16,8 @@ const AgentInfo = () => {
   const unreadMessageCount = useSeamlyUnreadCount()
   const { isOpen } = useSeamlyVisibility()
   const currentAgent = useSeamlyCurrentAgent()
-  const { hasInterrupt } = useSeamlyInterrupt()
-  const { defaults } = useSeamlyConfig()
+  const { hasInterrupt } = useInterrupt()
+  const { defaults } = useConfig()
 
   const { startChatIcon } = defaults || {}
 

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

@@ -1,40 +1,43 @@
-import { useState, useEffect, useCallback } from 'preact/hooks'
+import { useCallback, useMemo } from 'preact/hooks'
 import { className } from '../../../lib/css'
 import {
   useSeamlyAppContainerClassNames,
-  useSeamlyConfig,
   useSeamlyVisibility,
   useSeamlyLayoutMode,
-  useSeamlyHasUserResponded,
   useSeamlyContainerElement,
 } from '../../hooks/seamly-hooks'
 import Faq from '../faq/faq'
 import { visibilityStates } from '../../utils/seamly-utils'
+import { useConfig } from '../../../domains/config'
+import { useUserHasResponded } from '../../../domains/app'
+import { useI18n } from '../../../domains/i18n'
 
 const AppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
   const { isOpen, isVisible, setVisibility } = useSeamlyVisibility()
-  const { context, zIndex, showFaq } = useSeamlyConfig()
+  const { zIndex, showFaq } = useConfig()
   const { isModal, isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
-  const userResponded = useSeamlyHasUserResponded()
-  const [blockLang, setBlockLang] = useState(undefined)
-  const { locale } = context || {}
+  const userResponded = useUserHasResponded()
+  const { locale } = useI18n()
 
   const containerElementRef = useCallback(
-    container => {
+    (container) => {
       setSeamlyContainerElement(container)
     },
     [setSeamlyContainerElement],
   )
 
-  useEffect(() => {
+  const blockLang = useMemo(() => {
     if (locale) {
       const htmlElementLang = document
         .querySelector('html')
         .getAttribute('lang')
-      if (!htmlElementLang || htmlElementLang !== locale) setBlockLang(locale)
+      if (htmlElementLang !== locale) {
+        return locale
+      }
     }
+    return undefined
   }, [locale])
 
   const classNames = ['app', ...appContainerClassNames]
@@ -47,14 +50,14 @@ const AppFrame = ({ children }) => {
     classNames.push('app--user-responded')
   }
 
-  const onKeyDownHandler = e => {
+  const onKeyDownHandler = (e) => {
     if ((e.code && e.code === 'Escape') || e.keyCode === 27)
       if (!isInline && isOpen) {
         setVisibility(visibilityStates.minimized)
       }
   }
 
-  const onClickHandler = e => {
+  const onClickHandler = (e) => {
     if (isModal) {
       e.stopPropagation()
     }

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

@@ -1,14 +1,12 @@
 import { className } from '../../../lib/css'
-import {
-  useSeamlyInterrupt,
-  useSeamlyVisibility,
-} from '../../hooks/seamly-hooks'
+import { useSeamlyVisibility } from '../../hooks/seamly-hooks'
 import CobrowsingActiveFrame from '../warnings/cobrowsing-active-frame'
 import AppOptions from '../app-options'
 import { ChatStatus as TranslationsChatStatus } from '../../../domains/translations'
+import { useInterrupt } from '../../../domains/interrupt'
 
 function ChatFrame({ children, interruptComponent: InterruptComponent }) {
-  const { hasInterrupt, meta } = useSeamlyInterrupt()
+  const { hasInterrupt, meta } = useInterrupt()
   const { isOpen } = useSeamlyVisibility()
 
   const getContent = () => {

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

@@ -1,27 +1,12 @@
-import { useLayoutEffect, useRef } from 'preact/hooks'
+import { useRef } from 'preact/hooks'
 import { className } from '../../../lib/css'
 import Icon from './icon'
 import { useI18n } from '../../../domains/i18n'
-import {
-  useSeamlyVisibility,
-  useFocusIfSeamlyContainedFocus,
-} from '../../hooks/seamly-hooks'
+import { useSeamlyStateContext } from '../../hooks/seamly-hooks'
 
 const Header = ({ children, onCloseChat }) => {
-  const { isOpen } = useSeamlyVisibility()
-  const prevIsOpen = useRef(null)
+  const { headerCollapseButtonId } = useSeamlyStateContext()
   const closeButton = useRef(null)
-  const focusIfContained = useFocusIfSeamlyContainedFocus()
-
-  useLayoutEffect(() => {
-    // Because we can open the app from the external API we
-    // need to determine if current keyboard focus resides inside
-    // the Seamly app first otherwise focus will be hijacked
-    if (isOpen && prevIsOpen.current === false) {
-      focusIfContained(closeButton.current)
-    }
-    prevIsOpen.current = isOpen
-  }, [isOpen, focusIfContained])
 
   const { t } = useI18n()
   return (
@@ -33,6 +18,7 @@ const Header = ({ children, onCloseChat }) => {
           className={className('button', 'header-controls__collapse')}
           onClick={onCloseChat}
           ref={closeButton}
+          id={headerCollapseButtonId}
         >
           <Icon name="chevronDown" size="32" alt={t('header.collapseApp')} />
         </button>

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

@@ -25,14 +25,18 @@ const Interrupt = ({
   useEffect(() => {
     if (isExpiredError) {
       seamlyCommands[action]()
-    } else if (srText) {
+    }
+  }, [action, seamlyCommands, isExpiredError])
+
+  useEffect(() => {
+    if (!isExpiredError && srText) {
       // Wait for live regions to stabilise in case this occurs
       // at an initial render
       setTimeout(() => {
         sendPolite(srText)
       }, 200)
     }
-  }, [sendPolite, seamlyCommands, srText, isExpiredError, action])
+  }, [sendPolite, srText, isExpiredError])
 
   const onClickHandler = () => {
     seamlyCommands[action]()

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

@@ -1,10 +1,10 @@
 import { className } from '../../../lib/css'
-import { useSeamlyDisclaimerState } from '../../hooks/seamly-hooks'
 import { useI18n } from '../../../domains/i18n'
+import { useConfig } from '../../../domains/config'
 
 const PrivacyDisclaimer = () => {
   const { t } = useI18n()
-  const showDisclaimer = useSeamlyDisclaimerState()
+  const { showDisclaimer } = useConfig()
 
   return (
     showDisclaimer && (

package/src/javascripts/ui/components/options/cobrowsing.js

@@ -18,12 +18,8 @@ import {
 const Cobrowsing = () => {
   const { t } = useI18n()
   const cobrowsingDescriptionId = useGeneratedId()
-  const {
-    userSelectedOptions,
-    features,
-    setUserSelectedOption,
-    hideOption,
-  } = useSeamlyOptions()
+  const { userSelectedOptions, features, setUserSelectedOption, hideOption } =
+    useSeamlyOptions()
   const { enabled: canActivateCobrowsing } = features.cobrowsing || {}
   const prevCanActivateCobrowsing = useRef(null)
   const [cobrowsingToggleActive, setCobrowsingToggleActive] = useState(
@@ -53,7 +49,7 @@ const Cobrowsing = () => {
     prevCanActivateCobrowsing.current = canActivateCobrowsing
   }, [canActivateCobrowsing, setUserSelectedOption, sendAssertive, t])
 
-  const toggleAndFocus = isCancel => {
+  const toggleAndFocus = (isCancel) => {
     if (!isCancel && !userSelectedOptions.cobrowsing) {
       focusContainer()
     } else {

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

@@ -12,12 +12,8 @@ import { getKey, keyNames, focusElement } from '../../utils/general-utils'
 
 const OptionsButton = () => {
   const { t } = useI18n()
-  const {
-    menuOptions,
-    showOption,
-    panelActive,
-    hideOption,
-  } = useSeamlyOptions()
+  const { menuOptions, showOption, panelActive, hideOption } =
+    useSeamlyOptions()
   const { id } = useOptionButton()
   const focusOutDelayTimeoutID = useRef(null)
 
@@ -48,7 +44,7 @@ const OptionsButton = () => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           const firstActiveOptionIndex = menuOptions.findIndex(
-            option => option.available,
+            (option) => option.available,
           )
           const focusIndex =
             firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex
@@ -64,13 +60,13 @@ const OptionsButton = () => {
       hideOption()
     }
     if (multiMenu) {
-      setMenuIsOpen(o => !o)
+      setMenuIsOpen((o) => !o)
     } else if (firstOption.available) {
       showOption(firstOption.name)
     }
   }
 
-  const onMainKeyDownHandler = e => {
+  const onMainKeyDownHandler = (e) => {
     if (!menuIsOpen) {
       return
     }
@@ -89,7 +85,7 @@ const OptionsButton = () => {
     }
   }
 
-  const onButtonKeyDownHandler = e => {
+  const onButtonKeyDownHandler = (e) => {
     if (getKey(e) === keyNames.ArrowDown) {
       setMenuIsOpen(true)
       e.preventDefault()
@@ -194,7 +190,7 @@ const OptionsButton = () => {
               >
                 <button
                   type="button"
-                  ref={item => {
+                  ref={(item) => {
                     menuItemButtons.current[i] = item
                   }}
                   className={className([
@@ -202,8 +198,8 @@ const OptionsButton = () => {
                     'button--secondary',
                     ...(available ? [] : ['button--disabled']),
                   ])}
-                  onKeyDown={e => onMenuItemKeyDownHandler(e, i)}
-                  onKeyPress={e => onKeyPressHandler(e, i)}
+                  onKeyDown={(e) => onMenuItemKeyDownHandler(e, i)}
+                  onKeyPress={(e) => onKeyPressHandler(e, i)}
                   onClick={() => onMenuItemClickHandler(name, available)}
                   aria-disabled={!available ? 'true' : null}
                 >

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

@@ -61,7 +61,7 @@ const OptionsFrame = ({
           onClick={onCancelHandler}
           aria-describedby={mainHeadingId}
           className={className('button', 'options__close')}
-          ref={btn => {
+          ref={(btn) => {
             if (cancelButtonRef) {
               cancelButtonRef.current = btn
             }

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

@@ -38,8 +38,8 @@ const Transcript = () => {
   )
 
   const handleSubmit = useCallback(
-    values => {
-      const emailAddress = values[controlName]
+    (values) => {
+      const emailAddress = values[controlName].trim()
       sendAction({
         type: actionTypes.sendTranscript,
         body: { emailAddress },

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()