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

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

@@ -0,0 +1,43 @@
+import { seamlyActions } from '../../ui/utils/seamly-utils'
+import { Actions as ConfigActions } from '../config'
+import { Actions as InterruptActions } from '../interrupt'
+import { Actions as I18nActions } from '../i18n'
+import { createAction, createThunk } from './utils'
+
+export const setHasResponded = createAction(
+  'setHasResponded',
+  (hasResponded) => ({ hasResponded }),
+)
+
+export const initialize = createThunk(
+  'initialize',
+  (config) =>
+    async (dispatch, getState, { api }) => {
+      try {
+        dispatch(ConfigActions.initialize(config))
+
+        const { features, defaultLocale } = await api.getConfig()
+        dispatch({ type: seamlyActions.SET_FEATURES, features })
+
+        let locale = config?.context?.locale || defaultLocale
+        dispatch(I18nActions.setInitialLocale(locale))
+        try {
+          if (api.hasConversation()) {
+            const initialState = await api.getConversationIntitialState()
+            dispatch({ type: seamlyActions.SET_INITIAL_STATE, initialState })
+
+            locale = initialState.translation?.locale || locale
+
+            if ('userResponded' in initialState) {
+              dispatch(setHasResponded(initialState.userResponded))
+            }
+          }
+        } catch (error) {
+          dispatch(InterruptActions.set(error))
+        }
+        await dispatch(I18nActions.setLocale(locale))
+      } catch (error) {
+        dispatch(InterruptActions.set(error))
+      }
+    },
+)

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

@@ -0,0 +1,6 @@
+import { useSelector } from '../redux'
+import * as Selectors from './selectors'
+
+export function useUserHasResponded() {
+  return useSelector(Selectors.selectUserHasResponded)
+}

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

@@ -0,0 +1,6 @@
+import * as Actions from './actions'
+
+export * from './hooks'
+export { default as Reducer } from './reducer'
+
+export { Actions }

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

@@ -0,0 +1,16 @@
+import { createReducer } from './utils'
+import * as Actions from './actions'
+
+const initialState = {
+  userHasResponded: false,
+}
+
+export default createReducer(
+  {
+    [Actions.setHasResponded]: (state, { hasResponded }) => ({
+      ...state,
+      userHasResponded: hasResponded,
+    }),
+  },
+  initialState,
+)

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

@@ -0,0 +1,8 @@
+import { createSelector } from 'reselect'
+import { selectState } from './utils'
+
+export const selectUserHasResponded = createSelector(
+  selectState,
+  (state) => state.userHasResponded,
+)
+export { selectState }

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

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

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

@@ -0,0 +1,4 @@
+import { createAction } from './utils'
+
+export const initialize = createAction('initialize', (config) => ({ config }))
+export const update = createAction('update', (config) => ({ config }))

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

@@ -0,0 +1,6 @@
+import { useSelector } from '../redux'
+import * as Selectors from './selectors'
+
+export function useConfig() {
+  return useSelector(Selectors.selectConfig)
+}

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

@@ -0,0 +1,8 @@
+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 { Actions, Selectors }

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

@@ -0,0 +1,22 @@
+import * as Actions from './actions'
+import { seamlyActions } from '../../ui/utils/seamly-utils'
+
+export default function createMiddleware() {
+  return ({ dispatch }) =>
+    (next) =>
+    (action) => {
+      const result = next(action)
+
+      switch (action.type) {
+        case String(Actions.initialize):
+        case String(Actions.update):
+          if (action?.config?.defaults?.agentName) {
+            dispatch({
+              type: seamlyActions.SET_HEADER_SUB_TITLE,
+              title: action?.config?.defaults?.agentName,
+            })
+          }
+      }
+      return result
+    }
+}

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

