@seamly/web-ui 18.1.1 → 18.3.1

package/src/javascripts/domains/redux/create-redux-store.js

@@ -1,13 +1,21 @@
-import { combineReducers, createStore } from 'redux'
+import { combineReducers, createStore, applyMiddleware, compose } from 'redux'
 
-let enhancer
+let composeEnhancers = compose
 if (process.env.NODE_ENV === 'development') {
   /* eslint-disable no-underscore-dangle */
-  enhancer =
-    typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__?.()
+  composeEnhancers =
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || composeEnhancers
   /* eslint-enable no-underscore-dangle */
 }
 
-export default function createReduxStore(reducers = {}, initialState = {}) {
-  return createStore(combineReducers(reducers), initialState, enhancer)
+export default function createReduxStore({
+  reducers = {},
+  initialState = {},
+  middlewares = [],
+} = {}) {
+  return createStore(
+    combineReducers(reducers),
+    initialState,
+    composeEnhancers(applyMiddleware(...middlewares)),
+  )
 }

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

@@ -19,7 +19,7 @@ export function useStoreDispatch() {
 export function useSelector(selector, deps = []) {
   const store = useStoreContext()
   // we need a force-update because we're manually updating a ref instead of a useState
-  const [, forceUpdate] = useReducer(x => x + 1, 0)
+  const [, forceUpdate] = useReducer((x) => x + 1, 0)
   // we're keeping the value to compare against
   const valueRef = useRef()
 
@@ -74,6 +74,6 @@ export const useSelectorWithProps = function useSelectorWithProps(
   // equalityFn = arrayContentEquals,
 ) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const wrappedMapper = useCallback(state => selector(state, props), inputs)
+  const wrappedMapper = useCallback((state) => selector(state, props), inputs)
   return useSelector(wrappedMapper, inputs)
 }

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

@@ -1,4 +1,5 @@
-import StoreContext, { Provider as StoreProvider } from './context'
+import StoreContext from './context'
+import StoreProvider from './provider'
 import createReduxStore from './create-redux-store'
 import {
   useStoreContext,

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

@@ -0,0 +1,5 @@
+import { Provider } from './context'
+
+export default function StoreProvider({ store, children }) {
+  return <Provider value={store}>{children}</Provider>
+}

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

@@ -0,0 +1,38 @@
+import thunkMiddleware from 'redux-thunk'
+import { createReduxStore } from '../redux'
+import {
+  createMiddleware as createConfigMiddleware,
+  Reducer as configReducer,
+} from '../config'
+import { Reducer as formReducer } from '../forms'
+import { Reducer as translationsReducer } from '../translations'
+import { Reducer as i18nReducer } from '../i18n'
+import {
+  Reducer as interruptReducer,
+  createMiddleware as createInterruptMiddleware,
+} from '../interrupt'
+import { createMiddleware as createOptionsMiddleware } from '../options'
+import stateReducer from './state-reducer'
+
+export function createStore({ initialState, api } = {}) {
+  const store = createReduxStore({
+    reducers: {
+      state: stateReducer,
+      [String(configReducer)]: configReducer,
+      [String(formReducer)]: formReducer,
+      [String(translationsReducer)]: translationsReducer,
+      [String(i18nReducer)]: i18nReducer,
+      [String(interruptReducer)]: interruptReducer,
+    },
+    initialState,
+    middlewares: [
+      thunkMiddleware.withExtraArgument({
+        api,
+      }),
+      createConfigMiddleware(),
+      createInterruptMiddleware(),
+      createOptionsMiddleware({ api }),
+    ],
+  })
+  return store
+}

package/src/javascripts/{ui → domains}/store/state-reducer.js

@@ -1,13 +1,14 @@
+// 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 '../utils/seamly-utils'
+} from '../../ui/utils/seamly-utils'
 
 const initialState = {
   events: [],
-  config: { hideOnNoUserResponse: false },
   initialState: {},
   unreadEvents: 0,
   isLoading: false,
@@ -25,15 +26,11 @@ const initialState = {
     title: null,
     subTitle: '',
   },
-  interrupt: {
-    hasInterrupt: false,
-    meta: {},
-  },
   historyLoaded: false,
   skiplinkTargetId: randomId(),
   optionsButtonId: randomId(),
   cobrowsingContainerId: randomId(),
-  showDisclaimer: false,
+  headerCollapseButtonId: randomId(),
   serviceData: {},
   options: {
     features: {},

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

@@ -3,11 +3,11 @@ import { createDomain } from '../../lib/redux-helpers'
 const { createActions } = createDomain('translations')
 
 export const [enable, disable] = createActions('translate', {
-  enable: locale => ({ locale }),
+  enable: (locale) => ({ locale }),
   disable: () => ({}),
 })
 
 export const [enableEvent, disableEvent] = createActions('event', {
-  enable: payloadId => ({ payloadId }),
-  disable: payloadId => ({ payloadId }),
+  enable: (payloadId) => ({ payloadId }),
+  disable: (payloadId) => ({ payloadId }),
 })

package/src/javascripts/domains/translations/components/chat-status.js

@@ -1,27 +1,21 @@
 import { useCallback, useMemo } from 'preact/hooks'
 import ChatStatus from '../../../ui/components/chat-status'
 import { useI18n } from '../../i18n'
-import {
-  useSeamlyInterrupt,
-  useSkiplinkTargetFocusing,
-} from '../../../ui/hooks/seamly-hooks'
+import { useSkiplinkTargetFocusing } from '../../../ui/hooks/seamly-hooks'
 import { useTranslationsContainer, useTranslations } from '../hooks'
+import { useInterrupt } from '../../interrupt'
 
 export default function TranslationsChatStatus() {
   const { t } = useI18n()
   const { id } = useTranslationsContainer()
-  const { hasInterrupt } = useSeamlyInterrupt()
+  const { hasInterrupt } = useInterrupt()
 
-  const {
-    isActive,
-    disableTranslations,
-    languages,
-    currentLocale,
-  } = useTranslations()
+  const { isActive, disableTranslations, languages, currentLocale } =
+    useTranslations()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
 
   const languageName = useMemo(() => {
-    return languages?.find(lang => lang.locale === currentLocale)?.nativeName
+    return languages?.find((lang) => lang.locale === currentLocale)?.nativeName
   }, [languages, currentLocale])
 
   const handleClickStop = useCallback(() => {

package/src/javascripts/domains/translations/components/options-button.js

@@ -15,7 +15,7 @@ export default function TranslationsOptionButton() {
   const toggleButton = useRef(null)
   const toggleButtonId = useGeneratedId()
 
-  const onMainKeyDownHandler = e => {
+  const onMainKeyDownHandler = (e) => {
     if (!menuIsOpen) {
       return
     }
@@ -31,9 +31,9 @@ export default function TranslationsOptionButton() {
   }
 
   const handleToggleClick = () => {
-    setMenuIsOpen(o => !o)
+    setMenuIsOpen((o) => !o)
   }
-  const handleToggleKeyDown = e => {
+  const handleToggleKeyDown = (e) => {
     if (getKey(e) === keyNames.ArrowDown) {
       setMenuIsOpen(true)
       e.preventDefault()

package/src/javascripts/domains/translations/components/options-dialog/form.js

@@ -10,13 +10,13 @@ function TranslationsOptionsDialogForm({ controlName, descriptionId }) {
   const { isActive, languages, currentLocale } = useTranslations()
 
   const languageName = useMemo(() => {
-    return languages?.find(lang => lang.locale === currentLocale)?.nativeName
+    return languages?.find((lang) => lang.locale === currentLocale)?.nativeName
   }, [languages, currentLocale])
 
   const options = useMemo(() => {
     return [
       { value: '', label: t('translations.settings.defaultOptionLabel') },
-      ...languages.map(language => ({
+      ...languages.map((language) => ({
         value: language.locale,
         label: language.nativeName,
       })),

package/src/javascripts/domains/translations/components/options-dialog/index.js

@@ -14,11 +14,8 @@ export const inputName = 'locale'
 function TranslationsOptionsDialog({ onClose }) {
   const { t } = useI18n()
 
-  const {
-    isActive,
-    enableTranslations,
-    disableTranslations,
-  } = useTranslations()
+  const { isActive, enableTranslations, disableTranslations } =
+    useTranslations()
 
   const descriptionId = useGeneratedId()
   const { focusContainer } = useTranslationsContainer()

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

@@ -12,7 +12,7 @@ export function useTranslations() {
   const { sendAction } = useSeamlyCommands()
   const dispatch = useStoreDispatch()
   const enableTranslations = useStableCallback(
-    locale => {
+    (locale) => {
       sendAction({
         type: actionTypes.setTranslation,
         body: { enabled: true, locale },

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

@@ -42,7 +42,7 @@ export default createReducer(
         currentLocale: locale,
       }
     },
-    [Actions.disable]: state => {
+    [Actions.disable]: (state) => {
       return {
         ...state,
         isActive: false,
@@ -56,7 +56,7 @@ export default createReducer(
       return {
         ...state,
         originalPayloadIds: state.originalPayloadIds.filter(
-          id => id !== payloadId,
+          (id) => id !== payloadId,
         ),
       }
     },

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

@@ -2,11 +2,11 @@ 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 getOriginalPayloadIds = createSelector(
   getState,
-  state => state.originalPayloadIds,
+  (state) => state.originalPayloadIds,
 )
 
 export const getIsPayloadTranslated = createSelector(

package/src/javascripts/index.js

@@ -41,9 +41,6 @@ export { eventTypes } from './ui/utils/seamly-utils'
 // Used by: StyleGuide
 export { default as ExternalApi } from './lib/external-api'
 
-// Used by: StyleGuide
-export { getSeamlyConfig } from './ui/utils/seamly-utils'
-
 // Used by: StyleGuide
 export { getUrlParams } from './ui/utils/general-utils'
 
@@ -78,7 +75,7 @@ export { SeamlyEventBusContext } from './ui/components/core/seamly-api-context'
 export { SeamlyLiveRegionContext } from './ui/components/core/seamly-live-region-context'
 
 // Used by: StyleGuide
-export { default as StoreProvider } from './ui/store'
+export { StoreProvider } from './domains/redux'
 
 // Used by: Client
 export { useChoicePrompt } from './ui/components/conversation/event/choice-prompt'
@@ -93,7 +90,7 @@ export { useSeamlyChat } from './ui/hooks/seamly-hooks'
 export { useSeamlyCommands } from './ui/hooks/seamly-hooks'
 
 // Used by: Client
-export { useSeamlyConfig } from './ui/hooks/seamly-hooks'
+export { useConfig as useSeamlyConfig } from './domains/config'
 
 // Used by: Client
 export { useEvents } from './ui/hooks/seamly-hooks'
@@ -139,3 +136,18 @@ export { default as View } from './ui/components/layout/view'
 // Used by: Client
 // Used by: StyleGuide
 export { visibilityStates } from './ui/utils/seamly-utils'
+
+// Used by: StyleGuide
+export { default as SeamlyGeneralError } from './api/errors/seamly-general-error'
+
+// Used by: StyleGuide
+export { default as SeamlyConfigurationError } from './api/errors/seamly-configuration-error'
+
+// Used by: StyleGuide
+export { default as SeamlySessionExpiredError } from './api/errors/seamly-session-expired-error'
+
+// Used by: StyleGuide
+export { default as SeamlyOfflineError } from './api/errors/seamly-offline-error'
+
+// Used by: StyleGuide
+export { default as SeamlyUnauthorizedError } from './api/errors/seamly-unauthorized-error'

package/src/javascripts/lib/css.js

@@ -10,7 +10,7 @@ import { CSS_NAME } from '../config'
 export const className = (...classes) =>
   classes
     .flat()
-    .map(c => {
+    .map((c) => {
       if (typeof c === 'object') {
         return Object.entries(c)
           .map(([key, value]) => (value ? key : ''))
@@ -18,9 +18,9 @@ export const className = (...classes) =>
       }
       return c
     })
-    .filter(c => typeof c === 'string')
-    .map(c => c.split(' '))
+    .filter((c) => typeof c === 'string')
+    .map((c) => c.split(' '))
     .flat()
-    .filter(c => c.length)
-    .map(c => [CSS_NAME, c].join('-'))
+    .filter((c) => c.length)
+    .map((c) => [CSS_NAME, c].join('-'))
     .join(' ')

package/src/javascripts/lib/engine/index.js

@@ -1,18 +1,28 @@
 import { render, h } from 'preact'
 import Events from 'minivents'
-
 import ChatApp from '../../ui/components/chat-app'
 import SeamlyCore from '../../ui/components/core/seamly-core'
+import { API } from '../../api'
+import { createStore } from '../../domains/store'
+import { Actions as AppActions } from '../../domains/app'
 
 export default class Engine {
   constructor(config, externalApi) {
-    const { customComponents, parentElement, showFaq, ...restConfig } = config
-    this.config = { ...restConfig, showFaq: showFaq !== false }
-    this.namespace = config.namespace || ''
+    const { namespace = '', parentElement, showFaq, ...restConfig } = config
+    this.config = {
+      ...restConfig,
+      showFaq: showFaq !== false,
+      namespace,
+    }
+    this.namespace = namespace
     this.parentElement = parentElement
-    this.customComponents = customComponents
     this.externalApi = externalApi
 
+    this.api = new API({
+      namespace: config.namespace,
+      config: config.api,
+    })
+
     this.eventBus = new Events()
     this.functions = {}
     this.registerFunctions({
@@ -28,8 +38,8 @@ export default class Engine {
     )
   }
 
-  render() {
-    const { view: View, ...restComponents } = this.customComponents || {}
+  async render() {
+    const { view: View, ...restComponents } = this.config.customComponents || {}
 
     const renderConfig = {
       ...this.config,
@@ -38,16 +48,32 @@ export default class Engine {
         : undefined,
     }
 
+    const store = createStore({
+      api: this.api,
+    })
+
+    await store.dispatch(AppActions.initialize(renderConfig))
+
     if (View) {
       render(
-        <SeamlyCore config={renderConfig} eventBus={this.eventBus}>
+        <SeamlyCore
+          config={renderConfig}
+          eventBus={this.eventBus}
+          store={store}
+          api={this.api}
+        >
           <View />
         </SeamlyCore>,
         this.parentElement,
       )
     } else {
       render(
-        <ChatApp config={renderConfig} eventBus={this.eventBus} />,
+        <ChatApp
+          config={renderConfig}
+          eventBus={this.eventBus}
+          store={store}
+          api={this.api}
+        />,
         this.parentElement,
       )
     }
@@ -56,6 +82,7 @@ export default class Engine {
   destroy() {
     render(null, this.parentElement)
     this.eventBus.off()
+    this.api.disconnect()
     delete this.functions
   }
 
@@ -74,7 +101,7 @@ export default class Engine {
   unregisterFunction(functionName, fn) {
     const functions = this.functions[functionName]
     if (functions && functions.length) {
-      this.functions[functionName] = functions.filter(fn2 => fn2 !== fn)
+      this.functions[functionName] = functions.filter((fn2) => fn2 !== fn)
     }
   }
 
@@ -83,7 +110,7 @@ export default class Engine {
     if (!functions || !functions.length) {
       return false
     }
-    functions.forEach(fn => {
+    functions.forEach((fn) => {
       try {
         fn(...args)
       } catch (e) {

package/src/javascripts/lib/external-api/index.js

@@ -1,8 +1,8 @@
 import Engine from '../engine'
 
-const isActionObject = actionObj =>
+const isActionObject = (actionObj) =>
   typeof actionObj === 'object' && 'action' in actionObj
-const fixActionObjectArgs = actionObj => ({
+const fixActionObjectArgs = (actionObj) => ({
   ...actionObj,
   args: Array.isArray(actionObj.args) ? actionObj.args : [actionObj.args],
 })
@@ -29,7 +29,7 @@ class ExternalApi {
   handleActions() {
     const actions = this._waitingActions
     this._waitingActions = []
-    actions.forEach(actionObj => {
+    actions.forEach((actionObj) => {
       switch (actionObj.action) {
         case 'init':
           this.handleInit(actionObj)
@@ -55,7 +55,7 @@ class ExternalApi {
       return
     }
     const { parentElement, namespace } = config
-    Object.values(this._instances).forEach(instance => {
+    Object.values(this._instances).forEach((instance) => {
       if (
         instance.parentElement === parentElement ||
         instance.namespace === namespace
@@ -72,7 +72,7 @@ class ExternalApi {
     if (actionObj.instance !== undefined) {
       this.destroy(actionObj.instance)
     } else {
-      Object.values(this._instances).forEach(instance => {
+      Object.values(this._instances).forEach((instance) => {
         this.destroy(instance)
       })
     }
@@ -90,7 +90,7 @@ class ExternalApi {
 
     // results will be an array containing the results of wether an instance has
     // handled the action or not
-    const results = instances.map(instance => {
+    const results = instances.map((instance) => {
       return !namespace || instance.namespace === namespace
         ? instance.execFunction(action, ...args)
         : false

package/src/javascripts/lib/i18n.js

@@ -1,12 +1,12 @@
 import deepKeys from 'deep-keys'
 import en from '@seamly/web-ui/translations/en'
 
-export const translate = translations => {
+export const translate = (translations) => {
   let translationSet
   if (translations) {
     const standardKeys = deepKeys(en)
     const customKeys = deepKeys(translations)
-    standardKeys.forEach(key => {
+    standardKeys.forEach((key) => {
       if (customKeys.indexOf(key) === -1) {
         console.error('Seamly: Missing translation key:', key)
       }

package/src/javascripts/lib/parse-body.js

@@ -1,6 +1,6 @@
 import marked from 'marked'
 
-export default body => {
+export default (body) => {
   try {
     return marked(body)
   } catch (e) {

package/src/javascripts/lib/redux-helpers/index.js

@@ -5,7 +5,10 @@ export function prefixType(prefix, fn, delimiter = '/') {
   return (type, ...args) => fn(prefix + delimiter + type, ...args)
 }
 
-export function createAction(type, identityReducer = payload => ({ payload })) {
+export function createAction(
+  type,
+  identityReducer = (payload) => ({ payload }),
+) {
   const action = (...params) => ({ type, ...identityReducer(...params) })
   action.toString = () => type.toString()
   return action
@@ -14,7 +17,7 @@ export function createAction(type, identityReducer = payload => ({ payload })) {
 export function createActions(baseType, ...args) {
   const handlers = []
   // eslint-disable-next-line consistent-return
-  args.forEach(arg => {
+  args.forEach((arg) => {
     const argType = typeof arg
     if (argType === 'string') {
       return handlers.push([arg])
@@ -22,17 +25,28 @@ export function createActions(baseType, ...args) {
     if (argType !== 'object' || arg instanceof Array) {
       return undefined
     }
-    Object.keys(arg).forEach(key => handlers.push([key, arg[key]]))
+    Object.keys(arg).forEach((key) => handlers.push([key, arg[key]]))
   })
   const create = prefixType(baseType, createAction, SLICE_DELIMITER)
 
-  return handlers.map(handler => create(...handler))
+  return handlers.map((handler) => create(...handler))
+}
+
+export function createThunk(type, thunkCreator) {
+  const fn = (...args) => {
+    const thunk = thunkCreator(...args)
+    thunk.type = type
+    return thunk
+  }
+  fn.toString = () => type
+  return fn
 }
 
 export function createDomain(domain) {
   return {
     createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),
     createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),
+    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),
   }
 }
 

package/src/javascripts/lib/split-url-params.js

@@ -1,4 +1,4 @@
-const splitUrlParams = url => {
+const splitUrlParams = (url) => {
   const searchIndex = url.indexOf('?')
 
   if (searchIndex < 0) {
@@ -9,7 +9,7 @@ const splitUrlParams = url => {
   const params = url
     .slice(searchIndex + 1)
     .split('&')
-    .reduce(function(acc, hash) {
+    .reduce(function (acc, hash) {
       const [key, val] = hash.split('=')
       return {
         ...acc,

package/src/javascripts/lib/store/providers/app-storage.js

@@ -16,7 +16,7 @@ export default function appStore() {
       }
       return window.seamlyBridgeData
     },
-    set: newData => {
+    set: (newData) => {
       // iOS
       if (
         window.webkit &&

package/src/javascripts/lib/store/providers/cookie-storage.js

@@ -1,7 +1,7 @@
 import cookies from 'js-cookie'
 
 export default function cookieStore(attributes = {}) {
-  return function(key) {
+  return function (key) {
     const KEY = 'cvco.' + key
 
     return {

package/src/javascripts/package/utils.js

@@ -4,7 +4,6 @@ export {
   Engine,
   eventTypes,
   ExternalApi,
-  getSeamlyConfig,
   getUrlParams,
   getUrlSearchString,
   randomId,