@seamly/web-ui 19.0.0 → 19.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "19.0.0",
+  "version": "19.1.0",
   "main": "build/dist/lib/index.js",
   "module": "",
   "exports": {

package/src/javascripts/api/errors/seamly-base-error.js

@@ -0,0 +1,10 @@
+export default class SeamlyBaseError extends Error {
+  constructor(originalError, ...params) {
+    super(...params)
+
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, Object.getPrototypeOf(this))
+    }
+    this.originalError = originalError
+  }
+}

package/src/javascripts/api/errors/seamly-configuration-error.js

@@ -1,10 +1,8 @@
-export default class SeamlyConfigurationError extends Error {
-  constructor(params) {
-    super(params)
+import SeamlyBaseError from './seamly-base-error'
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, SeamlyConfigurationError)
-    }
+export default class SeamlyConfigurationError extends SeamlyBaseError {
+  constructor(originalError, ...params) {
+    super(originalError, ...params)
 
     this.name = 'SeamlyConfigurationError'
     this.langKey = 'errors.configError'

package/src/javascripts/api/errors/seamly-general-error.js

@@ -1,10 +1,8 @@
-export default class SeamlyGeneralError extends Error {
-  constructor(params) {
-    super(params)
+import SeamlyBaseError from './seamly-base-error'
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, SeamlyGeneralError)
-    }
+export default class SeamlyGeneralError extends SeamlyBaseError {
+  constructor(originalError, ...params) {
+    super(originalError, ...params)
 
     this.name = 'SeamlyGeneralError'
     this.langKey = 'errors.general'

package/src/javascripts/api/errors/seamly-offline-error.js

@@ -1,10 +1,8 @@
-export default class SeamlyOfflineError extends Error {
-  constructor(params) {
-    super(params)
+import SeamlyBaseError from './seamly-base-error'
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, SeamlyOfflineError)
-    }
+export default class SeamlyOfflineError extends SeamlyBaseError {
+  constructor(originalError, ...params) {
+    super(originalError, ...params)
 
     this.name = 'SeamlyOfflineError'
     this.langKey = 'errors.seamlyOffline'

package/src/javascripts/api/errors/seamly-session-expired-error.js

@@ -1,10 +1,8 @@
-export default class SeamlySessionExpiredError extends Error {
-  constructor(params) {
-    super(params)
+import SeamlyBaseError from './seamly-base-error'
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, SeamlySessionExpiredError)
-    }
+export default class SeamlySessionExpiredError extends SeamlyBaseError {
+  constructor(originalError, ...params) {
+    super(originalError, ...params)
 
     this.name = 'SeamlySessionExpiredError'
     this.action = 'reset'

package/src/javascripts/api/errors/seamly-unauthorized-error.js

@@ -1,10 +1,8 @@
-export default class SeamlyUnauthorizedError extends Error {
-  constructor(params) {
-    super(params)
+import SeamlyBaseError from './seamly-base-error'
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, SeamlyUnauthorizedError)
-    }
+export default class SeamlyUnauthorizedError extends SeamlyBaseError {
+  constructor(originalError, ...params) {
+    super(originalError, ...params)
 
     this.name = 'SeamlyUnauthorizedError'
     this.langKey = 'errors.general'

package/src/javascripts/api/errors/seamly-unavailable-error.js

@@ -0,0 +1,17 @@
+/**
+ * This error is used to alert the user that there's a problem with the connection
+ * when initialising the application because of a connection issue on either the server
+ * or the client side.
+ */
+export default class SeamlyUnavailableError extends Error {
+  constructor(params) {
+    super(params)
+
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, SeamlyUnavailableError)
+    }
+
+    this.name = 'SeamlyUnavailableError'
+    this.langKey = 'errors.seamlyUnavailable'
+  }
+}

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/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,32 @@
+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 = (error) => {
+      const { errorCallback, namespace, api, layoutMode } =
+        ConfigSelectors.selectConfig(getState())
+      errorCallback?.(error, {
+        namespace,
+        api,
+        layoutMode,
+        conversationUrl: seamlyApi.getConversationUrl(),
+      })
+    }
+    return (next) => (action) => {
+      try {
+        if (action.error) {
+          handleError(action.error)
+        }
+        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
+  )
+}