@seamly/web-ui 24.5.0 → 25.1.0-beta.1

package/src/javascripts/core/domains/forms/context.ts

@@ -1,5 +1,5 @@
-import { createContext } from 'preact'
 import type { FormContextType } from 'domains/forms/forms.types'
+import { createContext } from 'preact'
 
 const FormContext = createContext<FormContextType>({
   handleSubmit: () => undefined,

package/src/javascripts/core/domains/forms/hooks.ts

@@ -1,3 +1,15 @@
+import type {
+  ControlState,
+  FormContextType,
+  FormControlName,
+} from 'domains/forms/forms.types'
+import {
+  getControlTouchedByName,
+  getControlValueByName,
+  getFormById,
+} from 'domains/forms/selectors'
+import { deregisterControl, registerControl } from 'domains/forms/slice'
+import { useAppDispatch, type RootState } from 'domains/store'
 import {
   useCallback,
   useContext,
@@ -6,20 +18,8 @@ import {
   useMemo,
 } from 'preact/hooks'
 import { useSelector } from 'react-redux'
-import {
-  getControlTouchedByName,
-  getControlValueByName,
-  getFormById,
-} from 'domains/forms/selectors'
-import { deregisterControl, registerControl } from 'domains/forms/slice'
-import { useAppDispatch, type RootState } from 'domains/store'
 import FormContext from './context'
 import { validate } from './utils'
-import type {
-  ControlState,
-  FormContextType,
-  FormControlName,
-} from 'domains/forms/forms.types'
 
 export function useFormContext(): FormContextType {
   return useContext(FormContext)

package/src/javascripts/core/domains/forms/provider.tsx

@@ -1,12 +1,3 @@
-import { FC } from 'preact/compat'
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { setHasResponded } from 'domains/app/slice'
 import { Provider } from 'domains/forms/context'
 import { useValidations } from 'domains/forms/hooks'
@@ -18,6 +9,15 @@ import {
   registerForm,
 } from 'domains/forms/slice'
 import { useAppDispatch, type RootState } from 'domains/store'
+import { FC } from 'preact/compat'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'preact/hooks'
+import { useSelector } from 'react-redux'
 
 type FormProviderProps = {
   formId: string

package/src/javascripts/core/domains/i18n/actions.ts

@@ -1,6 +1,6 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
-import { ThunkAPI } from 'domains/redux/redux.types'
 import type { I18nState } from 'domains/i18n/i18n.types'
+import { ThunkAPI } from 'domains/redux/redux.types'
 
 export const setLocale = createAsyncThunk<
   {

package/src/javascripts/core/domains/i18n/hooks.ts

@@ -3,18 +3,18 @@ import {
   pluralTypeHandler,
   selectTypeHandler,
 } from '@ultraq/icu-message-formatter'
-import { useCallback } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import {
   selectInitialLocale,
   selectIsLoading,
   selectLocale,
   selectTranslations,
 } from 'domains/i18n/selectors'
+import { useCallback } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 // pluralTypeHandler. Since we only use exact plural matches (=0, =1 etc) we can
 // safely use en-GB all the time.
 const formatter: {
-  format: (_translation: string, _values: Object) => string
+  format: (_translation: string, _values: object) => string
 } = new MessageFormatter('en-GB', {
   plural: pluralTypeHandler,
   select: selectTypeHandler,

package/src/javascripts/core/domains/interrupt/hooks.ts

@@ -1,6 +1,6 @@
+import { useI18n } from 'domains/i18n/hooks'
 import { useMemo } from 'preact/hooks'
 import { useSelector } from 'react-redux'
-import { useI18n } from 'domains/i18n/hooks'
 import { selectError, selectHasError } from './selectors'
 
 export function useInterrupt() {

package/src/javascripts/core/domains/store/index.ts

@@ -1,6 +1,4 @@
 import { combineReducers, configureStore } from '@reduxjs/toolkit'
-import { Events } from 'minivents'
-import { useDispatch } from 'react-redux'
 import API from 'api'
 import { Config } from 'config.types'
 import appReducer from 'domains/app/slice'
@@ -15,6 +13,8 @@ import stateReducer from 'domains/store/slice'
 import createI18nMiddleware from 'domains/translations/middleware'
 import translationReducer from 'domains/translations/slice'
 import visibilityReducer from 'domains/visibility/slice'
+import { Events } from 'minivents'
+import { useDispatch } from 'react-redux'
 
 type CreateStore = {
   initialState: undefined

package/src/javascripts/core/domains/store/slice.ts

@@ -1,17 +1,11 @@
 import { PayloadAction, createSlice, isAnyOf } from '@reduxjs/toolkit'
 import { InitialChannelConversation } from 'api'
+import type {
+  ChannelConversation,
+  ServiceAttachEntrySettings,
+} from 'api/api.types'
 import { initializeApp, resetApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
-import { randomId } from 'lib/id'
-import { getTimeFromSeconds } from 'ui/utils/general-utils'
-import {
-  entryTypes,
-  eventTypes,
-  featureKeys,
-  payloadTypes,
-  readStates,
-} from 'ui/utils/seamly-utils'
-import type { ChannelConversation } from 'api/api.types'
 import type {
   ChannelEvent,
   CurrentUploadPayload,
@@ -21,6 +15,15 @@ import type {
   ServiceInfo,
   StoreState,
 } from 'domains/store/store.types'
+import { randomId } from 'lib/id'
+import { getTimeFromSeconds } from 'ui/utils/general-utils'
+import {
+  entryTypes,
+  eventTypes,
+  featureKeys,
+  payloadTypes,
+  readStates,
+} from 'ui/utils/seamly-utils'
 
 export type AddEventPayload = ChannelEvent
 
@@ -106,29 +109,22 @@ export const calculateNewEntryMeta = (
   entryMeta: StoreState['entryMeta'],
   channelEvent?: ChannelEvent,
 ): EntryMeta => {
-  // Events originating from the client should leave the entry meta as is
-  if (channelEvent?.payload?.fromClient === true) {
+  // Events originating from the client, and incoming events that are not messages,
+  // should leave the entry meta as is.
+  if (
+    channelEvent?.payload?.fromClient === true ||
+    channelEvent?.type !== 'message'
+  ) {
     return entryMeta
   }
 
   const entry =
-    channelEvent?.type === 'message'
-      ? channelEvent?.payload.translatedEntry || channelEvent?.payload.entry
-      : { options: undefined, type: undefined }
+    channelEvent?.payload?.translatedEntry || channelEvent?.payload?.entry
 
   const { blockAutoEntrySwitch } = entryMeta
   const actions = channelEvent?.payload?.actions || {}
   const translatedActions = channelEvent?.payload?.translatedActions || {}
 
-  if (!entry) {
-    return {
-      ...entryMeta,
-      actions,
-      optionsOverride: {},
-      translatedActions,
-    }
-  }
-
   const { type, options } = entry || {}
 
   let newActive: string | undefined = entryMeta.active
@@ -188,6 +184,7 @@ export const initialStoreState: StoreState = {
   skiplinkTargetId: randomId(),
   optionsButtonId: randomId(),
   headerCollapseButtonId: randomId(),
+  windowOpenButtonId: randomId(),
   serviceData: {},
   options: {
     features: {
@@ -222,7 +219,8 @@ export const storeSlice = createSlice({
   reducers: {
     addEvent: (state, action: PayloadAction<ChannelEvent>) => {
       const { type: eventType, payload } = action.payload
-      const accountHasUploads = state.options.features.hasOwnProperty(
+      const accountHasUploads = Object.prototype.hasOwnProperty.call(
+        state.options.features,
         featureKeys.uploads,
       )
       let newOptions = { ...state.options }
@@ -379,11 +377,12 @@ export const storeSlice = createSlice({
         {
           ...state.entryMeta,
           ...entry,
-          active: entry?.default || payloadTypes.text,
-          // @ts-ignore
-          options: { ...(entry?.options ? entry.options : {}) },
+          active: payloadTypes.text,
+          // @ts-expect-error This only has part of the upload related options set
+          options: { ...entry?.options },
         },
-        events[events.length - 1],
+        // Only events of type 'message' can change the entry options
+        events.findLast((event) => event.type === 'message'),
       )
 
       let newFeatures = { ...state.options.features }
@@ -392,7 +391,8 @@ export const storeSlice = createSlice({
         (m) =>
           !m.payload.fromClient && ['message', 'participant'].includes(m.type),
       )
-      const newFeaturesHasUpload = newFeatures.hasOwnProperty(
+      const newFeaturesHasUpload = Object.prototype.hasOwnProperty.call(
+        newFeatures,
         featureKeys.uploads,
       )
 
@@ -539,7 +539,12 @@ export const storeSlice = createSlice({
       })
     },
     setFeatureEnabledState: (state, { payload }) => {
-      if (!state.options.features.hasOwnProperty(payload.key)) {
+      if (
+        !Object.prototype.hasOwnProperty.call(
+          state.options.features,
+          payload.key,
+        )
+      ) {
         return
       }
       state.options.features[payload.key].enabled = payload.enabled
@@ -567,9 +572,17 @@ export const storeSlice = createSlice({
     setBlockAutoEntrySwitch: (state, { payload }) => {
       state.entryMeta.blockAutoEntrySwitch = payload
     },
-    setServiceEntryMetadata: (state, { payload }) => {
-      state.entryMeta.active = payload.default
-      state.entryMeta.options = payload.options || {}
+    setServiceEntryMetadata: (
+      state,
+      { payload }: PayloadAction<ServiceAttachEntrySettings>,
+    ) => {
+      state.entryMeta.options = {
+        ...state.entryMeta.options,
+        // @ts-expect-error This only has part of the upload related options set
+        upload: {
+          ...payload.options.upload,
+        },
+      }
       state.entryMeta.optionsOverride = {}
       state.entryMeta.actions = {}
       state.entryMeta.translatedActions = {}

package/src/javascripts/core/domains/store/store.types.ts

@@ -1,5 +1,4 @@
 import { InitialChannelConversation } from 'api'
-import { entryTypes } from 'ui/utils/seamly-utils'
 import type {
   AsyncAPIComponents,
   ChannelComponents,
@@ -11,6 +10,7 @@ import type { FormState } from 'domains/forms/forms.types'
 import type { I18nState } from 'domains/i18n/i18n.types'
 import type { TranslationState } from 'domains/translations/translations.types'
 import type { VisibilityState } from 'domains/visibility/visibility.types'
+import { entryTypes } from 'ui/utils/seamly-utils'
 
 export type DeepRequired<T> = { [P in keyof T]-?: DeepRequired<T[P]> }
 
@@ -95,10 +95,6 @@ export type MessageChoicePrompt = MessageType<
   ChannelComponentsSchemas['MessageBodyChoicePrompt'],
   'choice_prompt'
 >
-export type MessageCTA = MessageType<
-  ChannelComponentsSchemas['MessageBodyCTA'],
-  'cta'
->
 
 export type MessageCustom = MessageType<
   ChannelComponentsSchemas['MessageBodyCustom'],
@@ -129,7 +125,6 @@ export type MessageEvent =
   | MessageCard
   | MessageCarousel
   | MessageChoicePrompt
-  | MessageCTA
   | MessageCustom
   | MessageImage
   | MessageText
@@ -251,6 +246,7 @@ export type StoreState = {
   skiplinkTargetId: string
   optionsButtonId: string
   headerCollapseButtonId: string
+  windowOpenButtonId: string
   serviceData: Record<
     string,
     AsyncAPIComponents['schemas']['ServiceData']['payload']
@@ -294,6 +290,6 @@ export type ReduxStore = {
   forms: FormState
   translations: TranslationState
   i18n: I18nState
-  interrupt: {}
+  interrupt: object
   visibility: VisibilityState
 }

package/src/javascripts/core/domains/translations/components/options-button.tsx

@@ -1,13 +1,13 @@
+import { className } from 'lib/css'
 import { ComponentChildren } from 'preact'
 import { useRef, useState } from 'preact/hooks'
-import { className } from 'lib/css'
+import type { FramePosition } from 'ui/components/options/options-frame'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import { focusElement, getKey, keyNames } from 'ui/utils/general-utils'
 import TranslationsOptionsDialog from './options-dialog'
-import type { FramePosition } from 'ui/components/options/options-frame'
 
 type TranslationsOptionsButtonProps = {
   children: ComponentChildren

package/src/javascripts/core/domains/translations/components/options-dialog/index.tsx

@@ -1,8 +1,8 @@
 import { useI18n } from 'domains/i18n/hooks'
 import TranslationOptions from 'domains/translations/components/options-dialog/translation-options'
 import OptionsFrame from 'ui/components/options/options-frame'
-import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import type { FramePosition } from 'ui/components/options/options-frame'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 
 type TranslationsOptionsDialogProps = {
   onClose: () => void

package/src/javascripts/core/domains/translations/components/options-dialog/translation-option.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'preact/compat'
 import { className } from 'lib/css'
+import { FC } from 'preact/compat'
 import Icon from 'ui/components/layout/icon'
 
 type TranslationOptionProps = {

package/src/javascripts/core/domains/translations/components/options-dialog/translation-options.tsx

@@ -1,12 +1,12 @@
-import { useMemo } from 'preact/compat'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import TranslationOption from 'domains/translations/components/options-dialog/translation-option'
 import { useTranslations } from 'domains/translations/hooks'
+import type { Language } from 'domains/translations/translations.types'
 import { className } from 'lib/css'
+import { useMemo } from 'preact/compat'
 import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
 import { sourceTypes } from 'ui/utils/seamly-utils'
-import type { Language } from 'domains/translations/translations.types'
 
 type TranslationOptionsProps = {
   onChange: () => void

package/src/javascripts/core/domains/translations/components/translation-status.tsx

@@ -1,6 +1,6 @@
-import { useSelector } from 'react-redux'
 import { selectHasError } from 'domains/interrupt/selectors'
 import { useTranslations } from 'domains/translations/hooks'
+import { useSelector } from 'react-redux'
 import TranslationProposal from 'ui/components/translation-proposal'
 
 export default function TranslationStatus() {

package/src/javascripts/core/domains/translations/hooks.ts

@@ -1,5 +1,3 @@
-import { useCallback, useMemo } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useAppDispatch, RootState } from 'domains/store'
@@ -10,6 +8,8 @@ import {
   MessageEvent,
 } from 'domains/store/store.types'
 import { useVisibility } from 'domains/visibility/hooks'
+import { useCallback, useMemo } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import { useElementFocusingById } from 'ui/hooks/focus-helper-hooks'
 import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
 import {

package/src/javascripts/core/domains/translations/middleware.ts

@@ -2,10 +2,12 @@ import { Middleware } from '@reduxjs/toolkit'
 import { initializeApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
 import { setLocale } from 'domains/i18n/actions'
-import { addEvent } from 'domains/store/slice'
 import type { RootState } from 'domains/store'
+import { addEvent } from 'domains/store/slice'
 
-const createI18nMiddleware: Middleware<{}, RootState, any> = ({ dispatch }) => {
+const createI18nMiddleware: Middleware<object, RootState, any> = ({
+  dispatch,
+}) => {
   return (next) => {
     return (action) => {
       const result = next(action)

package/src/javascripts/core/domains/visibility/actions.ts

@@ -1,13 +1,13 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
+import type { VisibilityOptions } from 'config.types'
 import { selectUserHasResponded } from 'domains/app/selectors'
 import * as ConfigSelectors from 'domains/config/selectors'
+import type { ThunkAPI } from 'domains/redux/redux.types'
 import { calculateVisibility } from 'domains/visibility/utils'
 import { selectState } from 'ui/hooks/seamly-state-hooks'
 import { StoreKey, visibilityStates } from './constants'
 import * as Selectors from './selectors'
 import type { VisibilityActionArgs } from './visibility.types'
-import type { VisibilityOptions } from 'config.types'
-import type { ThunkAPI } from 'domains/redux/redux.types'
 
 const validVisibilityStates = [
   visibilityStates.open,

package/src/javascripts/core/domains/visibility/hooks.ts

@@ -1,18 +1,18 @@
-import { RefObject, createRef } from 'preact'
-import { useCallback, useEffect, useState } from 'preact/hooks'
-import { useSelector } from 'react-redux'
+import type { VisibilityOptions } from 'config.types'
 import { useConfig } from 'domains/config/hooks'
 import { useAppDispatch } from 'domains/store'
 import { setVisibility } from 'domains/visibility/actions'
 import { setShowInlineView } from 'domains/visibility/slice'
+import type { VisibilityActionArgs } from 'domains/visibility/visibility.types'
+import { RefObject, createRef } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import { visibilityStates } from './constants'
 import {
   selectShowInlineView,
   selectVisibility,
   selectSetInputFocus,
 } from './selectors'
-import type { VisibilityOptions } from 'config.types'
-import type { VisibilityActionArgs } from 'domains/visibility/visibility.types'
 
 export const useVisibility = () => {
   const dispatch = useAppDispatch()

package/src/javascripts/core/lib/debug.ts

@@ -2,7 +2,7 @@ const debug =
   process.env.NODE_ENV === 'development'
     ? (namespace) =>
         (...msg) =>
-          // eslint-disable-next-line
+          // eslint-disable-next-line no-console
           console.debug(namespace, ...msg)
     : () => () => null
 

package/src/javascripts/core/lib/engine/index.tsx

@@ -1,15 +1,15 @@
-import Events, { Events as EventsType } from 'minivents'
-import { render } from 'preact'
 import API from 'api'
+import type { Config } from 'config.types'
 import { initializeApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
 import { setConfig } from 'domains/config/slice'
 import { createStore } from 'domains/store'
 import { initializeVisibility } from 'domains/visibility/actions'
+import type ExternalApi from 'lib/external-api'
+import Events, { Events as EventsType } from 'minivents'
+import { render } from 'preact'
 import ChatApp from 'ui/components/chat-app'
 import SeamlyCore from 'ui/components/core/seamly-core'
-import type { Config } from 'config.types'
-import type ExternalApi from 'lib/external-api'
 
 export default class Engine {
   config: Omit<Config, 'parentElement'>
@@ -20,7 +20,7 @@ export default class Engine {
 
   externalApi: ExternalApi
 
-  functions: {}
+  functions: object
 
   eventBus: EventsType
 

package/src/javascripts/core/lib/external-api/index.ts

@@ -19,7 +19,6 @@ class ExternalApi {
   }
 
   push(...actionObjects) {
-    // eslint-disable-next-line no-param-reassign
     actionObjects = actionObjects
       .filter(isActionObject)
       .map(fixActionObjectArgs)
@@ -69,21 +68,23 @@ class ExternalApi {
     }
 
     switch (action) {
-      case 'setTopic':
+      case 'setTopic': {
         const { name } = args
         if (name) {
           this.context.topic = name
         }
         return true
+      }
       // Deprecated.
-      case 'setTranslation':
+      case 'setTranslation': {
         const { enabled, locale } = args
         if (!!enabled && locale) {
           this.context.userLocale = locale
           this.context.source = sourceTypes.windowApi
         }
         return true
-      case 'setContext':
+      }
+      case 'setContext': {
         const { userLocale, contentLocale } = args
         this.context.userLocale = userLocale
         this.context.contentLocale = contentLocale
@@ -92,6 +93,7 @@ class ExternalApi {
         }
 
         return true
+      }
       case 'setVariables':
         if (Object.keys(args).length > 0) {
           this.context.variables = { ...args }
@@ -178,7 +180,6 @@ class ExternalApi {
       })
     } else {
       if (typeof instance === 'string') {
-        // eslint-disable-next-line no-param-reassign
         instance = this._instances[instance]
       }
       if (instance) {
@@ -188,7 +189,6 @@ class ExternalApi {
     }
   }
 
-  // eslint-disable-next-line class-methods-use-this
   getUserConfig(userConfig = {}) {
     return userConfig
   }

package/src/javascripts/core/lib/mutex.ts

@@ -7,7 +7,6 @@ export default function createMutex() {
       while (tasks.length) {
         const task = tasks.shift()
         isRunning = true
-        // eslint-disable-next-line no-await-in-loop
         await task().catch(() => {
           // do nothing
         })

package/src/javascripts/core/lib/split-url-params.ts

@@ -9,7 +9,7 @@ const splitUrlParams = (url) => {
   const params = url
     .slice(searchIndex + 1)
     .split('&')
-    .reduce(function (acc, hash) {
+    .reduce((acc, hash) => {
       const [key, val] = hash.split('=')
       return {
         ...acc,

package/src/javascripts/core/lib/store/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 export function objectStore(key, storageProvider) {
   const sessionStore = storageProvider(key)
   const object = sessionStore.get() || {}

package/src/javascripts/core/lib/store/providers/app-storage.js

@@ -1,13 +1,11 @@
-// @ts-nocheck
 export default function appStore() {
   return {
     get: () => {
       // For Android we can retrieve data directly over the bridge
       // iOS and ReactNative will write the data on the window.seamlyBridgeData object on init
-      if (window.hasOwnProperty('SeamlyBridge')) {
+      if (Object.prototype.hasOwnProperty.call(window, 'SeamlyBridge')) {
         try {
-          // eslint-disable-next-line no-undef
-          return JSON.parse(SeamlyBridge.getData())
+          return JSON.parse(window.SeamlyBridge.getData())
         } catch (e) {
           console.error('Unexpected or malformed data retrieved from bridge', e)
           // Android should always return unchanged JSON data.
@@ -30,9 +28,8 @@ export default function appStore() {
       }
 
       // Android
-      if (window.hasOwnProperty('SeamlyBridge')) {
-        // eslint-disable-next-line no-undef
-        SeamlyBridge.setData(JSON.stringify(newData))
+      if (Object.prototype.hasOwnProperty.call(window, 'SeamlyBridge')) {
+        window.SeamlyBridge.setData(JSON.stringify(newData))
       }
 
       // React Native

package/src/javascripts/core/lib/store/providers/app-storage.ts

@@ -4,10 +4,9 @@ export default function appStore() {
     get: () => {
       // For Android we can retrieve data directly over the bridge
       // iOS and ReactNative will write the data on the window.seamlyBridgeData object on init
-      if (window.hasOwnProperty('SeamlyBridge')) {
+      if (Object.prototype.hasOwnProperty.call(window, 'SeamlyBridge')) {
         try {
-          // eslint-disable-next-line no-undef
-          return JSON.parse(SeamlyBridge.getData())
+          return JSON.parse(window.SeamlyBridge.getData())
         } catch (e) {
           console.error('Unexpected or malformed data retrieved from bridge', e)
           // Android should always return unchanged JSON data.
@@ -30,9 +29,8 @@ export default function appStore() {
       }
 
       // Android
-      if (window.hasOwnProperty('SeamlyBridge')) {
-        // eslint-disable-next-line no-undef
-        SeamlyBridge.setData(JSON.stringify(newData))
+      if (Object.prototype.hasOwnProperty.call(window, 'SeamlyBridge')) {
+        window.SeamlyBridge.setData(JSON.stringify(newData))
       }
 
       // React Native

package/src/javascripts/core/ui/components/app-options/index.tsx

@@ -1,4 +1,3 @@
-import { useSelector } from 'react-redux'
 import { useI18n } from 'domains/i18n/hooks'
 import { selectHasError } from 'domains/interrupt/selectors'
 import TranslationsOptionsButton from 'domains/translations/components/options-button'
@@ -7,6 +6,7 @@ import {
   useTranslations,
 } from 'domains/translations/hooks'
 import { className } from 'lib/css'
+import { useSelector } from 'react-redux'
 import Icon from 'ui/components/layout/icon'
 import OptionsButton from 'ui/components/options/options-button'
 import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'