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

CSR-1418

Browse source
This commit is contained in:
Sneha 2023-08-02 15:51:30 +05:30
parent 5c70ff81fd
commit 838acce4bd
7 changed files with 483 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/constants/store-actions.js
View file

@ -62,6 +62,7 @@ const storeActions = {
SAVE_VEHICLE_MAKE: "saveVehicleMake",
SAVE_VEHICLE_MODEL: "saveVehicleModel",
SAVE_VEHICLE_STYLE: "saveVehicleStyle",
SAVE_VEHICLE: "saveVehicle",
SAVE_VEHICLE_DAMAGE: "saveVehicleDamage",
SAVE_VIN_LOOKUP: "saveVinLookup",
SAVE_SERVICE_ZIP_CODE_INFO: "saveServiceZipCodeInfo",

117
src/digital-components/dropdown-vehicle/dropdown-vehicle.spec.js Normal file
View file

@ -0,0 +1,117 @@
import { shallowMount } from "@vue/test-utils";
import dropdownVehicle from "./dropdown-vehicle";
// Mock CMS content
const questionText = "Question Text";
const mockMixin = {
methods: {
getCmsContent: jest.fn().mockImplementation(() => {
return questionText;
}),
},
};
// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
// It is not being used.
describe("dropdownVehicle.vue", () => {
it("Should render a select input", async () => {
// Arrange
const wrapper = shallowMount(dropdownVehicle, {
propsData: {
options: {},
},
mixins: [mockMixin],
});
// Act
const select = wrapper.find("select");
// Assert
expect(select.exists()).toBe(true);
});
it("Should render the 'questionText' data value as the label text.", async () => {
// Arrange
const wrapper = shallowMount(dropdownVehicle, {
propsData: {
options: {},
},
mixins: [mockMixin],
});
// Act
const label = wrapper.find("label");
// Assert
expect(label.text()).toContain(questionText);
});
it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
// Arrange
const wrapper = shallowMount(dropdownVehicle, {
propsData: {
options: {},
},
mixins: [mockMixin],
});
// Act
const label = wrapper.find("label");
// Assert
expect(label.attributes("aria-label")).toContain(questionText);
});
it("Should return aria-disabled state as disabled", async () => {
// Arrange
const wrapper = shallowMount(dropdownVehicle, {
propsData: {
options: {},
isDisabled: true,
},
mixins: [mockMixin],
});
// Act
const select = wrapper.find("select");
// Assert
expect(select.attributes("aria-disabled")).toEqual("true");
});
it("Should emit new value when modelValue is changed", async () => {
// Arrange
const wrapper = shallowMount(dropdownVehicle, {
propsData: {
options: {},
modelValue: "val",
},
mixins: [mockMixin],
});
// Act
await wrapper.find("select").setValue("val2");
// Assert
expect(wrapper.emitted()).toHaveProperty("change");
});
it("Should call this.handleChange with new value when selectedOption is changed", async () => {
// Arrange
const wrapper = shallowMount(dropdownVehicle, {
propsData: {
options: {},
modelValue: "0",
},
mixins: [mockMixin],
});
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
// Act
wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);
// Assert
expect(wrapper.vm.handleChange).toHaveBeenCalled;
});
});

147
src/digital-components/dropdown-vehicle/dropdown-vehicle.vue Normal file
View file

