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

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

@@ -1,18 +1,44 @@
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import EventDivider from 'ui/components/conversation/event-divider'
 import { className } from 'lib/css'
-import { useTranslations, useLocaleNativeName } from 'domains/translations'
+import {
+  useTranslations,
+  useLocaleNativeName,
+} from 'domains/translations/hooks'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  enableEventsTranslation,
+  disableEventsTranslation,
+} from 'domains/translations/slice'
+import { useCallback } from 'preact/hooks'
+import { useEvents } from 'ui/hooks/seamly-hooks'
 
 const NewTranslationDivider = ({ event }) => {
   const { t } = useI18n()
-  const { translationEnabled, translationLocale, text } = event.payload.body
+  const events = useEvents()
+  const {
+    body: { translationEnabled, translationLocale, text },
+    id,
+  } = event.payload
   const { enableTranslations } = useTranslations()
   const localeNativeName = useLocaleNativeName(translationLocale)
+  const translatedEventGroups = useSelector(
+    (state) => state.translations.translatedEventGroups,
+  )
+
+  const dispatch = useDispatch()
+  const toggleTranslations = useCallback(() => {
+    if (!translatedEventGroups[id]) {
+      dispatch(disableEventsTranslation({ events, id }))
+      return
+    }
+
+    dispatch(enableEventsTranslation({ events, id }))
+  }, [dispatch, events, id, translatedEventGroups])
 
   const handleRestartButtonclick = () => {
     enableTranslations(translationLocale)
   }
-
   return (
     <EventDivider iconName="newTranslation" dividerType="newtranslation">
       <p className={className('divider__title')}>
@@ -24,10 +50,23 @@ const NewTranslationDivider = ({ event }) => {
         )}
       </p>
       {translationEnabled ? (
-        <p>{text}</p>
+        <>
+          <p>{text}</p>
+          <button
+            className={className('button', 'button--secondary')}
+            onClick={toggleTranslations}
+          >
+            {t(
+              !translatedEventGroups[id]
+                ? 'translations.toggle.hideTranslationsButtonText'
+                : 'translations.toggle.showTranslationsButtonText',
+            )}
+          </button>
+        </>
       ) : (
         <button
           className={className('button', 'button--secondary')}
+          data-testid="restartTranslationButton"
           onClick={handleRestartButtonclick}
         >
           {t('translations.divider.restartButtonText')}

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

@@ -1,7 +1,7 @@
 import { useSeamlyParticipant } from 'ui/hooks/seamly-hooks'
 import { className } from 'lib/css'
-import { useConfig } from 'domains/config'
-import { useI18n } from 'domains/i18n'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
 
 const EventParticipant = ({ eventPayload }) => {
   const { t } = useI18n()

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

@@ -1,6 +1,6 @@
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import { getRelativeDate } from 'ui/utils/general-utils'
-import { useConfig } from 'domains/config'
+import { useConfig } from 'domains/config/hooks'
 
 const dateFormatOptions = { month: 'long', day: 'numeric', year: 'numeric' }
 const timeFormatOptions = { hour: 'numeric', minute: 'numeric' }

package/src/javascripts/ui/components/conversation/event/image-lightbox.js

@@ -1,6 +1,6 @@
 import { useState } from 'preact/hooks'
 import Lightbox from 'ui/components/widgets/lightbox'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
 import Icon from 'ui/components/layout/icon'
 

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

@@ -1,20 +1,18 @@
+import { setLoadedImageEventIds } from 'domains/store/slice'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import { useState } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
-import { useStoreDispatch } from 'domains/redux'
 import ImageLightbox from './image-lightbox'
-import { seamlyActions } from '../../../utils/seamly-utils'
-
-const { SET_LOADED_IMAGE_EVENT_IDS } = seamlyActions
 
 const Image = ({ event, descriptorId, ...props }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const { description, url, isZoomable } = body
   const [showLighbox, setShowLightbox] = useState(false)
-  const dispatch = useStoreDispatch()
+  const dispatch = useDispatch()
 
   const handleOnLoad = () => {
-    dispatch({ type: SET_LOADED_IMAGE_EVENT_IDS, eventId: event.payload.id })
+    dispatch(setLoadedImageEventIds(event.payload.id))
     setShowLightbox(true)
   }
 

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

@@ -1,9 +1,9 @@
 import EventDivider from 'ui/components/conversation/event-divider'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 
 const Participant = ({ event }) => {
   const { participant } = event.payload
-  const [introduction] = useTranslatedEventData(event)
+  const { body: introduction } = useTranslatedEventData(event)
 
   if (!introduction) {
     return null

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

@@ -1,10 +1,10 @@
-import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import MessageContainer from '../message-container'
-import { useTranslatedEventData } from '../../../../domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
+import useEventLinkClickHandler from 'ui/components/conversation/event/hooks/use-event-link-click-handler'
+import MessageContainer from 'ui/components/conversation/message-container'
 
 const Splash = ({ event, ...props }) => {
   const { payload } = event
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const eventClick = useEventLinkClickHandler(payload.id)
 
   return (

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

@@ -1,10 +1,10 @@
 import { useMemo } from 'preact/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
 
 const Text = ({ event, ...props }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const eventClick = useEventLinkClickHandler(event.payload.id)
 
   const containerProps = useMemo(() => {

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

@@ -1,10 +1,10 @@
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 
 const Translation = ({ event, ...props }) => {
   const { t } = useI18n()
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   return (
     <MessageContainer type="text" event={event} {...props}>
       {t(body.key.join('.'), body.variables)}

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

@@ -1,9 +1,9 @@
 import { useMemo } from 'preact/hooks'
 import { className } from 'lib/css'
 import Icon from 'ui/components/layout/icon'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 
 const UploadContent = ({ children, url, target }) =>
   url ? (
@@ -21,7 +21,7 @@ const UploadContent = ({ children, url, target }) =>
 
 const Upload = ({ event, ...props }) => {
   const { t } = useI18n()
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const { fromClient } = event.payload
   const { filename, url } = body
 

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

@@ -1,10 +1,10 @@
 import { className } from 'lib/css'
 import { useSeamlyMessageContainerClassNames } from 'ui/hooks/seamly-hooks'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
 
 const Video = ({ event, descriptorId, ...props }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const { description, url } = body
   const classNames = useSeamlyMessageContainerClassNames(event)
 

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

@@ -1,12 +1,10 @@
 import { className } from 'lib/css'
 import { useSeamlyMessageContainerClassNames } from 'ui/hooks/component-helper-hooks'
-import { useTranslatedEventData } from 'domains/translations'
-import { useI18n } from 'domains/i18n'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import EventParticipant from './event/event-participant'
 
 function MessageContainer({
   showParticipant = true,
-  showTranslationToggle = true,
   event,
   type,
   modifiers,
@@ -16,13 +14,11 @@ function MessageContainer({
   ...props
 }) {
   const classNames = useSeamlyMessageContainerClassNames(event)
-  const { t } = useI18n()
 
-  const [, { hasTranslation, isTranslated, toggleTranslation, locale }] =
-    useTranslatedEventData(event)
+  const { hasTranslation, isTranslated, locale } = useTranslatedEventData(event)
 
   if (type) {
-    classNames.push('message--type-' + type)
+    classNames.push(`message--type-${type}`)
   }
   if (modifiers) {
     if (typeof modifiers === 'string') {
@@ -30,7 +26,7 @@ function MessageContainer({
       modifiers = modifiers.split(' ').filter((v) => v.length)
     }
     modifiers.forEach((modifier) => {
-      classNames.push('message--' + modifier)
+      classNames.push(`message--${modifier}`)
     })
   }
   if (isTranslated) {
@@ -60,24 +56,6 @@ function MessageContainer({
             {info}
           </div>
         )}
-        {showTranslationToggle && hasTranslation && (
-          <div className={className('message__translation-info')}>
-            <button
-              className={className(
-                'message__translation-toggle',
-                'button',
-                'button--secondary',
-              )}
-              onClick={toggleTranslation}
-            >
-              {t(
-                isTranslated
-                  ? 'translations.toggle.hideButtonText'
-                  : 'translations.toggle.showButtonText',
-              )}
-            </button>
-          </div>
-        )}
       </div>
     </>
   )

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

@@ -2,4 +2,4 @@ import { createContext } from 'preact'
 
 export const SeamlyApiContext = createContext(null)
 
-export const SeamlyEventBusContext = createContext('')
+export const SeamlyEventBusContext = createContext(null)

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

@@ -1,27 +1,28 @@
-import { useErrorBoundary } from 'preact/hooks'
-import { StoreProvider } from 'domains/redux'
 import { catchError } from 'domains/errors'
-import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
-import SeamlyReadState from './seamly-read-state'
-import SeamlyNewNotifications from './seamly-new-notifications'
-import SeamlyLiveRegion from './seamly-live-region'
-import SeamlyIdleDetachCounter from './seamly-idle-detach-counter'
+import { useErrorBoundary } from 'preact/hooks'
+import { Provider } from 'react-redux'
+import ComponentFilter from '../conversation/component-filter'
 import SeamlyActivityMonitor from './seamly-activity-monitor'
-import SeamlyInitializer from './seamly-initializer'
+import { SeamlyApiContext, SeamlyEventBusContext } from './seamly-api-context'
 import SeamlyEventSubscriber from './seamly-event-subscriber'
 import SeamlyFileUpload from './seamly-file-upload'
-import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
-import ComponentFilter from '../conversation/component-filter'
+import SeamlyIdleDetachCounter from './seamly-idle-detach-counter'
+import SeamlyInitializer from './seamly-initializer'
+import SeamlyInstanceFunctionsLoader from './seamly-instance-functions-loader'
+import SeamlyLiveRegion from './seamly-live-region'
+import SeamlyNewNotifications from './seamly-new-notifications'
+import SeamlyReadState from './seamly-read-state'
 
-const SeamlyCore = ({ store, children, config, eventBus, api }) => {
+const SeamlyCore = ({ store, children, eventBus, api }) => {
   useErrorBoundary((error) => store.dispatch(catchError(error)))
+
   return (
-    <StoreProvider store={store}>
+    <Provider store={store}>
       <SeamlyEventBusContext.Provider value={eventBus}>
         <SeamlyApiContext.Provider value={api}>
           <SeamlyLiveRegion>
             <ComponentFilter>
-              <SeamlyInitializer config={config} />
+              <SeamlyInitializer />
               <SeamlyEventSubscriber eventBus={eventBus} />
               <SeamlyReadState />
               <SeamlyNewNotifications />
@@ -34,7 +35,7 @@ const SeamlyCore = ({ store, children, config, eventBus, api }) => {
           </SeamlyLiveRegion>
         </SeamlyApiContext.Provider>
       </SeamlyEventBusContext.Provider>
-    </StoreProvider>
+    </Provider>
   )
 }
 

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

@@ -1,44 +1,39 @@
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
+import SeamlyOfflineError from 'api/errors/seamly-offline-error'
+import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
+import { setHasResponded } from 'domains/app/slice'
+import { clearInterrupt, setInterrupt } from 'domains/interrupt/slice'
+import {
+  ackEvent,
+  addEvent,
+  clearEvents,
+  initResumeConversationPrompt,
+  setActiveService,
+  setFeatureEnabledState,
+  setHeaderSubTitle,
+  setHistory,
+  setIsLoading,
+  setParticipant,
+  setServiceDataItem,
+  setServiceEntryMetadata,
+} from 'domains/store/slice'
 import { useEffect, useRef } from 'preact/hooks'
-import { seamlyActions, featureKeys } from 'ui/utils/seamly-utils'
-import { useI18n } from 'domains/i18n'
+import { useDispatch } from 'react-redux'
 import {
-  useSeamlyOptions,
   useEvents,
   useSeamlyApiContext,
-  useSeamlyDispatchContext,
-  useSeamlyIdleDetachCountdown,
   useSeamlyCommands,
+  useSeamlyIdleDetachCountdown,
 } from 'ui/hooks/seamly-hooks'
-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 * as InterruptActions from 'domains/interrupt/actions'
-import * as AppActions from 'domains/app/actions'
-
-const {
-  ADD_EVENT,
-  ACK_EVENT,
-  SET_IS_LOADING,
-  SET_PARTICIPANT,
-  SET_HEADER_SUB_TITLE,
-  SET_ACTIVE_SERVICE,
-  INIT_RESUME_CONVERSATION_PROMPT,
-  CLEAR_EVENTS,
-  SET_SERVICE_DATA_ITEM,
-  SET_FEATURE_ENABLED_STATE,
-  SET_SERVICE_ENTRY_METADATA,
-  SET_HISTORY,
-} = seamlyActions
+import { featureKeys } from 'ui/utils/seamly-utils'
 
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video']
 
 const SeamlyEventSubscriber = ({ eventBus }) => {
-  const { t } = useI18n()
   const api = useSeamlyApiContext()
-  const dispatch = useSeamlyDispatchContext()
+  const dispatch = useDispatch()
   const events = useEvents()
   const prevEmittedEventId = useRef(null)
-  const { setUserSelectedOption } = useSeamlyOptions()
   const { initCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
   const { emitEvent } = useSeamlyCommands()
 
@@ -54,33 +49,28 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
         const { fromClient, participant } = payload
 
         if (!fromClient && participant.name) {
-          dispatch({
-            type: SET_HEADER_SUB_TITLE,
-            title: participant.name,
-          })
+          dispatch(setHeaderSubTitle(participant.name))
         }
 
-        dispatch({
-          type: SET_PARTICIPANT,
-          participant,
-          fromClient,
-        })
+        dispatch(
+          setParticipant({
+            participant,
+            fromClient,
+          }),
+        )
 
         if (participant.introduction) {
-          dispatch({ type: ADD_EVENT, event })
+          dispatch(addEvent(event))
         }
       }
 
-      api.stream().subscribe({
+      const subscription = api.stream().subscribe({
         next: (event) => {
           const { type, payload } = event
           switch (type) {
             case 'ui':
               if (payload.state && payload.state.hasOwnProperty('loading')) {
-                dispatch({
-                  type: SET_IS_LOADING,
-                  isLoading: payload.state.loading,
-                })
+                dispatch(setIsLoading(payload.state.loading))
               }
               switch (payload.type) {
                 case 'idle_detach_countdown':
@@ -90,10 +80,10 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                   endCountdown(undefined, true)
                   break
                 case 'resume_conversation_prompt':
-                  dispatch({ type: INIT_RESUME_CONVERSATION_PROMPT })
+                  dispatch(initResumeConversationPrompt())
                   break
                 case 'user_first_response':
-                  dispatch(AppActions.setHasResponded(true))
+                  dispatch(setHasResponded(true))
                   eventBus.emit('system.userFirstResponse', payload.body)
                   break
               }
@@ -112,13 +102,10 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                 case 'carousel':
                 case 'card':
                   if (payload.service && payload.service.serviceSessionId) {
-                    dispatch({
-                      type: SET_ACTIVE_SERVICE,
-                      activeServiceSessionId: payload.service.serviceSessionId,
-                    })
+                    dispatch(setActiveService(payload.service.serviceSessionId))
                   }
 
-                  dispatch({ type: ADD_EVENT, event })
+                  dispatch(addEvent(event))
                   break
               }
               break
@@ -127,35 +114,27 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
               break
             case 'service_data':
               if (payload.persist) {
-                dispatch({
-                  type: SET_SERVICE_DATA_ITEM,
-                  payload,
-                })
+                dispatch(setServiceDataItem(payload))
               }
               break
             case 'ack':
-              dispatch({ type: ACK_EVENT, event })
+              dispatch(ackEvent(event.payload))
               break
             case 'system':
               if (payload.type === 'service_changed') {
                 const { serviceSettings, ...eventPayload } = payload
-                const { uploads, entry } = serviceSettings
-
-                dispatch({
-                  type: SET_FEATURE_ENABLED_STATE,
-                  key: featureKeys.uploads,
-                  enabled: !!(uploads && uploads.enabled),
-                })
+                const { entry } = serviceSettings
+                const { upload } = entry.options
 
-                dispatch({
-                  type: SET_SERVICE_ENTRY_METADATA,
-                  entryMeta: entry,
-                })
+                dispatch(
+                  setFeatureEnabledState({
+                    key: featureKeys.uploads,
+                    enabled: !!(upload && upload.enabled),
+                  }),
+                )
 
-                dispatch({
-                  type: SET_ACTIVE_SERVICE,
-                  activeServiceSessionId: payload.serviceSessionId,
-                })
+                dispatch(setServiceEntryMetadata(entry))
+                dispatch(setActiveService(payload.serviceSessionId))
 
                 emitEvent('system.serviceChanged', eventPayload)
               }
@@ -166,27 +145,54 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                 payload.type === 'text' ||
                 payload.type === 'translation'
               ) {
-                dispatch({ type: ADD_EVENT, event })
+                dispatch(addEvent(event))
               }
               break
             case 'error':
               switch (payload.type) {
                 case 'find_conversation_erred':
+                  const seamlySessionExpiredError =
+                    new SeamlySessionExpiredError(event)
                   dispatch(
-                    InterruptActions.set(new SeamlySessionExpiredError(event)),
+                    setInterrupt({
+                      name: seamlySessionExpiredError.name,
+                      action: seamlySessionExpiredError.action,
+                      message: seamlySessionExpiredError.message,
+                      originalEvent: seamlySessionExpiredError.originalEvent,
+                      originalError: seamlySessionExpiredError.originalError,
+                    }),
                   )
                   break
                 case 'seamly_offline':
-                  dispatch(InterruptActions.set(new SeamlyOfflineError(event)))
-                  dispatch({ type: CLEAR_EVENTS })
+                  const seamlyOfflineError = new SeamlyOfflineError(event)
+                  dispatch(
+                    setInterrupt({
+                      name: seamlyOfflineError.name,
+                      message: seamlyOfflineError.message,
+                      langKey: seamlyOfflineError.langKey,
+                      originalEvent: seamlyOfflineError.originalEvent,
+                      originalError: seamlyOfflineError.originalError,
+                    }),
+                  )
+                  dispatch(clearEvents())
                   break
                 default:
-                  dispatch(InterruptActions.set(new SeamlyGeneralError(event)))
+                  const seamlyGeneralError = new SeamlyGeneralError(event)
+                  dispatch(
+                    setInterrupt({
+                      name: seamlyGeneralError.name,
+                      message: seamlyGeneralError.message,
+                      langKey: seamlyGeneralError.langKey,
+                      originalEvent: seamlyGeneralError.originalEvent,
+                      originalError: seamlyGeneralError.originalError,
+                      action: seamlyGeneralError.action,
+                    }),
+                  )
                   break
               }
               break
             case 'socket_opened':
-              dispatch(InterruptActions.clear())
+              dispatch(clearInterrupt())
               break
           }
         },
@@ -210,17 +216,12 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
             prevEmittedEventId.current = payload.id
           },
         })
+      return () => {
+        subscription.unsubscribe()
+      }
     }
-  }, [
-    dispatch,
-    api,
-    eventBus,
-    t,
-    setUserSelectedOption,
-    initCountdown,
-    endCountdown,
-    emitEvent,
-  ])
+    return () => undefined
+  }, [dispatch, api, eventBus, initCountdown, endCountdown, emitEvent])
 
   useEffect(() => {
     const subscribe = () => {
@@ -245,13 +246,18 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
                   return
                 }
 
-                dispatch({
-                  type: SET_HISTORY,
-                  history,
-                })
+                dispatch(setHistory(history))
               })
               .catch((error) => {
-                dispatch(InterruptActions.set(error))
+                dispatch(
+                  setInterrupt({
+                    name: error.name,
+                    message: error.message,
+                    langKey: error.langKey,
+                    originalEvent: error.originalEvent,
+                    originalError: error.originalError,
+                  }),
+                )
               })
           },
         })
@@ -264,7 +270,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
       }
     }
 
-    return () => {}
+    return () => undefined
   }, [api, events, dispatch])
 
   return null