@seamly/web-ui 19.0.0 → 19.1.3

package/src/javascripts/api/index.js

@@ -195,7 +195,6 @@ export class API {
         // cookies in CORS requests.
         .withCredentials()
         .send({
-          authorizationRequired: true,
           externalId: this.externalId || undefined,
         })
 
@@ -211,7 +210,7 @@ export class API {
       return initialState
     } catch (error) {
       if (error.status >= 500) {
-        throw new SeamlyGeneralError()
+        throw new SeamlyGeneralError(error)
       }
       throw error
     }
@@ -260,13 +259,13 @@ export class API {
       }
     } catch (error) {
       if (error.status === 401) {
-        throw new SeamlyUnauthorizedError()
+        throw new SeamlyUnauthorizedError(error)
       }
       if (error.status === 404) {
-        throw new SeamlySessionExpiredError()
+        throw new SeamlySessionExpiredError(error)
       }
       if (error.status >= 500) {
-        throw new SeamlyGeneralError()
+        throw new SeamlyGeneralError(error)
       }
       throw error
     }
@@ -353,10 +352,10 @@ export class API {
       })
       .catch((error) => {
         if (error.status === 404) {
-          throw new SeamlyConfigurationError()
+          throw new SeamlyConfigurationError(error)
         }
         if (error.status >= 500) {
-          throw new SeamlyGeneralError()
+          throw new SeamlyGeneralError(error)
         }
         throw error
       })
@@ -373,13 +372,13 @@ export class API {
       })
       .catch((error) => {
         if (error.status === 401) {
-          throw new SeamlyUnauthorizedError()
+          throw new SeamlyUnauthorizedError(error)
         }
         if (error.status === 404) {
-          throw new SeamlySessionExpiredError()
+          throw new SeamlySessionExpiredError(error)
         }
         if (error.status >= 500) {
-          throw new SeamlyGeneralError()
+          throw new SeamlyGeneralError(error)
         }
         throw error
       })
@@ -402,7 +401,7 @@ export class API {
       return body.translations
     } catch (error) {
       if (error.status >= 500) {
-        throw new SeamlyGeneralError()
+        throw new SeamlyGeneralError(error)
       }
       throw error
     }

package/src/javascripts/api/producer.js

@@ -20,6 +20,7 @@ export default class ConversationProducer {
         type: 'error',
         payload: {
           type: 'seamly_offline',
+          error: err,
         },
       })
     })