@ -0,0 +1,147 @@
<template>
<div
class="dropdown-question"
:class="(errors && errors.length) || hasError ? 'has-error' : ''">
<label
:for="dropdownId"
:aria-label="questionText"
class="form-label"
v-html="questionText"></label>
<select
v-model="selectedOption"
class="form-select"
:id="dropdownId"
:name="dropdownId"
:aria-disabled="isDisabled"
:disabled="isDisabled"
:aria-required="isRequired"
:validationRules="validationRules"
:placeHolderText="placeHolderText">
<option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
<option v-for="value in options" :value="value" :key="value">
{{ value }}
</option>
</select>
<div v-show="errorMessage" class="row mt-2 form-test-error">
<span aria-atomic="true" aria-live="polite">{{ errorMessage }}</span>
</div>
</div>
</template>
<script>
import { useField } from "vee-validate";
import { v4 as uuidv4 } from "uuid";
export default {
name: "dropdown-vehicle",
props: {
customDropdownId: String,
options: {
type: Object,
required: true,
},
modelValue: String,
isDisabled: Boolean,
isRequired: Boolean,
validationRules: String,
placeHolderText: String,
cmsWidgetName: String,
hasError: Boolean,
},
setup(props) {
const uuid = uuidv4();
const dropdownId = !props.customDropdownId ? `dropdown-${uuid}` : props.customDropdownId;
const propsClone = Object.assign({}, props);
const modelValue = propsClone.modelValue;
let initialValue;
switch (typeof modelValue) {
case "number":
initialValue = modelValue;
break;
default:
initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
break;
}
const fieldOptions = {
type: "select",
value: props.modelValue,
initialValue: initialValue,
};
const { errorMessage, handleBlur, handleChange, meta, errors } = useField(
dropdownId,
props.validationRules,
fieldOptions
);
return {
dropdownId,
errorMessage,
handleBlur,
handleChange,
meta,
errors,
};
},
mounted() {
this.$emit("dropdownQuestionEvent.inputIdAssigned", this.inputId);
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
selectedOption: {
get: function () {
return !this.modelValue ? "" : this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
},
watch: {
selectedOption(newValue) {
this.handleChange(newValue);
},
},
};
</script>
<style lang="scss">
.dropdown-question {
label {
color: $black;
font-weight: 500;
}
.form-label {
margin-bottom: 0.25rem;
}
.form-select {
color: $gray-600;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
border: 1px solid $gray-500;
border-radius: 0.5rem;
min-height: 3rem;
&:focus,
&:focus-visible {
box-shadow: 0 0 0 2.5px $blue;
}
&:disabled,
&.disabled {
background-color: $gray-100;
filter: grayscale(100%);
&:hover {
box-shadow: 0 0 0 4px transparent;
border: 1px solid $gray-500;
}
}
&:hover {
border: 1px solid $gray-500;
box-shadow: 0 0 0 4px $blue-300;
}
}
}
</style>

50
src/layouts/vehicle/vehicle-question/vehicle-question.vue
View file

@ -1,67 +1,29 @@
<template>
<dropdownQuestion
:options="values"
disableAutoFill
v-model="selectedValue"
:isDisabled="!values.length" />
<dropdownVehicle disableAutoFill v-model="selectedValue" />
</template>
<script>
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
// import { storeActions } from "@/constants/store-actions.js";
// import baseMixin from "@/mixins/base-mixin.js";
import dropdownVehicle from "@/digital-components/dropdown-vehicle/dropdown-vehicle";
export default {
name: "vehicle-question",
data() {
return {
values: [],
};
},
props: {
modelValue: String,
updateValues: Function,
},
components: {
dropdownQuestion,
dropdownVehicle,
},
computed: {
selectedValue: {
get() {
return this.selectedIndex?.toString();
get: function () {
return this.modelValue?.toString();
},
set(newValue) {
this.selectedIndex = newValue;
newValue = newValue != null && newValue > -1 ? this.values[newValue] : null;
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
}
},
methods: {
async options(selectedYMMS) {
const results = await this.updateValues();
this.values = results?.data;
if (this.values.length == 1) {
this.selectedValue = 0;
} else {
this.selectedValue =
selectedYMMS != null ? this.values.indexOf(selectedYMMS) : null;
}
},
// loadInitialData() {
// return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
// },
// initializeComponent(initialData) {
// this.values = initialData;
// },
clearValues() {
this.values = [];
this.selectedValue = null;
},
},
};

217
src/layouts/vehicle/vehicle.vue
View file

@ -15,6 +15,8 @@
ref="vehicleYearQuestion"
class="mb-2 mt-4"
v-model="selectedYear"
:isDisabled="!yearOptions.length"
:options="yearOptions"
cmsWidgetName="VehicleYearQuestion"
validationRules="year-required"
placeHolderText="Select year"
@ -24,8 +26,9 @@
ref="vehicleMakeQuestion"
class="mb-2 mt-4"
v-model="selectedMake"
:isDisabled="!makeOptions.length"
:options="makeOptions"
cmsWidgetName="VehicleMakeQuestion"
:updateValues="updateMakeValues"
validationRules="make-required"
placeHolderText="Select make"
inputId="makeQuestionField" />
@ -35,7 +38,8 @@
class="mb-2 mt-4"
v-model="selectedModel"
cmsWidgetName="VehicleModelQuestion"
:updateValues="updateModelValues"
:isDisabled="!modelOptions.length"
:options="modelOptions"
validationRules="model-required"
placeHolderText="Select model"
inputId="modelQuestionField" />
@ -45,7 +49,8 @@
class="mb-2 mt-4"
v-model="selectedStyle"
cmsWidgetName="VehicleStyleQuestion"
:updateValues="updateStyleValues"
:isDisabled="!styleOptions.length"
:options="styleOptions"
validationRules="style-required"
placeHolderText="Select style"
inputId="styleQuestionField" />
@ -100,10 +105,14 @@ export default {
name: "vehicle",
data() {
return {
selectedYear: this.selectedYearfromStore,
selectedMake: this.selectedMakefromStore,
selectedModel: this.selectedModelfromStore,
selectedStyle: this.selectedStylefromStore,
selectedYear: this.selectedYearfromStore(),
selectedMake: this.selectedMakefromStore(),
selectedModel: this.selectedModelfromStore(),
selectedStyle: this.selectedStylefromStore(),
yearOptions: [],
makeOptions: [],
modelOptions: [],
styleOptions: [],
};
},
@ -112,10 +121,6 @@ export default {
validationRules: String,
},
// mounted() {
// this.$refs["vehicleYearQuestion"].getNewValues(this.selectedYearfromStore);
// },
async beforeRouteEnter(to, from, next) {
// Call APIs
@ -123,7 +128,43 @@ export default {
const experimentForLogging = store.getters.applicationUser.experiments.find(
(e) => e.universeName === experimentUniverses.CONCEPT_FUNNEL
);
const yearQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
const yearQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_YEARS,
{}
);
var makeQuestionInitialDataPromise = null;
var modelQuestionInitialDataPromise = null;
var styleQuestionInitialDataPromise = null;
if (
store.getters.order.vehicle.make &&
store.getters.order.vehicle.model &&
store.getters.order.vehicle.style
) {
makeQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_MAKES,
{
year: store.getters.order.vehicle.year,
}
);
modelQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_MODELS,
{
year: store.getters.order.vehicle.year,
make: store.getters.order.vehicle.make,
}
);
styleQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_STYLES,
{
year: store.getters.order.vehicle.year,
make: store.getters.order.vehicle.make,
model: store.getters.order.vehicle.model,
}
);
}
// If the concept funnel experiment is found, as it should be when coming from safelite.com, then log the experiment exposure.
if (experimentForLogging !== undefined) {
@ -150,6 +191,18 @@ export default {
resultKey: "yearQuestionInitialData",
promise: yearQuestionInitialDataPromise,
},
{
resultKey: "makeQuestionInitialData",
promise: makeQuestionInitialDataPromise,
},
{
resultKey: "modelQuestionInitialData",
promise: modelQuestionInitialDataPromise,
},
{
resultKey: "styleQuestionInitialData",
promise: styleQuestionInitialDataPromise,
},
];
let resultMap = await settleAllPromises(promiseResultMap);
@ -157,49 +210,74 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
//vm.$refs.vehicleQuestion.initializeComponent(resultMap.yearQuestionInitialData);
vm.initializeYearComponent(resultMap.yearQuestionInitialData);
if (
makeQuestionInitialDataPromise &&
modelQuestionInitialDataPromise &&
styleQuestionInitialDataPromise
)
vm.initializeMMSComponent(
resultMap.makeQuestionInitialData,
resultMap.modelQuestionInitialData,
resultMap.styleQuestionInitialData
);
});
},
watch: {
selectedYear(year) {
const parsedYear = parseInt(year);
this.dispatchStoreAction(storeActions.SAVE_VEHICLE_YEAR, parsedYear);
async selectedYear(year) {
if (year) {
this.$refs["vehicleMakeQuestion"].options(this.selectedMakefromStore);
const result = await this.getMakeOptions(year);
this.makeOptions = result?.data;
if (this.selectedYearfromStore() !== year) {
this.selectedMake = null;
this.selectedModel = null;
this.selectedStyle = null;
}
} else {
this.$refs["vehicleMakeQuestion"].clearValues();
this.makeOptions = [];
}
},
selectedMake(make) {
this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false);
async selectedMake(make) {
if (make) {
this.$refs["vehicleModelQuestion"].options(this.selectedModelfromStore);
const result = await this.getModelOptions(this.selectedYear, make);
this.modelOptions = result?.data;
if (this.selectedMakefromStore() !== make) {
this.selectedModel = null;
this.selectedStyle = null;
}
} else {
this.$refs["vehicleModelQuestion"].clearValues();
this.modelOptions = [];
}
},
selectedModel(model) {
this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MODEL, model, false);
async selectedModel(model) {
if (model) {
this.$refs["vehicleStyleQuestion"].options(this.selectedStylefromStore);
const result = await this.getStyleOptions(
this.selectedYear,
this.selectedMake,
model
);
this.styleOptions = result?.data;
if (this.selectedModelfromStore() !== model) {
this.selectedStyle = null;
}
} else {
this.$refs["vehicleStyleQuestion"].clearValues();
this.styleOptions = [];
}
},
selectedStyle(style) {
this.dispatchStoreAction(storeActions.SAVE_VEHICLE_STYLE, style, false);
this.setVehicle();
this.setVehicle(this.selectedYear, this.selectedMake, this.selectedModel, style);
},
},
methods: {
setVehicle() {
setVehicle(year, make, model, style) {
return this.dispatchStoreAction(this.storeActions.SET_VEHICLE, {
year: this.$store.getters.vehicle.year,
make: this.$store.getters.vehicle.make,
model: this.$store.getters.vehicle.model,
style: this.$store.getters.vehicle.style,
year: year,
make: make,
model: model,
style: style,
});
},
@ -212,42 +290,29 @@ export default {
},
navigateForward() {
this.dispatchStoreAction(
storeActions.SAVE_VEHICLE,
{
year: this.selectedYear,
make: this.selectedMake,
model: this.selectedModel,
style: this.selectedStyle,
},
false
);
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
},
// async updateYearValues() {
// return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
// },
async updateMakeValues() {
return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MAKES, {
year: store.getters.vehicle.year,
});
initializeYearComponent(initialData) {
this.yearOptions = initialData;
},
async updateModelValues() {
return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MODELS, {
year: store.getters.vehicle.year,
make: store.getters.vehicle.make,
});
},
async updateStyleValues() {
return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_STYLES, {
year: store.getters.vehicle.year,
make: store.getters.vehicle.make,
model: store.getters.vehicle.model,
});
},
},
computed: {
displayGeneric() {
return !this.selectedStyle;
initializeMMSComponent(makeOptions, modelOptions, styleOptions) {
this.makeOptions = makeOptions;
this.modelOptions = modelOptions;
this.styleOptions = styleOptions;
},
selectedYearfromStore() {
return store.getters.vehicle.year;
return store.getters.vehicle.year?.toString();
},
selectedMakefromStore() {
return store.getters.vehicle.make;
@ -258,6 +323,32 @@ export default {
selectedStylefromStore() {
return store.getters.vehicle.style;
},
async getMakeOptions(year) {
return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MAKES, {
year: year,
});
},
async getModelOptions(year, make) {
return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MODELS, {
year: year,
make: make,
});
},
async getStyleOptions(year, make, model) {
return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_STYLES, {
year: year,
make: make,
model: model,
});
},
},
computed: {
displayGeneric() {
return !this.selectedStyle;
},
},
components: {

15
src/store/index.js
View file

@ -1619,6 +1619,21 @@ export const actions = {
}
},
saveVehicle(context, { year, make, model, style }) {
if (context.state.order.vehicle.year !== year) {
context.commit(storeMutations.UPDATE_YEAR, year);
}
if (context.state.order.vehicle.make !== make) {
context.commit(storeMutations.UPDATE_MAKE, make);
}
if (context.state.order.vehicle.model !== model) {
context.commit(storeMutations.UPDATE_MODEL, model);
}
if (context.state.order.vehicle.style !== style) {
context.commit(storeMutations.UPDATE_STYLE, style);
}
},
saveVehicleDamage(
context,
{ isWindshieldRepair, selectedGlassToReplace, selectedWindshieldChipCount }

43
src/store/store.spec.js
View file

@ -1702,6 +1702,49 @@ describe("Actions", () => {
expect(commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
});
it("saveVehicle, should save vehicle info", () => {
// Arrange
const context = state;
context.state = {
order: {
vehicle: {
year: "2016",
make: "Toyota",
model: "Accord",
style: "SUV",
},
},
};
const commit = jest.fn();
context.commit = commit;
//Act
const payload = {
year: "2015",
make: "Honda",
model: "Civic",
style: "Sedan",
};
actions.saveVehicle(context, payload);
//Assert
if (context.state.order.vehicle.year !== payload.year) {
expect(commit).toBeCalledWith(storeMutations.UPDATE_YEAR, payload.year);
}
if (context.state.order.vehicle.make !== payload.make) {
expect(commit).toBeCalledWith(storeMutations.UPDATE_MAKE, payload.make);
}
if (context.state.order.vehicle.model !== payload.model) {
expect(commit).toBeCalledWith(storeMutations.UPDATE_MODEL, payload.model);
}
if (context.state.order.vehicle.style !== payload.style) {
expect(commit).toBeCalledWith(storeMutations.UPDATE_STYLE, payload.style);
}
});
it("saveVehicleDamage, should wipe out damage if different", () => {
// Arrange
const context = state;