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

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

@@ -0,0 +1,135 @@
+import type { Config } from 'config.types'
+import type { AppState } from 'domains/app/app.types'
+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 { components } from 'schema'
+import { entryTypes } from 'ui/utils/seamly-utils'
+
+export type MessageInfo = components['schemas']['MessageInfo'] & {
+  key?: string
+}
+export interface InfoEvent {
+  type: 'info'
+  payload: MessageInfo
+}
+
+export type MessageMessage = components['schemas']['MessageMessage'] & {
+  key?: string
+}
+export interface MessageEvent {
+  type: 'message'
+  payload: MessageMessage
+}
+
+export type MessageParticipant = components['schemas']['MessageParticipant'] & {
+  key?: string
+}
+export interface ParticipantEvent {
+  type: 'participant'
+  payload: MessageParticipant
+}
+
+export type ChannelEvent = MessageEvent | ParticipantEvent | InfoEvent
+
+export type HistoryEvent = ChannelEvent
+
+export type EntryMeta = {
+  default: typeof entryTypes.text
+  active: typeof entryTypes.text
+  userSelected: null
+  blockAutoEntrySwitch: boolean
+  options: Record<string, unknown>
+  optionsOverride: Record<string, unknown>
+}
+
+export type ParticipantInfo = {
+  participants: Record<string, MessageParticipant['participant']>
+  currentAgent: string
+}
+export interface CurrentUpload {
+  id: string
+  progress: number
+  name: string
+  uploading: boolean
+  uploadHandle: null | { abort: () => void }
+  error: string
+  complete: boolean
+}
+
+export type ServiceInfo = {
+  activeServiceSessionId: string
+}
+
+export interface StoreState {
+  events: ChannelEvent[]
+  initialState: Partial<
+    Omit<
+      StoreState,
+      'initialState' | 'userHasResponded' | 'seamlyContainerElement'
+    >
+  > & {
+    userResponded: boolean
+  }
+  unreadEvents: number
+  userHasResponded: boolean
+  loadedImageEventIds: string[]
+  isLoading: boolean
+  idleDetachCountdown: {
+    hasCountdown: boolean
+    isActive: boolean
+    remaining?: number
+    wasStopped?: boolean
+    count?: number
+    timer?: {
+      minutes: number
+      seconds: number
+    }
+  }
+  resumeConversationPrompt: boolean
+  serviceInfo: ServiceInfo
+  participantInfo: ParticipantInfo
+  headerTitles: {
+    title: null
+    subTitle: string
+  }
+  historyLoaded: boolean
+  skiplinkTargetId: string
+  optionsButtonId: string
+  headerCollapseButtonId: string
+  serviceData: Record<string, unknown>
+  options: {
+    features: {
+      uploads?: {
+        enabledFromEntry: boolean
+        enabled: boolean
+      }
+    }
+    panelActive: boolean
+    optionActive: string
+    userSelectedOptions: Record<string, unknown>
+  }
+  showFileUpload: boolean
+  currentUploads: CurrentUpload[]
+  entryMeta: EntryMeta
+  seamlyContainerElement: null | HTMLElement
+}
+
+export type CreateStore = {
+  initialState: Partial<StoreState>
+  api: Record<string, unknown>
+  eventBus: Record<string, unknown>
+  config: Config
+}
+
+export interface ReduxStore {
+  state: StoreState
+  app: AppState
+  config: Config
+  forms: FormState
+  translations: TranslationState
+  i18n: I18nState
+  interrupt: {}
+  visibility: VisibilityState
+}

package/src/javascripts/domains/translations/components/chat-status.js

@@ -1,13 +1,13 @@
 import { useCallback } from 'preact/hooks'
 import ChatStatus from 'ui/components/chat-status'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import { useSkiplinkTargetFocusing } from 'ui/hooks/seamly-hooks'
 import {
   useTranslationsContainer,
   useTranslations,
   useLocaleNativeName,
 } from 'domains/translations/hooks'
