diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index fefeb30ff..bc4d6318e 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -31,8 +31,8 @@
SaturdayS
initialViewEndDate) {
// should part of 1st month be hidden?
@@ -243,7 +288,7 @@ export default {
}
}
- let myPromise = new Promise((resolve, reject) => {
+ const myPromise = new Promise((resolve, reject) => {
const response = config.customSelectableDatesCallback(
initialViewStartDate.toISOString().split("T")[0],
initialViewEndDate.toISOString().split("T")[0],
@@ -431,12 +476,6 @@ export default {
"-" +
forceTwoDigitString(i);
- const thisDate = {
- year: yearNum,
- month: monthIndex,
- date: i,
- dateString: dateString,
- };
if (offset === 0 && i === this.todayDateNum) {
dayClasses += "current-day";
}
@@ -457,11 +496,9 @@ export default {
const dateObject = {
dateNum: i,
dayClasses: dayClasses,
- inputValue: thisDate,
+ inputValue: dateString,
isSelectable:
- this.selectableDatesData.findIndex(
- (date) => date.dateString === dateString
- ) > -1
+ this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
? true
: false,
};
@@ -510,8 +547,8 @@ export default {
if (monthToShow) {
// make new API call with this month's start and end dates
await this.updateSelectableDates(
- monthToShow.dates[monthStartDateNum].inputValue.dateString,
- monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString
+ monthToShow.dates[monthStartDateNum].inputValue,
+ monthToShow.dates[monthToShow.dates.length - 1].inputValue
);
this.isLoading = false;
this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
@@ -531,13 +568,13 @@ export default {
);
moreSelectableDates.days.forEach((selectableDate) => {
const index = this.selectableDatesData.findIndex(
- (obj) => obj.dateString === selectableDate.dateString
+ (dateObj) => dateObj.date === selectableDate.date
);
- if (index === -1) this.selectableDatesData.push(selectableDate);
+ if (index === -1) this.selectableDatesData.push(selectableDate.date);
this.months.forEach((month) => {
- // TODO: avoid checking all calendar date; maybe only ones between monthStart and monthEnd as defined above?
+ // TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
month.dates.forEach((date) => {
- if (date.inputValue.dateString === selectableDate.dateString) {
+ if (date.inputValue === selectableDate.date) {
date["isSelectable"] = true;
}
});
@@ -808,7 +845,6 @@ export default {
.btn-link {
font-weight: 500;
text-underline-offset: 4px;
- box-shadow: none !important; // TODO: FIX THIS
position: absolute;
top: 90%;
}
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 42775f476..4a80e74d2 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -107,29 +107,16 @@ const getAvailableDates = async (startDate, endDate, appointmentType, providerNu
);
}
- const newShopTimeSlots = newTimeSlotsResponse.data;
- return convertApiResponse(newShopTimeSlots);
-};
-const convertApiResponse = (responseData) => {
- // DATA CONVERSION
- responseData?.days.forEach((date) => {
- const dateString = date.date;
- date.dateString = dateString;
- const dateStringPieces = dateString.split("-");
- date.year = Number(dateStringPieces[0]);
- date.month = Number(dateStringPieces[1]);
- date.date = Number(dateStringPieces[2]);
- });
- return responseData;
+ return newTimeSlotsResponse.data;
};
export default {
name: "schedule",
data() {
return {
- selectedDate: null,
+ selectedDate: this.getSelectedDate(),
selectedTimeSlotData: {
- id: null,
+ id: this.getSelectedRouteCode(),
isPremiumAppointment: null,
},
selectableDatesData: [],
@@ -215,7 +202,7 @@ export default {
if (this.selectedDate === null) {
return null;
}
- return this.selectableDatesData.days.find(
+ return this.selectableDatesData.days?.find(
(selectableDate) => selectableDate.dateString === this.selectedDate.dateString
);
},
@@ -226,13 +213,15 @@ export default {
const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(
this.selectedTimeSlotData.id
);
+
if (timeSlotSelectedObject) {
return {
date: this.selectedDate.dateString,
startTime: timeSlotSelectedObject.startTime,
endTime: timeSlotSelectedObject.endTime,
routeCode: this.selectedTimeSlotData.id,
- jobMaxMinutes: this.selectableDatesData.estimatedServiceMinutesMaximum,
+ jobMaxMinutes:
+ this.selectableDatesData.estimatedServiceMinutesMaximum.toString(),
};
} else {
return null;
@@ -273,6 +262,12 @@ export default {
).timeSlots;
return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId);
},
+ getSelectedDate() {
+ return store.getters.order.schedule.date;
+ },
+ getSelectedRouteCode() {
+ return store.getters.order.schedule.routeCode;
+ },
timeSlotModalClosed() {
// Clear the selectedDate if no timeSlot has been selected
if (!this.selectedTimeSlotData.id) {
@@ -335,12 +330,11 @@ export default {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
- await this.dispatchStoreAction(
+ this.dispatchStoreAction(
this.storeActions.SAVE_SCHEDULE,
this.appointmentDateAndTime,
false
);
-
navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
},
},
diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
index a622dd875..62d052941 100644
--- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
+++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
@@ -157,9 +157,10 @@ export default {
return false;
},
dateSelectedReadableDate() {
- if (this.dateAndTimeSlotData === null) {
+ if (!this.dateAndTimeSlotData) {
return null;
}
+
// This conversion ensures we don't get get GMT induced date changes
const dateObject = new Date(`${this.dateAndTimeSlotData.dateString}T00:00:00`);
// Ex: Tuesday, April 22
@@ -170,7 +171,7 @@ export default {
});
},
availableTimeSlots() {
- if (this.dateAndTimeSlotData === null) {
+ if (!this.dateAndTimeSlotData) {
return null;
}
if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 713cdb089..252eac529 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -142,7 +142,7 @@ export default {
city: this.getServiceCityFromStore(),
state: this.getServiceStateFromStore(),
zipCode: this.getServiceZipCodeFromStore(),
- isVehicleProtected: null,
+ isVehicleProtected: this.getIsVehicleProtectedFromStore(),
isGlassServiceableInshop: null,
isRecalibrationServiceableInshop: null,
isGlassServiceableMobile: null,
@@ -348,6 +348,9 @@ export default {
getServiceZipCodeFromStore() {
return store.getters.order.serviceLocation.zipCode;
},
+ getIsVehicleProtectedFromStore() {
+ return store.getters.order.serviceLocation.isVehicleProtected;
+ },
getSelectedAppointmentType() {
return store.getters.order.serviceLocation.appointmentType;
},
diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
index 73c07a85a..f29ccf37b 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -63,13 +63,11 @@ export default {
.availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
.then((data) => {
this.availabilityRating = data;
- this.isLoaderDisplayed = false;
});
}
},
data() {
return {
- isLoaderDisplayed: false,
availabilityRating: null,
};
},
@@ -80,6 +78,9 @@ export default {
"true"
);
},
+ isLoaderDisplayed() {
+ return this.availabilityRating == null;
+ },
availabilityRatingClass() {
if (this.availabilityRating == null) {
return "gray";
@@ -191,7 +192,7 @@ export default {
.button-auxillary-copy {
box-sizing: border-box;
justify-content: right;
- line-height: 1.25rem !important;
+ line-height: 1.25rem;
font-weight: 500;
font-size: 0.75rem;
align-items: center;
@@ -204,7 +205,7 @@ export default {
}
.loader:after {
- background-color: $gray-300 !important;
+ background-color: $gray-300;
height: 1rem;
width: 1rem;
}
@@ -220,7 +221,7 @@ export default {
}
&.gray {
- color: $gray-600 !important;
+ color: $gray-600;
background-color: $gray-100;
padding-left: 0.125rem;
padding-right: 0.125rem;
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 2bc4cba7b..929c779af 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -280,7 +280,7 @@ export default {
border-radius: 0.5rem;
display: flex;
flex-direction: row;
- padding: 0.5rem 0.5rem 0.5rem 1.5rem !important;
+ padding: 0.5rem 0.5rem 0.5rem 1.5rem;
gap: 0.25rem;
.alert-heading {
diff --git a/src/store/index.js b/src/store/index.js
index bb8ba2868..67917bf01 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -39,11 +39,13 @@ const getDefaultState = () => {
},
serviceLocation: {
address: null,
+ address2: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null,
appointmentType: null,
+ isVehicleProtected: null,
provider: {
providerNumber: null,
address: {
@@ -84,6 +86,7 @@ const getDefaultState = () => {
startTime: null,
endTime: null,
routeCode: null,
+ jobMaxMinutes: null,
},
referralNumber: null,
referralDate: null,
@@ -268,6 +271,7 @@ export const mutations = {
state.order.schedule.startTime = scheduleInfo.startTime;
state.order.schedule.endTime = scheduleInfo.endTime;
state.order.schedule.routeCode = scheduleInfo.routeCode;
+ state.order.schedule.jobMaxMinutes = scheduleInfo.jobMaxMinutes;
}
},
@@ -440,6 +444,7 @@ export const mutations = {
state.order.schedule.startTime = sessionInformation.order.schedule?.startTime;
state.order.schedule.endTime = sessionInformation.order.schedule?.endTime;
state.order.schedule.routeCode = sessionInformation.order.schedule?.routeCode;
+ state.order.schedule.jobMaxMinutes = sessionInformation.order.schedule?.jobMaxMinutes;
},
updateExperiments(state, experiments) {
state.applicationUser.experiments = experiments;
@@ -1340,6 +1345,7 @@ export const actions = {
startTime: order.schedule?.startTime,
endTime: order.schedule?.endTime,
routeCode: order.schedule?.routeCode,
+ jobMaxMinutes: order.schedule?.jobMaxMinutes,
},
existingPromoCode: null,
referralCorrelationId: order.referralCorrelationId,
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 73845e5cc..f8e1c50f1 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -56,3 +56,9 @@ body {
height: calc(100% - 72px);
}
}
+//Disable scroll of main container when modal is open
+.modal-open {
+ .page-container-grouped-styles {
+ overflow: hidden;
+ }
+}
diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss
index 9af066bb0..07329fc71 100644
--- a/src/styles/shared-input-button-styles.scss
+++ b/src/styles/shared-input-button-styles.scss
@@ -9,6 +9,7 @@
position: relative;
z-index: 5;
@include box-shadow-hover($blue-300);
+ border-radius: 0.5rem;
}
}
}
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 1e95a4052..976e8ed04 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -190,3 +190,6 @@ $alert-color-scale: 40%;
// This affects all [Bootstrap] modals
$modal-fade-transform: translate(0, 100%);
$modal-backdrop-opacity: 0;
+
+//Disable default !important behavior
+$enable-important-utilities: false;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7755249ab..ee8785022 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -94,7 +94,7 @@ export default {
+ .list-card-content {
outline: none;
- display: block;
+ display: flex;
position: relative;
p {