Merge branch 'develop' of https://github.com/Safelite/DigitalConsumer.FixMyGlass into feature/CSR-1204

src/constants/analytics.js

@@ -19,6 +19,7 @@ const GaActions = {
     CLICKED: "Clicked",
     VIF: "vif",
     SUBMITTED: "Submitted",
+    DISPLAYED: "Displayed",
 };
 
 const GaLabels = {

src/constants/endpoints.js

@@ -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",
@@ -86,6 +90,10 @@ const endpoints = {
         url: "/parts/api/v1/parts/supporting-items",
         method: "POST",
     },
+    GetProviderLocations: {
+        url: "/location/api/v1/location/providers",
+        method: "GET",
+    },
     GetCapabilityQuestions: {
         url: "/parts/api/v1/parts/capability-questions",
         method: "GET",

src/constants/store-actions.js

@@ -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",
@@ -30,6 +31,7 @@ const storeActions = {
     GET_MOLDING_QUESTIONS: "getMoldingQuestions",
     GET_MOBILE_FEE_PART: "getMobileFeePart",
     GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
+    GET_PROVIDER_LOCATIONS: "getProviderLocations",
     SAVE_SESSION: "saveSession",
     LOAD_SESSION: "loadSession",
     UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse",

src/digital-components/button-question/button-question.spec.js

@@ -1,6 +1,9 @@
 import { shallowMount, mount } from "@vue/test-utils";
 import buttonQuestion from "./button-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import crypto from "crypto";
+
+global.crypto = crypto;
 
 describe("buttonQuestion.vue", () => {
     it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {

src/digital-components/button-question/button-question.vue

@@ -86,7 +86,8 @@ import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
-import { ErrorMessage } from "vee-validate";
+import { useField, ErrorMessage } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
     name: "buttonQuestion",
@@ -128,6 +129,34 @@ export default {
         valueToLogType: String,
         additionalButtonStyling: String,
         isSmallQuestionText: Boolean,
+        availability: String,
+        customButtonQuestionId: String,
+        logDisplayedValuesEvent: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup(props) {
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue: modelValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
+            useField(props.groupName, props.validationRules, fieldOptions);
+
+        return {
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+            resetField,
+        };
     },
     beforeMount() {
         if (this.buttonTypeObject) {
@@ -226,6 +255,36 @@ export default {
             this.$emit(`buttonEvent.${eventName}`, event.args);
         },
     },
+    watch: {
+        modelValue(newValue) {
+            this.resetField({
+                value: newValue,
+            });
+        },
+        answers() {
+            //once we get the answers to display from parent, see if we need a GA event to log what we showed
+            if (this.logDisplayedValuesEvent && this.answers.length > 0) {
+                var eventLabel = "";
+                //build comma separated list of all items in button list that we are going to display on page
+                this.answers.forEach((item) => {
+                    if (item.Name) {
+                        eventLabel += item.Name + ",";
+                    }
+                    if (item.buttonLabel) {
+                        eventLabel += item.buttonLabel + ",";
+                    }
+                });
+
+                eventLabel = eventLabel.slice(0, -1); //remove the last comma
+                this.pushEventToGA(
+                    this.$route.query[queryStrings.FMG_PAGE],
+                    this.GaActions.DISPLAYED,
+                    eventLabel,
+                    true
+                );
+            }
+        },
+    },
     components: {
         listButton,
         listButtonHorizontal,

src/digital-components/dropdown-question/dropdown-question.vue

@@ -3,15 +3,15 @@
         class="dropdown-question"
         :class="(errors && errors.length) || hasError ? 'has-error' : ''">
         <label
-            :for="inputId"
+            :for="dropdownId"
             :aria-label="questionText"
             class="form-label"
             v-html="questionText"></label>
         <select
             v-model="selectedOption"
             class="form-select"
-            :id="inputId"
-            :name="inputId"
+            :id="dropdownId"
+            :name="dropdownId"
             :aria-disabled="isDisabled"
             :disabled="isDisabled"
             :aria-required="isRequired"
@@ -46,11 +46,12 @@ export default {
         cmsWidgetName: String,
         hasError: Boolean,
         placeHolderText: String,
+        customDropdownId: String,
     },
     setup(props) {
-        const inputId = !props.customInputId
+        const dropdownId = !props.customDropdownId
             ? `dropdown-${crypto.randomUUID()}`
-            : props.customInputId;
+            : props.customDropdownId;
 
         const propsClone = Object.assign({}, props);
         const modelValue = propsClone.modelValue;
@@ -72,13 +73,13 @@ export default {
         };
 
         const { errorMessage, handleBlur, handleChange, meta, errors } = useField(
-            inputId,
+            dropdownId,
             props.validationRules,
             fieldOptions
         );
 
         return {
-            inputId,
+            dropdownId,
             errorMessage,
             handleBlur,
             handleChange,

src/digital-components/modal/modal.vue

@@ -170,6 +170,9 @@ export default {
             }
         }
     }
+    &.show .modal-dialog {
+        transform: translateY(0);
+    }
 }
 body {
     .modal-backdrop {

src/digital-components/textbox-question/textbox-question.spec.js

@@ -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();
+        });
+    });
 });

src/digital-components/textbox-question/textbox-question.vue

@@ -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 {

src/global-methods.js

@@ -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),
             };

src/helpers/damage-helper.js

@@ -1,6 +1,7 @@
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
 import { storeActions } from "@/constants/store-actions";
+import { damageLocationsSelected as glassLocations } from "@/constants/damage-locations-selected";
 
 export function getDamageString() {
     // If it's a repair it's always a windshield.
@@ -45,6 +46,14 @@ export function getIsWindshieldOnly() {
     return returnString;
 }
 
+export function includesWindshieldReplacement() {
+    const windshieldMatches =
+        store.getters.order.damage.glassToReplace?.filter(
+            (glassToReplace) => glassToReplace.glassLocation === glassLocations.WINDSHIELD
+        ) ?? [];
+    return windshieldMatches.length > 0;
+}
+
 export async function isGlassAvailableForCarId(carId) {
     const newGlassOptions = await baseMixin.methods.dispatchStoreAction(
         storeActions.GET_DAMAGE_OPTIONS,

src/helpers/heritage-integration/navigation-helper.js

@@ -7,6 +7,7 @@ import { storeActions } from "@/constants/store-actions.js";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import experimentMixin from "@/mixins/experiment-mixin";
 import { experimentSettings } from "@/constants/experiments";
+import { includesWindshieldReplacement } from "@/helpers/damage-helper";
 import store from "@/store";
 import router from "@/router";
 
@@ -73,6 +74,7 @@ export async function skipVinLookup() {
     return (
         store.getters.damage.isRepair ||
         isVinOptionalVehicle ||
+        !includesWindshieldReplacement() ||
         experimentMixin.methods.hasSettingEqualTo(experimentSettings.SUPPRESS_VIN_CAPTURE, "true")
     );
 }
@@ -85,6 +87,7 @@ export async function skipVinLookupNotRepair() {
     return (
         !store.getters.damage.isRepair &&
         (isVinOptionalVehicle ||
+            !includesWindshieldReplacement() ||
             experimentMixin.methods.hasSettingEqualTo(
                 experimentSettings.SUPPRESS_VIN_CAPTURE,
                 "true"

src/helpers/heritage-integration/navigation-helper.spec.js

@@ -135,7 +135,7 @@ describe("getPageToRouteExistingOrderTo", () => {
         expect(result).toBe(fmgPageValues.VEHICLE_DAMAGE);
     });
 
-    test("user has YMMS and no vehicle questions > should return vin-lookup", async () => {
+    test("user has YMMS and no vehicle questions > should return estimate", async () => {
         // Arrange
         const toRoute = {
             query: {},
@@ -172,7 +172,7 @@ describe("getPageToRouteExistingOrderTo", () => {
         const result = await getPageToRouteExistingOrderTo(toRoute, false);
 
         //Assert
-        expect(result).toBe(fmgPageValues.VIN_LOOKUP);
+        expect(result).toBe(fmgPageValues.ESTIMATE);
     });
 
     test("user has YMMS but no questions or carId > should return estimate", async () => {

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -45,7 +45,7 @@
             <div class="row mb-4" v-show="showAddressFields" aria-live="polite">
                 <div class="col">
                     <dropdownQuestion
-                        customInputId="state"
+                        customDropdownId="state"
                         cmsWidgetName="StateQuestionWidget"
                         v-model="addressModel.state"
                         ref="state"
@@ -115,6 +115,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        preserveCityAndStateOnReset: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -390,8 +394,10 @@ export default {
                     this.displayNoMatchWarning = true;
 
                     this.addressModel.city = "";
-                    this.addressModel.state = "";
-                    this.addressModel.zipCode = "";
+                    if (!this.preserveCityAndStateOnReset) {
+                        this.addressModel.state = "";
+                        this.addressModel.zipCode = "";
+                    }
                     this.showAddressFields = true;
                     this.displayVerificationWarning = false;
 

src/layouts/estimate/estimate.spec.js

@@ -101,6 +101,9 @@ describe("estimate.vue", () => {
         //Arrange
         const { wrapper } = setupMocks({});
 
+        delete window.location;
+        window.location = { search: "?fmgPage=estimate&zipcode=43015" };
+
         //Act
         estimate.beforeRouteEnter.call(
             wrapper.vm,

src/layouts/estimate/estimate.vue

@@ -18,7 +18,8 @@
                         buttonTypeString="listButton"
                         v-model="selectedVinLookupMethod"
                         isRequired
-                        validationRules="option-required" />
+                        validationRules="option-required"
+                        :logDisplayedValuesEvent="true" />
                 </div>
                 <div v-else>
                     <alert
@@ -147,11 +148,17 @@ export default {
 
         const queryString = window.location.search;
         const urlParams = new URLSearchParams(queryString);
-        const hasZip = urlParams.has(queryStrings.ZIP_CODE);
-        const zip = urlParams.get(queryStrings.ZIP_CODE);
+        const lowerCaseParams = new URLSearchParams();
+        for (const [name, value] of urlParams) {
+            lowerCaseParams.append(name.toLowerCase(), value);
+        }
+
+        const zip = lowerCaseParams.get(queryStrings.ZIP_CODE)
+            ? lowerCaseParams.get(queryStrings.ZIP_CODE)
+            : store.getters.order.serviceLocation.zipCode;
 
         var vinByAddressPromise;
-        if (hasZip) {
+        if (zip) {
             vinByAddressPromise = baseMixin.methods.dispatchStoreAction(
                 storeActions.IS_VIN_BY_ADDRESS_PERMISSIBLE,
                 zip,
@@ -191,7 +198,7 @@ export default {
                 }
             }
 
-            if (zip && resultMap.vinByAddress === false) {
+            if (!zip || resultMap.vinByAddress === false) {
                 var indexToRemove = resultMap.cmsContent.VinLookupMethod.Answers.findIndex(
                     (answer) => answer.Name === "HomeAddress"
                 );
@@ -199,6 +206,7 @@ export default {
                     resultMap.cmsContent.VinLookupMethod.Answers.splice(indexToRemove, 1);
                 }
             }
+
             vm.setCmsContent(resultMap.cmsContent);
         });
     },

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -525,7 +525,6 @@ describe("license-plate-lookup.vue", () => {
             });
             const registrationZip = "12345";
             const serviceZip = "12345";
-            console.log("this is the test I care about");
 
             wrapper.vm.navigateForward = jest.fn();
             const vinLookup = { data: { vehicle: { carId: "TESTID1" } } };

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -7,7 +7,7 @@
                 :displayGenericVehicleImage="false" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container make-tall">
-                <div class="row my-2">
+                <div class="row mt-2 mb-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="LicensePlateNumberQuestionWidget"
@@ -17,7 +17,7 @@
                             validationRules="license-plate-required" />
                     </div>
                 </div>
-                <div class="row my-2">
+                <div class="row mt-0 mb-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="RegistrationZipQuestionWidget"
@@ -27,7 +27,7 @@
                             validationRules="zip-required|zip-format" />
                     </div>
                 </div>
-                <div class="row mt-2">
+                <div class="row mt-0">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="EmailAddressQuestionWidget"

src/layouts/quote/service-package-question/service-package-question.vue

@@ -7,7 +7,8 @@
         :buttonTypeObject="servicePackageRadio"
         v-model="selectedPackageName"
         :validationRules="validationRules"
-        :isRequired="isRequired" />
+        :isRequired="isRequired"
+        :logDisplayedValuesEvent="true" />
 </template>
 
 <script>

src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js

@@ -21,7 +21,7 @@ const mockCmsContent = {
         },
         {
             AnswerImageUrl: "",
-            Name: "DropOff",
+            Name: "Dropoff",
             SubText: "",
             SubWidgetName: "",
             Text: "Drop-off",
@@ -75,7 +75,7 @@ describe("appointment-type-question.vue", () => {
             },
             {
                 AnswerImageUrl: "",
-                Name: "DropOff",
+                Name: "Dropoff",
                 SubText: "",
                 SubWidgetName: "",
                 Text: "Drop-off",
@@ -108,7 +108,7 @@ describe("appointment-type-question.vue", () => {
             },
             {
                 AnswerImageUrl: "",
-                Name: "DropOff",
+                Name: "Dropoff",
                 SubText: "",
                 SubWidgetName: "",
                 Text: "Drop-off",

src/layouts/service-location/appointment-type-question/appointment-type-question.vue

@@ -2,6 +2,8 @@
     <transition name="fade" mode="out-in">
         <div class="appointment-type-question" aria-live="polite">
             <buttonQuestion
+                ref="buttonQuestion"
+                customButtonQuestionId="appointmentTypeQuestion"
                 :questionText="questionText"
                 :answers="answersToDisplay"
                 :groupName="groupName"
@@ -44,7 +46,7 @@ export default {
                 filteredAnswers = this.answersFromCms.filter((answer) => answer.Name == "Mobile");
             } else if (this.isServiceableInshop) {
                 filteredAnswers = this.answersFromCms.filter(
-                    (answer) => answer.Name == "Inshop" || answer.Name == "DropOff"
+                    (answer) => answer.Name == "Inshop" || answer.Name == "Dropoff"
                 );
             } else {
                 filteredAnswers = [];
@@ -65,12 +67,22 @@ export default {
         },
     },
     watch: {
+        answersToDisplay: {
+            handler(newValue) {
+                // If there is only one option to display and that option is 'Mobile' then select it
+                if (
+                    newValue.length == 1 &&
+                    newValue.findIndex((answer) => answer.Name == "Mobile") != -1
+                ) {
+                    this.selectedValues = "Mobile";
+                }
+            },
+            immediate: true,
+        },
         isMobileOnly: {
             handler(newValue) {
                 if (newValue) {
                     this.selectedValues = "Mobile";
-                } else {
-                    this.selectedValues = null;
                 }
             },
         },

src/layouts/service-location/helpers/service-location-helper/service-location-helper.spec.js

@@ -48,7 +48,7 @@ describe("service-location-helper.js", () => {
     it("Should return null if no service zip code is passed in", async () => {
         // Arrange
         const serviceZipCode = null;
-        const serviceType = "Replace";
+        const damageType = "Replace";
         const parentAccountNumber = 167132;
         const billToAccountNumber = 1234;
         const expected = null;
@@ -56,7 +56,7 @@ describe("service-location-helper.js", () => {
         // Act
         const result = await getPricedMobileFeePart(
             serviceZipCode,
-            serviceType,
+            damageType,
             parentAccountNumber,
             billToAccountNumber
         );
@@ -68,7 +68,7 @@ describe("service-location-helper.js", () => {
     it("Should return the priced mobile fee part", async () => {
         // Arrange
         const serviceZipCode = "43235";
-        const serviceType = "Replace";
+        const damageType = "Replace";
         const parentAccountNumber = 167132;
         const billToAccountNumber = 1234;
 
@@ -84,7 +84,7 @@ describe("service-location-helper.js", () => {
         // Act
         const result = await getPricedMobileFeePart(
             serviceZipCode,
-            serviceType,
+            damageType,
             parentAccountNumber,
             billToAccountNumber
         );

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -17,15 +17,15 @@
                         @click-event="openModal"
                         aria-label="Modal window" />
                 </div>
-                <textBlock
-                    :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>
+                <textBlock
+                    :customText="mobileFeeText"
+                    cmsWidgetName="MobileFeeDisclaimerWidget"
+                    typeStyle="caption" />
             </div>
             <modal
                 :ref="modalName"
@@ -37,7 +37,8 @@
                 <addressQuestions
                     ref="addressQuestions"
                     v-model="internalModel.addressQuestions"
-                    captureApartmentNumberOrBusinessName="true" />
+                    captureApartmentNumberOrBusinessName="true"
+                    preserveCityAndStateOnReset="true" />
                 <vehicleProtectedQuestion
                     ref="vehicleProtectedQuestion"
                     v-model="internalModel.isVehicleProtected"

src/layouts/service-location/service-location.spec.js

@@ -191,6 +191,8 @@ describe("service-location.vue", () => {
             // Arrange
             const { wrapper } = setupMocks({});
 
+            wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
             const mobileFeePart = {
                 partNumber: "MOBILE FEE",
                 description: "MOBILE FEE",
@@ -586,6 +588,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -612,6 +616,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -638,6 +644,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -664,6 +672,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -690,6 +700,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -717,6 +729,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -744,6 +758,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -771,6 +787,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -798,6 +816,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -825,6 +845,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -852,6 +874,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -879,6 +903,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -906,6 +932,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -933,6 +961,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -946,6 +976,36 @@ describe("service-location.vue", () => {
                 expect(wrapper.vm.isServiceableInshop).toEqual(true);
                 expect(wrapper.vm.displayServiceableInshopOnly).toEqual(false);
             });
+
+            test("displayServiceableInshopOnly should be false in the dual/static recalibration scenario", async () => {
+                // Arrange
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: true,
+                        isGlassServiceableMobile: true,
+                        isRecalibrationServiceableMobile: false,
+                    })
+                );
+
+                const { wrapper } = setupMocks({});
+
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                expect(wrapper.vm.isServiceableMobile).toEqual(false);
+                expect(wrapper.vm.isServiceableInshop).toEqual(true);
+                expect(wrapper.vm.displayServiceableInshopOnly).toEqual(false);
+                expect(wrapper.vm.displayRecalibrationWarning).toEqual(true);
+            });
         });
 
         describe("should be based only on glass serviceability if recalibration is not defined.", () => {
@@ -962,6 +1022,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -988,6 +1050,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1014,6 +1078,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1041,6 +1107,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1068,6 +1136,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1081,56 +1151,22 @@ describe("service-location.vue", () => {
                 expect(wrapper.vm.isServiceableInshop).toEqual(true);
                 expect(wrapper.vm.displayServiceableMobileOnly).toEqual(false);
             });
-        });
 
-        describe("should check for dual or static recalibration", () => {
-            test("isDualOrStaticRecalibration should be true if dual recalibration is present", async () => {
+            test("requiresInshopRecalibration should not be true if recalibration info is null.", async () => {
                 // Arrange
-                store.getters = {
-                    lineItems: {
-                        supportingItems: [
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "SUPPLIES-REPAIR",
-                                partType: "REPAIR FEE",
-                                sellingPrice: 7.99,
-                            },
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "RECAL DUAL",
-                                partType: "RECALIBRATION",
-                                sellingPrice: 0,
-                            },
-                        ],
-                    },
-                    order: {
-                        serviceLocation: {
-                            zipCode: "43235",
-                            state: "OH",
-                        },
-                    },
-                    damage: {
-                        isRepair: false,
-                    },
-                    payment: {
-                        isInsurance: false,
-                    },
-                    vehicle: {
-                        registration: {
-                            address: "5555 Sulgrave Dr",
-                            city: "New Albany",
-                            state: "OH",
-                            zipCode: "43054",
-                        },
-                    },
-                };
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: null,
+                        isGlassServiceableMobile: true,
+                        isRecalibrationServiceableMobile: null,
+                    })
+                );
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1140,82 +1176,9 @@ describe("service-location.vue", () => {
                 );
 
                 // Assert
-                expect(wrapper.vm.isDualOrStaticRecalibration).toBe(true);
-            });
-
-            test("isDualOrStaticRecalibration should be true if static recalibration is present", async () => {
-                // Arrange
-                store.getters = {
-                    lineItems: {
-                        supportingItems: [
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "SUPPLIES-REPAIR",
-                                partType: "REPAIR FEE",
-                                sellingPrice: 7.99,
-                            },
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "RECAL STATIC",
-                                partType: "RECALIBRATION",
-                                sellingPrice: 0,
-                            },
-                        ],
-                    },
-                    order: {
-                        serviceLocation: {
-                            zipCode: "43235",
-                            state: "OH",
-                        },
-                    },
-                    damage: {
-                        isRepair: false,
-                    },
-                    payment: {
-                        isInsurance: false,
-                    },
-                    vehicle: {
-                        registration: {
-                            address: "5555 Sulgrave Dr",
-                            city: "New Albany",
-                            state: "OH",
-                            zipCode: "43054",
-                        },
-                    },
-                };
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                await serviceLocation.beforeRouteEnter.call(
-                    wrapper.vm,
-                    { query: { fmgPage: "serviceLocation" } },
-                    undefined,
-                    (c) => c(wrapper.vm)
-                );
-
-                // Assert
-                expect(wrapper.vm.isDualOrStaticRecalibration).toBe(true);
-            });
-
-            test("isDualOrStaticRecalibration should be false if neither are present.", async () => {
-                // Arrange
-                const { wrapper } = setupMocks({});
-
-                // Act
-                await serviceLocation.beforeRouteEnter.call(
-                    wrapper.vm,
-                    { query: { fmgPage: "serviceLocation" } },
-                    undefined,
-                    (c) => c(wrapper.vm)
-                );
-
-                // Assert
-                expect(wrapper.vm.isDualOrStaticRecalibration).toBe(false);
+                expect(wrapper.vm.isServiceableMobile).toEqual(true);
+                expect(wrapper.vm.isServiceableInshop).toEqual(true);
+                expect(wrapper.vm.requiresInshopRecalibration).toEqual(false);
             });
         });
 
@@ -1233,6 +1196,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1260,6 +1225,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1287,6 +1254,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1314,6 +1283,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1341,6 +1312,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1368,6 +1341,8 @@ describe("service-location.vue", () => {
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1384,60 +1359,19 @@ describe("service-location.vue", () => {
 
             test("Should not show inshop-only error if dual or static recalibration, but should show that error instead.", async () => {
                 // Arrange
-                store.getters = {
-                    lineItems: {
-                        supportingItems: [
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "SUPPLIES-REPAIR",
-                                partType: "REPAIR FEE",
-                                sellingPrice: 7.99,
-                            },
-                            {
-                                description: null,
-                                kitPrice: 0,
-                                laborAmount: 0,
-                                partNumber: "RECAL STATIC",
-                                partType: "RECALIBRATION",
-                                sellingPrice: 0,
-                            },
-                        ],
-                    },
-                    order: {
-                        serviceLocation: {
-                            zipCode: "43235",
-                            state: "OH",
-                        },
-                    },
-                    damage: {
-                        isRepair: false,
-                    },
-                    payment: {
-                        isInsurance: false,
-                    },
-                    vehicle: {
-                        registration: {
-                            address: "5555 Sulgrave Dr",
-                            city: "New Albany",
-                            state: "OH",
-                            zipCode: "43054",
-                        },
-                    },
-                };
-
                 getServiceabilityDetails.mockImplementation(() =>
                     Promise.resolve({
-                        isGlassServiceableInshop: false,
-                        isRecalibrationServiceableInshop: false,
-                        isGlassServiceableMobile: false,
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: true,
+                        isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: false,
                     })
                 );
 
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,
@@ -1456,8 +1390,19 @@ describe("service-location.vue", () => {
 
             test("Should not show dual/static recalibration error if not those recalibration types", async () => {
                 // Arrange
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: true,
+                        isGlassServiceableMobile: true,
+                        isRecalibrationServiceableMobile: true,
+                    })
+                );
+
                 const { wrapper } = setupMocks({});
 
+                wrapper.vm.$refs.shopQuestion.initializeComponent = jest.fn();
+
                 // Act
                 await serviceLocation.beforeRouteEnter.call(
                     wrapper.vm,

src/layouts/service-location/service-location.vue

@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
             <serviceZipModalQuestion
                 v-model="serviceZipCodeQuestion"
                 ref="serviceZipCodeQuestion"
@@ -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-show="!displayNoShopsAlert"
                 :isServiceableMobile="isServiceableMobile"
                 :isServiceableInshop="isServiceableInshop"
                 ref="appointmentTypeQuestion"
@@ -64,11 +65,23 @@
                 ref="mobileLocationQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
+            <Transition name="fade" mode="out-in">
+                <shopQuestion
+                    ref="shopQuestion"
+                    v-show="
+                        selectedAppointmentType === 'Inshop' ||
+                        selectedAppointmentType === 'Dropoff'
+                    "
+                    v-model="providerNumber"
+                    :serviceZipCode="zipCode"
+                    :selectedAppointmentType="selectedAppointmentType"
+                    cmsWidgetName="ShopQuestionWidget" />
+            </Transition>
             <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid"
+                :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -81,6 +94,8 @@ 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 appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
+import shopQuestion from "@/layouts/service-location/shop-question/shop-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";
@@ -132,10 +147,10 @@ export default {
             isRecalibrationServiceableInshop: null,
             isGlassServiceableMobile: null,
             isRecalibrationServiceableMobile: null,
-            mobileFeePart: null,
-            zipContainsMilitaryBase: false,
             selectedAppointmentType: null,
             providerNumber: null,
+            mobileFeePart: null,
+            zipContainsMilitaryBase: false,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -149,6 +164,8 @@ export default {
 
         const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
 
+        const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData();
+
         // Settle promises and get results
         const promiseResultMap = [
             {
@@ -167,6 +184,10 @@ export default {
                 resultKey: "zipCodeData",
                 promise: getZipCodeData,
             },
+            {
+                resultKey: "shopQuestionInitialData",
+                promise: shopQuestionInitialDataPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -179,6 +200,7 @@ export default {
                 resultMap.serviceabilityDetails,
                 resultMap.mobileFeePart
             );
+            vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
         });
     },
     computed: {
@@ -198,6 +220,8 @@ export default {
 
                 this.state = newValue.state;
                 this.zipCode = newValue.zipCode;
+
+                this.$nextTick();
             },
         },
         mobileLocationQuestions: {
@@ -244,15 +268,16 @@ export default {
                 return this.isGlassServiceableInshop;
             }
         },
-        isDualOrStaticRecalibration() {
-            const supportingItems = store.getters.lineItems.supportingItems;
-
-            return supportingItems.some(
-                (item) => item.partNumber === "RECAL STATIC" || item.partNumber === "RECAL DUAL"
+        // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
+        requiresInshopRecalibration() {
+            return (
+                this.isServiceableInshop &&
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile === false
             );
         },
         displayRecalibrationWarning() {
-            return this.isDualOrStaticRecalibration;
+            return this.requiresInshopRecalibration;
         },
         displayServiceableInshopOnly() {
             return (
@@ -279,7 +304,7 @@ export default {
                 store.getters.payment.isInsurance !== null
             );
         },
-        setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
+        setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopQuestionData) {
             if (zipCodeData) {
                 this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
             }
@@ -351,6 +376,7 @@ export default {
         Form,
         loadingModal,
         contentGroupModal,
+        shopQuestion,
     },
 };
 </script>

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.spec.js

@@ -0,0 +1,70 @@
+import { mount } from "@vue/test-utils";
+import shopListButton from "./shop-list-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+
+describe("service-package-radio.vue", () => {
+    it("Should include buttonLabel in html", async () => {
+        // Arrange
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: mockProps,
+            },
+        });
+
+        // Act
+        const outputHtml = wrapper.html();
+
+        // Assert
+        expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabel"]));
+    });
+
+    it("Should include buttonLabelSubCopy in html", async () => {
+        // Arrange
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: mockProps,
+            },
+        });
+
+        // Act
+        const outputHtml = wrapper.html();
+
+        // Assert
+        expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelSubCopy"]));
+    });
+
+    it("Should include buttonLabelAuxillaryCopy in html", async () => {
+        // Arrange
+        let { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                propsData: mockProps,
+            },
+        });
+
+        // Act
+        const outputHtml = wrapper.html();
+
+        // Assert
+        expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelAuxillaryCopy"]));
+    });
+});
+
+const mockProps = {
+    buttonLabel: "buttonLabel test copy",
+    buttonLabelSubCopy: "buttonLabelSubCopy test copy",
+    buttonBodyCopy:
+        "<ul><li>buttonBodyCopy test copy</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>",
+    buttonLabelAuxillaryCopy: "buttonLabelAuxillaryCopy test copy",
+    value: 0,
+    modelValue: 0,
+    groupName: "mockGroup",
+};
+
+function setupMocks({ mountOptionsMockData = {} }) {
+    const wrapper = mount(shopListButton, {
+        ...mountOptionsMockData,
+        mixins: [inputButtonWrapperMixin],
+    });
+
+    return { wrapper };
+}

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue

@@ -0,0 +1,179 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <baseInputButton
+            v-bind="$props"
+            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
+            v-model="selectedValue">
+            <div
+                :aria-label="buttonLabel"
+                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+                <div class="row-one">
+                    <span class="m-0 button-label-copy" :class="textPosition">{{
+                        buttonLabel
+                    }}</span>
+                    <span class="m-0 button-label-sub-copy" :class="textPosition">{{
+                        buttonLabelSubCopy
+                    }}</span>
+                    <div
+                        class="availability-indicator"
+                        :class="availability === 'high' ? 'green' : 'red'">
+                        <span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
+                    </div>
+                </div>
+                <span
+                    v-if="buttonBodyCopy"
+                    class="m-0 button-label-sub-copy small"
+                    :class="textPosition"
+                    v-html="buttonBodyCopy"></span>
+                <span v-if="screenReaderOnlyText" class="sr-only">
+                    {{ screenReaderOnlyText }}
+                </span>
+                <loader
+                    v-if="isLoaderDisplayed && selectingInitiatesLoad"
+                    :class="[this.loaderColor, this.loaderPosition]" />
+            </div>
+        </baseInputButton>
+    </transition>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+
+export default {
+    name: "shopListButton",
+    mixins: [inputButtonWrapperMixin],
+    props: {
+        loaderColor: String,
+        loaderPosition: {
+            type: String,
+            default: "right",
+        },
+    },
+    data() {
+        return {
+            isLoaderDisplayed: false,
+            availability: "low",
+        };
+    },
+    methods: {
+        displayLoader() {
+            this.isLoaderDisplayed = true;
+        },
+        preHandleAnswerChange() {
+            if (this.selectingInitiatesLoad) {
+                this.displayLoader();
+            }
+        },
+    },
+    components: {
+        loader,
+        baseInputButton,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.loader {
+    position: absolute;
+}
+.list-button {
+    outline: none;
+    input[type="radio"],
+    input[type="checkbox"] {
+        position: static; //override bootstrap
+
+        &:focus-visible + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content {
+            color: $black;
+            font-weight: 500;
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+        }
+        &:checked:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content p,
+        &:checked + .list-button-content span {
+            font-weight: 500;
+        }
+        &:checked + .list-button-content span:nth-child(2) {
+            font-weight: 400;
+            color: $gray-600;
+        }
+    }
+}
+.list-button-content {
+    color: $gray-600;
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid $gray-500;
+    width: 100%;
+    outline: none;
+
+    span {
+        &.small {
+            font-size: 0.75rem;
+            color: $gray-550;
+        }
+    }
+}
+.button-content {
+    .row-one {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.25rem !important;
+
+        .button-label-copy {
+            flex-grow: 0;
+            line-height: 1.5rem;
+            font-weight: 500;
+        }
+
+        .button-label-sub-copy {
+            flex-grow: 1;
+            line-height: 1.25rem !important;
+            font-weight: 400;
+            font-size: 0.75rem;
+            color: #727676;
+            padding-left: 0.25rem;
+        }
+
+        .availability-indicator {
+            display: none;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0.125rem 1.5rem;
+            gap: 0.25rem;
+            background: #e3f2ea;
+            border-radius: 4.5rem;
+
+            .button-auxillary-copy {
+                justify-content: right;
+                line-height: 1.25rem !important;
+                font-weight: 400;
+                font-size: 0.75rem;
+            }
+
+            .green {
+                color: #006a36;
+                background: #e3f2ea;
+            }
+
+            .red {
+                color: #ac160b;
+                background: #e3f2ea;
+            }
+        }
+    }
+}
+</style>

src/layouts/service-location/shop-question/shop-question.spec.js

@@ -0,0 +1,555 @@
+import { shallowMount } from "@vue/test-utils";
+import { storeActions } from "@/constants/store-actions";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import shopQuestion from "./shop-question";
+
+jest.mock("@/mixins/base-mixin", () => ({
+    methods: {
+        dispatchStoreAction(action, items, encode) {
+            if (action === mockGetProviderLocationsStoreAction) {
+                return new Promise((resolve) => {
+                    resolve(mockNewShopList);
+                });
+            }
+        },
+        scrollToPageBottom() {},
+    },
+}));
+
+const mockGetProviderLocationsStoreAction = storeActions.GET_PROVIDER_LOCATIONS;
+const mockNewShopList = {
+    data: [
+        {
+            city: "Far",
+            country: "United States",
+            distance: 100,
+            providerNumber: "129",
+            state: "OH",
+            streetAddress: "555 First Capital Ln",
+            zipCode: "45601",
+        },
+        {
+            city: "Farther",
+            country: "United States",
+            distance: 200,
+            providerNumber: "130",
+            state: "OH",
+            streetAddress: "5486 N Grove Rd",
+            zipCode: "43215",
+        },
+        {
+            city: "Farthest (Ever)",
+            country: "United States",
+            distance: 380.5,
+            providerNumber: "131",
+            state: "OH",
+            streetAddress: "1670 Bongo Ave D",
+            zipCode: "43223",
+        },
+    ],
+};
+
+const mockCmsContent = {
+    QuestionText: "Select a shop:",
+};
+
+const cmsWidgetName = "AppointmentTypeQuestionWidget";
+const shopQuestionInitialData = [
+    {
+        city: "Worthington",
+        country: "United States",
+        distance: 1.5,
+        providerNumber: "123",
+        state: "OH",
+        streetAddress: "760 Dearborn Park Ln",
+        zipCode: "43085",
+    },
+    {
+        city: "Columbus",
+        country: "United States",
+        distance: 4.5,
+        providerNumber: "124",
+        state: "OH",
+        streetAddress: "5486 N Hamilton Rd",
+        zipCode: "43230",
+    },
+    {
+        city: "Powell",
+        country: "United States",
+        distance: 7,
+        providerNumber: "125",
+        state: "OH",
+        streetAddress: "1670 Harmon Ave C",
+        zipCode: "43223",
+    },
+    {
+        city: "Chillicothe",
+        country: "United States",
+        distance: 41.5,
+        providerNumber: "126",
+        state: "OH",
+        streetAddress: "555 First Capital Ln",
+        zipCode: "45601",
+    },
+    {
+        city: "Grove City",
+        country: "United States",
+        distance: 4.5,
+        providerNumber: "127",
+        state: "OH",
+        streetAddress: "5486 N Grove Rd",
+        zipCode: "43215",
+    },
+    {
+        city: "Dayton",
+        country: "United States",
+        distance: 80.5,
+        providerNumber: "128",
+        state: "OH",
+        streetAddress: "1670 Bongo Ave D",
+        zipCode: "43223",
+    },
+    {
+        city: "Far",
+        country: "United States",
+        distance: 100,
+        providerNumber: "129",
+        state: "OH",
+        streetAddress: "555 First Capital Ln",
+        zipCode: "45601",
+    },
+    {
+        city: "Farther",
+        country: "United States",
+        distance: 200,
+        providerNumber: "130",
+        state: "OH",
+        streetAddress: "5486 N Grove Rd",
+        zipCode: "43215",
+    },
+    {
+        city: "Farthest (Ever)",
+        country: "United States",
+        distance: 380.5,
+        providerNumber: "131",
+        state: "OH",
+        streetAddress: "1670 Bongo Ave D",
+        zipCode: "43223",
+    },
+];
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            if (widgetName === cmsWidgetName) {
+                return mockCmsContent[cmsFieldName];
+            }
+
+            return null;
+        }),
+    },
+};
+
+describe("shop-question.vue", () => {
+    it("Should display first three shops when an appointment type has already been selected", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: null,
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers).toEqual([
+            {
+                Name: "123",
+                buttonLabel: "Worthington",
+                buttonLabelSubCopy: "1.5 mi",
+                buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
+            },
+            {
+                Name: "124",
+                buttonLabel: "Columbus",
+                buttonLabelSubCopy: "4.5 mi",
+                buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
+            },
+            {
+                Name: "125",
+                buttonLabel: "Powell",
+                buttonLabelSubCopy: "7 mi",
+                buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
+            },
+        ]);
+    });
+
+    it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: null,
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+        // Assert
+        expect(showMoreShopsLink.exists()).toBe(true);
+    });
+
+    it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const alsoShopQuestionInitialData = [
+            {
+                city: "Worthington",
+                country: "United States",
+                distance: 1.5,
+                providerNumber: "123",
+                state: "OH",
+                streetAddress: "760 Dearborn Park Ln",
+                zipCode: "43085",
+            },
+            {
+                city: "Columbus",
+                country: "United States",
+                distance: 4.5,
+                providerNumber: "124",
+                state: "OH",
+                streetAddress: "5486 N Hamilton Rd",
+                zipCode: "43230",
+            },
+            {
+                city: "Powell",
+                country: "United States",
+                distance: 7,
+                providerNumber: "125",
+                state: "OH",
+                streetAddress: "1670 Harmon Ave C",
+                zipCode: "43223",
+            },
+        ];
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: null,
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(alsoShopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+        // Assert
+        expect(showMoreShopsLink.exists()).toBe(false);
+    });
+
+    it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const displayedAnswers = [
+            {
+                Name: "123",
+                buttonLabel: "Worthington",
+                buttonLabelSubCopy: "1.5 mi",
+                buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
+            },
+            {
+                Name: "124",
+                buttonLabel: "Columbus",
+                buttonLabelSubCopy: "4.5 mi",
+                buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
+            },
+            {
+                Name: "125",
+                buttonLabel: "Powell",
+                buttonLabelSubCopy: "7 mi",
+                buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
+            },
+        ];
+
+        // Arrange/Act
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: null,
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+
+        wrapper.vm.shops = shopQuestionInitialData;
+        wrapper.vm.answers = displayedAnswers;
+        wrapper.vm.shopIndex = 3;
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+        showMoreShopsLink.trigger("click");
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toBe(6);
+        expect(wrapper.vm.answers).toEqual([
+            {
+                Name: "123",
+                buttonLabel: "Worthington",
+                buttonLabelSubCopy: "1.5 mi",
+                buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
+            },
+            {
+                Name: "124",
+                buttonLabel: "Columbus",
+                buttonLabelSubCopy: "4.5 mi",
+                buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
+            },
+            {
+                Name: "125",
+                buttonLabel: "Powell",
+                buttonLabelSubCopy: "7 mi",
+                buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
+            },
+            {
+                Name: "126",
+                buttonLabel: "Chillicothe",
+                buttonLabelSubCopy: "41.5 mi",
+                buttonBodyCopy: "555 First Capital Ln, Chillicothe, OH 45601",
+            },
+            {
+                Name: "127",
+                buttonLabel: "Grove City",
+                buttonLabelSubCopy: "4.5 mi",
+                buttonBodyCopy: "5486 N Grove Rd, Grove City, OH 43215",
+            },
+            {
+                Name: "128",
+                buttonLabel: "Dayton",
+                buttonLabelSubCopy: "80.5 mi",
+                buttonBodyCopy: "1670 Bongo Ave D, Dayton, OH 43223",
+            },
+        ]);
+    });
+
+    it("Should display the number of shops necessary to show a previously selected shop", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: "127",
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toEqual(5);
+    });
+
+    it("Should reset the answers when the selected appointment type changes", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: "127",
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        wrapper.setProps({
+            selectedAppointmentType: "Inshop",
+        });
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toEqual(3);
+    });
+
+    it("Should reload the shops when the service zip code changes", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: "127",
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.shops = shopQuestionInitialData;
+
+        await wrapper.vm.$nextTick();
+
+        wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => {
+            return new Promise((resolve) => {
+                resolve(newShopList);
+            });
+        });
+        await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054");
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.shops.length).toEqual(3);
+        expect(wrapper.vm.shops).toEqual(mockNewShopList.data);
+    });
+
+    it("Should clear the existing answers when the service zip code changes", async () => {
+        // Arrange/Act
+        const container = document.createElement("div");
+        container.scrollTo = jest.fn();
+
+        container.classList.add("page-container-grouped-styles");
+        document.body.appendChild(container);
+
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                modelValue: "127",
+                serviceZipCode: "43081",
+                selectedAppointmentType: "Dropoff",
+                cmsWidgetName: cmsWidgetName,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
+        wrapper.setProps({
+            selectedAppointmentType: "Inshop",
+        });
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.answers.length).toEqual(3);
+    });
+});
+
+function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
+    const resultingMountOptions = getMountOptions({
+        ...mountOptions,
+        mixins,
+    });
+
+    if (props) resultingMountOptions.propsData = props;
+
+    const wrapper = isShallowMount
+        ? shallowMount(shopQuestion, resultingMountOptions)
+        : mount(shopQuestion, resultingMountOptions);
+
+    return { wrapper };
+}

src/layouts/service-location/shop-question/shop-question.vue

@@ -0,0 +1,222 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div class="shop-question" aria-live="polite">
+            <alert
+                ref="alertDropoffInformation"
+                v-if="displayDropoffInformation"
+                class="mb-4 drop-off-alert"
+                cmsWidgetName="AlertDropoffInformationWidget"
+                alertClass="alert-info"
+                v-bind:isDismissible="false" />
+            <buttonQuestion
+                ref="buttonQuestion"
+                buttonTypeString="shopListButton"
+                :buttonTypeObject="shopListButton"
+                class="radioQuestion"
+                :questionText="questionText"
+                :answers="answers"
+                groupName="chooseShop"
+                textPosition="text-start"
+                v-model="selectedValue"
+                isRequired
+                validationRules="option-required" />
+            <textLink
+                v-if="displaySeeMoreLocationsLink"
+                ref="showMoreShopsLink"
+                class="show-more-shops-link"
+                id="showMoreShopsId"
+                cmsWidgetName="ShowMoreShopsLinkWidget"
+                linkType="text"
+                :text="showMoreShopsLinkText"
+                href="#!"
+                @click-event="getNextShopsFromList"
+                :aria-label="showMoreShopsLinkText" />
+        </div>
+    </transition>
+</template>
+
+<script>
+// Components
+import alert from "@/ux-components/alert/alert";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import shopListButton from "./shop-list-button/shop-list-button";
+import textLink from "@/ux-components/text-link/text-link";
+
+import { storeActions } from "@/constants/store-actions.js";
+
+// Supporting files
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import baseMixin from "@/mixins/base-mixin.js";
+
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "shop-question",
+    mixins: [baseMixin],
+    data() {
+        return {
+            shops: [],
+            shopListButton: shopListButton,
+            answers: [],
+            shopIndex: 0,
+            displaySeeMoreLocationsLink: false,
+        };
+    },
+    props: {
+        modelValue: String,
+        serviceZipCode: String,
+        selectedAppointmentType: String,
+        cmsWidgetName: String,
+        validationRules: String,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        displayDropoffInformation() {
+            return this.selectedAppointmentType == "Dropoff";
+        },
+        showMoreShopsLinkText() {
+            return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
+        },
+    },
+    methods: {
+        loadInitialData() {
+            return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
+                serviceZipCode: this.serviceZipCode,
+            });
+        },
+        initializeComponent(shopQuestionInitialData) {
+            this.shops = shopQuestionInitialData;
+        },
+        async getNextShopsFromList(numberToGet = 3) {
+            const shopIterator = (array, n) => {
+                const l = array.length;
+                return () => {
+                    const end = this.shopIndex + n;
+                    const part = array.slice(this.shopIndex, end);
+                    this.shopIndex = end < l ? end : this.shops.length;
+                    return part;
+                };
+            };
+
+            const nextShop = shopIterator(this.shops, numberToGet);
+
+            // Map API result data
+            const mappedData = nextShop().map((shop) => {
+                return {
+                    Name: shop.providerNumber,
+                    buttonLabel: shop.city,
+                    buttonLabelSubCopy: `${shop.distance} mi`,
+                    buttonBodyCopy: `${shop.streetAddress}, ${shop.city}, ${shop.state} ${shop.zipCode}`,
+                };
+            });
+
+            if (this.answers.length === 0) {
+                this.answers = mappedData;
+            } else {
+                mappedData.forEach((shop) => {
+                    this.answers.push(shop);
+                });
+            }
+
+            await this.$nextTick();
+
+            if (this.shopIndex == this.shops.length) {
+                this.displaySeeMoreLocationsLink = false;
+            } else {
+                this.displaySeeMoreLocationsLink = true;
+            }
+
+            await this.$nextTick();
+
+            this.scrollToPageBottom();
+        },
+        resetShopList() {
+            this.answers = [];
+            this.shopIndex = 0;
+            this.selectedValue = "";
+            this.$refs.buttonQuestion.resetField();
+        },
+        async reloadShopData(serviceZipCode) {
+            const result = await this.loadInitialData(serviceZipCode);
+            this.initializeComponent(result.data);
+            this.resetShopList();
+        },
+    },
+    watch: {
+        serviceZipCode: {
+            async handler(newValue) {
+                await this.reloadShopData(newValue);
+            },
+        },
+        selectedAppointmentType: {
+            async handler(newValue) {
+                // If the validation has been previously triggered, clear it before displaying the component
+                this.$refs.buttonQuestion.resetField();
+
+                this.resetShopList();
+                await this.getNextShopsFromList();
+
+                await this.$nextTick();
+
+                this.scrollToPageBottom();
+            },
+        },
+        shops: {
+            handler(newValue) {
+                this.$refs.buttonQuestion.resetField();
+                const selectedShopIndex = newValue.findIndex(
+                    (provider) => provider.providerNumber == this.modelValue
+                );
+
+                if (selectedShopIndex >= 3) {
+                    this.getNextShopsFromList(selectedShopIndex + 1);
+                } else {
+                    this.getNextShopsFromList();
+                }
+            },
+        },
+    },
+    components: {
+        alert,
+        buttonQuestion,
+        textLink,
+    },
+};
+</script>
+
+<style lang="scss">
+.shop-question {
+    margin-top: 1rem !important;
+    text-align: center !important;
+
+    .button-question {
+        .question-text {
+            margin-top: 0.5rem !important;
+        }
+    }
+}
+
+.drop-off-alert {
+    .alert-heading {
+        text-align: left;
+        font-size: 0.75rem !important;
+        line-height: 1.25rem !important;
+    }
+
+    margin-top: 0.5rem !important;
+    padding-left: 1.5rem !important;
+    padding-right: 0.5rem !important;
+}
+</style>

src/layouts/vin-lookup/vin-information/vin-information.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="vin-information">
-        <div class="vin-toggle mt-2" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+        <div class="vin-toggle" :class="[isActive ? 'active' : '']" @click="toggleClass()">
             <textLink linkType="text" href="#!" :text="WhereCanIFindMyVINHeadline" />
         </div>
         <div class="vin-info">

src/layouts/vin-lookup/vin-lookup.spec.js

@@ -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.");
+        });
     });
 });
 

src/layouts/vin-lookup/vin-lookup.vue

@@ -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,15 +18,30 @@
                             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 mb-2">
+                <div class="row">
+                    <div class="col">
+                        <alert
+                            cmsWidgetName="AlertVinScanFailed"
+                            v-if="displayVinScanFailedAlert"
+                            alertClass="alert-danger" />
+                    </div>
+                </div>
+                <div class="row">
                     <div class="col">
                         <vinInformation />
                     </div>
                 </div>
-                <div class="row my-2">
+                <div class="row mb-0 mt-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="ServiceZipQuestionWidget"
@@ -37,7 +52,7 @@
                             validationRules="zip-required|zip-format" />
                     </div>
                 </div>
-                <div class="row mt-2">
+                <div class="row mt-4">
                     <div class="col">
                         <textboxQuestion
                             cmsWidgetName="EmailAddressQuestionWidget"
@@ -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")
             );

src/mixins/analytics-mixin.js

@@ -146,18 +146,18 @@ export default {
                 false
             );
 
-            if (response.data) {
-                if (response.data.sessionKey && skey === 0) {
+            if (response?.data) {
+                if (response?.data.sessionKey && skey === 0) {
                     setCookieProperties(
-                        { [cookieNames.SESSION_KEY]: response.data.sessionKey },
+                        { [cookieNames.SESSION_KEY]: response?.data.sessionKey },
                         {
                             useDefaultFunnelCookieAttributes: false,
                         }
                     );
                 }
-                if (response.data.sessionId && sid === "00000000-0000-0000-0000-000000000000") {
+                if (response?.data.sessionId && sid === "00000000-0000-0000-0000-000000000000") {
                     setCookieProperties(
-                        { [cookieNames.SESSION_ID]: response.data.sessionId },
+                        { [cookieNames.SESSION_ID]: response?.data.sessionId },
                         {
                             maxAge: 60 * 30, // 30 minutes
                         }

src/mixins/base-mixin.js

@@ -99,6 +99,14 @@ export default {
         getTotalLineItemPrice(lineItem) {
             return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
         },
+        scrollToPageTop() {
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
+            container.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+        },
+        scrollToPageBottom() {
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
+            container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
+        },
     },
     computed: {
         storeActions() {

src/router/index.js

@@ -161,6 +161,11 @@ const routes = [
 const router = createRouter({
     history: createWebHistory("/fmg/"),
     routes,
+    //Cause "page" to begin at the top when route chanages.
+    scrollBehavior(to, from, savedPosition) {
+        // always scroll to top
+        return { top: 0 };
+    },
 });
 
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------

src/store/index.js

@@ -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,
@@ -717,12 +727,21 @@ export const actions = {
             experimentsForUser: experimentsForUser,
         };
 
-        return globalMethods.callHttpClient({
-            method: endpoints.LogPageView.method,
-            endpoint: endpoints.LogPageView.url,
-            payload: payload,
-            logApiCall: false,
-        });
+        return globalMethods
+            .callHttpClient({
+                method: endpoints.LogPageView.method,
+                endpoint: endpoints.LogPageView.url,
+                payload: payload,
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
     logCustomEvent(
         context,
@@ -753,12 +772,21 @@ export const actions = {
             experimentsForUser: experimentsForUser,
         };
 
-        return globalMethods.callHttpClient({
-            method: endpoints.LogCustomEvent.method,
-            endpoint: endpoints.LogCustomEvent.url,
-            payload: payload,
-            logApiCall: false,
-        });
+        return globalMethods
+            .callHttpClient({
+                method: endpoints.LogCustomEvent.method,
+                endpoint: endpoints.LogCustomEvent.url,
+                payload: payload,
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
     initializeSession(context, { userId, sessionId, userAgent, referrer }) {
         var payload = {
@@ -772,12 +800,21 @@ export const actions = {
             referrer: referrer,
         };
 
-        return globalMethods.callHttpClient({
-            method: endpoints.InitializeSession.method,
-            endpoint: endpoints.InitializeSession.url,
-            payload: payload,
-            logApiCall: false,
-        });
+        return globalMethods
+            .callHttpClient({
+                method: endpoints.InitializeSession.method,
+                endpoint: endpoints.InitializeSession.url,
+                payload: payload,
+                logApiCall: false,
+            })
+            .then(
+                (response) => {
+                    return response;
+                },
+                (error) => {
+                    console.log("Analytics Service Error: " + error.data);
+                }
+            );
     },
 
     // Misc Actions
@@ -917,48 +954,38 @@ export const actions = {
     },
 
     getMobileFeePart(context) {
-        const serviceType = context.getters.damage.isRepair ? "Repair" : "Replace";
+        const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
         const parentAccountNumber = context.getters.payment.parentAccountNumber;
         const billToAccountNumber = 87291; // TODO: MAKE THIS REAL
 
         return globalMethods.callHttpClient({
             method: endpoints.GetMobileFeePart.method,
-            endpoint: `${endpoints.GetMobileFeePart.url}/${serviceType}/${parentAccountNumber}/${billToAccountNumber}`,
+            endpoint: `${endpoints.GetMobileFeePart.url}/${damageType}/${parentAccountNumber}/${billToAccountNumber}`,
         });
     },
 
     getServiceabilityDetails(context, { serviceZipCode }) {
-        return globalMethods.callMockHttpClient({
+        const lineItemsWithOnlyPartNumbers = context.getters.order.lineItems.supportingItems.map(
+            (lineItem) => ({
+                partNumber: lineItem.partNumber,
+            })
+        );
+        const lineItemsToSend = buildQueryStringParameterFromArrayOfComplexObjects(
+            lineItemsWithOnlyPartNumbers,
+            "lineItems"
+        );
+        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}&${lineItemsToSend}`,
         });
+    },
 
-        // 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));
-
-        //TODO: Restore this when CSR-1204 is 100% complete. Line# 958 to 961 should be removed Begin
-        // const vehicle = context.getters.vehicle;
-        // const carId = vehicle.carId;
-        // const damage = context.getters.damage;
-        // const glassArray = damage.glassToReplace;
-        // // create a new array to avoid mutating state
-        // const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
-        // return globalMethods.callHttpClient({
-        //     method: endpoints.GetServiceabilityDetails.method,
-        //     endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}&carId=${carId}&glassPieces=${glassArrayForPayload}`,
-        // });
-        //TODO: Restore this when CSR-1204 is 100% complete End
-
-        // return globalMethods.callHttpClient({
-        //     method: endpoints.GetServiceabilityDetails.method,
-        //     endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}`,
-        // });
+    getProviderLocations(context, { serviceZipCode }) {
+        return globalMethods.callMockHttpClient({
+            method: endpoints.GetProviderLocations.method,
+            //TODO: Remove Mocky Endpoints
+            endpoint: "https://run.mocky.io/v3/abf2fa63-8287-4e46-b169-f5bec65c8dff",
+        });
     },
 
     getSupportingItems(context) {
@@ -972,7 +999,7 @@ export const actions = {
             endpoint: endpoints.GetSupportingItems.url,
             payload: {
                 carId: carId,
-                serviceType: isRepair ? "Repair" : "Replace",
+                damageType: isRepair ? "Repair" : "Replace",
                 parentAccountNumber: applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
                 parts: glassPartsArray,
                 numberOfRepairChips: isRepair ? numberOfChips : 0,
@@ -1480,9 +1507,16 @@ export const actions = {
         const ctuToUse = serviceZipCodeCtu
             ? serviceZipCodeCtu
             : context.getters.order.serviceLocation.zipCodeCtu;
-
+        const flattenedLineItemsWithChildParts =
+            getFlattenedArrayOfLineItemsWithChildParts(availableLineItems);
+        const lineItemsWithOnlyPartNumbers = flattenedLineItemsWithChildParts.map((lineItem) => ({
+            partNumber: lineItem.partNumber,
+        }));
         const availableLineItemsFormattedForRequest =
-            getLineItemQueryStringForPricing(availableLineItems);
+            buildQueryStringParameterFromArrayOfComplexObjects(
+                lineItemsWithOnlyPartNumbers,
+                "lineItems"
+            );
 
         const vehicle = context.getters.order.vehicle;
 
@@ -1495,7 +1529,7 @@ export const actions = {
             `&Year=${vehicle.year}` +
             `&EON=${context.getters.order.eon}` +
             `&ZipCode=${zipCodeToUse}` +
-            `${availableLineItemsFormattedForRequest}`;
+            `&${availableLineItemsFormattedForRequest}`;
 
         const lineItemServerData = context.getters.order.lineItems.serverData;
 
@@ -1677,14 +1711,28 @@ function addPricesToLineItems(lineItems, pricingLineItems) {
     });
     return lineItems;
 }
-function getLineItemQueryStringForPricing(lineItems) {
-    return lineItems
-        .map((lineItem) => {
-            let queryStringSnippet = `&LineItems=${lineItem.partNumber}`;
-            if (lineItem.childParts) {
-                queryStringSnippet += getLineItemQueryStringForPricing(lineItem.childParts);
-            }
-            return queryStringSnippet;
-        })
-        .join("");
+
+function getFlattenedArrayOfLineItemsWithChildParts(lineItems) {
+    let flattenedArray = [];
+    lineItems.forEach((lineItem) => {
+        flattenedArray.push(lineItem);
+        if (lineItem.childParts) {
+            flattenedArray = [
+                ...flattenedArray,
+                ...getFlattenedArrayOfLineItemsWithChildParts(lineItem.childParts),
+            ];
+        }
+    });
+    return flattenedArray;
+}
+
+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);
 }

src/store/store.spec.js

@@ -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;