rename Telephony Context view and add rendering
and tenant property lookup for transfer summary
This commit is contained in:
parent
5c802c8e4e
commit
902189c34d
@ -5,7 +5,7 @@ import DebugFrameView from "../views/DebugFrameView.vue";
|
|||||||
import SideBarView from "../views/SideBarView.vue";
|
import SideBarView from "../views/SideBarView.vue";
|
||||||
import SearchByReferenceView from "../views/SearchByReferenceView.vue";
|
import SearchByReferenceView from "../views/SearchByReferenceView.vue";
|
||||||
import InteractionsFlowView from "../views/InteractionsFlowView.vue";
|
import InteractionsFlowView from "../views/InteractionsFlowView.vue";
|
||||||
import CustomerAccountView from "../views/CustomerAccountView.vue";
|
import CustomerAccountView from "../views/TelephonyContextView.vue";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@ -37,17 +37,19 @@ const routes = [
|
|||||||
props: {
|
props: {
|
||||||
default: (route) => ({
|
default: (route) => ({
|
||||||
sessionIdentifier: route.query._sessionIdentifier,
|
sessionIdentifier: route.query._sessionIdentifier,
|
||||||
|
username: route.query.username,
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/customerAccount/:accountNumber",
|
path: "/telephonyContext",
|
||||||
name: "customerAccount",
|
name: "customerAccount",
|
||||||
components: { default: CustomerAccountView },
|
components: { default: CustomerAccountView },
|
||||||
props: {
|
props: {
|
||||||
default: (route) => ({
|
default: (route) => ({
|
||||||
...route.params,
|
...route.params,
|
||||||
...route.query
|
...route.query,
|
||||||
|
sessionIdentifier: route.query._sessionIdentifier
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,78 +0,0 @@
|
|||||||
<!-- eslint-disable vue/no-parsing-error -->
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
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>
|
|
||||||
<h2>Summary</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>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style scoped>
|
|
||||||
@import "https://em28.verint.live/ClientResources/cr/202307201110/-/webclient/themes/default/theme.css";
|
|
||||||
@import "https://em28.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
text-align: right;
|
|
||||||
width: 100px;
|
|
||||||
padding-right: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clear {
|
|
||||||
clear: both;
|
|
||||||
} */
|
|
||||||
p {
|
|
||||||
size: 24pt;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
178
src/views/TelephonyContextView.vue
Normal file
178
src/views/TelephonyContextView.vue
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, h } from "vue";
|
||||||
|
import VerticalLabelValue from "../components/VerticalLabelValue.vue";
|
||||||
|
import { getAuthKeyFromProperties } from '../helpers/index'
|
||||||
|
import ErrorMessage from "../components/ErrorMessage.vue";
|
||||||
|
import TransferSummary from "../components/TransferSummary.vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
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: "" },
|
||||||
|
username: { type: String, default: "" },
|
||||||
|
sessionIdentifier: { type: String, default: "" },
|
||||||
|
});
|
||||||
|
|
||||||
|
const errorMessage = ref(null);
|
||||||
|
const transferSummaryBlock = ref("replaceme");
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchData();
|
||||||
|
});
|
||||||
|
|
||||||
|
function fetchData() {
|
||||||
|
//clear errors
|
||||||
|
errorMessage.value = null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
var authKey = getAuthKeyFromProperties(props);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
errorMessage.value = error;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log(`Fetching TPS Property ${props.transferSummary}`)
|
||||||
|
fetch(
|
||||||
|
`${import.meta.env.VITE_EO_SERVICES_URL}/api/tps?propertyName=${props.transferSummary}&authKey=${authKey}`,
|
||||||
|
{
|
||||||
|
credentials: "include", // fetch won't send cookies unless you set credentials
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
// check for error response
|
||||||
|
if (!response.ok) {
|
||||||
|
// get error message from body or default to response statusText
|
||||||
|
const error = response.data || response.statusText;
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
response.json().then((data) => {
|
||||||
|
console.log("Found Property:" + JSON.stringify(data))
|
||||||
|
transferSummaryBlock.value = data.data.value;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error(error);
|
||||||
|
errorMessage.value = `${error} for TPS property ${props.transferSummary}`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<h2>Summary</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>
|
||||||
|
<div
|
||||||
|
class="blockOuterSpacingRight col2 column-layout-cell"
|
||||||
|
style="width: 25%"
|
||||||
|
>
|
||||||
|
<h3>Da Vinci Transfer Summary</h3>
|
||||||
|
<TransferSummary :summary="transferSummaryBlock"/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="blockOuterSpacingRight col3 column-layout-cell"
|
||||||
|
style="width: 50%"
|
||||||
|
>
|
||||||
|
<div class="row1 column-layout-row" style="width: 100%">
|
||||||
|
<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>
|
||||||
|
<ErrorMessage v-if="errorMessage" :message="errorMessage" />
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
@import "https://shared-eo.verint.live//ClientResources/cr/202307201110/-/webclient/themes/default/theme.css";
|
||||||
|
@import "https://shared-eo.verint.live//ClientResources/cr/202307201110/-/webclient/css/extensions/corecommon.css";
|
||||||
|
|
||||||
|
p {
|
||||||
|
size: 24pt;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user