Merge pull request #121 from Safelite/feature/Digital/SSR-193

Feature/digital/ssr 193

package.json

@@ -19,6 +19,7 @@
     "pinia-plugin-persistedstate": "^2.2.0",
     "vee-validate": "^4.7.0",
     "vue": "^3.2.13",
+    "vue-plugin-load-script": "^2.1.0",
     "vue-router": "4.1.3"
   },
   "devDependencies": {

src/constants/application-config.js

@@ -8,6 +8,7 @@ const applicationConfig = {
     SITE_ENTRY_TRIGGER_VALUE: "SelfService",
     APPLICATION_ABBREVIATION: "iss",
     PAGE_QUERYSTRING: 'issPage',
+    GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY,
     ISS_DEV_CMS_DOMAIN: "https://digitalisscms.dev.safelite.io",
   };
   

src/constants/endpoints.js

@@ -60,16 +60,20 @@ const endpoints = {
       method: "POST",
   },
   LookupVehicleByVin: {
-    url: "/vehicle/api/v1/vehicle/lookup",
+	url: "/vehicle/api/v1/vehicle/lookup",
-    method: "POST",
+	method: "POST",
+  },
+  LookupVinByAddress: {
+    url: "/vehicle/api/v1/vehicle/lookup-vin-by-address",
+	method: "POST",
   },
   LookupVinByPlate: {
     url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate",
     method: "POST",
   },
   InitializeSession: {
-      url: "/analytics/api/v1/analytics/initialize",
+	  url: "/analytics/api/v1/analytics/initialize",
-      method: "POST",
+	  method: "POST",
   },
   GetExperimentsByUser: {
       url: "/analytics/api/v1/analytics/get-experiments",
@@ -79,6 +83,13 @@ const endpoints = {
       url: "/experiments/api/v1/experiments/run",
       method: "POST",
   },
+  ValidateZip: {
+    url: "/location/api/v1/location/zip",
+    method: "GET",
+  },
+  GooglePlaces: {
+    url: "https://maps.googleapis.com/maps/api/js?key={apiKey}&libraries=places"
+  }
 };
   
 export { endpoints };

src/constants/error-messages.js

@@ -18,8 +18,8 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
-    SERVICE_ZIP_REQUIRED: "Please enter your service ZIP",
+    SERVICE_ZIP_REQUIRED: "Please enter your ZIP",
-    SERVICE_ZIP_FORMAT: "Please enter a valid service ZIP",
+    SERVICE_ZIP_FORMAT: "Please enter a valid ZIP",
     VIN_REQUIRED: "Please enter your VIN",
     VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
     OPTION_REQUIRED: "Please select an option",

src/constants/states.js

@@ -0,0 +1,53 @@
+export const states = {
+    AL: "Alabama",
+    AK: "Alaska",
+    AZ: "Arizona",
+    AR: "Arkansas",
+    CA: "California",
+    CO: "Colorado",
+    CT: "Connecticut",
+    DE: "Delaware",
+    DC: "District Of Columbia",
+    FL: "Florida",
+    GA: "Georgia",
+    HI: "Hawaii",
+    ID: "Idaho",
+    IL: "Illinois",
+    IN: "Indiana",
+    IA: "Iowa",
+    KS: "Kansas",
+    KY: "Kentucky",
+    LA: "Louisiana",
+    ME: "Maine",
+    MD: "Maryland",
+    MA: "Massachusetts",
+    MI: "Michigan",
+    MN: "Minnesota",
+    MS: "Mississippi",
+    MO: "Missouri",
+    MT: "Montana",
+    NE: "Nebraska",
+    NV: "Nevada",
+    NH: "New Hampshire",
+    NJ: "New Jersey",
+    NM: "New Mexico",
+    NY: "New York",
+    NC: "North Carolina",
+    ND: "North Dakota",
+    OH: "Ohio",
+    OK: "Oklahoma",
+    OR: "Oregon",
+    PA: "Pennsylvania",
+    RI: "Rhode Island",
+    SC: "South Carolina",
+    SD: "South Dakota",
+    TN: "Tennessee",
+    TX: "Texas",
+    UT: "Utah",
+    VT: "Vermont",
+    VA: "Virginia",
+    WA: "Washington",
+    WV: "West Virginia",
+    WI: "Wisconsin",
+    WY: "Wyoming",
+};

src/helpers/unit-test-helper.js

@@ -48,6 +48,8 @@ export function getMountOptions(mockData) {
     mocks.queryStrings = queryStrings;
     mocks.$router = mockData?.router;
     mocks.$route = mockData?.route;
+    mocks.$loadScript = mockData?.loadScript;
+    mocks.prependActionToMethod = jest.fn();
   
     const global = {
       mocks: mocks,

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

@@ -0,0 +1,673 @@
+// Components
+import addressLookup from "@/layouts/address-lookup/address-lookup.vue";
+
+// Supporting Files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { useMainStore } from "@/store";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+import e from "express";
+
+jest.mock("@/helpers/damage-helper", () => ({
+    isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
+    getDamageString: jest.fn(),
+}));
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+describe("address-lookup.vue", () => {
+    describe("page level alerts", () => {
+        test("if the address is not serviceable display the Non-Serviceable Zip Alert", async () => {
+            // Arrange
+            const mockRegistrationAddress = {
+                streetAddress: "1234 Main St",
+                city: "Columbus",
+                state: "OH",
+                zipCode: "43215",
+            };
+
+            const { wrapper } = setupMocks({
+                isZipValid: true,
+                isZipServiceable: false,
+                vinVehicles: [
+                    {
+                        vin: "TEST_VIN",
+                        vehicle: {
+                            carId: "C0000",
+                        },
+                    },
+                    {
+                        vin: "TEST_VIN",
+                        vehicle: {
+                            carId: "C0000",
+                        },
+                    },
+                ],
+            });
+
+            await wrapper.setData({
+                customerQuestions: {
+                    addressQuestions: mockRegistrationAddress,
+                },
+                
+            });
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).isVisible()).toBe(true);
+        });
+
+        test("if the address matches a different vehicle display the Matched Different VehicleAlert", async () => {
+            // Arrange
+            const mockRegistrationAddress = {
+                streetAddress: "1234 Main St",
+                city: "Columbus",
+                state: "OH",
+                zipCode: "43215",
+            };
+
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                vinVehicles: [
+                    {
+                        vehicle: {
+                            carId: "C00000",
+                        },
+                    },
+                ],
+            });
+
+            useMainStore().order.vehicle.carId = "CARID2";
+
+            await wrapper.setData({
+                customerQuestions: {
+                    addressQuestions: mockRegistrationAddress,
+                },
+            });
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.findComponent({ ref: "alertMatchedDifferentVehicle" }).isVisible()).toBe(
+                true
+            );
+        });
+
+        test("if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert", async () => {
+            // Arrange
+            const mockRegistrationAddress = {
+                streetAddress: "1234 Main St",
+                city: "Columbus",
+                state: "OH",
+                zipCode: "43215",
+            };
+
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                isStatePermissible: false,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: false,
+                    vinVehicles: [
+                        {
+                            vin: "TEST_VIN",
+                            vehicle: {
+                                carId: "CARID",
+                            },
+                        },
+                        {
+                            vin: "TEST_VIN2",
+                            vehicle: {
+                                carId: "CARID2",
+                            },
+                        },
+                    ],
+                },
+            });
+
+            useMainStore().order.vehicle.carId = "CARID";
+
+            await wrapper.setData({
+                customerQuestions: {
+                    addressQuestions: mockRegistrationAddress,
+                },
+            });
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(
+                wrapper.findComponent({ ref: "alertVinLookupsByHomeAddressNotAllowed" }).isVisible()
+            ).toBe(true);
+        });
+
+        test("if no vehicles found, display Vin Not Found alert", async () => {
+            // Arrange
+            const mockRegistrationAddress = {
+                streetAddress: "1234 Main St",
+                city: "Columbus",
+                state: "OH",
+                zipCode: "43215",
+            };
+
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: true,
+                    vinVehicles: [], // Return no vehicles
+                },
+            });
+
+            useMainStore().order.vehicle.carId = "CARID";
+
+            await wrapper.setData({
+                customerQuestions: {
+                    addressQuestions: mockRegistrationAddress,
+                },
+            });
+
+            wrapper.vm.navigateForward = jest.fn();
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true);
+        });
+        
+    });
+
+    describe("navigation", () => {
+        test("if the back button is clicked, navigate back", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+            });
+
+            // Act
+            await wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+        });
+
+        test("if the car entered matches one of the vehicles found and the zip is serviceable, navigate forward", async () => {
+            // Arrange
+            const mockRegistrationAddress = {
+                streetAddress: "1234 Main St",
+                city: "Columbus",
+                state: "OH",
+                zipCode: "43215",
+            };
+
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                vinVehicles: [
+                    {
+                        vehicle: {
+                            carId: "C11111",
+                        },
+                    },
+                ],
+            });
+
+            await wrapper.setData({
+                previouslyEnteredCarId: "C11111",
+                customerQuestions: {
+                    addressQuestions: mockRegistrationAddress,
+                },
+            });
+
+            wrapper.vm.navigateForward = jest.fn();
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+        });
+
+        test("if the car entered does not match any of the multiple vehicles found, navigate to address-vehicles page", async () => {
+            // Arrange
+            const mockRegistrationAddress = {
+                streetAddress: "1234 Main St",
+                city: "Columbus",
+                state: "OH",
+                zipCode: "43215",
+            };
+
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                isStatePermissible: true,
+                vinVehicles: [
+                    {
+                        vin: "TEST_VIN",
+                        vehicle: {
+                            carId: "CARID",
+                        },
+                    },
+                    {
+                        vin: "TEST_VIN2",
+                        vehicle: {
+                            carId: "CARID2",
+                        },
+                    },
+                ],
+            });
+
+            useMainStore().order.vehicle.carId = "CARID_A";
+
+            const carsFound = [
+                {
+                    vin: "TEST_VIN",
+                    vehicle: {
+                        carId: "CARID",
+                    },
+                },
+                {
+                    vin: "TEST_VIN2",
+                    vehicle: {
+                        carId: "CARID2",
+                    },
+                },
+            ];
+
+            await wrapper.setData({
+                customerQuestions: {
+                    addressQuestions: mockRegistrationAddress,
+                },
+            });
+
+            wrapper.vm.updateVehicleInfo = jest.fn();
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+                navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
+                undefined,
+                {},
+                {},
+                carsFound
+            );
+        });
+
+        test("if the car entered matches one of the vehicles found but the zip is NOT serviceable, do not navigate forward", async () => {
+            // Arrange
+            const mockRegistrationAddress = {
+                streetAddress: "1234 Main St",
+                city: "Columbus",
+                state: "OH",
+                zipCode: "43215",
+            };
+
+            const { wrapper } = setupMocks({
+                isZipServiceable: false,
+                isStatePermissible: true,
+                vinVehicles: [
+                    {
+                        vin: "TEST_VIN",
+                        vehicle: {
+                            carId: "CARID",
+                        },
+                    },
+                    {
+                        vin: "TEST_VIN2",
+                        vehicle: {
+                            carId: "CARID2",
+                        },
+                    },
+                ],
+            });
+
+            useMainStore().order.vehicle.carId = "CARID";
+
+            await wrapper.setData({
+                customerQuestions: {
+                    addressQuestions: mockRegistrationAddress,
+                },
+            });
+
+            wrapper.vm.navigateForward = jest.fn();
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.navigateForward).toHaveBeenCalledTimes(0);
+        });
+
+        test("if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page", async () => {
+            // Arrange
+            const mockRegistrationAddress = {
+                streetAddress: "1234 Main St",
+                city: "Columbus",
+                state: "OH",
+                zipCode: "43215",
+            };
+
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                isStatePermissible: true,
+            });
+
+            await wrapper.setData({
+                customerQuestions: {
+                    addressQuestions: mockRegistrationAddress,
+                },
+                isCarIdDifferent: true,
+                isSelectedGlassAvailableForVehicle: false,
+            });
+
+            useMainStore().order.vehicle.carId = "CARID";
+            
+            let carsFound = [
+                {
+                    vin: "TEST_VIN2",
+                    vehicle: {
+                        carId: "C0000",
+                    },
+                },
+            ];
+
+            // Act
+            await wrapper.vm.navigateForward(carsFound);
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+                navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                undefined,
+                {},
+                { displayVehicleChangeAlert: true }
+            );
+        });
+
+        test("single car was found and matches entered vehicle => navigateForwardWithSingleCarMatch", async () => {
+            // Arrange
+
+            const carsFound = [
+                {
+                    vin: "TEST_VIN_2",
+                    vehicle: {
+                        carId: "C0000",
+                    },
+                },
+            ];
+
+            const { wrapper } = setupMocks({}, {});
+            wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
+
+            useMainStore().order.vehicle.carId = "C0000";
+
+            // Act
+            wrapper.vm.navigateForward(carsFound);
+
+            // Assert
+            expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1);
+        });
+
+        test("multiple cars were found and one matches entered vehicle => navigateForwardWithSingleCarMatch", async () => {
+            // Arrange
+            const carsFound = [
+                {
+                    vin: "TEST_VIN_1",
+                    vehicle: {
+                        carId: "C0000",
+                    },
+                },
+                {
+                    vin: "TEST_VIN_2",
+                    vehicle: {
+                        carId: "CARID2",
+                    },
+                },
+                {
+                    vin: "TEST_VIN_3",
+                    vehicle: {
+                        carId: "CARID3",
+                    },
+                },
+            ];
+
+            const { wrapper } = setupMocks({});
+            wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
+
+            useMainStore().order.vehicle.carId = "CARID3";
+            
+            // Act
+            wrapper.vm.navigateForward(carsFound);
+
+            // Assert
+            expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1);
+        });
+        
+    });
+
+    describe("registration and service zips", () => {
+        describe("if registration zip is serviceable", () => {
+            test("if registration address is provided => update service address on successful continue", async () => {
+                // Arrange
+                const mockRegistrationAddress = {
+                    streetAddress: "1234 Main St",
+                    city: "Columbus",
+                    state: "OH",
+                    zipCode: "43215",
+                };
+
+                const { wrapper } = setupMocks({
+                    isZipServiceable: true,
+                    isStatePermissible: true,
+                    vinVehicles: [
+                        {
+                            vin: "TEST_VIN",
+                            vehicle: {
+                                carId: "CARID",
+                            },
+                        },
+                    ],
+                    route: { query: "address-lookup" },
+                });
+
+                useMainStore().order.vehicle.carId = "CARID";
+                useMainStore().saveRegistrationAddressLookup = jest.fn();
+
+                await wrapper.setData({
+                    customerQuestions: {
+                        addressQuestions: mockRegistrationAddress,
+                    },
+                });
+
+                // Act
+                await wrapper.vm.forwardButtonAction();
+
+                // Assert
+                expect(useMainStore().saveRegistrationAddressLookup).toHaveBeenCalled();
+                expect(useMainStore().validateZip).toHaveBeenCalledWith({ zip: "43215" });
+            });
+        });
+
+        describe("if registration zip is not serviceable", () => {
+            test("if registration address is provided and user clicks continue => show non-serviceable zip alert", async () => {
+                // Arrange
+                const mockRegistrationAddress = {
+                    streetAddress: "1234 Main St",
+                    city: "Columbus",
+                    state: "OH",
+                    zipCode: "43215",
+                };
+
+                const { wrapper } = setupMocks({
+                    isZipValid: true,
+                    isZipServiceable: false,
+                    vinVehicles: [
+                        {
+                            vin: "TEST_VIN",
+                            vehicle: {
+                                carId: "C0000",
+                            },
+                        },
+                    ],
+                });
+
+                useMainStore().order.vehicle.carId = "C0000";
+
+                await wrapper.setData({
+                    customerQuestions: {
+                        addressQuestions: mockRegistrationAddress,
+                    },
+                });
+
+                expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).exists()).toBe(
+                    false
+                );
+
+                // Act
+                await wrapper.vm.forwardButtonAction();
+
+                // Assert
+                expect(wrapper.vm.displayNonServiceableZipAlert).toBe(true);
+                expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).exists()).toBe(
+                    true
+                );
+                expect(wrapper.findComponent({ ref: "alertNonServiceableZip" }).isVisible()).toBe(
+                    true
+                );
+            });
+
+            test("if registration address, service zip are provided, and user clicks continue => don't update service address", async () => {
+                // Arrange
+                const mockRegistrationAddress = {
+                    streetAddress: "1234 Main St",
+                    city: "Columbus",
+                    state: "OH",
+                    zipCode: "43215",
+                };
+
+                const { wrapper } = setupMocks({
+                    isZipServiceable: false,
+                });
+
+                useMainStore().order.vehicle.carId = "CARID";
+
+                await wrapper.setData({
+                    customerQuestions: {
+                        addressQuestions: mockRegistrationAddress,
+                    },
+                });
+
+                useMainStore().saveRegistrationAddressLookup = jest.fn();
+
+                // Act
+                await wrapper.vm.forwardButtonAction();
+
+                // Assert
+                expect(useMainStore().saveRegistrationAddressLookup).not.toHaveBeenCalled();
+            });
+        });
+    });
+
+});
+
+function setupMocks({
+    isZipValid = true,
+    isZipServiceable = true,
+    lookupVinbyAddressResponse,
+    partsOrQuestions = [],
+    isStatePermissible = true,
+    vinVehicles = [],
+    carId = "C0000",
+    route = null,
+}) 
+{
+    
+    useMainStore().validateZip = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: {
+                isValid: isZipValid,
+                isServiceable: isZipServiceable,
+            },
+        })
+    });
+
+    useMainStore().lookupVinByAddress = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: lookupVinbyAddressResponse
+            ? lookupVinbyAddressResponse
+            : {
+                isStatePermissible: true,
+                vinVehicles: [
+                    {
+                        vin: "TEST_VIN",
+                        vehicle: {
+                            carId: "CARID",
+                        },
+                    },
+                ],
+            },
+        })
+    })
+
+    useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: {
+                partsOrQuestions: partsOrQuestions,
+            },
+        })
+    });
+
+    const wrapper = shallowMount(
+        addressLookup,
+        getMountOptions({
+            route: route ? route : undefined,
+            router: {
+                navigate: jest.fn(),
+            },
+            mainStore: {
+                order: {
+                    vehicle: {
+                        carId: carId,
+                        registration: {
+                            licensePlate: "TESTPLATE",
+                            zipCode: "12345",
+                        },
+                    },
+                    customer: {
+                        emailAddress: "test@test.com",
+                    },
+                    serviceLocation: {
+                        zipCode: "11111",
+                    },
+                },
+            },
+
+        })
+    );
+
+    const apiResponses = {
+        serviceZipValidationResponse: {
+            isValid: isZipValid,
+            isServiceable: isZipServiceable,
+        },
+        vinLookupResponse: {
+            isStatePermissible: isStatePermissible,
+            vinVehicles: vinVehicles,
+        },
+    };
+
+    settleAllPromises.mockImplementation(() => apiResponses);
+
+    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+    wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
+    wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
+
+    return { wrapper };
+}

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

