Merge branch 'release/2025.05.08' into feature/bugfix/CASH-501

azure-pipelines.yml

@@ -18,9 +18,11 @@ pr:
 resources:
     containers:
         - container: node
-          image: packagerepository.sagaws.net:8082/safelite/node-build:18
+          image: ghcr.io/safelite/node-build:18
+          endpoint: GitHub Docker
         - container: awscli
-          image: packagerepository.sagaws.net:8082/safelite/awscli2-build:3.9
+          image: ghcr.io/safelite/awscli2-build:3.9
+          endpoint: GitHub Docker
         - container: prettier-node
           image: ghcr.io/safelite/prettier-node-build:23
           endpoint: GitHub Docker

jest.config.js

@@ -4,6 +4,9 @@ module.exports = {
   testResultsProcessor: "jest-junit",
   preset: "@vue/cli-plugin-unit-jest",
   transform: { "^.+\\.vue$": "@vue/vue3-jest" },
+  transformIgnorePatterns: [
+    '/node_modules/(?!.*\\.mjs$)',
+  ],
   moduleFileExtensions: ["js", "vue"],
   modulePathIgnorePatterns: ["vin-lookup"],
   collectCoverageFrom: [

src/digital-components/salesforce-webchat/salesforce-webchat.spec.js

@@ -3,6 +3,7 @@ import salesforceWebchat from "./salesforce-webchat.vue";
 import * as devHelper from "./salesforce-helper-dev";
 import * as qaHelper from "./salesforce-helper-qa";
 import * as prodHelper from "./salesforce-helper-prod";
+import { applicationConfig } from "../../constants/application-config";
 
 describe("salesforceWebchat.vue", () => {
     it("renders correctly", () => {
@@ -21,19 +22,19 @@ describe("salesforceWebchat.vue", () => {
     });
 
     it("calls the correct initialization function based on environment", () => {
-        process.env.VUE_APP_CURRENT_ENVIRONMENT = "Prod";
+        applicationConfig.CURRENT_ENVIRONMENT = "Prod";
         let wrapper = shallowMount(salesforceWebchat);
         mockProd = jest.spyOn(prodHelper, "initializeSalesforceWebchatForProd");
         wrapper.vm.initializeSalesforceWebchat();
         expect(mockProd).toHaveBeenCalled();
 
-        process.env.VUE_APP_CURRENT_ENVIRONMENT = "QA";
+        applicationConfig.CURRENT_ENVIRONMENT = "QA";
         wrapper = shallowMount(salesforceWebchat);
         mockQa = jest.spyOn(qaHelper, "initializeSalesforceWebchatForQa");
         wrapper.vm.initializeSalesforceWebchat();
         expect(mockQa).toHaveBeenCalled();
 
-        process.env.VUE_APP_CURRENT_ENVIRONMENT = "Dev";
+        applicationConfig.CURRENT_ENVIRONMENT = "Dev";
         wrapper = shallowMount(salesforceWebchat);
         mockDev = jest.spyOn(devHelper, "initializeSalesforceWebchatForDev");
         wrapper.vm.initializeSalesforceWebchat();

src/digital-components/salesforce-webchat/salesforce-webchat.vue

@@ -7,6 +7,7 @@
 import { initializeSalesforceWebchatForDev } from "./salesforce-helper-dev";
 import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
 import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
+import { applicationConfig } from "@/constants/application-config";
 
 export default {
     name: "salesforceWebchat",
@@ -28,7 +29,7 @@ export default {
     },
     methods: {
         initializeSalesforceWebchat() {
-            switch (process.env.VUE_APP_CURRENT_ENVIRONMENT) {
+            switch (applicationConfig.CURRENT_ENVIRONMENT) {
                 case "Prod":
                     initializeSalesforceWebchatForProd();
                     break;

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

@@ -182,6 +182,23 @@ describe("address-lookup.vue", () => {
             // Assert
             expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true);
         });
+
+        test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                displayNoServiceAlert: false,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: true,
+                    vinVehicles: [], // Return no vehicles
+                },
+            });
+            // Ensure displayNoServiceAlert is false
+            await wrapper.setData({ displayNoServiceAlert: false });
+            await wrapper.vm.forwardButtonAction();
+            // Check if the AlertNoService component is not rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).toBe(false);
+        });
     });
 
     describe("navigation", () => {
@@ -741,6 +758,17 @@ function setupMocks({
     wrapper.vm.setCmsContent = jest.fn();
     wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
     wrapper.vm.$refs.navbar.removeLoader = jest.fn();
+    const closestShops = {
+        data: {
+            providers: [
+                { id: 1, name: "Shop 1" },
+                { id: 2, name: "Shop 2" },
+            ],
+        },
+    };
 
+    wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
+        return new Promise((resolve) => resolve(closestShops));
+    });
     return { wrapper };
 }

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

@@ -81,13 +81,20 @@
                             </div>
                         </div>
                     </transition>
+                    <alert
+                        ref="AlertNoService"
+                        v-if="displayNoServiceAlert"
+                        class="my-4"
+                        cmsWidgetName="AlertNoServiceWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
                         :isDisabled="!meta.valid"
                         @ForwardClicked="forwardButtonAction"
                         @back-clicked="backButtonAction"
-                        :isForwardActionDisabled="!meta.valid" />
+                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert" />
                 </div>
             </div>
         </div>
@@ -177,6 +184,7 @@ export default {
             displayInvalidZipAlert: false,
             showServiceZipField: this.getServiceZipFromStore(),
             isZipServiceable: false,
+            displayNoServiceAlert: false,
         };
     },
     methods: {
@@ -293,6 +301,17 @@ export default {
                 return this.$refs.navbar.removeLoader();
             }
             this.displayInvalidZipAlert = false;
+
+            if (this.serviceZipCode != null && this.isHeavyTruck) {
+                const closestShops = await this.findClosestApplicableShops(
+                    this.serviceZipCode,
+                    this.carId
+                );
+                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                if (this.displayNoServiceAlert) {
+                    return this.$refs.navbar.removeLoader();
+                }
+            }
             const carsFound = resultMap.vinLookupResponse.vinVehicles;
 
             // Handle cases for different amounts of VINS found for the address.
@@ -444,6 +463,7 @@ export default {
             this.displayNonServiceableZipAlert = false;
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -495,6 +515,7 @@ export default {
             handler(newValue) {
                 // If they modify the service zip code, then hide the error message.
                 this.displayNonServiceableZipAlert = false;
+                this.displayNoServiceAlert = false;
             },
         },
         showServiceZipField: {

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -620,6 +620,8 @@ function setupMocks({
     validateZipResponse = { zipCodeCtu: null, isServiceable: false, isValid: true, state: null },
     //Values to set in the state store
     carId = null,
+    isHeavyTruck = true,
+    displayNoServiceAlert = true,
     serviceLocationZipCode = null,
     registrationZipCode = null,
     licensePlate = null, //"TESTPLATE",
@@ -672,6 +674,8 @@ function setupMocks({
                         zipCode: registrationZipCode,
                     },
                     carId: carId,
+                    isBigTruck: isHeavyTruck,
+                    canSafeliteService: true,
                 },
                 order: {
                     customer: {
@@ -716,5 +720,17 @@ function setupMocks({
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
     wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
     wrapper.vm.$refs.navbar.removeLoader = jest.fn();
+    const closestShops = {
+        data: {
+            providers: [
+                { id: 1, name: "Shop 1" },
+                { id: 2, name: "Shop 2" },
+            ],
+        },
+    };
+
+    wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
+        return new Promise((resolve) => resolve(closestShops));
+    });
     return { wrapper, apiPromise };
 }

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -76,6 +76,7 @@
                         :manualCopy="AlertMatchedDifferentVehicleBody"
                         alertClass="alert-warning"
                         v-bind:isDismissible="false" />
+
                     <alert
                         ref="AlertNoService"
                         v-if="displayNoServiceAlert"
@@ -87,9 +88,9 @@
                     <navbar
                         ref="navbar"
                         cmsWidgetName="FunnelFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
+                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                         @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction || displayNoServiceAlert" />
+                        @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
         </div>
@@ -177,6 +178,7 @@ export default {
             displayInvalidZipAlert: false,
             showServiceZipField: this.getServiceZipFromStore(),
             isZipServiceable: false,
+            displayNoServiceAlert: false,
         };
     },
     methods: {
@@ -279,6 +281,17 @@ export default {
                 this.displayInvalidZipAlert = true;
                 return this.$refs.navbar.removeLoader();
             }
+
+            if (this.isHeavyTruck) {
+                const closestShops = await this.findClosestApplicableShops(
+                    this.serviceZipCode,
+                    this.carId
+                );
+                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                if (this.displayNoServiceAlert) {
+                    return this.$refs.navbar.removeLoader();
+                }
+            }
             // Check if the CarId has changed.
             this.isCarIdDifferent =
                 vinLookup.data.vehicle.carId !== this.$store.getters.vehicle.carId;
@@ -393,6 +406,7 @@ export default {
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayVinLookupByHomeAddressNotAllowedAlert = false;
             this.displayInvalidZipAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -437,6 +451,7 @@ export default {
         serviceZipCode() {
             // If they modify the service zip code, then hide the error message.
             this.displayNonServiceableZipAlert = false;
+            this.displayNoServiceAlert = false;
             this.$refs.navbar.updateButtonText(
                 this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
             );

src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue

@@ -3,18 +3,16 @@
         <component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
         <div class="my-4 alert-heading text-center">
             <span v-html="afterpayHeaderCopy" />
-            &nbsp;
             <span class="afterpay-amount">{{ this.afterpayPrice }}</span>
             <br />
             <span class="alert-sub-heading" v-html="afterpayHeaderSubHeaderCopy" />
-            &nbsp;
-            <img :src="afterPayImageUrl" />
-            &nbsp;
+            <img :src="afterPayImageUrl" class="afterpay-image" />
             <a
                 id="afterpay-learnmore"
                 href="#"
                 data-afterpay-modal="en_US-safelite"
-                data-bind="click:afterpayLearnMore">
+                data-bind="click:afterpayLearnMore"
+                class="afterpay-learn-more">
                 <img :src="infoIcon" alt="Info Icon" class="info-icon" />
             </a>
             <div class="after-pay">
@@ -151,8 +149,8 @@ export default {
 
     &.alert-info {
         .alert-heading {
-            color: #000000;
-            font-weight: 600;
+            color: $black;
+            font-weight: $font-weight-600;
             margin-left: 0.5rem;
             margin-right: 0.5rem;
             @include media-breakpoint-up(md) {
@@ -162,11 +160,12 @@ export default {
         }
     }
     .afterpay-amount {
-        color: #0c7e47;
+        color: $green;
+        margin-left: 0.25rem;
     }
     .alert-sub-heading {
-        color: #4b4c4e;
-        font-weight: 400;
+        color: $gray-1100;
+        font-weight: $font-weight-normal;
     }
     .after-pay {
         .after-pay-toggle {
@@ -180,7 +179,7 @@ export default {
                 background-position: right center;
                 margin-left: 0.5rem;
                 width: 1rem;
-                height: 9px;
+                height: 0.5625rem;
                 display: inline-flex;
             }
             &.expanded:after {
@@ -194,8 +193,8 @@ export default {
             }
         }
         .after-pay-toggle a {
-            font-weight: 600;
-            color: #0070d1;
+            font-weight: $font-weight-600;
+            color: $blue;
             text-decoration: none;
         }
         .after-pay-details {
@@ -218,27 +217,45 @@ export default {
     .payment-card {
         display: flex;
         flex-direction: column;
-        border-radius: 6px;
-        border: 0.25px #b3b4b5;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        border-radius: 0.375rem;
+        border: 0.25px $gray-1000;
+        box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15);
     }
     .calendar-section {
-        background-color: #fff; /* White background for calendar area */
+        background-color: $white; /* White background for calendar area */
         padding: 0.5rem;
         text-align: center;
-        gap: 2px;
-        font-weight: 700;
+        gap: 0.125rem;
+        font-weight: $font-weight-700;
         white-space: nowrap;
+        border-top-left-radius: 0.375rem;
+        border-top-right-radius: 0.375rem;
+        width: 4.375rem;
+        @include media-breakpoint-up(md) {
+            width: 5rem;
+        }
     }
     .payment-amount-section {
-        background-color: #e0f7e9; /* Light green background for payment area */
+        background-color: $green-600; /* Light green background for payment area */
         padding: 0.5rem;
         text-align: center;
-        font-weight: 700;
+        font-weight: $font-weight-700;
+        border-bottom-left-radius: 0.375rem;
+        border-bottom-right-radius: 0.375rem;
+        width: 4.375rem;
+        @include media-breakpoint-up(md) {
+            width: 5rem;
+        }
+    }
+    .afterpay-learn-more {
+        margin-left: 0.25rem;
+    }
+    .afterpay-image {
+        margin-left: 0.25rem;
     }
 
     .amount-due {
-        color: #00723e; /* Green text */
+        color: $green-1000; /* Green text */
     }
     .legend {
         display: flex;
@@ -249,11 +266,11 @@ export default {
     .legend-item {
         display: flex;
         align-items: center;
-        gap: 2px;
+        gap: 0.125rem;
         white-space: nowrap;
     }
     .legend-item span {
-        font-weight: 400;
+        font-weight: $font-weight-normal;
     }
 }
 </style>

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

@@ -1,72 +1,70 @@
 <template>
-    <transition name="fade" mode="out-in">
-        <div class="mobile-location-questions">
-            <div class="text-center" :id="componentId">
-                <label
-                    for="mobileLocationLinkPromptId"
-                    :aria-label="mobileLocationLinkPromptText"
-                    class="form-label fw-bold w-100 ps-4 pe-4 pt-4 text-black"
-                    v-html="mobileLocationLinkPromptText"></label>
-                <div class="update-mobile-location-text-link">
-                    <textLink
-                        ref="mobileLocationLink"
-                        id="mobileLocationLinkPromptId"
-                        linkType="text"
-                        :text="mobileLocationLinkText"
-                        href="#!"
-                        @click-event="openModal" />
-                </div>
-                <div v-show="errorMessage" class="row my-1 form-test-error">
-                    <span
-                        class="d-inline-flex small mt-0 center-error-message"
-                        aria-atomic="true"
-                        aria-live="polite">
-                        {{ errorMessage }}
-                    </span>
-                </div>
-                <textBlock
-                    v-if="mobileFeeApplies"
-                    :customText="mobileFeeText"
-                    cmsWidgetName="MobileFeeDisclaimerWidget"
-                    typeStyle="caption" />
+    <div class="mobile-location-questions">
+        <div class="text-center" :id="componentId">
+            <label
+                for="mobileLocationLinkPromptId"
+                :aria-label="mobileLocationLinkPromptText"
+                class="form-label fw-bold w-100 ps-4 pe-4 pt-4 text-black"
+                v-html="mobileLocationLinkPromptText"></label>
+            <div class="update-mobile-location-text-link">
+                <textLink
+                    ref="mobileLocationLink"
+                    id="mobileLocationLinkPromptId"
+                    linkType="text"
+                    :text="mobileLocationLinkText"
+                    href="#!"
+                    @click-event="openModal" />
             </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-show="errorMessage" class="row my-1 form-test-error">
+                <span
+                    class="d-inline-flex small mt-0 center-error-message"
+                    aria-atomic="true"
+                    aria-live="polite">
+                    {{ errorMessage }}
+                </span>
+            </div>
+            <textBlock
+                v-if="mobileFeeApplies"
+                :customText="mobileFeeText"
+                cmsWidgetName="MobileFeeDisclaimerWidget"
+                typeStyle="caption" />
         </div>
-    </transition>
+        <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>
 </template>
 
 <script>
@@ -150,6 +148,7 @@ export default {
                     zipCode: "",
                 },
                 isVehicleProtected: null,
+                isMobileSelected: false,
             }),
         },
         mobileFeePart: {
@@ -169,17 +168,7 @@ export default {
             return this.getCmsContent(this.linkWidgetName, "HeaderText");
         },
         mobileLocationLinkText() {
-            if (
-                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
-            ) {
+            if (this.isMobileAddressComplete()) {
                 return `${this.addressModel.streetAddress}\n${this.addressModel.city}, ${this.addressModel.state} ${this.addressModel.zipCode}`;
             }
             return this.getCmsContent(this.linkWidgetName, "BodyText");
@@ -218,6 +207,19 @@ 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
+            );
+        },
         openModal() {
             this.modal.openModal();
         },

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

@@ -81,6 +81,16 @@ jest.mock(
     })
 );
 
+jest.mock(
+    "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue",
+    () => ({
+        isMobileAddressComplete: jest.fn(() => {
+            return true;
+        }),
+        openModal: jest.fn(),
+    })
+);
+
 jest.spyOn(baseMixin.methods, "getZipCodeData").mockImplementation((serviceZipCode) => {
     return new Promise((resolve) => {
         let mockContainsMilitaryBase = false;
@@ -343,6 +353,7 @@ describe("service-location.vue", () => {
                     zipCode: "43054",
                 },
                 isVehicleProtected: true,
+                isMobileSelected: true,
             };
             wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
 
@@ -355,6 +366,7 @@ describe("service-location.vue", () => {
                     zipCode: "61606",
                 },
                 isVehicleProtected: null,
+                isMobileSelected: false,
             };
 
             // Act
@@ -457,6 +469,7 @@ describe("service-location.vue", () => {
                     zipCode: "",
                 },
                 isVehicleProtected: null,
+                isMobileSelected: false,
             };
             wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
             const newMobileLocationQuestions = {
@@ -468,6 +481,7 @@ describe("service-location.vue", () => {
                     zipCode: "43054",
                 },
                 isVehicleProtected: true,
+                isMobileSelected: true,
             };
 
             wrapper.vm.closeModalAction = jest.fn();
@@ -517,6 +531,7 @@ describe("service-location.vue", () => {
                     zipCode: "",
                 },
                 isVehicleProtected: null,
+                isMobileSelected: false,
                 mobileFeePart: null,
             };
             wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
@@ -530,6 +545,7 @@ describe("service-location.vue", () => {
                     zipCode: "43081",
                 },
                 isVehicleProtected: true,
+                isMobileSelected: true,
                 mobileFeePart: null,
             };
 
@@ -593,6 +609,7 @@ describe("service-location.vue", () => {
                     zipCode: "43081",
                 },
                 isVehicleProtected: "YesAnswer",
+                isMobileSelected: true,
             };
 
             wrapper.vm.closeModalAction = jest.fn();
@@ -1433,5 +1450,7 @@ 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.openModal = jest.fn();
     return { wrapper, apiPromise };
 }

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

@@ -88,7 +88,7 @@
                 <div class="col-md-6 col-xl-4">
                     <mobileLocationModalQuestions
                         customComponentId="mobileLocationQuestions"
-                        v-if="selectedAppointmentType === 'Mobile'"
+                        v-show="selectedAppointmentType === 'Mobile'"
                         v-model="mobileLocationQuestions"
                         :mobileFeePart="mobileFeePart"
                         :mobileFeeApplies="mobileFeeApplies"
@@ -171,11 +171,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.isMobileSelected &&
+        (!value.addressQuestions.streetAddress ||
+            !value.addressQuestions.city ||
+            !value.addressQuestions.state ||
+            !value.addressQuestions.zipCode ||
+            !value.isVehicleProtected)
     ) {
         return errorMessages.MOBILE_LOCATION_REQUIRED;
     }
@@ -297,6 +298,7 @@ export default {
                         zipCode: this.zipCode,
                     },
                     isVehicleProtected: this.isVehicleProtected,
+                    isMobileSelected: this.selectedAppointmentType === "Mobile",
                 };
             },
         },
@@ -765,6 +767,10 @@ export default {
                     this.selectedProvider = new Provider(
                         this.shopProviderData.mobileProviderNumber
                     );
+                    var mobileLocationQs = this.$refs.mobileLocationQuestions;
+                    if (!mobileLocationQs.isMobileAddressComplete()) {
+                        mobileLocationQs.openModal();
+                    }
                 } else {
                     this.selectedProvider = new Provider();
                 }

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

@@ -415,6 +415,21 @@ describe("service-zip.vue", () => {
             expect(wrapper.vm.displayInvalidZipAlert).toBe(false);
             expect(wrapper.vm.displayNonServiceableZipAlert).toBe(false);
         });
+
+        test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
+            // Arrange
+            // no changes to store
+            applyMockStoreDataToGetters();
+
+            const wrapper = setupMocks({});
+            wrapper.vm.serviceZipCode = "12345";
+
+            wrapper.vm.displayNoServiceAlert = false;
+            await wrapper.vm.forwardButtonAction();
+
+            // Check if the AlertNoService component is rendered
+            expect(wrapper.vm.displayNoServiceAlert).toBe(false);
+        });
     });
 });
 
@@ -511,5 +526,15 @@ function setupMocks({ customMountOptions, customZipQuery, customZipDataResponse
     ];
 
     const wrapper = shallowMount(serviceZip, mountOptions);
+    wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: {
+                providers: [
+                    { id: 1, name: "Shop 1" },
+                    { id: 2, name: "Shop 2" },
+                ],
+            },
+        });
+    });
     return wrapper;
 }

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

@@ -46,11 +46,18 @@
                             v-model="customAlertData"
                             v-if="displayNonServiceableZipAlert"
                             alertClass="alert-danger" />
+                        <alert
+                            ref="AlertNoService"
+                            v-if="displayNoServiceAlert"
+                            class="my-4"
+                            cmsWidgetName="AlertNoServiceWidget"
+                            alertClass="alert-danger"
+                            v-bind:isDismissible="false" />
 
                         <navbar
                             cmsWidgetName="FunnelFooterWidget"
                             ref="navbar"
-                            :isForwardActionDisabled="!meta.valid"
+                            :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                             @back-clicked="backButtonAction"
                             @ForwardClicked="forwardButtonAction" />
                     </div>
@@ -114,6 +121,7 @@ export default {
             isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
             displayInvalidZipAlert: false,
             displayNonServiceableZipAlert: false,
+            displayNoServiceAlert: false, // Initialize the property
         };
     },
 
@@ -278,17 +286,6 @@ export default {
                     return this.$refs.navbar.removeLoader();
                 }
             }
-            if (this.isHeavyTruck) {
-                const closestShops = await this.findClosestApplicableShops(
-                    this.serviceZipCode,
-                    this.carId
-                );
-                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
-                if (this.displayNoServiceAlert) {
-                    return this.$refs.navbar.removeLoader();
-                }
-            }
-
             const payment = this.$store.getters.payment;
             const policy = this.$store.getters.policy;
 
@@ -346,7 +343,6 @@ export default {
         serviceZipCode() {
             this.displayNonServiceableZipAlert = false;
             this.displayNoServiceAlert = false;
-            this.displayNoServiceAlert = false;
         },
     },
     components: {

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

@@ -258,6 +258,23 @@ describe("vin-lookup.vue", () => {
             // Assert
             expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(1);
         });
+
+        test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                displayNoServiceAlert: false,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: true,
+                    vinVehicles: [], // Return no vehicles
+                },
+            });
+            // Ensure displayNoServiceAlert is false
+            await wrapper.setData({ displayNoServiceAlert: false });
+            await wrapper.vm.forwardButtonAction();
+            // Check if the AlertNoService component is not rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).toBe(false);
+        });
     });
 
     describe("getVinFromImage", () => {

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

@@ -111,10 +111,18 @@
                         "
                         alertClass="alert-success" />
 
+                    <alert
+                        ref="AlertNoService"
+                        v-if="displayNoServiceAlert"
+                        class="my-4"
+                        cmsWidgetName="AlertNoServiceWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
-                        :isForwardActionDisabled="!meta.valid"
+                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
@@ -209,6 +217,7 @@ export default {
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
             displayVinScanFailedAlert: false,
+            displayNoServiceAlert: false,
         };
     },
     methods: {
@@ -247,6 +256,9 @@ export default {
                 );
             }
         },
