@seamly/web-ui 18.3.0 → 19.0.0-beta.3

package/src/javascripts/domains/config/reducer.js

@@ -1,5 +1,5 @@
 import { defaultConfig } from '../../config'
-import { createReducer } from '../../lib/redux-helpers'
+import { createReducer } from './utils'
 import * as Actions from './actions'
 import { pick } from '../../ui/utils/general-utils'
 
@@ -25,12 +25,11 @@ const configKeys = [
   'context',
   'appContainerClassNames',
   'messages',
-  'typing',
   'visible',
   'visibilityCallback',
 ]
 const updateState = (state, { config }) => {
-  const { messages, typing, ...partialConfig } = pick(config, configKeys)
+  const { messages, ...partialConfig } = pick(config, configKeys)
   let newState = state
   if (Object.keys(partialConfig).length > 0) {
     newState = {
@@ -48,20 +47,10 @@ const updateState = (state, { config }) => {
     }
   }
 
-  if (typing) {
-    newState = {
-      ...newState,
-      typing: {
-        ...newState.typing,
-        ...typing,
-      },
-    }
-  }
   return newState
 }
 
 export default createReducer(
-  'config',
   {
     [Actions.initialize]: (state, action) => {
       return updateState(state, action)

package/src/javascripts/domains/config/selectors.js

@@ -1,8 +1,6 @@
 import { createSelector } from 'reselect'
 import { visibilityStates } from '../../ui/utils/seamly-utils'
-import Reducer from './reducer'
-
-export const selectState = (state) => state[String(Reducer)]
+import { selectState } from './utils'
 
 export const selectConfig = createSelector(selectState, (config) => {
   let newConfig = {
@@ -21,3 +19,5 @@ export const selectConfig = createSelector(selectState, (config) => {
   }
   return newConfig
 })
+
+export { selectState }

package/src/javascripts/domains/config/utils.js

@@ -0,0 +1,4 @@
+import { createDomain } from '../../lib/redux-helpers'
+
+export const { createAction, createThunk, createReducer, selectState } =
+  createDomain('config')

package/src/javascripts/domains/forms/actions.js

@@ -1,6 +1,4 @@
-import { createDomain } from '../../lib/redux-helpers'
-
-const { createActions } = createDomain('forms')
+import { createActions } from './utils'
 
 export const [registerForm, deregisterForm] = createActions('form', {
   register: (formId, persistData) => ({ formId, persistData }),

package/src/javascripts/domains/forms/reducer.js

@@ -1,4 +1,4 @@
-import { createReducer } from '../../lib/redux-helpers'
+import { createReducer } from './utils'
 import * as Actions from './actions'
 
 const initialState = {}
@@ -31,7 +31,6 @@ function updateFormControl(state, formId, name, controlState) {
 }
 
 export default createReducer(
-  'form',
   {
     // Form handlers
     [Actions.registerForm]: (state, { formId, persistData }) => {

package/src/javascripts/domains/forms/selectors.js

@@ -1,8 +1,8 @@
 import { createSelector } from 'reselect'
 import { getPropSelector } from '../redux/utils'
-import Reducer from './reducer'
+import { selectState } from './utils'
 
-export const getState = (state) => state[String(Reducer)]
+export const getState = selectState
 
 export const getFormById = createSelector(
   getState,

package/src/javascripts/domains/forms/utils.js

@@ -1,3 +1,8 @@
+import { createDomain } from '../../lib/redux-helpers'
+
+export const { createActions, createReducer, selectState } =
+  createDomain('forms')
+
 export function validate(values, schema = {}) {
   return Object.entries(schema).reduce((errors, [key, validations]) => {
     if (validations && !Array.isArray(validations)) {

package/src/javascripts/domains/i18n/actions.js

@@ -0,0 +1,20 @@
+import createMutex from '../../lib/mutex'
+import { selectLocale } from './selectors'
+import { createAction, createThunk } from './utils'
+
+export const setInitialLocale = createAction('setInitialLocale', (locale) => ({
+  locale,
+}))
+
+const mutex = createMutex()
+export const setLocale = createThunk(
+  'setLocale',
+  async (locale, { getState, extra: { api } }) => {
+    return mutex.runExclusively(() => {
+      if (locale === selectLocale(getState())) {
+        return undefined
+      }
+      return api.getTranslations(locale)
+    })
+  },
+)

package/src/javascripts/domains/i18n/hooks.js

@@ -0,0 +1,38 @@
+import { useCallback } from 'preact/hooks'
+import {
+  MessageFormatter,
+  pluralTypeHandler,
+  selectTypeHandler,
+} from '@ultraq/icu-message-formatter'
+import { useSelector } from '../redux'
+import * as Selectors from './selectors'
+
+// The passed in locale (en-GB) is only used to call Intl.PluralRules.select() in
+// pluralTypeHandler. Since we only use exact plural matches (=0, =1 etc) we can
+// safely use en-GB all the time.
+const formatter = new MessageFormatter('en-GB', {
+  plural: pluralTypeHandler,
+  select: selectTypeHandler,
+})
+
+export function useI18n() {
+  const translations = useSelector(Selectors.selectTranslations)
+  const locale = useSelector(Selectors.selectLocale)
+  const initialLocale = useSelector(Selectors.selectInitialLocale)
+  const t = useCallback(
+    (key, values = {}) => {
+      const translation = translations[key]
+      if (!translation) {
+        return null
+      }
+      return formatter.format(translation, values)
+    },
+    [translations],
+  )
+
+  return {
+    t,
+    locale,
+    initialLocale,
+  }
+}

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

@@ -1,86 +1,7 @@
-import { useCallback } from 'preact/hooks'
-import { createSelector } from 'reselect'
-import { createDomain, createReducer } from '../../lib/redux-helpers'
-import { useSelector } from '../redux'
-import { flattenObject } from '../../ui/utils/general-utils'
-import en from '../../../../translations/en'
+import * as Actions from './actions'
+import * as Selectors from './selectors'
 
-// Actions
-const { createAction } = createDomain('i18n')
+export * from './hooks'
+export { default as Reducer } from './reducer'
 
-export const initI18n = createAction('init', (overrides) => ({
-  overrides,
-}))
-
-export const Actions = {
-  initI18n,
-}
-
-// Reducer
-const defaultState = { translations: flattenObject(en), overrides: {} }
-export const Reducer = createReducer(
-  'i18n',
-  {
-    [initI18n]: (state, { overrides }) => {
-      return {
-        ...state,
-        overrides: overrides ? flattenObject(overrides) : undefined,
-      }
-    },
-  },
-  defaultState,
-)
-
-// Selectors
-export const getState = (state) => state[String(Reducer)]
-export const getTranslations = createSelector(
-  getState,
-  (state) => state.translations,
-)
-export const getOverrides = createSelector(
-  getState,
-  (state) => state.overrides || {},
-)
-
-export const getCombinedTranslations = createSelector(
-  getTranslations,
-  getOverrides,
-  (translations, overrides) => {
-    const overrideKeys = Object.keys(overrides)
-    if (overrideKeys.length === 0) {
-      return translations
-    }
-
-    const defaultKeys = Object.keys(translations)
-    defaultKeys.forEach((key) => {
-      if (overrideKeys.indexOf(key) === -1) {
-        console.error('Seamly: Missing translation key:', key)
-      }
-    })
-
-    return {
-      ...translations,
-      ...overrides,
-    }
-  },
-)
-
-// Hooks
-export function useI18n() {
-  const translations = useSelector(getCombinedTranslations)
-  const t = useCallback(
-    (key, values = {}) => {
-      const translation = translations[key]
-      if (typeof translation === 'function') {
-        return translation(values)
-      } else {
-        return translation
-      }
-    },
-    [translations],
-  )
-
-  return {
-    t,
-  }
-}
+export { Actions, Selectors }

package/src/javascripts/domains/i18n/reducer.js

@@ -0,0 +1,64 @@
+import * as Actions from './actions'
+import { createReducer } from './utils'
+
+const defaultState = {
+  translations: {
+    'errors.configError.message':
+      'We are sorry this happened, please retry at a later time.',
+    'errors.configError.srText':
+      'A chat configuration error occurred. Our apologies, please retry at a later time.',
+    'errors.configError.title': 'Chat configuration error.',
+    'errors.general.buttonText': 'Restart chat',
+    'errors.general.message': 'Do you want to start a new chat session?',
+    'errors.general.srText':
+      'Something went wrong with the chat session. You can restart the chat.',
+    'errors.general.title': 'Something went wrong',
+    'errors.seamlyOffline.message':
+      'There might be a problem with your or our network connection. The chat session should resume as soon the connection is available again.',
+    'errors.seamlyOffline.srText':
+      'The chat has connection issues. There might be a problem with your or our network connection. The chat session should resume as soon as the connection is available again.',
+    'errors.seamlyOffline.title': 'Connection issues',
+  },
+  isLoading: false,
+  initialLocale: undefined,
+}
+
+export default createReducer(
+  {
+    [Actions.setInitialLocale]: (state, { locale }) => ({
+      ...state,
+      initialLocale: locale,
+    }),
+    [Actions.setLocale.pending]: (state) => ({
+      ...state,
+      isLoading: true,
+    }),
+    [Actions.setLocale.fulfilled]: (
+      state,
+      { payload: translations, meta: { arg: locale } },
+    ) => {
+      if (!translations) {
+        return { ...state, isLoading: false }
+      }
+      return {
+        ...state,
+        isLoading: false,
+        locale,
+        translations: Object.keys(translations)
+          .sort()
+          .reduce(
+            (accum, key) => ({
+              ...accum,
+              [key]: translations[key],
+            }),
+            {},
+          ),
+      }
+    },
+    [Actions.setLocale.rejected]: (state) => ({
+      ...state,
+      isLoading: false,
+    }),
+  },
+  defaultState,
+)

package/src/javascripts/domains/i18n/selectors.js

@@ -0,0 +1,15 @@
+import { createSelector } from 'reselect'
+import { selectState } from './utils'
+
+export const selectTranslations = createSelector(
+  selectState,
+  (state) => state.translations,
+)
+
+export const selectInitialLocale = createSelector(
+  selectState,
+  (state) => state.initialLocale,
+)
+export const selectLocale = createSelector(selectState, (state) => state.locale)
+
+export { selectState }

package/src/javascripts/domains/i18n/utils.js

@@ -0,0 +1,4 @@
+import { createDomain } from '../../lib/redux-helpers'
+
+export const { createAction, createThunk, createReducer, selectState } =
+  createDomain('i18n')

package/src/javascripts/domains/interrupt/actions.js

@@ -1,6 +1,4 @@
-import { createDomain } from '../../lib/redux-helpers'
-
-const { createAction } = createDomain('interrupt')
+import { createAction } from './utils'
 
 export const set = createAction('set', (error) => ({ error }))
 export const clear = createAction('clear')

package/src/javascripts/domains/interrupt/reducer.js

@@ -1,4 +1,4 @@
-import { createReducer } from '../../lib/redux-helpers'
+import { createReducer } from './utils'
 import * as Actions from './actions'
 
 const initialState = {
@@ -6,7 +6,6 @@ const initialState = {
 }
 
 export default createReducer(
-  'interrupt',
   {
     [Actions.set]: (state, { error }) => {
       return {

package/src/javascripts/domains/interrupt/selectors.js

@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect'
-import Reducer from './reducer'
+import { selectState } from './utils'
 
-export const selectState = (state) => state[String(Reducer)]
 export const selectError = createSelector(selectState, ({ error }) => error)
+
+export { selectState }

package/src/javascripts/domains/interrupt/utils.js

@@ -0,0 +1,4 @@
+import { createDomain } from '../../lib/redux-helpers'
+
+export const { createAction, createReducer, selectState } =
+  createDomain('interrupt')

package/src/javascripts/domains/redux/hooks.js

@@ -26,6 +26,7 @@ export function useSelector(selector, deps = []) {
   // instead of accepting a stabilized selector, we stick to the signature
   // of useCallback, as that makes the exposed api much more dev-friendly
   // otherwise you'd have to stabilize selectors externally
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const selectorCb = useCallback(selector, deps)
   // we're keeping the selector in a ref to compare against
   // we need this both in the store subscription and for

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

@@ -1,11 +1,15 @@
 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 { Reducer as formReducer } from '../forms'
-import { Reducer as translationsReducer } from '../translations'
+import {
+  Reducer as translationsReducer,
+  createMiddleware as createI18nMiddleware,
+} from '../translations'
 import { Reducer as i18nReducer } from '../i18n'
 import {
   Reducer as interruptReducer,
@@ -18,6 +22,7 @@ export function createStore({ initialState, api } = {}) {
   const store = createReduxStore({
     reducers: {
       state: stateReducer,
+      [String(appReducer)]: appReducer,
       [String(configReducer)]: configReducer,
       [String(formReducer)]: formReducer,
       [String(translationsReducer)]: translationsReducer,
@@ -32,6 +37,7 @@ export function createStore({ initialState, api } = {}) {
       createConfigMiddleware(),
       createInterruptMiddleware(),
       createOptionsMiddleware({ api }),
+      createI18nMiddleware(),
     ],
   })
   return store

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

@@ -1,6 +1,4 @@
-import { createDomain } from '../../lib/redux-helpers'
-
-const { createActions } = createDomain('translations')
+import { createActions } from './utils'
 
 export const [enable, disable] = createActions('translate', {
   enable: (locale) => ({ locale }),

package/src/javascripts/domains/translations/components/chat-status.js

@@ -31,7 +31,7 @@ export default function TranslationsChatStatus() {
     <ChatStatus
       type="translations"
       id={id}
-      label={t('translations.status.label', languageName)}
+      label={t('translations.status.label', { language: languageName })}
       onButtonClick={handleClickStop}
       buttonText={t('translations.status.stopText')}
       srButtonText={t('translations.status.srStopText')}

package/src/javascripts/domains/translations/components/options-dialog/form.js

@@ -8,7 +8,7 @@ import Select from '../../../../ui/components/form-controls/select'
 function TranslationsOptionsDialogForm({ controlName, descriptionId }) {
   const { t } = useI18n()
   const { isActive, languages, currentLocale } = useTranslations()
-
+  const { locale: uiLocale } = useI18n()
   const languageName = useMemo(() => {
     return languages?.find((lang) => lang.locale === currentLocale)?.nativeName
   }, [languages, currentLocale])
@@ -16,12 +16,17 @@ function TranslationsOptionsDialogForm({ controlName, descriptionId }) {
   const options = useMemo(() => {
     return [
       { value: '', label: t('translations.settings.defaultOptionLabel') },
-      ...languages.map((language) => ({
-        value: language.locale,
-        label: language.nativeName,
-      })),
+      ...languages
+        .filter(
+          (language) =>
+            language.locale.toLowerCase() !== String(uiLocale).toLowerCase(),
+        )
+        .map((language) => ({
+          value: language.locale,
+          label: language.nativeName,
+        })),
     ]
-  }, [t, languages])
+  }, [t, languages, uiLocale])
 
   return (
     <Form noValidate="true">

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

@@ -2,6 +2,7 @@ import * as Actions from './actions'
 import * as Selectors from './selectors'
 
 export * from './hooks'
+export { default as createMiddleware } from './middleware'
 export { default as Reducer } from './reducer'
 export { default as OptionsButton } from './components/options-button'
 export { default as ChatStatus } from './components/chat-status'

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

@@ -0,0 +1,43 @@
+import * as Actions from './actions'
+import { seamlyActions } from '../../ui/utils/seamly-utils'
+import { Actions as I18nActions, Selectors as I18nSelectors } from '../i18n'
+
+export default function createMiddleware() {
+  return ({ dispatch, getState }) =>
+    (next) =>
+    (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))
+          }
+          break
+        case String(seamlyActions.SET_INITIAL_STATE):
+          if (action.initialState?.translation?.enabled) {
+            dispatch(Actions.enable(action.initialState.translation.locale))
+            dispatch(I18nActions.setLocale(action.locale))
+          }
+          break
+        case String(seamlyActions.ADD_EVENT):
+          if (
+            action.event.type === 'info' &&
+            action.event?.payload?.body?.subtype === 'new_translation' &&
+            action.event.payload.body.translationEnabled
+          ) {
+            dispatch(
+              I18nActions.setLocale(
+                action.event.payload.body.translationLocale,
+              ),
+            )
+          }
+          break
+        case String(Actions.disable):
+          const initialLocale = I18nSelectors.selectInitialLocale(getState())
+          dispatch(I18nActions.setLocale(initialLocale))
+          break
+      }
+      return result
+    }
+}

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

@@ -1,4 +1,4 @@
-import { createReducer } from '../../lib/redux-helpers'
+import { createReducer } from './utils'
 import { seamlyActions } from '../../ui/utils/seamly-utils'
 import { randomId } from '../../lib/id'
 import * as Actions from './actions'
@@ -13,7 +13,6 @@ const initialState = {
 }
 
 export default createReducer(
-  'translations',
   {
     [seamlyActions.SET_FEATURES]: (state, action) => {
       const feature = action?.features?.translation
@@ -27,13 +26,7 @@ export default createReducer(
         languages: feature.languages || [],
       }
     },
-    [seamlyActions.SET_HISTORY]: (state, { history }) => {
-      return {
-        ...state,
-        isActive: history?.translation?.enabled,
-        currentLocale: history?.translation?.locale,
-      }
-    },
+
     [seamlyActions.CLEAR_FEATURES]: () => initialState,
     [Actions.enable]: (state, { locale }) => {
       return {

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

@@ -1,8 +1,8 @@
 import { createSelector } from 'reselect'
 import { getPropSelector } from '../redux/utils'
-import Reducer from './reducer'
+import { selectState } from './utils'
 
-export const getState = (state) => state[String(Reducer)]
+export const getState = selectState
 
 export const getOriginalPayloadIds = createSelector(
   getState,

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

@@ -0,0 +1,4 @@
+import { createDomain } from '../../lib/redux-helpers'
+
+export const { createActions, createReducer, selectState } =
+  createDomain('translations')

package/src/javascripts/index.js

@@ -137,6 +137,9 @@ export { default as View } from './ui/components/layout/view'
 // Used by: StyleGuide
 export { visibilityStates } from './ui/utils/seamly-utils'
 
+// Used by: StyleGuide
+export { API } from './api'
+
 // Used by: StyleGuide
 export { default as SeamlyGeneralError } from './api/errors/seamly-general-error'
 

package/src/javascripts/lib/engine/index.js

@@ -21,6 +21,7 @@ export default class Engine {
     this.api = new API({
       namespace: config.namespace,
       config: config.api,
+      locale: config?.context?.locale,
     })
 
     this.eventBus = new Events()

package/src/javascripts/lib/mutex.js

@@ -0,0 +1,30 @@
+export default function createMutex() {
+  let isRunning = false
+  const tasks = []
+
+  const next = async () => {
+    if (!isRunning) {
+      while (tasks.length) {
+        const task = tasks.shift()
+        isRunning = true
+        // eslint-disable-next-line no-await-in-loop
+        await task().catch(() => {})
+        isRunning = false
+      }
+    }
+  }
+  const runExclusively = async (task) => {
+    const prms = new Promise((resolve, reject) => {
+      tasks.push(async () => {
+        try {
+          resolve(await task())
+        } catch (e) {
+          reject(e)
+        }
+      })
+    })
+    next()
+    return prms
+  }
+  return { next, runExclusively }
+}