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

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

@@ -100,7 +100,14 @@ export const translationSlice = createSlice({
         if (!feature) return
 
         state.isAvailable = feature.enabled === true
-        state.languages = feature.languages
+        state.languages = [...feature.languages].sort((a, b) => {
+          if (a.locale === payload.locale) return -1
+          if (b.locale === payload.locale) return 1
+
+          return a.nativeName.localeCompare(b.nativeName, undefined, {
+            sensitivity: 'base',
+          })
+        })
       })
       .addCase(setHistory, (state, { payload }) => {
         state.translationProposal = payload.translationProposal

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/lib/engine/index.tsx

@@ -85,7 +85,9 @@ export default class Engine {
     await store.dispatch(initializeConfig())
     try {
       const { locale } = await store.dispatch(initializeApp()).unwrap()
-      await store.dispatch(setLocale(locale))
+      if (locale) {
+        await store.dispatch(setLocale(locale))
+      }
     } catch (rejectedValueOrSerializedError) {
       // nothing to do
     }

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,
@@ -1644,6 +1661,53 @@ const standardState = {
       ],
     },
   },
+  translationsActiveLarge: {
+    category: categoryKeys.translations,
+    headingText: 'Show translations active (large list)',
+    description: '',
+    ...baseState,
+    config: {
+      ...baseState.config,
+      context: {
+        ...baseState.context,
+        locale: 'nl',
+      },
+    },
+    translations: {
+      ...translationsSlice,
+      currentLocale: 'lv',
+      isActive: true,
+      isAvailable: true,
+      languages: [
+        { locale: 'nl', nativeName: 'Dutch' },
+        { locale: 'en', nativeName: 'English' },
+        { locale: 'ar', nativeName: 'Arabic' },
+        { locale: 'bg', nativeName: 'Bulgarian' },
+        { locale: 'zh', nativeName: 'Chinese' },
+        { locale: 'cs', nativeName: 'Czech' },
+        { locale: 'da', nativeName: 'Danish' },
+        { locale: 'et', nativeName: 'Estonian' },
+        { locale: 'fi', nativeName: 'Finnish' },
+        { locale: 'fr', nativeName: 'French' },
+        { locale: 'de-informal', nativeName: 'German' },
+        { locale: 'el', nativeName: 'Greek' },
+        { locale: 'hu', nativeName: 'Hungarian' },
+        { locale: 'it', nativeName: 'Italian' },
+        { locale: 'ja', nativeName: 'Japanese' },
+        { locale: 'lv', nativeName: 'Latvian' },
+        { locale: 'pl', nativeName: 'Polish' },
+        { locale: 'ro', nativeName: 'Romanian' },
+        { locale: 'ru', nativeName: 'Russian' },
+        { locale: 'sk', nativeName: 'Slovak' },
+        { locale: 'sl', nativeName: 'Slovenian' },
+        { locale: 'es-informal', nativeName: 'Spanish' },
+        { locale: 'sv', nativeName: 'Swedish' },
+        { locale: 'ti', nativeName: 'Tigrinya' },
+        { locale: 'tr', nativeName: 'Turkish' },
+        { locale: 'uk', nativeName: 'Ukrainian' },
+      ],
+    },
+  },
   translationsFullConversation: {
     category: categoryKeys.translations,
     headingText: 'Show translated 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/entry/text-entry/hooks.ts

@@ -82,8 +82,8 @@ export const useEntryTextTranslation = (controlName: ControlState['name']) => {
     [t, hasCharacterLimit, characterLimit, text?.label],
   )
 
-  const labelClass: string = useMemo(
-    () => (text?.label ? 'input__label' : 'visually-hidden'),
+  const labelClass = useMemo(
+    () => (text?.label ? 'label' : 'visually-hidden'),
     [text?.label],
   )
 

package/src/javascripts/ui/components/form-controls/wrapper.tsx

@@ -1,11 +1,21 @@
+import { FC } from 'preact/compat'
 import { className } from 'lib/css'
 import Error from './error'
 
-const FormControlWrapper = ({
+type FormControlWrapperProps = {
+  contentHint: string
+  id: string
+  labelText: string
+  labelClass: string
+  validity: boolean
+  errorText: unknown
+}
+
+const FormControlWrapper: FC<FormControlWrapperProps> = ({
   contentHint,
   id,
   labelText,
-  labelClass = className('label'),
+  labelClass,
   validity,
   errorText,
   children,
@@ -24,7 +34,7 @@ const FormControlWrapper = ({
       <Error id={`${id}-error`} error={!validity && errorText} />
 
       <div className={className('form-control__wrapper')}>
-        <label htmlFor={id} className={labelClass}>
+        <label htmlFor={id} className={className(labelClass)}>
           {labelText}
         </label>
         {children}

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/_input.scss

@@ -25,11 +25,6 @@
   width: 100%;
 }
 
-.#{$n}-input__label {
-  font-size: $fontsize-medium;
-  font-weight: $fontweight-bold;
-}
-
 .#{$n}-input__text {
   appearance: none;
   flex-grow: 4;

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

package/src/stylesheets/5-components/_options.scss

@@ -215,9 +215,9 @@
   &:last-child::after {
     content: '';
     display: block;
-    flex: 0 0 $spacer;
+    flex: 0 0 $spacer * 0.5;
     width: 100%;
-    height: $spacer;
+    height: $spacer * 0.5;
   }
 }
 

package/src/stylesheets/5-components/_translation-options.scss

@@ -1,7 +1,6 @@
 .#{$n}-translation-options {
   display: flex;
   flex-direction: column;
-  gap: $spacer * 0.25;
   width: 100%;
   margin: 0;
 
@@ -10,12 +9,33 @@
   list-style: none;
 }
 
+.#{$n}-translation-options__item--selected {
+  margin-bottom: $spacer * 0.5;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: $spacer * -0.5;
+    flex: 0 0 100%;
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px solid $grey-b;
+  }
+
+  + .#{$n}-translation-options__item {
+    margin-top: $spacer * 0.5;
+  }
+}
+
 .#{$n}-translation-options__item {
   display: flex;
+  position: relative;
+  flex-flow: row wrap;
   align-items: center;
   gap: $spacer * 0.5;
   width: 100%;
-  padding: calc($spacer * 0.25) 0;
+  padding: $spacer * 0.5 0;
   color: $brand3;
   font-size: $fontsize-small;
   font-weight: $fontweight-bold;
@@ -25,7 +45,7 @@
     outline: -webkit-focus-ring-color auto 1px;
   }
 
-  > span {
+  span {
     margin-left: -0.5em;
   }