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

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

@ -1,14 +1,6 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <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="container-fluid page-container-grouped-styles">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6">
@ -31,7 +23,6 @@
selectableDatesSetting="custom" selectableDatesSetting="custom"
ref="datePicker" ref="datePicker"
v-model="selectedDate" v-model="selectedDate"
v-model:new="selectedTimeSlotInfo"
class="text-link-small" class="text-link-small"
:customSelectableDatesCallback="getAvailableDatesMethod" :customSelectableDatesCallback="getAvailableDatesMethod"
validationRules="date-required" validationRules="date-required"
@ -39,41 +30,9 @@
:pricingByDayUpcharge="pricingByDayUpcharge" :pricingByDayUpcharge="pricingByDayUpcharge"
:showPricingByDay="showPricingByDay" :showPricingByDay="showPricingByDay"
:isPricingByDayExperiment="isPricingByDayExperiment" :isPricingByDayExperiment="isPricingByDayExperiment"
:selectedTimeSlotInfo="selectedTimeSlotInfo"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate" :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
@TimeSlotSelected="updateTimeSlot" @TimeSlotSelected="updateTimeSlot"
@date-clicked="handleDateClicked" /> @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 <navbar
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
ref="navbar" ref="navbar"
@ -95,7 +54,6 @@ import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form, defineRule } from "vee-validate"; import { Form, defineRule } from "vee-validate";
import datePicker from "@/digital-components/date-picker/date-picker"; import datePicker from "@/digital-components/date-picker/date-picker";
import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts"; 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"; import textBlock from "@/digital-components/text-block/text-block";
// Supporting files // Supporting files
@ -128,24 +86,7 @@ import { partNumberStrings } from "@/constants/part-number-strings";
import { deepClone } from "@/helpers/object-helper"; import { deepClone } from "@/helpers/object-helper";
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
// defineRule("date-required", required(errorMessages.DATE_REQUIRED)); 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;
// });
// Define constants // Define constants
const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work) 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; return this.$store.getters.order.serviceLocation.appointmentType;
}, },
timeSlotsForSelectedDate() { timeSlotsForSelectedDate() {
console.log("SCHEDULE, computing timeSlotsForSelectedDate... this.selectedDate: ", this.selectedDate)
if (!this.selectedDate) return null; if (!this.selectedDate) return null;
let tempOutput = this.selectableDatesData.days?.find( let tempOutput = this.selectableDatesData.days?.find(
(selectableDate) => selectableDate.date === this.selectedDate (selectableDate) => selectableDate.date === this.selectedDate
); );
console.log("SCHEDULE, computing timeSlotsForSelectedDate... returning: ", tempOutput)
debugger; // eslint-disable-line no-debugger
return this.selectableDatesData.days?.find( return this.selectableDatesData.days?.find(
(selectableDate) => selectableDate.date === this.selectedDate (selectableDate) => selectableDate.date === this.selectedDate
@ -495,9 +433,6 @@ export default {
getServiceZipCtuCodeFromStore() { getServiceZipCtuCodeFromStore() {
return store.getters.order.serviceLocation.zipCodeCtu; return store.getters.order.serviceLocation.zipCodeCtu;
}, },
openInshopTimeSlotsModal() {
this.$refs["timeSlotModalQuestion"].openModal();
},
getSelectedDate() { getSelectedDate() {
return store.getters.order.schedule.date; return store.getters.order.schedule.date;
}, },
@ -517,20 +452,11 @@ export default {
isPremiumAppointment: isPremiumAppointment, isPremiumAppointment: isPremiumAppointment,
}; };
console.log("SCHEDULE, computing getSelectedTimeSlotInfo()... returning: ", selectedTimeSlotInfo)
debugger; // eslint-disable-line no-debugger
return selectedTimeSlotInfo; return selectedTimeSlotInfo;
}, },
getSupportingItems() { getSupportingItems() {
return store.getters.lineItems.supportingItems; 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) { updateFooterButtonText(timeSlotInfo) {
let navbarButtonText; let navbarButtonText;
if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) { if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
@ -585,9 +511,6 @@ export default {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
forwardButtonAction() { forwardButtonAction() {
console.log(" ")
console.log("SCHEDULE, forwardButtonAction... this.selectedTimeSlotInfo: ", this.selectedTimeSlotInfo)
debugger; // eslint-disable-line no-debugger
this.updateSupportingItems(); this.updateSupportingItems();
if (this.waitListRequested) { if (this.waitListRequested) {
@ -742,24 +665,13 @@ export default {
} else { } else {
this.includePricingByDayUpcharge = false; this.includePricingByDayUpcharge = false;
} }
// this.openInshopTimeSlotsModal(); // TURNON OR TURNOFF OLD MODAL OLDMODAL AJC
}, },
updateTimeSlot(timeSlot) { updateTimeSlot(timeSlot) {
console.log(" << NEW >> updateTimeSlot()... timeSlot: ", timeSlot)
debugger; // eslint-disable-line no-debugger
this.selectedTimeSlotInfo = timeSlot; this.selectedTimeSlotInfo = timeSlot;
} }
}, },
watch: { watch: {
selectedDate(newValue, oldValue) { 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 // Clear time slot selection if date selected changes
if (newValue !== oldValue) { if (newValue !== oldValue) {
this.selectedTimeSlotInfo = { this.selectedTimeSlotInfo = {
@ -776,10 +688,6 @@ export default {
} }
}, },
selectedTimeSlotInfo(newValue) { selectedTimeSlotInfo(newValue) {
console.log("SCHEDULE WATCHED selectedTimeSlotInfo was updated to: ", newValue)
debugger; // eslint-disable-line no-debugger
this.updateFooterButtonText(newValue); this.updateFooterButtonText(newValue);
}, },
}, },
@ -791,7 +699,6 @@ export default {
loadingModal, loadingModal,
datePicker, datePicker,
locationAlerts, locationAlerts,
timeSlotModalQuestion,
textBlock, 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> </style>