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

CASH-464: working without modal and validation works too

Browse source
This commit is contained in:
Adam Caouette 2025-04-21 22:59:36 -04:00
parent 44671d60fe
commit 43b53c9be8
2 changed files with 276 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,12 @@
: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()}`"
@ -99,11 +105,46 @@
@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"
/>
</fieldset>
</div>
</template>
<script>
import timeSlotQuestion from "@/layouts/schedule/time-slot-question/time-slot-question.vue";
// Supporting files
import loader from "@/ux-components/loader/loader";
import store from "@/store";
@ -113,6 +154,11 @@ import {
MONTHS_OF_YEAR,
DAYS_OF_WEEK,
} from "@/digital-components/date-picker/mixins/constants";
import {
AppointmentTypeStrings,
PREMIUM_FEE_PART_TYPE,
PRICING_BY_DAY_PART_TYPE,
} from "@/constants/schedule-constants";
import {
selectableDaysOptions,
requiredParameter,
@ -122,11 +168,25 @@ import {
convertDateToDateString,
convertDateStringToDate,
} from "@/layouts/schedule/helpers/schedule-helper";
import { useField, ErrorMessage } from "vee-validate";
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() {
@ -136,6 +196,9 @@ export default {
disableViewMoreDatesButton: false,
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
hideSomeDaysForInitialView: null,
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
};
},
props: {
@ -169,6 +232,10 @@ export default {
pricingByDayBasePrice: Number,
pricingByDayUpcharge: Number,
isPricingByDayExperiment: Boolean,
// selectedTimeSlotInfo: Object,
timeSlotsForSelectedDate: Object,
},
setup(props) {
const uuid = uuidv4();
@ -184,6 +251,9 @@ export default {
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);
@ -228,12 +298,36 @@ 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) {
@ -744,9 +838,50 @@ 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();
var isPremiumAppointment = false;
if (supportingItems) {
isPremiumAppointment =
!!supportingItems.filter(
(lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
).length > 0;
}
const selectedTimeSlotInfo = {
timeSlot: store.getters.order.schedule,
isPremiumAppointment: isPremiumAppointment,
};
console.log("%c DP - computing getSelectedTimeSlotInfo()... returning: ", "background: lime; color: black;", selectedTimeSlotInfo);
debugger; // eslint-disable-line no-debugger
return selectedTimeSlotInfo;
},
getSupportingItems() {
return store.getters.lineItems.supportingItems;
},
},
watch: {
modelValue(newValue, oldValue) {
console.log("%c DP - WATCHED modelValue now: ", "background: lime; color: black;", newValue);
console.log(" ");
debugger; // eslint-disable-line no-debugger
this.resetField({
value: newValue,
});
@ -757,10 +892,31 @@ 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
);
},
},
components: {
loader,
ErrorMessage,
timeSlotQuestion,
},
};
</script>
@ -1115,7 +1271,7 @@ export default {
&:focus + label,
&:checked:focus + label {
box-shadow: none;
background-color: $white;
background-color: $blue-100;
color: $black;
}
&:checked + label {
@ -1209,4 +1365,12 @@ export default {
max-width: 414px;
text-align: left;
}
.new-times {
min-height: 1rem;
padding: .2rem;
margin: 1rem 0;
background: lightgreen;
font-size: .6rem;
}
</style>

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

@ -1,6 +1,14 @@
<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">
@ -23,6 +31,7 @@
selectableDatesSetting="custom"
ref="datePicker"
v-model="selectedDate"
v-model:new="selectedTimeSlotInfo"
class="text-link-small"
:customSelectableDatesCallback="getAvailableDatesMethod"
validationRules="date-required"
@ -30,34 +39,41 @@
:pricingByDayUpcharge="pricingByDayUpcharge"
:showPricingByDay="showPricingByDay"
:isPricingByDayExperiment="isPricingByDayExperiment"
@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"
:selectedTimeSlotInfo="selectedTimeSlotInfo"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:estimatedServiceMinutesMinimum="
selectableDatesData.estimatedServiceMinutesMinimum
"
:estimatedServiceMinutesMaximum="
selectableDatesData.estimatedServiceMinutesMaximum
"
@waitListRequested="handleWaitListRequested"
@time-slot-modal-closed="timeSlotModalClosed"
validationRules="time-slot-selection-required"
@TimeSlotSelected="forwardButtonAction" />
@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"
@ -112,13 +128,24 @@ import { partNumberStrings } from "@/constants/part-number-strings";
import { deepClone } from "@/helpers/object-helper";
// DEFINE VALIDATION RULES
defineRule("date-required", required(errorMessages.DATE_REQUIRED));
defineRule("time-slot-selection-required", (value) => {
if (value?.timeSlot?.routeCode == null) {
return 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
const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
@ -398,8 +425,15 @@ 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
);
@ -483,6 +517,9 @@ export default {
isPremiumAppointment: isPremiumAppointment,
};
console.log("SCHEDULE, computing getSelectedTimeSlotInfo()... returning: ", selectedTimeSlotInfo)
debugger; // eslint-disable-line no-debugger
return selectedTimeSlotInfo;
},
getSupportingItems() {
@ -548,6 +585,9 @@ 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) {
@ -703,11 +743,23 @@ export default {
this.includePricingByDayUpcharge = false;
}
this.openInshopTimeSlotsModal();
// 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 = {
@ -724,6 +776,10 @@ export default {
}
},
selectedTimeSlotInfo(newValue) {
console.log("SCHEDULE WATCHED selectedTimeSlotInfo was updated to: ", newValue)
debugger; // eslint-disable-line no-debugger
this.updateFooterButtonText(newValue);
},
},
@ -765,4 +821,25 @@ export default {
margin-bottom: 0.25rem;
}
}
.modal-open {
overflow: auto !important;
padding-right: auto !important;
.modal {
position: relative;
display: block;
height: auto;
}
.modal-backdrop {
display: none !important;
}
}
</style>