From be9f79594d62695651703162ae5d1521c7ef7290 Mon Sep 17 00:00:00 2001
From: "Peter.Morton" <Peter.Morton@verint.com>
Date: Fri, 27 Oct 2023 17:26:18 -0500
Subject: [PATCH] Added order status example

---
 src/views/HomeView.vue | 94 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 91 insertions(+), 3 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 1e1d4bb..be9aa31 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,17 +2,105 @@
 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><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>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>
+          <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 integrationCardDoc = `<html><body><h1>IntegrationCard</h1></body></html>`;
+const integrationCardDoc = `<html>
+
+<head>
+    <script src=https://kit.fontawesome.com/31d985961d.js crossorigin="anonymous"></ script>
+    <style>
+        body {
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 11px;
+        }
+
+        .orderHeader {
+            border-radius: 5px;
+            background: var(--button-emphasized-regular, #bfc7c3);
+        }
+
+        .orderDetail {
+            border-radius: 5px;
+            background: var(--button-emphasized-regular, #f5f8f6);
+        }
+
+        .right {
+            text-align: center;
+        }
+
+        .flex-container {
+            display: flex;
+        }
+
+        .flex-container>div {
+            margin-right: 10px;
+            margin-left: 10px;
+        }
+
+        .push {
+            margin-left: auto !important; 
+        }
+    </style>
+</head>
+<body>
+    <div class="orderHeader">
+        <div class="flex-container">
+            <div>
+                <p>ORDER PLACED</p>
+                <p>26 October 2023</p>
+            </div>
+            <div>
+                <p>TOTAL</p>
+                <p>$1440</p>
+            </div>
+            <div>
+                <p>DISPATCH TO</p>
+                <p>Janine Jones</p>
+            </div>
+            <div class="push">
+                <p>ORDER # 203-68237823-2378192</p>
+                <a>View order details</a><a> Invoice</a>
+            </div>
+        </div>
+    </div>
+    <div class="orderDetail">
+        <h3>Arriving next wednesday by 10 PM</h3>
+        <p>Awaiting Processing</p>
+        <div>
+            <table>
+                <tr>
+                    <td><i class="fa-solid fa-boxes-packing fa-2xl" style="color: #cd183c; margin: 10px"></i></td>
+                    <td>
+                        <a>Accurint Pro 2023</a>
+                        <p>Quantity: 12</p>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+    </div>
+</body>
+
+</html>`;
+
 </script>
 <template>
   <div class="home">