@seamly/web-ui 21.0.8 → 22.0.0-beta.1

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

@@ -6,7 +6,7 @@ import {
   useMemo,
 } from 'preact/hooks'
 import { useDispatch, useSelector } from 'react-redux'
-import type { FormContextType } from 'domains/forms/forms.types'
+import type { ControlState, FormContextType } from 'domains/forms/forms.types'
 import {
   getControlTouchedByName,
   getControlValueByName,
@@ -42,7 +42,15 @@ export function useValidations(values, validationSchema) {
   }
 }
 
-export function useFormControl(name) {
+export function useFormControl(name): [
+  {
+    name: string
+    onInput: (_e: any) => void
+    onBlur: () => void
+    value: string
+  },
+  ControlState,
+] {
   const dispatch = useDispatch()
   const { formId, updateControlValue, updateControlTouched, errors } =
     useFormContext()

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

@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit'
+import { resetApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
 import { setLocale } from 'domains/i18n/actions'
 import { I18nState } from 'domains/i18n/i18n.types'
@@ -46,6 +47,7 @@ export const i18nSlice = createSlice({
   extraReducers: (builder) => {
     // Add reducers for additional action types here, and handle loading state as needed
     builder
+      .addCase(resetApp.pending, () => initialState)
       .addCase(initializeConfig.fulfilled, (state, { payload }) => {
         state.initialLocale = payload.locale
       })

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

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

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

@@ -4,3 +4,7 @@ export const selectError = createSelector(
   ({ interrupt }) => interrupt,
   ({ error }) => error,
 )
+
+export const selectHasError = createSelector(selectError, (error) =>
+  Boolean(error),
+)

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

@@ -1,5 +1,5 @@
 import { createSlice, isAnyOf } from '@reduxjs/toolkit'
-import { initializeApp, resetApp } from 'domains/app/actions'
+import { initializeApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
 import { setLocale } from 'domains/i18n/actions'
 import { initializeVisibility, setVisibility } from 'domains/visibility/actions'
@@ -19,7 +19,7 @@ export const interruptSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder
-      .addCase(resetApp.fulfilled, () => initialState)
+      .addCase(initializeConfig.pending, () => initialState)
       .addMatcher(
         isAnyOf(
           initializeApp.rejected,

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

@@ -2,15 +2,28 @@ import { createSelector } from '@reduxjs/toolkit'
 import { selectEvents } from 'ui/hooks/seamly-state-hooks'
 import { readStates } from 'ui/utils/seamly-utils'
 import { isUnreadMessage } from 'domains/store/slice'
+import { RootState } from '.'
 
-export const selectUnreadEventIds = createSelector(selectEvents, (events) => {
-  return events
-    .filter((event) => {
-      return (
-        isUnreadMessage(event) &&
-        event.type !== 'service_data' &&
-        event.payload?.messageStatus === readStates.received
-      )
-    })
-    .map((event) => event.payload.id)
+export const selectUnreadEvents = createSelector(selectEvents, (events) => {
+  return events.filter((event) => {
+    return (
+      isUnreadMessage(event) &&
+      event.type !== 'service_data' &&
+      event.payload?.messageStatus === readStates.received
+    )
+  })
 })
+export const selectLastUnreadEvent = createSelector(
+  selectUnreadEvents,
+  (events) => events.at(-1),
+)
+
+export const selectUnreadEventIds = createSelector(
+  selectUnreadEvents,
+  (events) => events.map((event) => event.payload.id),
+)
+
+export const selectShowNotifications = createSelector(
+  ({ state }: RootState) => state.options.features?.webNotifications,
+  (webNotifications) => webNotifications?.enabled,
+)

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

@@ -1,5 +1,5 @@
 import { PayloadAction, createSlice, isAnyOf } from '@reduxjs/toolkit'
-import { ConversationHistoryResponse } from 'api'
+import type { ConversationHistoryResponse } from 'api'
 import { getTimeFromSeconds } from 'ui/utils/general-utils'
 import {
   entryTypes,
@@ -13,6 +13,7 @@ import { initializeConfig } from 'domains/config/actions'
 import type {
   AckEvent,
   ChannelEvent,
+  CurrentUploadPayload,
   EntryMeta,
   MessageParticipant,
   ServiceInfo,
@@ -21,6 +22,7 @@ import type {
 import { randomId } from 'lib/id'
 
 export const isUnreadMessage = ({ type, payload }: ChannelEvent) =>
+  document.visibilityState === 'hidden' ||
   (type === eventTypes.message && !payload.fromClient) ||
   (type === eventTypes.info && payload.type === payloadTypes.text)
 
@@ -104,12 +106,19 @@ const calculateNewEntryMeta = (
   channelEvent?: ChannelEvent,
 ) => {
   const entry =
-    channelEvent?.type === 'message' ? channelEvent?.payload.entry : {}
+    channelEvent?.type === 'message'
+      ? channelEvent?.payload.translatedEntry || channelEvent?.payload.entry
+      : {}
 
   const { blockAutoEntrySwitch } = entryMeta
+  const actions = channelEvent?.payload?.actions || {}
 
   if (!entry) {
-    return { ...entryMeta, optionsOverride: {} }
+    return {
+      ...entryMeta,
+      optionsOverride: {},
+      actions,
+    }
   }
 
   const { type, options } = entry
@@ -127,6 +136,7 @@ const calculateNewEntryMeta = (
       ...entryMeta.optionsOverride,
       [type]: options || {},
     },
+    actions,
   }
 }
 
@@ -151,6 +161,7 @@ export const initialStoreState: StoreState = {
   resumeConversationPrompt: false,
   serviceInfo: {
     activeServiceSessionId: '',
+    proactiveMessages: false,
   },
   participantInfo: {
     participants: {},
@@ -166,13 +177,18 @@ export const initialStoreState: StoreState = {
   headerCollapseButtonId: randomId(),
   serviceData: {},
   options: {
-    features: {},
+    features: {
+      webNotifications: {
+        enabled: false,
+      },
+    },
     panelActive: false,
     optionActive: '',
     userSelectedOptions: {},
   },
   showFileUpload: false,
   currentUploads: [],
+  processingFileUploads: [],
   entryMeta: {
     default: entryTypes.text,
     active: entryTypes.text,
@@ -180,6 +196,7 @@ export const initialStoreState: StoreState = {
     blockAutoEntrySwitch: false,
     options: {},
     optionsOverride: {},
+    actions: {},
   },
   seamlyContainerElement: null,
 }
@@ -393,6 +410,8 @@ export const storeSlice = createSlice({
       state.serviceInfo = {
         ...state.serviceInfo,
         activeServiceSessionId,
+        proactiveMessages:
+          activeServiceSettings?.proactiveMessages?.enabled || false,
       }
 
       state.serviceData = {
@@ -402,7 +421,7 @@ export const storeSlice = createSlice({
 
       state.options = {
         ...state.options,
-        features: newFeatures || {},
+        features: newFeatures,
       }
       state.entryMeta =
         !newFeaturesHasUpload &&
@@ -497,15 +516,15 @@ export const storeSlice = createSlice({
       state.options.features[payload.key].enabled = payload.enabled
     },
     clearFeatures: (state) => {
-      // case CLEAR_FEATURES:
-      state.options.features = {}
+      state.options.features = {
+        webNotifications: state.options.features.webNotifications,
+      }
     },
     showOption: (state, { payload }) => {
       state.options.panelActive = true
       state.options.optionActive = payload
     },
     hideOption: (state) => {
-      // case HIDE_OPTION:
       state.options.panelActive = false
       state.options.optionActive = ''
     },
@@ -523,6 +542,7 @@ export const storeSlice = createSlice({
       state.entryMeta.active = payload.default
       state.entryMeta.options = payload.options || {}
       state.entryMeta.optionsOverride = {}
+      state.entryMeta.actions = {}
     },
     setActiveEntryType: (state, { payload }) => {
       state.entryMeta.active = payload
@@ -530,7 +550,13 @@ export const storeSlice = createSlice({
     setUserEntryType: (state, { payload }) => {
       state.entryMeta.userSelected = payload
     },
-    registerUpload: (state, { payload }) => {
+    clearAbortTransaction: (state) => {
+      state.entryMeta.actions = {}
+    },
+    registerUpload: (
+      state,
+      { payload }: PayloadAction<Omit<CurrentUploadPayload, 'progress'>>,
+    ) => {
       state.currentUploads.push({
         id: payload.fileId,
         name: payload.fileName,
@@ -541,7 +567,12 @@ export const storeSlice = createSlice({
         uploadHandle: payload.uploadHandle,
       })
     },
-    setUploadProgress: (state, { payload }) => {
+    setUploadProgress: (
+      state,
+      {
+        payload,
+      }: PayloadAction<Omit<CurrentUploadPayload, 'uploadHandle' | 'fileName'>>,
+    ) => {
       state.currentUploads = state.currentUploads.map((fileUpload) => {
         if (fileUpload.id === payload.fileId) {
           return {
@@ -555,6 +586,14 @@ export const storeSlice = createSlice({
         return fileUpload
       })
     },
+    startProcessingImage: (state, { payload }: PayloadAction<string>) => {
+      state.processingFileUploads.push(payload)
+    },
+    doneProcessingImage: (state, { payload }: PayloadAction<string>) => {
+      state.processingFileUploads = state.processingFileUploads.filter(
+        (fileId) => fileId !== payload,
+      )
+    },
     setUploadError: (state, { payload }) => {
       state.currentUploads = state.currentUploads.map((fileUpload) => {
         if (fileUpload.id === payload.fileId) {
@@ -569,7 +608,10 @@ export const storeSlice = createSlice({
         return fileUpload
       })
     },
-    setUploadComplete: (state, { payload }) => {
+    setUploadComplete: (
+      state,
+      { payload }: PayloadAction<CurrentUploadPayload['fileId']>,
+    ) => {
       state.currentUploads = state.currentUploads.map((fileUpload) => {
         if (fileUpload.id === payload) {
           return {
@@ -586,6 +628,12 @@ export const storeSlice = createSlice({
     setSeamlyContainerElement: (state, { payload }) => {
       state.seamlyContainerElement = payload
     },
+    setProactiveMessages: (
+      state,
+      { payload }: PayloadAction<ServiceInfo['proactiveMessages']>,
+    ) => {
+      state.serviceInfo.proactiveMessages = payload
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -640,14 +688,18 @@ export const {
   setSeamlyContainerElement,
   setServiceDataItem,
   setServiceEntryMetadata,
+  clearAbortTransaction,
   setUploadComplete,
   setUploadError,
   setUploadProgress,
+  startProcessingImage,
+  doneProcessingImage,
   setUserEntryType,
   setUserSelectedOption,
   setUserSelectedOptions,
   showOption,
   stopIdleDetachCountdownCounter,
+  setProactiveMessages,
 } = storeSlice.actions
 
 export default storeSlice.reducer

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

@@ -20,6 +20,14 @@ export type AckEvent = {
 type DefaultEventProps = {
   timeIndicator?: number
   key?: string
+  translatedEntry?: components['schemas']['MessageMessage']['entry']
+  actions?: {
+    abortTransaction?: {
+      label: string
+      topicFallbackMessage: string
+      topicName: string
+    }
+  }
 }
 
 export type MessageInfo = components['schemas']['MessageInfo'] &
@@ -32,6 +40,12 @@ export interface InfoEvent {
 export type MessageMessage = components['schemas']['MessageMessage'] & {
   key?: string
 }
+
+export type MessageUpload = components['schemas']['MessageMessage'] & {
+  body: components['schemas']['MessageBodyUpload'] &
+    components['schemas']['MessageBodyVideo']
+}
+
 export interface MessageEvent {
   type: 'message'
   payload: MessageMessage & DefaultEventProps
@@ -71,7 +85,12 @@ export type HistoryResponse = {
 export type HistoryEvents = HistoryResponse['events']
 
 export type EntryMetaOptions =
-  History['activeServiceSettings']['entry']['options']
+  History['activeServiceSettings']['entry']['options'] & {
+    text?: History['activeServiceSettings']['entry']['options']['text'] & {
+      placeholder?: string
+      label?: string
+    }
+  }
 
 export type EntryMeta = {
   default: typeof entryTypes.text
@@ -80,6 +99,13 @@ export type EntryMeta = {
   blockAutoEntrySwitch: boolean
   options: EntryMetaOptions
   optionsOverride: EntryMetaOptions
+  actions?: {
+    abortTransaction?: {
+      label: string
+      topicFallbackMessage: string
+      topicName: string
+    }
+  }
 }
 
 export type ParticipantInfo = {
@@ -96,8 +122,16 @@ export interface CurrentUpload {
   complete: boolean
 }
 
+export interface CurrentUploadPayload {
+  fileId: CurrentUpload['id']
+  progress: CurrentUpload['progress']
+  fileName: CurrentUpload['name']
+  uploadHandle: CurrentUpload['uploadHandle']
+}
+
 export type ServiceInfo = {
   activeServiceSessionId: string
+  proactiveMessages: boolean
 }
 
 export interface StoreState {
@@ -144,6 +178,9 @@ export interface StoreState {
         enabledFromEntry: boolean
         enabled: boolean
       }
+      webNotifications: {
+        enabled: boolean
+      }
     }
     panelActive: boolean
     optionActive: string
@@ -151,6 +188,7 @@ export interface StoreState {
   }
   showFileUpload: boolean
   currentUploads: CurrentUpload[]
+  processingFileUploads: string[]
   entryMeta: EntryMeta
   seamlyContainerElement: null | HTMLElement
 }

package/src/javascripts/domains/translations/components/options-button.tsx

@@ -58,9 +58,6 @@ export default function TranslationsOptionsButton({
       onKeyDown={onMainKeyDownHandler}
     >
       <InOutTransition
-        onOutTransitionComplete={() => undefined}
-        onInTransitionComplete={() => undefined}
-        timeout={0}
         transitionStartState={transitionStartStates.notRendered}
         isActive={menuIsOpen}
       >
@@ -83,7 +80,7 @@ export default function TranslationsOptionsButton({
         onKeyDown={handleToggleKeyDown}
         ref={toggleButton}
         aria-haspopup="dialog"
-        aria-expanded={menuIsOpen.toString()}
+        aria-expanded={menuIsOpen}
       >
         {children}
       </button>

package/src/javascripts/domains/translations/components/translation-status.tsx

@@ -1,13 +1,14 @@
+import { useSelector } from 'react-redux'
 import TranslationChatStatus from 'ui/components/translation-chat-status'
 import TranslationProposal from 'ui/components/translation-proposal'
-import { useInterrupt } from 'domains/interrupt/hooks'
+import { selectHasError } from 'domains/interrupt/selectors'
 import { useTranslations } from 'domains/translations/hooks'
 
 export default function TranslationStatus() {
-  const { hasInterrupt } = useInterrupt()
+  const hasError = useSelector(selectHasError)
 
   const { isActive } = useTranslations()
-  if (hasInterrupt) {
+  if (hasError) {
     return null
   }
 

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

@@ -85,32 +85,39 @@ export function useTranslatedEventData(channelEvent: ChannelEvent): {
   const getTranslations = (): {
     body: EventDataBody
     translatedBody: TranslatedEventDataBody
+    translation?: any
   } => {
-    if (!channelEvent.payload)
+    if (!channelEvent?.payload)
       return { body: undefined, translatedBody: undefined }
     if (channelEvent.type === 'participant') {
       return {
         body: channelEvent.payload?.participant.introduction,
         translatedBody:
           channelEvent.payload?.participant?.translatedIntroduction,
+        translation:
+          // @ts-ignore
+          channelEvent.payload?.participant?.translation,
       }
     }
 
     return {
       body: channelEvent.payload.body,
       translatedBody: channelEvent.payload.translatedBody,
+      // @ts-ignore
+      translation: channelEvent?.payload?.translation,
     }
   }
 
-  const { translatedBody, body } = getTranslations()
+  const { translatedBody, translation, body } = getTranslations()
   const hasTranslation = !!translatedBody
   const isTranslated = useSelector(selectIsTranslated(channelEvent))
 
   return {
-    body: hasTranslation && isTranslated ? translatedBody?.data : body,
+    // @ts-ignore
+    body: hasTranslation && isTranslated ? translatedBody : body,
     hasTranslation,
     isTranslated: isTranslated && hasTranslation,
-    locale: translatedBody?.locale,
+    locale: translation?.locale,
   }
 }
 

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

@@ -1,4 +1,5 @@
 import { PayloadAction, createSlice, nanoid } from '@reduxjs/toolkit'
+import { resetApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
 import { addEvent, setHistory } from 'domains/store/slice'
 import type { ChannelEvent, HistoryResponse } from 'domains/store/store.types'
@@ -93,6 +94,7 @@ export const translationSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder
+      .addCase(resetApp.pending, () => translationsInitialState)
       .addCase(initializeConfig.fulfilled, (state, { payload }) => {
         const feature = payload?.features?.translation
         if (!feature) return

package/src/javascripts/index.ts

@@ -1,3 +1,5 @@
+// Polyfills
+import 'core-js/es/array/at'
 // Used by: Client
 import initializeExternalApi from './lib/external-api/initialize-api'
 

package/src/javascripts/lib/url-helpers.ts

@@ -40,6 +40,30 @@ export const setSearchParam = (key: string, value: string): void => {
   window.location.href = url.toString()
 }
 
+// Adds search parameters to the url
+export const setSearchParams = (params: Record<string, string>): void => {
+  const url = new URL(window.location.href)
+  const { searchParams } = url
+
+  Object.entries(params).forEach(([key, value]) => {
+    searchParams.set(key, value)
+  })
+
+  url.search = searchParams.toString()
+  window.location.href = url.toString()
+}
+
+// Removes a search parameter from the url
+export const removeSearchParam = (...keys: string[]): void => {
+  const url = new URL(window.location.href)
+  const { searchParams } = url
+
+  keys.forEach((key) => searchParams.delete(key))
+
+  url.search = searchParams.toString()
+  window.history.replaceState({}, null, url)
+}
+
 // Replace search parameters with those found in URL search parameters or sessionStorage
 export const replaceSearchParams = <T extends string>(
   ...keys: T[]

package/src/javascripts/schema.ts

@@ -251,6 +251,11 @@ export interface components {
     EntryText: {
       /** @description Settings of the text entry */
       options?: {
+        /**
+         * @description A custom label to show above the input field
+         * @example Your name:
+         */
+        label?: string | null
         /**
          * @description Whether or not the expected input is language neutral. A postal code or a last name for example are independent of language.
          * @example false
@@ -261,6 +266,11 @@ export interface components {
          * @example 100
          */
         limit?: number | null
+        /**
+         * @description A custom placeholder to show in the input field
+         * @example Your message (max. 100 characters)
+         */
+        placeholder?: string | null
       }
       /**
        * @description Entry type