Added integrationCard component

src/views/TelephonyContextView.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import VerticalLabelValue from "../components/VerticalLabelValue.vue";
-import { getAuthKeyFromProperties } from "../helpers/index";
+import { getTenantProperty } from "../helpers/index";
 import ErrorMessage from "../components/ErrorMessage.vue";
 import TransferSummary from "../components/TransferSummary.vue";
+import IntegrationCard from "../components/IntegrationCard.vue";
 
 const props = defineProps({
   channel: { type: String, default: "" },
@@ -13,165 +14,78 @@ const props = defineProps({
   ani: { type: String, default: "" },
   dnis: { type: String, default: "" },
   startTime: { type: String, default: "" },
-  transferSummary: { type: String, default: "" },
   username: { type: String, default: "" },
   sessionIdentifier: { type: String, default: "" },
+  transferSummary: { type: String, default: "", required: true },
+  integrationCardTitle: { type: String, default: "", required: true  },
+  integrationCardDoc: {
+    type: String,
+    default: "",
+    required: true 
+  },
 });
 
 const errorMessage = ref(null);
-const transferSummaryBlock = ref("replaceme");
+const transferSummaryValue = ref(null);
+const integrationCardTitleValue = ref(null);
+const integrationCardDocValue = ref(props.integrationCardDoc);
 
 onMounted(() => {
   fetchData();
 });
 
+function setValueFromTPS(reference, param, props) {
+  getTenantProperty(param, props)
+    .then((value) => {
+      reference.value = value;
+    })
+    .catch((err) => {
+      errorMessage.value = `${err} for TPS property ${param}`;
+    });
+}
+
 function fetchData() {
   //clear errors
   errorMessage.value = null;
 
-  try {
+  setValueFromTPS(transferSummaryValue, props.transferSummary, props);
-    var authKey = getAuthKeyFromProperties(props);
+  setValueFromTPS(integrationCardTitleValue, props.integrationCardTitle, props);
-  } catch (error) {
+  setValueFromTPS(integrationCardDocValue, props.integrationCardDoc, props);
-    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>
+  <div>
   <h2>Summary</h2>
   <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
+            <VerticalLabelValue label="Channel" :value="channel"></VerticalLabelValue>
-              label="Channel"
-              :value="channel"
-            ></VerticalLabelValue>
             <VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
-            <VerticalLabelValue
+            <VerticalLabelValue label="Queue" :value="queue"></VerticalLabelValue>
-              label="Queue"
+            <VerticalLabelValue label="Direction" :value="direction"></VerticalLabelValue>
-              :value="queue"
-            ></VerticalLabelValue>
-            <VerticalLabelValue
-              label="Direction"
-              :value="direction"
-            ></VerticalLabelValue>
             <VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
             <VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
           </div>
-          <div
+          <div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%">
-            class="blockOuterSpacingRight col2 column-layout-cell"
+            <TransferSummary :summary="transferSummaryValue" />
-            style="width: 25%"
-          >
-            <h3>Da Vinci Transfer Summary</h3>
-            <TransferSummary :summary="transferSummaryBlock" />
           </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%"
-          >
-            <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" />
+</div>
 </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/themes/default/theme.css";
-@import "https://shared-eo.verint.live//ClientResources/cr/202307201110/-/webclient/css/extensions/corecommon.css";
+@import "https://shared-eo.verint.live/ClientResources/cr/202307201110/-/webclient/css/extensions/corecommon.css";
 
 p {
   size: 24pt;