@seamly/web-ui 20.8.0-beta.2 → 20.8.0-beta.5

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { createAsyncThunk } from '@reduxjs/toolkit'
+import { createAsyncThunk, unwrapResult } from '@reduxjs/toolkit'
 import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
 import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
 import { Config } from 'config.types'
@@ -47,7 +47,6 @@ export const initializeApp = createAsyncThunk<
             body: { enabled: true, locale },
           })
         }
-        dispatch(setLocale(locale))
         return { initialState: undefined, locale, config }
       }
     } catch (e) {
@@ -81,7 +80,14 @@ export const resetApp = createAsyncThunk<unknown, void, ThunkAPI>(
 
     dispatch(resetConfig())
     await dispatch(initializeConfig())
-    await dispatch(initializeApp())
+
+    try {
+      const { locale } = await dispatch(initializeApp()).unwrap()
+      await dispatch(setLocale(locale))
+    } catch (rejectedValueOrSerializedError) {
+      // nothing to do
+    }
+
     dispatch(initializeVisibility())
   },
 )

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

@@ -16,6 +16,7 @@ export const initializeConfig = createAsyncThunk<any, void, ThunkAPI>(
       } = await api.getConfig()
 
       const locale = config?.context?.locale || defaultLocale
+      const { connectWhenInView } = config
 
       return {
         features,
@@ -25,6 +26,7 @@ export const initializeConfig = createAsyncThunk<any, void, ThunkAPI>(
         userParticipant,
         startChatIcon,
         locale,
+        connectWhenInView,
       }
     } catch (e) {
       const err = new SeamlyUnavailableError()

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

@@ -1,24 +1,34 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
-import { selectLocale } from 'domains/i18n/selectors'
+import type { I18nState } from 'domains/i18n/i18n.types'
 import { ThunkAPI } from 'domains/redux/redux.types'
 
 export const setLocale = createAsyncThunk<
   {
-    translations: Record<string, string>
-    locale: string
+    translations: I18nState['translations']
+    locale: I18nState['locale']
   },
   string,
   ThunkAPI
->('setLocale', async (locale, { getState, extra: { api } }) => {
-  const stateLocale = selectLocale(getState())
-  if (locale === stateLocale) {
-    return undefined
-  }
+>(
+  'setLocale',
+  async (locale, { extra: { api } }) => {
+    const response = await api.getTranslations(locale)
 
-  const response = await api.getTranslations(locale)
+    return {
+      translations: response,
+      locale,
+    }
+  },
+  {
+    condition: (locale, { getState }) => {
+      const {
+        i18n: { isLoading, locale: stateLocale },
+      } = getState()
 
-  return {
-    translations: response,
-    locale,
-  }
-})
+      if (locale === stateLocale || isLoading) {
+        // Already fetched or in progress, don't need to re-fetch
+        return false
+      }
+    },
+  },
+)

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

@@ -3,6 +3,7 @@ import {
   pluralTypeHandler,
   selectTypeHandler,
 } from '@ultraq/icu-message-formatter'
+import { RootState } from 'domains/store'
 import { useCallback } from 'preact/hooks'
 import { useSelector } from 'react-redux'
 import * as Selectors from './selectors'
@@ -19,16 +20,20 @@ export function useI18n() {
   const translations = useSelector(Selectors.selectTranslations)
   const locale = useSelector(Selectors.selectLocale)
   const initialLocale = useSelector(Selectors.selectInitialLocale)
+  const isLoading = useSelector((state: RootState) => state.i18n.isLoading)
+
   const t = useCallback(
     (key, values = {}) => {
       const translation = translations[key]
       if (!translation) {
+        if (isLoading) return null
+
         console.warn(`Translation key: ${key} is missing in locale: ${locale}`)
         return null
       }
       return formatter.format(translation, values)
     },
-    [translations, locale],
+    [translations, locale, isLoading],
   )
 
   return {

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

@@ -1,5 +1,7 @@
+import { operations } from 'schema'
+
 export interface I18nState {
-  translations: Record<string, string>
+  translations: operations['getAccountTranslations']['responses']['200']['content']['application/json']['translations']
   isLoading: boolean
   initialLocale?: string
   locale?: string

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

@@ -50,9 +50,15 @@ export const i18nSlice = createSlice({
       .addCase(initializeConfig.fulfilled, (state, { payload }) => {
         state.initialLocale = payload.locale
       })
+      .addCase(setLocale.pending, (state) => {
+        state.isLoading = true
+      })
+      .addCase(setLocale.rejected, (state) => {
+        state.isLoading = false
+      })
       .addCase(setLocale.fulfilled, (state, { payload }) => {
+        state.isLoading = false
         if (!payload?.translations) {
-          state.isLoading = false
           return
         }
 

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

@@ -27,6 +27,7 @@ export default function createI18nMiddleware({ dispatch, getState }) {
         case setInitialState.type:
           if (payload?.translation?.enabled) {
             dispatch(enableTranslation(payload.translation.locale))
+            dispatch(setLocale(payload.locale))
           }
           break
         case addEvent.type:

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

@@ -1,5 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { VisibilityOptions } from 'config.types'
+import { initializeConfig } from 'domains/config/actions'
 import { setVisibility } from 'domains/visibility/actions'
 import { visibilityStates } from 'domains/visibility/constants'
 import type { VisibilityState } from 'domains/visibility/visibility.types'
@@ -21,14 +22,21 @@ export const visibilitySlice = createSlice({
     },
   },
   extraReducers: (builder) => {
-    builder.addCase(
-      setVisibility.fulfilled,
-      (state, { payload: visibility }: PayloadAction<VisibilityOptions>) => {
-        if (visibility) {
-          state.visibility = visibility
+    builder
+      .addCase(
+        setVisibility.fulfilled,
+        (state, { payload: visibility }: PayloadAction<VisibilityOptions>) => {
+          if (visibility) {
+            state.visibility = visibility
+          }
+        },
+      )
+      .addCase(initializeConfig.fulfilled, (state, { payload }) => {
+        // We only want to (always) show the inlineView when connectWhenInView is disabled
+        if (!payload.connectWhenInView) {
+          state.showInlineView = !payload.connectWhenInView
         }
-      },
-    )
+      })
   },
 })
 

package/src/javascripts/index.ts

@@ -80,7 +80,6 @@ export {
   useGeneratedId,
   useSeamlyChat,
   useSeamlyCommands,
-  useSeamlyDispatchContext,
   useSeamlyEventStream,
   useSeamlyIdleDetachCountdown,
   useSeamlyMessageContainerClassNames,
@@ -90,3 +89,4 @@ export {
 export { getUrlParams, getUrlSearchString } from './ui/utils/general-utils'
 // Used by: Client
 export { eventTypes } from './ui/utils/seamly-utils'
+export { useSeamlyActions } from 'ui/hooks/use-seamly-actions'

package/src/javascripts/lib/engine/index.js

@@ -3,6 +3,7 @@ import { initializeApp } from 'domains/app/actions'
 
 import { initializeConfig } from 'domains/config/actions'
 import { setConfig } from 'domains/config/slice'
+import { setLocale } from 'domains/i18n/actions'
 
 import { createStore } from 'domains/store'
 import { initializeVisibility } from 'domains/visibility/actions'
@@ -65,7 +66,12 @@ export default class Engine {
 
     store.dispatch(setConfig(renderConfig))
     await store.dispatch(initializeConfig())
-    await store.dispatch(initializeApp())
+    try {
+      const { locale } = await store.dispatch(initializeApp()).unwrap()
+      await store.dispatch(setLocale(locale))
+    } catch (rejectedValueOrSerializedError) {
+      // nothing to do
+    }
     store.dispatch(initializeVisibility())
 
     if (View) {

package/src/javascripts/package/hooks.js

@@ -5,7 +5,6 @@ export {
   useI18n,
   useSeamlyChat,
   useSeamlyCommands,
-  useSeamlyDispatchContext,
   useSeamlyEventStream,
   useSeamlyIdleDetachCountdown,
   useSeamlyMessageContainerClassNames,

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

@@ -1,6 +1,4 @@
 import { useEffect } from 'preact/hooks'
-import { useDispatch } from 'react-redux'
-
 // Import extracted hooks here for use inside this file
 import { useSeamlyApiContext } from './seamly-api-hooks'
 // Export extracted hooks here,
@@ -49,7 +47,6 @@ export {
   useGeneratedId,
   useStableCallback,
 } from './utility-hooks'
-export { useDispatch as useSeamlyDispatchContext }
 
 // This hook isn't used within the core
 // But it is used in implementations

package/src/javascripts/ui/hooks/use-seamly-actions.ts

@@ -0,0 +1,102 @@
+import {
+  addEvent,
+  clearEvents,
+  setHistory,
+  setEventsRead,
+  setLoadedImageEventIds,
+  ackEvent,
+  setIsLoading,
+  setParticipant,
+  setHeaderTitle,
+  setHeaderSubTitle,
+  resetHistoryLoadedFlag,
+  setActiveService,
+  initIdleDetachCountdown,
+  decrementIdleDetachCountdownCounter,
+  stopIdleDetachCountdownCounter,
+  clearIdleDetachCountdown,
+  initResumeConversationPrompt,
+  clearResumeConversationPrompt,
+  setServiceDataItem,
+  setFeatures,
+  setFeatureEnabledState,
+  clearFeatures,
+  setInitialState,
+  setUserSelectedOptions,
+  setUserSelectedOption,
+  showOption,
+  hideOption,
+  setServiceEntryMetadata,
+  setBlockAutoEntrySwitch,
+  setActiveEntryType,
+  setUserEntryType,
+  registerUpload,
+  setUploadProgress,
+  setUploadComplete,
+  setUploadError,
+  clearAllUploads,
+  setSeamlyContainerElement,
+} from 'domains/store/slice'
+import {
+  ChannelEvent,
+  HistoryResponse,
+  ParticipantEvent,
+} from 'domains/store/store.types'
+import { useDispatch } from 'react-redux'
+
+export const useSeamlyActions = () => {
+  const dispatch = useDispatch()
+
+  return {
+    addEvent: (event: ChannelEvent) => dispatch(addEvent(event)),
+    clearEvents: () => dispatch(clearEvents()),
+    setHistory: (history?: HistoryResponse) => dispatch(setHistory(history)),
+    setEventsRead: (payload) => dispatch(setEventsRead(payload)),
+    setLoadedImageEventIds: (ids: string[]) =>
+      dispatch(setLoadedImageEventIds(ids)),
+    ackEvent: (event) => dispatch(ackEvent(event)),
+    setIsLoading: (isLoading: boolean) => dispatch(setIsLoading(isLoading)),
+    setParticipant: (participant: ParticipantEvent) =>
+      dispatch(setParticipant(participant)),
+    setHeaderTitle: (title: string) => dispatch(setHeaderTitle(title)),
+    setHeaderSubTitle: (title: string) => dispatch(setHeaderSubTitle(title)),
+    resetHistoryLoadedFlag: () => dispatch(resetHistoryLoadedFlag()),
+    setActiveService: () => dispatch(setActiveService()),
+    initIdleDetachCountdown: (payload) =>
+      dispatch(initIdleDetachCountdown(payload)),
+    decrementIdleDetachCountdownCounter: () =>
+      dispatch(decrementIdleDetachCountdownCounter()),
+    stopIdleDetachCountdownCounter: () =>
+      dispatch(stopIdleDetachCountdownCounter()),
+    clearIdleDetachCountdown: () => dispatch(clearIdleDetachCountdown()),
+    initResumeConversationPrompt: () =>
+      dispatch(initResumeConversationPrompt()),
+    clearResumeConversationPrompt: () =>
+      dispatch(clearResumeConversationPrompt()),
+    setServiceDataItem: (payload) => dispatch(setServiceDataItem(payload)),
+    setFeatures: (payload) => dispatch(setFeatures(payload)),
+    setFeatureEnabledState: (payload) =>
+      dispatch(setFeatureEnabledState(payload)),
+    clearFeatures: () => dispatch(clearFeatures()),
+    setInitialState: (initialState) => dispatch(setInitialState(initialState)),
+    setUserSelectedOptions: (payload) =>
+      dispatch(setUserSelectedOptions(payload)),
+    setUserSelectedOption: (payload) =>
+      dispatch(setUserSelectedOption(payload)),
+    showOption: (payload) => dispatch(showOption(payload)),
+    hideOption: () => dispatch(hideOption()),
+    setServiceEntryMetadata: (payload) =>
+      dispatch(setServiceEntryMetadata(payload)),
+    setBlockAutoEntrySwitch: (payload) =>
+      dispatch(setBlockAutoEntrySwitch(payload)),
+    setActiveEntryType: (payload) => dispatch(setActiveEntryType(payload)),
+    setUserEntryType: (payload) => dispatch(setUserEntryType(payload)),
+    registerUpload: (payload) => dispatch(registerUpload(payload)),
+    setUploadProgress: (payload) => dispatch(setUploadProgress(payload)),
+    setUploadComplete: (payload) => dispatch(setUploadComplete(payload)),
+    setUploadError: (payload) => dispatch(setUploadError(payload)),
+    clearAllUploads: () => dispatch(clearAllUploads()),
+    setSeamlyContainerElement: (payload) =>
+      dispatch(setSeamlyContainerElement(payload)),
+  }
+}

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

@@ -7,10 +7,11 @@ import { useDispatch, useSelector } from 'react-redux'
 import { selectShowInlineView } from '../../domains/visibility/selectors'
 import { useLiveRegion } from './live-region-hooks'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
-import { useSeamlyLayoutMode } from './seamly-state-hooks'
+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()
@@ -63,6 +64,18 @@ const useSeamlyChat = () => {
     }
   }, [dispatch])
 
+  useEffect(() => {
+    if (events.length) {
+      spinnerTimeout.current = setTimeout(() => {
+        dispatch(setIsLoading(false))
+      }, 5000)
+    }
+
+    return () => {
+      clearTimeout(spinnerTimeout.current)
+    }
+  }, [events, dispatch])
+
   useEffect(() => {
     // This is needed to reset the ref to allow connect and start to happen again.
     // Mostly due to Interrupt situations and a reset being called.