From a193cd1808954cd9d6d26cd71df23ffe272b73ab Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 31 Jul 2025 08:09:52 -0400
Subject: [PATCH] Moved duration into schedule

---
 .../date-picker/date-picker.vue               | 103 ------------------
 src/layouts/schedule/schedule.vue             |  91 ++++++++++++++++
 2 files changed, 91 insertions(+), 103 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 5f508f5be..dd3f7862a 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -2,17 +2,6 @@
     <div
         class="date-picker text-center"
         :class="`${calendarViewDirection} calendar-2025 ${showPricingByDayClass}`">
-        <div class="date-picker-header">
-            <funnelSubHeader cmsWidgetName="DatePickerSubHeaderWidget" class="mt-5" />
-            <textBlock
-                v-show="durationTextBlockCopy"
-                :customText="durationTextBlockCopy"
-                justifyText="center"
-                typeStyle="small"
-                marginTopSizeOverride="0"
-                class="duration-text-block" />
-        </div>
-
         <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
             <legend class="sr-only">Select a day and time</legend>
             <div
@@ -165,10 +154,6 @@
 </template>
 
 <script>
-import timeSlotQuestion from "@/layouts/schedule/time-slot-question/time-slot-question.vue";
-import textBlock from "@/digital-components/text-block/text-block";
-import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-
 // Supporting files
 import loader from "@/ux-components/loader/loader";
 import store from "@/store";
@@ -178,12 +163,6 @@ import {
     MONTHS_OF_YEAR,
     DAYS_OF_WEEK,
 } from "@/digital-components/date-picker/mixins/constants";
