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

Merge pull request #3212 from Safelite/nation/CASH-940

Browse source 
Nation/cash 940
This commit is contained in:
CarlNation 2026-06-08 07:50:37 -04:00 committed by GitHub
commit b2db418f65
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 163 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/layouts/policy-driver/policy-driver.spec.js
View file

@ -55,6 +55,15 @@ 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: "policy-driver", query: {}, params: {} },
router: {
@ -62,6 +71,7 @@ function setupMocks() {
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
mixins: [mockMixin],
});
const wrapper = shallowMount(policyDriver, mountOptions);

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

@ -8,10 +8,20 @@
<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.
-->
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
class="siteSubHeader mb-4"
:alignLeft="true" />
<buttonQuestion
:questionText="driverSelectionText"
:answers="driverSelectionAnswers"
class="mb-4"
groupName="driverQuestion"
buttonTypeString="listButton"
isRequired
v-model="driverSelectionValue" />
<insuranceNavBar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
@ -29,6 +39,7 @@
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import buttonQuestion from "@/digital-components/button-question/button-question";
import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -49,6 +60,7 @@ export default {
funnelHeader,
insuranceNavBar,
funnelSubHeader,
buttonQuestion,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
@ -81,6 +93,12 @@ export default {
clientLogoImageSrc() {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
driverSelectionText() {
return this.getCmsContent("DriverSelectionWidget", "QuestionText");
},
driverSelectionAnswers() {
return this.getCmsContent("DriverSelectionWidget", "Answers");
},
},
methods: {

17
src/layouts/policy-info-submitted/policy-info-submitted.spec.js
View file

@ -26,11 +26,6 @@ describe("policy-info-submitted.vue", () => {
expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
});
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "insuranceNavBar" }).exists()).toBe(true);
});
test("renders Form component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
@ -55,13 +50,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: "policy-vehicle", query: {}, params: {} },
route: { name: "endorsements", query: {}, params: {} },
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
mixins: [mockMixin],
});
const wrapper = shallowMount(policyInfoSubmitted, mountOptions);

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

@ -1,5 +1,5 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<funnelHeader
cmsWidgetName="FunnelHeaderWidget"
ref="funnelHeader"
@ -8,17 +8,25 @@
<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.
-->
<insuranceNavBar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@cancel-clicked="cancelButtonAction"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
class="siteSubHeader pb-4"
:alignLeft="true" />
<buttonMain
ref="buttonMain"
class="mb-3"
isPrimary
:buttonText="ContinueButtonCopy"
loaderColor="white"
:aria-disabled="false"
:isDisabled="false"
@click-event="forwardButtonAction" />
<span
v-if="displayDisclaimerText"
class="d-block mb-5 disclaimer-text"
v-html="disclaimerText"></span>
</div>
</div>
</div>
@ -27,8 +35,9 @@
<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { parentAccountNumbers } from "@/constants/insurance";
import buttonMain from "@/ux-components/button-main/button-main";
import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -46,8 +55,8 @@ export default {
},
components: {
Form,
buttonMain,
funnelHeader,
insuranceNavBar,
funnelSubHeader,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
@ -81,23 +90,23 @@ export default {
clientLogoImageSrc() {
return this.clientConfig?.ClientLogoWidget?.Image || "";
},
ContinueButtonCopy() {
return this.getCmsContent("ContinueButtonWidget", "QuestionText");
},
disclaimerText() {
return this.clientConfig?.DisclaimerWidget?.Text;
},
displayDisclaimerText() {
return this.disclaimerText !== null && this.disclaimerText !== "";
},
parentAccountNumbers() {
return parentAccountNumbers;
},
},
methods: {
cancelButtonAction() {
forwardButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
this.pageName
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.pageName
);
},
async forwardButtonAction() {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName
);
@ -108,3 +117,12 @@ export default {
},
};
</script>
<style lang="scss">
.disclaimer-text {
font-size: 12px !important;
font-weight: 400;
color: $gray-600;
line-height: 1.625;
}
</style>

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

