CASH-502

remove mobilelocation modal

src/digital-components/base-input-button/button-functionality-props.js

@@ -35,4 +35,9 @@ export const inputButtonProps = {
         default: false,
     },
     suppressError: Boolean,
+    labelBold: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
 };

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

@@ -9,7 +9,9 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
             v-if="questionText && answers && answers.length > 0"
             class="question-text d-flex"
             :class="{ 'small-question-text': isSmallQuestionText }">
-            <span class="fw-bold w-100">{{ questionText }}</span>
+            <span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']">
+                {{ questionText }}
+            </span>
         </div>
 
         <div class="w-100 d-flex justify-content-center">
@@ -57,6 +59,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                             :setLastValuePushedToGa="setLastValuePushedToGa"
                             :isInsuranceSelected="isInsuranceSelected"
                             :suppressError="suppressError"
+                            :labelBold="labelBold"
                             @buttonEvent="handleButtonEvent"
                             v-model="selectedValues" />
                         <!-- For nested questions -->
@@ -141,6 +144,11 @@ export default {
             default: false,
         },
         isInsuranceSelected: Boolean,
+        labelBold: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
@@ -360,6 +368,9 @@ export default {
     & > span {
         text-align: center;
     }
+    .span-bold {
+        font-weight: 600;
+    }
 }
 .small-question-text {
     &.question-text {

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

@@ -6,6 +6,7 @@
             :for="dropdownId"
             :aria-label="questionText"
             class="form-label"
+            :class="[labelBold ? 'label-bold' : '']"
             v-html="questionText"></label>
         <select
             v-model="selectedOption"
@@ -61,6 +62,11 @@ export default {
             required: false,
             default: false,
         },
+        labelBold: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     setup(props) {
         const uuid = uuidv4();
@@ -133,6 +139,10 @@ export default {
         color: $black;
         font-weight: 500;
     }
+    .label-bold {
+        color: $black;
+        font-weight: 600;
+    }
     .form-label {
         margin-bottom: 0.25rem;
     }

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

@@ -13,6 +13,7 @@
             :class="[
                 questionAlignment === 'center' ? 'text-center w-100 mb-5' : '',
                 hideInput ? 'hide-input' : '',
+                labelBold ? 'label-bold' : '',
             ]"
             v-html="questionText"></label>
         <div
@@ -132,6 +133,11 @@ export default {
             isRequired: false,
         },
         autocomplete: String,
+        labelBold: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     setup(props) {
         const uuid = uuidv4();
@@ -251,6 +257,9 @@ export default {
         color: $black;
         font-weight: 500;
     }
+    .label-bold {
+        font-weight: 600;
+    }
     .input-wrapper {
         position: relative;
         &.has-search-icon {

src/fmg-components/address-questions/address-questions.vue

@@ -14,7 +14,8 @@
                     hasIcon
                     validationRules="street-address-required"
                     autocomplete="street-address"
-                    @keydown.enter.prevent />
+                    @keydown.enter.prevent
+                    :labelBold="labelBold" />
             </div>
         </div>
         <transition name="fade" mode="out-in">
@@ -27,7 +28,8 @@
                         customInputId="apartmentNumberOrBusinessName"
                         cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
                         v-model="addressModel.apartmentNumberOrBusinessName"
-                        ref="apartmentNumberOrBusinessName" />
+                        ref="apartmentNumberOrBusinessName"
+                        :labelBold="labelBold" />
                 </div>
             </div>
         </transition>
@@ -40,7 +42,8 @@
                         v-model="addressModel.city"
                         ref="city"
                         validationRules="city-required"
-                        autocomplete="address-level2" />
+                        autocomplete="address-level2"
+                        :labelBold="labelBold" />
                 </div>
             </div>
         </transition>
@@ -54,7 +57,8 @@
                         ref="state"
                         :options="stateOptions"
                         validationRules="state-required"
-                        autocomplete="address-level1" />
+                        autocomplete="address-level1"
+                        :labelBold="labelBold" />
                 </div>
                 <div class="col">
                     <textboxQuestion
@@ -64,7 +68,8 @@
                         ref="zipCode"
                         mask="#####"
                         validationRules="zip-code-required|zip-code-format"
-                        autocomplete="postal-code" />
+                        autocomplete="postal-code"
+                        :labelBold="labelBold" />
                 </div>
             </div>
         </transition>
@@ -124,6 +129,11 @@ export default {
             type: Boolean,
             default: false,
         },
+        labelBold: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     data() {
         return {

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

@@ -11,7 +11,8 @@
                 v-model="selectedValue"
                 :suppressError="suppressError"
                 :validationRules="validationRules"
-                isRequired />
+                isRequired
+                :labelBold="labelBold" />
         </div>
     </transition>
 </template>
@@ -33,6 +34,11 @@ export default {
         isServiceableMobile: Boolean,
         isServiceableInshop: Boolean,
         mobileFeeApplies: Boolean,
+        labelBold: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     computed: {
         questionText() {

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js

@@ -189,41 +189,7 @@ describe("mobile-location-modal-questions.vue", () => {
         expect(wrapper.vm.internalModel.serviceZipCode).toEqual("55555");
     });
 
-    it("Should open the modal when the 'Enter your service address' link is clicked", async () => {
+    it("Should emit setMobileLocation on setMobileLocation for a valid address and vehicle protection answer", async () => {
-        // Arrange
-        const mobileLocationQuestions = {
-            addressQuestions: {
-                streetAddress: "555 Some St",
-                apartmentNumberOrBusinessName: "Apt 1",
-                city: "Funkytown",
-                state: "OH",
-                zipCode: "55555",
-            },
-            isVehicleProtected: true,
-            serviceZipCode: "55555",
-        };
-
-        const { wrapper } = setupMocks({
-            mixins: [mockMixin],
-            props: {
-                modelValue: mobileLocationQuestions,
-            },
-            mountOptions: {
-                attachTo: document.body,
-            },
-        });
-
-        wrapper.vm.$refs.MobileLocationModalWidget.openModal = jest.fn();
-        const mobileLocationLink = wrapper.findComponent({ ref: "mobileLocationLink" });
-
-        // // Act
-        await mobileLocationLink.trigger("click-event");
-
-        // // Assert
-        expect(wrapper.vm.$refs.MobileLocationModalWidget.openModal).toHaveBeenCalled();
-    });
-
-    it("Should emit setMobileLocationAndProceed on setMobileLocation for a valid address and vehicle protection answer", async () => {
         // Arrange
         const mobileLocationQuestions = {
             addressQuestions: {
@@ -258,7 +224,6 @@ describe("mobile-location-modal-questions.vue", () => {
             },
             attachTo: document.body,
         });
-        wrapper.vm.$refs.MobileLocationModalWidget.closeModal = jest.fn();
 
         // Act
         wrapper.vm.internalModel = newMobileLocationQuestions;
@@ -266,13 +231,13 @@ describe("mobile-location-modal-questions.vue", () => {
         await wrapper.vm.setMobileLocation();
 
         // Assert
-        expect(wrapper.emitted()["setMobileLocationAndProceed"]).toBeTruthy();
+        expect(wrapper.emitted()["setMobileLocation"]).toBeTruthy();
-        expect(wrapper.emitted()["setMobileLocationAndProceed"][0][0]).toStrictEqual(
+        expect(wrapper.emitted()["setMobileLocation"][0][0]).toStrictEqual(
             newMobileLocationQuestions
         );
     });
 
-    it("Should not emit setMobileLocationAndProceed on setMobileLocation for an invalid address zip code", async () => {
+    it("Should not emit setMobileLocation on setMobileLocation for an invalid address zip code", async () => {
         // Arrange
         const mobileLocationQuestions = {
             addressQuestions: {
@@ -307,15 +272,13 @@ describe("mobile-location-modal-questions.vue", () => {
             },
             attachTo: document.body,
         });
-        wrapper.vm.$refs.MobileLocationModalWidget.closeModal = jest.fn();
-        wrapper.vm.resetModalButtonStyle = jest.fn();
 
         // Act
         wrapper.vm.internalModel = newMobileLocationQuestions;
         await wrapper.vm.setMobileLocation();
 
         // Assert
-        expect(wrapper.emitted("setMobileLocationAndProceed")).not.toBeTruthy();
+        expect(wrapper.emitted("setMobileLocation")).not.toBeTruthy();
     });
 
     it("Should display invalid zip alert for invalid address zip inputs", async () => {

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

@@ -14,7 +14,7 @@
                         linkType="text"
                         :text="mobileLocationLinkText"
                         href="#!"
-                        @click-event="openModal" />
+                        @click-event="toggleMobileLocation" />
                 </div>
                 <div v-show="errorMessage" class="row my-1 form-test-error">
                     <span
@@ -30,24 +30,19 @@
                     cmsWidgetName="MobileFeeDisclaimerWidget"
                     typeStyle="caption" />
             </div>
-            <modal
+            <div v-if="isMobileLocationOpened" class="address-questions-container">
-                :ref="modalName"
+                <div v-html="headerText" class="HeaderText" />
-                :headerText="modalHeaderText"
-                :footerButtonText="modalFooterText"
-                :onModalOpenedCallback="onModalOpened"
-                :onModalClosedCallback="onModalClosed"
-                @isModalOpened="setModalStatus"
-                @footer-button-event="setMobileLocation">
-                <template v-if="isModalOpened">
                 <addressQuestions
                     ref="addressQuestions"
                     v-model="internalModel.addressQuestions"
                     captureApartmentNumberOrBusinessName="true"
-                        preserveCityAndStateOnReset="true" />
+                    preserveCityAndStateOnReset="true"
+                    labelBold="true" />
                 <vehicleProtectedQuestion
                     ref="vehicleProtectedQuestion"
                     v-model="internalModel.isVehicleProtected"
-                        cmsWidgetName="VehicleProtectedQuestionWidget" />
+                    cmsWidgetName="VehicleProtectedQuestionWidget"
+                    labelBold="true" />
                 <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
                 <alert
                     ref="alertInvalidZip"
@@ -63,17 +58,14 @@
                     cmsWidgetName="AlertMismatchStateAndZipWidget"
                     alertClass="alert-danger"
                     v-bind:isDismissible="false" />
-                </template>
+            </div>
-            </modal>
         </div>
     </transition>
 </template>
-
 <script>
 // Components
 import textLink from "@/ux-components/text-link/text-link";
 import textBlock from "@/digital-components/text-block/text-block";
-import modal from "@/digital-components/modal/modal";
 import alert from "@/ux-components/alert/alert";
 import addressQuestions from "@/fmg-components/address-questions/address-questions";
 import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
@@ -98,13 +90,14 @@ export default {
         "updated-mobile-fee-part",
         "updated-contains-military-base",
         "updated-bill-to-account-number",
-        "setMobileLocationAndProceed",
+        "setMobileLocation",
+        "set-mobile-location-invalid",
     ],
     data() {
         return {
             internalModel: deepClone(this.modelValue),
             displayInvalidZipAlert: false,
-            isModalOpened: false,
+            isMobileLocationOpened: false,
             displayMismatchStateAndZipAlert: false,
         };
     },
@@ -199,43 +192,33 @@ export default {
                 this.mobileFeePart.kitPrice
             );
         },
-        modalName() {
+        headerText() {
-            return "MobileLocationModalWidget";
-        },
-        modalHeaderText() {
             return this.getCmsContent(this.modalWidgetName, "HeaderText");
         },
-        modalFooterText() {
-            return this.getCmsContent(this.modalWidgetName, "FooterText");
-        },
-        modal() {
-            return this.$refs[this.modalName];
-        },
         addressModel: {
             get: function () {
                 return this.modelValue.addressQuestions;
             },
         },
+        isMobileAddressAvailable: {
+            get: function () {
+                return (
+                    this.addressModel.streetAddress &&
+                    this.addressModel.streetAddress !== "" &&
+                    this.addressModel.city &&
+                    this.addressModel.city !== "" &&
+                    this.addressModel.state &&
+                    this.addressModel.state !== "" &&
+                    this.addressModel.zipCode &&
+                    this.addressModel.zipCode !== "" &&
+                    this.internalModel.isVehicleProtected !== null
+                );
+            },
+        },
     },
     methods: {
-        openModal() {
+        setMobileLocationInvalid(isFormInvalid) {
-            this.modal.openModal();
+            this.$emit("set-mobile-location-invalid", isFormInvalid);
-        },
-        onModalOpened() {
-            this.internalModel = deepClone(this.modelValue);
-        },
-        setModalStatus(isOpened) {
-            this.isModalOpened = isOpened;
-        },
-        closeModal() {
-            this.modal.closeModal();
-        },
-        onModalClosed() {
-            this.resetAlerts();
-            this.internalModel = deepClone(this.modelValue);
-        },
-        resetModalButtonStyle() {
-            this.modal.resetButtonStyle();
         },
         resetAlerts() {
             this.displayInvalidZipAlert = false;
@@ -244,6 +227,10 @@ export default {
         async setMobileLocation() {
             this.resetAlerts();
             // Validate the Zip Code
+            if (this.internalModel.addressQuestions.zipCode === "") {
+                this.setMobileLocationInvalid(true);
+                return;
+            }
             const zipCodeData = await this.getZipCodeData(
                 this.internalModel.addressQuestions.zipCode,
                 "service-location"
@@ -251,11 +238,11 @@ export default {
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
-                this.resetModalButtonStyle();
+                this.setMobileLocationInvalid(true);
                 return;
             } else if (zipCodeData.state != this.internalModel.addressQuestions.state) {
                 this.displayMismatchStateAndZipAlert = true;
-                this.resetModalButtonStyle();
+                this.setMobileLocationInvalid(true);
                 return;
             } else if (
                 this.internalModel.addressQuestions.zipCode !==
@@ -294,27 +281,27 @@ export default {
                 this.$emit("updated-bill-to-account-number", billToAccountNumber);
             }
             // update the page level model
-            this.$emit("setMobileLocationAndProceed", this.internalModel);
+            this.$emit("setMobileLocation", this.internalModel);
+            this.setMobileLocationInvalid(false);
+        },
+        toggleMobileLocation() {
+            this.isMobileLocationOpened = !this.isMobileLocationOpened;
         },
     },
     watch: {
-        modelValue: {
+        internalModel: {
             handler(newValue) {
-                this.internalModel = deepClone(newValue);
                 this.handleChange(newValue);
+                this.setMobileLocation();
             },
             deep: true,
         },
     },
-    unmounted() {
-        if (this.isModalOpened) this.closeModal();
-    },
     components: {
-        textLink,
-        modal,
         addressQuestions,
         vehicleProtectedQuestion,
         textBlock,
+        textLink,
         alert,
     },
 };
@@ -325,9 +312,8 @@ export default {
     .center-error-message {
         justify-content: center !important;
     }
-}
 
-.update-zip-text-link::before {
+    .update-zip-text-link::before {
         content: "";
         display: inline-block;
         width: 13px;
@@ -336,17 +322,24 @@ export default {
         background-size: contain;
         vertical-align: middle;
         margin-right: 0.5em;
-}
+    }
 
-.address-questions {
+    .update-mobile-location-text-link {
-    margin-top: 0em;
-}
-
-.update-mobile-location-text-link {
         white-space: pre-line;
-}
+    }
+    .address-questions-container {
+        margin-top: 1rem;
+    }
 
-.text-black {
+    .text-black {
         color: $black;
+    }
+    .HeaderText {
+        font-size: 1rem;
+        font-weight: 600;
+        line-height: 1.625rem;
+        color: $black;
+        text-align: center;
+    }
 }
 </style>

src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue

@@ -7,7 +7,8 @@
         textPosition="text-center"
         v-model="selectedValue"
         validationRules="option-required"
-        isRequired />
+        isRequired
+        :labelBold="labelBold" />
 </template>
 
 <script>
@@ -27,6 +28,11 @@ export default {
             isVehicleProtected: Boolean,
         },
         cmsWidgetName: String,
+        labelBold: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     components: {
         buttonQuestion,

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

@@ -470,12 +470,12 @@ describe("service-location.vue", () => {
                 isVehicleProtected: true,
             };
 
-            wrapper.vm.closeModalAction = jest.fn();
+            //wrapper.vm.closeModalAction = jest.fn();
             // Act
 
             // Trigger the event
             await mobileLocationQuestionsComponent.vm.$emit(
-                "setMobileLocationAndProceed",
+                "setMobileLocation",
                 newMobileLocationQuestions
             );
 
@@ -550,7 +550,7 @@ describe("service-location.vue", () => {
 
             // Trigger the event
             await mobileLocationQuestionsComponent.vm.$emit(
-                "setMobileLocationAndProceed",
+                "setMobileLocation",
                 newMobileLocationQuestions
             );
 
@@ -597,10 +597,7 @@ describe("service-location.vue", () => {
 
             wrapper.vm.closeModalAction = jest.fn();
             // Act
-            mobileLocationQuestionsComponent.vm.$emit(
+            mobileLocationQuestionsComponent.vm.$emit("setMobileLocation", mobileLocationQuestions);
-                "setMobileLocationAndProceed",
-                mobileLocationQuestions
-            );
 
             // Assert
             expect(wrapper.vm.selectedAppointmentType).toStrictEqual("Mobile");

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

@@ -81,7 +81,8 @@
                         ref="appointmentTypeQuestion"
                         groupName="appointmentTypeQuestion"
                         cmsWidgetName="AppointmentTypeQuestionWidget"
-                        validationRules="option-required" />
+                        validationRules="option-required"
+                        labelBold="true" />
                 </div>
             </div>
             <div class="row justify-content-center">
@@ -101,7 +102,8 @@
                         ref="mobileLocationQuestions"
                         linkWidgetName="MobileLocationLinkWidget"
                         modalWidgetName="MobileLocationModalWidget"
-                        @setMobileLocationAndProceed="setMobileLocationQuestions" />
+                        @setMobileLocation="setMobileLocationQuestions"
+                        @set-mobile-location-invalid="setMobileLocationInValid" />
 
                     <shopQuestion
                         ref="shopQuestion"
@@ -117,7 +119,7 @@
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
-                        :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
+                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
@@ -207,6 +209,7 @@ export default {
             billToAccountNumber: null,
             shopProviderData: null,
             navigatingForward: false,
+            isMobileAddressValid: true,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -403,6 +406,9 @@ export default {
         isNoComp() {
             return store.getters.order.policy.isNoComp;
         },
+        isForwardActionDisabled() {
+            return this.displayNoShopsAlert || !this.isMobileAddressValid;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -505,10 +511,7 @@ export default {
             }
             if (this.isServiceableMobile) {
                 this.setMobileLocation(newValue);
-                //proceed to next page
-                this.forwardButtonAction();
             } else {
-                this.closeModalAction("mobileLocationQuestions");
                 await getZipCodeData(newZipCode).then((zipCodeData) => {
                     this.serviceZipCodeQuestion = {
                         state: zipCodeData.state,
@@ -673,7 +676,7 @@ export default {
         },
         async forwardButtonAction() {
             this.navigatingForward = true;
-
+            var ctu = this.zipCodeCtu;
             if (
                 this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
                 this.selectedProvider &&
@@ -684,18 +687,13 @@ export default {
                 this.selectedProvider.address.state = null;
                 this.selectedProvider.address.zipCode = null;
                 this.selectedProvider.address.zipCodeCtu = null;
-            }
+            } else {
-
-            var ctu = this.zipCodeCtu;
-            if (this.selectedAppointmentType == AppointmentTypeStrings.IN_SHOP) {
                 // if we have a provider.zipCodeCtu that's different than the servicelocation.zipCodeCtu then they
                 // may have selected a shop in a different ctu.  change the servicelocation zip/ctu if different
                 if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
                     ctu = this.selectedProvider.address.zipCodeCtu;
                 }
-
+                this.resetMobileLocation();
-                this.city = null;
-                this.streetAddress = null;
             }
 
             await this.dispatchStoreAction(
@@ -735,11 +733,8 @@ export default {
             this.updateAndSaveIsMSRFeeApplicable();
             this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         },
-        openModalAction(modalName) {
+        setMobileLocationInValid(isMobileLocationInValid) {
-            this.$refs[modalName].openModal();
+            this.isMobileAddressValid = !isMobileLocationInValid;
-        },
-        closeModalAction(modalName) {
-            this.$refs[modalName].closeModal();
         },
     },
     watch: {

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

@@ -341,7 +341,7 @@ export default {
                     false
                 );
                 if (this.isHeavyTruck) {
-                    closestShops = await this.findClosestApplicableShops(
+                    var closestShops = await this.findClosestApplicableShops(
                         this.serviceZipCode,
                         this.carId
                     );

src/ux-components/list-button/list-button.vue

@@ -6,7 +6,7 @@
         <div
             :aria-label="buttonLabel"
             class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
-            <span class="m-0" :class="textPosition">
+            <span class="m-0" :class="[textPosition, labelBold ? 'span-bold' : '']">
                 {{ buttonLabel }}
             </span>
             <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
@@ -88,6 +88,9 @@ export default {
         &:checked + .list-button-content span {
             font-weight: 500;
         }
+        &:checked + .list-button-content .span-bold {
+            font-weight: 600;
+        }
         &:checked + .list-button-content span:nth-child(2) {
             font-weight: 400;
             color: $gray-600;

src/ux-components/list-card/list-card.vue

@@ -15,7 +15,10 @@
                 :class="!isWide ? 'order-1' : 'ms-auto order-3'"
                 :src="buttonImage"
                 :alt="altText" />
-            <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
+            <p
+                v-if="!isWide"
+                class="small order-3"
+                :class="[isMultiSelect ? 'm-0' : 'mt-2 mb-0', labelBold ? 'p-bold' : '']">
                 {{ buttonLabel }}
             </p>
             <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
@@ -122,6 +125,9 @@ export default {
                 color: $black;
                 font-weight: 500;
             }
+            .p-bold {
+                font-weight: 600;
+            }
 
             .sub-copy {
                 color: $gray-600;