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

package/src/javascripts/style-guide/components/app.js

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useState } from 'preact/hooks'
 import { getUrlParams, getUrlSearchString, randomId } from '@seamly/web-ui'
-import { getStateObj, getDeprecatedStateObj } from 'style-guide/states'
-import StyleGuideView from './view'
-import StyleGuideLinks from './links'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import StyleGuideLinks from 'style-guide/components/links'
+import StyleGuideView from 'style-guide/components/view'
+import { getDeprecatedStateObj, getStateObj } from 'style-guide/states'
 
 const StyleGuideApp = ({
   config,
@@ -50,8 +50,7 @@ const StyleGuideApp = ({
       const { headingText } = mainState[feature]
       setSelectedStateDescription(headingText)
       const bareState = mainState[feature][layoutMode]
-      const { overrideMessages, showFaq } = bareState.config
-
+      const { overrideMessages, showFaq, showSuggestions } = bareState.config
       const agent = participants.find(
         (participant) => participant.id === 'agent',
       )
@@ -66,6 +65,7 @@ const StyleGuideApp = ({
           layoutMode: bareState.config.layoutMode,
           ...(overrideMessages ? { messages: overrideMessages } : {}),
           showFaq,
+          showSuggestions,
         },
         headerTitles: {
           ...bareState.headerTitles,

package/src/javascripts/style-guide/components/static-core.js

@@ -1,101 +1,123 @@
-import { useMemo, useRef } from 'preact/hooks'
-import thunkMiddleware from 'redux-thunk'
-
+import { configureStore } from '@reduxjs/toolkit'
 import {
-  SeamlyEventBusContext,
+  ComponentFilter,
   SeamlyApiContext,
+  SeamlyEventBusContext,
   SeamlyLiveRegionContext,
-  StoreProvider,
-  ComponentFilter,
-  createReduxStore,
+  SeamlyStoreProvider,
 } from '@seamly/web-ui'
-import stateReducer from 'domains/store/state-reducer'
-import { Reducer as formReducer } from 'domains/forms'
-import { Reducer as translationsReducer } from 'domains/translations'
-import { Reducer as i18nReducer, Actions as I18nActions } from 'domains/i18n'
-import { Reducer as interruptReducer } from 'domains/interrupt'
-import { Reducer as appReducer } from 'domains/app'
-import {
-  Reducer as configReducer,
-  Actions as ConfigActions,
-} from 'domains/config'
-import { Reducer as visibilityReducer } from 'domains/visibility'
-import { seamlyActions } from '../../ui/utils/seamly-utils'
-
-const { SET_PARTICIPANT } = seamlyActions
+import appReducer from 'domains/app/slice'
+import configReducer, {
+  setPreChatEvents,
+  setConfig,
+} from 'domains/config/slice'
+import formsReducer from 'domains/forms/slice'
+import i18nReducer, {
+  setInitialLocale,
+  setTranslations,
+} from 'domains/i18n/slice'
+import interruptReducer from 'domains/interrupt/slice'
+import stateReducer, { setParticipant } from 'domains/store/slice'
+import translationReducer from 'domains/translations/slice'
+import visibilityReducer from 'domains/visibility/slice'
+import { useMemo, useRef } from 'preact/hooks'
 
 const bareApi = {
-  send: () => {},
+  send: () => {
+    // do nothing
+  },
   reset: () => {
     return Promise.resolve({})
   },
-  store: { get: () => {}, set: () => {} },
+  store: {
+    get: () => {
+      // do nothing
+    },
+    set: () => {
+      // do nothing
+    },
+  },
   hasConversation: () => false,
 }
 
-const SeamlyTestCore = ({
+const SeamlyStaticCore = ({
   state,
   translations,
   participants = [],
   children,
 }) => {
-  const liveMsgRef = useRef(() => {})
-  const eventBusRef = useRef({ emit: () => {} })
+  const liveMsgRef = useRef(() => {
+    // do nothing
+  })
+  const eventBusRef = useRef({
+    emit: () => {
+      // do nothing
+    },
+  })
 
   const store = useMemo(() => {
     const {
-      translations: translationsSlice,
-      interrupt: interruptSlice,
-      config: configSlice = {},
-      visibility: visibilitySlice,
-      ...restState
+      translations: initialTranslations,
+      interrupt: initialInterrupt,
+      config: initialConfig = {},
+      visibility: initialVisibility,
+      ...initialState
     } = state || {}
-    const newStore = createReduxStore({
-      reducers: {
+
+    const newStore = configureStore({
+      reducer: {
         state: stateReducer,
-        [String(appReducer)]: appReducer,
-        [String(configReducer)]: configReducer,
-        [String(formReducer)]: formReducer,
-        [String(translationsReducer)]: translationsReducer,
-        [String(i18nReducer)]: i18nReducer,
-        [String(interruptReducer)]: interruptReducer,
-        [String(visibilityReducer)]: visibilityReducer,
+        app: appReducer,
+        config: configReducer,
+        i18n: i18nReducer,
+        translations: translationReducer,
+        visibility: visibilityReducer,
+        forms: formsReducer,
+        interrupt: interruptReducer,
       },
-      initialState: {
-        state: restState,
-        [String(translationsReducer)]: translationsSlice,
-        [String(interruptReducer)]: interruptSlice,
-        [String(visibilityReducer)]: visibilitySlice,
+      preloadedState: {
+        state: initialState,
+        config: initialConfig,
+        translations: initialTranslations,
+        interrupt: initialInterrupt,
+        visibility: initialVisibility,
       },
-      middlewares: [
-        thunkMiddleware.withExtraArgument({
-          api: bareApi,
-          eventBus: eventBusRef.current,
+      middleware: (getDefaultMiddleWare) =>
+        getDefaultMiddleWare({
+          thunk: {
+            extraArgument: {
+              api: bareApi,
+              eventBus: eventBusRef.current,
+            },
+          },
+          serializableCheck: false,
         }),
-      ],
     })
-    newStore.dispatch(ConfigActions.initialize(configSlice))
-    if (configSlice.preChatEvents) {
-      newStore.dispatch(
-        ConfigActions.setPreChatEvents(configSlice.preChatEvents),
-      )
+
+    const { config } = newStore.getState()
+
+    newStore.dispatch(setConfig(config))
+    if (config.preChatEvents) {
+      newStore.dispatch(setPreChatEvents(config.preChatEvents))
     }
-    newStore.dispatch(I18nActions.setLocale.fulfilled('en-GB', translations))
+    newStore.dispatch(setInitialLocale('en-GB'))
+    newStore.dispatch(setTranslations(translations))
 
     participants.forEach((participant) => {
-      newStore.dispatch({
-        type: SET_PARTICIPANT,
-        participant,
-        fromClient: participant.id === 'user',
-      })
+      newStore.dispatch(
+        setParticipant({
+          participant,
+          fromClient: participant.id === 'user',
+        }),
+      )
     })
 
     return newStore
-  }, [state, translations, participants])
+  }, [participants, state, translations])
 
   return (
     state && (
-      <StoreProvider store={store}>
+      <SeamlyStoreProvider store={store}>
         <SeamlyEventBusContext.Provider value={eventBusRef.current}>
           <SeamlyLiveRegionContext.Provider value={liveMsgRef.current}>
             <SeamlyApiContext.Provider value={bareApi}>
@@ -103,9 +125,9 @@ const SeamlyTestCore = ({
             </SeamlyApiContext.Provider>
           </SeamlyLiveRegionContext.Provider>
         </SeamlyEventBusContext.Provider>
-      </StoreProvider>
+      </SeamlyStoreProvider>
     )
   )
 }
 
-export default SeamlyTestCore
+export default SeamlyStaticCore

package/src/javascripts/style-guide/components/view.js

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'preact/hooks'
 import { View } from '@seamly/web-ui'
+import { timeout } from 'ui/hooks/focus-helper-hooks'
 import StyleGuideStaticCore from './static-core'
 
 const StyleGuideView = ({
@@ -18,10 +19,9 @@ const StyleGuideView = ({
   // renders showing up.
   useEffect(() => {
     setRenderView(false)
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        setRenderView(true)
-      })
+    requestAnimationFrame(async () => {
+      await timeout(60)
+      setRenderView(true)
     })
   }, [state])
 

package/src/javascripts/style-guide/state-helpers/index.js

@@ -33,24 +33,24 @@ export function addTranslationData(event) {
             data: {
               ...event.payload.body,
               text: event.payload.body.text
-                ? 'NL - ' + event.payload.body.text
+                ? `NL - ${event.payload.body.text}`
                 : undefined,
               description: event.payload.body.description
-                ? 'NL - ' + event.payload.body.description
+                ? `NL - ${event.payload.body.description}`
                 : undefined,
               buttonText: event.payload.body.buttonText
-                ? 'NL - ' + event.payload.body.buttonText
+                ? `NL - ${event.payload.body.buttonText}`
                 : undefined,
               choices: event.payload.body.choices
                 ? event.payload.body.choices.map((choice) => ({
                     ...choice,
-                    text: 'NL - ' + choice.text,
+                    text: `NL - ${choice.text}`,
                   }))
                 : undefined,
               prompt: event.payload.body.prompt
                 ? {
                     ...event.payload.body.prompt,
-                    text: 'NL - ' + event.payload.body.prompt.text,
+                    text: `NL - ${event.payload.body.prompt.text}`,
                   }
                 : undefined,
             },

package/src/javascripts/style-guide/states.js

@@ -1,8 +1,8 @@
 import {
-  visibilityStates,
   randomId,
-  SeamlyOfflineError,
   SeamlyGeneralError,
+  SeamlyOfflineError,
+  visibilityStates,
 } from '@seamly/web-ui'
 import { addTranslationData } from './state-helpers'
 
@@ -14,6 +14,7 @@ const baseState = {
     hideOnNoUserResponse: false,
     showFaq: false,
     showDisclaimer: false,
+    showSuggestions: true,
   },
   initialState: {},
   unreadEvents: 0,
@@ -126,6 +127,32 @@ const newTranslationDividerStart = {
     type: 'divider',
   },
 }
+
+const newTranslationDividerStartTwo = {
+  type: 'info',
+  payload: {
+    body: {
+      language: 'Nederlands',
+      subtype: 'new_translation',
+      text: '[NL] Automatic translation to Dutch started. Please note that automatic translations may contain errors.',
+      translationEnabled: true,
+      translationLocale: 'nl',
+    },
+    fromClient: false,
+    fromHistory: true,
+    id: randomId(),
+    occurredAt: 1625658300534259,
+    participant: null,
+    service: {
+      meta: {},
+      name: null,
+      serviceSessionId: null,
+    },
+    transactionId: null,
+    translatedBody: null,
+    type: 'divider',
+  },
+}
 const newTranslationDividerStop = {
   type: 'info',
   payload: {
@@ -713,7 +740,9 @@ const uploadBusy = {
   complete: false,
   error: '',
   uploadHandle: {
-    abort: () => {},
+    abort: () => {
+      // do nothing
+    },
   },
 }
 
@@ -725,7 +754,7 @@ const uploadError = {
   complete: false,
   error: 'Something went wrong with the upload',
   uploadHandle: {
-    abort: () => {},
+    abort: () => undefined,
   },
 }
 
@@ -734,7 +763,7 @@ const translationsSlice = {
   currentLocale: undefined,
   isAvailable: false,
   languages: [],
-  originalPayloadIds: [],
+  translatedEventGroups: {},
   containerId: randomId(),
 }
 
@@ -1734,7 +1763,7 @@ const standardState = {
       userMessage,
       textMessageBoldItalicUnderline,
       newTopicDivider,
-      newTranslationDividerStart,
+      newTranslationDividerStartTwo,
       newTranslationDividerStop,
       imageMessage,
       fileDownloadAgentMessage,
@@ -1750,13 +1779,44 @@ const standardState = {
       choicePromptMessage,
       ctaMessage,
       newTranslationDividerStop,
-      newTranslationDividerStart,
     ].map(addTranslationData),
     translations: {
       ...translationsSlice,
       currentLocale: 'nl',
       isActive: true,
       isAvailable: true,
+      translatedEventGroups: {
+        [newTranslationDividerStart.payload.id]: [
+          infoMessage,
+          shortTextMessage,
+          {
+            ...choicePromptMessage,
+            payload: {
+              ...choicePromptMessage.payload,
+              id: `${choicePromptMessage.payload.id}XXX`,
+            },
+          },
+          longTextMessage,
+          userMessage,
+          textMessageBoldItalicUnderline,
+          newTopicDivider,
+        ].map((p) => p.payload.id),
+        [newTranslationDividerStartTwo.payload.id]: [
+          imageMessage,
+          fileDownloadAgentMessage,
+          deletedFileDownloadAgentMessage,
+          userMessageLong,
+          videoMessage,
+          textMessageWithLinks,
+          textMessageWithLongLink,
+          imageMessageWithLightbox,
+          fileDownloadUserMessage,
+          emptyUrlFileDownloadUserMessage,
+          textMesageWithBullets,
+          choicePromptMessage,
+          ctaMessage,
+        ].map((p) => p.payload.id),
+      },
       languages: [
         { locale: 'nl', nativeName: 'Dutch' },
         { locale: 'en', nativeName: 'English' },

package/src/javascripts/style-guide.ts

@@ -0,0 +1,5 @@
+import initializeStyleGuideExternalApi from 'style-guide/register-style-guide-api'
+
+export default initializeStyleGuideExternalApi
+
+export { default as SeamlyStaticCore } from 'style-guide/components/static-core'

package/src/javascripts/ui/components/app-options/index.js

@@ -1,10 +1,8 @@
 import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
 import { className } from 'lib/css'
 import OptionsButton from 'ui/components/options/options-button'
-import {
-  useTranslations,
-  OptionsButton as TranslationsOptionsButton,
-} from 'domains/translations'
+import { useTranslations } from 'domains/translations/hooks'
+import TranslationsOptionsButton from 'domains/translations/components/options-button'
 
 export default function AppOptions() {
   const { menuOptions, allowOptionSelection } = useSeamlyOptions()

package/src/javascripts/ui/components/conversation/component-filter.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'preact/hooks'
-import { useConfig } from 'domains/config'
+import { useConfig } from 'domains/config/hooks'
 import ComponentContext from './component-context'
 import ChoicePrompt from './event/choice-prompt'
 import Text from './event/text'

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

@@ -1,17 +1,18 @@
-import { useRef, useEffect } from 'preact/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useLayoutEffect, useRef } from 'preact/hooks'
+import PrivacyDisclaimer from 'ui/components/layout/privacy-disclaimer'
+import { timeout } from 'ui/hooks/focus-helper-hooks'
 import {
   useSeamlyIsLoading,
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
 import { useEvents, useLoadedImageEventIds } from 'ui/hooks/seamly-state-hooks'
-import PrivacyDisclaimer from 'ui/components/layout/privacy-disclaimer'
-import { useVisibility } from 'domains/visibility'
+import ComponentFilter from './component-filter'
 import Event from './event/event'
 import Loader from './loader'
-import ComponentFilter from './component-filter'
 
 const Events = () => {
   const events = useEvents()
@@ -51,10 +52,13 @@ const Conversation = () => {
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
   const loadedImageEventIds = useLoadedImageEventIds()
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const containerElement = chatBodyContainer.current
     if (containerElement) {
-      containerElement.scrollTop = containerElement.scrollHeight
+      requestAnimationFrame(async () => {
+        await timeout(30) // Wait for next frame tick
+        containerElement.scrollTop = containerElement.scrollHeight
+      })
     }
   }, [events, isLoading, isOpen, loadedImageEventIds])
 

package/src/javascripts/ui/components/conversation/event/card-message.js

@@ -1,10 +1,10 @@
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import CardComponent from './card-component'
 
 const CardMessage = ({ event }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const descriptionId = useGeneratedId()
 
   return (

package/src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js

@@ -1,5 +1,5 @@
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import Icon from 'ui/components/layout/icon'
 
 export default function CarouselControls({

package/src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js

@@ -1,5 +1,5 @@
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import CardComponent from 'ui/components/conversation/event/card-component'
 
 export default function CarouselMessageSlide({

package/src/javascripts/ui/components/conversation/event/carousel-message/index.js

@@ -1,12 +1,12 @@
 import MessageContainer from 'ui/components/conversation/message-container'
 import CarouselComponent from 'ui/components/conversation/event/carousel-component'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import CarouselMessageSlide from './components/slide'
 
 const getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`
 const getItemLabel = (item) => item.title
 const CarouselMessage = ({ event }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const slides = body.cards
 
   return (

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

@@ -9,8 +9,8 @@ import {
 import { className } from 'lib/css'
 import { actionTypes } from 'ui/utils/seamly-utils'
 import Icon from 'ui/components/layout/icon'
-import { useI18n } from 'domains/i18n'
-import { useTranslatedEventData } from 'domains/translations'
+import { useI18n } from 'domains/i18n/hooks'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
 
 export const useChoicePrompt = (event) => {
@@ -19,7 +19,7 @@ export const useChoicePrompt = (event) => {
   const { sendAction, addMessageBubble, addDivider } = useSeamlyCommands()
   const { activeServiceSessionId } = useSeamlyServiceInfo()
   const lastEventId = useLastMessageEventId()
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const { service } = payload
 
   const subEvent = useMemo(() => {

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

@@ -1,21 +1,19 @@
-import { useCallback, useMemo, useState } from 'preact/hooks'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { setHasResponded } from 'domains/app/slice'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import { className } from 'lib/css'
-import {
-  useEvents,
-  useSeamlyCommands,
-  useSeamlyDispatchContext,
-} from 'ui/hooks/seamly-hooks'
-import { useI18n } from 'domains/i18n'
-import { useTranslatedEventData } from 'domains/translations'
-import { useUserHasResponded } from 'domains/app'
-import { setHasResponded } from 'domains/app/actions'
-import { actionTypes } from 'ui/utils/seamly-utils'
+import { useCallback, useMemo, useState } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 import MessageContainer from 'ui/components/conversation/message-container'
 import SuggestionsList from 'ui/components/suggestions/suggestions-list'
+import { useEvents, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
 
 export const useSuggestions = (event) => {
   const { payload } = event
-  const [suggestions] = useTranslatedEventData(event)
+  const { body: suggestions } = useTranslatedEventData(event)
 
   return {
     suggestions,
@@ -25,10 +23,11 @@ export const useSuggestions = (event) => {
 
 const ConversationSuggestions = ({ event, ...props }) => {
   const [isExpanded, setIsExpanded] = useState(true)
-  const dispatch = useSeamlyDispatchContext()
-  const userResponded = useUserHasResponded()
+  const dispatch = useDispatch()
+  const userHasResponded = useUserHasResponded()
   const { sendAction, addMessageBubble } = useSeamlyCommands()
   const { suggestions, payload } = useSuggestions(event)
+  const { showSuggestions } = useConfig()
   const events = useEvents()
 
   const { t } = useI18n()
@@ -66,7 +65,12 @@ const ConversationSuggestions = ({ event, ...props }) => {
     [dispatch, sendAction, payload.id, addMessageBubble],
   )
 
-  if (!isExpanded || userResponded || !hasLastTransactionEvent) {
+  if (
+    !isExpanded ||
+    userHasResponded ||
+    !hasLastTransactionEvent ||
+    !showSuggestions
+  ) {
     return null
   }
 

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

@@ -3,11 +3,11 @@ import { className } from 'lib/css'
 import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
 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 Cta = ({ event }) => {
-  const [body] = useTranslatedEventData(event)
+  const { body } = useTranslatedEventData(event)
   const eventClick = useEventLinkClickHandler(event.payload.id)
   const { emitEvent } = useSeamlyCommands()
 

package/src/javascripts/ui/components/conversation/event/divider/variants/default.js

@@ -1,5 +1,5 @@
 import { dividerKeys } from 'ui/utils/seamly-utils'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import EventDivider from 'ui/components/conversation/event-divider'
 
 const dividerTypes = {