-import { useInterrupt } from 'domains/interrupt'
+import { useInterrupt } from 'domains/interrupt/hooks'
 
 export default function TranslationsChatStatus() {
   const { t } = useI18n()

package/src/javascripts/domains/translations/components/options-button.js

@@ -7,7 +7,7 @@ import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
 import { useLocaleNativeName } from 'domains/translations/hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import TranslationsOptionsDialog from './options-dialog'
 
 export default function TranslationsOptionButton() {

package/src/javascripts/domains/translations/components/options-dialog/form.js

@@ -1,11 +1,11 @@
-import { useMemo } from 'preact/hooks'
-import Form from 'ui/components/form-controls/form'
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import {
-  useTranslations,
   useLocaleNativeName,
+  useTranslations,
 } from 'domains/translations/hooks'
+import { className } from 'lib/css'
+import { useMemo } from 'preact/hooks'
+import Form from 'ui/components/form-controls/form'
 import Select from 'ui/components/form-controls/select'
 
 function TranslationsOptionsDialogForm({ controlName, descriptionId }) {

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

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef, useState } from 'preact/hooks'
 import OptionsFrame from 'ui/components/options/options-frame'
-import { FormProvider } from 'domains/forms'
+import FormProvider from 'domains/forms/provider'
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import { getValidator } from 'ui/utils/form-utils'
 import { isNotEmptyString } from 'ui/utils/validations'
@@ -8,7 +8,7 @@ import {
   useTranslations,
   useTranslationsContainer,
 } from 'domains/translations/hooks'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import TranslationsOptionsDialogForm from './form'
 
 export const formName = 'translation-settings'

package/src/javascripts/domains/translations/{hooks.js → hooks.ts}

@@ -1,39 +1,43 @@
+import { getIsPayloadTranslated } from 'domains/translations/selectors'
+import {
+  disableEvent,
+  disableTranslation,
+  enableEvent,
+  enableTranslation,
+} from 'domains/translations/slice'
 import { useMemo } from 'preact/hooks'
+import { useDispatch, useSelector } from 'react-redux'
 import {
   useElementFocusingById,
   useSeamlyCommands,
   useStableCallback,
 } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
-import {
-  useSelector,
-  useSelectorWithProps,
-  useStoreDispatch,
-} from 'domains/redux'
-import * as Selectors from './selectors'
-import * as Actions from './actions'
 
 export function useTranslations() {
   const { sendAction } = useSeamlyCommands()
-  const dispatch = useStoreDispatch()
+  const dispatch = useDispatch()
   const enableTranslations = useStableCallback(
     (locale) => {
       sendAction({
         type: actionTypes.setTranslation,
         body: { enabled: true, locale },
       })
-      dispatch(Actions.enable(locale))
+      dispatch(enableTranslation(locale))
     },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     [sendAction, dispatch],
   )
   const disableTranslations = useStableCallback(() => {
     sendAction({ type: actionTypes.setTranslation, body: { enabled: false } })
-    dispatch(Actions.disable())
+    dispatch(disableTranslation())
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
   }, [sendAction, dispatch])
 
   const { languages, isActive, isAvailable, currentLocale } = useSelector(
-    Selectors.getState,
-    [],
+    ({ translations }) => translations,
   )
 
   return {
@@ -46,8 +50,8 @@ export function useTranslations() {
   }
 }
 
-export function useTranslatedEventData({ payload } = {}) {
-  const payloadId = payload?.id
+export function useTranslatedEventData({ payload }) {
+  const payloadId: string = payload?.id
   let body
   let translatedBody
   switch (payload?.type) {
@@ -60,19 +64,20 @@ export function useTranslatedEventData({ payload } = {}) {
       translatedBody = payload?.translatedBody
   }
   const hasTranslation = !!translatedBody
-  const isTranslated = useSelectorWithProps(
-    Selectors.getIsPayloadTranslated,
-    { payloadId },
-    [payloadId],
+  const isTranslated = useSelector((store) =>
+    // @ts-ignore
+    getIsPayloadTranslated(store, payloadId),
   )
-  const dispatch = useStoreDispatch()
+  const dispatch = useDispatch()
 
   const toggleTranslation = useStableCallback(() => {
     if (isTranslated) {
-      dispatch(Actions.disableEvent(payloadId))
+      dispatch(disableEvent(payloadId))
     } else {
-      dispatch(Actions.enableEvent(payloadId))
+      dispatch(enableEvent(payloadId))
     }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
   }, [isTranslated, payloadId, dispatch])
 
   return [
@@ -88,12 +93,12 @@ export function useTranslatedEventData({ payload } = {}) {
 }
 
 export function useTranslationsContainer() {
-  const id = useSelector(Selectors.getState, []).containerId
+  const id = useSelector(({ translations }) => translations.containerId)
   const focusContainer = useElementFocusingById(id)
   return { id, focusContainer }
 }
 
-export function useLocaleNativeName(locale) {
+export function useLocaleNativeName(locale: string) {
   const { languages } = useTranslations()
 
   return useMemo(

package/src/javascripts/domains/translations/middleware.js

@@ -1,44 +1,46 @@
+import { initializeConfig } from 'domains/config/actions'
+import { setLocale } from 'domains/i18n/actions'
+import { selectInitialLocale } from 'domains/i18n/selectors'
+import { addEvent, setHistory, setInitialState } from 'domains/store/slice'
 import {
-  Actions as I18nActions,
-  Selectors as I18nSelectors,
-} from 'domains/i18n'
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import * as Actions from './actions'
+  disableTranslation,
+  enableTranslation,
+} from 'domains/translations/slice'
 
-export default function createMiddleware({ dispatch, getState }) {
+export default function createI18nMiddleware({ dispatch, getState }) {
   return (next) => {
     return (action) => {
       const result = next(action)
-
+      const { payload } = action
       switch (action.type) {
-        case String(seamlyActions.SET_HISTORY):
-          if (action.history?.translation?.enabled) {
-            dispatch(Actions.enable(action.history.translation.locale))
-            dispatch(I18nActions.setLocale(action.history.translation.locale))
+        case setHistory.type:
+          if (payload?.translation?.enabled) {
+            dispatch(enableTranslation(payload.translation.locale))
+            dispatch(setLocale(payload.translation.locale))
+          }
+          break
+        case initializeConfig.fulfilled.type:
+          if (payload.locale) {
+            dispatch(setLocale(payload.locale))
           }
           break
-        case String(seamlyActions.SET_INITIAL_STATE):
-          if (action.initialState?.translation?.enabled) {
-            dispatch(Actions.enable(action.initialState.translation.locale))
-            dispatch(I18nActions.setLocale(action.locale))
+        case setInitialState.type:
+          if (payload?.translation?.enabled) {
+            dispatch(enableTranslation(payload.translation.locale))
           }
           break
-        case String(seamlyActions.ADD_EVENT):
+        case addEvent.type:
           if (
-            action.event.type === 'info' &&
-            action.event?.payload?.body?.subtype === 'new_translation' &&
-            action.event.payload.body.translationEnabled
+            payload.type === 'info' &&
+            payload?.payload?.body?.subtype === 'new_translation' &&
+            payload.payload.body.translationEnabled
           ) {
-            dispatch(
-              I18nActions.setLocale(
-                action.event.payload.body.translationLocale,
-              ),
-            )
+            dispatch(setLocale(payload.payload.body.translationLocale))
           }
           break
-        case String(Actions.disable):
-          const initialLocale = I18nSelectors.selectInitialLocale(getState())
-          dispatch(I18nActions.setLocale(initialLocale))
+        case disableTranslation.type:
+          const initialLocale = selectInitialLocale(getState())
+          dispatch(setLocale(initialLocale))
           break
       }
       return result

package/src/javascripts/domains/translations/selectors.js

@@ -1,16 +1,11 @@
-import { createSelector } from 'reselect'
-import { getPropSelector } from 'domains/redux/utils'
-import { selectState } from './utils'
-
-export const getState = selectState
+import { createSelector } from '@reduxjs/toolkit'
 
 export const getOriginalPayloadIds = createSelector(
-  getState,
-  (state) => state.originalPayloadIds,
+  ({ translations }) => translations,
+  ({ originalPayloadIds }) => originalPayloadIds,
 )
 
 export const getIsPayloadTranslated = createSelector(
-  getOriginalPayloadIds,
-  getPropSelector('payloadId'),
+  [getOriginalPayloadIds, (_, payloadId) => payloadId],
   (payloadIds, payloadId) => !payloadIds.includes(payloadId),
 )

package/src/javascripts/domains/translations/slice.ts

@@ -0,0 +1,67 @@
+import { TranslationState } from 'domains/translations/translations.types'
+import { createSlice, nanoid } from '@reduxjs/toolkit'
+import { initializeApp } from 'domains/app/actions'
+import { initializeConfig } from 'domains/config/actions'
+
+export const translationsInitialState: TranslationState = {
+  isActive: false,
+  currentLocale: undefined,
+  isAvailable: false,
+  languages: [],
+  originalPayloadIds: [],
+  containerId: nanoid(),
+}
+
+export const translationSlice = createSlice({
+  name: 'translation',
+  initialState: translationsInitialState,
+  reducers: {
+    enableTranslation: (state, { payload }) => {
+      state.isActive = true
+      state.currentLocale = payload
+    },
+    disableTranslation: (state) => {
+      state.isActive = false
+      state.currentLocale = undefined
+    },
+    enableEvent: (state, { payload }) => {
+      if (!state.originalPayloadIds.includes(payload)) {
+        return
+      }
+      state.originalPayloadIds = state.originalPayloadIds.filter(
+        (id) => id !== payload,
+      )
+    },
+    disableEvent: (state, { payload }) => {
+      if (state.originalPayloadIds.includes(payload)) {
+        return
+      }
+      state.originalPayloadIds.push(payload)
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(initializeApp.fulfilled, (state, { payload }) => {
+        if (!payload.config?.context?.translationLocale) return
+
+        state.isActive = true
+        state.currentLocale = payload.locale
+      })
+      .addCase(initializeConfig.fulfilled, (state, { payload }) => {
+        const feature = payload?.features?.translation
+        if (!feature) return
+
+        state.isAvailable = feature.enabled === true
+        state.languages = feature.languages
+      })
+  },
+})
+
+export const {
+  enableTranslation,
+  disableTranslation,
+  enableEvent,
+  disableEvent,
+} = translationSlice.actions
+
+export default translationSlice.reducer

package/src/javascripts/domains/translations/translations.types.ts

@@ -0,0 +1,12 @@
+import { operations } from 'schema'
+
+export type Languages =
+  operations['getAccountConfig']['responses']['201']['content']['application/json']['config']['features']['translation']['languages']
+export interface TranslationState {
+  isActive: boolean
+  currentLocale?: string
+  isAvailable: boolean
+  languages: Languages
+  originalPayloadIds: string[]
+  containerId: string
+}

package/src/javascripts/domains/visibility/{actions.js → actions.ts}

@@ -1,36 +1,38 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import { VisibilityOptions } from 'config.types'
+import { selectUserHasResponded } from 'domains/app/selectors'
 import * as ConfigSelectors from 'domains/config/selectors'
-import * as AppSelectors from 'domains/app/selectors'
-
+import { ThunkAPI } from 'domains/redux/redux.types'
+import { setFromStorage } from 'domains/visibility/slice'
+import { calculateVisibility } from 'domains/visibility/utils'
+import { VisibilityState } from 'domains/visibility/visibility.types'
 import { selectState } from 'ui/hooks/seamly-state-hooks'
-import { visibilityStates, StoreKey } from './constants'
-import { createAction, createThunk, calculateVisibility } from './utils'
+import { StoreKey, visibilityStates } from './constants'
 import * as Selectors from './selectors'
 
-export const setFromStorage = createAction('setFromStorage', (visibility) => ({
-  visibility,
-}))
-
-export const setShowInlineView = createAction('setShowInlineView')
-
 const validVisibilityStates = [
   visibilityStates.open,
   visibilityStates.minimized,
   visibilityStates.hidden,
 ]
-export const setVisibility = createThunk(
-  'set',
+export const setVisibility = createAsyncThunk<
+  VisibilityOptions,
+  VisibilityState,
+  ThunkAPI
+>(
+  'setVisibility',
   (requestedVisibility, { getState, extra: { api, eventBus } }) => {
     const state = getState()
     const previousVisibility = Selectors.selectVisibility(state)
-    const hasResponded = AppSelectors.selectUserHasResponded(state)
+    const userHasResponded = selectUserHasResponded(state)
     const hasConversation = api.hasConversation()
     const config = ConfigSelectors.selectConfig(state)
+
     const { visibilityCallback = calculateVisibility, layoutMode } = config
     const { unreadEvents: unreadMessageCount } = selectState(state)
 
     const calculatedVisibility = visibilityCallback({
-      hasConversation,
-      hasResponded,
+      hasResponded: userHasResponded,
       previousVisibility,
       requestedVisibility,
       config,
@@ -53,23 +55,27 @@ export const setVisibility = createThunk(
       eventBus.emit('ui.visible', requestedVisibility, {
         visibility: requestedVisibility,
         hasConversation,
-        hasResponded,
+        hasResponded: userHasResponded,
         unreadMessageCount,
       })
     }
+
     return calculatedVisibility
   },
 )
 
-export const initialize = createThunk(
+export const initializeVisibility = createAsyncThunk<unknown, void, ThunkAPI>(
   'initialize',
-  async (locale, { dispatch, getState, extra: { api } }) => {
+  async (_, { dispatch, getState, extra: { api } }) => {
     // initialize stored visibility
     const { layoutMode } = ConfigSelectors.selectConfig(getState())
+
     const storedVisibility = api.store.get(StoreKey)?.[layoutMode]
     if (storedVisibility) {
       dispatch(setFromStorage(storedVisibility))
     }
-    dispatch(setVisibility(visibilityStates.initialize))
+
+    dispatch(setVisibility(storedVisibility))
+    return storedVisibility
   },
 )

package/src/javascripts/domains/visibility/{hooks.js → hooks.ts}

@@ -1,19 +1,22 @@
+import { useConfig } from 'domains/config/hooks'
+import { useAppDispatch } from 'domains/store'
+import { setVisibility } from 'domains/visibility/actions'
+import { setShowInlineView } from 'domains/visibility/slice'
+import { VisibilityState } from 'domains/visibility/visibility.types'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
-import { useSelector, useStoreDispatch } from 'domains/redux'
-import { useConfig } from 'domains/config'
-import * as Actions from './actions'
-import * as Selectors from './selectors'
+import { useDispatch, useSelector } from 'react-redux'
 import { visibilityStates } from './constants'
+import * as Selectors from './selectors'
 
 export const useVisibility = () => {
-  const dispatch = useStoreDispatch()
+  const dispatch = useAppDispatch()
   const visible = useSelector(Selectors.selectVisibility)
   const isVisible = visible ? visible !== visibilityStates.hidden : false
   const isOpen = visible === visibilityStates.open
   const isMinimized = visible === visibilityStates.minimized
 
-  const setVisibility = useCallback(
-    (visibility) => dispatch(Actions.setVisibility(visibility)),
+  const dispatchVisibility = useCallback(
+    (visibility: VisibilityState) => dispatch(setVisibility(visibility)),
     [dispatch],
   )
 
@@ -22,7 +25,7 @@ export const useVisibility = () => {
     isOpen,
     isMinimized,
     visible,
-    setVisibility,
+    setVisibility: dispatchVisibility,
   }
 }
 
@@ -66,7 +69,7 @@ const useIntersect = ({ freezeOnceVisible = false, enabled = true }) => {
 }
 
 export const useShowInlineView = () => {
-  const dispatch = useStoreDispatch()
+  const dispatch = useDispatch()
   const { connectWhenInView } = useConfig()
   const showInlineView = useSelector(Selectors.selectShowInlineView)
 
@@ -78,7 +81,7 @@ export const useShowInlineView = () => {
   useEffect(() => {
     if (!isVisible) return
 
-    dispatch(Actions.setShowInlineView())
+    dispatch(setShowInlineView())
   }, [dispatch, isVisible])
 
   return { containerRef, showInlineView }

package/src/javascripts/domains/visibility/{selectors.js → selectors.ts}

@@ -1,14 +1,11 @@
-import { createSelector } from 'reselect'
-import { selectState } from './utils'
+import { createSelector } from '@reduxjs/toolkit'
 
 export const selectVisibility = createSelector(
-  selectState,
+  ({ visibility }) => visibility,
   (state) => state.visibility,
 )
 
 export const selectShowInlineView = createSelector(
-  selectState,
+  ({ visibility }) => visibility,
   (state) => state.showInlineView,
 )
-
-export { selectState }