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

package/src/stylesheets/deprecated-view.scss

@@ -0,0 +1,64 @@
+// ##### STYLES #####
+// ==================
+// LIBRARIES
+// ---------
+@import 'include-media/dist/include-media';
+
+// SETTINGS
+// --------
+@import '7-deprecated/1-settings/config';
+@import '7-deprecated/1-settings/animations';
+
+// TOOLS
+// -----
+@import '7-deprecated/2-tools/functions';
+@import '7-deprecated/2-tools/mixins';
+
+// APP
+// ---
+@import '7-deprecated/3-app/app';
+
+// SCOPED WITHIN APP
+// -----------------
+.#{$n}-app--deprecated {
+  // BASE
+  @import '7-deprecated/4-base/elements';
+  @import '7-deprecated/4-base/formelements';
+
+  // COMPONENTS
+  @import '7-deprecated/5-components/header-controls';
+  @import '7-deprecated/5-components/agent-info';
+  @import '7-deprecated/5-components/avatar';
+  @import '7-deprecated/5-components/buttons';
+  @import '7-deprecated/5-components/choice-prompt';
+  @import '7-deprecated/5-components/conversation';
+  @import '7-deprecated/5-components/divider';
+  @import '7-deprecated/5-components/loader';
+  @import '7-deprecated/5-components/message';
+  @import '7-deprecated/5-components/message-count';
+  @import '7-deprecated/5-components/icon';
+  @import '7-deprecated/5-components/input';
+  @import '7-deprecated/5-components/faq';
+  @import '7-deprecated/5-components/interrupt';
+  @import '7-deprecated/5-components/skip-link';
+  @import '7-deprecated/5-components/svg-graphic';
+  @import '7-deprecated/5-components/disclaimer';
+  @import '7-deprecated/5-components/idle';
+  @import '7-deprecated/5-components/prompt';
+  @import '7-deprecated/5-components/options';
+  @import '7-deprecated/5-components/chat-status';
+  @import '7-deprecated/5-components/upload';
+  @import '7-deprecated/5-components/error';
+  @import '7-deprecated/5-components/notification';
+  @import '7-deprecated/5-components/character-limit';
+  @import '7-deprecated/5-components/card';
+  @import '7-deprecated/5-components/carousel';
+  @import '7-deprecated/5-components/collapse-button';
+}
+
+.#{$n}-app--deprecated,
+.#{$n}-app__live-container {
+  @import '7-deprecated/4-base/a11y';
+}
+
+@import '7-deprecated/5-components/modal';

package/src/stylesheets/styles-webui-only.scss

@@ -0,0 +1,3 @@
+@import '1-settings/config';
+@import '6-webui-only/hover';
+@import '6-webui-only/scrollbar';

package/src/stylesheets/styles.scss

@@ -1,59 +1,44 @@
-// ##### STYLES #####
-// ==================
-// LIBRARIES
-// ---------
 @import 'include-media/dist/include-media';
 
-// SETTINGS
-// --------
 @import '1-settings/config';
 @import '1-settings/animations';
 
-// TOOLS
-// -----
 @import '2-tools/functions';
 @import '2-tools/mixins';
 
-// APP
-// ---
 @import '3-app/app';
+@import '5-components/buttons';
 
-// SCOPED WITHIN APP
-// -----------------
 .#{$n}-app {
-  // BASE
   @import '4-base/elements';
   @import '4-base/formelements';
-
-  // COMPONENTS
-  @import '5-components/agent-info';
   @import '5-components/avatar';
-  @import '5-components/buttons';
   @import '5-components/choice-prompt';
   @import '5-components/conversation';
   @import '5-components/divider';
-  @import '5-components/header-controls';
   @import '5-components/loader';
   @import '5-components/message';
-  @import '5-components/message-count';
+  @import '5-components/message-author';
+  @import '5-components/message-info';
+  @import '5-components/message-translation-info';
+  @import '5-components/message-card';
+  @import '5-components/message-carousel';
+  @import '5-components/message-cta';
   @import '5-components/icon';
+  @import '5-components/form';
   @import '5-components/input';
-  @import '5-components/faq';
   @import '5-components/interrupt';
   @import '5-components/skip-link';
-  @import '5-components/svg-graphic';
   @import '5-components/disclaimer';
   @import '5-components/idle';
   @import '5-components/prompt';
   @import '5-components/options';
-  @import '5-components/cobrowsing'; // @todo: deprecate
   @import '5-components/chat-status';
   @import '5-components/upload';
   @import '5-components/error';
   @import '5-components/notification';
   @import '5-components/character-limit';
-  @import '5-components/card';
-  @import '5-components/carousel';
+  @import '5-components/collapse-button';
 }
 
 .#{$n}-app,
@@ -61,5 +46,10 @@
   @import '4-base/a11y';
 }
 
+@import '5-components/message-body';
+@import '5-components/message-count';
+@import '5-components/suggestions';
 @import '5-components/modal';
-@import '5-components/modal_mode';
+@import '5-components/window-open-button';
+@import '5-components/pre-chat-messages';
+@import '5-components/unstarted';

package/webpack/config.site.js

