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

package/src/javascripts/ui/hooks/use-seamly-commands.js

@@ -1,30 +1,30 @@
-import { useCallback, useContext } from 'preact/hooks'
-import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
-import { randomId } from 'lib/id'
 import { userParticipantId } from 'config'
-import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
-import { Actions as InterruptActions } from 'domains/interrupt'
-import { useConfig } from 'domains/config'
-import * as AppActions from 'domains/app/actions'
 import { useUserHasResponded } from 'domains/app/hooks'
-import { useVisibility, visibilityStates } from 'domains/visibility'
-import { useStableCallback } from './utility-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { useSeamlyUnreadCount } from './seamly-state-hooks'
+import * as AppActions from 'domains/app/actions'
+import { setHasResponded } from 'domains/app/slice'
+import { useConfig } from 'domains/config/hooks'
+import { setInterrupt } from 'domains/interrupt/slice'
+import { addEvent, setInitialState } from 'domains/store/slice'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
+
+import { randomId } from 'lib/id'
+import { useCallback, useContext } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
+import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
+import { actionTypes } from 'ui/utils/seamly-utils'
 import {
   useSeamlyApiContext,
   useSeamlyHasConversation,
 } from './seamly-api-hooks'
-
-const { ADD_EVENT, SET_INITIAL_STATE } = seamlyActions
+import { useSeamlyUnreadCount } from './seamly-state-hooks'
 
 const useSeamlyCommands = () => {
   const api = useSeamlyApiContext()
   const appConfig = useConfig()
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const eventBus = useContext(SeamlyEventBusContext)
-
-  const hasResponded = useUserHasResponded()
+  const userHasResponded = useUserHasResponded()
   const hasConversation = useSeamlyHasConversation()
   const { visible: visibility, setVisibility } = useVisibility()
   const unreadMessageCount = useSeamlyUnreadCount()
@@ -36,34 +36,34 @@ const useSeamlyCommands = () => {
     [eventBus],
   )
 
-  const start = useStableCallback(() => {
+  const start = useCallback(() => {
     api.sendContext(appConfig.context || {})
     emitEvent('ui.beforeStart', {
       visibility,
-      hasConversation,
-      hasResponded,
+      hasConversation: hasConversation(),
+      hasResponded: userHasResponded,
       unreadMessageCount,
     })
 
     api.send('start')
     emitEvent('ui.start', {
       visibility,
-      hasConversation,
-      hasResponded,
+      hasConversation: hasConversation(),
+      hasResponded: userHasResponded,
       unreadMessageCount,
     })
   }, [
     api,
-    appConfig,
+    appConfig.context,
     emitEvent,
-    hasResponded,
     hasConversation,
-    visibility,
+    userHasResponded,
     unreadMessageCount,
+    visibility,
   ])
 
   const reset = useCallback(async () => {
-    dispatch(AppActions.reset())
+    dispatch(AppActions.resetApp())
   }, [dispatch])
 
   const getMessageBase = useCallback(
@@ -106,35 +106,30 @@ const useSeamlyCommands = () => {
 
       api.send('message', message)
       emitEvent('message', message)
-      dispatch({
-        type: ADD_EVENT,
-        event: {
+      dispatch(
+        addEvent({
           type: 'message',
           payload: {
             ...message,
             optimisticallyInjected: true,
           },
-        },
-      })
+        }),
+      )
     },
     [api, dispatch, emitEvent, getTextMessageBase],
   )
 
   const addMessageBubble = useCallback(
     (text) => {
-      dispatch({
-        type: ADD_EVENT,
-        event: { type: 'message', payload: getTextMessageBase(text) },
-      })
+      dispatch(addEvent({ type: 'message', payload: getTextMessageBase(text) }))
     },
     [dispatch, getTextMessageBase],
   )
 
   const addUploadBubble = useCallback(
     (id, transactionId, occurredAt, contentType, filename, filesize, url) => {
-      dispatch({
-        type: ADD_EVENT,
-        event: {
+      dispatch(
+        addEvent({
           type: 'message',
           payload: {
             type: 'upload',
@@ -146,8 +141,8 @@ const useSeamlyCommands = () => {
             meta: {},
             body: { contentType, filename, filesize, url },
           },
-        },
-      })
+        }),
+      )
     },
     [dispatch],
   )
@@ -163,10 +158,7 @@ const useSeamlyCommands = () => {
         type: 'divider',
       }
 
-      dispatch({
-        type: ADD_EVENT,
-        event: { type: 'info', payload },
-      })
+      dispatch(addEvent({ type: 'info', payload }))
     },
     [dispatch],
   )
@@ -203,15 +195,23 @@ const useSeamlyCommands = () => {
       .connect()
       .then((initialState) => {
         if (initialState) {
-          dispatch({ type: SET_INITIAL_STATE, initialState })
+          dispatch(setInitialState(initialState))
           if (initialState.userResponded) {
-            dispatch(AppActions.setHasResponded(initialState.userResponded))
+            dispatch(setHasResponded(initialState.userResponded))
             setVisibility(visibilityStates.open)
           }
         }
       })
       .catch((error) => {
-        dispatch(InterruptActions.set(error))
+        dispatch(
+          setInterrupt({
+            name: error.name,
+            message: error.message,
+            langKey: error.langKey,
+            originalEvent: error.originalEvent,
+            originalError: error.originalError,
+          }),
+        )
       })
   }, [api, dispatch, setVisibility])
 

package/src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js

@@ -1,26 +1,25 @@
+import { screenReaderDebounceDelaySeconds } from 'config'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import {
+  clearIdleDetachCountdown,
+  decrementIdleDetachCountdownCounter,
+  initIdleDetachCountdown,
+  stopIdleDetachCountdownCounter,
+} from 'domains/store/slice'
 import { useCallback, useRef } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
+import { useDispatch } from 'react-redux'
 import {
   getTimeFromSeconds,
   millisecondsToSeconds,
 } from 'ui/utils/general-utils'
-import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
-import { screenReaderDebounceDelaySeconds } from 'config'
-import { useVisibility } from 'domains/visibility'
+import { actionTypes } from 'ui/utils/seamly-utils'
 import { useLiveRegion } from './live-region-hooks'
-import useSeamlyCommands from './use-seamly-commands'
 import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-
-const {
-  CLEAR_IDLE_DETACH_COUNTDOWN,
-  INIT_IDLE_DETACH_COUNTDOWN,
-  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,
-  STOP_IDLE_DETACH_COUNTDOWN_COUNTER,
-} = seamlyActions
+import useSeamlyCommands from './use-seamly-commands'
 
 const useSeamlyIdleDetachCountdown = () => {
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
 
   const { idleDetachCountdown } = useSeamlyStateContext()
 
@@ -65,11 +64,12 @@ const useSeamlyIdleDetachCountdown = () => {
       const delaySeconds = millisecondsToSeconds(milliseconds)
       const delayTime = getTimeFromSeconds(delaySeconds)
 
-      dispatch({
-        type: INIT_IDLE_DETACH_COUNTDOWN,
-        delaySeconds,
-        delayTime,
-      })
+      dispatch(
+        initIdleDetachCountdown({
+          delaySeconds,
+          delayTime,
+        }),
+      )
       emitEvent('idleTimer.start')
       sendAssertiveIfOpen(
         `${t('idleDetachWarning.countdownTitle')} ${t(
@@ -98,7 +98,7 @@ const useSeamlyIdleDetachCountdown = () => {
         emitEvent('idleTimer.stop')
       }
 
-      dispatch({ type: CLEAR_IDLE_DETACH_COUNTDOWN })
+      dispatch(clearIdleDetachCountdown())
     },
     [dispatch, sendAction, emitEvent, sendAssertiveIfOpen, t],
   )
@@ -120,9 +120,7 @@ const useSeamlyIdleDetachCountdown = () => {
       )
     }
 
-    dispatch({
-      type: DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,
-    })
+    dispatch(decrementIdleDetachCountdownCounter())
   }, [dispatch, sendAssertiveIfOpen, t])
 
   const stopCountdown = useCallback(() => {
@@ -131,7 +129,7 @@ const useSeamlyIdleDetachCountdown = () => {
       return
     }
 
-    dispatch({ type: STOP_IDLE_DETACH_COUNTDOWN_COUNTER })
+    dispatch(stopIdleDetachCountdownCounter())
 
     if (remaining) {
       emitEvent('idleTimer.stop')

package/src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js

@@ -1,14 +1,13 @@
-import { useI18n } from 'domains/i18n'
-import { actionTypes, dismissTypes, seamlyActions } from 'ui/utils/seamly-utils'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
+import { useI18n } from 'domains/i18n/hooks'
+import { clearResumeConversationPrompt } from 'domains/store/slice'
+import { useDispatch } from 'react-redux'
+import { actionTypes, dismissTypes } from 'ui/utils/seamly-utils'
+import { useLiveRegion } from './live-region-hooks'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { useLiveRegion } from './live-region-hooks'
-
-const { CLEAR_RESUME_CONVERSATION_PROMPT } = seamlyActions
 
 const useSeamlyResumeConversationPrompt = () => {
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const hasPrompt = useSeamlyStateContext().resumeConversationPrompt
   const { sendAction } = useSeamlyCommands()
   const { t } = useI18n()
@@ -19,13 +18,13 @@ const useSeamlyResumeConversationPrompt = () => {
       type: actionTypes.dismiss,
       body: { type: dismissTypes.resumeConversationPrompt },
     })
-    dispatch({ type: CLEAR_RESUME_CONVERSATION_PROMPT })
+    dispatch(clearResumeConversationPrompt())
   }
 
   const restartChat = () => {
     sendAssertive(t('resumeConversationPrompt.srNotifyRestartText'))
     sendAction({ type: actionTypes.detachService })
-    dispatch({ type: CLEAR_RESUME_CONVERSATION_PROMPT })
+    dispatch(clearResumeConversationPrompt())
   }
 
   return { continueChat, hasPrompt, restartChat }

package/src/javascripts/ui/hooks/use-single-file-upload.js

@@ -1,12 +1,10 @@
-import { Selectors } from 'domains/forms'
-import { useSelectorWithProps } from 'domains/redux'
+import { getControlValueByName } from 'domains/forms/selectors'
+import { useSelector } from 'react-redux'
 import { useFileUploads } from './seamly-hooks'
 
 const useSingleFileUpload = (formId, name) => {
-  const fileList = useSelectorWithProps(
-    Selectors.getControlValueByName,
-    { formId, name },
-    [formId, name],
+  const fileList = useSelector((store) =>
+    getControlValueByName(store, { formId, name }),
   )
   // This hook acts as a helper as the data model is built to handle multiple
   // file uploads but currently Seamly only supports single file uploads.

package/src/javascripts/ui/hooks/utility-hooks.js

@@ -1,17 +1,17 @@
+import { randomId } from 'lib/id'
 import {
   useCallback,
+  useMemo,
   useReducer,
   useRef,
   useState,
-  useMemo,
 } from 'preact/hooks'
-import { randomId } from 'lib/id'
 
 export const useForceUpdate = () => {
   // This is an escape hatch mentioned in the React docs:
   // https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   /* eslint-disable-next-line no-unused-vars */
-  const [ignored, forceUpdate] = useReducer((x) => x + 1, 0)
+  const [_, forceUpdate] = useReducer((x) => x + 1, 0)
 
   return useCallback(() => {
     setTimeout(() => {
@@ -26,7 +26,7 @@ export const useGeneratedId = () => {
 }
 
 export const useStableCallback = (callback) => {
-  const callbackRef = useRef()
+  const callbackRef = useRef(null)
   callbackRef.current = callback
   const isFunction = typeof callback === 'function'
   return useMemo(() => {

package/src/javascripts/ui/utils/form-utils.js

@@ -1,150 +1,5 @@
-export const formActions = {
-  REGISTER_FORM: 'REGISTER_FORM',
-  DE_REGISTER_FORM: 'DE_REGISTER_FORM',
-  REGISTER: 'REGISTER',
-  DE_REGISTER: 'DEREGISTER',
-  SET_VALUE: 'SET_VALUE',
-  SET_VALIDITY: 'SET_VALIDITY',
-  SET_STATE: 'SET_STATE',
-  SET_SUBMITTED: 'SET_SUBMITTED',
-  SET_PERSIST_FORM_DATA: 'SET_PERSIST_FORM_DATA',
-}
-
-const {
-  REGISTER_FORM,
-  DE_REGISTER_FORM,
-  REGISTER,
-  DE_REGISTER,
-  SET_VALUE,
-  SET_VALIDITY,
-  SET_STATE,
-  SET_SUBMITTED,
-  SET_PERSIST_FORM_DATA,
-} = formActions
-
 export const getValidator = (fn, errorText, compareValue = null) => ({
   fn,
   errorText,
   compareValue,
 })
-
-export const formReducer = (state, action) => {
-  const {
-    formId,
-    name,
-    controlId,
-    value,
-    data,
-    validity,
-    errorText,
-    hasSubmitted,
-    persistData,
-  } = action
-
-  const setControls = (controls) => ({
-    ...state,
-    [formId]: {
-      ...state[formId],
-      controls: {
-        ...state[formId].controls,
-        ...controls,
-      },
-    },
-  })
-
-  switch (action.type) {
-    case REGISTER_FORM:
-      return {
-        [formId]: {
-          controls: {},
-          validity: true,
-          hasSubmitted: false,
-          persistData: false,
-        },
-        ...state,
-      }
-    case DE_REGISTER_FORM:
-      const removedFormState = { ...state }
-      delete removedFormState[formId]
-      return removedFormState
-    case REGISTER:
-      const {
-        value: existingValue,
-        validity: existingValidity,
-        errorText: existingErrorText,
-      } = state[formId].controls[name] || {}
-
-      return setControls({
-        [name]: {
-          controlId,
-          value: existingValue || value,
-          validity: existingValidity !== false,
-          errorText: existingErrorText || '',
-        },
-      })
-    case DE_REGISTER:
-      const relatedForm = state[formId]
-      if (!relatedForm) {
-        return state
-      }
-      const newControls = { ...relatedForm.controls }
-      delete newControls[action.name]
-      return { ...state, [formId]: { ...relatedForm, controls: newControls } }
-    case SET_VALUE:
-      return setControls({
-        [name]: {
-          ...state[formId].controls[name],
-          value,
-        },
-      })
-    case SET_VALIDITY:
-      const newControlValidities = {
-        ...state[formId].controls,
-        [name]: {
-          ...state[formId].controls[name],
-          validity,
-          errorText,
-        },
-      }
-      return {
-        ...state,
-        [formId]: {
-          ...state[formId],
-          controls: newControlValidities,
-          validity: Object.keys(newControlValidities)
-            .map((key) => newControlValidities[key].validity)
-            .every((v) => v),
-        },
-      }
-    case SET_STATE:
-      return {
-        ...state,
-        [formId]: {
-          ...state[formId],
-          controls: Object.keys(data).reduce(
-            (acc, key) => {
-              return {
-                ...acc,
-                [key]: {
-                  ...state[formId].controls[key],
-                  value: data[key],
-                  validity: true,
-                  errorText: '',
-                },
-              }
-            },
-            { ...state.controls },
-          ),
-        },
-      }
-    case SET_SUBMITTED:
-      return { ...state, [formId]: { ...state[formId], hasSubmitted } }
-    case SET_PERSIST_FORM_DATA:
-      return {
-        ...state,
-        [formId]: { ...state[formId], persistData },
-      }
-    default:
-      return state
-  }
-}

package/src/javascripts/ui/utils/general-utils.js

@@ -1,13 +1,12 @@
 export const debounce = (func, wait) => {
   let timeout
   return function (...args) {
-    const context = this
     let isCancelled = false
     clearTimeout(timeout)
     timeout = setTimeout(() => {
       timeout = null
       if (!isCancelled) {
-        func.apply(context, args)
+        func.apply(this, args)
       }
       isCancelled = false
     }, wait)
@@ -15,7 +14,7 @@ export const debounce = (func, wait) => {
     return (runInstant) => {
       isCancelled = true
       if (runInstant) {
-        func.apply(context, args)
+        func.apply(this, args)
       }
     }
   }
@@ -103,7 +102,7 @@ export const formatBytes = (bytes, decimals = 2) => {
 
   const i = Math.floor(Math.log(bytes) / Math.log(k))
 
-  return parseFloat((bytes / k ** i).toFixed(dm)) + ' ' + sizes[i]
+  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
 }
 
 export const getUrlParams = () => {

package/src/javascripts/ui/utils/seamly-utils.ts

@@ -0,0 +1,73 @@
+export const eventTypes = {
+  info: 'info',
+  message: 'message',
+  participant: 'participant',
+  system: 'system',
+} as const
+
+export const payloadTypes = {
+  choicePrompt: 'choice_prompt',
+  text: 'text',
+  image: 'image',
+  video: 'video',
+  participant: 'participant',
+  divider: 'divider',
+  translation: 'translation',
+  message: 'message',
+  countdown: 'countdown',
+  upload: 'upload',
+  cta: 'cta',
+  splash: 'splash',
+}
+
+export const entryTypes = {
+  text: 'text',
+  upload: 'upload',
+}
+
+export const readStates = {
+  received: 'received',
+  read: 'read',
+}
+
+export const actionTypes = {
+  pickChoice: 'pick_choice',
+  navigate: 'navigate',
+  custom: 'custom',
+  typing: 'typing',
+  read: 'read',
+  detachService: 'detach_service',
+  interactivityUpdate: 'interactivity_update',
+  dismiss: 'dismiss',
+  sendTranscript: 'send_transcript',
+  setTopic: 'set_topic',
+  setTranslation: 'set_translation',
+  clickCta: 'click_cta',
+  clickCard: 'click_card',
+}
+
+export const dismissTypes = {
+  resumeConversationPrompt: 'resume_conversation_prompt',
+}
+
+export const ariaLiveLevels = {
+  assertive: 'assertive',
+  polite: 'polite',
+}
+
+export const dividerKeys = {
+  new_topic: 'newTopic',
+  new_translation: 'newTranslation',
+}
+
+export const featureKeys = {
+  sendTranscript: 'sendTranscript',
+  typingPeekahead: 'typingPeekahead',
+  uploads: 'uploads',
+}
+
+export const cardTypes = {
+  ask: 'ask',
+  navigate: 'navigate',
+  topic: 'topic',
+}

package/webpack/config.common.js

@@ -51,6 +51,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
       publicPath: PUBLIC_PATH,
     },
     resolve: {
+      extensions: ['.js', '.ts', '.tsx'],
       modules: [path.resolve(__dirname, '../src/javascripts'), 'node_modules'],
       alias: {
         ...ALIASSES,
@@ -116,6 +117,21 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
           exclude: /(doc-site[\\\/]+|node_modules|bower_components)/,
           use: ['style-loader', ...site.scssLoaders({ browsers: BROWSERS })],
         },
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          exclude: /node_modules|\.d\.ts$/,
+          options: {
+            compilerOptions: {
+              outDir: 'build',
+              noEmit: false,
+            },
+          },
+        },
+        {
+          test: /\.d\.ts$/,
+          loader: 'ignore-loader',
+        },
       ],
     },
   }

package/webpack/config.dev.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const webpackMerge = require('webpack-merge').merge
 const site = require('@seamly/doc-site/lib/config/site')
 const defaultConfig = require('./defaults')