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

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

@@ -1,27 +1,28 @@
-import { useErrorBoundary } from 'preact/hooks'
-import { StoreProvider } from 'domains/redux'
 import { catchError } from 'domains/errors'
-import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
-import SeamlyReadState from './seamly-read-state'
-import SeamlyNewNotifications from './seamly-new-notifications'
-import SeamlyLiveRegion from './seamly-live-region'
-import SeamlyIdleDetachCounter from './seamly-idle-detach-counter'
+import { useErrorBoundary } from 'preact/hooks'
+import { Provider } from 'react-redux'
+import ComponentFilter from '../conversation/component-filter'
 import SeamlyActivityMonitor from './seamly-activity-monitor'
-import SeamlyInitializer from './seamly-initializer'
+import { SeamlyApiContext, SeamlyEventBusContext } from './seamly-api-context'
 import SeamlyEventSubscriber from './seamly-event-subscriber'
 import SeamlyFileUpload from './seamly-file-upload'
-import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
-import ComponentFilter from '../conversation/component-filter'
+import SeamlyIdleDetachCounter from './seamly-idle-detach-counter'
+import SeamlyInitializer from './seamly-initializer'
+import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
+import SeamlyLiveRegion from './seamly-live-region'
+import SeamlyNewNotifications from './seamly-new-notifications'
+import SeamlyReadState from './seamly-read-state'
 
