@seamly/web-ui 20.8.1 → 21.0.1-beta.1

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

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

@@ -1,25 +1,24 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { PayloadAction, createSlice, isAnyOf } from '@reduxjs/toolkit'
+import { ConversationHistoryResponse } from 'api'
+import { getTimeFromSeconds } from 'ui/utils/general-utils'
+import {
+  entryTypes,
+  eventTypes,
+  featureKeys,
+  payloadTypes,
+  readStates,
+} from 'ui/utils/seamly-utils'
 import { initializeApp, resetApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
-import {
+import type {
+  AckEvent,
   ChannelEvent,
   EntryMeta,
-  HistoryEvents,
-  HistoryResponse,
   MessageParticipant,
-  ParticipantInfo,
   ServiceInfo,
   StoreState,
 } from 'domains/store/store.types'
 import { randomId } from 'lib/id'
-import { getTimeFromSeconds } from 'ui/utils/general-utils'
-import {
-  entryTypes,
-  eventTypes,
-  featureKeys,
-  payloadTypes,
-  readStates,
-} from 'ui/utils/seamly-utils'
 
 export const isUnreadMessage = ({ type, payload }: ChannelEvent) =>
   (type === eventTypes.message && !payload.fromClient) ||
@@ -36,7 +35,7 @@ export const orderHistory = (events: ChannelEvent[]) => {
 
 export const mergeHistory = (
   stateEvents: ChannelEvent[],
-  historyEvents: HistoryEvents,
+  historyEvents: ConversationHistoryResponse['events'],
 ) => {
   const newStateEvents = stateEvents.filter(
     (stateEvent) =>
@@ -102,10 +101,10 @@ const participantReducer = (participantInfo, action) => {
 
 const calculateNewEntryMeta = (
   entryMeta: EntryMeta,
-  channelEvent: ChannelEvent,
+  channelEvent?: ChannelEvent,
 ) => {
   const entry =
-    channelEvent.type === 'message' ? channelEvent?.payload.entry : {}
+    channelEvent?.type === 'message' ? channelEvent?.payload.entry : {}
 
   const { blockAutoEntrySwitch } = entryMeta
 
@@ -133,6 +132,7 @@ const calculateNewEntryMeta = (
 
 export const initialStoreState: StoreState = {
   events: [],
+  isLastEventFromClient: false,
   initialState: {
     userResponded: false,
   },
@@ -243,15 +243,19 @@ export const storeSlice = createSlice({
 
       if (incrementUnread) {
         state.unreadEvents += 1
-        action.payload.payload.messageStatus = payload.fromClient
-          ? readStates.read
-          : readStates.received
+        if (eventType !== 'service_data') {
+          action.payload.payload.messageStatus = payload.fromClient
+            ? readStates.read
+            : readStates.received
+        }
       }
 
       action.payload.payload.key = randomId()
       state.events.push(action.payload)
+
+      state.isLastEventFromClient = payload.fromClient
     },
-    ackEvent: (state, { payload }) => {
+    ackEvent: (state, { payload: { payload } }: PayloadAction<AckEvent>) => {
       // If any ACKs are sent without transactionID the conversation crashes.
       // Ensure that this edge case is handled gracefully.
       if (!payload.transactionId) {
@@ -260,22 +264,17 @@ export const storeSlice = createSlice({
       }
 
       const matchedEvent = state.events.find(
-        (m) => m.payload.transactionId === payload.transactionId,
+        (m) =>
+          m.payload.transactionId === payload.transactionId &&
+          (!payload.type || m.type === payload.type),
       )
 
       const { id, occurredAt } = payload
       if (matchedEvent) {
-        state.events = orderHistory(
-          //@ts-ignore
-          state.events.map((m) =>
-            m.payload.id === matchedEvent.payload.id
-              ? {
-                  ...m,
-                  payload: { ...m.payload, id, occurredAt },
-                }
-              : m,
-          ),
-        )
+        matchedEvent.payload.id = id
+        matchedEvent.payload.occurredAt = occurredAt
+
+        state.events = orderHistory(state.events)
       }
     },
     clearEvents: (state) => {
@@ -283,15 +282,16 @@ export const storeSlice = createSlice({
       state.loadedImageEventIds = []
       state.events = []
     },
-    setEventsRead: (state, { payload }) => {
+    setEventsRead: (state, { payload }: PayloadAction<string[]>) => {
       state.unreadEvents = 0
       state.events.forEach((event) => {
         if (payload.indexOf(event.payload.id) !== -1) {
           event.payload = {
             ...event.payload,
-            ...(event.payload.messageStatus === readStates.received && {
-              messageStatus: readStates.read,
-            }),
+            ...(event.type !== 'service_data' &&
+              event.payload.messageStatus === readStates.received && {
+                messageStatus: readStates.read,
+              }),
           }
         }
         return event
@@ -311,7 +311,7 @@ export const storeSlice = createSlice({
           serviceData,
           resumeConversationPrompt,
         },
-      }: PayloadAction<HistoryResponse>,
+      }: PayloadAction<ConversationHistoryResponse>,
     ) => {
       const events = mergeHistory(state.events, history)
 
@@ -341,14 +341,14 @@ export const storeSlice = createSlice({
       }
 
       const { entry } = activeServiceSettings
-      const { upload } = entry.options
+      const upload = entry?.options?.upload
 
       const historyNewEntryMeta = calculateNewEntryMeta(
         {
           ...state.entryMeta,
           ...entry,
-          active: entry.default || payloadTypes.text,
-          options: { ...(entry && entry.options ? entry.options : {}) },
+          active: entry?.default || payloadTypes.text,
+          options: { ...(entry?.options ? entry.options : {}) },
         },
         events[events.length - 1],
       )
@@ -366,7 +366,7 @@ export const storeSlice = createSlice({
         newFeatures = {
           ...newFeatures,
           uploads: {
-            enabled: !!(upload && upload.enabled),
+            enabled: !!(upload && upload?.enabled),
             enabledFromEntry: entryType === entryTypes.upload,
           },
         }
@@ -601,6 +601,12 @@ export const storeSlice = createSlice({
         if (!payload.initialState) return
         state.initialState = payload.initialState
       })
+      .addMatcher(
+        isAnyOf(initIdleDetachCountdown, initResumeConversationPrompt),
+        (state) => {
+          state.isLastEventFromClient = false
+        },
+      )
   },
 })