CSR-1137 | Refactoring
This commit is contained in:
parent
13fa4a4cf5
commit
04a09f6fa2
2 changed files with 57 additions and 46 deletions
|
|
@ -302,6 +302,7 @@ export default {
|
|||
convertSelectedDateToShortMonthAndDay(selectedDate) {
|
||||
// This conversion ensures we don't get get GMT induced date changes
|
||||
const dateObject = new Date(`${selectedDate.dateString}T00:00:00`);
|
||||
// Ex: April 25
|
||||
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
|
||||
},
|
||||
// Expected input: "HH:MM:SS"
|
||||
|
|
|
|||
|
|
@ -164,60 +164,20 @@ export default {
|
|||
}
|
||||
// This conversion ensures we don't get get GMT induced date changes
|
||||
const dateObject = new Date(`${this.dateAndTimeSlotData.dateString}T00:00:00`);
|
||||
const weekdayName = DAYS_OF_WEEK[dateObject.getDay()];
|
||||
const month = MONTHS_OF_YEAR[dateObject.getMonth()];
|
||||
const numberDayOfMonth = dateObject.getDate();
|
||||
// Ex. Tuesday, April 23
|
||||
return `${weekdayName}, ${month} ${numberDayOfMonth}`;
|
||||
// Ex: Tuesday, April 22
|
||||
return dateObject.toLocaleDateString("en-us", {weekday:"long", month:"long", day:"numeric"});
|
||||
},
|
||||
availableTimeSlots() {
|
||||
if (this.dateAndTimeSlotData === null) {
|
||||
return null;
|
||||
}
|
||||
let availableTimeSlots;
|
||||
if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
|
||||
availableTimeSlots = [
|
||||
{
|
||||
value: this.dateAndTimeSlotData.timeSlots[0].id,
|
||||
buttonLabel: this.dropoffButtonText,
|
||||
},
|
||||
];
|
||||
return this.getAvailableTimeSlotsForDropOff(this.dateAndTimeSlotData.timeSlots);
|
||||
} else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
return this.getAvailableTimeSlotsForMobile(this.dateAndTimeSlotData.timeSlots);
|
||||
} else {
|
||||
availableTimeSlots = this.dateAndTimeSlotData.timeSlots.map((timeSlot) => {
|
||||
let readableTime;
|
||||
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
|
||||
readableTime = this.getDisplayTextForMilitaryTime(timeSlot.startTime);
|
||||
} else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
readableTime = `${this.getDisplayTextForMilitaryTime(
|
||||
timeSlot.startTime
|
||||
)} - ${this.getDisplayTextForMilitaryTime(timeSlot.endTime)}`;
|
||||
}
|
||||
return {
|
||||
value: timeSlot.id,
|
||||
buttonLabel: readableTime,
|
||||
};
|
||||
});
|
||||
return this.getAvailableTimeSlotsForInshop(this.dateAndTimeSlotData.timeSlots);
|
||||
}
|
||||
|
||||
if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
|
||||
const isPremiumTimeSlot = this.dateAndTimeSlotData.timeSlots[0].offerPremium;
|
||||
const hasPremiumPartAvailable =
|
||||
this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE;
|
||||
if (isPremiumTimeSlot && hasPremiumPartAvailable) {
|
||||
const formattedPrice =
|
||||
"+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
|
||||
availableTimeSlots.unshift({
|
||||
// Unique value is required for each <input> and the premium appoinment shares a timeSlot ID
|
||||
value: this.addPremiumFlagToInput(this.dateAndTimeSlotData.timeSlots[0].id),
|
||||
buttonLabel: this.premiumAppointmentButtonText,
|
||||
buttonLabelSubCopy: formattedPrice,
|
||||
additionalButtonData: {
|
||||
isPremiumAppointment: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return availableTimeSlots;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -270,6 +230,56 @@ export default {
|
|||
}
|
||||
return displayTextForDurationLength;
|
||||
},
|
||||
getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
|
||||
return timeSlotsForSelectedDate.map((timeSlot) => {
|
||||
const readableTime = this.getDisplayTextForMilitaryTime(timeSlot.startTime);
|
||||
return {
|
||||
value: timeSlot.id,
|
||||
buttonLabel: readableTime,
|
||||
};
|
||||
});
|
||||
},
|
||||
getAvailableTimeSlotsForDropOff(timeSlotsForSelectedDate) {
|
||||
return [
|
||||
{
|
||||
value: timeSlotsForSelectedDate[0].id,
|
||||
buttonLabel: this.dropoffButtonText,
|
||||
},
|
||||
];
|
||||
},
|
||||
getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
|
||||
const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
|
||||
const readableTime = `${this.getDisplayTextForMilitaryTime(
|
||||
timeSlot.startTime
|
||||
)} - ${this.getDisplayTextForMilitaryTime(timeSlot.endTime)}`;
|
||||
return {
|
||||
value: timeSlot.id,
|
||||
buttonLabel: readableTime,
|
||||
};
|
||||
});
|
||||
|
||||
const isPremiumTimeSlot = timeSlotsForSelectedDate[0].offerPremium;
|
||||
const hasPremiumPartAvailable =
|
||||
this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE;
|
||||
if (isPremiumTimeSlot && hasPremiumPartAvailable) {
|
||||
availableTimeSlots.unshift(this.getPremiumAppointmentTimeSlot(timeSlotsForSelectedDate[0]));
|
||||
}
|
||||
|
||||
return availableTimeSlots;
|
||||
},
|
||||
getPremiumAppointmentTimeSlot(timeSlotData) {
|
||||
const formattedPrice =
|
||||
"+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
|
||||
return {
|
||||
// Unique value is required for each <input> and the premium appoinment shares a timeSlot ID
|
||||
value: this.addPremiumFlagToInput(timeSlotData.id),
|
||||
buttonLabel: this.premiumAppointmentButtonText,
|
||||
buttonLabelSubCopy: formattedPrice,
|
||||
additionalButtonData: {
|
||||
isPremiumAppointment: true,
|
||||
},
|
||||
}
|
||||
},
|
||||
autoSelectTimeSlotIfOnlyOneIsAvailable(newdateAndTimeSlotDataValue) {
|
||||
const numberOfOptions = newdateAndTimeSlotDataValue?.timeSlots.length;
|
||||
if (
|
||||
|
|
|
|||
Loading…
Reference in a new issue