@seamly/web-ui 20.8.1 → 21.0.0

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

@@ -1,33 +1,47 @@
-import { RootState } from 'domains/store'
+import { useCallback, useMemo } from 'preact/hooks'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  useElementFocusingById,
+  useSeamlyCommands,
+} from 'ui/hooks/seamly-hooks'
+import {
+  TRANSLATION_PROPOSAL,
+  actionTypes,
+  sourceTypes,
+} from 'ui/utils/seamly-utils'
+import { ValueOf } from 'ui/utils/seamly-utils.types'
+import { useI18n } from 'domains/i18n/hooks'
+import type { RootState } from 'domains/store'
 import {
   ChannelEvent,
   InfoEvent,
   MessageEvent,
   ParticipantEvent,
+  ServiceDataEvent,
 } from 'domains/store/store.types'
 import { selectIsTranslated } from 'domains/translations/selectors'
 import {
   disableTranslation,
+  disableTranslationProposalPrompt,
   enableTranslation,
 } from 'domains/translations/slice'
-import { useCallback, useMemo } from 'preact/hooks'
-import { useDispatch, useSelector } from 'react-redux'
-import {
-  useElementFocusingById,
-  useSeamlyCommands,
-} from 'ui/hooks/seamly-hooks'
-import { actionTypes } from 'ui/utils/seamly-utils'
+import type { Language } from 'domains/translations/translations.types'
+import { useVisibility } from 'domains/visibility/hooks'
 
 export function useTranslations() {
   const { sendAction } = useSeamlyCommands()
   const dispatch = useDispatch()
   const enableTranslations = useCallback(
-    (locale) => {
+    (
+      locale: Language['locale'],
+      source: ValueOf<typeof sourceTypes> = sourceTypes.translationChoice,
+    ) => {
       sendAction({
         type: actionTypes.setTranslation,
-        body: { enabled: true, locale },
+        body: { enabled: true, locale, source },
       })
       dispatch(enableTranslation(locale))
+      dispatch(disableTranslationProposalPrompt())
     },
     [sendAction, dispatch],
   )
@@ -37,7 +51,7 @@ export function useTranslations() {
   }, [sendAction, dispatch])
 
   const { languages, isActive, isAvailable, currentLocale } = useSelector(
-    ({ translations }) => translations,
+    ({ translations }: RootState) => translations,
   )
 
   return {
@@ -54,11 +68,13 @@ type EventDataBody =
   | ParticipantEvent['payload']['participant']['introduction']
   | MessageEvent['payload']['body']
   | InfoEvent['payload']['body']
+  | ServiceDataEvent['payload']['body']
 
 type TranslatedEventDataBody =
   | ParticipantEvent['payload']['participant']['translatedIntroduction']
   | MessageEvent['payload']['translatedBody']
   | InfoEvent['payload']['translatedBody']
+  | ServiceDataEvent['payload']['translatedBody']
 
 export function useTranslatedEventData(channelEvent: ChannelEvent): {
   body: EventDataBody
@@ -112,3 +128,53 @@ export function useLocaleNativeName(locale: string) {
     [locale, languages],
   )
 }
+
+export const useTranslationProposal = () => {
+  const { isActive, languages } = useTranslations()
+
+  const dispatch = useDispatch()
+  const { sendAction } = useSeamlyCommands()
+
+  const { translationProposal } = useSelector(
+    (state: RootState) => state.translations,
+  )
+  const { enableTranslations } = useTranslations()
+  const { isOpen } = useVisibility()
+  const { locale } = useI18n()
+  const proposedLocale = translationProposal?.proposedLocale
+  const proposedLocaleNativeName = useLocaleNativeName(proposedLocale)
+
+  const showProposal = useMemo(
+    () =>
+      translationProposal !== null &&
+      !isActive &&
+      isOpen &&
+      locale !== proposedLocale &&
+      languages.some((language) => language.locale === proposedLocale),
+    [translationProposal, isActive, isOpen, locale, proposedLocale, languages],
+  )
+
+  const dismissTranslationProposal = () => {
+    sendAction({
+      type: actionTypes.dismiss,
+      body: { type: TRANSLATION_PROPOSAL },
+    })
+    dispatch(disableTranslationProposalPrompt())
+  }
+
+  const activateTranslationProposal = () => {
+    enableTranslations(
+      translationProposal?.proposedLocale,
+      sourceTypes.translationProposal,
+    )
+  }
+
+  return {
+    activateTranslationProposal,
+    dismissTranslationProposal,
+    proposedLocale,
+    proposedLocaleNativeName,
+    showProposal,
+    translationProposal,
+  }
+}

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

@@ -1,12 +1,8 @@
-import {
-  TranslationEvent,
-  TranslationState,
-} from 'domains/translations/translations.types'
-import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit'
-import { initializeApp } from 'domains/app/actions'
+import { PayloadAction, createSlice, nanoid } from '@reduxjs/toolkit'
 import { initializeConfig } from 'domains/config/actions'
-import { addEvent, orderHistory, setHistory } from 'domains/store/slice'
-import { ChannelEvent } from 'domains/store/store.types'
+import { addEvent, setHistory } from 'domains/store/slice'
+import type { ChannelEvent, HistoryResponse } from 'domains/store/store.types'
+import type { TranslationState } from 'domains/translations/translations.types'
 
 export const translationsInitialState: TranslationState = {
   isActive: false,
@@ -15,6 +11,7 @@ export const translationsInitialState: TranslationState = {
   languages: [],
   containerId: nanoid(),
   translatedEventGroups: {},
+  translationProposal: null,
 }
 
 const getLastGroupId = (events: ChannelEvent[], id: string) => {
@@ -42,7 +39,7 @@ const getLastGroupId = (events: ChannelEvent[], id: string) => {
   const [[groupId, eventIds]] = Object.entries(eventGroup)
 
   const lastGroupId = events
-    //@ts-ignore
+    // @ts-ignore
     .filter((event) => event.payload?.type === 'divider')
     .map((event) => event.payload.id)
     .at(-1)
@@ -84,6 +81,15 @@ export const translationSlice = createSlice({
       state.lastGroupId = lastGroupId
       state.translatedEventGroups[groupId] = eventIds
     },
+    disableTranslationProposalPrompt: (state) => {
+      state.translationProposal = null
+    },
+    setTranslationProposalPrompt: (
+      state,
+      { payload }: PayloadAction<HistoryResponse['translationProposal']>,
+    ) => {
+      state.translationProposal = payload
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -94,6 +100,9 @@ export const translationSlice = createSlice({
         state.isAvailable = feature.enabled === true
         state.languages = feature.languages
       })
+      .addCase(setHistory, (state, { payload }) => {
+        state.translationProposal = payload.translationProposal
+      })
       .addCase(addEvent, (state, { payload }) => {
         if (state.translatedEventGroups[state.lastGroupId]) {
           state.translatedEventGroups[state.lastGroupId].push(
@@ -109,6 +118,8 @@ export const {
   disableTranslation,
   enableEventsTranslation,
   disableEventsTranslation,
+  setTranslationProposalPrompt,
+  disableTranslationProposalPrompt,
 } = translationSlice.actions
 
 export default translationSlice.reducer

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

@@ -1,5 +1,7 @@
-import { operations } from 'schema'
+import type { components, operations } from 'schema'
+import { HistoryResponse } from 'domains/store/store.types'
 
+export type Language = components['schemas']['Translation']
 export type Languages =
   operations['getAccountConfig']['responses']['201']['content']['application/json']['config']['features']['translation']['languages']
 
@@ -7,7 +9,6 @@ export type TranslationEvent = {
   id: string
   items: string[]
 }
-
 export interface TranslationState {
   isActive: boolean
   currentLocale?: string
@@ -16,4 +17,5 @@ export interface TranslationState {
   containerId: string
   translatedEventGroups: Record<string, string[]>
   lastGroupId?: string
+  translationProposal?: HistoryResponse['translationProposal'] | null
 }

package/src/javascripts/domains/visibility/actions.ts

@@ -1,12 +1,10 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
-import { VisibilityOptions } from 'config.types'
+import type { VisibilityOptions } from 'config.types'
+import { selectState } from 'ui/hooks/seamly-state-hooks'
 import { selectUserHasResponded } from 'domains/app/selectors'
 import * as ConfigSelectors from 'domains/config/selectors'
-import { ThunkAPI } from 'domains/redux/redux.types'
-import { setFromStorage } from 'domains/visibility/slice'
+import type { ThunkAPI } from 'domains/redux/redux.types'
 import { calculateVisibility } from 'domains/visibility/utils'
-import { VisibilityState } from 'domains/visibility/visibility.types'
-import { selectState } from 'ui/hooks/seamly-state-hooks'
 import { StoreKey, visibilityStates } from './constants'
 import * as Selectors from './selectors'
 
@@ -17,7 +15,7 @@ const validVisibilityStates = [
 ]
 export const setVisibility = createAsyncThunk<
   VisibilityOptions,
-  VisibilityState,
+  VisibilityOptions,
   ThunkAPI
 >(
   'setVisibility',
@@ -70,10 +68,8 @@ export const initializeVisibility = createAsyncThunk<unknown, void, ThunkAPI>(
     // initialize stored visibility
     const { layoutMode } = ConfigSelectors.selectConfig(getState())
 
-    const storedVisibility = api.store.get(StoreKey)?.[layoutMode]
-    if (storedVisibility) {
-      dispatch(setFromStorage(storedVisibility))
-    }
+    const storedVisibility =
+      api.store.get(StoreKey)?.[layoutMode] || visibilityStates.initialize
 
     dispatch(setVisibility(storedVisibility))
     return storedVisibility

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

@@ -1,44 +1,63 @@
+import type { VisibilityOptions } from 'config.types'
+import { RefObject, createRef } from 'preact'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import { useDispatch, useSelector } from 'react-redux'
 import { useConfig } from 'domains/config/hooks'
 import { useAppDispatch } from 'domains/store'
 import { setVisibility } from 'domains/visibility/actions'
 import { setShowInlineView } from 'domains/visibility/slice'
-import { VisibilityState } from 'domains/visibility/visibility.types'
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
-import { useDispatch, useSelector } from 'react-redux'
 import { visibilityStates } from './constants'
-import * as Selectors from './selectors'
+import { selectShowInlineView, selectVisibility } from './selectors'
 
 export const useVisibility = () => {
   const dispatch = useAppDispatch()
-  const visible = useSelector(Selectors.selectVisibility)
+  const visible = useSelector(selectVisibility)
   const isVisible = visible ? visible !== visibilityStates.hidden : false
   const isOpen = visible === visibilityStates.open
   const isMinimized = visible === visibilityStates.minimized
 
   const dispatchVisibility = useCallback(
-    (visibility: VisibilityState) => dispatch(setVisibility(visibility)),
+    (visibility: VisibilityOptions) => dispatch(setVisibility(visibility)),
     [dispatch],
   )
 
+  const openChat = () => {
+    dispatchVisibility(visibilityStates.open as VisibilityOptions)
+  }
+
+  const closeChat = () => {
+    dispatchVisibility(visibilityStates.minimized as VisibilityOptions)
+  }
+
   return {
     isVisible,
     isOpen,
     isMinimized,
     visible,
     setVisibility: dispatchVisibility,
+    openChat,
+    closeChat,
   }
 }
 
+type UseIntersectOptions = {
+  /** Stops observing when the root element is visible. */
+  freezeOnceVisible?: boolean
+  /** Determines if useIntersect is enabled. */
+  enabled?: boolean
+  /** The node ref to apply the intersection to */
+  containerRef?: RefObject<any>
+}
+
 /**
  * Custom hook which enables initializing of IntersectionObserver on any node ref.
- * @param {object} options Hook options.
- * @param {boolean=} options.freezeOnceVisible Stops observing when the root element is visible.
- * @param {boolean=} options.enabled Determines if useIntersect is enabled.
  */
-const useIntersect = ({ freezeOnceVisible = false, enabled = true }) => {
+export const useIntersect = ({
+  freezeOnceVisible = false,
+  enabled = true,
+  containerRef = createRef(),
+}: UseIntersectOptions) => {
   const [entry, setEntry] = useState(null)
-  const containerRef = useRef(null)
-
   const isVisible = !!entry?.isIntersecting || !enabled
   const frozen = isVisible && freezeOnceVisible
 
@@ -63,7 +82,7 @@ const useIntersect = ({ freezeOnceVisible = false, enabled = true }) => {
     observer.observe(node)
 
     return () => observer.disconnect()
-  }, [enabled, frozen])
+  }, [containerRef, enabled, frozen])
 
   return { isVisible, containerRef }
 }
@@ -71,7 +90,7 @@ const useIntersect = ({ freezeOnceVisible = false, enabled = true }) => {
 export const useShowInlineView = () => {
   const dispatch = useDispatch()
   const { connectWhenInView } = useConfig()
-  const showInlineView = useSelector(Selectors.selectShowInlineView)
+  const showInlineView = useSelector(selectShowInlineView)
 
   const { containerRef, isVisible } = useIntersect({
     enabled: connectWhenInView,

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

@@ -1,11 +1,12 @@
 import { createSelector } from '@reduxjs/toolkit'
+import type { RootState } from 'domains/store'
 
 export const selectVisibility = createSelector(
-  ({ visibility }) => visibility,
+  ({ visibility }: RootState) => visibility,
   (state) => state.visibility,
 )
 
 export const selectShowInlineView = createSelector(
-  ({ visibility }) => visibility,
+  ({ visibility }: RootState) => visibility,
   (state) => state.showInlineView,
 )

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

@@ -1,5 +1,5 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { VisibilityOptions } from 'config.types'
+import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+import type { VisibilityOptions } from 'config.types'
 import { initializeConfig } from 'domains/config/actions'
 import { setVisibility } from 'domains/visibility/actions'
 import { visibilityStates } from 'domains/visibility/constants'
@@ -14,9 +14,6 @@ export const visibilitySlice = createSlice({
   name: 'visibility',
   initialState,
   reducers: {
-    setFromStorage: (state, action) => {
-      state.visibility = action.payload
-    },
     setShowInlineView: (state) => {
       state.showInlineView = true
     },
@@ -40,7 +37,6 @@ export const visibilitySlice = createSlice({
   },
 })
 
-export const { setFromStorage } = visibilitySlice.actions
 export const { setShowInlineView } = visibilitySlice.actions
 
 export default visibilitySlice.reducer

package/src/javascripts/index.ts

@@ -5,14 +5,6 @@ import initializeExternalApi from './lib/external-api/initialize-api'
 export default initializeExternalApi
 
 // Used by: StyleGuide
-export { API } from './api'
-
-// Used by: StyleGuide
-export { Provider as SeamlyStoreProvider } from 'react-redux'
-// 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'
 // Used by: Client
 export { useConfig as useSeamlyConfig } from 'domains/config/hooks'
 // Used by: Client
@@ -23,18 +15,12 @@ export {
   useTranslations,
   useTranslationsContainer,
 } from 'domains/translations/hooks'
+export { visibilityStates } from 'domains/visibility/constants'
 // Used by: Client
 export { useVisibility as useSeamlyVisibility } from 'domains/visibility/hooks'
-export { visibilityStates } from 'domains/visibility/constants'
 export { calculateVisibility } from 'domains/visibility/utils'
-// Used by: Client
-export { className } from './lib/css'
 // Used by: StyleGuide
-export { default as Engine } from './lib/engine'
-// Used by: StyleGuide
-export { default as ExternalApi } from './lib/external-api'
-// Used by: StyleGuide
-export { randomId } from './lib/id'
+export { Provider as SeamlyStoreProvider } from 'react-redux'
 // Used by: StyleGuide
 export { default as ComponentFilter } from 'ui/components/conversation/component-filter'
 // Used by: Client
@@ -74,6 +60,23 @@ export { default as Interrupt } from 'ui/components/layout/interrupt'
 export { default as View } from 'ui/components/view'
 // Used by: Client
 export { default as DeprecatedView } from 'ui/components/view/deprecated-view'
+export { useSeamlyActions } from 'ui/hooks/use-seamly-actions'
+// Used by: StyleGuide
+// Used by: Client
+export { eventTypes } from 'ui/utils/seamly-utils'
+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'
+// Used by: Client
+export { className } from './lib/css'
+// Used by: StyleGuide
+export { default as Engine } from './lib/engine'
+// Used by: StyleGuide
+export { default as ExternalApi } from './lib/external-api'
+// Used by: StyleGuide
+export { randomId } from './lib/id'
 // Used by: Client
 export {
   useEvents,
@@ -85,8 +88,3 @@ export {
   useSeamlyMessageContainerClassNames,
   useSeamlyOptions,
 } from './ui/hooks/seamly-hooks'
-// Used by: StyleGuide
-export { getUrlParams, getUrlSearchString } from './ui/utils/general-utils'
-// Used by: Client
-export { eventTypes } from './ui/utils/seamly-utils'
-export { useSeamlyActions } from 'ui/hooks/use-seamly-actions'

package/src/javascripts/lib/engine/{index.js → index.tsx}

@@ -1,19 +1,33 @@
 import { API } from 'api'
+import type { Config } from 'config.types'
+import Events, { Events as EventsType } from 'minivents'
+import { render } from 'preact'
+import ChatApp from 'ui/components/chat-app'
+import SeamlyCore from 'ui/components/core/seamly-core'
 import { initializeApp } from 'domains/app/actions'
-
 import { initializeConfig } from 'domains/config/actions'
 import { setConfig } from 'domains/config/slice'
 import { setLocale } from 'domains/i18n/actions'
-
 import { createStore } from 'domains/store'
 import { initializeVisibility } from 'domains/visibility/actions'
-import Events from 'minivents'
-import { render } from 'preact'
-import ChatApp from 'ui/components/chat-app'
-import SeamlyCore from 'ui/components/core/seamly-core'
+import type ExternalApi from 'lib/external-api'
 
 export default class Engine {
-  constructor(config, externalApi) {
+  config: Config
+
+  namespace: string
+
+  parentElement: HTMLElement
+
+  externalApi: ExternalApi
+
+  functions: {}
+
+  eventBus: EventsType
+
+  api: API
+
+  constructor(config: Config, externalApi: ExternalApi) {
     const { namespace = '', parentElement, showFaq, ...restConfig } = config
 
     this.config = {
@@ -32,6 +46,8 @@ export default class Engine {
       context: config.context,
     })
 
+    // Following are ignored because the types of minivents do not match the docs.
+    // @ts-ignore
     this.eventBus = new Events()
     this.functions = {}
     this.registerFunctions({
@@ -39,9 +55,11 @@ export default class Engine {
       off: this.eventBus.off,
     })
 
+    // @ts-ignore
     this.eventBus.on('function.register', (functionName, fn) =>
       this.registerFunction(functionName, fn),
     )
+    // @ts-ignore
     this.eventBus.on('function.unregister', (functionName, fn) =>
       this.unregisterFunction(functionName, fn),
     )

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

@@ -0,0 +1,112 @@
+export const getUrlSearchParams = () => {
+  const params = new URLSearchParams(window.location.search)
+
+  return Array.from(params.entries()).reduce(
+    (acc, [key, val]) => ({ ...acc, [key]: val }),
+    {},
+  )
+}
+
+// Return search parameters as a string
+export const getUrlSearchString = (params: Record<string, string>) =>
+  new URLSearchParams(params).toString()
+
+// Return search parameters found in URL or sessionStorage
+export const getSearchParamsByKeys = <T extends string>(
+  ...keys: T[]
+): Record<T, string> => {
+  const url = new URL(window.location.href)
+
+  const values = keys.reduce((acc, key) => {
+    const searchParam = url.searchParams.get(key)
+    const param = searchParam || sessionStorage.getItem(key)
+    if (param) {
+      acc[key] = param
+    }
+    return acc
+  }, {} as Record<T, string>)
+
+  return values
+}
+
+// Adds a search parameter to the url
+export const setSearchParam = (key: string, value: string): void => {
+  const url = new URL(window.location.href)
+  const { searchParams } = url
+
+  searchParams.set(key, value)
+
+  url.search = searchParams.toString()
+  window.location.href = url.toString()
+}
+
+// Replace search parameters with those found in URL search parameters or sessionStorage
+export const replaceSearchParams = <T extends string>(
+  ...keys: T[]
+): Record<T, string> => {
+  const url = new URL(window.location.href)
+
+  const params = keys.reduce<URLSearchParams>((acc, key) => {
+    const paramValue = url.searchParams.get(key)
+
+    const value = paramValue || sessionStorage.getItem(key)
+
+    // If the query parameter is present, add it to the sessionStorage
+    if (paramValue) {
+      sessionStorage.setItem(key, paramValue)
+    }
+
+    // Bail if there is nothing to set
+    if (!value) return acc
+
+    acc.set(key, value)
+    return acc
+  }, new URLSearchParams())
+
+  // To keep other params in place, we merge them with the current URL parameters
+  const combinedParams = new URLSearchParams({
+    ...Object.fromEntries(url.searchParams),
+    ...Object.fromEntries(params),
+  })
+
+  if (combinedParams.toString()) {
+    window.history.replaceState(null, null, `?${combinedParams}`)
+  }
+
+  return getSearchParamsByKeys(...params.keys())
+}
+
+// Sets up click handlers for elements with data-attribute `data-reset-search-params`.
+// Clicking these will remove all given keys from the sessionStorage and remove the search parameters from the url
+
+// If you want to reset both 'apiKey' and 'locale' when the event is executed, you would use it as followed
+// import { initResetSearchParams } from 'lib/url-helpers'
+
+// Setup the event handlers for the search parameters you want to be reset after execution.
+// initResetSearchParams('apiKey', 'locale')
+
+// Somewhere in the HTML add an element with the 'data-reset-search-params' attribute.
+// <a href="#" data-reset-search-params>Reset account and source locale</a>
+export const initResetSearchParams = <T extends string>(...keys: T[]): void => {
+  const resetLink = document.querySelector('[data-reset-search-params]')
+
+  if (!resetLink) {
+    return
+  }
+
+  resetLink.addEventListener('click', (e) => {
+    e.preventDefault()
+    const url = new URL(window.location.href)
+
+    keys.forEach((key) => {
+      // Clear current session for each key
+      sessionStorage.removeItem(key)
+
+      // Delete key from url
+      url.searchParams.delete(key)
+    })
+
+    // Reload page
+    window.location.href = url.toString()
+  })
+}

package/src/javascripts/package/utils.js

@@ -4,7 +4,10 @@ export {
   Engine,
   eventTypes,
   ExternalApi,
-  getUrlParams,
-  getUrlSearchString,
   randomId,
 } from '@seamly/web-ui'
+export {
+  getSearchParamsByKeys,
+  initResetSearchParams,
+  replaceSearchParams,
+} from 'lib/url-helpers'