CSR-1137 | Integrate appointmentType from store

Used to be hardcoded
Also updates some durationText stuff
This commit is contained in:
Scott Kiener 2023-05-22 08:38:29 -04:00
parent 67f5a140d4
commit 3a6b43a629
3 changed files with 39 additions and 26 deletions

View file

@ -72,6 +72,7 @@
<script>
// Supporting files
import loader from "@/ux-components/loader/loader";
import store from "@/store";
import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
@ -203,7 +204,7 @@ export default {
const todayDate = config.todayOverrideDateString
? new Date(config.todayOverrideDateString)
: new Date();
let todayMonthIndex = todayDate.getMonth() + 1;
let todayYearNum = todayDate.getFullYear();
let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
@ -244,7 +245,8 @@ export default {
let myPromise = new Promise((resolve, reject) => {
const response = config.customSelectableDatesCallback(
initialViewStartDate,
initialViewEndDate
initialViewEndDate,
store.getters.order.serviceLocation.appointmentType,
);
resolve(response);
});
@ -523,7 +525,8 @@ export default {
async updateSelectableDates(monthStart, monthEnd) {
const moreSelectableDates = await this.customSelectableDatesCallback(
monthStart,
monthEnd
monthEnd,
this.$store.getters.order.serviceLocation.appointmentType,
);
moreSelectableDates.days.forEach((selectableDate) => {
const index = this.selectableDatesData.findIndex(

View file

@ -91,14 +91,14 @@ import store from "@/store";
defineRule("date-required", required(errorMessages.DATE_REQUIRED));
defineRule("time-slot-selection-required", required(errorMessages.DATE_REQUIRED));
const getAvailableDates = async (startDate, endDate) => {
const getAvailableDates = async (startDate, endDate, appointmentType) => {
// USING DATES PASSED, MAKE AN API CALL
const newShopTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
storeActions.GET_SHOP_TIME_SLOTS,
{
startDate: startDate,
endDate: endDate,
shopAppointmentType: "mobile", // TODO - PASS THIS IN FROM PREVIOUS PAGE?
shopAppointmentType: appointmentType,
},
false
);
@ -257,7 +257,7 @@ export default {
// NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
},
async getAvailableDatesMethod(startDate, endDate) {
const newShopTimeSlots = await getAvailableDates(startDate, endDate);
const newShopTimeSlots = await getAvailableDates(startDate, endDate, this.appointmentType);
// ADD API CALL RESULTS TO EXISTING DATE DATA
this.selectableDatesData.days = this.selectableDatesData.days.concat(
newShopTimeSlots.days

View file

@ -8,8 +8,8 @@
:onModalClosedCallback="onModalClosed"
@footer-button-event="closeModal">
<textBlock
v-show="inshopAppointmentDurationTextWithTime"
:customText="inshopAppointmentDurationTextWithTime"
v-show="durationTextBlockCopy"
:customText="durationTextBlockCopy"
justifyText="center"
typeStyle="small"
class="duration-text-block" />
@ -90,13 +90,18 @@ export default {
watch: {
modelValue() {
this.selectedTimeSlot = this.modelValue;
// Run component validation that is used at parent level
this.handleChange(this.modelValue);
},
// dateAndTimeSlotData(newValue, oldValue) {
// const numberOfOptions = newValue?.timeSlots.length;
// console.log('running');
// if (numberOfOptions === 1) {
// this.selectedTimeSlot = newValue.timeSlots[0].id;
// }
// }
},
computed: {
appointmentDurationTextFromCms() {
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
},
supplementalInformationBlock() {
let appointmentTypeCmsWidgetName;
let cmsFieldName = "BodyText";
@ -127,6 +132,26 @@ export default {
dropoffDisclaimerText() {
return this.getCmsContent(this.dropoffCmsWidgetName, "FooterText");
},
dropOffDurationText() {
return this.getCmsContent(this.dropoffCmsWidgetName, "SubheaderText");
},
inshopDurationText() {
const inshopDurationTextWithoutTime = this.getCmsContent(this.cmsWidgetName, "SubheaderText");
const inshopDurationTime = this.getDisplayTextForDurationLength(
this.estimatedServiceMinutesMinimum,
this.estimatedServiceMinutesMaximum
);
return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
},
durationTextBlockCopy() {
if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
return null;
} else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
return this.inshopDurationText;
} else {
return this.dropOffDurationText;
}
},
shouldShowDropoffDisclaimerText() {
return this.appointmentType === AppointmentTypeStrings.DROP_OFF && !this.isSameDay;
},
@ -145,21 +170,6 @@ export default {
// Ex. Tuesday, April 23
return `${weekdayName}, ${month} ${numberDayOfMonth}`;
},
inshopAppointmentDurationTextWithTime() {
if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
return null;
}
let durationSubHeaderText = this.appointmentDurationTextFromCms + " ";
if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
durationSubHeaderText += "All day";
} else {
durationSubHeaderText += this.getDisplayTextForDurationLength(
this.estimatedServiceMinutesMinimum,
this.estimatedServiceMinutesMaximum
);
}
return durationSubHeaderText;
},
availableTimeSlots() {
if (this.dateAndTimeSlotData === null) {
return null;