From 902189c34d96d8315bb45535267a432e20815653 Mon Sep 17 00:00:00 2001
From: "Peter.Morton" <Peter.Morton@verint.com>
Date: Wed, 11 Oct 2023 19:21:48 -0500
Subject: [PATCH] rename Telephony Context view and add rendering and tenant
 property lookup for transfer summary

---
 src/router/index.js                |   8 +-
 src/views/CustomerAccountView.vue  |  78 -------------
 src/views/TelephonyContextView.vue | 178 +++++++++++++++++++++++++++++
 3 files changed, 183 insertions(+), 81 deletions(-)
 delete mode 100644 src/views/CustomerAccountView.vue
 create mode 100644 src/views/TelephonyContextView.vue

diff --git a/src/router/index.js b/src/router/index.js
index 5292180..471450e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,7 @@ import DebugFrameView from "../views/DebugFrameView.vue";
 import SideBarView from "../views/SideBarView.vue";
 import SearchByReferenceView from "../views/SearchByReferenceView.vue";
 import InteractionsFlowView from "../views/InteractionsFlowView.vue";
-import CustomerAccountView from "../views/CustomerAccountView.vue";
+import CustomerAccountView from "../views/TelephonyContextView.vue";
 
 const routes = [
   {
@@ -37,17 +37,19 @@ const routes = [
     props: {
       default: (route) => ({
         sessionIdentifier: route.query._sessionIdentifier,
+        username: route.query.username,
       }),
     },
   },
   {
-    path: "/customerAccount/:accountNumber",
+    path: "/telephonyContext",
     name: "customerAccount",
     components: { default: CustomerAccountView },
     props: {
       default: (route) => ({
         ...route.params,
-        ...route.query
+        ...route.query,
+        sessionIdentifier: route.query._sessionIdentifier
       }),
     },
   },
diff --git a/src/views/CustomerAccountView.vue b/src/views/CustomerAccountView.vue
deleted file mode 100644
index 3de2677..0000000
--- a/src/views/CustomerAccountView.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<!-- eslint-disable vue/no-parsing-error -->
-<script setup>
-
-import VerticalLabelValue from "../components/VerticalLabelValue.vue";
-defineProps({
-  accountNumber: { type: String, default: "", required: true },
-  channel: { type: String, default: "" },
-  type: { type: String, default: "" },
-  queue: { type: String, default: "" },
-  direction: { type: String, default: "" },
-  ani: { type: String, default: "" },
-  dnis: { type: String, default: "" },
-  startTime: { type: String, default: "" },
-  transferSummary: { type: String, default: "" },
-});
-
-</script>
-<template>
-  <h2>Summary</h2>
-  <div class="customerAccount customer-detail-container" width="100%">
-    <div class="customer-profile-fields vertical-layout">
-      <div class="column-layout" style="width: 100%; max-width: 100%; height: 100%;">
-        <div class="row1 column-layout-row">
-          <div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%; ">
-            <h3>Telephony Data</h3>
-            <VerticalLabelValue label="Channel" :value="channel"></VerticalLabelValue>
-            <VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
-            <VerticalLabelValue label="Queue" :value="queue"></VerticalLabelValue>
-            <VerticalLabelValue label="Direction" :value="direction"></VerticalLabelValue>
-            <VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
-            <VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
-
-          </div>
-          <div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%; ">
-            <h3>Da Vinci Transfer Summary</h3>
-            <!-- <VerticalLabelValue label="Da Vinci Transfer Summary" :value="transferSummary"></VerticalLabelValue> -->
-            <p>Payments How much is my premium?</p>
-            <p>IVA: Your premium is 100 a month</p>
-            <p>Why did my premium go up?</p>
-            <p>There are many factors that can impact your premium, let me escalate you to an agent</p>
-            <p>Customer is passed over to General Inquiries queue </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped>
-@import "https://em28.verint.live/ClientResources/cr/202307201110/-/webclient/themes/default/theme.css";
-@import "https://em28.verint.live/ClientResources/cr/202307201110/-/webclient/css/extensions/corecommon.css";
-
-/* label,
-  input,
-  select,
-  textarea {
-    display: block;
-    width: 200px;
-    float: left;
-    margin-bottom: 1em;
-  }
-
-  select {
-    width: 205px;
-  }
-
-  label {
-    text-align: right;
-    width: 100px;
-    padding-right: 2em;
-  }
-
-  .clear {
-    clear: both;
-  } */
-p {
-  size: 24pt;
-}
-</style>
diff --git a/src/views/TelephonyContextView.vue b/src/views/TelephonyContextView.vue
new file mode 100644
index 0000000..660dccd
--- /dev/null
+++ b/src/views/TelephonyContextView.vue
@@ -0,0 +1,178 @@
+<script setup>
+import { ref, onMounted, h } from "vue";
+import VerticalLabelValue from "../components/VerticalLabelValue.vue";
+import { getAuthKeyFromProperties } from '../helpers/index'
+import ErrorMessage from "../components/ErrorMessage.vue";
+import TransferSummary from "../components/TransferSummary.vue";
+
+const props = defineProps({
+  channel: { type: String, default: "" },
+  type: { type: String, default: "" },
+  queue: { type: String, default: "" },
+  direction: { type: String, default: "" },
+  ani: { type: String, default: "" },
+  dnis: { type: String, default: "" },
+  startTime: { type: String, default: "" },
+  transferSummary: { type: String, default: "" },
+  username: { type: String, default: "" },
+  sessionIdentifier: { type: String, default: "" },
+});
+
+const errorMessage = ref(null);
+const transferSummaryBlock = ref("replaceme");
+
+onMounted(() => {
+  fetchData();
+});
+
+function fetchData() {
+  //clear errors
+  errorMessage.value = null;
+
+  try {
+    var authKey = getAuthKeyFromProperties(props);
+  } catch (error) {
+    console.error(error);
+    errorMessage.value = error;
+    return;
+  }
+  console.log(`Fetching TPS Property ${props.transferSummary}`)
+  fetch(
+    `${import.meta.env.VITE_EO_SERVICES_URL}/api/tps?propertyName=${props.transferSummary}&authKey=${authKey}`,
+    {
+      credentials: "include", // fetch won't send cookies unless you set credentials
+    }
+  )
+    .then((response) => {
+      // check for error response
+      if (!response.ok) {
+        // get error message from body or default to response statusText
+        const error = response.data || response.statusText;
+        return Promise.reject(error);
+      }
+      response.json().then((data) => {
+        console.log("Found Property:" + JSON.stringify(data))
+        transferSummaryBlock.value = data.data.value;
+      });
+    })
+    .catch((error) => {
+      console.error(error);
+      errorMessage.value = `${error} for TPS property ${props.transferSummary}`;
+    });
+}
+
+</script>
+<template>
+  <h2>Summary</h2>
+  <div class="customerAccount customer-detail-container" width="100%">
+    <div class="customer-profile-fields vertical-layout">
+      <div
+        class="column-layout"
+        style="width: 100%; max-width: 100%; height: 100%"
+      >
+        <div class="row1 column-layout-row">
+          <div
+            class="blockOuterSpacingRight col1 column-layout-cell"
+            style="width: 25%"
+          >
+            <h3>Telephony Data</h3>
+            <VerticalLabelValue
+              label="Channel"
+              :value="channel"
+            ></VerticalLabelValue>
+            <VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
+            <VerticalLabelValue
+              label="Queue"
+              :value="queue"
+            ></VerticalLabelValue>
+            <VerticalLabelValue
+              label="Direction"
+              :value="direction"
+            ></VerticalLabelValue>
+            <VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
+            <VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
+          </div>
+          <div
+            class="blockOuterSpacingRight col2 column-layout-cell"
+            style="width: 25%"
+          >
+            <h3>Da Vinci Transfer Summary</h3>
+            <TransferSummary :summary="transferSummaryBlock"/>
+          </div>
+          <div
+            class="blockOuterSpacingRight col3 column-layout-cell"
+            style="width: 50%"
+          >
+            <div class="row1 column-layout-row" style="width: 100%">
+              <div
+                class="blockOuterSpacingRight col1 column-layout-cell"
+                style="width: 80%"
+              >
+                <h3>Auto ID Card</h3>
+              </div>
+              <div
+                class="blockOuterSpacingRight col2 column-layout-cell"
+                style="width: 20%"
+              >
+                <img
+                  src="https://purepng.com/public/uploads/large/purepng.com-the-hartford-logologobrand-logoiconslogos-251519940773dmlaq.png"
+                  width="50"
+                  height="50"
+                />
+              </div>
+            </div>
+            <VerticalLabelValue
+              label="Company"
+              value="Trumbull Insurance Company"
+            ></VerticalLabelValue>
+            <div class="row1 column-layout-row">
+              <div
+                class="blockOuterSpacingRight col1 column-layout-cell"
+                style="width: 50%"
+              >
+                <VerticalLabelValue
+                  label="Policy Number"
+                  value="accountNumber"
+                ></VerticalLabelValue>
+              </div>
+              <div
+                class="blockOuterSpacingRight col2 column-layout-cell"
+                style="width: 50%"
+              >
+                <VerticalLabelValue
+                  label="Policy Term"
+                  value="08/19/2018 to 08/19/2019"
+                ></VerticalLabelValue>
+              </div>
+            </div>
+            <div
+              class="blockOuterSpacingRight col1 column-layout-cell"
+              style="width: 50%"
+            >
+              <VerticalLabelValue
+                label="Vehicle Info"
+                value="2011 AUDI A4 PREMIUM 
+VIN# WAUDFAFLOBA11111"
+              />
+              <VerticalLabelValue
+                label="Named Insured"
+                value="TEZZZZSTER SAZZZTER
+10 MAIN ST
+SALT LAKE CITY, UT 84101"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <ErrorMessage v-if="errorMessage" :message="errorMessage" />
+</template>
+<style scoped>
+@import "https://shared-eo.verint.live//ClientResources/cr/202307201110/-/webclient/themes/default/theme.css";
+@import "https://shared-eo.verint.live//ClientResources/cr/202307201110/-/webclient/css/extensions/corecommon.css";
+
+p {
+  size: 24pt;
+}
+</style>