@@ -1,90 +1,430 @@
 <template>
-  <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit">
+    <Form
-    <div class="page-container-grouped-styles overflow-auto">
+        @submit="onSubmit"
-      <SiteHeader
+        @invalid-submit="onInvalidSubmit"
-        cms-widget-name="SiteHeaderWidget"
+        ref="theForm"
-      />
+        v-slot="{ meta }"
-      <VehicleBanner
+        autocomplete="off">
-        cms-widget-name="VehicleBannerWidget"
+        <div class="page-container-grouped-styles">
-        :display-generic-vehicle-image="false"
+            <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
-      />
+            <vehicleBanner
-      <SiteSubHeader
+                cmsWidgetName="VehicleBannerWidget"
-        cms-widget-name="SiteSubHeaderWidget"
+                ref="vehicleBanner"
-      />
+                :displayGenericVehicleImage="false" />
-      <div class="fade-on-route-transition sub-container make-tall">
+            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
-        <p>Address Lookup Page Placeholder</p>
+            <div class="fade-on-route-transition sub-container make-tall overflow-auto">
-        <SiteFooter
+                <alert
-          cms-widget-name="SiteFooterWidget"
+                    ref="alertVinNotFound"
-          :is-forward-action-disabled="isForwardActionDisabled"
+                    v-if="displayVinNotFoundAlert"
-          @back-clicked="backButtonAction"
+                    class="mb-4"
-          @forward-clicked="forwardButtonAction"
+                    cmsWidgetName="AlertVinNotFoundWidget"
-        />
+                    alertClass="alert-danger"
-      </div>
+                    v-bind:isDismissible="false" />
-    </div>
+                <alert
-  </Form>
+                    ref="alertMatchedDifferentVehicle"
+                    v-if="displayMatchedDifferentVehicleAlert"
+                    class="mb-4"
+                    :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                    :manualCopy="AlertMatchedDifferentVehicleBody"
+                    alertClass="alert-warning"
+                    v-bind:isDismissible="false" />
+                <alert
+                    ref="alertInvalidZip"
+                    v-if="displayInvalidZipAlert"
+                    class="mb-4"
+                    cmsWidgetName="AlertInvalidZipWidget"
+                    alertClass="alert-danger"
+                    v-bind:isDismissible="false" />
+                <alert
+                    ref="alertNonServiceableZip"
+                    v-if="displayNonServiceableZipAlert"
+                    class="mb-4"
+                    alertClass="alert-danger"
+                    :manualHeadline="AlertNonServiceableZipHeader"
+                    :manualCopy="AlertNonServiceableZipBody"
+                    v-bind:isDismissible="false" />
+                <alert
+                    ref="alertVinLookupsByHomeAddressNotAllowed"
+                    v-if="displayVinLookupByHomeAddressNotAllowedAlert"
+                    class="mb-4"
+                    cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
+                    alertClass="alert-danger"
+                    v-bind:isDismissible="false" />
+                <transition name="fade" mode="out-in">
+                    <div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
+                        <div class="row mb-4">
+                            <div class="col">
+                                <textboxQuestion
+                                    cmsWidgetName="ServiceZipQuestionWidget"
+                                    v-model="serviceZipCode"
+                                    ref="serviceZip"
+                                    inputId="7add1b26df344f2caf1678de5797803f"
+                                    aria-haspopup=""
+                                    mask="#####"
+                                    validationRules="service-zip-required|service-zip-format" />
+                            </div>
+                        </div>
+                    </div>
+                </transition>
+                <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
+                <siteFooter
+                    cmsWidgetName="SiteFooterWidget"
+                    ref="siteFooter"
+                    :isDisabled="!meta.valid"
+                    @ForwardClicked="forwardButtonAction"
+                    @back-clicked="backButtonAction"
+                    :isForwardActionDisabled="!meta.valid" />
+            </div>
+        </div>
+    </Form>
 </template>
