@seamly/web-ui 20.8.0-beta.1 → 20.8.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "20.8.0-beta.1",
+  "version": "20.8.0-beta.4",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",

package/src/javascripts/domains/app/actions.ts

@@ -3,6 +3,7 @@ import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
 import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
 import { Config } from 'config.types'
 import { initializeConfig, resetConfig } from 'domains/config/actions'
+import { setLocale } from 'domains/i18n/actions'
 import { ThunkAPI } from 'domains/redux/redux.types'
 import type { RootState } from 'domains/store'
 import { initializeVisibility } from 'domains/visibility/actions'
@@ -16,58 +17,61 @@ export const initializeApp = createAsyncThunk<
   },
   void,
   ThunkAPI
->('initializeApp', async (_, { extra: { api, config }, rejectWithValue }) => {
-  let locale = config?.context?.locale
-  try {
-    if (api.hasConversation()) {
-      const initialState = await api.getConversationIntitialState()
+>(
+  'initializeApp',
+  async (_, { extra: { api, config }, rejectWithValue, dispatch }) => {
+    let locale = config?.context?.locale
+    try {
+      if (api.hasConversation()) {
+        const initialState = await api.getConversationIntitialState()
 
-      locale = initialState.translation?.locale || locale
+        locale = initialState.translation?.locale || locale
 
-      return { initialState, locale, config }
-    } else {
-      if (config?.context?.topic) {
-        api.send('action', {
-          type: actionTypes.setTopic,
-          body: {
-            name: config.context.topic,
-            // Separate fallback message is not needed here. Only an attached service will use this, but none will
-            // be attached before the conversation has started (meaning the fallback message will never be shown).
-            fallbackMessage: config.context.topic,
-          },
-        })
+        return { initialState, locale, config }
+      } else {
+        if (config?.context?.topic) {
+          api.send('action', {
+            type: actionTypes.setTopic,
+            body: {
+              name: config.context.topic,
+              // Separate fallback message is not needed here. Only an attached service will use this, but none will
+              // be attached before the conversation has started (meaning the fallback message will never be shown).
+              fallbackMessage: config.context.topic,
+            },
+          })
+        }
+        if (config?.context?.translationLocale) {
+          locale = config.context.translationLocale
+          api.send('action', {
+            type: actionTypes.setTranslation,
+            body: { enabled: true, locale },
+          })
+        }
+        dispatch(setLocale(locale))
+        return { initialState: undefined, locale, config }
       }
-      if (config?.context?.translationLocale) {
-        locale = config.context.translationLocale
-        api.send('action', {
-          type: actionTypes.setTranslation,
-          body: { enabled: true, locale },
+    } catch (e) {
+      if (e instanceof SeamlySessionExpiredError) {
+        const err = new SeamlySessionExpiredError()
+
+        return rejectWithValue({
+          name: err.name,
+          message: err.message,
+          originalEvent: err.originalEvent,
+          originalError: err.originalError,
+          action: err.action,
         })
       }
 
-      return { initialState: undefined, locale, config }
-    }
-  } catch (e) {
-    if (e instanceof SeamlySessionExpiredError) {
-      const err = new SeamlySessionExpiredError()
-
+      const err = new SeamlyUnavailableError()
       return rejectWithValue({
         name: err.name,
         message: err.message,
-        originalEvent: err.originalEvent,
-        originalError: err.originalError,
-        action: err.action,
+        langKey: err.langKey,
       })
     }
-
-    const err = new SeamlyUnavailableError()
-    return rejectWithValue({
-      name: err.name,
-      message: err.message,
-      langKey: err.langKey,
-    })
-  }
-})
+  },
+)
 
 export const resetApp = createAsyncThunk<unknown, void, ThunkAPI>(
   'resetApp',

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

@@ -360,7 +360,7 @@ export const storeSlice = createSlice({
       )
 
       // Only set uploads if it was initialised by the account config.
-      if (newFeaturesHasUpload && lastParticipantEvent.type === 'message') {
+      if (newFeaturesHasUpload && lastParticipantEvent?.type === 'message') {
         const { payload: lastParticipantEventPayload } = lastParticipantEvent
         const entryType = lastParticipantEventPayload?.entry?.type || {}
         newFeatures = {
@@ -394,7 +394,12 @@ export const storeSlice = createSlice({
         ...state.serviceInfo,
         activeServiceSessionId,
       }
-      state.serviceData = serviceData || {}
+
+      state.serviceData = {
+        ...state.serviceData,
+        ...serviceData,
+      }
+
       state.options = {
         ...state.options,
         features: newFeatures || {},

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

@@ -87,12 +87,6 @@ export const translationSlice = createSlice({
   },
   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

package/src/javascripts/ui/hooks/use-seamly-chat.js

@@ -11,12 +11,12 @@ import { useEvents, useSeamlyLayoutMode } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
 
 const useSeamlyChat = () => {
+  const events = useEvents()
   const { t } = useI18n()
   const { isInline, isWindow } = useSeamlyLayoutMode()
   const { isOpen, isVisible, setVisibility } = useVisibility()
   const showInlineView = useSelector(selectShowInlineView)
   const dispatch = useDispatch()
-  const events = useEvents()
   const spinnerTimeout = useRef(null)
   const { start, connect, apiConfigReady, apiConnected } = useSeamlyCommands()
   const hasConversation = useSeamlyHasConversation()
@@ -25,8 +25,6 @@ const useSeamlyChat = () => {
   const startCalled = useRef(false)
   const { sendAssertive } = useLiveRegion()
 
-  const hasEvents = events.length > 0
-
   useEffect(() => {
     if (isVisible) {
       // Wait for the live containers to stabilise in the DOM before injecting
@@ -60,14 +58,23 @@ const useSeamlyChat = () => {
     spinnerTimeout.current = setTimeout(() => {
       dispatch(setIsLoading(true))
     }, 500)
+
+    return () => {
+      clearTimeout(spinnerTimeout.current)
+    }
   }, [dispatch])
 
   useEffect(() => {
-    if (hasEvents) {
+    if (events.length) {
+      spinnerTimeout.current = setTimeout(() => {
+        dispatch(setIsLoading(false))
+      }, 5000)
+    }
+
+    return () => {
       clearTimeout(spinnerTimeout.current)
-      dispatch(setIsLoading(false))
     }
-  }, [hasEvents, dispatch])
+  }, [events, dispatch])
 
   useEffect(() => {
     // This is needed to reset the ref to allow connect and start to happen again.