CASH-1339 | Add big truck alert to shop-question-popup

src/layouts/service-location/shop-question/shop-question-popup.vue

@@ -48,7 +48,13 @@
                 cmsWidgetName="AlertNoShopsWidget"
                 v-if="displayNoShopsAlert"
                 alertClass="alert-warning" />
-            <div v-if="!displayInvalidZipAlert">
+            <alert
+                ref="alertNoShops"
+                class="my-5"
+                cmsWidgetName="AlertNoServiceWidget"
+                v-if="displayNoServiceAlert"
+                alertClass="alert-danger" />
+            <div v-if="displayShopsList">
                 <buttonQuestion
                     ref="buttonQuestion"
                     buttonTypeString="shopListButton"
@@ -116,6 +122,7 @@ export default {
             localSelectedProviderNumber: null,
             zipCodeData: null,
             isLoading: false,
+            displayNoServiceAlert: false,
         };
     },
     props: {
@@ -148,6 +155,9 @@ export default {
         displayNoShopsAlert() {
             return !this.shopProviders.length && !this.displayInvalidZipAlert;
         },
+        displayShopsList() {
+            return !this.displayInvalidZipAlert && !this.displayNoServiceAlert;
+        },
         modal() {
             return this.$refs.shopQuestionModal;
         },
@@ -170,6 +180,7 @@ export default {
                 this.isLoading ||
                 this.displayInvalidZipAlert ||
                 this.displayNoShopsAlert ||
+                this.displayNoServiceAlert ||
                 !this.localSelectedProviderNumber
             );
         },
@@ -199,6 +210,7 @@ export default {
         openModal() {
             // Reset local state from parent
             this.zipCodeData = null;
+            this.displayNoServiceAlert = false;
             this.localShopProviderData = this.shopProviderDataFromParent;
             this.localZipCode = this.zipCodeFromParent;
             // This will be set once the modal is open (updateSelectedAnswer()) to ensure that the
@@ -258,6 +270,7 @@ export default {
         },
         async onSearchZip(event) {
             event.preventDefault();
+            this.displayNoServiceAlert = false;
             if (!this.localZipCode) {
                 this.zipCodeData = {
                     isValid: false,
@@ -265,23 +278,24 @@ export default {
                 return;
             }
             this.isLoading = true;
+
             this.zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
             // Add zipCode to zipCodeData as it does not come back from endpoint
             this.zipCodeData.zipCode = this.localZipCode;
             if (this.zipCodeData.isValid) {
-                if (this.isVehicleHeavyTruck) {
+                if (this.$store.getters.order.vehicle?.isBigTruck) {
                     // check the location endpoint to verify this zip can service a heavy truck
                     const closestShops = await getClosestApplicableShops(
                         this.localZipCode,
-                        this.carId,
+                        this.$store.getters.order.vehicle.carId,
                         "service-location"
                     );
-
                     if (!closestShops || closestShops.providers?.length === 0) {
-                        // We need an alert for heavy trucks
+                        this.isLoading = false;
+                        this.displayNoServiceAlert = true;
                         return null;
                     }
-                } else {
+
                     getShopProviderData(this.localZipCode).then(async (result) => {
                         this.localShopProviderData = result.data;
                         this.numberOfShopsToDisplay = 3;