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

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

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

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

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