@seamly/web-ui 18.2.0 → 19.0.0-beta.1

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

@@ -1,18 +1,29 @@
 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,
+      locale: config?.context?.locale,
+    })
+
     this.eventBus = new Events()
     this.functions = {}
     this.registerFunctions({
@@ -28,8 +39,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 +49,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 +83,7 @@ export default class Engine {
   destroy() {
     render(null, this.parentElement)
     this.eventBus.off()
+    this.api.disconnect()
     delete this.functions
   }
 
@@ -74,7 +102,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 +111,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/mutex.js

@@ -0,0 +1,30 @@
+export default function createMutex() {
+  let isRunning = false
+  const tasks = []
+
+  const next = async () => {
+    if (!isRunning) {
+      while (tasks.length) {
+        const task = tasks.shift()
+        isRunning = true
+        // eslint-disable-next-line no-await-in-loop
+        await task().catch(() => {})
+        isRunning = false
+      }
+    }
+  }
+  const runExclusively = async (task) => {
+    const prms = new Promise((resolve, reject) => {
+      tasks.push(async () => {
+        try {
+          resolve(await task())
+        } catch (e) {
+          reject(e)
+        }
+      })
+    })
+    next()
+    return prms
+  }
+  return { next, runExclusively }
+}

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,18 +25,21 @@ 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 createDomain(domain) {
-  return {
-    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),
-    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),
+export function createThunk(type, thunkCreator) {
+  const fn = (...args) => {
+    const thunk = thunkCreator(...args)
+    thunk.type = type
+    return thunk
   }
+  fn.toString = () => type
+  return fn
 }
 
 export function createReducer(domain, handlers = {}, defaultState) {
@@ -48,3 +54,14 @@ export function createReducer(domain, handlers = {}, defaultState) {
   reducer.toString = () => domain
   return reducer
 }
+
+export function createDomain(domain) {
+  return {
+    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),
+    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),
+    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),
+    createReducer: (handlers, defaultState) =>
+      createReducer(domain, handlers, defaultState),
+    selectState: (state) => state[domain],
+  }
+}

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,

package/src/javascripts/style-guide/components/app.js

@@ -1,15 +1,15 @@
 import { useCallback, useEffect, useState } from 'preact/hooks'
-import {
-  getSeamlyConfig,
-  getUrlParams,
-  getUrlSearchString,
-  randomId,
-} from '@seamly/web-ui'
+import { getUrlParams, getUrlSearchString, randomId } from '@seamly/web-ui'
 import StyleGuideView from './view'
 import StyleGuideLinks from './links'
 import { getStateObj } from '../states'
 
-const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
+const StyleGuideApp = ({
+  config,
+  styleGuideConfig,
+  translations,
+  headingLevel = 2,
+}) => {
   const [staticState, setStaticState] = useState(null)
   const [selectedStateDescription, setSelectedStateDescription] = useState('')
   const [showStyleGuide, setShowStyleGuide] = useState(true)
@@ -34,7 +34,7 @@ const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
   })
 
   const updateState = useCallback(
-    state => {
+    (state) => {
       if (stateUpdateCallback) {
         setStaticState(stateUpdateCallback(state))
       } else {
@@ -46,7 +46,7 @@ const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
 
   const getState = useCallback(
     (layoutMode, feature) => {
-      const { showDisclaimer, defaults } = config
+      const { defaults } = config
       const { headingText } = mainState[feature]
       setSelectedStateDescription(headingText)
       const bareState = mainState[feature][layoutMode]
@@ -57,13 +57,11 @@ const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
         ...bareState,
         config: {
           ...bareState.config,
-          ...getSeamlyConfig(config),
+          ...config,
           layoutMode: bareState.config.layoutMode,
           ...(overrideMessages ? { messages: overrideMessages } : {}),
           showFaq,
         },
-        showDisclaimer:
-          showDisclaimer != null ? showDisclaimer : bareState.showDisclaimer,
         headerTitles: {
           ...bareState.headerTitles,
           subTitle: agentName || bareState.headerTitles.subTitle,
@@ -82,7 +80,7 @@ const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
       const overlay = document.querySelector('[aria-modal="true"]')
       if (overlay) {
         overlay.addEventListener('click', () => {
-          setStaticState(s => ({
+          setStaticState((s) => ({
             ...s,
             visible: 'minimized',
           }))
@@ -145,7 +143,7 @@ const StyleGuideApp = ({ config, styleGuideConfig, headingLevel = 2 }) => {
           {showStyleGuide && (
             <StyleGuideView
               customComponents={styleGuideConfig.customComponents}
-              translations={config.translations}
+              translations={translations}
               state={staticState}
             />
           )}

package/src/javascripts/style-guide/components/links.js

@@ -4,7 +4,7 @@ import { categories } from '../states'
 const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
   const CategoryHeading = `h${headingLevel.toString()}`
   const FeatureHeading = `h${(parseInt(headingLevel, 10) + 1).toString()}`
-  const onClickHandler = actionObj => {
+  const onClickHandler = (actionObj) => {
     window.history.pushState(
       null,
       null,
@@ -18,9 +18,9 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
   return (
     <nav aria-label="Style guide navigation" className="nav--styleguide">
       <ol className="list--styleguidestates">
-        {Object.keys(categories).map(category => {
+        {Object.keys(categories).map((category) => {
           const { heading, description } = categories[category]
-          const features = Object.keys(states).filter(feature => {
+          const features = Object.keys(states).filter((feature) => {
             const { category: featureCategory } = states[feature]
             return featureCategory === category
           })
@@ -30,7 +30,7 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                 <CategoryHeading>{heading}</CategoryHeading>
                 <span className="category__description">{description}</span>
                 <ol>
-                  {features.map(feature => {
+                  {features.map((feature) => {
                     const featureState = { ...states[feature] }
                     delete featureState.category
                     const {
@@ -50,7 +50,7 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                           </span>
                         )}
                         <ul className="list--styleguidelayouts">
-                          {Object.keys(rest).map(layoutMode => (
+                          {Object.keys(rest).map((layoutMode) => (
                             <li
                               key={layoutMode}
                               className={
@@ -74,7 +74,7 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                                     ? 'page'
                                     : null
                                 }
-                                onClick={e => {
+                                onClick={(e) => {
                                   e.preventDefault()
                                   if (layoutMode === 'inline') {
                                     setTimeout(() => {

package/src/javascripts/style-guide/components/static-core.js

@@ -6,10 +6,19 @@ import {
   StoreProvider,
   createReduxStore,
 } from '@seamly/web-ui'
-import stateReducer from '../../ui/store/state-reducer'
+import stateReducer from '../../domains/store/state-reducer'
 import { Reducer as formReducer } from '../../domains/forms'
 import { Reducer as translationsReducer } from '../../domains/translations'
-import { Reducer as i18nReducer } from '../../domains/i18n'
+import {
+  Reducer as i18nReducer,
+  Actions as I18nActions,
+} from '../../domains/i18n'
+import { Reducer as interruptReducer } from '../../domains/interrupt'
+import { Reducer as appReducer } from '../../domains/app'
+import {
+  Reducer as configReducer,
+  Actions as ConfigActions,
+} from '../../domains/config'
 
 const bareApi = {
   send: () => {},
@@ -19,24 +28,37 @@ const bareApi = {
   store: { get: () => {}, set: () => {} },
 }
 
-const SeamlyTestCore = ({ state, children }) => {
+const SeamlyTestCore = ({ state, translations, children }) => {
   const liveMsgRef = useRef(() => {})
   const eventBusRef = useRef({ emit: () => {} })
+
   const store = useMemo(() => {
-    const { translations: translationsSlice, ...restState } = state || {}
-    return createReduxStore(
-      {
+    const {
+      translations: translationsSlice,
+      interrupt: interruptSlice,
+      config: configSlice,
+      ...restState
+    } = state || {}
+    const newStore = createReduxStore({
+      reducers: {
         state: stateReducer,
+        [String(appReducer)]: appReducer,
+        [String(configReducer)]: configReducer,
         [String(formReducer)]: formReducer,
         [String(translationsReducer)]: translationsReducer,
         [String(i18nReducer)]: i18nReducer,
+        [String(interruptReducer)]: interruptReducer,
       },
-      {
+      initialState: {
         state: restState,
-        translations: translationsSlice,
+        [String(translationsReducer)]: translationsSlice,
+        [String(interruptReducer)]: interruptSlice,
       },
-    )
-  }, [state])
+    })
+    newStore.dispatch(ConfigActions.initialize(configSlice || {}))
+    newStore.dispatch(I18nActions.setLocaleResolve('en-GB', translations))
+    return newStore
+  }, [state, translations])
 
   return (
     state && (

package/src/javascripts/style-guide/state-helpers/index.js

@@ -42,7 +42,7 @@ export function addTranslationData(event) {
                 ? 'NL - ' + event.payload.body.buttonText
                 : undefined,
               choices: event.payload.body.choices
-                ? event.payload.body.choices.map(choice => ({
+                ? event.payload.body.choices.map((choice) => ({
                     ...choice,
                     text: 'NL - ' + choice.text,
                   }))