Merge pull request #1882 from Safelite/feature/CSR-2109

Feature/csr 2109

src/constants/vin-lookup-method-selections.js

@@ -2,6 +2,7 @@ const vinLookupMethodSelections = {
     MANUALVIN: "ManualVin",
     LICENSEPLATE: "LicensePlate",
     HOMEADDRESS: "HomeAddress",
+    DECLINE: "Decline",
 };
 
 export { vinLookupMethodSelections };

src/layouts/estimate/estimate.spec.js

@@ -86,15 +86,18 @@ describe("estimate.vue", () => {
             expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
         });
 
-        // TODO KO
+        test("Selecting no vin on ForwardButtonAction triggers a router.navigateWithSaving", async () => {
-        describe("isRepair", () => {
+            //Arrange
-            test.todo("is repair and zip codes are valid/serviceable => go to quote page");
+            const { wrapper } = setupMocks({});
-            test.todo(
+            await wrapper.setData({
-                "is repair and zip codes are valid but not serviceable => show correct alert, remove loader"
+                selectedVinLookupMethod: vinLookupMethodSelections.DECLINE,
-            );
+            });
-            test.todo(
+
-                "is repair and zip codes are not valid/serviceable => show correct alert, remove loader"
+            //Act
-            );
+            wrapper.vm.forwardButtonAction();
+
+            //Assert
+            expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
         });
     });
 
@@ -207,43 +210,6 @@ describe("estimate.vue", () => {
             expect(arePagePrerequisitesValid).toBe(true);
         });
     });
