@seamly/web-ui 20.0.0-beta.6 → 20.1.0

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

@@ -1,4 +1,4 @@
-import { seamlyActions } from '../../ui/utils/seamly-utils'
+import { seamlyActions } from 'ui/utils/seamly-utils'
 
 export default function createMiddleware({ api }) {
   return () => (next) => (action) => {

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

@@ -1,23 +1,20 @@
 import thunkMiddleware from 'redux-thunk'
-import { createReduxStore } from '../redux'
-import { Reducer as appReducer } from '../app'
-import {
-  createMiddleware as createConfigMiddleware,
-  Reducer as configReducer,
-} from '../config'
-import { Reducer as formReducer } from '../forms'
+import { createReduxStore } from 'domains/redux'
+import { Reducer as appReducer } from 'domains/app'
+import { Reducer as formReducer } from 'domains/forms'
+import { Reducer as configReducer } from 'domains/config'
 import {
   Reducer as translationsReducer,
   createMiddleware as createI18nMiddleware,
-} from '../translations'
-import { Reducer as i18nReducer } from '../i18n'
-import { Reducer as visibilityReducer } from '../visibility'
+} from 'domains/translations'
+import { Reducer as i18nReducer } from 'domains/i18n'
+import { Reducer as visibilityReducer } from 'domains/visibility'
 import {
   Reducer as interruptReducer,
   createMiddleware as createInterruptMiddleware,
-} from '../interrupt'
-import { createMiddleware as createOptionsMiddleware } from '../options'
-import { createMiddleware as createErrorsMiddleware } from '../errors'
+} from 'domains/interrupt'
+import { createMiddleware as createOptionsMiddleware } from 'domains/options'
+import { createMiddleware as createErrorsMiddleware } from 'domains/errors'
 import stateReducer from './state-reducer'
 
 export function createStore({ initialState, api, eventBus, config } = {}) {
@@ -40,7 +37,6 @@ export function createStore({ initialState, api, eventBus, config } = {}) {
         eventBus,
         config,
       }),
-      createConfigMiddleware(),
       createInterruptMiddleware({ api }),
       createOptionsMiddleware({ api }),
       createI18nMiddleware(),

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

@@ -1,8 +1,8 @@
 // Legacy state reducer. Do not add new features here but extract/create new reducers as needed
 
