jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Before merging from develop and hopefully fixing massive amount of broken tests

Browse source
This commit is contained in:
Leah Schumann 2023-09-01 07:17:17 -04:00
parent c0b02c8c00
commit 8210ad3c82
2 changed files with 116 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/layouts/schedule/schedule.vue
View file

@ -24,13 +24,13 @@
<timeSlotModalQuestion <timeSlotModalQuestion
ref="timeSlotModalQuestion" ref="timeSlotModalQuestion"
customComponentId="timeSlotModalQuestion" customComponentId="timeSlotModalQuestion"
v-model="selectedTimeSlot" v-model="selectedTimeSlotInfo"
cmsWidgetName="TimeSlotModalQuestion" cmsWidgetName="TimeSlotModalQuestion"
mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal" mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
mobileCmsWidgetName="MobileTimeSlotModal" mobileCmsWidgetName="MobileTimeSlotModal"
dropoffCmsWidgetName="DropOffTimeSlotModal" dropoffCmsWidgetName="DropOffTimeSlotModal"
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal" sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal" overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
:selectedDate="selectedDate" :selectedDate="selectedDate"
:appointmentType="appointmentType" :appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee" :premiumAppointmentFee="mobilePremiumAppointmentFee"
@ -81,12 +81,7 @@ import store from "@/store";
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("date-required", required(errorMessages.DATE_REQUIRED)); defineRule("date-required", required(errorMessages.DATE_REQUIRED));
defineRule("time-slot-selection-required", (value) => { defineRule("time-slot-selection-required", (value) => {
if ( if (value?.timeSlot?.routeCode == null) {
value.date == null ||
value.startTime == null ||
value.routeCode == null ||
value.estimatedServiceMinutesMaximum
) {
return errorMessages.DATE_REQUIRED; return errorMessages.DATE_REQUIRED;
} }
return true; return true;
@ -190,7 +185,7 @@ export default {
data() { data() {
return { return {
selectedDate: this.getSelectedDate(), selectedDate: this.getSelectedDate(),
selectedTimeSlot: this.getSelectedTimeSlot(), selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
selectableDatesData: [], selectableDatesData: [],
mobilePremiumAppointmentFee: null, mobilePremiumAppointmentFee: null,
}; };
@ -265,7 +260,7 @@ export default {
vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
? resultMap.premiumFeeWithPrice[0] ? resultMap.premiumFeeWithPrice[0]
: null; : null;
vm.updateFooterButtonText(vm.selectedTimeSlot); vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
}); });
}, },
computed: { computed: {
@ -334,47 +329,52 @@ export default {
getSelectedDate() { getSelectedDate() {
return store.getters.order.schedule.date; return store.getters.order.schedule.date;
}, },
getSelectedTimeSlot() { getSelectedTimeSlotInfo() {
const supportingItems = this.getSupportingItems(); const supportingItems = this.getSupportingItems();
const isPremiumAppointment = !!supportingItems.filter( const isPremiumAppointment =
(lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE !!supportingItems.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE)
).length > 0; .length > 0;
const selectedTimeSlot = store.getters.order.schedule; const selectedTimeSlotInfo = {
selectedTimeSlot.isPremiumAppointment = isPremiumAppointment timeSlot: store.getters.order.schedule,
isPremiumAppointment: isPremiumAppointment,
};
return selectedTimeSlot; return selectedTimeSlotInfo;
}, },
getSupportingItems() { getSupportingItems() {
return store.getters.lineItems.supportingItems; return store.getters.lineItems.supportingItems;
}, },
timeSlotModalClosed() { timeSlotModalClosed() {
// Clear the selectedDate if no timeSlot has been selected // Clear the selectedDate if no timeSlot has been selected
if (this.selectedTimeSlot.routeCode == null) { if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
this.selectedDate = null; this.selectedDate = null;
} }
}, },
updateFooterButtonText(timeSlot) { updateFooterButtonText(timeSlotInfo) {
let funnelFooterButtonText; let funnelFooterButtonText;
if (!timeSlot || !timeSlot.date) { if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
funnelFooterButtonText = "Continue"; funnelFooterButtonText = "Continue";
} else { } else {
funnelFooterButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay( funnelFooterButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
timeSlot.date timeSlotInfo.timeSlot.date
)}`; )}`;
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) { if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime( funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime(
timeSlot.startTime timeSlotInfo.timeSlot.startTime
)}`; )}`;
} else if ( } else if (
this.appointmentType === AppointmentTypeStrings.MOBILE && this.appointmentType === AppointmentTypeStrings.MOBILE &&
!timeSlot.isPremiumAppointment !timeSlotInfo.isPremiumAppointment
) { ) {
funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime( funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime(
timeSlot.startTime, timeSlotInfo.timeSlot.startTime,
true true
)} - ${this.getDisplayTextForMilitaryTime(timeSlot.endTime, true)}`; )} - ${this.getDisplayTextForMilitaryTime(
timeSlotInfo.timeSlot.endTime,
true
)}`;
} }
} }
this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText); this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);
@ -386,13 +386,15 @@ export default {
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" }); return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
}, },
getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) { getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
// Expected input: "HH:MM" // Expected input: "HH:MM"
let hours = parseInt(militaryTimeInput.split(":")[0]); let hours = parseInt(militaryTimeInput.split(":")[0]);
const minutes = militaryTimeInput.split(":")[1]; const minutes = militaryTimeInput.split(":")[1];
const meridianNotation = hours > 11 ? "PM" : "AM"; const meridianNotation = hours > 11 ? "PM" : "AM";
if (hours > 12) { if (hours > 12) {
hours -= 12; hours -= 12;
} }
if (shouldTrimMinutesIfEmpty && minutes === "00") { if (shouldTrimMinutesIfEmpty && minutes === "00") {
return `${hours} ${meridianNotation}`; return `${hours} ${meridianNotation}`;
} else { } else {
@ -405,10 +407,11 @@ export default {
forwardButtonAction() { forwardButtonAction() {
this.updateSupportingItems(); this.updateSupportingItems();
// Remove the isPremiumAppointment flag to ensure it never gets into the store this.dispatchStoreAction(
delete this.selectedTimeSlot.isPremiumAppointment; this.storeActions.SAVE_SCHEDULE,
this.selectedTimeSlotInfo.timeSlot,
this.dispatchStoreAction(this.storeActions.SAVE_SCHEDULE, this.selectedTimeSlot, false); false
);
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route); this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
}, },
@ -418,7 +421,7 @@ export default {
// if we have a premium fee(early bird), then save/update supporting items // if we have a premium fee(early bird), then save/update supporting items
if ( if (
this.appointmentType === AppointmentTypeStrings.MOBILE && this.appointmentType === AppointmentTypeStrings.MOBILE &&
this.selectedTimeSlot?.isPremiumAppointment this.selectedTimeSlotInfo?.isPremiumAppointment
) { ) {
const earlyBirdIndex = supportingItems.findIndex( const earlyBirdIndex = supportingItems.findIndex(
(item) => item.partType == PREMIUM_FEE_PART_TYPE (item) => item.partType == PREMIUM_FEE_PART_TYPE
@ -461,18 +464,20 @@ export default {
selectedDate(newValue, oldValue) { selectedDate(newValue, oldValue) {
// Clear time slot selection if date selected changes // Clear time slot selection if date selected changes
if (newValue !== oldValue) { if (newValue !== oldValue) {
this.selectedTimeSlot = { this.selectedTimeSlotInfo = {
date: null, timeSlot: {
routeCode: null, date: null,
startTime: null, routeCode: null,
endTime: null, startTime: null,
jobMaxMinutes: null, endTime: null,
jobMinMinutes: null, jobMaxMinutes: null,
jobMinMinutes: null,
},
isPremiumAppointment: null, isPremiumAppointment: null,
}; };
} }
}, },
selectedTimeSlot(newValue) { selectedTimeSlotInfo(newValue) {
this.updateFooterButtonText(newValue); this.updateFooterButtonText(newValue);
}, },
}, },

122
src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
View file

@ -47,12 +47,12 @@ import buttonQuestion from "@/digital-components/button-question/button-question
import timeSlotModalListButton from "./time-slot-modal-list-button/time-slot-modal-list-button"; import timeSlotModalListButton from "./time-slot-modal-list-button/time-slot-modal-list-button";
// Helpers // Helpers
import { deepClone } from "@/helpers/object-helper";
import { import {
convertDateStringToDate, convertDateStringToDate,
militaryToTwelveHourTime, militaryToTwelveHourTime,
getDisplayTextForDurationLength, getDisplayTextForDurationLength,
} from "@/layouts/schedule/helpers/schedule-helper"; } from "@/layouts/schedule/helpers/schedule-helper";
import { deepClone } from "@/helpers/object-helper";
// Validation - TODO: Move this somewhere more global? // Validation - TODO: Move this somewhere more global?
import { defineRule, useField } from "vee-validate"; import { defineRule, useField } from "vee-validate";
@ -84,7 +84,20 @@ export default {
name: "time-slot-modal-question", name: "time-slot-modal-question",
emits: ["update:modelValue"], emits: ["update:modelValue"],
props: { props: {
modelValue: Object, modelValue: {
type: Object,
default: () => ({
timeSlot: {
routeCode: null,
date: null,
startTime: null,
endTime: null,
jobMaxMinutes: null,
jobMinMinutes: null,
},
isPremiumAppointment: null,
}),
},
cmsWidgetName: String, cmsWidgetName: String,
mobileCmsWidgetName: String, mobileCmsWidgetName: String,
mobilePremiumCmsWidgetName: String, mobilePremiumCmsWidgetName: String,
@ -148,18 +161,18 @@ export default {
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) { if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
return null; return null;
} else if (this.appointmentType === AppointmentTypeStrings.MOBILE) { } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
appointmentTypeCmsWidgetName = this.selectedTimeSlotId?.includes( appointmentTypeCmsWidgetName = this.selectedRouteCode?.includes(
PREMIUM_TIME_SLOT_ID_FLAG PREMIUM_TIME_SLOT_ID_FLAG
) )
? this.mobilePremiumCmsWidgetName ? this.mobilePremiumCmsWidgetName
: this.mobileCmsWidgetName; : this.mobileCmsWidgetName;
} else { } else {
if (!this.selectedTimeSlotId) { if (!this.selectedRouteCode) {
return null; return null;
} else { } else {
appointmentTypeCmsWidgetName = appointmentTypeCmsWidgetName =
this.getRelevantDropOffCmsWidgetNameForSelectedTimeSlot( this.getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
this.selectedTimeSlotId, this.selectedRouteCode,
true true
); );
} }
@ -216,13 +229,13 @@ export default {
}, },
disclaimerTextBlockCopy() { disclaimerTextBlockCopy() {
if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
if (this.selectedTimeSlotId?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) { if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
if (this.isSameDay) { if (this.isSameDay) {
return this.sameDayDropOffDisclaimerText; return this.sameDayDropOffDisclaimerText;
} else { } else {
return this.dropoffDisclaimerText; return this.dropoffDisclaimerText;
} }
} else if (this.selectedTimeSlotId?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) { } else if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
return this.overnightDropOffDisclaimerText; return this.overnightDropOffDisclaimerText;
} else { } else {
return null; return null;
@ -265,9 +278,9 @@ export default {
} else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) { } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
return this.inshopDurationText; return this.inshopDurationText;
} else { } else {
if (this.selectedTimeSlotId?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) { if (this.selectedRouteCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
return this.overnightDropoffDurationText; return this.overnightDropoffDurationText;
} else if (this.selectedTimeSlotId?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) { } else if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
if (this.isSameDay) { if (this.isSameDay) {
return this.sameDayDropoffDurationText; return this.sameDayDropoffDurationText;
} else { } else {
@ -307,7 +320,9 @@ export default {
} }
if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
return this.getAvailableTimeSlotsForDropOff(this.timeSlotsForSelectedDate.timeSlots); return this.getAvailableTimeSlotsForDropOff(
this.timeSlotsForSelectedDate.timeSlots
);
} else if (this.appointmentType === AppointmentTypeStrings.MOBILE) { } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots); return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
} else { } else {
@ -329,16 +344,19 @@ export default {
this.$emit("time-slot-modal-closed"); this.$emit("time-slot-modal-closed");
}, },
async setSelectedTimeSlot() { async setSelectedTimeSlot() {
this.$emit("update:modelValue", this.getSelectedTimeSlotObject(this.selectedRouteCode)); this.$emit(
"update:modelValue",
this.getSelectedTimeSlotInfoObject(this.selectedRouteCode)
);
this.closeModal(); this.closeModal();
}, },
getRelevantDropOffCmsWidgetNameForSelectedTimeSlot( getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
selectedTimeSlotId, selectedRouteCode,
isSameDayRelevant = false isSameDayRelevant = false
) { ) {
if (selectedTimeSlotId.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) { if (selectedRouteCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
return this.overnightDropOffCmsWidgetName; return this.overnightDropOffCmsWidgetName;
} else if (selectedTimeSlotId.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) { } else if (selectedRouteCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
return this.isSameDay && isSameDayRelevant return this.isSameDay && isSameDayRelevant
? this.sameDayDropOffCmsWidgetName ? this.sameDayDropOffCmsWidgetName
: this.dropoffCmsWidgetName; : this.dropoffCmsWidgetName;
@ -399,7 +417,7 @@ export default {
"+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2); "+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
return { return {
// Unique value is required for each <input> and the premium appoinment shares a timeSlot ID // Unique value is required for each <input> and the premium appoinment shares an id
value: this.addPremiumFlagToInput(timeSlotData.id), value: this.addPremiumFlagToInput(timeSlotData.id),
buttonLabel: this.premiumAppointmentButtonText, buttonLabel: this.premiumAppointmentButtonText,
buttonLabelSubCopy: formattedPrice, buttonLabelSubCopy: formattedPrice,
@ -409,59 +427,65 @@ export default {
}; };
}, },
getSelectedRouteCode() { getSelectedRouteCode() {
if (!this.modelValue?.routeCode) { let selectedRouteCode;
return null; if (!this.modelValue?.timeSlot) {
selectedRouteCode = null;
} }
if (this.modelValue?.isPremiumAppointment) { if (this.modelValue?.isPremiumAppointment) {
return this.addPremiumFlagToInput(this.modelValue?.routeCode); selectedRouteCode = this.addPremiumFlagToInput(this.modelValue?.timeSlot?.routeCode);
} else { } else {
return this.modelValue?.routeCode; selectedRouteCode = this.modelValue?.timeSlot?.routeCode;
} }
return selectedRouteCode;
}, },
autoSelectTimeSlotIfOnlyOneIsAvailable(newAvailableTimeSlotsValue) { autoSelectTimeSlotIfOnlyOneIsAvailable() {
const numberOfOptions = newAvailableTimeSlotsValue?.length; const numberOfOptions = this.availableTimeSlots?.length;
if (numberOfOptions === 1) { if (numberOfOptions === 1) {
this.selectedRouteCode = newAvailableTimeSlotsValue[0].value; this.selectedRouteCode = this.availableTimeSlots[0].value;
} }
}, },
addPremiumFlagToInput(timeSlotId) { addPremiumFlagToInput(routeCode) {
return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG); return (routeCode += PREMIUM_TIME_SLOT_ID_FLAG);
}, },
removePremiumFlagFromInput(timeSlotId) { removePremiumFlagFromInput(routeCode) {
return timeSlotId.replace(PREMIUM_TIME_SLOT_ID_FLAG, ""); return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, "");
}, },
getSelectedTimeSlotObject(timeSlotId) { getSelectedTimeSlotInfoObject(routeCode) {
console.log(timeSlotId) const routeCodeIncludesPremium = routeCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
const timeSlotIdIncludesPremium = timeSlotId?.includes(PREMIUM_TIME_SLOT_ID_FLAG); if (routeCodeIncludesPremium) {
if (timeSlotIdIncludesPremium) { routeCode = this.removePremiumFlagFromInput(routeCode);
timeSlotId = this.removePremiumFlagFromInput(timeSlotId);
} }
const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find( const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find(
(timeSlot) => timeSlot.id == timeSlotId (timeSlot) => timeSlot.id == routeCode
); );
if (timeSlot) { if (timeSlot) {
return { return {
date: this.timeSlotsForSelectedDate.date, timeSlot: {
routeCode: timeSlot.id, date: this.timeSlotsForSelectedDate.date,
startTime: timeSlot.startTime, routeCode: timeSlot.id,
endTime: timeSlot.endTime, startTime: timeSlot.startTime,
jobMaxMinutes: this.estimatedServiceMinutesMaximum.toString(), endTime: timeSlot.endTime,
jobMinMinutes: this.estimatedServiceMinutesMinimum.toString(), jobMaxMinutes: this.estimatedServiceMinutesMaximum.toString(),
isPremiumAppointment: timeSlotIdIncludesPremium ? true : false jobMinMinutes: this.estimatedServiceMinutesMinimum.toString(),
},
isPremiumAppointment: routeCodeIncludesPremium ? true : false,
}; };
} }
return { return {
date: null, timeSlot: {
startTime: null, date: null,
endTime: null, startTime: null,
routeCode: null, endTime: null,
jobMaxMinutes: null, routeCode: null,
jobMinMinutes: null, jobMaxMinutes: null,
isPremiumAppointment: null jobMinMinutes: null,
},
isPremiumAppointment: null,
}; };
}, },
}, },
@ -474,12 +498,10 @@ export default {
}, },
selectedDate: { selectedDate: {
handler() { handler() {
this.selectedTimeSlotId = null; this.selectedRouteCode = null;
this.autoSelectTimeSlotIfOnlyOneIsAvailable();
}, },
}, },
availableTimeSlots(newValue) {
this.autoSelectTimeSlotIfOnlyOneIsAvailable(newValue);
},
}, },
components: { components: {
modal, modal,