CSR-1137 | Tech review changes
This commit is contained in:
Scott Kiener
parent
dd502e41ba
commit
6ca3d916ba
2 changed files with 51 additions and 42 deletions
|
|
@ -23,14 +23,14 @@
|
|||
v-model="selectedDate"
|
||||
:customSelectableDatesCallback="getAvailableDates" />
|
||||
<!-- todayOverrideDateString="2023-08-06T03:00:00" -->
|
||||
<time-slot-selection-modal
|
||||
ref="timeSlotModal"
|
||||
<time-slot-modal-question
|
||||
ref="timeSlotModalQuestion"
|
||||
cmsWidgetName="TimeSlotModalQuestion"
|
||||
v-model="selectedTimeSlotId"
|
||||
:dateAndTimeSlotData="DateAndTimeSlotDataForTimeslotModal"
|
||||
:dateAndTimeSlotData="TimeSlotsForSelectedDate"
|
||||
:estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
|
||||
:estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
|
||||
@timeSlotSaved="updateAppointmentDateAndTime" />
|
||||
<button @click="openInshopTimeslotsModal">Click for timeslots</button>
|
||||
:estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"/>
|
||||
<button @click="openInshopTimeSlotsModal">Click for timeslots</button>
|
||||
<funnel-footer
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="funnelFooter"
|
||||
|
|
@ -49,7 +49,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
|
|||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import datePicker from "@/digital-components/date-picker/date-picker";
|
||||
import timeSlotSelectionModal from "./time-slot-selection-modal/time-slot-selection-modal";
|
||||
import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -74,12 +74,6 @@ export default {
|
|||
return {
|
||||
selectedDate: null,
|
||||
selectedTimeSlotId: null,
|
||||
appointmentDateAndTime: {
|
||||
date: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
id: null,
|
||||
},
|
||||
selectableDatesData: [],
|
||||
};
|
||||
},
|
||||
|
|
@ -110,12 +104,29 @@ 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
|
||||
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
|
||||
},
|
||||
DateAndTimeSlotDataForTimeslotModal() {
|
||||
TimeSlotsForSelectedDate() {
|
||||
if (this.selectedDate === null) {
|
||||
return null;
|
||||
}
|
||||
return this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString);
|
||||
}
|
||||
},
|
||||
appointmentDateAndTime() {
|
||||
if (!this.selectedTimeSlotId) {
|
||||
return null;
|
||||
}
|
||||
const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(this.selectedTimeSlotId);
|
||||
if (timeSlotSelectedObject) {
|
||||
return {
|
||||
date: this.selectedDate.dateString,
|
||||
startTime: timeSlotSelectedObject.startTime,
|
||||
endTime: timeSlotSelectedObject.endTime,
|
||||
id: this.selectedTimeSlotId,
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
doesCopyContainRouterLink,
|
||||
|
|
@ -164,18 +175,11 @@ export default {
|
|||
});
|
||||
return responseData;
|
||||
},
|
||||
openInshopTimeslotsModal() {
|
||||
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;
|
||||
openInshopTimeSlotsModal() {
|
||||
this.$refs["timeSlotModalQuestion"].openModal();
|
||||
},
|
||||
getTimeSlotObjectFromTimeSlotId(timeSlotId) {
|
||||
let timeSlots = this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString).timeSlots;
|
||||
const timeSlots = this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString).timeSlots;
|
||||
return timeSlots.find(timeSlot => timeSlot.id === timeSlotId);
|
||||
},
|
||||
backButtonAction() {
|
||||
|
|
@ -199,7 +203,7 @@ export default {
|
|||
Form,
|
||||
loadingModal,
|
||||
datePicker,
|
||||
timeSlotSelectionModal,
|
||||
timeSlotModalQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,24 +3,23 @@
|
|||
ref="timeSlots"
|
||||
class="time-slots-modal"
|
||||
:headerText="dateSelectedReadableDate"
|
||||
footerButtonText="Save time slot"
|
||||
:footerButtonText="footerCloseButtonText"
|
||||
allowManualFooterDisableOverride
|
||||
:isFooterDisabledManualOverride="currentlySelectedTimeSlot === null"
|
||||
:isFooterDisabledManualOverride="selectedTimeSlot === null"
|
||||
:onModalOpenedCallback="onModalOpened"
|
||||
:onModalClosedCallback="onModalClosed"
|
||||
@footer-button-event="closeModal">
|
||||
<textBlock
|
||||
cmsWidgetName="appointmentDuration"
|
||||
:customText="durationSubHeaderText"
|
||||
:customText="appointmentDurationTextWithTime"
|
||||
justifyText="center"
|
||||
typeStyle="small"
|
||||
class="mb-5" />
|
||||
<buttonQuestion
|
||||
class="radioQuestion"
|
||||
:answers="availableTimeslots"
|
||||
:answers="availableTimeSlots"
|
||||
groupName="ChooseTimeSlot"
|
||||
textPosition="text-center"
|
||||
v-model="currentlySelectedTimeSlot"
|
||||
v-model="selectedTimeSlot"
|
||||
isRequired />
|
||||
</modal>
|
||||
</template>
|
||||
|
|
@ -34,38 +33,45 @@ import buttonQuestion from "@/digital-components/button-question/button-question
|
|||
import { daysOfWeek, monthsOfYear } from "@/constants/scheduling.js";
|
||||
|
||||
export default {
|
||||
name: "timeSlotSelectionModal",
|
||||
name: "timeSlotModalQuestion",
|
||||
props: {
|
||||
modelValue: Object,
|
||||
cmsWidgetName: String,
|
||||
dateAndTimeSlotData: Object,
|
||||
estimatedServiceMinutesMinimum: Number,
|
||||
estimatedServiceMinutesMaximum: Number,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentlySelectedTimeSlot: null,
|
||||
selectedTimeSlot: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
modelValue() {
|
||||
this.currentlySelectedTimeSlot = this.modelValue;
|
||||
this.selectedTimeSlot = this.modelValue;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
appointmentDurationTextFromCms() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
|
||||
},
|
||||
footerCloseButtonText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
||||
},
|
||||
dateSelectedReadableDate() {
|
||||
if (this.dateAndTimeSlotData === null) {
|
||||
return null;
|
||||
}
|
||||
// This conversion ensures we don't get get GMT induced date changes
|
||||
let dateObject = new Date (`${this.dateAndTimeSlotData.dateString}T00:00:00`);
|
||||
const 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
|
||||
return `${weekdayName}, ${month} ${numberDayOfMonth}`;
|
||||
},
|
||||
durationSubHeaderText() {
|
||||
let durationSubHeaderText = "Duration: ";
|
||||
appointmentDurationTextWithTime() {
|
||||
let durationSubHeaderText = this.appointmentDurationTextFromCms + " ";
|
||||
if (this.estimatedServiceMinutesMaximum >= 120) {
|
||||
durationSubHeaderText += `${this.estimatedServiceMinutesMinimum / 60} - ${
|
||||
this.estimatedServiceMinutesMaximum / 60} hours`;
|
||||
|
|
@ -74,7 +80,7 @@ export default {
|
|||
}
|
||||
return durationSubHeaderText;
|
||||
},
|
||||
availableTimeslots() {
|
||||
availableTimeSlots() {
|
||||
if (this.dateAndTimeSlotData === null) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -100,13 +106,12 @@ export default {
|
|||
},
|
||||
// fires any time the footer button is used, is fired before "onModalClosed"
|
||||
closeModal() {
|
||||
this.$emit("update:modelValue", this.currentlySelectedTimeSlot);
|
||||
this.$emit("update:modelValue", this.selectedTimeSlot);
|
||||
this.$refs["timeSlots"].closeModal();
|
||||
this.$emit("timeSlotSaved");
|
||||
},
|
||||
// fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
|
||||
onModalClosed() {
|
||||
this.currentlySelectedTimeSlot = this.modelValue;
|
||||
this.selectedTimeSlot = this.modelValue;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Loading…
Reference in a new issue