-import { randomId } from '../../lib/id'
-import { entryTypes, seamlyStateReducer } from '../../ui/utils/seamly-utils'
-import * as AppActions from '../app/actions'
+import { randomId } from 'lib/id'
+import { entryTypes, seamlyStateReducer } from 'ui/utils/seamly-utils'
+import * as AppActions from 'domains/app/actions'
 
 const initialState = {
   events: [],

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

@@ -1,9 +1,12 @@
 import { useCallback, useMemo } from 'preact/hooks'
-import ChatStatus from '../../../ui/components/chat-status'
-import { useI18n } from '../../i18n'
-import { useSkiplinkTargetFocusing } from '../../../ui/hooks/seamly-hooks'
-import { useTranslationsContainer, useTranslations } from '../hooks'
-import { useInterrupt } from '../../interrupt'
+import ChatStatus from 'ui/components/chat-status'
+import { useI18n } from 'domains/i18n'
+import { useSkiplinkTargetFocusing } from 'ui/hooks/seamly-hooks'
+import {
+  useTranslationsContainer,
+  useTranslations,
+} from 'domains/translations/hooks'
+import { useInterrupt } from 'domains/interrupt'
 
 export default function TranslationsChatStatus() {
   const { t } = useI18n()

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

@@ -1,12 +1,12 @@
 import { useRef, useState } from 'preact/hooks'
-import { className } from '../../../lib/css'
-import { focusElement, getKey, keyNames } from '../../../ui/utils/general-utils'
-import Icon from '../../../ui/components/layout/icon'
-import { useGeneratedId } from '../../../ui/hooks/seamly-hooks'
-import { useI18n } from '../../i18n'
+import { className } from 'lib/css'
+import { focusElement, getKey, keyNames } from 'ui/utils/general-utils'
+import Icon from 'ui/components/layout/icon'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n'
 import InOutTransition, {
   transitionStartStates,
-} from '../../../ui/components/widgets/in-out-transition'
+} from 'ui/components/widgets/in-out-transition'
 import TranslationsOptionsDialog from './options-dialog'
 
 export default function TranslationsOptionButton() {

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

@@ -1,9 +1,9 @@
 import { useMemo } from 'preact/hooks'
-import Form from '../../../../ui/components/form-controls/form'
-import { className } from '../../../../lib/css'
-import { useI18n } from '../../../i18n'
-import { useTranslations } from '../../hooks'
-import Select from '../../../../ui/components/form-controls/select'
+import Form from 'ui/components/form-controls/form'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import { useTranslations } from 'domains/translations/hooks'
+import Select from 'ui/components/form-controls/select'
 
 function TranslationsOptionsDialogForm({ controlName, descriptionId }) {
   const { t } = useI18n()

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

@@ -1,12 +1,15 @@
 import { useCallback, useMemo, useRef, useState } from 'preact/hooks'
-import OptionsFrame from '../../../../ui/components/options/options-frame'
-import { FormProvider } from '../../../forms'
+import OptionsFrame from 'ui/components/options/options-frame'
+import { FormProvider } from 'domains/forms'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import { getValidator } from 'ui/utils/form-utils'
+import { isNotEmptyString } from 'ui/utils/validations'
+import {
+  useTranslations,
+  useTranslationsContainer,
+} from 'domains/translations/hooks'
+import { useI18n } from 'domains/i18n'
 import TranslationsOptionsDialogForm from './form'
-import { useGeneratedId } from '../../../../ui/hooks/seamly-hooks'
-import { getValidator } from '../../../../ui/utils/form-utils'
-import { isNotEmptyString } from '../../../../ui/utils/validations'
-import { useTranslations, useTranslationsContainer } from '../../hooks'
-import { useI18n } from '../../../i18n'
 
 export const formName = 'translation-settings'
 export const inputName = 'locale'

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

@@ -2,9 +2,13 @@ import {
   useElementFocusingById,
   useSeamlyCommands,
   useStableCallback,
-} from '../../ui/hooks/seamly-hooks'
-import { actionTypes } from '../../ui/utils/seamly-utils'
-import { useSelector, useSelectorWithProps, useStoreDispatch } from '../redux'
+} from 'ui/hooks/seamly-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import {
+  useSelector,
+  useSelectorWithProps,
+  useStoreDispatch,
+} from 'domains/redux'
 import * as Selectors from './selectors'
 import * as Actions from './actions'
 

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

@@ -1,6 +1,9 @@
+import { seamlyActions } from 'ui/utils/seamly-utils'
+import {
+  Actions as I18nActions,
+  Selectors as I18nSelectors,
+} from 'domains/i18n'
 import * as Actions from './actions'
-import { seamlyActions } from '../../ui/utils/seamly-utils'
-import { Actions as I18nActions, Selectors as I18nSelectors } from '../i18n'
 
 export default function createMiddleware() {
   return ({ dispatch, getState }) =>

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

@@ -1,8 +1,8 @@
-import { createReducer } from './utils'
-import { seamlyActions } from '../../ui/utils/seamly-utils'
-import { randomId } from '../../lib/id'
+import { seamlyActions } from 'ui/utils/seamly-utils'
+import { randomId } from 'lib/id'
+import * as AppActions from 'domains/app/actions'
 import * as Actions from './actions'
-import * as AppActions from '../app/actions'
+import { createReducer } from './utils'
 
 const initialState = {
   isActive: false,

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

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect'
-import { getPropSelector } from '../redux/utils'
+import { getPropSelector } from 'domains/redux/utils'
 import { selectState } from './utils'
 
 export const getState = selectState

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

@@ -1,4 +1,4 @@
-import { createDomain } from '../../lib/redux-helpers'
+import { createDomain } from 'lib/redux-helpers'
 
 export const { createActions, createReducer, selectState } =
   createDomain('translations')

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

@@ -1,10 +1,10 @@
-import * as ConfigSelectors from '../config/selectors'
-import * as AppSelectors from '../app/selectors'
+import * as ConfigSelectors from 'domains/config/selectors'
+import * as AppSelectors from 'domains/app/selectors'
 
+import { selectState } from 'ui/hooks/seamly-state-hooks'
 import { visibilityStates, StoreKey } from './constants'
 import { createAction, createThunk, calculateVisibility } from './utils'
 import * as Selectors from './selectors'
-import { selectState } from '../../ui/hooks/seamly-state-hooks'
 
 export const setFromStorage = createAction('setFromStorage', (visibility) => ({
   visibility,

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

@@ -1,5 +1,5 @@
 import { useCallback } from 'preact/hooks'
-import { useSelector, useStoreDispatch } from '../redux'
+import { useSelector, useStoreDispatch } from 'domains/redux'
 import * as Actions from './actions'
 import * as Selectors from './selectors'
 import { visibilityStates } from './constants'

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

@@ -1,4 +1,4 @@
-import { createDomain } from '../../lib/redux-helpers'
+import { createDomain } from 'lib/redux-helpers'
 import { visibilityStates } from './constants'
 
 export const {

package/src/javascripts/lib/css.js

@@ -1,4 +1,4 @@
-import { CSS_NAME } from '../config'
+import { CSS_NAME } from 'config'
 
 /**
  * Generate a className with all classes prefixed with the CSS_NAME

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

@@ -1,10 +1,10 @@
 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 * as AppActions from '../../domains/app/actions'
+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 * as AppActions from 'domains/app/actions'
 
 export default class Engine {
   constructor(config, externalApi) {
@@ -20,6 +20,7 @@ export default class Engine {
     this.externalApi = externalApi
 
     this.api = new API({
+      layoutMode: config.layoutMode,
       namespace: config.namespace,
       config: config.api,
       context: config.context,

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

@@ -1,4 +1,4 @@
-import Engine from '../engine'
+import Engine from 'lib/engine'
 
 const isActionObject = (actionObj) =>
   typeof actionObj === 'object' && 'action' in actionObj

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

@@ -1,4 +1,4 @@
-import { randomId } from '../id'
+import { randomId } from 'lib/id'
 
 export const SLICE_DELIMITER = '/'
 export const DOMAIN_DELIMITER = '//'

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

@@ -1,14 +1,15 @@
 import { useCallback, useEffect, useState } from 'preact/hooks'
 import { getUrlParams, getUrlSearchString, randomId } from '@seamly/web-ui'
+import { getStateObj, getDeprecatedStateObj } from 'style-guide/states'
 import StyleGuideView from './view'
 import StyleGuideLinks from './links'
-import { getStateObj, getDeprecatedStateObj } from '../states'
 
 const StyleGuideApp = ({
   config,
   styleGuideConfig,
   translations,
   headingLevel = 2,
+  participants,
 }) => {
   const [staticState, setStaticState] = useState(null)
   const [selectedStateDescription, setSelectedStateDescription] = useState('')
@@ -46,13 +47,15 @@ const StyleGuideApp = ({
 
   const getState = useCallback(
     (layoutMode, feature) => {
-      const { defaults } = config
       const { headingText } = mainState[feature]
       setSelectedStateDescription(headingText)
       const bareState = mainState[feature][layoutMode]
       const { overrideMessages, showFaq } = bareState.config
 
-      const { agentName } = defaults || {}
+      const agent = participants.find(
+        (participant) => participant.id === 'agent',
+      )
+
       const updatedState = {
         ...bareState,
         config: {
@@ -64,12 +67,12 @@ const StyleGuideApp = ({
         },
         headerTitles: {
           ...bareState.headerTitles,
-          subTitle: agentName || bareState.headerTitles.subTitle,
+          subTitle: agent?.name || bareState.headerTitles.subTitle,
         },
       }
       return updatedState
     },
-    [mainState, config],
+    [mainState, participants, config],
   )
 
   useEffect(() => {
@@ -145,6 +148,7 @@ const StyleGuideApp = ({
               customComponents={styleGuideConfig.customComponents}
               translations={translations}
               state={staticState}
+              participants={participants}
             />
           )}
         </div>

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

@@ -1,5 +1,5 @@
 import { getUrlSearchString, getUrlParams } from '@seamly/web-ui'
-import { categories } from '../states'
+import { categories } from 'style-guide/states'
 
 const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
   const CategoryHeading = `h${headingLevel.toString()}`
@@ -77,11 +77,11 @@ const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
                                 onClick={(e) => {
                                   e.preventDefault()
                                   if (layoutMode === 'inline') {
-                                    setTimeout(() => {
-                                      document
-                                        .querySelector('section.cvco-app')
-                                        .scrollIntoView()
-                                    }, 300)
+                                    window.scroll({
+                                      top: document.querySelector('.cvco-app')
+                                        .offsetTop,
+                                      behavior: 'smooth',
+                                    })
                                   }
                                   onClickHandler({ layoutMode, feature })
                                 }}

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

@@ -9,20 +9,20 @@ import {
   ComponentFilter,
   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'
-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 stateReducer from 'domains/store/state-reducer'
+import { Reducer as formReducer } from 'domains/forms'
+import { Reducer as translationsReducer } from 'domains/translations'
+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'
-import { Reducer as visibilityReducer } from '../../domains/visibility'
+} from 'domains/config'
+import { Reducer as visibilityReducer } from 'domains/visibility'
+import { seamlyActions } from '../../ui/utils/seamly-utils'
+
+const { SET_PARTICIPANT } = seamlyActions
 
 const bareApi = {
   send: () => {},
@@ -33,7 +33,12 @@ const bareApi = {
   hasConversation: () => false,
 }
 
-const SeamlyTestCore = ({ state, translations, children }) => {
+const SeamlyTestCore = ({
+  state,
+  translations,
+  participants = [],
+  children,
+}) => {
   const liveMsgRef = useRef(() => {})
   const eventBusRef = useRef({ emit: () => {} })
 
@@ -76,8 +81,17 @@ const SeamlyTestCore = ({ state, translations, children }) => {
       )
     }
     newStore.dispatch(I18nActions.setLocale.fulfilled('en-GB', translations))
+
+    participants.forEach((participant) => {
+      newStore.dispatch({
+        type: SET_PARTICIPANT,
+        participant,
+        fromClient: participant.id === 'user',
+      })
+    })
+
     return newStore
-  }, [state, translations])
+  }, [state, translations, participants])
 
   return (
     state && (

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

@@ -2,7 +2,12 @@ import { useState, useEffect } from 'preact/hooks'
 import { View } from '@seamly/web-ui'
 import StyleGuideStaticCore from './static-core'
 
-const StyleGuideView = ({ state, customComponents = {}, translations }) => {
+const StyleGuideView = ({
+  state,
+  customComponents = {},
+  translations,
+  participants,
+}) => {
   const [renderView, setRenderView] = useState(true)
   const { config } = state || {}
   const { layoutMode } = config || {}
@@ -25,11 +30,19 @@ const StyleGuideView = ({ state, customComponents = {}, translations }) => {
   }
 
   return CustomView ? (
-    <StyleGuideStaticCore state={state} translations={translations}>
+    <StyleGuideStaticCore
+      state={state}
+      translations={translations}
+      participants={participants}
+    >
       <CustomView />
     </StyleGuideStaticCore>
   ) : (
-    <StyleGuideStaticCore state={state} translations={translations}>
+    <StyleGuideStaticCore
+      state={state}
+      translations={translations}
+      participants={participants}
+    >
       <View />
     </StyleGuideStaticCore>
   )