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

package/src/javascripts/core/ui/components/conversation/component-filter.tsx

@@ -1,11 +1,10 @@
-import { useMemo } from 'preact/hooks'
 import { useConfig } from 'domains/config/hooks'
+import { useMemo } from 'preact/hooks'
 import ComponentContext from './component-context'
 import CardMessage from './event/card-message'
 import CarouselMessage from './event/carousel-message'
 import ChoicePrompt from './event/choice-prompt'
 import ConversationSuggestions from './event/conversation-suggestions'
-import Cta from './event/cta'
 import Divider from './event/divider'
 import TimeIndicator from './event/divider/variants/time-indicator'
 import Image from './event/image'
@@ -24,7 +23,6 @@ const eventTypeMapping = {
     splash: Splash,
     video: Video,
     upload: Upload,
-    cta: Cta,
     carousel: CarouselMessage,
     card: CardMessage,
   },

package/src/javascripts/core/ui/components/conversation/event/card-component.tsx

@@ -1,7 +1,7 @@
-import { FunctionalComponent } from 'preact'
-import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import { MessageCard } from 'domains/store/store.types'
 import { className } from 'lib/css'
+import { FunctionalComponent } from 'preact'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { actionTypes, cardTypes } from 'ui/utils/seamly-utils'
 
