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

Merge branch 'develop' into feature/CSR-1112

Browse source
This commit is contained in:
Leah Schumann 2023-04-21 08:01:44 -04:00
commit 8ac7007a2a
10 changed files with 559 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/constants/endpoints.js
View file

@ -54,6 +54,10 @@ const endpoints = {
url: "/vehicle/api/v1/vehicle/lookup-vin-by-address",
method: "POST",
},
LookupVinByImage: {
url: "/vehicle/api/v1/vehicle/vins-by-image",
method: "POST",
},
IsVinByAddressPermissible: {
url: "/vehicle/api/v1/vehicle/is-vin-by-address-permissible",
method: "GET",

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

@ -20,6 +20,7 @@ const storeActions = {
LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
LOOKUP_VIN_BY_PLATE: "lookupVinByPlate",
LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress",
LOOKUP_VIN_BY_IMAGE: "lookupVinByImage",
GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
GET_PARTS: "getParts",
GET_WIPERS: "getWipers",

248
src/digital-components/textbox-question/textbox-question.spec.js
View file

@ -161,4 +161,252 @@ describe("textboxQuestion.vue", () => {
// Assert
expect(wrapper.vm.handleChange).toHaveBeenCalled;
});
it("Should not display camera or spinner icon when disabled", () => {
// Arrange
const inputId = "test";
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
},
},
propsData: {
modelValue: "",
includeImageQuestion: true,
inputId: inputId,
isDisabled: true,
},
mixins: [mockMixin],
attachTo: document.body,
});
// Act
const cameraIcon = wrapper.find('[data-test="image-upload"]');
const loadingIcon = wrapper.findComponent("loader");
// Assert
expect(cameraIcon.exists()).toBe(false);
expect(loadingIcon.exists()).toBe(false);
});
describe("Image Uploading", () => {
it("Should call this.handleChange & emit update when fully valid image is submitted.", async () => {
// Arrange
const inputId = "test";
const responseValue = "testResponse";
const imageHandler = jest.fn().mockImplementation(
() =>
new Promise((resolve, reject) => {
resolve({
data: [responseValue],
});
})
);
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
},
},
propsData: {
modelValue: "",
"onUpdate:modelValue": (v) => wrapper.setProps({ modelValue: v }),
includeImageQuestion: true,
inputId: inputId,
imageQuestionSubmitHandler: imageHandler,
},
mixins: [mockMixin],
attachTo: document.body,
});
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
wrapper.vm.isImageValid = jest.fn().mockImplementation(() => true);
// Act
const imageUploadField = wrapper.find('[data-test="image-upload"]');
await imageUploadField.trigger("change");
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.imageQuestionSubmitHandler).toHaveBeenCalled();
expect(wrapper.vm.handleChange).toHaveBeenCalled();
expect(wrapper.emitted()).toHaveProperty("update:modelValue");
});
it("Should not call handler and emit image-lookup-error when image is invalid.", async () => {
// Arrange
const inputId = "test";
const responseValue = "testResponse";
const imageHandler = jest.fn().mockImplementation(
() =>
new Promise((resolve, reject) => {
resolve({
data: [responseValue],
});
})
);
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
},
},
propsData: {
modelValue: "",
"onUpdate:modelValue": (v) => wrapper.setProps({ modelValue: v }),
includeImageQuestion: true,
inputId: inputId,
imageQuestionSubmitHandler: imageHandler,
},
mixins: [mockMixin],
attachTo: document.body,
});
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
wrapper.vm.isImageValid = jest.fn().mockImplementation(() => false);
// Act
const imageUploadField = wrapper.find('[data-test="image-upload"]');
await imageUploadField.trigger("change");
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.imageQuestionSubmitHandler).not.toHaveBeenCalled();
expect(wrapper.vm.handleChange).not.toHaveBeenCalled();
expect(wrapper.emitted()).toHaveProperty("imageValidityError");
});
it("Should emit image-lookup-error when image lookup responds with an error.", async () => {
// Arrange
const inputId = "test";
const imageHandler = jest.fn().mockImplementation(
() =>
new Promise((resolve, reject) => {
reject({});
})
);
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
},
},
propsData: {
modelValue: "",
"onUpdate:modelValue": (v) => wrapper.setProps({ modelValue: v }),
includeImageQuestion: true,
inputId: inputId,
imageQuestionSubmitHandler: imageHandler,
},
mixins: [mockMixin],
attachTo: document.body,
});
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
wrapper.vm.isImageValid = jest.fn().mockImplementation(() => true);
// Act
const imageUploadField = wrapper.find('[data-test="image-upload"]');
await imageUploadField.trigger("change");
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.imageQuestionSubmitHandler).toHaveBeenCalled();
expect(wrapper.vm.handleChange).not.toHaveBeenCalled();
expect(wrapper.emitted()).toHaveProperty("imageLookupError");
});
});
describe("Image Validation", () => {
it("Should return true if a valid image is tested.", () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
},
},
propsData: {
inputId: "input ID",
maxFileSize: 5140 * 1028,
},
mixins: [mockMixin],
});
const image = {
size: 100 * 1028,
};
// Act
const result = wrapper.vm.isImageValid(image);
// Assert
expect(result).toBeTruthy();
});
it("Should return false if null image is tested.", () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
},
},
propsData: {
inputId: "input ID",
maxFileSize: 5140 * 1028,
},
mixins: [mockMixin],
});
const image = null;
// Act
const result = wrapper.vm.isImageValid(image);
// Assert
expect(result).toBeFalsy();
});
it("Should return false if oversized image is tested.", () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
},
},
propsData: {
inputId: "input ID",
maxFileSize: 5140 * 1028,
},
mixins: [mockMixin],
});
const image = {
size: 10000000 * 1028,
};
// Act
const result = wrapper.vm.isImageValid(image);
// Assert
expect(result).toBeFalsy();
});
});
});

