@seamly/web-ui 20.0.0-beta.2 → 20.0.0-beta.3

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

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useMemo } from 'preact/hooks'
+import { className } from '../../../lib/css'
+import Icon from '../layout/icon'
+import { actionTypes } from '../../utils/seamly-utils'
+import { runIfElementContainsOrHasFocus } from '../../utils/general-utils'
+import useSeamlyCommands from '../../hooks/use-seamly-commands'
+import {
+  useSeamlyServiceData,
+  useSeamlyLayoutMode,
+} from '../../hooks/seamly-state-hooks'
+import { useGeneratedId } from '../../hooks/utility-hooks'
+import { useSkiplinkTargetFocusing } from '../../hooks/focus-helper-hooks'
+import { useLiveRegion } from '../../hooks/live-region-hooks'
+import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-countdown'
+import useSeamlyResumeConversationPrompt from '../../hooks/use-seamly-resume-conversation-prompt'
+import { useI18n } from '../../../domains/i18n'
+import InOutTransition, {
+  transitionStartStates,
+} from '../widgets/in-out-transition'
+import { useTranslatedEventData } from '../../../domains/translations'
+import { useInterrupt } from '../../../domains/interrupt'
+import { useUserHasResponded } from '../../../domains/app'
+
+const Faq = () => {
+  const { t } = useI18n()
+  const { sendAction, addMessageBubble } = useSeamlyCommands()
+  const sectionId = useGeneratedId()
+  const focusSkiplinkTarget = useSkiplinkTargetFocusing()
+  const { sendPolite } = useLiveRegion()
+  const { hasInterrupt } = useInterrupt()
+  const { hasCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
+  const { hasPrompt, continueChat } = useSeamlyResumeConversationPrompt()
+
+  const lastFaqEventPayload = useSeamlyServiceData('suggestion')
+  const [eventBody] = useTranslatedEventData({ payload: lastFaqEventPayload })
+  const faqs = useMemo(() => {
+    const newFaqs = lastFaqEventPayload && !hasInterrupt ? eventBody : []
+    const itemBaseClass = `faqs__item`
+    return newFaqs.map(({ categories = [], ...faqRest }) => ({
+      ...faqRest,
+      categories,
+      classNames: [
+        itemBaseClass,
+        ...categories.map(
+          (cat) =>
+            `faqs__item--${String(cat)
+              .toLowerCase()
+              .replace(/[^a-z0-9_\\-]/, '')}`,
+        ),
+      ],
+    }))
+  }, [lastFaqEventPayload, hasInterrupt, eventBody])
+
+  const prevFaqs = useRef(null)
+  const prevHasFaqs = useRef(false)
+
+  const { isInline } = useSeamlyLayoutMode()
+  const hasResponded = useUserHasResponded()
+  const hideForWindow = !isInline && hasResponded
+  const prevHideForWindow = useRef(hideForWindow)
+
+  const hasFaqs = !!faqs.length
+  const showFaqContainer = hasFaqs && !hideForWindow
+  const previousRenderedFaqList = useRef([])
+  const renderedFaqList = hasFaqs ? faqs : previousRenderedFaqList.current
+  previousRenderedFaqList.current = renderedFaqList
+
+  const containerRef = useRef(null)
+
+  useEffect(() => {
+    if (prevFaqs.current !== faqs && !hideForWindow) {
+      if (hasFaqs) {
+        const politeText = prevHasFaqs.current
+          ? t('faq.srUpdatedText')
+          : t('faq.srAvailableText')
+        setTimeout(() => {
+          sendPolite(politeText)
+        }, 30)
+      } else if (prevHasFaqs.current) {
+        sendPolite(t('faq.srUnavailableText'))
+      }
+      prevFaqs.current = faqs
+    }
+
+    if (!prevHideForWindow.current && hideForWindow) {
+      runIfElementContainsOrHasFocus(containerRef.current, focusSkiplinkTarget)
+      sendPolite(t('faq.srUnavailableText'))
+    } else if (!hasFaqs && prevHasFaqs.current) {
+      runIfElementContainsOrHasFocus(containerRef.current, focusSkiplinkTarget)
+    }
+
+    prevHasFaqs.current = hasFaqs
+    prevHideForWindow.current = hideForWindow
+  }, [hasFaqs, faqs, hideForWindow, focusSkiplinkTarget, sendPolite, t])
+
+  const onFaqClickHandler = ({ id, question }) => {
+    if (hasCountdown) {
+      endCountdown(true)
+    }
+
+    if (hasPrompt) {
+      continueChat()
+    }
+
+    sendAction({
+      type: actionTypes.custom,
+      originMessage: lastFaqEventPayload.id,
+      body: {
+        type: 'faqclick',
+        body: {
+          faqId: id,
+          faqQuestion: question,
+        },
+      },
+    })
+
+    addMessageBubble(question)
+    focusSkiplinkTarget()
+  }
+
+  const headingText = t('faq.headingText')
+  const ContainerElement = headingText ? 'section' : 'div'
+
+  return (
+    <InOutTransition
+      isActive={showFaqContainer}
+      transitionStartState={transitionStartStates.notRendered}
+    >
+      <ContainerElement
+        className={className('faqs')}
+        aria-labelledby={headingText ? sectionId : null}
+        ref={containerRef}
+      >
+        {headingText && (
+          <h2 id={sectionId} className={className('faqs__heading')}>
+            {headingText}
+          </h2>
+        )}
+        {!!renderedFaqList.length && (
+          <ul className={className('faqs__list')}>
+            {renderedFaqList.map((faq) => (
+              <li key={faq.id.toString()} className={className(faq.classNames)}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    onFaqClickHandler(faq)
+                  }}
+                  className={className('button', 'button--secondary')}
+                >
+                  <Icon name="chevronRight" size="8" />
+                  {faq.question}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </ContainerElement>
+    </InOutTransition>
+  )
+}
+
+export default Faq

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

@@ -0,0 +1,86 @@
+import { useCallback, useMemo } from 'preact/hooks'
+import { className } from '../../../lib/css'
+import {
+  useSeamlyAppContainerClassNames,
+  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'
+
+const DeprecatedAppFrame = ({ children }) => {
+  const [, setSeamlyContainerElement] = useSeamlyContainerElement()
+  const { isOpen, isVisible, setVisibility } = useVisibility()
+  const { zIndex, showFaq, layoutMode } = useConfig()
+  const { isModal, isInline } = useSeamlyLayoutMode()
+  const appContainerClassNames = useSeamlyAppContainerClassNames()
+  const userResponded = useUserHasResponded()
+  const { locale } = useI18n()
+
+  const containerElementRef = useCallback(
+    (container) => {
+      setSeamlyContainerElement(container)
+    },
+    [setSeamlyContainerElement],
+  )
+
+  const blockLang = useMemo(() => {
+    if (locale) {
+      const htmlElementLang = document
+        .querySelector('html')
+        .getAttribute('lang')
+      if (htmlElementLang !== locale) {
+        return locale
+      }
+    }
+    return undefined
+  }, [locale])
+
+  const classNames = ['app', 'app--deprecated', ...appContainerClassNames]
+
+  if (!isOpen && layoutMode === 'window') {
+    classNames.push('app--collapsed')
+  }
+
+  if (userResponded) {
+    classNames.push('app--user-responded')
+  }
+
+  classNames.push(`app--layout-${layoutMode}`)
+
+  const onKeyDownHandler = (e) => {
+    if ((e.code && e.code === 'Escape') || e.keyCode === 27)
+      if (!isInline && isOpen) {
+        setVisibility(visibilityStates.minimized)
+      }
+  }
+
+  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
+      >
+        <div className={className('app-wrapper')}>{children}</div>
+        {showFaq && <Faq />}
+      </section>
+    )
+  )
+}
+
+export default DeprecatedAppFrame

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

@@ -1,4 +1,4 @@
-import AppFrame from '../layout/app-frame'
+import DeprecatedAppFrame from '../layout/deprecated-app-frame'
 import ChatFrame from '../layout/chat-frame'
 import AgentInfo from '../layout/agent-info'
 import Header from '../layout/header'
@@ -7,14 +7,16 @@ import EntryContainer from '../entry/entry-container'
 import Interrupt from '../layout/interrupt'
 import { useSeamlyChat } from '../../hooks/seamly-hooks'
 import { useVisibility } from '../../../domains/visibility'
+import DeprecatedToggleButton from '../entry/toggle-button'
 
 const DeprecatedView = () => {
   const { isVisible } = useVisibility()
-  const { closeChat } = useSeamlyChat()
+  const { closeChat, openChat } = useSeamlyChat()
 
   return (
     isVisible && (
-      <AppFrame isDeprecated={true}>
+      <DeprecatedAppFrame>
+        <DeprecatedToggleButton onOpenChat={openChat} />
         <Header onCloseChat={closeChat}>
           <AgentInfo />
         </Header>
@@ -22,7 +24,7 @@ const DeprecatedView = () => {
           <Conversation />
           <EntryContainer />
         </ChatFrame>
-      </AppFrame>
+      </DeprecatedAppFrame>
     )
   )
 }

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

@@ -3,17 +3,15 @@
 
 // BASE
 // ----
-.#{$n}-error__message {
-  display: flex;
-  align-items: flex-start;
+.#{$n}-error {
+  display: block;
   width: 100%;
-  margin: 0 0 $spacer * 0.5;
-  padding: $spacer * 0.25 $spacer * 0.5;
-  border-radius: $borderradius-small;
-  background-color: rgba($negative, 0.1);
-  color: $negative-dark;
-  font-size: $fontsize-small;
-  font-weight: $fontweight-bold;
+  margin: 0 0 $spacer * 0.25;
+
+  &:empty {
+    display: none;
+    margin: 0;
+  }
 
   .#{$n}-icon {
     flex: 0 0 16px;
@@ -21,4 +19,16 @@
     height: 16px;
     margin-right: $spacer * 0.25;
   }
+
+  .#{$n}-error__message {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    padding: $spacer * 0.25 $spacer * 0.5;
+    border-radius: $borderradius-small;
+    background-color: rgba($negative, 0.1);
+    color: $negative-dark;
+    font-size: $fontsize-small;
+    font-weight: $fontweight-bold;
+  }
 }

package/src/stylesheets/7-deprecated/5-components/_error.scss

@@ -4,16 +4,14 @@
 // BASE
 // ----
 .#{$n}-error {
-  display: flex;
-  align-items: flex-start;
+  display: block;
   width: 100%;
-  margin: 0 0 $spacer * 0.5;
-  padding: $spacer * 0.25 $spacer * 0.5;
-  border-radius: $borderradius-small;
-  background-color: rgba($negative, 0.1);
-  color: $negative-dark;
-  font-size: $fontsize-small;
-  font-weight: $fontweight-bold;
+  margin: 0 0 $spacer * 0.25;
+
+  &:empty {
+    display: none;
+    margin: 0;
+  }
 
   .#{$n}-icon {
     flex: 0 0 16px;
@@ -21,4 +19,16 @@
     height: 16px;
     margin-right: $spacer * 0.25;
   }
