Merge pull request #2841 from Safelite/schedule-refactor/post-parity

Final clean up on date-picker refactor

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

@@ -129,26 +129,6 @@
                 @click="showAnotherMonth">
                 View more dates
             </button>
-            <!--<timeSlotQuestion
-                ref="timeSlotModalQuestion"
-                v-model="selectedTimeSlotInfo" // Removed, some watcher logic for duration was in here, need ot recreate
-                cmsWidgetName="TimeSlotModalQuestion"
-                waitListLabelWidget="WaitListLabelWidget"
-                waitListQuestionWidget="WaitListQuestionWidget"
-                mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
-                mobileCmsWidgetName="MobileTimeSlotModal"
-                dropoffCmsWidgetName="DropOffTimeSlotModal"
-                sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-                overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
-                dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
-                :selectedDate="selectedDate" // used in date-picker
-                :appointmentType="appointmentType" // used in date-picker for duration
-                :premiumAppointmentFee="premiumAppointmentFee" // Removed from date-picker
-                :displayWaitList="displayWaitList" // Removed from date-picker
-                :timeSlotsForSelectedDate="timeSlotsForSelectedDate" // Removed from date-picker (but it had a null check for is-same-day)
-                :estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum" // used in date-picker for duration
-                :estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum" // used in date-picker for duration
-                @waitListRequested="handleWaitListRequested" // removed, it's a pass-through /> -->
         </fieldset>
     </div>
 </template>
@@ -886,14 +866,6 @@ export default {
     align-items: flex-start;
     text-align: left;
 
-    .duration-text-block {
-        text-align: left;
-    }
-
-    .date-picker-header {
-        margin-bottom: 1.5rem;
-    }
-
     fieldset {
         flex-grow: 1;
         position: relative;

src/layouts/schedule/duration-text-block/duration-text-block.vue

@@ -1,7 +1,6 @@
 <template>
     <textBlock
         :customText="durationTextBlockCopy"
-        justifyText="center"
         typeStyle="small"
         marginTopSizeOverride="0"
         class="duration-text-block" />
@@ -61,7 +60,7 @@ export default {
             );
 
             if (this.estimatedServiceMinutesMinimum && this.estimatedServiceMinutesMaximum) {
-                return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
+                return `${inshopDurationTextWithoutTime} <b>${inshopDurationTime}</b>`;
             }
 
             return null;
@@ -84,12 +83,6 @@ export default {
             return null;
         },
         durationTextBlockCopy() {
-            console.log(
-                "durationTextBlockCopy",
-                this.appointmentType,
-                this.estimatedServiceMinutesMaximum,
-                this.estimatedServiceMinutesMinimum
-            );
             if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 return this.mobileDurationText;
             } else if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {

src/layouts/schedule/schedule.vue

@@ -113,8 +113,8 @@
             <div class="row date-picker-wrapper">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
-                    <div v-show="appointmentType" class="date-picker-header">
+                    <div v-show="appointmentType" class="date-picker-header fw-normal mt-5 mb-5">
-                        <funnelSubHeader cmsWidgetName="DatePickerSubHeaderWidget" class="mt-5" />
+                        <textBlock :customText="datePickerHeaderText" typeStyle="button-question" />
                         <durationTextBlock
                             :isSameDay="isSameDay"
                             :appointmentType="appointmentType"
@@ -806,12 +806,9 @@ export default {
             return [];
         },
         selectedRouteCodeData() {
-            console.log("1", JSON.stringify(this.selectedTimeSlotInfo));
             if (!this.selectedTimeSlotInfo?.timeSlot?.routeCode) {
-                console.log("returning null");
                 return null;
             }
-            console.log("returning data");
             return {
                 routeCode: this.selectedTimeSlotInfo.timeSlot.routeCode,
                 isPremiumAppointment: this.selectedTimeSlotInfo.isPremiumAppointment,
@@ -820,6 +817,9 @@ export default {
         questionText() {
             return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
         },
+        datePickerHeaderText() {
+            return this.getCmsContent("DatePickerSubHeaderWidget", "HeaderText");
+        },
         appointmentTypeStrings() {
             return AppointmentTypeStrings;
         },
@@ -1605,7 +1605,6 @@ export default {
             }
         },
         updateTimeSlot(timeSlotObj) {
-            console.log("timeSlotObj", timeSlotObj);
             if (!timeSlotObj?.routeCode) {
                 this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
                 this.selectedTimeSlotInfo = {
@@ -1800,7 +1799,6 @@ export default {
             }
         },
         selectedTimeSlotInfo(newValue) {
-            console.log("heard a change on selectedTimeslotInfo", newValue);
             this.updateFooterButtonText(newValue);
         },
     },