CSR-1137 | Integrate appointmentType from store

Used to be hardcoded
Also updates some durationText stuff

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

@@ -72,6 +72,7 @@
 <script>
 // Supporting files
 import loader from "@/ux-components/loader/loader";
+import store from "@/store";
 import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
 import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
 
@@ -203,7 +204,7 @@ export default {
             const todayDate = config.todayOverrideDateString
                 ? new Date(config.todayOverrideDateString)
                 : new Date();
-
+                
             let todayMonthIndex = todayDate.getMonth() + 1;
             let todayYearNum = todayDate.getFullYear();
             let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
@@ -244,7 +245,8 @@ export default {
             let myPromise = new Promise((resolve, reject) => {
                 const response = config.customSelectableDatesCallback(
                     initialViewStartDate,
-                    initialViewEndDate
+                    initialViewEndDate,
+                    store.getters.order.serviceLocation.appointmentType,
                 );
                 resolve(response);
             });
@@ -523,7 +525,8 @@ export default {
         async updateSelectableDates(monthStart, monthEnd) {
             const moreSelectableDates = await this.customSelectableDatesCallback(
                 monthStart,
-                monthEnd
+                monthEnd,
+                this.$store.getters.order.serviceLocation.appointmentType,
             );
             moreSelectableDates.days.forEach((selectableDate) => {
                 const index = this.selectableDatesData.findIndex(

src/layouts/schedule/schedule.vue

@@ -91,14 +91,14 @@ import store from "@/store";
 defineRule("date-required", required(errorMessages.DATE_REQUIRED));
 defineRule("time-slot-selection-required", required(errorMessages.DATE_REQUIRED));
 
-const getAvailableDates = async (startDate, endDate) => {
+const getAvailableDates = async (startDate, endDate, appointmentType) => {
     // USING DATES PASSED, MAKE AN API CALL
     const newShopTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
         storeActions.GET_SHOP_TIME_SLOTS,
         {
             startDate: startDate,
             endDate: endDate,
-            shopAppointmentType: "mobile", // TODO - PASS THIS IN FROM PREVIOUS PAGE?
+            shopAppointmentType: appointmentType,
         },
         false
     );
@@ -257,7 +257,7 @@ export default {
             // NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
         },
         async getAvailableDatesMethod(startDate, endDate) {
-            const newShopTimeSlots = await getAvailableDates(startDate, endDate);
+            const newShopTimeSlots = await getAvailableDates(startDate, endDate, this.appointmentType);
             // ADD API CALL RESULTS TO EXISTING DATE DATA
             this.selectableDatesData.days = this.selectableDatesData.days.concat(
                 newShopTimeSlots.days

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

@@ -8,8 +8,8 @@
         :onModalClosedCallback="onModalClosed"
         @footer-button-event="closeModal">
         <textBlock
-            v-show="inshopAppointmentDurationTextWithTime"
+            v-show="durationTextBlockCopy"
-            :customText="inshopAppointmentDurationTextWithTime"
+            :customText="durationTextBlockCopy"
             justifyText="center"
             typeStyle="small"
             class="duration-text-block" />
@@ -90,13 +90,18 @@ export default {
     watch: {
         modelValue() {
             this.selectedTimeSlot = this.modelValue;
+            // Run component validation that is used at parent level
             this.handleChange(this.modelValue);
         },
+        // dateAndTimeSlotData(newValue, oldValue) {
+        //     const numberOfOptions = newValue?.timeSlots.length;
+        //     console.log('running');
+        //     if (numberOfOptions === 1) {
+        //         this.selectedTimeSlot = newValue.timeSlots[0].id;
+        //     }
+        // }
     },
     computed: {
-        appointmentDurationTextFromCms() {
-            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
-        },
         supplementalInformationBlock() {
             let appointmentTypeCmsWidgetName;
             let cmsFieldName = "BodyText";
@@ -127,6 +132,26 @@ export default {
         dropoffDisclaimerText() {
             return this.getCmsContent(this.dropoffCmsWidgetName, "FooterText");
         },
+        dropOffDurationText() {
+            return this.getCmsContent(this.dropoffCmsWidgetName, "SubheaderText");
+        },
+        inshopDurationText() {
+            const inshopDurationTextWithoutTime = this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+            const inshopDurationTime = this.getDisplayTextForDurationLength(
+                    this.estimatedServiceMinutesMinimum,
+                    this.estimatedServiceMinutesMaximum
+                );
+            return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
+        },
+        durationTextBlockCopy() {
+            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+                return null;
+            } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                return this.inshopDurationText;
+            } else {
+                return this.dropOffDurationText;
+            }
+        },
         shouldShowDropoffDisclaimerText() {
             return this.appointmentType === AppointmentTypeStrings.DROP_OFF && !this.isSameDay;
         },
@@ -145,21 +170,6 @@ export default {
             // Ex. Tuesday, April 23
             return `${weekdayName}, ${month} ${numberDayOfMonth}`;
         },
-        inshopAppointmentDurationTextWithTime() {
-            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                return null;
-            }
-            let durationSubHeaderText = this.appointmentDurationTextFromCms + " ";
-            if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
-                durationSubHeaderText += "All day";
-            } else {
-                durationSubHeaderText += this.getDisplayTextForDurationLength(
-                    this.estimatedServiceMinutesMinimum,
-                    this.estimatedServiceMinutesMaximum
-                );
-            }
-            return durationSubHeaderText;
-        },
         availableTimeSlots() {
             if (this.dateAndTimeSlotData === null) {
                 return null;