CSR-1137 | Finished time slot selection for in shop
This commit is contained in:
Scott Kiener
parent
074beab149
commit
dd502e41ba
2 changed files with 63 additions and 105 deletions
|
|
@ -25,11 +25,11 @@
|
||||||
<!-- todayOverrideDateString="2023-08-06T03:00:00" -->
|
<!-- todayOverrideDateString="2023-08-06T03:00:00" -->
|
||||||
<time-slot-selection-modal
|
<time-slot-selection-modal
|
||||||
ref="timeSlotModal"
|
ref="timeSlotModal"
|
||||||
v-model="selectedTimeSlot"
|
v-model="selectedTimeSlotId"
|
||||||
:dateForTimeSlotPicker="dateForTimeSlotPicker"
|
:dateAndTimeSlotData="DateAndTimeSlotDataForTimeslotModal"
|
||||||
:availableTimeSlots="availableTimeSlots"
|
:estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
|
||||||
estimatedServiceMinutesMinimum="90"
|
:estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
|
||||||
estimatedServiceMinutesMaximum="180" />
|
@timeSlotSaved="updateAppointmentDateAndTime" />
|
||||||
<button @click="openInshopTimeslotsModal">Click for timeslots</button>
|
<button @click="openInshopTimeslotsModal">Click for timeslots</button>
|
||||||
<funnel-footer
|
<funnel-footer
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
|
|
@ -65,7 +65,6 @@ import {
|
||||||
} from "@/helpers/cms-content-helper";
|
} from "@/helpers/cms-content-helper";
|
||||||
import { errorMessages } from "@/constants/error-messages";
|
import { errorMessages } from "@/constants/error-messages";
|
||||||
import { required } from "@/helpers/validation-rules";
|
import { required } from "@/helpers/validation-rules";
|
||||||
import { daysOfWeek, monthsOfYear } from "@/constants/scheduling.js";
|
|
||||||
|
|
||||||
defineRule("date-required", required(errorMessages.DATE_REQUIRED));
|
defineRule("date-required", required(errorMessages.DATE_REQUIRED));
|
||||||
|
|
||||||
|
|
@ -74,91 +73,13 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedDate: null,
|
selectedDate: null,
|
||||||
selectedTimeSlot: null,
|
selectedTimeSlotId: null,
|
||||||
dateForTimeSlotPicker: new Date("May 23 2023"),
|
appointmentDateAndTime: {
|
||||||
availableTimeSlots: [
|
date: null,
|
||||||
"8:00 AM",
|
startTime: null,
|
||||||
"10:30 AM",
|
endTime: null,
|
||||||
"11:00 AM",
|
id: null,
|
||||||
"12:30 AM",
|
},
|
||||||
"1:00 PM",
|
|
||||||
"2:00 PM",
|
|
||||||
"4:30 PM",
|
|
||||||
"8:00 AM",
|
|
||||||
"10:30 AM",
|
|
||||||
"11:00 AM",
|
|
||||||
"12:30 AM",
|
|
||||||
"1:00 PM",
|
|
||||||
"2:00 PM",
|
|
||||||
"4:30 PM",
|
|
||||||
"8:00 AM",
|
|
||||||
"10:30 AM",
|
|
||||||
"11:00 AM",
|
|
||||||
"12:30 AM",
|
|
||||||
"1:00 PM",
|
|
||||||
"2:00 PM",
|
|
||||||
"4:30 PM",
|
|
||||||
],
|
|
||||||
mockSelectableDatesData: [
|
|
||||||
{ dateString: "2023-04-28" },
|
|
||||||
|
|
||||||
{ dateString: "2023-05-04" },
|
|
||||||
{ dateString: "2023-05-09" },
|
|
||||||
{ dateString: "2023-05-11" },
|
|
||||||
{ dateString: "2023-05-17" },
|
|
||||||
{ dateString: "2023-05-18" },
|
|
||||||
{ dateString: "2023-05-19" },
|
|
||||||
{ dateString: "2023-05-23" },
|
|
||||||
{ dateString: "2023-05-24" },
|
|
||||||
{ dateString: "2023-05-25" },
|
|
||||||
{ dateString: "2023-05-30" },
|
|
||||||
{ dateString: "2023-05-31" },
|
|
||||||
|
|
||||||
{ dateString: "2023-06-01" },
|
|
||||||
{ dateString: "2023-06-02" },
|
|
||||||
{ dateString: "2023-06-06" },
|
|
||||||
{ dateString: "2023-06-07" },
|
|
||||||
{ dateString: "2023-06-09" },
|
|
||||||
{ dateString: "2023-06-12" },
|
|
||||||
{ dateString: "2023-06-13" },
|
|
||||||
{ dateString: "2023-06-15" },
|
|
||||||
{ dateString: "2023-06-16" },
|
|
||||||
{ dateString: "2023-06-17" },
|
|
||||||
{ dateString: "2023-06-20" },
|
|
||||||
{ dateString: "2023-06-21" },
|
|
||||||
{ dateString: "2023-06-22" },
|
|
||||||
{ dateString: "2023-06-23" },
|
|
||||||
{ dateString: "2023-06-26" },
|
|
||||||
{ dateString: "2023-06-27" },
|
|
||||||
{ dateString: "2023-06-28" },
|
|
||||||
{ dateString: "2023-06-29" },
|
|
||||||
{ dateString: "2023-06-30" },
|
|
||||||
|
|
||||||
{ dateString: "2023-07-01" },
|
|
||||||
{ dateString: "2023-07-03" },
|
|
||||||
{ dateString: "2023-07-04" },
|
|
||||||
{ dateString: "2023-07-05" },
|
|
||||||
{ dateString: "2023-07-06" },
|
|
||||||
{ dateString: "2023-07-07" },
|
|
||||||
{ dateString: "2023-07-10" },
|
|
||||||
{ dateString: "2023-07-11" },
|
|
||||||
{ dateString: "2023-07-12" },
|
|
||||||
{ dateString: "2023-07-13" },
|
|
||||||
{ dateString: "2023-07-14" },
|
|
||||||
{ dateString: "2023-07-15" },
|
|
||||||
{ dateString: "2023-07-17" },
|
|
||||||
{ dateString: "2023-07-18" },
|
|
||||||
{ dateString: "2023-07-19" },
|
|
||||||
{ dateString: "2023-07-20" },
|
|
||||||
{ dateString: "2023-07-21" },
|
|
||||||
{ dateString: "2023-07-24" },
|
|
||||||
{ dateString: "2023-07-25" },
|
|
||||||
{ dateString: "2023-07-26" },
|
|
||||||
{ dateString: "2023-07-27" },
|
|
||||||
{ dateString: "2023-07-28" },
|
|
||||||
{ dateString: "2023-07-29" },
|
|
||||||
{ dateString: "2023-07-31" },
|
|
||||||
],
|
|
||||||
selectableDatesData: [],
|
selectableDatesData: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
@ -189,12 +110,12 @@ export default {
|
||||||
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
|
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
|
||||||
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
|
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
|
||||||
},
|
},
|
||||||
DateSelectedReadableDate() {
|
DateAndTimeSlotDataForTimeslotModal() {
|
||||||
const dayOfWeek = this.dateForTimeSlotPicker.getDay();
|
if (this.selectedDate === null) {
|
||||||
const month = this.dateForTimeSlotPicker.getMonth();
|
return null;
|
||||||
const dayOfMonth = this.dateForTimeSlotPicker.getDate();
|
}
|
||||||
return `${daysOfWeek[dayOfWeek]}, ${monthsOfYear[month]} ${dayOfMonth}`;
|
return this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString);
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
doesCopyContainRouterLink,
|
doesCopyContainRouterLink,
|
||||||
|
|
@ -219,10 +140,13 @@ export default {
|
||||||
const newShopTimeSlots = newShopTimeSlotsResponse.data;
|
const newShopTimeSlots = newShopTimeSlotsResponse.data;
|
||||||
// console.log("newShopTimeSlots ", newShopTimeSlots)
|
// console.log("newShopTimeSlots ", newShopTimeSlots)
|
||||||
|
|
||||||
|
|
||||||
// ADD API CALL RESULTS TO EXISTING DATE DATA
|
// ADD API CALL RESULTS TO EXISTING DATE DATA
|
||||||
this.selectableDatesData = this.selectableDatesData.concat(
|
this.selectableDatesData = this.selectableDatesData.concat(
|
||||||
this.convertApiResponse(newShopTimeSlots.days)
|
this.convertApiResponse(newShopTimeSlots.days)
|
||||||
);
|
);
|
||||||
|
this.selectableDatesData.estimatedServiceMinutesMaximum = newShopTimeSlots.estimatedServiceMinutesMaximum;
|
||||||
|
this.selectableDatesData.estimatedServiceMinutesMinimum = newShopTimeSlots.estimatedServiceMinutesMinimum;
|
||||||
console.log("this.selectableDatesData is now: ", this.selectableDatesData);
|
console.log("this.selectableDatesData is now: ", this.selectableDatesData);
|
||||||
|
|
||||||
// RETURN AGGREGATE DATE DATA
|
// RETURN AGGREGATE DATE DATA
|
||||||
|
|
@ -241,9 +165,19 @@ export default {
|
||||||
return responseData;
|
return responseData;
|
||||||
},
|
},
|
||||||
openInshopTimeslotsModal() {
|
openInshopTimeslotsModal() {
|
||||||
|
|
||||||
this.$refs["timeSlotModal"].openModal();
|
this.$refs["timeSlotModal"].openModal();
|
||||||
},
|
},
|
||||||
|
updateAppointmentDateAndTime() {
|
||||||
|
let timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(this.selectedTimeSlotId);
|
||||||
|
this.appointmentDateAndTime.date = this.selectedDate.dateString;
|
||||||
|
this.appointmentDateAndTime.startTime = timeSlotSelectedObject.startTime;
|
||||||
|
this.appointmentDateAndTime.endTime = timeSlotSelectedObject.endTime;
|
||||||
|
this.appointmentDateAndTime.id = this.selectedTimeSlotId;
|
||||||
|
},
|
||||||
|
getTimeSlotObjectFromTimeSlotId(timeSlotId) {
|
||||||
|
let timeSlots = this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString).timeSlots;
|
||||||
|
return timeSlots.find(timeSlot => timeSlot.id === timeSlotId);
|
||||||
|
},
|
||||||
backButtonAction() {
|
backButtonAction() {
|
||||||
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
class="mb-5" />
|
class="mb-5" />
|
||||||
<buttonQuestion
|
<buttonQuestion
|
||||||
class="radioQuestion"
|
class="radioQuestion"
|
||||||
:answers="availableTimeSlots"
|
:answers="availableTimeslots"
|
||||||
groupName="ChooseTimeSlot"
|
groupName="ChooseTimeSlot"
|
||||||
textPosition="text-center"
|
textPosition="text-center"
|
||||||
v-model="currentlySelectedTimeSlot"
|
v-model="currentlySelectedTimeSlot"
|
||||||
|
|
@ -37,8 +37,7 @@ export default {
|
||||||
name: "timeSlotSelectionModal",
|
name: "timeSlotSelectionModal",
|
||||||
props: {
|
props: {
|
||||||
modelValue: Object,
|
modelValue: Object,
|
||||||
dateForTimeSlotPicker: Date,
|
dateAndTimeSlotData: Object,
|
||||||
availableTimeSlots: Array,
|
|
||||||
estimatedServiceMinutesMinimum: Number,
|
estimatedServiceMinutesMinimum: Number,
|
||||||
estimatedServiceMinutesMaximum: Number,
|
estimatedServiceMinutesMaximum: Number,
|
||||||
},
|
},
|
||||||
|
|
@ -54,9 +53,14 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
dateSelectedReadableDate() {
|
dateSelectedReadableDate() {
|
||||||
const weekdayName = daysOfWeek[this.dateForTimeSlotPicker.getDay()];
|
if (this.dateAndTimeSlotData === null) {
|
||||||
const month = monthsOfYear[this.dateForTimeSlotPicker.getMonth()];
|
return null;
|
||||||
const numberDayOfMonth = this.dateForTimeSlotPicker.getDate();
|
}
|
||||||
|
// This conversion ensures we don't get get GMT induced date changes
|
||||||
|
let dateObject = new Date (`${this.dateAndTimeSlotData.dateString}T00:00:00`);
|
||||||
|
const weekdayName = daysOfWeek[dateObject.getDay()];
|
||||||
|
const month = monthsOfYear[dateObject.getMonth()];
|
||||||
|
const numberDayOfMonth = dateObject.getDate();
|
||||||
// Ex. Tuesday, April 23
|
// Ex. Tuesday, April 23
|
||||||
return `${weekdayName}, ${month} ${numberDayOfMonth}`;
|
return `${weekdayName}, ${month} ${numberDayOfMonth}`;
|
||||||
},
|
},
|
||||||
|
|
@ -70,6 +74,25 @@ export default {
|
||||||
}
|
}
|
||||||
return durationSubHeaderText;
|
return durationSubHeaderText;
|
||||||
},
|
},
|
||||||
|
availableTimeslots() {
|
||||||
|
if (this.dateAndTimeSlotData === null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return this.dateAndTimeSlotData.timeSlots.map(timeslot => {
|
||||||
|
let hours = timeslot.startTime.split(":")[0];
|
||||||
|
let minutes = timeslot.startTime.split(":")[1];
|
||||||
|
let meridianNotation = "AM";
|
||||||
|
if (timeslot.startTime.split(":")[0] > 12) {
|
||||||
|
hours -= 12;
|
||||||
|
meridianNotation = "PM";
|
||||||
|
}
|
||||||
|
let readableTime = `${hours}:${minutes} ${meridianNotation}`;
|
||||||
|
return {
|
||||||
|
value: timeslot.id,
|
||||||
|
buttonLabel: readableTime,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
openModal() {
|
openModal() {
|
||||||
|
|
@ -78,7 +101,8 @@ export default {
|
||||||
// fires any time the footer button is used, is fired before "onModalClosed"
|
// fires any time the footer button is used, is fired before "onModalClosed"
|
||||||
closeModal() {
|
closeModal() {
|
||||||
this.$emit("update:modelValue", this.currentlySelectedTimeSlot);
|
this.$emit("update:modelValue", this.currentlySelectedTimeSlot);
|
||||||
this.$refs["timeSlots"].closeModal("test");
|
this.$refs["timeSlots"].closeModal();
|
||||||
|
this.$emit("timeSlotSaved");
|
||||||
},
|
},
|
||||||
// fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
|
// fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
|
||||||
onModalClosed() {
|
onModalClosed() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue