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

package/src/javascripts/ui/components/layout/pre-chat-messages.js

@@ -0,0 +1,45 @@
+import { className } from '../../../lib/css'
+import { useInterrupt } from '../../../domains/interrupt'
+import { useConfig } from '../../../domains/config'
+import useEventComponentMapping from '../../hooks/use-event-component-mapping'
+import { useVisibility } from '../../../domains/visibility'
+import InOutTransition, {
+  transitionStartStates,
+} from '../widgets/in-out-transition'
+
+export default function PreChatMessages() {
+  const { preChatEvents, layoutMode } = useConfig()
+  const { hasInterrupt } = useInterrupt()
+  const { isOpen } = useVisibility()
+
+  const isVisible = !(hasInterrupt || !preChatEvents.length || isOpen)
+
+  return (
+    <InOutTransition
+      isActive={isVisible}
+      transitionStartState={transitionStartStates.notRendered}
+    >
+      <ul
+        className={className(
+          'pre-chat-messages',
+          `pre-chat-messages--${layoutMode}`,
+        )}
+        aria-hidden={!isVisible}
+      >
+        {preChatEvents.map((event) => (
+          <li
+            className={className('pre-chat-messages__message')}
+            key={event.payload.id}
+          >
+            <PreChatMessageEvent event={event} />
+          </li>
+        ))}
+      </ul>
+    </InOutTransition>
+  )
+}
+
+export function PreChatMessageEvent({ event }) {
+  const [Component] = useEventComponentMapping(event)
+  return <Component event={event} />
+}

package/src/javascripts/ui/components/options/options-frame.js

