@seamly/web-ui 18.2.0 → 19.0.0-beta.1

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

@@ -2,7 +2,6 @@ import { useCallback, useContext } from 'preact/hooks'
 import {
   useSeamlyApiContext,
   useSeamlyHasConversation,
-  useSeamlyHasUserResponded,
 } from './seamly-api-hooks'
 import {
   useSeamlyStateContext,
@@ -10,17 +9,18 @@ import {
 } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { SeamlyEventBusContext } from '../components/core/seamly-api-context'
-import useSeamlyInterrupt from './use-seamly-interrupt'
 import { randomId } from '../../lib/id'
 import { userParticipantId } from '../../config'
 import { sanitizeText } from '../utils/general-utils'
 import { actionTypes, seamlyActions } from '../utils/seamly-utils'
 import { useStableCallback } from './utility-hooks'
+import { Actions as InterruptActions } from '../../domains/interrupt'
+import { useConfig } from '../../domains/config'
+import { useUserHasResponded } from '../../domains/app'
 
 const {
   ADD_EVENT,
   CLEAR_EVENTS,
-  CLEAR_INTERRUPT,
   SET_IS_LOADING,
   CLEAR_PARTICIPANTS,
   SET_HEADER_SUB_TITLE,
@@ -33,18 +33,15 @@ const {
 
 const useSeamlyCommands = () => {
   const api = useSeamlyApiContext()
-  const seamlyState = useSeamlyStateContext()
+  const appConfig = useConfig()
   const dispatch = useSeamlyDispatchContext()
   const eventBus = useContext(SeamlyEventBusContext)
-  const { setInterrupt } = useSeamlyInterrupt()
 
-  const hasResponded = useSeamlyHasUserResponded()
+  const hasResponded = useUserHasResponded()
   const hasConversation = useSeamlyHasConversation()
   const { visible: visibility } = useSeamlyStateContext()
   const unreadMessageCount = useSeamlyUnreadCount()
 
-  const { config: appConfig } = seamlyState
-
   const emitEvent = useCallback(
     (...args) => {
       eventBus.emit(...args)
@@ -78,8 +75,8 @@ const useSeamlyCommands = () => {
   ])
 
   const reset = useCallback(async () => {
+    dispatch(InterruptActions.clear())
     dispatch({ type: CLEAR_EVENTS })
-    dispatch({ type: CLEAR_INTERRUPT })
     dispatch({
       type: SET_IS_LOADING,
       isLoading: true,
@@ -99,41 +96,30 @@ const useSeamlyCommands = () => {
     })
 
     try {
-      const { accountConfig = {}, initialState = {} } = await api.reset()
-      const { features } = accountConfig || {}
+      const { features } = await api.reset()
 
       dispatch({ type: SET_FEATURES, features })
-      dispatch({ type: SET_INITIAL_STATE, initialState })
+      dispatch({ type: SET_INITIAL_STATE, initialState: {} })
     } catch (error) {
-      setInterrupt(error)
+      dispatch(InterruptActions.set(error))
     }
-  }, [api, dispatch, appConfig, setInterrupt])
+  }, [api, dispatch, appConfig])
 
   const getMessageBase = useCallback(
-    type => {
-      const { events } = seamlyState
-
-      return {
-        type,
-        id: randomId(),
-        transactionId: randomId(),
-        participant: userParticipantId,
-        fromClient: true,
-        // We add a timestamp of 1 greater than the previous timestamp in the
-        // events array to ensure proper sorting should a history fetch be done
-        // prior to receipt of the related ACK.
-        occurredAt:
-          events.length > 0
-            ? events[events.length - 1].payload.occurredAt + 1
-            : Date.now(),
-        meta: {},
-      }
-    },
-    [seamlyState],
+    (type) => ({
+      type,
+      id: randomId(),
+      transactionId: randomId(),
+      participant: userParticipantId,
+      fromClient: true,
+      occurredAt: Date.now() * 1000,
+      meta: {},
+    }),
+    [],
   )
 
   const getTextMessageBase = useCallback(
-    bodyText => {
+    (bodyText) => {
       const base = getMessageBase('text')
 
       return {
@@ -177,7 +163,7 @@ const useSeamlyCommands = () => {
   )
 
   const addMessageBubble = useCallback(
-    text => {
+    (text) => {
       dispatch({
         type: ADD_EVENT,
         event: { type: 'message', payload: getTextMessageBase(text) },
@@ -187,16 +173,7 @@ const useSeamlyCommands = () => {
   )
 
   const addUploadBubble = useCallback(
-    (
-      id,
-      transactionId,
-      occurredAt,
-      contentType,
-      deleteAt,
-      filename,
-      filesize,
-      url,
-    ) => {
+    (id, transactionId, occurredAt, contentType, filename, filesize, url) => {
       dispatch({
         type: ADD_EVENT,
         event: {
@@ -209,7 +186,7 @@ const useSeamlyCommands = () => {
             fromClient: true,
             occurredAt,
             meta: {},
-            body: { contentType, deleteAt, filename, filesize, url },
+            body: { contentType, filename, filesize, url },
           },
         },
       })
@@ -218,7 +195,7 @@ const useSeamlyCommands = () => {
   )
 
   const addDivider = useCallback(
-    subtype => {
+    (subtype) => {
       const payload = {
         body: { subtype, type: 'divider' },
         fromClient: false,
@@ -253,7 +230,7 @@ const useSeamlyCommands = () => {
   )
 
   const sendAction = useCallback(
-    body => {
+    (body) => {
       if (!body) {
         return
       }
@@ -269,7 +246,7 @@ const useSeamlyCommands = () => {
   )
 
   const sendContext = useCallback(
-    context => {
+    (context) => {
       api.sendContext(context)
     },
     [api],
@@ -282,15 +259,15 @@ const useSeamlyCommands = () => {
 
     return api
       .connect()
-      .then(initialState => {
+      .then((initialState) => {
         if (initialState) {
           dispatch({ type: SET_INITIAL_STATE, initialState })
         }
       })
-      .catch(error => {
-        setInterrupt(error)
+      .catch((error) => {
+        dispatch(InterruptActions.set(error))
       })
-  }, [api, dispatch, setInterrupt])
+  }, [api, dispatch])
 
   return {
     connect,

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

@@ -41,7 +41,7 @@ const useSeamlyIdleDetachCountdown = () => {
   const { sendAssertive, sendPolite } = useLiveRegion()
 
   const sendAssertiveIfOpen = useCallback(
-    text => {
+    (text) => {
       const { isOpen } = stableState.current
       if (isOpen) {
         sendAssertive(text)
@@ -51,7 +51,7 @@ const useSeamlyIdleDetachCountdown = () => {
   )
 
   const sendPoliteIfOpen = useCallback(
-    text => {
+    (text) => {
       const { isOpen } = stableState.current
       if (isOpen) {
         sendPolite(text)
@@ -61,7 +61,7 @@ const useSeamlyIdleDetachCountdown = () => {
   )
 
   const initCountdown = useCallback(
-    milliseconds => {
+    (milliseconds) => {
       const delaySeconds = millisecondsToSeconds(milliseconds)
       const delayTime = getTimeFromSeconds(delaySeconds)
 

package/src/javascripts/ui/hooks/use-seamly-stored-visibility.js

@@ -1,9 +1,9 @@
 import { useCallback } from 'preact/hooks'
-import { useSeamlyConfig } from './seamly-state-hooks'
 import { useSeamlyObjectStore } from './seamly-api-hooks'
+import { useConfig } from '../../domains/config'
 
 const useSeamlyStoredVisibility = () => {
-  const { layoutMode } = useSeamlyConfig()
+  const { layoutMode } = useConfig()
   const key = 'visibility'
   const { get, set } = useSeamlyObjectStore()
 
@@ -15,7 +15,7 @@ const useSeamlyStoredVisibility = () => {
   }
 
   const setStoredVisibility = useCallback(
-    state => {
+    (state) => {
       const saved = get ? get(key) : {}
       set(key, { ...saved, [layoutMode]: state })
     },

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

@@ -1,32 +1,30 @@
 import { useCallback } from 'preact/hooks'
 import {
-  useSeamlyConfig,
   useSeamlyStateContext,
   useSeamlyUnreadCount,
 } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
-import {
-  useSeamlyHasConversation,
-  useSeamlyHasUserResponded,
-} from './seamly-api-hooks'
+import { useSeamlyHasConversation } from './seamly-api-hooks'
 import useSeamlyStoredVisibility from './use-seamly-stored-visibility'
 import {
   calculateVisibility,
   seamlyActions,
   visibilityStates,
 } from '../utils/seamly-utils'
+import { useConfig } from '../../domains/config'
+import { useUserHasResponded } from '../../domains/app'
 
 const { SET_VISIBILITY } = seamlyActions
 
 const useSeamlyVisibility = () => {
-  const config = useSeamlyConfig()
+  const config = useConfig()
   const { layoutMode, visibilityCallback } = config
   const { visible } = useSeamlyStateContext()
   const { emitEvent } = useSeamlyCommands()
   const dispatch = useSeamlyDispatchContext()
   const [storedVisibility, setStoredVisibility] = useSeamlyStoredVisibility()
-  const hasResponded = useSeamlyHasUserResponded()
+  const hasResponded = useUserHasResponded()
   const hasConversation = useSeamlyHasConversation()
   const unreadMessageCount = useSeamlyUnreadCount()
   const isVisible = visible ? visible !== visibilityStates.hidden : false
@@ -38,7 +36,7 @@ const useSeamlyVisibility = () => {
       : false
 
   const setVisibility = useCallback(
-    visibility => {
+    (visibility) => {
       const visibilityFn = visibilityCallback || calculateVisibility
       const requestedVisibility = visibilityFn({
         hasConversation,

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

@@ -13,6 +13,8 @@ const useSingleFileUpload = (formId, name) => {
   // This hook HAS to be used inside the FormBoundary of the file upload.
   const { currentUploads } = useFileUploads()
 
+  const hasFile = fileList && fileList.length > 0
+
   let uploadHandle = null
   let hasServerError = false
   let progress = 0
@@ -24,7 +26,8 @@ const useSingleFileUpload = (formId, name) => {
   }
 
   return {
-    selectedFileName: fileList && fileList.length > 0 ? fileList[0].name : '',
+    hasFile,
+    selectedFileName: hasFile ? fileList[0].name : '',
     uploadHandle,
     hasServerError,
     progress,

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

@@ -11,7 +11,7 @@ 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 [ignored, forceUpdate] = useReducer((x) => x + 1, 0)
 
   return useCallback(() => {
     setTimeout(() => {
@@ -25,7 +25,7 @@ export const useGeneratedId = () => {
   return id
 }
 
-export const useStableCallback = callback => {
+export const useStableCallback = (callback) => {
   const callbackRef = useRef()
   callbackRef.current = callback
   const isFunction = typeof callback === 'function'

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

@@ -41,7 +41,7 @@ export const formReducer = (state, action) => {
     persistData,
   } = action
 
-  const setControls = controls => ({
+  const setControls = (controls) => ({
     ...state,
     [formId]: {
       ...state[formId],
@@ -112,8 +112,8 @@ export const formReducer = (state, action) => {
           ...state[formId],
           controls: newControlValidities,
           validity: Object.keys(newControlValidities)
-            .map(key => newControlValidities[key].validity)
-            .every(v => v),
+            .map((key) => newControlValidities[key].validity)
+            .every((v) => v),
         },
       }
     case SET_STATE:

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

@@ -1,6 +1,6 @@
 export const debounce = (func, wait) => {
   let timeout
-  return function(...args) {
+  return function (...args) {
     const context = this
     let isCancelled = false
     clearTimeout(timeout)
@@ -12,7 +12,7 @@ export const debounce = (func, wait) => {
       isCancelled = false
     }, wait)
 
-    return runInstant => {
+    return (runInstant) => {
       isCancelled = true
       if (runInstant) {
         func.apply(context, args)
@@ -54,7 +54,7 @@ export const closestElement = (el, match) => {
 export const createAriaHider = () => {
   const originalValues = []
   const rootNodes = []
-  document.querySelectorAll('body > *:not([role="dialog"])').forEach(node => {
+  document.querySelectorAll('body > *:not([role="dialog"])').forEach((node) => {
     const attr = node.getAttribute('aria-hidden')
     const alreadyHidden = attr !== null && attr !== 'false'
     if (alreadyHidden) {
@@ -77,17 +77,17 @@ export const createAriaHider = () => {
   }
 }
 
-export const propIsTrue = prop => prop === 'true' || prop === true
+export const propIsTrue = (prop) => prop === 'true' || prop === true
 
-export const millisecondsToSeconds = milliseconds => {
+export const millisecondsToSeconds = (milliseconds) => {
   return Math.ceil(milliseconds / 1000)
 }
 
-export const microsecondsToMilliseconds = microseconds => {
+export const microsecondsToMilliseconds = (microseconds) => {
   return Math.ceil(microseconds / 1000)
 }
 
-export const sanitizeText = text =>
+export const sanitizeText = (text) =>
   text
     .replace(/&/g, '&')
     .replace(/</g, '&lt;')
@@ -96,7 +96,7 @@ export const sanitizeText = text =>
     .replace(/'/g, '&#39;')
     .replace(/\//g, '&#x2F;')
 
-export const getTimeFromSeconds = seconds => {
+export const getTimeFromSeconds = (seconds) => {
   const minutes = Math.floor(seconds / 60)
   const secondsPartial = seconds - minutes * 60
 
@@ -130,7 +130,7 @@ export const getUrlParams = () => {
   }, {})
 }
 
-export const getUrlSearchString = params => {
+export const getUrlSearchString = (params) => {
   return Object.keys(params).reduce(
     (search, key) =>
       `${search}${search ? '&' : ''}${key}=${encodeURIComponent(params[key])}`,
@@ -158,9 +158,9 @@ export const keyNames = {
   ArrowDown: 'ArrowDown',
 }
 
-export const getKey = e => (e.code ? keyNames[e.code] : keyCodes[e.keyCode])
+export const getKey = (e) => (e.code ? keyNames[e.code] : keyCodes[e.keyCode])
 
-export const focusElement = el => {
+export const focusElement = (el) => {
   if (el) {
     el.focus()
   }
@@ -195,15 +195,14 @@ export const getRelativeDate = (date, currentDate) => {
   }
 }
 
-export const flattenObject = (obj, prefix = '') =>
-  Object.keys(obj).reduce((acc, k) => {
-    const pre = prefix.length ? `${prefix}.` : ''
-    if (
-      typeof obj[k] === 'object' &&
-      obj[k] !== null &&
-      Object.keys(obj[k]).length > 0
-    )
-      Object.assign(acc, flattenObject(obj[k], pre + k))
-    else acc[pre + k] = obj[k]
-    return acc
+export const pick = (obj, keys) =>
+  keys.reduce((accum, key) => {
+    if (key in obj) accum[key] = obj[key]
+    return accum
+  }, {})
+
+export const omit = (obj, keys) =>
+  Object.keys(obj).reduce((accum, key) => {
+    if (!keys.includes(key)) accum[key] = obj[key]
+    return accum
   }, {})