From 8a653eed30c3d9b32a4535f061d20b96c46061ec Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Wed, 30 Apr 2025 20:10:30 +0530
Subject: [PATCH 1/4] CASH-502

remove mobilelocation modal
---
 .../button-functionality-props.js             |   5 +
 .../button-question/button-question.vue       |  13 +-
 .../dropdown-question/dropdown-question.vue   |  10 +
 .../textbox-question/textbox-question.vue     |   9 +
 .../address-questions/address-questions.vue   |  20 +-
 .../appointment-type-question.vue             |   8 +-
 .../mobile-location-modal-questions.spec.js   |  47 +----
 .../mobile-location-modal-questions.vue       | 189 +++++++++---------
 .../vehicle-protected-question.vue            |   8 +-
 .../service-location/service-location.spec.js |  11 +-
 .../service-location/service-location.vue     |  33 ++-
 src/layouts/vin-lookup/vin-lookup.vue         |   2 +-
 src/ux-components/list-button/list-button.vue |   5 +-
 src/ux-components/list-card/list-card.vue     |   8 +-
 14 files changed, 191 insertions(+), 177 deletions(-)

diff --git a/src/digital-components/base-input-button/button-functionality-props.js b/src/digital-components/base-input-button/button-functionality-props.js
index fe2104457..73da5f25c 100644
--- a/src/digital-components/base-input-button/button-functionality-props.js
+++ b/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,
+    },
 };
diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 53f71eb9b..dcf1b18c1 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/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 {
diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue
index 8b3cf023f..7b52745fa 100644
--- a/src/digital-components/dropdown-question/dropdown-question.vue
+++ b/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;
     }
diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index e6d75fee1..9602daadb 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/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 {
diff --git a/src/fmg-components/address-questions/address-questions.vue b/src/fmg-components/address-questions/address-questions.vue
index 6256bedd1..4e4cf6b56 100644
--- a/src/fmg-components/address-questions/address-questions.vue
+++ b/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 {
diff --git a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
index 64bf159ff..37fdfaf16 100644
--- a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue
+++ b/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() {
diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js
index 3e2873fa1..49d233402 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js
+++ b/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 () => {
-        // 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 () => {
+    it("Should emit setMobileLocation 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()["setMobileLocationAndProceed"][0][0]).toStrictEqual(
+        expect(wrapper.emitted()["setMobileLocation"]).toBeTruthy();
+        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 () => {
diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index 0d7a82248..f4764a7d9 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/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,50 +30,42 @@
                     cmsWidgetName="MobileFeeDisclaimerWidget"
                     typeStyle="caption" />
             </div>
-            <modal
-                :ref="modalName"
-                :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" />
-                    <vehicleProtectedQuestion
-                        ref="vehicleProtectedQuestion"
-                        v-model="internalModel.isVehicleProtected"
-                        cmsWidgetName="VehicleProtectedQuestionWidget" />
-                    <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
-                    <alert
-                        ref="alertInvalidZip"
-                        v-if="displayInvalidZipAlert"
-                        class="my-4"
-                        cmsWidgetName="AlertInvalidZipWidget"
-                        alertClass="alert-danger"
-                        v-bind:isDismissible="false" />
-                    <alert
-                        ref="alertMismatchStateAndZip"
-                        v-if="displayMismatchStateAndZipAlert"
-                        class="my-4"
-                        cmsWidgetName="AlertMismatchStateAndZipWidget"
-                        alertClass="alert-danger"
-                        v-bind:isDismissible="false" />
-                </template>
-            </modal>
+            <div v-if="isMobileLocationOpened" class="address-questions-container">
+                <div v-html="headerText" class="HeaderText" />
+                <addressQuestions
+                    ref="addressQuestions"
+                    v-model="internalModel.addressQuestions"
+                    captureApartmentNumberOrBusinessName="true"
+                    preserveCityAndStateOnReset="true"
+                    labelBold="true" />
+                <vehicleProtectedQuestion
+                    ref="vehicleProtectedQuestion"
+                    v-model="internalModel.isVehicleProtected"
+                    cmsWidgetName="VehicleProtectedQuestionWidget"
+                    labelBold="true" />
+                <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
+                <alert
+                    ref="alertInvalidZip"
+                    v-if="displayInvalidZipAlert"
+                    class="my-4"
+                    cmsWidgetName="AlertInvalidZipWidget"
+                    alertClass="alert-danger"
+                    v-bind:isDismissible="false" />
+                <alert
+                    ref="alertMismatchStateAndZip"
+                    v-if="displayMismatchStateAndZipAlert"
+                    class="my-4"
+                    cmsWidgetName="AlertMismatchStateAndZipWidget"
+                    alertClass="alert-danger"
+                    v-bind:isDismissible="false" />
+            </div>
         </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() {
-            return "MobileLocationModalWidget";
-        },
-        modalHeaderText() {
+        headerText() {
             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() {
-            this.modal.openModal();
-        },
-        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();
+        setMobileLocationInvalid(isFormInvalid) {
+            this.$emit("set-mobile-location-invalid", isFormInvalid);
         },
         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,28 +312,34 @@ export default {
     .center-error-message {
         justify-content: center !important;
     }
-}
 
-.update-zip-text-link::before {
-    content: "";
-    display: inline-block;
-    width: 13px;
-    height: 16px;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.49635 1.00142e-07C5.64734 -0.000153295 4.80722 0.175918 4.0274 0.517444C3.24757 0.858969 2.54443 1.35877 1.96099 1.98626C0.765713 3.27588 0.0999756 4.98141 0.0999756 6.75394C0.0999756 8.52646 0.765713 10.232 1.96099 11.5216L5.98324 15.777C6.04954 15.8475 6.12918 15.9036 6.21736 15.9419C6.30555 15.9802 6.40045 16 6.49635 16C6.59225 16 6.68716 15.9802 6.77534 15.9419C6.86353 15.9036 6.94317 15.8475 7.00946 15.777L11.0317 11.52C12.2391 10.2383 12.909 8.52914 12.8999 6.75394C12.9094 4.97818 12.2394 3.26832 11.0317 1.98626C10.4481 1.35899 9.74493 0.859347 8.96514 0.517839C8.18535 0.176331 7.34532 0.000130509 6.49635 1.00142e-07V1.00142e-07ZM6.49635 9.13131C6.02507 9.13131 5.56437 8.98913 5.17251 8.72275C4.78065 8.45637 4.47524 8.07776 4.29488 7.63479C4.11453 7.19181 4.06734 6.70438 4.15928 6.23412C4.25123 5.76387 4.47817 5.33191 4.81142 4.99287C5.14467 4.65384 5.56925 4.42295 6.03148 4.32941C6.49371 4.23587 6.97282 4.28388 7.40823 4.46736C7.84364 4.65085 8.21579 4.96157 8.47762 5.36023C8.73945 5.7589 8.87921 6.2276 8.87921 6.70707C8.87921 7.34974 8.62837 7.96611 8.18185 8.4207C7.73532 8.87528 7.12964 9.13088 6.49794 9.13131H6.49635Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-    background-size: contain;
-    vertical-align: middle;
-    margin-right: 0.5em;
-}
+    .update-zip-text-link::before {
+        content: "";
+        display: inline-block;
+        width: 13px;
+        height: 16px;
+        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.49635 1.00142e-07C5.64734 -0.000153295 4.80722 0.175918 4.0274 0.517444C3.24757 0.858969 2.54443 1.35877 1.96099 1.98626C0.765713 3.27588 0.0999756 4.98141 0.0999756 6.75394C0.0999756 8.52646 0.765713 10.232 1.96099 11.5216L5.98324 15.777C6.04954 15.8475 6.12918 15.9036 6.21736 15.9419C6.30555 15.9802 6.40045 16 6.49635 16C6.59225 16 6.68716 15.9802 6.77534 15.9419C6.86353 15.9036 6.94317 15.8475 7.00946 15.777L11.0317 11.52C12.2391 10.2383 12.909 8.52914 12.8999 6.75394C12.9094 4.97818 12.2394 3.26832 11.0317 1.98626C10.4481 1.35899 9.74493 0.859347 8.96514 0.517839C8.18535 0.176331 7.34532 0.000130509 6.49635 1.00142e-07V1.00142e-07ZM6.49635 9.13131C6.02507 9.13131 5.56437 8.98913 5.17251 8.72275C4.78065 8.45637 4.47524 8.07776 4.29488 7.63479C4.11453 7.19181 4.06734 6.70438 4.15928 6.23412C4.25123 5.76387 4.47817 5.33191 4.81142 4.99287C5.14467 4.65384 5.56925 4.42295 6.03148 4.32941C6.49371 4.23587 6.97282 4.28388 7.40823 4.46736C7.84364 4.65085 8.21579 4.96157 8.47762 5.36023C8.73945 5.7589 8.87921 6.2276 8.87921 6.70707C8.87921 7.34974 8.62837 7.96611 8.18185 8.4207C7.73532 8.87528 7.12964 9.13088 6.49794 9.13131H6.49635Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+        background-size: contain;
+        vertical-align: middle;
+        margin-right: 0.5em;
+    }
 
-.address-questions {
-    margin-top: 0em;
-}
+    .update-mobile-location-text-link {
+        white-space: pre-line;
+    }
+    .address-questions-container {
+        margin-top: 1rem;
+    }
 
-.update-mobile-location-text-link {
-    white-space: pre-line;
-}
-
-.text-black {
-    color: $black;
+    .text-black {
+        color: $black;
+    }
+    .HeaderText {
+        font-size: 1rem;
+        font-weight: 600;
+        line-height: 1.625rem;
+        color: $black;
+        text-align: center;
+    }
 }
 </style>
diff --git a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
index c1484500b..ce0f7ed53 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
+++ b/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,
diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
index 7dccc1b1e..9e9b0eefb 100644
--- a/src/layouts/service-location/service-location.spec.js
+++ b/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(
-                "setMobileLocationAndProceed",
-                mobileLocationQuestions
-            );
+            mobileLocationQuestionsComponent.vm.$emit("setMobileLocation", mobileLocationQuestions);
 
             // Assert
             expect(wrapper.vm.selectedAppointmentType).toStrictEqual("Mobile");
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index a85a5bd17..232c03057 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/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;
-            }
-
-            var ctu = this.zipCodeCtu;
-            if (this.selectedAppointmentType == AppointmentTypeStrings.IN_SHOP) {
+            } else {
                 // 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.city = null;
-                this.streetAddress = null;
+                this.resetMobileLocation();
             }
 
             await this.dispatchStoreAction(
@@ -735,11 +733,8 @@ export default {
             this.updateAndSaveIsMSRFeeApplicable();
             this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         },
-        openModalAction(modalName) {
-            this.$refs[modalName].openModal();
-        },
-        closeModalAction(modalName) {
-            this.$refs[modalName].closeModal();
+        setMobileLocationInValid(isMobileLocationInValid) {
+            this.isMobileAddressValid = !isMobileLocationInValid;
         },
     },
     watch: {
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 1b57ee068..fbab8eeae 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/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
                     );
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index d31f20e5d..fa06970ac 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/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;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 56cb1482e..d03be4675 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/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;

From 911a1f0e12d8935bbf1336e4ce56b0ea36e9ed71 Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Sun, 11 May 2025 12:08:24 +0530
Subject: [PATCH 2/4] CASH-502

open mobile address when click on mobile option
---
 .../mobile-location-modal-questions.vue       | 41 +++++++++++++++----
 .../service-location/service-location.spec.js |  4 --
 .../service-location/service-location.vue     | 29 +++++--------
 3 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index b28fdc7e8..fc83f041a 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -58,8 +58,9 @@
                     cmsWidgetName="AlertMismatchStateAndZipWidget"
                     alertClass="alert-danger"
                     v-bind:isDismissible="false" />
-            </div>                
-    </div>
+            </div>
+        </div>
+    </transition>
 </template>
 <script>
 // Components
@@ -90,8 +91,7 @@ export default {
         "updated-contains-military-base",
         "updated-bill-to-account-number",
         "setMobileLocation",
-        "set-mobile-location-invalid",        
-        "updated-modal-opened",
+        "set-mobile-location-invalid",
     ],
     data() {
         return {
@@ -208,10 +208,28 @@ export default {
         },
     },
     methods: {
+        isMobileAddressComplete() {
+            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
+            );
+        },
+        getIsMobleLocationOpened() {
+            if (this.isServiceAddressFromStoreAvailable) {
+                return false;
+            }
+            return true;
+        },
         setMobileLocationInvalid(isFormInvalid) {
             this.$emit("set-mobile-location-invalid", isFormInvalid);
-            }
-
+        },
         resetAlerts() {
             this.displayInvalidZipAlert = false;
             this.displayMismatchStateAndZipAlert = false;
@@ -282,12 +300,19 @@ export default {
     },
     watch: {
         internalModel: {
-            handler(newValue) {
-                this.handleChange(newValue);
+            handler() {
                 this.setMobileLocation();
             },
             deep: true,
         },
+
+        modelValue: {
+            handler(newValue) {
+                this.internalModel = deepClone(newValue);
+                this.handleChange(newValue);
+            },
+            deep: true,
+        },
     },
     components: {
         addressQuestions,
diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
index 6b108abb0..24030fb1f 100644
--- a/src/layouts/service-location/service-location.spec.js
+++ b/src/layouts/service-location/service-location.spec.js
@@ -343,7 +343,6 @@ describe("service-location.vue", () => {
                     zipCode: "43054",
                 },
                 isVehicleProtected: true,
-                isMobileSelectedAndModalClosed: true,
             };
             wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
 
@@ -356,7 +355,6 @@ describe("service-location.vue", () => {
                     zipCode: "61606",
                 },
                 isVehicleProtected: null,
-                isMobileSelectedAndModalClosed: false,
             };
 
             // Act
@@ -459,7 +457,6 @@ describe("service-location.vue", () => {
                     zipCode: "",
                 },
                 isVehicleProtected: null,
-                isMobileSelectedAndModalClosed: false,
             };
             wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
             const newMobileLocationQuestions = {
@@ -471,7 +468,6 @@ describe("service-location.vue", () => {
                     zipCode: "43054",
                 },
                 isVehicleProtected: true,
-                isMobileSelectedAndModalClosed: true,
             };
 
             //wrapper.vm.closeModalAction = jest.fn();
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 0f435e4af..17ee9aac3 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -100,7 +100,6 @@
                         @updated-serviceability="setServiceabilityDetails"
                         @updated-contains-military-base="setContainsMilitaryBase"
                         @updated-mobile-ctu="setCtuForMobile"
-                        @updated-modal-opened="setMobileLocationModalOpened"
                         validationRules="mobile-location-required"
                         ref="mobileLocationQuestions"
                         linkWidgetName="MobileLocationLinkWidget"
@@ -123,7 +122,7 @@
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
-                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled || mobileLocationModalOpened"
+                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
@@ -177,12 +176,11 @@ const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
 // DEFINE VALIDATION RULES
 defineRule("mobile-location-required", (value) => {
     if (
-        value.isMobileSelectedAndModalClosed &&
-        (!value.addressQuestions.streetAddress ||
-            !value.addressQuestions.city ||
-            !value.addressQuestions.state ||
-            !value.addressQuestions.zipCode ||
-            !value.isVehicleProtected)
+        !value.addressQuestions.streetAddress ||
+        !value.addressQuestions.city ||
+        !value.addressQuestions.state ||
+        !value.addressQuestions.zipCode ||
+        !value.isVehicleProtected
     ) {
         return errorMessages.MOBILE_LOCATION_REQUIRED;
     }
@@ -217,7 +215,6 @@ export default {
             shopProviderData: null,
             navigatingForward: false,
             isMobileAddressValid: true,
-            mobileLocationModalOpened: false,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -308,9 +305,6 @@ export default {
                         zipCode: this.zipCode,
                     },
                     isVehicleProtected: this.isVehicleProtected,
-                    isMobileSelectedAndModalClosed:
-                        this.selectedAppointmentType === "Mobile" &&
-                        !this.mobileLocationModalOpened,
                 };
             },
         },
@@ -514,9 +508,6 @@ export default {
         setRecycleFeePart(recycleFeePart) {
             this.recycleFeePart = recycleFeePart;
         },
-        setMobileLocationModalOpened(isModalOpened) {
-            this.mobileLocationModalOpened = isModalOpened;
-        },
         //creating async function as the computed property can not directly handle asynchronous operations or promises.
         async setMobileLocationQuestions(newValue) {
             var newZipCode = newValue.addressQuestions.zipCode;
@@ -784,9 +775,11 @@ export default {
                     this.selectedProvider = new Provider(
                         this.shopProviderData.mobileProviderNumber
                     );
-                    var mobileLocationQs = this.$refs.mobileLocationQuestions;
-                    if (!mobileLocationQs.isMobileAddressComplete()) {
-                        mobileLocationQs.openModal();
+                    var mobileLocationQuestionsRef = this.$refs.mobileLocationQuestions;
+                    var isMobileAddressComplete =
+                        mobileLocationQuestionsRef.isMobileAddressComplete;
+                    if (isMobileAddressComplete) {
+                        mobileLocationQuestionsRef.isMobileLocationOpened = true;
                     }
                 } else {
                     this.selectedProvider = new Provider();

From 7a9ac690e565f3212bb7d7d04660c8a1520a7917 Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Tue, 13 May 2025 11:56:30 +0530
Subject: [PATCH 3/4] CASH-502

show mobile location question on mobile service selected
---
 .../service-location/service-location.vue     | 31 +++++++++++--------
 .../shop-question/shop-question.vue           |  1 -
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 07f33809d..752d0c4c9 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -114,8 +114,7 @@
                         :selectedAppointmentType="selectedAppointmentType"
                         :shopProviderData="shopProviderData"
                         :isDisplayed="isShopQuestionDisplayed"
-                        cmsWidgetName="ShopQuestionWidget"
-                        :isInshopOnly="isInshopOnly" />
+                        cmsWidgetName="ShopQuestionWidget" />
 
                     <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
 
@@ -176,11 +175,12 @@ const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
 // DEFINE VALIDATION RULES
 defineRule("mobile-location-required", (value) => {
     if (
-        !value.addressQuestions.streetAddress ||
-        !value.addressQuestions.city ||
-        !value.addressQuestions.state ||
-        !value.addressQuestions.zipCode ||
-        !value.isVehicleProtected
+        (!value.addressQuestions.streetAddress ||
+            !value.addressQuestions.city ||
+            !value.addressQuestions.state ||
+            !value.addressQuestions.zipCode ||
+            !value.isVehicleProtected) &&
+        value.isMobileSelected
     ) {
         return errorMessages.MOBILE_LOCATION_REQUIRED;
     }
@@ -754,6 +754,13 @@ export default {
         setMobileLocationInValid(isMobileLocationInValid) {
             this.isMobileAddressValid = !isMobileLocationInValid;
         },
+        displayMobileAddressQuestion(openMobileLocation) {
+            var mobileLocationQuestionsRef = this.$refs.mobileLocationQuestions;
+            var isMobileAddressComplete = mobileLocationQuestionsRef.isMobileAddressComplete;
+            if (isMobileAddressComplete) {
+                mobileLocationQuestionsRef.isMobileLocationOpened = openMobileLocation;
+            }
+        },
     },
     watch: {
         zipCode: {
@@ -765,8 +772,10 @@ export default {
                             this.selectedProvider = new Provider(
                                 this.shopProviderData.mobileProviderNumber
                             );
+                            this.displayMobileAddressQuestion(true);
                         } else {
                             this.selectedProvider = new Provider();
+                            this.displayMobileAddressQuestion(false);
                         }
                     });
                 }
@@ -778,14 +787,10 @@ export default {
                     this.selectedProvider = new Provider(
                         this.shopProviderData.mobileProviderNumber
                     );
-                    var mobileLocationQuestionsRef = this.$refs.mobileLocationQuestions;
-                    var isMobileAddressComplete =
-                        mobileLocationQuestionsRef.isMobileAddressComplete;
-                    if (isMobileAddressComplete) {
-                        mobileLocationQuestionsRef.isMobileLocationOpened = true;
-                    }
+                    this.displayMobileAddressQuestion(true);
                 } else {
                     this.selectedProvider = new Provider();
+                    this.displayMobileAddressQuestion(false);
                 }
             },
         },
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 5e85b752b..72862440b 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -77,7 +77,6 @@ export default {
         cmsWidgetName: String,
         validationRules: String,
         isDisplayed: Boolean,
-        isInshopOnly: Boolean,
     },
     computed: {
         questionText() {

From dfdc79c4aec351ee1ec9929477b8e5be7d585acc Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Tue, 13 May 2025 12:27:37 +0530
Subject: [PATCH 4/4] CASH-502

undo accidental changes
---
 src/layouts/vin-lookup/vin-lookup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 54ac5928e..05f6fdbd7 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -354,7 +354,7 @@ export default {
                     false
                 );
                 if (this.isHeavyTruck) {
-                    var closestShops = await this.findClosestApplicableShops(
+                    const closestShops = await this.findClosestApplicableShops(
                         this.serviceZipCode,
                         this.carId
                     );