@@ -0,0 +1,63 @@
+import { defaultConfig } from '../../config'
+import { createReducer } from './utils'
+import * as Actions from './actions'
+import { pick } from '../../ui/utils/general-utils'
+
+const initialState = {
+  ...defaultConfig,
+  hideOnNoUserResponse: false,
+  showDisclaimer: false,
+  showFaq: false,
+  customComponents: {},
+  defaults: {},
+}
+
+const configKeys = [
+  'hideOnNoUserResponse',
+  'showDisclaimer',
+  'showFaq',
+  'namespace',
+  'customComponents',
+  'defaults',
+  'layoutMode',
+  'api',
+  'zIndex',
+  'context',
+  'appContainerClassNames',
+  'messages',
+  'visible',
+  'visibilityCallback',
+]
+const updateState = (state, { config }) => {
+  const { messages, ...partialConfig } = pick(config, configKeys)
+  let newState = state
+  if (Object.keys(partialConfig).length > 0) {
+    newState = {
+      ...newState,
+      ...partialConfig,
+    }
+  }
+  if (messages) {
+    newState = {
+      ...newState,
+      messages: {
+        ...newState.messages,
+        ...messages,
+      },
+    }
+  }
+
+  return newState
+}
+
+export default createReducer(
+  {
+    [Actions.initialize]: (state, action) => {
+      return updateState(state, action)
+    },
+    [Actions.update]: (state, action) => {
+      return updateState(state, action)
+    },
+  },
+  initialState,
+)

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

