@seamly/web-ui 20.7.0 → 20.8.0-beta.1

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

@@ -1,112 +0,0 @@
-import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
-import * as ConfigActions from 'domains/config/actions'
-import * as I18nActions from 'domains/i18n/actions'
-import * as TranslationActions from 'domains/translations/actions'
-import * as VisibilityActions from 'domains/visibility/actions'
-import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
-import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
-import * as InterruptActions from 'domains/interrupt/actions'
-import { createAction, createThunk } from './utils'
-
-export const setHasResponded = createAction(
-  'setHasResponded',
-  (hasResponded) => ({ hasResponded }),
-)
-
-export const initialize = createThunk(
-  'initialize',
-  async (_, { dispatch, extra: { api, config } }) => {
-    dispatch(ConfigActions.initialize(config))
-    let locale = config?.context?.locale
-
-    try {
-      const {
-        features,
-        defaultLocale,
-        preChat,
-        agentParticipant,
-        userParticipant,
-        startChatIcon,
-      } = await api.getConfig()
-
-      dispatch({ type: seamlyActions.SET_FEATURES, features })
-      locale = locale || defaultLocale
-      dispatch(I18nActions.setInitialLocale(locale))
-      dispatch(
-        ConfigActions.setPreChatEvents(
-          preChat.map((payload) => ({ type: 'message', payload })),
-        ),
-      )
-      dispatch(
-        ConfigActions.update({
-          agentParticipant,
-          userParticipant,
-          startChatIcon,
-        }),
-      )
-
-      if (agentParticipant?.name) {
-        dispatch({
-          type: seamlyActions.SET_HEADER_SUB_TITLE,
-          title: agentParticipant.name,
-        })
-      }
-    } catch (e) {
-      throw new SeamlyUnavailableError()
-    }
-
-    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))
-        }
-      } else {
-        if (config?.context?.topic) {
-          api.send('action', {
-            type: actionTypes.setTopic,
-            body: {
-              name: config.context.topic,
-              // Separate fallback message is not needed here. Only an attached service will use this, but none will
-              // be attached before the conversation has started (meaning the fallback message will never be shown).
-              fallbackMessage: config.context.topic,
-            },
-          })
-        }
-        if (config?.context?.translationLocale) {
-          locale = config.context.translationLocale
-          api.send('action', {
-            type: actionTypes.setTranslation,
-            body: { enabled: true, locale },
-          })
-          dispatch(TranslationActions.enable(locale))
-        }
-      }
-    } catch (e) {
-      if (e instanceof SeamlySessionExpiredError) {
-        throw e
-      }
-      throw new SeamlyUnavailableError()
-    } finally {
-      await dispatch(I18nActions.setLocale(locale))
-      dispatch(VisibilityActions.initialize())
-    }
-  },
-)
-
-export const reset = createThunk(
-  'reset',
-  async (config, { dispatch, extra: { api } }) => {
-    try {
-      await api.disconnect()
-      await api.clearStore()
-      dispatch(initialize())
-    } catch (error) {
-      dispatch(InterruptActions.set(error))
-    }
-  },
-)

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

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

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

@@ -1,16 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

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

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

@@ -1,23 +0,0 @@
-import { useSelector } from 'domains/redux'
-import * as Selectors from './selectors'
-
-export function useConfig() {
-  return useSelector(Selectors.selectConfig)
-}
-
-export function useParticipants() {
-  const { agentParticipant, userParticipant } = useSelector(
-    Selectors.selectConfig,
-  )
-
-  return {
-    agent: agentParticipant,
-    user: userParticipant,
-  }
-}
-
-export function useStartChatIcon() {
-  const { startChatIcon } = useSelector(Selectors.selectConfig)
-
-  return startChatIcon
-}

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

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

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

