@seamly/web-ui 18.2.0 → 19.0.0-beta.1

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

@@ -0,0 +1,30 @@
+import SeamlyGeneralError from '../../api/errors/seamly-general-error'
+import SeamlyConfigurationError from '../../api/errors/seamly-configuration-error'
+import SeamlySessionExpiredError from '../../api/errors/seamly-session-expired-error'
+import SeamlyOfflineError from '../../api/errors/seamly-offline-error'
+import SeamlyUnauthorizedError from '../../api/errors/seamly-unauthorized-error'
+import * as Actions from './actions'
+
+const handledErrorTypes = [
+  SeamlyGeneralError,
+  SeamlyConfigurationError,
+  SeamlySessionExpiredError,
+  SeamlyOfflineError,
+  SeamlyUnauthorizedError,
+]
+
+export default function createMiddleware() {
+  return () => (next) => (action) => {
+    if (action.type === String(Actions.set)) {
+      if (
+        !handledErrorTypes.some(
+          (ErrorType) => action.error instanceof ErrorType,
+        )
+      ) {
+        throw action.error
+      }
+    }
+
+    return next(action)
+  }
+}

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

@@ -0,0 +1,21 @@
+import { createReducer } from './utils'
+import * as Actions from './actions'
+
+const initialState = {
+  error: undefined,
+}
+
+export default createReducer(
+  {
+    [Actions.set]: (state, { error }) => {
+      return {
+        ...state,
+        error,
+      }
+    },
+    [Actions.clear]: () => {
+      return initialState
+    },
+  },
+  initialState,
+)

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

@@ -0,0 +1,6 @@
+import { createSelector } from 'reselect'
+import { selectState } from './utils'
+
+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/options/index.js

@@ -0,0 +1 @@
+export { default as createMiddleware } from './middleware'

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

@@ -0,0 +1,35 @@
+import { featureKeys, seamlyActions } from '../../ui/utils/seamly-utils'
+import { Actions as InterruptActions } from '../interrupt'
+import SeamlyOfflineError from '../../api/errors/seamly-offline-error'
+
+export default function createMiddleware({ api }) {
+  return ({ dispatch }) =>
+    (next) =>
+    (action) => {
+      const result = next(action)
+
+      switch (action.type) {
+        // This is needed for backwards compatibility. If there's an error,
+        // Cobrowsing has to be disabled in order to not "re-start" into co-browsing
+        case String(InterruptActions.set):
+          if (!(action.error instanceof SeamlyOfflineError)) {
+            dispatch({
+              type: seamlyActions.SET_USER_SELECTED_OPTION,
+              option: featureKeys.cobrowsing,
+              value: false,
+            })
+          }
+          break
+        case seamlyActions.SET_USER_SELECTED_OPTIONS:
+          api.store.set('options', action.options)
+          break
+        case seamlyActions.SET_USER_SELECTED_OPTION:
+          api.store.set('options', {
+            ...(api.store.get('options') || {}),
+            [action.option]: action.value,
+          })
+          break
+      }
+      return result
+    }
+}

package/src/javascripts/domains/redux/create-redux-store.js

@@ -1,13 +1,21 @@
-import { combineReducers, createStore } from 'redux'
+import { combineReducers, createStore, applyMiddleware, compose } from 'redux'
 
-let enhancer
+let composeEnhancers = compose
 if (process.env.NODE_ENV === 'development') {
   /* eslint-disable no-underscore-dangle */
-  enhancer =
-    typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__?.()
+  composeEnhancers =
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || composeEnhancers
   /* eslint-enable no-underscore-dangle */
 }
 
