From da1faf10675bff554b4c1ff3b9050ac966c6bd7a Mon Sep 17 00:00:00 2001
From: "Peter.Morton" <Peter.Morton@verint.com>
Date: Wed, 27 Sep 2023 13:30:00 -0500
Subject: [PATCH] Hartford specific customerAccount example

---
 src/components/VerticalLabelValue.vue |  17 +++
 src/router/index.js                   |  17 ++-
 src/views/CustomerAccountView.vue     | 165 +++++++++++++++-----------
 3 files changed, 127 insertions(+), 72 deletions(-)
 create mode 100644 src/components/VerticalLabelValue.vue

diff --git a/src/components/VerticalLabelValue.vue b/src/components/VerticalLabelValue.vue
new file mode 100644
index 0000000..67b434d
--- /dev/null
+++ b/src/components/VerticalLabelValue.vue
@@ -0,0 +1,17 @@
+
+<script setup>
+// eslint-disable-next-line
+const props = defineProps(["label", "value"]);
+const rows = Math.ceil(props.value.length/18);
+</script>
+<template>
+    <div class="vertical-layout-cell">
+        <div class="GTTextLabel GTRTextLabel" :title="label" style="">{{ label }}</div>
+    </div>
+    <div class="vertical-layout-cell">
+        <textarea
+:value="value" class="GTTextField read-only" :title="label" type="textarea" readonly="" :rows="rows"
+            maxlength="1024" />
+    </div>
+</template>
+<style></style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 6b12651..c6525de 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -43,9 +43,20 @@ const routes = [
   {
     path: "/customerAccount/:accountNumber",
     name: "customerAccount",
-    component: CustomerAccountView,
-    components: { default: CustomerAccountView, SideBarView: SideBarView },
-    props: { default: true, SideBarView: true },
+    components: { default: CustomerAccountView },
+    props: {
+      default: (route) => ({
+        accountNumber: route.params.accountNumber,
+        channel: route.query.channel,
+        type: route.query.type,
+        queue: route.query.queue,
+        direction: route.query.direction,
+        startTime: route.query.startTime,
+        dnis: route.query.dnis,
+        ani: route.query.ani,
+        transferSummary: route.query.transferSummary
+      }),
+    },
   },
   {
     path: "/debug",
diff --git a/src/views/CustomerAccountView.vue b/src/views/CustomerAccountView.vue
index 24aaf6f..e174dfb 100644
--- a/src/views/CustomerAccountView.vue
+++ b/src/views/CustomerAccountView.vue
@@ -1,82 +1,109 @@
+<!-- eslint-disable vue/no-parsing-error -->
 <script setup>
-defineProps({ accountNumber: { type: String, default: "" } });
+
+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>
-  <div class="customerAccount">
-    <label for="accountNumber">Account Number:</label>
-    <input
-      id="accountNumber"
-      :value="accountNumber"
-      type="text"
-      name="accountNumber"
-      readonly
-    />
-    <br class="clear" />
-    <label for="planType">Plan Type:</label>
-    <input id="planType" value="Plan 1" type="text" name="planType" readonly />
-    <br class="clear" />
-    <label for="customerName">Customer Name:</label>
-    <input
-      id="customerName"
-      value="Joe Bloggs"
-      type="text"
-      name="customerName"
-      readonly
-    />
-    <br class="clear" />
-    <label for="addressLineOne">Address Line 1:</label>
-    <input
-      id="addressLineOne"
-      value="1 Bloggs Avenue"
-      type="text"
-      name="addressLineOne"
-      readonly
-    />
-    <br class="clear" />
-    <label for="addressLineTwo">Address Line 2:</label>
-    <input
-      id="addressLineTwo"
-      value=""
-      type="text"
-      name="addressLineTwo"
-      readonly
-    />
-    <br class="clear" />
-    <label for="postCode">Postcode:</label>
-    <input id="postCode" value="JB1 1D3" type="text" name="postCode" readonly />
-    <br class="clear" />
-    <label for="city">City:</label>
-    <input id="city" value="Glasgow" type="text" name="city" readonly />
-    <br class="clear" />
+  <h2>Summary {{accountNumber}}</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 class="buttons">
-      <button @click="editAccount">Edit Account</button>
-      <button @click="newAccount">New Account</button>
+          </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 class="blockOuterSpacingRight col2 column-layout-cell" style="width: 50%; ">
+            <div class="row1 column-layout-row">
+              <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>
 </template>
 <style scoped>
-label,
-input,
-select,
-textarea {
-  display: block;
-  width: 200px;
-  float: left;
-  margin-bottom: 1em;
-}
+@import "https://em32.verint.live/ClientResources/cr/202307201110/-/webclient/themes/default/theme.css";
+@import "https://em32.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;
-}
+  select {
+    width: 205px;
+  }
 
-label {
-  text-align: right;
-  width: 100px;
-  padding-right: 2em;
-}
+  label {
+    text-align: right;
+    width: 100px;
+    padding-right: 2em;
+  }
 
-.clear {
-  clear: both;
+  .clear {
+    clear: both;
+  } */
+p {
+  size: 24pt;
 }
 </style>