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

package/build/dist/lib/index.debug.min.js.LICENSE.txt

@@ -322,6 +322,10 @@
   !*** ./src/javascripts/domains/redux/context.js ***!
   \**************************************************/
 
+/*!**************************************************!*\
+  !*** ./src/javascripts/ui/components/faq/faq.js ***!
+  \**************************************************/
+
 /*!**************************************************!*\
   !*** ./src/javascripts/ui/hooks/seamly-hooks.js ***!
   \**************************************************/
@@ -846,6 +850,10 @@
   !*** ./src/javascripts/ui/components/conversation/event-divider.js ***!
   \*********************************************************************/
 
+/*!**********************************************************************!*\
+  !*** ./src/javascripts/ui/components/layout/deprecated-app-frame.js ***!
+  \**********************************************************************/
+
 /*!**********************************************************************!*\
   !*** ./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js ***!
   \**********************************************************************/

package/build/dist/lib/index.js

@@ -12281,12 +12281,12 @@ const selectEventsWithSuggestion = createSelector(seamly_state_hooks_selectState
   return [...events, suggestionsEvent];
 });
 const selectEvents = createSelector(selectEventsWithSuggestion, selectConfig, (events, config) => {
-  var _config$messages$time, _config$messages;
+  var _config$messages;
 
   const {
     enabled,
     threshold
-  } = (_config$messages$time = config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) !== null && _config$messages$time !== void 0 ? _config$messages$time : {};
+  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};
 
   if (!enabled) {
     return events;
@@ -15366,8 +15366,8 @@ function validate(values, schema = {}) {
       validations = [validations];
     }
 
-    for (let i = 0; (_ref = i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length)) !== null && _ref !== void 0 ? _ref : 0; i++) {
-      var _ref, _validations;
+    for (let i = 0; i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length) ?? 0; i++) {
+      var _validations;
 
       if (!validations[i].fn(values[key], validations[i].compareValue)) {
         errors[key] = validations[i].errorText;
@@ -15680,9 +15680,7 @@ function updateFormControl(state, formId, name, controlState) {
     formId,
     persistData
   }) => {
-    var _state$formId2;
-
-    const formState = persistData ? (_state$formId2 = state[formId]) !== null && _state$formId2 !== void 0 ? _state$formId2 : forms_reducer_objectSpread(forms_reducer_objectSpread({}, initialFormState), {}, {
+    const formState = persistData ? state[formId] ?? forms_reducer_objectSpread(forms_reducer_objectSpread({}, initialFormState), {}, {
       persistData
     }) : forms_reducer_objectSpread(forms_reducer_objectSpread({}, initialFormState), {}, {
       persistData
@@ -16928,13 +16926,13 @@ const timeFormatOptions = {
   minute: 'numeric'
 };
 const useFormattedDate = date => {
-  var _config$context$local, _config$context;
+  var _config$context;
 
   const {
     t
   } = useI18n();
   const config = useConfig();
-  const locale = (_config$context$local = config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale) !== null && _config$context$local !== void 0 ? _config$context$local : [];
+  const locale = (config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale) ?? [];
   const eventDate = new Date(date);
   const currentDate = new Date();
   const midnight = new Date(currentDate);
@@ -24363,8 +24361,6 @@ class API {
     config = {},
     context = {}
   }) {
-    var _config$sendEnvironme;
-
     this.store = objectStore(`${namespace}.connection${context.locale ? '.' + context.locale : ''}`, config.storageProvider || store);
     this.connectionInfo = {
       apiKey: config.key,
@@ -24372,7 +24368,7 @@ class API {
       secure: config.secure !== false ? config.secure || true : false
     };
     this.config = {
-      sendEnvironment: (_config$sendEnvironme = config.sendEnvironment) !== null && _config$sendEnvironme !== void 0 ? _config$sendEnvironme : true,
+      sendEnvironment: config.sendEnvironment ?? true,
       context
     };
     this.connected = false;
@@ -25230,7 +25226,7 @@ const AgentInfo = () => {
       className: css_className('agent-info__body'),
       children: [(0,jsx_runtime_namespaceObject.jsx)("p", {
         className: css_className('agent-info__heading'),
-        children: title !== null && title !== void 0 ? title : t('header.title')
+        children: title ?? t('header.title')
       }), (0,jsx_runtime_namespaceObject.jsx)("p", {
         className: css_className('agent-info__text'),
         children: displaySubtitle
@@ -25372,6 +25368,275 @@ const DeprecatedToggleButton = ({
 };
 
 /* harmony default export */ const toggle_button = (DeprecatedToggleButton);
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/faq/faq.js
+const faq_excluded = ["categories"];
+
+function faq_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(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) { faq_ownKeys(Object(source), true).forEach(function (key) { faq_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { faq_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function faq_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function faq_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = faq_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function faq_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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 = (0,hooks_namespaceObject.useMemo)(() => {
+    const newFaqs = lastFaqEventPayload && !hasInterrupt ? eventBody : [];
+    const itemBaseClass = `faqs__item`;
+    return newFaqs.map(_ref => {
+      let {
+        categories = []
+      } = _ref,
+          faqRest = faq_objectWithoutProperties(_ref, faq_excluded);
+
+      return faq_objectSpread(faq_objectSpread({}, faqRest), {}, {
+        categories,
+        classNames: [itemBaseClass, ...categories.map(cat => `faqs__item--${String(cat).toLowerCase().replace(/[^a-z0-9_\\-]/, '')}`)]
+      });
+    });
+  }, [lastFaqEventPayload, hasInterrupt, eventBody]);
+  const prevFaqs = (0,hooks_namespaceObject.useRef)(null);
+  const prevHasFaqs = (0,hooks_namespaceObject.useRef)(false);
+  const {
+    isInline
+  } = useSeamlyLayoutMode();
+  const hasResponded = useUserHasResponded();
+  const hideForWindow = !isInline && hasResponded;
+  const prevHideForWindow = (0,hooks_namespaceObject.useRef)(hideForWindow);
+  const hasFaqs = !!faqs.length;
+  const showFaqContainer = hasFaqs && !hideForWindow;
+  const previousRenderedFaqList = (0,hooks_namespaceObject.useRef)([]);
+  const renderedFaqList = hasFaqs ? faqs : previousRenderedFaqList.current;
+  previousRenderedFaqList.current = renderedFaqList;
+  const containerRef = (0,hooks_namespaceObject.useRef)(null);
+  (0,hooks_namespaceObject.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 (0,jsx_runtime_namespaceObject.jsx)(in_out_transition, {
+    isActive: showFaqContainer,
+    transitionStartState: transitionStartStates.notRendered,
+    children: (0,jsx_runtime_namespaceObject.jsxs)(ContainerElement, {
+      className: css_className('faqs'),
+      "aria-labelledby": headingText ? sectionId : null,
+      ref: containerRef,
+      children: [headingText && (0,jsx_runtime_namespaceObject.jsx)("h2", {
+        id: sectionId,
+        className: css_className('faqs__heading'),
+        children: headingText
+      }), !!renderedFaqList.length && (0,jsx_runtime_namespaceObject.jsx)("ul", {
+        className: css_className('faqs__list'),
+        children: renderedFaqList.map(faq => (0,jsx_runtime_namespaceObject.jsx)("li", {
+          className: css_className(faq.classNames),
+          children: (0,jsx_runtime_namespaceObject.jsxs)("button", {
+            type: "button",
+            onClick: () => {
+              onFaqClickHandler(faq);
+            },
+            className: css_className('button', 'button--secondary'),
+            children: [(0,jsx_runtime_namespaceObject.jsx)(icon, {
+              name: "chevronRight",
+              size: "8"
+            }), faq.question]
+          })
+        }, faq.id.toString()))
+      })]
+    })
+  });
+};
+
+/* harmony default export */ const 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 = (0,hooks_namespaceObject.useCallback)(container => {
+    setSeamlyContainerElement(container);
+  }, [setSeamlyContainerElement]);
+  const blockLang = (0,hooks_namespaceObject.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 && (0,jsx_runtime_namespaceObject.jsxs)("section", {
+    className: css_className(classNames),
+    onKeyDown: onKeyDownHandler,
+    onClick: onClickHandler,
+    lang: blockLang,
+    tabIndex: "-1",
+    ref: containerElementRef,
+    style: {
+      zIndex
+    },
+    "data-nosnippet": true,
+    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+      className: css_className('app-wrapper'),
+      children: children
+    }), showFaq && (0,jsx_runtime_namespaceObject.jsx)(faq, {})]
+  });
+};
+
+/* harmony default export */ const deprecated_app_frame = (DeprecatedAppFrame);
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/view/deprecated-view.js
 
 
@@ -25385,16 +25650,19 @@ const DeprecatedToggleButton = ({
 
 
 
+
 const DeprecatedView = () => {
   const {
     isVisible
   } = useVisibility();
   const {
-    closeChat
+    closeChat,
+    openChat
   } = use_seamly_chat();
-  return isVisible && (0,jsx_runtime_namespaceObject.jsxs)(app_frame, {
-    isDeprecated: true,
-    children: [(0,jsx_runtime_namespaceObject.jsx)(header, {
+  return isVisible && (0,jsx_runtime_namespaceObject.jsxs)(deprecated_app_frame, {
+    children: [(0,jsx_runtime_namespaceObject.jsx)(toggle_button, {
+      onOpenChat: openChat
+    }), (0,jsx_runtime_namespaceObject.jsx)(header, {
       onCloseChat: closeChat,
       children: (0,jsx_runtime_namespaceObject.jsx)(agent_info, {})
     }), (0,jsx_runtime_namespaceObject.jsxs)(chat_frame, {