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

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

@@ -1,19 +0,0 @@
-import StoreContext from './context'
-import StoreProvider from './provider'
-import createReduxStore from './create-redux-store'
-import {
-  useStoreContext,
-  useSelector,
-  useStoreDispatch,
-  useSelectorWithProps,
-} from './hooks'
-
-export {
-  createReduxStore,
-  useSelector,
-  useSelectorWithProps,
-  useStoreDispatch,
-  useStoreContext,
-  StoreContext,
-  StoreProvider,
-}

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

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

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

@@ -1,12 +0,0 @@
-export const arrayContentEquals = (a, b) => {
-  if (a === b) {
-    return true
-  }
-  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {
-    return false
-  }
-  return a.every((value, idx) => b[idx] === value)
-}
-
-export const getPropSelector = (propName, orDefault) => (_, props) =>
-  props[propName] || orDefault

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

@@ -1,46 +0,0 @@
-import { Reducer as appReducer } from 'domains/app'
-import { Reducer as configReducer } from 'domains/config'
-import { createMiddleware as createErrorsMiddleware } from 'domains/errors'
-import { Reducer as formReducer } from 'domains/forms'
-import { Reducer as i18nReducer } from 'domains/i18n'
-import {
-  createMiddleware as createInterruptMiddleware,
-  Reducer as interruptReducer,
-} from 'domains/interrupt'
-import { createMiddleware as createOptionsMiddleware } from 'domains/options'
-import { createReduxStore } from 'domains/redux'
-import {
-  createMiddleware as createI18nMiddleware,
-  Reducer as translationsReducer,
-} from 'domains/translations'
-import { Reducer as visibilityReducer } from 'domains/visibility'
-import thunkMiddleware from 'redux-thunk'
-import stateReducer from './state-reducer'
-
-export function createStore({ initialState, api, eventBus, config } = {}) {
-  const store = createReduxStore({
-    reducers: {
-      state: stateReducer,
-      [String(appReducer)]: appReducer,
-      [String(configReducer)]: configReducer,
-      [String(formReducer)]: formReducer,
-      [String(translationsReducer)]: translationsReducer,
-      [String(i18nReducer)]: i18nReducer,
-      [String(interruptReducer)]: interruptReducer,
-      [String(visibilityReducer)]: visibilityReducer,
-    },
-    initialState,
-    middlewares: [
-      createErrorsMiddleware({ api }),
-      thunkMiddleware.withExtraArgument({
-        api,
-        eventBus,
-        config,
-      }),
-      createInterruptMiddleware({ api }),
-      createOptionsMiddleware({ api }),
-      createI18nMiddleware,
-    ],
-  })
-  return store
-}

package/src/javascripts/domains/store/state-reducer.js

@@ -1,56 +0,0 @@
-// Legacy state reducer. Do not add new features here but extract/create new reducers as needed
-
-import { randomId } from 'lib/id'
-import { entryTypes, seamlyStateReducer } from 'ui/utils/seamly-utils'
-import * as AppActions from 'domains/app/actions'
-
-const initialState = {
-  events: [],
-  initialState: {},
-  unreadEvents: 0,
-  loadedImageEventIds: [],
-  isLoading: false,
-  idleDetachCountdown: { hasCountdown: false, isActive: false },
-  resumeConversationPrompt: false,
-  serviceInfo: {
-    activeServiceSessionId: '',
-  },
-  participantInfo: {
-    participants: {},
-    currentAgent: '',
-  },
-  headerTitles: {
-    title: null,
-    subTitle: '',
-  },
-  historyLoaded: false,
-  skiplinkTargetId: randomId(),
-  optionsButtonId: randomId(),
-  headerCollapseButtonId: randomId(),
-  serviceData: {},
-  options: {
-    features: {},
-    panelActive: false,
-    optionActive: '',
-    userSelectedOptions: {},
-  },
-  showFileUpload: false,
-  currentUploads: [],
-  entryMeta: {
-    default: entryTypes.text,
-    active: entryTypes.text,
-    userSelected: null,
-    blockAutoEntrySwitch: false,
-    options: {},
-    optionsOverride: {},
-  },
-  seamlyContainerElement: null,
-}
-
-export default function stateReducer(state = initialState, action) {
-  if (action.type === String(AppActions.initialize.pending)) {
-    return initialState
-  }
-
-  return seamlyStateReducer(state, action)
-}

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

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

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

