@seamly/web-ui 22.1.0 → 22.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "22.1.0",
+  "version": "22.3.0-beta.1",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",
@@ -24,24 +24,24 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",
     "@ultraq/icu-message-formatter": "^0.12.0",
-    "core-js": "^3.30.2",
+    "core-js": "^3.31.1",
     "deep-keys": "^0.5.0",
-    "focus-trap": "^7.4.3",
+    "focus-trap": "^7.5.2",
     "include-media": "^2.0.0",
     "js-cookie": "^3.0.5",
     "minivents": "^2.2.1",
-    "phoenix": "^1.7.3",
-    "react-redux": "^8.0.7"
+    "phoenix": "^1.7.6",
+    "react-redux": "^8.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
-    "@babel/plugin-transform-react-jsx": "^7.22.3",
-    "@babel/plugin-transform-runtime": "^7.22.4",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
-    "@babel/runtime-corejs3": "^7.22.3",
-    "@playwright/test": "^1.34.3",
+    "@babel/core": "^7.22.6",
+    "@babel/plugin-transform-react-jsx": "^7.22.5",
+    "@babel/plugin-transform-runtime": "^7.22.6",
+    "@babel/preset-env": "^7.22.6",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@babel/runtime-corejs3": "^7.22.6",
+    "@playwright/test": "^1.35.1",
     "@seamly/doc-site": "^2.0.0",
     "@seamly/eslint-config": "^2.3.0",
     "@seamly/prettier-config": "^2.2.0",
@@ -52,52 +52,52 @@
     "@types/core-js": "^2.5.5",
     "@types/jest": "^29.5.2",
     "@types/phoenix": "^1.6.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
-    "babel-jest": "^29.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "babel-jest": "^29.6.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "copy-webpack-plugin": "^11.0.0",
     "debug": "^4.3.4",
-    "eslint": "^8.41.0",
+    "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "glob": "^10.2.6",
+    "glob": "^10.3.1",
     "husky": "^8.0.3",
     "ignore-loader": "^0.1.2",
     "isomorphic-unfetch": "^4.0.2",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.6.0",
+    "jest-environment-jsdom": "^29.6.0",
     "jest-watch-typeahead": "^2.2.2",
     "mini-css-extract-plugin": "^2.7.6",
     "nyc": "^15.1.0",
     "playwright-test-coverage": "^1.2.12",
     "postcss": "^8.4.24",
     "preact": "^10.15.1",
-    "preact-render-to-string": "^6.0.3",
+    "preact-render-to-string": "^6.1.0",
     "prettier": "^2.8.8",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.1",
     "start-server-and-test": "^2.0.0",
     "style-loader": "^3.3.3",
-    "stylelint": "^15.6.2",
-    "ts-loader": "^9.4.3",
-    "typescript": "^5.0.4",
+    "stylelint": "^15.10.1",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
     "url-loader": "^4.1.1",
-    "webpack": "^5.85.0",
+    "webpack": "^5.88.1",
     "webpack-bundle-analyzer": "^4.9.0",
-    "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^4.15.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0"
   },
   "resolutions": {

package/src/javascripts/api/errors/seamly-api-error.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 // eslint-disable-next-line no-undef
 interface ApiErrorOptions extends ErrorOptions {
   status?: number

package/src/javascripts/api/index.ts

@@ -128,7 +128,7 @@ export class API {
   }
 
   store: {
-    get(_key: string): string
+    get(_key: string): string | object
     set(_key: string, _value: unknown): string
     delete(_key: string): string
   }
@@ -194,7 +194,8 @@ export class API {
   }
 
   #getAccessToken(): string {
-    return this.store.get('accessToken')
+    const accessToken = this.store.get('accessToken') as string
+    return accessToken
   }
 
   #setAccessToken(accessToken: string) {
@@ -202,7 +203,8 @@ export class API {
   }
 
   getConversationUrl(): string {
-    return this.store.get('conversationUrl')
+    const conversationUrl = this.store.get('conversationUrl') as string
+    return conversationUrl
   }
 
   #setConversationUrl(url: { href?: string }) {
@@ -214,9 +216,11 @@ export class API {
   }
 
   #getChannelTopic() {
+    const channelTopic = (this.store.get('channelTopic') ||
+      this.store.get('channelName')) as string
     // The `channelName` fallback is needed for seamless client upgrades.
     // TODO: Remove when all clients have been upgraded past v20.
-    return this.store.get('channelTopic') || this.store.get('channelName')
+    return channelTopic
   }
 
   #setChannelTopic(topic: string) {
