Hartford specific customerAccount example
This commit is contained in:
parent
0b86bbb899
commit
da1faf1067
17
src/components/VerticalLabelValue.vue
Normal file
17
src/components/VerticalLabelValue.vue
Normal file
@ -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>
|
||||||
@ -43,9 +43,20 @@ const routes = [
|
|||||||
{
|
{
|
||||||
path: "/customerAccount/:accountNumber",
|
path: "/customerAccount/:accountNumber",
|
||||||
name: "customerAccount",
|
name: "customerAccount",
|
||||||
component: CustomerAccountView,
|
components: { default: CustomerAccountView },
|
||||||
components: { default: CustomerAccountView, SideBarView: SideBarView },
|
props: {
|
||||||
props: { default: true, SideBarView: true },
|
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",
|
path: "/debug",
|
||||||
|
|||||||
@ -1,82 +1,109 @@
|
|||||||
|
<!-- eslint-disable vue/no-parsing-error -->
|
||||||
<script setup>
|
<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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="customerAccount">
|
<h2>Summary {{accountNumber}}</h2>
|
||||||
<label for="accountNumber">Account Number:</label>
|
<div class="customerAccount customer-detail-container" width="100%">
|
||||||
<input
|
<div class="customer-profile-fields vertical-layout">
|
||||||
id="accountNumber"
|
<div class="column-layout" style="width: 100%; max-width: 100%; height: 100%;">
|
||||||
:value="accountNumber"
|
<div class="row1 column-layout-row">
|
||||||
type="text"
|
<div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%; ">
|
||||||
name="accountNumber"
|
<h3>Telephony Data</h3>
|
||||||
readonly
|
<VerticalLabelValue label="Channel" :value="channel"></VerticalLabelValue>
|
||||||
/>
|
<VerticalLabelValue label="Type" :value="type"></VerticalLabelValue>
|
||||||
<br class="clear" />
|
<VerticalLabelValue label="Queue" :value="queue"></VerticalLabelValue>
|
||||||
<label for="planType">Plan Type:</label>
|
<VerticalLabelValue label="Direction" :value="direction"></VerticalLabelValue>
|
||||||
<input id="planType" value="Plan 1" type="text" name="planType" readonly />
|
<VerticalLabelValue label="ANI" :value="ani"></VerticalLabelValue>
|
||||||
<br class="clear" />
|
<VerticalLabelValue label="DNIS" :value="dnis"></VerticalLabelValue>
|
||||||
<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">
|
</div>
|
||||||
<button @click="editAccount">Edit Account</button>
|
<div class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%; ">
|
||||||
<button @click="newAccount">New Account</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
label,
|
@import "https://em32.verint.live/ClientResources/cr/202307201110/-/webclient/themes/default/theme.css";
|
||||||
input,
|
@import "https://em32.verint.live/ClientResources/cr/202307201110/-/webclient/css/extensions/corecommon.css";
|
||||||
select,
|
/* label,
|
||||||
textarea {
|
input,
|
||||||
display: block;
|
select,
|
||||||
width: 200px;
|
textarea {
|
||||||
float: left;
|
display: block;
|
||||||
margin-bottom: 1em;
|
width: 200px;
|
||||||
}
|
float: left;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
width: 205px;
|
width: 205px;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
padding-right: 2em;
|
padding-right: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear {
|
.clear {
|
||||||
clear: both;
|
clear: both;
|
||||||
|
} */
|
||||||
|
p {
|
||||||
|
size: 24pt;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user