Merge pull request #1143 from Safelite/feature/CSR-1137
CSR-1137 | Handle auto-loading of existing store data
This commit is contained in:
commit
fbc8cee0d4
2 changed files with 16 additions and 16 deletions
|
|
@ -185,6 +185,7 @@ export default {
|
||||||
vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
|
vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
|
||||||
? resultMap.premiumFeeWithPrice[0]
|
? resultMap.premiumFeeWithPrice[0]
|
||||||
: null;
|
: null;
|
||||||
|
vm.updateFooterButtonText(vm.selectedTimeSlotData);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -199,11 +200,11 @@ export default {
|
||||||
return this.$store.getters.order.serviceLocation.appointmentType;
|
return this.$store.getters.order.serviceLocation.appointmentType;
|
||||||
},
|
},
|
||||||
timeSlotsForSelectedDate() {
|
timeSlotsForSelectedDate() {
|
||||||
if (this.selectedDate === null) {
|
if (!this.selectedDate) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
return this.selectableDatesData.days?.find(
|
return this.selectableDatesData.days?.find(
|
||||||
(selectableDate) => selectableDate.dateString === this.selectedDate.dateString
|
(selectableDate) => selectableDate.date === this.selectedDate
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
appointmentDateAndTime() {
|
appointmentDateAndTime() {
|
||||||
|
|
@ -213,10 +214,9 @@ export default {
|
||||||
const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(
|
const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(
|
||||||
this.selectedTimeSlotData.id
|
this.selectedTimeSlotData.id
|
||||||
);
|
);
|
||||||
|
|
||||||
if (timeSlotSelectedObject) {
|
if (timeSlotSelectedObject) {
|
||||||
return {
|
return {
|
||||||
date: this.selectedDate.dateString,
|
date: this.selectedDate,
|
||||||
startTime: timeSlotSelectedObject.startTime,
|
startTime: timeSlotSelectedObject.startTime,
|
||||||
endTime: timeSlotSelectedObject.endTime,
|
endTime: timeSlotSelectedObject.endTime,
|
||||||
routeCode: this.selectedTimeSlotData.id,
|
routeCode: this.selectedTimeSlotData.id,
|
||||||
|
|
@ -258,7 +258,7 @@ export default {
|
||||||
},
|
},
|
||||||
getTimeSlotObjectFromTimeSlotId(timeSlotId) {
|
getTimeSlotObjectFromTimeSlotId(timeSlotId) {
|
||||||
const timeSlots = this.selectableDatesData.days.find(
|
const timeSlots = this.selectableDatesData.days.find(
|
||||||
(selectableDate) => selectableDate.dateString === this.selectedDate.dateString
|
(selectableDate) => selectableDate.date === this.selectedDate
|
||||||
).timeSlots;
|
).timeSlots;
|
||||||
return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId);
|
return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId);
|
||||||
},
|
},
|
||||||
|
|
@ -308,7 +308,7 @@ export default {
|
||||||
},
|
},
|
||||||
convertSelectedDateToShortMonthAndDay(selectedDate) {
|
convertSelectedDateToShortMonthAndDay(selectedDate) {
|
||||||
// This conversion ensures we don't get get GMT induced date changes
|
// This conversion ensures we don't get get GMT induced date changes
|
||||||
const dateObject = new Date(`${selectedDate.dateString}T00:00:00`);
|
const dateObject = new Date(`${selectedDate}T00:00:00`);
|
||||||
// Ex: April 25
|
// Ex: April 25
|
||||||
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
|
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
|
||||||
},
|
},
|
||||||
|
|
@ -348,7 +348,7 @@ export default {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
selectedTimeSlotData() {
|
selectedTimeSlotData(newValue) {
|
||||||
this.updateFooterButtonText(this.selectedTimeSlotData);
|
this.updateFooterButtonText(this.selectedTimeSlotData);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -78,13 +78,14 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedTimeSlotId: null,
|
selectedTimeSlotId: this.modelValue.id,
|
||||||
timeSlotModalListButton: timeSlotModalListButton,
|
timeSlotModalListButton: timeSlotModalListButton,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const { handleChange } = useField("time-slot-modal-question", props.validationRules);
|
const { handleChange } = useField("time-slot-modal-question", props.validationRules);
|
||||||
|
// Run validation on component load
|
||||||
|
handleChange(props.modelValue.id);
|
||||||
return {
|
return {
|
||||||
handleChange,
|
handleChange,
|
||||||
};
|
};
|
||||||
|
|
@ -92,6 +93,11 @@ export default {
|
||||||
watch: {
|
watch: {
|
||||||
modelValue() {
|
modelValue() {
|
||||||
// Run component validation that is used at parent level
|
// Run component validation that is used at parent level
|
||||||
|
if (this.modelValue.isPremiumAppointment) {
|
||||||
|
this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id);
|
||||||
|
} else {
|
||||||
|
this.selectedTimeSlotId = this.modelValue.id;
|
||||||
|
}
|
||||||
this.handleChange(this.modelValue.id);
|
this.handleChange(this.modelValue.id);
|
||||||
},
|
},
|
||||||
availableTimeSlots(newValue) {
|
availableTimeSlots(newValue) {
|
||||||
|
|
@ -162,7 +168,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// This conversion ensures we don't get get GMT induced date changes
|
// This conversion ensures we don't get get GMT induced date changes
|
||||||
const dateObject = new Date(`${this.dateAndTimeSlotData.dateString}T00:00:00`);
|
const dateObject = new Date(`${this.dateAndTimeSlotData.date}T00:00:00`);
|
||||||
// Ex: Tuesday, April 22
|
// Ex: Tuesday, April 22
|
||||||
return dateObject.toLocaleDateString("en-us", {
|
return dateObject.toLocaleDateString("en-us", {
|
||||||
weekday: "long",
|
weekday: "long",
|
||||||
|
|
@ -203,12 +209,6 @@ export default {
|
||||||
},
|
},
|
||||||
// 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() {
|
||||||
// Reset component state to parent's state
|
|
||||||
if (this.modelValue.isPremiumAppointment) {
|
|
||||||
this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id);
|
|
||||||
} else {
|
|
||||||
this.selectedTimeSlotId = this.modelValue.id;
|
|
||||||
}
|
|
||||||
this.$emit("time-slot-modal-closed");
|
this.$emit("time-slot-modal-closed");
|
||||||
},
|
},
|
||||||
// Expected input: "HH:MM"
|
// Expected input: "HH:MM"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue