WIP - Callback to load availability (no component yet)

src/layouts/service-location/helpers/service-location-helper/service-location-helper.js

@@ -58,9 +58,9 @@ export async function getAvailabilityRating(providerNumber, startDate, endDate,
     );
 
     // Rate the availability for the shop
-    let numberOfAppointmentsPerDay = []
-    for (let i = 0; i < shopTimeSlots.days.length; i++) {
-        numberOfAppointmentsPerDay.push(shopTimeSlots.days[i].timeSlots.length);
+    let numberOfAppointmentsPerDay = [];
+    for (let i = 0; i < shopTimeSlots.data.days.length; i++) {
+        numberOfAppointmentsPerDay.push(shopTimeSlots.data.days[i].timeSlots.length);
     }
 
     const dateRange = 7;
@@ -78,8 +78,9 @@ export async function getAvailabilityRating(providerNumber, startDate, endDate,
     }
 
     const isGoodAvailability = daysWithMinimalAppointmentsCount >= numberOfDaysToEvaluate;
-    
-    const shopStatus = isGoodAvailability ? "Good" : "Low"
 
-    return shopStatus;
+    const shopStatus = isGoodAvailability ? "Good" : "Low";
+
+    return Promise.resolve(shopStatus);
+
 }

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

@@ -1,4 +1,8 @@
-import { getPricedMobileFeePart, getServiceabilityDetails, getAvailabilityRating } from "./service-location-helper";
+import {
+    getPricedMobileFeePart,
+    getServiceabilityDetails,
+    getAvailabilityRating,
+} from "./service-location-helper";
 import { storeActions } from "@/constants/store-actions";
 
 jest.mock("@/store", () => ({
@@ -79,7 +83,6 @@ jest.mock("@/store", () => ({
             eon: null,
         },
     },
-
 }));
 
 const mockStoreActionGetMobileFeePart = storeActions.GET_MOBILE_FEE_PART;
@@ -99,29 +102,29 @@ const mockGetShopTimeSlotsGoodAvailability = {
                     id: "string",
                     startTime: "",
                     endTime: "",
-                    offerPremium: true
+                    offerPremium: true,
                 },
-            ]
+            ],
         },
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
@@ -130,12 +133,12 @@ const mockGetShopTimeSlotsGoodAvailability = {
                     id: "string",
                     startTime: "",
                     endTime: "",
-                    offerPremium: true
+                    offerPremium: true,
                 },
-            ]
-        },   
-    ]
-}
+            ],
+        },
+    ],
+};
 
 const mockGetShopTimeSlotsLowAvailability = {
     estimatedServiceMinutesMinimum: 0,
@@ -143,27 +146,27 @@ const mockGetShopTimeSlotsLowAvailability = {
     days: [
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
-            timeSlots: []
+            timeSlots: [],
         },
         {
             date: "string",
@@ -172,12 +175,12 @@ const mockGetShopTimeSlotsLowAvailability = {
                     id: "string",
                     startTime: "",
                     endTime: "",
-                    offerPremium: true
+                    offerPremium: true,
                 },
-            ]
-        },   
-    ]
-}
+            ],
+        },
+    ],
+};
 
 jest.mock("@/mixins/base-mixin.js", () => ({
     methods: {
@@ -230,7 +233,6 @@ jest.mock("@/mixins/base-mixin.js", () => ({
                 }
 
                 return Promise.resolve(mockGetShopTimeSlotsLowAvailability);
-                
             }
         }),
     },

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue

@@ -3,7 +3,7 @@
         <baseInputButton
             v-bind="$props"
             buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
-            v-model="selectedValue">
+            v-model="selectedValue" >
             <div
                 :aria-label="buttonLabel"
                 class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
@@ -29,7 +29,7 @@
                     {{ screenReaderOnlyText }}
                 </span>
                 <loader
-                    v-if="isLoaderDisplayed && selectingInitiatesLoad"
+                    v-if="isLoaderDisplayed"
                     :class="[this.loaderColor, this.loaderPosition]" />
             </div>
         </baseInputButton>
@@ -51,10 +51,16 @@ export default {
             default: "right",
         },
     },
+    mounted() {
+        this.displayLoader();
+        console.log(this.additionalButtonData)
+    },
+    updated() {
+        this.isLoaderDisplayed = false
+    },
     data() {
         return {
             isLoaderDisplayed: false,
-            availability: "low",
         };
     },
     methods: {
@@ -148,7 +154,7 @@ export default {
         }
 
         .availability-indicator {
-            display: none;
+            display: block;
             flex-direction: row;
             justify-content: center;
             align-items: center;

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

@@ -51,6 +51,8 @@ import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
 import { nextTick } from "vue";
 
+import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
@@ -141,12 +143,15 @@ export default {
                 const state = shopProvider.address.state;
                 const zipCode = shopProvider.address.zipCode;
                 const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
+                const availabilityRatingCallback = getAvailabilityRating;
 
                 return {
                     buttonLabel: streetAddress,
                     buttonLabelSubCopy: `${distanceInMiles} mi`,
                     buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
+                    //buttonAuxillaryCopy: availabilityRating,
                     value: shopProvider.providerNumber,
+                    additionalButtonData: availabilityRatingCallback,
                 };
             });
 
@@ -158,6 +163,10 @@ export default {
                 });
             }
 
+            for (let i = 0; i < this.answers.length; i++) {
+                this.answers[i].buttonAuxillaryCopy = await this.answers[i].additionalButtonData(this.answers[i].value);
+            }
+
             await this.$nextTick();
 
             if (this.shopIndex == this.shopProviders.length) {

src/store/index.js

@@ -1136,12 +1136,13 @@ export const actions = {
         });
     },
 
-    getShopTimeSlots(context,
-        { 
+    getShopTimeSlots(
+        context,
+        {
             providerNumber,
-            startDate = "2023-01-01", 
-            endDate = "2023-05-01", 
-            shopAppointmentType = "" 
+            startDate = "2023-01-01",
+            endDate = "2023-05-01",
+            shopAppointmentType = "",
         }
     ) {
         const order = context.state.order;
@@ -1770,7 +1771,7 @@ export const actions = {
     clearVin(context) {
         context.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
     },
-    
+
     isVinOptionalVehicle(context) {
         switch (context.state.order.vehicle.make.toLowerCase()) {
             case "mercedes benz":