Added integrationCard component

This commit is contained in:
Peter Morton 2023-10-16 21:53:23 -05:00
parent b4a31c76ca
commit 706c2e5402

View File

@ -1,9 +1,10 @@
<script setup>
import { ref, onMounted } from "vue";
import VerticalLabelValue from "../components/VerticalLabelValue.vue";
import { getAuthKeyFromProperties } from "../helpers/index";
import { getTenantProperty } from "../helpers/index";
import ErrorMessage from "../components/ErrorMessage.vue";
import TransferSummary from "../components/TransferSummary.vue";
import IntegrationCard from "../components/IntegrationCard.vue";
const props = defineProps({
channel: { type: String, default: "" },
@ -13,165 +14,78 @@ const props = defineProps({
ani: { type: String, default: "" },
dnis: { type: String, default: "" },
startTime: { type: String, default: "" },
transferSummary: { type: String, default: "" },
username: { type: String, default: "" },
sessionIdentifier: { type: String, default: "" },
transferSummary: { type: String, default: "", required: true },
integrationCardTitle: { type: String, default: "", required: true },
integrationCardDoc: {
type: String,
default: "",
required: true
},
});
const errorMessage = ref(null);
const transferSummaryBlock = ref("replaceme");
const transferSummaryValue = ref(null);
const integrationCardTitleValue = ref(null);
const integrationCardDocValue = ref(props.integrationCardDoc);
onMounted(() => {
fetchData();
});
function setValueFromTPS(reference, param, props) {
getTenantProperty(param, props)
.then((value) => {
reference.value = value;
})
.catch((err) => {
errorMessage.value = `${err} for TPS property ${param}`;
});
}
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}`;
});
setValueFromTPS(transferSummaryValue, props.transferSummary, props);
setValueFromTPS(integrationCardTitleValue, props.integrationCardTitle, props);
setValueFromTPS(integrationCardDocValue, props.integrationCardDoc, props);
}
</script>
<template>
<div>
<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="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%"
>
<div class="blockOuterSpacingRight col1 column-layout-cell" style="width: 25%">
<h3>Telephony Data</h3>
<VerticalLabelValue
label="Channel"
:value="channel"
></VerticalLabelValue>
<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="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 class="blockOuterSpacingRight col2 column-layout-cell" style="width: 25%">
<TransferSummary :summary="transferSummaryValue" />
</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 class="blockOuterSpacingRight col3 column-layout-cell" style="width: 50%">
<IntegrationCard :title="integrationCardTitleValue" :doc="integrationCardDocValue" />
</div>
</div>
</div>
</div>
</div>
<ErrorMessage v-if="errorMessage" :message="errorMessage" />
</div>
</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";
@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;