@@ -32,7 +32,7 @@ const CardComponent: FunctionalComponent<CardComponentProps> = ({
   const emitCardEvent = useCallback(
     () =>
       emitEvent(`action.${actionTypes.clickCard}`, {
-        type: actionTypes.clickCta,
+        type: actionTypes.clickCard,
         originMessage: id,
         action,
       }),

package/src/javascripts/core/ui/components/conversation/event/carousel-component/components/pagination.tsx

@@ -1,5 +1,5 @@
-import { useCallback } from 'preact/hooks'
 import { className } from 'lib/css'
+import { useCallback } from 'preact/hooks'
 
 export default function CarouselPagination({
   items,

package/src/javascripts/core/ui/components/conversation/event/carousel-component/index.tsx

@@ -1,6 +1,6 @@
+import { className } from 'lib/css'
 import { RefObject, createRef } from 'preact'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
-import { className } from 'lib/css'
 import CarouselMessageSlide from 'ui/components/conversation/event/carousel-message/components/slide'
 import { useGeneratedId } from 'ui/hooks/utility-hooks'
 import CarouselControls from './components/controls'

package/src/javascripts/core/ui/components/conversation/event/chat-scroll/chat-scroll-provider.tsx

@@ -1,6 +1,6 @@
+import { className } from 'lib/css'
 import { RefObject, createRef } from 'preact'
 import { useMemo } from 'preact/hooks'
-import { className } from 'lib/css'
 import ChatScrollContext from 'ui/components/conversation/event/chat-scroll/chat-scroll-context'
 import UnreadMessagesButton from 'ui/components/conversation/event/chat-scroll/unread-messages-button'
 import useChatScroll from 'ui/components/conversation/use-chat-scroll'

package/src/javascripts/core/ui/components/conversation/event/choice-prompt.tsx

@@ -1,10 +1,11 @@
-import { toChildArray } from 'preact'
-import { FC } from 'preact/compat'
-import { useEffect, useMemo, useState } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
+import type { MessageChoicePrompt } from 'domains/store/store.types'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { className } from 'lib/css'
 import { randomId } from 'lib/id'
+import { toChildArray } from 'preact'
+import { FC } from 'preact/compat'
+import { useEffect, useMemo, useState } from 'preact/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
 import Icon from 'ui/components/layout/icon'
 import { useSeamlyHasConversation } from 'ui/hooks/seamly-api-hooks'
@@ -16,7 +17,6 @@ import {
 } from 'ui/hooks/seamly-hooks'
 import { childIsVNode } from 'ui/utils/general-utils'
 import { actionTypes } from 'ui/utils/seamly-utils'
-import type { MessageChoicePrompt } from 'domains/store/store.types'
 
 export const useChoicePrompt = (event: MessageChoicePrompt) => {
   const { payload } = event

package/src/javascripts/core/ui/components/conversation/event/conversation-suggestions.tsx

@@ -1,4 +1,3 @@
-import { useCallback, useMemo, useState } from 'preact/hooks'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { setHasResponded } from 'domains/app/slice'
 import { useConfig } from 'domains/config/hooks'
@@ -7,6 +6,7 @@ import { useAppDispatch } from 'domains/store'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { className } from 'lib/css'
 import { randomId } from 'lib/id'
+import { useCallback, useMemo, useState } from 'preact/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
 import SuggestionsList from 'ui/components/suggestions/suggestions-list'
 import { useSeamlyHasConversation } from 'ui/hooks/seamly-api-hooks'

package/src/javascripts/core/ui/components/conversation/event/divider/variants/new-translation.tsx

@@ -1,15 +1,15 @@
-import { useCallback } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useI18n } from 'domains/i18n/hooks'
 import { useAppDispatch } from 'domains/store'
+import type { RootState } from 'domains/store'
 import {
   disableEventsTranslation,
   enableEventsTranslation,
 } from 'domains/translations/slice'
 import { className } from 'lib/css'
+import { useCallback } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import EventDivider from 'ui/components/conversation/event-divider'
 import { useEvents } from 'ui/hooks/seamly-state-hooks'
-import type { RootState } from 'domains/store'
 
 const NewTranslationDivider = ({ event }) => {
   const { t } = useI18n()

package/src/javascripts/core/ui/components/conversation/event/divider/variants/time-indicator.tsx

@@ -1,5 +1,5 @@
-import { useEffect } from 'preact/hooks'
 import { className } from 'lib/css'
+import { useEffect } from 'preact/hooks'
 import { useFormattedDate } from 'ui/components/conversation/event/hooks/use-formatted-date'
 import EventDivider from 'ui/components/conversation/event-divider'
 import { useForceUpdate } from 'ui/hooks/utility-hooks'

package/src/javascripts/core/ui/components/conversation/event/event-participant.tsx

@@ -1,7 +1,7 @@
-import { VNode } from 'preact'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { VNode } from 'preact'
 import { useSeamlyParticipant } from 'ui/hooks/seamly-hooks'
 
 const EventParticipant = ({ eventPayload }) => {

package/src/javascripts/core/ui/components/conversation/event/event.tsx

@@ -1,9 +1,9 @@
-import { FunctionComponent, useEffect } from 'preact/compat'
 import { useAppDispatch } from 'domains/store'
 import { setEventsRead } from 'domains/store/slice'
 import { ChannelEvent } from 'domains/store/store.types'
 import { useIntersect } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { FunctionComponent, useEffect } from 'preact/compat'
 import { useChatScrollContext } from 'ui/components/conversation/event/chat-scroll/chat-scroll-context'
 import TimeIndicator from 'ui/components/conversation/event/divider/variants/time-indicator'
 import { useSeamlyCommands } from 'ui/hooks/seamly-hooks'

package/src/javascripts/core/ui/components/conversation/event/image-lightbox.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import Lightbox from 'ui/components/widgets/lightbox'
 

package/src/javascripts/core/ui/components/conversation/event/image.tsx

@@ -1,9 +1,9 @@
-import { FunctionalComponent } from 'preact'
-import { useState } from 'preact/hooks'
 import { useAppDispatch } from 'domains/store'
 import { setLoadedImageEventIds } from 'domains/store/slice'
 import { MessageImage } from 'domains/store/store.types'
 import { useTranslatedEventData } from 'domains/translations/hooks'
+import { FunctionalComponent } from 'preact'
+import { useState } from 'preact/hooks'
 import MessageContainer, {
   MessageContainerProps,
 } from 'ui/components/conversation/message-container'

package/src/javascripts/core/ui/components/conversation/event/participant.tsx

@@ -1,6 +1,6 @@
-import { FunctionalComponent } from 'preact'
 import { ParticipantEvent } from 'domains/store/store.types'
 import { useTranslatedParticipantData } from 'domains/translations/hooks'
+import { FunctionalComponent } from 'preact'
 import EventDivider from 'ui/components/conversation/event-divider'
 
 type ParticipantProps = {

package/src/javascripts/core/ui/components/conversation/event/splash.tsx

@@ -18,7 +18,6 @@ const Splash = ({ event, ...props }) => {
       {...props}
       bodyProps={{
         dangerouslySetInnerHTML: {
-          // @ts-ignore
           __html: body?.text || '',
         },
       }}

package/src/javascripts/core/ui/components/conversation/event/text.tsx

@@ -1,7 +1,7 @@
-import { FunctionalComponent } from 'preact'
-import { useMemo } from 'preact/hooks'
 import { MessageText } from 'domains/store/store.types'
 import { useTranslatedEventData } from 'domains/translations/hooks'
+import { FunctionalComponent } from 'preact'
+import { useMemo } from 'preact/hooks'
 import MessageContainer, {
   MessageContainerProps,
 } from 'ui/components/conversation/message-container'

package/src/javascripts/core/ui/components/conversation/event/upload.tsx

@@ -1,9 +1,9 @@
-import { useMemo } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useI18n } from 'domains/i18n/hooks'
 import { RootState } from 'domains/store'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { className } from 'lib/css'
+import { useMemo } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import MessageContainer from 'ui/components/conversation/message-container'
 import Icon from 'ui/components/layout/icon'
 import { useSeamlyApiContext } from 'ui/hooks/seamly-api-hooks'
@@ -22,7 +22,7 @@ const useImageFromStorage = (currentFileId) => {
 
     try {
       return sessionStorage.getItem(`image-${currentFileId}`)
-    } catch (error) {
+    } catch (_error) {
       return undefined
     }
   }, [currentFileId, processingFileUploads])

package/src/javascripts/core/ui/components/conversation/event/video.tsx

@@ -1,9 +1,9 @@
-import { FC } from 'preact/compat'
+import type { MessageVideo } from 'domains/store/store.types'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { className } from 'lib/css'
+import { FC } from 'preact/compat'
 import MessageContainer from 'ui/components/conversation/message-container'
 import { useSeamlyMessageContainerClassNames } from 'ui/hooks/seamly-hooks'
-import type { MessageVideo } from 'domains/store/store.types'
 
 type VideoProps = {
   event: MessageVideo

package/src/javascripts/core/ui/components/conversation/event-divider.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 EventDividerProps = {

package/src/javascripts/core/ui/components/conversation/message-container.tsx

@@ -1,5 +1,3 @@
-import { PreactDOMAttributes } from 'preact'
-import { FC, HTMLAttributes } from 'preact/compat'
 import {
   InfoEvent,
   MessageEvent,
@@ -7,6 +5,8 @@ import {
 } from 'domains/store/store.types'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { className } from 'lib/css'
+import { PreactDOMAttributes } from 'preact'
+import { FC, HTMLAttributes } from 'preact/compat'
 import { useSeamlyMessageContainerClassNames } from 'ui/hooks/component-helper-hooks'
 import EventParticipant from './event/event-participant'
 
@@ -39,7 +39,6 @@ const MessageContainer: FC<MessageContainerProps> = ({
   }
   if (modifiers) {
     if (typeof modifiers === 'string') {
-      // eslint-disable-next-line no-param-reassign
       modifiers = modifiers.split(' ').filter((v) => v.length)
     }
     modifiers.forEach((modifier) => {
@@ -54,7 +53,6 @@ const MessageContainer: FC<MessageContainerProps> = ({
   }
 
   if (isTranslated) {
-    // eslint-disable-next-line no-param-reassign
     bodyProps = {
       ...bodyProps,
       lang: locale,

package/src/javascripts/core/ui/components/conversation/use-chat-scroll.ts

@@ -1,3 +1,6 @@
+import { RootState } from 'domains/store'
+import { selectUnreadEventIds } from 'domains/store/selectors'
+import { useVisibility } from 'domains/visibility/hooks'
 import { RefObject } from 'preact'
 import {
   MutableRef,
@@ -7,9 +10,6 @@ import {
   useState,
 } from 'preact/hooks'
 import { useSelector } from 'react-redux'
-import { RootState } from 'domains/store'
-import { selectUnreadEventIds } from 'domains/store/selectors'
-import { useVisibility } from 'domains/visibility/hooks'
 import { timeout } from 'ui/hooks/focus-helper-hooks'
 import {
   useEvents,

package/src/javascripts/core/ui/components/core/seamly-activity-monitor.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useRef } from 'preact/hooks'
 import { activitySendDelay } from 'config'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useCallback, useRef } from 'preact/hooks'
 import {
   useSeamlyCommands,
   useSeamlyIdleDetachCountdown,

package/src/javascripts/core/ui/components/core/seamly-api-context.ts

@@ -1,6 +1,6 @@
+import API from 'api'
 import { Events } from 'minivents'
 import { createContext } from 'preact'
-import API from 'api'
 
 export const SeamlyApiContext = createContext<API | null>(null)
 

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

@@ -1,10 +1,10 @@
+import API from 'api'
+import { catchError } from 'domains/errors'
+import { Store } from 'domains/store'
 import { Events } from 'minivents'
 import { FunctionComponent } from 'preact'
 import { useErrorBoundary } from 'preact/hooks'
 import { Provider } from 'react-redux'
-import API from 'api'
-import { catchError } from 'domains/errors'
-import { Store } from 'domains/store'
 import SeamlyChat from 'ui/components/core/seamly-chat'
 import ComponentFilter from '../conversation/component-filter'
 import SeamlyActivityMonitor from './seamly-activity-monitor'

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

@@ -1,4 +1,3 @@
-import { useEffect, useRef } from 'preact/hooks'
 import { AsyncAPIMessage } from 'api/api.types'
 import SeamlyGeneralError from 'api/errors/seamly-general-error'
 import SeamlyOfflineError from 'api/errors/seamly-offline-error'
@@ -23,7 +22,9 @@ import {
   updateEvent,
   updateFeatures,
 } from 'domains/store/slice'
+import type { ChannelEvent } from 'domains/store/store.types'
 import { setTranslationProposalPrompt } from 'domains/translations/slice'
+import { useEffect, useRef } from 'preact/hooks'
 import useSeamlyEventBusContext from 'ui/hooks/event-bus-hooks'
 import {
   useSeamlyCommands,
@@ -31,7 +32,6 @@ import {
   useSeamlyResumeConversationPrompt,
 } from 'ui/hooks/seamly-hooks'
 import useSeamlyConversation from 'ui/hooks/use-seamly-conversation'
-import type { ChannelEvent } from 'domains/store/store.types'
 
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video']
 
@@ -165,7 +165,7 @@ const SeamlyEventSubscriber = () => {
                 break
             }
             break
-          case 'service_attach':
+          case 'service_attach': {
             const {
               service: {
                 name,
@@ -187,6 +187,7 @@ const SeamlyEventSubscriber = () => {
               }),
             )
             break
+          }
           case 'context':
             if (event.payload.contentLocale && event.payload.userLocale) {
               dispatch(setLocale(event.payload.userLocale))
@@ -200,7 +201,6 @@ const SeamlyEventSubscriber = () => {
               case 'image':
               case 'upload':
               case 'video':
-              case 'cta':
               case 'custom':
               case 'carousel':
               case 'card':
@@ -254,7 +254,7 @@ const SeamlyEventSubscriber = () => {
             break
           case 'error':
             switch (event.payload.type) {
-              case 'find_conversation':
+              case 'find_conversation': {
                 const seamlySessionExpiredError = new SeamlySessionExpiredError(
                   event,
                 )
@@ -268,7 +268,8 @@ const SeamlyEventSubscriber = () => {
                   }),
                 )
                 break
-              case 'conversation':
+              }
+              case 'conversation': {
                 const seamlyGeneralError = new SeamlyGeneralError(event)
                 dispatch(
                   setInterrupt({
@@ -281,6 +282,7 @@ const SeamlyEventSubscriber = () => {
                   }),
                 )
                 break
+              }
             }
         }
 
@@ -315,7 +317,7 @@ const SeamlyEventSubscriber = () => {
             if (events && 'service' in events) {
               dispatch(setEvents(events))
             }
-          } catch (e) {
+          } catch (_e) {
             // nothing to do,
           }
         }

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

@@ -1,4 +1,3 @@
-import { useCallback } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useAppDispatch } from 'domains/store'
 import {
@@ -10,6 +9,7 @@ import {
   startProcessingImage,
 } from 'domains/store/slice'
 import { randomId } from 'lib/id'
+import { useCallback } from 'preact/hooks'
 import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
 import { useSeamlyApiContext, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 
@@ -73,7 +73,7 @@ const SeamlyFileUpload = ({ children }) => {
 
       try {
         sessionStorage.setItem(`image-${fileId}`, newDataUri)
-      } catch (error) {
+      } catch (_error) {
         // Nothing to do!
       } finally {
         dispatch(doneProcessingImage(fileId))
@@ -96,7 +96,6 @@ const SeamlyFileUpload = ({ children }) => {
             id,
             transactionId,
             occurredAt,
-            // @ts-ignore
             body: { contentType, filename, filesize },
           } = result
           dispatch(setUploadComplete(fileId))

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

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

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

@@ -1,5 +1,3 @@
-import { useEffect, useRef } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { VisibilityOptions } from 'config.types'
 import { useConfig } from 'domains/config/hooks'
 import { updateConfig } from 'domains/config/slice'
@@ -8,6 +6,9 @@ import { useAppDispatch } from 'domains/store'
 import { useTranslations } from 'domains/translations/hooks'
 import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
+import type { VisibilityActionArgs } from 'domains/visibility/visibility.types'
+import { useEffect, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import useSeamlyEventBusContext from 'ui/hooks/event-bus-hooks'
 import {
   useSeamlyActivityEventHandler,
@@ -18,7 +19,6 @@ import {
   useSeamlyUnreadCount,
 } from 'ui/hooks/seamly-hooks'
 import { actionTypes, sourceTypes } from 'ui/utils/seamly-utils'
-import type { VisibilityActionArgs } from 'domains/visibility/visibility.types'
 
 function useSeamlyInstanceFunction(functionName, fn, deps: any[] = []) {
   const eventBus = useSeamlyEventBusContext()

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

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { className } from 'lib/css'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import useSeamlyEventBusContext from 'ui/hooks/event-bus-hooks'
 import { ValueOf } from 'ui/utils/general-utils'
 import { ariaLiveLevels } from 'ui/utils/seamly-utils'

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

@@ -1,5 +1,5 @@
-import { useEffect } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
+import { useEffect } from 'preact/hooks'
 import { useLiveRegion, useSeamlyIsHistoryLoaded } from 'ui/hooks/seamly-hooks'
 
 const SeamlyNewNotifications = () => {

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

@@ -1,7 +1,7 @@
-import { useEffect, useMemo, useRef } from 'preact/hooks'
 import { unreadScreenReaderWait } from 'config'
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
+import { useEffect, useMemo, useRef } from 'preact/hooks'
 import { useLiveRegion, useSeamlyUnreadCount } from 'ui/hooks/seamly-hooks'
 import { debounce } from 'ui/utils/general-utils'
 

package/src/javascripts/core/ui/components/entry/entry-container.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import IdleDetachWarning from 'ui/components/warnings/idle-detach-warning'
 import ResumeConversationPrompt from 'ui/components/warnings/resume-conversation-prompt'
 import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
@@ -74,9 +74,14 @@ const EntryContainer = () => {
     entryContainer.current.contains(document.activeElement)
   )
 
-  const EntryComponent = entryComponents[renderEntry]
+  // Everything other than `text` and `upload` will fallback to `TextEntry` for now.
+  // This is also done for `choice_prompt`, see comment above `allowManualInput` below.
+  // At a later stage we could implement components like `DateTime` or `PhoneNumber`.
+  const EntryComponent = entryComponents[renderEntry] || TextEntry
+
   // Currently we do not have an actual ChoicePrompt entry component.
-  // Once we do, this property should be moved to that component instead.
+  // If we ever do, this property should be moved to that component instead.
+  // The current ChoicePrompt component is only responsible for the rendering of the buttons/choose again option.
   const { allowManualInput = true } = activeEntryOptions
 
   return (

package/src/javascripts/core/ui/components/entry/text-entry/hooks.ts

@@ -1,10 +1,10 @@
-import { useEffect, useMemo } from 'preact/hooks'
 import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
 import { useConfig } from 'domains/config/hooks'
 import { useFormControl } from 'domains/forms/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useAppDispatch } from 'domains/store'
 import { clearAbortTransaction } from 'domains/store/slice'
+import { useEffect, useMemo } from 'preact/hooks'
 import { useLiveRegion } from 'ui/hooks/live-region-hooks'
 import {
   useEntryTextLimit,
@@ -60,9 +60,20 @@ export const useEntryTextTranslation = (controlName: 'textMessageEntry') => {
   const { hasCharacterLimit, characterLimit } = useCharacterLimit(controlName)
 
   const {
-    entryMeta: { optionsOverride },
+    entryMeta: { active: entryType, optionsOverride },
   } = useSeamlyStateContext()
 
+  let labelOverride: string | null = null
+  let placeholderOverride: string | null = null
+  if (
+    entryType &&
+    optionsOverride &&
+    typeof optionsOverride[entryType] === 'object'
+  ) {
+    labelOverride = optionsOverride[entryType].label
+    placeholderOverride = optionsOverride[entryType].placeholder
+  }
+
   const { alwaysShowEntryLabel } = useConfig()
   const { t } = useI18n()
 
@@ -70,32 +81,28 @@ export const useEntryTextTranslation = (controlName: 'textMessageEntry') => {
     () =>
       t('input.inputPlaceholder', {
         hasLimit: hasCharacterLimit,
-        text:
-          optionsOverride?.text?.placeholder || t('input.inputPlaceholderText'),
+        text: placeholderOverride || t('input.inputPlaceholderText'),
         limit: hasCharacterLimit ? characterLimit : null,
       }),
-    [t, hasCharacterLimit, characterLimit, optionsOverride?.text?.placeholder],
+    [t, hasCharacterLimit, characterLimit, placeholderOverride],
   )
 
   const label: string = useMemo(
     () =>
       t('input.inputLabel', {
-        hasLimit: !optionsOverride?.text?.label ? hasCharacterLimit : false,
-        text: optionsOverride?.text?.label || t('input.inputLabelText'),
-        limit:
-          !optionsOverride?.text?.label && hasCharacterLimit
-            ? characterLimit
-            : null,
+        hasLimit: !labelOverride ? hasCharacterLimit : false,
+        text: labelOverride || t('input.inputLabelText'),
+        limit: !labelOverride && hasCharacterLimit ? characterLimit : null,
       }),
-    [t, hasCharacterLimit, characterLimit, optionsOverride?.text?.label],
+    [t, hasCharacterLimit, characterLimit, labelOverride],
   )
 
   const labelClass = useMemo(
     () =>
-      alwaysShowEntryLabel === true || optionsOverride?.text?.label
+      alwaysShowEntryLabel === true || labelOverride
         ? 'label'
         : 'visually-hidden',
-    [alwaysShowEntryLabel, optionsOverride?.text?.label],
+    [alwaysShowEntryLabel, labelOverride],
   )
 
   return { placeholder, label, labelClass }

package/src/javascripts/core/ui/components/entry/text-entry/index.tsx

@@ -1,7 +1,7 @@
-import { useCallback } from 'preact/hooks'
 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,

package/src/javascripts/core/ui/components/entry/text-entry/text-entry-form.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useLayoutEffect } from 'preact/hooks'
 import { useFormControl } from 'domains/forms/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useCallback, useLayoutEffect } from 'preact/hooks'
 import Form from 'ui/components/form-controls/form'
 import Input from 'ui/components/form-controls/input'
 import Icon from 'ui/components/layout/icon'

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

@@ -1,8 +1,8 @@
-import { FC } from 'preact/compat'
 import { FormControlName } from 'domains/forms/forms.types'
 import { useFormControl } from 'domains/forms/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { FC } from 'preact/compat'
 import FileInput from 'ui/components/form-controls/file-input'
 import Form from 'ui/components/form-controls/form'