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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "22.2.0",
+  "version": "22.3.0-beta.1",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",

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)
     }
   }
 

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/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/visibility/actions.ts

@@ -44,9 +44,12 @@ export const setVisibility = createAsyncThunk<
     if (previousVisibility === calculatedVisibility) {
       return undefined
     }
+
+    const visibility = api.store.get(StoreKey) as object | undefined
+
     // Store the user-requested visibility in order to reinitialize after refresh
     api.store.set(StoreKey, {
-      ...(api.store.get(StoreKey) || {}),
+      ...(visibility || {}),
       [layoutMode]: requestedVisibility,
     })
     if (requestedVisibility) {

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

@@ -941,6 +941,23 @@ const cardTopic = {
     },
   },
 }
+const cardNoImage = {
+  type: 'message',
+  payload: {
+    type: 'card',
+    id: randomId(),
+    body: {
+      action: {
+        ask: '',
+        type: 'ask',
+      },
+      buttonText: 'Ask about pizzas!',
+      description:
+        'Pizza Margherita is a <strong>typical Neapolitan pizza</strong>.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
+      title: 'Pizza Margherita',
+    },
+  },
+}
 
 const standardState = {
   base: {
@@ -1242,7 +1259,7 @@ const standardState = {
     serviceInfo: {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
     },
-    events: [cardAskText, cardNavigate, cardTopic],
+    events: [cardAskText, cardNavigate, cardTopic, cardNoImage],
   },
   carousel: {
     category: categoryKeys.messages,

package/src/javascripts/ui/components/conversation/event/{card-component.js → card-component.tsx}

@@ -16,7 +16,7 @@ const CardComponent = ({
   const cardRef = useRef(null)
   const { sendMessage, sendAction, emitEvent } = useSeamlyCommands()
   const descriptionId = useGeneratedId()
-  const isMounted = useRef()
+  const isMounted = useRef(false)
 
   const CardActionComponent =
     action.type === cardTypes.navigate ? 'a' : 'button'
@@ -74,10 +74,12 @@ const CardComponent = ({
     <div
       className={className('card__wrapper')}
       id={id}
-      tabIndex="-1" // set tabIndex of -1 so card can be focussed
+      tabIndex={-1} // set tabIndex of -1 so card can be focussed
       ref={cardRef}
     >
-      <img className={className('card__image')} src={image} alt="" />
+      {image ? (
+        <img className={className('card__image')} src={image} alt="" />
+      ) : null}
       <div className={className('card__content')} id={id}>
         {title && <h2 className={className('card__title')}>{title}</h2>}
         {description && (
@@ -87,7 +89,7 @@ const CardComponent = ({
           />
         )}
         <CardActionComponent
-          tabIndex={isCarouselItem && !hasFocus ? '-1' : undefined} // disable to prevent tabbing through cards
+          tabIndex={isCarouselItem && !hasFocus ? -1 : undefined} // disable to prevent tabbing through cards
           className={className('button', 'button--primary')}
           aria-describedby={descriptionId}
           {...actionProps}

package/src/javascripts/ui/components/conversation/event/event-participant.js

@@ -28,7 +28,7 @@ const EventParticipant = ({ eventPayload }) => {
     )
   }
 
-  if (showName) {
+  if (showName && participantName) {
     authorInfo.push(
       <span className={className('message__author-name')}>
         {participantName}

package/src/javascripts/ui/components/core/seamly-event-subscriber.ts

@@ -1,11 +1,9 @@
 import { useContext, useEffect, useRef } from 'preact/hooks'
-import { useDispatch } from 'react-redux'
 import SeamlyGeneralError from 'api/errors/seamly-general-error'
 import SeamlyOfflineError from 'api/errors/seamly-offline-error'
 import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
 import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
 import {
-  useEvents,
   useSeamlyApiContext,
   useSeamlyCommands,
   useSeamlyIdleDetachCountdown,
@@ -13,6 +11,8 @@ import {
 import { featureKeys } from 'ui/utils/seamly-utils'
 import { setHasResponded } from 'domains/app/slice'
 import { clearInterrupt, setInterrupt } from 'domains/interrupt/slice'
+import { useAppDispatch } from 'domains/store'
+import { getConversation } from 'domains/store/actions'
 import {
   ackEvent,
   addEvent,
@@ -41,8 +41,7 @@ const SeamlyEventSubscriber = () => {
   const api = useSeamlyApiContext()
   const syncChannelRef = useRef<number>()
   const messageChannelRef = useRef<number>()
-  const dispatch = useDispatch()
-  const events = useEvents()
+  const dispatch = useAppDispatch()
   const eventBus = useContext(SeamlyEventBusContext)
   const prevEmittedEventId = useRef(null)
   const { initCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
@@ -314,39 +313,24 @@ const SeamlyEventSubscriber = () => {
 
         syncChannelRef.current = api.conversation.channel.on(
           'sync',
-          (payload) => {
-            const lastEvent = events[events.length - 1]
-            const payloadLastEventId = payload?.lastEvent?.id
-
-            if (lastEvent && payloadLastEventId === lastEvent.payload.id) {
-              return payload
+          async (payload: {
+            lastEvent: { id: string; occurredAt: number }
+          }) => {
+            try {
+              const history = await dispatch(getConversation(payload)).unwrap()
+              if (!history) return
+
+              dispatch(setHistory(history))
+            } catch (_e) {
+              // nothing to do, the error is handled in the thunk
             }
-
-            return api
-              .getConversation()
-              .then((history) => {
-                if (!history) return
-                dispatch(setHistory(history))
-              })
-              .catch((error) => {
-                dispatch(
-                  setInterrupt({
-                    name: error?.name,
-                    message: error?.message,
-                    langKey: error?.langKey,
-                    action: error?.action,
-                    originalEvent: error?.originalEvent,
-                    originalError: error?.originalError,
-                  }),
-                )
-              })
           },
         )
 
         return true
       })
     }
-  }, [api, api.connectionInfo, api.conversation.channel, events, dispatch])
+  }, [api, api.connectionInfo, api.conversation.channel, dispatch])
 
   return null
 }

package/src/javascripts/ui/components/view/window-view/window-open-button.js

@@ -57,9 +57,14 @@ const WindowOpenButton = ({ onClick }) => {
         aria-hidden={isOpen}
         onClick={handleClick}
       >
-        <span className={className('message-count')} aria-hidden="true">
-          {!!count && count}
-        </span>
+        <InOutTransition
+          isActive={!!count}
+          transitionStartState={transitionStartStates.notRendered}
+        >
+          <span className={className('message-count')} aria-hidden="true">
+            {count}
+          </span>
+        </InOutTransition>
         <ButtonIcon />
       </button>
     </InOutTransition>

package/src/javascripts/ui/hooks/use-session-expired-command.ts

@@ -1,17 +1,46 @@
-import { useEffect } from 'preact/hooks'
+import { useEffect, useRef } from 'preact/hooks'
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
 import { useInterrupt } from 'domains/interrupt/hooks'
+import { setInterrupt } from 'domains/interrupt/slice'
+import { useAppDispatch } from 'domains/store'
 import useSeamlyCommands from './use-seamly-commands'
 
 export default function useSessionExpiredCommand() {
   const {
     meta: { originalError, action },
   } = useInterrupt()
+  const dispatch = useAppDispatch()
   const seamlyCommands = useSeamlyCommands()
   const isExpiredError = originalError?.name === 'SeamlySessionExpiredError'
+  const limit = useRef(0)
+  const limitTimer = useRef<ReturnType<typeof setTimeout>>(null)
 
   useEffect(() => {
     if (isExpiredError && seamlyCommands[action]) {
+      if (limit.current >= 10) {
+        limitTimer.current = setTimeout(() => {
+          limit.current = 0
+        }, 10000)
+
+        const error = new SeamlyGeneralError()
+        dispatch(
+          setInterrupt({
+            name: error.name,
+            message: error.message,
+            langKey: error.langKey,
+            originalEvent: error.originalEvent,
+            originalError: error.originalError,
+            action: error.action,
+          }),
+        )
+        return () => {}
+      }
+      limit.current += 1
       seamlyCommands[action]()
     }
-  }, [action, seamlyCommands, isExpiredError])
+
+    return () => {
+      if (limitTimer.current) clearTimeout(limitTimer.current)
+    }
+  }, [action, seamlyCommands, isExpiredError, dispatch])
 }

package/src/stylesheets/5-components/_message-count.scss

@@ -1,5 +1,5 @@
 .#{$n}-message-count {
-  display: flex;
+  display: none;
   position: absolute;
   z-index: 1;
   top: $spacer * -0.5;
@@ -8,21 +8,23 @@
   justify-content: center;
   width: $messagecountsize;
   height: $messagecountsize;
-  transform: scale(1);
+  transform: scale(0);
   transform-origin: 50% 50%;
-  transition: transform 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
-    opacity $transition;
+  transition: transform $transition, opacity $transition;
   border-radius: 50%;
-  opacity: 1;
+  opacity: 0;
   background-color: $negative;
   color: $white;
   font-size: $fontsize-small;
   font-weight: $fontweight-bold;
   line-height: 1;
 
-  &:empty {
-    transform: scale(0);
-    transition: transform $transition, opacity $transition;
-    opacity: 0;
+  &.#{$n}-transition--visible {
+    display: flex;
+  }
+
+  &.#{$n}-transition--in {
+    transform: scale(1);
+    opacity: 1;
   }
 }