update for availabilityrating matching schedule

src/layouts/schedule-page/schedule-page.vue

@@ -17,6 +17,7 @@
                     <div class="service-location-content-container">
                         <serviceLocation
                             ref="serviceLocation"
+                            :schedulingInshopAvailabilityRating="inShopAvailabilityRating"
                             @appointmentTypeChanged="appointmentTypeChangedFromServiceLocation"
                             @cityUpdated="cityUpdatedFromServiceLocation"
                             @inShopZipUpdated="inShopZipUpdatedFromServiceLocation"
@@ -310,6 +311,7 @@ export default {
     },
     data() {
         return {
+            inShopAvailabilityRating: 'high',
             inShopDatesData: [],
             isMobileView: false,
             mobileDatesData: [],
@@ -364,6 +366,27 @@ export default {
             return useMainStore().lineItems.supportingItems;
         }
     },
+    watch: {
+        inShopDatesData(newData) {
+            if (newData?.initialShopTimeSlotsResponse?.days?.length > 0) {
+                const numberOfDaysNeededToBeHighAvailability = 2;
+                const availabilityEndDate = new Date();
+                availabilityEndDate.setDate(availabilityEndDate.getDate() + 6);
+                
+                const datesInAvailabilityRange = newData.initialShopTimeSlotsResponse.days.filter((day) => {
+                    const dayDate = new Date(`${day.date}T00:00:00`);
+                    return dayDate <= availabilityEndDate;
+                });
+                const isGoodAvailability =
+                    datesInAvailabilityRange.filter((x) => x.timeSlots.length > 0).length
+                    >= numberOfDaysNeededToBeHighAvailability;
+
+                this.inShopAvailabilityRating = isGoodAvailability ? 'high' : 'low';
+            } else {
+                this.inShopAvailabilityRating = 'low';
+            }
+        }
+    },
     mounted() {
         showIssLoadingModal(true);
         this.mql = window.matchMedia('(min-width: 1200px)');
@@ -453,9 +476,6 @@ export default {
         },
         getAvailableDates,
         async getDatePickerInitialData(defaultProviderNumber = null) {
-            this.inShopDatesData = [];
-            this.mobileDatesData = [];
-
             let todayDateString;
             const todayDateObject = new Date();
             const calendarViewDirection = 'future';
@@ -532,6 +552,7 @@ export default {
                 }
             } else {
                 this.inShopDatesData = initialData;
+                this.mobileDatesData = [];
             }
 
             return initialData;

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

@@ -129,7 +129,6 @@ import errorMessages from '@/constants/error-messages';
 import { useMainStore } from '@/store';
 import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
 import {
-    getAvailabilityRating,
     getServiceabilityDetails,
     getZipCodeData,
     getMobileZipCodeData
@@ -160,6 +159,12 @@ export default {
     },
     mixins: [baseFormMixin],
     emits: ['appointment-type-changed', 'city-updated', 'in-shop-zip-updated', 'mobile-zip-updated', 'provider-changed'],
+    props: {
+        schedulingInshopAvailabilityRating: {
+            type: String,
+            default: 'high'
+        }    
+    },
     setup() {
         const mainStore = useMainStore();
         return { mainStore };
@@ -307,9 +312,12 @@ export default {
                 this.$emit('mobile-zip-updated', updateMobileZipServiceLocationObj);
             }
         },
+        schedulingInshopAvailabilityRating(newRating) {
+            this.availabilityRating = newRating;
+        },
         selectedAppointmentType(newValue, oldValue) {
             if (this.isInshop && this.selectedProvider && this.availabilityRating === null) {
-                this.refreshAvailabilityRating();
+                // this.refreshAvailabilityRating();
 
                 const appointmenTypeServiceLocationObj = {
                     appointmentType: newValue,
@@ -342,10 +350,6 @@ export default {
                     refreshDatePicker: appointmentIsInshop && oldProvider?.providerNumber !== null
                 };
 
-                if (appointmentIsInshop && newProvider?.providerNumber != null) {
-                    this.refreshAvailabilityRating();
-                }
-
                 if (newProvider?.providerNumber !== oldProvider?.providerNumber) {
                     this.$emit('provider-changed', returnedProvider);
                 }
@@ -444,24 +448,6 @@ export default {
                 this.$emit('in-shop-zip-updated', inShopZipServiceLocationObj);
             });
         },
-        refreshAvailabilityRating() {
-            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;
-            }).catch(() => {
-                this.availabilityRating = null;
-            });
-        },
         setCtuForMobile(val) {
             this.zipCodeCtu = val;
         },

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

@@ -68,8 +68,7 @@
                     groupName="chooseShop"
                     textPosition="text-start"
                     isRequired
-                    validationRules="option-required"
-                    :additionalButtonData="additionalButtonData" />
+                    validationRules="option-required" />
                 <span class="service-zip-prompt">
                     {{ serviceZipPrompt }}
                 </span>
@@ -108,7 +107,6 @@ import baseMixin from '@/mixins/base-mixin.js';
 import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
 import { toTitleCase } from '@/helpers/text-helper.js';
 import { markRaw } from 'vue';
-import { getAvailabilityRating } from '@/helpers/service-location-helper';
 import { useMainStore } from '@/store';
 import widgetFields from '@/constants/cms-widget-fields';
 import { dropdownVariants, modalPositions } from '@/constants/component-variants';
@@ -185,22 +183,6 @@ export default {
         modalName() {
             return this.modalWidgetName;
         },
-        additionalButtonData() {
-            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];
-
-            return {
-                displayAvailabilityIndicators: false,
-                availabilityRatingCallback: getAvailabilityRating,
-                startDate: formattedStartDate,
-                endDate: formattedEndDate,
-                shopAppointmentType: 'InshopOrDropoff'
-            };
-        },
         serviceZipPrompt() {
             return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
         },