@@ -417,7 +421,7 @@ export class API {
         throw new SeamlyGeneralError(error)
       }
 
-      throw error
+      throw new ApiError(error)
     }
   }
 
@@ -503,7 +507,11 @@ export class API {
     return xhr
   }
 
-  async getConversationIntitialState() {
+  async getConversationIntitialState(): Promise<
+    InitialConversation & {
+      userResponded: boolean
+    }
+  > {
     try {
       const response = await fetchApi(
         `${this.#getUrlPrefix('http')}${this.getConversationUrl()}`,
@@ -519,7 +527,7 @@ export class API {
 
       this.#updateUrls(body)
       this.userResponded = body.conversation.userResponded
-      return omit(body.conversation, ['accessToken', 'channelTopic'])
+      return omit(body.conversation, ['accessToken', 'channelTopic']) as any
     } catch (error) {
       if (error.status === 401) {
         throw new SeamlyUnauthorizedError(error)
@@ -554,7 +562,7 @@ export class API {
         throw new SeamlyGeneralError(error)
       }
 
-      throw error
+      throw new ApiError(error)
     }
   }
 
@@ -608,7 +616,19 @@ export class API {
       return
     }
 
-    this.send('context', payload, false)
+    // Destructure the server locale from the payload
+    const { locale: _, ...restPayload } = payload
+    const configLocale = this.#config.context?.locale
+
+    this.send(
+      'context',
+      {
+        // Only send locale if explicitly set in the config.
+        ...(configLocale ? { locale: configLocale } : {}),
+        ...restPayload,
+      },
+      false,
+    )
   }
 
   #getEnvironment() {

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

@@ -5,6 +5,7 @@ import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
 import { actionTypes } from 'ui/utils/seamly-utils'
 import { initializeConfig, resetConfig } from 'domains/config/actions'
 import { setLocale } from 'domains/i18n/actions'
+import createDebouncedAsyncThunk from 'domains/redux/create-debounced-async-thunk'
 import { ThunkAPI } from 'domains/redux/redux.types'
 import type { RootState } from 'domains/store'
 import { initializeVisibility } from 'domains/visibility/actions'
@@ -73,11 +74,11 @@ export const initializeApp = createAsyncThunk<
   }
 })
 