-<script>
-// Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import { settleAllPromises } from '@/helpers/layout-helper';
-import { Form } from 'vee-validate';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
 
-// Import Component
+<script>
-import SiteFooter from '@/common-components/site-footer/site-footer.vue';
+// Components
-import SiteHeader from '@/common-components/site-header/site-header.vue';
+import baseFormMixin from '@/mixins/base-form-mixin';
-import SiteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import siteHeader from "@/common-components/site-header/site-header.vue";
-import VehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import siteFooter from "@/common-components/site-footer/site-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
+import alert from "@/ux-components/alert/alert";
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+
+import { Form, defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { routerParams } from "@/router/router-constants/router-params";
+import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
+
+import vinPagesMixin from "@/mixins/vin-pages-mixin";
+import { useMainStore } from "@/store"
+
+// DEFINE VALIDATION RULES - Note: Additional rules are defined in Customer Questions and Address Questions components
+defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
+defineRule(
+    "service-zip-format",
+    regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)
+);
 
 export default {
-  name: 'address-lookup',
+    name: "address-lookup",
-  mixins: [BaseFormMixin],
+    mixins: [baseFormMixin, vinPagesMixin],
-  components: {
+    async beforeRouteEnter(to, from, next) {
-    Form,
+        // Call APIs
-    SiteFooter,
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-    SiteHeader,
-    SiteSubHeader,
-    VehicleBanner,    
-  },
-  data() {
-    return {};
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
+        // Settle promises and get results
-    const promiseResultMap = [
+        const promiseResultMap = [
-      {
+            {
-        resultKey: 'cmsContent',
+                resultKey: "cmsContent",
-        promise: cmsContentPromise,
+                promise: cmsContentPromise,
-      },
+            },
-    ];
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-    next((vm) => {
+        // Call the "next" function to complete the transition to this page.
-      vm.setCmsContent(resultMap.cmsContent);      
+        next((vm) => {
-    });
+            vm.setCmsContent(resultMap.cmsContent);
-  },
+        });
-  computed: {
-    isForwardActionDisabled() {
-      return true;
-    }
-  },
-  methods: {
-    arePagePrerequisiteValid() {      
-      return true;
     },
-    backButtonAction() {
+    data() {
-      /**
+        return {
-       * this.navigationScenarios comes from base-mixin
+            customerQuestions: {
-       */
+                addressQuestions: {
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+                    streetAddress: "",
+                    city: "",
+                    state: "",
+                    zipCode: "",
+                },
+                firstName: "",
+                lastName: "",
+            },
+            serviceZipCode: this.serviceZip,
+            displayNonServiceableZipAlert: false,
+            displayVinNotFoundAlert: false,
+            displayMatchedDifferentVehicleAlert: false,
+            displayVinLookupByHomeAddressNotAllowedAlert: false,
+            previouslyEnteredCarId: "",
+            isCarIdDifferent: false,
+            isSelectedGlassAvailableForVehicle: true,
+            customAlertData: {},
+            displayInvalidZipAlert: false,
+            showServiceZipField: this.serviceZip,
+            isZipServiceable: false,
+        };
     },
-    forwardButtonAction() {
+    methods: {
-      return true;
+        arePagePrerequisitesValid() {
+            return this.mainStore.order.vehicle.carId !== null;
+        },
+        loadDefaultsFromStore() {
+            this.customerQuestions = this.mainStore.customerDataAddressLookup;
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        attachCustomEvents() {
+            
+            this.prependActionToMethod(this, this.forwardButtonAction, () => {
+                this.pushEventToGA(
+                    this.$route.query[this.queryStrings.ISS_PAGE],
+                    this.GaActions.SUBMITTED,
+                    this.GaLabels.ADDRESS_LOOKUP,
+                    true
+                );
+            });
+            
+        },
+
+        async forwardButtonAction() {
+            this.resetWarningsAndErrors();
+
+            // Vehicle info change in the flow, use a variable to keep track and commit to state at the end.
+            let vehicleInfoToCommit = {};
+
+            const vinLookupResponse = useMainStore().lookupVinByAddress ({
+                    licenseLastName: this.customerQuestions.lastName,
+                    licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress,
+                    licenseZip: this.customerQuestions.addressQuestions.zipCode,
+                    licenseState: this.customerQuestions.addressQuestions.state,
+                }
+            );
+
+            // Settle promises and get results
+            const promiseResultMap = [
+                {
+                    resultKey: "vinLookupResponse",
+                    promise: vinLookupResponse,
+                },
+                {
+                    resultKey: "serviceZipValidationResponse",
+                    promise: this.serviceZipCode
+                        ? useMainStore().validateZip({zip: this.serviceZipCode})
+                        : useMainStore().validateZip({zip: this.customerQuestions.addressQuestions.zipCode})
+                },
+            ];
+
+            const resultMap = await settleAllPromises(promiseResultMap);
+            // If VIN Lookup by address is forbidden by State Restrictions then show an alert
+            if (!resultMap.vinLookupResponse.isStatePermissible) {
+                // State Restrictions forbid lookup by address
+                this.displayVinLookupByHomeAddressNotAllowedAlert = true;
+                return this.$refs.siteFooter.removeLoader();
+            }
+
+            // If a Service Zip is entered and it is an invalid zip code (ex. 11111) then show an alert
+            const isZipValid = resultMap.serviceZipValidationResponse.isValid;
+            if (this.serviceZipCode && !isZipValid) {
+                this.displayInvalidZipAlert = true;
+                return this.$refs.siteFooter.removeLoader();
+            }
+            this.displayInvalidZipAlert = false;
+
+            const carsFound = resultMap.vinLookupResponse.vinVehicles;
+
+            // Handle cases for different amounts of VINS found for the address.
+            if (carsFound.length == 1) {
+                // Single VIN found
+                const carFound = carsFound[0].vehicle;
+
+                this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
+                if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
+                    // Display Alert
+                    this.previouslyEnteredCarId = carFound.carId;
+                    this.customAlertData.vehicleInfo = carFound;
+                    this.displayMatchedDifferentVehicleAlert = true;
+
+                    this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+                        carFound.carId
+                    );
+
+                    // Update button "Continue with..."
+                    this.$refs.siteFooter.updateButtonText(
+                        `Continue with ${carFound.year} ${carFound.make} ${carFound.model}`
+                    );
+                    return this.$refs.siteFooter.removeLoader();
+                }
+
+                // update data if the zip or service zip is serviceable
+                vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
+            } else if (carsFound.length > 1) {
+                // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
+                // so we can go to the Heritage Funnel directly
+                const matchingCars = carsFound.filter(
+                    (vin) => vin.vehicle.carId === this.mainStore.order.vehicle.carId
+                );
+
+                if (matchingCars.length === 1) {
+                    vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {
+                        vin: matchingCars[0].vin,
+                    });
+                }
+            } else {
+                // No VINS found.
+                this.displayVinNotFoundAlert = true;
+                return this.$refs.siteFooter.removeLoader();
+            }
+
+            // If the either the registration zip code or service zip code are not serviceable
+            this.isZipServiceable = resultMap.serviceZipValidationResponse.isServiceable;
+            if (!this.isZipServiceable) {
+                this.displayNonServiceableZipAlert = true;
+                this.showServiceZipField = true;
+                return this.$refs.siteFooter.removeLoader();
+            }
+
+            // If the registration zip code is serviceable and nothing was entered for the service zip code
+            // then set the service zip code to the registration zip code
+            if (!this.serviceZipCode) {
+                this.serviceZipCode = this.customerQuestions.addressQuestions.zipCode;
+            }
+
+            // Save vehicle, customer, service and registration information
+            await useMainStore().saveRegistrationAddressLookup(
+                {
+                    isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
+                    vehicleInfo:
+                        Object.keys(vehicleInfoToCommit).length === 0
+                            ? this.mainStore.order.vehicle
+                            : vehicleInfoToCommit,
+                    registrationInfo: {
+                        firstName: this.customerQuestions.firstName,
+                        lastName: this.customerQuestions.lastName,
+                        address: this.customerQuestions.addressQuestions.streetAddress,
+                        city: this.customerQuestions.addressQuestions.city,
+                        state: resultMap.serviceZipValidationResponse.state,
+                        zipCode: this.customerQuestions.addressQuestions.zipCode,
+                    },
+                },
+                false
+            );
+
+            await useMainStore().saveServiceLocation(
+                {
+                    address: this.customerQuestions.addressQuestions.streetAddress,
+                    city: this.customerQuestions.addressQuestions.city,
+                    zipCode: this.serviceZipCode,
+                    state: resultMap.serviceZipValidationResponse.state,
+                    zipCodeCtu: resultMap.serviceZipValidationResponse.zipCodeCtu,
+                },
+                false
+            );
+
+            return await this.navigateForward(carsFound);
+        },
+        async navigateForward(carsFound) {
+            // Match vehicles found to vehicles in state.
+            const matchingCars = carsFound.filter(
+                (car) => car.vehicle.carId === useMainStore().order.vehicle.carId
+            );
+
+            // If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
+            // display vehicle changed alert on that page.
+            if (
+                this.isCarIdDifferent &&
+                !this.isSelectedGlassAvailableForVehicle 
+            ) {
+                this.$router.navigate(
+                    this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                    this.$route,
+                    {},
+                    { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+                );
+            } else if (matchingCars.length === 1) {
+                await this.navigateForwardWithSingleCarMatch();
+            } else {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
+                    this.$route,
+                    {},
+                    {},
+                    carsFound
+                );
+            }
+        },
+        resetWarningsAndErrors() {
+            this.displayVinNotFoundAlert = false;
+            this.displayNonServiceableZipAlert = false;
+            this.displayMatchedDifferentVehicleAlert = false;
+            this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+        },
+    },
+    mounted() {
+        this.attachCustomEvents();
+        this.loadDefaultsFromStore();
+    },
+    computed: {
+        AlertNonServiceableZipHeader() {
+            const zipCode = this.serviceZipCode
+                ? this.serviceZipCode
+                : this.customerQuestions.addressQuestions.zipCode;
+            const text = this.getCmsContent(
+                "AlertNonServiceableZipWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:serviceZip}", zipCode);
+            return text;
+        },
+        AlertNonServiceableZipBody() {
+            return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
+        },
+        AlertMatchedDifferentVehicleHeader() {
+            return this.getCmsContent(
+                "AlertMatchedDifferentVehicleWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:damage}", getDamageString());
+        },
+        AlertMatchedDifferentVehicleBody() {
+            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
+            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+                .replaceAll("{custom:damage}", getDamageString())
+                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
+                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
+        },
+    },
+    watch: {
+        customerQuestions: {
+            handler(newValue) {
+                // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote"
+                this.$refs.siteFooter.updateButtonText(
+                    this.getCmsContent("siteFooterWidget", "ForwardButtonText")
+                );
+                this.showServiceZipField = false;
+                this.resetWarningsAndErrors();
+            },
+            deep: true,
+        },
+        serviceZipCode: {
+            handler(newValue) {
+                // If they modify the service zip code, then hide the error message.
+                this.displayNonServiceableZipAlert = false;
+            },
+        },
+        showServiceZipField: {
+            handler(newValue) {
+                // If the Service Zip Code field is ever hidden, clear out it's value
+                if (!newValue) {
+                    this.serviceZipCode = null;
+                }
+            },
+        },
+    },
+    components: {
+        siteHeader,
+        siteFooter,
+        vehicleBanner,
+        siteSubHeader,
+        customerQuestions,
+        textboxQuestion,
+        alert,
+        Form,
     },
-    resetDependentState() {},
-  },
 };
 </script>

