Split out separate DaVinci View and added example to

homepage
2023-10-27 15:10:21 -05:00 · 2023-10-27 15:10:21 -05:00 · 21a74d1699
commit 21a74d1699
parent 96a2b74fa7
6 changed files with 176 additions and 69 deletions
--- a/src/components/DaVinciAuthentication.vue
+++ b/src/components/DaVinciAuthentication.vue
@ -0,0 +1,54 @@
+<script>
+export default {
+  props: {
+    authenticated: { type: Boolean, default: false },
+  },
+};
+</script>
+<template>
+  <div class="transferSummary">
+    <div v-if="authenticated" class="authboxgreen">
+      <font-awesome-icon
+        id="auth"
+        :icon="['fas', 'user-shield']"
+        size="2l"
+        style="color: #45b408"
+      />
+      Customer Authenticated
+    </div>
+    <div v-else class="authboxred">
+      <font-awesome-icon id="noauth" :icon="['fas', 'user-lock']" size="2l" />
+      Customer Not Authenticated
+    </div>
+  </div>
+</template>
+<style>
+.authboxgreen,
+.authboxred {
+  margin: 8px;
+  border-radius: 5px;
+  padding: 11px 16px 11px 12px;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 5px;
+  font-size: 14px;
+  font-family: OpenSans, Ariel, sans-serif;
+  font-size: 11px;
+}
+
+.authboxgreen {
+  border: 2px solid #45b408;
+}
+
+.authboxred {
+  border: 2px solid #e03800;
+}
+
+#auth {
+  color: #45b408;
+}
+
+#noauth {
+  color: #e03800;
+}
+</style>
--- a/src/components/IntegrationCard.vue
+++ b/src/components/IntegrationCard.vue
@ -1,16 +1,22 @@
-
 <script>
 export default {
  props: {
    title: { type: String, default: "Integration Card" },
-    doc: { type: String, default: "<html><body><p>HTML document</p></body></html>" },
+    doc: {
+      type: String,
+      default: "<html><body><p>HTML document</p></body></html>",
+    },
  },
-
 };
 </script>
 <template>
  <h3>{{ title }}</h3>
