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

Merge pull request #3202 from Safelite/nation/CASH-632

Browse source 
CASH-632 add endorsements copy to page
This commit is contained in:
CarlNation 2026-06-02 08:40:05 -04:00 committed by GitHub
commit 3f0af1c5f7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 276 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -1,6 +1,10 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<funnelHeader
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
:overrideImageSrc="clientLogoImageSrc" />
<div class="page-gradient"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
@ -81,7 +85,7 @@ import afterpayBreakout from "../payment-method/afterpay-breakout/afterpay-break
import modal from "@/digital-components/modal/modal";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal.vue";
import textBlock from "@/digital-components/text-block/text-block.vue";
import { debugLog } from "@/helpers/debug-log-helper";
export default {
name: "coverage-statement",
mixins: [],
@ -89,6 +93,7 @@ export default {
return {
isClaimAndCoverage: this.isClaimAndCoverageFromStore(),
isRecalibrationOnOrder: this.isRecalibrationOnOrderFromStore(),
clientConfig: {},
};
},
components: {
@ -107,15 +112,26 @@ export default {
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "clientConfig",
promise: clientConfigPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.clientConfig = resultMap.clientConfig;
debugLog(
`coverage-statement clientConfig::${clientConfigPageName}`,
JSON.stringify(vm.clientConfig)
);
});
},
@ -162,6 +178,9 @@ export default {
},
},
computed: {
clientLogoImageSrc() {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
deductibleAmount() {
return this.$store.getters.order.policy.currentDeductible;
},

27
src/layouts/duplicate-check/duplicate-check.vue
View file

@ -1,6 +1,10 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<funnelHeader
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
:overrideImageSrc="clientLogoImageSrc" />
<div class="page-gradient"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
@ -61,12 +65,16 @@ import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import { debugLog } from "@/helpers/debug-log-helper";
export default {
name: "duplicate-check",
mixins: [],
data() {
return {};
return {
clientConfig: {},
};
},
components: {
Form,
@ -78,6 +86,9 @@ export default {
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const promiseResultMap = [
@ -85,13 +96,25 @@ export default {
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "clientConfig",
promise: clientConfigPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.clientConfig = resultMap.clientConfig;
debugLog(
`duplicate-check clientConfig::${clientConfigPageName}`,
JSON.stringify(vm.clientConfig)
);
});
},
computed: {
clientLogoImageSrc() {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
pageTitleText() {
return this.getCmsContent("DupCheckPageTitleWidget", "Text");
},

12
src/layouts/endorsements/endorsements.spec.js
View file

@ -55,13 +55,23 @@ function setupMocks() {
fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, fieldName) => {
return mockCmsContent?.[widgetName]?.[fieldName] ?? "";
}),
setCmsContent: jest.fn(),
},
};
const mountOptions = getMountOptions({
route: { name: "duplicate-check", query: {}, params: {} },
route: { name: "endorsements", query: {}, params: {} },
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
mixins: [mockMixin],
});
const wrapper = shallowMount(endorsements, mountOptions);

100
src/layouts/endorsements/endorsements.vue
View file

@ -1,13 +1,45 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<funnelHeader
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
:overrideImageSrc="clientLogoImageSrc" />
<div class="page-gradient"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<!--
... Page code goes here.
-->
<textBlock
cmsWidgetName="EndorsementsPageAdditionalInfoWidget"
typeStyle="h1"
:customText="endorsementHeading"
class="mb-5 text-left text-md-left page-title" />
<textBlock
cmsWidgetName="MoreDetailsWidget"
typeStyle="body"
:customText="moreDetailsText"
class="mb-5 text-left text-md-left page-instructions" />
<buttonQuestion
:questionText="schoolEndorsementQuestionText"
:answers="schoolEndorsementAnswers"
class="mb-4"
groupName="schoolEndorsementQuestion"
buttonTypeString="listButton"
isRequired
v-model="schoolEndorsementSelectedValue" />
<buttonQuestion
:questionText="parkingLotEndorsementQuestionText"
:answers="parkingLotEndorsementAnswers"
class="mb-4"
groupName="parkingLotEndorsementQuestion"
buttonTypeString="listButton"
isRequired
v-model="parkingLotEndorsementSelectedValue" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
@ -28,35 +60,78 @@ import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import { debugLog } from "@/helpers/debug-log-helper";
import buttonQuestion from "@/digital-components/button-question/button-question";
import textBlock from "@/digital-components/text-block/text-block";
export default {
name: "endorsements",
mixins: [],
data() {
return {};
return {
clientConfig: {},
};
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
buttonQuestion,
textBlock,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "clientConfig",
promise: clientConfigPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.clientConfig = resultMap.clientConfig;
debugLog(
`endorsements clientConfig::${clientConfigPageName}`,
JSON.stringify(vm.clientConfig)
);
});
},
computed: {
clientLogoImageSrc() {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
endorsementHeading() {
return this.getCmsContent("EndorsementsPageAdditionalInfoWidget", "Text");
},
moreDetailsText() {
return this.getCmsContent("MoreDetailsWidget", "Text");
},
schoolEndorsementQuestionText() {
return this.getCmsContent("SchoolEndorsmentQuestionWidget", "QuestionText");
},
schoolEndorsementAnswers() {
return this.getCmsContent("SchoolEndorsmentQuestionWidget", "Answers");
},
parkingLotEndorsementQuestionText() {
return this.getCmsContent("ParkingLotQuestionWidget", "QuestionText");
},
parkingLotEndorsementAnswers() {
return this.getCmsContent("ParkingLotQuestionWidget", "Answers");
},
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(
@ -76,3 +151,18 @@ export default {
},
};
</script>
<style lang="scss">
.page-title {
font-size: 20px !important;
line-height: 1.325;
font-weight: 300;
color: $black;
}
.page-instructions {
font-size: 16px !important;
font-weight: 400;
color: $gray-600;
line-height: 1.625;
}
</style>

29
src/layouts/policy-driver/policy-driver.vue
View file

@ -1,6 +1,10 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<funnelHeader
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
:overrideImageSrc="clientLogoImageSrc" />
<div class="page-gradient"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
@ -28,12 +32,16 @@ import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import { debugLog } from "@/helpers/debug-log-helper";
export default {
name: "policy-driver",
mixins: [],
data() {
return {};
return {
clientConfig: {},
};
},
components: {
Form,
@ -45,18 +53,35 @@ export default {
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "clientConfig",
promise: clientConfigPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.clientConfig = resultMap.clientConfig;
debugLog(
`policy-driver clientConfig::${clientConfigPageName}`,
JSON.stringify(vm.clientConfig)
);
});
},
computed: {
clientLogoImageSrc() {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(

29
src/layouts/policy-info-submitted/policy-info-submitted.vue
View file

@ -1,6 +1,10 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<funnelHeader
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
:overrideImageSrc="clientLogoImageSrc" />
<div class="page-gradient"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
@ -28,12 +32,16 @@ import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import { debugLog } from "@/helpers/debug-log-helper";
export default {
name: "policy-info-submitted",
mixins: [],
data() {
return {};
return {
clientConfig: {},
};
},
components: {
Form,
@ -45,18 +53,35 @@ export default {
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "clientConfig",
promise: clientConfigPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.clientConfig = resultMap.clientConfig;
debugLog(
`policy-info-submitted clientConfig::${clientConfigPageName}`,
JSON.stringify(vm.clientConfig)
);
});
},
computed: {
clientLogoImageSrc() {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(

6
src/layouts/policy-info/policy-info.vue
View file

@ -4,6 +4,7 @@
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
:overrideImageSrc="clientLogoImageSrc" />
<div class="page-gradient"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
@ -424,7 +425,10 @@ export default {
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.clientConfig = resultMap.clientConfig;
debugLog(`clientConfig::${clientConfigPageName}`, JSON.stringify(vm.clientConfig));
debugLog(
`policy-infoclientConfig::${clientConfigPageName}`,
JSON.stringify(vm.clientConfig)
);
});
},

25
src/layouts/policy-vehicle/policy-vehicle.vue
View file

@ -1,6 +1,10 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<funnelHeader
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
:overrideImageSrc="clientLogoImageSrc" />
<div class="page-gradient"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
@ -43,6 +47,7 @@ import store from "@/store";
import buttonMain from "@/ux-components/button-main/button-main";
import textLink from "@/ux-components/text-link/text-link.vue";
import { parentAccountNumbers } from "@/constants/insurance";
import { debugLog } from "@/helpers/debug-log-helper";
import { Form } from "vee-validate";
@ -53,7 +58,9 @@ export default {
name: "policy-vehicle",
mixins: [],
data() {
return {};
return {
clientConfig: {},
};
},
components: {
Form,
@ -67,19 +74,33 @@ export default {
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "clientConfig",
promise: clientConfigPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.clientConfig = resultMap.clientConfig;
debugLog(
`policy-vehicle clientConfig::${clientConfigPageName}`,
JSON.stringify(vm.clientConfig)
);
});
},
computed: {
clientLogoImageSrc() {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
vehicleNotListedQuestionText() {
return this.getCmsContent("VehicleNotListedWidget", "Text");
},

30
src/layouts/recalibration-info/recalibration-info.vue
View file

@ -1,6 +1,10 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<funnelHeader
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
:overrideImageSrc="clientLogoImageSrc" />
<div class="page-gradient"></div>
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
@ -28,12 +32,15 @@ import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import { debugLog } from "@/helpers/debug-log-helper";
export default {
name: "recalibration-info",
mixins: [],
data() {
return {};
return {
clientConfig: {},
};
},
components: {
Form,
@ -45,18 +52,35 @@ export default {
async beforeRouteEnter(to, from, next) {
const pageName = to.name;
const cmsContentPromise = fetchCmsContentForPage(pageName);
const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "clientConfig",
promise: clientConfigPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.clientConfig = resultMap.clientConfig;
debugLog(
`recalibration-info clientConfig::${clientConfigPageName}`,
JSON.stringify(vm.clientConfig)
);
});
},
computed: {
clientLogoImageSrc() {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(

11
src/layouts/verify-details/verify-details.vue
View file

@ -1,6 +1,9 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<funnelHeader
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
:overrideImageSrc="clientLogoImageSrc" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
@ -57,6 +60,12 @@ export default {
});
},
computed: {
clientLogoImageSrc() {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
},
methods: {
backButtonAction() {
this.$router.navigateWithoutSaving(

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

@ -102,3 +102,8 @@ option,
.btn {
letter-spacing: 0.03rem;
}
.page-gradient {
height: 12px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
}