From 8c7658e0909ab7b28ccad8bf8053deaacd0fd8c5 Mon Sep 17 00:00:00 2001
From: "Peter.Morton" <Peter.Morton@verint.com>
Date: Mon, 6 Nov 2023 09:47:10 -0600
Subject: [PATCH] Moving styling of transfer bot back to component and take
 summary string

---
 src/components/TransferSummary.vue | 110 ++++++++++++++++++++++++++---
 src/views/HomeView.vue             |  23 +-----
 2 files changed, 100 insertions(+), 33 deletions(-)

diff --git a/src/components/TransferSummary.vue b/src/components/TransferSummary.vue
index 9fefd3b..bb8388c 100644
--- a/src/components/TransferSummary.vue
+++ b/src/components/TransferSummary.vue
@@ -1,22 +1,110 @@
 <script>
 export default {
   props: {
-    summary: { type: String, default: "<p>Summary Should go here</p>" },
+    summary: { type: String, default: "Summary not available" },
   },
 };
 </script>
 <template>
-  <iframe
-    class="transferSummary"
-    :srcdoc="summary"
-    scrolling="no"
-    onload="resizeIframe(this)"
-  ></iframe>
+  <div class="transferSummaryContainer">
+    <table>
+      <tr>
+        <td>
+          <svg
+            id=" Layer_1"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            x="0px"
+            y="0px"
+            viewBox="0 0 98 89"
+            xml:space="preserve"
+            width="22"
+            height="22"
+            fill="none"
+          >
+            <g>
+              <path
+                class="st0"
+                d="M78.8,85H19.3c-3.1,0-5.7-2.5-5.7-5.7V33.7c0-3.1,2.5-5.7,5.7-5.7h59.5c3.1,0,5.7,2.5,5.7,5.7v45.6
+		C84.5,82.5,81.9,85,78.8,85z"
+              />
+              <g>
+                <circle class="st1" cx="35.7" cy="51.9" r="6.7" />
+                <circle class="st1" cx="62.1" cy="51.9" r="6.7" />
+              </g>
+              <circle class="st0" cx="49" cy="9.1" r="5.1" />
+              <line class="st0" x1="49" y1="28" x2="49" y2="14.1" />
+              <path
+                class="st2"
+                d="M37.9,74.8c0,0,3.8,0,11.1,0s11.1-2.5,11.1-2.5"
+              />
+              <path
+                class="st0"
+                d="M70.5,64.4h-43c-3.4,0-6.2-2.8-6.2-6.2V45.6c0-3.4,2.8-6.2,6.2-6.2h43c3.4,0,6.2,2.8,6.2,6.2v12.7
+		C76.7,61.7,73.9,64.4,70.5,64.4z"
+              />
+              <path
+                class="st0"
+                d="M13.6,64.4h-2.7c-3.4,0-6.2-2.8-6.2-6.2V45.6c0-3.4,2.8-6.2,6.2-6.2h2.7"
+              />
+              <path
+                class="st0"
+                d="M84.5,39.4h2.7c3.4,0,6.2,2.8,6.2,6.2v12.7c0,3.4-2.8,6.2-6.2,6.2h-2.7"
+              />
+            </g>
+          </svg>
+        </td>
+        <td style="font-weight: bold">Transfer Bot</td>
+      </tr>
+      <tr>
+        <td></td>
+        <td>{{ summary }}</td>
+      </tr>
+    </table>
+  </div>
 </template>
 <style>