@@ -1,103 +0,0 @@
-import { useMemo } from 'preact/hooks'
-import {
-  useElementFocusingById,
-  useSeamlyCommands,
-  useStableCallback,
-} from 'ui/hooks/seamly-hooks'
-import { actionTypes } from 'ui/utils/seamly-utils'
-import {
-  useSelector,
-  useSelectorWithProps,
-  useStoreDispatch,
-} from 'domains/redux'
-import * as Selectors from './selectors'
-import * as Actions from './actions'
-
-export function useTranslations() {
-  const { sendAction } = useSeamlyCommands()
-  const dispatch = useStoreDispatch()
-  const enableTranslations = useStableCallback(
-    (locale) => {
-      sendAction({
-        type: actionTypes.setTranslation,
-        body: { enabled: true, locale },
-      })
-      dispatch(Actions.enable(locale))
-    },
-    [sendAction, dispatch],
-  )
-  const disableTranslations = useStableCallback(() => {
-    sendAction({ type: actionTypes.setTranslation, body: { enabled: false } })
-    dispatch(Actions.disable())
-  }, [sendAction, dispatch])
-
-  const { languages, isActive, isAvailable, currentLocale } = useSelector(
-    Selectors.getState,
-    [],
-  )
-
-  return {
-    languages,
-    isActive,
-    isAvailable,
-    currentLocale,
-    enableTranslations,
-    disableTranslations,
-  }
-}
-
-export function useTranslatedEventData({ payload } = {}) {
-  const payloadId = payload?.id
-  let body
-  let translatedBody
-  switch (payload?.type) {
-    case 'participant':
-      body = payload.participant.introduction
-      translatedBody = payload.participant.translatedIntroduction
-      break
-    default:
-      body = payload?.body
-      translatedBody = payload?.translatedBody
-  }
-  const hasTranslation = !!translatedBody
-  const isTranslated = useSelectorWithProps(
-    Selectors.getIsPayloadTranslated,
-    { payloadId },
-    [payloadId],
-  )
-  const dispatch = useStoreDispatch()
-
-  const toggleTranslation = useStableCallback(() => {
-    if (isTranslated) {
-      dispatch(Actions.disableEvent(payloadId))
-    } else {
-      dispatch(Actions.enableEvent(payloadId))
-    }
-  }, [isTranslated, payloadId, dispatch])
-
-  return [
-    hasTranslation && isTranslated ? translatedBody?.data : body,
-    {
-      hasTranslation,
-      isTranslated: isTranslated && hasTranslation,
-      toggleTranslation,
-      translatedBy: translatedBody?.translatedBy,
-      locale: translatedBody?.locale,
-    },
-  ]
-}
-
-export function useTranslationsContainer() {
-  const id = useSelector(Selectors.getState, []).containerId
-  const focusContainer = useElementFocusingById(id)
-  return { id, focusContainer }
-}
-
-export function useLocaleNativeName(locale) {
-  const { languages } = useTranslations()
-
-  return useMemo(
-    () => languages?.find((lang) => lang.locale === locale)?.nativeName,
-    [locale, languages],
-  )
-}

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

@@ -1,10 +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 { default as OptionsButton } from './components/options-button'
-export { default as ChatStatus } from './components/chat-status'
-
-export { Actions, Selectors }

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

@@ -1,69 +0,0 @@
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import { randomId } from 'lib/id'
-import * as AppActions from 'domains/app/actions'
-import * as Actions from './actions'
-import { createReducer } from './utils'
-
-const initialState = {
-  isActive: false,
-  currentLocale: undefined,
-  isAvailable: false,
-  languages: [],
-  originalPayloadIds: [],
-  containerId: randomId(),
-}
-
-export default createReducer(
-  {
-    [seamlyActions.SET_FEATURES]: (state, action) => {
-      const feature = action?.features?.translation
-      if (!feature) {
-        return state
-      }
-
-      return {
-        ...state,
-        isAvailable: feature.enabled === true,
-        languages: feature.languages || [],
-      }
-    },
-
-    [seamlyActions.CLEAR_FEATURES]: () => initialState,
-    [Actions.enable]: (state, { locale }) => {
-      return {
-        ...state,
-        isActive: true,
-        currentLocale: locale,
-      }
-    },
-    [Actions.disable]: (state) => {
-      return {
-        ...state,
-        isActive: false,
-        currentLocale: undefined,
-      }
-    },
-    [Actions.enableEvent]: (state, { payloadId }) => {
-      if (!state.originalPayloadIds.includes(payloadId)) {
-        return state
-      }
-      return {
-        ...state,
-        originalPayloadIds: state.originalPayloadIds.filter(
-          (id) => id !== payloadId,
-        ),
-      }
-    },
-    [Actions.disableEvent]: (state, { payloadId }) => {
-      if (state.originalPayloadIds.includes(payloadId)) {
-        return state
-      }
-      return {
-        ...state,
-        originalPayloadIds: [...state.originalPayloadIds, payloadId],
-      }
-    },
-    [AppActions.initialize.pending]: () => initialState,
-  },
-  initialState,
-)

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

