some updates for integration
This commit is contained in:
Bill Richardson
parent
f06332c066
commit
8fefa39fea
6 changed files with 280 additions and 193 deletions
|
|
@ -153,6 +153,10 @@ import { selectableDaysOptions } from './mixins/helpers';
|
|||
export default {
|
||||
name: 'date-picker',
|
||||
props: {
|
||||
activeAppointmentType: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
customComponentId: String,
|
||||
selectableDatesSetting: {
|
||||
type: String,
|
||||
|
|
@ -168,6 +172,10 @@ export default {
|
|||
modelValue: {
|
||||
type: Object
|
||||
},
|
||||
mobileZipCode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
todayOverrideDateString: {
|
||||
// keep for use in unit tests to override today's date
|
||||
type: String,
|
||||
|
|
@ -315,6 +323,7 @@ export default {
|
|||
this.setCalendarData(initialData);
|
||||
},
|
||||
resetComponent() {
|
||||
console.log('Resetting Date Picker Component');
|
||||
this.isLoading = true;
|
||||
this.selectableDatesData = []; // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
|
||||
this.selectableTimeSlotsData = [];
|
||||
|
|
@ -376,7 +385,7 @@ export default {
|
|||
};
|
||||
},
|
||||
displayTimeSlotTime(timeSlot) {
|
||||
const { appointmentType } = this.mainStore.order.serviceLocation;
|
||||
const appointmentType = this.activeAppointmentType || AppointmentTypeStrings.IN_SHOP;
|
||||
if (appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
|
||||
return `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(timeSlot.endTime)}`;
|
||||
}
|
||||
|
|
@ -555,8 +564,6 @@ export default {
|
|||
this.selectTimeSlotForDay(timeSlot);
|
||||
},
|
||||
async setCalendarData(config = {}) {
|
||||
// const initialMql = window.matchMedia('(min-width: 1200px)');
|
||||
// this.isMobileView = !initialMql.matches;
|
||||
config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
|
||||
const dateObjectToPush = {
|
||||
date: selectableDate.date,
|
||||
|
|
@ -618,9 +625,7 @@ export default {
|
|||
const moreSelectableDates =
|
||||
await this.customSelectableDatesCallback(
|
||||
dateStart,
|
||||
dateEnd,
|
||||
this.mainStore.order.serviceLocation.appointmentType,
|
||||
this.mainStore.order.serviceLocation.provider.providerNumber
|
||||
dateEnd
|
||||
);
|
||||
|
||||
moreSelectableDates.days.forEach((selectableDate) => {
|
||||
|
|
|
|||
|
|
@ -58,11 +58,6 @@ export async function getAvailabilityRating(
|
|||
providerNumber
|
||||
) {
|
||||
// For a given shop provider number and date range, get the appointment time slots available
|
||||
console.log('Getting shop time slots for availability rating...');
|
||||
console.log(`Provider Number: ${providerNumber}`);
|
||||
console.log(`Start Date: ${startDate}`);
|
||||
console.log(`End Date: ${endDate}`);
|
||||
console.log(`Shop Appointment Type: ${shopAppointmentType}`);
|
||||
const shopTimeSlots = await useMainStore().getShopTimeSlots(startDate, endDate, shopAppointmentType, providerNumber);
|
||||
|
||||
const numberOfDaysToEvaluate = 2;
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@
|
|||
<serviceLocation
|
||||
ref="serviceLocation"
|
||||
@appointmentTypeChanged="appointmentTypeChangedFromServiceLocation"
|
||||
@mobileZipUpdated="mobileZipUpdatedFromChild"
|
||||
@providerChanged="providerChangedFromChild"
|
||||
@serviceLocationUpdated="serviceLocationUpdatedFromChild" />
|
||||
@mobileZipUpdated="mobileZipUpdatedFromServiceLocation"
|
||||
@providerChanged="providerChangedFromServiceLocation"
|
||||
@serviceLocationUpdated="serviceLocationUpdatedFromServiceLocation" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -37,7 +37,9 @@
|
|||
customComponentId="dateQuestion"
|
||||
selectableDatesSetting="custom"
|
||||
class="text-link-small"
|
||||
:activeAppointmentType="activeAppointmentType"
|
||||
:isMobileView="isMobileView"
|
||||
:mobileZipCode="mobileZipCodeOverride"
|
||||
:showTimeSlotError="showDatePickerError"
|
||||
:customSelectableDatesCallback="getAvailableDatesMethod"
|
||||
@dateSelected="dateSelectedFromPicker"
|
||||
|
|
@ -81,20 +83,14 @@ import {
|
|||
import {
|
||||
calcDaysBetweenDates,
|
||||
convertDateToDateString,
|
||||
// convertDateToShortMonth,
|
||||
// convertDateToTwoDigitDay,
|
||||
// convertDateToTwoDigitMonth,
|
||||
// getDisplayTextForDurationLength,
|
||||
// isAfternoon,
|
||||
// militaryToTwelveHourTime,
|
||||
sumDateString
|
||||
} from '@/helpers/date-helper';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
|
||||
import {
|
||||
getPricedMobileFeePart,
|
||||
getServiceabilityDetails,
|
||||
getZipCodeData,
|
||||
getMobileZipCodeData
|
||||
getZipCodeData
|
||||
} from '@/helpers/service-location-helper';
|
||||
import { Form } from 'vee-validate';
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
|
|
@ -107,7 +103,8 @@ const getAvailableDates = async (
|
|||
startDateString,
|
||||
endDateString,
|
||||
appointmentType,
|
||||
providerNumber
|
||||
providerNumber,
|
||||
mobileZipCodeOverride = null
|
||||
) => {
|
||||
const apiEndDateLimit = sumDateString(
|
||||
startDateString,
|
||||
|
|
@ -141,7 +138,8 @@ const getAvailableDates = async (
|
|||
storeAction: GET_MOBILE_TIME_SLOTS,
|
||||
payload: {
|
||||
startDate: apiStartDate,
|
||||
endDate: apiEndDate
|
||||
endDate: apiEndDate,
|
||||
zipCodeOverride: mobileZipCodeOverride
|
||||
}
|
||||
};
|
||||
} else {
|
||||
|
|
@ -181,7 +179,8 @@ const getAvailableDates = async (
|
|||
} else {
|
||||
timeSlotsResponse = await useMainStore().getMobileTimeSlots(
|
||||
storeAction.payload.startDate,
|
||||
storeAction.payload.endDate
|
||||
storeAction.payload.endDate,
|
||||
storeAction.payload.zipCodeOverride
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -297,6 +296,7 @@ export default {
|
|||
// vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
|
||||
vm.$refs.serviceLocation.initializeComponent(serviceLocationData);
|
||||
await vm.setData(resultMap.premiumFeeWithPrice, initialServiceLocationObj);
|
||||
showIssLoadingModal(false);
|
||||
});
|
||||
},
|
||||
setup() {
|
||||
|
|
@ -305,8 +305,12 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
inShopDatesData: [],
|
||||
isMobileView: false,
|
||||
mobileDatesData: [],
|
||||
mobilePremiumAppointmentFee: null,
|
||||
mobileProviderNumber: null,
|
||||
mobileZipCodeOverride: null,
|
||||
selectableDatesData: [],
|
||||
selectedAppointmentType: this.getAppointmentType(),
|
||||
selectedDate: this.getSelectedDate(),
|
||||
|
|
@ -317,6 +321,9 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
activeAppointmentType() {
|
||||
return this.selectedAppointmentType;
|
||||
},
|
||||
appointmentType() {
|
||||
return useMainStore().order.serviceLocation.appointmentType;
|
||||
},
|
||||
|
|
@ -328,26 +335,21 @@ export default {
|
|||
if (!serviceLocationToUse || !this.selectedAppointmentType) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const serviceLocationPreReqs = serviceLocationToUse.zipCode !== null
|
||||
&& serviceLocationToUse.zipCodeCtu !== null
|
||||
&& serviceLocationToUse.appointmentType !== null
|
||||
&& (serviceLocationToUse.appointmentType === AppointmentTypeStrings.MOBILE
|
||||
|| serviceLocationToUse.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
|
||||
|| serviceLocationToUse.provider.providerNumber);
|
||||
&& (((this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
|
||||
|| this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)
|
||||
&& serviceLocationToUse.mobileProviderNumber)
|
||||
|| (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP
|
||||
&& (this.selectedProvider?.providerNumber || serviceLocationToUse.provider?.providerNumber)));
|
||||
|
||||
const damageInfo = useMainStore().order.damage.isRepair
|
||||
|| (useMainStore().order.lineItems?.glassParts != null && useMainStore().order.lineItems.glassParts.length > 0);
|
||||
|
||||
const supportingItems = this.supportingItems !== null;
|
||||
|
||||
console.log('Has Needed Service Location Data Check:', {
|
||||
serviceLocationPreReqs,
|
||||
supportingItems,
|
||||
damageInfo
|
||||
});
|
||||
|
||||
console.log('Result:', (serviceLocationPreReqs && supportingItems && damageInfo));
|
||||
|
||||
return (serviceLocationPreReqs && supportingItems && damageInfo);
|
||||
},
|
||||
isFormValid() {
|
||||
|
|
@ -359,6 +361,7 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
showIssLoadingModal(true);
|
||||
this.mql = window.matchMedia('(min-width: 1200px)');
|
||||
this.isMobileView = !this.mql.matches;
|
||||
this.mql.addEventListener('change', this.handleMqlChange);
|
||||
|
|
@ -374,7 +377,6 @@ export default {
|
|||
return useMainStore().order.serviceLocation.zipCode !== null;
|
||||
},
|
||||
async setData(premiumFeeWithPriceResponse, initialServiceLocationObj) {
|
||||
// this.selectableDatesData = initialShopTimeSlotsResponse;
|
||||
this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
|
||||
? premiumFeeWithPriceResponse[0]
|
||||
: null;
|
||||
|
|
@ -382,15 +384,27 @@ export default {
|
|||
|
||||
if (this.selectedAppointmentType !== AppointmentTypeStrings.MOBILE
|
||||
&& this.selectedAppointmentType !== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
|
||||
const initialData = await this.getDatePickerInitialData(initialServiceLocationObj.provider?.providerNumber);
|
||||
this.selectableDatesData = initialData.initialShopTimeSlotsResponse;
|
||||
this.$refs.datePicker.setCalendarData(initialData);
|
||||
await this.getDatePickerInitialData(initialServiceLocationObj.provider?.providerNumber).then((initialData) => {
|
||||
this.selectableDatesData = initialData.initialShopTimeSlotsResponse;
|
||||
this.$refs.datePicker.setCalendarData(initialData);
|
||||
});
|
||||
}
|
||||
},
|
||||
appointmentTypeChangedFromServiceLocation(newAppointmentType) {
|
||||
console.log('Parent - Appointment Type Changed from Service Location:', newAppointmentType);
|
||||
this.selectedAppointmentType = newAppointmentType;
|
||||
this.shouldRefreshDatePicker();
|
||||
this.selectedAppointmentType = newAppointmentType.appointmentType;
|
||||
if (newAppointmentType.appointmentType === AppointmentTypeStrings.IN_SHOP) {
|
||||
if (this.inShopDatesData?.initialShopTimeSlotsResponse?.days?.length > 0) {
|
||||
this.selectableDatesData = this.inShopDatesData.initialShopTimeSlotsResponse;
|
||||
this.$refs.datePicker.initializeComponent(this.inShopDatesData);
|
||||
} else {
|
||||
console.log('Appointment Type is In-Shop, but no existing data. Need to fetch here?...');
|
||||
}
|
||||
} else if (this.mobileDatesData?.initialShopTimeSlotsResponse?.days?.length > 0) {
|
||||
this.selectableDatesData = this.mobileDatesData.initialShopTimeSlotsResponse;
|
||||
this.$refs.datePicker.initializeComponent(this.mobileDatesData);
|
||||
} else {
|
||||
console.log('Appointment Type is Mobile, but no existing data. Need to fetch here?...');
|
||||
}
|
||||
},
|
||||
dateSelectedFromPicker(date) {
|
||||
this.selectedDate = date;
|
||||
|
|
@ -400,13 +414,11 @@ export default {
|
|||
return this.mainStore.order?.serviceLocation?.appointmentType;
|
||||
},
|
||||
async getAvailableDatesMethod(startDate, endDate) {
|
||||
console.log('Fetching Available Dates from Method...');
|
||||
console.log('More Data concatenation called with Start Date:', startDate, 'End Date:', endDate);
|
||||
const newShopTimeSlots = await getAvailableDates(
|
||||
startDate,
|
||||
endDate,
|
||||
this.appointmentType,
|
||||
this.mainStore.order.serviceLocation.provider.providerNumber
|
||||
this.activeAppointmentType,
|
||||
this.selectedProvider.providerNumber
|
||||
);
|
||||
// ADD API CALL RESULTS TO EXISTING DATE DATA
|
||||
this.selectableDatesData.days =
|
||||
|
|
@ -415,8 +427,9 @@ export default {
|
|||
},
|
||||
getAvailableDates,
|
||||
async getDatePickerInitialData(defaultProviderNumber = null) {
|
||||
console.log('Fetching Date Picker Initial Data...');
|
||||
console.log('defaultProviderNumber:', defaultProviderNumber);
|
||||
this.inShopDatesData = [];
|
||||
this.mobileDatesData = [];
|
||||
|
||||
let todayDateString;
|
||||
const todayDateObject = new Date();
|
||||
const calendarViewDirection = 'future';
|
||||
|
|
@ -449,7 +462,8 @@ export default {
|
|||
initialViewStartDate,
|
||||
initialViewEndDate,
|
||||
this.selectedAppointmentType || AppointmentTypeStrings.IN_SHOP,
|
||||
this.selectedProvider.providerNumber || defaultProviderNumber
|
||||
this.selectedProvider.providerNumber || defaultProviderNumber,
|
||||
this.selectedServiceLocation.zipCode
|
||||
);
|
||||
resolve(response);
|
||||
});
|
||||
|
|
@ -465,8 +479,36 @@ export default {
|
|||
daysFromStart: endDateObject.daysFromStart || null
|
||||
}));
|
||||
|
||||
console.log('Date Picker Initial Data:');
|
||||
console.log(initialData);
|
||||
if (this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
|
||||
|| this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
|
||||
this.mobileDatesData = initialData;
|
||||
|
||||
const inShopDatePickerPromise = new Promise((resolve) => {
|
||||
const response = getAvailableDates(
|
||||
initialViewStartDate,
|
||||
initialViewEndDate,
|
||||
AppointmentTypeStrings.IN_SHOP,
|
||||
this.selectedProvider.providerNumber || defaultProviderNumber,
|
||||
this.selectedServiceLocation.zipCode
|
||||
);
|
||||
resolve(response);
|
||||
});
|
||||
|
||||
const inShopData = await inShopDatePickerPromise.then((response) => ({
|
||||
todayDate: todayDateString,
|
||||
initialViewStartDate,
|
||||
initialViewEndDate,
|
||||
calendarViewDirection,
|
||||
initialShopTimeSlotsResponse: response,
|
||||
preSelectedDate,
|
||||
initialDaysLoaded: endDateObject.newDaysLoaded || initialDays,
|
||||
daysFromStart: endDateObject.daysFromStart || null
|
||||
}));
|
||||
|
||||
this.inShopDatesData = inShopData;
|
||||
} else {
|
||||
this.inShopDatesData = initialData;
|
||||
}
|
||||
|
||||
return initialData;
|
||||
},
|
||||
|
|
@ -531,24 +573,36 @@ export default {
|
|||
handleMqlChange(e) {
|
||||
this.isMobileView = !e.matches;
|
||||
},
|
||||
mobileZipUpdatedFromChild(newMobileZip) {
|
||||
console.log('Parent - Mobile Zip Updated from Child:', newMobileZip);
|
||||
},
|
||||
providerChangedFromChild(newProvider) {
|
||||
console.log('Parent - Provider Changed from Child:', newProvider);
|
||||
this.selectedProvider = newProvider;
|
||||
// this.shouldRefreshDatePicker();
|
||||
},
|
||||
serviceLocationUpdatedFromChild(serviceLocationFromChild) {
|
||||
this.selectedServiceLocation = serviceLocationFromChild;
|
||||
},
|
||||
async shouldRefreshDatePicker() {
|
||||
if (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && 1 === 2) {
|
||||
const initialData = await this.getDatePickerInitialData();
|
||||
this.selectableDatesData = initialData.initialShopTimeSlotsResponse;
|
||||
this.$refs.datePicker.initializeComponent(initialData);
|
||||
mobileZipUpdatedFromServiceLocation(mobileZipServiceLocation) {
|
||||
if (mobileZipServiceLocation) {
|
||||
this.mobileProviderNumber = mobileZipServiceLocation.mobileProviderNumber;
|
||||
this.selectedServiceLocation = mobileZipServiceLocation;
|
||||
|
||||
if (mobileZipServiceLocation && mobileZipServiceLocation.refreshDatePicker) {
|
||||
this.refreshDatePicker();
|
||||
}
|
||||
}
|
||||
},
|
||||
providerChangedFromServiceLocation(newProvider) {
|
||||
console.log('Parent - Provider Changed from Service Location:', newProvider);
|
||||
this.selectedProvider = newProvider?.provider;
|
||||
|
||||
if (newProvider?.refreshDatePicker) {
|
||||
showIssLoadingModal(true);
|
||||
this.refreshDatePicker();
|
||||
}
|
||||
},
|
||||
serviceLocationUpdatedFromServiceLocation(newServiceLocation) {
|
||||
console.log('Parent - Service Location Updated from Service Location:', newServiceLocation);
|
||||
this.selectedServiceLocation = newServiceLocation;
|
||||
},
|
||||
async refreshDatePicker() {
|
||||
await this.getDatePickerInitialData().then((data) => {
|
||||
this.selectableDatesData = data.initialShopTimeSlotsResponse;
|
||||
this.$refs.datePicker.initializeComponent(data);
|
||||
showIssLoadingModal(false);
|
||||
});
|
||||
},
|
||||
timeSlotSelectedFromPicker(timeSlot) {
|
||||
this.selectedTimeSlotInfo = timeSlot;
|
||||
this.showDatePickerError = false;
|
||||
|
|
|
|||
|
|
@ -120,6 +120,7 @@
|
|||
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
|
||||
import errorMessages from '@/constants/error-messages';
|
||||
import { useMainStore } from '@/store';
|
||||
import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
|
||||
import {
|
||||
getAvailabilityRating,
|
||||
getPricedMobileFeePart,
|
||||
|
|
@ -185,30 +186,43 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
questionText() {
|
||||
return this.getCmsContent(
|
||||
'ServiceTypeQuestionWidget',
|
||||
'QuestionText'
|
||||
);
|
||||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers');
|
||||
},
|
||||
isServiceableMobile() {
|
||||
if (this.isRecalibrationServiceableMobile !== null) {
|
||||
return (
|
||||
this.isGlassServiceableMobile
|
||||
&& this.isRecalibrationServiceableMobile
|
||||
);
|
||||
}
|
||||
return this.isGlassServiceableMobile;
|
||||
appointmentQuestionText() {
|
||||
return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
|
||||
},
|
||||
isServiceableInshop() {
|
||||
if (this.isRecalibrationServiceableInshop !== null) {
|
||||
return (this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop);
|
||||
}
|
||||
|
||||
return this.isGlassServiceableInshop;
|
||||
displayBigTruckNoShops() {
|
||||
return this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile;
|
||||
},
|
||||
displayLowAvailabilityInshop() {
|
||||
return this.availabilityRating === 'low' && this.isInshop;
|
||||
},
|
||||
displayMilitaryZipAlert() {
|
||||
return this.zipContainsMilitaryBase && this.isServiceableMobile;
|
||||
},
|
||||
displayMobileFeeDisclaimer() {
|
||||
return this.mainStore.isNoComp || this.mainStore.isITAC;
|
||||
},
|
||||
displayNoShopsAlert() {
|
||||
return !this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile;
|
||||
},
|
||||
displayRecalibrationWarning() {
|
||||
return this.requiresInshopRecalibration;
|
||||
},
|
||||
displayServiceableInshopOnly() {
|
||||
return !this.isServiceableMobile && this.isServiceableInshop && !this.displayRecalibrationWarning;
|
||||
},
|
||||
displayServiceableMobileOnly() {
|
||||
return this.isServiceableMobile && this.recalibrationRequired && !this.isServiceableInshop;
|
||||
},
|
||||
inShopOnlyCopy() {
|
||||
let content = this.getCmsContent('AlertInshopOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
|
||||
content = content.replace('{custom:city}', toTitleCase(this.city));
|
||||
return content;
|
||||
},
|
||||
isBigTruck() {
|
||||
return this.mainStore.order.vehicle.isBigTruck;
|
||||
},
|
||||
isInshop() {
|
||||
return (
|
||||
|
|
@ -219,6 +233,51 @@ export default {
|
|||
isMobile() {
|
||||
return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE;
|
||||
},
|
||||
isServiceableInshop() {
|
||||
if (this.isRecalibrationServiceableInshop !== null) {
|
||||
return (this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop);
|
||||
}
|
||||
|
||||
return this.isGlassServiceableInshop;
|
||||
},
|
||||
isServiceableMobile() {
|
||||
if (this.isRecalibrationServiceableMobile !== null) {
|
||||
return (
|
||||
this.isGlassServiceableMobile
|
||||
&& this.isRecalibrationServiceableMobile
|
||||
);
|
||||
}
|
||||
return this.isGlassServiceableMobile;
|
||||
},
|
||||
militaryBaseWarningLinkText() {
|
||||
return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.HEADLINE_TEXT);
|
||||
},
|
||||
militaryBaseWarningText() {
|
||||
return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
|
||||
},
|
||||
mobileOnlyCopy() {
|
||||
let content = this.getCmsContent('AlertMobileOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
|
||||
content = content.replace('{custom:city}', toTitleCase(this.city));
|
||||
return content;
|
||||
},
|
||||
mobileZipPlaceholder() {
|
||||
return this.getCmsContent('MobileZipPlaceHolderWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
|
||||
},
|
||||
navigateBackScenario() {
|
||||
const { isNoComp, isITAC } = useMainStore();
|
||||
return isNoComp || isITAC
|
||||
? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW
|
||||
: this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW;
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent(
|
||||
'ServiceTypeQuestionWidget',
|
||||
'QuestionText'
|
||||
);
|
||||
},
|
||||
recalibrationRequired() {
|
||||
return this.mainStore.hasRecalibrationPart;
|
||||
},
|
||||
requiresInshopRecalibration() {
|
||||
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
|
||||
return (
|
||||
|
|
@ -227,104 +286,64 @@ export default {
|
|||
&& this.isRecalibrationServiceableMobile === false
|
||||
);
|
||||
},
|
||||
displayMilitaryZipAlert() {
|
||||
return this.zipContainsMilitaryBase && this.isServiceableMobile;
|
||||
},
|
||||
displayNoShopsAlert() {
|
||||
return !this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile;
|
||||
},
|
||||
displayBigTruckNoShops() {
|
||||
return this.isBigTruck && !this.isServiceableInshop && !this.isServiceableMobile;
|
||||
},
|
||||
displayRecalibrationWarning() {
|
||||
return this.requiresInshopRecalibration;
|
||||
},
|
||||
displayLowAvailabilityInshop() {
|
||||
return this.availabilityRating === 'low' && this.isInshop;
|
||||
},
|
||||
displayServiceableInshopOnly() {
|
||||
return !this.isServiceableMobile && this.isServiceableInshop && !this.displayRecalibrationWarning;
|
||||
},
|
||||
displayServiceableMobileOnly() {
|
||||
return this.isServiceableMobile && this.recalibrationRequired && !this.isServiceableInshop;
|
||||
},
|
||||
displayMobileFeeDisclaimer() {
|
||||
return this.mainStore.isNoComp || this.mainStore.isITAC;
|
||||
},
|
||||
navigateBackScenario() {
|
||||
const { isNoComp, isITAC } = useMainStore();
|
||||
return isNoComp || isITAC
|
||||
? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW
|
||||
: this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW;
|
||||
},
|
||||
isBigTruck() {
|
||||
return this.mainStore.order.vehicle.isBigTruck;
|
||||
},
|
||||
mobileZipPlaceholder() {
|
||||
return this.getCmsContent('MobileZipPlaceHolderWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
|
||||
},
|
||||
militaryBaseWarningLinkText() {
|
||||
return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.HEADLINE_TEXT);
|
||||
},
|
||||
militaryBaseWarningText() {
|
||||
return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
|
||||
},
|
||||
appointmentQuestionText() {
|
||||
return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
|
||||
},
|
||||
scheduleRecalText() {
|
||||
if (this.requiresInshopRecalibration) {
|
||||
return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
|
||||
}
|
||||
return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
},
|
||||
inShopOnlyCopy() {
|
||||
let content = this.getCmsContent('AlertInshopOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
|
||||
content = content.replace('{custom:city}', toTitleCase(this.city));
|
||||
return content;
|
||||
},
|
||||
mobileOnlyCopy() {
|
||||
let content = this.getCmsContent('AlertMobileOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
|
||||
content = content.replace('{custom:city}', toTitleCase(this.city));
|
||||
return content;
|
||||
},
|
||||
recalibrationRequired() {
|
||||
return this.mainStore.hasRecalibrationPart;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mobileZipCode(newZip) {
|
||||
console.log('Mobile Zip Changed:', newZip);
|
||||
async mobileZipCode(newZip) {
|
||||
if (newZip !== '') {
|
||||
this.updateMobileZip();
|
||||
this.$emit('mobile-zip-updated', newZip);
|
||||
showIssLoadingModal(true);
|
||||
await this.updateMobileZip();
|
||||
const updateMobileZipServiceLocationObj = {
|
||||
mobileProviderNumber: this.mobileProviderNumber,
|
||||
provider: null,
|
||||
refreshDatePicker: true,
|
||||
zipCode: this.zipCode,
|
||||
zipCodeCtu: this.zipCodeCtu
|
||||
};
|
||||
this.$emit('mobile-zip-updated', updateMobileZipServiceLocationObj);
|
||||
}
|
||||
},
|
||||
selectedAppointmentType() {
|
||||
console.log('Appointment Type Changed:', this.selectedAppointmentType);
|
||||
this.mobileZipCode = '';
|
||||
selectedAppointmentType(newValue, oldValue) {
|
||||
if (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && this.selectedProvider && this.availabilityRating === null) {
|
||||
console.log('Fetching availability rating for in-shop appointment type...');
|
||||
const startDate = new Date();
|
||||
const endDate = new Date();
|
||||
endDate.setDate(startDate.getDate() + 6);
|
||||
const formattedStartDate = startDate.toISOString().split('T')[0];
|
||||
const formattedEndDate = endDate.toISOString().split('T')[0];
|
||||
getAvailabilityRating(
|
||||
formattedStartDate,
|
||||
formattedEndDate,
|
||||
AppointmentTypeStrings.IN_SHOP,
|
||||
this.selectedProvider ? this.selectedProvider.providerNumber : null
|
||||
).then((rating) => {
|
||||
this.availabilityRating = rating;
|
||||
});
|
||||
this.refreshAvailabilityRating();
|
||||
|
||||
const appointmenTypeServiceLocationObj = {
|
||||
appointmentType: newValue,
|
||||
mobileProviderNumber: null,
|
||||
provider: this.selectedProvider,
|
||||
refreshDatePicker: oldValue !== newValue && oldValue !== null,
|
||||
resetDatePicker: oldValue !== newValue || oldValue === null,
|
||||
zipCode: this.zipCode,
|
||||
zipCodeCtu: this.zipCodeCtu
|
||||
};
|
||||
this.$emit('appointment-type-changed', appointmenTypeServiceLocationObj);
|
||||
} else {
|
||||
const appointmenTypeServiceLocationObj = {
|
||||
appointmentType: newValue,
|
||||
mobileProviderNumber: this.mobileProviderNumber,
|
||||
provider: null,
|
||||
refreshDatePicker: false,
|
||||
resetDatePicker: true,
|
||||
zipCode: this.zipCode,
|
||||
zipCodeCtu: this.zipCodeCtu
|
||||
};
|
||||
this.$emit('appointment-type-changed', appointmenTypeServiceLocationObj);
|
||||
}
|
||||
this.$emit('appointment-type-changed', this.selectedAppointmentType);
|
||||
},
|
||||
selectedProvider(newProvider, oldProvider) {
|
||||
if (newProvider !== oldProvider) {
|
||||
console.log('Selected Provider Changed:', newProvider);
|
||||
this.$emit('provider-changed', newProvider);
|
||||
if (newProvider?.providerNumber !== oldProvider?.providerNumber) {
|
||||
const returnedProvider = {
|
||||
provider: newProvider,
|
||||
refreshDatePicker: oldProvider?.providerNumber !== null
|
||||
};
|
||||
|
||||
this.refreshAvailabilityRating();
|
||||
this.$emit('provider-changed', returnedProvider);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -394,6 +413,36 @@ export default {
|
|||
getSelectedProvider() {
|
||||
return useMainStore().order.serviceLocation.provider;
|
||||
},
|
||||
async handleInShopZipUpdated(newZip) {
|
||||
this.zipCode = newZip;
|
||||
const zipCodeData = await getZipCodeData(this.zipCode);
|
||||
this.city = zipCodeData.city;
|
||||
this.setCtuForMobile(zipCodeData.zipCodeCtu);
|
||||
this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
|
||||
|
||||
const serviceabilityDetailsPromise = getServiceabilityDetails(this.zipCode);
|
||||
await serviceabilityDetailsPromise.then((result) => {
|
||||
const details = result.data;
|
||||
if (details) {
|
||||
this.setServiceabilityDetails(details);
|
||||
}
|
||||
});
|
||||
},
|
||||
refreshAvailabilityRating() {
|
||||
const startDate = new Date();
|
||||
const endDate = new Date();
|
||||
endDate.setDate(startDate.getDate() + 6);
|
||||
const formattedStartDate = startDate.toISOString().split('T')[0];
|
||||
const formattedEndDate = endDate.toISOString().split('T')[0];
|
||||
getAvailabilityRating(
|
||||
formattedStartDate,
|
||||
formattedEndDate,
|
||||
AppointmentTypeStrings.IN_SHOP,
|
||||
this.selectedProvider ? this.selectedProvider.providerNumber : null
|
||||
).then((rating) => {
|
||||
this.availabilityRating = rating;
|
||||
});
|
||||
},
|
||||
setCtuForMobile(val) {
|
||||
this.zipCodeCtu = val;
|
||||
},
|
||||
|
|
@ -463,7 +512,6 @@ export default {
|
|||
},
|
||||
async updateMobileZip() {
|
||||
this.mobileZipError = '';
|
||||
|
||||
const zipCodeData = await getMobileZipCodeData(this.mobileZipCode);
|
||||
|
||||
if (!zipCodeData.isValid) {
|
||||
|
|
@ -477,7 +525,7 @@ export default {
|
|||
this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
|
||||
|
||||
const serviceabilityDetailsPromise = getServiceabilityDetails(this.mobileZipCode);
|
||||
serviceabilityDetailsPromise.then((result) => {
|
||||
await serviceabilityDetailsPromise.then((result) => {
|
||||
const details = result.data;
|
||||
if (details) {
|
||||
this.setServiceabilityDetails(details);
|
||||
|
|
@ -485,7 +533,7 @@ export default {
|
|||
});
|
||||
|
||||
const providersPromise = useMainStore().getProviders(this.mobileZipCode);
|
||||
providersPromise.then((result) => {
|
||||
await providersPromise.then((result) => {
|
||||
const providers = result.data;
|
||||
if (providers) {
|
||||
this.setMobileProviderNumber(providers.mobileProviderNumber);
|
||||
|
|
@ -498,21 +546,6 @@ export default {
|
|||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
async handleInShopZipUpdated(newZip) {
|
||||
this.zipCode = newZip;
|
||||
const zipCodeData = await getZipCodeData(this.zipCode);
|
||||
this.city = zipCodeData.city;
|
||||
this.setCtuForMobile(zipCodeData.zipCodeCtu);
|
||||
this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
|
||||
|
||||
const serviceabilityDetailsPromise = getServiceabilityDetails(this.zipCode);
|
||||
serviceabilityDetailsPromise.then((result) => {
|
||||
const details = result.data;
|
||||
if (details) {
|
||||
this.setServiceabilityDetails(details);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -57,7 +57,6 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
updateModelValue() {
|
||||
console.log('Service Zip Updated:', this.internalZipcode);
|
||||
this.$emit('update:modelValue', this.internalZipcode);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -875,7 +875,8 @@ export const useMainStore = defineStore({
|
|||
logApiCall: true
|
||||
});
|
||||
},
|
||||
getMobileTimeSlots(startDate, endDate) {
|
||||
getMobileTimeSlots(startDate, endDate, zipCodeOverride = null) {
|
||||
console.log('Getting mobile time slots with zip code override:', zipCodeOverride);
|
||||
const { order } = this;
|
||||
const { vehicle } = this.order;
|
||||
let lineItems = [
|
||||
|
|
@ -921,7 +922,7 @@ export const useMainStore = defineStore({
|
|||
style: vehicle.style,
|
||||
vin: vehicle.vin ?? ''
|
||||
},
|
||||
zipCode: order.serviceLocation.zipCode
|
||||
zipCode: zipCodeOverride ?? order.serviceLocation.zipCode
|
||||
};
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.GetMobileTimeSlots.method,
|
||||
|
|
@ -931,7 +932,7 @@ export const useMainStore = defineStore({
|
|||
additionalSuccessEventDataHandler: (response) =>
|
||||
getTimeSlotsAdditionalEventData(
|
||||
response.data.provisionalTriggers,
|
||||
order.serviceLocation.zipCode,
|
||||
zipCodeOverride ?? order.serviceLocation.zipCode,
|
||||
response.data.days?.[0]?.date
|
||||
)
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue