@seamly/web-ui 20.8.1 → 21.0.0

package/src/javascripts/api/errors/seamly-unavailable-error.js

@@ -1,15 +1,13 @@
+import SeamlyBaseError from './seamly-base-error'
+
 /**
  * This error is used to alert the user that there's a problem with the connection
  * when initialising the application because of a connection issue on either the server
  * or the client side.
  */
-export default class SeamlyUnavailableError extends Error {
-  constructor(params) {
-    super(params)
-
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, SeamlyUnavailableError)
-    }
+export default class SeamlyUnavailableError extends SeamlyBaseError {
+  constructor(originalError, ...params) {
+    super(originalError, ...params)
 
     this.name = 'SeamlyUnavailableError'
     this.langKey = 'errors.seamlyUnavailable'

package/src/javascripts/api/{index.js → index.ts}

@@ -1,22 +1,26 @@
-import xs from 'xstream'
+import type { ApiConfig, Config, Context, LayoutMode } from 'config.types'
+import { components, operations } from 'schema'
 import superagent from 'superagent'
 import { apiVersion } from 'config'
-import { objectStore } from 'lib/store/index'
+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'
+import SeamlyUnauthorizedError from 'api/errors/seamly-unauthorized-error'
+import { omit } from 'ui/utils/general-utils'
+import type { ChannelEvent } from 'domains/store/store.types'
+import debug from 'lib/debug'
 import { randomId } from 'lib/id'
+import { objectStore } from 'lib/store/index'
 import sessionStorageProvider from 'lib/store/providers/session-storage'
-import debug from 'lib/debug'
-import { omit } from 'ui/utils/general-utils'
-import ConversationProducer from './producer'
-import EventProducer from './event-producer'
-import SeamlySessionExpiredError from './errors/seamly-session-expired-error'
-import SeamlyConfigurationError from './errors/seamly-configuration-error'
-import SeamlyGeneralError from './errors/seamly-general-error'
-import SeamlyUnauthorizedError from './errors/seamly-unauthorized-error'
+import ConversationConnector from './conversation-connector'
+
+declare let PACKAGE_NAME: string
+declare let PACKAGE_VERSION: string
 
 const log = debug('seamly')
 
 const DOMAIN = 'api.seamly-app.com'
-const TRANSLATIONS_VERSION = 1
+const TRANSLATIONS_VERSION = 2
 
 function buildPayload(command, payload) {
   if (command !== 'message') {
@@ -67,38 +71,76 @@ function getTimeZone() {
   }
 }
 
+type UrlsType = components['schemas']['ConversationResponse']['_links'] &
+  operations['getAccountConfig']['responses']['201']['content']['application/json']['_links']
+
+type InitialConversation = Omit<
+  components['schemas']['ConversationResponse']['conversation'],
+  'accessToken' | 'channelTopic'
+>
+export type ConversationHistoryResponse = Omit<
+  components['schemas']['ConversationHistoryResponse']['history'],
+  'messages' | 'ui.resumeConversationPrompt'
+> & {
+  resumeConversationPrompt: components['schemas']['ConversationHistoryResponse']['history']['ui']['resumeConversationPrompt']
+  translationProposal: components['schemas']['ConversationHistoryResponse']['history']['ui']['translationProposal']
+  events: ChannelEvent[]
+}
+
 export class API {
-  /**
-   * Creates an instance of API.
-   * @param {Object} [config={}]
-   * @param {string} config.key Api key
-   * @param {string} config.domain Domain to connect to
-   * @param {string} config.secure Connect securely
-   * @param {string} config.externalId Unique visitor identifier (optional)
-   * @param {boolean} config.sendEnvironment
-   * @param {string} layoutMode
-   * @param {string} namespace
-   * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined, topic: undefined, translationLocale: undefined }]
-   * @param {string} context.channelName
-   * @param {object} context.variables
-   * @param {string} context.locale
-   * @param {string} context.topic
-   * @param {string} context.translationLocale
-   * @memberof API
-   */
-  constructor({ layoutMode, namespace, config = {}, context = {} }) {
+  #ready: boolean
+
+  connected: boolean
+
+  #externalId: string
+
+  #layoutMode: LayoutMode
+
+  #config: ApiConfig & {
+    context: Context
+  }
+
+  store: {
+    get(_key: string): string
+    set(_key: string, _value: unknown): string
+    delete(_key: string): string
+  }
+
+  connectionInfo: { apiKey: string; domain: string; secure: boolean }
+
+  configReady: boolean
+
+  userResponded: boolean
+
+  URLS: UrlsType
+
+  locale: string
+
+  conversation?: ConversationConnector = new ConversationConnector()
+
+  constructor({
+    layoutMode,
+    namespace,
+    config,
+    context,
+  }: {
+    layoutMode: LayoutMode
+    namespace: string
+    config: ApiConfig
+    context: Context
+  }) {
     this.store = objectStore(
       `${namespace}.connection${context.locale ? `.${context.locale}` : ''}`,
       config.storageProvider || sessionStorageProvider,
     )
-
     this.connectionInfo = {
       apiKey: config.key,
       domain: config.domain || DOMAIN,
       secure: config.secure !== false ? config.secure || true : false,
     }
 
-    this.config = {
+    this.#config = {
+      ...config,
       sendEnvironment: config.sendEnvironment ?? true,
       context: {
         ...context,
@@ -106,25 +148,13 @@ export class API {
       },
     }
 
+    this.#ready = false
     this.connected = false
     this.configReady = false
-    this.externalId = config.externalId
-    this.layoutMode = layoutMode
+    this.#externalId = config.externalId
+    this.#layoutMode = layoutMode
     this.userResponded = false
 
-    this.internalProducer = new EventProducer('API')
-    this.internal$ = xs.create(this.internalProducer).flatten()
-    this.connection$ = this.internal$.filter(
-      (event) => event.type === 'connection',
-    )
-
-    this.connection$.subscribe({
-      next: ({ connected, ready }) => {
-        this.connected = connected
-        this.ready = ready
-      },
-    })
-
     this.URLS = {}
 
     // We want to reconnect whenever the page is loaded from cache (bfcache).
@@ -136,37 +166,37 @@ export class API {
     })
   }
 
-  getAccessToken() {
+  #getAccessToken(): string {
     return this.store.get('accessToken')
   }
 
-  setAccessToken(accessToken) {
+  #setAccessToken(accessToken: string) {
     this.store.set('accessToken', accessToken)
   }
 
-  getConversationUrl() {
+  getConversationUrl(): string {
     return this.store.get('conversationUrl')
   }
 
-  setConversationUrl(url) {
+  #setConversationUrl(url: { href?: string }) {
     this.store.set('conversationUrl', url)
   }
 
-  hasConversation() {
+  hasConversation(): boolean {
     return !!this.getConversationUrl()
   }
 
-  getChannelTopic() {
+  #getChannelTopic() {
     // 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')
   }
 
-  setChannelTopic(topic) {
+  #setChannelTopic(topic: string) {
     this.store.set('channelTopic', topic)
   }
 
-  getLocale = (locale) => locale || this.locale
+  #getLocale = (locale: string): string => locale || this.locale
 
   clearStore() {
     this.store.delete('accessToken')
@@ -176,12 +206,12 @@ export class API {
     this.store.delete('channelTopic')
   }
 
-  getUrlPrefix(protocol) {
+  #getUrlPrefix(protocol: string) {
     const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol
     return `${realProtocol}://${this.connectionInfo.domain}`
   }
 
-  updateUrls({ _links: responseLinks }) {
+  #updateUrls({ _links: responseLinks }: { _links: UrlsType }) {
     this.URLS = Object.entries(responseLinks)
       .filter(([key]) => key !== 'self')
       .reduce((urls, [key, { href }]) => {
@@ -199,24 +229,24 @@ export class API {
   }
 
   async disconnect() {
-    if (this.conversationProducer) {
-      await this.conversationProducer.disconnect()
+    if (this.conversation?.disconnect) {
+      this.conversation.disconnect()
     }
     this.connected = false
     this.configReady = false
   }
 
-  async createConversation() {
+  async #createConversation(): Promise<InitialConversation> {
     try {
       const request = superagent
-        .post(`${this.getUrlPrefix('http')}${this.URLS.conversations}`)
+        .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,
+          externalId: this.#externalId || undefined,
         })
 
       const { body } = await request
@@ -225,10 +255,10 @@ export class API {
       const initialState = { ...conversation }
       delete initialState.accessToken
       delete initialState.channelTopic
-      this.setAccessToken(conversation.accessToken)
-      this.setChannelTopic(conversation.channelTopic)
-      this.updateUrls(body)
-      this.setConversationUrl(this.URLS.conversation)
+      this.#setAccessToken(conversation.accessToken)
+      this.#setChannelTopic(conversation.channelTopic)
+      this.#updateUrls(body)
+      this.#setConversationUrl(this.URLS.conversation)
       this.locale = conversation.translation?.locale
       this.userResponded = conversation.userResponded
 
@@ -237,14 +267,15 @@ export class API {
       if (error.status >= 500) {
         throw new SeamlyGeneralError(error)
       }
+
       throw error
     }
   }
 
-  getConfig() {
+  getConfig(): Promise<Config> {
     return superagent
       .post(
-        `${this.getUrlPrefix('http')}/client/${
+        `${this.#getUrlPrefix('http')}/client/${
           this.connectionInfo.apiKey
         }/configs`,
       )
@@ -252,41 +283,43 @@ export class API {
       .query({ v: apiVersion })
       .send({
         context: {
-          ...this.config.context,
+          ...this.#config.context,
           environment:
-            this.config.sendEnvironment === true
-              ? this.getEnvironment()
-              : this.config.sendEnvironment,
+            this.#config.sendEnvironment === true
+              ? this.#getEnvironment()
+              : this.#config.sendEnvironment,
         },
       })
       .then(({ body }) => {
-        this.updateUrls(body)
+        this.#updateUrls(body)
         this.configReady = true
         return body.config
       })
       .catch((error) => {
         if (error.status === 404) {
-          throw new SeamlyConfigurationError()
+          throw new SeamlyConfigurationError(error)
         }
+
         if (error.status >= 500) {
           throw new SeamlyGeneralError(error)
         }
+
         throw error
       })
   }
 
-  async getConversation() {
+  async getConversation(): Promise<ConversationHistoryResponse> {
     if (!this.hasConversation()) {
       return null
     }
 
     try {
       const { body } = await superagent
-        .get(`${this.getUrlPrefix('http')}${this.URLS.history}`)
-        .set('Authorization', `Bearer ${this.getAccessToken()}`)
+        .get(`${this.#getUrlPrefix('http')}${this.URLS.history}`)
+        .set('Authorization', `Bearer ${this.#getAccessToken()}`)
         .query({ v: apiVersion })
 
-      this.updateUrls(body)
+      this.#updateUrls(body)
 
       const {
         messages,
@@ -314,48 +347,58 @@ export class API {
         resumeConversationPrompt: ui
           ? Boolean(ui.resumeConversationPrompt)
           : false,
+        translationProposal: ui.translationProposal,
         translation,
       }
     } 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 connect() {
+  async connect(): Promise<InitialConversation> {
     this.connected = false
-    let conversationInitialState = null
+    let conversationInitialState: InitialConversation = {}
 
     if (!this.hasConversation()) {
-      conversationInitialState = await this.createConversation()
+      conversationInitialState = await this.#createConversation()
     }
 
-    this.conversationProducer = new ConversationProducer(
-      `${this.getUrlPrefix('ws')}${this.URLS.socket}`,
-      this.config.context.channelName,
-      this.getChannelTopic(),
-      this.getAccessToken(),
+    this.conversation.connect(
+      `${this.#getUrlPrefix('ws')}${this.URLS.socket}`,
+      this.#config.context.channelName,
+      this.#getChannelTopic(),
+      this.#getAccessToken(),
     )
 
-    this.internalProducer.emit(xs.create(this.conversationProducer))
+    this.conversation.onConnection((connectionState) => {
+      this.connected = [
+        'attach_channel_succeeded',
+        'join_channel_succeeded',
+      ].includes(connectionState)
+      this.#ready = connectionState === 'attach_channel_succeeded'
+    })
 
     // Send environment
-    if (this.config.sendEnvironment) {
+    if (this.#config.sendEnvironment) {
       this.send(
         'context',
         {
           environment:
-            this.config.sendEnvironment === true
-              ? this.getEnvironment()
-              : this.config.sendEnvironment,
+            this.#config.sendEnvironment === true
+              ? this.#getEnvironment()
+              : this.#config.sendEnvironment,
         },
         false,
       )
@@ -369,8 +412,8 @@ export class API {
     formData.append('upload', file)
 
     const req = superagent
-      .post(`${this.getUrlPrefix('http')}${this.URLS.uploads}`)
-      .set('Authorization', `Bearer ${this.getAccessToken()}`)
+      .post(`${this.#getUrlPrefix('http')}${this.URLS.uploads}`)
+      .set('Authorization', `Bearer ${this.#getAccessToken()}`)
       .send(formData)
 
     req.on('progress', function (e) {
@@ -399,11 +442,11 @@ export class API {
 
   getConversationIntitialState() {
     return superagent
-      .get(`${this.getUrlPrefix('http')}${this.getConversationUrl()}`)
-      .set('Authorization', `Bearer ${this.getAccessToken()}`)
+      .get(`${this.#getUrlPrefix('http')}${this.getConversationUrl()}`)
+      .set('Authorization', `Bearer ${this.#getAccessToken()}`)
       .query({ v: apiVersion })
       .then(({ body }) => {
-        this.updateUrls(body)
+        this.#updateUrls(body)
         this.userResponded = body.conversation.userResponded
         return omit(body.conversation, ['accessToken', 'channelTopic'])
       })
@@ -417,15 +460,20 @@ export class API {
         if (error.status >= 500) {
           throw new SeamlyGeneralError(error)
         }
+
         throw error
       })
   }
 
-  async getTranslations(locale) {
+  async getTranslations(locale: string): Promise<Record<string, string>> {
     try {
-      const url = `${this.getUrlPrefix('http')}${this.URLS.translations}`
+      if (!this.URLS.translations) {
+        throw new SeamlyConfigurationError()
+      }
+
+      const url = `${this.#getUrlPrefix('http')}${this.URLS.translations}`
         .replace('{version}', String(TRANSLATIONS_VERSION))
-        .replace('{locale}', this.getLocale(locale))
+        .replace('{locale}', this.#getLocale(locale))
       const request = superagent.get(url)
 
       const { body } = await request
@@ -434,34 +482,36 @@ export class API {
       if (error.status >= 500) {
         throw new SeamlyGeneralError(error)
       }
+
       throw error
     }
   }
 
   send(command, payload, waitForReady = true) {
-    if (!this.connected || (waitForReady && !this.ready)) {
-      // Wait for connection
-      this.connection$
-        .filter((e) => (waitForReady ? e.connected && e.ready : e.connected))
-        .take(1)
-        .subscribe({
-          next: () => this.send(command, payload, waitForReady),
-        })
+    if (!this.connected || (waitForReady && !this.#ready)) {
+      // Wait for connection to be made
+      this.conversation?.onConnection((connectionState) => {
+        const connected = connectionState === 'join_channel_succeeded'
+        const ready = connectionState === 'attach_channel_succeeded'
+        if (waitForReady ? ready : connected || ready) {
+          this.send(command, payload, waitForReady)
+        }
+      })
       return
     }
 
     log('[SEND]', command, payload)
 
-    this.conversationProducer.push(
+    this.conversation.pushToChannel(
       command,
       buildPayload(command, payload),
       10000,
     )
   }
 
-  sendContext(context = {}) {
+  sendContext(context: Context) {
     const { locale, variables } = context
-    const payload = {}
+    const payload: { locale?: string; variables?: any } = {}
 
     if (locale) {
       if (typeof locale !== 'string') {
@@ -485,19 +535,16 @@ export class API {
     this.send('context', payload, false)
   }
 
-  stream() {
-    return this.internal$.filter((event) => event.type !== 'connection')
-  }
-
-  getEnvironment() {
+  #getEnvironment() {
     return {
       clientName: PACKAGE_NAME,
-      clientVariant: this.layoutMode,
+      clientVariant: this.#layoutMode,
       clientVersion: PACKAGE_VERSION,
       currentUrl: window.location.toString(),
       screenResolution: `${window.screen.width}x${window.screen.height}`,
       timezone: getTimeZone(),
       userAgent: navigator.userAgent,
+      preferredLocale: navigator.language,
     }
   }
 }

package/src/javascripts/config.types.ts

@@ -1,5 +1,5 @@
-import type { ChannelEvent } from 'domains/store/store.types'
 import { FunctionComponent } from 'preact'
+import type { ChannelEvent } from 'domains/store/store.types'
 
 export type ApiConfig = {
   key: string
@@ -19,8 +19,9 @@ export type ErrorCallbackMeta = {
   api: ApiConfig
   layoutMode: LayoutMode
   conversationUrl: string
+  action?: string
 }
-export type ErrorCallback = (error: Error, meta: ErrorCallbackMeta) => void
+export type ErrorCallback = (_error: Error, _meta: ErrorCallbackMeta) => void
 
 export type Message = {
   showName?: boolean
@@ -62,7 +63,7 @@ export type VisibilityCallbackOptions = {
 }
 
 export type VisibilityCallback = (
-  options: VisibilityCallbackOptions,
+  _options: VisibilityCallbackOptions,
 ) => VisibilityOptions
 
 export type Config = {
@@ -79,7 +80,7 @@ export type Config = {
   visibilityCallback?: VisibilityCallback
   errorCallback?: ErrorCallback
   api: ApiConfig
-  appContainerClassNames?: string[] | ((config: Config) => string[])
+  appContainerClassNames?: string[] | ((_config: Config) => string[])
   zIndex?: number
   showFaq?: boolean
   showSuggestions?: boolean