@ -25,7 +25,10 @@
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
<div v-if="showAmFamDisclaimer" v-html="amFamDisclaimerWidget"></div>
<span
v-if="displayDisclaimerText"
class="d-block mb-5 disclaimer-text"
v-html="disclaimerText"></span>
</div>
</div>
</div>
@ -95,11 +98,11 @@ export default {
vehicleNotListedQuestionText() {
return this.getCmsContent("VehicleNotListedWidget", "Text");
},
amFamDisclaimerWidget() {
return this.getCmsContent("AmFamDisclaimerWidget", "Text");
disclaimerText() {
return this.clientConfig?.DisclaimerWidget?.Text;
},
showAmFamDisclaimer() {
return this.parentAccountNumberFromStore() === this.parentAccountNumbers.CONNECT;
displayDisclaimerText() {
return this.disclaimerText !== null && this.disclaimerText !== "";
},
parentAccountNumbers() {
return parentAccountNumbers;
@ -140,4 +143,11 @@ export default {
background-color: $blue;
color: $white;
}
.disclaimer-text {
font-size: 12px !important;
font-weight: 400;
color: $gray-600;
line-height: 1.625;
}
</style>

2
src/layouts/recalibration-info/recalibration-info.spec.js
View file

@ -28,7 +28,7 @@ describe("recalibration-info.vue", () => {
test("renders navbar component", () => {
const { wrapper } = setupMocks();
expect(wrapper.findComponent({ name: "insuranceNavBar" }).exists()).toBe(true);
expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
});
test("renders Form component", () => {

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

@ -8,15 +8,34 @@
<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.
-->
<insuranceNavBar
<funnelSubHeader
cmsWidgetName="FunnelSubHeaderWidget"
class="siteSubHeader mb-4"
:alignLeft="true" />
<img
:src="recalibrationInfoDesktopImage"
alt=""
class="recal-image recal-image--desktop mb-4" />
<img
:src="recalibrationInfoMobileImage"
alt=""
class="recal-image recal-image--mobile mb-4" />
<div class="adas-body-text mb-7" v-html="adasBodyText"></div>
<hr class="mb-5" />
<saveProgressModalQuestion
modalWidgetName="SaveProgressModalWidget"
modalName="SaveProgressModal"
v-if="showSaveProgressModal"
pageName="recalibration-info" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@cancel-clicked="cancelButtonAction"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
@ -27,27 +46,34 @@
<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import insuranceNavBar from "@/fmg-components/insurance-nav-bar/insurance-nav-bar";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
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 {
clientConfig: {},
recalibrationInfoDesktopImage: "",
recalibrationInfoMobileImage: "",
adasBodyText: "",
showSaveProgressModal: null,
};
},
components: {
Form,
funnelHeader,
insuranceNavBar,
navbar,
funnelSubHeader,
saveProgressModalQuestion,
},
// Ensure CMS content is fetched during route navigation without depending on `to`/`from`
async beforeRouteEnter(to, from, next) {
@ -66,9 +92,15 @@ export default {
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const emailFromStore = store.getters.order.customer.emailAddress;
const showSaveProgressModal = !(emailFromStore?.length > 0);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.clientConfig = resultMap.clientConfig;
vm.showSaveProgressModal = showSaveProgressModal;
vm.recalibrationInfoDesktopImage = vm.getCmsContent("AdasInfoDesktopWidget", "Image");
vm.recalibrationInfoMobileImage = vm.getCmsContent("AdasInfoMobileWidget", "Image");
vm.adasBodyText = vm.getCmsContent("AdasInfoDesktopWidget", "BodyText");
debugLog(
`recalibration-info clientConfig::${clientConfigPageName}`,
JSON.stringify(vm.clientConfig)
@ -83,12 +115,6 @@ export default {
},
methods: {
cancelButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
this.pageName
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
@ -107,3 +133,22 @@ export default {
},
};
</script>
<style lang="scss" scoped>
// Both images are rendered; CSS swaps them at the md breakpoint so no JS
// resize listeners are needed.
.recal-image--desktop {
display: none;
}
.recal-image--mobile {
display: block;
}
@include media-breakpoint-up(md) {
.recal-image--desktop {
display: block;
}
.recal-image--mobile {
display: none;
}
}
</style>