@seamly/web-ui 19.1.1 → 20.0.0-beta.1

package/src/javascripts/ui/components/chat-app.js

@@ -1,4 +1,4 @@
-import View from './layout/view'
+import View from './view'
 import SeamlyCore from './core/seamly-core'
 
 const ChatApp = (props) => {

package/src/javascripts/ui/components/conversation/component-filter.js

@@ -8,17 +8,20 @@ import Video from './event/video'
 import Divider from './event/divider'
 import Translation from './event/translation'
 import Participant from './event/participant'
+import Splash from './event/splash'
 import Upload from './event/upload'
 import Cta from './event/cta'
 import TimeIndicator from './event/divider/variants/time-indicator'
 import CarouselMessage from './event/carousel-message'
 import CardMessage from './event/card-message'
+import ConversationSuggestions from './event/conversation-suggestions'
 
 const eventTypeMapping = {
   message: {
     choice_prompt: ChoicePrompt,
     text: Text,
     image: Image,
+    splash: Splash,
     video: Video,
     upload: Upload,
     cta: Cta,
@@ -34,6 +37,9 @@ const eventTypeMapping = {
   participant: {
     participant: Participant,
   },
+  service_data: {
+    suggestion: ConversationSuggestions,
+  },
 }
 
 const ComponentFilter = ({ children }) => {

package/src/javascripts/ui/components/conversation/event/carousel-component/index.js

@@ -8,6 +8,9 @@ import CarouselMessageSlide from '../carousel-message/components/slide'
 
 const defaultGetItemKey = (item, idx, prefix) => `${prefix}${idx}`
 const defaultGetItemLabel = (item) => item.label
+const preventScroll = ({ target }) => {
+  target.scrollLeft = 0
+}
 
 export default function CarouselComponent({
   currentIndex: originalIndex,
@@ -51,7 +54,10 @@ export default function CarouselComponent({
       role="group"
       aria-roledescription="carousel"
     >
-      <div className={className('carousel__slides-wrapper')}>
+      <div
+        className={className('carousel__slides-wrapper')}
+        onScroll={preventScroll}
+      >
         <div
           id={carouselItemsId}
           className={className('carousel__slides')}
@@ -78,6 +84,7 @@ export default function CarouselComponent({
                   item={item}
                   items={items}
                   currentIndex={currentIndex}
+                  index={idx}
                   isActive={isActive}
                 />
               </div>

package/src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js

@@ -5,18 +5,17 @@ import CardComponent from '../../card-component'
 export default function CarouselMessageSlide({
   item: slide,
   items,
-  currentIndex,
+  index,
   isActive,
 }) {
   const { t } = useI18n()
-
   return (
     <div
       className={className('carousel-item', `carousel-item--${slide.type}`)}
       role="group"
       aria-roledescription="slide"
       aria-label={t('carousel.slide.label', {
-        index: currentIndex + 1,
+        index: index + 1,
         total: items.length,
       })}
     >

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

@@ -0,0 +1,70 @@
+import { useCallback } from 'preact/hooks'
+import { className } from '../../../../lib/css'
+import { actionTypes } from '../../../utils/seamly-utils'
+import { useI18n } from '../../../../domains/i18n'
+import { useTranslatedEventData } from '../../../../domains/translations'
+import MessageContainer from '../message-container'
+import { useSeamlyCommands } from '../../../hooks/seamly-hooks'
+import SuggestionsList from '../../suggestions/suggestions-list'
+
+export const useSuggestions = (event) => {
+  const { payload } = event
+  const [suggestions] = useTranslatedEventData(event)
+
+  return {
+    suggestions,
+    payload,
+  }
+}
+
+const ConversationSuggestions = ({ event, ...props }) => {
+  const { t } = useI18n()
+  const headingText = t('suggestions.headingText')
+  const footerText = t('suggestions.footerText')
+  const { sendAction, addMessageBubble } = useSeamlyCommands()
+  const { suggestions, payload } = useSuggestions(event)
+  const handleClick = useCallback(
+    ({ id, question }) => {
+      // @todo Refactor to 'suggestionclick'
+      sendAction({
+        type: actionTypes.custom,
+        originMessage: payload.id,
+        body: {
+          type: 'faqclick',
+          body: {
+            faqId: id,
+            faqQuestion: question,
+          },
+        },
+      })
+
+      addMessageBubble(question)
+    },
+    [payload, sendAction, addMessageBubble],
+  )
+
+  return (
+    <div className={className('suggestions', 'suggestions--conversation')}>
+      {headingText && (
+        <h2 className={className('suggestions__heading')}>{headingText}</h2>
+      )}
+      <MessageContainer
+        type="suggestions"
+        showParticipant={false}
+        event={event}
+        {...props}
+      >
+        <SuggestionsList
+          className="suggestions__list--conversation"
+          onClickSuggestion={handleClick}
+          suggestions={suggestions}
+        />
+        {footerText && (
+          <p className={className('suggestions__footer')}>{footerText}</p>
+        )}
+      </MessageContainer>
+    </div>
+  )
+}
+
+export default ConversationSuggestions

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

@@ -1,5 +1,4 @@
 import { useMemo } from 'preact/hooks'
-import Mustache from 'mustache'
 import parseBody from '../../../../lib/parse-body'
 import EventDivider from '../event-divider'
 import { useTranslatedEventData } from '../../../../domains/translations'
@@ -12,10 +11,8 @@ const Participant = ({ event }) => {
   const [introduction] = useTranslatedEventData(event)
 
   const intro = useMemo(() => {
-    return introduction
-      ? Mustache.render(parseBody(introduction), participant)
-      : undefined
-  }, [introduction, participant])
+    return introduction ? parseBody(introduction) : undefined
+  }, [introduction])
 
   if (!intro) {
     return null

package/src/javascripts/ui/components/conversation/event/splash.js

@@ -0,0 +1,26 @@
+import parseBody from '../../../../lib/parse-body'
+import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
+import MessageContainer from '../message-container'
+import { useTranslatedEventData } from '../../../../domains/translations'
+
+const Splash = ({ event, ...props }) => {
+  const { payload } = event
+  const [body] = useTranslatedEventData(event)
+  const eventClick = useEventLinkClickHandler(payload.id)
+
+  return (
+    <MessageContainer
+      type="splash"
+      event={event}
+      onClick={eventClick}
+      {...props}
+      bodyProps={{
+        dangerouslySetInnerHTML: {
+          __html: parseBody(body.text),
+        },
+      }}
+    />
+  )
+}
+
+export default Splash

package/src/javascripts/ui/components/conversation/event/text.js

@@ -1,7 +1,6 @@
 import { useMemo } from 'preact/hooks'
 import parseBody from '../../../../lib/parse-body'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import { parseRichText } from './hooks/use-text-rendering'
 import MessageContainer from '../message-container'
 import { useTranslatedEventData } from '../../../../domains/translations'
 
@@ -14,7 +13,7 @@ const Text = ({ event, ...props }) => {
       return {
         bodyProps: {
           dangerouslySetInnerHTML: {
-            __html: parseRichText(parseBody(body.text), body.variables),
+            __html: parseBody(body.text),
           },
         },
       }

package/src/javascripts/ui/components/core/seamly-core.js

@@ -11,6 +11,7 @@ import SeamlyFileUpload from './seamly-file-upload'
 import { SeamlyEventBusContext, SeamlyApiContext } from './seamly-api-context'
 import { StoreProvider } from '../../../domains/redux'
 import { catchError } from '../../../domains/errors'
+import ComponentFilter from '../conversation/component-filter'
 
 const SeamlyCore = ({ store, children, config, eventBus, api }) => {
   useErrorBoundary((error) => store.dispatch(catchError(error)))
@@ -19,15 +20,17 @@ const SeamlyCore = ({ store, children, config, eventBus, api }) => {
       <SeamlyEventBusContext.Provider value={eventBus}>
         <SeamlyApiContext.Provider value={api}>
           <SeamlyLiveRegion>
-            <SeamlyInitializer config={config} />
-            <SeamlyEventSubscriber eventBus={eventBus} />
-            <SeamlyReadState />
-            <SeamlyNewNotifications />
-            <SeamlyIdleDetachCounter />
-            <SeamlyActivityMonitor>
-              <SeamlyInstanceFunctionsLoader />
-              <SeamlyFileUpload>{children}</SeamlyFileUpload>
-            </SeamlyActivityMonitor>
+            <ComponentFilter>
+              <SeamlyInitializer config={config} />
+              <SeamlyEventSubscriber eventBus={eventBus} />
+              <SeamlyReadState />
+              <SeamlyNewNotifications />
+              <SeamlyIdleDetachCounter />
+              <SeamlyActivityMonitor>
+                <SeamlyInstanceFunctionsLoader />
+                <SeamlyFileUpload>{children}</SeamlyFileUpload>
+              </SeamlyActivityMonitor>
+            </ComponentFilter>
           </SeamlyLiveRegion>
         </SeamlyApiContext.Provider>
       </SeamlyEventBusContext.Provider>

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

@@ -12,8 +12,8 @@ import {
 import SeamlyGeneralError from '../../../api/errors/seamly-general-error'
 import SeamlySessionExpiredError from '../../../api/errors/seamly-session-expired-error'
 import SeamlyOfflineError from '../../../api/errors/seamly-offline-error'
-import { Actions as InterruptActions } from '../../../domains/interrupt'
-import { Actions as AppActions } from '../../../domains/app'
+import * as InterruptActions from '../../../domains/interrupt/actions'
+import * as AppActions from '../../../domains/app/actions'
 
 const {
   ADD_EVENT,
@@ -103,6 +103,7 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
               switch (payload.type) {
                 case 'text':
                 case 'choice_prompt':
+                case 'splash':
                 case 'image':
                 case 'upload':
                 case 'video':
@@ -138,21 +139,14 @@ const SeamlyEventSubscriber = ({ eventBus }) => {
             case 'system':
               if (payload.type === 'service_changed') {
                 const { serviceSettings, ...eventPayload } = payload
-                const { cobrowsing, uploads, entry } = serviceSettings
+                const { uploads, entry } = serviceSettings
 
-                dispatch({
-                  type: SET_FEATURE_ENABLED_STATE,
-                  key: featureKeys.cobrowsing,
-                  enabled: !!(cobrowsing && cobrowsing.enabled),
-                })
                 dispatch({
                   type: SET_FEATURE_ENABLED_STATE,
                   key: featureKeys.uploads,
                   enabled: !!(uploads && uploads.enabled),
                 })
 
-                setUserSelectedOption(featureKeys.cobrowsing, false)
-
                 dispatch({
                   type: SET_SERVICE_ENTRY_METADATA,
                   entryMeta: entry,

package/src/javascripts/ui/components/core/seamly-instance-functions-loader.js

@@ -86,14 +86,7 @@ const SeamlyInstanceFunctionsLoader = () => {
       }
 
       onActivityHandler()
-      if (
-        config.layoutMode === 'inline' &&
-        visibilityState === visibilityStates.minimized
-      ) {
-        console.warn('Inline chat windows cannot be minimized.')
-      } else {
-        setVisibility(visibilityState)
-      }
+      setVisibility(visibilityState)
     },
     [config?.api],
   )

package/src/javascripts/ui/components/entry/entry-container.js

@@ -15,8 +15,10 @@ import TextEntry from './text-entry'
 import UploadToggle from './upload-toggle'
 import Upload from './upload'
 import { useConfig } from '../../../domains/config'
+import { useVisibility } from '../../../domains/visibility'
 
 const EntryContainer = () => {
+  const { isOpen } = useVisibility()
   const entryContainer = useRef(null)
   const { hasCountdown } = useSeamlyIdleDetachCountdown()
   const [showCountdown, setShowCountDown] = useState(hasCountdown)
@@ -88,9 +90,9 @@ const EntryContainer = () => {
             : []),
         ])}
       >
-        {renderEntry !== entryTypes.upload && accountAllowsUploads && (
-          <UploadToggle />
-        )}
+        {renderEntry !== entryTypes.upload &&
+          accountAllowsUploads &&
+          isOpen && <UploadToggle />}
         <EntryComponent />
       </div>
     </div>

package/src/javascripts/ui/components/entry/text-entry/index.js

@@ -6,10 +6,12 @@ import {
 } from '../../../hooks/seamly-hooks'
 import { FormProvider } from '../../../../domains/forms'
 import TextEntryForm from './text-entry-form'
+import { useVisibility, visibilityStates } from '../../../../domains/visibility'
 
 const controlName = 'userText'
 
 export default function TextEntry({ ...props }) {
+  const { isOpen, setVisibility } = useVisibility()
   const skipLinkId = useSkiplink()
   const focusSkipLinkTarget = useSkiplinkTargetFocusing()
   const { sendMessage } = useSeamlyCommands()
@@ -18,8 +20,12 @@ export default function TextEntry({ ...props }) {
       sendMessage({ body: values[controlName] })
       updateControlValue(controlName, '')
       focusSkipLinkTarget()
+
+      if (!isOpen) {
+        setVisibility(visibilityStates.open)
+      }
     },
-    [sendMessage, focusSkipLinkTarget],
+    [sendMessage, focusSkipLinkTarget, isOpen, setVisibility],
   )
 
   return (

package/src/javascripts/ui/components/entry/text-entry/text-entry-form.js

@@ -65,7 +65,11 @@ export default function TextEntryForm({ controlName, skipLinkId }) {
   }, [setBlockAutoEntrySwitch, hasValue])
 
   return (
-    <Form className={className('input', 'input--text')} noValidate="true">
+    <Form
+      className={className('entry-form')}
+      disableValidationClasses
+      noValidate="true"
+    >
       <div
         className={className([
           'input--text__container',

package/src/javascripts/ui/components/entry/toggle-button.js

@@ -12,7 +12,8 @@ import {
 import { useInterrupt } from '../../../domains/interrupt'
 import { useVisibility } from '../../../domains/visibility'
 
-const ToggleButton = ({ onOpenChat }) => {
+// Deprecated Toggle Button, should be removed once it is removed from clients
+const DeprecatedToggleButton = ({ onOpenChat }) => {
   const { t } = useI18n()
   const titleId = useGeneratedId()
   const { isOpen } = useVisibility()
@@ -55,6 +56,7 @@ const ToggleButton = ({ onOpenChat }) => {
       focusIfContained(headerCollapseButtonId)
     }
   }
+
   return (
     <div className={className('toggle-button')}>
       <div id={titleId}>
@@ -81,4 +83,4 @@ const ToggleButton = ({ onOpenChat }) => {
   )
 }
 
-export default ToggleButton
+export default DeprecatedToggleButton

package/src/javascripts/ui/components/entry/upload/file-upload-form.js

@@ -19,7 +19,7 @@ export default function FileInputForm({
   const selectedFileName = hasFile ? fileList[0].name : ''
 
   return (
-    <Form className={className('input', 'input--file')}>
+    <Form className={className('upload-form')}>
       <FileInput
         name={controlName}
         id={skiplinkId}

package/src/javascripts/ui/components/form-controls/error.js

@@ -10,9 +10,13 @@ export default function Error({ id, error }) {
   }, [])
 
   return (
-    <div aria-live="assertive" aria-atomic="true">
+    <div
+      className={className('error')}
+      aria-live="assertive"
+      aria-atomic="true"
+    >
       {isAvailable && error && (
-        <span id={id} className={className('error')}>
+        <span id={id} className={className('error__message')}>
           <Icon name="error" size="16" />
           {error}
         </span>

package/src/javascripts/ui/components/form-controls/form.js

@@ -1,9 +1,32 @@
 import { useForm } from '../../../domains/forms'
+import { className } from '../../../lib/css'
 
-function Form({ ...props }) {
-  const { handleSubmit } = useForm()
+function Form({
+  className: givenClassName,
+  disableValidationClasses,
+  ...props
+}) {
+  const { handleSubmit, isValid, isSubmitted } = useForm()
 
-  return <form onSubmit={handleSubmit} {...props} />
+  const formClasses = ['form']
+
+  if (!disableValidationClasses && isSubmitted) {
+    formClasses.push('form--submitted')
+
+    if (isValid) {
+      formClasses.push('form--valid')
+    } else {
+      formClasses.push('form--invalid')
+    }
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={className([...formClasses, givenClassName])}
+      {...props}
+    />
+  )
 }
 
 export default Form

package/src/javascripts/ui/components/layout/app-frame.js

@@ -5,20 +5,24 @@ import {
   useSeamlyLayoutMode,
   useSeamlyContainerElement,
 } from '../../hooks/seamly-hooks'
-import Faq from '../faq/faq'
 import { useConfig } from '../../../domains/config'
 import { useUserHasResponded } from '../../../domains/app'
 import { useI18n } from '../../../domains/i18n'
 import { useVisibility, visibilityStates } from '../../../domains/visibility'
+import Suggestions from '../suggestions'
 
-const AppFrame = ({ children }) => {
+const AppFrame = ({
+  children,
+  className: givenClassName = '',
+  isDeprecated,
+}) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement()
   const { isOpen, isVisible, setVisibility } = useVisibility()
-  const { zIndex, showFaq } = useConfig()
-  const { isModal, isInline } = useSeamlyLayoutMode()
+  const { zIndex, namespace, layoutMode } = useConfig()
+  const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
   const userResponded = useUserHasResponded()
-  const { locale } = useI18n()
+  const { locale, t } = useI18n()
 
   const containerElementRef = useCallback(
     (container) => {
@@ -39,9 +43,20 @@ const AppFrame = ({ children }) => {
     return undefined
   }, [locale])
 
-  const classNames = ['app', ...appContainerClassNames]
+  const baseClassName = isDeprecated ? 'app--deprecated' : 'app'
+  const defaultClassNames = [
+    `app--layout-${layoutMode}`,
+    `namespace--${namespace}`,
+  ]
 
-  if (!isOpen) {
+  const classNames = [
+    baseClassName,
+    ...defaultClassNames,
+    ...appContainerClassNames,
+    givenClassName,
+  ]
+
+  if (!isOpen && layoutMode !== 'app') {
     classNames.push('app--collapsed')
   }
 
@@ -56,26 +71,20 @@ const AppFrame = ({ children }) => {
       }
   }
 
-  const onClickHandler = (e) => {
-    if (isModal) {
-      e.stopPropagation()
-    }
-  }
-
   return (
     isVisible && (
       <section
         className={className(classNames)}
         onKeyDown={onKeyDownHandler}
-        onClick={onClickHandler}
         lang={blockLang}
         tabIndex="-1"
         ref={containerElementRef}
         style={{ zIndex }}
         data-nosnippet
+        aria-label={t('app.srLabel')}
       >
         <div className={className('app-wrapper')}>{children}</div>
-        {showFaq && <Faq />}
+        {layoutMode === 'inline' && isOpen && <Suggestions isAside={true} />}
       </section>
     )
   )

package/src/javascripts/ui/components/layout/chat-frame.js

@@ -1,5 +1,4 @@
 import { className } from '../../../lib/css'
-import CobrowsingActiveFrame from '../warnings/cobrowsing-active-frame'
 import AppOptions from '../app-options'
 import { ChatStatus as TranslationsChatStatus } from '../../../domains/translations'
 import { useInterrupt } from '../../../domains/interrupt'
@@ -21,7 +20,6 @@ function ChatFrame({ children, interruptComponent: InterruptComponent }) {
 
   return (
     <>
-      <CobrowsingActiveFrame />
       <TranslationsChatStatus />
       <div className={className('app__container')}>{getContent()}</div>
       <AppOptions />

package/src/javascripts/ui/components/layout/modal-wrapper.js

@@ -1,80 +0,0 @@
-import { useEffect, useRef } from 'preact/hooks'
-import { createFocusTrap } from 'focus-trap'
-import InOutTransition, {
-  transitionStartStates,
-} from '../widgets/in-out-transition'
-import { useSeamlyLayoutMode } from '../../hooks/seamly-hooks'
-import { useI18n } from '../../../domains/i18n'
-import { className } from '../../../lib/css'
-import { createAriaHider } from '../../utils/general-utils'
-import { useVisibility, visibilityStates } from '../../../domains/visibility'
-
-const ModalWrapper = ({ children }) => {
-  const { t } = useI18n()
-  const { isModal } = useSeamlyLayoutMode()
-  const { isOpen, setVisibility } = useVisibility()
-  const container = useRef(null)
-  const focusTrap = useRef(null)
-
-  const onInTransitionCompleteHandler = () => {
-    focusTrap.current = createFocusTrap(container.current)
-    focusTrap.current.activate()
-  }
-
-  const onOutTransitionCompleteHandler = () => {
-    if (focusTrap.current) {
-      focusTrap.current.deactivate()
-      focusTrap.current = null
-    }
-  }
-
-  useEffect(() => {
-    if (!isModal) {
-      return null
-    }
-
-    let disposeAriaHider
-
-    if (isOpen) {
-      disposeAriaHider = createAriaHider()
-      // As the chat window is housed in a container we have to remove the
-      // aria-hidden the aria hider places on the container.
-      container.current.parentElement.removeAttribute('aria-hidden')
-    }
-
-    return () => {
-      if (disposeAriaHider) {
-        disposeAriaHider()
-        disposeAriaHider = null
-      }
-    }
-  }, [isOpen, isModal])
-
-  const onClickHandler = () => {
-    setVisibility(visibilityStates.minimized)
-  }
-
-  return isModal ? (
-    <InOutTransition
-      isActive={isOpen}
-      transitionStartState={transitionStartStates.rendered}
-      onInTransitionComplete={onInTransitionCompleteHandler}
-      onOutTransitionComplete={onOutTransitionCompleteHandler}
-    >
-      <div
-        className={className('modal-overlay')}
-        role="dialog"
-        aria-modal="true"
-        aria-label={t('window.srModalLayoutLabel')}
-        onClick={onClickHandler}
-        ref={container}
-      >
-        {children}
-      </div>
-    </InOutTransition>
-  ) : (
-    children
-  )
-}
-
-export default ModalWrapper