Mobile Time Slot updates

Fix for Date Picker error message

src/constants/error-messages.js

@@ -51,7 +51,8 @@ const errorMessages = Object.freeze({
     MAKE_REQUIRED: 'Please select your vehicle make',
     MODEL_REQUIRED: 'Please select your vehicle model',
     STYLE_REQUIRED: 'Please select your vehicle style',
-    MOBILE_LOCATION_REQUIRED: 'Please enter your service address'
+    MOBILE_LOCATION_REQUIRED: 'Please enter your service address',
+    DATE_REQUIRED: 'Please select a date'
 });
 
 export default errorMessages;

src/digital-components/date-picker/date-picker.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="date-picker text-center"
-        :class="calendarViewDirection">
+        :class="[calendarViewDirection, { 'has-error': errors.length > 0 }]">
         <fieldset
             id="date-picker-fieldset"
             ref="datePickerFieldset">
@@ -83,7 +83,7 @@
                 id="date-of-month-error"
                 class="row form-test-error">
                 <ErrorMessage
-                    name="date-of-month"
+                    :name="customComponentId"
                     class="small mt-1">
                 </ErrorMessage>
             </div>

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

@@ -223,6 +223,15 @@ export default {
             preSelectedDate
         });
 
+        const premiumFeePromise = useMainStore().getMobilePremiumFee();
+
+        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
+            if (result.data) {
+                return useMainStore().priceOrderItemsAndSaveServerData(result.data);
+            }
+            return result.data;
+        });
+
         const alertReasonsPromise = locationAlerts.methods.loadInitialData(
             useMainStore().order.serviceLocation.zipCodeCtu,
             useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
@@ -241,6 +250,10 @@ export default {
             {
                 resultKey: 'datePickerInitialData',
                 promise: datePickerInitialDataPromise
+            },
+            {
+                resultKey: 'premiumFeeWithPrice',
+                promise: premiumFeeWithPricePromise
             }
         ];
 
@@ -250,7 +263,7 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
             vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
             vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
-            vm.setData(resultMap.datePickerInitialData.initialShopTimeSlotsResponse);
+            vm.setData(resultMap.datePickerInitialData.initialShopTimeSlotsResponse, resultMap.premiumFeeWithPrice);
             vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
         });
     },
@@ -324,8 +337,11 @@ export default {
 
             return serviceLocationPreReqs && paymentInfo && supportingItems && damageInfo;
         },
-        setData(initialShopTimeSlotsResponse) {
+        setData(initialShopTimeSlotsResponse, premiumFeeWithPriceResponse) {
             this.selectableDatesData = initialShopTimeSlotsResponse;
+            this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
+                ? premiumFeeWithPriceResponse[0]
+                : null;
         },
         async getAvailableDatesMethod(startDate, endDate) {
             const newShopTimeSlots = await getAvailableDates(

src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue

@@ -163,7 +163,10 @@ export default {
             let appointmentTypeCmsWidgetName;
             if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                 return null;
-            } if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+            }
+
+            if (this.appointmentType === AppointmentTypeStrings.MOBILE
+                || this.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC) {
                 appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG)
                     ? this.mobilePremiumCmsWidgetName
                     : this.mobileCmsWidgetName;
@@ -271,7 +274,8 @@ export default {
             return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
         },
         durationTextBlockCopy() {
-            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+            if (this.appointmentType === AppointmentTypeStrings.MOBILE
+                || this.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC) {
                 return null;
             } if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                 return this.inshopDurationText;
@@ -316,7 +320,8 @@ export default {
 
             if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
                 return this.getAvailableTimeSlotsForDropOff(this.timeSlotsForSelectedDate.timeSlots);
-            } if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+            } if (this.appointmentType === AppointmentTypeStrings.MOBILE
+                    || this.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC) {
                 return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
             }
             return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);

src/store/index.js

@@ -621,7 +621,16 @@ export const useMainStore = defineStore({
                 }
             });
         },
+        getMobilePremiumFee() {
+            const damageType = this.damage.isRepair ? 'Repair' : 'Replace';
+            const paymentType = this.order.payment.isInsurance ? 'Insurance' : 'Cash';
 
+            return globalMethods.callHttpClient({
+                method: endpoints.GetMobilePremiumFee.method,
+                endpoint: `${endpoints.GetMobilePremiumFee.url}/${paymentType}/${damageType}`,
+                logApiCall: true
+            });
+        },
         getMobileTimeSlots(startDate, endDate) {
             const { order } = this;
             const { vehicle } = this.order;