-export const resetApp = createAsyncThunk<unknown, void, ThunkAPI>(
+export const resetApp = createDebouncedAsyncThunk<unknown, void, ThunkAPI>(
   'resetApp',
   async (_, { dispatch, extra: { api } }) => {
     await api.disconnect()
-    await api.clearStore()
+    api.clearStore()
 
     dispatch(resetConfig())
     await dispatch(initializeConfig())
@@ -85,10 +86,14 @@ export const resetApp = createAsyncThunk<unknown, void, ThunkAPI>(
     try {
       const { locale } = await dispatch(initializeApp()).unwrap()
       await dispatch(setLocale(locale))
-    } catch (rejectedValueOrSerializedError) {
+    } catch (e) {
       // nothing to do
     }
 
     dispatch(initializeVisibility())
   },
+  {
+    wait: 2000,
+    leading: true,
+  },
 )

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

@@ -103,6 +103,7 @@ export const configSlice = createSlice({
               agentParticipant,
               userParticipant,
               startChatIcon,
+              locale,
             },
           },
         ) => {
@@ -110,7 +111,7 @@ export const configSlice = createSlice({
             type: 'message',
             payload,
           }))
-
+          state.context.locale = locale
           state.agentParticipant = agentParticipant
           state.userParticipant = userParticipant
           state.startChatIcon = startChatIcon

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

@@ -1,14 +1,14 @@
 import { createSelector } from '@reduxjs/toolkit'
+import type { RootState } from 'domains/store'
 
-export const getState = ({ forms }) => forms
+const getState = ({ forms }: RootState) => forms
 
 export const getFormById = createSelector(
-  getState,
-  (_, { formId }) => formId,
+  [getState, (_, { formId }): string => formId],
   (forms, formId) => forms[formId],
 )
 
-export const getFormControlsByFormId = createSelector(
+const getFormControlsByFormId = createSelector(
   getFormById,
   (form) => form?.controls || {},
 )
@@ -26,13 +26,11 @@ export const getFormValuesByFormId = createSelector(
 )
 
 export const getControlValueByName = createSelector(
-  getFormControlsByFormId,
-  (_, { name }) => name,
+  [getFormControlsByFormId, (_, { name }): string => name],
   (controls, name) => controls[name]?.value,
 )
 
 export const getControlTouchedByName = createSelector(
-  getFormControlsByFormId,
-  (_, { name }) => name,
+  [getFormControlsByFormId, (_, { name }): string => name],
   (controls, name) => controls[name]?.touched,
 )

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

@@ -2,7 +2,7 @@ import { createSlice } from '@reduxjs/toolkit'
 import { resetApp } from 'domains/app/actions'
 import { ControlState } from 'domains/forms/forms.types'
 
-const initialFormState = {
+const initialFormState: Record<string, ControlState> = {
   controls: {},
 }
 

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

@@ -1,8 +1,9 @@
 import { createSelector } from '@reduxjs/toolkit'
+import { RootState } from 'domains/store'
 
 export const selectError = createSelector(
-  ({ interrupt }) => interrupt,
-  ({ error }) => error,
+  ({ interrupt }: RootState) => interrupt,
+  ({ error }: RootState['interrupt']) => error,
 )
 
 export const selectHasError = createSelector(selectError, (error) =>

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

@@ -2,6 +2,7 @@ import { createSlice, isAnyOf } from '@reduxjs/toolkit'
 import { initializeApp } from 'domains/app/actions'
 import { initializeConfig } from 'domains/config/actions'
 import { setLocale } from 'domains/i18n/actions'
+import { getConversation } from 'domains/store/actions'
 import { initializeVisibility, setVisibility } from 'domains/visibility/actions'
 
 const initialState = {
@@ -27,6 +28,7 @@ export const interruptSlice = createSlice({
           setLocale.rejected,
           setVisibility.rejected,
           initializeVisibility.rejected,
+          getConversation.rejected,
         ),
         (state, { payload }) => {
           state.error = payload

package/src/javascripts/domains/redux/create-debounced-async-thunk.ts

@@ -0,0 +1,109 @@
+import {
+  AsyncThunk,
+  AsyncThunkPayloadCreator,
+  Dispatch,
+  createAsyncThunk,
+} from '@reduxjs/toolkit'
+
+type DebounceOptionsType = {
+  /**
+   * The number of milliseconds to delay
+   * @defaultValue `300`
+   */
+  wait: number
+
+  /**
+   * The maximum time `payloadCreator` is allowed to be delayed before
+   * it's invoked.
+   * @defaultValue `0`
+   */
+  maxWait?: number
+
+  /**
+   * Specify invoking on the leading edge of the timeout.
+   * @defaultValue `false`
+   */
+  leading?: boolean
+}
+
+type AsyncThunkConfig = {
+  state?: unknown
+  dispatch?: Dispatch
+  extra?: unknown
+  rejectValue?: unknown
+  serializedErrorType?: unknown
+  pendingMeta?: unknown
+  fulfilledMeta?: unknown
+  rejectedMeta?: unknown
+}
+
+/**
+ * A debounced analogue of the `createAsyncThunk` from `@reduxjs/toolkit`
+ * @param typePrefix - a string action type value
+ * @param payloadCreator - a callback function that should return a promise containing the result of some asynchronous logic
+ * @param debounceOptions - the debounce options object
+ */
+const createDebouncedAsyncThunk = <
+  Returned,
+  ThunkArg,
+  ThunkApiConfig extends AsyncThunkConfig = {},
+>(
+  typePrefix: string,
+  payloadCreator: AsyncThunkPayloadCreator<Returned, ThunkArg, ThunkApiConfig>,
+  debounceOptions?: DebounceOptionsType,
+): AsyncThunk<Returned, ThunkArg, ThunkApiConfig> => {
+  const { wait = 300, maxWait = 0, leading = false } = debounceOptions ?? {}
+
+  let debounceTimer: ReturnType<typeof setTimeout> = null
+  let maxWaitTimer: ReturnType<typeof setTimeout> = null
+  let resolve: ((_value: boolean) => void) | undefined
+
+  const cancel = (): void => {
+    if (resolve) {
+      resolve(false)
+      resolve = undefined
+    }
+  }
+
+  const invoke = (): void => {
+    clearTimeout(maxWaitTimer)
+    maxWaitTimer = undefined
+
+    if (resolve) {
+      resolve(true)
+      resolve = undefined
+    }
+  }
+
+  const debounceExecutionCondition = (): Promise<boolean> | boolean => {
+    const immediate = leading && !debounceTimer
+
+    // Start debounced condition resolution
+    clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => {
+      invoke()
+      debounceTimer = null
+    }, wait)
+
+    if (immediate) {
+      return true
+    }
+
+    cancel()
+
+    //  Start max wait condition resolution
+    if (maxWait && !maxWaitTimer) {
+      maxWaitTimer = setTimeout(invoke, maxWait)
+    }
+
+    return new Promise((res) => {
+      resolve = res
+    })
+  }
+
+  return createAsyncThunk<Returned, ThunkArg>(typePrefix, payloadCreator, {
+    condition: debounceExecutionCondition,
+  }) as AsyncThunk<Returned, ThunkArg, ThunkApiConfig>
+}
+
+export default createDebouncedAsyncThunk

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

@@ -1,10 +1,11 @@
+import { API } from 'api'
 import { Config } from 'config.types'
 import type { RootState } from 'domains/store'
 
 export type ThunkAPI = {
   state: RootState
   extra: {
-    api: any
+    api: API
     config: Config
     eventBus: any
   }

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

@@ -0,0 +1,38 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import { ConversationHistoryResponse } from 'api'
+import { ThunkAPI } from 'domains/redux/redux.types'
+
+export const getConversation = createAsyncThunk<
+  ConversationHistoryResponse | undefined,
+  {
+    lastEvent: { id: string; occurredAt: number }
+  },
+  ThunkAPI
+>(
+  'getConversation',
+  async (_, { extra: { api }, rejectWithValue }) => {
+    try {
+      return api.getConversation()
+    } catch (error) {
+      return rejectWithValue({
+        name: error?.name,
+        message: error?.message,
+        langKey: error?.langKey,
+        action: error?.action,
+        originalEvent: error?.originalEvent,
+        originalError: error?.originalError,
+      })
+    }
+  },
+  {
+    condition(payload, { getState }) {
+      const {
+        state: { events },
+      } = getState()
+
+      const lastEvent = events[events.length - 1]
+      const payloadLastEventId = payload?.lastEvent?.id
+      return lastEvent && payloadLastEventId !== lastEvent.payload.id
+    },
+  },
+)

package/src/javascripts/domains/translations/components/options-dialog/translation-option.tsx

@@ -8,6 +8,7 @@ type TranslationOptionProps = {
   description?: string
   onChange: () => void
   id: string
+  itemClassName?: string
 }
 
 const TranslationOption: FC<TranslationOptionProps> = ({
@@ -16,6 +17,7 @@ const TranslationOption: FC<TranslationOptionProps> = ({
   description,
   onChange,
   id,
+  itemClassName,
 }) => {
   const onKeyDown = (e: KeyboardEvent) => {
     if (e.code === 'Space' || e.code === 'Enter') {
@@ -26,7 +28,7 @@ const TranslationOption: FC<TranslationOptionProps> = ({
 
   return (
     <li
-      className={className('translation-options__item')}
+      className={className([itemClassName, 'translation-options__item'])}
       aria-selected={checked}
       role="option"
       tabIndex={0}

package/src/javascripts/domains/translations/components/options-dialog/translation-options.tsx

@@ -1,5 +1,4 @@
-import { FC } from 'preact/compat'
-import { useMemo } from 'preact/hooks'
+import { FC, useMemo } from 'preact/compat'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import TranslationOption from 'domains/translations/components/options-dialog/translation-option'
@@ -15,6 +14,9 @@ type TranslationOptionsProps = {
   describedById?: string
 }
 
+const isChecked = (language, currentLocale, isOriginal): boolean =>
+  currentLocale === language.locale || (!currentLocale && isOriginal)
+
 const TranslationOptions: FC<TranslationOptionsProps> = ({
   onChange,
   describedById,
@@ -28,29 +30,45 @@ const TranslationOptions: FC<TranslationOptionsProps> = ({
   const { languages, currentLocale, enableTranslations, disableTranslations } =
     useTranslations()
 
-  const handleChange =
-    ({ locale }: Language) =>
-    () => {
-      if (locale === currentLocale || defaultLocale === locale) {
-        disableTranslations()
-      } else {
-        enableTranslations(locale)
-      }
-
-      onChange()
-      focusContainer()
+  const handleChange = (locale: Language['locale']) => () => {
+    if (locale === currentLocale || defaultLocale === locale) {
+      disableTranslations()
+    } else {
+      enableTranslations(locale)
     }
 
-  const sortedLanguages = useMemo(() => {
-    return [...languages].sort((a, b) => {
-      if (a.locale === defaultLocale) return -1
-      if (b.locale === defaultLocale) return 1
+    onChange()
+    focusContainer()
+  }
+
+  const { primaryLanguages, remainingLanguages } = useMemo(
+    () =>
+      languages.reduce(
+        (acc, language) => {
+          const isOriginal = language.locale === defaultLocale
+          const checked = isChecked(language, currentLocale, isOriginal)
+
+          if (language.locale !== defaultLocale) {
+            acc.remainingLanguages.push({ ...language, checked, isOriginal })
+          }
+
+          const selectedIdx = acc.remainingLanguages.findIndex(
+            (l) => l.locale === currentLocale,
+          )
 
-      return a.nativeName.localeCompare(b.nativeName, undefined, {
-        sensitivity: 'base',
-      })
-    })
-  }, [languages, defaultLocale])
+          if (isOriginal || (checked && selectedIdx > 4)) {
+            acc.primaryLanguages.push({ ...language, checked, isOriginal })
+          }
+
+          return acc
+        },
+        {
+          primaryLanguages: [],
+          remainingLanguages: [],
+        },
+      ),
+    [currentLocale, defaultLocale, languages],
+  )
 
   return (
     <ul
@@ -59,23 +77,32 @@ const TranslationOptions: FC<TranslationOptionsProps> = ({
       tabIndex={-1}
       className={className('translation-options')}
     >
-      {sortedLanguages.map((language, idx) => {
-        const isOriginal = idx === 0
-
-        const checked =
-          currentLocale === language.locale || (!currentLocale && isOriginal)
-
-        return (
+      {primaryLanguages.map(
+        ({ locale, nativeName, checked, isOriginal }, idx) => (
           <TranslationOption
-            key={language.locale}
-            id={language.locale}
-            label={language.nativeName}
+            key={locale}
+            id={locale}
+            label={nativeName}
             checked={checked}
             description={isOriginal && t('translations.settings.original')}
-            onChange={handleChange(language)}
+            onChange={handleChange(locale)}
+            itemClassName={className({
+              'translation-options__item--original': isOriginal,
+              'translation-options__item--selected': checked && idx !== 0,
+            })}
           />
-        )
-      })}
+        ),
+      )}
+      {remainingLanguages.map(({ locale, nativeName, checked, isOriginal }) => (
+        <TranslationOption
+          key={locale}
+          id={locale}
+          label={nativeName}
+          checked={checked}
+          description={isOriginal && t('translations.settings.original')}
+          onChange={handleChange(locale)}
+        />
+      ))}
     </ul>
   )
 }