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
|
<div
|
||||||
class="date-picker text-center"
|
class="date-picker text-center"
|
||||||
:class="`${calendarViewDirection} calendar-2025 ${showPricingByDayClass}`">
|
: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">
|
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
|
||||||
<legend class="sr-only">Select a day and time</legend>
|
<legend class="sr-only">Select a day and time</legend>
|
||||||
<div
|
<div
|
||||||
|
|
@ -165,10 +154,6 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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
|
// Supporting files
|
||||||
import loader from "@/ux-components/loader/loader";
|
import loader from "@/ux-components/loader/loader";
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
|
|
@ -178,12 +163,6 @@ import {
|
||||||
MONTHS_OF_YEAR,
|
MONTHS_OF_YEAR,
|
||||||
DAYS_OF_WEEK,
|
DAYS_OF_WEEK,
|
||||||
} from "@/digital-components/date-picker/mixins/constants";
|
} from "@/digital-components/date-picker/mixins/constants";
|
||||||
import {
|
|
||||||
AppointmentTypeStrings,
|
|
||||||
RouteCodeFlags,
|
|
||||||
PREMIUM_FEE_PART_TYPE,
|
|
||||||
cmsWidgetFieldMappings,
|
|
||||||
} from "@/constants/schedule-constants";
|
|
||||||
import {
|
import {
|
||||||
selectableDaysOptions,
|
selectableDaysOptions,
|
||||||
requiredParameter,
|
requiredParameter,
|
||||||
|
|
@ -195,7 +174,6 @@ import {
|
||||||
import { useField, ErrorMessage } from "vee-validate";
|
import { useField, ErrorMessage } from "vee-validate";
|
||||||
import { deepClone } from "@/helpers/object-helper";
|
import { deepClone } from "@/helpers/object-helper";
|
||||||
import { v4 as uuidv4 } from "uuid";
|
import { v4 as uuidv4 } from "uuid";
|
||||||
import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "datePicker",
|
name: "datePicker",
|
||||||
|
|
@ -207,7 +185,6 @@ export default {
|
||||||
hideSomeDaysForInitialView: null,
|
hideSomeDaysForInitialView: null,
|
||||||
selectableDatesInshop: [], // NOTE: this and the mobile version below use monthNum (1-based), NOT monthIndex (0-based)
|
selectableDatesInshop: [], // NOTE: this and the mobile version below use monthNum (1-based), NOT monthIndex (0-based)
|
||||||
selectableDatesMobile: [],
|
selectableDatesMobile: [],
|
||||||
durationTextBlockCopyForInshopOrDropoff: null,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -305,72 +282,6 @@ export default {
|
||||||
this.dispatchStoreAction(this.storeActions.SAVE_WAITLIST_REQUESTED, false, false);
|
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: {
|
methods: {
|
||||||
async initializeComponent(initialData) {
|
async initializeComponent(initialData) {
|
||||||
|
|
@ -944,18 +855,6 @@ export default {
|
||||||
getSupportingItems() {
|
getSupportingItems() {
|
||||||
return store.getters.lineItems.supportingItems;
|
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: {
|
watch: {
|
||||||
modelValue(newValue) {
|
modelValue(newValue) {
|
||||||
|
|
@ -973,8 +872,6 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
loader,
|
loader,
|
||||||
ErrorMessage,
|
ErrorMessage,
|
||||||
textBlock,
|
|
||||||
funnelSubHeader,
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -116,6 +116,16 @@
|
||||||
<div class="row justify-content-center date-picker-wrapper">
|
<div class="row justify-content-center date-picker-wrapper">
|
||||||
<div class="col-md-6 col-xl-4">
|
<div class="col-md-6 col-xl-4">
|
||||||
<locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
|
<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
|
<datePicker
|
||||||
:currentZip="zipCode"
|
:currentZip="zipCode"
|
||||||
:currentProviderNumber="selectedProvider?.providerNumber"
|
:currentProviderNumber="selectedProvider?.providerNumber"
|
||||||
|
|
@ -198,6 +208,7 @@ import {
|
||||||
RouteCodeFlags,
|
RouteCodeFlags,
|
||||||
PREMIUM_FEE_PART_TYPE,
|
PREMIUM_FEE_PART_TYPE,
|
||||||
PRICING_BY_DAY_PART_TYPE,
|
PRICING_BY_DAY_PART_TYPE,
|
||||||
|
cmsWidgetFieldMappings
|
||||||
} from "@/constants/schedule-constants";
|
} from "@/constants/schedule-constants";
|
||||||
|
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
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 { getItemsWithoutRecalParts } from "@/helpers/recal-helper";
|
||||||
import { deepClone } from "@/helpers/object-helper";
|
import { deepClone } from "@/helpers/object-helper";
|
||||||
import { debugLog } from "@/helpers/debug-log-helper";
|
import { debugLog } from "@/helpers/debug-log-helper";
|
||||||
|
import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
|
||||||
|
|
||||||
// DEFINE VALIDATION RULES
|
// DEFINE VALIDATION RULES
|
||||||
defineRule("mobile-location-required", (value) => {
|
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: {
|
methods: {
|
||||||
splitCopyOnCMSPlaceHolder,
|
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() {
|
arePagePrerequisitesValid() {
|
||||||
const paymentInfo = store.getters.payment.isInsurance !== null;
|
const paymentInfo = store.getters.payment.isInsurance !== null;
|
||||||
const damageInfo =
|
const damageInfo =
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue