jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tpa-conf styling and routing WIP

Browse source
This commit is contained in:
Katie Kroell 2024-01-22 17:01:01 -05:00
parent 0fdc6c54e7
commit 3278437d29
1 changed files with 124 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
src/layouts/tpa-confirmation/tpa-confirmation.vue
View file

@ -12,17 +12,47 @@
class="mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="header-container">
<img :src="tpaConfirmationImage" />
<span v-html="tpaConfirmationHeaderText"></span>
</div>
<div class="subheader-container">
<span v-html="tpaConfirmationSubheaderText"></span>
</div>
<textBlock
ref="tpaConfirmationBody"
:customText="tpaConfirmationBody" />
id="tpaConfirmationBodyOne"
ref="tpaConfirmationBodyOne"
:customText="tpaConfirmationBodyOne" />
<textBlock
id="tpaConfirmationBodyTwo"
ref="tpaConfirmationBodyTwo"
:customText="tpaConfirmationBodyTwo"
class="small text-color--darker-gray" />
<div class="contact-carrier">
<span
v-for="copy in splitContactCarrierText"
:key="copy">
<span
v-if="doesCopyContainRouterLink(copy)">
<routerLink
:to="{
query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
name: 'root',
}">{{ getRouterLinkDisplayTextFromCopy(copy) }}</routerLink>
</span>
<span
v-else
v-html="copy">
</span>
</span>
</div>
<div>
<textBlock
id="tpaConfirmationOrderDetailsTitle"
ref="tpaConfirmationOrderDetailsTitle"
:customText="orderDetailsTitle"
:marginTopSizeOverride="4"
class="fw-bold text-color--black"
class="order-details"
@click-event="navigateWithScenario()" />
<deductibleBox ref="deductibleBox" :value="deductibleBoxValue" />
</div>
@ -41,13 +71,16 @@
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
// Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { doesCopyContainRouterLink,
fetchCmsContentForPage,
splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
@ -63,7 +96,7 @@ export default {
siteHeader,
siteFooter,
vehicleBanner,
siteSubHeader,
// siteSubHeader,
textBlock,
deductibleBox,
// eslint-disable-next-line vue/no-reserved-component-names
@ -90,11 +123,12 @@ export default {
return { mainStore };
},
data() {
const { companyName } = useMainStore().order.serviceLocation.provider;
const { companyName } = toTitleCase(useMainStore().order.serviceLocation.provider.companyName ?? '');
return {
widget: {
tpaConfirmation: 'TPAConfirmationContent',
orderDetails: 'OrderDetailsContent'
orderDetails: 'OrderDetailsContent',
contactCarrier: 'ContactCarrierContent'
},
companyName,
customValueMap: {
@ -103,9 +137,16 @@ export default {
};
},
computed: {
tpaConfirmationBody() {
tpaConfirmationBodyOne() {
return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT)
.replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber);
.replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber)
.replaceAll('{custom:glassShop}', this.preferredShopName);
},
tpaConfirmationBodyTwo() {
return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
},
preferredShopName() {
return toTitleCase(useMainStore().order.serviceLocation.provider.companyName);
},
preferredShopPhoneNumber() {
return this.toDisplayPhoneNumber(useMainStore().order.serviceLocation.provider.phoneNumber);
@ -121,6 +162,22 @@ export default {
},
deductibleBoxValue() {
return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
},
tpaConfirmationHeaderText() {
return this.getCmsContent('TPAConfirmationContent', 'HeaderText');
},
tpaConfirmationSubheaderText() {
return this.getCmsContent('TPAConfirmationContent', 'SubheaderText')
.replaceAll('{custom:glassShop}', this.preferredShopName);
},
tpaConfirmationImage() {
return this.getCmsContent('TPAConfirmationContent', 'Image');
},
contactCarrierText() {
return this.getCmsContent(this.widget.contactCarrier, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
},
splitContactCarrierText() {
return this.splitCopyOnCMSPlaceHolder(this.contactCarrierText);
}
},
methods:
@ -150,10 +207,65 @@ export default {
},
toDisplayPhoneNumber,
toTitleCase,
formatAmountInDollars
formatAmountInDollars,
splitCopyOnCMSPlaceHolder,
doesCopyContainRouterLink,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy
}
};
</script>
<style lang="scss" scoped>
.header-container {
text-align: center;
padding-bottom: 0.75rem;
font-size: 1.25rem;
color: $black;
span {
margin-left: 0.5rem;
}
}
.subheader-container {
text-align: center;
padding-bottom: 1rem;
font-weight: 500;
color: $black;
}
#tpaConfirmationBodyOne {
margin-top: 0;
:deep(p) {
color: $darker-gray;
line-height: 1.5rem;
font-size: 14px;
margin-bottom: 1rem;
strong {
color: $black;
}
}
}
#tpaConfirmationBodyTwo {
line-height: 1.5rem;
margin-top: 0;
}
#tpaConfirmationOrderDetailsTitle {
font-weight: 500;
line-height: 1.25rem;
color: $black;
margin-bottom: 1rem;
margin-top: 2rem;
}
.contact-carrier {
font-size: 14px;
line-height: 1.5rem;
color: $darker-gray;
margin-top: 1rem;
}
</style>