-import {
-    AppointmentTypeStrings,
-    RouteCodeFlags,
-    PREMIUM_FEE_PART_TYPE,
-    cmsWidgetFieldMappings,
-} from "@/constants/schedule-constants";
 import {
     selectableDaysOptions,
     requiredParameter,
@@ -195,7 +174,6 @@ import {
 import { useField, ErrorMessage } from "vee-validate";
 import { deepClone } from "@/helpers/object-helper";
 import { v4 as uuidv4 } from "uuid";
-import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
 
 export default {
     name: "datePicker",
@@ -207,7 +185,6 @@ export default {
             hideSomeDaysForInitialView: null,
             selectableDatesInshop: [], // NOTE: this and the mobile version below use monthNum (1-based), NOT monthIndex (0-based)
             selectableDatesMobile: [],
-            durationTextBlockCopyForInshopOrDropoff: null,
         };
     },
     props: {
@@ -305,72 +282,6 @@ export default {
                 this.dispatchStoreAction(this.storeActions.SAVE_WAITLIST_REQUESTED, false, false);
             },
         },
-        dropOffDurationText() {
-            return this.getCmsContent("DropOffTimeSlotModal", cmsWidgetFieldMappings.DURATION);
-        },
-        sameDayDropoffDurationText() {
-            return this.getCmsContent(
-                "SameDayDropOffTimeSlotModal",
-                cmsWidgetFieldMappings.DURATION
-            );
-        },
-        overnightDropoffDurationText() {
-            return this.getCmsContent(
-                "OvernightDropOffTimeSlotModal",
-                cmsWidgetFieldMappings.DURATION
-            );
-        },
-        inshopDurationText() {
-            const inshopDurationTextWithoutTime = this.getCmsContent(
-                "TimeSlotModalQuestion",
-                cmsWidgetFieldMappings.DURATION
-            );
-
-            const inshopDurationTime = getDisplayTextForDurationLength(
-                this.estimatedServiceMinutesMinimum,
-                this.estimatedServiceMinutesMaximum
-            );
-
-            if (this.estimatedServiceMinutesMinimum && this.estimatedServiceMinutesMaximum) {
-                return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
-            }
-
-            return null;
-        },
-        mobileDurationText() {
-            const mobileDurationTextWithoutTime = this.getCmsContent(
-                "TimeSlotModalQuestion",
-                cmsWidgetFieldMappings.DURATION
-            );
-
-            const mobileDurationTime = getDisplayTextForDurationLength(
-                this.estimatedServiceMinutesMinimum,
-                this.estimatedServiceMinutesMaximum
-            );
-
-            if (this.estimatedServiceMinutesMinimum && this.estimatedServiceMinutesMaximum) {
-                return `${mobileDurationTextWithoutTime} ${mobileDurationTime}`;
-            }
-
-            return null;
-        },
-        durationTextBlockCopy() {
-            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                return this.mobileDurationText;
-            } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                return this.inshopDurationText;
-            } else if (
-                this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF ||
-                this.appointmentType === AppointmentTypeStrings.DROP_OFF
-            ) {
-                return this.durationTextBlockCopyForInshopOrDropoff ?? this.inshopDurationText;
-            }
-            return null;
-        },
-        isSameDay() {
-            const todaysDate = new Date().toISOString().split("T")[0];
-            return this.selectedDate === todaysDate;
-        },
     },
     methods: {
         async initializeComponent(initialData) {
@@ -944,18 +855,6 @@ export default {
         getSupportingItems() {
             return store.getters.lineItems.supportingItems;
         },
-        getDurationTextBlockCopyForInshopOrDropoff(selectedRouteCode) {
-            if (selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
-                return this.overnightDropoffDurationText;
-            } else if (selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
-                if (this.isSameDay) {
-                    return this.sameDayDropoffDurationText;
-                } else {
-                    return this.dropOffDurationText;
-                }
-            }
-            return this.inshopDurationText;
-        },
     },
     watch: {
         modelValue(newValue) {
@@ -973,8 +872,6 @@ export default {
     components: {
         loader,
         ErrorMessage,
-        textBlock,
-        funnelSubHeader,
     },
 };
 </script>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 24635a1f5..67056c67d 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -116,6 +116,16 @@
             <div class="row justify-content-center date-picker-wrapper">
                 <div class="col-md-6 col-xl-4">
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
+                    <div class="date-picker-header">
+                        <funnelSubHeader cmsWidgetName="DatePickerSubHeaderWidget" class="mt-5" />
+                        <textBlock
+                            v-show="durationTextBlockCopy"
+                            :customText="durationTextBlockCopy"
+                            justifyText="center"
+                            typeStyle="small"
+                            marginTopSizeOverride="0"
+                            class="duration-text-block" />
+                    </div>
                     <datePicker
                         :currentZip="zipCode"
                         :currentProviderNumber="selectedProvider?.providerNumber"
@@ -198,6 +208,7 @@ import {
     RouteCodeFlags,
     PREMIUM_FEE_PART_TYPE,
     PRICING_BY_DAY_PART_TYPE,
+    cmsWidgetFieldMappings
 } from "@/constants/schedule-constants";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -230,6 +241,7 @@ import { getAmountDue, getPricingByDayPartWithPrice } from "@/helpers/pricing-he
 import { getItemsWithoutRecalParts } from "@/helpers/recal-helper";
 import { deepClone } from "@/helpers/object-helper";
 import { debugLog } from "@/helpers/debug-log-helper";
+import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
 
 // DEFINE VALIDATION RULES
 defineRule("mobile-location-required", (value) => {
@@ -835,9 +847,88 @@ export default {
                 );
             }
         },
+        durationTextBlockCopy() {
+            console.log("durationTextBlockCopy", this.appointmentType, this.getServiceMinutesMax, this.getServiceMinutesMin);
+            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+                return this.mobileDurationText;
+            } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                return this.inshopDurationText;
+            } else if (
+                this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF ||
+                this.appointmentType === AppointmentTypeStrings.DROP_OFF
+            ) {
+                return this.getDurationTextBlockCopyForInshopOrDropoff(this.selectedTimeSlotInfo.timeSlot.routeCode);
+            }
+            return null;
+        },
+        isSameDay() {
+            const todaysDate = new Date().toISOString().split("T")[0];
+            return this.selectedDate === todaysDate;
+        },
+        dropOffDurationText() {
+            return this.getCmsContent("DropOffTimeSlotModal", cmsWidgetFieldMappings.DURATION);
+        },
+        sameDayDropoffDurationText() {
+            return this.getCmsContent(
+                "SameDayDropOffTimeSlotModal",
+                cmsWidgetFieldMappings.DURATION
+            );
+        },
+        overnightDropoffDurationText() {
+            return this.getCmsContent(
+                "OvernightDropOffTimeSlotModal",
+                cmsWidgetFieldMappings.DURATION
+            );
+        },
+        inshopDurationText() {
+            const inshopDurationTextWithoutTime = this.getCmsContent(
+                "TimeSlotModalQuestion",
+                cmsWidgetFieldMappings.DURATION
+            );
+
+            const inshopDurationTime = getDisplayTextForDurationLength(
+                this.getServiceMinutesMin,
+                this.getServiceMinutesMax
+            );
+
+            if (this.getServiceMinutesMin && this.getServiceMinutesMax) {
+                return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
+            }
+
+            return null;
+        },
+        mobileDurationText() {
+            const mobileDurationTextWithoutTime = this.getCmsContent(
+                "TimeSlotModalQuestion",
+                cmsWidgetFieldMappings.DURATION
+            );
+
+            const mobileDurationTime = getDisplayTextForDurationLength(
+                this.getServiceMinutesMin,
+                this.getServiceMinutesMax
+            );
+
+            if (this.getServiceMinutesMin && this.getServiceMinutesMax) {
+                return `${mobileDurationTextWithoutTime} ${mobileDurationTime}`;
+            }
+
+            return null;
+        },
     },
     methods: {
         splitCopyOnCMSPlaceHolder,
+        getDurationTextBlockCopyForInshopOrDropoff(selectedRouteCode) {
+            if (selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                return this.overnightDropoffDurationText;
+            } else if (selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
+                if (this.isSameDay) {
+                    return this.sameDayDropoffDurationText;
+                } else {
+                    return this.dropOffDurationText;
+                }
+            }
+            return this.inshopDurationText;
+        },
         arePagePrerequisitesValid() {
             const paymentInfo = store.getters.payment.isInsurance !== null;
             const damageInfo =