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

package/build/dist/lib/standalone.js

@@ -34333,6 +34333,282 @@ const DeprecatedToggleButton = ({
 };
 
 /* harmony default export */ var toggle_button = (DeprecatedToggleButton);
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/faq/faq.js
+
+
+
+
+
+
+
+
+
+
+const faq_excluded = ["categories"];
+
+function faq_ownKeys(object, enumerableOnly) { var keys = keys_default()(object); if ((get_own_property_symbols_default())) { var symbols = get_own_property_symbols_default()(object); if (enumerableOnly) { symbols = filter_default()(symbols).call(symbols, function (sym) { return get_own_property_descriptor_default()(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function faq_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; for_each_default()(_context = faq_ownKeys(Object(source), true)).call(_context, function (key) { defineProperty_defineProperty(target, key, source[key]); }); } else if ((get_own_property_descriptors_default())) { define_properties_default()(target, get_own_property_descriptors_default()(source)); } else { var _context2; for_each_default()(_context2 = faq_ownKeys(Object(source))).call(_context2, function (key) { define_property_default()(target, key, get_own_property_descriptor_default()(source, key)); }); } } return target; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const Faq = () => {
+  const {
+    t
+  } = useI18n();
+  const {
+    sendAction,
+    addMessageBubble
+  } = use_seamly_commands();
+  const sectionId = useGeneratedId();
+  const focusSkiplinkTarget = useSkiplinkTargetFocusing();
+  const {
+    sendPolite
+  } = useLiveRegion();
+  const {
+    hasInterrupt
+  } = useInterrupt();
+  const {
+    hasCountdown,
+    endCountdown
+  } = use_seamly_idle_detach_countdown();
+  const {
+    hasPrompt,
+    continueChat
+  } = use_seamly_resume_conversation_prompt();
+  const lastFaqEventPayload = useSeamlyServiceData('suggestion');
+  const [eventBody] = useTranslatedEventData({
+    payload: lastFaqEventPayload
+  });
+  const faqs = hooks_module_A(() => {
+    const newFaqs = lastFaqEventPayload && !hasInterrupt ? eventBody : [];
+    const itemBaseClass = `faqs__item`;
+    return map_default()(newFaqs).call(newFaqs, _ref => {
+      let {
+        categories = []
+      } = _ref,
+          faqRest = _objectWithoutProperties(_ref, faq_excluded);
+
+      return faq_objectSpread(faq_objectSpread({}, faqRest), {}, {
+        categories,
+        classNames: [itemBaseClass, ...map_default()(categories).call(categories, cat => `faqs__item--${String(cat).toLowerCase().replace(/[^a-z0-9_\\-]/, '')}`)]
+      });
+    });
+  }, [lastFaqEventPayload, hasInterrupt, eventBody]);
+  const prevFaqs = hooks_module_s(null);
+  const prevHasFaqs = hooks_module_s(false);
+  const {
+    isInline
+  } = useSeamlyLayoutMode();
+  const hasResponded = useUserHasResponded();
+  const hideForWindow = !isInline && hasResponded;
+  const prevHideForWindow = hooks_module_s(hideForWindow);
+  const hasFaqs = !!faqs.length;
+  const showFaqContainer = hasFaqs && !hideForWindow;
+  const previousRenderedFaqList = hooks_module_s([]);
+  const renderedFaqList = hasFaqs ? faqs : previousRenderedFaqList.current;
+  previousRenderedFaqList.current = renderedFaqList;
+  const containerRef = hooks_module_s(null);
+  hooks_module_y(() => {
+    if (prevFaqs.current !== faqs && !hideForWindow) {
+      if (hasFaqs) {
+        const politeText = prevHasFaqs.current ? t('faq.srUpdatedText') : t('faq.srAvailableText');
+
+        set_timeout_default()(() => {
+          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 jsxRuntime_module_e(in_out_transition, {
+    isActive: showFaqContainer,
+    transitionStartState: transitionStartStates.notRendered,
+    children: jsxRuntime_module_e(ContainerElement, {
+      className: css_className('faqs'),
+      "aria-labelledby": headingText ? sectionId : null,
+      ref: containerRef,
+      children: [headingText && jsxRuntime_module_e("h2", {
+        id: sectionId,
+        className: css_className('faqs__heading'),
+        children: headingText
+      }), !!renderedFaqList.length && jsxRuntime_module_e("ul", {
+        className: css_className('faqs__list'),
+        children: map_default()(renderedFaqList).call(renderedFaqList, faq => jsxRuntime_module_e("li", {
+          className: css_className(faq.classNames),
+          children: jsxRuntime_module_e("button", {
+            type: "button",
+            onClick: () => {
+              onFaqClickHandler(faq);
+            },
+            className: css_className('button', 'button--secondary'),
+            children: [jsxRuntime_module_e(icon, {
+              name: "chevronRight",
+              size: "8"
+            }), faq.question]
+          })
+        }, faq.id.toString()))
+      })]
+    })
+  });
+};
+
+/* harmony default export */ var faq = (Faq);
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/layout/deprecated-app-frame.js
+
+
+
+
+
+
+
+
+
+
+
+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 = F(container => {
+    setSeamlyContainerElement(container);
+  }, [setSeamlyContainerElement]);
+  const blockLang = hooks_module_A(() => {
+    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 && jsxRuntime_module_e("section", {
+    className: css_className(classNames),
+    onKeyDown: onKeyDownHandler,
+    onClick: onClickHandler,
+    lang: blockLang,
+    tabIndex: "-1",
+    ref: containerElementRef,
+    style: {
+      zIndex
+    },
+    "data-nosnippet": true,
+    children: [jsxRuntime_module_e("div", {
+      className: css_className('app-wrapper'),
+      children: children
+    }), showFaq && jsxRuntime_module_e(faq, {})]
+  });
+};
+
+/* harmony default export */ var deprecated_app_frame = (DeprecatedAppFrame);
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/view/deprecated-view.js
 
 
@@ -34346,16 +34622,19 @@ const DeprecatedToggleButton = ({
 
 
 
+
 const DeprecatedView = () => {
   const {
     isVisible
   } = useVisibility();
   const {
-    closeChat
+    closeChat,
+    openChat
   } = use_seamly_chat();
-  return isVisible && jsxRuntime_module_e(app_frame, {
-    isDeprecated: true,
-    children: [jsxRuntime_module_e(header, {
+  return isVisible && jsxRuntime_module_e(deprecated_app_frame, {
+    children: [jsxRuntime_module_e(toggle_button, {
+      onOpenChat: openChat
+    }), jsxRuntime_module_e(header, {
       onCloseChat: closeChat,
       children: jsxRuntime_module_e(agent_info, {})
     }), jsxRuntime_module_e(chat_frame, {