-  <iframe class='integrationCard' :srcdoc=doc scrolling="no" onload="resizeIframe(this)"></iframe>
+  <iframe
+    class="integrationCard"
+    :srcdoc="doc"
+    scrolling="no"
+    onload="resizeIframe(this)"
+  ></iframe>
 </template>
 <style>
 span.customer {
@ -25,6 +31,7 @@ span.iva {

 iframe.integrationCard {
  border: 0;
-  width: 100%; height: 100%; 
+  width: 100%;
+  height: 100%;
 }
 </style>
--- a/src/components/TransferSummary.vue
+++ b/src/components/TransferSummary.vue
@ -3,26 +3,20 @@ export default {
  props: {
    summary: { type: String, default: "<p>Summary Should go here</p>" },
  },
-
 };
 </script>
 <template>
-  <h3>Da Vinci Transfer Summary</h3>
-  <iframe class='transferSummary' :srcdoc=summary scrolling="no" onload="resizeIframe(this)"></iframe>
+  <iframe
+    class="transferSummary"
+    :srcdoc="summary"
+    scrolling="no"
+    onload="resizeIframe(this)"
+  ></iframe>
 </template>
 <style>
-span.customer {
-  color: #ff0000;
-  font-weight: bold;
-}
-
-span.iva {
-  color: #0000a0;
-  font-weight: bold;
-}
-
 iframe.transferSummary {
  border: 0;
-  width: 100%; height: 100%; 
+  width: 100%;
+  height: 100%;
 }
 </style>
--- a/src/views/DaVinciView.vue
+++ b/src/views/DaVinciView.vue
@ -0,0 +1,16 @@
+<script setup>
+import TransferSummary from "../components/TransferSummary.vue";
+import DaVinciAuthentication from "../components/DaVinciAuthentication.vue";
+
+const props = defineProps({
+  summary: { type: String, default: "", required: true },
+  authenticated: { type: String, default: "false" },
+});
+</script>
+<template>
+  <div class="davinci">
+    <h3>Da Vinci AI</h3>
+    <DaVinciAuthentication :authenticated="props.authenticated" />
+    <TransferSummary :summary="props.summary" />
+  </div>
+</template>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -1,3 +1,19 @@
+<script setup>
+const transferSummaryHTML = `<div style="font-family: OpenSans, Ariel, sans-serif; font-size: 11px; color: white; display: flex;padding: 11px 16px 11px 12px;align-items: flex-start;gap: 8px;border-radius: 5px;background: var(--button-emphasized-regular, #0C874B);">
+  <table>
+      <tr>
+          <td><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#ffffff}</style><path d="M184 0c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56c-28.9 0-52.7-21.9-55.7-50.1c-5.2 1.4-10.7 2.1-16.3 2.1c-35.3 0-64-28.7-64-64c0-7.4 1.3-14.6 3.6-21.2C21.4 367.4 0 338.2 0 304c0-31.9 18.7-59.5 45.8-72.3C37.1 220.8 32 207 32 192c0-30.7 21.6-56.3 50.4-62.6C80.8 123.9 80 118 80 112c0-29.9 20.6-55.1 48.3-62.1C131.3 21.9 155.1 0 184 0zM328 0c28.9 0 52.6 21.9 55.7 49.9c27.8 7 48.3 32.1 48.3 62.1c0 6-.8 11.9-2.4 17.4c28.8 6.2 50.4 31.9 50.4 62.6c0 15-5.1 28.8-13.8 39.7C493.3 244.5 512 272.1 512 304c0 34.2-21.4 63.4-51.6 74.8c2.3 6.6 3.6 13.8 3.6 21.2c0 35.3-28.7 64-64 64c-5.6 0-11.1-.7-16.3-2.1c-3 28.2-26.8 50.1-55.7 50.1c-30.9 0-56-25.1-56-56V56c0-30.9 25.1-56 56-56z"/></svg></i></td>
+          <td style="font-weight: bold;">Da Vinci Summary</td>
+      </tr>
+      <tr>
+          <td></td>
+          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
+      </tr>
+  </table>
+  </div>`;
+
+const integrationCardDoc = `<html><body><h1>IntegrationCard</h1></body></html>`;
+</script>
 <template>
  <div class="home">
    <h1>Engagement Orchestration - Microservice Examples</h1>
@ -11,5 +27,28 @@
      >
      Integration.
    </p>
+    <h2>Examples</h2>
+    <ul>
+      <li>
+        <router-link
+          :to="{
+            path: 'telephonyContext',
+            query: {
+              ani: '13125138223',
+              dnis: '8449311735',
+              direction: 'INBOUND',
+              channel: 'AmazonConnect',
+              queue: 'QueueName',
+              type: 'Voice',
+              username: 'apiclient',
+              transferSummary: transferSummaryHTML,
+              integrationCardDoc: integrationCardDoc,
+              integrationCardTitle: 'Integration Card',
+            },
+          }"
+          >Telephony Context</router-link
+        >
+      </li>
+    </ul>
  </div>
 </template>
--- a/src/views/TelephonyContextView.vue
+++ b/src/views/TelephonyContextView.vue
@ -3,8 +3,8 @@ import { ref, onMounted } from "vue";
 import VerticalLabelValue from "../components/VerticalLabelValue.vue";
 import { getTenantProperty } from "../helpers/index";
 import ErrorMessage from "../components/ErrorMessage.vue";
-import TransferSummary from "../components/TransferSummary.vue";
 import IntegrationCard from "../components/IntegrationCard.vue";
+import DaVinciView from "./DaVinciView.vue";

 const props = defineProps({
  channel: { type: String, default: "" },
@ -21,7 +21,7 @@ const props = defineProps({
  integrationCardDoc: {
    type: String,
    default: "",
-    required: true
+    required: true,
  },
  authenticated: { type: String, default: "false" },
 });
@ -36,8 +36,7 @@ onMounted(() => {
 });

 function setValueFromTPS(reference, param, props) {
-
-  if (param.startsWith('tps:')) {
+  if (param.startsWith("tps:")) {
    const tpsProperty = param.substring(4, param.length);
    getTenantProperty(tpsProperty, props)
      .then((value) => {
@ -58,7 +57,6 @@ function fetchData() {
  setValueFromTPS(transferSummaryValue, props.transferSummary, props);
  setValueFromTPS(integrationCardTitleValue, props.integrationCardTitle, props);
  setValueFromTPS(integrationCardDocValue, props.integrationCardDoc, props);
-
 }
 </script>
 <template>
@ -67,30 +65,55 @@ function fetchData() {

    <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="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%">
+            <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="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 v-if="authenticated == 'true'" id="authbox">
-                <font-awesome-icon id="auth" :icon="['fas', 'user-shield']" size="2xl" style="color: #45b408;" />
-                Customer Authenticated
-              </div>
-              <div v-else id="noauthbox">
-                <font-awesome-icon id="noauth" :icon="['fas', 'user-lock']" size="2xl" />
-                Customer Not Authenticated
-              </div>
+              <VerticalLabelValue
+                label="DNIS"
+                :value="dnis"
+              ></VerticalLabelValue>
            </div>
-            <div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%">
-              <TransferSummary :summary="transferSummaryValue" />
+            <div
+              class="blockOuterSpacingRight col2 column-layout-cell"
+              style="width: 25%"
+            >
+              <DaVinciView
+                :summary="transferSummaryValue"
+                :authenticated="authenticated == 'true'"
+              />
            </div>
-            <div class="blockOuterSpacingRight col3 column-layout-cell" style="width: 50%">
-              <IntegrationCard :title="integrationCardTitleValue" :doc="integrationCardDocValue" />
+            <div
+              class="blockOuterSpacingRight col3 column-layout-cell"
+              style="width: 50%"
+            >
+              <IntegrationCard
+                :title="integrationCardTitleValue"
+                :doc="integrationCardDocValue"
+              />
            </div>
          </div>
        </div>
@ -106,30 +129,4 @@ function fetchData() {
 p {
  size: 24pt;
 }
-
-#authbox {
-  border-radius: 25px;
-  padding: 20px;
-  width: 200px;
-  height: 30px;
-  border: 2px solid #45b408;
-  font-size: 14px;
-}
-
-#noauthbox {
-  border-radius: 25px;
-  padding: 20px;
-  width: 200px;
-  height: 30px;
-  border: 2px solid #e03800;
-  font-size: 14px;
-}
-
-#auth {
-  color: #45b408;
-}
-
-#noauth {
-  color: #e03800;
-}
 </style>