@telia-ace/knowledge-widget-components-guide 0.0.1

package/guide-component.d.ts

@@ -0,0 +1,70 @@
+import { DataError } from '../../../knowledge/data-client/src/index.ts';
+import { ContactMethodType } from '../../../knowledge/adapters/src/index.ts';
+import { FavoriteProperties, LanguageProperties, MetaDataProperties } from '../../utilities/src/index.ts';
+import { DialogItem, PickerTypes } from '../../../knowledge/core/src/index.ts';
+import { FormComponentInstanceProperties } from '../../../forms/src/index.ts';
+import { Container } from '@webprovisions/platform';
+
+export type GuideProps = {
+    id: string;
+    title: string;
+    body: string;
+    connection: string;
+    categories: number[];
+    hasHandover: boolean;
+    allowFeedback: boolean;
+    perspectives: {
+        [key: string]: string;
+    };
+    translations?: {
+        [key: string]: string;
+    };
+    modified?: string;
+    published?: string;
+    publishedBy?: string | null;
+    modifiedBy?: string | null;
+    perspective: string | null;
+};
+export type AvailablePerspectives = {
+    name: string;
+    title: string;
+};
+export type GuideComponentProps = {
+    showHeader?: boolean;
+    showFeedback?: boolean;
+    feedbackDirection?: 'horizontal' | 'vertical';
+    feedbackGiven?: 'positive' | 'negative';
+    contactMethods?: ContactMethodType[];
+    handoverContactMethods?: ContactMethodType[];
+    showAnswerVersions?: boolean;
+    feedbackHeader?: string;
+    contactHeader?: string;
+    toolbarFunctionsHeader?: string;
+    toolbarLanguageHeader?: string;
+    positiveFeedbackLabel?: string;
+    negativeFeedbackLabel?: string;
+    contactFeedbackLabel?: string;
+    feedbackRecognitionLabel?: string;
+    defaultAnswerVersionLabel?: string;
+    backButtonLabel?: string;
+    toolbarFunctionsTooltip?: string;
+    toolbarFunctionsCloseButtonAriaLabel?: string;
+    copyActionLabel?: string;
+    printActionLabel?: string;
+    toolbarLanguageTooltip?: string;
+    toolbar?: ToolbarProps;
+    guide?: GuideProps;
+    dialog?: DialogItem[];
+    error?: DataError;
+    availablePerspectives?: AvailablePerspectives[];
+} & FormComponentInstanceProperties & FavoriteProperties & MetaDataProperties & LanguageProperties;
+export type ToolbarProps = {
+    language?: boolean;
+    guideCategories?: boolean;
+    allowCopy?: boolean;
+    allowPrint?: boolean;
+    showFavoriteToggle?: boolean;
+    picker?: PickerTypes;
+};
+export declare const GuideComponent: (container: Container) => Promise<void>;
+export default GuideComponent;

package/guide.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+type Props = {
+    className: string;
+    accordion?: boolean;
+};
+declare const Guide: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Guide;

package/index.d.ts

@@ -0,0 +1,3 @@
+import { default as GuideComponent } from './guide-component';
+
+export default GuideComponent;

package/index.js