@@ -40,6 +40,10 @@ module.exports = (env = {}, argv = {}, configOverrides = {}, options = {}) => {
       'demos/window/index': path.join(PUBLIC_ROOT, '/demos/window/index.js'),
       'demos/app/index': path.join(PUBLIC_ROOT, '/demos/app/index.js'),
       'style-guide/index': path.join(PUBLIC_ROOT, '/style-guide/index.js'),
+      'style-guide/deprecated-view': path.join(
+        PUBLIC_ROOT,
+        '/style-guide/deprecated-view.js',
+      ),
     },
     module: {
       rules: [

package/webpack/defaults.js

@@ -47,6 +47,11 @@ const ALIASSES = {
     'stylesheets',
     'styles.scss',
   ),
+  '@seamly/web-ui/src/stylesheets/styles-webui-only.scss': path.resolve(
+    SRC_ROOT,
+    'stylesheets',
+    'styles-webui-only.scss',
+  ),
   '@seamly/web-ui/src/stylesheets/style-guide.scss': path.resolve(
     SRC_ROOT,
     'stylesheets',

package/src/javascripts/ui/components/conversation/event/hooks/use-text-rendering.js

@@ -1,35 +0,0 @@
-import Mustache from 'mustache'
-
-Mustache.escape = function (escapeText) {
-  return escapeText
-}
-
-const parseLinkVariable = (variable) => {
-  return `<a href='${variable.url}' data-link-id='${variable.id}' ${
-    variable.newTab ? 'target="_blank"' : ''
-  }>${variable.name}</a>`
-}
-
-export function parseRichText(text, variables = {}) {
-  const view = {}
-  Object.entries(variables).forEach(([key, variable]) => {
-    switch (variable.type) {
-      case 'link':
-        view[key] = parseLinkVariable(variable)
-        break
-      case 'text':
-        view[key] = variable.value
-        break
-    }
-  }, {})
-
-  // Disable escaping as we'll be generating HTML
-  const oldEscape = Mustache.escape
-  Mustache.escape = function (escapeText) {
-    return escapeText
-  }
-  const output = Mustache.render(text, view)
-  Mustache.escape = oldEscape
-
-  return output
-}

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

@@ -1,162 +0,0 @@
-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/view.js

@@ -1,36 +0,0 @@
-import ModalWrapper from './modal-wrapper'
-import AppFrame from './app-frame'
-import ChatFrame from './chat-frame'
-import ToggleButton from '../entry/toggle-button'
-import AgentInfo from './agent-info'
-import Header from './header'
-import Conversation from '../conversation/conversation'
-import EntryContainer from '../entry/entry-container'
-import Interrupt from './interrupt'
-import { useSeamlyChat, useSeamlyLayoutMode } from '../../hooks/seamly-hooks'
-import { useVisibility } from '../../../domains/visibility'
-
-const View = () => {
-  const { isVisible } = useVisibility()
-  const { openChat, closeChat } = useSeamlyChat()
-  const { isModal } = useSeamlyLayoutMode()
-
-  return (
-    isVisible && (
-      <ModalWrapper>
-        <AppFrame>
-          {!isModal && <ToggleButton onOpenChat={openChat} />}
-          <Header onCloseChat={closeChat}>
-            <AgentInfo />
-          </Header>
-          <ChatFrame interruptComponent={Interrupt}>
-            <Conversation />
-            <EntryContainer />
-          </ChatFrame>
-        </AppFrame>
-      </ModalWrapper>
-    )
-  )
-}
-
-export default View

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

@@ -1,110 +0,0 @@
-import { useRef, useEffect, useState } from 'preact/hooks'
-import OptionsFrame from './options-frame'
-import {
-  useSeamlyOptions,
-  useOptionButton,
-  useCobrowsingContainer,
-  useGeneratedId,
-  useLiveRegion,
-} from '../../hooks/seamly-hooks'
-import { useI18n } from '../../../domains/i18n'
-import { className } from '../../../lib/css'
-import { featureKeys } from '../../utils/seamly-utils'
-import {
-  focusElement,
-  runIfElementContainsOrHasFocus,
-} from '../../utils/general-utils'
-
-const Cobrowsing = () => {
-  const { t } = useI18n()
-  const cobrowsingDescriptionId = useGeneratedId()
-  const { userSelectedOptions, features, setUserSelectedOption, hideOption } =
-    useSeamlyOptions()
-  const { enabled: canActivateCobrowsing } = features.cobrowsing || {}
-  const prevCanActivateCobrowsing = useRef(null)
-  const [cobrowsingToggleActive, setCobrowsingToggleActive] = useState(
-    canActivateCobrowsing,
-  )
-  const { focusButton } = useOptionButton()
-  const { focusContainer } = useCobrowsingContainer()
-  const { sendAssertive } = useLiveRegion()
-  const cancelButton = useRef(null)
-  const toggleButton = useRef(null)
-
-  useEffect(() => {
-    const focusFn = () => {
-      focusElement(cancelButton.current)
-    }
-
-    if (!canActivateCobrowsing && prevCanActivateCobrowsing.current === true) {
-      sendAssertive(t('options.cobrowsing.cobrowsingUnavailable'))
-      setUserSelectedOption(featureKeys.cobrowsing, false)
-      runIfElementContainsOrHasFocus(toggleButton.current, focusFn)
-    }
-
-    if (canActivateCobrowsing && prevCanActivateCobrowsing.current === false) {
-      sendAssertive(t('options.cobrowsing.srCobrowsingAvailable'))
-    }
-    setCobrowsingToggleActive(canActivateCobrowsing)
-    prevCanActivateCobrowsing.current = canActivateCobrowsing
-  }, [canActivateCobrowsing, setUserSelectedOption, sendAssertive, t])
-
-  const toggleAndFocus = (isCancel) => {
-    if (!isCancel && !userSelectedOptions.cobrowsing) {
-      focusContainer()
-    } else {
-      focusButton()
-    }
-  }
-
-  const onToggleClickHandler = () => {
-    hideOption()
-    toggleAndFocus()
-    setUserSelectedOption(
-      featureKeys.cobrowsing,
-      !userSelectedOptions.cobrowsing,
-    )
-    sendAssertive(t('options.cobrowsing.srStartedCobrowsingText'))
-  }
-
-  const onCancelClickHandler = () => {
-    toggleAndFocus(true)
-  }
-
-  return (
-    <OptionsFrame
-      headingText={t('options.cobrowsing.title')}
-      cancelButtonText={t('options.cancelButtonText')}
-      onCancel={onCancelClickHandler}
-      disableButtonFocusing={true}
-      cancelButtonRef={cancelButton}
-    >
-      <p
-        className={className('options__description')}
-        id={cobrowsingDescriptionId}
-      >
-        {t('options.cobrowsing.description')}
-      </p>
-      {!cobrowsingToggleActive && (
-        <p className={className('notification')}>
-          {t('options.cobrowsing.cobrowsingUnavailable')}
-        </p>
-      )}
-      {cobrowsingToggleActive && (
-        <button
-          type="button"
-          className={className(['button', 'button--primary'])}
-          onClick={onToggleClickHandler}
-          aria-describedby={cobrowsingDescriptionId}
-          ref={toggleButton}
-        >
-          {userSelectedOptions.cobrowsing
-            ? t('options.cobrowsing.labelTurnOff')
-            : t('options.cobrowsing.labelTurnOn')}
-        </button>
-      )}
-    </OptionsFrame>
-  )
-}
-
-export default Cobrowsing

package/src/javascripts/ui/components/warnings/cobrowsing-active-frame.js

@@ -1,29 +0,0 @@
-import { useEffect, useRef } from 'preact/hooks'
-import CobrowsingActive from './cobrowsing-active'
-import { useLiveRegion, useSeamlyOptions } from '../../hooks/seamly-hooks'
-import { useI18n } from '../../../domains/i18n'
-import { useInterrupt } from '../../../domains/interrupt'
-
-const CobrowsingActiveFrame = () => {
-  const { t } = useI18n()
-  const { userSelectedOptions } = useSeamlyOptions()
-  const { hasInterrupt } = useInterrupt()
-  const { cobrowsing } = userSelectedOptions
-  const prevCobrowsing = useRef(cobrowsing)
-  const { sendPolite } = useLiveRegion()
-
-  useEffect(() => {
-    if (!cobrowsing && prevCobrowsing.current) {
-      // This timeout is required as the live announce may be swallowed due to other
-      // announcements around cobrowsing.
-      setTimeout(() => {
-        sendPolite(t('options.cobrowsing.srStoppedCobrowsingText'))
-      }, 300)
-    }
-    prevCobrowsing.current = cobrowsing
-  }, [cobrowsing, t, sendPolite])
-
-  return cobrowsing && !hasInterrupt && <CobrowsingActive />
-}
-
-export default CobrowsingActiveFrame

package/src/javascripts/ui/components/warnings/cobrowsing-active.js

@@ -1,33 +0,0 @@
-import {
-  useSeamlyOptions,
-  useSkiplinkTargetFocusing,
-  useCobrowsingContainer,
-} from '../../hooks/seamly-hooks'
-import { useI18n } from '../../../domains/i18n'
-import { featureKeys } from '../../utils/seamly-utils'
-import ChatStatus from '../chat-status'
-
-const CobrowsingActive = () => {
-  const { t } = useI18n()
-  const { setUserSelectedOption } = useSeamlyOptions()
-  const focusSkiplinkTarget = useSkiplinkTargetFocusing()
-  const { id } = useCobrowsingContainer()
-
-  const onClickHandler = () => {
-    setUserSelectedOption(featureKeys.cobrowsing, false)
-    focusSkiplinkTarget()
-  }
-
-  return (
-    <ChatStatus
-      type="cobrowsing"
-      id={id}
-      label={t('options.cobrowsing.cobrowsingActiveText')}
-      onButtonClick={onClickHandler}
-      buttonText={t('options.cobrowsing.stopCobrowsingText')}
-      srButtonText={t('options.cobrowsing.srStopCobrowsingText')}
-    />
-  )
-}
-
-export default CobrowsingActive