@seamly/web-ui 19.1.3 → 20.0.0-beta.3

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,16 @@ 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: StyleGuide
+export { default as View } from './ui/components/view'
 
 // Used by: Client
+export { default as DeprecatedView } from './ui/components/view/deprecated-view'
+
 // Used by: StyleGuide
-export { default as View } from './ui/components/layout/view'
+export { default as ComponentFilter } from './ui/components/conversation/component-filter'
 
 // 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

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'preact/hooks'
 import { getUrlParams, getUrlSearchString, randomId } from '@seamly/web-ui'
 import StyleGuideView from './view'
 import StyleGuideLinks from './links'
-import { getStateObj } from '../states'
+import { getStateObj, getDeprecatedStateObj } from '../states'
 
 const StyleGuideApp = ({
   config,
@@ -15,10 +15,10 @@ const StyleGuideApp = ({
   const [showStyleGuide, setShowStyleGuide] = useState(true)
   const [headingId] = useState(randomId())
   const { stateUpdateCallback, customMessageEventBodies } = styleGuideConfig
-
+  const stateObjFunc = config.isDeprecated ? getDeprecatedStateObj : getStateObj
   const [mainState] = useState(() => {
-    const mainStateObj = getStateObj(
-      styleGuideConfig.showLayoutModes || ['inline', 'window', 'modal'],
+    const mainStateObj = stateObjFunc(
+      styleGuideConfig.showLayoutModes || ['inline', 'window'],
       customMessageEventBodies,
     )
     return Object.keys(mainStateObj).reduce(

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

@@ -6,6 +6,7 @@ import {
   SeamlyApiContext,
   SeamlyLiveRegionContext,
   StoreProvider,
+  ComponentFilter,
   createReduxStore,
 } from '@seamly/web-ui'
 import stateReducer from '../../domains/store/state-reducer'
@@ -40,7 +41,7 @@ const SeamlyTestCore = ({ state, translations, children }) => {
     const {
       translations: translationsSlice,
       interrupt: interruptSlice,
-      config: configSlice,
+      config: configSlice = {},
       visibility: visibilitySlice,
       ...restState
     } = state || {}
@@ -68,7 +69,12 @@ const SeamlyTestCore = ({ state, translations, children }) => {
         }),
       ],
     })
-    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])
@@ -79,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>

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

@@ -7,7 +7,6 @@ const StyleGuideView = ({ state, customComponents = {}, translations }) => {
   const { config } = state || {}
   const { layoutMode } = config || {}
   const CustomView = customComponents[layoutMode]
-
   // This ensures that the style guide view is completely
   // reconstructed for each state to avoid artifacts from previous
   // renders showing up.