@@ -0,0 +1,2 @@
+"use strict";const u=require("@telia-ace/knowledge-data-client"),l=require("@telia-ace/knowledge-widget-component-utilities"),b=require("@telia-ace/knowledge-widget-core"),v=require("@telia-ace/knowledge-widget-ui"),k=require("clipboard-polyfill");function w(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,s.get?s:{enumerable:!0,get:()=>e[a]})}}return r.default=e,Object.freeze(r)}const m=w(k),y=(e,r)=>{r.actions.create("feedback",a=>{const s=a==="negative"?u.FeedbackType.Negative:u.FeedbackType.Positive,{guide:i,submitButtonLabel:c="Submit"}=r.properties();if(i){const{connection:t,id:n,hasHandover:o}=i;r.writeProperties({feedbackGiven:a,loading:o&&s===u.FeedbackType.Negative});const{events:d}=e.get("$widget");return d.dispatch("tracking:feedback-given",{guide:i,categories:i.categories,feedbackType:s.toLowerCase()}),u.DataClient.getInstance(e).then(h=>h.feedback(n,t,s).then(()=>{if(o&&s===u.FeedbackType.Negative)return h.fetch(u.DataType.ContactMethods,{guideId:n}).then(({contactMethods:p})=>r.actions.dispatch("handover",{handoverContactMethods:p.map(g=>({...g,body:l.updateForm(g,{submit:c})})),loading:!1}))}))}}),r.actions.create("handover",a=>r.writeProperties({...a,loading:!1}))},T=({title:e,body:r})=>{let a="";e&&e.length&&(a=e.trim()),r&&r.length&&(a=`${a.trim()}
+${r.trim()}`);const s=document.createElement("div");s.innerHTML=a;const i=Array.from(s.getElementsByTagName("a"));let c=s.innerText;return i.forEach(t=>{c=c.replace(t.innerText,`[${t.href}] (${t.innerText})`)}),c},C=({title:e,body:r})=>{let a="";return e&&e.length&&(a=`<h2>${e.trim()}</h2>`),r&&r.length&&(a=`${a.trim()}${r.trim()}`),a.trim()},x=e=>{const{events:r}=e.get("$widget"),[a,s]=b.createEventSubscriber(r);return v.createReactComponent(e,"guide",Promise.resolve().then(()=>require("./guide-9d79906b.js")),i=>{const c=t=>{i.writeProperties({loading:!0,error:void 0,guide:void 0,dialog:void 0,contactMethods:void 0,feedbackGiven:void 0}),i.actions.dispatch("fetch",{params:t})};i.actions.create("copy",t=>{const n=new m.ClipboardItem({"text/html":new Blob([C(t)],{type:"text/html"}),"text/plain":new Blob([T(t)],{type:"text/plain"})});return m.write([n]).then(()=>{r.dispatch("widget:menu-toggled",null)})}),i.actions.create("print",()=>{const t=document.querySelector(".humany-guide .humany-paragraph"),n=window.open("","","height=500, width=500");r.dispatch("widget:menu-toggled",null),t&&n&&(n.document.write(`<html><body>${t.innerHTML}</body></html>`),n.document.close(),n.print())}),i.actions.create("back",(t,n)=>{if(!n.preventDefault)return e.getAsync("router").then(o=>{o.goBack()})}),i.actions.create("fetch",({contactMethods:t=[],dialog:n=[],guide:o,error:d})=>{if(d)return i.actions.dispatch("fetched",{error:d,guide:void 0,contactMethods:[],feedbackGiven:void 0,handoverContactMethods:[],showFeedback:!1,loading:!0});const{showFeedback:h=!0,submitButtonLabel:p="Submit"}=i.properties(),g={showFeedback:h,dialog:n,guide:o,feedbackGiven:void 0,handoverContactMethods:[],contactMethods:t.map(f=>({...f,body:l.updateForm(f,{submit:p})}))};return i.actions.dispatch("fetched",{...g,loading:!0})}),i.actions.create("fetched",t=>i.writeProperties({...t,feedbackGiven:void 0,loading:!1})),e.getAsync("router").then(t=>{const{params:n}=t.getRouteData();c(n)}),a("router:changed",(t,{current:n})=>{c(n.routeData.params)}),y(e,i),l.useForm(e,i),l.useExpand(i)}).then(()=>b.extendComponent(e,"guide",i=>{i.actions.watch("guide.fetch",(c,t)=>{const{params:{guide:n,connection:o}}=c;return n?u.DataClient.getInstance(e).then(d=>d.fetch(u.DataType.Guide,{connection:o,guideId:n})).then(t).catch(d=>{if(d)return t(d)}):t(c)})})).then(()=>{s()})};module.exports=x;

package/index.mjs

