@telia-ace/knowledge-widget-adapters 1.0.30-next.5 → 1.0.30-next.7

package/dist/index.9dafde18.js

@@ -0,0 +1,575 @@
+var J = Object.defineProperty, Q = Object.defineProperties;
+var X = Object.getOwnPropertyDescriptors;
+var P = Object.getOwnPropertySymbols;
+var L = Object.prototype.hasOwnProperty, T = Object.prototype.propertyIsEnumerable;
+var M = (n, e, t) => e in n ? J(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, h = (n, e) => {
+  for (var t in e || (e = {}))
+    L.call(e, t) && M(n, t, e[t]);
+  if (P)
+    for (var t of P(e))
+      T.call(e, t) && M(n, t, e[t]);
+  return n;
+}, y = (n, e) => Q(n, X(e));
+var C = (n, e) => {
+  var t = {};
+  for (var o in n)
+    L.call(n, o) && e.indexOf(o) < 0 && (t[o] = n[o]);
+  if (n != null && P)
+    for (var o of P(n))
+      e.indexOf(o) < 0 && T.call(n, o) && (t[o] = n[o]);
+  return t;
+};
+var S = (n, e, t) => (M(n, typeof e != "symbol" ? e + "" : e, t), t);
+var b = (n, e, t) => new Promise((o, a) => {
+  var c = (r) => {
+    try {
+      i(t.next(r));
+    } catch (l) {
+      a(l);
+    }
+  }, s = (r) => {
+    try {
+      i(t.throw(r));
+    } catch (l) {
+      a(l);
+    }
+  }, i = (r) => r.done ? o(r.value) : Promise.resolve(r.value).then(c, s);
+  i((t = t.apply(n, e)).next());
+});
+import { FormBuilder as Y, FormReader as I, FormComponent as Z } from "@telia-ace/widget-forms";
+import { ComponentPlatform as F, Plugin as _ } from "@telia-ace/knowledge-widget-core";
+import { css as x } from "@emotion/react";
+import $ from "@emotion/styled";
+import { Html as ee, genericHtml as te, borderTabStyle as O, linkTabStyle as ne, useComponent as oe, useRouteData as ae, Typography as re, StyledText as se, Link as ie, SymbolBadge as ce, itemList as le, headingElement as de, ItemList as me, useContainer as ue } from "@telia-ace/knowledge-widget-ui";
+import { lock as he, createParams as pe, formatUrl as fe, appendClassNames as ge } from "@telia-ace/widget-utilities";
+import m, { lazy as ye, Suspense as be, useState as ve, useEffect as Ce } from "react";
+const A = (n, e, t = !1) => n.getManyAsync("matchingClient", "router").then((o) => {
+  const { formData: a } = new I(e.body.form).export(t), { router: c, matchingClient: s } = o, { params: i } = c.getRouteData();
+  return s.customRequest(
+    `contactmethods/${e.id}${t ? "/validatedwithpayload" : ""}`,
+    "POST",
+    {
+      body: a,
+      configuration: {
+        guideId: e.body.guideId || i.guideId
+      }
+    }
+  );
+}), H = (n, e, t) => A(n, e).then((o) => t ? t(o) : o).then(({ ConfirmationText: o }) => o), k = (n, e) => A(n, e, !0).then((t) => ({
+  valid: t.Validation.IsValid,
+  errors: t.Validation.Errors,
+  errorTypes: t.Validation.ErrorTypes
+})), q = (n, e) => A(n, e, !0).then(
+  (t) => Y.fromLegacyForm(e.id, t.ContactMethod.Form).get()
+), w = (n, e) => n.getAsync("matchingClient").then((t) => {
+  t.completeContactMethod(e.id);
+});
+function $e(n) {
+  n.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "email.form",
+      render: import("./email-form-component.2e371b74.js"),
+      onEvaluate: (t) => q(n, t),
+      onValidate: (t) => k(n, t),
+      onSubmit: (t) => H(n, t),
+      onComplete: (t) => w(n, t)
+    });
+  });
+}
+const z = (n, e, t) => {
+  const { url: o, width: a, height: c } = e, s = t || {}, i = document.createElement("a");
+  return i.href = o, i.search.replace("?", "").split("&").forEach((r) => {
+    const [l, d] = r.split("=");
+    typeof d != "undefined" && (s[l] = d);
+  }), i.search = Object.keys(s).map((r) => `${r}=${s[r]}`).join("&"), window.open(i.href, n, `width=${a},height=${c}`), "";
+};
+function ke(n) {
+  n.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "chat.popup",
+      render: "email.form",
+      handleClick: (t) => {
+        const { title: o, body: a } = t, l = a, { form: c, guideId: s, confirmationFallback: i } = l, r = C(l, ["form", "guideId", "confirmationFallback"]);
+        return c ? () => {
+        } : (d) => {
+          d.preventDefault(), z(o, r);
+        };
+      },
+      onValidate: (t) => k(n, t),
+      onComplete: (t) => w(n, t),
+      onSubmit: (t) => {
+        const { title: o, body: a } = t, d = a, { form: c, guideId: s, confirmationFallback: i } = d, r = C(d, ["form", "guideId", "confirmationFallback"]), l = new I(c).export().values;
+        return z(o, r, l), i;
+      }
+    });
+  });
+}
+function we(n) {
+  n.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "custom.freetext",
+      render: import("./free-text-component.90a22252.js")
+    });
+  });
+}
+function Pe(n) {
+  n.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "custom.link",
+      render: import("./link-component.484bbcf2.js")
+    });
+  });
+}
+function Ee(n) {
+  n.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "phone.text",
+      render: import("./phone-component.0c878514.js")
+    });
+  });
+}
+const E = (n, e) => b(void 0, null, function* () {
+  const t = n.get(e.clientName);
+  let { description: o, disabled: a, onClick: c } = e;
+  if (t) {
+    const { handleClick: s, handleDescription: i, handleDisabled: r } = t;
+    typeof s == "function" && (c = yield Promise.resolve(s(e))), typeof i == "function" && (o = yield Promise.resolve(i(e))), typeof r == "function" && (a = yield Promise.resolve(r(e)));
+  }
+  return Promise.resolve(y(h({}, e), {
+    description: o,
+    disabled: a,
+    onClick: c
+  }));
+});
+class N {
+  constructor(e, t) {
+    S(this, "adapters", /* @__PURE__ */ new Map());
+    S(this, "subs", []);
+    if (this.container = e, this.componentPlatform = t, t) {
+      t.components().ofType("contact-list").select().actions.watch("contact-list.fetched", (s, i) => b(this, null, function* () {
+        const { contactMethods: r } = s;
+        if (r) {
+          const l = Promise.all(
+            r.map(
+              (d) => E(this.adapters, d)
+            )
+          );
+          yield Promise.resolve(l).then((d) => {
+            s.contactMethods = d;
+          });
+        }
+        return i(s);
+      }));
+      const a = t.components().ofType("guide").select();
+      a.actions.watch("guide.fetched", (s, i) => b(this, null, function* () {
+        const { contactMethods: r } = s;
+        if (r) {
+          const l = Promise.all(
+            r.map(
+              (d) => E(this.adapters, d)
+            )
+          );
+          yield Promise.resolve(l).then((d) => {
+            s.contactMethods = d;
+          });
+        }
+        return i(s);
+      })), a.actions.watch("guide.handover", (s, i) => b(this, null, function* () {
+        const { handoverContactMethods: r } = s;
+        if (r) {
+          const l = Promise.all(
+            r.map(
+              (d) => E(this.adapters, d)
+            )
+          );
+          yield Promise.resolve(l).then((d) => {
+            s.handoverContactMethods = d;
+          });
+        }
+        return i(s);
+      })), t.components().ofType("contact-method").select().actions.watch("contact-method.fetched", (s, i) => b(this, null, function* () {
+        const { contactMethod: r } = s;
+        return r ? E(this.adapters, r).then(
+          (l) => i(y(h({}, s), { contactMethod: l }))
+        ) : i(s);
+      }));
+    }
+  }
+  static create(e) {
+    return F.getInstance(e).then((t) => new N(e, t));
+  }
+  static getInstance(e, t = "contactMethods") {
+    return he(e)(() => e.getAsync(t).then((o) => {
+      let a = o;
+      return a || F.getInstance(e).then((c) => (a = new N(e, c), e.registerAsync(t, () => a), a));
+    }));
+  }
+  track(e = {}, t) {
+    const { events: o } = this.container.get("$widget");
+    o.dispatch("tracking:service-client-response", {
+      type: t,
+      data: e
+    });
+  }
+  complete(e) {
+    const { id: t, title: o, clientName: a, expanded: c, body: s } = e;
+    this.track(
+      { contactMethod: { id: t, title: o, expanded: c, type: a }, hasGuide: !!s.guideId },
+      "contact-method-complete"
+    );
+    const i = this.adapters.get(a);
+    if (i && i.onComplete)
+      return i.onComplete(e);
+  }
+  evaluate(e) {
+    const { clientName: t } = e, o = this.adapters.get(t);
+    return o && o.onEvaluate ? Promise.resolve(o.onEvaluate(e)) : Promise.resolve(e.body.form);
+  }
+  validate(e) {
+    const { id: t, title: o, clientName: a } = e, c = this.adapters.get(a);
+    return c && c.onValidate ? Promise.resolve(c.onValidate(e)).then((s) => {
+      this.track(
+        { contactMethod: { id: t, title: o, type: a }, isValid: s.valid },
+        "contact-method-validate"
+      );
+      const { events: i } = this.container.get("$widget");
+      return i.dispatch("form:validated", { isValid: s.valid }), s;
+    }) : Promise.resolve({ valid: !0 });
+  }
+  submit(e) {
+    const { clientName: t } = e, o = this.adapters.get(t);
+    return o && o.onSubmit ? Promise.resolve(o.onSubmit(e)).then((a) => (this.complete(e), a)) : Promise.resolve("");
+  }
+  create(e) {
+    const { clientName: t, render: o } = e;
+    return this.adapters.set(t, h({
+      onValidate: (a) => k(this.container, a),
+      onEvaluate: (a) => q(this.container, a),
+      onComplete: (a) => w(this.container, a)
+    }, e)), this.container.getAsync("componentResolver").then((a) => {
+      typeof o == "string" ? this.subs.push(a.registerAlias(t, o)) : this.subs.push(
+        a.registerComponent(
+          t,
+          ye(() => o)
+        )
+      );
+    });
+  }
+  dispose() {
+    this.subs.forEach((e) => e());
+  }
+}
+const Ue = N, Ne = $(ee)`
+    ${te}
+    font-weight: 300;
+    line-height: 1.5em;
+    button:focus-visible {
+        ${O};
+    }
+
+    a:focus-visible {
+        ${ne};
+    }
+`, Me = (n) => {
+  const e = oe(n.clientName), {
+    params: { contactCategory: t, guideCategory: o, phrase: a }
+  } = ae();
+  if (typeof e == "undefined")
+    return null;
+  if (e === null)
+    return process.env.NODE_ENV !== "production" ? /* @__PURE__ */ m.createElement(Ae, {
+      title: `client-name: ${n.clientName}, id: ${n.id}`,
+      className: "humany-non-resolved-contact-method"
+    }, /* @__PURE__ */ m.createElement(re, {
+      variant: "h5"
+    }, "Non resolved Contact Method type")) : null;
+  const c = (s = {}) => {
+    const i = h(h({}, n), s), {
+      id: r,
+      title: l,
+      clientName: d,
+      symbol: u,
+      inline: g,
+      onClick: v = () => {
+      },
+      description: f,
+      htmlParseInstruction: R,
+      className: K,
+      disabled: G,
+      guideId: U,
+      dispatch: V = () => {
+      },
+      expanded: D
+    } = i, W = g ? {
+      onKeyDown: (p) => {
+        p.key && p.key === "Enter" && (v(p, i), p.defaultPrevented || !D && V("expand", r));
+      },
+      onClick: (p) => {
+        v(p, i), p.defaultPrevented || !D && V("expand", r);
+      }
+    } : {
+      onClick: (p) => v(p, i),
+      routeName: "contact-method",
+      params: pe({
+        contactCategory: t,
+        guideId: U,
+        guideCategory: o,
+        phrase: a,
+        contactMethod: r,
+        uriName: fe(l)
+      })
+    };
+    return /* @__PURE__ */ m.createElement(Ie, h(h({
+      title: l,
+      "aria-label": l,
+      className: K,
+      disabled: G,
+      description: f,
+      "data-client-name": d
+    }, s), W), u && /* @__PURE__ */ m.createElement(ce, {
+      symbol: u
+    }), f ? /* @__PURE__ */ m.createElement("div", {
+      className: "humany-contact-link-rich-content"
+    }, /* @__PURE__ */ m.createElement(j, null, l), /* @__PURE__ */ m.createElement(Ne, {
+      html: f,
+      htmlParseInstruction: R
+    })) : /* @__PURE__ */ m.createElement(j, null, l));
+  };
+  return n.expanded ? /* @__PURE__ */ m.createElement(be, {
+    fallback: null
+  }, /* @__PURE__ */ m.createElement(e, y(h({}, n), {
+    renderDefault: c
+  }))) : c();
+}, Se = Me, xe = (n) => {
+  var e, t, o, a, c, s, i, r;
+  return x`
+    display: flex;
+    padding: ${(e = n.theme.sizes) == null ? void 0 : e.large};
+    ${n.description ? "" : "align-items: center;"}
+    text-decoration: none;
+    span {
+        display: inline-block;
+        color: ${(t = n.theme.colors) == null ? void 0 : t.text};
+    }
+    i {
+        font-size: ${(o = n.theme.fonts) == null ? void 0 : o.large};
+        margin: 0 ${(a = n.theme.sizes) == null ? void 0 : a.large} 0 0;
+        min-height: ${(c = n.theme.fonts) == null ? void 0 : c.large};
+        min-width: ${(s = n.theme.fonts) == null ? void 0 : s.large};
+        line-height: ${(i = n.theme.fonts) == null ? void 0 : i.large};
+        display: inline-block;
+        vertical-align: bottom;
+        color: ${(r = n.theme.colors) == null ? void 0 : r.text};
+    }
+`;
+}, j = $(se)`
+    line-height: ${(n) => {
+  var e;
+  return (e = n.theme.fonts) == null ? void 0 : e.large;
+}};
+`, Ie = $(ie)`
+    ${(n) => xe(n)}
+
+    &:focus-visible {
+        ${O};
+    }
+`, Ae = $.div`
+    text-align: center;
+    display: block;
+    ${(n) => {
+  var e, t;
+  return typeof ((e = n.theme.colors) == null ? void 0 : e.warning) != "undefined" && `color: ${(t = n.theme.colors) == null ? void 0 : t.warning};`;
+}}
+`, Re = (n) => {
+  var e, t, o;
+  return x`
+    ${le(n)}
+
+    > div {
+        padding: ${(e = n.theme.sizes) == null ? void 0 : e.large};
+
+        ${de(n)(
+    "h1",
+    x`
+                margin: 0;
+            `
+  )}
+    }
+
+    > ul {
+        &:not(:first-child) {
+            border-top: ${n.theme.border};
+        }
+
+        > li {
+            margin: 0;
+            white-space: normal;
+
+            > a {
+                overflow: hidden;
+            }
+
+            &:first-child > a {
+                border-radius: ${`${n.theme.borderRadius} ${n.theme.borderRadius} 0 0`};
+            }
+
+            &:last-child:not(:first-child) > a {
+                border-radius: ${`0 0 ${n.theme.borderRadius} ${n.theme.borderRadius}`};
+            }
+
+            &:not(:last-child) {
+                border-bottom: ${n.theme.border};
+            }
+
+            > div {
+                padding: ${(t = n.theme.sizes) == null ? void 0 : t.large};
+            }
+        }
+    }
+
+    @media (hover: hover) {
+        a:hover {
+            background-color: ${(o = n.theme.colors) == null ? void 0 : o.accent};
+        }
+    }
+`;
+}, Ve = $(me)`
+    ${(n) => Re(n)}
+`, De = ({
+  contactMethods: n,
+  children: e,
+  guideId: t,
+  dispatch: o,
+  className: a = "",
+  itemRenderer: c,
+  action: s = () => {
+  },
+  header: i = ""
+}) => n.length ? /* @__PURE__ */ m.createElement(Ve, {
+  header: i,
+  className: ge(a, "humany-contact-list"),
+  items: n,
+  renderItem: c ? (r) => /* @__PURE__ */ m.createElement("li", {
+    key: r.id,
+    "data-contact-method": r.id
+  }, c(r, { action: s, dispatch: o, guideId: t })) : (r) => /* @__PURE__ */ m.createElement("li", {
+    key: r.id,
+    "data-contact-method": r.id
+  }, /* @__PURE__ */ m.createElement(Se, y(h({}, r), {
+    action: s,
+    dispatch: o,
+    guideId: t
+  })))
+}, e) : null, We = De, B = (n, e) => {
+  if (n.actionKey === e)
+    return n;
+  if (!n.properties)
+    return null;
+  const t = Object.keys(n.properties);
+  let o;
+  for (let a = 0; a < t.length; a++)
+    if (o = B(n.properties[t[a]], e), o)
+      return o;
+  return !1;
+}, Le = ({
+  className: n,
+  body: { form: e },
+  id: t,
+  action: o,
+  dispatch: a,
+  disabled: c,
+  autoFocus: s
+}) => {
+  if (e && !c) {
+    const { schema: i, layout: r, data: l, meta: d } = e, u = a || o || (() => {
+    });
+    return /* @__PURE__ */ m.createElement(Z, {
+      className: n,
+      schema: i,
+      layout: r,
+      data: l,
+      autoFocus: s,
+      onChange: (g, v) => {
+        const f = { schema: i, layout: r, data: v, meta: d };
+        g.toString() === "submit" ? u("submit", { id: t, form: f }) : B(i, g).evaluate ? u("evaluate", { id: t, form: f }) : u("validate", { id: t, form: f });
+      }
+    });
+  }
+  return null;
+}, Je = Le, Te = (n) => {
+  const [e, t] = ve(null), o = ue();
+  return Ce(() => {
+    let a;
+    return o.getAsync("componentResolver").then((c) => {
+      a = c.registerResolver(
+        n,
+        (s) => t(s)
+      );
+    }), () => {
+      a && a();
+    };
+  }, [n]), e;
+}, Qe = Te;
+function Fe(n) {
+  n.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "custom.webservice",
+      render: "email.form",
+      onValidate: (t) => k(n, t),
+      onComplete: (t) => w(n, t),
+      onSubmit: (t) => H(n, t, (o) => y(h({}, o), {
+        ConfirmationText: o.ResponseHtml
+      }))
+    });
+  });
+}
+const Xe = (n, e, t) => n.getAsync("contactMethods").then((o) => {
+  o.create({
+    clientName: e,
+    render: "email.form",
+    handleClick: () => (a, c) => {
+      const {
+        body: d
+      } = c, u = d, { form: s, guideId: i, confirmationFallback: r } = u, l = C(u, ["form", "guideId", "confirmationFallback"]);
+      s || (a.preventDefault(), t(l));
+    },
+    onValidate: (a) => k(n, a),
+    onComplete: (a) => w(n, a),
+    onSubmit: (a) => {
+      const {
+        body: d
+      } = a, u = d, { form: c, guideId: s, confirmationFallback: i } = u, r = C(u, ["form", "guideId", "confirmationFallback"]), { values: l } = new I(c).export();
+      return Promise.resolve(t(r, l)).then((g) => g || i);
+    }
+  });
+});
+class Ye extends _ {
+  constructor(e, t) {
+    super(e, t), this.widget.implementation.configure((a) => {
+      a.plugin($e).plugin(ke).plugin(we).plugin(Ee).plugin(Fe).plugin(Pe);
+    });
+  }
+}
+export {
+  We as C,
+  Ne as D,
+  Je as F,
+  Re as a,
+  xe as b,
+  ke as c,
+  Se as d,
+  Ue as e,
+  w as f,
+  q as g,
+  $e as h,
+  we as i,
+  Xe as j,
+  Ye as k,
+  Pe as l,
+  Ee as p,
+  H as s,
+  Qe as u,
+  k as v,
+  Fe as w
+};
+//# sourceMappingURL=index.9dafde18.js.map