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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "21.0.7",
+  "version": "22.0.0-beta.1",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",
@@ -22,79 +22,89 @@
     "webpack/*"
   ],
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.6",
+    "@reduxjs/toolkit": "^1.9.3",
     "@ultraq/icu-message-formatter": "^0.12.0",
+    "core-js": "^3.30.0",
     "deep-keys": "^0.5.0",
-    "focus-trap": "^7.0.0",
-    "include-media": "^1.4.10",
+    "focus-trap": "^7.4.0",
+    "include-media": "^2.0.0",
     "js-cookie": "^3.0.1",
     "minivents": "^2.2.1",
-    "phoenix": "1.6.15",
-    "react-redux": "^8.0.4",
-    "superagent": "^8.0.3"
+    "phoenix": "^1.7.2",
+    "react-redux": "^8.0.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.19.4",
+    "@babel/core": "^7.21.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-classes": "^7.19.0",
-    "@babel/plugin-transform-react-jsx": "^7.19.0",
-    "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
+    "@babel/plugin-transform-classes": "^7.21.0",
+    "@babel/plugin-transform-react-jsx": "^7.21.0",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime-corejs3": "^7.18.9",
-    "@playwright/test": "^1.29.2",
+    "@babel/preset-typescript": "^7.21.4",
+    "@babel/runtime-corejs3": "^7.21.0",
+    "@playwright/test": "^1.32.2",
     "@seamly/doc-site": "^2.0.0",
     "@seamly/eslint-config": "^2.3.0",
     "@seamly/prettier-config": "^2.2.0",
     "@seamly/stylelint-config": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/preact": "^3.2.2",
-    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
-    "@types/jest": "^27.5.2",
-    "@types/phoenix": "^1.5.4",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
-    "babel-jest": "^27.3.1",
-    "babel-loader": "^9.0.1",
+    "@testing-library/preact": "^3.2.3",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/core-js": "^2.5.5",
+    "@types/jest": "^29.5.0",
+    "@types/phoenix": "^1.5.5",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "babel-jest": "^29.5.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.27.0",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.3",
+    "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-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
-    "glob": "^8.0.3",
-    "husky": "^8.0.1",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "glob": "^9.3.4",
+    "husky": "^8.0.3",
     "ignore-loader": "^0.1.2",
-    "jest": "^27.5.1",
-    "jest-environment-jsdom": "^27.5.1",
-    "mini-css-extract-plugin": "^2.6.1",
+    "isomorphic-unfetch": "^4.0.2",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-watch-typeahead": "^2.2.2",
+    "mini-css-extract-plugin": "^2.7.5",
     "nyc": "^15.1.0",
-    "playwright-test-coverage": "^1.2.8",
-    "postcss": "8",
-    "preact": "^10.11.2",
-    "prettier": "^2.7.1",
+    "playwright-test-coverage": "^1.2.12",
+    "postcss": "^8.4.21",
+    "preact": "^10.13.2",
+    "preact-render-to-string": "^6.0.2",
+    "prettier": "^2.8.7",
     "raw-loader": "^4.0.2",
-    "rimraf": "^3.0.2",
-    "start-server-and-test": "^1.14.0",
-    "style-loader": "^3.3.1",
-    "stylelint": "^14.14.0",
-    "ts-loader": "^9.4.1",
-    "typescript": "^4.8.4",
+    "rimraf": "^4.4.1",
+    "start-server-and-test": "^2.0.0",
+    "style-loader": "^3.3.2",
+    "stylelint": "^15.4.0",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.74.0",
-    "webpack-bundle-analyzer": "^4.7.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
+    "webpack": "^5.78.0",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.2",
     "webpack-merge": "^5.8.0"
   },
   "peerDependencies": {
-    "preact": "^10.11.2"
+    "preact": "^10.13.2"
   },
   "scripts": {
     "build:clean": "rimraf build; mkdir -p build",

package/src/javascripts/api/conversation-connector.ts

@@ -11,6 +11,7 @@ type CurrentConnectionState =
   | 'join_channel_succeeded' // Joined channel succesfully.
   | 'join_channel_erred' // Error on joining channel. This is usefull when you want to restart a chat sessions.
   | 'attach_channel_succeeded' // Attached channel to system.
+  | 'attach_channel_erred' // Error attaching channel.
 
 type ConnectionState = {
   connected: boolean
@@ -98,6 +99,7 @@ export default class ConversationConnector {
 
     this.channel.onError((msg) => {
       log('[CHANNEL][ERROR]', msg)
+
       this.#emitConnectionState({
         connected: false,
         ready: false,

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

@@ -0,0 +1,15 @@
+// @ts-ignore
+// eslint-disable-next-line no-undef
+interface ApiErrorOptions extends ErrorOptions {
+  status?: number
+}
+
+export default class ApiError extends Error {
+  status: number
+
+  constructor(message: string, options?: ApiErrorOptions) {
+    // @ts-ignore
+    super(message, { cause: options?.cause })
+    this.status = options?.status
+  }
+}

package/src/javascripts/api/index.ts

@@ -1,7 +1,7 @@
-import type { ApiConfig, Config, Context, LayoutMode } from 'config.types'
+import type { ApiConfig, Context, LayoutMode } from 'config.types'
 import { components, operations } from 'schema'
-import superagent from 'superagent'
 import { apiVersion } from 'config'
+import ApiError from 'api/errors/seamly-api-error'
 import SeamlyConfigurationError from 'api/errors/seamly-configuration-error'
 import SeamlyGeneralError from 'api/errors/seamly-general-error'
 import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
@@ -20,7 +20,7 @@ declare let PACKAGE_VERSION: string
 const log = debug('seamly')
 
 const DOMAIN = 'api.seamly-app.com'
-const TRANSLATIONS_VERSION = 2
+const TRANSLATIONS_VERSION = 4
 
 function buildPayload(command, payload) {
   if (command !== 'message') {
@@ -37,6 +37,26 @@ function buildPayload(command, payload) {
   return { type, body, transactionId }
 }
 
+const fetchApi = async (
+  input: string,
+  // eslint-disable-next-line no-undef
+  init: RequestInit,
+): Promise<Response> => {
+  const url = new URL(input)
+  url.searchParams.set('v', apiVersion)
+
+  const response = await fetch(url.href, { mode: 'cors', ...init })
+
+  if (!response.ok) {
+    throw new ApiError(
+      response.statusText || `Request failed with status: ${response.status}`,
+      { status: response.status },
+    )
+  }
+
+  return response
+}
+
 /**
  * Tries to get the time zone key directly from the operating system for those
  * environments that support the ECMAScript Internationalization API.
@@ -80,11 +100,16 @@ type InitialConversation = Omit<
 >
 export type ConversationHistoryResponse = Omit<
   components['schemas']['ConversationHistoryResponse']['history'],
-  'messages' | 'ui.resumeConversationPrompt'
+  'messages' | 'ui.resumeConversationPrompt' | 'activeServiceSettings'
 > & {
   resumeConversationPrompt: components['schemas']['ConversationHistoryResponse']['history']['ui']['resumeConversationPrompt']
   translationProposal: components['schemas']['ConversationHistoryResponse']['history']['ui']['translationProposal']
   events: ChannelEvent[]
+  activeServiceSettings: components['schemas']['ConversationHistoryResponse']['history']['activeServiceSettings'] & {
+    proactiveMessages?: {
+      enabled: boolean
+    }
+  }
 }
 
 export class API {
@@ -94,6 +119,8 @@ export class API {
 
   #externalId: string
 
+  #conversationAuthToken?: string
+
   #layoutMode: LayoutMode
 
   #config: ApiConfig & {
@@ -116,7 +143,7 @@ export class API {
 
   locale: string
 
-  conversation?: ConversationConnector = new ConversationConnector()
+  conversation: ConversationConnector = new ConversationConnector()
 
   constructor({
     layoutMode,
@@ -238,18 +265,29 @@ export class API {
 
   async #createConversation(): Promise<InitialConversation> {
     try {
-      const request = superagent
-        .post(`${this.#getUrlPrefix('http')}${this.URLS.conversations}`)
-        .set('Content-Type', 'application/json')
-        .query({ v: apiVersion })
-        // withCredentials() is necessary to allow browsers to save received
-        // cookies in CORS requests.
-        .withCredentials()
-        .send({
-          externalId: this.#externalId || undefined,
-        })
-
-      const { body } = await request
+      if (typeof this.#config?.getConversationAuthToken === 'function') {
+        this.#conversationAuthToken =
+          await this.#config.getConversationAuthToken()
+      }
+
+      const response = await fetchApi(
+        `${this.#getUrlPrefix('http')}${this.URLS.conversations}`,
+        {
+          method: 'POST',
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            externalId: this.#conversationAuthToken
+              ? undefined
+              : this.#externalId,
+            token: this.#conversationAuthToken,
+          }),
+        },
+      )
+
+      const body = await response.json()
 
       const { conversation } = body
       const initialState = { ...conversation }
@@ -268,57 +306,73 @@ export class API {
         throw new SeamlyGeneralError(error)
       }
 
+      if (error.status === 400) {
+        throw new SeamlyUnauthorizedError(error)
+      }
+
+      if (error.status === 404) {
+        throw new SeamlyConfigurationError(error)
+      }
+
       throw error
     }
   }
 
-  getConfig(): Promise<Config> {
-    return superagent
-      .post(
+  async getConfig() {
+    try {
+      const response = await fetchApi(
         `${this.#getUrlPrefix('http')}/client/${
           this.connectionInfo.apiKey
         }/configs`,
-      )
-      .set('Content-Type', 'application/json')
-      .query({ v: apiVersion })
-      .send({
-        context: {
-          ...this.#config.context,
-          environment:
-            this.#config.sendEnvironment === true
-              ? this.#getEnvironment()
-              : this.#config.sendEnvironment,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            context: {
+              ...this.#config.context,
+              environment:
+                this.#config.sendEnvironment === true
+                  ? this.#getEnvironment()
+                  : this.#config.sendEnvironment,
+            },
+          }),
         },
-      })
-      .then(({ body }) => {
-        this.#updateUrls(body)
-        this.configReady = true
-        return body.config
-      })
-      .catch((error) => {
-        if (error.status === 404) {
-          throw new SeamlyConfigurationError(error)
-        }
+      )
+      const body = await response.json()
+      this.#updateUrls(body)
+      this.configReady = true
+      return body.config
+    } catch (error) {
+      if (error.status === 404) {
+        throw new SeamlyConfigurationError(error)
+      }
 
-        if (error.status >= 500) {
-          throw new SeamlyGeneralError(error)
-        }
+      if (error.status >= 500) {
+        throw new SeamlyGeneralError(error)
+      }
 
-        throw error
-      })
+      throw error
+    }
   }
 
-  async getConversation(): Promise<ConversationHistoryResponse> {
+  async getConversation(): Promise<ConversationHistoryResponse | null> {
     if (!this.hasConversation()) {
       return null
     }
 
     try {
-      const { body } = await superagent
-        .get(`${this.#getUrlPrefix('http')}${this.URLS.history}`)
-        .set('Authorization', `Bearer ${this.#getAccessToken()}`)
-        .query({ v: apiVersion })
-
+      const response = await fetchApi(
+        `${this.#getUrlPrefix('http')}${this.URLS.history}`,
+        {
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${this.#getAccessToken()}`,
+          },
+        },
+      )
+      const body = await response.json()
       this.#updateUrls(body)
 
       const {
@@ -408,58 +462,76 @@ export class API {
     const formData = new FormData()
     formData.append('upload', file)
 
-    const req = superagent
-      .post(`${this.#getUrlPrefix('http')}${this.URLS.uploads}`)
-      .set('Authorization', `Bearer ${this.#getAccessToken()}`)
-      .send(formData)
+    const xhr = new XMLHttpRequest()
+    xhr.open('POST', `${this.#getUrlPrefix('http')}${this.URLS.uploads}`)
+    xhr.setRequestHeader('Authorization', `Bearer ${this.#getAccessToken()}`)
 
-    req.on('progress', function (e) {
-      const { direction, percent } = e
-      if (direction === 'upload' && typeof progressCallback === 'function') {
+    xhr.upload.onprogress = (event) => {
+      if (typeof progressCallback === 'function') {
+        const percent = Math.ceil((event.loaded / event.total) * 100)
         progressCallback(percent)
       }
-    })
+    }
 
-    req
-      .then((uploadResponse) => {
+    xhr.onloadend = () => {
+      // status is set to 0 when upload is aborted.
+      if (xhr.status === 0) return
+
+      if (xhr.status === 200 || xhr.status === 201) {
         if (successCallback) {
-          successCallback(uploadResponse)
+          try {
+            successCallback(JSON.parse(xhr.response))
+          } catch (_) {
+            successCallback(xhr.response)
+          }
+          return
         }
-      })
-      .catch((err) => {
-        if (errorCallback) {
-          errorCallback(err.response)
-        } else {
-          throw err
+      }
+
+      if (errorCallback) {
+        try {
+          errorCallback(JSON.parse(xhr.response))
+        } catch (_) {
+          errorCallback(xhr.response)
         }
-      })
+      } else {
+        throw new Error(xhr.response)
+      }
+    }
 
-    return req
+    xhr.send(formData)
+    return xhr
   }
 
-  getConversationIntitialState() {
-    return superagent
-      .get(`${this.#getUrlPrefix('http')}${this.getConversationUrl()}`)
-      .set('Authorization', `Bearer ${this.#getAccessToken()}`)
-      .query({ v: apiVersion })
-      .then(({ body }) => {
-        this.#updateUrls(body)
-        this.userResponded = body.conversation.userResponded
-        return omit(body.conversation, ['accessToken', 'channelTopic'])
-      })
-      .catch((error) => {
-        if (error.status === 401) {
-          throw new SeamlyUnauthorizedError(error)
-        }
-        if (error.status === 404) {
-          throw new SeamlySessionExpiredError(error)
-        }
-        if (error.status >= 500) {
-          throw new SeamlyGeneralError(error)
-        }
+  async getConversationIntitialState() {
+    try {
+      const response = await fetchApi(
+        `${this.#getUrlPrefix('http')}${this.getConversationUrl()}`,
+        {
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${this.#getAccessToken()}`,
+          },
+        },
+      )
 
-        throw error
-      })
+      const body = await response.json()
+
+      this.#updateUrls(body)
+      this.userResponded = body.conversation.userResponded
+      return omit(body.conversation, ['accessToken', 'channelTopic'])
+    } catch (error) {
+      if (error.status === 401) {
+        throw new SeamlyUnauthorizedError(error)
+      }
+      if (error.status === 404) {
+        throw new SeamlySessionExpiredError(error)
+      }
+      if (error.status >= 500) {
+        throw new SeamlyGeneralError(error)
+      }
+      throw error
+    }
   }
 
   async getTranslations(locale: string): Promise<Record<string, string>> {
@@ -471,9 +543,11 @@ export class API {
       const url = `${this.#getUrlPrefix('http')}${this.URLS.translations}`
         .replace('{version}', String(TRANSLATIONS_VERSION))
         .replace('{locale}', this.#getLocale(locale))
-      const request = superagent.get(url)
 
-      const { body } = await request
+      const response = await fetchApi(url, {
+        method: 'GET',
+      })
+      const body = await response.json()
       return body.translations
     } catch (error) {
       if (error.status >= 500) {

package/src/javascripts/config.ts

@@ -2,7 +2,7 @@ import type { Config } from 'config.types'
 
 export const CSS_NAME = 'cvco'
 
-export const apiVersion = '2'
+export const apiVersion = '3'
 
 export const userParticipantId = 'seamly-client-participant'
 

package/src/javascripts/config.types.ts

@@ -1,3 +1,4 @@
+import { operations } from 'schema'
 import { FunctionComponent } from 'preact'
 import type { ChannelEvent } from 'domains/store/store.types'
 
@@ -8,6 +9,7 @@ export type ApiConfig = {
   sendEnvironment?: boolean
   storageProvider?: unknown
   externalId?: string
+  getConversationAuthToken?: Function
 }
 
 export type LayoutMode = 'inline' | 'window' | 'app' | null
@@ -47,13 +49,11 @@ export type Context = {
   variables?: Record<string, unknown>
 }
 
-export type AgentParticipant = {
-  name: string
-  avatar: string
-}
-export type UserParticipant = {
-  avatar: string
-}
+export type ConfigResponse =
+  operations['getAccountConfig']['responses']['201']['content']['application/json']['config']
+
+export type AgentParticipant = ConfigResponse['agentParticipant']
+export type UserParticipant = ConfigResponse['userParticipant']
 
 export type VisibilityCallbackOptions = {
   hasConversation: boolean
@@ -67,7 +67,14 @@ export type VisibilityCallback = (
   _options: VisibilityCallbackOptions,
 ) => VisibilityOptions
 
-export type Config = {
+type PreChatTransitionOptions =
+  | {
+      enterDelay: number
+      exitAfter: number
+    }
+  | boolean
+
+export type Config = Omit<ConfigResponse, 'preChat'> & {
   parentElement?: HTMLElement
   namespace?: string
   customComponents?: {
@@ -85,14 +92,14 @@ export type Config = {
   zIndex?: number
   showFaq?: boolean
   showSuggestions?: boolean
+  continueChat?: PreChatTransitionOptions
+  preChat?: PreChatTransitionOptions
   context?: Context
   messages?: Messages
   defaults?: {
     visible: VisibilityOptions
   }
   preChatEvents?: ChannelEvent[]
-  agentParticipant?: AgentParticipant
-  userParticipant?: UserParticipant
-  startChatIcon?: string
   visible?: VisibilityOptions
+  notificationAudioURL?: string | undefined | boolean
 }

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

@@ -10,7 +10,7 @@ export const selectConfig = createSelector(
       visible: (config?.layoutMode === 'inline'
         ? visibilityStates.open
         : visibilityStates.minimized) as VisibilityOptions,
-      appContainerClassNames: config.appContainerClassNames || [],
+      appContainerClassNames: config?.appContainerClassNames || [],
       ...config,
     }
     if (typeof newConfig.appContainerClassNames === 'function') {

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

@@ -12,11 +12,20 @@ export const initialConfigState: Config = {
     key: '',
     secure: true,
   },
+  notificationAudioURL: undefined,
   hideOnNoUserResponse: false,
   connectWhenInView: true,
   showDisclaimer: false,
   showFaq: false,
   showSuggestions: true,
+  preChat: {
+    enterDelay: 1000,
+    exitAfter: 4000,
+  },
+  continueChat: {
+    enterDelay: 0,
+    exitAfter: 2000,
+  },
   customComponents: {},
   defaults: {
     visible: null,
@@ -30,6 +39,8 @@ const configKeys: (keyof Config)[] = [
   'showDisclaimer',
   'showFaq',
   'showSuggestions',
+  'continueChat',
+  'preChat',
   'namespace',
   'customComponents',
   'defaults',
@@ -45,6 +56,7 @@ const configKeys: (keyof Config)[] = [
   'agentParticipant',
   'userParticipant',
   'startChatIcon',
+  'notificationAudioURL',
 ]
 
 const updateState = (state, config: Config): Config => {

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

@@ -14,6 +14,7 @@ export type ControlState = {
   value?: string
   touched?: boolean
   name?: string
+  error?: unknown
 }
 
 export interface FormState {