-
-    test("Changing zip should reset alert", async () => {
-        //Arrange
-        const { wrapper } = setupMocks({});
-
-        //Act
-        wrapper.vm.displayNonServiceableZipAlert = "true";
-        wrapper.vm.serviceZipCode = "43015";
-
-        await wrapper.vm.$nextTick();
-
-        //Assert
-        expect(wrapper.vm.displayNonServiceableZipAlert).toEqual(false);
-    });
-});
-
-describe("test alertInfo and isRepair", () => {
-    const skipOptions = [
-        [true, false, "AlertQuoteReady"],
-        [false, true, "AlertQuoteVinOptional"],
-        [false, false, "AlertQuoteReady"],
-        [true, true, "AlertQuoteVinOptional"],
-    ];
-    test.each(skipOptions)(
-        "isRepair %s, skipVinNotRepair %s alertInfo should return %s",
-        async (isRepair, skipVinNotRepair, expectedAlertInfo) => {
-            const { wrapper } = setupMocks({});
-            await wrapper.setData({
-                skipVinNotRepair: skipVinNotRepair,
-            });
-
-            store.commit(storeMutations.UPDATE_IS_REPAIR, isRepair);
-
-            expect(wrapper.vm.alertInfo).toEqual(expectedAlertInfo);
-            expect(wrapper.vm.isRepair).toEqual(isRepair);
-        }
-    );
 });
 
 function setupMocks({

src/layouts/estimate/estimate.vue

@@ -11,7 +11,7 @@
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
-                    <div v-if="!skipVin">
+                    <div>
                         <div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
                         <buttonQuestion
                             cmsWidgetName="VinLookupMethod"
@@ -22,65 +22,14 @@
                             isRequired
                             validationRules="option-required"
                             :logDisplayedValuesEvent="true" />
-
-                        <navbar
-                            cmsWidgetName="FunnelFooterWidget"
-                            ref="navbar"
-                            :isForwardActionDisabled="!meta.valid"
-                            @back-clicked="backButtonAction"
-                            @ForwardClicked="forwardButtonAction" />
                     </div>
 
-                    <div v-else>
+                    <navbar
-                        <alert
+                        cmsWidgetName="FunnelFooterWidget"
-                            class="mt-4 mb-4"
+                        ref="navbar"
-                            :cmsWidgetName="alertInfo"
+                        :isForwardActionDisabled="!meta.valid"
-                            alertClass="alert-info"
+                        @back-clicked="backButtonAction"
-                            v-bind:isDismissible="false" />
+                        @ForwardClicked="forwardButtonAction" />
-
-                        <textboxQuestion
-                            class="mb-4"
-                            cmsWidgetName="ServiceZipQuestionWidget"
-                            v-model="serviceZipCode"
-                            inputId="serviceZipCode"
-                            mask="#####"
-                            isRequired
-                            validationRules="zip-required|zip-format" />
-
-                        <textboxQuestion
-                            class="mb-0"
-                            cmsWidgetName="EmailAddressQuestionWidget"
-                            v-model="emailAddress"
-                            inputId="emailAddress"
-                            :isRequired="!IsEmailOptional"
-                            disableAutoFill
-                            :validationRules="EmailValidationRules"
-                            :addOptionalText="IsEmailOptional" />
-                        <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
-
-                        <alert
-                            ref="alertInvalidZip"
-                            v-if="displayInvalidZipAlert"
-                            class="my-4"
-                            cmsWidgetName="AlertInvalidZipWidget"
-                            alertClass="alert-danger"
-                            v-bind:isDismissible="false" />
-
-                        <alert
-                            class="my-4"
-                            :manualHeadline="AlertNonServiceableZipHeader"
-                            :manualCopy="AlertNonServiceableZipBody"
-                            v-model="customAlertData"
-                            v-if="displayNonServiceableZipAlert"
-                            alertClass="alert-danger" />
-
-                        <navbar
-                            cmsWidgetName="FunnelFooterWidget"
-                            ref="navbar"
-                            :isForwardActionDisabled="!meta.valid"
-                            @back-clicked="backButtonAction"
-                            @ForwardClicked="forwardButtonAction" />
-                    </div>
                 </div>
             </div>
         </div>
@@ -94,9 +43,6 @@ import navbar from "@/fmg-components/nav-bar/nav-bar";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import buttonQuestion from "@/digital-components/button-question/button-question";
-import alert from "@/ux-components/alert/alert";
-import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import textBlock from "@/digital-components/text-block/text-block";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
 //Supporting Files
@@ -137,10 +83,6 @@ export default {
     data() {
         return {
             selectedVinLookupMethod: null,
-            serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
-            emailAddress: this.getEmailFromStore(),
-            displayInvalidZipAlert: false,
-            displayNonServiceableZipAlert: false,
             skipVin: false,
             skipVinNotRepair: false,
         };
@@ -185,22 +127,12 @@ export default {
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
-        const skipVin = await skipVinLookup();
-        const skipVinNotRepair = await skipVinLookupNotRepair();
 
         next((vm) => {
-            vm.skipVin = skipVin;
-            vm.skipVinNotRepair = skipVinNotRepair;
             if (resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText.includes("|")) {
                 const forwardTextOption =
                     resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText.split("|");
-                if (skipVin) {
+                resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText = forwardTextOption[0];
-                    resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText =
-                        forwardTextOption[1];
-                } else {
-                    resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText =
-                        forwardTextOption[0];
-                }
             }
 
             if (!zip || resultMap.vinByAddress === false) {
@@ -216,12 +148,6 @@ export default {
         });
     },
     methods: {
-        getZipFromStore() {
-            return store.getters.order.serviceLocation.zipCode;
-        },
-        getEmailFromStore() {
-            return store.getters.order.customer.emailAddress;
-        },
         arePagePrerequisitesValid() {
             return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
         },
@@ -230,80 +156,6 @@ export default {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {
-            if (this.skipVin) {
-                const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
-                await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
-                await this.dispatchStoreAction(
-                    storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
-                    {
-                        zipCode: this.serviceZipCode,
-                        state: zipCodeData.state,
-                        zipCodeCtu: zipCodeData.zipCodeCtu,
-                    },
-                    false
-                );
-
-                if (!zipCodeData.isValid) {
-                    this.displayInvalidZipAlert = true;
-                    return this.$refs.navbar.removeLoader();
-                }
-                this.displayInvalidZipAlert = false;
-
-                if (!zipCodeData.isServiceable) {
-                    this.displayNonServiceableZipAlert = true;
-                    return this.$refs.navbar.removeLoader();
-                }
-                this.displayNonServiceableZipAlert = false;
-
-                const payment = this.$store.getters.payment;
-                const policy = this.$store.getters.policy;
-
-                const vehicleChangedDuringPolicyLookupInHeritage =
-                    payment.isInsurance &&
-                    payment.insuranceCoverage.coverageStatus &&
-                    policy.policyNumber !== "";
-
-                if (vehicleChangedDuringPolicyLookupInHeritage) {
-                    navigateToHeritageFunnel({
-                        shouldSaveSession: true,
-                        pageNameToLog: "estimate",
-                    });
-                } else if (this.$store.getters.order.referralNumber?.length === 6) {
-                    await this.navigateForwardWithSingleCarMatch();
-                } else if (this.isRepair) {
-                    const supportingItemsPromise = await this.dispatchStoreActionWithLogging(
-                        storeActions.GET_SUPPORTING_ITEMS,
-                        null,
-                        "estimate"
-                    );
-
-                    const promiseResultMap = [
-                        {
-                            resultKey: "supportingItems",
-                            promise: supportingItemsPromise,
-                        },
-                    ];
-
-                    const resultMap = await settleAllPromises(promiseResultMap);
-
-                    this.dispatchStoreAction(
-                        this.storeActions.SAVE_SUPPORTING_ITEMS,
-                        resultMap.supportingItems,
-                        false
-                    );
-
-                    // call saveSession here - navigateWithSaving saves too late in the flow
-                    await saveSession({ pageNameToLog: "estimate" });
-                    return this.$router.navigateWithSaving(
-                        this.navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
-                        this.$route
-                    );
-                } else {
-                    // if we're skipping the vin-lookup but it's not a repair, we still need to get the parts
-                    await this.navigateForwardWithSingleCarMatch();
-                }
-            }
-
             if (this.selectedVinLookupMethod === vinLookupMethodSelections.MANUALVIN) {
                 await this.dispatchStoreAction(storeActions.CLEAR_VIN);
                 return this.$router.navigateWithSaving(
@@ -323,18 +175,15 @@ export default {
                     this.$route
                 );
             }
+            if (this.selectedVinLookupMethod === vinLookupMethodSelections.DECLINE) {
+                return this.$router.navigateWithSaving(
+                    this.navigationScenarios.SELECTED_NO_VIN,
+                    this.$route
+                );
+            }
         },
     },
     computed: {
-        AlertNonServiceableZipHeader() {
-            return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll(
-                "{custom:serviceZip}",
-                this.serviceZipCode
-            );
-        },
-        AlertNonServiceableZipBody() {
-            return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
-        },
         questionText() {
             return this.getCmsContent("VinLookupMethod", "QuestionText");
         },
@@ -344,18 +193,10 @@ export default {
         isRepair() {
             return store.getters.damage.isRepair;
         },
-        alertInfo() {
-            return this.skipVinNotRepair ? "AlertQuoteVinOptional" : "AlertQuoteReady";
-        },
         VinLookupQuestionText() {
             return this.getCmsContent("VinLookupQuestion", "BodyText");
         },
     },
-    watch: {
-        serviceZipCode() {
-            this.displayNonServiceableZipAlert = false;
-        },
-    },
     components: {
         funnelHeader,
         vehicleBanner,
@@ -363,9 +204,6 @@ export default {
         navbar,
         buttonQuestion,
         Form,
-        alert,
-        textboxQuestion,
-        textBlock,
         loadingModal,
     },
 };

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

@@ -0,0 +1,434 @@
+// Components
+import serviceZip from "@/layouts/service-zip/service-zip";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper";
+import baseMixin from "@/mixins/base-mixin";
+import store from "@/store";
+import router from "@/router";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
+import vinPagesMixin from "@/mixins/vin-pages-mixin";
+
+// Constants
+
+// Setup global mocks
+let mockCmsContent = {
+    AlertNonServiceableZipWidget: {
+        HeadlineText: "Test",
+    },
+};
+
+let mockStoreActionData = {};
+
+let mockStoreData = {};
+
+function resetMockStoreData() {
+    mockStoreData = {
+        vehicle: {
+            year: "2000",
+            make: "TestMake",
+            model: "TestModel",
+            style: "TestStyle",
+            carId: "TestID",
+            vin: null,
+            registration: {
+                licensePlate: null,
+            },
+        },
+        serviceLocation: {
+            address: null,
+            address2: null,
+            city: null,
+            state: null,
+            zipCode: null,
+            zipCodeCtu: null,
+            appointmentType: null,
+            isVehicleProtected: null,
+            provider: {
+                providerNumber: null,
+                address: {
+                    streetAddress: null,
+                    city: null,
+                    state: null,
+                    zipCode: null,
+                    zipCodeCtu: null,
+                },
+            },
+            techNotes: null,
+        },
+        customer: {
+            firstName: null,
+            lastName: null,
+            emailAddress: null,
+            phoneNumber: null,
+            isSmsOptIn: null,
+        },
+        damage: {
+            isRepair: false,
+            numberOfChips: null,
+            glassToReplace: [{ glassLocation: "Windshield", glassName: "windshield" }],
+            partQuestionAnswers: null,
+            moldingQuestionAnswers: null,
+            capabilityQuestionAnswers: null,
+            dateOfLoss: null,
+            damageCause: null,
+        },
+        lineItems: {
+            glassParts: [
+                {
+                    canSafeliteRecalibrate: true,
+                    childParts: [
+                        {
+                            kitPrice: 0,
+                            laborAmount: 23.55,
+                            partNumber: "GGG FW4896",
+                            salesTax: 1.77,
+                            sellingPrice: 0,
+                        },
+                    ],
+                    color: "Green Tint",
+                    description:
+                        "solar, soundproofing, lane keep assist, lane departure warning system, w/adaptive cruise control",
+                    id: "db22fd44-10dd-456f-979b-ff88cf68cca6",
+                    kitPrice: 0,
+                    laborAmount: 60,
+                    partNumber: "FW04896GTYN",
+                    partType: "WINDSHIELD",
+                    recalibrationType: "STATIC",
+                    requiresCapabilityQuestions: false,
+                    requiresRecalibration: true,
+                    salesTax: 63.86,
+                    sellingPrice: 791.46,
+                },
+            ],
+            supportingItems: null,
+            vaps: null,
+            serverData: null,
+            promos: null,
+        },
+        payment: {
+            isInsurance: null,
+            insuranceCoverage: {
+                isVerified: null,
+                coverageStatus: null,
+                coverageType: null,
+                coverageVerificationType: null,
+            },
+            parentAccountNumber: 0,
+            billToAccountNumber: null,
+            isPia: null,
+            piaType: null,
+            inactivePromos: null,
+            paypalToken: null,
+            nextGenSettledAmount: 0,
+            ccToken: {
+                subscriptionId: null,
+                expMonth: null,
+                expYear: null,
+                cardType: null,
+                billToPostalCode: null,
+                billToFirstName: null,
+                billToLastName: null,
+                referenceNumber: null,
+                authCode: null,
+                transactionId: null,
+                transReferenceNumber: null,
+                lastFour: null,
+            },
+        },
+        policy: {
+            currentDeductible: 0,
+            policyNumber: null,
+            isItac: false,
+            additionalAuthFlag: null,
+            isNoComp: false,
+            insuranceCompanyName: null,
+        },
+        schedule: {
+            date: null,
+            startTime: null,
+            endTime: null,
+            routeCode: null,
+            jobMaxMinutes: null,
+            jobMinMinutes: null,
+        },
+    };
+}
+
+function applyMockStoreDataToGetters() {
+    store.getters = {
+        order: mockStoreData,
+        damage: mockStoreData.damage,
+        payment: mockStoreData.payment,
+        policy: mockStoreData.policy,
+    };
+    store.state.order = mockStoreData;
+}
+
+async function mockDispatchStoreAction(actionName) {
+    return mockStoreActionData[actionName];
+}
+
+jest.mock("@/mixins/base-mixin.js", () => ({
+    methods: {
+        dispatchStoreAction: jest.fn().mockImplementation(mockDispatchStoreAction),
+        dispatchStoreActionWithLogging: jest.fn().mockImplementation(mockDispatchStoreAction),
+    },
+}));
+
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: () => Promise.resolve("content"),
+}));
+
+jest.mock("@/helpers/heritage-integration/order-helper.js", () => ({
+    saveSession: jest.fn(),
+}));
+
+router.navigateWithoutSaving = jest.fn();
+router.navigateWithSaving = jest.fn();
+
+// Tests
+describe("service-zip.vue", () => {
+    beforeEach(() => {
+        resetMockStoreData();
+        jest.clearAllMocks();
+    });
+
+    describe("Pre-existing fields", () => {
+        test("No existing fields -> serviceZip & emailAdress undefined", () => {
+            // Arrange
+            // no changes to store
+            applyMockStoreDataToGetters();
+
+            // Act
+            const wrapper = setupMocks({});
+
+            // Assert
+            expect(wrapper.vm.serviceZipCode).toBeFalsy();
+            expect(wrapper.vm.emailAddress).toBeFalsy();
+        });
+
+        test("Fields in store -> autofilled to data", () => {
+            // Arrange
+            mockStoreData.serviceLocation.zipCode = "11111";
+            mockStoreData.customer.emailAddress = "builddigitaltest@safelite.com";
+
+            applyMockStoreDataToGetters();
+
+            // Act
+            const wrapper = setupMocks({});
+
+            // Assert
+            expect(wrapper.vm.serviceZipCode).toEqual("11111");
+            expect(wrapper.vm.emailAddress).toEqual("builddigitaltest@safelite.com");
+        });
+
+        test("Zip in querystring -> pushed to data", () => {
+            // Arrange
+            // no changes to store
+            applyMockStoreDataToGetters();
+
+            // Act
+            const wrapper = setupMocks({
+                customZipQuery: "11111",
+            });
+
+            // Assert
+            expect(wrapper.vm.serviceZipCode).toEqual("11111");
+        });
+    });
+
+    describe("Navigation", () => {
+        describe("Back Nav", () => {
+            test("If skipvin eligable, go back to vehicle-damage", async () => {
+                // Arrange
+                mockStoreData.damage.isRepair = true;
+                mockStoreData.damage.numberOfChips = 1;
+                mockStoreData.damage.glassToReplace = null;
+                mockStoreData.lineItems.glassParts = null;
+
+                applyMockStoreDataToGetters();
+
+                // Act
+                const wrapper = setupMocks({});
+                await wrapper.vm.backButtonAction();
+
+                // Assert
+                expect(wrapper.vm.$router.navigateWithoutSaving).toBeCalledWith(
+                    navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN,
+                    wrapper.vm.$route
+                );
+            });
+
+            test("If not skipvin eligable, go back to estimate", async () => {
+                // Arrange
+                // no changes to store
+                applyMockStoreDataToGetters();
+
+                // Act
+                const wrapper = setupMocks({});
+                await wrapper.vm.backButtonAction();
+
+                // Assert
+                expect(wrapper.vm.$router.navigateWithoutSaving).toBeCalledWith(
+                    navigationScenarios.CLICKED_BACK,
+                    wrapper.vm.$route
+                );
+            });
+        });
+
+        describe("Forward Nav", () => {
+            test("Repair skips questions flow", async () => {
+                // Arrange
+                mockStoreData.damage.isRepair = true;
+                mockStoreData.damage.numberOfChips = 1;
+                mockStoreData.damage.glassToReplace = null;
+                mockStoreData.lineItems.glassParts = null;
+
+                applyMockStoreDataToGetters();
+
+                // Act
+                const wrapper = setupMocks({});
+
+                jest.spyOn(wrapper.vm, "navigateForwardWithSingleCarMatch").mockImplementation();
+
+                await wrapper.vm.forwardButtonAction();
+
+                // Assert
+                expect(wrapper.vm.$router.navigateWithSaving).toBeCalledWith(
+                    navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
+                    wrapper.vm.$route
+                );
+                expect(wrapper.vm.navigateForwardWithSingleCarMatch).not.toBeCalled();
+            });
+
+            test("Non-repair enters questions flow", async () => {
+                // Arrange
+                mockStoreData.damage.isRepair = false;
+                applyMockStoreDataToGetters();
+
+                // Act
+                const wrapper = setupMocks({});
+
+                jest.spyOn(wrapper.vm, "navigateForwardWithSingleCarMatch").mockImplementation();
+
+                await wrapper.vm.forwardButtonAction();
+
+                // Assert
+                expect(wrapper.vm.$router.navigateWithSaving).not.toBeCalled();
+                expect(wrapper.vm.navigateForwardWithSingleCarMatch).toBeCalled();
+            });
+        });
+    });
+
+    describe("Alerts", () => {
+        test("Invalid zip alert shown if indicated by endpoint", async () => {
+            // Arrange
+            // no changes to store
+            applyMockStoreDataToGetters();
+            const invalidZipResponse = {
+                state: "OH",
+                zipCodeCtu: "TESTCTU",
+                isValid: false,
+                isServiceable: true,
+            };
+
+            // Act
+            const wrapper = setupMocks({ customZipDataResponse: invalidZipResponse });
+
+            wrapper.vm.$refs.navbar.removeLoader = jest.fn();
+
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.displayInvalidZipAlert).toBe(true);
+        });
+
+        test("Non-serviceable zip alert shown if indicated by endpoint", async () => {
+            // Arrange
+            // no changes to store
+            applyMockStoreDataToGetters();
+            const invalidZipResponse = {
+                state: "OH",
+                zipCodeCtu: "TESTCTU",
+                isValid: true,
+                isServiceable: false,
+            };
+
+            // Act
+            const wrapper = setupMocks({ customZipDataResponse: invalidZipResponse });
+
+            wrapper.vm.$refs.navbar.removeLoader = jest.fn();
+
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.displayNonServiceableZipAlert).toBe(true);
+        });
+
+        test("Alerts cleared when valid zip is submitted", async () => {
+            // Arrange
+            // no changes to store
+            applyMockStoreDataToGetters();
+
+            // Act
+            const wrapper = setupMocks({});
+
+            wrapper.vm.displayInvalidZipAlert = true;
+            wrapper.vm.displayNonServiceableZipAlert = true;
+
+            jest.spyOn(wrapper.vm, "navigateForwardWithSingleCarMatch").mockImplementation();
+
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.displayInvalidZipAlert).toBe(false);
+            expect(wrapper.vm.displayNonServiceableZipAlert).toBe(false);
+        });
+    });
+});
+
+function setupMocks({ customMountOptions, customZipQuery, customZipDataResponse }) {
+    const route = { query: { fmgPage: "service-zip" }, params: {} };
+    if (customZipQuery) {
+        route.query.zipcode = customZipQuery;
+    }
+
+    const mountOptions = getMountOptions({
+        ...customMountOptions,
+        route: route,
+    });
+
+    mountOptions.global.mocks["$store"] = store;
+    mountOptions.global.mocks["$router"] = router;
+    mountOptions.mixins = [
+        {
+            methods: {
+                getCmsContent: jest.fn().mockImplementation((widgetName, fieldName) => {
+                    if (mockCmsContent[widgetName] && mockCmsContent[widgetName][fieldName])
+                        return mockCmsContent[widgetName][fieldName];
+                }),
+                setCmsContent: jest.fn(),
+                navigateForwardWithSingleCarMatch: jest.fn(),
+                getZipCodeData: jest.fn().mockImplementation(() => {
+                    if (customZipDataResponse) {
+                        return customZipDataResponse;
+                    } else {
+                        return {
+                            state: "OH",
+                            zipCodeCtu: "TESTCTU",
+                            isValid: true,
+                            isServiceable: true,
+                        };
+                    }
+                }),
+            },
+        },
+    ];
+
+    const wrapper = shallowMount(serviceZip, mountOptions);
+
+    return wrapper;
+}

src/layouts/service-zip/service-zip.vue

@@ -0,0 +1,282 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid page-container-grouped-styles">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <div>
+                        <textboxQuestion
+                            class="mb-4"
+                            cmsWidgetName="ServiceZipQuestionWidget"
+                            v-model="serviceZipCode"
+                            inputId="serviceZipCode"
+                            mask="#####"
+                            isRequired
+                            validationRules="zip-required|zip-format" />
+
+                        <textboxQuestion
+                            class="mb-0"
+                            cmsWidgetName="EmailAddressQuestionWidget"
+                            v-model="emailAddress"
+                            inputId="emailAddress"
+                            :isRequired="!IsEmailOptional"
+                            disableAutoFill
+                            :validationRules="EmailValidationRules"
+                            :addOptionalText="IsEmailOptional" />
+                        <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
+
+                        <alert
+                            ref="alertInvalidZip"
+                            v-if="displayInvalidZipAlert"
+                            class="my-4"
+                            cmsWidgetName="AlertInvalidZipWidget"
+                            alertClass="alert-danger"
+                            v-bind:isDismissible="false" />
+
+                        <alert
+                            class="my-4"
+                            :manualHeadline="AlertNonServiceableZipHeader"
+                            :manualCopy="AlertNonServiceableZipBody"
+                            v-model="customAlertData"
+                            v-if="displayNonServiceableZipAlert"
+                            alertClass="alert-danger" />
+
+                        <navbar
+                            cmsWidgetName="FunnelFooterWidget"
+                            ref="navbar"
+                            :isForwardActionDisabled="!meta.valid"
+                            @back-clicked="backButtonAction"
+                            @ForwardClicked="forwardButtonAction" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import alert from "@/ux-components/alert/alert";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import textBlock from "@/digital-components/text-block/text-block";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+
+//Supporting Files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import { Form, defineRule } from "vee-validate";
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions";
+import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
+import {
+    skipVinLookup,
+    skipVinLookupNotRepair,
+} from "@/helpers/heritage-integration/navigation-helper";
+import vinPagesMixin from "@/mixins/vin-pages-mixin";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
+import baseMixin from "@/mixins/base-mixin.js";
+import { queryStrings } from "@/constants/query-strings";
+
+// Define Validation Rules
+defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(
+    "email-address-format",
+    regex(
+        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
+        errorMessages.EMAIL_ADDRESS_FORMAT
+    )
+);
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "service-zip",
+    mixins: [vinPagesMixin],
+    data() {
+        return {
+            serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
+            emailAddress: this.getEmailFromStore(),
+            displayInvalidZipAlert: false,
+            displayNonServiceableZipAlert: false,
+        };
+    },
+
+    async beforeRouteEnter(to, from, next) {
+        //Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        //Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    methods: {
+        getZipFromStore() {
+            return store.getters.order.serviceLocation.zipCode;
+        },
+        getEmailFromStore() {
+            return store.getters.order.customer.emailAddress;
+        },
+        arePagePrerequisitesValid() {
+            return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
+        },
+        async backButtonAction() {
+            const skipVin = await skipVinLookup();
+            // route to move backwards
+            if (skipVin) {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN,
+                    this.$route
+                );
+            } else {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK,
+                    this.$route
+                );
+            }
+        },
+        async forwardButtonAction() {
+            const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
+            await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
+            await this.dispatchStoreAction(
+                storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
+                {
+                    zipCode: this.serviceZipCode,
+                    state: zipCodeData.state,
+                    zipCodeCtu: zipCodeData.zipCodeCtu,
+                },
+                false
+            );
+
+            if (!zipCodeData.isValid) {
+                this.displayInvalidZipAlert = true;
+                return this.$refs.navbar.removeLoader();
+            }
+            this.displayInvalidZipAlert = false;
+
+            if (!zipCodeData.isServiceable) {
+                this.displayNonServiceableZipAlert = true;
+                return this.$refs.navbar.removeLoader();
+            }
+            this.displayNonServiceableZipAlert = false;
+
+            const payment = this.$store.getters.payment;
+            const policy = this.$store.getters.policy;
+
+            const vehicleChangedDuringPolicyLookupInHeritage =
+                payment.isInsurance &&
+                payment.insuranceCoverage.coverageStatus &&
+                policy.policyNumber !== "";
+
+            if (vehicleChangedDuringPolicyLookupInHeritage) {
+                navigateToHeritageFunnel({
+                    shouldSaveSession: true,
+                    pageNameToLog: "estimate",
+                });
+            } else if (this.$store.getters.order.referralNumber?.length === 6) {
+                await this.navigateForwardWithSingleCarMatch();
+            } else if (this.isRepair) {
+                const supportingItemsPromise = await this.dispatchStoreActionWithLogging(
+                    storeActions.GET_SUPPORTING_ITEMS,
+                    null,
+                    "estimate"
+                );
+
+                const promiseResultMap = [
+                    {
+                        resultKey: "supportingItems",
+                        promise: supportingItemsPromise,
+                    },
+                ];
+
+                const resultMap = await settleAllPromises(promiseResultMap);
+
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_SUPPORTING_ITEMS,
+                    resultMap.supportingItems,
+                    false
+                );
+
+                // call saveSession here - navigateWithSaving saves too late in the flow
+                await saveSession({ pageNameToLog: "estimate" });
+                return this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
+                    this.$route
+                );
+            } else {
+                // if we're skipping the vin-lookup but it's not a repair, we still need to get the parts
+                await this.navigateForwardWithSingleCarMatch();
+            }
+        },
+    },
+    computed: {
+        AlertNonServiceableZipHeader() {
+            return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll(
+                "{custom:serviceZip}",
+                this.serviceZipCode
+            );
+        },
+        AlertNonServiceableZipBody() {
+            return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
+        },
+        isRepair() {
+            return store.getters.damage.isRepair;
+        },
+    },
+    watch: {
+        serviceZipCode() {
+            this.displayNonServiceableZipAlert = false;
+        },
+    },
+    components: {
+        funnelHeader,
+        vehicleBanner,
+        funnelSubHeader,
+        navbar,
+        Form,
+        alert,
+        textboxQuestion,
+        textBlock,
+        loadingModal,
+    },
+};
+</script>
+
+<style lang="scss">
+.vinlookupquestion p {
+    margin-bottom: 0;
+}
+.vinlookupquestion strong {
+    font-weight: 500;
+    color: $black;
+}
+.vinlookupquestion p:nth-child(2) {
+    font-size: 0.875rem;
+    margin-bottom: 1rem;
+}
+</style>

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -52,6 +52,20 @@ jest.mock("@/store", () => ({
         damage: {
             glassToReplace: [],
         },
+        order: {
+            vehicle: {
+                carId: "C00000000",
+                image: "test.jpg",
+                payment: {
+                    insuranceCoverage: {
+                        isVerified: false,
+                    },
+                },
+            },
+            damage: {
+                glassToReplace: [],
+            },
+        },
     },
 }));
 

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -376,12 +376,12 @@ export default {
                 payment.insuranceCoverage.coverageStatus !== "" &&
                 policy.policyNumber !== "";
 
-            if (vehicleChangedDuringPolicyLookupInHeritage) {
+            const skipVin = await skipVinLookup();
-                const skipVin = await skipVinLookup();
 
+            if (vehicleChangedDuringPolicyLookupInHeritage) {
                 if (skipVin) {
                     this.$router.navigateWithSaving(
-                        this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+                        this.navigationScenarios.CLICKED_FORWARD_WITH_SKIP_VIN,
                         this.$route
                     );
                 } else {
@@ -406,6 +406,11 @@ export default {
                     this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
                     this.$route
                 );
+            } else if (skipVin) {
+                this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_SKIP_VIN,
+                    this.$route
+                );
             } else {
                 this.$router.navigateWithSaving(
                     this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,

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

@@ -9,6 +9,7 @@ const fmgPageValues = {
     CAPABILITY_QUESTIONS: "capability-questions",
     LICENSE_PLATE_LOOKUP: "license-plate-lookup",
     ESTIMATE: "estimate",
+    SERVICE_ZIP: "service-zip",
     ADDRESS_VEHICLES: "address-vehicles",
     QUOTE: "quote",
     INSURANCE_COMPANY: "insurance-company",

src/router/router-constants/navigation-scenarios.js

@@ -15,17 +15,20 @@ const navigationScenarios = {
 
     // Vin selection
     CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN",
+    CLICKED_BACK_WITH_SKIP_VIN: "CLICKED_BACK_WITH_SKIP_VIN",
     CLICKED_FORWARD_WITH_VIN: "CLICKED_FORWARD_WITH_VIN",
     CLICKED_FORWARD_WITH_REPAIR_AND_VERIFIED_INSURANCE:
         "CLICKED_FORWARD_WITH_REPAIR_AND_VERIFIED_INSURANCE",
     CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE:
         "CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE",
     CLICKED_FORWARD_WITHOUT_VIN: "CLICKED_FORWARD_WITHOUT_VIN",
+    CLICKED_FORWARD_WITH_SKIP_VIN: "CLICKED_FORWARD_WITH_SKIP_VIN",
     CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES: "CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES",
     SELECTED_VIN_WITH_MISMATCHED_GLASS: "SELECTED_VIN_WITH_MISMATCHED_GLASS",
     SELECTED_MANUAL_VIN: "SELECTED_MANUAL_VIN",
     SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE",
     SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
+    SELECTED_NO_VIN: "SELECTED_NO_VIN",
     CLICKED_FORWARD_WITH_NO_QUESTIONS: "CLICKED_FORWARD_WITH_NO_QUESTIONS",
     CLICKED_VIN_RETRY: "CLICKED_VIN_RETRY",
 

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

@@ -29,10 +29,14 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
                     destinationFmgPageValue: fmgPageValues.ESTIMATE,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD_WITH_SKIP_VIN,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
+                },
                 {
                     scenario:
                         navigationScenarios.CLICKED_FORWARD_WITH_REPAIR_AND_VERIFIED_INSURANCE,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
                 },
                 {
                     scenario:
@@ -216,6 +220,23 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.SELECTED_HOME_ADDRESS,
                     destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
                 },
+                {
+                    scenario: navigationScenarios.SELECTED_NO_VIN,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
+                },
+            ],
+        },
+        {
+            fmgPageValue: fmgPageValues.SERVICE_ZIP,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN,
+                    destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+                },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
                     destinationFmgPageValue: fmgPageValues.QUOTE,
@@ -251,7 +272,7 @@ const routingTable = function (store) {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
@@ -284,7 +305,7 @@ const routingTable = function (store) {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
@@ -309,7 +330,7 @@ const routingTable = function (store) {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
@@ -338,7 +359,7 @@ const routingTable = function (store) {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
@@ -367,7 +388,7 @@ const routingTable = function (store) {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,