@@ -0,0 +1,141 @@
+import { FeedbackType as g, DataClient as l, DataType as b } from "@telia-ace/knowledge-data-client";
+import { updateForm as v, useForm as w, useExpand as k } from "@telia-ace/knowledge-widget-component-utilities";
+import { createEventSubscriber as y, extendComponent as T } from "@telia-ace/knowledge-widget-core";
+import { createReactComponent as x } from "@telia-ace/knowledge-widget-ui";
+import * as p from "clipboard-polyfill";
+const $ = (a, r) => {
+  r.actions.create("feedback", (n) => {
+    const d = n === "negative" ? g.Negative : g.Positive, { guide: t, submitButtonLabel: s = "Submit" } = r.properties();
+    if (t) {
+      const { connection: e, id: i, hasHandover: c } = t;
+      r.writeProperties({
+        feedbackGiven: n,
+        loading: c && d === g.Negative
+      });
+      const { events: o } = a.get("$widget");
+      return o.dispatch("tracking:feedback-given", {
+        guide: t,
+        categories: t.categories,
+        feedbackType: d.toLowerCase()
+      }), l.getInstance(a).then((u) => u.feedback(i, e, d).then(() => {
+        if (c && d === g.Negative)
+          return u.fetch(b.ContactMethods, { guideId: i }).then(({ contactMethods: f }) => r.actions.dispatch("handover", {
+            handoverContactMethods: f.map((h) => ({
+              ...h,
+              body: v(h, {
+                submit: s
+              })
+            })),
+            loading: !1
+          }));
+      }));
+    }
+  }), r.actions.create("handover", (n) => r.writeProperties({ ...n, loading: !1 }));
+}, C = ({ title: a, body: r }) => {
+  let n = "";
+  a && a.length && (n = a.trim()), r && r.length && (n = `${n.trim()}
+${r.trim()}`);
+  const d = document.createElement("div");
+  d.innerHTML = n;
+  const t = Array.from(d.getElementsByTagName("a"));
+  let s = d.innerText;
+  return t.forEach((e) => {
+    s = s.replace(e.innerText, `[${e.href}] (${e.innerText})`);
+  }), s;
+}, M = ({ title: a, body: r }) => {
+  let n = "";
+  return a && a.length && (n = `<h2>${a.trim()}</h2>`), r && r.length && (n = `${n.trim()}${r.trim()}`), n.trim();
+}, P = (a) => {
+  const { events: r } = a.get("$widget"), [n, d] = y(r);
+  return x(
+    a,
+    "guide",
+    import("./guide-bea67580.mjs"),
+    (t) => {
+      const s = (e) => {
+        t.writeProperties({
+          loading: !0,
+          error: void 0,
+          guide: void 0,
+          dialog: void 0,
+          contactMethods: void 0,
+          feedbackGiven: void 0
+        }), t.actions.dispatch("fetch", { params: e });
+      };
+      t.actions.create("copy", (e) => {
+        const i = new p.ClipboardItem({
+          "text/html": new Blob([M(e)], { type: "text/html" }),
+          "text/plain": new Blob([C(e)], {
+            type: "text/plain"
+          })
+        });
+        return p.write([i]).then(() => {
+          r.dispatch("widget:menu-toggled", null);
+        });
+      }), t.actions.create("print", () => {
+        const e = document.querySelector(".humany-guide .humany-paragraph"), i = window.open("", "", "height=500, width=500");
+        r.dispatch("widget:menu-toggled", null), e && i && (i.document.write(`<html><body>${e.innerHTML}</body></html>`), i.document.close(), i.print());
+      }), t.actions.create("back", (e, i) => {
+        if (!i.preventDefault)
+          return a.getAsync("router").then((c) => {
+            c.goBack();
+          });
+      }), t.actions.create(
+        "fetch",
+        ({ contactMethods: e = [], dialog: i = [], guide: c, error: o }) => {
+          if (o)
+            return t.actions.dispatch("fetched", {
+              error: o,
+              guide: void 0,
+              contactMethods: [],
+              feedbackGiven: void 0,
+              handoverContactMethods: [],
+              showFeedback: !1,
+              loading: !0
+            });
+          const { showFeedback: u = !0, submitButtonLabel: f = "Submit" } = t.properties(), h = {
+            showFeedback: u,
+            dialog: i,
+            guide: c,
+            feedbackGiven: void 0,
+            handoverContactMethods: [],
+            contactMethods: e.map((m) => ({
+              ...m,
+              body: v(m, { submit: f })
+            }))
+          };
+          return t.actions.dispatch("fetched", {
+            ...h,
+            loading: !0
+          });
+        }
+      ), t.actions.create("fetched", (e) => t.writeProperties({
+        ...e,
+        feedbackGiven: void 0,
+        loading: !1
+      })), a.getAsync("router").then((e) => {
+        const { params: i } = e.getRouteData();
+        s(i);
+      }), n("router:changed", (e, { current: i }) => {
+        s(i.routeData.params);
+      }), $(a, t), w(a, t), k(t);
+    }
+  ).then(() => T(a, "guide", (t) => {
+    t.actions.watch("guide.fetch", (s, e) => {
+      const {
+        params: { guide: i, connection: c }
+      } = s;
+      return i ? l.getInstance(a).then(
+        (o) => o.fetch(b.Guide, { connection: c, guideId: i })
+      ).then(e).catch((o) => {
+        if (o)
+          return e(o);
+      }) : e(s);
+    });
+  })).then(() => {
+    d();
+  });
+};
+export {
+  P as default
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@telia-ace/knowledge-widget-components-guide",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@telia-ace/knowledge-widget-ui": "*",
+    "@telia-ace/widget-utilities": "*",
+    "@telia-ace/knowledge-widget-core": "*",
+    "@telia-ace/knowledge-widget-adapters": "*",
+    "@telia-ace/knowledge-widget-component-utilities": "*",
+    "@telia-ace/widget-forms": "*",
+    "@telia-ace/widget-routing": "*",
+    "@telia-ace/widget-types-grid": "*",
+    "@telia-ace/knowledge-data-client": "*",
+    "@webprovisions/platform": "^1.1.4",
+    "clipboard-polyfill": "4.0.0-rc1"
+  },
+  "peerDependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0"
+  }
+}

package/toolbar.d.ts

@@ -0,0 +1,9 @@
+import { DispatchAction } from '../../../knowledge/ui/src/index.ts';
+import { default as React } from 'react';
+
+type Props = {
+    className?: string;
+    dispatch: DispatchAction;
+};
+declare const Toolbar: React.FC<Props>;
+export default Toolbar;

package/use-feedback.d.ts

@@ -0,0 +1,5 @@
+import { ComponentNodeController } from '../../../knowledge/core/src/index.ts';
+import { Container } from '@webprovisions/platform';
+
+declare const _default: (container: Container, controller: ComponentNodeController) => void;
+export default _default;