added km: for using KM content

README.md

@@ -16,6 +16,8 @@ Displays Telephony Context Information. This route has been designed to be used
 
 Parameters prefixed with 'tps:' will fetch values from the Tenant Properties Service.
 
+Paremeters prefixed with 'km:' will use Knowledge Management using the {contentID}(migratableReference)/{lang}.  For example, integrationCardDoc=km:DvudRWR4yd2iRSDtlboDp8/en-US.
+
 | name                 | description                                                |
 | -------------------- | ---------------------------------------------------------- |
 | ani                  | Automatic Number Identification                            |

src/@types/HydraCollection.ts

@@ -7,3 +7,8 @@ export interface VCFGProperty {
   "vcfg:name": string;
   "vcfg:value": string;
 }
+
+export interface ArticleContent {
+  "vkm:name": string;
+  "vkm:articleBody": string;
+}

src/helpers/index.ts

@@ -1,6 +1,6 @@
 import type { ChannelAutomationAPI } from "../@types/ChannelAutomationAPI";
 import type { TenantProperty } from "../@types/TenantProperty";
-import type { HydraCollection } from "../@types/HydraCollection";
+import type { HydraCollection, ArticleContent } from "../@types/HydraCollection";
 import { jwtDecode } from "jwt-decode";
 import type { VueCookies } from "vue-cookies";
 import { inject } from "vue";
@@ -119,3 +119,29 @@ export async function getTenantProperty(
       throw error;
     });
 }
+
+export async function getKMContent(
+  contentID?: string,
+): Promise<string | undefined> {
+  const channelAutomationAPI = await getChannnelAutomationAPI();
+  if (!channelAutomationAPI) {
+    throw new Error("no channel automation api details");
+  }
+  const headers = {
+    Authorization: `OIDC_id_token ${channelAutomationAPI.authentication}`,
+    "Accept": "application/ld+json",
+  };
+  // TO-DO do something about lang parameter
+  const url = `${channelAutomationAPI.host}/km-content-service/${channelAutomationAPI.tenant}/content/vkm:AuthoredContent/${contentID}`;
+
+  return await axios
+    .get(url, { headers })
+    .then((response: { data: ArticleContent }) => {
+        return response.data["vkm:articleBody"];
+    })
+    .catch((error) => {
+      console.error("getTenantProperty: channelAutomationAPI.fetch");
+      console.error(error);
+      throw error;
+    });
+}

src/views/HomePage.vue

@@ -7,7 +7,7 @@
       </li>
       <li>
         <router-link
-          to="/telephonyContext?ani=+13125138223&dnis=unknown&queue=GeneralInquires&direction=INBOUND&channel=AmazonConnect&type=Voice&transferSummary=summary&integrationCardTitle=tps:demo.integrationcard.title&integrationCardDoc=tps:demo.integrationcard.doc&_sessionIdentifier=bc93f1fc"
+          to="/telephonyContext?ani=+13125138223&dnis=unknown&queue=GeneralInquires&direction=INBOUND&channel=AmazonConnect&type=Voice&transferSummary=summary&integrationCardTitle=tps:demo.integrationcard.title&integrationCardDoc=km:DvudRWR4yd2iRSDtlboDp8/en-US&_sessionIdentifier=bc93f1fc"
         >
           Telephony Context
         </router-link>

src/views/TelephonyContext.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
-import { getTenantProperty } from "../helpers/index";
+import { getTenantProperty, getKMContent } from "../helpers/index";
 import VerticalLabelValue from "../components/VerticalLabelValue.vue";
 import ErrorMessage from "../components/ErrorMessage.vue";
 import IntegrationCard from "../components/IntegrationCard.vue";
@@ -46,6 +46,12 @@ function setValueFromTPS(reference: { value: string }, param: string) {
       .catch((error: Error) => {
         errorMessage.value = error.message;
       });
+  } else if (param.startsWith("km:")) {
+    getKMContent(param.substring(3, param.length)).then((content) => {
+      if(content) reference.value = content;
+    }).catch((error: Error) => {
+        errorMessage.value = error.message;
+      });
   } else {
     reference.value = param;
   }
@@ -65,15 +71,9 @@ function fetchData() {
   <div>
     <div class="customerAccount customer-detail-container" width="100%">
       <div class="customer-profile-fields vertical-layout">
-        <div
+        <div class="column-layout" style="width: 100%; max-width: 100%; height: 100%">
-          class="column-layout"
-          style="width: 100%; max-width: 100%; height: 100%"
-        >
           <div class="row1 column-layout-row">
-            <div
+            <div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%">
-              class="blockOuterSpacingRight col1 column-layout-cell"
-              style="width: 25%"
-            >
               <h3>Telephony Data</h3>
               <VerticalLabelValue label="Channel" :value="channel" />
               <VerticalLabelValue label="Type" :value="type" />
@@ -82,24 +82,12 @@ function fetchData() {
               <VerticalLabelValue label="ANI" :value="ani" />
               <VerticalLabelValue label="DNIS" :value="dnis" />
             </div>
-            <div
+            <div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%">
-              class="blockOuterSpacingRight col2 column-layout-cell"
+              <DaVinciView :summary="transferSummaryValue" :authenticated="authenticated == 'true'"
-              style="width: 25%"
+                :crs-score="Number(crsScore)" />
-            >
-              <DaVinciView
-                :summary="transferSummaryValue"
-                :authenticated="authenticated == 'true'"
-                :crs-score="Number(crsScore)"
-              />
             </div>
-            <div
+            <div class="blockOuterSpacingRight col3 column-layout-cell" style="width: 50%">
-              class="blockOuterSpacingRight col3 column-layout-cell"
+              <IntegrationCard :title="integrationCardTitleValue" :doc="integrationCardDocValue" />
-              style="width: 50%"
-            >
-              <IntegrationCard
-                :title="integrationCardTitleValue"
-                :doc="integrationCardDocValue"
-              />
             </div>
           </div>
         </div>