+        getCarIdfromStore() {
+            return this.$store.getters.vehicle.carId;
+        },
         getIsVehicleHeavyTruckServiceableFromStore() {
             return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
         },
@@ -341,7 +353,7 @@ export default {
                     false
                 );
                 if (this.isHeavyTruck) {
-                    closestShops = await this.findClosestApplicableShops(
+                    const closestShops = await this.findClosestApplicableShops(
                         this.serviceZipCode,
                         this.carId
                     );
@@ -499,7 +511,6 @@ export default {
             this.displayVinNotFoundAlert = false;
             this.displayVinScanFailedAlert = false;
             this.displayNoServiceAlert = false;
-            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -576,6 +587,7 @@ export default {
         },
         serviceZipCode() {
             this.displayNonServiceableZipAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     components: {

src/styles/ux-variables.scss

@@ -33,9 +33,11 @@ $green-300: #94d7b6;
 $green-400: #5abc8c; // Used in theme
 $green-500: #2ca168;
 $green: #0c7e47; // Default Green
+$green-600: #e7f2ed;
 $green-700: #006a36;
 $green-800: #004f28;
 $green-900: #00331a;
+$green-1000: #00723e;
 
 // Yellows
 $yellow-100: #fff5eb;
@@ -59,6 +61,8 @@ $gray-600: #4d5151; // Used in theme
 $gray-700: #303333; // Used in theme
 $gray-800: #222424; // Used in theme
 $gray-900: #181a1a; // Used in theme
+$gray-1000: #b3b4b5;
+$gray-1100: #4b4c4e;
 
 //orange
 $orange-600: #e86421;
@@ -134,6 +138,8 @@ $font-weight-lighter: lighter;
 $font-weight-light: 300;
 $font-weight-normal: 400;
 $font-weight-bold: 500;
+$font-weight-600: 600;
+$font-weight-700: 700;
 $font-weight-bolder: bolder;
 
 //Headings