@seamly/web-ui 18.1.1 → 18.3.1

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

@@ -1,11 +1,9 @@
 import { useContext, useEffect, useRef } from 'preact/hooks'
 import {
-  useSeamlyConfig,
   useSeamlyCommands,
   useSeamlyVisibility,
   useSeamlyUnreadCount,
   useSeamlyLayoutMode,
-  useSeamlyInterrupt,
   useSeamlyConversationUrl,
   useSeamlyActivityEventHandler,
   useSeamlyApiContext,
@@ -13,6 +11,8 @@ import {
 import { visibilityStates } from '../../utils/seamly-utils'
 import { SeamlyEventBusContext } from './seamly-api-context'
 import { useTranslations } from '../../../domains/translations'
+import { useInterrupt } from '../../../domains/interrupt'
+import { useConfig } from '../../../domains/config'
 
 function useSeamlyInstanceFunction(functionName, fn, deps = []) {
   const eventBus = useContext(SeamlyEventBusContext)
@@ -32,7 +32,7 @@ function useSeamlyInstanceFunction(functionName, fn, deps = []) {
 }
 
 const SeamlyInstanceFunctionsLoader = () => {
-  const config = useSeamlyConfig()
+  const config = useConfig()
   const { sendMessage, sendContext, sendAction } = useSeamlyCommands()
   const { setVisibility, visible } = useSeamlyVisibility()
   const currentVisibility = useRef(visible)
@@ -42,7 +42,7 @@ const SeamlyInstanceFunctionsLoader = () => {
   const previousUnreadCount = useRef(null)
   const previousVisibilityState = useRef(null)
   const { isInline, isResolving } = useSeamlyLayoutMode()
-  const { hasInterrupt } = useSeamlyInterrupt()
+  const { hasInterrupt } = useInterrupt()
   const currentConversationUrl = useSeamlyConversationUrl()
   const prevConversationUrl = useRef(null)
   const onActivityHandler = useSeamlyActivityEventHandler()
@@ -54,26 +54,26 @@ const SeamlyInstanceFunctionsLoader = () => {
 
   useSeamlyInstanceFunction(
     'askText',
-    text => {
+    (text) => {
       sendMessage({ body: text })
     },
     [api?.send],
   )
   useSeamlyInstanceFunction(
     'setLocale',
-    locale => {
+    (locale) => {
       sendContext({ locale })
     },
     [api?.send],
   )
   useSeamlyInstanceFunction(
     'setVariables',
-    variables => {
+    (variables) => {
       sendContext({ variables })
     },
     [api?.send],
   )
-  useSeamlyInstanceFunction('getVisibility', callback => {
+  useSeamlyInstanceFunction('getVisibility', (callback) => {
     if (callback) {
       callback(currentVisibility.current)
     } else {
@@ -84,7 +84,7 @@ const SeamlyInstanceFunctionsLoader = () => {
   })
   useSeamlyInstanceFunction(
     'setVisibility',
-    visibilityState => {
+    (visibilityState) => {
       if (!Object.values(visibilityStates).includes(visibilityState)) {
         console.error(
           'Requested visibility states should be "open", "minimized" ,"hidden" or null.',
@@ -102,7 +102,7 @@ const SeamlyInstanceFunctionsLoader = () => {
         setVisibility(visibilityState)
       }
     },
-    [api?.send],
+    [config?.api],
   )
   useSeamlyInstanceFunction(
     'sendCustomAction',

package/src/javascripts/ui/components/core/seamly-live-region.js

@@ -16,7 +16,7 @@ const SeamlyLiveRegion = ({ children }) => {
   const isMounted = useRef(true)
 
   const messageSetter = useCallback(
-    state => {
+    (state) => {
       if (isMounted.current) {
         setMessage(state)
         eventBus.emit('aria-live', state)

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

@@ -21,7 +21,7 @@ const SeamlyNewNotifications = () => {
   const debounceFunc = useRef(null)
 
   const notifyUnread = useCallback(
-    debounce(eventArray => {
+    debounce((eventArray) => {
       const serverEventCount = eventArray.filter(
         ({ payload }) => !payload.fromClient && !payload.fromHistory,
       ).length

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

@@ -40,13 +40,13 @@ const SeamlyReadState = () => {
     }
 
     const unread = events
-      .filter(event => {
+      .filter((event) => {
         return (
           isUnreadMessage(event) &&
           event.payload.messageStatus === readStates.received
         )
       })
-      .map(event => event.payload.id)
+      .map((event) => event.payload.id)
 
     if (unread.length > 0) {
       dispatch({ type: SET_EVENTS_READ, ids: unread })

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

@@ -5,7 +5,6 @@ import {
   useSeamlyResumeConversationPrompt,
   useSkiplinkTargetFocusing,
   useSeamlyEntry,
-  useSeamlyConfig,
   useFileUploadMeta,
 } from '../../hooks/seamly-hooks'
 import { entryTypes } from '../../utils/seamly-utils'
@@ -15,18 +14,16 @@ import ResumeConversationPrompt from '../warnings/resume-conversation-prompt'
 import TextEntry from './text-entry'
 import UploadToggle from './upload-toggle'
 import Upload from './upload'
+import { useConfig } from '../../../domains/config'
 
 const EntryContainer = () => {
   const entryContainer = useRef(null)
   const { hasCountdown } = useSeamlyIdleDetachCountdown()
   const [showCountdown, setShowCountDown] = useState(hasCountdown)
-  const {
-    hasPrompt: hasResumeConversationPrompt,
-  } = useSeamlyResumeConversationPrompt()
-  const [
-    showResumeConversationPrompt,
-    setShowResumeConversationPrompt,
-  ] = useState(hasResumeConversationPrompt)
+  const { hasPrompt: hasResumeConversationPrompt } =
+    useSeamlyResumeConversationPrompt()
+  const [showResumeConversationPrompt, setShowResumeConversationPrompt] =
+    useState(hasResumeConversationPrompt)
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
   const containedFocus = useRef(false)
   const { activeEntry } = useSeamlyEntry()
@@ -35,7 +32,7 @@ const EntryContainer = () => {
     upload: Upload,
   })
   const [renderEntry, setRenderEntry] = useState(() => activeEntry)
-  const config = useSeamlyConfig()
+  const config = useConfig()
   const { accountAllowsUploads } = useFileUploadMeta()
 
   const focusFn = useCallback(() => {
@@ -49,7 +46,7 @@ const EntryContainer = () => {
     const { entry } = customComponents || {}
 
     if (entry) {
-      setEntryComponents(c => ({
+      setEntryComponents((c) => ({
         ...c,
         ...entry,
       }))

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/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,12 +40,8 @@ const Upload = () => {
 
   const hasError = false
 
-  const {
-    selectedFileName,
-    uploadHandle,
-    hasServerError,
-    progress,
-  } = useSingleFileUpload(formName, fileInputName)
+  const { selectedFileName, uploadHandle, hasServerError, progress } =
+    useSingleFileUpload(formName, fileInputName)
   const notificationId = useGeneratedId()
   const prevIsComplete = useRef(true)
 

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

@@ -12,7 +12,6 @@ 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 +19,7 @@ import InOutTransition, {
   transitionStartStates,
 } from '../widgets/in-out-transition'
 import { useTranslatedEventData } from '../../../domains/translations'
+import { useInterrupt } from '../../../domains/interrupt'
 
 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_\\-]/, '')}`,
@@ -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

@@ -2,7 +2,6 @@ import { useState, useEffect, useCallback } from 'preact/hooks'
 import { className } from '../../../lib/css'
 import {
   useSeamlyAppContainerClassNames,
-  useSeamlyConfig,
   useSeamlyVisibility,
   useSeamlyLayoutMode,
   useSeamlyHasUserResponded,
@@ -10,11 +9,12 @@ import {
 } from '../../hooks/seamly-hooks'
 import Faq from '../faq/faq'
 import { visibilityStates } from '../../utils/seamly-utils'
+import { useConfig } from '../../../domains/config'
 
 const AppFrame = ({ children }) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
   const { isOpen, isVisible, setVisibility } = useSeamlyVisibility()
-  const { context, zIndex, showFaq } = useSeamlyConfig()
+  const { context, zIndex, showFaq } = useConfig()
   const { isModal, isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const userResponded = useSeamlyHasUserResponded()
@@ -22,7 +22,7 @@ const AppFrame = ({ children }) => {
   const { locale } = context || {}
 
   const containerElementRef = useCallback(
-    container => {
+    (container) => {
       setSeamlyContainerElement(container)
     },
     [setSeamlyContainerElement],
@@ -47,14 +47,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/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 },