src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js

@@ -0,0 +1,504 @@
+// Components
+import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
+import alert from "@/ux-components/alert/alert";
+
+// Supporting Files
+import { mount, shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+let autocompleteElement;
+describe("address-questions.vue", () => {
+    beforeEach(() => {
+        // Create the `addressField1` element (autocomplete's input)
+        autocompleteElement = document.createElement("input");
+        autocompleteElement.getPlace = jest.fn();
+        document.getElementById = jest.fn().mockReturnValue(autocompleteElement);
+    });
+
+    describe("initial state", () => {
+        test("Should render addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const streetAddress = wrapper.findComponent({ ref: "autocomplete" });
+            const city = wrapper.findComponent({ ref: "city" });
+            const state = wrapper.findComponent({ ref: "state" });
+            const zipCode = wrapper.findComponent({ ref: "zipCode" });
+
+            // Assert
+            expect(streetAddress.exists()).toBe(true);
+            expect(city.exists()).toBe(true);
+            expect(state.exists()).toBe(true);
+            expect(zipCode.exists()).toBe(true);
+        });
+       
+    });
+
+    describe("happy paths", () => {
+        test("full street address is passed in => address fields are displayed", async () => {
+            // Arrange/Act
+            const { wrapper } = setupMocks({
+                props: {
+                    modelValue: {
+                        streetAddress: "12345 Test Road",
+                        city: "Tests",
+                        state: "OH",
+                        zipCode: "12312",
+                    },
+                },
+            });
+
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            const cityField = wrapper.findComponent({ ref: "city" });
+            const stateField = wrapper.findComponent({ ref: "state" });
+            const zipField = wrapper.findComponent({ ref: "zipCode" });
+            expect(cityField.exists()).toBeTruthy();
+            expect(cityField.isVisible()).toBeTruthy();
+            expect(stateField.exists()).toBeTruthy();
+            expect(cityField.isVisible()).toBeTruthy();
+            expect(zipField.exists()).toBeTruthy();
+            expect(cityField.isVisible()).toBeTruthy();
+        });
+
+        test("street address is entered, user chooses good result from autocomplete results => other fields are filled in", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+            await wrapper.setData({
+                addressModel: {
+                    streetAddress: "123 Test Street",
+                },
+            });
+
+            const selectedPlace = {
+                address_components: [
+                    {
+                        long_name: "1234",
+                        short_name: "1234",
+                        types: ["street_number"],
+                    },
+                    {
+                        long_name: "Test Road",
+                        short_name: "Test Road",
+                        types: ["route"],
+                    },
+                    {
+                        long_name: "East Columbus",
+                        short_name: "Columbus",
+                        types: ["neighborhood", "political"],
+                    },
+                    {
+                        long_name: "Columbus",
+                        short_name: "Columbus",
+                        types: ["locality", "political"],
+                    },
+                    {
+                        long_name: "Franklin County",
+                        short_name: "Franklin County",
+                        types: ["administrative_area_level_2", "political"],
+                    },
+                    {
+                        long_name: "Ohio",
+                        short_name: "OH",
+                        types: ["administrative_area_level_1", "political"],
+                    },
+                    {
+                        long_name: "United States",
+                        short_name: "US",
+                        types: ["country", "political"],
+                    },
+                    {
+                        long_name: "43215",
+                        short_name: "43215",
+                        types: ["postal_code"],
+                    },
+                ],
+            };
+
+            // Act
+            autocompleteElement.dispatchEvent(
+                new CustomEvent("place_changed", { detail: selectedPlace })
+            );
+
+            // Assert
+            wrapper.vm.$nextTick(function () {
+                const addressModel = wrapper.vm.addressModel;
+                expect(addressModel.streetAddress).toEqual("1234 Test Road");
+                expect(addressModel.city).toEqual("Columbus");
+                expect(addressModel.state).toEqual("OH");
+                expect(addressModel.zipCode).toEqual("43215");
+            });
+        });
+
+        test("street address is entered, but user clicks away => first result is selected and other fields are filled in", async () => {
+            // Arrange
+            let changeEventCallbackFunction;
+            autocompleteElement.addEventListener = jest
+                .fn()
+                .mockImplementation((eventName, callbackFunction) => {
+                    if (eventName == "change") {
+                        changeEventCallbackFunction = callbackFunction;
+                    }
+                });
+
+            const { wrapper } = setupMocks({
+                querySelectorFunction: function (query) {
+                    if (query == ".pac-container .pac-item") {
+                        let element = document.createElement("div");
+                        element.textContent = "123 Test Street";
+                        return element;
+                    }
+                },
+                geocoderResult: {
+                    address_components: [
+                        {
+                            long_name: "1234",
+                            short_name: "1234",
+                            types: ["street_number"],
+                        },
+                        {
+                            long_name: "Test Road",
+                            short_name: "Test Road",
+                            types: ["route"],
+                        },
+                        {
+                            long_name: "East Columbus",
+                            short_name: "Columbus",
+                            types: ["neighborhood", "political"],
+                        },
+                        {
+                            long_name: "Columbus",
+                            short_name: "Columbus",
+                            types: ["locality", "political"],
+                        },
+                        {
+                            long_name: "Franklin County",
+                            short_name: "Franklin County",
+                            types: ["administrative_area_level_2", "political"],
+                        },
+                        {
+                            long_name: "Ohio",
+                            short_name: "OH",
+                            types: ["administrative_area_level_1", "political"],
+                        },
+                        {
+                            long_name: "United States",
+                            short_name: "US",
+                            types: ["country", "political"],
+                        },
+                        {
+                            long_name: "43215",
+                            short_name: "43215",
+                            types: ["postal_code"],
+                        },
+                    ],
+                },
+            });
+
+            let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+            let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" });
+            expect(noMatchAlert.exists()).toBeFalsy();
+            expect(verificationAlert.exists()).toBeFalsy();
+
+            await wrapper.vm.$nextTick();
+
+            // Act
+            changeEventCallbackFunction();
+
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            const addressModel = wrapper.vm.addressModel;
+            expect(addressModel.streetAddress).toEqual("1234 Test Road");
+            expect(addressModel.city).toEqual("Columbus");
+            expect(addressModel.state).toEqual("OH");
+            expect(addressModel.zipCode).toEqual("43215");
+        });
+    });
+
+    describe("alerts", () => {
+        const places = [null, { address_components: null }, undefined, {}];
+        test.each(places)(
+            "selected place/place properties is null => display verification alert",
+            async (place) => {
+                // Arrange
+                const { wrapper } = setupMocks({});
+                await wrapper.setData({
+                    addressModel: {
+                        streetAddress: "123 Test Street",
+                    },
+                });
+
+                const selectedPlace = place;
+
+                // Act
+                autocompleteElement.dispatchEvent(
+                    new CustomEvent("place_changed", { detail: selectedPlace })
+                );
+                await wrapper.vm.$nextTick();
+
+                // Assert
+                const verificationAlert = wrapper.findComponent({
+                    ref: "alertVerificationWarning",
+                });
+                expect(verificationAlert.exists()).toBe(true);
+                expect(verificationAlert.isVisible()).toBe(true);
+
+                const noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                expect(noMatchAlert.exists()).toBe(false);
+            }
+        );
+
+        test("user enters address that yields no autocomplete results => show noMatch alert", async () => {
+            // Arrange
+            let changeEventCallbackFunction;
+            autocompleteElement.addEventListener = jest
+                .fn()
+                .mockImplementation((eventName, callbackFunction) => {
+                    if (eventName == "change") {
+                        changeEventCallbackFunction = callbackFunction;
+                    }
+                });
+
+            const { wrapper } = setupMocks({});
+
+            let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+            expect(noMatchAlert.exists()).toBeFalsy();
+
+            await wrapper.vm.$nextTick();
+
+            // Act
+            changeEventCallbackFunction();
+
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.displayNoMatchWarning).toBeTruthy();
+            noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+            expect(noMatchAlert.exists()).toBeTruthy();
+            expect(noMatchAlert.isVisible()).toBeTruthy();
+        });
+
+        test("user enters address that yields autocomplete results, but doesn't select => show verification alert", async () => {
+            // Arrange
+            let changeEventCallbackFunction;
+            autocompleteElement.addEventListener = jest
+                .fn()
+                .mockImplementation((eventName, callbackFunction) => {
+                    if (eventName == "change") {
+                        changeEventCallbackFunction = callbackFunction;
+                    }
+                });
+
+            const { wrapper } = setupMocks({
+                querySelectorFunction: function (query) {
+                    if (query == ".pac-container .pac-item") {
+                        let element = document.createElement("div");
+                        element.textContent = "123 Test Street";
+                        return element;
+                    }
+                },
+            });
+
+            let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+            let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" });
+            expect(noMatchAlert.exists()).toBeFalsy();
+            expect(verificationAlert.exists()).toBeFalsy();
+
+            await wrapper.vm.$nextTick();
+
+            // Act
+            changeEventCallbackFunction();
+
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" });
+            expect(wrapper.vm.displayVerificationWarning).toBeTruthy();
+            expect(verificationAlert.exists()).toBeTruthy();
+            expect(verificationAlert.isVisible()).toBeTruthy();
+            noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+            expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+            expect(noMatchAlert.exists()).toBeFalsy();
+        });
+
+        describe("noMatch alert is cleared on address change", () => {
+            test("user sees noMatch warning and modifies street address => noMatch warning is removed", async () => {
+                // Arrange
+                const { wrapper } = setupMocks({});
+
+                await wrapper.setData({
+                    matchFound: false,
+                });
+                await wrapper.vm.$nextTick();
+
+                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                expect(noMatchAlert.exists()).toBeTruthy();
+                expect(noMatchAlert.isVisible()).toBeTruthy();
+
+                // // Act
+                wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
+                    streetAddress: "LS",
+                });
+
+                // Assert
+                wrapper.vm.$nextTick(function () {
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+
+                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(noMatchAlert.exists()).toBeFalsy();
+                });
+            });
+
+            test("user sees noMatch warning and enters city => noMatch warning is removed", async () => {
+                // Arrange
+                const { wrapper } = setupMocks({});
+
+                await wrapper.setData({
+                    matchFound: false,
+                });
+                await wrapper.vm.$nextTick();
+
+                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                expect(noMatchAlert.exists()).toBeTruthy();
+                expect(noMatchAlert.isVisible()).toBeTruthy();
+
+                // // Act
+                wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
+                    city: "LS",
+                });
+
+                // Assert
+                wrapper.vm.$nextTick(function () {
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+
+                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(noMatchAlert.exists()).toBeFalsy();
+                });
+            });
+
+            test("user sees noMatch warning and enters state => noMatch warning is removed", async () => {
+                // Arrange
+                const { wrapper } = setupMocks({});
+
+                await wrapper.setData({
+                    matchFound: false,
+                });
+                await wrapper.vm.$nextTick();
+
+                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                expect(noMatchAlert.exists()).toBeTruthy();
+                expect(noMatchAlert.isVisible()).toBeTruthy();
+
+                // // Act
+                wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
+                    state: "KO",
+                });
+
+                // Assert
+                wrapper.vm.$nextTick(function () {
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+
+                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(noMatchAlert.exists()).toBeFalsy();
+                });
+            });
+
+            test("user sees noMatch warning and enters zip code => noMatch warning is removed", async () => {
+                // Arrange
+                const { wrapper } = setupMocks({});
+
+                await wrapper.setData({
+                    matchFound: false,
+                });
+                await wrapper.vm.$nextTick();
+
+                let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                expect(noMatchAlert.exists()).toBeTruthy();
+                expect(noMatchAlert.isVisible()).toBeTruthy();
+
+                // // Act
+                wrapper.vm.$options.watch.addressModel.handler.call(wrapper.vm, {
+                    zipCode: "12345",
+                });
+
+                // Assert
+                wrapper.vm.$nextTick(function () {
+                    expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
+
+                    noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
+                    expect(noMatchAlert.exists()).toBeFalsy();
+                });
+            });
+        });
+    });
+    
+});
+
+function setupMocks({
+    mountOptions,
+    props,
+    isShallowMount = true,
+    querySelectorFunction,
+    geocoderResult = ["1234 Test Street"],
+}) {
+    
+    const resultingMountOptions = getMountOptions({
+        ...mountOptions,
+        router: {
+            navigate: jest.fn(),
+            navigate: jest.fn(),
+        },
+        loadScript: jest.fn().mockResolvedValue(),
+    });
+
+    window.google = {
+        maps: {
+            event: {
+                addListener: jest
+                    .fn()
+                    .mockImplementation((element, eventName, callbackFunction) => {
+                        function interceptedCallbackFunction(e) {
+                            callbackFunction(e.detail);
+                        }
+                        // selectedPlace = "Woogly";
+                        element.addEventListener(eventName, interceptedCallbackFunction);
+                    }),
+                removeListener: jest.fn(),
+                clearInstanceListeners: jest.fn(),
+            },
+            places: {
+                Autocomplete: jest.fn().mockImplementation((el) => el),
+            },
+            Geocoder: class Geocoder {
+                // constructor();
+
+                geocode(request, callback) {
+                    callback([geocoderResult], true);
+                }
+            },
+            GeocoderStatus: {
+                OK: true,
+            },
+        },
+    };
+
+    if (props) resultingMountOptions.propsData = props;
+
+    const wrapper = isShallowMount
+        ? shallowMount(addressQuestions, resultingMountOptions)
+        : mount(addressQuestions, resultingMountOptions);
+    document.querySelector = jest.fn().mockImplementation((query) => {
+        let result = null;
+        if (query == ".pac-container") result = document.createElement("div");
+        else if (querySelectorFunction) {
+            result = querySelectorFunction(query);
+        }
+
+        return result ?? null;
+    });
+
+    return { wrapper };
+}

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

