Moved duration into schedule
This commit is contained in:
Scott Kiener
parent
4484fdfe4f
commit
a193cd1808
2 changed files with 91 additions and 103 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
|
|
|
|||
Loading…
Reference in a new issue