Merge pull request #1027 from Safelite/feature/CSR-1073
Feature/csr 1073
This commit is contained in:
Leah Schumann
GitHub
commit
788dfca3b5
17 changed files with 827 additions and 40 deletions
|
|
@ -78,6 +78,10 @@ const endpoints = {
|
|||
url: "/parts/api/v1/parts/mobile-fee",
|
||||
method: "GET",
|
||||
},
|
||||
GetServiceabilityDetails: {
|
||||
url: "/location/api/v1/location/serviceability-details",
|
||||
method: "GET",
|
||||
},
|
||||
GetSupportingItems: {
|
||||
url: "/parts/api/v1/parts/supporting-items",
|
||||
method: "POST",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ const storeActions = {
|
|||
GET_PART_FROM_CAPABILITY_QUESTION_ANSWER: "getPartFromCapabilityQuestionAnswer",
|
||||
GET_MOLDING_QUESTIONS: "getMoldingQuestions",
|
||||
GET_MOBILE_FEE_PART: "getMobileFeePart",
|
||||
GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
|
||||
SAVE_SESSION: "saveSession",
|
||||
LOAD_SESSION: "loadSession",
|
||||
UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse",
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ describe("modal.vue", () => {
|
|||
wrapper.vm.resetButtonStyle = resetButtonStyle;
|
||||
|
||||
// Act
|
||||
const buttonMain = wrapper.findComponent({ ref: "buttonMain" });
|
||||
const buttonMain = wrapper.findComponent({ ref: "modalButtonMain" });
|
||||
await buttonMain.trigger("click-event");
|
||||
|
||||
// Assert
|
||||
|
|
@ -124,7 +124,7 @@ describe("modal.vue", () => {
|
|||
wrapper.vm.resetButtonStyle = resetButtonStyle;
|
||||
|
||||
// Act
|
||||
const buttonMain = wrapper.findComponent({ ref: "buttonMain" });
|
||||
const buttonMain = wrapper.findComponent({ ref: "modalButtonMain" });
|
||||
await buttonMain.trigger("click-event");
|
||||
|
||||
// Assert
|
||||
|
|
|
|||
|
|
@ -26,10 +26,10 @@
|
|||
<slot></slot>
|
||||
</div>
|
||||
<div class="modal-footer px-5 py-4">
|
||||
<buttonMain
|
||||
<modalButtonMain
|
||||
isPrimary
|
||||
class="w-100"
|
||||
ref="buttonMain"
|
||||
ref="modalButtonMain"
|
||||
loaderColor="white"
|
||||
:buttonText="footerButtonText"
|
||||
@click-event="validateAndEmit"
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import buttonMain from "@/ux-components/button-main/button-main";
|
||||
import modalButtonMain from "@/ux-components/modal-button-main/modal-button-main";
|
||||
import { Modal } from "bootstrap";
|
||||
import { useForm } from "vee-validate";
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ export default {
|
|||
}
|
||||
},
|
||||
resetButtonStyle() {
|
||||
this.$refs.buttonMain.resetButtonStyle();
|
||||
this.$refs.modalButtonMain.resetButtonStyle();
|
||||
},
|
||||
onModalOpened() {
|
||||
this.onModalOpenedCallback?.();
|
||||
|
|
@ -106,7 +106,7 @@ export default {
|
|||
},
|
||||
},
|
||||
components: {
|
||||
buttonMain,
|
||||
modalButtonMain,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -28,3 +28,17 @@ export async function getPricedMobileFeePart(serviceZipCode) {
|
|||
|
||||
return Promise.resolve(pricingResults[0]);
|
||||
}
|
||||
|
||||
export async function getServiceabilityDetails(serviceZipCode, lineItems) {
|
||||
// Get the Mobile Fee Part
|
||||
const serviceabilityDetails = await baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.GET_SERVICEABILITY_DETAILS,
|
||||
{
|
||||
serviceZipCode: serviceZipCode,
|
||||
lineItems: lineItems,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
return Promise.resolve(serviceabilityDetails);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,12 +110,26 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
|
|||
return Promise.resolve(mobileFeePart);
|
||||
};
|
||||
|
||||
const mockGetServiceabilityDetails = (mockServiceZipCode) => {
|
||||
const serviceabilityDetails = {
|
||||
isGlassServiceableInshop: true,
|
||||
isRecalibrationServiceableInshop: true,
|
||||
isGlassServiceableMobile: true,
|
||||
isRecalibrationServiceableMobile: true,
|
||||
};
|
||||
|
||||
return Promise.resolve(serviceabilityDetails);
|
||||
};
|
||||
|
||||
jest.mock(
|
||||
"@/layouts/service-location/helpers/service-location-helper/service-location-helper",
|
||||
() => ({
|
||||
getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
|
||||
return mockGetPricedMobileFeePart(mockServiceZipCode);
|
||||
}),
|
||||
getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
|
||||
return mockGetServiceabilityDetails(mockServiceZipCode);
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,11 @@ import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location
|
|||
|
||||
// Helpers
|
||||
import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
|
||||
import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
|
||||
import {
|
||||
getPricedMobileFeePart,
|
||||
getServiceabilityDetails,
|
||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
|
||||
export default {
|
||||
name: "mobile-location-modal-questions",
|
||||
|
|
@ -157,6 +161,7 @@ export default {
|
|||
},
|
||||
onModalClosed() {
|
||||
this.internalModel = deepClone(this.modelValue);
|
||||
this.resetAlerts();
|
||||
},
|
||||
resetComponent(updatedServiceZipCodeInfo) {
|
||||
// Reset the validation form, setting the initial values
|
||||
|
|
@ -175,6 +180,9 @@ export default {
|
|||
resetModalButtonStyle() {
|
||||
this.$refs[this.modalName].resetButtonStyle();
|
||||
},
|
||||
resetAlerts() {
|
||||
this.$refs.addressQuestions.displayVerificationWarning = false;
|
||||
},
|
||||
async setMobileLocation() {
|
||||
// Validate the Zip Code
|
||||
const zipCodeData = await this.getZipCodeData(
|
||||
|
|
@ -187,11 +195,14 @@ export default {
|
|||
} else {
|
||||
// retrieve mobile fee part
|
||||
const serviceZipCode = this.internalModel.addressQuestions.zipCode;
|
||||
|
||||
const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
|
||||
|
||||
// emit additional data to parent
|
||||
// retrieve serviceability details
|
||||
const serviceabilityDetails = await getServiceabilityDetails(serviceZipCode);
|
||||
|
||||
// update content related to service zip code
|
||||
this.$emit("updated-mobile-fee-part", mobileFeePart);
|
||||
this.$emit("updated-serviceability", serviceabilityDetails.data);
|
||||
this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
|
||||
|
||||
// Update the page level model
|
||||
|
|
|
|||
|
|
@ -51,14 +51,11 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.question-text {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.625rem;
|
||||
|
||||
& > span {
|
||||
text-align: left;
|
||||
.modal-dialog {
|
||||
.question-text {
|
||||
& > span {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,12 +32,26 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
|
|||
return Promise.resolve(mobileFeePart);
|
||||
};
|
||||
|
||||
const mockGetServiceabilityDetails = (mockServiceZipCode) => {
|
||||
const serviceabilityDetails = {
|
||||
isGlassServiceableInshop: true,
|
||||
isRecalibrationServiceableInshop: true,
|
||||
isGlassServiceableMobile: true,
|
||||
isRecalibrationServiceableMobile: true,
|
||||
};
|
||||
|
||||
return Promise.resolve(serviceabilityDetails);
|
||||
};
|
||||
|
||||
jest.mock(
|
||||
"@/layouts/service-location/helpers/service-location-helper/service-location-helper",
|
||||
() => ({
|
||||
getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
|
||||
return mockGetPricedMobileFeePart(mockServiceZipCode);
|
||||
}),
|
||||
getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
|
||||
return mockGetServiceabilityDetails(mockServiceZipCode);
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -9,22 +9,37 @@
|
|||
ref="serviceZipCodeQuestion"
|
||||
:mobileFeePart="mobileFeePart"
|
||||
@updated-mobile-fee-part="setMobileFeePart"
|
||||
@updated-serviceability="setServiceabilityDetails"
|
||||
@updated-contains-military-base="setContainsMilitaryBase"
|
||||
linkWidgetName="ServiceZipLinkWidget"
|
||||
modalWidgetName="ServiceZipModalWidget"
|
||||
@updated-contains-military-base="setContainsMilitaryBase" />
|
||||
modalWidgetName="ServiceZipModalWidget" />
|
||||
<alert
|
||||
class="my-4"
|
||||
cmsWidgetName="AlertMilitaryBaseZipWidget"
|
||||
v-if="showMilitaryZipAlert"
|
||||
alertClass="alert-warning" />
|
||||
<serviceTypeQuestion
|
||||
v-model="selectedServiceType"
|
||||
:isGlassServiceableInshop="isGlassServiceableInshop"
|
||||
:isRecalibrationServiceableInshop="isRecalibrationServiceableInshop"
|
||||
:isGlassServiceableMobile="isGlassServiceableMobile"
|
||||
:isRecalibrationServiceableMobile="isRecalibrationServiceableMobile"
|
||||
ref="serviceTypeQuestion"
|
||||
groupName="serviceTypeQuestion"
|
||||
cmsWidgetName="ServiceTypeQuestionWidget"
|
||||
validationRules="option-required" />
|
||||
<mobileLocationModalQuestions
|
||||
v-show="selectedServiceType === 'Mobile'"
|
||||
v-model="mobileLocationQuestions"
|
||||
:mobileFeePart="mobileFeePart"
|
||||
@updated-mobile-fee-part="setMobileFeePart"
|
||||
@updated-serviceability="setServiceabilityDetails"
|
||||
@updated-contains-military-base="setContainsMilitaryBase"
|
||||
ref="mobileLocationModalQuestions"
|
||||
linkWidgetName="MobileLocationLinkWidget"
|
||||
modalWidgetName="MobileLocationModalWidget" />
|
||||
<textboxQuestion
|
||||
v-show="selectedServiceType === 'Mobile'"
|
||||
ref="mobileLocationQuestionsError"
|
||||
v-model="mobileLocationValidationField"
|
||||
validationRules="mobile-location-required"
|
||||
|
|
@ -45,6 +60,7 @@
|
|||
import alert from "@/ux-components/alert/alert";
|
||||
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
|
||||
import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
|
||||
import serviceTypeQuestion from "@/layouts/service-location/service-type-question/service-type-question";
|
||||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
|
|
@ -54,10 +70,14 @@ import textboxQuestion from "@/digital-components/textbox-question/textbox-quest
|
|||
|
||||
// Supporting files
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
import {
|
||||
getPricedMobileFeePart,
|
||||
getServiceabilityDetails,
|
||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
import store from "@/store";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
|
|
@ -74,17 +94,24 @@ export default {
|
|||
state: this.getServiceStateFromStore(),
|
||||
zipCode: this.getServiceZipCodeFromStore(),
|
||||
isVehicleProtected: null,
|
||||
isZipServiceableMobile: null,
|
||||
isZipServiceableInShop: null,
|
||||
isGlassServiceableInshop: null,
|
||||
isRecalibrationServiceableInshop: null,
|
||||
isGlassServiceableMobile: null,
|
||||
isRecalibrationServiceableMobile: null,
|
||||
mobileFeePart: null,
|
||||
zipContainsMilitaryBase: false,
|
||||
selectedServiceType: null,
|
||||
mobileLocationValidationField: null,
|
||||
};
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
||||
const serviceZipCode = store.getters.order.serviceLocation.zipCode;
|
||||
const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode);
|
||||
|
||||
const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
|
||||
|
||||
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
|
||||
|
||||
|
|
@ -98,9 +125,13 @@ export default {
|
|||
resultKey: "mobileFeePart",
|
||||
promise: mobileFeePartPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "serviceabilityDetails",
|
||||
promise: serviceabilityDetailsPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "zipCodeData",
|
||||
promise: baseMixin.methods.getZipCodeData(serviceZipCode),
|
||||
promise: getZipCodeData,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -109,9 +140,11 @@ export default {
|
|||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.setData(resultMap.mobileFeePart);
|
||||
vm.zipContainsMilitaryBase = resultMap.zipCodeData.containsMilitaryBase;
|
||||
vm.zipCode = serviceZipCode;
|
||||
vm.setData(
|
||||
resultMap.zipCodeData,
|
||||
resultMap.serviceabilityDetails,
|
||||
resultMap.mobileFeePart
|
||||
);
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -157,10 +190,10 @@ export default {
|
|||
},
|
||||
},
|
||||
showMilitaryZipAlert() {
|
||||
return (
|
||||
this.zipContainsMilitaryBase &&
|
||||
(this.isZipServiceableMobile == null || this.isZipServiceableMobile === true)
|
||||
);
|
||||
const isZipServiceableMobile =
|
||||
this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
|
||||
|
||||
return this.zipContainsMilitaryBase && isZipServiceableMobile;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -171,7 +204,15 @@ export default {
|
|||
store.getters.payment.isInsurance !== null
|
||||
);
|
||||
},
|
||||
setData(mobileFeePart) {
|
||||
setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
|
||||
if (zipCodeData) {
|
||||
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
|
||||
}
|
||||
|
||||
if (serviceabilityDetails) {
|
||||
this.setServiceabilityDetails(serviceabilityDetails);
|
||||
}
|
||||
|
||||
if (mobileFeePart) {
|
||||
this.mobileFeePart = mobileFeePart;
|
||||
}
|
||||
|
|
@ -203,11 +244,13 @@ export default {
|
|||
|
||||
this.isVehicleProtected = null;
|
||||
},
|
||||
setServiceZipCodeModalMeta(meta) {
|
||||
this.serviceZipCodeMeta = meta;
|
||||
},
|
||||
setMobileLocationModalMeta(meta) {
|
||||
this.mobileLocationMeta = meta;
|
||||
setServiceabilityDetails(serviceabilityDetails) {
|
||||
this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
|
||||
this.isRecalibrationServiceableInshop =
|
||||
serviceabilityDetails.isRecalibrationServiceableInshop;
|
||||
this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
|
||||
this.isRecalibrationServiceableMobile =
|
||||
serviceabilityDetails.isRecalibrationServiceableMobile;
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
|
|
@ -219,6 +262,7 @@ export default {
|
|||
components: {
|
||||
alert,
|
||||
serviceZipModalQuestion,
|
||||
serviceTypeQuestion,
|
||||
mobileLocationModalQuestions,
|
||||
funnelHeader,
|
||||
funnelFooter,
|
||||
|
|
@ -229,3 +273,11 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.question-text {
|
||||
& > span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,185 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import serviceTypeQuestion from "./service-type-question";
|
||||
|
||||
const mockCmsContent = {
|
||||
QuestionText: "Choose a service option:",
|
||||
Answers: [
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "Mobile",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "Mobile",
|
||||
},
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "Inshop",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "In-shop",
|
||||
},
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "DropOff",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "Drop-off",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const cmsWidgetName = "ServiceTypeQuestionWidget";
|
||||
const mockMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
|
||||
if (widgetName === cmsWidgetName) {
|
||||
return mockCmsContent[cmsFieldName];
|
||||
}
|
||||
|
||||
return null;
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
describe("service-type-question.vue", () => {
|
||||
it("Should display all options if both in-shop and mobile are available", async () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
cmsWidgetName: cmsWidgetName,
|
||||
isGlassServiceableInshop: true,
|
||||
isRecalibrationServiceableInshop: true,
|
||||
isGlassServiceableMobile: true,
|
||||
isRecalibrationServiceableMobile: true,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.answersToDisplay).toEqual([
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "Mobile",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "Mobile",
|
||||
},
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "Inshop",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "In-shop",
|
||||
},
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "DropOff",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "Drop-off",
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("Should display only the In-Shop and Drop-Off answers when only in-shop service is available", async () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
cmsWidgetName: cmsWidgetName,
|
||||
isGlassServiceableInshop: true,
|
||||
isRecalibrationServiceableInshop: true,
|
||||
isGlassServiceableMobile: false,
|
||||
isRecalibrationServiceableMobile: false,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.answersToDisplay).toEqual([
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "Inshop",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "In-shop",
|
||||
},
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "DropOff",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "Drop-off",
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("Should display only the Mobile answer when only mobile service is available", async () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
cmsWidgetName: cmsWidgetName,
|
||||
isGlassServiceableInshop: false,
|
||||
isRecalibrationServiceableInshop: false,
|
||||
isGlassServiceableMobile: true,
|
||||
isRecalibrationServiceableMobile: true,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.answersToDisplay).toEqual([
|
||||
{
|
||||
AnswerImageUrl: "",
|
||||
Name: "Mobile",
|
||||
SubText: "",
|
||||
SubWidgetName: "",
|
||||
Text: "Mobile",
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("Should display no answers if neither in-shop nor mobile service are available", async () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
mixins: [mockMixin],
|
||||
props: {
|
||||
cmsWidgetName: cmsWidgetName,
|
||||
isGlassServiceableInshop: false,
|
||||
isRecalibrationServiceableInshop: false,
|
||||
isGlassServiceableMobile: false,
|
||||
isRecalibrationServiceableMobile: false,
|
||||
},
|
||||
mountOptions: {
|
||||
attachTo: document.body,
|
||||
},
|
||||
});
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.answersToDisplay).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
|
||||
const resultingMountOptions = getMountOptions({
|
||||
...mountOptions,
|
||||
mixins,
|
||||
});
|
||||
|
||||
if (props) resultingMountOptions.propsData = props;
|
||||
|
||||
const wrapper = isShallowMount
|
||||
? shallowMount(serviceTypeQuestion, resultingMountOptions)
|
||||
: mount(serviceTypeQuestion, resultingMountOptions);
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="service-type-question" aria-live="polite">
|
||||
<buttonQuestion
|
||||
:questionText="questionText"
|
||||
:answers="answersToDisplay"
|
||||
:groupName="groupName"
|
||||
buttonTypeString="listCard"
|
||||
v-model="selectedValues"
|
||||
:suppressError="suppressError"
|
||||
:validationRules="validationRules"
|
||||
isRequired />
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
|
||||
export default {
|
||||
name: "service-type-question",
|
||||
props: {
|
||||
modelValue: String,
|
||||
groupName: String,
|
||||
isAvailable: Boolean,
|
||||
suppressError: Boolean,
|
||||
validationRules: String,
|
||||
cmsWidgetName: String,
|
||||
isGlassServiceableMobile: Boolean,
|
||||
isGlassServiceableInshop: Boolean,
|
||||
isRecalibrationServiceableInshop: Boolean,
|
||||
isRecalibrationServiceableMobile: Boolean,
|
||||
},
|
||||
computed: {
|
||||
questionText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "Answers");
|
||||
},
|
||||
answersToDisplay() {
|
||||
let filteredAnswers;
|
||||
if (this.serviceability == "All") {
|
||||
filteredAnswers = this.answersFromCms;
|
||||
} else if (this.serviceability == "MobileOnly") {
|
||||
filteredAnswers = this.answersFromCms.filter((answer) => answer.Name == "Mobile");
|
||||
} else if (this.serviceability == "InshopOnly") {
|
||||
filteredAnswers = this.answersFromCms.filter(
|
||||
(answer) => answer.Name == "Inshop" || answer.Name == "DropOff"
|
||||
);
|
||||
} else if (this.serviceability == "None") {
|
||||
filteredAnswers = [];
|
||||
}
|
||||
|
||||
return filteredAnswers;
|
||||
},
|
||||
serviceability() {
|
||||
let mobileAvailable;
|
||||
if (this.IsRecalibrationServiceableMobile == null) {
|
||||
mobileAvailable = this.isGlassServiceableMobile;
|
||||
} else {
|
||||
mobileAvailable =
|
||||
this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
|
||||
}
|
||||
|
||||
const inshopAvailable =
|
||||
this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
|
||||
|
||||
let result;
|
||||
if (inshopAvailable && mobileAvailable) {
|
||||
result = "All";
|
||||
} else if (inshopAvailable && !mobileAvailable) {
|
||||
result = "InshopOnly";
|
||||
} else if (!inshopAvailable && mobileAvailable) {
|
||||
result = "MobileOnly";
|
||||
} else if (!inshopAvailable && !mobileAvailable) {
|
||||
result = "None";
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
selectedValues: {
|
||||
get: function () {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function (newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
serviceability: {
|
||||
handler(newValue) {
|
||||
if (newValue == "MobileOnly") {
|
||||
this.selectedValues = "Mobile";
|
||||
} else {
|
||||
this.selectedValues = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list-card img {
|
||||
height: auto;
|
||||
width: 3.417rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -33,12 +33,26 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
|
|||
return Promise.resolve(mobileFeePart);
|
||||
};
|
||||
|
||||
const mockGetServiceabilityDetails = (mockServiceZipCode) => {
|
||||
const serviceabilityDetails = {
|
||||
isGlassServiceableInshop: true,
|
||||
isRecalibrationServiceableInshop: true,
|
||||
isGlassServiceableMobile: true,
|
||||
isRecalibrationServiceableMobile: true,
|
||||
};
|
||||
|
||||
return Promise.resolve(serviceabilityDetails);
|
||||
};
|
||||
|
||||
jest.mock(
|
||||
"@/layouts/service-location/helpers/service-location-helper/service-location-helper",
|
||||
() => ({
|
||||
getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
|
||||
return mockGetPricedMobileFeePart(mockServiceZipCode);
|
||||
}),
|
||||
getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
|
||||
return mockGetServiceabilityDetails(mockServiceZipCode);
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
@footer-button-event="setZipCode">
|
||||
<serviceZipQuestion
|
||||
ref="serviceZipQuestion"
|
||||
customInputId="serviceZipCode"
|
||||
v-model="internalModel.zipCode"
|
||||
v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
|
||||
:cmsWidgetName="textboxQuestionWidgetName" />
|
||||
|
|
@ -39,7 +40,10 @@ import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-que
|
|||
import modal from "@/digital-components/modal/modal";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
|
||||
import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
import {
|
||||
getPricedMobileFeePart,
|
||||
getServiceabilityDetails,
|
||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
|
||||
export default {
|
||||
name: "service-zip-modal-question",
|
||||
|
|
@ -146,12 +150,16 @@ export default {
|
|||
const serviceZipCode = this.internalModel.zipCode;
|
||||
const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
|
||||
|
||||
// emit it to parent
|
||||
// retrieve serviceability details
|
||||
const serviceabilityDetails = await getServiceabilityDetails(serviceZipCode);
|
||||
|
||||
// update content related to service zip code
|
||||
this.$emit("updated-mobile-fee-part", mobileFeePart);
|
||||
this.$emit("updated-serviceability", serviceabilityDetails.data);
|
||||
this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
|
||||
|
||||
// Update the page level model
|
||||
this.$emit("update:modelValue", this.internalModel);
|
||||
this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
|
||||
|
||||
this.closeModal();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ const getDefaultState = () => {
|
|||
state: null,
|
||||
zipCode: null,
|
||||
zipCodeCtu: null,
|
||||
serviceType: null,
|
||||
},
|
||||
customer: {
|
||||
emailAddress: null,
|
||||
|
|
@ -926,6 +927,16 @@ export const actions = {
|
|||
});
|
||||
},
|
||||
|
||||
getServiceabilityDetails(context, { serviceZipCode }) {
|
||||
const lineItems = context.getters.order.lineItems;
|
||||
const lineItemsToSend = [...lineItems.supportingItems];
|
||||
const encodedLineItems = encodeURIComponent(JSON.stringify(lineItemsToSend));
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.GetServiceabilityDetails.method,
|
||||
endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}`,
|
||||
});
|
||||
},
|
||||
|
||||
getSupportingItems(context) {
|
||||
const glassPartsArray = context.getters.lineItems.glassParts ?? [];
|
||||
const carId = context.getters.vehicle.carId;
|
||||
|
|
@ -1653,3 +1664,12 @@ function getLineItemQueryStringForPricing(lineItems) {
|
|||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
function getLineItemQueryStringForServiceability(lineItems) {
|
||||
return lineItems
|
||||
.map((lineItem) => {
|
||||
let queryStringSnippet = `&lineItems=${lineItem.partNumber}`;
|
||||
return queryStringSnippet;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
|
|
|||
187
src/ux-components/modal-button-main/modal-button-main.spec.js
Normal file
187
src/ux-components/modal-button-main/modal-button-main.spec.js
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import modalButtonMain from "./modal-button-main";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import { nextTick } from "vue";
|
||||
|
||||
describe("modal-button-main.vue", () => {
|
||||
it("Should return btn-primary class", () => {
|
||||
// Arrange/Act
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
isPrimary: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
const button = wrapper.find("button");
|
||||
|
||||
// Assert
|
||||
expect(button.attributes("class")).toContain("btn-primary");
|
||||
});
|
||||
|
||||
it("Should return aria-disabled state", () => {
|
||||
// Arrange/Act
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
isDisabled: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
const button = wrapper.find("button");
|
||||
|
||||
// Assert
|
||||
expect(button.attributes()["aria-disabled"]).toEqual("true");
|
||||
});
|
||||
|
||||
it("Should return loader color", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderColor: "blue",
|
||||
loaderEnabled: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// Act
|
||||
wrapper.vm.clicked();
|
||||
await nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.find("loader-stub");
|
||||
expect(loader.attributes("class")).toContain("blue");
|
||||
});
|
||||
|
||||
it("Should return loader position", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
loaderEnabled: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// Act
|
||||
wrapper.vm.clicked();
|
||||
await nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.find("loader-stub");
|
||||
expect(loader.attributes("class")).toContain("right");
|
||||
});
|
||||
|
||||
it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
loaderEnabled: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
wrapper.setData({
|
||||
isLoaderDisplayed: true,
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.removeLoader();
|
||||
await nextTick();
|
||||
|
||||
// Assert
|
||||
const loader = wrapper.find("loader-stub");
|
||||
expect(wrapper.vm.isLoaderDisplayed).toBe(false);
|
||||
});
|
||||
|
||||
it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
loaderEnabled: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
wrapper.setData({
|
||||
isLoaderDisplayed: true,
|
||||
});
|
||||
|
||||
// Act
|
||||
wrapper.vm.resetButtonStyle();
|
||||
await nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.isLoaderDisplayed).toBe(false);
|
||||
});
|
||||
|
||||
it("Should emit 'click-event' event when clicking if the button is enabled", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
loaderEnabled: true,
|
||||
isDisabled: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const buttonElement = wrapper.find("button");
|
||||
|
||||
// Act
|
||||
buttonElement.trigger("click");
|
||||
|
||||
await nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted("click-event")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("Should not emit 'click-event' event when clicking if the button is disabled", async () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(
|
||||
modalButtonMain,
|
||||
setupMocks({
|
||||
propsData: {
|
||||
loaderPosition: "right",
|
||||
loaderEnabled: true,
|
||||
isDisabled: true,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const buttonElement = wrapper.find("button");
|
||||
|
||||
// Act
|
||||
buttonElement.trigger("click");
|
||||
|
||||
await nextTick();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.emitted("click-event")).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks(mountOptionsMockData = {}) {
|
||||
const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } };
|
||||
const baseMountOptions = getMountOptions(
|
||||
Object.assign(defaultMountOptions, mountOptionsMockData)
|
||||
);
|
||||
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
|
||||
|
||||
return allMountOptions;
|
||||
}
|
||||
153
src/ux-components/modal-button-main/modal-button-main.vue
Normal file
153
src/ux-components/modal-button-main/modal-button-main.vue
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<button
|
||||
type="button"
|
||||
:aria-disabled="isDisabled"
|
||||
class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
|
||||
:class="[
|
||||
isPrimary ? 'btn-primary' : 'btn-secondary',
|
||||
isFloat ? 'float-end' : '',
|
||||
isLoaderDisplayed ? 'has-loader' : '',
|
||||
]"
|
||||
@click="clicked">
|
||||
<span class="m-0">{{ this.buttonText }}</span>
|
||||
<loader
|
||||
class="ms-2"
|
||||
v-if="isLoaderDisplayed && !suppressLoader"
|
||||
v-bind:class="[this.loaderColor, this.loaderPosition]" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
|
||||
export default {
|
||||
name: "modalButtonMain",
|
||||
props: {
|
||||
isPrimary: Boolean,
|
||||
buttonText: String,
|
||||
isDisabled: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
isFloat: Boolean,
|
||||
suppressLoader: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoaderDisplayed: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
removeLoader() {
|
||||
this.isLoaderDisplayed = false;
|
||||
},
|
||||
clicked() {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.FMG_PAGE],
|
||||
this.GaActions.CLICKED,
|
||||
this.buttonText,
|
||||
true
|
||||
);
|
||||
if (!this.isDisabled) {
|
||||
this.isLoaderDisplayed = true;
|
||||
this.$emit("click-event");
|
||||
}
|
||||
},
|
||||
resetButtonStyle() {
|
||||
this.isLoaderDisplayed = false;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.btn {
|
||||
&.btn-primary {
|
||||
position: relative;
|
||||
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
color: $white;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
@media (hover: hover) {
|
||||
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
||||
}
|
||||
&:focus, // Mouse, touch, stylus focus
|
||||
&:focus-visible {
|
||||
// Keyboard focus for accessibility
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
||||
color: $white;
|
||||
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
|
||||
}
|
||||
&:disabled {
|
||||
background: $gray-200 !important;
|
||||
background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
|
||||
color: $gray-600 !important;
|
||||
font-weight: 400;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
&.has-loader {
|
||||
color: $white;
|
||||
background: $blue-700;
|
||||
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.delay {
|
||||
// fixes flicker while transitioning between states
|
||||
transition: background 0s 0s ease-in-out;
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
border: 1px solid $blue;
|
||||
border-radius: $border-radius-lg;
|
||||
color: $blue;
|
||||
font-weight: 500;
|
||||
transition: all 150ms linear;
|
||||
height: 3rem;
|
||||
&:hover {
|
||||
color: $white;
|
||||
@include blue-gradient;
|
||||
}
|
||||
&:focus, // Mouse, touch, stylus focus
|
||||
&:focus-visible {
|
||||
// Keyboard focus for accessibility
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
|
||||
color: $white;
|
||||
@include blue-gradient;
|
||||
}
|
||||
&:disabled {
|
||||
background: transparent;
|
||||
color: $gray-550 !important;
|
||||
font-weight: 400;
|
||||
height: 48px;
|
||||
border: 1px solid $gray-550;
|
||||
border-radius: $border-radius-lg;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
&.has-loader {
|
||||
color: $white;
|
||||
@include blue-gradient;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.delay {
|
||||
// fixes flicker while transitioning between states
|
||||
transition: background 0s 0s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue