CSR-1137 | Integrate appointmentType from store
Used to be hardcoded Also updates some durationText stuff
This commit is contained in:
parent
67f5a140d4
commit
3a6b43a629
3 changed files with 39 additions and 26 deletions
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue