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

CASH-464: massive cleanup

Browse source
This commit is contained in:
Adam Caouette 2025-04-22 11:10:19 -04:00
parent 5ab3d24c1f
commit 4ac5440dcc
2 changed files with 24 additions and 239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
src/digital-components/date-picker/date-picker.vue
View file

@ -4,12 +4,6 @@
:class="`${calendarViewDirection} ${isPricingByDayClass} ${showPricingByDayClass}`">
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
<legend class="sr-only">Select a day and time</legend>
<div style="font-size: .8rem; background: aqua; padding: .2rem; text-align: left;" >
<div>componentId {{ componentId }}</div>
<div>meta {{ meta }}</div>
<div>errors {{ errors }}</div>
<div>errorMessage {{ errorMessage }}</div>
</div>
<div
v-for="month in months"
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
@ -105,38 +99,30 @@
@click="showAnotherMonth">
View more dates
</button>
<div class="new-times">
<div>selectedDate: {{ selectedDate }}</div>
<div>selectedTimeSlotInfo: {{ selectedTimeSlotInfo }}</div>
<!-- <div>timeSlotsForSelectedDate: {{ timeSlotsForSelectedDate }}</div> -->
</div>
<timeSlotQuestion
ref="timeSlotModalQuestion"
v-model="selectedTimeSlotInfo"
cmsWidgetName="TimeSlotModalQuestion"
waitListLabelWidget="WaitListLabelWidget"
waitListQuestionWidget="WaitListQuestionWidget"
mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
mobileCmsWidgetName="MobileTimeSlotModal"
dropoffCmsWidgetName="DropOffTimeSlotModal"
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
:selectedDate="selectedDate"
:appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:displayWaitList="displayWaitList"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:estimatedServiceMinutesMinimum="
selectableDatesData.estimatedServiceMinutesMinimum
"
:estimatedServiceMinutesMaximum="
selectableDatesData.estimatedServiceMinutesMaximum
"
@waitListRequested="handleWaitListRequested"
@time-slot-modal-closed="timeSlotModalClosed"
cmsWidgetName="TimeSlotModalQuestion"
waitListLabelWidget="WaitListLabelWidget"
waitListQuestionWidget="WaitListQuestionWidget"
mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
mobileCmsWidgetName="MobileTimeSlotModal"
dropoffCmsWidgetName="DropOffTimeSlotModal"
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
:selectedDate="selectedDate"
:appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:displayWaitList="displayWaitList"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:estimatedServiceMinutesMinimum="
selectableDatesData.estimatedServiceMinutesMinimum
"
:estimatedServiceMinutesMaximum="
selectableDatesData.estimatedServiceMinutesMaximum
"
@waitListRequested="handleWaitListRequested"
@time-slot-modal-closed="timeSlotModalClosed"
/>
</fieldset>
</div>
@ -169,24 +155,9 @@ import {
convertDateStringToDate,
} from "@/layouts/schedule/helpers/schedule-helper";
import { useField, ErrorMessage, defineRule } from "vee-validate";
import { errorMessages } from "@/constants/error-messages";
import { deepClone } from "@/helpers/object-helper";
import { v4 as uuidv4 } from "uuid";
// DEFINE VALIDATION RULES
defineRule("time-slot-selection-required", (value) => {
console.log("%c DP - VALIDATION of time-slot-selection-required, value is: ", "background: lime; color: black;", value);
debugger; // eslint-disable-line no-debugger
if (value?.timeSlot?.routeCode == null) {
console.log("%c DP - VALIDATION of time-slot-selection-required, VALIDATION ERROR... ", "background: lime; color: black;", "TIME SLOT VALIDATION FAILURE! " + errorMessages.DATE_REQUIRED);
return "TIME SLOT VALIDATION FAILURE! " + errorMessages.DATE_REQUIRED;
}
return true;
});
export default {
name: "datePicker",
data() {
@ -232,28 +203,19 @@ export default {
pricingByDayBasePrice: Number,
pricingByDayUpcharge: Number,
isPricingByDayExperiment: Boolean,
// selectedTimeSlotInfo: Object,
timeSlotsForSelectedDate: Object,
},
setup(props) {
const uuid = uuidv4();
const componentId = !props.customComponentId
? `component-${uuid}`
: props.customComponentId;
const modelValue = deepClone(props).modelValue;
const initialValue = modelValue;
const fieldOptions = {
value: modelValue,
initialValue: initialValue,
};
console.log("%c DP - running setup()... modelValue: ", "background: lime; color: black;", modelValue);
debugger; // eslint-disable-line no-debugger
const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
useField(componentId, props.validationRules, fieldOptions);
@ -298,36 +260,12 @@ export default {
},
selectedDate: {
get() {
console.log("%c DP - G etting selectedDate; it is: ", "background: lime; color: black;", this.modelValue);
debugger; // eslint-disable-line no-debugger
return this.modelValue;
},
set(newSelectedDate) {
console.log("%c DP - S etting selectedDate; it is now: ", "background: lime; color: black;", newSelectedDate);
debugger; // eslint-disable-line no-debugger
this.$emit("update:modelValue", newSelectedDate);
},
},
// selectedTimeSlotInfo: {
// get() {
// console.log("%c DP - G etting selectedTimeSlotInfo; it is: ", "background: lime; color: black;", this.modelValue);
// debugger; // eslint-disable-line no-debugger
// return this.modelValue;
// },
// set(newSelectedTimeSlotInfo) {
// console.log("%c DP - S etting selectedTimeSlotInfo; it is now: ", "background: lime; color: black;", newSelectedTimeSlotInfo);
// debugger; // eslint-disable-line no-debugger
// this.$emit("update:modelValue", newSelectedTimeSlotInfo);
// },
// },
},
methods: {
initializeComponent(initialData) {
@ -838,18 +776,6 @@ export default {
};
window.requestAnimationFrame(step);
},
//// NEW METHODS //// NEW METHODS //// NEW METHODS //// NEW METHODS //// NEW METHODS
//// //// NEW METHODS //// NEW METHODS //// NEW METHODS //// NEW METHODS //// NEW METHODS
getSelectedTimeSlotInfo() {
const supportingItems = this.getSupportingItems();
@ -866,9 +792,6 @@ export default {
isPremiumAppointment: isPremiumAppointment,
};
console.log("%c DP - computing getSelectedTimeSlotInfo()... returning: ", "background: lime; color: black;", selectedTimeSlotInfo);
debugger; // eslint-disable-line no-debugger
return selectedTimeSlotInfo;
},
getSupportingItems() {
@ -878,10 +801,7 @@ export default {
},
watch: {
modelValue(newValue, oldValue) {
console.log("%c DP - WATCHED modelValue now: ", "background: lime; color: black;", newValue);
console.log(" ");
debugger; // eslint-disable-line no-debugger
modelValue(newValue) {
this.resetField({
value: newValue,
});
@ -892,26 +812,12 @@ export default {
this.scrollToElement("date-of-month-error");
}
},
selectedDate(newValue) {
console.log("%c DP - WATCHED selectedDate now: ", "background: lime; color: black;", newValue);
console.log(" ");
debugger; // eslint-disable-line no-debugger
},
selectedTimeSlotInfo(newValue) {
console.log("%c DP - WATCHED selectedTimeSlotInfo now: ", "background: lime; color: black;", newValue);
console.log(" ");
debugger; // eslint-disable-line no-debugger
this.$emit(
"TimeSlotSelected",
newValue
);
); // NEEDED ON SCHEDULE - to update footer button text and to save to Store correctly
},
},
components: {
loader,
@ -1365,12 +1271,4 @@ export default {
max-width: 414px;
text-align: left;
}
.new-times {
min-height: 1rem;
padding: .2rem;
margin: 1rem 0;
background: lightgreen;
font-size: .6rem;
}
</style>

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

@ -1,14 +1,6 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div style="font-size: .8rem; background: silver; padding: .2rem; text-align: left;" >
<div>componentId {{ componentId }}</div>
<div>meta {{ meta }}</div>
<div>errors {{ errors }}</div>
<div>errorMessage {{ errorMessage }}</div>
</div>
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
@ -31,7 +23,6 @@
selectableDatesSetting="custom"
ref="datePicker"
v-model="selectedDate"
v-model:new="selectedTimeSlotInfo"
class="text-link-small"
:customSelectableDatesCallback="getAvailableDatesMethod"
validationRules="date-required"
@ -39,41 +30,9 @@
:pricingByDayUpcharge="pricingByDayUpcharge"
:showPricingByDay="showPricingByDay"
:isPricingByDayExperiment="isPricingByDayExperiment"
:selectedTimeSlotInfo="selectedTimeSlotInfo"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
@TimeSlotSelected="updateTimeSlot"
@date-clicked="handleDateClicked" />
<timeSlotModalQuestion
ref="timeSlotModalQuestion"
customComponentId="timeSlotModalQuestion"
v-model="selectedTimeSlotInfo"
cmsWidgetName="TimeSlotModalQuestion"
waitListLabelWidget="WaitListLabelWidget"
waitListQuestionWidget="WaitListQuestionWidget"
mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
mobileCmsWidgetName="MobileTimeSlotModal"
dropoffCmsWidgetName="DropOffTimeSlotModal"
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
:selectedDate="selectedDate"
:appointmentType="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:displayWaitList="displayWaitList"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:estimatedServiceMinutesMinimum="
selectableDatesData.estimatedServiceMinutesMinimum
"
:estimatedServiceMinutesMaximum="
selectableDatesData.estimatedServiceMinutesMaximum
"
@waitListRequested="handleWaitListRequested"
@time-slot-modal-closed="timeSlotModalClosed"
validationRules="time-slot-selection-required"
@TimeSlotSelected="forwardButtonAction" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
@ -95,7 +54,6 @@ 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 locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
import textBlock from "@/digital-components/text-block/text-block";
// Supporting files
@ -128,24 +86,7 @@ import { partNumberStrings } from "@/constants/part-number-strings";
import { deepClone } from "@/helpers/object-helper";
// DEFINE VALIDATION RULES
// defineRule("date-required", required(errorMessages.DATE_REQUIRED));
defineRule("date-required", (value) => {
console.log("SCHEDULE VALIDATION of date-required, value is: ", value)
debugger; // eslint-disable-line no-debugger
// if (!value || value == null || value?.length < 1) {
// return errorMessages.DATE_REQUIRED;
// }
return true;
});
// defineRule("time-slot-selection-required", (value) => {
// console.log("SCHEDULE VALIDATION of time-slot-selection-required, value is: ", value)
// debugger; // eslint-disable-line no-debugger
// if (value?.timeSlot?.routeCode == null) {
// return "TIME SLOT VALIDATION FAILURE! " + errorMessages.DATE_REQUIRED;
// }
// return true;
// });
defineRule("date-required", required(errorMessages.DATE_REQUIRED));
// Define constants
const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
@ -425,14 +366,11 @@ export default {
return this.$store.getters.order.serviceLocation.appointmentType;
},
timeSlotsForSelectedDate() {
console.log("SCHEDULE, computing timeSlotsForSelectedDate... this.selectedDate: ", this.selectedDate)
if (!this.selectedDate) return null;
let tempOutput = this.selectableDatesData.days?.find(
(selectableDate) => selectableDate.date === this.selectedDate
);
console.log("SCHEDULE, computing timeSlotsForSelectedDate... returning: ", tempOutput)
debugger; // eslint-disable-line no-debugger
return this.selectableDatesData.days?.find(
(selectableDate) => selectableDate.date === this.selectedDate
@ -495,9 +433,6 @@ export default {
getServiceZipCtuCodeFromStore() {
return store.getters.order.serviceLocation.zipCodeCtu;
},
openInshopTimeSlotsModal() {
this.$refs["timeSlotModalQuestion"].openModal();
},
getSelectedDate() {
return store.getters.order.schedule.date;
},
@ -517,20 +452,11 @@ export default {
isPremiumAppointment: isPremiumAppointment,
};
console.log("SCHEDULE, computing getSelectedTimeSlotInfo()... returning: ", selectedTimeSlotInfo)
debugger; // eslint-disable-line no-debugger
return selectedTimeSlotInfo;
},
getSupportingItems() {
return store.getters.lineItems.supportingItems;
},
timeSlotModalClosed() {
// Clear the selectedDate if no timeSlot has been selected
if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
this.selectedDate = null;
}
},
updateFooterButtonText(timeSlotInfo) {
let navbarButtonText;
if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
@ -585,9 +511,6 @@ export default {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
console.log(" ")
console.log("SCHEDULE, forwardButtonAction... this.selectedTimeSlotInfo: ", this.selectedTimeSlotInfo)
debugger; // eslint-disable-line no-debugger
this.updateSupportingItems();
if (this.waitListRequested) {
@ -742,24 +665,13 @@ export default {
} else {
this.includePricingByDayUpcharge = false;
}
// this.openInshopTimeSlotsModal(); // TURNON OR TURNOFF OLD MODAL OLDMODAL AJC
},
updateTimeSlot(timeSlot) {
console.log(" << NEW >> updateTimeSlot()... timeSlot: ", timeSlot)
debugger; // eslint-disable-line no-debugger
this.selectedTimeSlotInfo = timeSlot;
}
},
watch: {
selectedDate(newValue, oldValue) {
console.log("SCHEDULE WATCHED selectedDate was updated to: ", newValue)
debugger; // eslint-disable-line no-debugger
// Clear time slot selection if date selected changes
if (newValue !== oldValue) {
this.selectedTimeSlotInfo = {
@ -776,10 +688,6 @@ export default {
}
},
selectedTimeSlotInfo(newValue) {
console.log("SCHEDULE WATCHED selectedTimeSlotInfo was updated to: ", newValue)
debugger; // eslint-disable-line no-debugger
this.updateFooterButtonText(newValue);
},
},
@ -791,7 +699,6 @@ export default {
loadingModal,
datePicker,
locationAlerts,
timeSlotModalQuestion,
textBlock,
},
};
@ -822,24 +729,4 @@ export default {
}
}
.modal-open {
overflow: auto !important;
padding-right: auto !important;
.modal {
position: relative;
display: block;
height: auto;
}
.modal-backdrop {
display: none !important;
}
}
</style>