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

CASH-845 - sorting out appointmentType conflicts

Browse source
This commit is contained in:
AdamCaouetteSafelite 2025-07-09 08:59:53 -04:00
parent d4ed508c1f
commit 35dbb3887b
3 changed files with 72 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -142,12 +142,13 @@
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget"
:selectedDate="selectedDate"
:appointmentType="appointmentType"
:appointmentType="appointmentTypeForTimeSlotQuestion"
:premiumAppointmentFee="premiumAppointmentFee"
:displayWaitList="displayWaitList"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
:estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
@appointmentTypeUpdated="updateAppointmentType"
@waitListRequested="handleWaitListRequested"
@time-slot-modal-closed="timeSlotModalClosed" />
</fieldset>
@ -224,7 +225,7 @@ export default {
pricingByDayUpcharge: Number,
isPricingByDayExperiment: Boolean,
timeSlotsForSelectedDate: Object,
appointmentType: String,
appointmentTypeForTimeSlotQuestion: String,
premiumAppointmentFee: Object,
estimatedServiceMinutesMinimum: Number,
estimatedServiceMinutesMaximum: Number,
@ -876,6 +877,9 @@ export default {
handleWaitListRequested(value) {
this.$emit("waitListRequested", value);
},
updateAppointmentType(type) {
this.$emit("appointmentTypeUpdated", type);
}
},
watch: {
modelValue(newValue) {

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

@ -66,7 +66,7 @@
<div class="row justify-content-center appointment-type">
<div class="col-md-6">
<appointmentTypeQuestion
v-model="selectedAppointmentType"
v-model="appointmentTypeFromAppointmentTypeQuestion"
v-show="isAppointmentTypeDisplayed"
:isServiceableMobile="isServiceableMobile"
:isServiceableInshop="isServiceableInshop"
@ -83,7 +83,7 @@
<div class="row justify-content-center your-shop-location">
<div class="col-md-6 col-xl-4">
<button-question
v-if="selectedAppointmentType == appointmentTypeStrings.IN_SHOP"
v-if="appointmentType == appointmentTypeStrings.IN_SHOP"
class="shop-question-button"
ref="buttonQuestion"
:answers="selectedShopAnswer"
@ -105,7 +105,7 @@
</div>
<shopQuestionPopup
modalWidgetName="ShopQuestionPopupWidget"
:selectedAppointmentType="selectedAppointmentType"
:appointmentType="appointmentType"
:modelValue="{
zipCode: zipCode,
providerNumber: selectedProvider?.providerNumber,
@ -130,7 +130,7 @@
<locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
<datePicker
v-show="selectedAppointmentType"
v-show="appointmentType"
customComponentId="dateQuestion"
selectableDatesSetting="custom"
ref="datePicker"
@ -145,11 +145,12 @@
:showPricingByDay="showPricingByDay"
:isPricingByDayExperiment="isPricingByDayExperiment"
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
:appointmentType="selectedAppointmentType"
:appointmentTypeForTimeSlotQuestion="appointmentType"
:premiumAppointmentFee="mobilePremiumAppointmentFee"
:estimatedServiceMinutesMinimum="getServiceMinutesMin"
:estimatedServiceMinutesMaximum="getServiceMinutesMax"
@TimeSlotSelected="updateTimeSlot"
@timeSlotSelected="updateTimeSlot"
@appointmentTypeUpdated="updateAppointmentType"
:displayWaitList="displayWaitList"
@waitListRequested="handleWaitListRequested" />
<navbar
@ -408,7 +409,8 @@ export default {
isRecalibrationServiceableDropoff: null,
isGlassServiceableMobile: null,
isRecalibrationServiceableMobile: null,
selectedAppointmentType: this.getSelectedAppointmentType(),
appointmentType: this.getAppointmentType(),
appointmentTypeFromAppointmentTypeQuestion: this.getAppointmentType(),
selectedProvider: this.getSelectedProvider(),
mobileFeePart: null,
recycleFeePart: null,
@ -459,7 +461,7 @@ export default {
const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote
const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown);
let includePricingByDayUpcharge = false;
let selectedAppointmentType = store.getters.order.serviceLocation.appointmentType;
let appointmentType = store.getters.order.serviceLocation.appointmentType;
// Check to see if date should be pre-selected
let preSelectedSlot = await store.getters.order.schedule;
@ -468,7 +470,7 @@ export default {
if (preSelectedSlot.date && preSelectedSlot.date.length > 0) {
preSelectedDate = preSelectedSlot.date;
if (selectedAppointmentType === AppointmentTypeStrings.MOBILE) {
if (appointmentType === AppointmentTypeStrings.MOBILE) {
preSelectedDate += "-mobile";
}
@ -607,7 +609,7 @@ export default {
vm.pricingByDayUpcharge = pricingByDayUpcharge;
vm.showPricingByDay = showPricingByDay;
vm.selectedAppointmentType = selectedAppointmentType;
vm.appointmentType = appointmentType;
vm.setData(
resultMap.zipCodeData,
resultMap.serviceabilityDetails,
@ -661,7 +663,7 @@ export default {
set: function (newValue) {
if (newValue.zipCode !== this.zipCode) {
this.resetMobileLocation();
this.selectedAppointmentType = null;
this.appointmentType = null;
this.selectedProvider = new Provider();
}
@ -673,7 +675,7 @@ export default {
},
},
isMobileSelected() {
return this.selectedAppointmentType == AppointmentTypeStrings.MOBILE;
return this.appointmentType == AppointmentTypeStrings.MOBILE;
},
isServiceableMobile() {
if (this.isRecalibrationServiceableMobile !== null) {
@ -752,8 +754,8 @@ export default {
},
isShopQuestionDisplayed() {
return (
this.selectedAppointmentType === "Inshop" ||
this.selectedAppointmentType === "Dropoff"
this.appointmentType === "Inshop" ||
this.appointmentType === "Dropoff"
);
},
isAppointmentTypeDisplayed() {
@ -816,7 +818,7 @@ export default {
availabilityRatingCallback: getAvailabilityRating,
startDate: formattedStartDate,
endDate: formattedEndDate,
shopAppointmentType: this.selectedAppointmentType,
shopAppointmentType: this.appointmentType,
};
},
selectedShopAnswer() {
@ -1035,7 +1037,7 @@ export default {
getIsVehicleProtectedFromStore() {
return store.getters.order.serviceLocation.isVehicleProtected;
},
getSelectedAppointmentType() {
getAppointmentType() {
return store.getters.order.serviceLocation.appointmentType;
},
getSelectedProvider() {
@ -1068,7 +1070,7 @@ export default {
updateAndSaveIsMSRFeeApplicable() {
const isMSRFeeApplicable =
this.isMobileStaticRecalibrationApplicable &&
this.selectedAppointmentType == "Mobile";
this.appointmentType == "Mobile";
this.dispatchStoreAction(
this.storeActions.SAVE_IS_MSR_FEE_APPLICABLE,
isMSRFeeApplicable
@ -1104,7 +1106,7 @@ export default {
}
// if we have a mobile fee, then save/update supporting items
if (this.selectedAppointmentType == "Mobile") {
if (this.appointmentType == "Mobile") {
const mobileFeeIndex = supportingItems.findIndex(
(item) => item.partType == MOBILE_FEE_PART_TYPE
);
@ -1241,7 +1243,7 @@ export default {
getSelectedDate() {
let isMobileSelected = this.isMobileSelected;
if (isMobileSelected === undefined) {
isMobileSelected = this.selectedAppointmentType === AppointmentTypeStrings.MOBILE;
isMobileSelected = this.appointmentType === AppointmentTypeStrings.MOBILE;
}
let storedDate = store.getters.order.schedule.date;
if (isMobileSelected) storedDate += "-mobile";
@ -1277,7 +1279,7 @@ export default {
timeSlotInfo.timeSlot.date
)}`;
if (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF) {
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP || this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
if (
!timeSlotInfo.timeSlot.routeCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)
) {
@ -1286,7 +1288,7 @@ export default {
)}`;
}
} else if (
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE &&
this.appointmentType === AppointmentTypeStrings.MOBILE &&
!timeSlotInfo.isPremiumAppointment
) {
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
@ -1341,7 +1343,7 @@ export default {
this.navigatingForward = true;
var ctu = this.zipCodeCtu;
if (
this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
this.appointmentType == AppointmentTypeStrings.MOBILE &&
this.selectedProvider &&
this.selectedProvider.address
) {
@ -1366,7 +1368,7 @@ export default {
state: this.state,
zipCode: this.zipCode,
zipCodeCtu: ctu,
appointmentType: this.selectedAppointmentType,
appointmentType: this.appointmentType,
isVehicleProtected: this.isVehicleProtected,
provider: {
providerNumber: this.selectedProvider?.providerNumber,
@ -1451,7 +1453,7 @@ export default {
);
}
if (this.selectedAppointmentType == AppointmentTypeStrings.MOBILE) {
if (this.appointmentType == AppointmentTypeStrings.MOBILE) {
//navigate to mobile details page
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
@ -1526,7 +1528,7 @@ export default {
// if we have a premium fee(early bird), then save/update supporting items
if (
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE &&
this.appointmentType === AppointmentTypeStrings.MOBILE &&
this.selectedTimeSlotInfo?.isPremiumAppointment
) {
const premiumFeeIndex = supportingItems.findIndex(
@ -1578,6 +1580,9 @@ export default {
updateTimeSlot(timeSlot) {
this.selectedTimeSlotInfo = timeSlot;
},
updateAppointmentType(type) {
this.appointmentType = type;
}
},
watch: {
zipCode: {
@ -1585,7 +1590,7 @@ export default {
if (!this.navigatingForward) {
getShopProviderData(this.zipCode).then(async (result) => {
this.shopProviderData = result.data;
if (this.selectedAppointmentType === "Mobile") {
if (this.appointmentType === "Mobile") {
this.selectedProvider = new Provider(
this.shopProviderData.mobileProviderNumber
);
@ -1596,9 +1601,9 @@ export default {
}
},
},
selectedAppointmentType: {
appointmentType: {
handler(newValue, oldValue) {
if (newValue === "Mobile") {
if (newValue === AppointmentTypeStrings.MOBILE) {
this.selectedProvider = new Provider(
this.shopProviderData.mobileProviderNumber
);
@ -1609,6 +1614,16 @@ export default {
},
},
appointmentTypeFromAppointmentTypeQuestion: {
handler(newValue, oldValue) {
if (newValue === AppointmentTypeStrings.MOBILE) {
this.appointmentType = AppointmentTypeStrings.MOBILE;
} else {
this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
}
},
},
selectedDate(newValue, oldValue) {
// Clear time slot selection if date selected changes
if (newValue !== oldValue) {

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

@ -1,6 +1,5 @@
<template>
<div class="time-slots-question">
<textBlock customText="Select a time:" justifyText="center" class="time-slot-header" />
<textBlock
v-show="durationTextBlockCopy"
:customText="durationTextBlockCopy"
@ -9,12 +8,12 @@
class="duration-text-block" />
<buttonQuestion
v-if="isDropOffAppointmentAvailable"
v-model="selectedAnswerForDropOff"
v-model="selectedAnswerForDropOffOrInshop"
:questionText="dropOffOrPickATimeQuestionLabelText"
:answers="answersForDropOffQuestion"
isRequired
insertOrLabelBeforeFinalOption
groupName="chooseDropOffOrPickATime">
groupName="chooseDropOffOrInshop">
<div>
<alert
v-if="shouldDisplayDropOffAlert"
@ -158,7 +157,7 @@ export default {
selectedRouteCode: null,
timeSlotModalListButton: timeSlotModalListButton,
waitListRequested: this.getWaitListRequestedFromStore(),
selectedAnswerForDropOff: null,
selectedAnswerForDropOffOrInshop: null,
selectedAnswerForTimeSlots: null,
};
},
@ -424,10 +423,10 @@ export default {
return this.appointmentType === AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF;
},
shouldDisplayDropOffAlert() {
return this.isDropOffRouteCode(this.selectedAnswerForDropOff);
return this.isDropOffRouteCode(this.selectedAnswerForDropOffOrInshop);
},
dropOffTimeSlotAlertCMSWidgetName() {
if (this.selectedAnswerForDropOff.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
if (this.selectedAnswerForDropOffOrInshop.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
return "OvernightDropOffTimeSlotAlert";
} else if (this.isSameDay) {
return "SameDayDropOffTimeSlotAlert";
@ -444,7 +443,7 @@ export default {
},
shouldDisplayTimeSlotQuestion() {
return (
this.selectedAnswerForDropOff == PICK_A_TIME_BUTTON_VALUE ||
this.selectedAnswerForDropOffOrInshop == PICK_A_TIME_BUTTON_VALUE ||
!this.isDropOffAppointmentAvailable
);
},
@ -530,9 +529,9 @@ export default {
this.selectedAnswerForTimeSlots = this.addPremiumFlagToInput(routeCodeFromParent);
} else {
if (this.isDropOffRouteCode(routeCodeFromParent)) {
this.selectedAnswerForDropOff = routeCodeFromParent;
} else {
this.selectedAnswerForDropOff = PICK_A_TIME_BUTTON_VALUE;
this.selectedAnswerForDropOffOrInshop = routeCodeFromParent;
} else if (routeCodeFromParent) {
this.selectedAnswerForDropOffOrInshop = PICK_A_TIME_BUTTON_VALUE;
this.selectedAnswerForTimeSlots = routeCodeFromParent;
}
}
@ -546,7 +545,7 @@ export default {
if (this.availableTimeSlots.length > 0) {
this.selectedAnswerForTimeSlots = this.availableTimeSlots[0].value;
} else {
this.selectedAnswerForDropOff = this.answersForDropOffQuestion[0].value;
this.selectedAnswerForDropOffOrInshop = this.answersForDropOffQuestion[0].value;
}
}
},
@ -630,21 +629,27 @@ export default {
this.autoSelectTimeSlotIfOnlyOneIsAvailable();
},
},
selectedRouteCode(newVal) {
if (newVal) {
selectedRouteCode(newValue) {
if (newValue) {
this.setSelectedTimeSlot();
}
},
selectedAnswerForDropOff(newValue) {
if (newValue == PICK_A_TIME_BUTTON_VALUE) {
selectedAnswerForDropOffOrInshop(newValue) {
if (newValue == PICK_A_TIME_BUTTON_VALUE) { // Inshop selected
this.selectedRouteCode = null;
} else {
this.selectedAnswerForTimeSlots = null;
this.$emit("appointmentTypeUpdated", AppointmentTypeStrings.IN_SHOP);
} else if (newValue) { // Dropoff selected
this.$emit("appointmentTypeUpdated", AppointmentTypeStrings.DROP_OFF);
this.selectedRouteCode = newValue;
} else { // none selected
this.selectedAnswerForTimeSlots = null;
this.$emit("appointmentTypeUpdated", null);
}
},
selectedAnswerForTimeSlots(newValue) {
if (newValue) this.selectedRouteCode = newValue;
if (newValue) {
this.selectedRouteCode = newValue;
}
},
},
components: {