CASH-814 | Styling, cleanup, auto select, CMS integration

src/digital-components/button-question/button-question.vue

@@ -407,7 +407,7 @@ export default {
     text-align: center;
     border-bottom: 1px solid black;
     line-height: 1px;
-    margin: 10px 0 20px;
+    margin: 20px 0 20px;
 
     span {
         background: #fff;

src/digital-components/date-picker/date-picker.spec.js

@@ -481,7 +481,7 @@ describe("date-picker.vue", () => {
                 },
             });
             const spy = jest.spyOn(wrapper.vm, "setCalendarData");
-
+            wrapper.vm.$refs.timeSlotModalQuestion.initializeComponent = jest.fn();
             wrapper.vm.$nextTick();
 
             // Act

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

@@ -140,6 +140,7 @@
                 dropoffCmsWidgetName="DropOffTimeSlotModal"
                 sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
                 overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+                dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
                 :selectedDate="selectedDate"
                 :appointmentType="appointmentType"
                 :premiumAppointmentFee="premiumAppointmentFee"
@@ -292,6 +293,7 @@ export default {
     methods: {
         initializeComponent(initialData) {
             this.setCalendarData(initialData);
+            this.$refs.timeSlotModalQuestion.initializeComponent();
         },
         fireDateSelectedEvent(event, date) {
             // Ignore if arrow key selected radioButton

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

@@ -10,7 +10,7 @@
         <buttonQuestion
             v-if="isDropOffAppointmentAvailable"
             v-model="selectedAnswerForDropOff"
-            questionText="Choose an option:"
+            :questionText="dropOffOrPickATimeQuestionLabelText"
             :answers="answersForDropOffQuestion"
             isRequired
             insertOrLabelBeforeFinalOption
@@ -142,6 +142,7 @@ export default {
         dropoffCmsWidgetName: String,
         sameDayDropOffCmsWidgetName: String,
         overnightDropOffCmsWidgetName: String,
+        dropOffOrPickATimeQuestionCmsWidgetName: String,
         appointmentType: String,
         timeSlotsForSelectedDate: Object,
         premiumAppointmentFee: Object,
@@ -154,7 +155,7 @@ export default {
     },
     data() {
         return {
-            selectedRouteCode: this.getSelectedRouteCode(),
+            selectedRouteCode: null,
             timeSlotModalListButton: timeSlotModalListButton,
             waitListRequested: this.getWaitListRequestedFromStore(),
             selectedAnswerForDropOff: null,
@@ -193,7 +194,11 @@ export default {
     computed: {
         supplementalInformationBlock() {
             let appointmentTypeCmsWidgetName;
-            if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+
+            if (this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) {
+                // This is planned to be used again for drop-off
+                // Leaving this here with that in mind, move logic from the final else in here
+                //   and only apply it when a dropoff slot is selected
                 return null;
             } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
@@ -224,9 +229,16 @@ export default {
                 cmsWidgetFieldMappings.MODAL_CLOSE_BUTTON
             );
         },
+        dropOffOrPickATimeQuestionLabelText() {
+            return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "QuestionText");
+        },
+        pickATimeButtonLabelText() {
+            return this.getCmsContent(this.dropOffOrPickATimeQuestionCmsWidgetName, "Answers")[0]
+                .Text;
+        },
         premiumAppointmentButtonText() {
             return this.getCmsContent(
-                this.mobilePremiumCmsWidgetName,
+                this.dropOffOrPickATimeQuestionCmsWidgetName,
                 cmsWidgetFieldMappings.TIME_SLOT_BUTTON
             );
         },
@@ -311,7 +323,7 @@ export default {
         durationTextBlockCopy() {
             if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 return null;
-            } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+            } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) {
                 if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
                     return this.overnightDropoffDurationText;
                 } else if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
@@ -354,9 +366,7 @@ export default {
             if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
             } else {
-                return this.getAvailableTimeSlotsForInshopOrDropOff(
-                    this.timeSlotsForSelectedDate.timeSlots
-                );
+                return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);
             }
         },
         answersForDropOffQuestion() {
@@ -387,7 +397,7 @@ export default {
             ) {
                 dropOffQuestionAnswers.push({
                     value: PICK_A_TIME_BUTTON_VALUE,
-                    buttonLabel: "Pick a time",
+                    buttonLabel: this.pickATimeButtonLabelText,
                 });
             }
             return dropOffQuestionAnswers;
@@ -426,8 +436,6 @@ export default {
             }
         },
         isDropOffAppointmentAvailable() {
-            console.log("its running");
-
             return (
                 this.answersForDropOffQuestion !== null &&
                 this.answersForDropOffQuestion.length !== 0 &&
@@ -442,6 +450,9 @@ export default {
         },
     },
     methods: {
+        initializeComponent() {
+            this.setSelectedRouteCodeFromParent();
+        },
         async setSelectedTimeSlot() {
             this.$emit(
                 "update:modelValue",
@@ -474,26 +485,6 @@ export default {
                     };
                 });
         },
-        getAvailableTimeSlotsForInshopOrDropOff(timeSlotsForSelectedDate) {
-            const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
-                let buttonLabelValue;
-                if (timeSlot.id.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
-                    buttonLabelValue = this.dropoffButtonText;
-                } else if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
-                    buttonLabelValue = this.overnightDropoffButtonText;
-                } else if (this.isSameDay) {
-                    buttonLabelValue = this.sameDayDropoffButtonText;
-                } else {
-                    buttonLabelValue = militaryToTwelveHourTime(timeSlot.startTime);
-                }
-                return {
-                    value: timeSlot.id,
-                    buttonLabel: buttonLabelValue,
-                };
-            });
-
-            return availableTimeSlots;
-        },
         getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
             const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
                 const readableTime = `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(
@@ -529,27 +520,27 @@ export default {
                 },
             };
         },
-        getSelectedRouteCode() {
-            let selectedRouteCode;
+        setSelectedRouteCodeFromParent() {
             if (!this.modelValue?.timeSlot) {
-                selectedRouteCode = null;
+                return;
             }
-
+            const routeCodeFromParent = this.modelValue.timeSlot.routeCode;
             if (this.modelValue?.isPremiumAppointment) {
-                selectedRouteCode = this.addPremiumFlagToInput(
-                    this.modelValue?.timeSlot?.routeCode
-                );
+                // Mobile Only
+                this.selectedAnswerForTimeSlots = this.addPremiumFlagToInput(routeCodeFromParent);
             } else {
-                selectedRouteCode = this.modelValue?.timeSlot?.routeCode;
+                if (this.isDropOffRouteCode(routeCodeFromParent)) {
+                    this.selectedAnswerForDropOff = routeCodeFromParent;
+                } else {
+                    this.selectedAnswerForDropOff = PICK_A_TIME_BUTTON_VALUE;
+                    this.selectedAnswerForTimeSlots = routeCodeFromParent;
+                }
             }
-
-            return selectedRouteCode;
         },
         getWaitListRequestedFromStore() {
             return store.getters.order.customer?.waitListRequested;
         },
         autoSelectTimeSlotIfOnlyOneIsAvailable() {
-            console.log(this.timeSlotsForSelectedDate.timeSlots?.length);
             const numberOfOptions = this.timeSlotsForSelectedDate.timeSlots?.length;
             if (numberOfOptions === 1) {
                 if (this.availableTimeSlots.length > 0) {
@@ -570,7 +561,6 @@ export default {
             if (routeCodeIncludesPremium) {
                 routeCode = this.removePremiumFlagFromInput(routeCode);
             }
-
             const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
                 (slot) => slot.id == routeCode
             );
@@ -611,6 +601,9 @@ export default {
             }
         },
         isDropOffRouteCode(routeCode) {
+            if (!routeCode) {
+                return false;
+            }
             return (
                 routeCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF) ||
                 routeCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)