@seamly/web-ui 20.8.1 → 21.0.0

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

@@ -1,13 +1,13 @@
-import { createAsyncThunk, unwrapResult } from '@reduxjs/toolkit'
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import type { Config } from 'config.types'
 import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
 import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
-import { Config } from 'config.types'
+import { actionTypes } from 'ui/utils/seamly-utils'
 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'
-import { actionTypes } from 'ui/utils/seamly-utils'
 
 export const initializeApp = createAsyncThunk<
   {
@@ -17,60 +17,61 @@ export const initializeApp = createAsyncThunk<
   },
   void,
   ThunkAPI
->(
-  'initializeApp',
-  async (_, { extra: { api, config }, rejectWithValue, dispatch }) => {
-    let locale = config?.context?.locale
-    try {
-      if (api.hasConversation()) {
-        const initialState = await api.getConversationIntitialState()
+>('initializeApp', async (_, { extra: { api, config }, rejectWithValue }) => {
+  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,
-            },
-          })
-        }
-        if (config?.context?.translationLocale) {
-          locale = config.context.translationLocale
-          api.send('action', {
+      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 },
-          })
-        }
-        return { initialState: undefined, locale, config }
-      }
-    } 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,
-        })
+          },
+          false,
+        )
       }
+      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,
-        langKey: err.langKey,
+        originalEvent: err.originalEvent,
+        originalError: err.originalError,
+        action: err.action,
       })
     }
-  },
-)
+
+    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/app/hooks.js

@@ -1,4 +1,4 @@
-import { selectUserHasResponded } from 'domains/app/selectors'
 import { useSelector } from 'react-redux'
+import { selectUserHasResponded } from 'domains/app/selectors'
 
 export const useUserHasResponded = () => useSelector(selectUserHasResponded)

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

@@ -1,5 +1,4 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
-import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
 import { ThunkAPI } from 'domains/redux/redux.types'
 
 export const initializeConfig = createAsyncThunk<any, void, ThunkAPI>(
@@ -28,13 +27,8 @@ export const initializeConfig = createAsyncThunk<any, void, ThunkAPI>(
         locale,
         connectWhenInView,
       }
-    } catch (e) {
-      const err = new SeamlyUnavailableError()
-      return rejectWithValue({
-        name: err.name,
-        langKey: err.langKey,
-        message: err.message,
-      })
+    } catch (error) {
+      return rejectWithValue(error)
     }
   },
 )

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

@@ -1,5 +1,5 @@
-import { selectConfig } from 'domains/config/selectors'
 import { useSelector } from 'react-redux'
+import { selectConfig } from 'domains/config/selectors'
 
 export const useConfig = () => useSelector(selectConfig)
 

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

@@ -1,15 +1,15 @@
 import { createSelector } from '@reduxjs/toolkit'