@@ -1,16 +0,0 @@
-import { createSelector } from 'reselect'
-import { getPropSelector } from 'domains/redux/utils'
-import { selectState } from './utils'
-
-export const getState = selectState
-
-export const getOriginalPayloadIds = createSelector(
-  getState,
-  (state) => state.originalPayloadIds,
-)
-
-export const getIsPayloadTranslated = createSelector(
-  getOriginalPayloadIds,
-  getPropSelector('payloadId'),
-  (payloadIds, payloadId) => !payloadIds.includes(payloadId),
-)

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

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

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

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

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

@@ -1,24 +0,0 @@
-import { createReducer } from './utils'
-import * as Actions from './actions'
-import { visibilityStates } from './constants'
-
-const initialState = {
-  visibility: visibilityStates.initialize,
-  showInlineView: false,
-}
-
-export default createReducer(
-  {
-    [Actions.setFromStorage]: (state, { visibility }) => ({
-      ...state,
-      visibility,
-    }),
-    [Actions.setVisibility.fulfilled]: (state, { payload: visibility }) =>
-      visibility ? { ...state, visibility } : state,
-    [Actions.setShowInlineView]: (state) => ({
-      ...state,
-      showInlineView: true,
-    }),
-  },
-  initialState,
-)

package/src/javascripts/index.js

@@ -1,153 +0,0 @@
-import preactDebug from './lib/preact-debug' // eslint-disable-line
-
-// Used by: Client
-import initializeExternalApi from './lib/external-api/initialize-api'
-
-export default initializeExternalApi
-
-// Used by: Client
-export { default as AgentInfo } from './ui/components/layout/agent-info'
-
-// Used by: Client
-export { default as Chat } from './ui/components/layout/chat'
-
-// Used by: Client
-export { calculateVisibility } from './domains/visibility'
-
-// Used by: Client
-export { default as ChatFrame } from './ui/components/layout/chat-frame'
-
-// Used by: Client
-export { className } from './lib/css'
-
-// Used by: Client
-export { default as Conversation } from './ui/components/conversation/conversation'
-
-// Used by: StyleGuide
-export { createReduxStore } from './domains/redux'
-
-// Used by: StyleGuide
-export { default as Engine } from './lib/engine'
-
-// Used by: Client
-export { default as EntryContainer } from './ui/components/entry/entry-container'
-
-// Used by: Demo
-export { default as EventParticipant } from './ui/components/conversation/event/event-participant'
-
-// Used by: Client
-export { eventTypes } from './ui/utils/seamly-utils'
-
-// Used by: StyleGuide
-export { default as ExternalApi } from './lib/external-api'
-
-// Used by: StyleGuide
-export { getUrlParams } from './ui/utils/general-utils'
-
-// Used by: StyleGuide
-export { getUrlSearchString } from './ui/utils/general-utils'
-
-// Used by: Client
-export { default as Header } from './ui/components/layout/header'
-
-// Used by: Client
-export { default as Icon } from './ui/components/layout/icon'
-
-// Used by: Client
-export { default as Interrupt } from './ui/components/layout/interrupt'
-
-// Used by: Client
-export { default as MessageContainer } from './ui/components/conversation/message-container'
-
-// Used by: StyleGuide
-export { randomId } from './lib/id'
-
-// Used by: Client
-export { seamlyActions } from './ui/utils/seamly-utils'
-
-// Used by: StyleGuide
-export { SeamlyApiContext } from './ui/components/core/seamly-api-context'
-
-// Used by: StyleGuide
-export { SeamlyEventBusContext } from './ui/components/core/seamly-api-context'
-
-// Used by: StyleGuide
-export { SeamlyLiveRegionContext } from './ui/components/core/seamly-live-region-context'
-
-// Used by: StyleGuide
-export { StoreProvider } from './domains/redux'
-
-// Used by: Client
-export { useChoicePrompt } from './ui/components/conversation/event/choice-prompt'
-
-// Used by: Client
-export { useSeamlyDispatchContext as useDispatch } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useSeamlyChat } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useSeamlyCommands } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useConfig as useSeamlyConfig } from './domains/config'
-
-// Used by: Client
-export { useEvents } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useGeneratedId } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useI18n } from './domains/i18n'
-
-// Used by: Client
-export { useSeamlyEventStream } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useSeamlyIdleDetachCountdown } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useSeamlyMessageContainerClassNames } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useSeamlyOptions } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useVisibility as useSeamlyVisibility } from './domains/visibility'
-
-// Used by: Client
-export {
-  useTranslations,
-  useTranslatedEventData,
-  useTranslationsContainer,
-} from './domains/translations'
-
-// Used by: Client
-export { default as Text } from './ui/components/conversation/event/text'
-
-// Used by: Client
-export { default as DeprecatedToggleButton } from './ui/components/entry/deprecated-toggle-button'
-
-// Used by: StyleGuide
-// Used by: Client (with custom view)
-export { default as View } from './ui/components/view'
-
-// Used by: Client
-export { default as DeprecatedView } from './ui/components/view/deprecated-view'
-
-// Used by: StyleGuide
-export { default as ComponentFilter } from './ui/components/conversation/component-filter'
-
-// Used by: Client
-// Used by: StyleGuide
-export { visibilityStates } from './domains/visibility'
-
-// 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 SeamlyOfflineError } from './api/errors/seamly-offline-error'