@@ -0,0 +1,343 @@
+<template>
+    <div role="application">
+        <alert
+            ref="alertVerificationWarning"
+            v-if="displayVerificationWarning"
+            class="mb-4"
+            cmsWidgetName="AlertVerificationWarningWidget"
+            alertClass="alert-warning"
+            v-bind:isDismissible="false" />
+        <alert
+            ref="alertNoMatchWarning"
+            v-if="displayNoMatchWarning"
+            class="mb-4"
+            cmsWidgetName="AlertNoMatchWarningWidget"
+            alertClass="alert-warning"
+            v-bind:isDismissible="false" />
+
+        <div class="row mt-2 mb-4">
+            <div class="col">
+                <textboxQuestion
+                    id="streetAddressField"
+                    cmsWidgetName="StreetAddressQuestionWidget"
+                    v-model="addressModel.streetAddress"
+                    ref="autocomplete"
+                    inputId="autocomplete"
+                    placeholderText="Search"
+                    aria-haspopup=""
+                    hasIcon
+                    disableAutoFill
+                    validationRules="street-address-required"
+                    @keydown.enter.prevent />
+            </div>
+        </div>
+        <transition name="fade" mode="out-in">
+            <div class="row mb-4" aria-live="polite">
+                <div class="col">
+                    <textboxQuestion
+                        cmsWidgetName="CityQuestionWidget"
+                        v-model="addressModel.city"
+                        ref="city"
+                        inputId="cbf28188fdf2436688fd735915f7ee56"
+                        disableAutoFill
+                        validationRules="city-required" />
+                </div>
+            </div>
+        </transition>
+        <transition name="fade" mode="out-in">
+            <div class="row mb-4" aria-live="polite">
+                <div class="col">
+                    <dropdownQuestion
+                        cmsWidgetName="StateQuestionWidget"
+                        v-model="addressModel.state"
+                        ref="state"
+                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                        :options="stateOptions"
+                        disableAutoFill
+                        validationRules="state-required" />
+                </div>
+                <div class="col">
+                    <textboxQuestion
+                        cmsWidgetName="ZipQuestionWidget"
+                        v-model="addressModel.zipCode"
+                        ref="zipCode"
+                        inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
+                        mask="#####"
+                        disableAutoFill
+                        validationRules="zip-code-required|zip-code-format" />
+                </div>
+            </div>
+        </transition>
+        
+    </div>
+</template>
+
+<script>
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
+import alert from "@/ux-components/alert/alert";
+import { applicationConfig } from "@/constants/application-config.js";
+import { defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import { states } from "@/constants/states";
+import { endpoints } from '@/constants/endpoints';
+
+// DEFINE VALIDATION RULES
+defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
+defineRule("city-required", required(errorMessages.CITY_REQUIRED));
+defineRule("state-required", required(errorMessages.STATE_REQUIRED));
+defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
+defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
+
+export default {
+    name: "address-questions",
+    emits: ["update:modelValue"], // The component emits an event
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({
+                streetAddress: "",
+                city: "",
+                state: "",
+                zipCode: "",
+            }),
+        },
+        validationRules: String,
+    },
+    data() {
+        return {
+            displayVerificationWarning: false,
+            displayNoMatchWarning: false,
+            alertHeadlineVerificationWarning: "",
+            alertCopyVerificationWarning: "",
+            alertHeadlineNoMatchWarning: "",
+            alertCopyNoMatchWarning: "",
+            matchingIndirectly: false,
+            matchFound: null, // null = no attempted match, true = match was found, false = match was not found
+            enterPressed: false,
+            isAddressWatchActive: false, // Only deep watch the address model when a match was not found
+        };
+    },
+    computed: {
+        stateOptions: {
+            get: function () {
+                return states;
+            },
+        },
+        addressModel: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    methods: {
+        setupAddressLookup() {
+            
+            const addressField1 = document.getElementById("autocomplete");
+            const self = this;
+
+            const url = endpoints.GooglePlaces.url.replace("{apiKey}", applicationConfig.GOOGLE_PLACES_API_KEY)
+
+            this.$loadScript(
+                url
+            )
+                .then(() => {
+                    // Script is loaded, initialize the autocomplete textbox
+                    const autocomplete = new window.google.maps.places.Autocomplete(addressField1, {
+                        componentRestrictions: { country: ["us"] },
+                        fields: ["address_components"],
+                        types: ["geocode"],
+                    });
+
+                    // Standard place_changed event handling
+                    const autocompleteListener = window.google.maps.event.addListener(
+                        autocomplete,
+                        "place_changed",
+                        fillInAddress
+                    );
+
+                    addressField1.addEventListener("focus", () => {
+                        // Wrapping the addressField1 element in the Google Address Autocomplete object
+                        // will cause "autocomplete='off'" which Chrome completely ignores. This event
+                        // handler will set the value to something arbitrary so autofill doesn't work.
+                        // https://stackoverflow.com/a/30976223
+                        addressField1.setAttribute("autocomplete", "do-not-autofill");
+
+                        // Make place results box stick to the input on scroll
+                        const streetAddressField = document.getElementById("streetAddressField");
+                        const autocompleteResultsContainer =
+                            document.getElementsByClassName("pac-container")[0];
+                        if (autocompleteResultsContainer) {
+                            streetAddressField.appendChild(autocompleteResultsContainer);
+                        }
+                    });
+
+                    addressField1.addEventListener("keydown", (e) => {
+                        if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") {
+                            if (e.code === "Tab") {
+                                self.matchingIndirectly = true;
+                            } else {
+                                self.enterPressed = true;
+                            }
+
+                            addressField1.blur();
+                        } else {
+                            return;
+                        }
+                    });
+
+                    addressField1.addEventListener("change", () => {
+                        // NOTE: The "place_changed" event of the autocomplete fires after this and will use either the address the user had chosen
+                        // using either the down / up arrows or the address the user was hovering over when they pressed "Enter."
+
+                        // If a match has been previously found then do nothing
+                        // OR
+                        // If the user pressed "Enter" then do nothing
+                        if (self.matchFound || self.enterPressed) {
+                            return;
+                        }
+
+                        // Get the address that the user clicked on (if any)
+                        const clickedAddress = document.querySelector(
+                            ".pac-container .pac-item:hover"
+                        );
+
+                        // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field)
+                        if (clickedAddress === null) {
+                            // Fill-in the address using first item in the list.
+                            const item = document.querySelector(".pac-container .pac-item");
+                            if (item != null) {
+                                self.matchingIndirectly = true;
+
+                                const firstResult = item.textContent;
+                                const geocoder = new window.google.maps.Geocoder();
+                                geocoder.geocode(
+                                    {
+                                        address: firstResult,
+                                    },
+                                    function (results, status) {
+                                        if (status === window.google.maps.GeocoderStatus.OK) {
+                                            fillInAddress(results[0]);
+                                        }
+                                    }
+                                );
+                            } else {
+                                // No addresses found for the input
+                                self.matchFound = false;
+                            }
+                        }
+                    });
+
+                    function fillInAddress(place) {
+                        if (!place) {
+                            place = autocomplete.getPlace();
+                        }
+
+                        if (place && place.address_components) {
+                            self.matchFound = true;
+                            self.addressModel.streetAddress = "";
+                            self.$nextTick(function () {
+                                
+                                for (const component of place.address_components) {
+                                    const componentType = component.types[0];
+
+                                    switch (componentType) {
+                                        case "street_number": {
+                                            self.addressModel.streetAddress = component.long_name;
+                                            break;
+                                        }
+                                        case "route": {
+                                            self.addressModel.streetAddress +=
+                                                " " + component.short_name;
+                                            break;
+                                        }
+                                        case "locality": {
+                                            self.addressModel.city = component.long_name;
+                                            break;
+                                        }
+                                        case "administrative_area_level_1": {
+                                            self.addressModel.state = component.short_name;
+                                            break;
+                                        }
+                                        case "postal_code": {
+                                            self.addressModel.zipCode = component.long_name;
+                                            break;
+                                        }
+                                    }
+                                }
+
+                                self.displayVerificationWarning = self.matchingIndirectly;
+
+                                // after showing the address fields, disable the address autocomplete
+                                window.google.maps.event.removeListener(autocompleteListener);
+                                window.google.maps.event.clearInstanceListeners(autocomplete);
+                                addressField1.onchange = null;
+                                const pacContainer = document.querySelector(".pac-container");
+                                if (pacContainer) {
+                                    pacContainer.remove();
+                                }
+                            });
+                        } else {
+                            self.displayVerificationWarning = true;
+                        }
+                    }
+                })
+                .catch(() => {
+                    // Failed to fetch script
+                    console.log("Unable to load Google Places API script");
+                });
+        },
+    },
+    mounted() {
+        this.setupAddressLookup();
+    },
+    watch: {
+        matchFound: {
+            handler(newValue) {
+                if (!newValue) {
+                    this.displayNoMatchWarning = true;
+
+                    this.addressModel.city = "";
+                    this.addressModel.state = "";
+                    this.addressModel.zipCode = "";
+                    this.displayVerificationWarning = false;
+
+                    this.$nextTick(function () {
+                        // Only deep watch the Address Model after a failed match
+                        this.isAddressWatchActive = true;
+                    });
+                }
+            },
+        },
+        addressModel: {
+            handler() {
+                if (this.isAddressWatchActive) {
+                    this.displayNoMatchWarning = false;
+                    this.isAddressWatchActive = false;
+                }
+            },
+            deep: true,
+        },
+    },
+    components: {
+        textboxQuestion,
+        dropdownQuestion,
+        alert,
+    },
+};
+</script>
+
+<style lang="scss">
+#streetAddressField {
+    position: relative;
+
+    .pac-container {
+        top: 76px !important; // Height of #streetAddressField
+        left: 0 !important;
+    }
+}
+</style>

