@seamly/web-ui 19.1.2 → 19.1.5

package/src/javascripts/domains/store/index.js

@@ -1,23 +1,24 @@
 import thunkMiddleware from 'redux-thunk'
-import { createReduxStore } from '../redux'
 import { Reducer as appReducer } from '../app'
 import {
   createMiddleware as createConfigMiddleware,
   Reducer as configReducer,
 } from '../config'
+import { createMiddleware as createErrorsMiddleware } from '../errors'
 import { Reducer as formReducer } from '../forms'
-import {
-  Reducer as translationsReducer,
-  createMiddleware as createI18nMiddleware,
-} from '../translations'
 import { Reducer as i18nReducer } from '../i18n'
-import { Reducer as visibilityReducer } from '../visibility'
 import {
-  Reducer as interruptReducer,
   createMiddleware as createInterruptMiddleware,
+  Reducer as interruptReducer,
 } from '../interrupt'
 import { createMiddleware as createOptionsMiddleware } from '../options'
-import { createMiddleware as createErrorsMiddleware } from '../errors'
+import { createReduxStore } from '../redux'
+import {
+  createMiddleware as createI18nMiddleware,
+  Reducer as translationsReducer,
+} from '../translations'
+import { Reducer as visibilityReducer } from '../visibility'
+
 import stateReducer from './state-reducer'
 
 export function createStore({ initialState, api, eventBus } = {}) {
@@ -42,7 +43,7 @@ export function createStore({ initialState, api, eventBus } = {}) {
       createConfigMiddleware(),
       createInterruptMiddleware({ api }),
       createOptionsMiddleware({ api }),
-      createI18nMiddleware(),
+      createI18nMiddleware,
     ],
   })
   return store

package/src/javascripts/domains/translations/middleware.js

@@ -1,17 +1,17 @@
-import * as Actions from './actions'
 import { seamlyActions } from '../../ui/utils/seamly-utils'
 import { Actions as I18nActions, Selectors as I18nSelectors } from '../i18n'
+import * as Actions from './actions'
 
-export default function createMiddleware() {
-  return ({ dispatch, getState }) =>
-    (next) =>
-    (action) => {
+export default function createMiddleware({ dispatch, getState }) {
+  return (next) => {
+    return (action) => {
       const result = next(action)
 
       switch (action.type) {
         case String(seamlyActions.SET_HISTORY):
           if (action.history?.translation?.enabled) {
             dispatch(Actions.enable(action.history.translation.locale))
+            dispatch(I18nActions.setLocale(action.history.translation.locale))
           }
           break
         case String(seamlyActions.SET_INITIAL_STATE):
@@ -40,4 +40,5 @@ export default function createMiddleware() {
       }
       return result
     }
+  }
 }

package/src/javascripts/lib/external-api/index.js

@@ -124,6 +124,10 @@ class ExternalApi {
     if (typeof this.appConfig === 'function') {
       return this.appConfig(userConfig)
     }
+    const defaults = {
+      ...this.appConfig.defaults,
+      ...userConfig.defaults,
+    }
     return {
       ...this.appConfig,
       ...userConfig,
@@ -131,6 +135,7 @@ class ExternalApi {
         ...this.appConfig.api,
         ...userConfig.api,
       },
+      defaults: Object.keys(defaults).length ? defaults : undefined,
     }
   }
 }

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'}>