95
src/digital-components/textbox-question/textbox-question.vue
View file

@ -15,7 +15,12 @@
hideInput ? 'hide-input' : '',
]"
v-html="questionText"></label>
<div class="input-wrapper" :class="[includeSearchIcon ? 'has-search-icon' : '']">
<div
class="input-wrapper"
:class="[
includeSearchIcon ? 'has-search-icon' : '',
includeImageQuestion ? 'has-camera-icon' : '',
]">
<input
class="form-control"
v-model.trim="value"
@ -41,6 +46,23 @@
:maxlength="maxLength ? maxLength : '999'"
@focus="$emit('focus', $event.target.value)" />
<button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
<template v-if="includeImageQuestion">
<template v-if="!isDisabled">
<label class="camera-icon-input" v-show="!isImageProcessing">
<input
type="file"
id="vin-input"
accept="image/jpeg,image/png"
aria-label="Camera icon/button"
data-test="image-upload"
@change="imageChanged" />
</label>
<loader
v-show="isImageProcessing"
loaderColor="blue"
class="loading-icon"></loader>
</template>
</template>
</div>
<div v-show="errorMessage" class="row my-1 form-test-error">
<span
@ -55,6 +77,9 @@
<script>
import { useField, validate } from "vee-validate";
import { storeActions } from "@/constants/store-actions";
import loader from "@/ux-components/loader/loader.vue";
import { ref } from "vue";
export default {
name: "textbox-question",
@ -88,6 +113,9 @@ export default {
questionAlignment: String, // Left or center. Left is default.
cornerStyle: String, // Rounded or square. Square is default.
includeSearchIcon: Boolean,
includeImageQuestion: Boolean,
imageQuestionSubmitHandler: Function,
maxFileSize: Number,
hideInput: Boolean,
centerErrorMessage: Boolean,
},
@ -97,6 +125,7 @@ export default {
const propsClone = Object.assign({}, props);
const modelValue = propsClone.modelValue;
let initialValue;
let isImageProcessing = ref(false);
switch (typeof modelValue) {
case "number":
@ -127,8 +156,37 @@ export default {
validate,
meta,
errors,
isImageProcessing,
};
},
methods: {
async imageChanged(e) {
let file = e.target.files[0];
if (!this.isImageValid(file)) {
this.$emit("imageValidityError");
return;
}
this.isImageProcessing = true;
try {
this.value = await this.imageQuestionSubmitHandler(file);
await this.$nextTick();
document.getElementById(this.inputId).dispatchEvent(new Event("change"));
} catch (error) {
this.$emit("imageLookupError");
}
this.isImageProcessing = false;
},
isImageValid(imageFile) {
return imageFile && imageFile.size < this.maxFileSize;
},
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
@ -153,6 +211,9 @@ export default {
}
},
},
components: {
loader,
},
};
</script>
@ -191,6 +252,38 @@ export default {
display: flex;
}
}
&.has-camera-icon {
label {
&.camera-icon-input {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1rem;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9774 16.5228C17.3559 16.5228 15.1864 18.6621 15.1864 21.3476C15.1864 24.0331 17.3107 26.1724 19.9774 26.1724C22.6441 26.1724 24.7684 24.0331 24.7684 21.3476C24.7684 18.6621 22.6441 16.5228 19.9774 16.5228Z' fill='%231574A1'/%3E%3Cpath d='M38.4181 7.23725H29.8701C29.1469 2.64 24.7684 0 19.9774 0C15.1864 0 10.8531 2.64 10.0847 7.23725H1.58192C0.723164 7.23725 0 7.96553 0 8.83035V33.7738C0 34.6387 0.723164 35.3669 1.58192 35.3669H38.4181C39.2768 35.3669 40 34.6387 40 33.7738V8.83035C40 7.96553 39.2768 7.23725 38.4181 7.23725ZM19.9774 29.7683C15.3672 29.7683 11.5706 25.9904 11.5706 21.3021C11.5706 16.6138 15.3672 12.8814 19.9774 12.8814C24.5876 12.8814 28.3842 16.6593 28.3842 21.3476C28.3842 26.0359 24.6328 29.7683 19.9774 29.7683ZM36.565 14.5655H33.0395V11.0152H36.565V14.5655Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center;
width: 1rem;
height: 100%;
display: flex;
border: none;
background-color: transparent;
&:hover {
cursor: pointer;
}
input[type="file"] {
position: absolute;
left: -9999px;
}
}
}
.loading-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1rem;
}
}
}
input {
&.has-icon {

10
src/global-methods.js
View file

@ -7,10 +7,16 @@ import { GaCategories, GaActions, GaLabels } from "@/constants/analytics";
import { headerKeys } from "@/constants/header-keys";
export default {
callHttpClient({ method, endpoint, payload, logApiCall = true }) {
callHttpClient({ method, endpoint, payload, logApiCall = true, isFormData = false }) {
return new Promise((resolve, reject) => {
const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
let payloadAndAnalyticsData = {};
if (isFormData) {
payloadAndAnalyticsData = payload;
payloadAndAnalyticsData.append("AppName", "FixMyGlass");
} else {
Object.assign(payloadAndAnalyticsData, payload, { AppName: "FixMyGlass" });
}
const headers = {
[headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
};

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

@ -15,37 +15,38 @@
modalWidgetName="ServiceZipModalWidget" />
<alert
ref="alertMilitaryBaseZip"
class="my-4"
class="my-5"
cmsWidgetName="AlertMilitaryBaseZipWidget"
v-if="displayMilitaryZipAlert"
alertClass="alert-warning" />
<alert
ref="alertMobileOnly"
class="my-4"
class="my-5"
cmsWidgetName="AlertMobileOnlyWidget"
v-if="displayServiceableMobileOnly"
alertClass="alert-warning" />
<alert
ref="alertRecalNoMobile"
class="my-4"
class="my-5"
cmsWidgetName="AlertRecalNoMobileWidget"
v-if="displayRecalibrationWarning"
@text-link-clicked="openModalAction"
alertClass="alert-warning" />
<alert
ref="alertInshopOnly"
class="my-4"
class="my-5"
cmsWidgetName="AlertInshopOnlyWidget"
v-if="displayServiceableInshopOnly"
alertClass="alert-warning" />
<alert
ref="alertNoShops"
class="my-4"
class="my-5"
cmsWidgetName="AlertNoShopsWidget"
v-if="displayNoShopsAlert"
alertClass="alert-warning" />
<appointmentTypeQuestion
v-model="selectedAppointmentType"
v-if="!displayNoShopsAlert"
:isServiceableMobile="isServiceableMobile"
:isServiceableInshop="isServiceableInshop"
ref="appointmentTypeQuestion"

91
src/layouts/vin-lookup/vin-lookup.spec.js
View file

@ -242,6 +242,97 @@ describe("vin-lookup.vue", () => {
// Assert
expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(0);
});
test("Error emitted by textbox-question element => VinScanFailed alert shown.", async () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const vinLookup = wrapper.findComponent('[data-test="vin-lookup-component"]');
vinLookup.trigger("imageLookupError");
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(1);
});
});
describe("getVinFromImage", () => {
test("GetVinFromImage resolves with first valid VIN when any vins are returned.", async () => {
// Arrange
const responseValue = "testResponse";
const lookup = jest.fn().mockImplementation(() => {
return new Promise((resolve, reject) => resolve([responseValue]));
});
const image = {};
const storeMixin = {
methods: {
dispatchStoreAction: lookup,
},
};
const { wrapper } = setupMocks({
mixins: [storeMixin],
});
// Act
const response = await wrapper.vm.getVinFromImage(image);
// Assert
expect(lookup).toHaveBeenCalled();
expect(response).toEqual(responseValue);
});
test("GetVinFromImage rejects if no vins are returned.", async () => {
// Arrange
const lookup = jest.fn().mockImplementation(() => {
return new Promise((resolve, reject) => resolve([]));
});
const image = {};
const storeMixin = {
methods: {
dispatchStoreAction: lookup,
},
};
const { wrapper } = setupMocks({
mixins: [storeMixin],
});
// Act
const promise = wrapper.vm.getVinFromImage(image);
// Assert
await expect(promise).rejects.toEqual("No VINs detected.");
});
test("GetVinFromImage rejects if an error occurs.", async () => {
const lookup = jest.fn().mockImplementation(() => {
return new Promise((resolve, reject) => reject());
});
const image = {};
const storeMixin = {
methods: {
dispatchStoreAction: lookup,
},
};
const { wrapper } = setupMocks({
mixins: [storeMixin],
});
// Act
const promise = wrapper.vm.getVinFromImage(image);
// Assert
await expect(promise).rejects.toEqual("An error occurred during the lookup.");
});
});
});

45
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -8,7 +8,7 @@
:displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<div class="row mt-2">
<div class="row mb-2">
<div class="col">
<textboxQuestion
cmsWidgetName="VinNumberQuestionWidget"
@ -18,7 +18,22 @@
validationRules="vin-required|vin-format"
:isDisabled="vinPopulatedOnPageLoad"
maxLength="17"
:mask="vinMask" />
:mask="vinMask"
includeImageQuestion
:imageQuestionSubmitHandler="getVinFromImage"
:maxFileSize="imageUploadMaxFileSize"
@image-lookup-error="displayVinScanAlert"
@image-validity-error="displayVinScanAlert"
data-test="vin-lookup-field"
ref="vinLookupQuestion" />
</div>
</div>
<div class="row">
<div class="col">
<alert
cmsWidgetName="AlertVinScanFailed"
v-if="displayVinScanFailedAlert"
alertClass="alert-danger" />
</div>
</div>
<div class="row mb-2">
@ -184,6 +199,7 @@ export default {
displayNonServiceableZipAlert: false,
displayVinNotFoundAlert: false,
displayMatchedDifferentVehicleAlert: false,
displayVinScanFailedAlert: false,
};
},
methods: {
@ -381,11 +397,30 @@ export default {
await this.navigateForwardWithSingleCarMatch();
}
},
displayVinScanAlert() {
this.displayVinScanFailedAlert = true;
},
getVinFromImage(image) {
return new Promise((resolve, reject) => {
this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, image)
.then((response) => {
if (response.data.length > 0) {
resolve(response.data[0]);
} else {
reject("No VINs detected.");
}
})
.catch(() => {
reject("An error occurred during the lookup.");
});
});
},
resetAlerts() {
this.displayMatchedDifferentVehicleAlert = false;
this.displayNonServiceableZipAlert = false;
this.displayInvalidZipAlert = false;
this.displayVinNotFoundAlert = false;
this.displayVinScanFailedAlert = false;
},
},
mounted() {
@ -446,10 +481,16 @@ export default {
return "XXXXXXXXXXXXXXXXX";
}
},
imageUploadMaxFileSize() {
let kiloBytes = 5140;
return kiloBytes * 1028;
},
},
watch: {
vin() {
this.displayVinNotFoundAlert = false;
this.displayVinScanFailedAlert = false;
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);

35
src/store/index.js
View file

@ -532,6 +532,16 @@ export const actions = {
},
});
},
lookupVinByImage(context, image) {
const data = new FormData();
data.append("vinImage", image);
return globalMethods.callHttpClient({
method: endpoints.LookupVinByImage.method,
endpoint: endpoints.LookupVinByImage.url,
payload: data,
isFormData: true,
});
},
isVinByAddressPermissible(context, zip) {
return globalMethods.callHttpClient({
method: endpoints.IsVinByAddressPermissible.method,
@ -928,12 +938,18 @@ export const actions = {
},
getServiceabilityDetails(context, { serviceZipCode }) {
const lineItems = context.getters.order.lineItems;
const lineItemsToSend = [...lineItems.supportingItems];
const encodedLineItems = encodeURIComponent(JSON.stringify(lineItemsToSend));
const lineItemsWithOnlyPartNumbers = context.getters.order.lineItems.supportingItems.map(
(lineItem) => ({
partNumber: lineItem.partNumber,
})
);
const lineItemsToSend = buildQueryStringParameterFromArrayOfComplexObjects(
lineItemsWithOnlyPartNumbers,
"lineItems"
);
return globalMethods.callHttpClient({
method: endpoints.GetServiceabilityDetails.method,
endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}`,
endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&${lineItemsToSend}`,
});
},
@ -1672,3 +1688,14 @@ function getLineItemQueryStringForPricing(lineItems) {
})
.join("");
}
function buildQueryStringParameterFromArrayOfComplexObjects(arrayOfObjects, parameterName) {
let queryStringParameter = "";
for (let i = 0; i < arrayOfObjects.length; i++) {
for (const [key, value] of Object.entries(arrayOfObjects[i])) {
queryStringParameter += `${parameterName}[${i}].${key}=${value}&`;
}
}
// Remove trailing &
return queryStringParameter.slice(0, -1);
}

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

@ -403,6 +403,39 @@ describe("Actions", () => {
expect(response.data).toEqual({ carId: "C00000001" });
});
it("lookupVinByImage action, should return list of vins", async () => {
// Arrange
const context = state;
const dummyImage = {};
globalMethods.callHttpClient.mockImplementation(() => {
return Promise.resolve({ data: ["1C6JJTAG3NL134044"] });
});
// Act
const response = await actions.lookupVinByImage(context, dummyImage);
// Assert
expect(response.data).toEqual(["1C6JJTAG3NL134044"]);
});
it("lookupVinByImage action, should reject if error in calling API", async () => {
// Arrange
const context = state;
const dummyImage = {};
globalMethods.callHttpClient.mockImplementation(() => {
return Promise.reject("An error occurred");
});
// Act
// Assert
await expect(actions.lookupVinByImage(context, dummyImage)).rejects.toEqual(
"An error occurred"
);
});
it("getVehicleMakes action, should return makes list", async () => {
// Arrange
const context = state;