CASH-1790 updates for schedule page
This commit is contained in:
Adam Caouette
parent
7eed110bd2
commit
c4257e2eae
1 changed files with 40 additions and 6 deletions
|
|
@ -40,6 +40,13 @@
|
|||
cmsWidgetName="AppointmentTypeQuestionWidget"
|
||||
validationRules="option-required"
|
||||
labelBold="true" />
|
||||
<loader
|
||||
v-if="
|
||||
isServiceableMobile && isServiceableInshop && !hasSelectableDatesLoaded
|
||||
"
|
||||
class="appointment-type-loader"
|
||||
loaderColor="blue"
|
||||
loaderPosition="center" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -154,7 +161,8 @@
|
|||
:pricingByDayBasePrice="pricingByDayBasePrice"
|
||||
:pricingByDayUpcharge="pricingByDayUpcharge"
|
||||
:showPricingByDay="showPricingByDay"
|
||||
:isPricingByDayExperiment="isPricingByDayExperiment" />
|
||||
:isPricingByDayExperiment="isPricingByDayExperiment"
|
||||
:loadingStatus="calendarLoadingStatus" />
|
||||
<timeSlotQuestion
|
||||
ref="timeSlotModalQuestion"
|
||||
v-if="showTimeSlotQuestion"
|
||||
|
|
@ -173,7 +181,8 @@
|
|||
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
|
||||
:isSameDay="isSameDay"
|
||||
:selectedRouteCodeData="selectedRouteCodeData"
|
||||
@waitListRequested="handleWaitListRequested" />
|
||||
@waitListRequested="handleWaitListRequested"
|
||||
lazyLoadAmountToLoad="10" />
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
|
|
@ -215,6 +224,7 @@ import textBlock from "@/digital-components/text-block/text-block";
|
|||
import mobileFeeWaiverAlert from "./mobile-fee-waiver-alert/mobile-fee-waiver-alert.vue";
|
||||
|
||||
// Supporting files
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import experimentMixin from "@/mixins/experiment-mixin.js";
|
||||
import { experimentUniverses, experimentSettings } from "@/constants/experiments";
|
||||
|
|
@ -485,6 +495,7 @@ export default {
|
|||
experimentSettings.SHOW_MOBILE_FIRST_APPT,
|
||||
"true"
|
||||
),
|
||||
calendarLoadingStatus: "none",
|
||||
};
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -595,6 +606,8 @@ export default {
|
|||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.showLoadingModal();
|
||||
vm.calendarLoadingStatus = "initial";
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
|
||||
vm.mobilePremiumAppointmentFee = pricedPremiumFee;
|
||||
|
|
@ -615,6 +628,8 @@ export default {
|
|||
);
|
||||
vm.initializeDatePicker().then(() => {
|
||||
vm.showMobileFirstModal();
|
||||
vm.calendarLoadingStatus = "none";
|
||||
vm.hideLoadingModal();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
@ -1147,9 +1162,11 @@ export default {
|
|||
);
|
||||
}
|
||||
},
|
||||
async onShopSelected(shopQuestionPopUpData) {
|
||||
onShopSelected(shopQuestionPopUpData) {
|
||||
this.resetWaitlist();
|
||||
this.preSelectedDate = null;
|
||||
this.calendarLoadingStatus = "reinitial";
|
||||
this.$refs.datePicker.isLoading = true;
|
||||
this.shopProviderData = shopQuestionPopUpData.shopProviderData;
|
||||
const oldProvider = this.selectedProvider;
|
||||
const selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => {
|
||||
|
|
@ -1169,11 +1186,16 @@ export default {
|
|||
this.updateSelectedProvider(selectedProvider);
|
||||
}
|
||||
}
|
||||
await this.initializeDatePicker();
|
||||
this.setSelectedDateToFirstAvailable();
|
||||
this.initializeDatePicker().then(() => {
|
||||
this.showMobileFirstModal();
|
||||
this.calendarLoadingStatus = "none";
|
||||
this.$refs.datePicker.isLoading = false;
|
||||
this.setSelectedDateToFirstAvailable();
|
||||
});
|
||||
},
|
||||
async getMoreScheduleData(startDate, endDate) {
|
||||
// called only when "View more dates" is clicked; not on initial page load
|
||||
this.calendarLoadingStatus = "more";
|
||||
const moreShopTimeSlots = await getScheduleApiResponse({
|
||||
startDateString: startDate,
|
||||
endDateString: endDate,
|
||||
|
|
@ -1185,6 +1207,7 @@ export default {
|
|||
includeMobileTimeSlots: this.isServiceableMobile,
|
||||
includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff,
|
||||
});
|
||||
this.calendarLoadingStatus = "none";
|
||||
|
||||
// ADD API CALL RESULTS TO EXISTING DATE DATA
|
||||
this.selectableDatesInshop.days = this.selectableDatesInshop.days.concat(
|
||||
|
|
@ -1241,7 +1264,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
this.isShowMobileFirstAppt && this.hideLoadingModal();
|
||||
this.isShowMobileFirstAppt;
|
||||
},
|
||||
getIsRecalAcknowledgedForSchedulingFromStore() {
|
||||
return store.getters.order.isRecalAcknowledgedForScheduling;
|
||||
|
|
@ -1749,6 +1772,7 @@ export default {
|
|||
}
|
||||
|
||||
this.resetMobileLocation();
|
||||
this.calendarLoadingStatus = "initial";
|
||||
|
||||
getShopProviderData(newZipCode.zipCode, this.pageName).then((result) => {
|
||||
this.shopProviderData = result.data;
|
||||
|
|
@ -1759,6 +1783,7 @@ export default {
|
|||
this.selectedDate = null;
|
||||
this.initializeDatePicker().then(() => {
|
||||
this.showMobileFirstModal();
|
||||
this.calendarLoadingStatus = "none";
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
@ -2030,6 +2055,7 @@ export default {
|
|||
durationTextBlock,
|
||||
shopLocation,
|
||||
mobileFeeWaiverAlert,
|
||||
loader,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -2048,6 +2074,14 @@ export default {
|
|||
&.hidden-background {
|
||||
display: none;
|
||||
}
|
||||
.appointment-type-loader {
|
||||
margin-top: 1.5rem;
|
||||
width: calc(100% - 2rem);
|
||||
&.loader:after {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.alert.alert-warning {
|
||||
.alert-heading {
|
||||
|
|
|
|||
Loading…
Reference in a new issue