@@ -9,6 +9,7 @@ import { className } from '../../../lib/css'
 import { focusElement } from '../../utils/general-utils'
 
 const OptionsFrame = ({
+  className: givenClassName,
   children,
   onCancel,
   headingText,
@@ -44,10 +45,14 @@ const OptionsFrame = ({
 
   return (
     <section
-      className={className('options', {
-        'options--right': position !== 'left',
-        'options--left': position === 'left',
-      })}
+      className={className(
+        'options',
+        {
+          'options--right': position !== 'left',
+          'options--left': position === 'left',
+        },
+        givenClassName,
+      )}
       aria-labelledby={mainHeadingId}
       tabIndex="-1"
       ref={container}

package/src/javascripts/ui/components/options/options.js

@@ -1,10 +1,8 @@
 import { useRef } from 'preact/hooks'
-import Cobrowsing from './cobrowsing'
 import Transcript from './transcript'
 import { useSeamlyOptions } from '../../hooks/seamly-hooks'
 
 const mapper = {
-  cobrowsing: Cobrowsing,
   sendTranscript: Transcript,
 }
 
@@ -18,8 +16,7 @@ const Options = () => {
   if (optionActive) {
     prevRenderOption.current = optionActive
   }
-
-  return <RenderOption />
+  return RenderOption ? <RenderOption /> : null
 }
 
 export default Options

package/src/javascripts/ui/components/options/transcript/index.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'preact/hooks'
+import { useCallback, useMemo, useState } from 'preact/hooks'
 import { useI18n } from '../../../../domains/i18n'
 import OptionsFrame from '../options-frame'
 import { className } from '../../../../lib/css'
@@ -18,6 +18,7 @@ const formId = 'sendTranscript'
 const controlName = 'email'
 
 const Transcript = () => {
+  const [errorClass, setErrorClass] = useState(undefined)
   const { hideOption } = useSeamlyOptions()
   const { focusButton } = useOptionButton()
   const { t } = useI18n()
@@ -50,8 +51,20 @@ const Transcript = () => {
     [sendAction, hideOption, focusButton],
   )
 
+  const handleError = useCallback(
+    ({ isValid, isSubmitted }) => {
+      if (isSubmitted && !isValid) {
+        setErrorClass('options--error')
+      } else {
+        setErrorClass(undefined)
+      }
+    },
+    [setErrorClass],
+  )
+
   return (
     <OptionsFrame
+      className={errorClass}
       headingText={t('options.sendTranscript.title')}
       cancelButtonText={t('options.cancelButtonText')}
     >
@@ -65,6 +78,7 @@ const Transcript = () => {
         formId={formId}
         onSubmit={handleSubmit}
         validationSchema={validationSchema}
+        onError={handleError}
       >
         <TranscriptForm
           controlName={controlName}

package/src/javascripts/ui/components/options/transcript/transcript-form.js

@@ -6,7 +6,7 @@ import Input from '../../form-controls/input'
 export default function TranscriptForm({ controlName, describedById }) {
   const { t } = useI18n()
   return (
-    <Form noValidate="true">
+    <Form noValidate="true" className={className('options__form')}>
       <Input
         name={controlName}
         type="email"

package/src/javascripts/ui/components/suggestions/index.js

@@ -0,0 +1,174 @@
+import { useEffect, useRef, useCallback, useMemo } from 'preact/hooks'
+import { className } from '../../../lib/css'
+import { useI18n } from '../../../domains/i18n'
+import { useSeamlyServiceData } from '../../hooks/seamly-state-hooks'
+import { useTranslatedEventData } from '../../../domains/translations'
+import { useInterrupt } from '../../../domains/interrupt'
+import { useGeneratedId } from '../../hooks/utility-hooks'
+import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-countdown'
+import useSeamlyResumeConversationPrompt from '../../hooks/use-seamly-resume-conversation-prompt'
+import useSeamlyCommands from '../../hooks/use-seamly-commands'
+import { useSkiplinkTargetFocusing } from '../../hooks/focus-helper-hooks'
+import { actionTypes } from '../../utils/seamly-utils'
+import { useUserHasResponded } from '../../../domains/app'
+import { useVisibility, visibilityStates } from '../../../domains/visibility'
+import InOutTransition, {
+  transitionStartStates,
+} from '../widgets/in-out-transition'
+import { useLiveRegion } from '../../hooks/live-region-hooks'
+import { runIfElementContainsOrHasFocus } from '../../utils/general-utils'
+import SuggestionsList from './suggestions-list'
+import { useConfig } from '../../../domains/config'
+
+const Suggestions = ({ isAside }) => {
+  // generic hooks
+  const { layoutMode } = useConfig()
+  const { t } = useI18n()
+  const { sendAction, addMessageBubble } = useSeamlyCommands()
+  const { isOpen, setVisibility } = useVisibility()
+  // a11y hooks
+  const sectionId = useGeneratedId()
+  const focusSkiplinkTarget = useSkiplinkTargetFocusing()
+  const containerRef = useRef(null)
+  const { sendPolite } = useLiveRegion()
+  // interrupt & countdown hooks
+  const { hasInterrupt } = useInterrupt()
+  const { hasCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
+  const { hasPrompt, continueChat } = useSeamlyResumeConversationPrompt()
+  // data hooks
+  const hasResponded = useUserHasResponded()
+  const payload = useSeamlyServiceData('suggestion')
+  const [eventBody] = useTranslatedEventData({ payload })
+  const suggestions = useMemo(
+    () => (payload && !hasInterrupt ? eventBody : []),
+    [payload, hasInterrupt, eventBody],
+  )
+
+  const prevSuggestions = useRef(null)
+  const prevHasSuggestions = useRef(false)
+
+  const previousRenderedSuggestions = useRef([])
+  const hasSuggestions = !!suggestions.length
+  const hideSuggestions =
+    layoutMode === 'inline'
+      ? (hasResponded || isOpen) && !isAside
+      : hasResponded
+  const prevHideSuggestions = useRef(hideSuggestions)
+  const showSuggestionsContainer = hasSuggestions && !hideSuggestions
+  const renderedSuggestions = hasSuggestions
+    ? suggestions
+    : previousRenderedSuggestions.current
+  previousRenderedSuggestions.current = renderedSuggestions
+
+  // click handler
+  const handleClick = useCallback(
+    ({ id, question }) => {
+      if (hasCountdown) {
+        endCountdown(true)
+      }
+
+      if (hasPrompt) {
+        continueChat()
+      }
+
+      // @todo Refactor to 'suggestionclick'
+      sendAction({
+        type: actionTypes.custom,
+        originMessage: payload.id,
+        body: {
+          type: 'faqclick',
+          body: {
+            faqId: id,
+            faqQuestion: question,
+          },
+        },
+      })
+
+      addMessageBubble(question)
+      if (!isOpen) {
+        setVisibility(visibilityStates.open)
+      }
+      focusSkiplinkTarget()
+    },
+    [
+      addMessageBubble,
+      continueChat,
+      endCountdown,
+      focusSkiplinkTarget,
+      hasCountdown,
+      hasPrompt,
+      payload,
+      sendAction,
+      setVisibility,
+      isOpen,
+    ],
+  )
+
+  useEffect(() => {
+    if (prevSuggestions.current !== suggestions && !hideSuggestions) {
+      if (hasSuggestions) {
+        const politeText = prevHasSuggestions.current
+          ? t('suggestions.srUpdatedText')
+          : t('suggestions.srAvailableText')
+        setTimeout(() => {
+          sendPolite(politeText)
+        }, 30)
+      } else if (prevHasSuggestions.current) {
+        sendPolite(t('suggestions.srUnavailableText'))
+      }
+
+      prevSuggestions.current = suggestions
+    }
+
+    if (!prevHideSuggestions.current && hideSuggestions) {
+      runIfElementContainsOrHasFocus(containerRef.current, focusSkiplinkTarget)
+      sendPolite(t('suggestions.srUnavailableText'))
+    } else if (!hasSuggestions && prevHasSuggestions.current) {
+      runIfElementContainsOrHasFocus(containerRef.current, focusSkiplinkTarget)
+    }
+    prevHasSuggestions.current = hasSuggestions
+    prevHideSuggestions.current = hideSuggestions
+  }, [
+    suggestions,
+    hasSuggestions,
+    hideSuggestions,
+    focusSkiplinkTarget,
+    sendPolite,
+    t,
+  ])
+
+  const headingText = t('suggestions.headingText')
+  const footerText = t('suggestions.footerText')
+  const ContainerElement = headingText ? 'section' : 'div'
+
+  return (
+    <InOutTransition
+      isActive={showSuggestionsContainer}
+      transitionStartState={transitionStartStates.notRendered}
+    >
+      <ContainerElement
+        className={className('suggestions')}
+        aria-labelledby={headingText ? sectionId : null}
+        ref={containerRef}
+      >
+        {headingText && (
+          <h2 id={sectionId} className={className('suggestions__heading')}>
+            {headingText}
+          </h2>
+        )}
+        {!!renderedSuggestions.length && (
+          <SuggestionsList
+            hasIcon={true}
+            suggestions={renderedSuggestions}
+            onClickSuggestion={handleClick}
+          />
+        )}
+        {footerText && !isOpen && (
+          <p className={className('suggestions__footer')}>{footerText}</p>
+        )}
+      </ContainerElement>
+    </InOutTransition>
+  )
+}
+
+export default Suggestions

package/src/javascripts/ui/components/suggestions/suggestions-item.js

@@ -0,0 +1,40 @@
+import { useMemo, useCallback } from 'preact/hooks'
+import { className } from '../../../lib/css'
+import Icon from '../layout/icon'
+
+export const mapCategoryToClass = (category) =>
+  `suggestions__item--${String(category)
+    .toLowerCase()
+    .replace(/[^a-z0-9_\\-]/, '')}`
+
+const SuggestionsItem = ({
+  id,
+  categories = [],
+  question,
+  onClick,
+  hasIcon,
+}) => {
+  const mappedClassNames = useMemo(() => {
+    return ['suggestions-item', ...categories.map(mapCategoryToClass)]
+  }, [categories])
+
+  const handleClick = useCallback(() => {
+    if (onClick) {
+      onClick({ id, question })
+    }
+  }, [id, question, onClick])
+  return (
+    <li className={className(mappedClassNames)}>
+      <button
+        type="button"
+        onClick={handleClick}
+        className={className('button', 'button--primary')}
+      >
+        {hasIcon && <Icon name="chevronRight" size="8" />}
+        {question}
+      </button>
+    </li>
+  )
+}
+
+export default SuggestionsItem

package/src/javascripts/ui/components/suggestions/suggestions-list.js

@@ -0,0 +1,24 @@
+import { className } from '../../../lib/css'
+import SuggestionsItem from './suggestions-item'
+
+const SuggestionsList = ({
+  className: givenClassName,
+  suggestions = [],
+  onClickSuggestion,
+  hasIcon,
+}) => {
+  return (
+    <ul className={className('suggestions__list', givenClassName)}>
+      {suggestions.map((suggestion) => (
+        <SuggestionsItem
+          hasIcon={hasIcon}
+          key={suggestion.id}
+          onClick={onClickSuggestion}
+          {...suggestion}
+        />
+      ))}
+    </ul>
+  )
+}
+
+export default SuggestionsList

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

@@ -0,0 +1,21 @@
+import AppFrame from '../layout/app-frame'
+import Interrupt from '../layout/interrupt'
+import Conversation from '../conversation/conversation'
+import EntryContainer from '../entry/entry-container'
+import ChatFrame from '../layout/chat-frame'
+import useSeamlyChat from '../../hooks/use-seamly-chat'
+
+const AppView = () => {
+  useSeamlyChat()
+
+  return (
+    <AppFrame>
+      <ChatFrame interruptComponent={Interrupt}>
+        <Conversation />
+        <EntryContainer />
+      </ChatFrame>
+    </AppFrame>
+  )
+}
+
+export default AppView

package/src/javascripts/ui/components/view/deprecated-view.js

@@ -0,0 +1,30 @@
+import AppFrame from '../layout/app-frame'
+import ChatFrame from '../layout/chat-frame'
+import AgentInfo from '../layout/agent-info'
+import Header from '../layout/header'
+import Conversation from '../conversation/conversation'
+import EntryContainer from '../entry/entry-container'
+import Interrupt from '../layout/interrupt'
+import { useSeamlyChat } from '../../hooks/seamly-hooks'
+import { useVisibility } from '../../../domains/visibility'
+
+const DeprecatedView = () => {
+  const { isVisible } = useVisibility()
+  const { closeChat } = useSeamlyChat()
+
+  return (
+    isVisible && (
+      <AppFrame isDeprecated={true}>
+        <Header onCloseChat={closeChat}>
+          <AgentInfo />
+        </Header>
+        <ChatFrame interruptComponent={Interrupt}>
+          <Conversation />
+          <EntryContainer />
+        </ChatFrame>
+      </AppFrame>
+    )
+  )
+}
+
+export default DeprecatedView

package/src/javascripts/ui/components/view/index.js

@@ -0,0 +1,27 @@
+import { useConfig } from '../../../domains/config'
+import AppView from './app-view'
+import InlineView from './inline-view'
+import WindowView from './window-view'
+import { useSeamlyStateContext } from '../../hooks/seamly-state-hooks'
+import { visibilityStates } from '../../../domains/visibility'
+
+const ViewComponentsMap = {
+  app: AppView,
+  inline: InlineView,
+  window: WindowView,
+}
+
+const View = () => {
+  const { layoutMode } = useConfig()
+  const { visible } = useSeamlyStateContext()
+  const ViewComponent = ViewComponentsMap[layoutMode]
+
+  if (!ViewComponent) {
+    console.warn('"layoutMode" should be one of "app", "inline" or "window"')
+    return null
+  }
+
+  return visible !== visibilityStates.hidden && <ViewComponent />
+}
+
+export default View

package/src/javascripts/ui/components/view/inline-view.js

@@ -0,0 +1,45 @@
+import { className } from '../../../lib/css'
+import AppFrame from '../layout/app-frame'
+import Interrupt from '../layout/interrupt'
+import Conversation from '../conversation/conversation'
+import EntryContainer from '../entry/entry-container'
+import ChatFrame from '../layout/chat-frame'
+import useSeamlyChat from '../../hooks/use-seamly-chat'
+import { useVisibility } from '../../../domains/visibility'
+import PreChatMessages from '../layout/pre-chat-messages'
+import Suggestions from '../suggestions'
+import InOutTransition, {
+  transitionStartStates,
+} from '../widgets/in-out-transition'
+
+const InlineView = () => {
+  useSeamlyChat()
+  const { isOpen } = useVisibility()
+
+  return (
+    <>
+      <InOutTransition
+        isActive={!isOpen}
+        transitionStartState={transitionStartStates.rendered}
+      >
+        <div className={className('unstarted-wrapper')}>
+          <PreChatMessages />
+          <Suggestions />
+        </div>
+      </InOutTransition>
+      <InOutTransition
+        isActive={isOpen}
+        transitionStartState={transitionStartStates.rendered}
+      >
+        <AppFrame>
+          <ChatFrame interruptComponent={Interrupt}>
+            {isOpen && <Conversation />}
+            <EntryContainer />
+          </ChatFrame>
+        </AppFrame>
+      </InOutTransition>
+    </>
+  )
+}
+
+export default InlineView

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

@@ -0,0 +1,20 @@
+import { useCallback } from 'preact/hooks'
+import { className } from '../../../../lib/css'
+import Icon from '../../layout/icon'
+import { useI18n } from '../../../../domains/i18n'
+
+const CollapseButton = ({ onClick }) => {
+  const { t } = useI18n()
+  const handleClick = useCallback(() => onClick(), [onClick])
+  return (
+    <button
+      type="button"
+      className={className('button', 'collapse-button')}
+      onClick={handleClick}
+    >
+      <Icon name="chevronDown" size="32" alt={t('window.srCollapseButton')} />
+    </button>
+  )
+}
+
+export default CollapseButton

package/src/javascripts/ui/components/view/window-view/index.js

@@ -0,0 +1,82 @@
+import { useMemo } from 'preact/hooks'
+import { useSeamlyChat } from '../../../hooks/seamly-hooks'
+import { useVisibility } from '../../../../domains/visibility'
+import AppFrame from '../../layout/app-frame'
+import ChatFrame from '../../layout/chat-frame'
+import Interrupt from '../../layout/interrupt'
+import Conversation from '../../conversation/conversation'
+import EntryContainer from '../../entry/entry-container'
+import WindowOpenButton from './window-open-button'
+import CollapseButton from './collapse-button'
+import InOutTransition, {
+  transitionStartStates,
+} from '../../widgets/in-out-transition'
+import PreChatMessages from '../../layout/pre-chat-messages'
+import { useUserHasResponded } from '../../../../domains/app'
+import { className } from '../../../../lib/css'
+import Splash from '../../conversation/event/splash'
+import { useI18n } from '../../../../domains/i18n'
+
+const WindowView = () => {
+  const { openChat, closeChat } = useSeamlyChat()
+  const { isOpen } = useVisibility()
+  const hasResponded = useUserHasResponded()
+  const { t } = useI18n()
+  const continueChatText = t('window.chat.continue')
+  const continueChatEvent = useMemo(
+    () => ({
+      payload: {
+        body: {
+          text: continueChatText,
+        },
+      },
+    }),
+    [continueChatText],
+  )
+  return (
+    <>
+      <WindowOpenButton onClick={openChat} />
+      <InOutTransition
+        isActive={!isOpen && !hasResponded}
+        transitionStartState={transitionStartStates.rendered}
+      >
+        <div
+          className={className(
+            'unstarted-wrapper',
+            'unstarted-wrapper--window',
+          )}
+        >
+          <PreChatMessages />
+        </div>
+      </InOutTransition>
+      <InOutTransition
+        isActive={!isOpen && hasResponded}
+        transitionStartState={transitionStartStates.notRendered}
+      >
+        <div
+          className={className(
+            'unstarted-wrapper',
+            'unstarted-wrapper--window',
+            'unstarted-wrapper--continue',
+          )}
+        >
+          <Splash event={continueChatEvent} />
+        </div>
+      </InOutTransition>
+      <InOutTransition
+        isActive={isOpen}
+        transitionStartState={transitionStartStates.notRendered}
+      >
+        <AppFrame>
+          {isOpen && <CollapseButton onClick={closeChat} />}
+          <ChatFrame interruptComponent={Interrupt}>
+            <Conversation />
+            <EntryContainer />
+          </ChatFrame>
+        </AppFrame>
+      </InOutTransition>
+    </>
+  )
+}
+
+export default WindowView

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

@@ -0,0 +1,68 @@
+import { useCallback } from 'preact/hooks'
+import { className } from '../../../../lib/css'
+import {
+  useSeamlyCurrentAgent,
+  useSeamlyUnreadCount,
+  useSkiplinkTargetFocusing,
+} from '../../../hooks/seamly-hooks'
+import { useI18n } from '../../../../domains/i18n'
+import { useConfig } from '../../../../domains/config'
+import { useVisibility } from '../../../../domains/visibility'
+import Icon from '../../layout/icon'
+import { useInterrupt } from '../../../../domains/interrupt'
+import InOutTransition, {
+  transitionStartStates,
+} from '../../widgets/in-out-transition'
+import { useSeamlyHasConversation } from '../../../hooks/seamly-api-hooks'
+
+const ButtonIcon = () => {
+  const currentAgent = useSeamlyCurrentAgent()
+  const { hasInterrupt } = useInterrupt()
+  const { defaults } = useConfig()
+  const startChatIcon = defaults?.startChatIcon
+  const avatar = currentAgent && !hasInterrupt ? currentAgent.avatar : undefined
+  return avatar || startChatIcon ? (
+    <img
+      className={className(avatar ? 'avatar' : 'icon')}
+      src={avatar || startChatIcon}
+      alt=""
+    />
+  ) : (
+    <Icon name="avatar" size="32" />
+  )
+}
+
+const WindowOpenButton = ({ onClick }) => {
+  const hasConversation = useSeamlyHasConversation()
+  const { t } = useI18n()
+  const ariaLabel = hasConversation
+    ? t('window.openButton.srContinue')
+    : t('window.openButton.srStart')
+  const focusSkiplinkTarget = useSkiplinkTargetFocusing()
+  const { isOpen } = useVisibility()
+  const count = useSeamlyUnreadCount()
+  const handleClick = useCallback(() => {
+    onClick()
+    focusSkiplinkTarget()
+  }, [focusSkiplinkTarget, onClick])
+  return (
+    <InOutTransition
+      isActive={!isOpen}
+      transitionStartState={transitionStartStates.rendered}
+    >
+      <button
+        className={className('window-open-button')}
+        aria-label={ariaLabel}
+        aria-hidden={isOpen}
+        onClick={handleClick}
+      >
+        <span className={className('message-count')} aria-hidden="true">
+          {!!count && count}
+        </span>
+        <ButtonIcon />
+      </button>
+    </InOutTransition>
+  )
+}
+
+export default WindowOpenButton