@@ -1,79 +0,0 @@
-import { defaultConfig } from 'config'
-import { pick } from 'ui/utils/general-utils'
-import * as AppActions from 'domains/app/actions'
-import { createReducer } from './utils'
-import * as Actions from './actions'
-
-const initialState = {
-  ...defaultConfig,
-  hideOnNoUserResponse: false,
-  connectWhenInView: true,
-  showDisclaimer: false,
-  showFaq: false,
-  customComponents: {},
-  defaults: {},
-  preChatEvents: [],
-}
-
-const configKeys = [
-  'hideOnNoUserResponse',
-  'connectWhenInView',
-  'showDisclaimer',
-  'showFaq',
-  'namespace',
-  'customComponents',
-  'defaults',
-  'layoutMode',
-  'api',
-  'zIndex',
-  'context',
-  'appContainerClassNames',
-  'messages',
-  'visible',
-  'visibilityCallback',
-  'errorCallback',
-  'agentParticipant',
-  'userParticipant',
-  'startChatIcon',
-]
-
-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)
-    },
-    [AppActions.initialize.pending]: () => initialState,
-    [Actions.setPreChatEvents]: (state, { events }) => {
-      return {
-        ...state,
-        preChatEvents: events,
-      }
-    },
-  },
-  initialState,
-)

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

@@ -1,23 +0,0 @@
-import { createSelector } from 'reselect'
-import { visibilityStates } from 'domains/visibility/constants'
-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

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

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

@@ -1,21 +0,0 @@
-import { createActions } from './utils'
-
-export const [registerForm, deregisterForm] = createActions('form', {
-  register: (formId, persistData) => ({ formId, persistData }),
-  deregister: (formId) => ({ formId }),
-})
-
-export const [
-  registerControl,
-  deregisterControl,
-  updateControlValue,
-  updateControlTouched,
-] = createActions('control', {
-  register: (formId, name) => ({
-    formId,
-    name,
-  }),
-  deregister: (formId, name) => ({ formId, name }),
-  updateValue: (formId, name, value) => ({ formId, name, value }),
-  updateTouched: (formId, name, touched) => ({ formId, name, touched }),
-})

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

@@ -1,6 +0,0 @@
-import { createContext } from 'preact'
-
-const FormContext = createContext({})
-
-export default FormContext
-export const { Provider, Consumer } = FormContext

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

@@ -1,8 +0,0 @@
-import * as Actions from './actions'
-import * as Selectors from './selectors'
-
-export * from './hooks'
-export { default as FormProvider } from './provider'
-export { default as Reducer } from './reducer'
-
-export { Actions, Selectors }

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

@@ -1,84 +0,0 @@
-import * as AppActions from 'domains/app/actions'
-import { createReducer } from './utils'
-import * as Actions from './actions'
-
-const initialState = {}
-
-const initialFormState = {
-  controls: {},
-}
-
-const initialControlState = {
-  value: '',
-  touched: false,
-}
-
-function updateFormControl(state, formId, name, controlState) {
-  const currentControlState =
-    state[formId]?.controls[name] || initialControlState
-  return {
-    ...state,
-    [formId]: {
-      ...state[formId],
-      controls: {
-        ...state[formId].controls,
-        [name]: {
-          ...currentControlState,
-          ...controlState,
-        },
-      },
-    },
-  }
-}
-
-export default createReducer(
-  {
-    // Form handlers
-    [Actions.registerForm]: (state, { formId, persistData }) => {
-      const formState = persistData
-        ? state[formId] ?? { ...initialFormState, persistData }
-        : { ...initialFormState, persistData }
-      return {
-        ...state,
-        [formId]: formState,
-      }
-    },
-    [Actions.deregisterForm]: (state, { formId }) => {
-      const newState = { ...state }
-      if (!newState[formId]?.persistData) {
-        delete newState[formId]
-      }
-      return newState
-    },
-    // Form control handlers
-    [Actions.registerControl]: (state, { name, formId }) => {
-      return updateFormControl(state, formId, name)
-    },
-    [Actions.deregisterControl]: (state, { formId, name }) => {
-      const form = state[formId]
-      if (!form) {
-        return state
-      }
-      if (form.persistData) {
-        return state
-      }
-      const controls = { ...form.controls }
-      delete controls[name]
-      return {
-        ...state,
-        [formId]: {
-          ...form,
-          controls,
-        },
-      }
-    },
-    [Actions.updateControlValue]: (state, { formId, name, value }) => {
-      return updateFormControl(state, formId, name, { value })
-    },
-    [Actions.updateControlTouched]: (state, { formId, name, touched }) => {
-      return updateFormControl(state, formId, name, { touched })
-    },
-    [AppActions.initialize.pending]: () => initialState,
-  },
-  initialState,
-)

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

