769 lines
32 KiB
Vue
769 lines
32 KiB
Vue
<template>
|
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
|
<loadingModal ref="loadingModal" />
|
|
<div class="container-fluid page-container-grouped-styles">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-xl-4">
|
|
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
|
|
<template v-if="ChangeShopLink.length">
|
|
<textBlock
|
|
cmsWidgetName="ChangeShopLink"
|
|
justifyText="center"
|
|
class="mb-3 text-link-small"
|
|
marginTopSizeOverride="1" />
|
|
</template>
|
|
<locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
|
|
<datePickerForPricingByDay
|
|
customComponentId="dateQuestion"
|
|
selectableDatesSetting="custom"
|
|
ref="datePicker"
|
|
v-model="selectedDate"
|
|
class="text-link-small"
|
|
:customSelectableDatesCallback="getAvailableDatesMethod"
|
|
validationRules="date-required"
|
|
:pricingByDayBasePrice="pricingByDayBasePrice"
|
|
:pricingByDayUpcharge="pricingByDayUpcharge"
|
|
:showPricingByDay="showPricingByDay"
|
|
:isPricingByDayExperiment="isPricingByDayExperiment"
|
|
@date-clicked="handleDateClicked" />
|
|
<timeSlotModalQuestion
|
|
ref="timeSlotModalQuestion"
|
|
customComponentId="timeSlotModalQuestion"
|
|
v-model="selectedTimeSlotInfo"
|
|
cmsWidgetName="TimeSlotModalQuestion"
|
|
waitListLabelWidget="WaitListLabelWidget"
|
|
waitListQuestionWidget="WaitListQuestionWidget"
|
|
mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
|
|
mobileCmsWidgetName="MobileTimeSlotModal"
|
|
dropoffCmsWidgetName="DropOffTimeSlotModal"
|
|
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
|
|
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
|
|
:selectedDate="selectedDate"
|
|
:appointmentType="appointmentType"
|
|
:premiumAppointmentFee="mobilePremiumAppointmentFee"
|
|
:displayWaitList="displayWaitList"
|
|
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
|
|
:estimatedServiceMinutesMinimum="
|
|
selectableDatesData.estimatedServiceMinutesMinimum
|
|
"
|
|
:estimatedServiceMinutesMaximum="
|
|
selectableDatesData.estimatedServiceMinutesMaximum
|
|
"
|
|
@waitListRequested="handleWaitListRequested"
|
|
@time-slot-modal-closed="timeSlotModalClosed"
|
|
validationRules="time-slot-selection-required"
|
|
@TimeSlotSelected="forwardButtonAction" />
|
|
<navbar
|
|
cmsWidgetName="FunnelFooterWidget"
|
|
ref="navbar"
|
|
:isForwardActionDisabled="!meta.valid"
|
|
@back-clicked="backButtonAction"
|
|
@ForwardClicked="forwardButtonAction" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
|
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
|
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
|
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
|
import { Form, defineRule } from "vee-validate";
|
|
import datePickerForPricingByDay from "@/experiment-components/date-picker-for-pricing-by-day";
|
|
import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
|
|
import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
|
|
import textBlock from "@/digital-components/text-block/text-block";
|
|
|
|
// Supporting files
|
|
import { queryStrings } from "@/constants/query-strings";
|
|
import { getQuerystringParameter } from "@/helpers/querystring-helper";
|
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
import baseMixin from "@/mixins/base-mixin.js";
|
|
import { storeActions } from "@/constants/store-actions";
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
|
|
import {
|
|
calcDaysBetweenDates,
|
|
convertDateStringToDate,
|
|
sumDateString,
|
|
} from "@/layouts/schedule/helpers/schedule-helper";
|
|
import {
|
|
AppointmentTypeStrings,
|
|
PREMIUM_FEE_PART_TYPE,
|
|
PRICING_BY_DAY_PART_TYPE,
|
|
} from "@/constants/schedule-constants";
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
import { required } from "@/helpers/validation-rules";
|
|
import store from "@/store";
|
|
import experimentMixin from "@/mixins/experiment-mixin.js";
|
|
import { experimentSettings } from "@/constants/experiments";
|
|
import { getAmountDue, getPricingByDayPartWithPrice } from "@/helpers/pricing-helper.js";
|
|
import { getItemsWithoutRecalParts } from "@/helpers/recal-helper";
|
|
import { partNumberStrings } from "@/constants/part-number-strings";
|
|
import { deepClone } from "@/helpers/object-helper";
|
|
|
|
// DEFINE VALIDATION RULES
|
|
defineRule("date-required", required(errorMessages.DATE_REQUIRED));
|
|
defineRule("time-slot-selection-required", (value) => {
|
|
if (value?.timeSlot?.routeCode == null) {
|
|
return errorMessages.DATE_REQUIRED;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
// Define constants
|
|
const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
|
|
|
|
const getAvailableDates = async (
|
|
startDateString,
|
|
endDateString,
|
|
appointmentType,
|
|
providerNumber
|
|
) => {
|
|
const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
|
|
const difference = calcDaysBetweenDates(startDateString, endDateString);
|
|
const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
|
|
const storeActionConfigs = [];
|
|
const timeSlotsData = {};
|
|
timeSlotsData.days = [];
|
|
let apiStartDate = startDateString;
|
|
let apiEndDate = endDateString;
|
|
|
|
for (let i = 1; i <= apiCallsCount; i++) {
|
|
let storeActionConfig;
|
|
|
|
if (i > 1) {
|
|
apiStartDate = sumDateString(apiEndDate, 1);
|
|
apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
|
|
|
|
if (i === apiCallsCount) {
|
|
apiEndDate = endDateString;
|
|
}
|
|
} else {
|
|
if (apiEndDate > apiEndDateLimit) {
|
|
apiEndDate = apiEndDateLimit;
|
|
}
|
|
}
|
|
|
|
if (appointmentType === AppointmentTypeStrings.MOBILE) {
|
|
storeActionConfig = {
|
|
storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
|
|
payload: {
|
|
startDate: apiStartDate,
|
|
endDate: apiEndDate,
|
|
},
|
|
};
|
|
} else {
|
|
storeActionConfig = {
|
|
storeAction: storeActions.GET_SHOP_TIME_SLOTS,
|
|
payload: {
|
|
startDate: apiStartDate,
|
|
endDate: apiEndDate,
|
|
shopAppointmentType: appointmentType,
|
|
providerNumber: providerNumber,
|
|
},
|
|
};
|
|
}
|
|
if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
|
|
}
|
|
|
|
const timeSlotsResponsesData = {
|
|
days: [],
|
|
};
|
|
|
|
function compareDayStrings(a, b) {
|
|
if (a.date < b.date) return -1;
|
|
if (a.date > b.date) return 1;
|
|
return 0;
|
|
}
|
|
|
|
const makeParallelCalls = async () => {
|
|
await Promise.all(
|
|
storeActionConfigs.map(async (storeAction) => {
|
|
const timeSlotsResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
|
|
storeAction.storeAction,
|
|
storeAction.payload,
|
|
"schedule",
|
|
false
|
|
);
|
|
timeSlotsResponsesData.estimatedServiceMinutesMinimum =
|
|
timeSlotsResponse.data.estimatedServiceMinutesMinimum;
|
|
timeSlotsResponsesData.estimatedServiceMinutesMaximum =
|
|
timeSlotsResponse.data.estimatedServiceMinutesMaximum;
|
|
timeSlotsResponsesData.days = [
|
|
...timeSlotsResponsesData.days,
|
|
...timeSlotsResponse.data.days,
|
|
];
|
|
})
|
|
);
|
|
};
|
|
|
|
return makeParallelCalls().then(() => {
|
|
// sort days chronologically
|
|
timeSlotsResponsesData.days.sort(compareDayStrings);
|
|
return timeSlotsResponsesData;
|
|
});
|
|
};
|
|
|
|
export default {
|
|
name: "schedule",
|
|
data() {
|
|
return {
|
|
selectedDate: this.getSelectedDate(),
|
|
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
|
|
selectableDatesData: [],
|
|
mobilePremiumAppointmentFee: null,
|
|
waitListRequested: null,
|
|
displayWaitList: null,
|
|
pricingByDayUpchargeLineItem: null,
|
|
includePricingByDayUpcharge: null,
|
|
isPricingByDayExperiment: null,
|
|
pricingByDayBasePrice: null,
|
|
pricingByDayUpcharge: null,
|
|
showPricingByDay: null,
|
|
};
|
|
},
|
|
async beforeRouteEnter(to, from, next) {
|
|
const isPricingByDayExperiment = experimentMixin.methods.hasSettingEqualTo(
|
|
experimentSettings.PRICING_BY_DAY,
|
|
"true"
|
|
);
|
|
const showPricingByDay = !store.getters.payment.isInsurance && isPricingByDayExperiment;
|
|
|
|
// Get pricingByDayBasePrice needed for Pricing By Day
|
|
const lineItems = deepClone(store.getters.order.lineItems);
|
|
const isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder;
|
|
const shouldHideRecalibration =
|
|
experimentMixin.methods.hasSettingEqualTo(
|
|
experimentSettings.RECAL_PRICE_REMOVE,
|
|
"true"
|
|
) && isRecalibrationOnOrder;
|
|
const glassParts =
|
|
isRecalibrationOnOrder && shouldHideRecalibration
|
|
? getItemsWithoutRecalParts(lineItems.glassParts)
|
|
: (lineItems.glassParts ?? []);
|
|
const supportingItemsFromStore = lineItems?.supportingItems;
|
|
const supportingItemsWithoutFees = baseMixin.methods.filterOutCertainPartTypesOrNumbers(
|
|
lineItems.supportingItems,
|
|
{
|
|
partNumbersToRemove: [
|
|
partNumberStrings.RECYCLE_FEE,
|
|
partNumberStrings.PRICING_BY_DAY_UPCHARGE,
|
|
],
|
|
}
|
|
);
|
|
const lineItemsToBePriced = {
|
|
glassParts: glassParts,
|
|
supportingItems: supportingItemsWithoutFees,
|
|
vaps: lineItems.vaps ?? [],
|
|
promos: lineItems.promos ?? [],
|
|
};
|
|
const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false
|
|
const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote
|
|
const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown);
|
|
|
|
// Check to see if includePricingByDayUpcharge should already be set (based on order lineItems)
|
|
let includePricingByDayUpcharge = false;
|
|
if (supportingItemsFromStore) {
|
|
const pricingByDayUpchargeFeeIndex = supportingItemsFromStore?.findIndex(
|
|
(item) => item.partType == PRICING_BY_DAY_PART_TYPE
|
|
);
|
|
if (pricingByDayUpchargeFeeIndex > -1) {
|
|
includePricingByDayUpcharge = true;
|
|
}
|
|
}
|
|
|
|
// Load page with date already selected?
|
|
let preSelectedDate = await store.getters.order.schedule.date;
|
|
if (!preSelectedDate || preSelectedDate.startTime === null) {
|
|
preSelectedDate = null;
|
|
}
|
|
|
|
// Set up promises
|
|
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
|
|
|
const alertReasonsPromise = locationAlerts.methods.loadInitialData(
|
|
store.getters.order.serviceLocation.zipCodeCtu,
|
|
store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
|
|
);
|
|
|
|
// While Pricing By Day Experiment is active, using the updated datePicker
|
|
const datePickerInitialDataPromise =
|
|
await datePickerForPricingByDay.methods.loadInitialData({
|
|
// setup config options for date-picker
|
|
selectableDatesSetting: "custom",
|
|
initialViewRowsToShow: 5,
|
|
customSelectableDatesCallback: getAvailableDates,
|
|
preSelectedDate: preSelectedDate,
|
|
});
|
|
|
|
// Get pricingByDayUpcharge needed for Pricing By Day
|
|
const pricingByDayUpchargePartPromise = showPricingByDay
|
|
? getPricingByDayPartWithPrice()
|
|
: null;
|
|
|
|
const premiumFeePromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
|
storeActions.GET_MOBILE_PREMIUM_FEE,
|
|
null,
|
|
"schedule"
|
|
);
|
|
const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
|
|
if (result.data) {
|
|
return baseMixin.methods.dispatchStoreActionWithLogging(
|
|
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
|
{
|
|
availableLineItems: [result.data],
|
|
},
|
|
"schedule",
|
|
false
|
|
);
|
|
} else {
|
|
return result.data;
|
|
}
|
|
});
|
|
|
|
// Settle promises and get results
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: "cmsContent",
|
|
promise: cmsContentPromise,
|
|
},
|
|
{
|
|
resultKey: "alertReasons",
|
|
promise: alertReasonsPromise,
|
|
},
|
|
{
|
|
resultKey: "datePickerInitialData",
|
|
promise: datePickerInitialDataPromise,
|
|
},
|
|
{
|
|
resultKey: "pricingByDayUpchargePart",
|
|
promise: pricingByDayUpchargePartPromise,
|
|
},
|
|
{
|
|
resultKey: "premiumFeeWithPrice",
|
|
promise: premiumFeeWithPricePromise,
|
|
},
|
|
];
|
|
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
|
|
const pricingByDayUpcharge = showPricingByDay
|
|
? await baseMixin.methods.getTotalLineItemPrice(
|
|
resultMap.pricingByDayUpchargePart,
|
|
false
|
|
)
|
|
: null;
|
|
|
|
const datePickerInitialData = resultMap.datePickerInitialData;
|
|
datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
|
|
datePickerInitialData.pricingByDayUpcharge = pricingByDayUpcharge;
|
|
|
|
// Call the "next" function to complete the transition to this page.
|
|
next((vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
vm.$refs.datePicker.initializeComponent(datePickerInitialData);
|
|
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
|
|
vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse;
|
|
vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
|
|
? resultMap.premiumFeeWithPrice[0]
|
|
: null;
|
|
vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
|
|
vm.setDisplayWaitList();
|
|
vm.pricingByDayUpchargeLineItem = resultMap.pricingByDayUpchargePart;
|
|
vm.includePricingByDayUpcharge = includePricingByDayUpcharge;
|
|
vm.isPricingByDayExperiment = isPricingByDayExperiment;
|
|
vm.pricingByDayBasePrice = pricingByDayBasePrice;
|
|
vm.pricingByDayUpcharge = pricingByDayUpcharge;
|
|
vm.showPricingByDay = showPricingByDay;
|
|
});
|
|
},
|
|
computed: {
|
|
ChangeShopLinkText() {
|
|
return this.getCmsContent("ChangeShopLink", "Text");
|
|
},
|
|
ChangeShopLink() {
|
|
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
|
|
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
|
|
},
|
|
appointmentType() {
|
|
return this.$store.getters.order.serviceLocation.appointmentType;
|
|
},
|
|
timeSlotsForSelectedDate() {
|
|
if (!this.selectedDate) return null;
|
|
|
|
return this.selectableDatesData.days?.find(
|
|
(selectableDate) => selectableDate.date === this.selectedDate
|
|
);
|
|
},
|
|
},
|
|
methods: {
|
|
splitCopyOnCMSPlaceHolder,
|
|
arePagePrerequisitesValid() {
|
|
const serviceLocation = store.getters.order.serviceLocation;
|
|
|
|
const serviceLocationPreReqs =
|
|
serviceLocation.zipCode &&
|
|
serviceLocation.zipCodeCtu &&
|
|
serviceLocation.appointmentType &&
|
|
(serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
|
|
serviceLocation.provider.providerNumber);
|
|
|
|
const paymentInfo = store.getters.payment.isInsurance !== null;
|
|
|
|
const damageInfo =
|
|
store.getters.order.damage.isRepair ||
|
|
(store.getters.order.lineItems?.glassParts != null &&
|
|
store.getters.order.lineItems.glassParts.length > 0);
|
|
|
|
const preReqResult = serviceLocationPreReqs && paymentInfo && damageInfo;
|
|
|
|
// prettier-ignore
|
|
{
|
|
const log = getQuerystringParameter(queryStrings.LOG);
|
|
if (log === "true" || !preReqResult) {
|
|
console.log("------------- schedule.vue pagePrereqs start -----------------");
|
|
console.log(new Date() + " store.getters.order.serviceLocation.zipCode: " + serviceLocation.zipCode);
|
|
console.log(new Date() + " store.getters.order.serviceLocation.zipCodeCtu: " + serviceLocation.zipCodeCtu);
|
|
console.log(new Date() + " store.getters.order.serviceLocation.appointmentType: " + serviceLocation.appointmentType);
|
|
console.log(new Date() + " store.getters.order.serviceLocation.provider.providerNumber: " + serviceLocation.provider.providerNumber);
|
|
console.log(new Date() + " store.getters.payment.isInsurance: " + store.getters.payment?.isInsurance);
|
|
console.log(new Date() + " store.getters.order.damage.isRepair: " + store.getters.order.damage.isRepair);
|
|
console.log(new Date() + " store.getters.order.lineItems.glassParts: " + JSON.stringify(store.getters.order.lineItems?.glassParts));
|
|
console.log("------------- schedule.vue pagePrereqs end -------------------");
|
|
}
|
|
}
|
|
return preReqResult;
|
|
},
|
|
async getAvailableDatesMethod(startDate, endDate) {
|
|
const newShopTimeSlots = await getAvailableDates(
|
|
startDate,
|
|
endDate,
|
|
this.appointmentType,
|
|
this.$store.getters.order.serviceLocation.provider.providerNumber
|
|
);
|
|
|
|
// ADD API CALL RESULTS TO EXISTING DATE DATA
|
|
this.selectableDatesData.days = this.selectableDatesData.days.concat(
|
|
newShopTimeSlots.days
|
|
);
|
|
return newShopTimeSlots;
|
|
},
|
|
getAvailableDates,
|
|
getServiceZipCtuCodeFromStore() {
|
|
return store.getters.order.serviceLocation.zipCodeCtu;
|
|
},
|
|
openInshopTimeSlotsModal() {
|
|
this.$refs["timeSlotModalQuestion"].openModal();
|
|
},
|
|
getSelectedDate() {
|
|
return store.getters.order.schedule.date;
|
|
},
|
|
getSelectedTimeSlotInfo() {
|
|
const supportingItems = this.getSupportingItems();
|
|
|
|
var isPremiumAppointment = false;
|
|
if (supportingItems) {
|
|
isPremiumAppointment =
|
|
!!supportingItems.filter(
|
|
(lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
|
|
).length > 0;
|
|
}
|
|
|
|
const selectedTimeSlotInfo = {
|
|
timeSlot: store.getters.order.schedule,
|
|
isPremiumAppointment: isPremiumAppointment,
|
|
};
|
|
|
|
return selectedTimeSlotInfo;
|
|
},
|
|
getSupportingItems() {
|
|
return store.getters.lineItems.supportingItems;
|
|
},
|
|
timeSlotModalClosed() {
|
|
// Clear the selectedDate if no timeSlot has been selected
|
|
if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
|
|
this.selectedDate = null;
|
|
}
|
|
},
|
|
updateFooterButtonText(timeSlotInfo) {
|
|
let navbarButtonText;
|
|
if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
|
|
navbarButtonText = "Continue";
|
|
} else {
|
|
navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
|
|
timeSlotInfo.timeSlot.date
|
|
)}`;
|
|
|
|
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
|
|
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
|
|
timeSlotInfo.timeSlot.startTime
|
|
)}`;
|
|
} else if (
|
|
this.appointmentType === AppointmentTypeStrings.MOBILE &&
|
|
!timeSlotInfo.isPremiumAppointment
|
|
) {
|
|
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
|
|
timeSlotInfo.timeSlot.startTime,
|
|
true
|
|
)} - ${this.getDisplayTextForMilitaryTime(
|
|
timeSlotInfo.timeSlot.endTime,
|
|
true
|
|
)}`;
|
|
}
|
|
}
|
|
this.$refs.navbar.updateButtonText(navbarButtonText);
|
|
},
|
|
convertSelectedDateToShortMonthAndDay(selectedDate) {
|
|
// This conversion ensures we don't get get GMT induced date changes
|
|
const dateObject = convertDateStringToDate(selectedDate);
|
|
// Ex: April 25
|
|
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
|
|
},
|
|
getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
|
|
// Expected input: "HH:MM"
|
|
let hours = parseInt(militaryTimeInput.split(":")[0]);
|
|
const minutes = militaryTimeInput.split(":")[1];
|
|
const meridianNotation = hours > 11 ? "PM" : "AM";
|
|
|
|
if (hours > 12) {
|
|
hours -= 12;
|
|
}
|
|
|
|
if (shouldTrimMinutesIfEmpty && minutes === "00") {
|
|
return `${hours} ${meridianNotation}`;
|
|
} else {
|
|
return `${hours}:${minutes} ${meridianNotation}`;
|
|
}
|
|
},
|
|
backButtonAction() {
|
|
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
|
},
|
|
forwardButtonAction() {
|
|
this.updateSupportingItems();
|
|
|
|
if (this.waitListRequested) {
|
|
var gaLabel = store.getters.isMobileAppointment
|
|
? "checked_mobile"
|
|
: "checked_inshop";
|
|
|
|
const currentDate = new Date();
|
|
const dateString = this.selectableDatesData.days[0].date;
|
|
const [year, month, day] = dateString.split("-").map(Number);
|
|
const appointmentDate = new Date(year, month - 1, day);
|
|
const timeDifference = appointmentDate - currentDate;
|
|
|
|
// Convert the time difference from milliseconds to days
|
|
const daysUntilAppointment = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
|
|
|
|
gaLabel +=
|
|
"_" +
|
|
daysUntilAppointment.toString() +
|
|
"_" +
|
|
store.getters.order.serviceLocation.zipCode +
|
|
"_" +
|
|
store.getters.order.serviceLocation.zipCodeCtu;
|
|
this.pushEventToGA("waitlist", "add_to_waitlist_check_box_status", gaLabel, true);
|
|
}
|
|
if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
|
|
this.selectedTimeSlotInfo.timeSlot.jobMinMinutes =
|
|
this.selectableDatesData?.estimatedServiceMinutesMinimum?.toString();
|
|
this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes =
|
|
this.selectableDatesData?.estimatedServiceMinutesMaximum?.toString();
|
|
}
|
|
|
|
this.dispatchStoreAction(
|
|
this.storeActions.SAVE_SCHEDULE,
|
|
this.selectedTimeSlotInfo.timeSlot,
|
|
false
|
|
);
|
|
|
|
if (this.waitListRequested !== null && this.waitListRequested !== undefined) {
|
|
this.dispatchStoreAction(
|
|
this.storeActions.SAVE_WAITLIST_REQUESTED,
|
|
this.waitListRequested,
|
|
false
|
|
);
|
|
}
|
|
|
|
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
|
|
},
|
|
setDisplayWaitList() {
|
|
if (
|
|
experimentMixin.methods.hasSettingEqualTo(
|
|
experimentSettings.DISPLAY_WAITLIST,
|
|
"true"
|
|
)
|
|
) {
|
|
const dateString = this.selectableDatesData.days[0].date;
|
|
const [year, month, day] = dateString.split("-").map(Number);
|
|
const targetDate = new Date(year, month - 1, day);
|
|
const currentDate = new Date();
|
|
const futureDate = new Date(currentDate);
|
|
const experimentThresholdDays = experimentMixin.methods.hasSetting(
|
|
experimentSettings.WAITLIST_THRESHOLD_DAYS
|
|
)
|
|
? parseInt(
|
|
experimentMixin.methods.getSettingValue(
|
|
experimentSettings.WAITLIST_THRESHOLD_DAYS
|
|
)
|
|
)
|
|
: 0;
|
|
futureDate.setDate(currentDate.getDate() + experimentThresholdDays);
|
|
|
|
if (targetDate >= futureDate) {
|
|
this.displayWaitList = true;
|
|
} else {
|
|
this.displayWaitList = false;
|
|
}
|
|
}
|
|
},
|
|
updateSupportingItems() {
|
|
const supportingItems = this.getSupportingItems();
|
|
|
|
// if we have a pricing by day upcharge, then save/update supporting items with it
|
|
if (this.showPricingByDay) {
|
|
const pricingByDayUpchargeFeeIndex = supportingItems?.findIndex(
|
|
(item) => item.partType == PRICING_BY_DAY_PART_TYPE
|
|
);
|
|
|
|
if (this.includePricingByDayUpcharge) {
|
|
if (pricingByDayUpchargeFeeIndex > -1) {
|
|
supportingItems[pricingByDayUpchargeFeeIndex].laborAmount =
|
|
this.pricingByDayUpchargeLineItem.laborAmount;
|
|
supportingItems[pricingByDayUpchargeFeeIndex].sellingPrice =
|
|
this.pricingByDayUpchargeLineItem.sellingPrice;
|
|
supportingItems[pricingByDayUpchargeFeeIndex].kitPrice =
|
|
this.pricingByDayUpchargeLineItem.kitPrice;
|
|
} else {
|
|
supportingItems.push(this.pricingByDayUpchargeLineItem);
|
|
}
|
|
} else {
|
|
if (pricingByDayUpchargeFeeIndex >= 0) {
|
|
supportingItems.splice(pricingByDayUpchargeFeeIndex, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// if we have a premium fee(early bird), then save/update supporting items
|
|
if (
|
|
this.appointmentType === AppointmentTypeStrings.MOBILE &&
|
|
this.selectedTimeSlotInfo?.isPremiumAppointment
|
|
) {
|
|
const premiumFeeIndex = supportingItems.findIndex(
|
|
(item) => item.partType == PREMIUM_FEE_PART_TYPE
|
|
);
|
|
|
|
if (premiumFeeIndex > -1) {
|
|
supportingItems[premiumFeeIndex].laborAmount =
|
|
this.mobilePremiumAppointmentFee.laborAmount;
|
|
supportingItems[premiumFeeIndex].sellingPrice =
|
|
this.mobilePremiumAppointmentFee.sellingPrice;
|
|
supportingItems[premiumFeeIndex].kitPrice =
|
|
this.mobilePremiumAppointmentFee.kitPrice;
|
|
} else {
|
|
supportingItems.push(this.mobilePremiumAppointmentFee);
|
|
}
|
|
} else {
|
|
if (!supportingItems) {
|
|
return;
|
|
}
|
|
|
|
// if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
|
|
const removePremiumFeeIndex = supportingItems.findIndex(
|
|
(item) => item.partType == PREMIUM_FEE_PART_TYPE
|
|
);
|
|
|
|
if (removePremiumFeeIndex >= 0) {
|
|
supportingItems.splice(removePremiumFeeIndex, 1);
|
|
}
|
|
}
|
|
|
|
this.dispatchStoreAction(
|
|
this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
|
|
supportingItems,
|
|
false
|
|
);
|
|
},
|
|
handleWaitListRequested(value) {
|
|
this.waitListRequested = value;
|
|
},
|
|
handleDateClicked(date) {
|
|
// do something to mark this as upcharge day or not...
|
|
if (date.isPricingByDayUpchargeDay) {
|
|
this.includePricingByDayUpcharge = true;
|
|
} else {
|
|
this.includePricingByDayUpcharge = false;
|
|
}
|
|
|
|
this.openInshopTimeSlotsModal();
|
|
},
|
|
},
|
|
watch: {
|
|
selectedDate(newValue, oldValue) {
|
|
// Clear time slot selection if date selected changes
|
|
if (newValue !== oldValue) {
|
|
this.selectedTimeSlotInfo = {
|
|
timeSlot: {
|
|
date: null,
|
|
routeCode: null,
|
|
startTime: null,
|
|
endTime: null,
|
|
jobMaxMinutes: null,
|
|
jobMinMinutes: null,
|
|
},
|
|
isPremiumAppointment: null,
|
|
};
|
|
}
|
|
},
|
|
selectedTimeSlotInfo(newValue) {
|
|
this.updateFooterButtonText(newValue);
|
|
},
|
|
},
|
|
components: {
|
|
funnelHeader,
|
|
navbar,
|
|
funnelSubHeader,
|
|
Form,
|
|
loadingModal,
|
|
datePickerForPricingByDay,
|
|
locationAlerts,
|
|
timeSlotModalQuestion,
|
|
textBlock,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.text-link-small {
|
|
a,
|
|
.btn-link {
|
|
width: auto;
|
|
margin: 0 auto;
|
|
height: auto;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
&:focus {
|
|
outline: 1px solid $blue;
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
.funnel-sub-header {
|
|
h5.dark-header {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
}
|
|
</style>
|