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

Merge branch 'develop' into feature/CSR-1063

Browse source
This commit is contained in:
Chloe Herd 2023-04-11 11:20:46 -04:00
commit 3b278bd5b2
5 changed files with 199 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/digital-components/modal/modal.vue
View file

@ -59,7 +59,6 @@ export default {
},
setup() {
const modalId = `modal-${crypto.randomUUID()}`;
const { meta, validate, resetForm } = useForm();
return {

64
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -1,7 +1,7 @@
<template>
<transition name="fade" mode="out-in">
<div class="mobile-location-questions">
<div class="text-center">
<div class="text-center" :id="componentId">
<label
for="mobileLocationLinkPromptId"
:aria-label="mobileLocationLinkPromptText"
@ -21,6 +21,11 @@
:customText="mobileFeeText"
cmsWidgetName="MobileFeeDisclaimerWidget"
typeStyle="caption" />
<div v-show="errorMessage" class="row my-1 form-test-error">
<span class="d-inline-flex small mt-0 center-error-message" role="alert">
{{ errorMessage }}
</span>
</div>
</div>
<modal
:ref="modalName"
@ -61,12 +66,14 @@ import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location
// Helpers
import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
import {
getPricedMobileFeePart,
getServiceabilityDetails,
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
// Validation
import { useField } from "vee-validate";
export default {
name: "mobile-location-modal-questions",
emits: ["update:modelValue", "updated-mobile-fee-part", "updated-contains-military-base"],
@ -76,6 +83,35 @@ export default {
displayInvalidZipAlert: false,
};
},
setup(props) {
const componentId = !props.customComponentId
? `component-${crypto.randomUUID()}`
: props.customComponentId;
// Integrate this component as a single field with an object for it's value into the page level validation
const modelValue = deepClone(props).modelValue;
const initialValue = modelValue;
const fieldOptions = {
value: modelValue,
initialValue: initialValue,
};
const { errorMessage, handleChange, meta, validate, errors } = useField(
componentId,
props.validationRules,
fieldOptions
);
return {
componentId,
errorMessage,
handleChange,
validate,
meta,
errors,
};
},
props: {
modelValue: {
type: Object,
@ -98,6 +134,8 @@ export default {
modalWidgetName: String,
alertNonServiceableZipWidgetName: String,
alertInvalidZipWidgetName: String,
customComponentId: String,
validationRules: String,
},
computed: {
mobileLocationLinkPromptText() {
@ -161,7 +199,7 @@ export default {
},
onModalClosed() {
this.internalModel = deepClone(this.modelValue);
this.resetAlerts();
this.resetValidation();
},
resetComponent(updatedServiceZipCodeInfo) {
// Reset the validation form, setting the initial values
@ -180,8 +218,18 @@ export default {
resetModalButtonStyle() {
this.$refs[this.modalName].resetButtonStyle();
},
resetAlerts() {
resetValidation() {
this.$refs.addressQuestions.resetAlerts();
this.$refs[this.modalName].resetForm({
values: {
autocomplete: this.internalModel.addressQuestions.streetAddress,
city: this.internalModel.addressQuestions.city,
state: this.internalModel.addressQuestions.state,
zipCode: this.internalModel.addressQuestions.zipCode,
isVehicleProtected: this.internalModel.isVehicleProtected,
},
});
},
async setMobileLocation() {
// Validate the Zip Code
@ -217,6 +265,8 @@ export default {
handler(newValue) {
this.internalModel = deepClone(newValue);
this.handleChange(newValue);
this.resetComponent({
streetAddress: newValue.addressQuestions.streetAddress,
city: newValue.addressQuestions.city,
@ -240,6 +290,12 @@ export default {
</script>
<style lang="scss" scoped>
.mobile-location-questions {
.center-error-message {
justify-content: center !important;
}
}
.update-zip-text-link::before {
content: "";
display: inline-block;

158
src/layouts/service-location/service-location.spec.js
View file

@ -260,7 +260,11 @@ describe("service-location.vue", () => {
const { wrapper } = setupMocks({
mixins: [mockMixin],
});
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const newServiceZipCodeQuestion = {
zipCode: "61606",
@ -281,8 +285,16 @@ describe("service-location.vue", () => {
test("resets mobile location when service zip code is updated", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
const newServiceZipCodeQuestion = {
zipCode: "61606",
@ -312,10 +324,6 @@ describe("service-location.vue", () => {
isVehicleProtected: null,
};
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
// Act
serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
@ -326,8 +334,16 @@ describe("service-location.vue", () => {
test("resets appointment type selection when service zip code is updated by service zip modal", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
const newServiceZipCodeQuestion = {
zipCode: "61606",
@ -336,10 +352,6 @@ describe("service-location.vue", () => {
wrapper.vm.selectedAppointmentType = "Inshop";
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
// Act
serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
@ -350,7 +362,17 @@ describe("service-location.vue", () => {
test("displays military zip message when zip is updated", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
const newServiceZipCodeQuestion = {
@ -358,10 +380,6 @@ describe("service-location.vue", () => {
state: "OH",
};
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
// Act
serviceZipCodeComponent.vm.$emit("updated-contains-military-base", true);
@ -371,10 +389,23 @@ describe("service-location.vue", () => {
});
describe("updating mobile location", () => {
test("updates the page model after providing the mobile location", () => {
test("updates the page model after providing the mobile location", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
await wrapper.setData({
selectedAppointmentType: "Mobile",
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
@ -399,12 +430,11 @@ describe("service-location.vue", () => {
isVehicleProtected: true,
};
const mobileLocationComponent = wrapper.findComponent({
ref: "mobileLocationModalQuestions",
});
// Act
mobileLocationComponent.vm.$emit("update:modelValue", newMobileLocationQuestions);
mobileLocationQuestionsComponent.vm.$emit(
"update:modelValue",
newMobileLocationQuestions
);
// Assert
expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
@ -413,8 +443,20 @@ describe("service-location.vue", () => {
test("resets service zip code when mobile location is updated", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
await wrapper.setData({
selectedAppointmentType: "Mobile",
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
@ -441,10 +483,6 @@ describe("service-location.vue", () => {
mobileFeePart: null,
};
const mobileLocationComponent = wrapper.findComponent({
ref: "mobileLocationModalQuestions",
});
wrapper.vm.serviceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
@ -456,29 +494,38 @@ describe("service-location.vue", () => {
};
// Act
mobileLocationComponent.vm.$emit("update:modelValue", newMobileLocationQuestions);
mobileLocationQuestionsComponent.vm.$emit(
"update:modelValue",
newMobileLocationQuestions
);
// Assert
expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo);
});
test("resets appointment type selection when service zip code is updated by mobile location modal when Mobile is not selected", () => {
test("resets appointment type selection when service zip code is updated by mobile location modal when Mobile is not selected", async () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
await wrapper.setData({
selectedAppointmentType: "Dropoff",
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
};
wrapper.vm.selectedAppointmentType = "Dropoff";
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
// Act
serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
@ -486,12 +533,23 @@ describe("service-location.vue", () => {
expect(wrapper.vm.selectedAppointmentType).toStrictEqual(null);
});
test("does not reset appointment type selection when service zip code is updated by mobile location modal when Mobile is selected", () => {
test("does not reset appointment type selection when service zip code is updated by mobile location modal when Mobile is selected", async () => {
// Arrange
const { wrapper } = setupMocks({});
const appointmentTypeMobile = "Mobile";
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn();
await wrapper.setData({
selectedAppointmentType: "Mobile",
});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: "mobileLocationQuestions",
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: "serviceZipCodeQuestion",
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
const mobileLocationQuestions = {
addressQuestions: {
@ -504,17 +562,11 @@ describe("service-location.vue", () => {
isVehicleProtected: "YesAnswer",
};
wrapper.vm.selectedAppointmentType = "Mobile";
const mobileLocationComponent = wrapper.findComponent({
ref: "mobileLocationModalQuestions",
});
// Act
mobileLocationComponent.vm.$emit("update:modelValue", mobileLocationQuestions);
mobileLocationQuestionsComponent.vm.$emit("update:modelValue", mobileLocationQuestions);
// Assert
expect(wrapper.vm.selectedAppointmentType).toStrictEqual(appointmentTypeMobile);
expect(wrapper.vm.selectedAppointmentType).toStrictEqual("Mobile");
});
});

52
src/layouts/service-location/service-location.vue
View file

@ -53,22 +53,17 @@
cmsWidgetName="AppointmentTypeQuestionWidget"
validationRules="option-required" />
<mobileLocationModalQuestions
v-show="selectedAppointmentType === 'Mobile'"
customComponentId="mobileLocationQuestions"
v-if="selectedAppointmentType === 'Mobile'"
v-model="mobileLocationQuestions"
:mobileFeePart="mobileFeePart"
@updated-mobile-fee-part="setMobileFeePart"
@updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase"
ref="mobileLocationModalQuestions"
validationRules="mobile-location-required"
ref="mobileLocationQuestions"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget" />
<textboxQuestion
v-show="selectedAppointmentType === 'Mobile'"
ref="mobileLocationQuestionsError"
v-model="mobileLocationValidationField"
validationRules="mobile-location-required"
hideInput
centerErrorMessage />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
@ -90,8 +85,7 @@ 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";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form, defineRule } from "vee-validate";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import { Form } from "vee-validate";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
// Supporting files
@ -105,10 +99,24 @@ import {
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";
defineRule("mobile-location-required", required(errorMessages.MOBILE_LOCATION_REQUIRED));
// Validation
import { defineRule } from "vee-validate";
import { errorMessages } from "@/constants/error-messages";
// DEFINE VALIDATION RULES
defineRule("mobile-location-required", (value) => {
if (
value.addressQuestions.streetAddress == "" ||
value.addressQuestions.city == "" ||
value.addressQuestions.state == "" ||
value.addressQuestions.zipCode == "" ||
value.isVehicleProtected == null
) {
return errorMessages.MOBILE_LOCATION_REQUIRED;
}
return true;
});
export default {
name: "service-location",
@ -127,7 +135,7 @@ export default {
mobileFeePart: null,
zipContainsMilitaryBase: false,
selectedAppointmentType: null,
mobileLocationValidationField: null,
providerNumber: null,
};
},
async beforeRouteEnter(to, from, next) {
@ -185,6 +193,7 @@ export default {
if (newValue.zipCode !== this.zipCode) {
this.resetMobileLocation();
this.selectedAppointmentType = null;
this.providerNumber = null;
}
this.state = newValue.state;
@ -213,13 +222,11 @@ export default {
this.zipCode = newValue.addressQuestions.zipCode;
this.isVehicleProtected = newValue.isVehicleProtected;
this.mobileLocationValidationField = "isValid";
if (
newValue.zipCode !== this.zipCode &&
!this.selectedAppointmentType == "Mobile"
) {
this.selectedAppointmentType = null;
if (newValue.zipCode !== this.zipCode) {
if (!this.selectedAppointmentType == "Mobile") {
this.selectedAppointmentType = null;
}
this.providerNumber = null;
}
},
},
@ -343,7 +350,6 @@ export default {
funnelSubHeader,
Form,
loadingModal,
textboxQuestion,
contentGroupModal,
},
};

20
src/store/index.js
View file

@ -928,23 +928,13 @@ export const actions = {
},
getServiceabilityDetails(context, { serviceZipCode }) {
return globalMethods.callMockHttpClient({
const lineItems = context.getters.order.lineItems;
const lineItemsToSend = [...lineItems.supportingItems];
const encodedLineItems = encodeURIComponent(JSON.stringify(lineItemsToSend));
return globalMethods.callHttpClient({
method: endpoints.GetServiceabilityDetails.method,
//TODO: Remove Mocky Endpoints
//endpoint: "https://run.mocky.io/v3/59e1a644-cf16-4f08-8069-1ab2a1e38f79", // NoShopsAvailable
//endpoint: "https://run.mocky.io/v3/4fe1fb89-dd56-4e4a-9af2-96bd1ab77847", // ForcedInshop
//endpoint: "https://run.mocky.io/v3/e2eaa097-6ea5-4906-af53-901edaa94939", // ForcedMobile
endpoint: "https://run.mocky.io/v3/1811a1fe-12a7-48f3-939e-d10a9b77dd25", // All Options
endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}`,
});
// TODO: Restore this when CSR-1104 is 100% complete
// 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) {