@seamly/web-ui 19.1.1 → 20.0.0-beta.1

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

@@ -1,6 +1,6 @@
 import { createReducer } from './utils'
 import * as Actions from './actions'
-import { Actions as AppActions } from '../app'
+import * as AppActions from '../app/actions'
 
 const initialState = {
   error: undefined,
@@ -16,7 +16,7 @@ export default createReducer(
     [Actions.set]: handleError,
     [AppActions.initialize.rejected]: handleError,
     [Actions.clear]: () => initialState,
-    [AppActions.reset]: () => initialState,
+    [AppActions.initialize.pending]: () => initialState,
   },
   initialState,
 )

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

@@ -1,35 +1,19 @@
-import { featureKeys, seamlyActions } from '../../ui/utils/seamly-utils'
-import { Actions as InterruptActions } from '../interrupt'
-import SeamlyOfflineError from '../../api/errors/seamly-offline-error'
+import { seamlyActions } from '../../ui/utils/seamly-utils'
 
 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
+  return () => (next) => (action) => {
+    const result = next(action)
+    switch (action.type) {
+      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
+  }
 }

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

@@ -20,7 +20,7 @@ import { createMiddleware as createOptionsMiddleware } from '../options'
 import { createMiddleware as createErrorsMiddleware } from '../errors'
 import stateReducer from './state-reducer'
 
-export function createStore({ initialState, api, eventBus } = {}) {
+export function createStore({ initialState, api, eventBus, config } = {}) {
   const store = createReduxStore({
     reducers: {
       state: stateReducer,
@@ -38,6 +38,7 @@ export function createStore({ initialState, api, eventBus } = {}) {
       thunkMiddleware.withExtraArgument({
         api,
         eventBus,
+        config,
       }),
       createConfigMiddleware(),
       createInterruptMiddleware({ api }),

package/src/javascripts/domains/store/state-reducer.js

@@ -2,7 +2,7 @@
 
 import { randomId } from '../../lib/id'
 import { entryTypes, seamlyStateReducer } from '../../ui/utils/seamly-utils'
-import { Actions as AppActions } from '../app'
+import * as AppActions from '../app/actions'
 
 const initialState = {
   events: [],
@@ -25,7 +25,6 @@ const initialState = {
   historyLoaded: false,
   skiplinkTargetId: randomId(),
   optionsButtonId: randomId(),
-  cobrowsingContainerId: randomId(),
   headerCollapseButtonId: randomId(),
   serviceData: {},
   options: {
@@ -48,12 +47,8 @@ const initialState = {
 }
 
 export default function stateReducer(state = initialState, action) {
-  if (action.type === String(AppActions.reset)) {
-    const { visible } = state
-    return {
-      ...initialState,
-      visible,
-    }
+  if (action.type === String(AppActions.initialize.pending)) {
+    return initialState
   }
 
   return seamlyStateReducer(state, action)

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

@@ -29,7 +29,7 @@ function TranslationsOptionsDialogForm({ controlName, descriptionId }) {
   }, [t, languages, uiLocale])
 
   return (
-    <Form noValidate="true">
+    <Form noValidate="true" className={className('options__form')}>
       <p className={className('options__description')} id={descriptionId}>
         {t('translations.settings.description')}
       </p>

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

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'preact/hooks'
+import { useCallback, useMemo, useRef, useState } from 'preact/hooks'
 import OptionsFrame from '../../../../ui/components/options/options-frame'
 import { FormProvider } from '../../../forms'
 import TranslationsOptionsDialogForm from './form'
@@ -12,6 +12,7 @@ export const formName = 'translation-settings'
 export const inputName = 'locale'
 
 function TranslationsOptionsDialog({ onClose }) {
+  const [errorClass, setErrorClass] = useState(undefined)
   const { t } = useI18n()
 
   const { isActive, enableTranslations, disableTranslations } =
@@ -30,6 +31,17 @@ function TranslationsOptionsDialog({ onClose }) {
     }
   }
 
+  const handleError = useCallback(
+    ({ isValid, isSubmitted }) => {
+      if (isSubmitted && !isValid) {
+        setErrorClass('options--error')
+      } else {
+        setErrorClass(undefined)
+      }
+    },
+    [setErrorClass],
+  )
+
   // we need a key to fully reset the form when we enable/disable translations
   const formKeyRef = useRef(0)
   const validationSchema = useMemo(() => {
@@ -45,6 +57,7 @@ function TranslationsOptionsDialog({ onClose }) {
 
   return (
     <OptionsFrame
+      className={errorClass}
       onCancel={onClose}
       formName={formName}
       headingText={t('translations.settings.title')}
@@ -57,6 +70,7 @@ function TranslationsOptionsDialog({ onClose }) {
         formId={formName}
         validationSchema={validationSchema}
         key={formKeyRef.current}
+        onError={handleError}
       >
         <TranslationsOptionsDialogForm
           controlName={inputName}

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

@@ -2,6 +2,7 @@ import { createReducer } from './utils'
 import { seamlyActions } from '../../ui/utils/seamly-utils'
 import { randomId } from '../../lib/id'
 import * as Actions from './actions'
+import * as AppActions from '../app/actions'
 
 const initialState = {
   isActive: false,
@@ -62,6 +63,7 @@ export default createReducer(
         originalPayloadIds: [...state.originalPayloadIds, payloadId],
       }
     },
+    [AppActions.initialize.pending]: () => initialState,
   },
   initialState,
 )

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

@@ -1,4 +1,4 @@
-import { Selectors as ConfigSelectors } from '../config'
+import * as ConfigSelectors from '../config/selectors'
 import * as AppSelectors from '../app/selectors'
 
 import { visibilityStates, StoreKey } from './constants'

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

@@ -1,5 +1,4 @@
 import { useCallback } from 'preact/hooks'
-import { useConfig } from '../config'
 import { useSelector, useStoreDispatch } from '../redux'
 import * as Actions from './actions'
 import * as Selectors from './selectors'
@@ -9,16 +8,19 @@ export const useVisibility = () => {
   const dispatch = useStoreDispatch()
   const visible = useSelector(Selectors.selectVisibility)
   const isVisible = visible ? visible !== visibilityStates.hidden : false
-  const { layoutMode } = useConfig()
-  const isOpen =
-    visible && layoutMode
-      ? visible === visibilityStates.open ||
-        (layoutMode === 'inline' && visible !== visibilityStates.hidden)
-      : false
+  const isOpen = visible === visibilityStates.open
+  const isMinimized = visible === visibilityStates.minimized
+
   const setVisibility = useCallback(
     (visibility) => dispatch(Actions.setVisibility(visibility)),
     [dispatch],
   )
 
-  return { isVisible, isOpen, visible, setVisibility }
+  return {
+    isVisible,
+    isOpen,
+    isMinimized,
+    visible,
+    setVisibility,
+  }
 }

package/src/javascripts/domains/visibility/utils.js

@@ -30,8 +30,7 @@ export const calculateVisibility = ({
       : visibilityStates.hidden
   }
 
-  const baseVisibility =
-    layoutMode === 'inline' ? visibilityStates.open : visibilityStates.minimized
+  const baseVisibility = visibilityStates.minimized
 
   return (
     requestedVisibility ||

package/src/javascripts/index.js

@@ -127,11 +127,13 @@ export {
 export { default as Text } from './ui/components/conversation/event/text'
 
 // Used by: Client
-export { default as ToggleButton } from './ui/components/entry/toggle-button'
+export { default as DeprecatedToggleButton } from './ui/components/entry/toggle-button'
 
-// Used by: Client
 // Used by: StyleGuide
-export { default as View } from './ui/components/layout/view'
+export { default as View } from './ui/components/view'
+
+// Used by: Client
+export { default as DeprecatedView } from './ui/components/view/deprecated-view'
 
 // Used by: Client
 // Used by: StyleGuide

package/src/javascripts/lib/css.js

@@ -22,5 +22,11 @@ export const className = (...classes) =>
     .map((c) => c.split(' '))
     .flat()
     .filter((c) => c.length)
-    .map((c) => [CSS_NAME, c].join('-'))
+    .map((c) => {
+      // This rule makes sure the CSS_NAME is not added yet
+      if (c.indexOf(CSS_NAME) > -1) {
+        return c
+      }
+      return [CSS_NAME, c].join('-')
+    })
     .join(' ')

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

@@ -4,7 +4,7 @@ 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'
+import * as AppActions from '../../domains/app/actions'
 
 export default class Engine {
   constructor(config, externalApi) {
@@ -21,7 +21,7 @@ export default class Engine {
     this.api = new API({
       namespace: config.namespace,
       config: config.api,
-      locale: config?.context?.locale,
+      context: config.context,
     })
 
     this.eventBus = new Events()
@@ -52,9 +52,10 @@ export default class Engine {
     const store = createStore({
       api: this.api,
       eventBus: this.eventBus,
+      config: renderConfig,
     })
 
-    await store.dispatch(AppActions.initialize(renderConfig))
+    await store.dispatch(AppActions.initialize())
 
     if (View) {
       render(

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

@@ -50,32 +50,29 @@ class ExternalApi {
     const userConfig = this.getUserConfig(...actionObj.args)
     const config = this.getCombinedConfig(userConfig)
     // if this.appConfig is a function, it might return an invalid configuration (false, null, undefined)
-    if (!config) {
-      this.destroy(userConfig.namespace)
-      return
-    }
-    const { parentElement, namespace } = config
-    Object.values(this._instances).forEach((instance) => {
-      if (
-        instance.parentElement === parentElement ||
-        instance.namespace === namespace
-      ) {
-        this.destroy(instance)
-      }
-    })
-    const instance = this.createInstance(config)
-    this._instances[config.namespace] = instance
-    instance.render()
-  }
-
-  handleDestroy(actionObj) {
-    if (actionObj.instance !== undefined) {
-      this.destroy(actionObj.instance)
+    const { parentElement, namespace } = config || userConfig
+    if (!namespace) {
+      this.destroy()
     } else {
       Object.values(this._instances).forEach((instance) => {
-        this.destroy(instance)
+        if (
+          instance.parentElement === parentElement ||
+          instance.namespace === namespace
+        ) {
+          this.destroy(instance)
+        }
       })
     }
+
+    if (config) {
+      const instance = this.createInstance(config)
+      this._instances[config.namespace] = instance
+      instance.render()
+    }
+  }
+
+  handleDestroy(actionObj) {
+    this.destroy(actionObj.instance)
   }
 
   handleAction(actionObj) {
@@ -105,13 +102,20 @@ class ExternalApi {
   }
 
   destroy(instance) {
-    if (typeof instance === 'string') {
-      // eslint-disable-next-line no-param-reassign
-      instance = this._instances[instance]
-    }
-    if (instance) {
-      instance.destroy()
-      delete this._instances[instance.namespace]
+    if (!instance) {
+      Object.entries(this._instances).forEach(([namespace, _instance]) => {
+        _instance.destroy()
+        delete this._instances[namespace]
+      })
+    } else {
+      if (typeof instance === 'string') {
+        // eslint-disable-next-line no-param-reassign
+        instance = this._instances[instance]
+      }
+      if (instance) {
+        instance.destroy()
+        delete this._instances[instance.namespace]
+      }
     }
   }
 
@@ -124,6 +128,10 @@ class ExternalApi {
     if (typeof this.appConfig === 'function') {
       return this.appConfig(userConfig)
     }
+    const defaults = {
+      ...this.appConfig.defaults,
+      ...userConfig.defaults,
+    }
     return {
       ...this.appConfig,
       ...userConfig,
@@ -131,6 +139,7 @@ class ExternalApi {
         ...this.appConfig.api,
         ...userConfig.api,
       },
+      defaults: Object.keys(defaults).length ? defaults : undefined,
     }
   }
 }

package/src/javascripts/package/components.js

@@ -9,6 +9,7 @@ export {
   Icon,
   MessageContainer,
   Text,
-  ToggleButton,
+  DeprecatedToggleButton,
+  DeprecatedView,
   View,
 } from '@seamly/web-ui'

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

@@ -18,7 +18,7 @@ const StyleGuideApp = ({
 
   const [mainState] = useState(() => {
     const mainStateObj = getStateObj(
-      styleGuideConfig.showLayoutModes || ['inline', 'window', 'modal'],
+      styleGuideConfig.showLayoutModes || ['inline', 'window'],
       customMessageEventBodies,
     )
     return Object.keys(mainStateObj).reduce(

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

@@ -1,4 +1,6 @@
 import { useMemo, useRef } from 'preact/hooks'
+import thunkMiddleware from 'redux-thunk'
+
 import {
   SeamlyEventBusContext,
   SeamlyApiContext,
@@ -6,7 +8,6 @@ import {
   StoreProvider,
   createReduxStore,
 } from '@seamly/web-ui'
-
 import stateReducer from '../../domains/store/state-reducer'
 import { Reducer as formReducer } from '../../domains/forms'
 import { Reducer as translationsReducer } from '../../domains/translations'
@@ -21,6 +22,7 @@ import {
   Actions as ConfigActions,
 } from '../../domains/config'
 import { Reducer as visibilityReducer } from '../../domains/visibility'
+import ComponentFilter from '../../ui/components/conversation/component-filter'
 
 const bareApi = {
   send: () => {},
@@ -28,6 +30,7 @@ const bareApi = {
     return Promise.resolve({})
   },
   store: { get: () => {}, set: () => {} },
+  hasConversation: () => false,
 }
 
 const SeamlyTestCore = ({ state, translations, children }) => {
@@ -38,7 +41,7 @@ const SeamlyTestCore = ({ state, translations, children }) => {
     const {
       translations: translationsSlice,
       interrupt: interruptSlice,
-      config: configSlice,
+      config: configSlice = {},
       visibility: visibilitySlice,
       ...restState
     } = state || {}
@@ -59,8 +62,19 @@ const SeamlyTestCore = ({ state, translations, children }) => {
         [String(interruptReducer)]: interruptSlice,
         [String(visibilityReducer)]: visibilitySlice,
       },
+      middlewares: [
+        thunkMiddleware.withExtraArgument({
+          api: bareApi,
+          eventBus: eventBusRef.current,
+        }),
+      ],
     })
-    newStore.dispatch(ConfigActions.initialize(configSlice || {}))
+    newStore.dispatch(ConfigActions.initialize(configSlice))
+    if (configSlice.preChatEvents) {
+      newStore.dispatch(
+        ConfigActions.setPreChatEvents(configSlice.preChatEvents),
+      )
+    }
     newStore.dispatch(I18nActions.setLocale.fulfilled('en-GB', translations))
     return newStore
   }, [state, translations])
@@ -71,7 +85,7 @@ const SeamlyTestCore = ({ state, translations, children }) => {
         <SeamlyEventBusContext.Provider value={eventBusRef.current}>
           <SeamlyLiveRegionContext.Provider value={liveMsgRef.current}>
             <SeamlyApiContext.Provider value={bareApi}>
-              {children}
+              <ComponentFilter>{children}</ComponentFilter>
             </SeamlyApiContext.Provider>
           </SeamlyLiveRegionContext.Provider>
         </SeamlyEventBusContext.Provider>