Merge pull request #2601 from Safelite/feature/Digital/CASH-813

CASH-813

src/constants/progress-bar-mapper.js

@@ -15,6 +15,7 @@ const pagePercentageMapper = {
     "insurance-company": 52,
     "service-location": 60,
     schedule: 72,
+    "mobile-details": 76,
     "customer-details": 84,
     "payment-method": 92,
     payment: 96,

src/constants/state-options.js

@@ -0,0 +1,54 @@
+const stateOptions = {
+    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",
+};
+export { stateOptions };

src/constants/store-actions.js

@@ -78,6 +78,7 @@ const storeActions = {
     SAVE_VIN_LOOKUP: "saveVinLookup",
     SAVE_SERVICE_ZIP_CODE_INFO: "saveServiceZipCodeInfo",
     SAVE_SERVICE_LOCATION: "saveServiceLocation",
+    SAVE_MOBILE_DETAILS: "saveMobileDetails",
     SAVE_SCHEDULE: "saveSchedule",
     SAVE_EMAIL: "saveEmail",
     SAVE_PHONE_NUMBER: "savePhoneNumber",

src/constants/store-mutations.js

@@ -38,6 +38,7 @@ const storeMutations = {
 
     UPDATE_SERVICE_ZIP: "updateServiceZip",
     UPDATE_SERVICE_LOCATION: "updateServiceLocation",
+    UPDATE_MOBILE_DETAILS: "updateMobileDetails",
     UPDATE_SERVICE_LOCATION_TECH_NOTES: "updateServiceLocationTechNotes",
     UPDATE_SCHEDULE: "updateSchedule",
 

src/layouts/customer-details/customer-details.vue

@@ -85,6 +85,7 @@ import { Form, defineRule } from "vee-validate";
 import store from "@/store";
 import { paymentMethods } from "@/constants/payment-method-constants";
 import { flushSaveSessionQueue } from "@/helpers/heritage-integration/order-helper";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 
 // DEFINE VALIDATION RULES
 defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@@ -157,11 +158,21 @@ export default {
         getTechNotesFromStore() {
             return store.getters.order.serviceLocation.techNotes;
         },
+        getSelectedAppointmentType() {
+            return store.getters.order.serviceLocation.appointmentType;
+        },
         backButtonAction() {
-            this.$router.navigateWithoutSaving(
+            if (this.getSelectedAppointmentType() == AppointmentTypeStrings.MOBILE) {
-                this.navigationScenarios.CLICKED_BACK,
+                this.$router.navigateWithoutSaving(
-                this.pageName
+                    this.navigationScenarios.CLICKED_BACK_WITH_MOBILE_SERVICE,
-            );
+                    this.pageName
+                );
+            } else {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK,
+                    this.pageName
+                );
+            }
         },
         async forwardButtonAction() {
             this.dispatchStoreAction(

src/layouts/mobile-details/mobile-address-questions/mobile-address-questions.spec.js

@@ -0,0 +1,198 @@
+// Components
+import mobileAddressQuestions from "@/layouts/mobile-details/mobile-address-questions/mobile-address-questions.vue";
+
+// Supporting Files
+import { mount, shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { storeMutations } from "@/constants/store-mutations";
+import store from "@/store";
+
+describe("initial state", () => {
+    test("Should show all the address field", () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+
+        // Assert
+        const streetAddressField = wrapper.findComponent({ ref: "streetAddress" });
+        const cityField = wrapper.findComponent({ ref: "city" });
+        const stateField = wrapper.findComponent({ ref: "state" });
+        const zipCodeField = wrapper.findComponent({ ref: "zipCode" });
+
+        expect(streetAddressField.exists()).toBe(true);
+        expect(streetAddressField.isVisible()).toBe(true);
+        expect(cityField.exists()).toBe(true);
+        expect(cityField.isVisible()).toBe(true);
+        expect(stateField.exists()).toBe(true);
+        expect(stateField.isVisible()).toBe(true);
+        expect(zipCodeField.exists()).toBe(true);
+        expect(zipCodeField.isVisible()).toBe(true);
+    });
+
+    test("Should render mobileAddressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({});
+
+        // Act
+        const streetAddress = wrapper.findComponent({ ref: "streetAddress" });
+        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);
+    });
+
+    test("Should render apartmentNumberOrBusinessName textbox-question when captureApartmentNumberOrBusinessName = true", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({
+            props: {
+                modelValue: {
+                    streetAddress: "",
+                    apartmentNumberOrBusinessName: "",
+                    city: "",
+                    state: "",
+                    zipCode: "",
+                },
+                captureApartmentNumberOrBusinessName: true,
+            },
+        });
+
+        // Act
+        const streetAddress = wrapper.findComponent({ ref: "streetAddress" });
+        const apartmentNumberOrBusinessName = wrapper.findComponent({
+            ref: "apartmentNumberOrBusinessName",
+        });
+        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(apartmentNumberOrBusinessName.exists()).toBe(true);
+        expect(apartmentNumberOrBusinessName.isVisible()).toBe(true);
+        expect(city.exists()).toBe(true);
+        expect(state.exists()).toBe(true);
+        expect(zipCode.exists()).toBe(true);
+    });
+
+    test("Should *not* render apartmentNumberOrBusinessName textbox-question when captureApartmentNumberOrBusinessName = false", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({
+            props: {
+                modelValue: {
+                    streetAddress: "",
+                    apartmentNumberOrBusinessName: "",
+                    city: "",
+                    state: "",
+                    zipCode: "",
+                },
+                captureApartmentNumberOrBusinessName: false,
+            },
+        });
+
+        // Act
+        const streetAddress = wrapper.findComponent({ ref: "streetAddress" });
+        const apartmentNumberOrBusinessName = wrapper.findComponent({
+            ref: "apartmentNumberOrBusinessName",
+        });
+        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(apartmentNumberOrBusinessName.exists()).toBe(true);
+        expect(apartmentNumberOrBusinessName.isVisible()).toBe(false);
+        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();
+    });
+});
+
+function setupMocks({
+    mountOptions,
+    props,
+    isShallowMount = true,
+    querySelectorFunction,
+    geocoderResult = ["1234 Test Street"],
+    matchFound = false,
+}) {
+    store.commit(storeMutations.RESET_STATE);
+
+    const resultingMountOptions = getMountOptions({
+        ...mountOptions,
+        router: {
+            navigate: jest.fn(),
+            navigate: jest.fn(),
+        },
+        loadScript: jest.fn().mockResolvedValue(),
+    });
+
+    if (props) resultingMountOptions.propsData = props;
+
+    if (isShallowMount) {
+        resultingMountOptions.global.stubs = {
+            ...(resultingMountOptions.global.stubs ?? {}),
+            textboxQuestion: {
+                template: `<span></span>`,
+                methods: {
+                    handleChange: jest.fn(),
+                },
+            },
+            dropdownQuestion: {
+                template: `<span></span>`,
+                methods: {
+                    handleChange: jest.fn(),
+                },
+            },
+        };
+    }
+
+    const wrapper = isShallowMount
+        ? shallowMount(mobileAddressQuestions, resultingMountOptions)
+        : mount(mobileAddressQuestions, 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/mobile-details/mobile-address-questions/mobile-address-questions.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="address-questions">
+        <div class="row mb-4" aria-live="polite">
+            <div class="col">
+                <!-- Temporarily changing id from autocomplete to streetAddress -->
+                <textboxQuestion
+                    customInputId="streetAddress"
+                    cmsWidgetName="StreetAddressQuestionWidget"
+                    v-model="addressModel.streetAddress"
+                    validationRules="street-address-required"
+                    ref="streetAddress"
+                    :labelBold="labelBold"
+                    autocomplete="streetAddress" />
+            </div>
+        </div>
+        <transition name="fade" mode="out-in">
+            <div
+                class="row mb-4"
+                v-show="showApartmentNumberOrBusinessNameField"
+                aria-live="polite">
+                <div class="col">
+                    <textboxQuestion
+                        customInputId="apartmentNumberOrBusinessName"
+                        cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
+                        v-model="addressModel.apartmentNumberOrBusinessName"
+                        ref="apartmentNumberOrBusinessName"
+                        :labelBold="labelBold" />
+                </div>
+            </div>
+        </transition>
+        <transition name="fade" mode="out-in">
+            <div class="row mb-4" aria-live="polite">
+                <div class="col">
+                    <textboxQuestion
+                        customInputId="city"
+                        cmsWidgetName="CityQuestionWidget"
+                        v-model="addressModel.city"
+                        ref="city"
+                        validationRules="city-required"
+                        autocomplete="address-level2"
+                        :labelBold="labelBold" />
+                </div>
+            </div>
+        </transition>
+        <transition name="fade" mode="out-in">
+            <div class="row mb-4" aria-live="polite">
+                <div class="col">
+                    <dropdownQuestion
+                        customDropdownId="state"
+                        cmsWidgetName="StateQuestionWidget"
+                        v-model="addressModel.state"
+                        ref="state"
+                        :options="stateOptions"
+                        validationRules="state-required"
+                        autocomplete="address-level1"
+                        :labelBold="labelBold"
+                        :isDisabled="this.isStateDisabled" />
+                </div>
+                <div class="col">
+                    <textboxQuestion
+                        customInputId="zipCode"
+                        cmsWidgetName="ZipQuestionWidget"
+                        v-model="addressModel.zipCode"
+                        ref="zipCode"
+                        mask="#####"
+                        validationRules="zip-code-required|zip-code-format"
+                        autocomplete="postal-code"
+                        :labelBold="labelBold"
+                        :isDisabled="this.isZipCodeDisabled" />
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
+import { defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import { stateOptions } from "@/constants/state-options";
+
+// 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: "mobile-address-questions",
+    emits: ["update:modelValue"], // The component emits an event
+
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({
+                streetAddress: "",
+                apartmentNumberOrBusinessName: "",
+                city: "",
+                state: "",
+                zipCode: "",
+            }),
+        },
+        validationRules: String,
+        captureApartmentNumberOrBusinessName: {
+            type: Boolean,
+            default: false,
+        },
+        preserveCityAndStateOnReset: {
+            type: Boolean,
+            default: false,
+        },
+        labelBold: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        isStateDisabled: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        isZipCodeDisabled: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    computed: {
+        stateOptions() {
+            return stateOptions;
+        },
+        addressModel: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        showApartmentNumberOrBusinessNameField: {
+            get: function () {
+                return this.captureApartmentNumberOrBusinessName;
+            },
+        },
+    },
+
+    components: {
+        textboxQuestion,
+        dropdownQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.address-questions {
+    margin-top: 0.5rem;
+}
+
+#streetAddressField {
+    position: relative;
+
+    .pac-container {
+        top: 76px !important; // Height of #streetAddressField
+        left: 0 !important;
+    }
+}
+</style>

src/layouts/mobile-details/mobile-details.spec.js

@@ -0,0 +1,139 @@
+import mobileDetails from "@/layouts/mobile-details/mobile-details.vue";
+import { mount, shallowMount } from "@vue/test-utils";
+import { storeActions } from "@/constants/store-actions";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+const linkWidgetName = "linkWidgetName";
+const modalWidgetName = "modalWidgetName";
+
+const mockLinkCmsContent = {
+    BodyText: "Sample link body text here.",
+};
+
+const mockModalCmsContent = {
+    FooterText: "Sample modal footer text here.",
+};
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            if (widgetName === linkWidgetName) {
+                return mockLinkCmsContent[cmsFieldName];
+            }
+
+            if (widgetName === modalWidgetName) {
+                return mockModalCmsContent[cmsFieldName];
+            }
+
+            return null;
+        }),
+        dispatchStoreAction: jest.fn((actionName) => {
+            if (actionName === storeActions.SAVE_MOBILE_DETAILS) {
+                return true;
+            }
+        }),
+    },
+};
+
+beforeEach(() => {
+    store.getters = {
+        order: {
+            serviceLocation: {
+                zipCode: "43235",
+                zipCodeCtu: "00000",
+                state: "OH",
+                appointmentType: "Mobile",
+                city: "Columbus",
+                address: "123 Main St",
+                address2: "Suite 100",
+                isVehicleProtected: true,
+            },
+            schedule: {
+                date: "2023-10-10",
+                endTime: "14:00",
+                startTime: "13:00",
+                routeCode: "R1",
+                jobMaxMinutes: "60",
+                jobMinMinutes: "30",
+            },
+        },
+        payment: {
+            isInsurance: false,
+        },
+    };
+});
+
+describe("mobile-details.vue", () => {
+    test("if the continue button is clicked, navigate forward", async () => {
+        // Arrange
+        const { wrapper } = setupMocks(mobileDetails, {
+            mixins: [mockMixin],
+            attachTo: document.body,
+        });
+
+        wrapper.setData({
+            addressQuestions: {
+                streetAddress: "Test Street",
+                apartmentNumberOrBusinessName: "Test Apartment",
+                city: "Test City",
+                state: "TS",
+                zipCode: "12345",
+            },
+            isVehicleProtected: true,
+        });
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert
+        expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
+    });
+    test("arePagePrerequisitesValid should be true ", async () => {
+        //Arrange
+        const { wrapper } = setupMocks(mobileDetails, {
+            mixins: [mockMixin],
+            attachTo: document.body,
+        });
+
+        //Act
+        let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+        //Assert
+        expect(arePagePrerequisitesValid).toBe(true);
+    });
+
+    test("if the back button is clicked, navigate back", async () => {
+        // Arrange
+        const { wrapper } = setupMocks(mobileDetails, {
+            mixins: [mockMixin],
+            attachTo: document.body,
+        });
+
+        // Act
+        await wrapper.vm.backButtonAction();
+
+        // Assert
+        expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
+    });
+});
+
+function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
+    const resultingMountOptions = getMountOptions({
+        ...mountOptions,
+        mixins,
+        router: {
+            navigate: jest.fn(),
+            navigateWithSaving: jest.fn(),
+            navigateWithoutSaving: jest.fn(),
+        },
+    });
+
+    if (props) resultingMountOptions.propsData = props;
+    resultingMountOptions["attachTo"] = document.body;
+    const wrapper = isShallowMount
+        ? shallowMount(mobileDetails, resultingMountOptions)
+        : mount(mobileDetails, resultingMountOptions);
+
+    return { wrapper };
+}

