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

INSR-7770: tpa-confirmation parity updates

Browse source
This commit is contained in:
Alex Humphries 2026-01-29 13:00:22 -05:00
parent 8622d5d553
commit 9d0a15f861
7 changed files with 73 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/constants/dynamic-strings.js
View file

@ -4,7 +4,8 @@ const dynamicStrings = Object.freeze({
ROUTER_LINK: 'routerLink:',
MODAL_LINK: 'modalLink',
TEXT_LINK: 'textLink',
EXTERNAL_LINK: 'externalLink'
EXTERNAL_LINK: 'externalLink',
PHONE_LINK: 'phoneLink'
});
export default dynamicStrings;

2
src/digital-components/text-block/text-block.vue
View file

@ -39,7 +39,7 @@ import {
splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
getExternalLink
getExternalLink,
} from '@/helpers/cms-content-helper';
import applicationConfig from '@/constants/application-config';

9
src/helpers/cms-content-helper.js
View file

@ -623,6 +623,15 @@ export function getRouterLinkHtmlStringFromCopy(copy) {
return `<a href='/?issPage=${getRouterLinkRouteFromCopy(copy)}' class='router-link'>${getRouterLinkDisplayTextFromCopy(copy)}</a>`;
}
/**
* Returns a phone link as an 'a' tag element
* @param copy
* @returns string
*/
export function getPhoneLinkHtmlStringFromPhoneNumber(phoneNumber) {
return `<a href='tel:${phoneNumber}' class='phone-link'>${phoneNumber}.</a>`;
}
// Copy returned from the CMS that has newlines will return blocks wrapped in
// <p ... >...</p>
// This function returns an array of each paragraph, works with or without html

4
src/helpers/order-helper.js
View file

@ -40,12 +40,12 @@ export async function submitWorkOrder({ submitType }) {
shouldAwaitSaveSessionQueue: true,
submitAfterSave: true
});
store.createSubmittedOrder(submitType);
await store.createSubmittedOrder(submitType);
}
export async function submitBailout() {
const store = useMainStore();
store.resetSubmittedOrder();
await store.saveSession({});
store.createSubmittedOrder(submitType.BAILOUT);
await store.createSubmittedOrder(submitType.BAILOUT);
}

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

@ -12,40 +12,21 @@
</div>
<div class="iss-heritage-container-width">
<div class="tpa-confirmation-container iss-heritage-content-container-width">
<div class="d-flex justify-content-center align-items-center text-color--black pb-2 fs-5">
<div class="header">
<img :src="tpaConfirmationImage" />
<span
class="ms-2"
v-html="tpaConfirmationHeaderText"></span>
<span v-html="tpaConfirmationHeaderText"></span>
</div>
<div class="text-center text-color--black mb-3 fw-bold">
<div class="subheader">
<span v-html="tpaConfirmationSubheaderText"></span>
</div>
<textBlock
ref="tpaConfirmationBodyOne"
class="tpa-body-one mt-0"
class="tpa-body-one"
:customText="tpaConfirmationBodyOne" />
<textBlock
ref="tpaConfirmationBodyTwo"
:customText="tpaConfirmationBodyTwo"
class="small mt-0" />
<div ref="confirmationOrderDetailsSection">
<textBlock
ref="tpaConfirmationOrderDetailsTitle"
:customText="orderDetailsTitle"
class="text-color--black fw-bold lh-base mt-5 mb-4"
:marginTopSizeOverride="4" />
<textBlock
id="tpaConfirmationOrderDetailsBody"
ref="tpaConfirmationOrderDetailsBody"
:customText="orderDetailsBody"
:marginTopSizeOverride="4"
class="mb-4 small" />
<deductibleBox
ref="deductibleBox"
class="px-3"
:value="deductibleBoxValue" />
</div>
class="tpa-body-one"
:customText="tpaConfirmationBodyTwo" />
<siteFooter
v-if="carrierUrl"
ref="siteFooter"
@ -64,11 +45,11 @@
import siteHeader from '@/iss-components/site-header/site-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,
getPhoneLinkHtmlStringFromPhoneNumber,
processIfStatements
} from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
@ -77,8 +58,7 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
import {
toTitleCase,
toDisplayPhoneNumber,
formatAmountInDollars
toDisplayPhoneNumber
} from '@/helpers/text-helper.js';
const VERIFYING_COVERAGE = 'Verifying coverage';
@ -89,7 +69,6 @@ export default {
siteHeader,
siteFooter,
textBlock,
deductibleBox,
// eslint-disable-next-line vue/no-reserved-component-names
Form
},
@ -132,12 +111,17 @@ export default {
return this.getCmsContent('TPAConfirmationContent', 'BodyText')
?.replaceAll(
'{custom:phoneNumber}',
this.preferredShopPhoneNumber
getPhoneLinkHtmlStringFromPhoneNumber(this.preferredShopPhoneNumber)
)
?.replaceAll('{custom:glassShop}', this.preferredShopName);
},
tpaConfirmationBodyTwo() {
return this.getCmsContent('TPAConfirmationContent', 'BodyText2');
return this.getCmsContent('TPAConfirmationContent', 'BodyText2')
?.replaceAll(
'{custom:carrierPhone}',
getPhoneLinkHtmlStringFromPhoneNumber(this.carrierPhoneNumber)
)
?.replaceAll('{custom:carrierName}', this.carrierName);
},
orderDetailsTitle() {
return this.getCmsContent('OrderDetailsContent', 'HeaderText');
@ -171,7 +155,7 @@ export default {
return this.submittedOrder.isVerified;
},
carrierName() {
return this.mainStore.issConfig.clientName;
return this.mainStore.issConfig.clientFullName;
},
carrierUrl() {
return this.mainStore.issConfig.successReturnURL;
@ -189,48 +173,43 @@ export default {
async forwardButtonAction() {
this.$router.navigateToExternalUrl(this.carrierUrl);
},
getCustomValueFromString(str) {
switch (str) {
case 'deductibleAboveZero':
return this.isVerified && this.currentDeductible !== 0;
case 'zeroDeductible':
return this.isVerified && this.currentDeductible === 0;
case 'verifyingCoverage':
return !this.isVerified;
case 'coverageVerified':
return this.isVerified;
default:
return null;
}
},
toDisplayPhoneNumber,
formatAmountInDollars,
processIfStatements
}
};
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.tpa-confirmation-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.tpa-confirmation-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
.text-color--black {
color: $black;
}
.tpa-body-one {
:deep(p) {
line-height: map-get($spacers, 5);
font-size: $h6-font-size;
strong {
color: $black;
.header {
margin-top: 1.25rem;
margin-bottom: .625rem;
font-size: 1.25rem;
color: $black;
img {
height: 2.25rem;
width: 2.25rem;
margin-right: .5rem;
}
}
.subheader {
margin-bottom: 1.25rem;
color: $black;
font-weight: $font-weight-bold;
}
:deep(p) {
margin-bottom: .625rem;
}
:deep(strong) {
color: $black;
font-weight: 600;
}
}
</style>

3
src/store/index.js
View file

@ -2881,10 +2881,11 @@ export const useMainStore = defineStore({
return JSON.parse(window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER));
},
createSubmittedOrder(submitType) {
async createSubmittedOrder(submitType) {
if (this.hasSubmittedOrder()) {
return;
}
await this.getCarrierAccountInfo();
const submittedOrder = this.order;
const { experiments } = this.applicationUser;
const { issConfig } = this;

12
src/styles/common-styles.scss
View file

@ -206,6 +206,18 @@ a.router-link {
text-decoration: none;
font-weight: $font-weight-bold;
&:hover,
&:focus {
color: #125b7e;
text-decoration: underline;
}
}
a.phone-link {
color: $heritage-blue-primary;
text-decoration: none;
font-weight: $font-weight-normal;
&:hover,
&:focus {
color: #125b7e;