@telia-ace/knowledge-widget-adapters 1.0.13 → 1.0.14

package/dist/index2.js

@@ -0,0 +1,699 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { FormReader, FormBuilder, FormComponent } from "@telia-ace/widget-forms";
+import { ComponentPlatform, Plugin } from "@telia-ace/knowledge-widget-core";
+import { lock, createParams, formatUrl, appendClassNames } from "@telia-ace/widget-utilities";
+import React__default, { lazy, Suspense, useState, useEffect } from "react";
+import { Paragraph, headingElement, Html, genericHtml, borderTabStyle, linkTabStyle, StyledText, Link, useComponent, useRouteData, SymbolBadge, itemList, ItemList, useContainer } from "@telia-ace/knowledge-widget-ui";
+import styled, { css } from "styled-components";
+const post = (container, contactMethod, validate2 = false) => container.getManyAsync("matchingClient", "router").then((services) => {
+  const { formData } = new FormReader(contactMethod.body.form).export(validate2);
+  const { router, matchingClient } = services;
+  const { params } = router.getRouteData();
+  return matchingClient.customRequest(`contactmethods/${contactMethod.id}${validate2 ? "/validatedwithpayload" : ""}`, "POST", {
+    body: formData,
+    configuration: {
+      guideId: contactMethod.body.guideId || params.guideId
+    }
+  });
+});
+const submit = (container, contactMethod, transform) => post(container, contactMethod).then((response) => transform ? transform(response) : response).then(({ ConfirmationText }) => ConfirmationText);
+const validate = (container, contactMethod) => post(container, contactMethod, true).then((result) => ({
+  valid: result.Validation.IsValid,
+  errors: result.Validation.Errors,
+  errorTypes: result.Validation.ErrorTypes
+}));
+const evaluate = (container, contactMethod) => post(container, contactMethod, true).then((result) => FormBuilder.fromLegacyForm(contactMethod.id, result.ContactMethod.Form).get());
+const complete = (container, contactMethod) => container.getAsync("matchingClient").then((matchingClient) => {
+  matchingClient.completeContactMethod(contactMethod.id);
+});
+function emailPlugin(container) {
+  container.getAsync("contactMethods").then((platform) => {
+    platform.create({
+      clientName: "email.form",
+      render: import("./email-form-component.js"),
+      onEvaluate: (contactMethod) => evaluate(container, contactMethod),
+      onValidate: (contactMethod) => validate(container, contactMethod),
+      onSubmit: (contactMethod) => submit(container, contactMethod),
+      onComplete: (contactMethod) => complete(container, contactMethod)
+    });
+  });
+}
+const popup = (title, settings, formValues) => {
+  const { url, width, height } = settings;
+  const queries = formValues ? formValues : {};
+  const link = document.createElement("a");
+  link.href = url;
+  link.search.replace("?", "").split("&").forEach((part) => {
+    const [key, value] = part.split("=");
+    typeof value !== "undefined" && (queries[key] = value);
+  });
+  link.search = Object.keys(queries).map((key) => `${key}=${queries[key]}`).join("&");
+  window.open(link.href, title, `width=${width},height=${height}`);
+  return "";
+};
+function chatPopupPlugin(container) {
+  container.getAsync("contactMethods").then((platform) => {
+    platform.create({
+      clientName: "chat.popup",
+      render: "email.form",
+      handleClick: (contactMethod) => {
+        const { title, body } = contactMethod;
+        const _a = body, { form, guideId, confirmationFallback } = _a, rest = __objRest(_a, ["form", "guideId", "confirmationFallback"]);
+        if (!form) {
+          return (e) => {
+            e.preventDefault();
+            popup(title, rest);
+          };
+        }
+        return () => {
+        };
+      },
+      onValidate: (contactMethod) => validate(container, contactMethod),
+      onComplete: (contactMethod) => complete(container, contactMethod),
+      onSubmit: (contactMethod) => {
+        const { title, body } = contactMethod;
+        const _a = body, { form, guideId, confirmationFallback } = _a, rest = __objRest(_a, ["form", "guideId", "confirmationFallback"]);
+        const formValues = new FormReader(form).export().values;
+        popup(title, rest, formValues);
+        return confirmationFallback;
+      }
+    });
+  });
+}
+function freeTextPlugin(container) {
+  container.getAsync("contactMethods").then((platform) => {
+    platform.create({
+      clientName: "custom.freetext",
+      render: import("./free-text-component.js")
+    });
+  });
+}
+function linkPlugin(container) {
+  container.getAsync("contactMethods").then((platform) => {
+    platform.create({
+      clientName: "custom.link",
+      render: import("./link-component.js")
+    });
+  });
+}
+function phonePlugin(container) {
+  container.getAsync("contactMethods").then((platform) => {
+    platform.create({
+      clientName: "phone.text",
+      render: import("./phone-component.js")
+    });
+  });
+}
+const handleContactMethod = (adapters, contactMethod) => __async(this, null, function* () {
+  const adapter = adapters.get(contactMethod.clientName);
+  let { description, disabled, onClick } = contactMethod;
+  if (adapter) {
+    const { handleClick, handleDescription, handleDisabled } = adapter;
+    if (typeof handleClick === "function") {
+      onClick = yield Promise.resolve(handleClick(contactMethod));
+    }
+    if (typeof handleDescription === "function") {
+      description = yield Promise.resolve(handleDescription(contactMethod));
+    }
+    if (typeof handleDisabled === "function") {
+      disabled = yield Promise.resolve(handleDisabled(contactMethod));
+    }
+  }
+  return Promise.resolve(__spreadProps(__spreadValues({}, contactMethod), {
+    description,
+    disabled,
+    onClick
+  }));
+});
+class ContactMethodPlatform {
+  constructor(container, componentPlatform) {
+    this.container = container;
+    this.componentPlatform = componentPlatform;
+    this.adapters = /* @__PURE__ */ new Map();
+    this.subs = [];
+    if (componentPlatform) {
+      const contactListComponent = componentPlatform.components().ofType("contact-list").select();
+      contactListComponent.actions.watch("contact-list.fetched", (input, next) => __async(this, null, function* () {
+        const { contactMethods } = input;
+        if (contactMethods) {
+          const promises = Promise.all(contactMethods.map((cm) => handleContactMethod(this.adapters, cm)));
+          yield Promise.resolve(promises).then((contactMethods2) => {
+            input.contactMethods = contactMethods2;
+          });
+        }
+        return next(input);
+      }));
+      const guideComponent = componentPlatform.components().ofType("guide").select();
+      guideComponent.actions.watch("guide.fetched", (input, next) => __async(this, null, function* () {
+        const { contactMethods } = input;
+        if (contactMethods) {
+          const promises = Promise.all(contactMethods.map((cm) => handleContactMethod(this.adapters, cm)));
+          yield Promise.resolve(promises).then((contactMethods2) => {
+            input.contactMethods = contactMethods2;
+          });
+        }
+        return next(input);
+      }));
+      guideComponent.actions.watch("guide.handover", (input, next) => __async(this, null, function* () {
+        const { handoverContactMethods } = input;
+        if (handoverContactMethods) {
+          const promises = Promise.all(handoverContactMethods.map((cm) => handleContactMethod(this.adapters, cm)));
+          yield Promise.resolve(promises).then((handoverContactMethods2) => {
+            input.handoverContactMethods = handoverContactMethods2;
+          });
+        }
+        return next(input);
+      }));
+      const contactMethodComponent = componentPlatform.components().ofType("contact-method").select();
+      contactMethodComponent.actions.watch("contact-method.fetched", (input, next) => __async(this, null, function* () {
+        const { contactMethod } = input;
+        if (contactMethod) {
+          return handleContactMethod(this.adapters, contactMethod).then((contactMethod2) => {
+            return next(__spreadProps(__spreadValues({}, input), { contactMethod: contactMethod2 }));
+          });
+        }
+        return next(input);
+      }));
+    }
+  }
+  static create(container) {
+    return ComponentPlatform.getInstance(container).then((platform) => {
+      return new ContactMethodPlatform(container, platform);
+    });
+  }
+  static getInstance(container, key = "contactMethods") {
+    return lock(container)(() => {
+      return container.getAsync(key).then((value) => {
+        let contactMethodPlatform = value;
+        if (!contactMethodPlatform) {
+          return ComponentPlatform.getInstance(container).then((components) => {
+            contactMethodPlatform = new ContactMethodPlatform(container, components);
+            container.registerAsync(key, () => contactMethodPlatform);
+            return contactMethodPlatform;
+          });
+        }
+        return contactMethodPlatform;
+      });
+    });
+  }
+  track(data = {}, type) {
+    const { events } = this.container.get("$widget");
+    events.dispatch("tracking:service-client-response", {
+      type,
+      data
+    });
+  }
+  complete(contactMethod) {
+    const { id, title, clientName, expanded, body } = contactMethod;
+    this.track({ contactMethod: { id, title, expanded, type: clientName }, hasGuide: !!body.guideId }, "contact-method-complete");
+    const adapter = this.adapters.get(clientName);
+    if (adapter && adapter.onComplete) {
+      return adapter.onComplete(contactMethod);
+    }
+  }
+  evaluate(contactMethod) {
+    const { clientName } = contactMethod;
+    const adapter = this.adapters.get(clientName);
+    if (adapter && adapter.onEvaluate) {
+      return Promise.resolve(adapter.onEvaluate(contactMethod));
+    }
+    return Promise.resolve(contactMethod.body.form);
+  }
+  validate(contactMethod) {
+    const { id, title, clientName } = contactMethod;
+    const adapter = this.adapters.get(clientName);
+    if (adapter && adapter.onValidate) {
+      return Promise.resolve(adapter.onValidate(contactMethod)).then((result) => {
+        this.track({ contactMethod: { id, title, type: clientName }, isValid: result.valid }, "contact-method-validate");
+        const { events } = this.container.get("$widget");
+        events.dispatch("form:validated", { isValid: result.valid });
+        return result;
+      });
+    }
+    return Promise.resolve({ valid: true });
+  }
+  submit(contactMethod) {
+    const { clientName } = contactMethod;
+    const adapter = this.adapters.get(clientName);
+    if (adapter && adapter.onSubmit) {
+      return Promise.resolve(adapter.onSubmit(contactMethod)).then((result) => {
+        this.complete(contactMethod);
+        return result;
+      });
+    }
+    return Promise.resolve("");
+  }
+  create(settings) {
+    const { clientName, render } = settings;
+    this.adapters.set(clientName, __spreadValues({
+      onValidate: (cm) => validate(this.container, cm),
+      onEvaluate: (cm) => evaluate(this.container, cm),
+      onComplete: (cm) => complete(this.container, cm)
+    }, settings));
+    return this.container.getAsync("componentResolver").then((resolver) => {
+      if (typeof render === "string") {
+        this.subs.push(resolver.registerAlias(clientName, render));
+      } else {
+        this.subs.push(resolver.registerComponent(clientName, lazy(() => render)));
+      }
+    });
+  }
+  dispose() {
+    this.subs.forEach((s) => s());
+  }
+}
+styled(Paragraph)`
+    ${headingElement("h1", css`
+            font-weight: normal;
+            font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.medium;
+}};
+        `)}
+`;
+var Description = styled(Html)`
+    ${genericHtml}
+    font-weight: 300;
+    line-height: 1.5em;
+    button:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}};
+    }
+
+    a:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && linkTabStyle;
+}};
+    }
+`;
+const ContactMethod = (props) => {
+  const ResolvedComponent = useComponent(props.clientName);
+  const {
+    params: { contactCategory, guideCategory, phrase }
+  } = useRouteData();
+  if (typeof ResolvedComponent === "undefined") {
+    return null;
+  }
+  if (ResolvedComponent === null) {
+    return null;
+  }
+  const renderLink = (extraProps = {}) => {
+    const enhancedProps = __spreadValues(__spreadValues({}, props), extraProps);
+    const {
+      id,
+      title,
+      clientName,
+      symbol,
+      inline,
+      onClick = () => {
+      },
+      description,
+      htmlParseInstruction,
+      className,
+      disabled,
+      guideId,
+      dispatch = () => {
+      },
+      expanded
+    } = enhancedProps;
+    const linkProps = inline ? {
+      onKeyDown: (event) => {
+        if (event.key && event.key === "Enter") {
+          onClick(event, enhancedProps);
+          if (!event.defaultPrevented) {
+            !expanded && dispatch("expand", id);
+          }
+        }
+      },
+      onClick: (event) => {
+        onClick(event, enhancedProps);
+        if (!event.defaultPrevented) {
+          !expanded && dispatch("expand", id);
+        }
+      }
+    } : {
+      onClick: (event) => onClick(event, enhancedProps),
+      routeName: "contact-method",
+      params: createParams({
+        contactCategory,
+        guideId,
+        guideCategory,
+        phrase,
+        contactMethod: id,
+        uriName: formatUrl(title)
+      })
+    };
+    return /* @__PURE__ */ React__default.createElement(StyledLink, __spreadValues(__spreadValues({
+      title,
+      "aria-label": title,
+      className,
+      disabled,
+      description,
+      "data-client-name": clientName
+    }, extraProps), linkProps), symbol && /* @__PURE__ */ React__default.createElement(SymbolBadge, {
+      symbol
+    }), description ? /* @__PURE__ */ React__default.createElement("div", {
+      className: "humany-contact-link-rich-content"
+    }, /* @__PURE__ */ React__default.createElement(StyledTitle, null, title), /* @__PURE__ */ React__default.createElement(Description, {
+      html: description,
+      htmlParseInstruction
+    })) : /* @__PURE__ */ React__default.createElement(StyledTitle, null, title));
+  };
+  return props.expanded ? /* @__PURE__ */ React__default.createElement(Suspense, {
+    fallback: null
+  }, /* @__PURE__ */ React__default.createElement(ResolvedComponent, __spreadProps(__spreadValues({}, props), {
+    renderDefault: renderLink
+  }))) : renderLink();
+};
+const contactLink = css`
+    display: flex;
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    ${(p) => !!p.description ? "" : "align-items: center;"}
+    text-decoration: none;
+    span {
+        display: inline-block;
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+    i {
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.large;
+}};
+        margin: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}} 0 0;
+        min-height: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.large;
+}};
+        min-width: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.large;
+}};
+        line-height: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.large;
+}};
+        display: inline-block;
+        vertical-align: bottom;
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+`;
+const StyledTitle = styled(StyledText)`
+    line-height: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.large;
+}};
+`;
+const StyledLink = styled(Link)`
+    ${contactLink}
+
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}};
+    }
+`;
+styled.div`
+    text-align: center;
+    display: block;
+    ${(p) => {
+  var _a, _b;
+  return typeof ((_a = p.theme.colors) == null ? void 0 : _a.warning) !== "undefined" && `color: ${(_b = p.theme.colors) == null ? void 0 : _b.warning};`;
+}}
+`;
+const contactItemList = css`
+    ${itemList}
+
+    > div {
+        padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+
+        ${headingElement("h1", css`
+                margin: 0;
+            `)}
+    }
+    > ul {
+        &:not(:first-child) {
+            border-top: ${(p) => p.theme.border};
+        }
+
+        > li {
+            margin: 0;
+            white-space: normal;
+
+            > a {
+                overflow: hidden;
+            }
+
+            &:first-child > a {
+                border-radius: ${(p) => `${p.theme.borderRadius} ${p.theme.borderRadius} 0 0`};
+            }
+
+            &:last-child:not(:first-child) > a {
+                border-radius: ${(p) => `0 0 ${p.theme.borderRadius} ${p.theme.borderRadius}`};
+            }
+
+            &:not(:last-child) {
+                border-bottom: ${(p) => p.theme.border};
+            }
+
+            > div {
+                padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+            }
+        }
+    }
+
+    @media (hover: hover) {
+        a:hover {
+            background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.accent;
+}};
+        }
+    }
+`;
+const StyledItemList = styled(ItemList)`
+    ${contactItemList}
+`;
+const ContactList = ({
+  contactMethods,
+  children,
+  guideId,
+  dispatch,
+  className = "",
+  action = () => {
+  },
+  header = ""
+}) => {
+  if (!contactMethods.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(StyledItemList, {
+    header,
+    className: appendClassNames(className, "humany-contact-list"),
+    items: contactMethods,
+    renderItem: (cm) => /* @__PURE__ */ React__default.createElement("li", {
+      key: cm.id,
+      "data-contact-method": cm.id
+    }, /* @__PURE__ */ React__default.createElement(ContactMethod, __spreadProps(__spreadValues({}, cm), {
+      action,
+      dispatch,
+      guideId
+    })))
+  }, children);
+};
+const lookupComponent = (node, id) => {
+  if (node.actionKey === id) {
+    return node;
+  }
+  if (!node.properties) {
+    return null;
+  }
+  const keys = Object.keys(node.properties);
+  let result;
+  for (let i = 0; i < keys.length; i++) {
+    result = lookupComponent(node.properties[keys[i]], id);
+    if (result) {
+      return result;
+    }
+  }
+  return false;
+};
+const Form = ({
+  className,
+  body: { form },
+  id,
+  action,
+  dispatch,
+  disabled,
+  autoFocus
+}) => {
+  if (form && !disabled) {
+    const { schema, layout, data } = form;
+    const trigger = dispatch || action || (() => {
+    });
+    return /* @__PURE__ */ React__default.createElement(FormComponent, {
+      className,
+      schema,
+      layout,
+      data,
+      autoFocus,
+      onChange: (event, data2) => {
+        const form2 = { schema, layout, data: data2 };
+        if (event.toString() === "submit") {
+          trigger("submit", { id, form: form2 });
+        } else {
+          const formComponent = lookupComponent(schema, event);
+          if (formComponent.evaluate) {
+            trigger("evaluate", { id, form: form2 });
+          } else {
+            trigger("validate", { id, form: form2 });
+          }
+        }
+      }
+    });
+  }
+  return null;
+};
+const useContactMethod = (clientName) => {
+  const [component, setComponent] = useState(null);
+  const container = useContainer();
+  useEffect(() => {
+    let unsubscribe;
+    container.getAsync("componentResolver").then((resolver) => {
+      unsubscribe = resolver.registerResolver(clientName, (component2) => setComponent(component2));
+    });
+    return () => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    };
+  }, [clientName]);
+  return component;
+};
+function webServicePlugin(container) {
+  container.getAsync("contactMethods").then((platform) => {
+    platform.create({
+      clientName: "custom.webservice",
+      render: "email.form",
+      onValidate: (contactMethod) => validate(container, contactMethod),
+      onComplete: (contactMethod) => complete(container, contactMethod),
+      onSubmit: (contactMethod) => submit(container, contactMethod, (response) => {
+        return __spreadProps(__spreadValues({}, response), {
+          ConfirmationText: response.ResponseHtml
+        });
+      })
+    });
+  });
+}
+const createSubmitAdapter = (container, clientName, fn) => {
+  return container.getAsync("contactMethods").then((platform) => {
+    platform.create({
+      clientName,
+      render: "email.form",
+      handleClick: () => {
+        return (e, cm) => {
+          const {
+            body: _a
+          } = cm, _b = _a, { form, guideId, confirmationFallback } = _b, rest = __objRest(_b, ["form", "guideId", "confirmationFallback"]);
+          if (!form) {
+            e.preventDefault();
+            fn(rest);
+          }
+        };
+      },
+      onValidate: (cm) => validate(container, cm),
+      onComplete: (cm) => complete(container, cm),
+      onSubmit: (cm) => {
+        const {
+          body: _a
+        } = cm, _b = _a, { form, guideId, confirmationFallback } = _b, rest = __objRest(_b, ["form", "guideId", "confirmationFallback"]);
+        const { values } = new FormReader(form).export();
+        return Promise.resolve(fn(rest, values)).then((confirmation) => {
+          return confirmation || confirmationFallback;
+        });
+      }
+    });
+  });
+};
+class DefaultContactMethodsPlugin extends Plugin {
+  constructor(container, settings) {
+    super(container, settings);
+    const implementation = this.widget.implementation;
+    implementation.configure((config) => {
+      config.plugin(emailPlugin).plugin(chatPopupPlugin).plugin(freeTextPlugin).plugin(phonePlugin).plugin(webServicePlugin).plugin(linkPlugin);
+    });
+  }
+}
+export { ContactList as C, Description as D, Form as F, contactItemList as a, contactLink as b, chatPopupPlugin as c, ContactMethod as d, ContactMethodPlatform as e, complete as f, evaluate as g, emailPlugin as h, freeTextPlugin as i, createSubmitAdapter as j, DefaultContactMethodsPlugin as k, linkPlugin as l, phonePlugin as p, submit as s, useContactMethod as u, validate as v, webServicePlugin as w };
+//# sourceMappingURL=index2.js.map