src/layouts/mobile-details/mobile-details.vue

@@ -0,0 +1,168 @@
+<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 mt-4">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                    <div class="mobile-location-questions">
+                        <div class="address-questions-container">
+                            <mobileAddressQuestions
+                                ref="addressQuestions"
+                                v-model="this.addressQuestions"
+                                captureApartmentNumberOrBusinessName="true"
+                                preserveCityAndStateOnReset="true"
+                                labelBold="true"
+                                isStateDisabled="true"
+                                isZipCodeDisabled="true" />
+                            <vehicleProtectedQuestion
+                                ref="vehicleProtectedQuestion"
+                                v-model="this.isVehicleProtected"
+                                cmsWidgetName="VehicleProtectedQuestionWidget"
+                                labelBold="true" />
+                            <textBlock
+                                cmsWidgetName="WorkspaceRequirementsWidget"
+                                typeStyle="caption" />
+                            <navbar
+                                cmsWidgetName="FunnelFooterWidget"
+                                ref="navbar"
+                                :isForwardActionDisabled="!meta.valid"
+                                @back-clicked="backButtonAction"
+                                @ForwardClicked="forwardButtonAction" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
+//Components
+import textBlock from "@/digital-components/text-block/text-block";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { Form } from "vee-validate";
+import mobileAddressQuestions from "@/layouts/mobile-details/mobile-address-questions/mobile-address-questions";
+import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
+import store from "@/store";
+//Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+export default {
+    name: "MobileDetails",
+    data() {
+        return {
+            addressQuestions: {
+                streetAddress: this.getServiceAddressFromStore(),
+                apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
+                city: this.getServiceCityFromStore(),
+                state: this.getServiceStateFromStore(),
+                zipCode: this.getServiceZipCodeFromStore(),
+            },
+            isVehicleProtected: this.getIsVehicleProtectedFromStore(),
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.name);
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            const serviceLocation = store.getters.order.serviceLocation;
+            const serviceLocationPreReqs =
+                serviceLocation.zipCode &&
+                serviceLocation.zipCodeCtu &&
+                serviceLocation.appointmentType &&
+                serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
+
+            // Schedule
+            const schedule = store.getters.order.schedule;
+            const scheduleReqs = !!(
+                schedule.date &&
+                schedule.startTime &&
+                schedule.endTime &&
+                schedule.jobMaxMinutes &&
+                schedule.jobMinMinutes
+            );
+
+            const preReqResult = serviceLocationPreReqs && scheduleReqs;
+            return preReqResult;
+        },
+        getServiceAddressFromStore() {
+            return store.getters.order.serviceLocation.address;
+        },
+        getServiceAddress2FromStore() {
+            return store.getters.order.serviceLocation.address2;
+        },
+        getServiceCityFromStore() {
+            return store.getters.order.serviceLocation.city;
+        },
+        getServiceStateFromStore() {
+            return store.getters.order.serviceLocation.state;
+        },
+        getServiceZipCodeFromStore() {
+            return store.getters.order.serviceLocation.zipCode;
+        },
+        getIsVehicleProtectedFromStore() {
+            return store.getters.order.serviceLocation.isVehicleProtected;
+        },
+        async forwardButtonAction() {
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_MOBILE_DETAILS,
+                {
+                    address: this.addressQuestions.streetAddress,
+                    address2: this.addressQuestions.apartmentNumberOrBusinessName,
+                    city: this.addressQuestions.city,
+                    isVehicleProtected: this.isVehicleProtected,
+                },
+                false
+            );
+            this.$router.navigateWithSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.pageName
+            );
+        },
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+    },
+    computed: {
+        headerText() {
+            return this.getCmsContent("MobileLocationModalWidget", "HeaderText");
+        },
+    },
+    components: {
+        mobileAddressQuestions,
+        vehicleProtectedQuestion,
+        textBlock,
+        funnelHeader,
+        navbar,
+        funnelSubHeader,
+        Form,
+        loadingModal,
+    },
+};
+</script>

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

