From 956993c69952f80ef319de2f1340f560d8a4e5b1 Mon Sep 17 00:00:00 2001
From: "Peter.Morton" <Peter.Morton@verint.com>
Date: Tue, 11 Jul 2023 01:18:48 +0100
Subject: [PATCH] Added CustomerAccount view

---
 src/App.vue                       |  1 +
 src/router/index.js               |  7 +++
 src/views/CustomerAccountView.vue | 82 +++++++++++++++++++++++++++++++
 3 files changed, 90 insertions(+)
 create mode 100644 src/views/CustomerAccountView.vue

diff --git a/src/App.vue b/src/App.vue
index 2adc45b..7b270fd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,5 +3,6 @@
   <router-link to="/about">About</router-link>
   <router-link to="/referenceId">Reference ID Tracker</router-link>
   <router-link to="/interactionsFlow">Interactions Flow</router-link>
+  <router-link to="/customerAccount">Customer Account</router-link>
   <router-view></router-view>
 </template>
diff --git a/src/router/index.js b/src/router/index.js
index 38f5db3..d1790a1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import ReferenSearchByReferenceViewceID from "../views/SearchByReferenceView.vue";
 import InteractionsFlowView from "../views/InteractionsFlowView.vue";
+import CustomerAccountView from "../views/CustomerAccountView.vue";
 
 const routes = [
   {
@@ -28,6 +29,12 @@ const routes = [
     name: "interactionsFlow",
     component: InteractionsFlowView,
   },
+  {
+    path: "/customerAccount/:accountNumber",
+    name: "customerAccount",
+    component: CustomerAccountView,
+    props: true,
+  },
 ];
 
 const router = createRouter({
diff --git a/src/views/CustomerAccountView.vue b/src/views/CustomerAccountView.vue
new file mode 100644
index 0000000..24aaf6f
--- /dev/null
+++ b/src/views/CustomerAccountView.vue
@@ -0,0 +1,82 @@
+<script setup>
+defineProps({ accountNumber: { 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" />
+
+    <div class="buttons">
+      <button @click="editAccount">Edit Account</button>
+      <button @click="newAccount">New Account</button>
+    </div>
+  </div>
+</template>
+<style scoped>
+label,
+input,
+select,
+textarea {
+  display: block;
+  width: 200px;
+  float: left;
+  margin-bottom: 1em;
+}
+
+select {
+  width: 205px;
+}
+
+label {
+  text-align: right;
+  width: 100px;
+  padding-right: 2em;
+}
+
+.clear {
+  clear: both;
+}
+</style>