@@ -77,7 +78,10 @@ export default class ConversationProducer {
       .receive('error', (err) => {
         log('[CHANNEL][JOIN] ERROR', err)
 
-        this.emit({ type: 'error', payload: { type: 'join_channel_erred' } })
+        this.emit({
+          type: 'error',
+          payload: { type: 'join_channel_erred', error: err },
+        })
         this.emit({ type: 'connection', connected: false, ready: false })
         this.channel.socket.disconnect()
       })

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

@@ -1,8 +1,10 @@
 import { seamlyActions } from '../../ui/utils/seamly-utils'
 import { Actions as ConfigActions } from '../config'
-import { Actions as InterruptActions } from '../interrupt'
 import { Actions as I18nActions } from '../i18n'
+import * as VisibilityActions from '../visibility/actions'
 import { createAction, createThunk } from './utils'
+import SeamlyUnavailableError from '../../api/errors/seamly-unavailable-error'
+import SeamlySessionExpiredError from '../../api/errors/seamly-session-expired-error'
 
 export const setHasResponded = createAction(
   'setHasResponded',
@@ -12,31 +14,39 @@ export const setHasResponded = createAction(
 export const initialize = createThunk(
   'initialize',
   async (config, { dispatch, extra: { api } }) => {
-    try {
-      dispatch(ConfigActions.initialize(config))
+    dispatch(ConfigActions.initialize(config))
+    let locale = config?.context?.locale
 
+    try {
       const { features, defaultLocale } = await api.getConfig()
       dispatch({ type: seamlyActions.SET_FEATURES, features })
-
-      let locale = config?.context?.locale || defaultLocale
+      locale = locale || defaultLocale
       dispatch(I18nActions.setInitialLocale(locale))
-      try {
-        if (api.hasConversation()) {
-          const initialState = await api.getConversationIntitialState()
-          dispatch({ type: seamlyActions.SET_INITIAL_STATE, initialState })
+    } catch (e) {
+      throw new SeamlyUnavailableError()
+    }
 
-          locale = initialState.translation?.locale || locale
+    try {
+      if (api.hasConversation()) {
+        const initialState = await api.getConversationIntitialState()
+        dispatch({ type: seamlyActions.SET_INITIAL_STATE, initialState })
+
+        locale = initialState.translation?.locale || locale
 
-          if ('userResponded' in initialState) {
-            dispatch(setHasResponded(initialState.userResponded))
-          }
+        if ('userResponded' in initialState) {
+          dispatch(setHasResponded(initialState.userResponded))
         }
-      } catch (error) {
-        dispatch(InterruptActions.set(error))
       }
+    } catch (e) {
+      if (e instanceof SeamlySessionExpiredError) {
+        throw e
+      }
+      throw new SeamlyUnavailableError()
+    } finally {
       await dispatch(I18nActions.setLocale(locale))
-    } catch (error) {
-      dispatch(InterruptActions.set(error))
+      dispatch(VisibilityActions.initialize())
     }
   },
 )
+
+export const reset = createAction('reset', () => {})

package/src/javascripts/domains/app/index.js

@@ -1,6 +1,7 @@
 import * as Actions from './actions'
+import * as Selectors from './selectors'
 
 export * from './hooks'
 export { default as Reducer } from './reducer'
 
-export { Actions }
+export { Actions, Selectors }

package/src/javascripts/domains/config/reducer.js

@@ -27,6 +27,7 @@ const configKeys = [
   'messages',
   'visible',
   'visibilityCallback',
+  'errorCallback',
 ]
 const updateState = (state, { config }) => {
   const { messages, ...partialConfig } = pick(config, configKeys)

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

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect'
-import { visibilityStates } from '../../ui/utils/seamly-utils'
+import { visibilityStates } from '../visibility/constants'
 import { selectState } from './utils'
 
 export const selectConfig = createSelector(selectState, (config) => {

package/src/javascripts/domains/errors/index.js

@@ -0,0 +1,33 @@
+import { createDomain } from '../../lib/redux-helpers'
+import { Selectors as ConfigSelectors } from '../config'
+
+const { createAction } = createDomain('errors')
+
+export const catchError = createAction('catch-error', (error) => ({ error }))
+
+export function createMiddleware({ api: seamlyApi }) {
+  return ({ getState }) => {
+    const handleError = (action) => {
+      const { errorCallback, namespace, api, layoutMode } =
+        ConfigSelectors.selectConfig(getState())
+      errorCallback?.(action.error, {
+        namespace,
+        api,
+        layoutMode,
+        conversationUrl: seamlyApi.getConversationUrl(),
+        action: action.type ? action : undefined,
+      })
+    }
+    return (next) => (action) => {
+      try {
+        if (action.error) {
+          handleError(action)
+        }
+        return next(action)
+      } catch (error) {
+        handleError({ error })
+        throw error
+      }
+    }
+  }
+}

package/src/javascripts/domains/i18n/reducer.js

@@ -18,6 +18,12 @@ const defaultState = {
     'errors.seamlyOffline.srText':
       'The chat has connection issues. There might be a problem with your or our network connection. The chat session should resume as soon as the connection is available again.',
     'errors.seamlyOffline.title': 'Connection issues',
+    'errors.seamlyUnavailable.buttonText': 'Try again',
+    'errors.seamlyUnavailable.message':
+      'The server could not be reached. Try again in a little while.',
+    'errors.seamlyUnavailable.srText':
+      'The chat server could not be reached. Try again in a little while.',
+    'errors.seamlyUnavailable.title': 'Server unavailable',
   },
   isLoading: false,
   initialLocale: undefined,

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

@@ -3,6 +3,7 @@ import SeamlyConfigurationError from '../../api/errors/seamly-configuration-erro
 import SeamlySessionExpiredError from '../../api/errors/seamly-session-expired-error'
 import SeamlyOfflineError from '../../api/errors/seamly-offline-error'
 import SeamlyUnauthorizedError from '../../api/errors/seamly-unauthorized-error'
+import SeamlyUnavailableError from '../../api/errors/seamly-unavailable-error'
 
 const handledErrorTypes = [
   SeamlyGeneralError,
@@ -10,6 +11,7 @@ const handledErrorTypes = [
   SeamlySessionExpiredError,
   SeamlyOfflineError,
   SeamlyUnauthorizedError,
+  SeamlyUnavailableError,
 ]
 
 export default function createMiddleware({ api }) {

package/src/javascripts/domains/interrupt/reducer.js

@@ -1,21 +1,22 @@
 import { createReducer } from './utils'
 import * as Actions from './actions'
+import { Actions as AppActions } from '../app'
 
 const initialState = {
   error: undefined,
 }
 
+const handleError = (state, { error }) => ({
+  ...state,
+  error,
+})
+
 export default createReducer(
   {
-    [Actions.set]: (state, { error }) => {
-      return {
-        ...state,
-        error,
-      }
-    },
-    [Actions.clear]: () => {
-      return initialState
-    },
+    [Actions.set]: handleError,
+    [AppActions.initialize.rejected]: handleError,
+    [Actions.clear]: () => initialState,
+    [AppActions.reset]: () => initialState,
   },
   initialState,
 )

package/src/javascripts/domains/store/index.js

@@ -11,14 +11,16 @@ import {
   createMiddleware as createI18nMiddleware,
 } from '../translations'
 import { Reducer as i18nReducer } from '../i18n'
+import { Reducer as visibilityReducer } from '../visibility'
 import {
   Reducer as interruptReducer,
   createMiddleware as createInterruptMiddleware,
 } from '../interrupt'
 import { createMiddleware as createOptionsMiddleware } from '../options'
+import { createMiddleware as createErrorsMiddleware } from '../errors'
 import stateReducer from './state-reducer'
 
-export function createStore({ initialState, api } = {}) {
+export function createStore({ initialState, api, eventBus } = {}) {
   const store = createReduxStore({
     reducers: {
       state: stateReducer,
@@ -28,11 +30,14 @@ export function createStore({ initialState, api } = {}) {
       [String(translationsReducer)]: translationsReducer,
       [String(i18nReducer)]: i18nReducer,
       [String(interruptReducer)]: interruptReducer,
+      [String(visibilityReducer)]: visibilityReducer,
     },
     initialState,
     middlewares: [
+      createErrorsMiddleware({ api }),
       thunkMiddleware.withExtraArgument({
         api,
+        eventBus,
       }),
       createConfigMiddleware(),
       createInterruptMiddleware({ api }),

package/src/javascripts/domains/store/state-reducer.js

@@ -1,11 +1,8 @@
 // Legacy state reducer. Do not add new features here but extract/create new reducers as needed
 
 import { randomId } from '../../lib/id'
-import {
-  entryTypes,
-  seamlyStateReducer,
-  visibilityStates,
-} from '../../ui/utils/seamly-utils'
+import { entryTypes, seamlyStateReducer } from '../../ui/utils/seamly-utils'
+import { Actions as AppActions } from '../app'
 
 const initialState = {
   events: [],
@@ -14,7 +11,6 @@ const initialState = {
   isLoading: false,
   idleDetachCountdown: { hasCountdown: false, isActive: false },
   resumeConversationPrompt: false,
-  visible: visibilityStates.hidden,
   serviceInfo: {
     activeServiceSessionId: '',
   },
@@ -52,5 +48,13 @@ const initialState = {
 }
 
 export default function stateReducer(state = initialState, action) {
+  if (action.type === String(AppActions.reset)) {
+    const { visible } = state
+    return {
+      ...initialState,
+      visible,
+    }
+  }
+
   return seamlyStateReducer(state, action)
 }

package/src/javascripts/domains/visibility/actions.js

@@ -0,0 +1,73 @@
+import { Selectors as ConfigSelectors } from '../config'
+import * as AppSelectors from '../app/selectors'
+
+import { visibilityStates, StoreKey } from './constants'
+import { createAction, createThunk, calculateVisibility } from './utils'
+import * as Selectors from './selectors'
+import { selectState } from '../../ui/hooks/seamly-state-hooks'
+
+export const setFromStorage = createAction('setFromStorage', (visibility) => ({
+  visibility,
+}))
+
+const validVisibilityStates = [
+  visibilityStates.open,
+  visibilityStates.minimized,
+  visibilityStates.hidden,
+]
+export const setVisibility = createThunk(
+  'set',
+  (requestedVisibility, { getState, extra: { api, eventBus } }) => {
+    const state = getState()
+    const previousVisibility = Selectors.selectVisibility(state)
+    const hasResponded = AppSelectors.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,
+      previousVisibility,
+      requestedVisibility,
+      config,
+    })
+    if (!validVisibilityStates.includes(calculatedVisibility)) {
+      console.error(
+        'The visibilityCallback function should return "open", "minimized" or "hidden".',
+      )
+      return undefined
+    }
+    if (previousVisibility === calculatedVisibility) {
+      return undefined
+    }
+    // Store the user-requested visibility in order to reinitialize after refresh
+    api.store.set(StoreKey, {
+      ...(api.store.get(StoreKey) || {}),
+      [layoutMode]: requestedVisibility,
+    })
+    if (requestedVisibility) {
+      eventBus.emit('ui.visible', requestedVisibility, {
+        visibility: requestedVisibility,
+        hasConversation,
+        hasResponded,
+        unreadMessageCount,
+      })
+    }
+    return calculatedVisibility
+  },
+)
+
+export const initialize = createThunk(
+  'initialize',
+  async (locale, { 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))
+  },
+)

package/src/javascripts/domains/visibility/constants.js

@@ -0,0 +1,8 @@
+export const StoreKey = 'visibility'
+
+export const visibilityStates = {
+  hidden: 'hidden',
+  minimized: 'minimized',
+  open: 'open',
+  initialize: null,
+}

package/src/javascripts/domains/visibility/hooks.js

@@ -0,0 +1,24 @@
+import { useCallback } from 'preact/hooks'
+import { useConfig } from '../config'
+import { useSelector, useStoreDispatch } from '../redux'
+import * as Actions from './actions'
+import * as Selectors from './selectors'
+import { visibilityStates } from './constants'
+
+export const useVisibility = () => {
+  const dispatch = useStoreDispatch()
+  const visible = useSelector(Selectors.selectVisibility)
+  const isVisible = visible ? visible !== visibilityStates.hidden : false
+  const { layoutMode } = useConfig()
+  const isOpen =
+    visible && layoutMode
+      ? visible === visibilityStates.open ||
+        (layoutMode === 'inline' && visible !== visibilityStates.hidden)
+      : false
+  const setVisibility = useCallback(
+    (visibility) => dispatch(Actions.setVisibility(visibility)),
+    [dispatch],
+  )
+
+  return { isVisible, isOpen, visible, setVisibility }
+}

package/src/javascripts/domains/visibility/index.js

@@ -0,0 +1,8 @@
+import * as Actions from './actions'
+import * as Selectors from './selectors'
+
+export * from './hooks'
+export { visibilityStates } from './constants'
+export { default as Reducer } from './reducer'
+export { calculateVisibility } from './utils'
+export { Actions, Selectors }

package/src/javascripts/domains/visibility/reducer.js

@@ -0,0 +1,19 @@
+import { createReducer } from './utils'
+import * as Actions from './actions'
+import { visibilityStates } from './constants'
+
+const initialState = {
+  visibility: visibilityStates.initialize,
+}
+
+export default createReducer(
+  {
+    [Actions.setFromStorage]: (state, { visibility }) => ({
+      ...state,
+      visibility,
+    }),
+    [Actions.setVisibility.fulfilled]: (state, { payload: visibility }) =>
+      visibility ? { ...state, visibility } : state,
+  },
+  initialState,
+)

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

@@ -0,0 +1,9 @@
+import { createSelector } from 'reselect'
+import { selectState } from './utils'
+
+export const selectVisibility = createSelector(
+  selectState,
+  (state) => state.visibility,
+)
+
+export { selectState }

package/src/javascripts/domains/visibility/utils.js

@@ -0,0 +1,42 @@
+import { createDomain } from '../../lib/redux-helpers'
+import { visibilityStates } from './constants'
+
+export const {
+  createAction,
+  createActions,
+  createThunk,
+  createReducer,
+  selectState,
+} = createDomain('visibility')
+
+export const calculateVisibility = ({
+  hasResponded,
+  previousVisibility,
+  requestedVisibility,
+  config,
+}) => {
+  const { defaults, layoutMode, hideOnNoUserResponse } = config
+
+  const { visible: defaultVisibility } = defaults || {}
+
+  // Requesting open should override the responded check.
+  if (
+    layoutMode === 'window' &&
+    hideOnNoUserResponse &&
+    requestedVisibility !== visibilityStates.open
+  ) {
+    return hasResponded
+      ? requestedVisibility || previousVisibility || visibilityStates.open
+      : visibilityStates.hidden
+  }
+
+  const baseVisibility =
+    layoutMode === 'inline' ? visibilityStates.open : visibilityStates.minimized
+
+  return (
+    requestedVisibility ||
+    previousVisibility ||
+    defaultVisibility ||
+    baseVisibility
+  )
+}

package/src/javascripts/index.js

@@ -12,7 +12,7 @@ export { default as AgentInfo } from './ui/components/layout/agent-info'
 export { default as AppFrame } from './ui/components/layout/app-frame'
 
 // Used by: Client
-export { calculateVisibility } from './ui/utils/seamly-utils'
+export { calculateVisibility } from './domains/visibility'
 
 // Used by: Client
 export { default as ChatFrame } from './ui/components/layout/chat-frame'
@@ -114,7 +114,7 @@ export { useSeamlyMessageContainerClassNames } from './ui/hooks/seamly-hooks'
 export { useSeamlyOptions } from './ui/hooks/seamly-hooks'
 
 // Used by: Client
-export { useSeamlyVisibility } from './ui/hooks/seamly-hooks'
+export { useVisibility as useSeamlyVisibility } from './domains/visibility'
 
 // Used by: Client
 export {
@@ -135,7 +135,7 @@ export { default as View } from './ui/components/layout/view'
 
 // Used by: Client
 // Used by: StyleGuide
-export { visibilityStates } from './ui/utils/seamly-utils'
+export { visibilityStates } from './domains/visibility'
 
 // Used by: StyleGuide
 export { API } from './api'
@@ -143,14 +143,5 @@ export { API } from './api'
 // Used by: StyleGuide
 export { default as SeamlyGeneralError } from './api/errors/seamly-general-error'
 
-// Used by: StyleGuide
-export { default as SeamlyConfigurationError } from './api/errors/seamly-configuration-error'
-
-// Used by: StyleGuide
-export { default as SeamlySessionExpiredError } from './api/errors/seamly-session-expired-error'
-
 // Used by: StyleGuide
 export { default as SeamlyOfflineError } from './api/errors/seamly-offline-error'
-
-// Used by: StyleGuide
-export { default as SeamlyUnauthorizedError } from './api/errors/seamly-unauthorized-error'

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

@@ -51,6 +51,7 @@ export default class Engine {
 
     const store = createStore({
       api: this.api,
+      eventBus: this.eventBus,
     })
 
     await store.dispatch(AppActions.initialize(renderConfig))

package/src/javascripts/lib/redux-helpers/index.js

@@ -79,11 +79,7 @@ export function createThunk(type, payloadCreator) {
 }
 
 export function createReducer(domain, handlers = {}, defaultState) {
-  const reducer = (state, action) => {
-    if (state === undefined) {
-      // eslint-disable-next-line no-param-reassign
-      state = defaultState
-    }
+  const reducer = (state = defaultState, action) => {
     const typeReducer = handlers?.[action?.type]
     return typeReducer ? typeReducer(state, action) : state
   }

package/src/javascripts/style-guide/components/app.js

@@ -82,7 +82,7 @@ const StyleGuideApp = ({
         overlay.addEventListener('click', () => {
           setStaticState((s) => ({
             ...s,
-            visible: 'minimized',
+            visibility: { ...s.visibility, visible: 'minimized' },
           }))
         })
       }

package/src/javascripts/style-guide/components/static-core.js

@@ -1,4 +1,6 @@
 import { useMemo, useRef } from 'preact/hooks'
+import thunkMiddleware from 'redux-thunk'
+
 import {
   SeamlyEventBusContext,
   SeamlyApiContext,
@@ -19,6 +21,7 @@ import {
   Reducer as configReducer,
   Actions as ConfigActions,
 } from '../../domains/config'
+import { Reducer as visibilityReducer } from '../../domains/visibility'
 
 const bareApi = {
   send: () => {},
@@ -26,6 +29,7 @@ const bareApi = {
     return Promise.resolve({})
   },
   store: { get: () => {}, set: () => {} },
+  hasConversation: () => false,
 }
 
 const SeamlyTestCore = ({ state, translations, children }) => {
@@ -37,6 +41,7 @@ const SeamlyTestCore = ({ state, translations, children }) => {
       translations: translationsSlice,
       interrupt: interruptSlice,
       config: configSlice,
+      visibility: visibilitySlice,
       ...restState
     } = state || {}
     const newStore = createReduxStore({
@@ -48,12 +53,20 @@ const SeamlyTestCore = ({ state, translations, children }) => {
         [String(translationsReducer)]: translationsReducer,
         [String(i18nReducer)]: i18nReducer,
         [String(interruptReducer)]: interruptReducer,
+        [String(visibilityReducer)]: visibilityReducer,
       },
       initialState: {
         state: restState,
         [String(translationsReducer)]: translationsSlice,
         [String(interruptReducer)]: interruptSlice,
+        [String(visibilityReducer)]: visibilitySlice,
       },
+      middlewares: [
+        thunkMiddleware.withExtraArgument({
+          api: bareApi,
+          eventBus: eventBusRef.current,
+        }),
+      ],
     })
     newStore.dispatch(ConfigActions.initialize(configSlice || {}))
     newStore.dispatch(I18nActions.setLocale.fulfilled('en-GB', translations))