src/layouts/address-lookup/customer-questions/customer-questions.spec.js

@@ -0,0 +1,31 @@
+import { shallowMount } from "@vue/test-utils";
+import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
+
+const customerModel = {
+    addressQuestions: {
+        streetAddress: "",
+        city: "",
+        state: "",
+        zipCode: "",
+    },
+    firstName: "",
+    lastName: "",
+    emailAddress: "",
+};
+
+describe("customerQuestions.vue", () => {
+    it("Should render customerQuestions sub-components (addressQuestions, first name, last name, and email textbox-questions)", async () => {
+        // Arrange
+        const wrapper = shallowMount(customerQuestions);
+
+        // Act
+        const addressQuestions = wrapper.findComponent({ ref: "addressQuestions" });
+        const firstName = wrapper.findComponent({ ref: "firstName" });
+        const lastName = wrapper.findComponent({ ref: "lastName" });
+
+        // Assert
+        expect(addressQuestions.exists()).toBe(true);
+        expect(firstName.exists()).toBe(true);
+        expect(lastName.exists()).toBe(true);
+    });
+});

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

@@ -0,0 +1,74 @@
+<template>
+    <addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
+    <div class="row mb-4">
+        <div class="col">
+            <textboxQuestion
+                cmsWidgetName="FirstNameQuestionWidget"
+                v-model="customerModel.firstName"
+                ref="firstName"
+                inputId="08497a2efd9a4a73a70360ab47b4838d"
+                disableAutoFill
+                validationRules="first-name-required" />
+        </div>
+    </div>
+    <div class="row mb-4">
+        <div class="col">
+            <textboxQuestion
+                cmsWidgetName="LastNameQuestionWidget"
+                v-model="customerModel.lastName"
+                ref="lastName"
+                inputId="0030e56a57e74a4ab92de7fb8e97fec5"
+                disableAutoFill
+                validationRules="last-name-required" />
+        </div>
+    </div>
+</template>
+
+<script>
+import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// DEFINE VALIDATION RULES
+defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
+defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
+
+export default {
+    name: "customer-questions",
+    emits: ["update:modelValue"], // The component emits an event
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({
+                customerQuestions: {
+                    addressQuestions: {
+                        streetAddress: "",
+                        city: "",
+                        state: "",
+                        zipCode: "",
+                    },
+                    firstName: "",
+                    lastName: "",
+                },
+            }),
+        },
+        validationRules: String,
+    },
+    computed: {
+        customerModel: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    components: {
+        addressQuestions,
+        textboxQuestion,
+    },
+};
+</script>