-iframe.transferSummary {
-  border: 0;
-  width: 100%;
-  height: 100%;
+.transferSummaryContainer {
+  align-items: flex-start;
+  border: 2px solid #45b408;
+  border-radius: 5px;
+  color: white;
+  font-family: OpenSans, Ariel, sans-serif;
+  font-size: 11px;
+  gap: 8px;
+  margin: 8px;
+  padding: 11px 16px 11px 12px;
+  background: var(--button-emphasized-regular, #0c874b);
+}
+
+.st0 {
+  fill: none;
+  stroke: white;
+  stroke-width: 3;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+}
+
+.st1 {
+  fill: none;
+  stroke: white;
+  stroke-width: 2.6179;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+}
+
+.st2 {
+  fill: none;
+  stroke: white;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-miterlimit: 10;
+}
+
+svg {
+  margin: 8px;
+  enable-background: new 0 0 98 89;
 }
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 1994a45..7134ce9 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,26 +1,5 @@
 <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" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <g clip-path="url(#clip0_6923_87016)">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 4.5C4.5 4.775 4.725 5 5 5C5.275 5 5.5 4.775 5.5 4.5C5.5 4.225 5.275 4 5 4C4.725 4 4.5 4.225 4.5 4.5ZM4.5 8.5C4.5 8.775 4.725 9 5 9C5.275 9 5.5 8.775 5.5 8.5C5.5 8.225 5.275 8 5 8C4.725 8 4.5 8.225 4.5 8.5ZM5 0C3.62 0 2.5 1.12 2.5 2.5C2.5 2.705 2.53 2.9 2.58 3.09C1.385 3.39 0.5 4.465 0.5 5.75C0.5 6.68 0.965 7.5 1.67 8C0.96 8.5 0.5 9.32 0.5 10.25C0.5 11.535 1.385 12.61 2.58 12.91C2.535 13.1 2.5 13.295 2.5 13.5C2.5 14.88 3.62 16 5 16C6.38 16 7.5 14.88 7.5 13.5V9H6.145C5.95 9.44 5.515 9.75 5 9.75C4.31 9.75 3.75 9.19 3.75 8.5C3.75 7.81 4.31 7.25 5 7.25C5.51 7.25 5.95 7.56 6.145 8H7.5V5H6.145C5.95 5.44 5.515 5.75 5 5.75C4.31 5.75 3.75 5.19 3.75 4.5C3.75 3.81 4.31 3.25 5 3.25C5.51 3.25 5.95 3.56 6.145 4H7.5V2.5C7.5 1.12 6.38 0 5 0ZM14.33 8C15.04 7.5 15.5 6.68 15.5 5.75C15.5 4.465 14.615 3.39 13.42 3.09C13.465 2.9 13.5 2.705 13.5 2.5C13.5 1.12 12.38 0 11 0C9.62 0 8.5 1.12 8.5 2.5V7H9.855C10.05 6.56 10.485 6.25 11 6.25C11.69 6.25 12.25 6.81 12.25 7.5C12.25 8.19 11.69 8.75 11 8.75C10.49 8.75 10.05 8.44 9.855 8H8.5V11H9.855C10.05 10.56 10.485 10.25 11 10.25C11.69 10.25 12.25 10.81 12.25 11.5C12.25 12.19 11.69 12.75 11 12.75C10.49 12.75 10.05 12.44 9.855 12H8.5V13.5C8.5 14.88 9.62 16 11 16C12.38 16 13.5 14.88 13.5 13.5C13.5 13.295 13.47 13.1 13.42 12.91C14.615 12.61 15.5 11.535 15.5 10.25C15.5 9.32 15.035 8.5 14.33 8ZM11.5 7.5C11.5 7.225 11.275 7 11 7C10.725 7 10.5 7.225 10.5 7.5C10.5 7.775 10.725 8 11 8C11.275 8 11.5 7.775 11.5 7.5ZM11.5 11.5C11.5 11.225 11.275 11 11 11C10.725 11 10.5 11.225 10.5 11.5C10.5 11.775 10.725 12 11 12C11.275 12 11.5 11.775 11.5 11.5Z" fill="white"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_6923_87016">
-      <rect width="16" height="16" fill="white"/>
-    </clipPath>
-  </defs>
-</svg></td>
-          <td style="font-weight: bold;">Da Vinci Summary</td>
-      </tr>
-      <tr>
-          <td></td>
-          <td>Janice Jones from Acme.com authenticated using onetime passcode authentication. They successfully changed the quantity on latest order from 10 to 12.
-She wants to dicuss with someone to alter payment arrangements payment due date.  Transferring to queue.</td>
-      </tr>
-  </table>
-  </div>`;
+const transferSummaryHTML = `Janice Jones from Acme.com authenticated using onetime passcode authentication. They successfully changed the quantity on latest order from 10 to 12. She wants to dicuss with someone to alter payment arrangements payment due date. Transferring to queue.`;
 
 const scriptElementName = "script";
 const integrationCardDoc = `<html>