Update estimated service time text

USe a placeholder in the CMS
Make it not show when we don't have the times available
Make sure it can pull fform in-shop or mobile only zips
Remove old unused header

src/layouts/scheduling/scheduling.vue

@@ -5,12 +5,10 @@
         <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <h5 class="fw-normal mb-0 dark-header" :class="headerColor">
+                    <funnelSubHeader
-                        <span>
+                        cmsWidgetName="FunnelSubHeaderWidget"
-                            {{ serviceLocationText }}
+                        :overrideHeaderSubText="estimatedTimeText"
-                        </span>
+                        alignLeft />
-                    </h5>
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
                     <datePicker
                         class="mt-5"
                         v-model="selectedDate"
@@ -98,6 +96,7 @@ import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/sched
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
 import {
     flushPagePrereqsLogs,
     hasServiceZipInfo,
@@ -298,6 +297,17 @@ export default {
                 includeMobile: Boolean(mobileProviderNumber),
                 pageNameToLog: to.name,
             });
+            if (timeSlotsResultMap.inshopTimeSlots) {
+                vm.estimatedServiceMinutesMinimum =
+                    timeSlotsResultMap.inshopTimeSlots.estimatedServiceMinutesMinimum;
+                vm.estimatedServiceMinutesMaximum =
+                    timeSlotsResultMap.inshopTimeSlots.estimatedServiceMinutesMaximum;
+            } else if (timeSlotsResultMap.mobileTimeSlots) {
+                vm.estimatedServiceMinutesMinimum =
+                    timeSlotsResultMap.mobileTimeSlots.estimatedServiceMinutesMinimum;
+                vm.estimatedServiceMinutesMaximum =
+                    timeSlotsResultMap.mobileTimeSlots.estimatedServiceMinutesMaximum;
+            }
             assignInshopTimeSlotsFromV2Response(
                 vm.inshopProvidersAndTimeSlots,
                 timeSlotsResultMap.inshopTimeSlots
@@ -325,6 +335,24 @@ export default {
         viewMoreShopsText() {
             return this.getCmsContent("ViewMoreShopsWidget", "Text");
         },
+        estimatedTimeText() {
+            console.log(
+                "estimatedTimeText",
+                this.estimatedServiceMinutesMinimum,
+                this.estimatedServiceMinutesMaximum
+            );
+            if (!this.estimatedServiceMinutesMinimum || !this.estimatedServiceMinutesMaximum) {
+                return " ";
+            }
+            const durationText = getDisplayTextForDurationLength(
+                this.estimatedServiceMinutesMinimum,
+                this.estimatedServiceMinutesMaximum
+            );
+            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderSubText").replace(
+                "{custom:DURATION}",
+                durationText
+            );
+        },
         serviceZipCode() {
             return store.getters.order.serviceLocation.zipCode;
         },
@@ -376,6 +404,8 @@ export default {
             datesLoaded: false,
             datePickerStartDate: toDateString(0),
             datePickerEndDate: toDateString(SCHEDULE_FETCH_DAYS - 1),
+            estimatedServiceMinutesMinimum: null,
+            estimatedServiceMinutesMaximum: null,
             inshopProvidersAndTimeSlots: [],
             allShopProviders: [],
             mobileProviderAndTimeSlot: null,