@@ -314,57 +314,6 @@ describe("service-location.vue", () => {
             expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeQuestion);
         });
 
-        test("resets mobile location when service zip code is updated", () => {
-            // Arrange
-            const { wrapper } = setupMocks({});
-
-            const mobileLocationQuestionsComponent = wrapper.findComponent({
-                ref: "mobileLocationQuestions",
-            });
-            mobileLocationQuestionsComponent.resetComponent = jest.fn();
-
-            const serviceZipCodeComponent = wrapper.findComponent({
-                ref: "serviceZipCodeQuestion",
-            });
-            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
-
-            const newServiceZipCodeQuestion = {
-                zipCode: "61606",
-                state: "IL",
-                zipCodeCtu: "01526",
-            };
-
-            const mobileLocationQuestions = {
-                addressQuestions: {
-                    streetAddress: "5555 Sulgrave Dr",
-                    apartmentNumberOrBusinessName: "Apt 1",
-                    city: "New Albany",
-                    state: "OH",
-                    zipCode: "43054",
-                },
-                isVehicleProtected: true,
-            };
-            wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
-
-            const newMobileLocationQuestions = {
-                addressQuestions: {
-                    streetAddress: "",
-                    apartmentNumberOrBusinessName: "",
-                    city: "",
-                    state: "IL",
-                    zipCode: "61606",
-                },
-                isVehicleProtected: null,
-                isMobileSelected: false,
-            };
-
-            // Act
-            serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
-
-            // Assert
-            expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
-        });
-
         test("resets appointment type selection when service zip code is updated by service zip modal", () => {
             // Arrange
             const { wrapper } = setupMocks({});
@@ -424,190 +373,6 @@ describe("service-location.vue", () => {
         });
     });
 