+
+  .#{$n}-error__message {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    padding: $spacer * 0.25 $spacer * 0.5;
+    border-radius: $borderradius-small;
+    background-color: rgba($negative, 0.1);
+    color: $negative-dark;
+    font-size: $fontsize-small;
+    font-weight: $fontweight-bold;
+  }
 }

package/src/stylesheets/7-deprecated/5-components/_input.scss

@@ -3,7 +3,7 @@
 
 // BASE
 // ----
-.#{$n}-input {
+.#{$n}-entry-form {
   display: flex;
   flex: 1 1 100%;
   width: 100%;

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

@@ -191,8 +191,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
 }
 
 .#{$n}-options__body form {

package/webpack/config.common.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
 const path = require('path')
+const webpack = require('webpack')
 const webpackMerge = require('webpack-merge').merge
 const site = require('@seamly/doc-site/lib/config/site')
 const BundleAnalyzerPlugin =
@@ -28,7 +29,12 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
 
   const PRODUCTION = [argv.mode, process.env.NODE_ENV].includes('production')
 
-  const plugins = []
+  const plugins = [
+    new webpack.DefinePlugin({
+      'process.env.API_DOMAIN': JSON.stringify(process.env.API_DOMAIN),
+    }),
+  ]
+
   if (env.analyze) {
     plugins.push(new BundleAnalyzerPlugin())
   }

package/webpack/config.test.js

@@ -26,6 +26,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}, options = {}) => {
     entry: {
       // Demo and test files
       'tests/index': path.join(PUBLIC_ROOT, '/tests/index.js'),
+      'tests/deprecated': path.join(PUBLIC_ROOT, '/tests/deprecated.js'),
       'tests/style-guide': path.join(PUBLIC_ROOT, '/tests/style-guide.js'),
       'tests/init-with-callback/index': path.join(
         PUBLIC_ROOT,