package/src/javascripts/lib/redux-helpers/index.js

@@ -1,99 +0,0 @@
-import { randomId } from 'lib/id'
-
-export const SLICE_DELIMITER = '/'
-export const DOMAIN_DELIMITER = '//'
-
-export function prefixType(prefix, fn, delimiter = '/') {
-  return (type, ...args) => fn(prefix + delimiter + type, ...args)
-}
-
-export function createAction(
-  type,
-  identityReducer = (payload) => ({ payload }),
-) {
-  const action = (...params) => ({ type, ...identityReducer(...params) })
-  action.toString = () => String(type)
-  action.match = (obj) => obj?.type === String(type)
-  return action
-}
-
-export function createActions(baseType, ...args) {
-  const handlers = []
-  // eslint-disable-next-line consistent-return
-  args.forEach((arg) => {
-    const argType = typeof arg
-    if (argType === 'string') {
-      return handlers.push([arg])
-    }
-    if (argType !== 'object' || arg instanceof Array) {
-      return undefined
-    }
-    Object.keys(arg).forEach((key) => handlers.push([key, arg[key]]))
-  })
-  const create = prefixType(baseType, createAction, SLICE_DELIMITER)
-
-  return handlers.map((handler) => create(...handler))
-}
-
-export function createThunk(type, payloadCreator) {
-  const [pending, fulfilled, rejected] = createActions(type, {
-    pending: (arg, requestId) => ({
-      meta: { arg, requestId, status: 'pending' },
-    }),
-    fulfilled: (arg, payload, requestId) => ({
-      payload,
-      meta: { arg, requestId, status: 'fulfilled' },
-    }),
-    rejected: (arg, error, requestId) => ({
-      error,
-      meta: { arg, requestId, status: 'rejected', error: String(error) },
-    }),
-  })
-  const thunkCreator = (arg) => (dispatch, getState, extra) => {
-    const requestId = randomId()
-    const promise = (async () => {
-      let finalAction
-      try {
-        dispatch(pending(arg, requestId))
-        const prms = payloadCreator(arg, { dispatch, getState, extra })
-        const result = await prms
-        finalAction = fulfilled(arg, result, requestId)
-      } catch (error) {
-        finalAction = rejected(arg, error, requestId)
-      }
-      dispatch(finalAction)
-      return finalAction
-    })()
-    return Object.assign(promise, {
-      type,
-      arg,
-      requestId,
-    })
-  }
-  return Object.assign(thunkCreator, {
-    type,
-    pending,
-    fulfilled,
-    rejected,
-  })
-}
-
-export function createReducer(domain, handlers = {}, defaultState) {
-  const reducer = (state = defaultState, action) => {
-    const typeReducer = handlers?.[action?.type]
-    return typeReducer ? typeReducer(state, action) : state
-  }
-  reducer.toString = () => domain
-  return reducer
-}
-
-export function createDomain(domain) {
-  return {
-    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),
-    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),
-    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),
-    createReducer: (handlers, defaultState) =>
-      createReducer(domain, handlers, defaultState),
-    selectState: (state) => state[domain],
-  }
-}

package/src/javascripts/style-guide.js

@@ -1,5 +0,0 @@
-import initializeStyleGuideExternalApi from './style-guide/register-style-guide-api'
-
-export default initializeStyleGuideExternalApi
-
-export { default as SeamlyStaticCore } from './style-guide/components/static-core'

package/src/javascripts/ui/hooks/use-seamly-dispatch.js

@@ -1,3 +0,0 @@
-import { useStoreDispatch } from 'domains/redux'
-
-export default useStoreDispatch