@@ -1,20 +0,0 @@
-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)) {
-      // eslint-disable-next-line no-param-reassign
-      validations = [validations]
-    }
-    for (let i = 0; i < validations?.length ?? 0; i++) {
-      if (!validations[i].fn(values[key], validations[i].compareValue)) {
-        errors[key] = validations[i].errorText
-        break
-      }
-    }
-    return errors
-  }, {})
-}

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

@@ -1,20 +0,0 @@
-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/index.js

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

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

@@ -1,15 +0,0 @@
-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

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

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

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

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

@@ -1,9 +0,0 @@
-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/interrupt/reducer.js

@@ -1,22 +0,0 @@
-import * as AppActions from 'domains/app/actions'
-import { createReducer } from './utils'
-import * as Actions from './actions'
-
-const initialState = {
-  error: undefined,
-}
-
-const handleError = (state, { error }) => ({
-  ...state,
-  error,
-})
-
-export default createReducer(
-  {
-    [Actions.set]: handleError,
-    [AppActions.initialize.rejected]: handleError,
-    [Actions.clear]: () => initialState,
-    [AppActions.initialize.pending]: () => initialState,
-  },
-  initialState,
-)

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

@@ -1,6 +0,0 @@
-import { createSelector } from 'reselect'
-import { selectState } from './utils'
-
-export const selectError = createSelector(selectState, ({ error }) => error)
-
-export { selectState }

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

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

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

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

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

@@ -1,6 +0,0 @@
-import { createContext } from 'preact'
-
-const StoreContext = createContext(undefined)
-
-export default StoreContext
-export const { Provider, Consumer } = StoreContext

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

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

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

@@ -1,80 +0,0 @@
-import {
-  useCallback,
-  useContext,
-  useLayoutEffect,
-  useReducer,
-  useRef,
-} from 'preact/hooks'
-import StoreContext from './context'
-// import { arrayContentEquals } from './utils'
-
-export function useStoreContext() {
-  return useContext(StoreContext)
-}
-
-export function useStoreDispatch() {
-  return useStoreContext().dispatch
-}
-
-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)
-  // 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
-  // synchronous state updates if the selector changes, but the store didn't
-  // if the selector changes, we want to synchronously select the new information
-  // otherwise, the rendered component does not accurately and predictably reflect
-  // the selector+state
-  // in order to keep multiple selectors in sync, we also re-calculate when
-  // the state has changed but the selector hasn't re-calculated async.
-  // selectors *might* be heavy, which could kill FPS, but the alternative is
-  // stale data
-  const selectorRef = useRef()
-  const stateRef = useRef()
-  const state = store.getState()
-  if (selectorRef.current !== selectorCb || stateRef.current !== state) {
-    stateRef.current = state
-    valueRef.current = selectorCb(stateRef.current)
-    selectorRef.current = selectorCb
-  }
-
-  useLayoutEffect(() => {
-    // we subscribe to the store changes
-    return store.subscribe(() => {
-      const newState = store.getState()
-      // prevent recalculating if the state hasn't changed
-      // if the selector changed, it was already handled synchronously
-      if (newState === stateRef.current) {
-        return
-      }
-      // calculate the new value based on selector+state
-      const newValue = selectorRef.current?.(store.getState())
-      // only if the value changed we update. this saves heaps of re-rendering
-      if (newValue !== valueRef.current) {
-        valueRef.current = newValue
-        forceUpdate()
-      }
-    })
-  }, [store])
-  return valueRef.current
-}
-
-export const useSelectorWithProps = function useSelectorWithProps(
-  selector,
-  props,
-  inputs = [],
-  // equalityFn = arrayContentEquals,
-) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const wrappedMapper = useCallback((state) => selector(state, props), inputs)
-  return useSelector(wrappedMapper, inputs)
-}