-const SeamlyCore = ({ store, children, config, eventBus, api }) => {
+const SeamlyCore = ({ store, children, eventBus, api }) => {
   useErrorBoundary((error) => store.dispatch(catchError(error)))
+
   return (
-    <StoreProvider store={store}>
+    <Provider store={store}>
       <SeamlyEventBusContext.Provider value={eventBus}>
         <SeamlyApiContext.Provider value={api}>
           <SeamlyLiveRegion>
             <ComponentFilter>
-              <SeamlyInitializer config={config} />
+              <SeamlyInitializer />
               <SeamlyEventSubscriber eventBus={eventBus} />
               <SeamlyReadState />
               <SeamlyNewNotifications />
@@ -34,7 +35,7 @@ const SeamlyCore = ({ store, children, config, eventBus, api }) => {
           </SeamlyLiveRegion>
         </SeamlyApiContext.Provider>
       </SeamlyEventBusContext.Provider>
-    </StoreProvider>
+    </Provider>
   )
 }
 

package/src/javascripts/ui/components/core/seamly-event-subscriber.js

@@ -1,44 +1,39 @@
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
+import SeamlyOfflineError from 'api/errors/seamly-offline-error'
+import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
+import { setHasResponded } from 'domains/app/slice'
+import { clearInterrupt, setInterrupt } from 'domains/interrupt/slice'
+import {
+  ackEvent,
+  addEvent,
+  clearEvents,
+  initResumeConversationPrompt,
+  setActiveService,
+  setFeatureEnabledState,
+  setHeaderSubTitle,
+  setHistory,
+  setIsLoading,
+  setParticipant,
+  setServiceDataItem,
+  setServiceEntryMetadata,
+} from 'domains/store/slice'
 import { useEffect, useRef } from 'preact/hooks'
-import { seamlyActions, featureKeys } from 'ui/utils/seamly-utils'
-import { useI18n } from 'domains/i18n'
+import { useDispatch } from 'react-redux'
 import {
-  useSeamlyOptions,
   useEvents,
   useSeamlyApiContext,
-  useSeamlyDispatchContext,
-  useSeamlyIdleDetachCountdown,
   useSeamlyCommands,
+  useSeamlyIdleDetachCountdown,
 } from 'ui/hooks/seamly-hooks'
-import SeamlyGeneralError from 'api/errors/seamly-general-error'
-import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
-import SeamlyOfflineError from 'api/errors/seamly-offline-error'
-import * as InterruptActions from 'domains/interrupt/actions'
-import * as AppActions from 'domains/app/actions'
-
-const {
-  ADD_EVENT,
-  ACK_EVENT,
-  SET_IS_LOADING,
-  SET_PARTICIPANT,
-  SET_HEADER_SUB_TITLE,
-  SET_ACTIVE_SERVICE,
-  INIT_RESUME_CONVERSATION_PROMPT,
-  CLEAR_EVENTS,
-  SET_SERVICE_DATA_ITEM,
-  SET_FEATURE_ENABLED_STATE,
-  SET_SERVICE_ENTRY_METADATA,
-  SET_HISTORY,
-} = seamlyActions
+import { featureKeys } from 'ui/utils/seamly-utils'
 
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video']
 
 const SeamlyEventSubscriber = ({ eventBus }) => {
-  const { t } = useI18n()
   const api = useSeamlyApiContext()
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const events = useEvents()
   const prevEmittedEventId = useRef(null)
-  const { setUserSelectedOption } = useSeamlyOptions()
   const { initCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
   const { emitEvent } = useSeamlyCommands()
 
@@ -54,33 +49,28 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
         const { fromClient, participant } = payload
 
         if (!fromClient && participant.name) {
-          dispatch({
-            type: SET_HEADER_SUB_TITLE,
-            title: participant.name,
-          })
+          dispatch(setHeaderSubTitle(participant.name))
         }
 
-        dispatch({
-          type: SET_PARTICIPANT,
-          participant,
-          fromClient,
-        })
+        dispatch(
+          setParticipant({
+            participant,
+            fromClient,
+          }),
+        )
 
         if (participant.introduction) {
-          dispatch({ type: ADD_EVENT, event })
+          dispatch(addEvent(event))
         }
       }
 
-      api.stream().subscribe({
+      const subscription = api.stream().subscribe({
         next: (event) => {
           const { type, payload } = event
           switch (type) {
             case 'ui':
               if (payload.state && payload.state.hasOwnProperty('loading')) {
-                dispatch({
-                  type: SET_IS_LOADING,
-                  isLoading: payload.state.loading,
-                })
+                dispatch(setIsLoading(payload.state.loading))
               }
               switch (payload.type) {
                 case 'idle_detach_countdown':
@@ -90,10 +80,10 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                   endCountdown(undefined, true)
                   break
                 case 'resume_conversation_prompt':
-                  dispatch({ type: INIT_RESUME_CONVERSATION_PROMPT })
+                  dispatch(initResumeConversationPrompt())
                   break
                 case 'user_first_response':
-                  dispatch(AppActions.setHasResponded(true))
+                  dispatch(setHasResponded(true))
                   eventBus.emit('system.userFirstResponse', payload.body)
                   break
               }
@@ -112,13 +102,10 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                 case 'carousel':
                 case 'card':
                   if (payload.service && payload.service.serviceSessionId) {
-                    dispatch({
-                      type: SET_ACTIVE_SERVICE,
-                      activeServiceSessionId: payload.service.serviceSessionId,
-                    })
+                    dispatch(setActiveService(payload.service.serviceSessionId))
                   }
 
-                  dispatch({ type: ADD_EVENT, event })
+                  dispatch(addEvent(event))
                   break
               }
               break
@@ -127,35 +114,26 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
               break
             case 'service_data':
               if (payload.persist) {
-                dispatch({
-                  type: SET_SERVICE_DATA_ITEM,
-                  payload,
-                })
+                dispatch(setServiceDataItem(payload))
               }
               break
             case 'ack':
-              dispatch({ type: ACK_EVENT, event })
+              dispatch(ackEvent(event.payload))
               break
             case 'system':
               if (payload.type === 'service_changed') {
                 const { serviceSettings, ...eventPayload } = payload
                 const { uploads, entry } = serviceSettings
 
-                dispatch({
-                  type: SET_FEATURE_ENABLED_STATE,
-                  key: featureKeys.uploads,
-                  enabled: !!(uploads && uploads.enabled),
-                })
-
-                dispatch({
-                  type: SET_SERVICE_ENTRY_METADATA,
-                  entryMeta: entry,
-                })
+                dispatch(
+                  setFeatureEnabledState({
+                    key: featureKeys.uploads,
+                    enabled: !!(uploads && uploads.enabled),
+                  }),
+                )
 
-                dispatch({
-                  type: SET_ACTIVE_SERVICE,
-                  activeServiceSessionId: payload.serviceSessionId,
-                })
+                dispatch(setServiceEntryMetadata(entry))
+                dispatch(setActiveService(payload.serviceSessionId))
 
                 emitEvent('system.serviceChanged', eventPayload)
               }
@@ -166,27 +144,54 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                 payload.type === 'text' ||
                 payload.type === 'translation'
               ) {
-                dispatch({ type: ADD_EVENT, event })
+                dispatch(addEvent(event))
               }
               break
             case 'error':
               switch (payload.type) {
                 case 'find_conversation_erred':
+                  const seamlySessionExpiredError =
+                    new SeamlySessionExpiredError(event)
                   dispatch(
-                    InterruptActions.set(new SeamlySessionExpiredError(event)),
+                    setInterrupt({
+                      name: seamlySessionExpiredError.name,
+                      action: seamlySessionExpiredError.action,
+                      message: seamlySessionExpiredError.message,
+                      originalEvent: seamlySessionExpiredError.originalEvent,
+                      originalError: seamlySessionExpiredError.originalError,
+                    }),
                   )
                   break
                 case 'seamly_offline':
-                  dispatch(InterruptActions.set(new SeamlyOfflineError(event)))
-                  dispatch({ type: CLEAR_EVENTS })
+                  const seamlyOfflineError = new SeamlyOfflineError(event)
+                  dispatch(
+                    setInterrupt({
+                      name: seamlyOfflineError.name,
+                      message: seamlyOfflineError.message,
+                      langKey: seamlyOfflineError.langKey,
+                      originalEvent: seamlyOfflineError.originalEvent,
+                      originalError: seamlyOfflineError.originalError,
+                    }),
+                  )
+                  dispatch(clearEvents())
                   break
                 default:
-                  dispatch(InterruptActions.set(new SeamlyGeneralError(event)))
+                  const seamlyGeneralError = new SeamlyGeneralError(event)
+                  dispatch(
+                    setInterrupt({
+                      name: seamlyGeneralError.name,
+                      message: seamlyGeneralError.message,
+                      langKey: seamlyGeneralError.langKey,
+                      originalEvent: seamlyGeneralError.originalEvent,
+                      originalError: seamlyGeneralError.originalError,
+                      action: seamlyGeneralError.action,
+                    }),
+                  )
                   break
               }
               break
             case 'socket_opened':
-              dispatch(InterruptActions.clear())
+              dispatch(clearInterrupt())
               break
           }
         },
@@ -210,17 +215,12 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
             prevEmittedEventId.current = payload.id
           },
         })
+      return () => {
+        subscription.unsubscribe()
+      }
     }
-  }, [
-    dispatch,
-    api,
-    eventBus,
-    t,
-    setUserSelectedOption,
-    initCountdown,
-    endCountdown,
-    emitEvent,
-  ])
+    return () => undefined
+  }, [dispatch, api, eventBus, initCountdown, endCountdown, emitEvent])
 
   useEffect(() => {
     const subscribe = () => {
@@ -245,13 +245,18 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                   return
                 }
 
-                dispatch({
-                  type: SET_HISTORY,
-                  history,
-                })
+                dispatch(setHistory(history))
               })
               .catch((error) => {
-                dispatch(InterruptActions.set(error))
+                dispatch(
+                  setInterrupt({
+                    name: error.name,
+                    message: error.message,
+                    langKey: error.langKey,
+                    originalEvent: error.originalEvent,
+                    originalError: error.originalError,
+                  }),
+                )
               })
           },
         })
@@ -264,7 +269,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
       }
     }
 
-    return () => {}
+    return () => undefined
   }, [api, events, dispatch])
 
   return null

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,