@seamly/web-ui 19.1.1 → 19.1.4

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

@@ -1,4 +1,6 @@
 import { useMemo, useRef } from 'preact/hooks'
+import thunkMiddleware from 'redux-thunk'
+
 import {
   SeamlyEventBusContext,
   SeamlyApiContext,
@@ -6,7 +8,6 @@ import {
   StoreProvider,
   createReduxStore,
 } 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'
@@ -28,6 +29,7 @@ const bareApi = {
     return Promise.resolve({})
   },
   store: { get: () => {}, set: () => {} },
+  hasConversation: () => false,
 }
 
 const SeamlyTestCore = ({ state, translations, children }) => {
@@ -59,6 +61,12 @@ const SeamlyTestCore = ({ state, translations, children }) => {
         [String(interruptReducer)]: interruptSlice,
         [String(visibilityReducer)]: visibilitySlice,
       },
+      middlewares: [
+        thunkMiddleware.withExtraArgument({
+          api: bareApi,
+          eventBus: eventBusRef.current,
+        }),
+      ],
     })
     newStore.dispatch(ConfigActions.initialize(configSlice || {}))
     newStore.dispatch(I18nActions.setLocale.fulfilled('en-GB', translations))

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

@@ -8,6 +8,9 @@ import CarouselMessageSlide from '../carousel-message/components/slide'
 
 const defaultGetItemKey = (item, idx, prefix) => `${prefix}${idx}`
 const defaultGetItemLabel = (item) => item.label
+const preventScroll = ({ target }) => {
+  target.scrollLeft = 0
+}
 
 export default function CarouselComponent({
   currentIndex: originalIndex,
@@ -51,7 +54,10 @@ export default function CarouselComponent({
       role="group"
       aria-roledescription="carousel"
     >
-      <div className={className('carousel__slides-wrapper')}>
+      <div
+        className={className('carousel__slides-wrapper')}
+        onScroll={preventScroll}
+      >
         <div
           id={carouselItemsId}
           className={className('carousel__slides')}
@@ -78,6 +84,7 @@ export default function CarouselComponent({
                   item={item}
                   items={items}
                   currentIndex={currentIndex}
+                  index={idx}
                   isActive={isActive}
                 />
               </div>

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

@@ -5,18 +5,17 @@ import CardComponent from '../../card-component'
 export default function CarouselMessageSlide({
   item: slide,
   items,
-  currentIndex,
+  index,
   isActive,
 }) {
   const { t } = useI18n()
-
   return (
     <div
       className={className('carousel-item', `carousel-item--${slide.type}`)}
       role="group"
       aria-roledescription="slide"
       aria-label={t('carousel.slide.label', {
-        index: currentIndex + 1,
+        index: index + 1,
         total: items.length,
       })}
     >

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

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