src/layouts/address-vehicles/address-vehicles.vue

@@ -0,0 +1,89 @@
+<template>
+  <Form
+    @submit="onSubmit"
+    @invalidSubmit="onInvalidSubmit"
+    v-slot="{ meta }"
+  >
+    <div class="page-container-grouped-styles overflow-auto">
+      <siteHeader
+        cmsWidgetName="SiteHeaderWidget"
+      />
+      <vehicleBanner
+        cmsWidgetName="VehicleBannerWidget"
+        :displayGenericVehicleImage="false"
+      />
+      <siteSubHeader
+        cmsWidgetName="SiteSubHeaderWidget"
+      />
+      <div class="fade-on-route-transition sub-container make-tall mt-5">
+        <p>Placeholder for address-vehicles page</p>
+
+        <siteFooter
+          cmsWidgetName="SiteFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          @backClicked="backButtonAction"
+          @forwardClicked="forwardButtonAction"
+          ref="siteFooter"
+        />
+      </div>
+    </div>
+  </Form>
+</template>
+<script>
+// Import Supporting Files
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { settleAllPromises } from '@/helpers/layout-helper';
+
+// Import Component
+import baseFormMixin from '@/mixins/base-form-mixin';
+import { Form } from 'vee-validate';
+import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+
+export default {
+  name: 'capability-questions',
+  mixins: [baseFormMixin],
+  components: {
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
+    Form,
+    vehicleBanner,    
+  },  
+  data() {
+    return {};
+  },  
+  async beforeRouteEnter(to, from, next) {
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: 'cmsContent',
+        promise: cmsContentPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  methods: {
+    arePagePrerequisiteValid() {
+      return true;
+    },
+    backButtonAction() {
+      /**
+       * this.navigationScenarios comes from base-mixin
+       */
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    async forwardButtonAction() {},    
+    resetDependentState() {},
+  },
+};
+</script>

src/main.js

@@ -7,6 +7,7 @@ import { useMainStore } from '@/store';
 import baseMixin from "@/mixins/base-mixin.js";
 import { createPinia } from 'pinia';
 import Maska from "maska";
+import LoadScript from "vue-plugin-load-script";
 
 import analyticsMixin from "@/mixins/analytics-mixin.js";
 import experimentMixin from "@/mixins/experiment-mixin.js";
@@ -31,6 +32,7 @@ useMainStore().populateInitialState();
 // Additional Vue items to setup
 vueApp.use(router);
 vueApp.use(Maska);
+vueApp.use(LoadScript);
 vueApp.mixin(baseMixin);
 vueApp.mixin(analyticsMixin);
 vueApp.mixin(experimentMixin);

src/mixins/vin-pages-mixin.js

@@ -0,0 +1,13 @@
+import { useMainStore } from "@/store";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+
+export default {
+    methods: {
+        async navigateForwardWithSingleCarMatch() {
+            const result = await useMainStore().getPartsOrQuestions();
+            const partsOrQuestions = result.data.partsOrQuestions;
+
+            vehicleQuestionsMixin.methods.navigateForward(partsOrQuestions, this);
+        },
+    },
+};

src/mixins/vin-pages-mixin.spec.js

@@ -0,0 +1,42 @@
+import vinPagesMixin from "@/mixins/vin-pages-mixin";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { useMainStore } from "@/store";
+
+describe("vin-pages-mixin", () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe("navigateForwardWithSingleCarMatch", () => {
+        test("should navigateForward", async () => {
+            // Arrange
+            useMainStore().getPartsOrQuestions = () => { return { data: {partsOrQuestions: {}}} };
+            const { wrapper } = setupMocks({});
+            vehicleQuestionsMixin.methods.navigateForward = jest.fn();
+
+            // Act
+            await wrapper.vm.navigateForwardWithSingleCarMatch();
+
+            // Assert
+            expect(vehicleQuestionsMixin.methods.navigateForward).toHaveBeenCalled();
+        });
+    });
+});
+
+function setupMocks() {
+    const mocks = getMountOptions({
+        router: {
+            navigate: jest.fn(),
+        },
+    });
+
+    const mockVinComponent = {
+        mixins: [vinPagesMixin],
+    };
+
+    const wrapper = shallowMount(mockVinComponent, mocks);
+
+    return { wrapper };
+}

src/router/router-constants/issPage-values.js

@@ -8,6 +8,7 @@ export const issPageValues = {
     VEHICLE_DAMAGE: "vehicle-damage",
     VEHICLE_LOOKUP: "vehicle-lookup",
     ADDRESS_LOOKUP: "address-lookup",
+    ADDRESS_VEHICLES: "address-vehicles",
     LICENSE_PLATE_LOOKUP: "license-plate-lookup",
     VIN_LOOKUP: "vin-lookup",
     VEHICLE_PARTS: "vehicle-parts",

src/router/router-constants/routing-table.js

@@ -231,21 +231,57 @@ const routingTable = function(store) {
               destinationIssPageValue: issPageValues.QUOTE,
           },
       ],
-  },
+    },
-  {
+    {
-    issPageValue: issPageValues.WELCOME_PAGE,
+      issPageValue: issPageValues.ADDRESS_LOOKUP,
-    maps: [
+      maps: [
-      {
+          {
-        scenario: navigationScenarios.CLICKED_BACK,
+              scenario: navigationScenarios.CLICKED_BACK,
-        destinationIssPageValue: issPageValues.WELCOME_PAGE
+              destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
-      },
+          },
-      {
+          {
-        scenario: navigationScenarios.WELCOME_PAGE,
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
-        destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
+              destinationIssPageValue: issPageValues.ADDRESS_VEHICLES,
-      },
+          },
-    ],
+          {
-  },
+              scenario: navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-    
+              destinationIssPageValue: issPageValues.VEHICLE_DAMAGE,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_PART_QUESTIONS,
+              destinationIssPageValue: issPageValues.PART_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
+              destinationIssPageValue: issPageValues.VEHICLE_PARTS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
+              destinationIssPageValue: issPageValues.MOLDING_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
+              destinationIssPageValue: issPageValues.CAPABILITY_QUESTIONS,
+          },
+          {
+              scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
+              destinationIssPageValue: issPageValues.QUOTE,
+          },
+      ],
+    },
+    {
+      issPageValue: issPageValues.WELCOME_PAGE,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.WELCOME_PAGE
+        },
+        {
+          scenario: navigationScenarios.WELCOME_PAGE,
+          destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
+        },
+      ],
+    },
   ];
 };
 