-    describe("updating mobile location", () => {
-        test("updates the page model after providing the mobile location", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({});
-
-            await wrapper.setData({
-                shopProviderData: {
-                    mobileProviderNumber: "001820",
-                },
-                selectedAppointmentType: "Mobile",
-                providerData: { mobileProviderNumber: "01820" },
-                isGlassServiceableMobile: true,
-            });
-
-            const mobileLocationQuestionsComponent = wrapper.findComponent({
-                ref: "mobileLocationQuestions",
-            });
-            mobileLocationQuestionsComponent.resetComponent = jest.fn();
-
-            const serviceZipCodeComponent = wrapper.findComponent({
-                ref: "serviceZipCodeQuestion",
-            });
-            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
-            wrapper.vm.forwardButtonAction = jest.fn();
-
-            const mobileLocationQuestions = {
-                addressQuestions: {
-                    streetAddress: "",
-                    apartmentNumberOrBusinessName: "",
-                    city: "",
-                    state: "",
-                    zipCode: "",
-                },
-                isVehicleProtected: null,
-            };
-            wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
-            const newMobileLocationQuestions = {
-                addressQuestions: {
-                    streetAddress: "5555 Sulgrave Dr",
-                    apartmentNumberOrBusinessName: "Apt 1",
-                    city: "New Albany",
-                    state: "OH",
-                    zipCode: "43054",
-                },
-                isVehicleProtected: true,
-                isMobileSelected: true,
-            };
-
-            // Act
-
-            // Trigger the event
-            await mobileLocationQuestionsComponent.vm.$emit(
-                "setMobileLocation",
-                newMobileLocationQuestions
-            );
-
-            await wrapper.vm.$nextTick(); // Wait for DOM updates
-
-            // Assert
-            expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
-        });
-
-        test("resets service zip code when mobile location is updated", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({});
-
-            await wrapper.setData({
-                shopProviderData: {
-                    mobileProviderNumber: "001820",
-                },
-                selectedAppointmentType: "Mobile",
-                providerData: { mobileProviderNumber: "01820" },
-                isGlassServiceableMobile: true,
-            });
-
-            const mobileLocationQuestionsComponent = wrapper.findComponent({
-                ref: "mobileLocationQuestions",
-            });
-            mobileLocationQuestionsComponent.resetComponent = jest.fn();
-
-            const serviceZipCodeComponent = wrapper.findComponent({
-                ref: "serviceZipCodeQuestion",
-            });
-            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
-            wrapper.vm.forwardButtonAction = jest.fn();
-            const mobileLocationQuestions = {
-                addressQuestions: {
-                    streetAddress: "",
-                    apartmentNumberOrBusinessName: "",
-                    city: "",
-                    state: "",
-                    zipCode: "",
-                },
-                isVehicleProtected: null,
-                isMobileSelectedAndModalClosed: false,
-                mobileFeePart: null,
-            };
-            wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
-
-            const newMobileLocationQuestions = {
-                addressQuestions: {
-                    streetAddress: "5555 Rustic Dr",
-                    apartmentNumberOrBusinessName: "Apt 1",
-                    city: "Westerville",
-                    state: "OH",
-                    zipCode: "43081",
-                },
-                isVehicleProtected: true,
-                isMobileSelectedAndModalClosed: true,
-                mobileFeePart: null,
-            };
-
-            wrapper.vm.serviceZipCodeQuestion = {
-                zipCode: "61606",
-                state: "IL",
-                zipCodeCtu: "01526",
-            };
-
-            const newServiceZipCodeInfo = {
-                state: "OH",
-                zipCode: "43081",
-                zipCodeCtu: "01526",
-            };
-
-            wrapper.vm.closeModalAction = jest.fn();
-            // Act
-
-            // Trigger the event
-            await mobileLocationQuestionsComponent.vm.$emit(
-                "setMobileLocation",
-                newMobileLocationQuestions
-            );
-
-            await wrapper.vm.$nextTick(); // Wait for DOM updates
-
-            // Assert
-            expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo);
-        });
-
-        test("does not reset appointment type selection when service zip code is updated by mobile location modal when Mobile is selected", async () => {
-            // Arrange
-            const { wrapper } = setupMocks({});
-
-            await wrapper.setData({
-                shopProviderData: {
-                    mobileProviderNumber: "001820",
-                },
-                selectedAppointmentType: "Mobile",
-                providerData: { mobileProviderNumber: "01820" },
-            });
-
-            const mobileLocationQuestionsComponent = wrapper.findComponent({
-                ref: "mobileLocationQuestions",
-            });
-            mobileLocationQuestionsComponent.resetComponent = jest.fn();
-            wrapper.vm.forwardButtonAction = jest.fn();
-            wrapper.vm.isServiceableMobile = true;
-
-            const serviceZipCodeComponent = wrapper.findComponent({
-                ref: "serviceZipCodeQuestion",
-            });
-            serviceZipCodeComponent.resetMobileFeePart = jest.fn();
-
-            const mobileLocationQuestions = {
-                addressQuestions: {
-                    streetAddress: "555 Some Street",
-                    apartmentNumberOrBusinessName: "",
-                    city: "Westerville",
-                    state: "OH",
-                    zipCode: "43081",
-                },
-                isVehicleProtected: "YesAnswer",
-                isMobileSelectedAndModalClosed: true,
-            };
-
-            wrapper.vm.closeModalAction = jest.fn();
-            // Act
-            mobileLocationQuestionsComponent.vm.$emit("setMobileLocation", mobileLocationQuestions);
-
-            // Assert
-            expect(wrapper.vm.selectedAppointmentType).toStrictEqual("Mobile");
-        });
-    });
-
     describe("serviceability logic", () => {
         describe("should be logical AND when recalibration is defined.", () => {
             test("T & T => T", async () => {
@@ -1434,8 +1199,5 @@ function setupMocks({ mountOptionsMockData = {} }) {
     const mountOptions = getMountOptions(mountOptionsMockData);
     const wrapper = shallowMount(serviceLocation, mountOptions);
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
-    wrapper.vm.$refs.mobileLocationQuestions.isMobileAddressComplete = jest.fn();
-    wrapper.vm.$refs.mobileLocationQuestions.resetAlerts = jest.fn();
-    wrapper.vm.$refs.mobileLocationQuestions.openModal = jest.fn();
     return { wrapper, apiPromise };
 }

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

@@ -89,24 +89,14 @@
             </div>
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
-                    <mobileLocationModalQuestions
+                    <div class="text-center">
-                        customComponentId="mobileLocationQuestions"
+                        <textBlock
-                        v-show="selectedAppointmentType === 'Mobile'"
+                            v-if="mobileFeeApplies && isMobileSelected"
-                        v-model="mobileLocationQuestions"
+                            :customText="mobileFeeText"
-                        :mobileFeePart="mobileFeePart"
+                            cmsWidgetName="MobileFeeDisclaimerWidget"
-                        :mobileFeeApplies="mobileFeeApplies"
+                            typeStyle="caption"
-                        @updated-mobile-fee-part="setMobileFeePart"
+                            class="ps-4 pe-4 mt-4" />
-                        @updated-recycle-fee-part="setRecycleFeePart"
+                    </div>
-                        @updated-serviceability="setServiceabilityDetails"
-                        @updated-contains-military-base="setContainsMilitaryBase"
-                        @updated-mobile-ctu="setCtuForMobile"
-                        validationRules="mobile-location-required"
-                        ref="mobileLocationQuestions"
-                        linkWidgetName="MobileLocationLinkWidget"
-                        modalWidgetName="MobileLocationModalWidget"
-                        @setMobileLocation="setMobileLocationQuestions"
-                        @set-mobile-location-invalid="setMobileLocationInValid" />
-
                     <shopQuestion
                         ref="shopQuestion"
                         v-show="isShopQuestionDisplayed"
@@ -134,7 +124,6 @@
 // Components
 import alert from "@/ux-components/alert/alert";
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
-import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
 import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
 import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
 
@@ -144,6 +133,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form } from "vee-validate";
 import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
+import textBlock from "@/digital-components/text-block/text-block";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -301,20 +291,8 @@ export default {
                 this.$nextTick();
             },
         },
-        mobileLocationQuestions: {
+        isMobileSelected() {
-            get: function () {
+            return this.selectedAppointmentType == AppointmentTypeStrings.MOBILE;
-                return {
-                    addressQuestions: {
-                        streetAddress: this.streetAddress,
-                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
-                        city: this.city,
-                        state: this.state,
-                        zipCode: this.zipCode,
-                    },
-                    isVehicleProtected: this.isVehicleProtected,
-                    isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
-                };
-            },
         },
         isServiceableMobile() {
             if (this.isRecalibrationServiceableMobile !== null) {
@@ -357,6 +335,20 @@ export default {
                 return this.mobileFeeHasPrice;
             }
         },
+        mobileFeeText() {
+            const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
+            return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
+        },
+        mobileFee() {
+            if (!this.mobileFeePart) {
+                return 0;
+            }
+            return (
+                this.mobileFeePart.laborAmount +
+                this.mobileFeePart.sellingPrice +
+                this.mobileFeePart.kitPrice
+            );
+        },
         showMobileFreeAlert() {
             if (this.isServiceableMobile && !this.isInsurance && !this.mobileFeeHasPrice) {
                 return true;
@@ -516,32 +508,6 @@ export default {
         setRecycleFeePart(recycleFeePart) {
             this.recycleFeePart = recycleFeePart;
         },
-        //creating async function as the computed property can not directly handle asynchronous operations or promises.
-        async setMobileLocationQuestions(newValue) {
-            var newZipCode = newValue.addressQuestions.zipCode;
-            if (newZipCode !== this.zipCode) {
-                await getShopProviderData(newZipCode).then((result) => {
-                    if (this.isServiceableMobile) {
-                        this.shopProviderData = result.data;
-                        this.selectedProvider = new Provider(
-                            this.shopProviderData.mobileProviderNumber
-                        );
-                    }
-                });
-            }
-            if (this.isServiceableMobile) {
-                this.setMobileLocation(newValue);
-                this.setMobileLocationInValid(false);
-            } else {
-                await getZipCodeData(newZipCode).then((zipCodeData) => {
-                    this.serviceZipCodeQuestion = {
-                        state: zipCodeData.state,
-                        zipCode: newZipCode,
-                        zipCodeCtu: zipCodeData.zipCodeCtu,
-                    };
-                });
-            }
-        },
         getCarIdfromStore() {
             return store.getters.vehicle.carId;
         },
@@ -590,15 +556,6 @@ export default {
             this.isRecalibrationServiceableMobile =
                 serviceabilityDetails.isRecalibrationServiceableMobile;
         },
-        setMobileLocation(mobileLocation) {
-            this.streetAddress = mobileLocation.addressQuestions.streetAddress;
-            this.apartmentNumberOrBusinessName =
-                mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
-            this.city = mobileLocation.addressQuestions.city;
-            this.state = mobileLocation.addressQuestions.state;
-            this.zipCode = mobileLocation.addressQuestions.zipCode;
-            this.isVehicleProtected = mobileLocation.isVehicleProtected;
-        },
         async reloadShopData(zipCode) {
             await this.$refs.shopQuestion.reloadShopData(zipCode);
         },
@@ -755,13 +712,49 @@ export default {
 
             this.updateAndSaveSupportingItems();
             this.updateAndSaveIsMSRFeeApplicable();
-            this.$router.navigateWithSaving(
+
-                this.navigationScenarios.CLICKED_FORWARD,
+            //mocked schedule and should be clear when implement schedule page.
-                this.pageName
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_SCHEDULE,
+                this.getTimeSlotInfo(),
+                false
             );
+
+            if (this.selectedAppointmentType == AppointmentTypeStrings.MOBILE) {
+                //navigate to mobile details page
+                this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
+                    this.pageName
+                );
+            } else {
+                this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+            }
         },
-        setMobileLocationInValid(isMobileLocationInValid) {
+        getTimeSlotInfo() {
-            this.isMobileAddressValid = !isMobileLocationInValid;
+            // Get the current date
+            const currentDate = new Date();
+
+            // Add 10 days to the current date
+            currentDate.setDate(currentDate.getDate() + 10);
+
+            // Format the date as yyyy-mm-dd
+            const year = currentDate.getFullYear();
+            const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+            const day = String(currentDate.getDate()).padStart(2, "0");
+
+            const formattedDate = `${year}-${month}-${day}`;
+
+            return {
+                date: formattedDate,
+                endTime: "12:00",
+                jobMaxMinutes: "180",
+                jobMinMinutes: "120",
+                routeCode: "3357I-03357-M-I*20988*AM",
+                startTime: "08:00",
+            };
         },
     },
     watch: {
@@ -787,16 +780,6 @@ export default {
                     this.selectedProvider = new Provider(
                         this.shopProviderData.mobileProviderNumber
                     );
-                    if (this.zipCode == this.getServiceZipCodeFromStore()) {
-                        //restore mobile address from store in case user make changes to address but not commit it.
-                        this.streetAddress = this.getServiceAddressFromStore();
-                        this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
-                        this.city = this.getServiceCityFromStore();
-                        this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
-                    } else {
-                        this.resetMobileLocation();
-                    }
-                    this.$refs.mobileLocationQuestions.resetAlerts();
                 } else {
                     this.selectedProvider = new Provider();
                 }
@@ -807,7 +790,6 @@ export default {
         alert,
         serviceZipModalQuestion,
         appointmentTypeQuestion,
-        mobileLocationModalQuestions,
         funnelHeader,
         navbar,
         funnelSubHeader,
@@ -815,6 +797,7 @@ export default {
         loadingModal,
         contentGroupModal,
         shopQuestion,
+        textBlock,
     },
 };
 </script>

src/router/constants/navigation-scenarios.js

@@ -49,6 +49,12 @@ const navigationScenarios = {
     // Insurance-Company
     CLICKED_PAY_ON_MY_OWN: "CLICKED_PAY_ON_MY_OWN",
 
+    //Service-Location
+    CLICKED_FORWARD_WITH_MOBILE_SERVICE: "CLICKED_FORWARD_WITH_MOBILE_SERVICE",
+
+    //Customer-details
+    CLICKED_BACK_WITH_MOBILE_SERVICE: "CLICKED_BACK_WITH_MOBILE_SERVICE",
+
     // Schedule
     CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION",
 

src/router/constants/routes.js

@@ -68,6 +68,10 @@ export const routeData = {
         name: "schedule",
         path: "/schedule",
     },
+    MOBILE_DETAILS: {
+        name: "mobile-details",
+        path: "/mobile-details",
+    },
     CUSTOMER_DETAILS: {
         name: "customer-details",
         path: "/customer-details",

src/router/constants/routing-table.js

@@ -460,6 +460,10 @@ const routingTable = function () {
                     scenario: navigationScenarios.CLICKED_FORWARD,
                     destinationPageData: routeData.SCHEDULE,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
+                    destinationPageData: routeData.MOBILE_DETAILS,
+                },
             ],
         },
         {
@@ -479,6 +483,19 @@ const routingTable = function () {
                 },
             ],
         },
+        {
+            pageName: routeData.MOBILE_DETAILS.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.SERVICE_LOCATION,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.CUSTOMER_DETAILS,
+                },
+            ],
+        },
         {
             pageName: routeData.CUSTOMER_DETAILS.name,
             maps: [
@@ -486,6 +503,10 @@ const routingTable = function () {
                     scenario: navigationScenarios.CLICKED_BACK,
                     destinationPageData: routeData.SCHEDULE,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_BACK_WITH_MOBILE_SERVICE,
+                    destinationPageData: routeData.MOBILE_DETAILS,
+                },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD,
                     destinationPageData: routeData.PAYMENT_METHOD,

src/router/methods/routes.js

@@ -37,6 +37,7 @@ export const routes = [
     createRoute(routeData.PAYMENT_PIA_RETURN),
     createRoute(routeData.CONFIRMATION),
     createRoute(routeData.RETURN_USER),
+    createRoute(routeData.MOBILE_DETAILS),
 
     // Virtual pages (resolve to a non-virtual page.)
     createVirtualRoute(routeData.LANDING, landingBeforeEnter),

src/store/index.js

@@ -421,6 +421,12 @@ export const mutations = {
             },
         };
     },
+    updateMobileDetails(state, mobileDetails) {
+        state.order.serviceLocation.address = mobileDetails.address;
+        state.order.serviceLocation.address2 = mobileDetails.address2;
+        state.order.serviceLocation.city = mobileDetails.city;
+        state.order.serviceLocation.isVehicleProtected = mobileDetails.isVehicleProtected;
+    },
     updateServiceLocationTechNotes(state, techNotes) {
         state.order.serviceLocation.techNotes = techNotes;
     },
@@ -3204,6 +3210,9 @@ export const actions = {
 
         context.commit(storeMutations.UPDATE_SERVICE_LOCATION, serviceLocationInfo);
     },
+    saveMobileDetails(context, mobileDetails) {
+        context.commit(storeMutations.UPDATE_MOBILE_DETAILS, mobileDetails);
+    },
 
     saveServiceLocationTechNotes(context, techNotesInfo) {
         context.commit(storeMutations.UPDATE_SERVICE_LOCATION_TECH_NOTES, techNotesInfo);