-import { Config } from 'config.types'
+import type { VisibilityOptions } from 'config.types'
+import type { RootState } from 'domains/store'
 import { visibilityStates } from 'domains/visibility/constants'
 
 export const selectConfig = createSelector(
-  ({ config }): Config => config,
+  ({ config }: RootState) => config,
   (config) => {
     let newConfig = {
-      visible:
-        config?.layoutMode === 'inline'
-          ? visibilityStates.open
-          : visibilityStates.minimized,
+      visible: (config?.layoutMode === 'inline'
+        ? visibilityStates.open
+        : visibilityStates.minimized) as VisibilityOptions,
       appContainerClassNames: config.appContainerClassNames || [],
       ...config,
     }

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

@@ -1,9 +1,9 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { defaultConfig } from 'config'
+import { PayloadAction, createSlice } from '@reduxjs/toolkit'
 import { Config } from 'config.types'
+import { defaultConfig } from 'config'
+import { pick } from 'ui/utils/general-utils'
 import { initializeConfig, resetConfig } from 'domains/config/actions'
 import type { ChannelEvent } from 'domains/store/store.types'
-import { pick } from 'ui/utils/general-utils'
 
 export const initialConfigState: Config = {
   ...defaultConfig,

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

@@ -0,0 +1,66 @@
+import { createAction } from '@reduxjs/toolkit'
+import SeamlyBaseError from 'api/errors/seamly-base-error'
+import SeamlyConfigurationError from 'api/errors/seamly-configuration-error'
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
+import SeamlyOfflineError from 'api/errors/seamly-offline-error'
+import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
+import SeamlyUnauthorizedError from 'api/errors/seamly-unauthorized-error'
+import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
+import { selectConfig } from 'domains/config/selectors'
+
+const ErrorTypes = {
+  SeamlyGeneralError,
+  SeamlyConfigurationError,
+  SeamlySessionExpiredError,
+  SeamlyOfflineError,
+  SeamlyUnauthorizedError,
+  SeamlyUnavailableError,
+}
+
+export const catchError = createAction('catch-error', (error) => ({
+  payload: error,
+}))
+
+export function createErrorsMiddleware({ api: seamlyApi }) {
+  return ({ getState }) => {
+    const handleError = (action) => {
+      const { errorCallback, namespace, api, layoutMode } = selectConfig(
+        getState(),
+      )
+
+      const { error, type } = action
+
+      const errorType = ErrorTypes[error?.name]
+        ? new ErrorTypes[error.name](error)
+        : new SeamlyBaseError(error)
+
+      errorCallback?.(errorType, {
+        namespace,
+        api,
+        layoutMode,
+        conversationUrl: seamlyApi.getConversationUrl(),
+        action: type ? action : undefined,
+      })
+    }
+
+    return (next) => (action) => {
+      try {
+        if (action.payload?.originalEvent?.payload) {
+          handleError({
+            error: action.payload,
+            type: action.payload?.originalEvent?.payload?.type,
+          })
+        } else if (action.payload?.originalError) {
+          handleError({
+            error: action.payload,
+            type: undefined,
+          })
+        }
+        return next(action)
+      } catch (error) {
+        handleError({ error })
+        throw error
+      }
+    }
+  }
+}

package/src/javascripts/domains/forms/context.ts

@@ -1,5 +1,5 @@
-import type { FormContextType } from 'domains/forms/forms.types'
 import { createContext } from 'preact'
+import type { FormContextType } from 'domains/forms/forms.types'
 
 const FormContext = createContext<FormContextType>({
   handleSubmit: () => undefined,

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

@@ -1,10 +1,10 @@
 export type FormContextType = {
-  handleSubmit: (e: Event) => void
+  handleSubmit: (_e: Event) => void
   isSubmitted: boolean
   isValid: boolean
   formId?: string
-  updateControlValue: (name: string, value: string) => void
-  updateControlTouched: (name: string, value: boolean) => void
+  updateControlValue: (_name: string, _value: string) => void
+  updateControlTouched: (_name: string, _value: boolean) => void
   errors?: Record<string, unknown>
   validationSchema?: Record<string, unknown>
   values?: Record<string, string>

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

@@ -1,21 +1,21 @@
-import { deregisterControl, registerControl } from 'domains/forms/slice'
-import {
-  getFormById,
-  getControlValueByName,
-  getControlTouchedByName,
-} from 'domains/forms/selectors'
 import {
+  useCallback,
   useContext,
-  useMemo,
   useEffect,
   useLayoutEffect,
-  useCallback,
+  useMemo,
 } from 'preact/hooks'
 import { useDispatch, useSelector } from 'react-redux'
+import type { FormContextType } from 'domains/forms/forms.types'
+import {
+  getControlTouchedByName,
+  getControlValueByName,
+  getFormById,
+} from 'domains/forms/selectors'
+import { deregisterControl, registerControl } from 'domains/forms/slice'
+import type { RootState } from 'domains/store'
 import FormContext from './context'
 import { validate } from './utils'
-import type { RootState } from 'domains/store'
-import type { FormContextType } from 'domains/forms/forms.types'
 
 export function useFormContext(): FormContextType {
   return useContext(FormContext)

package/src/javascripts/domains/forms/provider.tsx

@@ -1,22 +1,22 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'preact/hooks'
+import { useDispatch, useSelector } from 'react-redux'
 import { setHasResponded } from 'domains/app/slice'
 import { Provider } from 'domains/forms/context'
 import { useValidations } from 'domains/forms/hooks'
 import { getFormValuesByFormId } from 'domains/forms/selectors'
 import {
   deregisterForm,
-  registerForm,
   updateControlTouched as dispatchControlTouched,
   updateControlValue as dispatchControlValue,
+  registerForm,
 } from 'domains/forms/slice'
 import type { RootState } from 'domains/store'
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from 'preact/hooks'
-import { useDispatch, useSelector } from 'react-redux'
 
 export default function FormProvider({
   children,

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

@@ -11,12 +11,16 @@ export const setLocale = createAsyncThunk<
   ThunkAPI
 >(
   'setLocale',
-  async (locale, { extra: { api } }) => {
-    const response = await api.getTranslations(locale)
+  async (locale, { extra: { api }, rejectWithValue }) => {
+    try {
+      const response = await api.getTranslations(locale)
 
-    return {
-      translations: response,
-      locale,
+      return {
+        translations: response,
+        locale,
+      }
+    } catch (error) {
+      return rejectWithValue(error)
     }
   },
   {
@@ -29,6 +33,8 @@ export const setLocale = createAsyncThunk<
         // Already fetched or in progress, don't need to re-fetch
         return false
       }
+
+      return true
     },
   },
 )

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

@@ -3,12 +3,15 @@ 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'
+import {
+  selectInitialLocale,
+  selectIsLoading,
+  selectLocale,
+  selectTranslations,
+} from 'domains/i18n/selectors'
 
-// The passed in locale (en-GB) is only used to call Intl.PluralRules.select() in
 // pluralTypeHandler. Since we only use exact plural matches (=0, =1 etc) we can
 // safely use en-GB all the time.
 const formatter = new MessageFormatter('en-GB', {
@@ -17,13 +20,13 @@ const formatter = new MessageFormatter('en-GB', {
 })
 
 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 translations = useSelector(selectTranslations)
+  const locale = useSelector(selectLocale)
+  const initialLocale = useSelector(selectInitialLocale)
+  const isLoading = useSelector(selectIsLoading)
 
   const t = useCallback(
-    (key, values = {}) => {
+    (key: string, values = {}) => {
       const translation = translations[key]
       if (!translation) {
         if (isLoading) return null

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

@@ -1,16 +1,22 @@
-import { createSelector } from 'reselect'
+import { createSelector } from '@reduxjs/toolkit'
+import type { RootState } from 'domains/store'
 
 export const selectTranslations = createSelector(
-  ({ i18n }) => i18n,
+  ({ i18n }: RootState) => i18n,
   ({ translations }) => translations,
 )
 
 export const selectInitialLocale = createSelector(
-  ({ i18n }) => i18n,
+  ({ i18n }: RootState) => i18n,
   ({ initialLocale }) => initialLocale,
 )
 
 export const selectLocale = createSelector(
-  ({ i18n }) => i18n,
+  ({ i18n }: RootState) => i18n,
   ({ locale }) => locale,
 )
+
+export const selectIsLoading = createSelector(
+  ({ i18n }: RootState) => i18n,
+  ({ isLoading }) => isLoading,
+)

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

@@ -1,5 +1,4 @@
 import { createSlice } from '@reduxjs/toolkit'
-import { initializeApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
 import { setLocale } from 'domains/i18n/actions'
 import { I18nState } from 'domains/i18n/i18n.types'

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

@@ -1,6 +1,6 @@
-import { useI18n } from 'domains/i18n/hooks'
 import { useMemo } from 'preact/hooks'
 import { useSelector } from 'react-redux'
+import { useI18n } from 'domains/i18n/hooks'
 import * as Selectors from './selectors'
 
 export function useInterrupt() {

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

@@ -22,7 +22,7 @@ export default function createInterruptMiddleware({ api }) {
       if (
         !handledErrorTypes.some((ErrorType) => payload.name === ErrorType.name)
       ) {
-        throw new Error(payload)
+        throw new SeamlyGeneralError(payload)
       } else if (payload.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(() => {

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

@@ -1,4 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit'
+import { useDispatch } from 'react-redux'
 import appReducer from 'domains/app/slice'
 import configReducer from 'domains/config/slice'
 import { createErrorsMiddleware } from 'domains/errors'
@@ -11,7 +12,6 @@ import stateReducer from 'domains/store/slice'
 import createI18nMiddleware from 'domains/translations/middleware'
 import translationReducer from 'domains/translations/slice'
 import visibilityReducer from 'domains/visibility/slice'
-import { useDispatch } from 'react-redux'
 
 export function createStore({ initialState, api, eventBus, config }) {
   const store = configureStore({

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

@@ -0,0 +1,16 @@
+import { createSelector } from '@reduxjs/toolkit'
+import { selectEvents } from 'ui/hooks/seamly-state-hooks'
+import { readStates } from 'ui/utils/seamly-utils'
+import { isUnreadMessage } from 'domains/store/slice'
+
+export const selectUnreadEventIds = createSelector(selectEvents, (events) => {
+  return events
+    .filter((event) => {
+      return (
+        isUnreadMessage(event) &&
+        event.type !== 'service_data' &&
+        event.payload?.messageStatus === readStates.received
+      )
+    })
+    .map((event) => event.payload.id)
+})