@seamly/web-ui 18.1.1 → 18.3.1

package/src/javascripts/api/index.js

@@ -106,7 +106,7 @@ export class API {
     this.internalProducer = new EventProducer('API')
     this.internal$ = xs.create(this.internalProducer).flatten()
     this.connection$ = this.internal$.filter(
-      event => event.type === 'connection',
+      (event) => event.type === 'connection',
     )
 
     this.connection$.subscribe({
@@ -316,7 +316,7 @@ export class API {
       .set('Authorization', `Bearer ${this.getAccessToken()}`)
       .send(formData)
 
-    req.on('progress', function(e) {
+    req.on('progress', function (e) {
       const { direction, percent } = e
       if (direction === 'upload' && typeof progressCallback === 'function') {
         progressCallback(percent)
@@ -324,12 +324,12 @@ export class API {
     })
 
     req
-      .then(uploadResponse => {
+      .then((uploadResponse) => {
         if (successCallback) {
           successCallback(uploadResponse)
         }
       })
-      .catch(err => {
+      .catch((err) => {
         if (errorCallback) {
           errorCallback(err.response)
         } else {
@@ -353,7 +353,7 @@ export class API {
         this.updateUrls(body)
         return { accountConfig: body.config }
       })
-      .catch(error => {
+      .catch((error) => {
         if (error.status === 404) {
           throw new SeamlyConfigurationError()
         }
@@ -377,7 +377,7 @@ export class API {
 
         return { initialState }
       })
-      .catch(error => {
+      .catch((error) => {
         if (error.status === 401) {
           throw new SeamlyUnauthorizedError()
         }
@@ -398,7 +398,7 @@ export class API {
       promiseArray.push(this.getConversationIntitialState())
     }
 
-    return Promise.all(promiseArray).then(responses => {
+    return Promise.all(promiseArray).then((responses) => {
       const config = responses.reduce(
         (configObj, partialConfig) => ({
           ...configObj,
@@ -415,7 +415,7 @@ export class API {
     if (!this.connected || (waitForReady && !this.ready)) {
       // Wait for connection
       this.connection$
-        .filter(e => (waitForReady ? e.connected && e.ready : e.connected))
+        .filter((e) => (waitForReady ? e.connected && e.ready : e.connected))
         .take(1)
         .subscribe({
           next: () => this.send(command, payload, waitForReady),
@@ -471,6 +471,6 @@ export class API {
   }
 
   stream() {
-    return this.internal$.filter(event => event.type !== 'connection')
+    return this.internal$.filter((event) => event.type !== 'connection')
   }
 }

package/src/javascripts/api/producer.js

@@ -17,7 +17,7 @@ export default class ConversationProducer {
 
     this.connect()
 
-    this.socket.onError(err => {
+    this.socket.onError((err) => {
       log('[SOCKET][ERROR]', err)
       this.emit({
         type: 'error',
@@ -34,7 +34,7 @@ export default class ConversationProducer {
       })
     })
 
-    this.channel.on('system', msg => {
+    this.channel.on('system', (msg) => {
       switch (msg.type) {
         case 'join_conversation_succeeded':
           this.emit({ type: 'connection', connected: true, ready: true })
@@ -42,17 +42,17 @@ export default class ConversationProducer {
       }
     })
 
-    this.socket.onClose(msg => {
+    this.socket.onClose((msg) => {
       log('[SOCKET]CLOSE')
       this.emit({ type: 'connection', connected: false, ready: false })
     })
 
-    this.channel.onClose(msg => {
+    this.channel.onClose((msg) => {
       log('[CHANNEL]CLOSE')
       this.emit({ type: 'connection', connected: false, ready: false })
     })
 
-    this.channel.onError(msg => {
+    this.channel.onError((msg) => {
       log('[CHANNEL][ERROR]', msg)
       this.emit({ type: 'connection', connected: false, ready: false })
     })
@@ -77,7 +77,7 @@ export default class ConversationProducer {
         log('[CHANNEL][JOIN] OK')
         this.emit({ type: 'connection', connected: true, ready: false })
       })
-      .receive('error', err => {
+      .receive('error', (err) => {
         log('[CHANNEL][JOIN] ERROR', err)
 
         this.emit({ type: 'error', payload: { type: 'join_channel_erred' } })
@@ -105,13 +105,13 @@ export default class ConversationProducer {
   }
 
   disconnect() {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       this.socket.disconnect(resolve)
     })
   }
 
   listenTo(type, transform = null) {
-    this.channel.on(type, msg => {
+    this.channel.on(type, (msg) => {
       log('[RECEIVE]', type, msg)
       this.emit({
         type,

package/src/javascripts/config.js

@@ -2,17 +2,6 @@ export const CSS_NAME = 'cvco'
 
 export const apiVersion = '2'
 
-export const layoutMode = 'window' // "window", "inline" ("sidebar"), "modal"
-
-export const appContainerClassNames = config => [
-  `app--layout-${config.layoutMode}`,
-  `namespace--${config.namespace}`,
-]
-
-export const typing = {
-  timeout: 2000, // How long to wait before we decide the user isn't typing
-}
-
 export const userParticipantId = 'seamly-client-participant'
 
 // How long to debounce distinct changes in unread messages for before
@@ -32,6 +21,8 @@ export const maxCharacterSrDebounceDelay = 300
 export const defaultTransitionTimeMs = 300
 
 export const defaultConfig = {
+  namespace: 'default',
+  layoutMode: 'window', // "window", "inline" ("sidebar"), "modal"
   messages: {
     agent: {
       showAvatar: false, // true, "inline"
@@ -46,4 +37,11 @@ export const defaultConfig = {
       threshold: 3600000, // Default threshold is an hour in milliseconds
     },
   },
+  typing: {
+    timeout: 2000, // How long to wait before we decide the user isn't typing
+  },
+  appContainerClassNames: (config) => [
+    `app--layout-${config.layoutMode}`,
+    `namespace--${config.namespace}`,
+  ],
 }

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

@@ -0,0 +1,25 @@
+import { seamlyActions } from '../../ui/utils/seamly-utils'
+import { createDomain } from '../../lib/redux-helpers'
+import { Actions as ConfigActions } from '../config'
+import { Actions as InterruptActions } from '../interrupt'
+
+const { createThunk } = createDomain('app')
+
+export const initialize = createThunk(
+  'initialize',
+  (config) =>
+    async (dispatch, getState, { api }) => {
+      try {
+        dispatch(ConfigActions.initialize(config))
+
+        const { accountConfig = {}, initialState = {} } = await api.getConfig()
+        const { features } = accountConfig || {}
+
+        dispatch({ type: seamlyActions.SET_FEATURES, features })
+
+        dispatch({ type: seamlyActions.SET_INITIAL_STATE, initialState })
+      } catch (error) {
+        dispatch(InterruptActions.set(error))
+      }
+    },
+)

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

@@ -0,0 +1,3 @@
+import * as Actions from './actions'
+
+export { Actions }

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

@@ -0,0 +1,6 @@
+import { createDomain } from '../../lib/redux-helpers'
+
+const { createAction } = createDomain('config')
+
+export const initialize = createAction('initialize', (config) => ({ config }))
+export const update = createAction('update', (config) => ({ config }))

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

@@ -0,0 +1,6 @@
+import { useSelector } from '../redux'
+import * as Selectors from './selectors'
+
+export function useConfig() {
+  return useSelector(Selectors.selectConfig)
+}

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

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

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

@@ -0,0 +1,26 @@
+import { initI18n } from '../i18n'
+import * as Actions from './actions'
+import { seamlyActions } from '../../ui/utils/seamly-utils'
+
+export default function createMiddleware() {
+  return ({ dispatch }) =>
+    (next) =>
+    (action) => {
+      const result = next(action)
+
+      switch (action.type) {
+        case String(Actions.initialize):
+        case String(Actions.update):
+          if (action?.config?.translations) {
+            dispatch(initI18n(action.config.translations))
+          }
+          if (action?.config?.defaults?.agentName) {
+            dispatch({
+              type: seamlyActions.SET_HEADER_SUB_TITLE,
+              title: action?.config?.defaults?.agentName,
+            })
+          }
+      }
+      return result
+    }
+}

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

@@ -0,0 +1,74 @@
+import { defaultConfig } from '../../config'
+import { createReducer } from '../../lib/redux-helpers'
+import * as Actions from './actions'
+import { pick } from '../../ui/utils/general-utils'
+
+const initialState = {
+  ...defaultConfig,
+  hideOnNoUserResponse: false,
+  showDisclaimer: false,
+  showFaq: false,
+  customComponents: {},
+  defaults: {},
+}
+
+const configKeys = [
+  'hideOnNoUserResponse',
+  'showDisclaimer',
+  'showFaq',
+  'namespace',
+  'customComponents',
+  'defaults',
+  'layoutMode',
+  'api',
+  'zIndex',
+  'context',
+  'appContainerClassNames',
+  'messages',
+  'typing',
+  'visible',
+  'visibilityCallback',
+]
+const updateState = (state, { config }) => {
+  const { messages, typing, ...partialConfig } = pick(config, configKeys)
+  let newState = state
+  if (Object.keys(partialConfig).length > 0) {
+    newState = {
+      ...newState,
+      ...partialConfig,
+    }
+  }
+  if (messages) {
+    newState = {
+      ...newState,
+      messages: {
+        ...newState.messages,
+        ...messages,
+      },
+    }
+  }
+
+  if (typing) {
+    newState = {
+      ...newState,
+      typing: {
+        ...newState.typing,
+        ...typing,
+      },
+    }
+  }
+  return newState
+}
+
+export default createReducer(
+  'config',
+  {
+    [Actions.initialize]: (state, action) => {
+      return updateState(state, action)
+    },
+    [Actions.update]: (state, action) => {
+      return updateState(state, action)
+    },
+  },
+  initialState,
+)

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

@@ -0,0 +1,23 @@
+import { createSelector } from 'reselect'
+import { visibilityStates } from '../../ui/utils/seamly-utils'
+import Reducer from './reducer'
+
+export const selectState = (state) => state[String(Reducer)]
+
+export const selectConfig = createSelector(selectState, (config) => {
+  let newConfig = {
+    visible:
+      config?.layoutMode === 'inline'
+        ? visibilityStates.open
+        : visibilityStates.minimized,
+    appContainerClassNames: config.appContainerClassNames || [],
+    ...config,
+  }
+  if (typeof newConfig.appContainerClassNames === 'function') {
+    newConfig = {
+      ...newConfig,
+      appContainerClassNames: newConfig.appContainerClassNames(newConfig),
+    }
+  }
+  return newConfig
+})

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

@@ -4,7 +4,7 @@ const { createActions } = createDomain('forms')
 
 export const [registerForm, deregisterForm] = createActions('form', {
   register: (formId, persistData) => ({ formId, persistData }),
-  deregister: formId => ({ formId }),
+  deregister: (formId) => ({ formId }),
 })
 
 export const [

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

@@ -29,10 +29,10 @@ export function useForm() {
 }
 
 export function useValidations(values, validationSchema) {
-  const errors = useMemo(() => validate(values, validationSchema), [
-    values,
-    validationSchema,
-  ])
+  const errors = useMemo(
+    () => validate(values, validationSchema),
+    [values, validationSchema],
+  )
   return {
     isValid: Object.keys(errors).length === 0,
     errors,
@@ -41,12 +41,8 @@ export function useValidations(values, validationSchema) {
 
 export function useFormControl(name) {
   const dispatch = useStoreDispatch()
-  const {
-    formId,
-    updateControlValue,
-    updateControlTouched,
-    errors,
-  } = useFormContext()
+  const { formId, updateControlValue, updateControlTouched, errors } =
+    useFormContext()
   const form = useSelectorWithProps(getFormById, { formId }, [formId])
   const isRegistered = !!form
   const isRegisteredRef = useRef()
@@ -77,10 +73,10 @@ export function useFormControl(name) {
   }, [isRegistered, formId, name, dispatch])
 
   // preact uses onInput instead of onChange
-  const onInput = useCallback(e => updateControlValue(name, e.target.value), [
-    name,
-    updateControlValue,
-  ])
+  const onInput = useCallback(
+    (e) => updateControlValue(name, e.target.value),
+    [name, updateControlValue],
+  )
 
   const onBlur = useCallback(() => {
     updateControlTouched(name, true)

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

@@ -25,10 +25,8 @@ export default function FormProvider({
   ])
   const [isSubmitted, setIsSubmitted] = useState(false)
   const [externalErrors, setExternalErrors] = useState({})
-  const {
-    isValid: validationIsValid,
-    errors: validationErrors,
-  } = useValidations(values, validationSchema)
+  const { isValid: validationIsValid, errors: validationErrors } =
+    useValidations(values, validationSchema)
   const errors = useMemo(
     () => ({
       ...validationErrors,
@@ -68,7 +66,7 @@ export default function FormProvider({
   // Function to manually set an error
   const setError = useCallback(
     (name, error) => {
-      setExternalErrors(val => {
+      setExternalErrors((val) => {
         return {
           ...val,
           [name]: error,
@@ -79,7 +77,7 @@ export default function FormProvider({
   )
 
   const handleSubmit = useCallback(
-    e => {
+    (e) => {
       e.preventDefault()
       setIsSubmitted(true)
       if (validationIsValid) {

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

@@ -2,7 +2,7 @@ import { createSelector } from 'reselect'
 import { getPropSelector } from '../redux/utils'
 import Reducer from './reducer'
 
-export const getState = state => state[String(Reducer)]
+export const getState = (state) => state[String(Reducer)]
 
 export const getFormById = createSelector(
   getState,
@@ -12,12 +12,12 @@ export const getFormById = createSelector(
 
 export const getFormControlsByFormId = createSelector(
   getFormById,
-  form => form?.controls || {},
+  (form) => form?.controls || {},
 )
 
 export const getFormValuesByFormId = createSelector(
   getFormControlsByFormId,
-  controls => {
+  (controls) => {
     const valuesObj = {}
     Object.entries(controls).forEach(([key, { value }]) => {
       valuesObj[key] = value

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

@@ -8,10 +8,14 @@ import en from '../../../../translations/en'
 // Actions
 const { createAction } = createDomain('i18n')
 
-export const initI18n = createAction('init', overrides => ({
+export const initI18n = createAction('init', (overrides) => ({
   overrides,
 }))
 
+export const Actions = {
+  initI18n,
+}
+
 // Reducer
 const defaultState = { translations: flattenObject(en), overrides: {} }
 export const Reducer = createReducer(
@@ -28,14 +32,14 @@ export const Reducer = createReducer(
 )
 
 // Selectors
-export const getState = state => state[String(Reducer)]
+export const getState = (state) => state[String(Reducer)]
 export const getTranslations = createSelector(
   getState,
-  state => state.translations,
+  (state) => state.translations,
 )
 export const getOverrides = createSelector(
   getState,
-  state => state.overrides || {},
+  (state) => state.overrides || {},
 )
 
 export const getCombinedTranslations = createSelector(
@@ -48,7 +52,7 @@ export const getCombinedTranslations = createSelector(
     }
 
     const defaultKeys = Object.keys(translations)
-    defaultKeys.forEach(key => {
+    defaultKeys.forEach((key) => {
       if (overrideKeys.indexOf(key) === -1) {
         console.error('Seamly: Missing translation key:', key)
       }

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

@@ -0,0 +1,6 @@
+import { createDomain } from '../../lib/redux-helpers'
+
+const { createAction } = createDomain('interrupt')
+
+export const set = createAction('set', (error) => ({ error }))
+export const clear = createAction('clear')

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

@@ -0,0 +1,29 @@
+import { useMemo } from 'preact/hooks'
+import { useI18n } from '../i18n'
+import { useSelector } from '../redux'
+import * as Selectors from './selectors'
+
+export function useInterrupt() {
+  const { t } = useI18n()
+
+  const error = useSelector(Selectors.selectError)
+  const hasInterrupt = Boolean(error)
+
+  const meta = useMemo(() => {
+    if (!error) return {}
+    const { langKey, action } = error
+    const title = t(`${langKey}.title`)
+    const message = t(`${langKey}.message`)
+    const srText = t(`${langKey}.srText`)
+    const buttonText = t(`${langKey}.buttonText`)
+
+    return {
+      ...(langKey ? { title, message, srText } : {}),
+      ...(action ? { action } : {}),
+      ...(action && langKey ? { buttonText } : {}),
+      originalError: error,
+    }
+  }, [t, error])
+
+  return { hasInterrupt, meta, error }
+}

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

@@ -0,0 +1,9 @@
+import * as Actions from './actions'
+import * as Selectors from './selectors'
+
+export * from './hooks'
+
+export { default as createMiddleware } from './middleware'
+export { default as Reducer } from './reducer'
+
+export { Actions, Selectors }

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

@@ -0,0 +1,30 @@
+import SeamlyGeneralError from '../../api/errors/seamly-general-error'
+import SeamlyConfigurationError from '../../api/errors/seamly-configuration-error'
+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'
+
+const handledErrorTypes = [
+  SeamlyGeneralError,
+  SeamlyConfigurationError,
+  SeamlySessionExpiredError,
+  SeamlyOfflineError,
+  SeamlyUnauthorizedError,
+]
+
+export default function createMiddleware() {
+  return () => (next) => (action) => {
+    if (action.type === String(Actions.set)) {
+      if (
+        !handledErrorTypes.some(
+          (ErrorType) => action.error instanceof ErrorType,
+        )
+      ) {
+        throw action.error
+      }
+    }
+
+    return next(action)
+  }
+}

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

@@ -0,0 +1,22 @@
+import { createReducer } from '../../lib/redux-helpers'
+import * as Actions from './actions'
+
+const initialState = {
+  error: undefined,
+}
+
+export default createReducer(
+  'interrupt',
+  {
+    [Actions.set]: (state, { error }) => {
+      return {
+        ...state,
+        error,
+      }
+    },
+    [Actions.clear]: () => {
+      return initialState
+    },
+  },
+  initialState,
+)

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

@@ -0,0 +1,5 @@
+import { createSelector } from 'reselect'
+import Reducer from './reducer'
+
+export const selectState = (state) => state[String(Reducer)]
+export const selectError = createSelector(selectState, ({ error }) => error)

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

@@ -0,0 +1 @@
+export { default as createMiddleware } from './middleware'

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

@@ -0,0 +1,35 @@
+import { featureKeys, seamlyActions } from '../../ui/utils/seamly-utils'
+import { Actions as InterruptActions } from '../interrupt'
+import SeamlyOfflineError from '../../api/errors/seamly-offline-error'
+
+export default function createMiddleware({ api }) {
+  return ({ dispatch }) =>
+    (next) =>
+    (action) => {
+      const result = next(action)
+
+      switch (action.type) {
+        // This is needed for backwards compatibility. If there's an error,
+        // Cobrowsing has to be disabled in order to not "re-start" into co-browsing
+        case String(InterruptActions.set):
+          if (!(action.error instanceof SeamlyOfflineError)) {
+            dispatch({
+              type: seamlyActions.SET_USER_SELECTED_OPTION,
+              option: featureKeys.cobrowsing,
+              value: false,
+            })
+          }
+          break
+        case seamlyActions.SET_USER_SELECTED_OPTIONS:
+          api.store.set('options', action.options)
+          break
+        case seamlyActions.SET_USER_SELECTED_OPTION:
+          api.store.set('options', {
+            ...(api.store.get('options') || {}),
+            [action.option]: action.value,
+          })
+          break
+      }
+      return result
+    }
+}