@seamly/web-ui 19.0.0-beta.2 → 19.1.1

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',
@@ -11,33 +13,40 @@ export const setHasResponded = createAction(
 
 export const initialize = createThunk(
   'initialize',
-  (config) =>
-    async (dispatch, getState, { api }) => {
-      try {
-        dispatch(ConfigActions.initialize(config))
+  async (config, { dispatch, extra: { api } }) => {
+    dispatch(ConfigActions.initialize(config))
+    let locale = config?.context?.locale
 
-        const { features, defaultLocale } = await api.getConfig()
-        dispatch({ type: seamlyActions.SET_FEATURES, features })
+    try {
+      const { features, defaultLocale } = await api.getConfig()
+      dispatch({ type: seamlyActions.SET_FEATURES, features })
+      locale = locale || defaultLocale
+      dispatch(I18nActions.setInitialLocale(locale))
+    } catch (e) {
+      throw new SeamlyUnavailableError()
+    }
 
-        let locale = config?.context?.locale || defaultLocale
-        dispatch(I18nActions.setInitialLocale(locale))
-        try {
-          if (api.hasConversation()) {
-            const initialState = await api.getConversationIntitialState()
-            dispatch({ type: seamlyActions.SET_INITIAL_STATE, initialState })
+    try {
+      if (api.hasConversation()) {
+        const initialState = await api.getConversationIntitialState()
+        dispatch({ type: seamlyActions.SET_INITIAL_STATE, initialState })
 
-            locale = initialState.translation?.locale || locale
+        locale = initialState.translation?.locale || locale
 
-            if ('userResponded' in initialState) {
-              dispatch(setHasResponded(initialState.userResponded))
-            }
-          }
-        } catch (error) {
-          dispatch(InterruptActions.set(error))
+        if ('userResponded' in initialState) {
+          dispatch(setHasResponded(initialState.userResponded))
         }
-        await dispatch(I18nActions.setLocale(locale))
-      } catch (error) {
-        dispatch(InterruptActions.set(error))
       }
-    },
+    } catch (e) {
+      if (e instanceof SeamlySessionExpiredError) {
+        throw e
+      }
+      throw new SeamlyUnavailableError()
+    } finally {
+      await dispatch(I18nActions.setLocale(locale))
+      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/actions.js

@@ -1,35 +1,20 @@
 import createMutex from '../../lib/mutex'
 import { selectLocale } from './selectors'
-import { createAction, createActions, createThunk } from './utils'
+import { createAction, createThunk } from './utils'
 
 export const setInitialLocale = createAction('setInitialLocale', (locale) => ({
   locale,
 }))
 
-export const [setLocaleStart, setLocaleResolve, setLocaleReject] =
-  createActions('setLocale', {
-    start: (locale) => ({ locale }),
-    resolve: (locale, translations) => ({ locale, translations }),
-    reject: (locale, error) => ({ locale, error }),
-  })
-
 const mutex = createMutex()
 export const setLocale = createThunk(
   'setLocale',
-  (locale) =>
-    async (dispatch, getState, { api }) => {
-      await mutex.runExclusively(async () => {
-        const currentLocale = selectLocale(getState())
-        if (currentLocale === locale) {
-          return
-        }
-        dispatch(setLocaleStart(locale))
-        try {
-          const translations = await api.getTranslations(locale)
-          dispatch(setLocaleResolve(locale, translations))
-        } catch (error) {
-          dispatch(setLocaleReject(locale, error))
-        }
-      })
-    },
+  async (locale, { getState, extra: { api } }) => {
+    return mutex.runExclusively(() => {
+      if (locale === selectLocale(getState())) {
+        return undefined
+      }
+      return api.getTranslations(locale)
+    })
+  },
 )

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,
@@ -29,11 +35,17 @@ export default createReducer(
       ...state,
       initialLocale: locale,
     }),
-    [Actions.setLocaleStart]: (state) => ({
+    [Actions.setLocale.pending]: (state) => ({
       ...state,
       isLoading: true,
     }),
-    [Actions.setLocaleResolve]: (state, { locale, translations }) => {
+    [Actions.setLocale.fulfilled]: (
+      state,
+      { payload: translations, meta: { arg: locale } },
+    ) => {
+      if (!translations) {
+        return { ...state, isLoading: false }
+      }
       return {
         ...state,
         isLoading: false,
@@ -49,7 +61,7 @@ export default createReducer(
           ),
       }
     },
-    [Actions.setLocaleReject]: (state) => ({
+    [Actions.setLocale.rejected]: (state) => ({
       ...state,
       isLoading: false,
     }),

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

@@ -1,9 +1,4 @@
 import { createDomain } from '../../lib/redux-helpers'
 
-export const {
-  createAction,
-  createActions,
-  createThunk,
-  createReducer,
-  selectState,
-} = createDomain('i18n')
+export const { createAction, createThunk, createReducer, selectState } =
+  createDomain('i18n')

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

@@ -3,7 +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 * as Actions from './actions'
+import SeamlyUnavailableError from '../../api/errors/seamly-unavailable-error'
 
 const handledErrorTypes = [
   SeamlyGeneralError,
@@ -11,17 +11,20 @@ const handledErrorTypes = [
   SeamlySessionExpiredError,
   SeamlyOfflineError,
   SeamlyUnauthorizedError,
+  SeamlyUnavailableError,
 ]
 
-export default function createMiddleware() {
+export default function createMiddleware({ api }) {
   return () => (next) => (action) => {
-    if (action.type === String(Actions.set)) {
-      if (
-        !handledErrorTypes.some(
-          (ErrorType) => action.error instanceof ErrorType,
-        )
-      ) {
-        throw action.error
+    const { error } = action
+    if (error) {
+      if (!handledErrorTypes.some((ErrorType) => error instanceof ErrorType)) {
+        throw error
+      } else if (error.action === 'reset') {
+        // [SMLY-942] We clear the store before a reset to force a new conversation if the page is refreshed before the conversation is reset
+        api.disconnect().then(() => {
+          api.clearStore()
+        })
       }
     }
 

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,14 +30,17 @@ 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(),
+      createInterruptMiddleware({ api }),
       createOptionsMiddleware({ api }),
       createI18nMiddleware(),
     ],

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
+  )
+}