-export default function createReduxStore(reducers = {}, initialState = {}) {
-  return createStore(combineReducers(reducers), initialState, enhancer)
+export default function createReduxStore({
+  reducers = {},
+  initialState = {},
+  middlewares = [],
+} = {}) {
+  return createStore(
+    combineReducers(reducers),
+    initialState,
+    composeEnhancers(applyMiddleware(...middlewares)),
+  )
 }

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

@@ -19,13 +19,14 @@ export function useStoreDispatch() {
 export function useSelector(selector, deps = []) {
   const store = useStoreContext()
   // we need a force-update because we're manually updating a ref instead of a useState
-  const [, forceUpdate] = useReducer(x => x + 1, 0)
+  const [, forceUpdate] = useReducer((x) => x + 1, 0)
   // we're keeping the value to compare against
   const valueRef = useRef()
 
   // 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
@@ -74,6 +75,6 @@ export const useSelectorWithProps = function useSelectorWithProps(
   // equalityFn = arrayContentEquals,
 ) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const wrappedMapper = useCallback(state => selector(state, props), inputs)
+  const wrappedMapper = useCallback((state) => selector(state, props), inputs)
   return useSelector(wrappedMapper, inputs)
 }

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

@@ -1,4 +1,5 @@
-import StoreContext, { Provider as StoreProvider } from './context'
+import StoreContext from './context'
+import StoreProvider from './provider'
 import createReduxStore from './create-redux-store'
 import {
   useStoreContext,

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

@@ -0,0 +1,5 @@
+import { Provider } from './context'
+
+export default function StoreProvider({ store, children }) {
+  return <Provider value={store}>{children}</Provider>
+}

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

@@ -0,0 +1,44 @@
+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,
+  createMiddleware as createI18nMiddleware,
+} from '../translations'
+import { Reducer as i18nReducer } from '../i18n'
+import {
+  Reducer as interruptReducer,
+  createMiddleware as createInterruptMiddleware,
+} from '../interrupt'
+import { createMiddleware as createOptionsMiddleware } from '../options'
+import stateReducer from './state-reducer'
+
+export function createStore({ initialState, api } = {}) {
+  const store = createReduxStore({
+    reducers: {
+      state: stateReducer,
+      [String(appReducer)]: appReducer,
+      [String(configReducer)]: configReducer,
+      [String(formReducer)]: formReducer,
+      [String(translationsReducer)]: translationsReducer,
+      [String(i18nReducer)]: i18nReducer,
+      [String(interruptReducer)]: interruptReducer,
+    },
+    initialState,
+    middlewares: [
+      thunkMiddleware.withExtraArgument({
+        api,
+      }),
+      createConfigMiddleware(),
+      createInterruptMiddleware(),
+      createOptionsMiddleware({ api }),
+      createI18nMiddleware(),
+    ],
+  })
+  return store
+}

package/src/javascripts/{ui → domains}/store/state-reducer.js

@@ -1,13 +1,14 @@
+// Legacy state reducer. Do not add new features here but extract/create new reducers as needed
+
 import { randomId } from '../../lib/id'
 import {
   entryTypes,
   seamlyStateReducer,
   visibilityStates,
-} from '../utils/seamly-utils'
+} from '../../ui/utils/seamly-utils'
 
 const initialState = {
   events: [],
-  config: { hideOnNoUserResponse: false },
   initialState: {},
   unreadEvents: 0,
   isLoading: false,
@@ -25,15 +26,11 @@ const initialState = {
     title: null,
     subTitle: '',
   },
-  interrupt: {
-    hasInterrupt: false,
-    meta: {},
-  },
   historyLoaded: false,
   skiplinkTargetId: randomId(),
   optionsButtonId: randomId(),
   cobrowsingContainerId: randomId(),
-  showDisclaimer: false,
+  headerCollapseButtonId: randomId(),
   serviceData: {},
   options: {
     features: {},

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

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

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

@@ -1,27 +1,21 @@
 import { useCallback, useMemo } from 'preact/hooks'
 import ChatStatus from '../../../ui/components/chat-status'
 import { useI18n } from '../../i18n'
-import {
-  useSeamlyInterrupt,
-  useSkiplinkTargetFocusing,
-} from '../../../ui/hooks/seamly-hooks'
+import { useSkiplinkTargetFocusing } from '../../../ui/hooks/seamly-hooks'
 import { useTranslationsContainer, useTranslations } from '../hooks'
+import { useInterrupt } from '../../interrupt'
 
 export default function TranslationsChatStatus() {
   const { t } = useI18n()
   const { id } = useTranslationsContainer()
-  const { hasInterrupt } = useSeamlyInterrupt()
+  const { hasInterrupt } = useInterrupt()
 
-  const {
-    isActive,
-    disableTranslations,
-    languages,
-    currentLocale,
-  } = useTranslations()
+  const { isActive, disableTranslations, languages, currentLocale } =
+    useTranslations()
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
 
   const languageName = useMemo(() => {
-    return languages?.find(lang => lang.locale === currentLocale)?.nativeName
+    return languages?.find((lang) => lang.locale === currentLocale)?.nativeName
   }, [languages, currentLocale])
 
   const handleClickStop = useCallback(() => {
@@ -37,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-button.js

@@ -15,7 +15,7 @@ export default function TranslationsOptionButton() {
   const toggleButton = useRef(null)
   const toggleButtonId = useGeneratedId()
 
-  const onMainKeyDownHandler = e => {
+  const onMainKeyDownHandler = (e) => {
     if (!menuIsOpen) {
       return
     }
@@ -31,9 +31,9 @@ export default function TranslationsOptionButton() {
   }
 
   const handleToggleClick = () => {
-    setMenuIsOpen(o => !o)
+    setMenuIsOpen((o) => !o)
   }
-  const handleToggleKeyDown = e => {
+  const handleToggleKeyDown = (e) => {
     if (getKey(e) === keyNames.ArrowDown) {
       setMenuIsOpen(true)
       e.preventDefault()

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

@@ -8,20 +8,25 @@ 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
+    return languages?.find((lang) => lang.locale === currentLocale)?.nativeName
   }, [languages, currentLocale])
 
   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/components/options-dialog/index.js

@@ -14,11 +14,8 @@ export const inputName = 'locale'
 function TranslationsOptionsDialog({ onClose }) {
   const { t } = useI18n()
 
-  const {
-    isActive,
-    enableTranslations,
-    disableTranslations,
-  } = useTranslations()
+  const { isActive, enableTranslations, disableTranslations } =
+    useTranslations()
 
   const descriptionId = useGeneratedId()
   const { focusContainer } = useTranslationsContainer()

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

@@ -12,7 +12,7 @@ export function useTranslations() {
   const { sendAction } = useSeamlyCommands()
   const dispatch = useStoreDispatch()
   const enableTranslations = useStableCallback(
-    locale => {
+    (locale) => {
       sendAction({
         type: actionTypes.setTranslation,
         body: { enabled: true, locale },

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 {
@@ -42,7 +35,7 @@ export default createReducer(
         currentLocale: locale,
       }
     },
-    [Actions.disable]: state => {
+    [Actions.disable]: (state) => {
       return {
         ...state,
         isActive: false,
@@ -56,7 +49,7 @@ export default createReducer(
       return {
         ...state,
         originalPayloadIds: state.originalPayloadIds.filter(
-          id => id !== payloadId,
+          (id) => id !== payloadId,
         ),
       }
     },

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

@@ -1,12 +1,12 @@
 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,
-  state => state.originalPayloadIds,
+  (state) => state.originalPayloadIds,
 )
 
 export const getIsPayloadTranslated = createSelector(

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

@@ -41,9 +41,6 @@ export { eventTypes } from './ui/utils/seamly-utils'
 // Used by: StyleGuide
 export { default as ExternalApi } from './lib/external-api'
 
-// Used by: StyleGuide
-export { getSeamlyConfig } from './ui/utils/seamly-utils'
-
 // Used by: StyleGuide
 export { getUrlParams } from './ui/utils/general-utils'
 
@@ -78,7 +75,7 @@ export { SeamlyEventBusContext } from './ui/components/core/seamly-api-context'
 export { SeamlyLiveRegionContext } from './ui/components/core/seamly-live-region-context'
 
 // Used by: StyleGuide
-export { default as StoreProvider } from './ui/store'
+export { StoreProvider } from './domains/redux'
 
 // Used by: Client
 export { useChoicePrompt } from './ui/components/conversation/event/choice-prompt'
@@ -93,7 +90,7 @@ export { useSeamlyChat } from './ui/hooks/seamly-hooks'
 export { useSeamlyCommands } from './ui/hooks/seamly-hooks'
 
 // Used by: Client
-export { useSeamlyConfig } from './ui/hooks/seamly-hooks'
+export { useConfig as useSeamlyConfig } from './domains/config'
 
 // Used by: Client
 export { useEvents } from './ui/hooks/seamly-hooks'
@@ -139,3 +136,21 @@ export { default as View } from './ui/components/layout/view'
 // Used by: Client
 // 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'
+
+// Used by: StyleGuide
+export { default as SeamlyConfigurationError } from './api/errors/seamly-configuration-error'
+
+// Used by: StyleGuide
+export { default as SeamlySessionExpiredError } from './api/errors/seamly-session-expired-error'
+
+// Used by: StyleGuide
+export { default as SeamlyOfflineError } from './api/errors/seamly-offline-error'
+
+// Used by: StyleGuide
+export { default as SeamlyUnauthorizedError } from './api/errors/seamly-unauthorized-error'

package/src/javascripts/lib/css.js

@@ -10,7 +10,7 @@ import { CSS_NAME } from '../config'
 export const className = (...classes) =>
   classes
     .flat()
-    .map(c => {
+    .map((c) => {
       if (typeof c === 'object') {
         return Object.entries(c)
           .map(([key, value]) => (value ? key : ''))
@@ -18,9 +18,9 @@ export const className = (...classes) =>
       }
       return c
     })
-    .filter(c => typeof c === 'string')
-    .map(c => c.split(' '))
+    .filter((c) => typeof c === 'string')
+    .map((c) => c.split(' '))
     .flat()
-    .filter(c => c.length)
-    .map(c => [CSS_NAME, c].join('-'))
+    .filter((c) => c.length)
+    .map((c) => [CSS_NAME, c].join('-'))
     .join(' ')