src/store/index.js

@@ -41,15 +41,29 @@ const getDefaultState = () => {
         moldingQuestionAnswers: null,
         capabilityQuestionAnswers: null,
       },
+      customer: {
+        address: {
+          streetAddress: null,
+          city: null,
+          state: null,
+          zipCode: null,
+        },
+        firstName: null,
+        lastName: null,
+        emailAddress: null,
+      },
       serviceLocation: {
         address: null,
         city: null,
         state: null,
         zipCode: null,
+        zipCodeCtu: null
       },
       lineItems: {
         glassParts: null,
-        otherParts: null
+        otherParts: null,
+        supportingItems: null,
+        vaps: null
       },
       payment: {
         isInsurance: true,
@@ -104,6 +118,35 @@ export const useMainStore = defineStore({
       pageData: (state) => (page) => {
           return state.applicationUser.pageData[page];
       },
+      customerDataAddressLookup: (state) => {
+        if (state.order.vehicle.registration.address)
+        {
+          const registration = state.order.vehicle.registration;
+          return {
+            addressQuestions: {
+              streetAddress: registration.address,
+              city: registration.city,
+              state: registration.state,
+              zipCode: registration.zipCode,
+            },
+            firstName: registration.firstName,
+            lastName: registration.lastName,
+          }
+        }
+        else {
+          const address = state.order.customer.address;
+          return {
+            addressQuestions: {
+              streetAddress: address.streetAddress,
+              city: address.city,
+              state: address.state,
+              zipCode: address.zipCode,
+            },
+            firstName: state.order.customer.firstName,
+            lastName: state.order.customer.lastName,
+          }
+        }
+      },      
       experimentOrder: (state) => {
         return {
             issVehicleYear: state.order.vehicle.year,
@@ -159,14 +202,29 @@ export const useMainStore = defineStore({
             ],
         };
       },
-      experimentSettings: (state) =>
+      experimentSettings: (state) => {
-          state.applicationUser.experiments
+        return state.applicationUser.experiments
               .map((x) => x.settings)
               .reduce((r, c) => Object.assign(r, c), {}) ?? {}
+      }
     },
     actions:
     {
-        // Content API Actions
+      // Content API Actions
+      
+      lookupVinByAddress({ licenseLastName, licenseStreetAddress, licenseZip, licenseState }) {
+          return globalMethods.callHttpClient({
+              method: endpoints.LookupVinByAddress.method,
+              endpoint: endpoints.LookupVinByAddress.url,
+              payload: {
+                  licenseLastName: licenseLastName,
+                  licenseStreetAddress: licenseStreetAddress,
+                  licenseZip: licenseZip,
+                  licenseState: licenseState,
+              },
+          });
+      },
+
       getRouteInfo(pageName) {
         return globalMethods.callHttpClient({
           method: endpoints.GetRouteInfo.method,
@@ -290,8 +348,8 @@ export const useMainStore = defineStore({
       },
 
       async getParts() {
-        const vehicle = this.getters.vehicle;
+        const vehicle = this.order.vehicle;
-        const damage = this.getters.damage;
+        const damage = this.order.damage;
         const order = this.order;
 
         const carId = vehicle.carId;
@@ -376,7 +434,43 @@ export const useMainStore = defineStore({
             this.updateNumberOfChips(isWindshieldRepair ? parseInt(selectedWindshieldChipCount) : null);
             this.updateGlassToReplace(selectedGlassToReplace);
         }
-    },
+      },
+
+      updateRegistration(registrationInfo) {
+        this.order.vehicle.registration.licensePlate = registrationInfo?.licensePlate;
+        this.order.vehicle.registration.address = registrationInfo?.address;
+        this.order.vehicle.registration.city = registrationInfo?.city;
+        this.order.vehicle.registration.state = registrationInfo?.state;
+        this.order.vehicle.registration.zipCode = registrationInfo?.zipCode;
+        this.order.vehicle.registration.firstName = registrationInfo?.firstName;
+        this.order.vehicle.registration.lastName = registrationInfo?.lastName;
+      },
+
+      updateServiceLocation(serviceLocationInfo) {
+        this.order.serviceLocation.address = serviceLocationInfo.address;
+        this.order.serviceLocation.city = serviceLocationInfo.city;
+        this.order.serviceLocation.state = serviceLocationInfo.state;
+        this.order.serviceLocation.zipCode = serviceLocationInfo.zipCode;
+        this.order.serviceLocation.zipCodeCtu = serviceLocationInfo.zipCodeCtu;
+      },
+
+      resetRegistrationState() {
+        this.order.vehicle.registration.licensePlate = null;
+        this.order.vehicle.registration.address = null;
+        this.order.vehicle.registration.city = null;
+        this.order.vehicle.registration.state = null;
+        this.order.vehicle.registration.zipCode = null;
+        this.order.vehicle.registration.firstName = null;
+        this.order.vehicle.registration.lastName = null;
+      },
+
+      updateSupportingItems(partsData) {
+        this.order.lineItems.supportingItems = partsData;
+      },
+
+      updateVaps(partsData) {
+        this.order.lineItems.vaps = partsData;
+      },
 
       updateVehicle(vehicle) {
         // Assuming that the method caller pass all the properties.
@@ -545,7 +639,7 @@ export const useMainStore = defineStore({
       savePartQuestionAnswers(partQuestionAnswersArray) {
         // if part question answers have changed, reset subsequent question answers
         const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
-            context.getters.damage.partQuestionAnswers,
+            this.order.damage.partQuestionAnswers,
             "result"
         );
         const sortedPartQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(
@@ -727,6 +821,59 @@ export const useMainStore = defineStore({
         this.updateExperiments(response.data.experiments);
       },
 
+      async validateZip({ zip }) {
+        return await globalMethods.callHttpClient({
+            methods: endpoints.ValidateZip.method,
+            endpoint: `${endpoints.ValidateZip.url}/${zip}`,
+        });
+      },
+
+      saveServiceLocation(serviceLocationInfo) {
+        this.updateServiceLocation(serviceLocationInfo);
+      },
+
+      saveRegistrationAddressLookup({ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) {
+        //Reset dependent state when changing
+        if 
+        (
+            registrationInfo?.address !== this.order.vehicle.registration?.address ||
+            registrationInfo?.city !== this.order.vehicle.registration?.city ||
+            registrationInfo?.state !== this.order.vehicle.registration?.state ||
+            registrationInfo?.zipCode !== this.order.vehicle.registration?.zipCode ||
+            registrationInfo?.firstName !== this.order.vehicle.registration?.firstName ||
+            registrationInfo?.lastName !== this.order.vehicle.registration?.lastName
+        ) 
+        {
+            this.resetRegistrationAndDependencies();
+
+            if (!isSelectedGlassAvailableForVehicle) {
+                this.resetDamageAndDependencies();
+                this.resetPartsAndDependencies();
+            }
+
+            //Save new values
+            this.updateVehicle(vehicleInfo);
+            this.updateRegistration(registrationInfo);
+        }
+      },
+
+      resetRegistrationAndDependencies() {
+        this.resetRegistrationState();
+        this.resetGlassPartsState();
+        this.updateSupportingItems(null);
+      },
+
+      resetDamageAndDependencies() {
+        this.resetDamageState();
+        this.resetGlassPartsState();
+        this.updateSupportingItems(null);
+        this.updateVaps(null);
+      },
+
+      resetPartsAndDependencies() {
+        this.resetGlassPartsState();
+        this.updateSupportingItems(null);
+      },
     },
     persist: true
 });

src/store/store.spec.js

@@ -157,4 +157,66 @@ describe("Store", () => {
         expect(store.order.damage.numberOfChips).toEqual(null);
     });
 
+    it("should return registration data if available", () => {
+        //Arrange
+        const expected = {
+            addressQuestions: {
+                streetAddress: "test",
+                city: "city",
+                state: "state",
+                zipCode: "zip",
+            },
+            firstName: "1stName",
+            lastName: "Surname",
+        }
+
+        store.order.vehicle.registration = {
+            licensePlate: null,
+            address: "test",
+            city: "city",
+            state: "state",
+            zipCode: "zip",
+            firstName: "1stName",
+            lastName: "Surname",
+        };
+
+        //Act
+        const actual = store.customerDataAddressLookup;
+        //Assert
+
+        expect(actual).toEqual(expected);
+    });
+
+    it("should return customer data if registration data unavailable", () => {
+        //Arrange
+        const expected = {
+            addressQuestions: {
+                streetAddress: "test",
+                city: "city",
+                state: "state",
+                zipCode: "zip",
+            },
+            firstName: "1stName",
+            lastName: "Surname",
+        }
+
+        store.order.vehicle.registration.address = null;
+
+        store.order.customer = {
+            licensePlate: null,
+            address: "test",
+            city: "city",
+            state: "state",
+            zipCode: "zip",
+            firstName: "1stName",
+            lastName: "Surname",
+        };
+
+        //Act
+        const actual = store.customerDataAddressLookup;
+        //Assert
+
+        expect(actual).toEqual(expected);
+    });
+
 });

vue.config.js

@@ -1,5 +1,7 @@
 process.env.VUE_APP_CONSUMER_CF_DISTRO ="https://digitalapi.dev.safelite.io";
 process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
+process.env.VUE_APP_GOOGLE_PLACES_API_KEY = 
+  "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo";
 
 
 // GA & GTM