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

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

@@ -0,0 +1,53 @@
+import { configureStore } from '@reduxjs/toolkit'
+import appReducer from 'domains/app/slice'
+import configReducer from 'domains/config/slice'
+import { createErrorsMiddleware } from 'domains/errors'
+import formsReducer from 'domains/forms/slice'
+import i18nReducer from 'domains/i18n/slice'
+import createInterruptMiddleware from 'domains/interrupt/middleware'
+import interruptReducer from 'domains/interrupt/slice'
+import createOptionsMiddleware from 'domains/options/middleware'
+import stateReducer from 'domains/store/slice'
+import createI18nMiddleware from 'domains/translations/middleware'
+import translationReducer from 'domains/translations/slice'
+import visibilityReducer from 'domains/visibility/slice'
+import { useDispatch } from 'react-redux'
+
+export function createStore({ initialState, api, eventBus, config }) {
+  const store = configureStore({
+    reducer: {
+      state: stateReducer,
+      app: appReducer,
+      config: configReducer,
+      i18n: i18nReducer,
+      translations: translationReducer,
+      visibility: visibilityReducer,
+      forms: formsReducer,
+      interrupt: interruptReducer,
+    },
+    preloadedState: initialState,
+    middleware: (getDefaultMiddleWare) =>
+      getDefaultMiddleWare({
+        thunk: {
+          extraArgument: {
+            api,
+            eventBus,
+            config,
+          },
+        },
+        serializableCheck: false,
+      }).concat([
+        createErrorsMiddleware({ api }),
+        createInterruptMiddleware({ api }),
+        createOptionsMiddleware({ api }),
+        createI18nMiddleware,
+      ]),
+  })
+
+  return store
+}
+export type Store = ReturnType<typeof createStore>
+export type RootState = ReturnType<Store['getState']>
+export type AppDispatch = Store['dispatch']
+
+export const useAppDispatch: () => AppDispatch = useDispatch

package/src/javascripts/domains/store/slice.ts