@@ -0,0 +1,23 @@
+import { createSelector } from 'reselect'
+import { visibilityStates } from '../../ui/utils/seamly-utils'
+import { selectState } from './utils'
+
+export const selectConfig = createSelector(selectState, (config) => {
+  let newConfig = {
+    visible:
+      config?.layoutMode === 'inline'
+        ? visibilityStates.open
+        : visibilityStates.minimized,
+    appContainerClassNames: config.appContainerClassNames || [],
+    ...config,
+  }
+  if (typeof newConfig.appContainerClassNames === 'function') {
+    newConfig = {
+      ...newConfig,
+      appContainerClassNames: newConfig.appContainerClassNames(newConfig),
+    }
+  }
+  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,10 +1,8 @@
-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 }),
-  deregister: formId => ({ formId }),
+  deregister: (formId) => ({ formId }),
 })
 
 export const [

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

@@ -29,10 +29,10 @@ export function useForm() {
 }
 
 export function useValidations(values, validationSchema) {
-  const errors = useMemo(() => validate(values, validationSchema), [
-    values,
-    validationSchema,
-  ])
+  const errors = useMemo(
+    () => validate(values, validationSchema),
+    [values, validationSchema],
+  )
   return {
     isValid: Object.keys(errors).length === 0,
     errors,
@@ -41,12 +41,8 @@ export function useValidations(values, validationSchema) {
 
 export function useFormControl(name) {
   const dispatch = useStoreDispatch()
-  const {
-    formId,
-    updateControlValue,
-    updateControlTouched,
-    errors,
-  } = useFormContext()
+  const { formId, updateControlValue, updateControlTouched, errors } =
+    useFormContext()
   const form = useSelectorWithProps(getFormById, { formId }, [formId])
   const isRegistered = !!form
   const isRegisteredRef = useRef()
@@ -77,10 +73,10 @@ export function useFormControl(name) {
   }, [isRegistered, formId, name, dispatch])
 
   // preact uses onInput instead of onChange
-  const onInput = useCallback(e => updateControlValue(name, e.target.value), [
-    name,
-    updateControlValue,
-  ])
+  const onInput = useCallback(
+    (e) => updateControlValue(name, e.target.value),
+    [name, updateControlValue],
+  )
 
   const onBlur = useCallback(() => {
     updateControlTouched(name, true)

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

@@ -25,10 +25,8 @@ export default function FormProvider({
   ])
   const [isSubmitted, setIsSubmitted] = useState(false)
   const [externalErrors, setExternalErrors] = useState({})
-  const {
-    isValid: validationIsValid,
-    errors: validationErrors,
-  } = useValidations(values, validationSchema)
+  const { isValid: validationIsValid, errors: validationErrors } =
+    useValidations(values, validationSchema)
   const errors = useMemo(
     () => ({
       ...validationErrors,
@@ -68,7 +66,7 @@ export default function FormProvider({
   // Function to manually set an error
   const setError = useCallback(
     (name, error) => {
-      setExternalErrors(val => {
+      setExternalErrors((val) => {
         return {
           ...val,
           [name]: error,
@@ -79,7 +77,7 @@ export default function FormProvider({
   )
 
   const handleSubmit = useCallback(
-    e => {
+    (e) => {
       e.preventDefault()
       setIsSubmitted(true)
       if (validationIsValid) {

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,
@@ -12,12 +12,12 @@ export const getFormById = createSelector(
 
 export const getFormControlsByFormId = createSelector(
   getFormById,
-  form => form?.controls || {},
+  (form) => form?.controls || {},
 )
 
 export const getFormValuesByFormId = createSelector(
   getFormControlsByFormId,
-  controls => {
+  (controls) => {
     const valuesObj = {}
     Object.entries(controls).forEach(([key, { value }]) => {
       valuesObj[key] = value

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,35 @@
+import createMutex from '../../lib/mutex'
+import { selectLocale } from './selectors'
+import { createAction, createActions, createThunk } from './utils'
+
+export const setInitialLocale = createAction('setInitialLocale', (locale) => ({
+  locale,
+}))
+
+export const [setLocaleStart, setLocaleResolve, setLocaleReject] =
+  createActions('setLocale', {
+    start: (locale) => ({ locale }),
+    resolve: (locale, translations) => ({ locale, translations }),
+    reject: (locale, error) => ({ locale, error }),
+  })
+
+const mutex = createMutex()
+export const setLocale = createThunk(
+  'setLocale',
+  (locale) =>
+    async (dispatch, getState, { api }) => {
+      await mutex.runExclusively(async () => {
+        const currentLocale = selectLocale(getState())
+        if (currentLocale === locale) {
+          return
+        }
+        dispatch(setLocaleStart(locale))
+        try {
+          const translations = await api.getTranslations(locale)
+          dispatch(setLocaleResolve(locale, translations))
+        } catch (error) {
+          dispatch(setLocaleReject(locale, error))
+        }
+      })
+    },
+)

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,82 +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,
-}))
-
-// 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,58 @@
+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.setLocaleStart]: (state) => ({
+      ...state,
+      isLoading: true,
+    }),
+    [Actions.setLocaleResolve]: (state, { locale, translations }) => {
+      return {
+        ...state,
+        isLoading: false,
+        locale,
+        translations: Object.keys(translations)
+          .sort()
+          .reduce(
+            (accum, key) => ({
+              ...accum,
+              [key]: translations[key],
+            }),
+            {},
+          ),
+      }
+    },
+    [Actions.setLocaleReject]: (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,9 @@
+import { createDomain } from '../../lib/redux-helpers'
+
+export const {
+  createAction,
+  createActions,
+  createThunk,
+  createReducer,
+  selectState,
+} = createDomain('i18n')

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

@@ -0,0 +1,4 @@
+import { createAction } from './utils'
+
+export const set = createAction('set', (error) => ({ error }))
+export const clear = createAction('clear')

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

@@ -0,0 +1,29 @@
+import { useMemo } from 'preact/hooks'
+import { useI18n } from '../i18n'
+import { useSelector } from '../redux'
+import * as Selectors from './selectors'
+
+export function useInterrupt() {
+  const { t } = useI18n()
+
+  const error = useSelector(Selectors.selectError)
+  const hasInterrupt = Boolean(error)
+
+  const meta = useMemo(() => {
+    if (!error) return {}
+    const { langKey, action } = error
+    const title = t(`${langKey}.title`)
+    const message = t(`${langKey}.message`)
+    const srText = t(`${langKey}.srText`)
+    const buttonText = t(`${langKey}.buttonText`)
+
+    return {
+      ...(langKey ? { title, message, srText } : {}),
+      ...(action ? { action } : {}),
+      ...(action && langKey ? { buttonText } : {}),
+      originalError: error,
+    }
+  }, [t, error])
+
+  return { hasInterrupt, meta, error }
+}

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

@@ -0,0 +1,9 @@
+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 { Actions, Selectors }