@seamly/web-ui 20.7.0 → 20.8.0-beta.1

package/src/javascripts/domains/visibility/{hooks.js → hooks.ts}

@@ -1,19 +1,22 @@
+import { useConfig } from 'domains/config/hooks'
+import { useAppDispatch } from 'domains/store'
+import { setVisibility } from 'domains/visibility/actions'
+import { setShowInlineView } from 'domains/visibility/slice'
+import { VisibilityState } from 'domains/visibility/visibility.types'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
-import { useSelector, useStoreDispatch } from 'domains/redux'
-import { useConfig } from 'domains/config'
-import * as Actions from './actions'
-import * as Selectors from './selectors'
+import { useDispatch, useSelector } from 'react-redux'
 import { visibilityStates } from './constants'
+import * as Selectors from './selectors'
 
 export const useVisibility = () => {
-  const dispatch = useStoreDispatch()
+  const dispatch = useAppDispatch()
   const visible = useSelector(Selectors.selectVisibility)
   const isVisible = visible ? visible !== visibilityStates.hidden : false
   const isOpen = visible === visibilityStates.open
   const isMinimized = visible === visibilityStates.minimized
 
-  const setVisibility = useCallback(
-    (visibility) => dispatch(Actions.setVisibility(visibility)),
+  const dispatchVisibility = useCallback(
+    (visibility: VisibilityState) => dispatch(setVisibility(visibility)),
     [dispatch],
   )
 
@@ -22,7 +25,7 @@ export const useVisibility = () => {
     isOpen,
     isMinimized,
     visible,
-    setVisibility,
+    setVisibility: dispatchVisibility,
   }
 }
 
@@ -66,7 +69,7 @@ const useIntersect = ({ freezeOnceVisible = false, enabled = true }) => {
 }
 
 export const useShowInlineView = () => {
-  const dispatch = useStoreDispatch()
+  const dispatch = useDispatch()
   const { connectWhenInView } = useConfig()
   const showInlineView = useSelector(Selectors.selectShowInlineView)
 
@@ -78,7 +81,7 @@ export const useShowInlineView = () => {
   useEffect(() => {
     if (!isVisible) return
 
-    dispatch(Actions.setShowInlineView())
+    dispatch(setShowInlineView())
   }, [dispatch, isVisible])
 
   return { containerRef, showInlineView }

package/src/javascripts/domains/visibility/{selectors.js → selectors.ts}

@@ -1,14 +1,11 @@
-import { createSelector } from 'reselect'
-import { selectState } from './utils'
+import { createSelector } from '@reduxjs/toolkit'
 
 export const selectVisibility = createSelector(
-  selectState,
+  ({ visibility }) => visibility,
   (state) => state.visibility,
 )
 
 export const selectShowInlineView = createSelector(
-  selectState,
+  ({ visibility }) => visibility,
   (state) => state.showInlineView,
 )
-
-export { selectState }

package/src/javascripts/domains/visibility/slice.ts

@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { VisibilityOptions } from 'config.types'
+import { setVisibility } from 'domains/visibility/actions'
+import { visibilityStates } from 'domains/visibility/constants'
+import type { VisibilityState } from 'domains/visibility/visibility.types'
+
+const initialState: VisibilityState = {
+  visibility: visibilityStates.initialize,
+  showInlineView: false,
+}
+
+export const visibilitySlice = createSlice({
+  name: 'visibility',
+  initialState,
+  reducers: {
+    setFromStorage: (state, action) => {
+      state.visibility = action.payload
+    },
+    setShowInlineView: (state) => {
+      state.showInlineView = true
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(
+      setVisibility.fulfilled,
+      (state, { payload: visibility }: PayloadAction<VisibilityOptions>) => {
+        if (visibility) {
+          state.visibility = visibility
+        }
+      },
+    )
+  },
+})
+
+export const { setFromStorage } = visibilitySlice.actions
+export const { setShowInlineView } = visibilitySlice.actions
+
+export default visibilitySlice.reducer

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

@@ -1,14 +1,5 @@
-import { createDomain } from 'lib/redux-helpers'
 import { visibilityStates } from './constants'
 
-export const {
-  createAction,
-  createActions,
-  createThunk,
-  createReducer,
-  selectState,
-} = createDomain('visibility')
-
 export const calculateVisibility = ({
   hasResponded,
   previousVisibility,

package/src/javascripts/domains/visibility/visibility.types.ts

@@ -0,0 +1,6 @@
+import type { VisibilityOptions } from 'config.types'
+
+export interface VisibilityState {
+  visibility: VisibilityOptions
+  showInlineView: boolean
+}

package/src/javascripts/index.ts

@@ -0,0 +1,92 @@
+// Used by: Client
+import initializeExternalApi from './lib/external-api/initialize-api'
+
+// Used by: Client
+export default initializeExternalApi
+
+// Used by: StyleGuide
+export { API } from './api'
+
+// Used by: StyleGuide
+export { Provider as SeamlyStoreProvider } from 'react-redux'
+// Used by: StyleGuide
+export { default as SeamlyGeneralError } from './api/errors/seamly-general-error'
+// Used by: StyleGuide
+export { default as SeamlyOfflineError } from './api/errors/seamly-offline-error'
+// Used by: Client
+export { useConfig as useSeamlyConfig } from 'domains/config/hooks'
+// Used by: Client
+export { useI18n } from 'domains/i18n/hooks'
+// Used by: Client
+export {
+  useTranslatedEventData,
+  useTranslations,
+  useTranslationsContainer,
+} from 'domains/translations/hooks'
+// Used by: Client
+export { useVisibility as useSeamlyVisibility } from 'domains/visibility/hooks'
+export { visibilityStates } from 'domains/visibility/constants'
+export { calculateVisibility } from 'domains/visibility/utils'
+// Used by: Client
+export { className } from './lib/css'
+// Used by: StyleGuide
+export { default as Engine } from './lib/engine'
+// Used by: StyleGuide
+export { default as ExternalApi } from './lib/external-api'
+// Used by: StyleGuide
+export { randomId } from './lib/id'
+// Used by: StyleGuide
+export { default as ComponentFilter } from 'ui/components/conversation/component-filter'
+// Used by: Client
+export { default as Conversation } from 'ui/components/conversation/conversation'
+// Used by: Client
+export { useChoicePrompt } from 'ui/components/conversation/event/choice-prompt'
+// Used by: Demo
+export { default as EventParticipant } from 'ui/components/conversation/event/event-participant'
+// Used by: Client
+export { default as Text } from 'ui/components/conversation/event/text'
+// Used by: Client
+export { default as MessageContainer } from 'ui/components/conversation/message-container'
+// Used by: StyleGuide
+export {
+  SeamlyApiContext,
+  SeamlyEventBusContext,
+} from 'ui/components/core/seamly-api-context'
+// Used by: StyleGuide
+export { SeamlyLiveRegionContext } from 'ui/components/core/seamly-live-region-context'
+// Used by: Client
+export { default as DeprecatedToggleButton } from 'ui/components/entry/deprecated-toggle-button'
+// Used by: Client
+export { default as EntryContainer } from 'ui/components/entry/entry-container'
+export { default as AgentInfo } from 'ui/components/layout/agent-info'
+// Used by: Client
+export { default as Chat } from 'ui/components/layout/chat'
+// Used by: Client
+export { default as ChatFrame } from 'ui/components/layout/chat-frame'
+// Used by: Client
+export { default as Header } from 'ui/components/layout/header'
+// Used by: Client
+export { default as Icon } from 'ui/components/layout/icon'
+// Used by: Client
+export { default as Interrupt } from 'ui/components/layout/interrupt'
+// Used by: StyleGuide
+// Used by: Client (with custom 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
+export {
+  useEvents,
+  useGeneratedId,
+  useSeamlyChat,
+  useSeamlyCommands,
+  useSeamlyDispatchContext,
+  useSeamlyEventStream,
+  useSeamlyIdleDetachCountdown,
+  useSeamlyMessageContainerClassNames,
+  useSeamlyOptions,
+} from './ui/hooks/seamly-hooks'
+// Used by: StyleGuide
+export { getUrlParams, getUrlSearchString } from './ui/utils/general-utils'
+// Used by: Client
+export { eventTypes } from './ui/utils/seamly-utils'

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

@@ -1,10 +1,15 @@
-import { render, h } from 'preact'
+import { API } from 'api'
+import { initializeApp } from 'domains/app/actions'
+
+import { initializeConfig } from 'domains/config/actions'
+import { setConfig } from 'domains/config/slice'
+
+import { createStore } from 'domains/store'
+import { initializeVisibility } from 'domains/visibility/actions'
 import Events from 'minivents'
+import { render } from 'preact'
 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) {
@@ -55,18 +60,17 @@ export default class Engine {
       api: this.api,
       eventBus: this.eventBus,
       config: renderConfig,
+      initialState: undefined,
     })
 
-    await store.dispatch(AppActions.initialize())
+    store.dispatch(setConfig(renderConfig))
+    await store.dispatch(initializeConfig())
+    await store.dispatch(initializeApp())
+    store.dispatch(initializeVisibility())
 
     if (View) {
       render(
-        <SeamlyCore
-          config={renderConfig}
-          eventBus={this.eventBus}
-          store={store}
-          api={this.api}
-        >
+        <SeamlyCore eventBus={this.eventBus} store={store} api={this.api}>
           <View />
         </SeamlyCore>,
         this.parentElement,

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

@@ -1,4 +1,4 @@
-import ExternalApi from './index'
+import ExternalApi from 'lib/external-api'
 
 export default function initializeExternalApi(appConfig) {
   if (window.seamly && !Array.isArray(window.seamly)) {

package/src/javascripts/lib/id.js

@@ -1,10 +1,7 @@
 export function randomId() {
-  return (
-    '_' +
-    (
-      Number(String(Math.random()).slice(2)) +
-      Date.now() +
-      Math.round(performance.now())
-    ).toString(36)
-  )
+  return `_${(
+    Number(String(Math.random()).slice(2)) +
+    Date.now() +
+    Math.round(performance.now())
+  ).toString(36)}`
 }

package/src/javascripts/lib/mutex.js

@@ -8,7 +8,9 @@ export default function createMutex() {
         const task = tasks.shift()
         isRunning = true
         // eslint-disable-next-line no-await-in-loop
-        await task().catch(() => {})
+        await task().catch(() => {
+          // do nothing
+        })
         isRunning = false
       }
     }

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

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

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

@@ -1,5 +1,5 @@
 export default function store(key) {
-  const KEY = 'cvco.' + key
+  const KEY = `cvco.${key}`
 
   return {
     get() {

package/src/javascripts/package/hooks.js

@@ -1,16 +1,16 @@
 export {
   useChoicePrompt,
-  useDispatch,
   useEvents,
   useGeneratedId,
   useI18n,
   useSeamlyChat,
   useSeamlyCommands,
+  useSeamlyDispatchContext,
   useSeamlyEventStream,
   useSeamlyIdleDetachCountdown,
   useSeamlyMessageContainerClassNames,
   useSeamlyOptions,
-  useTranslations,
   useTranslatedEventData,
+  useTranslations,
   useTranslationsContainer,
 } from '@seamly/web-ui'

package/src/javascripts/package/utils.js

@@ -7,5 +7,4 @@ export {
   getUrlParams,
   getUrlSearchString,
   randomId,
-  seamlyActions,
 } from '@seamly/web-ui'