@@ -0,0 +1,639 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { initializeApp, resetApp } from 'domains/app/actions'
+import { initializeConfig } from 'domains/config/actions'
+import {
+  ChannelEvent,
+  EntryMeta,
+  HistoryEvent,
+  MessageParticipant,
+  ServiceInfo,
+  StoreState,
+} from 'domains/store/store.types'
+import { randomId } from 'lib/id'
+import { getTimeFromSeconds } from 'ui/utils/general-utils'
+import {
+  entryTypes,
+  eventTypes,
+  featureKeys,
+  payloadTypes,
+  readStates,
+} from 'ui/utils/seamly-utils'
+
+export const isUnreadMessage = ({ type, payload }: ChannelEvent) =>
+  (type === eventTypes.message && !payload.fromClient) ||
+  (type === eventTypes.info && payload.type === payloadTypes.text)
+
+const orderHistory = (events): ChannelEvent[] => {
+  return events.sort(
+    (
+      { payload: { occurredAt: occurredAtA } },
+      { payload: { occurredAt: occurredAtB } },
+    ) => occurredAtA - occurredAtB,
+  )
+}
+
+export const mergeHistory = (
+  stateEvents: ChannelEvent[],
+  historyEvents: HistoryEvent[],
+) => {
+  const newStateEvents = stateEvents.filter(
+    (stateEvent) =>
+      // Deduplicate the event streams, giving events in historyEvents
+      // precedence so the server is able to push changes to events.
+      !historyEvents.some(
+        (historyEvent) => historyEvent.payload.id === stateEvent.payload.id,
+      ),
+  )
+
+  const newHistoryEvents = historyEvents
+    .filter(
+      (historyEvent) =>
+        // Remove all non displayable participant messages
+        !(
+          historyEvent.type === 'participant' &&
+          !historyEvent.payload.participant.introduction
+        ),
+    )
+    // Reverse is done here because the server sends the history in the order
+    // newest to oldest. In the case of exactly the same occurredAt timestamps
+    // these messages will be shown in the wrong order if not reversed. For
+    // the normal merging logic there is no added effect.
+    .reverse()
+
+  return orderHistory([...newHistoryEvents, ...newStateEvents])
+}
+
+const participantReducer = (participantInfo, action) => {
+  // TODO: a) Styleguide only! b) Should be removed after styleguide overhaul.
+  if (!participantInfo) {
+    return {
+      participants: {},
+      currentAgent: '',
+    }
+  }
+
+  const { participants } = participantInfo || { participants: {} }
+  const { id, avatar, name, introduction } = action.participant
+  const oldParticipant = participants[id]
+
+  const newParticipants = {
+    ...participants,
+    [id]: oldParticipant
+      ? {
+          ...oldParticipant,
+          ...(avatar ? { avatar } : {}),
+          ...(name ? { name } : {}),
+          ...(introduction ? { introduction } : {}),
+        }
+      : action.participant,
+  }
+
+  return {
+    ...participantInfo,
+    participants: newParticipants,
+    currentAgent:
+      participantInfo.currentAgent !== id && !action.fromClient
+        ? id
+        : participantInfo.currentAgent,
+  }
+}
+
+const calculateNewEntryMeta = (
+  entryMeta: EntryMeta,
+  channelEvent: ChannelEvent,
+) => {
+  const entry =
+    channelEvent.type === 'message' ? channelEvent?.payload.entry : {}
+
+  const { blockAutoEntrySwitch } = entryMeta
+
+  if (!entry) {
+    return { ...entryMeta, optionsOverride: {} }
+  }
+
+  const { type, options } = entry
+
+  let newActive = entryMeta.active
+
+  if (!blockAutoEntrySwitch && type !== entryMeta.userSelected) {
+    newActive = type
+  }
+
+  return {
+    ...entryMeta,
+    active: newActive,
+    optionsOverride: {
+      ...entryMeta.optionsOverride,
+      [type]: options || {},
+    },
+  }
+}
+
+export const initialStoreState: StoreState = {
+  events: [],
+  initialState: {
+    userResponded: false,
+  },
+  unreadEvents: 0,
+  userHasResponded: false,
+  loadedImageEventIds: [],
+  isLoading: false,
+  idleDetachCountdown: {
+    hasCountdown: false,
+    isActive: false,
+    remaining: undefined,
+    wasStopped: undefined,
+    count: undefined,
+    timer: undefined,
+  },
+  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 const storeSlice = createSlice({
+  name: 'store',
+  initialState: initialStoreState,
+  reducers: {
+    addEvent: (state, action: PayloadAction<ChannelEvent>) => {
+      const { type: eventType, payload } = action.payload
+
+      const accountHasUploads = state.options.features.hasOwnProperty(
+        featureKeys.uploads,
+      )
+
+      let newOptions = { ...state.options }
+
+      // This enabled override of the service enabled value for uploads.
+      // If a message is sent with entry of type upload it will temporarily
+      // override service value and enable uploads.
+      if (
+        accountHasUploads &&
+        (eventType === eventTypes.message ||
+          eventType === eventTypes.participant) &&
+        !payload.fromClient
+      ) {
+        const entryType = eventType === 'message' ? payload.entry?.type : {}
+        newOptions = {
+          ...newOptions,
+          features: {
+            ...newOptions.features,
+            uploads: {
+              ...newOptions.features?.uploads,
+              enabledFromEntry: entryType === entryTypes.upload,
+            },
+          },
+        }
+      }
+
+      const incrementUnread = isUnreadMessage(action.payload)
+
+      // We check for duplicated and ignore them as in some error of the websocket
+      // a duplicate join can be active for a while until the server connection
+      // times out.
+      const eventExists = state.events.find((e) => e.payload.id === payload.id)
+      if (eventExists) {
+        return
+      }
+
+      const newEntryMeta = calculateNewEntryMeta(
+        state.entryMeta,
+        action.payload,
+      )
+
+      state.entryMeta =
+        !accountHasUploads && newEntryMeta.active === entryTypes.upload
+          ? { ...state.entryMeta }
+          : newEntryMeta
+
+      state.options = newOptions
+
+      if (incrementUnread) {
+        state.unreadEvents += 1
+        action.payload.payload.messageStatus = payload.fromClient
+          ? readStates.read
+          : readStates.received
+      }
+
+      action.payload.payload.key = randomId()
+      state.events.push(action.payload)
+    },
+    ackEvent: (state, { payload }) => {
+      // If any ACKs are sent without transactionID the conversation crashes.
+      // Ensure that this edge case is handled gracefully.
+      if (!payload.transactionId) {
+        console.warn('ACK received without transaction ID.')
+        return
+      }
+
+      const matchedEvent = state.events.find(
+        (m) => m.payload.transactionId === payload.transactionId,
+      )
+
+      const { id, occurredAt } = payload
+      if (matchedEvent) {
+        state.events = orderHistory(
+          state.events.map((m) =>
+            m.payload.id === matchedEvent.payload.id
+              ? {
+                  ...m,
+                  payload: { ...m.payload, id, occurredAt },
+                }
+              : m,
+          ),
+        )
+      }
+    },
+    clearEvents: (state) => {
+      state.unreadEvents = 0
+      state.loadedImageEventIds = []
+      state.events = []
+    },
+    setEventsRead: (state, { payload }) => {
+      state.unreadEvents = 0
+      state.events.forEach((event) => {
+        if (payload.indexOf(event.payload.id) !== -1) {
+          event.payload = {
+            ...event.payload,
+            ...(event.payload.messageStatus === readStates.received && {
+              messageStatus: readStates.read,
+            }),
+          }
+        }
+        return event
+      })
+    },
+    setLoadedImageEventIds: (state, { payload }) => {
+      state.loadedImageEventIds.push(payload)
+    },
+    setHistory: (
+      state,
+      {
+        payload: {
+          events: history,
+          participants,
+          activeServiceSessionId,
+          activeServiceSettings = {},
+          serviceData,
+          resumeConversationPrompt,
+        },
+      },
+    ) => {
+      const events = mergeHistory(state.events, history)
+
+      const mergedParticipants = {
+        ...state.participantInfo.participants,
+        ...participants,
+      }
+
+      const lastParticipantEvent = events
+        .slice()
+        .reverse()
+        .find(
+          (m) =>
+            (m.type === 'message' || m.type === 'participant') &&
+            !m.payload.fromClient,
+        )
+
+      let lastParticipantId = null
+
+      if (lastParticipantEvent) {
+        if (lastParticipantEvent.type === 'message') {
+          lastParticipantId = lastParticipantEvent.payload.participant
+        }
+        if (lastParticipantEvent.type === 'participant') {
+          lastParticipantId = lastParticipantEvent.payload.participant.id
+        }
+      }
+
+      const { entry, uploads } = activeServiceSettings
+
+      const historyNewEntryMeta = calculateNewEntryMeta(
+        {
+          ...state.entryMeta,
+          ...entry,
+          active: entry.default || payloadTypes.text,
+          options: { ...(entry && entry.options ? entry.options : {}) },
+        },
+        events[events.length - 1],
+      )
+
+      let newFeatures = { ...state.options.features }
+
+      const newFeaturesHasUpload = newFeatures.hasOwnProperty(
+        featureKeys.uploads,
+      )
+
+      // Only set uploads if it was initialised by the account config.
+      if (newFeaturesHasUpload && lastParticipantEvent.type === 'message') {
+        const { payload: lastParticipantEventPayload } = lastParticipantEvent
+        const entryType = lastParticipantEventPayload?.entry?.type || {}
+        newFeatures = {
+          ...newFeatures,
+          uploads: {
+            enabled: !!(uploads && uploads.enabled),
+            enabledFromEntry: entryType === entryTypes.upload,
+          },
+        }
+      }
+
+      state.unreadEvents = events.filter(
+        (event) =>
+          event.type === 'message' &&
+          event.payload.messageStatus === readStates.received,
+      ).length
+      state.events = events.filter(
+        (e) => e.type !== 'participant' || !!e.payload.participant.introduction,
+      )
+      state.participantInfo = {
+        ...state.participantInfo,
+        ...(lastParticipantId
+          ? participantReducer(state.participantInfo, {
+              participant: mergedParticipants[lastParticipantId],
+            })
+          : {}),
+        participants: mergedParticipants,
+      }
+      state.historyLoaded = true
+      state.serviceInfo = {
+        ...state.serviceInfo,
+        activeServiceSessionId,
+      }
+      state.serviceData = serviceData || {}
+      state.options = {
+        ...state.options,
+        features: newFeatures || {},
+      }
+      state.entryMeta =
+        !newFeaturesHasUpload &&
+        historyNewEntryMeta.active === entryTypes.upload
+          ? { ...state.entryMeta }
+          : historyNewEntryMeta
+      state.resumeConversationPrompt = resumeConversationPrompt || false
+
+      if (lastParticipantId) {
+        state.headerTitles.subTitle = mergedParticipants[lastParticipantId].name
+      }
+    },
+    resetHistoryLoadedFlag: (state) => {
+      state.historyLoaded = false
+    },
+    setIsLoading: (state, { payload }) => {
+      state.isLoading = payload
+    },
+    initIdleDetachCountdown: (state, { payload }) => {
+      const { delaySeconds, delayTime } = payload
+
+      state.idleDetachCountdown = {
+        hasCountdown: true,
+        isActive: true,
+        wasStopped: false,
+        count: delaySeconds,
+        remaining: delaySeconds,
+        timer: delayTime,
+      }
+    },
+    decrementIdleDetachCountdownCounter: (state) => {
+      const { idleDetachCountdown } = state
+
+      const { remaining: prevRemaining } = idleDetachCountdown
+
+      const remaining = prevRemaining - 1
+
+      state.idleDetachCountdown.remaining = remaining
+      state.idleDetachCountdown.timer = getTimeFromSeconds(remaining)
+    },
+    stopIdleDetachCountdownCounter: (state) => {
+      state.idleDetachCountdown.isActive = false
+      state.idleDetachCountdown.wasStopped = true
+    },
+    clearIdleDetachCountdown: (state) => {
+      state.idleDetachCountdown.hasCountdown = false
+      state.idleDetachCountdown.isActive = false
+    },
+    initResumeConversationPrompt: (state) => {
+      state.resumeConversationPrompt = true
+    },
+    clearResumeConversationPrompt: (state) => {
+      state.resumeConversationPrompt = false
+    },
+    setParticipant: (state, { payload }: PayloadAction<MessageParticipant>) => {
+      state.participantInfo = participantReducer(state.participantInfo, {
+        participant: payload.participant,
+        fromClient: payload.fromClient,
+      })
+    },
+    setActiveService: (state, { payload }: PayloadAction<ServiceInfo>) => {
+      if (
+        state.serviceInfo.activeServiceSessionId !==
+        payload.activeServiceSessionId
+      ) {
+        state.serviceInfo.activeServiceSessionId =
+          payload.activeServiceSessionId
+      }
+    },
+    setHeaderTitle: (state, { payload }) => {
+      state.headerTitles.title = payload
+    },
+    setHeaderSubTitle: (state, { payload }) => {
+      state.headerTitles.subTitle = payload
+    },
+    setInitialState: (state, { payload }) => {
+      state.initialState = payload.initialState
+      state.unreadEvents = initialStoreState.unreadEvents
+    },
+    setServiceDataItem: (state, { payload }) => {
+      state.serviceData[payload.type] = payload
+    },
+    setFeatures: (state, { payload }) => {
+      if (!payload.features) {
+        return
+      }
+      state.options.features = payload.features
+    },
+    setFeatureEnabledState: (state, { payload }) => {
+      if (!state.options.features.hasOwnProperty(payload.key)) {
+        return
+      }
+      state.options.features[payload.key].enabled = payload.enabled
+    },
+    clearFeatures: (state) => {
+      // case CLEAR_FEATURES:
+      state.options.features = {}
+    },
+    showOption: (state, { payload }) => {
+      state.options.panelActive = true
+      state.options.optionActive = payload
+    },
+    hideOption: (state) => {
+      // case HIDE_OPTION:
+      state.options.panelActive = false
+      state.options.optionActive = ''
+    },
+    setUserSelectedOptions: (state, { payload }) => {
+      state.options.userSelectedOptions = payload
+    },
+    setUserSelectedOption: (state, { payload }) => {
+      const { option, value } = payload
+      state.options.userSelectedOptions[option] = value
+    },
+    setBlockAutoEntrySwitch: (state, { payload }) => {
+      state.entryMeta.blockAutoEntrySwitch = payload
+    },
+    setServiceEntryMetadata: (state, { payload }) => {
+      state.entryMeta.active = payload.default
+      state.entryMeta.options = payload.options || {}
+      state.entryMeta.optionsOverride = {}
+    },
+    setActiveEntryType: (state, { payload }) => {
+      state.entryMeta.active = payload
+    },
+    setUserEntryType: (state, { payload }) => {
+      state.entryMeta.userSelected = payload
+    },
+    registerUpload: (state, { payload }) => {
+      state.currentUploads.push({
+        id: payload.fileId,
+        name: payload.fileName,
+        progress: 1,
+        uploading: true,
+        complete: false,
+        error: '',
+        uploadHandle: payload.uploadHandle,
+      })
+    },
+    setUploadProgress: (state, { payload }) => {
+      state.currentUploads = state.currentUploads.map((fileUpload) => {
+        if (fileUpload.id === payload.fileId) {
+          return {
+            ...fileUpload,
+            progress: payload.progress,
+            uploading: payload.progress !== 100,
+            uploadHandle:
+              payload.progress === 100 ? null : fileUpload.uploadHandle,
+          }
+        }
+        return fileUpload
+      })
+    },
+    setUploadError: (state, { payload }) => {
+      state.currentUploads = state.currentUploads.map((fileUpload) => {
+        if (fileUpload.id === payload.fileId) {
+          return {
+            ...fileUpload,
+            error: payload.errorText,
+            progress: 0,
+            uploading: false,
+            uploadHandle: null,
+          }
+        }
+        return fileUpload
+      })
+    },
+    setUploadComplete: (state, { payload }) => {
+      state.currentUploads = state.currentUploads.map((fileUpload) => {
+        if (fileUpload.id === payload) {
+          return {
+            ...fileUpload,
+            complete: true,
+          }
+        }
+        return fileUpload
+      })
+    },
+    clearAllUploads: (state) => {
+      state.currentUploads = []
+    },
+    setSeamlyContainerElement: (state, { payload }) => {
+      state.seamlyContainerElement = payload
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(resetApp.pending, () => initialStoreState)
+      .addCase(initializeConfig.fulfilled, (state, { payload }) => {
+        state.headerTitles.subTitle = payload.agentParticipant?.name
+
+        if (!payload.features) return
+
+        state.options.features = payload.features
+      })
+      .addCase(initializeApp.fulfilled, (state, { payload }) => {
+        if (!payload.initialState) return
+        state.initialState = payload.initialState
+      })
+  },
+})
+
+export const {
+  ackEvent,
+  addEvent,
+  clearAllUploads,
+  clearEvents,
+  clearFeatures,
+  clearIdleDetachCountdown,
+  clearResumeConversationPrompt,
+  decrementIdleDetachCountdownCounter,
+  hideOption,
+  initIdleDetachCountdown,
+  initResumeConversationPrompt,
+  registerUpload,
+  resetHistoryLoadedFlag,
+  setActiveEntryType,
+  setActiveService,
+  setBlockAutoEntrySwitch,
+  setEventsRead,
+  setFeatureEnabledState,
+  setFeatures,
+  setHeaderSubTitle,
+  setHeaderTitle,
+  setHistory,
+  setInitialState,
+  setIsLoading,
+  setLoadedImageEventIds,
+  setParticipant,
+  setSeamlyContainerElement,
+  setServiceDataItem,
+  setServiceEntryMetadata,
+  setUploadComplete,
+  setUploadError,
+  setUploadProgress,
+  setUserEntryType,
+  setUserSelectedOption,
+  setUserSelectedOptions,
+  showOption,
+  stopIdleDetachCountdownCounter,
+} = storeSlice.actions
+
+export default storeSlice.reducer