@seamly/web-ui 21.0.9 → 22.0.0

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/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,11 @@ export interface StoreState {
         enabledFromEntry: boolean
         enabled: boolean
       }
+      webNotifications: {
+        enabled: boolean
+      }
+      cobrowsing?: { enabled: boolean }
+      sendTranscript?: { enabled: boolean }
     }
     panelActive: boolean
     optionActive: string
@@ -151,6 +190,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/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/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

package/src/javascripts/style-guide/states.js

@@ -13,6 +13,7 @@ const baseState = {
     showFaq: false,
     showDisclaimer: false,
     showSuggestions: true,
+    preChat: true,
   },
   initialState: {},
   unreadEvents: 0,
@@ -55,6 +56,7 @@ const baseState = {
     optionsOverride: {},
   },
   currentUploads: [],
+  processingFileUploads: [],
 }
 
 const avatar =
@@ -701,12 +703,28 @@ const fileDownloadAgentMessage = {
   },
 }
 
+const fileUploadAgentMessage = {
+  type: 'message',
+  payload: {
+    ...fileDownloadPayload,
+    fromClient: false,
+    participant: 'agent',
+    id: randomId(),
+  },
+}
+
+sessionStorage.setItem(
+  `image-${fileDownloadAgentMessage.payload.id}`,
+  fileDownloadAgentMessage.payload.body.url,
+)
+
 const deletedFileDownloadAgentMessage = {
   ...fileDownloadAgentMessage,
   payload: {
     ...fileDownloadAgentMessage.payload,
     body: {
       ...fileDownloadAgentMessage.payload.body,
+      url: undefined,
     },
     id: randomId(),
   },
@@ -722,6 +740,11 @@ const fileDownloadUserMessage = {
   },
 }
 
+sessionStorage.setItem(
+  `image-${fileDownloadUserMessage.payload.id}`,
+  fileDownloadUserMessage.payload.body.url,
+)
+
 const emptyUrlFileDownloadUserMessage = {
   ...fileDownloadUserMessage,
   payload: {
@@ -1143,6 +1166,7 @@ const standardState = {
       userMessageWithLinks,
       newTopicDivider,
       imageMessage,
+      fileUploadAgentMessage,
       fileDownloadAgentMessage,
       deletedFileDownloadAgentMessage,
       userMessageLong,
@@ -1219,7 +1243,9 @@ const standardState = {
       imageMessage,
       videoMessage,
       imageMessageWithLightbox,
+      fileUploadAgentMessage,
       fileDownloadAgentMessage,
+      fileDownloadUserMessage,
     ],
   },
   systemMessages: {
@@ -1495,6 +1521,46 @@ const standardState = {
       optionsOverride: {},
     },
   },
+  inputLabel: {
+    category: categoryKeys.features,
+    headingText: 'Input label',
+    ...baseState,
+    entryMeta: {
+      default: 'text',
+      active: 'text',
+      options: {
+        text: { limit: null },
+      },
+      optionsOverride: {
+        text: {
+          label: 'What is your name?',
+          limit: null,
+          placeholder: 'Please enter your name',
+        },
+      },
+    },
+  },
+  abortTransactional: {
+    category: categoryKeys.features,
+    headingText: 'Abort transaction',
+    ...baseState,
+    events: [shortTextMessage, userMessage],
+    entryMeta: {
+      default: 'text',
+      active: 'text',
+      options: {
+        text: { limit: null },
+      },
+      optionsOverride: {},
+      actions: {
+        abortTransaction: {
+          label: 'Ask for another question',
+          topicFallbackMessage: 'Oops...',
+          topicName: 'abort_transactional',
+        },
+      },
+    },
+  },
   fileUploadToggle: {
     category: categoryKeys.uploads,
     headingText: 'File upload toggle button',
@@ -2193,6 +2259,49 @@ export const getStateObj = (layoutModes, customComponentEventBodies) => {
               headerTitles,
             },
           },
+          minimizedWindowPrechatDelayed: {
+            category: categoryKeys.minimizedWindow,
+            headingText: 'Minimized with delayed pre-chat messages',
+            description: '',
+            window: {
+              ...baseState,
+              config: {
+                ...baseState.config,
+                layoutMode: 'window',
+                preChatEvents: [splashMessage],
+                preChat: {
+                  enterDelay: 1000,
+                  exitAfter: 3000,
+                },
+              },
+              visibility: {
+                ...baseState.visibility,
+                visibility: visibilityStates.minimized,
+              },
+              participantInfo,
+              headerTitles,
+            },
+          },
+          minimizedWindowPrechatDisabled: {
+            category: categoryKeys.minimizedWindow,
+            headingText: 'Minimized with disabled pre-chat messages',
+            description: '',
+            window: {
+              ...baseState,
+              config: {
+                ...baseState.config,
+                layoutMode: 'window',
+                preChatEvents: [splashMessage],
+                preChat: false,
+              },
+              visibility: {
+                ...baseState.visibility,
+                visibility: visibilityStates.minimized,
+              },
+              participantInfo,
+              headerTitles,
+            },
+          },
         }
       : {}),
     ...inlineInterface,

package/src/javascripts/ui/components/conversation/conversation.tsx

@@ -8,6 +8,7 @@ import { useEvents } from 'ui/hooks/seamly-state-hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import AbortTransactionButton from '../entry/abort-transaction-button/abort-transaction-button'
 import ComponentFilter from './component-filter'
 import Event from './event/event'
 import Loader from './loader'
@@ -77,6 +78,7 @@ const Conversation = () => {
               <Events />
             </ComponentFilter>
             {isLoading && <Loader />}
+            <AbortTransactionButton />
           </ol>
         </div>
       </div>

package/src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-provider.tsx

@@ -11,6 +11,8 @@ const ChatScrollProvider = ({ children }) => {
   const eventRefs = useMemo(
     () =>
       events.reduce<Record<string, RefObject<HTMLElement>>>((acc, value) => {
+        if (!value.payload.id) return acc
+
         acc[value.payload.id] = createRef()
         return acc
       }, {}),