Able to move time-slot-question out of date-picker
still lots of work to do comments are in commented out timeslotquestion component in date-picker for help seeing what I did
This commit is contained in:
Scott Kiener
parent
ce053864e2
commit
4484fdfe4f
3 changed files with 35 additions and 51 deletions
|
|
@ -140,9 +140,9 @@
|
|||
@click="showAnotherMonth">
|
||||
View more dates
|
||||
</button>
|
||||
<timeSlotQuestion
|
||||
<!--<timeSlotQuestion
|
||||
ref="timeSlotModalQuestion"
|
||||
v-model="selectedTimeSlotInfo"
|
||||
v-model="selectedTimeSlotInfo" // Removed, some watcher logic for duration was in here, need ot recreate
|
||||
cmsWidgetName="TimeSlotModalQuestion"
|
||||
waitListLabelWidget="WaitListLabelWidget"
|
||||
waitListQuestionWidget="WaitListQuestionWidget"
|
||||
|
|
@ -152,15 +152,14 @@
|
|||
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
|
||||
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
|
||||
dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
|
||||
:selectedDate="selectedDate"
|
||||
:appointmentType="appointmentType"
|
||||
:premiumAppointmentFee="premiumAppointmentFee"
|
||||
:displayWaitList="displayWaitList"
|
||||
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
|
||||
:estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
|
||||
:estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
|
||||
@waitListRequested="handleWaitListRequested"
|
||||
@time-slot-modal-closed="timeSlotModalClosed" />
|
||||
: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>
|
||||
|
|
@ -206,7 +205,6 @@ export default {
|
|||
months: null,
|
||||
disableViewMoreDatesButton: false,
|
||||
hideSomeDaysForInitialView: null,
|
||||
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
|
||||
selectableDatesInshop: [], // NOTE: this and the mobile version below use monthNum (1-based), NOT monthIndex (0-based)
|
||||
selectableDatesMobile: [],
|
||||
durationTextBlockCopyForInshopOrDropoff: null,
|
||||
|
|
@ -243,12 +241,9 @@ export default {
|
|||
pricingByDayBasePrice: Number,
|
||||
pricingByDayUpcharge: Number,
|
||||
isPricingByDayExperiment: Boolean,
|
||||
timeSlotsForSelectedDate: Object,
|
||||
appointmentType: String,
|
||||
premiumAppointmentFee: Object,
|
||||
estimatedServiceMinutesMinimum: Number,
|
||||
estimatedServiceMinutesMaximum: Number,
|
||||
displayWaitList: Boolean,
|
||||
isMobileSelected: Boolean,
|
||||
},
|
||||
setup(props) {
|
||||
|
|
@ -373,9 +368,6 @@ export default {
|
|||
return null;
|
||||
},
|
||||
isSameDay() {
|
||||
if (!this.timeSlotsForSelectedDate) {
|
||||
return false;
|
||||
}
|
||||
const todaysDate = new Date().toISOString().split("T")[0];
|
||||
return this.selectedDate === todaysDate;
|
||||
},
|
||||
|
|
@ -383,7 +375,6 @@ export default {
|
|||
methods: {
|
||||
async initializeComponent(initialData) {
|
||||
await this.setCalendarData(initialData);
|
||||
this.$refs.timeSlotModalQuestion.initializeComponent();
|
||||
},
|
||||
fireDateSelectedEvent(event, date) {
|
||||
// Ignore if arrow key selected radioButton
|
||||
|
|
@ -950,30 +941,9 @@ export default {
|
|||
};
|
||||
window.requestAnimationFrame(step);
|
||||
},
|
||||
getSelectedTimeSlotInfo() {
|
||||
const supportingItems = this.getSupportingItems();
|
||||
|
||||
var isPremiumAppointment = false;
|
||||
if (supportingItems) {
|
||||
isPremiumAppointment =
|
||||
!!supportingItems.filter(
|
||||
(lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
|
||||
).length > 0;
|
||||
}
|
||||
|
||||
const selectedTimeSlotInfo = {
|
||||
timeSlot: store.getters.order.schedule,
|
||||
isPremiumAppointment: isPremiumAppointment,
|
||||
};
|
||||
|
||||
return selectedTimeSlotInfo;
|
||||
},
|
||||
getSupportingItems() {
|
||||
return store.getters.lineItems.supportingItems;
|
||||
},
|
||||
handleWaitListRequested(value) {
|
||||
this.$emit("waitListRequested", value);
|
||||
},
|
||||
getDurationTextBlockCopyForInshopOrDropoff(selectedRouteCode) {
|
||||
if (selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
|
||||
return this.overnightDropoffDurationText;
|
||||
|
|
@ -999,17 +969,10 @@ export default {
|
|||
this.scrollToElement("date-of-month-error");
|
||||
}
|
||||
},
|
||||
selectedTimeSlotInfo(newValue) {
|
||||
const routeCode = newValue?.timeSlot?.routeCode;
|
||||
this.durationTextBlockCopyForInshopOrDropoff =
|
||||
this.getDurationTextBlockCopyForInshopOrDropoff(routeCode);
|
||||
this.$emit("TimeSlotSelected", newValue); // needed to update footer button text on Schedule page and to save to Store correctly
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
ErrorMessage,
|
||||
timeSlotQuestion,
|
||||
textBlock,
|
||||
funnelSubHeader,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -133,13 +133,28 @@
|
|||
:pricingByDayUpcharge="pricingByDayUpcharge"
|
||||
:showPricingByDay="showPricingByDay"
|
||||
:isPricingByDayExperiment="isPricingByDayExperiment"
|
||||
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
|
||||
:appointmentType="appointmentType"
|
||||
:premiumAppointmentFee="mobilePremiumAppointmentFee"
|
||||
:estimatedServiceMinutesMinimum="getServiceMinutesMin"
|
||||
:estimatedServiceMinutesMaximum="getServiceMinutesMax"
|
||||
:estimatedServiceMinutesMaximum="getServiceMinutesMax" />
|
||||
<timeSlotQuestion
|
||||
ref="timeSlotModalQuestion"
|
||||
@timeSlotSelected="updateTimeSlot"
|
||||
cmsWidgetName="TimeSlotModalQuestion"
|
||||
waitListLabelWidget="WaitListLabelWidget"
|
||||
waitListQuestionWidget="WaitListQuestionWidget"
|
||||
mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
|
||||
mobileCmsWidgetName="MobileTimeSlotModal"
|
||||
dropoffCmsWidgetName="DropOffTimeSlotModal"
|
||||
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
|
||||
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
|
||||
dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
|
||||
:selectedDate="selectedDate"
|
||||
:appointmentType="appointmentType"
|
||||
:premiumAppointmentFee="premiumAppointmentFee"
|
||||
:displayWaitList="displayWaitList"
|
||||
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
|
||||
:estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
|
||||
:estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
|
||||
@waitListRequested="handleWaitListRequested" />
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
|
|
@ -158,10 +173,10 @@
|
|||
import alert from "@/ux-components/alert/alert";
|
||||
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
|
||||
import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
|
||||
import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
|
||||
import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question.vue";
|
||||
import shopListButton from "@/layouts/service-location/shop-question/shop-list-button/shop-list-button";
|
||||
import timeSlotQuestion from "@/layouts/schedule/time-slot-question/time-slot-question.vue";
|
||||
|
||||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
|
|
@ -1161,6 +1176,7 @@ export default {
|
|||
datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice;
|
||||
datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge;
|
||||
await this.$refs.datePicker.initializeComponent(datePickerInitialData);
|
||||
await this.$refs.timeSlotModalQuestion.initializeComponent();
|
||||
this.selectableDatesInshop =
|
||||
datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
|
||||
this.selectableDatesMobile =
|
||||
|
|
@ -1736,6 +1752,7 @@ export default {
|
|||
datePicker,
|
||||
locationAlerts,
|
||||
textBlock,
|
||||
timeSlotQuestion,
|
||||
|
||||
alert,
|
||||
serviceZipModalQuestion,
|
||||
|
|
|
|||
|
|
@ -408,6 +408,10 @@ export default {
|
|||
"update:modelValue",
|
||||
this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
|
||||
);
|
||||
this.$emit(
|
||||
"TimeSlotSelected",
|
||||
this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
|
||||
);
|
||||
},
|
||||
getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
|
||||
selectedRouteCode,
|
||||
|
|
|
|||
Loading…
Reference in a new issue