Add missed alert, address some comments, adjust some mobile/inshop alert logic

src/layouts/duplicate-check/duplicate-check.vue

@@ -54,7 +54,7 @@ import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import buttonQuestion from '@/digital-components/button-question/button-question.vue';
 import buttonMain from '@/ux-components/button-main/button-main.vue';
-import buttonVariants from '@/constants/button-variants';
+import { buttonVariants } from '@/constants/component-variants';
 
 // Supporting files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';

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

@@ -55,6 +55,12 @@
                     </div>
                     <div
                         v-if="isInshop">
+                        <alert
+                            v-if="displayLowAvailabilityInshop"
+                            ref="alertLowAvailabilityInshop"
+                            cmsWidgetName="AlertLowAvailabilityInshopWidget"
+                            :isCollapsible="true"
+                            alertClass="alert-warning" />
                         <shopAddress
                             v-model="selectedProvider"
                             :serviceZipcode="zipCode"
@@ -62,6 +68,7 @@
                             modalWidgetName="ChangeLocationModalWidget"
                             cmsWidgetName="ShopAddressWidget"
                             @zip-updated="handleInShopZipUpdated" />
+                        <!-- INTEGRATION TODO: Put this right under the calendar -->
                         <alert
                             v-if="selectedProvider === null"
                             ref="alertNoAvailableShops"
@@ -107,7 +114,6 @@
                             cmsWidgetName="MobileFeeDisclaimerWidget"
                             typeStyle="disclaimer" />
                     </div>
-                    <!-- INTEGRATION TODO: Put this right under the calendar -->
                     <contentGroupModal
                         :ref="RECAL_MODAL_REF_NAME"
                         cssModalHeadlineClass="text-center"
@@ -140,6 +146,7 @@ import {
     getMobileZipCodeData
 } from '@/helpers/service-location-helper';
 import { toTitleCase } from '@/helpers/text-helper.js';
+import { getAvailabilityRating } from '@/helpers/service-location-helper';
 
 // Import Component
 import alert from '@/ux-components/alert/alert.vue';
@@ -249,6 +256,7 @@ export default {
             mobileZipCode: '',
             mobileZipError: '',
             militaryBaseWarningExpanded: false,
+            availabilityRating: null,
             RECAL_MODAL_REF_NAME,
             SITE_FOOTER_REF_NAME,
             errorMessages
@@ -312,14 +320,14 @@ export default {
         displayRecalibrationWarning() {
             return this.requiresInshopRecalibration;
         },
+        displayLowAvailabilityInshop() {
+            return this.availabilityRating === 'low' && this.isInshop;
+        },
         displayServiceableInshopOnly() {
-            return (
-                !this.displayRecalibrationWarning
-                && !this.isServiceableMobile
-            );
+            return !this.isServiceableMobile && this.isServiceableInshop && !this.displayRecalibrationWarning;
         },
         displayServiceableMobileOnly() {
-            return this.isServiceableMobile && !this.isServiceableInshop && this.displayRecalibrationWarning;
+            return this.isServiceableMobile && this.recalibrationRequired && !this.isServiceableInshop;
         },
         displayMobileFeeDisclaimer() {
             return this.mainStore.isNoComp || this.mainStore.isITAC;
@@ -363,7 +371,7 @@ export default {
             return content;
         },
         recalibrationRequired() {
-            return this.isRecalibrationServiceableMobile !== null;
+            return this.mainStore.hasRecalibrationPart;
         }
     },
     methods: {
@@ -478,7 +486,7 @@ export default {
                 if(providers.shopProviders.length > 0 && !foundMatch) {
                     this.selectedProvider = providers.shopProviders[0];
                 }
-                else {
+                else if(providers.shopProviders.length === 0) {
                     this.selectedProvider = null;
                 }
             }
@@ -525,7 +533,6 @@ export default {
             } else if (!zipCodeData.isServiceable) {
                 this.mobileZipError = errorMessages.NO_SERVICE_IN_AREA(toTitleCase(zipCodeData.city));
             } else {
-                console.log('zipCodeData:', zipCodeData);
                 this.city = zipCodeData.city;
                 this.zipCode = this.mobileZipCode;
                 this.setCtuForMobile(zipCodeData.zipCodeCtu);
@@ -557,7 +564,6 @@ export default {
         async handleInShopZipUpdated(newZip) {
             this.zipCode = newZip;
             const zipCodeData = await getZipCodeData(this.zipCode);
-            console.log('zipCodeData:', zipCodeData);
             this.city = zipCodeData.city;
             this.setCtuForMobile(zipCodeData.zipCodeCtu);
             this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
@@ -579,6 +585,21 @@ export default {
         },
         selectedAppointmentType() {
             this.mobileZipCode = '';
+            if(this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && this.selectedProvider) {
+                const startDate = new Date();
+                const endDate = new Date();
+                endDate.setDate(startDate.getDate() + 6);
+                const formattedStartDate = startDate.toISOString().split('T')[0];
+                const formattedEndDate = endDate.toISOString().split('T')[0];
+                getAvailabilityRating(
+                    formattedStartDate,
+                    formattedEndDate,
+                    AppointmentTypeStrings.IN_SHOP,
+                    this.selectedProvider ? this.selectedProvider.providerNumber : null
+                ).then((rating) => {
+                    this.availabilityRating = rating;
+                });
+            }
         }
     }
 };

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

@@ -9,7 +9,7 @@
         isRequired
         :hasError="hasError"
         @clickEvent="updateModelValue"
-        validationRules="zip-required|zip-format" />
+        :validationRules="`zip-required|${cmsWidgetName}-zip-format`" />
 </template>
 
 <script>
@@ -52,8 +52,13 @@ export default {
             this.$emit('update:modelValue', this.internalZipcode);
         }
     },
+    watch: {
+        modelValue(newValue) {
+            this.internalZipcode = newValue;
+        }
+    },
     mounted() {
-        defineRule('zip-format', regex(/^\d{5}$/, this.serviceZipFormatErrorMessage));
+        defineRule(`${this.cmsWidgetName}-zip-format`, regex(/^\d{5}$/, this.serviceZipFormatErrorMessage));
     }
 };
 </script>

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

@@ -236,6 +236,7 @@ export default {
         async internalZipcode() {
             const shopsUpdated = await this.updateShops();
             if (shopsUpdated) {
+                await this.$nextTick();
                 this.$refs[SERVICE_ZIP_QUESTION_REF_NAME].internalZipcode = '';
             }
         },
@@ -263,6 +264,7 @@ export default {
                 }
                 this.nearbyShops = result;
                 this.searchRadiusInMiles = this.searchRadiusArray[currentSearchIndex].Name;
+                return true;
             }
         },
         openModal() {