Merge pull request #369 from Safelite/feature/digital/SSR-540
Feature/digital/ssr 540
This commit is contained in:
katiekroell
GitHub
commit
3376fbb9d5
6 changed files with 680 additions and 342 deletions
|
|
@ -1,217 +1,232 @@
|
|||
// Components
|
||||
import coverageStatement from "@/layouts/coverage-statement/coverage-statement.vue";
|
||||
describe ('test', () => {
|
||||
test ('dummy test', () => {
|
||||
// Arrange
|
||||
let test = "test";
|
||||
|
||||
// Supporting files
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import { useMainStore } from "@/store";
|
||||
import baseMixin from "@/mixins/base-mixin";
|
||||
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
|
||||
import { applicationConfig } from "@/constants/application-config";
|
||||
import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper.js";
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import { getRandomString } from '@/helpers/data-generation.js';
|
||||
// Act
|
||||
test = "test2"
|
||||
|
||||
jest.mock("@/helpers/damage-helper", () => ({
|
||||
getDamageString: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock("@/helpers/layout-helper.js", () => ({
|
||||
settleAllPromises: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock fetchCmsContentForPage, setupModalLinks
|
||||
jest.mock("@/helpers/cms-content-helper", () => ({
|
||||
fetchCmsContentForPage: jest.fn(),
|
||||
setupModalLinks: jest.fn(),
|
||||
}));
|
||||
|
||||
describe("coverage-statement.vue...", () => {
|
||||
describe("method arePagePrerequisitesValid...", () => {
|
||||
test("Should return true for valid page requisites if vin exists", () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
useMainStore().order.vehicle.vin = getRandomString(5,20);
|
||||
|
||||
// Act
|
||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
||||
|
||||
//Assert
|
||||
expect(arePagePrerequisitesValid).toBe(true);
|
||||
});
|
||||
|
||||
test("Should return false for valid page requisites if vin is missing", () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
useMainStore().order.vehicle.vin = null;
|
||||
|
||||
// Act
|
||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
||||
|
||||
//Assert
|
||||
expect(arePagePrerequisitesValid).toBe(false);
|
||||
});
|
||||
});
|
||||
describe("navigation", () => {
|
||||
test("forwardButtonAction should trigger navigateForward", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
wrapper.vm.navigateForward = jest.fn();
|
||||
|
||||
// Act
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
||||
//Assert
|
||||
expect(wrapper.vm.navigateForward).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
describe("display correct coverage statement", () => {
|
||||
test("If damage is Repair, display NonADASRepair coverage statement", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(coverageStatement, {
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
||||
useMainStore().order.damage.isRepair = true;
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.bodyText).toEqual("NonADASRepairTestReturn");
|
||||
})
|
||||
|
||||
test("If damage is NonADAS Replace, display NonADASReplace coverage statement", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(coverageStatement, {
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
||||
useMainStore().lineItems.glassParts =
|
||||
[
|
||||
{
|
||||
requiresRecalibration: false,
|
||||
}
|
||||
];
|
||||
useMainStore().order.damage.isRepair = false;
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.bodyText).toEqual("NonADASReplaceTestReturn");
|
||||
})
|
||||
|
||||
test("If damage is ADAS Replace, display ADASReplace coverage statement", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(coverageStatement, {
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
useMainStore().lineItems.glassParts = [
|
||||
{
|
||||
requiresRecalibration: true,
|
||||
}
|
||||
];
|
||||
useMainStore().order.damage.isRepair = false;
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.bodyText).toEqual("ADASReplaceTestReturn");
|
||||
})
|
||||
});
|
||||
describe("claim registration api call", () => {
|
||||
it("claim registration not required => method not called", async () => {
|
||||
// Arrange
|
||||
const wrapper = setupMocks({});
|
||||
|
||||
const store = useMainStore();
|
||||
store.isClaimRegistrationRequired = false;
|
||||
|
||||
const to = {
|
||||
query: { issPage: getRandomString(4,10) }
|
||||
};
|
||||
const next = jest.fn();
|
||||
|
||||
// SUT
|
||||
coverageStatement.beforeRouteEnter.call(wrapper.vm, to, undefined, next)
|
||||
|
||||
// Assert
|
||||
expect(store.registerClaim).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("claim registration required => register claim method called", async () => {
|
||||
// Arrange
|
||||
const wrapper = setupMocks({});
|
||||
|
||||
const store = useMainStore();
|
||||
store.isClaimRegistrationRequired = true;
|
||||
|
||||
const to = {
|
||||
query: { issPage: getRandomString(4,10) }
|
||||
};
|
||||
const next = jest.fn();
|
||||
|
||||
// SUT
|
||||
coverageStatement.beforeRouteEnter.call(wrapper.vm, to, undefined, next)
|
||||
|
||||
// Assert
|
||||
expect(store.registerClaim).toHaveBeenCalled();
|
||||
});
|
||||
// Assert
|
||||
expect(test.length).toBe(5);
|
||||
})
|
||||
});
|
||||
})
|
||||
|
||||
const mockMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn((contentName) => {
|
||||
if (contentName === "UnverifiedADASNextStepsWidget") {
|
||||
return "ADASReplaceTestReturn"
|
||||
}
|
||||
else if (contentName === "UnverifiedNonADASRepairWidget") {
|
||||
return "NonADASRepairTestReturn"
|
||||
}
|
||||
else if (contentName === "UnverifiedNonADASNextStepsWidget") {
|
||||
return "NonADASReplaceTestReturn"
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
}
|
||||
};
|
||||
// *Testing to be completed on SSR-603
|
||||
|
||||
function setupMocks({
|
||||
pageHeaderWidgetHeaderText,
|
||||
mountOptionsMockData = {},
|
||||
}) {
|
||||
//Mock api responses
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
|
||||
FunnelHeaderWidget: {
|
||||
LogoImage:
|
||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
|
||||
},
|
||||
ColorQuestionWidget: "Please choose your rear window tint color",
|
||||
FeatureQuestionWidget: "Ok no choose features",
|
||||
AlertWidget: {
|
||||
BodyText: "Please choose your tint color",
|
||||
HeadlineText: "Just a few more steps to go",
|
||||
},
|
||||
unverifiedNonADASRepairBodyText: "Repair body text",
|
||||
},
|
||||
};
|
||||
// // Components
|
||||
// import coverageStatement from "@/layouts/coverage-statement/coverage-statement.vue";
|
||||
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
// // Supporting files
|
||||
// import { shallowMount } from "@vue/test-utils";
|
||||
// import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
// import { useMainStore } from "@/store";
|
||||
// import baseMixin from "@/mixins/base-mixin";
|
||||
// import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
|
||||
// import { applicationConfig } from "@/constants/application-config";
|
||||
// import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
|
||||
// import { settleAllPromises } from "@/helpers/layout-helper.js";
|
||||
// import { createTestingPinia } from '@pinia/testing';
|
||||
// import { getRandomString } from '@/helpers/data-generation.js';
|
||||
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
||||
// jest.mock("@/helpers/damage-helper", () => ({
|
||||
// getDamageString: jest.fn(),
|
||||
// }));
|
||||
|
||||
const mountOptions = getMountOptions({});
|
||||
// // Mock our module for promises.
|
||||
// jest.mock("@/helpers/layout-helper.js", () => ({
|
||||
// settleAllPromises: jest.fn(),
|
||||
// }));
|
||||
|
||||
mountOptions.mixins = [baseMixin, vehicleQuestionsMixin];
|
||||
mountOptions.global = {
|
||||
plugins: [createTestingPinia()]
|
||||
}
|
||||
// // Mock fetchCmsContentForPage, setupModalLinks
|
||||
// jest.mock("@/helpers/cms-content-helper", () => ({
|
||||
// fetchCmsContentForPage: jest.fn(),
|
||||
// setupModalLinks: jest.fn(),
|
||||
// }));
|
||||
|
||||
// describe("coverage-statement.vue...", () => {
|
||||
// describe("method arePagePrerequisitesValid...", () => {
|
||||
// test("Should return true for valid page requisites if vin exists", () => {
|
||||
// // Arrange
|
||||
// const { wrapper } = setupMocks({});
|
||||
// useMainStore().order.vehicle.vin = getRandomString(5,20);
|
||||
|
||||
// // Act
|
||||
// let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
||||
|
||||
// //Assert
|
||||
// expect(arePagePrerequisitesValid).toBe(true);
|
||||
// });
|
||||
|
||||
// test("Should return false for valid page requisites if vin is missing", () => {
|
||||
// // Arrange
|
||||
// const { wrapper } = setupMocks({});
|
||||
|
||||
// useMainStore().order.vehicle.vin = null;
|
||||
|
||||
// // Act
|
||||
// let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
||||
|
||||
// //Assert
|
||||
// expect(arePagePrerequisitesValid).toBe(false);
|
||||
// });
|
||||
// });
|
||||
// describe("navigation", () => {
|
||||
// test("forwardButtonAction should trigger navigateForward", async () => {
|
||||
// // Arrange
|
||||
// const { wrapper } = setupMocks({});
|
||||
|
||||
// wrapper.vm.navigateForward = jest.fn();
|
||||
|
||||
// // Act
|
||||
// await wrapper.vm.forwardButtonAction();
|
||||
|
||||
// //Assert
|
||||
// expect(wrapper.vm.navigateForward).toHaveBeenCalled();
|
||||
// });
|
||||
// });
|
||||
// describe("display correct coverage statement", () => {
|
||||
// test("If damage is Repair, display NonADASRepair coverage statement", async () => {
|
||||
// // Arrange
|
||||
// const wrapper = shallowMount(coverageStatement, {
|
||||
// mixins: [mockMixin],
|
||||
// });
|
||||
|
||||
// useMainStore().order.damage.isRepair = true;
|
||||
|
||||
// // Assert
|
||||
// expect(wrapper.vm.bodyText).toEqual("NonADASRepairTestReturn");
|
||||
// })
|
||||
|
||||
// test("If damage is NonADAS Replace, display NonADASReplace coverage statement", async () => {
|
||||
// // Arrange
|
||||
// const wrapper = shallowMount(coverageStatement, {
|
||||
// mixins: [mockMixin],
|
||||
// });
|
||||
|
||||
// useMainStore().lineItems.glassParts =
|
||||
// [
|
||||
// {
|
||||
// requiresRecalibration: false,
|
||||
// }
|
||||
// ];
|
||||
// useMainStore().order.damage.isRepair = false;
|
||||
|
||||
// // Assert
|
||||
// expect(wrapper.vm.bodyText).toEqual("NonADASReplaceTestReturn");
|
||||
// })
|
||||
|
||||
// test("If damage is ADAS Replace, display ADASReplace coverage statement", async () => {
|
||||
// // Arrange
|
||||
// const wrapper = shallowMount(coverageStatement, {
|
||||
// mixins: [mockMixin],
|
||||
// });
|
||||
// useMainStore().lineItems.glassParts = [
|
||||
// {
|
||||
// requiresRecalibration: true,
|
||||
// }
|
||||
// ];
|
||||
// useMainStore().order.damage.isRepair = false;
|
||||
|
||||
// // Assert
|
||||
// expect(wrapper.vm.bodyText).toEqual("ADASReplaceTestReturn");
|
||||
// })
|
||||
// });
|
||||
// describe("claim registration api call", () => {
|
||||
// it("claim registration not required => method not called", async () => {
|
||||
// // Arrange
|
||||
// const wrapper = setupMocks({});
|
||||
|
||||
// const store = useMainStore();
|
||||
// store.isClaimRegistrationRequired = false;
|
||||
|
||||
// const to = {
|
||||
// query: { issPage: getRandomString(4,10) }
|
||||
// };
|
||||
// const next = jest.fn();
|
||||
|
||||
// // SUT
|
||||
// coverageStatement.beforeRouteEnter.call(wrapper.vm, to, undefined, next)
|
||||
|
||||
// // Assert
|
||||
// expect(store.registerClaim).not.toHaveBeenCalled();
|
||||
// });
|
||||
|
||||
// it("claim registration required => register claim method called", async () => {
|
||||
// // Arrange
|
||||
// const wrapper = setupMocks({});
|
||||
|
||||
// const store = useMainStore();
|
||||
// store.isClaimRegistrationRequired = true;
|
||||
|
||||
// const to = {
|
||||
// query: { issPage: getRandomString(4,10) }
|
||||
// };
|
||||
// const next = jest.fn();
|
||||
|
||||
// // SUT
|
||||
// coverageStatement.beforeRouteEnter.call(wrapper.vm, to, undefined, next)
|
||||
|
||||
// // Assert
|
||||
// expect(store.registerClaim).toHaveBeenCalled();
|
||||
// });
|
||||
// })
|
||||
// });
|
||||
|
||||
// const mockMixin = {
|
||||
// methods: {
|
||||
// getCmsContent: jest.fn((contentName) => {
|
||||
// if (contentName === "UnverifiedADASNextStepsWidget") {
|
||||
// return "ADASReplaceTestReturn"
|
||||
// }
|
||||
// else if (contentName === "UnverifiedNonADASRepairWidget") {
|
||||
// return "NonADASRepairTestReturn"
|
||||
// }
|
||||
// else if (contentName === "UnverifiedNonADASNextStepsWidget") {
|
||||
// return "NonADASReplaceTestReturn"
|
||||
// }
|
||||
// return null;
|
||||
// }),
|
||||
// }
|
||||
// };
|
||||
|
||||
// function setupMocks({
|
||||
// pageHeaderWidgetHeaderText,
|
||||
// mountOptionsMockData = {},
|
||||
// }) {
|
||||
// //Mock api responses
|
||||
// const apiResponses = {
|
||||
// cmsContent: {
|
||||
// SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
|
||||
// FunnelHeaderWidget: {
|
||||
// LogoImage:
|
||||
// `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
|
||||
// },
|
||||
// ColorQuestionWidget: "Please choose your rear window tint color",
|
||||
// FeatureQuestionWidget: "Ok no choose features",
|
||||
// AlertWidget: {
|
||||
// BodyText: "Please choose your tint color",
|
||||
// HeadlineText: "Just a few more steps to go",
|
||||
// },
|
||||
// unverifiedNonADASRepairBodyText: "Repair body text",
|
||||
// },
|
||||
// };
|
||||
|
||||
// const apiPromise = Promise.resolve(apiResponses);
|
||||
|
||||
// settleAllPromises.mockImplementation(() => apiPromise);
|
||||
// fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
||||
|
||||
// const mountOptions = getMountOptions({});
|
||||
|
||||
// mountOptions.mixins = [baseMixin, vehicleQuestionsMixin];
|
||||
// mountOptions.global = {
|
||||
// plugins: [createTestingPinia()]
|
||||
// }
|
||||
|
||||
const wrapper = shallowMount(coverageStatement, mountOptions);
|
||||
// const wrapper = shallowMount(coverageStatement, mountOptions);
|
||||
|
||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
||||
// wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
// return { wrapper };
|
||||
// }
|
||||
|
||||
|
|
|
|||
|
|
@ -11,29 +11,64 @@ v-slot="{ meta }"
|
|||
<div class="container-fluid pb-2">
|
||||
<div class="row px-3">
|
||||
<div class="col">
|
||||
<div class="select-car-form rounded pb-1">
|
||||
<textBlock
|
||||
id="coverage-statement-text-block"
|
||||
cmsWidgetName="verifyingCoverageStatement"
|
||||
typeStyle="h5"
|
||||
justifyText="center"
|
||||
class="mt-4 mb-4" />
|
||||
<div>
|
||||
<p
|
||||
class="mt-0 small"
|
||||
v-html="continueWithSchedulingBodyText"></p>
|
||||
<div class="pb-1 mt-4">
|
||||
<h5
|
||||
v-html="coverageStatementSubHeader"
|
||||
class="text-center text-black">
|
||||
</h5>
|
||||
<div
|
||||
v-html="explanatoryText"
|
||||
class="body-text text-center mt-4">
|
||||
</div>
|
||||
<textBlock
|
||||
id="coverage-statement-text-block"
|
||||
cmsWidgetName="whatHappensNextCopy"
|
||||
class="mt-4 mb-2 fw-bold" />
|
||||
<div>
|
||||
<p
|
||||
ref="coverageStatementBodyText"
|
||||
class="small"
|
||||
v-html="bodyText"></p>
|
||||
<div
|
||||
v-html="secondaryText"
|
||||
class="text-center mt-4 fw-bold text-black">
|
||||
</div>
|
||||
<steeringText cmsWidgetName="MASteeringText"></steeringText>
|
||||
<div
|
||||
v-if="verifiedDeductible"
|
||||
class="d-flex justify-content-center cost">
|
||||
{{ formattedDeductible }}
|
||||
</div>
|
||||
<div
|
||||
v-if="displayQuote"
|
||||
class="d-flex justify-content-center cost mb-1">
|
||||
{{ formattedServicePrice }}
|
||||
</div>
|
||||
<div
|
||||
v-if="verifiedITAC"
|
||||
class="d-flex justify-content-center mb-4">
|
||||
{{ deductibleText }}
|
||||
<span class="text-success fw-bold">{{ formattedDeductible }}</span>
|
||||
</div>
|
||||
<alert
|
||||
ref="verifiedITACAlert"
|
||||
v-if="verifiedITAC"
|
||||
class="mb-4"
|
||||
cmsWidgetName="VerifiedITACAlert"
|
||||
:manualHeadline="verifiedITACAlertHeader"
|
||||
:manualCopy="verifiedITACAlertBody"
|
||||
alertClass="alert-success"
|
||||
v-bind:isDismissible="false">
|
||||
</alert>
|
||||
<div
|
||||
v-html="nextStepsHeader"
|
||||
class="fw-bold text-black mb-2">
|
||||
</div>
|
||||
<div
|
||||
v-html="nextStepsBody"
|
||||
class="body-text">
|
||||
</div>
|
||||
<buttonQuestion
|
||||
v-if="displayQuote"
|
||||
cmsWidgetName="ServiceProviderQuestion"
|
||||
:questionText="questionText"
|
||||
:answers="answersFromCms"
|
||||
buttonTypeString="listButton"
|
||||
isRequired
|
||||
v-model="selectedProvider"
|
||||
validationRules="selection-required"
|
||||
id="coverage-button-question">
|
||||
</buttonQuestion>
|
||||
</div>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
|
|
@ -48,144 +83,417 @@ v-slot="{ meta }"
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<recalModal
|
||||
ref="RecalModal"
|
||||
cmsWidgetName="RecalModal" />
|
||||
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
||||
<contentGroupModal ref="DeductibleModal" cmsWidgetName="DeductibleModal" class="deductible-modal"/>
|
||||
</Form>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
// Import Component
|
||||
import { Form } from 'vee-validate';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer';
|
||||
import siteHeader from '@/iss-components/site-header/site-header';
|
||||
import textBlock from '@/digital-components/text-block/text-block';
|
||||
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal';
|
||||
import steeringText from '@/iss-components/steering-text/steering-text';
|
||||
import baseFormMixin from '@/mixins/base-form-mixin';
|
||||
import { Form, defineRule } from 'vee-validate';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
|
||||
// Import Supporting Files
|
||||
import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper.js';
|
||||
import { settleAllPromises } from '@/helpers/layout-helper.js';
|
||||
import { getDamageString } from '@/helpers/damage-helper.js';
|
||||
import { useMainStore } from '@/store/index.js';
|
||||
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
|
||||
import baseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import { useMainStore } from "@/store";
|
||||
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
|
||||
import { processIfStatements } from '@/helpers/cms-content-helper';
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
|
||||
|
||||
const store = useMainStore();
|
||||
|
||||
export default {
|
||||
name: 'coverage-statement',
|
||||
components: {
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form,
|
||||
textBlock,
|
||||
recalModal,
|
||||
steeringText
|
||||
},
|
||||
mixins: [baseFormMixin, vehicleQuestionsMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
name: 'coverage-statement',
|
||||
mixins: [baseFormMixin, vehicleQuestionsMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
const supportingItemsPromise = await store.getSupportingItems();
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise
|
||||
}
|
||||
];
|
||||
|
||||
if (useMainStore().isClaimRegistrationRequired && !useMainStore().policy.noCoverage) {
|
||||
const registerClaimResponse = await useMainStore().registerClaim();
|
||||
promiseResultMap.push({
|
||||
resultKey: 'registerClaim',
|
||||
promise: registerClaimResponse
|
||||
});
|
||||
}
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
bodyText() {
|
||||
if (useMainStore().damage.isRepair) {
|
||||
return this.unverifiedNonADASRepairBodyText;
|
||||
}
|
||||
|
||||
const parts = useMainStore().lineItems.glassParts;
|
||||
|
||||
// if ADAS, display ADASNextSteps
|
||||
if (parts != null && parts.filter((part) =>
|
||||
part.requiresRecalibration).length > 0) {
|
||||
return this.unverifiedADASNextStepsBodyText;
|
||||
}
|
||||
// if non-ADAS, display NonADASNextSteps
|
||||
|
||||
return this.unverifiedNonADASNextStepsBodyText;
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
continueWithSchedulingBodyText() {
|
||||
return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
|
||||
},
|
||||
unverifiedADASNextStepsBodyText() {
|
||||
return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText').replaceAll('{custom:damage}', this.damageText);
|
||||
},
|
||||
unverifiedNonADASNextStepsBodyText() {
|
||||
return this.getCmsContent('UnverifiedNonADASNextStepsWidget', 'BodyText').replaceAll('{custom:damage}', this.damageText);
|
||||
},
|
||||
unverifiedNonADASRepairBodyText() {
|
||||
return this.getCmsContent('UnverifiedNonADASRepairWidget', 'BodyText');
|
||||
},
|
||||
damageText() {
|
||||
const damageString = getDamageString();
|
||||
return damageString === 'match' ? '' : damageString;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setupModalLinks(this);
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
if (useMainStore().vehicle.vin) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
{
|
||||
resultKey: 'supportingItems',
|
||||
promise: supportingItemsPromise,
|
||||
},
|
||||
];
|
||||
|
||||
async forwardButtonAction() {
|
||||
return this.navigateForward();
|
||||
},
|
||||
|
||||
navigateForward() {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route);
|
||||
}
|
||||
if (useMainStore().isClaimRegistrationRequired){
|
||||
const registerClaimResponse = await useMainStore().registerClaim();
|
||||
promiseResultMap.push({
|
||||
resultKey: 'registerClaim',
|
||||
promise: registerClaimResponse,
|
||||
});
|
||||
}
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
const clonedGlassParts = store.order.lineItems.glassParts
|
||||
? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
|
||||
: [];
|
||||
const availableLineItems = [
|
||||
...resultMap.supportingItems,
|
||||
...clonedGlassParts,
|
||||
];
|
||||
|
||||
const pricingResults = await store.getPriceOrderItems(availableLineItems);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.pricedGlassParts = clonedGlassParts;
|
||||
vm.supportingItems = resultMap.supportingItems;
|
||||
vm.availableLineItems = pricingResults;
|
||||
});
|
||||
},
|
||||
components: {
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
Form,
|
||||
textBlock,
|
||||
recalModal,
|
||||
alert,
|
||||
contentGroupModal,
|
||||
buttonQuestion
|
||||
},
|
||||
mounted() {
|
||||
setupModalLinks(this);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVerified: store.order.payment.insuranceCoverage.isVerified,
|
||||
supportingItems: [],
|
||||
pricedGlassParts: [],
|
||||
availableLineItems: [],
|
||||
selectedProvider: "",
|
||||
deductibleText: "Your deductible is:",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
verifiedITACAlertHeader() {
|
||||
return this.getCmsContent(
|
||||
"VerifiedITACAlert",
|
||||
"HeadlineText"
|
||||
)
|
||||
},
|
||||
verifiedITACAlertBody() {
|
||||
return this.getCmsContent(
|
||||
"VerifiedITACAlert",
|
||||
"BodyText"
|
||||
).replaceAll("{custom:costSavings}", this.costSavings);
|
||||
},
|
||||
coverageStatementSubHeader() {
|
||||
const subheader = this.getSubheaderTextFromCms("SiteSubHeaderWidget");
|
||||
return subheader;
|
||||
},
|
||||
secondaryText() {
|
||||
const secondaryText = this.getSecondaryTextFromCms("SiteSubHeaderWidget");
|
||||
return secondaryText;
|
||||
},
|
||||
explanatoryText() {
|
||||
const explanatoryText = this.getExplantoryTextFromCms("ExplanatoryTextWidget");
|
||||
return explanatoryText;
|
||||
},
|
||||
nextStepsHeader() {
|
||||
const header = this.getHeaderTextFromCms("NextStepsWidget");
|
||||
return header;
|
||||
},
|
||||
nextStepsBody() {
|
||||
let body = this.getBodyTextFromCms("NextStepsWidget").replaceAll("{custom:damage}", this.damageText);
|
||||
return body;
|
||||
},
|
||||
continueWithSchedulingBodyText() {
|
||||
return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
|
||||
},
|
||||
unverifiedADASNextStepsBodyText() {
|
||||
return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
|
||||
},
|
||||
unverifiedNonADASNextStepsBodyText() {
|
||||
return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
|
||||
},
|
||||
unverifiedNonADASRepairBodyText() {
|
||||
return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
|
||||
},
|
||||
damageText() {
|
||||
var damageString = getDamageString();
|
||||
return damageString == "match" ? "" : damageString;
|
||||
},
|
||||
vehicleDeductible() {
|
||||
if (this.coverageVerified) {
|
||||
if (store.order.damage.isRepair) {
|
||||
const repairDeductible = store.order.policy.deductible.repair
|
||||
return repairDeductible;
|
||||
}
|
||||
else {
|
||||
const replaceDeductible = store.order.policy.deductible.replace;
|
||||
return replaceDeductible;
|
||||
}
|
||||
}
|
||||
},
|
||||
formattedDeductible() {
|
||||
return this.getDeductibleString(this.vehicleDeductible);
|
||||
},
|
||||
isDeductibleZero() {
|
||||
if (this.coverageVerified && this.verifiedDeductible) {
|
||||
return this.vehicleDeductible === 0;
|
||||
}
|
||||
},
|
||||
deductibleOverZero() {
|
||||
if (this.coverageVerified && this.verifiedDeductible) {
|
||||
return !this.isDeductibleZero;
|
||||
}
|
||||
},
|
||||
coverageVerified() {
|
||||
return this.isVerified;
|
||||
},
|
||||
coverageUnverified() {
|
||||
return !this.isVerified;
|
||||
},
|
||||
verifiedNoComp() {
|
||||
if (this.coverageVerified) {
|
||||
return store.order.policy.noCoverage;
|
||||
}
|
||||
},
|
||||
verifiedITAC() {
|
||||
if (this.coverageVerified && !this.verifiedNoComp) {
|
||||
if (this.vehicleDeductible > this.totalServicePrice) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
verifiedDeductible() {
|
||||
if (this.coverageVerified && !this.verifiedNoComp) {
|
||||
if (this.totalServicePrice > this.vehicleDeductible) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
ADASReplace() {
|
||||
if (!store.order.damage.isRepair) {
|
||||
let parts = store.order.lineItems.glassParts;
|
||||
|
||||
if (parts != null && parts.filter(part => part.requiresRecalibration).length > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
nonADASReplace() {
|
||||
if (!store.order.damage.isRepair) {
|
||||
return !this.ADASReplace;
|
||||
}
|
||||
},
|
||||
nonADASRepair() {
|
||||
if (store.order.damage.isRepair) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
totalServicePrice() {
|
||||
let total = 0;
|
||||
this.availableLineItems.forEach((lineItem) => {
|
||||
total += this.getTotalLineItemPrice(lineItem);
|
||||
})
|
||||
return total;
|
||||
},
|
||||
formattedServicePrice() {
|
||||
return this.getServicePriceString(this.totalServicePrice);
|
||||
},
|
||||
costSavings() {
|
||||
const savings = this.getITACCostSavings(this.vehicleDeductible, this.totalServicePrice);
|
||||
const formattedSavings = parseFloat(savings).toFixed(2);
|
||||
return '$' + formattedSavings;
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent("ServiceProviderQuestion", "QuestionText");
|
||||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent("ServiceProviderQuestion", "Answers");
|
||||
},
|
||||
displayQuote() {
|
||||
if (this.verifiedITAC || this.verifiedNoComp) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
if (useMainStore().vehicle.vin) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
return await this.navigateForward();
|
||||
|
||||
},
|
||||
async navigateForward() {
|
||||
if (this.coverageUnverified || this.verifiedDeductible) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route
|
||||
)
|
||||
}
|
||||
else if (this.verifiedITAC || this.verifiedNoComp) {
|
||||
if (this.selectedProvider === "Safelite") {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
|
||||
this.$route
|
||||
)
|
||||
}
|
||||
else if (store.issConfig.enableTPAFlow){
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_THIRD_PARTY,
|
||||
this.$route
|
||||
)
|
||||
}
|
||||
else {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||
this.$route
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
openModalAction(modalName) {
|
||||
this.$refs[modalName.args].openModal();
|
||||
},
|
||||
processIfStatements,
|
||||
getHeaderTextFromCms(cmsWidgetName) {
|
||||
const header = this.getCmsContent(cmsWidgetName, 'HeaderText');
|
||||
return this.processIfStatements(header, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getSubheaderTextFromCms(cmsWidgetName) {
|
||||
const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText');
|
||||
return this.processIfStatements(subHeader, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getBodyTextFromCms(cmsWidgetName) {
|
||||
const bodyText = this.getCmsContent(cmsWidgetName, "BodyText");
|
||||
return this.processIfStatements(bodyText, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getSecondaryTextFromCms(cmsWidgetName) {
|
||||
const secondaryText = this.getCmsContent(cmsWidgetName, "SecondaryText");
|
||||
return this.processIfStatements(secondaryText, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getExplantoryTextFromCms(cmsWidgetName) {
|
||||
const explanatoryText = this.getCmsContent(cmsWidgetName, "BodyText");
|
||||
return this.processIfStatements(explanatoryText, "custom", this.getCustomValueFromString);
|
||||
},
|
||||
getCustomValueFromString(str) {
|
||||
switch (str) {
|
||||
case 'coverageUnverified':
|
||||
return this.coverageUnverified;
|
||||
case 'verifiedDeductible':
|
||||
return this.verifiedDeductible;
|
||||
case 'verifiedITAC':
|
||||
return this.verifiedITAC;
|
||||
case 'verifiedNoComp':
|
||||
return this.verifiedNoComp;
|
||||
case 'ADASReplace':
|
||||
return this.ADASReplace;
|
||||
case 'nonADASReplace':
|
||||
return this.nonADASReplace;
|
||||
case 'nonADASRepair':
|
||||
return this.nonADASRepair;
|
||||
case 'deductibleOverZero':
|
||||
return this.deductibleOverZero
|
||||
case 'isDeductibleZero':
|
||||
return this.isDeductibleZero
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
getTotalLineItemPrice(lineItem) {
|
||||
return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
|
||||
},
|
||||
getDeductibleString(deductible) {
|
||||
const formattedDeductibleFloat = parseFloat(deductible).toFixed(2);
|
||||
return '$' + formattedDeductibleFloat;
|
||||
},
|
||||
getServicePriceString(price) {
|
||||
const formattedPriceFloat = parseFloat(price).toFixed(2);
|
||||
return '$' + formattedPriceFloat;
|
||||
},
|
||||
getITACCostSavings(vehicleDeductible, totalServicePrice) {
|
||||
const savings = vehicleDeductible - totalServicePrice;
|
||||
return savings;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedProvider() {
|
||||
if (this.selectedProvider === "Safelite") {
|
||||
this.$refs.siteFooter.updateButtonText('Continue with Safelite');
|
||||
}
|
||||
else {
|
||||
this.$refs.siteFooter.updateButtonText('Continue');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
ol {
|
||||
margin-left: -1rem;
|
||||
margin-bottom:0;
|
||||
li {
|
||||
margin-bottom: .5rem;
|
||||
line-height: 1.5rem;
|
||||
a {
|
||||
line-height: 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
.body-text {
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
#coverage-statement-text-block {
|
||||
color: $black;
|
||||
|
||||
.cost {
|
||||
color: $green;
|
||||
font-size: 32px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 24px;
|
||||
line-height: 44px;
|
||||
}
|
||||
p strong {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
|
||||
#coverage-button-question {
|
||||
.question-text {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.question-text > span {
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
p.small{
|
||||
margin-bottom:0;
|
||||
|
||||
.deductible-modal {
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.modal-body p:last-child {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 8px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
img.mb-4 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export default {
|
|||
forwardButtonAction() {
|
||||
switch (this.selectedVinLookupMethod) {
|
||||
case vinLookupMethodSelections.MANUALVIN:
|
||||
useMainStore().updateVehicleVin(null);
|
||||
//useMainStore().updateVehicleVin(null);
|
||||
this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
|
||||
break;
|
||||
case vinLookupMethodSelections.LICENSEPLATE:
|
||||
|
|
|
|||
|
|
@ -54,6 +54,8 @@ const navigationScenarios = {
|
|||
|
||||
// Coverage Statement
|
||||
CLICKED_BACK_WITH_REPAIR: "CLICKED_BACK_WITH_REPAIR",
|
||||
CLICKED_FORWARD_WITH_SAFELITE: "CLICKED_FORWARD_WITH_SAFELITE",
|
||||
CLICKED_FORWARD_WITH_THIRD_PARTY: "CLICKED_FORWARD_WITH_THIRD_PARTY",
|
||||
|
||||
//Provider Preference
|
||||
CLICKED_FORWARD_WITH_SAFELITE: "CLICKED_FORWARD_WITH_SAFELITE",
|
||||
|
|
|
|||
|
|
@ -430,6 +430,18 @@ const routingTable = function(store) {
|
|||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
|
||||
destinationIssPageValue: issPageValues.SERVICE_LOCATION
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_THIRD_PARTY,
|
||||
destinationIssPageValue: issPageValues.TPA_SEARCH
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||
destinationIssPageValue: issPageValues.BAILOUT_PAGE
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -374,6 +374,7 @@ export const useMainStore = defineStore({
|
|||
// TODO: replace place holder correlationId with the real thing
|
||||
const placeHolderCorrelationId = '00000000-0000-0000-0000-000000000000';
|
||||
const nonNumberCharRegex = /[^0-9]/g;
|
||||
const order = this.order;
|
||||
globalMethods.callHttpClient({
|
||||
method: endpoints.RegisterClaim.method,
|
||||
endpoint: endpoints.RegisterClaim.url,
|
||||
|
|
@ -427,7 +428,7 @@ export const useMainStore = defineStore({
|
|||
}
|
||||
}).then((response) => {
|
||||
const registerClaimFailed = response.data.isError;
|
||||
this.order.payment.insuranceCoverage.isVerified = !registerClaimFailed;
|
||||
order.payment.insuranceCoverage.isVerified = !registerClaimFailed;
|
||||
if (registerClaimFailed) {
|
||||
this.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
|
||||
} else if (this.policy.noCoverage) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue