@seamly/web-ui 18.1.1 → 18.3.1

package/src/javascripts/ui/components/conversation/event/choice-prompt.js

@@ -13,7 +13,7 @@ import { useI18n } from '../../../../domains/i18n'
 import { useTranslatedEventData } from '../../../../domains/translations'
 import MessageContainer from '../message-container'
 
-export const useChoicePrompt = event => {
+export const useChoicePrompt = (event) => {
   const { payload } = event
   const [showOptions, setShowOptions] = useState(false)
   const { sendAction, addMessageBubble, addDivider } = useSeamlyCommands()
@@ -45,7 +45,7 @@ export const useChoicePrompt = event => {
     setShowOptions(payload.id === lastEventId)
   }, [payload, lastEventId])
 
-  const onChoiceClickHandler = choice => {
+  const onChoiceClickHandler = (choice) => {
     if (chooseAgain) {
       addDivider('new_topic')
     }
@@ -63,7 +63,7 @@ export const useChoicePrompt = event => {
   }
 
   const onChooseAgainClickHandler = () => {
-    setShowOptions(s => !s)
+    setShowOptions((s) => !s)
   }
 
   return {
@@ -91,7 +91,7 @@ const ChoicePrompt = ({ event, children, ...props }) => {
 
   return (
     <>
-      {toChildArray(children).map(child => {
+      {toChildArray(children).map((child) => {
         child.props = {
           ...child.props,
           event: subEvent,
@@ -126,8 +126,13 @@ const ChoicePrompt = ({ event, children, ...props }) => {
           {...props}
         >
           <ul className={className('choice-prompt', 'choice-prompt--many')}>
-            {body.choices.map(choice => (
-              <li key={choice.id} className={className('choice-prompt__item')}>
+            {body.choices.map((choice) => (
+              <li
+                key={choice.id}
+                className={className('choice-prompt__item', {
+                  [`choice-prompt__item--${choice.category}`]: choice.category,
+                })}
+              >
                 <button
                   type="button"
                   className={className('button', 'button--primary')}

package/src/javascripts/ui/components/conversation/event/cta.js

@@ -3,7 +3,6 @@ import { className } from '../../../../lib/css'
 import parseBody from '../../../../lib/parse-body'
 import { useGeneratedId, useSeamlyCommands } from '../../../hooks/seamly-hooks'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import useTextRendering from './hooks/use-text-rendering'
 import { actionTypes } from '../../../utils/seamly-utils'
 import MessageContainer from '../message-container'
 import { useTranslatedEventData } from '../../../../domains/translations'
@@ -14,10 +13,6 @@ const Cta = ({ event }) => {
   const { emitEvent } = useSeamlyCommands()
 
   const descriptionId = useGeneratedId()
-  const eventBody = useTextRendering({
-    text: parseBody(body.description),
-    variables: body.variables,
-  })
 
   const onClickHandler = useCallback(
     () =>
@@ -36,7 +31,7 @@ const Cta = ({ event }) => {
       <div
         className={className('cta__content')}
         id={descriptionId}
-        dangerouslySetInnerHTML={{ __html: eventBody }}
+        dangerouslySetInnerHTML={{ __html: parseBody(body.description) }}
         onClick={eventClick}
       />
       <a

package/src/javascripts/ui/components/conversation/event/divider/variants/new-translation.js

@@ -10,7 +10,7 @@ const NewTranslationDivider = ({ event }) => {
   const { enableTranslations, languages } = useTranslations()
 
   const languageName = useMemo(() => {
-    return languages?.find(lang => lang.locale === translationLocale)
+    return languages?.find((lang) => lang.locale === translationLocale)
       ?.nativeName
   }, [languages, translationLocale])
 

package/src/javascripts/ui/components/conversation/event/event-participant.js

@@ -1,13 +1,11 @@
-import {
-  useSeamlyConfig,
-  useSeamlyParticipant,
-} from '../../../hooks/seamly-hooks'
+import { useSeamlyParticipant } from '../../../hooks/seamly-hooks'
 import { className } from '../../../../lib/css'
+import { useConfig } from '../../../../domains/config'
 
 const EventParticipant = ({ eventPayload }) => {
   const { fromClient, participant: participantId } = eventPayload
   const participant = useSeamlyParticipant(participantId) || {}
-  const { messages, defaults } = useSeamlyConfig()
+  const { messages, defaults } = useConfig()
 
   const participantName = participant && participant.name
   const { showAvatar, showName } = messages[fromClient ? 'user' : 'agent'] || {}

package/src/javascripts/ui/components/conversation/event/hooks/use-event-link-click-handler.js

@@ -1,10 +1,10 @@
 import { actionTypes } from '../../../../utils/seamly-utils'
 import { useSeamlyCommands } from '../../../../hooks/seamly-hooks'
 
-const useEventLinkClickHandler = eventId => {
+const useEventLinkClickHandler = (eventId) => {
   const { sendAction } = useSeamlyCommands()
 
-  const eventClick = e => {
+  const eventClick = (e) => {
     if (e.target && e.target.dataset.linkId) {
       sendAction({
         type: actionTypes.navigate,

package/src/javascripts/ui/components/conversation/event/hooks/use-formatted-date.js

@@ -1,13 +1,13 @@
 import { useI18n } from '../../../../../domains/i18n'
-import { useSeamlyConfig } from '../../../../hooks/seamly-hooks'
 import { getRelativeDate } from '../../../../utils/general-utils'
+import { useConfig } from '../../../../../domains/config'
 
 const dateFormatOptions = { month: 'long', day: 'numeric', year: 'numeric' }
 const timeFormatOptions = { hour: 'numeric', minute: 'numeric' }
 
-export const useFormattedDate = date => {
+export const useFormattedDate = (date) => {
   const { t } = useI18n()
-  const config = useSeamlyConfig()
+  const config = useConfig()
   const locale = config?.context?.locale ?? []
   const eventDate = new Date(date)
   const currentDate = new Date()

package/src/javascripts/ui/components/conversation/event/hooks/use-text-rendering.js

@@ -1,11 +1,11 @@
 import { useMemo } from 'preact/hooks'
 import Mustache from 'mustache'
 
-Mustache.escape = function(escapeText) {
+Mustache.escape = function (escapeText) {
   return escapeText
 }
 
-const parseLinkVariable = variable => {
+const parseLinkVariable = (variable) => {
   return `<a href='${variable.url}' data-link-id='${variable.id}' ${
     variable.newTab ? 'target="_blank"' : ''
   }>${variable.name}</a>`
@@ -26,7 +26,7 @@ export function parseRichtText(text, variables = {}) {
 
   // Disable escaping as we'll be generating HTML
   const oldEscape = Mustache.escape
-  Mustache.escape = function(escapeText) {
+  Mustache.escape = function (escapeText) {
     return escapeText
   }
   const output = Mustache.render(text, view)

package/src/javascripts/ui/components/conversation/event/participant.js

@@ -2,11 +2,11 @@ import { useMemo } from 'preact/hooks'
 import Mustache from 'mustache'
 import parseBody from '../../../../lib/parse-body'
 import EventDivider from '../event-divider'
-import { useSeamlyConfig } from '../../../hooks/seamly-hooks'
 import { useTranslatedEventData } from '../../../../domains/translations'
+import { useConfig } from '../../../../domains/config'
 
 const Participant = ({ event }) => {
-  const { agentIcon } = useSeamlyConfig().defaults || {}
+  const { agentIcon } = useConfig().defaults || {}
 
   const { participant } = event.payload
   const [introduction] = useTranslatedEventData(event)

package/src/javascripts/ui/components/conversation/event/upload.js

@@ -1,7 +1,7 @@
+import { useMemo } from 'preact/hooks'
 import { className } from '../../../../lib/css'
 import Icon from '../../layout/icon'
 import { useI18n } from '../../../../domains/i18n'
-import { microsecondsToMilliseconds } from '../../../utils/general-utils'
 import MessageContainer from '../message-container'
 import { useTranslatedEventData } from '../../../../domains/translations'
 
@@ -18,40 +18,25 @@ const Upload = ({ event, ...props }) => {
   const { t } = useI18n()
   const [body] = useTranslatedEventData(event)
   const { fromClient } = event.payload
-  const { deleteAt, filename, url } = body
-  const deleted =
-    url && !!deleteAt && microsecondsToMilliseconds(deleteAt) < Date.now()
+  const { filename, url } = body
 
-  const getSrText = () => {
-    if (url) {
-      if (deleted) {
-        return t('fileUpload.srFileUnavailableText', filename)
-      } else {
-        return t('fileUpload.srFileDownloadText', filename)
-      }
-    } else {
-      return t('fileUpload.srFileUploadedText', filename)
-    }
-  }
+  const srText = useMemo(
+    () =>
+      url
+        ? t('fileUpload.srFileDownloadText', filename)
+        : t('fileUpload.srFileUploadedText', filename),
+    [url, filename, t],
+  )
 
   return (
-    <MessageContainer
-      event={event}
-      type="upload"
-      modifiers={deleted && 'deleted'}
-      info={deleted ? t('fileUpload.fileUnavailableText') : undefined}
-      {...props}
-    >
+    <MessageContainer event={event} type="upload" {...props}>
       <div className={className('download')}>
         <Icon name="download" size="16" />
-        <UploadContent
-          url={!deleted && url}
-          target={!fromClient ? '_blank' : undefined}
-        >
+        <UploadContent url={url} target={!fromClient ? '_blank' : undefined}>
           <span aria-hidden="true" className={className('file-download')}>
             {filename}
           </span>
-          <span className={className('visually-hidden')}>{getSrText()}</span>
+          <span className={className('visually-hidden')}>{srText}</span>
         </UploadContent>
       </div>
     </MessageContainer>

package/src/javascripts/ui/components/conversation/message-container.js

@@ -18,10 +18,8 @@ function MessageContainer({
   const classNames = useSeamlyMessageContainerClassNames(event)
   const { t } = useI18n()
 
-  const [
-    ,
-    { hasTranslation, isTranslated, toggleTranslation, locale },
-  ] = useTranslatedEventData(event)
+  const [, { hasTranslation, isTranslated, toggleTranslation, locale }] =
+    useTranslatedEventData(event)
 
   if (type) {
     classNames.push('message--type-' + type)
@@ -29,9 +27,9 @@ function MessageContainer({
   if (modifiers) {
     if (typeof modifiers === 'string') {
       // eslint-disable-next-line no-param-reassign
-      modifiers = modifiers.split(' ').filter(v => v.length)
+      modifiers = modifiers.split(' ').filter((v) => v.length)
     }
-    modifiers.forEach(modifier => {
+    modifiers.forEach((modifier) => {
       classNames.push('message--' + modifier)
     })
   }

package/src/javascripts/ui/components/core/seamly-activity-monitor.js

@@ -5,15 +5,13 @@ import {
   useSeamlyIdleDetachCountdown,
 } from '../../hooks/seamly-hooks'
 import { activitySendDelay } from '../../../config'
+import { className } from '../../../lib/css'
 
 const SeamlyActivityMonitor = ({ children }) => {
   const prevSendTimestamp = useRef(0)
   const { sendAction } = useSeamlyCommands()
-  const {
-    hasCountdown,
-    isActive,
-    stopCountdown,
-  } = useSeamlyIdleDetachCountdown()
+  const { hasCountdown, isActive, stopCountdown } =
+    useSeamlyIdleDetachCountdown()
 
   const onActivityHandler = useCallback(() => {
     const timeStamp = new Date().getTime()
@@ -38,6 +36,7 @@ const SeamlyActivityMonitor = ({ children }) => {
   // be fired inside the container on the initial focus event.
   return (
     <div
+      className={className('activity-monitor')}
       tabIndex="-1"
       onMouseDown={onActivityHandler}
       onKeyUp={onActivityHandler}

package/src/javascripts/ui/components/core/seamly-core.js

@@ -1,4 +1,3 @@
-import SeamlyApi from './seamly-api'
 import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
 import SeamlyReadState from './seamly-read-state'
 import SeamlyNewNotifications from './seamly-new-notifications'
@@ -8,14 +7,14 @@ import SeamlyActivityMonitor from './seamly-activity-monitor'
 import SeamlyInitializer from './seamly-initializer'
 import SeamlyEventSubscriber from './seamly-event-subscriber'
 import SeamlyFileUpload from './seamly-file-upload'
-import { SeamlyEventBusContext } from './seamly-api-context'
-import StoreProvider from '../../store'
+import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
+import { StoreProvider } from '../../../domains/redux'
 
-const SeamlyCore = ({ children, config, eventBus }) => {
+const SeamlyCore = ({ store, children, config, eventBus, api }) => {
   return (
-    <StoreProvider translations={config.translations}>
+    <StoreProvider store={store}>
       <SeamlyEventBusContext.Provider value={eventBus}>
-        <SeamlyApi>
+        <SeamlyApiContext.Provider value={api}>
           <SeamlyLiveRegion>
             <SeamlyInitializer config={config} />
             <SeamlyEventSubscriber eventBus={eventBus} />
@@ -27,7 +26,7 @@ const SeamlyCore = ({ children, config, eventBus }) => {
               <SeamlyFileUpload>{children}</SeamlyFileUpload>
             </SeamlyActivityMonitor>
           </SeamlyLiveRegion>
-        </SeamlyApi>
+        </SeamlyApiContext.Provider>
       </SeamlyEventBusContext.Provider>
     </StoreProvider>
   )

package/src/javascripts/ui/components/core/seamly-event-subscriber.js

@@ -2,7 +2,6 @@ import { useEffect, useRef } from 'preact/hooks'
 import { seamlyActions, featureKeys } from '../../utils/seamly-utils'
 import { useI18n } from '../../../domains/i18n'
 import {
-  useSeamlyInterrupt,
   useSeamlyOptions,
   useEvents,
   useSeamlyApiContext,
@@ -13,6 +12,7 @@ import {
 import SeamlyGeneralError from '../../../api/errors/seamly-general-error'
 import SeamlySessionExpiredError from '../../../api/errors/seamly-session-expired-error'
 import SeamlyOfflineError from '../../../api/errors/seamly-offline-error'
+import { Actions as InterruptActions } from '../../../domains/interrupt'
 
 const {
   ADD_EVENT,
@@ -20,7 +20,6 @@ const {
   SET_IS_LOADING,
   SET_PARTICIPANT,
   SET_HEADER_SUB_TITLE,
-  CLEAR_INTERRUPT,
   SET_ACTIVE_SERVICE,
   INIT_RESUME_CONVERSATION_PROMPT,
   CLEAR_EVENTS,
@@ -38,14 +37,13 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
   const dispatch = useSeamlyDispatchContext()
   const events = useEvents()
   const prevEmittedEventId = useRef(null)
-  const { setInterrupt } = useSeamlyInterrupt()
   const { setUserSelectedOption } = useSeamlyOptions()
   const { initCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
   const { emitEvent } = useSeamlyCommands()
 
   useEffect(() => {
     if (api.connectionInfo) {
-      const updateParticipant = event => {
+      const updateParticipant = (event) => {
         const { payload } = event
 
         if (!payload || !payload.participant) {
@@ -73,7 +71,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
       }
 
       api.stream().subscribe({
-        next: event => {
+        next: (event) => {
           const { type, payload } = event
           switch (type) {
             case 'ui':
@@ -178,19 +176,21 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
             case 'error':
               switch (payload.type) {
                 case 'find_conversation_erred':
-                  setInterrupt(new SeamlySessionExpiredError())
+                  dispatch(
+                    InterruptActions.set(new SeamlySessionExpiredError()),
+                  )
                   break
                 case 'seamly_offline':
-                  setInterrupt(new SeamlyOfflineError())
+                  dispatch(InterruptActions.set(new SeamlyOfflineError()))
                   dispatch({ type: CLEAR_EVENTS })
                   break
                 default:
-                  setInterrupt(new SeamlyGeneralError())
+                  dispatch(InterruptActions.set(new SeamlyGeneralError()))
                   break
               }
               break
             case 'socket_opened':
-              dispatch({ type: CLEAR_INTERRUPT })
+              dispatch(InterruptActions.clear())
               break
           }
         },
@@ -199,7 +199,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
       api
         .stream()
         .filter(
-          e =>
+          (e) =>
             e.type === 'message' &&
             EMITTABLE_MESSAGE_TYPES.includes(e.payload.type),
         )
@@ -220,7 +220,6 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
     api,
     eventBus,
     t,
-    setInterrupt,
     setUserSelectedOption,
     initCountdown,
     endCountdown,
@@ -231,9 +230,9 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
     const subscribe = () => {
       return api
         .stream()
-        .filter(e => e.type === 'sync')
+        .filter((e) => e.type === 'sync')
         .subscribe({
-          next: event => {
+          next: (event) => {
             const { payload } = event
 
             const lastEvent = events[events.length - 1]
@@ -245,7 +244,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
 
             api
               .getConversation()
-              .then(history => {
+              .then((history) => {
                 if (!history) {
                   return
                 }
@@ -255,8 +254,8 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                   history,
                 })
               })
-              .catch(error => {
-                setInterrupt(error)
+              .catch((error) => {
+                dispatch(InterruptActions.set(error))
               })
           },
         })
@@ -270,7 +269,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
     }
 
     return () => {}
-  }, [api, events, dispatch, setInterrupt])
+  }, [api, events, dispatch])
 
   return null
 }

package/src/javascripts/ui/components/core/seamly-file-upload.js

@@ -21,20 +21,20 @@ const SeamlyFileUpload = ({ children }) => {
   const api = useSeamlyApiContext()
   const { addUploadBubble } = useSeamlyCommands()
 
-  const onUploadFileHandler = file => {
+  const onUploadFileHandler = (file) => {
     const fileId = randomId()
 
     const uploadHandle = api.uploadFile(
       file,
-      p => {
+      (p) => {
         dispatch({ type: SET_UPLOAD_PROGRESS, fileId, progress: Math.ceil(p) })
       },
-      result => {
+      (result) => {
         const {
           id,
           transactionId,
           occurredAt,
-          body: { contentType, deleteAt, filename, filesize, url },
+          body: { contentType, filename, filesize, url },
         } = result.body
         dispatch({ type: SET_UPLOAD_COMPLETE, fileId })
         addUploadBubble(
@@ -42,13 +42,12 @@ const SeamlyFileUpload = ({ children }) => {
           transactionId,
           occurredAt,
           contentType,
-          deleteAt,
           filename,
           filesize,
           url,
         )
       },
-      err => {
+      (err) => {
         const errorKey = err && err.body ? err.body.error : ''
         let errorText
 

package/src/javascripts/ui/components/core/seamly-idle-detach-counter.js

@@ -2,12 +2,8 @@ import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-cou
 import useInterval from '../../hooks/use-interval'
 
 const SeamlyIdleDetachCounter = () => {
-  const {
-    hasCountdown,
-    isActive,
-    remaining,
-    decrementCountdown,
-  } = useSeamlyIdleDetachCountdown()
+  const { hasCountdown, isActive, remaining, decrementCountdown } =
+    useSeamlyIdleDetachCountdown()
 
   useInterval(
     () => {

package/src/javascripts/ui/components/core/seamly-initializer.js

@@ -1,75 +1,22 @@
 import { useEffect, useRef } from 'preact/hooks'
-import {
-  getSeamlyConfig,
-  seamlyActions,
-  visibilityStates,
-} from '../../utils/seamly-utils'
-import { useI18n } from '../../../domains/i18n'
-import {
-  useSeamlyInterrupt,
-  useSeamlyOptions,
-  useSeamlyVisibility,
-  useSeamlyApiContext,
-  useSeamlyDispatchContext,
-} from '../../hooks/seamly-hooks'
+import { visibilityStates } from '../../utils/seamly-utils'
+import { useSeamlyOptions, useSeamlyVisibility } from '../../hooks/seamly-hooks'
+import { useConfig } from '../../../domains/config'
 
-const {
-  UPDATE_CONFIG,
-  SET_INITIAL_STATE,
-  SET_SHOW_DISCLAIMER,
-  SET_HEADER_SUB_TITLE,
-  SET_FEATURES,
-} = seamlyActions
-
-const SeamlyInitializer = ({ config }) => {
-  const { t } = useI18n()
-  const dispatch = useSeamlyDispatchContext()
-  const api = useSeamlyApiContext()
+const SeamlyInitializer = () => {
   const { initUserSelectedOptions } = useSeamlyOptions()
-  const { setInterrupt } = useSeamlyInterrupt()
   const seamlyInitialized = useRef(false)
   const { setVisibility } = useSeamlyVisibility()
+  const config = useConfig()
 
   useEffect(() => {
-    const seamlyConfig = getSeamlyConfig(config)
-    const { showDisclaimer } = config
-    const { agentName } = config.defaults || {}
-
-    dispatch({ type: UPDATE_CONFIG, config: seamlyConfig })
-
-    dispatch({ type: SET_SHOW_DISCLAIMER, showDisclaimer })
-
-    if (agentName) {
-      dispatch({
-        type: SET_HEADER_SUB_TITLE,
-        title: agentName,
-      })
-    }
-  }, [dispatch, config])
-
-  useEffect(() => {
-    const initSeamly = async () => {
+    if (config.api && !seamlyInitialized.current) {
       seamlyInitialized.current = true
       initUserSelectedOptions()
 
       setVisibility(visibilityStates.initialize)
-
-      try {
-        const { accountConfig = {}, initialState = {} } = await api.getConfig()
-        const { features } = accountConfig || {}
-
-        dispatch({ type: SET_FEATURES, features })
-
-        dispatch({ type: SET_INITIAL_STATE, initialState })
-      } catch (error) {
-        setInterrupt(error)
-      }
-    }
-
-    if (api.connectionInfo && !seamlyInitialized.current) {
-      initSeamly()
     }
-  }, [api, dispatch, t, setInterrupt, initUserSelectedOptions, setVisibility])
+  }, [initUserSelectedOptions, config, setVisibility])
 
   return null
 }