initial check in
This commit is contained in:
Bill Richardson
parent
0afc36f802
commit
f06332c066
18 changed files with 622 additions and 587 deletions
|
|
@ -50,9 +50,6 @@ export const pageProgressMapper = {
|
|||
'provider-preference': {
|
||||
percent: 60
|
||||
},
|
||||
'service-location': {
|
||||
percent: 65
|
||||
},
|
||||
'schedule-page': {
|
||||
percent: 70
|
||||
},
|
||||
|
|
|
|||
|
|
@ -161,6 +161,10 @@ export default {
|
|||
},
|
||||
default: selectableDaysOptions.PAST
|
||||
},
|
||||
isMobileView: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modelValue: {
|
||||
type: Object
|
||||
},
|
||||
|
|
@ -241,8 +245,7 @@ export default {
|
|||
daysLoaded: 0,
|
||||
appointmentDurationMinutesMinimum: 90,
|
||||
appointmentDurationMinutesMaximum: 120,
|
||||
initialDaysToLoad: 15,
|
||||
isMobileView: false
|
||||
initialDaysToLoad: 15
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -284,6 +287,16 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
isMobileView(newValue, oldValue) {
|
||||
if (newValue !== oldValue) {
|
||||
this.activePageIndex = 0;
|
||||
this.selectedDate = null;
|
||||
this.selectedTimeOfDayGrouping = null;
|
||||
this.selectedTime = null;
|
||||
this.selectedTimeSlot = null;
|
||||
this.findFirstAvailableDateInView();
|
||||
}
|
||||
},
|
||||
selectedTimeSlot(newValue, oldValue) {
|
||||
if (newValue !== oldValue) {
|
||||
const testObj = this.getSelectedTimeSlotInfoObject(newValue);
|
||||
|
|
@ -296,20 +309,30 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mql = window.matchMedia('(min-width: 1200px)');
|
||||
this.isMobileView = !this.mql.matches;
|
||||
this.mql.addEventListener('change', this.handleMqlChange);
|
||||
},
|
||||
unmounted() {
|
||||
if (this.mql) {
|
||||
this.mql.removeEventListener('change', this.handleMqlChange);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(initialData) {
|
||||
this.resetComponent();
|
||||
this.setCalendarData(initialData);
|
||||
},
|
||||
resetComponent() {
|
||||
this.isLoading = true;
|
||||
this.selectableDatesData = []; // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
|
||||
this.selectableTimeSlotsData = [];
|
||||
this.selectedTimeOfDayGrouping = null;
|
||||
this.selectedDate = null;
|
||||
this.selectedTime = null;
|
||||
this.selectedTimeSlot = null;
|
||||
this.activeDate = new Date();
|
||||
this.activePageIndex = 0;
|
||||
this.todaysDate = new Date();
|
||||
this.mql = null;
|
||||
this.daysInViewMobile = 3;
|
||||
this.daysInViewStandard = 5;
|
||||
this.daysLoaded = 0;
|
||||
this.appointmentDurationMinutesMinimum = 90;
|
||||
this.appointmentDurationMinutesMaximum = 120;
|
||||
this.initialDaysToLoad = 15;
|
||||
},
|
||||
addPremiumFlagToInput(routeCode) {
|
||||
return (`${routeCode}${PREMIUM_TIME_SLOT_ID_FLAG}`);
|
||||
},
|
||||
|
|
@ -352,15 +375,6 @@ export default {
|
|||
isPremiumAppointment: null
|
||||
};
|
||||
},
|
||||
handleMqlChange(e) {
|
||||
this.isMobileView = !e.matches;
|
||||
this.activePageIndex = 0;
|
||||
this.selectedDate = null;
|
||||
this.selectedTimeOfDayGrouping = null;
|
||||
this.selectedTime = null;
|
||||
this.selectedTimeSlot = null;
|
||||
this.findFirstAvailableDateInView();
|
||||
},
|
||||
displayTimeSlotTime(timeSlot) {
|
||||
const { appointmentType } = this.mainStore.order.serviceLocation;
|
||||
if (appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
|
||||
|
|
@ -434,38 +448,6 @@ export default {
|
|||
const dateToShow = this.getDateToShow(index);
|
||||
return convertDateToDateString(dateToShow);
|
||||
},
|
||||
getEndDateForExistingDate(startDate, selectedDateString, daysInView) {
|
||||
const endDate = new Date(startDate);
|
||||
endDate.setDate(endDate.getDate() + (daysInView - 1));
|
||||
|
||||
if (selectedDateString) {
|
||||
const selectedDate = new Date(`${selectedDateString}T00:00:00`);
|
||||
const daysDifferenceComparedToStartDate = Math.ceil((selectedDate - startDate) / (1000 * 60 * 60 * 24));
|
||||
if (selectedDate > endDate) {
|
||||
const daysDifferenceComparedToStartDateAsPages = Math.ceil(daysDifferenceComparedToStartDate / daysInView);
|
||||
const newEndDate = new Date(startDate);
|
||||
newEndDate.setDate(newEndDate.getDate() + (daysDifferenceComparedToStartDateAsPages * daysInView) - 1);
|
||||
|
||||
return {
|
||||
endDateString: convertDateToDateString(newEndDate),
|
||||
newDaysLoaded: (daysDifferenceComparedToStartDateAsPages * daysInView),
|
||||
daysFromStart: daysDifferenceComparedToStartDate
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
endDateString: convertDateToDateString(endDate),
|
||||
newDaysLoaded: null,
|
||||
daysFromStart: daysDifferenceComparedToStartDate
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
endDateString: convertDateToDateString(endDate),
|
||||
newDaysLoaded: null,
|
||||
daysFromStart: null
|
||||
};
|
||||
},
|
||||
async gotoNextPage() {
|
||||
const maxPageIndex = Math.floor((this.daysLoaded - 1) / this.daysToAdd);
|
||||
if (this.activePageIndex >= maxPageIndex) {
|
||||
|
|
@ -572,66 +554,9 @@ export default {
|
|||
timeSlotInputChanged(timeSlot) {
|
||||
this.selectTimeSlotForDay(timeSlot);
|
||||
},
|
||||
async loadInitialData(config) {
|
||||
/*
|
||||
** NOTE: this _could_ be called by a parent before fully loaded, so data or computeds might not be available
|
||||
*/
|
||||
let todayDateString;
|
||||
const todayDateObject = new Date();
|
||||
const calendarViewDirection = 'future';
|
||||
const initialDays = 15;
|
||||
|
||||
if (this.todayString) {
|
||||
todayDateString = this.todayString;
|
||||
} else if (config.todayOverrideDateString) {
|
||||
todayDateString = config.todayOverrideDateString;
|
||||
} else {
|
||||
todayDateString = convertDateToDateString(todayDateObject);
|
||||
}
|
||||
|
||||
const initialViewStartDate = todayDateString;
|
||||
const initialEndDate = new Date();
|
||||
initialEndDate.setDate(initialEndDate.getDate() + (initialDays - 1));
|
||||
let initialViewEndDate = convertDateToDateString(initialEndDate);
|
||||
|
||||
const endDateObject = this.getEndDateForExistingDate(
|
||||
todayDateObject,
|
||||
config.preSelectedDate,
|
||||
initialDays
|
||||
);
|
||||
|
||||
if (endDateObject.endDateString !== initialViewEndDate) {
|
||||
initialViewEndDate = endDateObject.endDateString;
|
||||
}
|
||||
|
||||
const loadInitialDataPromise = new Promise((resolve) => {
|
||||
const response = config.customSelectableDatesCallback(
|
||||
initialViewStartDate,
|
||||
initialViewEndDate,
|
||||
useMainStore().order.serviceLocation.appointmentType,
|
||||
useMainStore().order.serviceLocation.provider.providerNumber
|
||||
);
|
||||
resolve(response);
|
||||
});
|
||||
|
||||
return loadInitialDataPromise.then((response) => {
|
||||
const initialData = {
|
||||
todayDate: todayDateString,
|
||||
initialViewStartDate,
|
||||
initialViewEndDate,
|
||||
calendarViewDirection,
|
||||
initialShopTimeSlotsResponse: response,
|
||||
preSelectedDate: config.preSelectedDate,
|
||||
initialDaysLoaded: endDateObject.newDaysLoaded || initialDays,
|
||||
daysFromStart: endDateObject.daysFromStart || null
|
||||
};
|
||||
|
||||
return initialData;
|
||||
});
|
||||
},
|
||||
async setCalendarData(config = {}) {
|
||||
const initialMql = window.matchMedia('(min-width: 1200px)');
|
||||
this.isMobileView = !initialMql.matches;
|
||||
// const initialMql = window.matchMedia('(min-width: 1200px)');
|
||||
// this.isMobileView = !initialMql.matches;
|
||||
config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
|
||||
const dateObjectToPush = {
|
||||
date: selectableDate.date,
|
||||
|
|
@ -899,7 +824,7 @@ export default {
|
|||
border-radius: $border-radius-list-button;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
|
||||
color: #525656;
|
||||
padding: 0.5rem 0;
|
||||
padding: 0.625rem 0;
|
||||
margin-top: 0.625rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -306,6 +306,7 @@ function mapStringToState(str) {
|
|||
const valueFromStore = getStoreValueFromString(match[2]);
|
||||
if (!valueFromStore) {
|
||||
console.warn('Unable to resolve global state data.');
|
||||
console.warn(`Tried to resolve: ${match[2]}`);
|
||||
return ''; // if we can't map our string to state data, return an empty string.
|
||||
}
|
||||
const stringWithReplacement = str.replace(match[0], valueFromStore);
|
||||
|
|
|
|||
|
|
@ -58,11 +58,16 @@ 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;
|
||||
const isGoodAvailability =
|
||||
shopTimeSlots.data.days.filter((x) => x.timeSlots.length > 0).length
|
||||
shopTimeSlots.data.days.filter((x) => x.timeSlots.length > 6).length
|
||||
>= numberOfDaysToEvaluate;
|
||||
|
||||
const shopStatus = isGoodAvailability ? 'high' : 'low';
|
||||
|
|
|
|||
|
|
@ -15,7 +15,19 @@
|
|||
cmsWidgetName="ScheduleSubHeaderWidget"
|
||||
secondaryTextClasses="text-center small sub-text"
|
||||
class="mt-4" />
|
||||
<div class="main-content-container">
|
||||
<div class="service-location-content-container">
|
||||
<serviceLocation
|
||||
ref="serviceLocation"
|
||||
@appointmentTypeChanged="appointmentTypeChangedFromServiceLocation"
|
||||
@mobileZipUpdated="mobileZipUpdatedFromChild"
|
||||
@providerChanged="providerChangedFromChild"
|
||||
@serviceLocationUpdated="serviceLocationUpdatedFromChild" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-show="hasNeededServiceLocationData"
|
||||
class="date-picker-container iss-heritage-content-container-width">
|
||||
<div class="date-picker-content-container">
|
||||
<locationAlerts
|
||||
ref="locationAlerts"
|
||||
cmsWidgetPrefix="LocationAlert-" />
|
||||
|
|
@ -25,21 +37,23 @@
|
|||
customComponentId="dateQuestion"
|
||||
selectableDatesSetting="custom"
|
||||
class="text-link-small"
|
||||
:isMobileView="isMobileView"
|
||||
:showTimeSlotError="showDatePickerError"
|
||||
:customSelectableDatesCallback="
|
||||
getAvailableDatesMethod
|
||||
"
|
||||
:customSelectableDatesCallback="getAvailableDatesMethod"
|
||||
@dateSelected="dateSelectedFromPicker"
|
||||
@timeSlotSelected="timeSlotSelectedFromPicker" />
|
||||
<siteFooter
|
||||
ref="navbar"
|
||||
class="mt-5"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardButtonNavigationDisabled="!isFormValid"
|
||||
@backClicked="navigateBack"
|
||||
@forwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-footer-container iss-heritage-content-container-width">
|
||||
<siteFooter
|
||||
ref="navbar"
|
||||
class="mt-5"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardButtonHidden="!hasNeededServiceLocationData"
|
||||
:isForwardButtonNavigationDisabled="!isFormValid"
|
||||
@backClicked="navigateBack"
|
||||
@forwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
|
@ -50,6 +64,7 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
|
|||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
|
||||
import datePicker from '@/digital-components/date-picker/date-picker.vue';
|
||||
import serviceLocation from '@/layouts/schedule-page/service-location/service-location.vue';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
|
||||
// Supporting files
|
||||
|
|
@ -65,9 +80,22 @@ import {
|
|||
} from '@/helpers/cms-content-helper';
|
||||
import {
|
||||
calcDaysBetweenDates,
|
||||
convertDateToDateString,
|
||||
// convertDateToShortMonth,
|
||||
// convertDateToTwoDigitDay,
|
||||
// convertDateToTwoDigitMonth,
|
||||
// getDisplayTextForDurationLength,
|
||||
// isAfternoon,
|
||||
// militaryToTwelveHourTime,
|
||||
sumDateString
|
||||
} from '@/helpers/date-helper';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import {
|
||||
getPricedMobileFeePart,
|
||||
getServiceabilityDetails,
|
||||
getZipCodeData,
|
||||
getMobileZipCodeData
|
||||
} from '@/helpers/service-location-helper';
|
||||
import { Form } from 'vee-validate';
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import { useMainStore } from '@/store';
|
||||
|
|
@ -182,6 +210,7 @@ export default {
|
|||
siteSubHeader,
|
||||
locationAlerts,
|
||||
datePicker,
|
||||
serviceLocation,
|
||||
siteFooter,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form
|
||||
|
|
@ -195,17 +224,14 @@ export default {
|
|||
}
|
||||
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
const datePickerInitialDataPromise =
|
||||
await datePicker.methods.loadInitialData({
|
||||
selectableDatesSetting: 'custom',
|
||||
initialViewRowsToShow: 5,
|
||||
customSelectableDatesCallback: getAvailableDates,
|
||||
preSelectedDate
|
||||
});
|
||||
const serviceZipCode = useMainStore().order.serviceLocation.zipCode || useMainStore().order.customer.address.zipCode;
|
||||
const zipCodeData = getZipCodeData(serviceZipCode);
|
||||
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
|
||||
const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
|
||||
const getGlassFeesPromise = useMainStore().getGlassFees();
|
||||
const providersPromise = useMainStore().getProviders(serviceZipCode);
|
||||
|
||||
const premiumFeePromise = useMainStore().getMobilePremiumFee();
|
||||
|
||||
const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
|
||||
if (result.data) {
|
||||
return useMainStore().getCombinedQuote(result.data);
|
||||
|
|
@ -213,24 +239,35 @@ export default {
|
|||
return result.data;
|
||||
});
|
||||
|
||||
const alertReasonsPromise = locationAlerts.methods.loadInitialData(
|
||||
useMainStore().order.serviceLocation.zipCodeCtu,
|
||||
useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
|
||||
);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise
|
||||
},
|
||||
// {
|
||||
// resultKey: 'datePickerInitialData',
|
||||
// promise: datePickerInitialDataPromise
|
||||
// },
|
||||
{
|
||||
resultKey: 'alertReasons',
|
||||
promise: alertReasonsPromise
|
||||
resultKey: 'mobileFeePart',
|
||||
promise: mobileFeePartPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'datePickerInitialData',
|
||||
promise: datePickerInitialDataPromise
|
||||
resultKey: 'glassFees',
|
||||
promise: getGlassFeesPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'serviceabilityDetails',
|
||||
promise: serviceabilityDetailsPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'zipCodeData',
|
||||
promise: zipCodeData
|
||||
},
|
||||
{
|
||||
resultKey: 'providers',
|
||||
promise: providersPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'premiumFeeWithPrice',
|
||||
|
|
@ -240,14 +277,26 @@ export default {
|
|||
|
||||
// use resultMap to populate layout content.
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
next((vm) => {
|
||||
const serviceLocationData = {
|
||||
glassFees: resultMap.glassFees,
|
||||
mobileFeePart: resultMap.mobileFeePart,
|
||||
providers: resultMap.providers,
|
||||
serviceabilityDetails: resultMap.serviceabilityDetails,
|
||||
zipCodeData: resultMap.zipCodeData
|
||||
};
|
||||
useMainStore().updateIsSafeliteProvider(true);
|
||||
next(async (vm) => {
|
||||
const initialServiceLocationObj = {
|
||||
provider: resultMap.providers?.shopProviders[0],
|
||||
zipCode: useMainStore().order.serviceLocation.zipCode || useMainStore().order.customer.address.zipCode,
|
||||
zipCodeCtu: resultMap.zipCodeData?.zipCodeCtu
|
||||
};
|
||||
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
|
||||
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
|
||||
vm.setData(
|
||||
resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
|
||||
resultMap.premiumFeeWithPrice
|
||||
);
|
||||
// vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
|
||||
// vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
|
||||
vm.$refs.serviceLocation.initializeComponent(serviceLocationData);
|
||||
await vm.setData(resultMap.premiumFeeWithPrice, initialServiceLocationObj);
|
||||
});
|
||||
},
|
||||
setup() {
|
||||
|
|
@ -256,23 +305,51 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
selectedDate: this.getSelectedDate(),
|
||||
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
|
||||
isMobileView: false,
|
||||
mobilePremiumAppointmentFee: null,
|
||||
selectableDatesData: [],
|
||||
showDatePickerError: false,
|
||||
mobilePremiumAppointmentFee: null
|
||||
selectedAppointmentType: this.getAppointmentType(),
|
||||
selectedDate: this.getSelectedDate(),
|
||||
selectedProvider: this.getSelectedProvider(),
|
||||
selectedServiceLocation: this.getServiceLocation(),
|
||||
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
|
||||
showDatePickerError: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ChangeShopLinkText() {
|
||||
return this.getCmsContent('ChangeShopLink', 'Text');
|
||||
},
|
||||
ChangeShopLink() {
|
||||
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
|
||||
},
|
||||
appointmentType() {
|
||||
return useMainStore().order.serviceLocation.appointmentType;
|
||||
},
|
||||
daysToAdd() {
|
||||
return this.isMobileView ? this.daysInViewMobile : this.daysInViewStandard;
|
||||
},
|
||||
hasNeededServiceLocationData() {
|
||||
const serviceLocationToUse = this.selectedServiceLocation;
|
||||
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);
|
||||
|
||||
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() {
|
||||
const hasTimeSlotSelected = this.selectedTimeSlotInfo?.timeSlot?.routeCode != null;
|
||||
return hasTimeSlotSelected;
|
||||
|
|
@ -281,34 +358,50 @@ export default {
|
|||
return useMainStore().lineItems.supportingItems;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mql = window.matchMedia('(min-width: 1200px)');
|
||||
this.isMobileView = !this.mql.matches;
|
||||
this.mql.addEventListener('change', this.handleMqlChange);
|
||||
},
|
||||
unmounted() {
|
||||
if (this.mql) {
|
||||
this.mql.removeEventListener('change', this.handleMqlChange);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
arePagePrerequisitesValid() {
|
||||
const { serviceLocation } = useMainStore().order;
|
||||
const serviceLocationPreReqs =
|
||||
serviceLocation.zipCode
|
||||
&& serviceLocation.zipCodeCtu
|
||||
&& serviceLocation.appointmentType
|
||||
&& (serviceLocation.appointmentType
|
||||
=== AppointmentTypeStrings.MOBILE
|
||||
|| serviceLocation.appointmentType
|
||||
=== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
|
||||
|| serviceLocation.provider.providerNumber);
|
||||
const supportingItems = this.supportingItems !== null;
|
||||
const damageInfo =
|
||||
useMainStore().order.damage.isRepair
|
||||
|| (useMainStore().order.lineItems?.glassParts != null
|
||||
&& useMainStore().order.lineItems.glassParts.length > 0);
|
||||
|
||||
return serviceLocationPreReqs && supportingItems && damageInfo;
|
||||
return useMainStore().order.serviceLocation.zipCode !== null;
|
||||
},
|
||||
setData(initialShopTimeSlotsResponse, premiumFeeWithPriceResponse) {
|
||||
this.selectableDatesData = initialShopTimeSlotsResponse;
|
||||
async setData(premiumFeeWithPriceResponse, initialServiceLocationObj) {
|
||||
// this.selectableDatesData = initialShopTimeSlotsResponse;
|
||||
this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
|
||||
? premiumFeeWithPriceResponse[0]
|
||||
: null;
|
||||
this.selectedServiceLocation = initialServiceLocationObj;
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
appointmentTypeChangedFromServiceLocation(newAppointmentType) {
|
||||
console.log('Parent - Appointment Type Changed from Service Location:', newAppointmentType);
|
||||
this.selectedAppointmentType = newAppointmentType;
|
||||
this.shouldRefreshDatePicker();
|
||||
},
|
||||
dateSelectedFromPicker(date) {
|
||||
this.selectedDate = date;
|
||||
this.showDatePickerError = false;
|
||||
},
|
||||
getAppointmentType() {
|
||||
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,
|
||||
|
|
@ -321,12 +414,103 @@ export default {
|
|||
return newShopTimeSlots;
|
||||
},
|
||||
getAvailableDates,
|
||||
async getDatePickerInitialData(defaultProviderNumber = null) {
|
||||
console.log('Fetching Date Picker Initial Data...');
|
||||
console.log('defaultProviderNumber:', defaultProviderNumber);
|
||||
let todayDateString;
|
||||
const todayDateObject = new Date();
|
||||
const calendarViewDirection = 'future';
|
||||
const initialDays = 15;
|
||||
|
||||
if (this.todayString) {
|
||||
todayDateString = this.todayString;
|
||||
} else {
|
||||
todayDateString = convertDateToDateString(todayDateObject);
|
||||
}
|
||||
|
||||
const initialViewStartDate = todayDateString;
|
||||
const initialEndDate = new Date();
|
||||
initialEndDate.setDate(initialEndDate.getDate() + (initialDays - 1));
|
||||
let initialViewEndDate = convertDateToDateString(initialEndDate);
|
||||
const preSelectedDate = this.mainStore.order.schedule.date;
|
||||
|
||||
const endDateObject = this.getEndDateForExistingDate(
|
||||
todayDateObject,
|
||||
preSelectedDate,
|
||||
initialDays
|
||||
);
|
||||
|
||||
if (endDateObject.endDateString !== initialViewEndDate) {
|
||||
initialViewEndDate = endDateObject.endDateString;
|
||||
}
|
||||
|
||||
const initialDataPickerDataPromise = new Promise((resolve) => {
|
||||
const response = getAvailableDates(
|
||||
initialViewStartDate,
|
||||
initialViewEndDate,
|
||||
this.selectedAppointmentType || AppointmentTypeStrings.IN_SHOP,
|
||||
this.selectedProvider.providerNumber || defaultProviderNumber
|
||||
);
|
||||
resolve(response);
|
||||
});
|
||||
|
||||
const initialData = await initialDataPickerDataPromise.then((response) => ({
|
||||
todayDate: todayDateString,
|
||||
initialViewStartDate,
|
||||
initialViewEndDate,
|
||||
calendarViewDirection,
|
||||
initialShopTimeSlotsResponse: response,
|
||||
preSelectedDate,
|
||||
initialDaysLoaded: endDateObject.newDaysLoaded || initialDays,
|
||||
daysFromStart: endDateObject.daysFromStart || null
|
||||
}));
|
||||
|
||||
console.log('Date Picker Initial Data:');
|
||||
console.log(initialData);
|
||||
|
||||
return initialData;
|
||||
},
|
||||
getEndDateForExistingDate(startDate, selectedDateString, daysInView) {
|
||||
const endDate = new Date(startDate);
|
||||
endDate.setDate(endDate.getDate() + (daysInView - 1));
|
||||
|
||||
if (selectedDateString) {
|
||||
const selectedDate = new Date(`${selectedDateString}T00:00:00`);
|
||||
const daysDifferenceComparedToStartDate = Math.ceil((selectedDate - startDate) / (1000 * 60 * 60 * 24));
|
||||
if (selectedDate > endDate) {
|
||||
const daysDifferenceComparedToStartDateAsPages = Math.ceil(daysDifferenceComparedToStartDate / daysInView);
|
||||
const newEndDate = new Date(startDate);
|
||||
newEndDate.setDate(newEndDate.getDate() + (daysDifferenceComparedToStartDateAsPages * daysInView) - 1);
|
||||
|
||||
return {
|
||||
endDateString: convertDateToDateString(newEndDate),
|
||||
newDaysLoaded: (daysDifferenceComparedToStartDateAsPages * daysInView),
|
||||
daysFromStart: daysDifferenceComparedToStartDate
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
endDateString: convertDateToDateString(endDate),
|
||||
newDaysLoaded: null,
|
||||
daysFromStart: daysDifferenceComparedToStartDate
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
endDateString: convertDateToDateString(endDate),
|
||||
newDaysLoaded: null,
|
||||
daysFromStart: null
|
||||
};
|
||||
},
|
||||
getServiceZipCtuCodeFromStore() {
|
||||
return this.mainStore.order.serviceLocation.zipCodeCtu;
|
||||
},
|
||||
getSelectedDate() {
|
||||
return this.mainStore.order.schedule.date;
|
||||
},
|
||||
getSelectedProvider() {
|
||||
return this.mainStore.order.serviceLocation.provider;
|
||||
},
|
||||
getSelectedTimeSlotInfo() {
|
||||
const isPremiumAppointment =
|
||||
!!(
|
||||
|
|
@ -341,9 +525,29 @@ export default {
|
|||
|
||||
return selectedTimeSlotInfo;
|
||||
},
|
||||
dateSelectedFromPicker(date) {
|
||||
this.selectedDate = date;
|
||||
this.showDatePickerError = false;
|
||||
getServiceLocation() {
|
||||
return this.mainStore.order.serviceLocation;
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
timeSlotSelectedFromPicker(timeSlot) {
|
||||
this.selectedTimeSlotInfo = timeSlot;
|
||||
|
|
@ -369,11 +573,12 @@ export default {
|
|||
$page-side-padding: 1.5rem;
|
||||
|
||||
.iss-heritage-container-width {
|
||||
padding-right: 0.9375rem;
|
||||
padding-left: 0.9375rem;
|
||||
|
||||
.schedule-page-container {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: .9375rem;
|
||||
padding-right: .9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,12 +19,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { useMainStore } from '@/store';
|
||||
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
||||
|
||||
// Constants
|
||||
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
|
||||
import { experimentSettings } from '@/constants/experiments';
|
||||
|
||||
export default {
|
||||
name: 'appointment-type-question',
|
||||
|
|
@ -63,12 +61,17 @@ export default {
|
|||
this.$emit('update:modelValue', newValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.appointment-type-question {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-top: .625rem;
|
||||
|
||||
:deep(.list-button-content) {
|
||||
padding-top: .625rem;
|
||||
padding-bottom: .625rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -79,8 +79,6 @@ import modal from '@/digital-components/modal/modal.vue';
|
|||
import alert from '@/ux-components/alert/alert.vue';
|
||||
import { useField } from 'vee-validate';
|
||||
import addressQuestions from '@/iss-components/address-questions/address-questions.vue';
|
||||
// eslint-disable-next-line max-len
|
||||
import vehicleProtectedQuestion from '@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue';
|
||||
|
||||
// Constants
|
||||
import { experimentSettings } from '@/constants/experiments';
|
||||
|
|
@ -90,10 +88,11 @@ import { useMainStore } from '@/store';
|
|||
import {
|
||||
getMobileZipCodeData,
|
||||
getPricedMobileFeePart,
|
||||
getServiceabilityDetails,
|
||||
getZipCodeData
|
||||
getServiceabilityDetails
|
||||
} from '@/helpers/service-location-helper';
|
||||
import { deepClone } from '@/helpers/object-helper.js';
|
||||
// eslint-disable-next-line max-len
|
||||
import vehicleProtectedQuestion from '@/layouts/schedule-page/service-location/mobile-location-modal-question/vehicle-protected-question/vehicle-protected-question.vue';
|
||||
|
||||
export default {
|
||||
name: 'mobile-location-modal-questions',
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
/* eslint-env jest */
|
||||
import baseMixin from '@/mixins/base-mixin';
|
||||
import { mount, flushPromises } from '@vue/test-utils';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import { AppointmentTypeStrings } from '@/constants/schedule-constants';
|
||||
import navigationScenarios from '@/router/router-constants/navigation-scenarios';
|
||||
import routerParams from '@/router/router-constants/router-params';
|
||||
import { useMainStore } from '@/store';
|
||||
import serviceLocation from '@/layouts/service-location/service-location.vue';
|
||||
import { getZipCodeData } from '@/helpers/service-location-helper';
|
||||
import serviceLocation from '@/layouts/schedule-page/service-location/service-location.vue';
|
||||
|
||||
const mockGetServiceabilityDetails = () => {
|
||||
const serviceabilityDetails = {
|
||||
|
|
@ -50,43 +49,41 @@ const mockZipcodeData = (zip) => {
|
|||
state: null,
|
||||
zipCodeCtu: null
|
||||
});
|
||||
}
|
||||
const mockProviders = () => {
|
||||
return Promise.resolve([
|
||||
{
|
||||
"address": {
|
||||
"city": "COLUMBUS",
|
||||
"country": "US",
|
||||
"state": "OH",
|
||||
"streetAddress": "6826 Sawmill Rd",
|
||||
"streetAddress2": "",
|
||||
"zipCode": "43235",
|
||||
"zipCodeCtu": "03357"
|
||||
},
|
||||
"distanceInMiles": 4.136335989015438,
|
||||
"providerNumber": "003357",
|
||||
"companyName": "SAFELITE AUTOGLASS - COLUMBUS, OH",
|
||||
"phoneNumber": "6142336400",
|
||||
"isSafeliteShop": true
|
||||
};
|
||||
const mockProviders = () => Promise.resolve([
|
||||
{
|
||||
address: {
|
||||
city: 'COLUMBUS',
|
||||
country: 'US',
|
||||
state: 'OH',
|
||||
streetAddress: '6826 Sawmill Rd',
|
||||
streetAddress2: '',
|
||||
zipCode: '43235',
|
||||
zipCodeCtu: '03357'
|
||||
},
|
||||
{
|
||||
"address": {
|
||||
"city": "Lewis Center",
|
||||
"country": "US",
|
||||
"state": "OH",
|
||||
"streetAddress": "1343 Cameron Ave",
|
||||
"streetAddress2": "",
|
||||
"zipCode": "43035",
|
||||
"zipCodeCtu": "03357"
|
||||
},
|
||||
"distanceInMiles": 8.193072412262042,
|
||||
"providerNumber": "003417",
|
||||
"companyName": "SAFELITE AUTOGLASS - LEWIS CENTER, OH",
|
||||
"phoneNumber": "6147815433",
|
||||
"isSafeliteShop": true
|
||||
}
|
||||
])
|
||||
}
|
||||
distanceInMiles: 4.136335989015438,
|
||||
providerNumber: '003357',
|
||||
companyName: 'SAFELITE AUTOGLASS - COLUMBUS, OH',
|
||||
phoneNumber: '6142336400',
|
||||
isSafeliteShop: true
|
||||
},
|
||||
{
|
||||
address: {
|
||||
city: 'Lewis Center',
|
||||
country: 'US',
|
||||
state: 'OH',
|
||||
streetAddress: '1343 Cameron Ave',
|
||||
streetAddress2: '',
|
||||
zipCode: '43035',
|
||||
zipCodeCtu: '03357'
|
||||
},
|
||||
distanceInMiles: 8.193072412262042,
|
||||
providerNumber: '003417',
|
||||
companyName: 'SAFELITE AUTOGLASS - LEWIS CENTER, OH',
|
||||
phoneNumber: '6147815433',
|
||||
isSafeliteShop: true
|
||||
}
|
||||
]);
|
||||
jest.mock(
|
||||
'@/helpers/service-location-helper',
|
||||
() => ({
|
||||
|
|
@ -138,13 +135,13 @@ const mountOptions = {
|
|||
}
|
||||
}
|
||||
};
|
||||
function setupMocks({ appointmentType = AppointmentTypeStrings.IN_SHOP }) {
|
||||
function setupMocks({ appointmentType = AppointmentTypeStrings.IN_SHOP }) {
|
||||
mountOptions.global.plugins = [createTestingPinia({
|
||||
initialState: {
|
||||
main: {
|
||||
order: {
|
||||
serviceLocation: {
|
||||
appointmentType: appointmentType
|
||||
appointmentType
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -204,7 +201,7 @@ describe('service-location.vue', () => {
|
|||
|
||||
expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
|
||||
|
||||
const newMobileServiceZipCode = '45433'
|
||||
const newMobileServiceZipCode = '45433';
|
||||
|
||||
// Act
|
||||
mobileServiceZipCodeQuestion.vm.$emit('update:modelValue', newMobileServiceZipCode);
|
||||
|
|
@ -1,166 +1,142 @@
|
|||
<template>
|
||||
<Form
|
||||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="fade-on-route-transition">
|
||||
<div class="justify-content-center">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="service-location">
|
||||
<alert
|
||||
v-if="displayRecalibrationWarning"
|
||||
ref="alertRecalNoMobile"
|
||||
cmsWidgetName="AlertRecalNoMobileWidget"
|
||||
alertClass="alert-warning"
|
||||
@text-link-clicked="openModalAction" />
|
||||
<alert
|
||||
v-if="displayBigTruckNoShops"
|
||||
ref="alertBigTruckNoShops"
|
||||
cmsWidgetName="AlertBigTruckNoShopsWidget"
|
||||
alertClass="alert-warning" />
|
||||
<div style="display: none;">
|
||||
isServiceableMobile: {{ isServiceableMobile }}<br />
|
||||
isServiceableInshop: {{ isServiceableInshop }}<br />
|
||||
requiresInshopRecalibration: {{ requiresInshopRecalibration }}<br />
|
||||
selectedAppointmentType: {{ selectedAppointmentType }}<br />
|
||||
</div>
|
||||
<div class="appointment-type">
|
||||
<div class="appointment-type-question-text d-flex">
|
||||
<span
|
||||
v-if="recalibrationRequired"
|
||||
class="recal-text">{{ scheduleRecalText }}</span>
|
||||
<span
|
||||
v-if="!requiresInshopRecalibration">{{ appointmentQuestionText }}</span>
|
||||
</div>
|
||||
<div class="iss-heritage-container-width">
|
||||
<div class="service-location-container iss-heritage-content-container-width">
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
class="subheader" />
|
||||
<alert
|
||||
v-if="displayRecalibrationWarning"
|
||||
ref="alertRecalNoMobile"
|
||||
class="my-5"
|
||||
cmsWidgetName="AlertRecalNoMobileWidget"
|
||||
alertClass="alert-warning"
|
||||
@text-link-clicked="openModalAction" />
|
||||
<alert
|
||||
v-if="displayBigTruckNoShops"
|
||||
ref="alertBigTruckNoShops"
|
||||
class="my-5"
|
||||
cmsWidgetName="AlertBigTruckNoShopsWidget"
|
||||
alertClass="alert-warning" />
|
||||
<div class="appointment-type">
|
||||
<div class="appointment-type-question-text d-flex">
|
||||
<span class="w-100 recal-text" v-if="recalibrationRequired">{{ scheduleRecalText }}</span>
|
||||
<span class="w-100" v-if="!requiresInshopRecalibration">{{ appointmentQuestionText }}</span>
|
||||
</div>
|
||||
<alert
|
||||
v-if="displayServiceableInshopOnly"
|
||||
ref="alertInshopOnly"
|
||||
cmsWidgetName="AlertInshopOnlyWidget"
|
||||
:manualCopy="inShopOnlyCopy"
|
||||
:isCollapsible="true"
|
||||
alertClass="alert-warning" />
|
||||
<alert
|
||||
v-if="displayServiceableMobileOnly"
|
||||
ref="alertMobileOnly"
|
||||
cmsWidgetName="AlertMobileOnlyWidget"
|
||||
:manualCopy="mobileOnlyCopy"
|
||||
:isCollapsible="true"
|
||||
alertClass="alert-warning" />
|
||||
<appointmentTypeQuestion
|
||||
v-if="!requiresInshopRecalibration && isServiceableMobile"
|
||||
ref="appointmentTypeQuestion"
|
||||
v-model="selectedAppointmentType"
|
||||
groupName="appointmentTypeQuestion"
|
||||
cmsWidgetName="AppointmentTypeQuestionWidget"
|
||||
validationRules="option-required" />
|
||||
</div>
|
||||
<div
|
||||
v-if="isInshop">
|
||||
<alert
|
||||
v-if="displayLowAvailabilityInshop"
|
||||
ref="alertLowAvailabilityInshop"
|
||||
cmsWidgetName="AlertLowAvailabilityInshopWidget"
|
||||
:isCollapsible="true"
|
||||
alertClass="alert-warning" />
|
||||
<shopAddress
|
||||
ref="shopAddress"
|
||||
v-model="selectedProvider"
|
||||
:serviceZipcode="zipCode"
|
||||
:selectedAppointmentType="selectedAppointmentType"
|
||||
modalWidgetName="ChangeLocationModalWidget"
|
||||
cmsWidgetName="ShopAddressWidget"
|
||||
@zip-updated="handleInShopZipUpdated" />
|
||||
<!-- INTEGRATION TODO: Put this right under the calendar -->
|
||||
<alert
|
||||
v-if="selectedProvider === null"
|
||||
ref="alertNoAvailableShops"
|
||||
cmsWidgetName="AlertNoAvailableShopsWidget"
|
||||
:isCollapsible="true"
|
||||
alertClass="alert-danger" />
|
||||
</div>
|
||||
<div
|
||||
v-if="isMobile">
|
||||
<div class="expandable-link-container">
|
||||
<a
|
||||
v-if="displayMilitaryZipAlert && !militaryBaseWarningExpanded"
|
||||
href="#"
|
||||
class="expandable-link"
|
||||
@click.prevent="militaryBaseWarningExpanded = true">
|
||||
{{ militaryBaseWarningLinkText }}
|
||||
</a>
|
||||
<div
|
||||
v-if="displayMilitaryZipAlert && militaryBaseWarningExpanded"
|
||||
class="expandable-link-text">
|
||||
{{ militaryBaseWarningText }}
|
||||
</div>
|
||||
</div>
|
||||
<serviceZipQuestion
|
||||
ref="mobileServiceZipCodeQuestion"
|
||||
v-model="mobileZipCode"
|
||||
customInputId="mobileServiceZipCode"
|
||||
class="mobile-service-zip-question"
|
||||
:placeholderText="mobileZipPlaceholder"
|
||||
:serviceZipFormatErrorMessage="errorMessages.MOBILE_SERVICE_ZIP_FORMAT"
|
||||
:hasError="mobileZipError !== ''"
|
||||
cmsWidgetName="MobileZipWidget" />
|
||||
<div
|
||||
v-if="mobileZipError"
|
||||
ref="errorMessageDiv"
|
||||
class="row my-1 form-test-error">
|
||||
<span
|
||||
class="d-inline-flex mt-0"
|
||||
role="alert">{{ mobileZipError }}</span>
|
||||
</div>
|
||||
<textBlock
|
||||
v-if="displayMobileFeeDisclaimer"
|
||||
cmsWidgetName="MobileFeeDisclaimerWidget"
|
||||
typeStyle="disclaimer" />
|
||||
</div>
|
||||
<contentGroupModal
|
||||
:ref="RECAL_MODAL_REF_NAME"
|
||||
cssModalHeadlineClass="text-center"
|
||||
cmsWidgetName="RecalModal" />
|
||||
<siteFooter
|
||||
:ref="SITE_FOOTER_REF_NAME"
|
||||
class="mt-5"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="
|
||||
!meta.valid || displayNoShopsAlert || displayBigTruckNoShops
|
||||
"
|
||||
@backClicked="navigateBack(this, navigateBackScenario)"
|
||||
@forwardClicked="forwardButtonAction" />
|
||||
<alert
|
||||
v-if="displayServiceableInshopOnly"
|
||||
ref="alertInshopOnly"
|
||||
cmsWidgetName="AlertInshopOnlyWidget"
|
||||
:manualCopy="inShopOnlyCopy"
|
||||
:isCollapsible="true"
|
||||
alertClass="alert-warning" />
|
||||
<alert
|
||||
v-if="displayServiceableMobileOnly"
|
||||
ref="alertMobileOnly"
|
||||
cmsWidgetName="AlertMobileOnlyWidget"
|
||||
:manualCopy="mobileOnlyCopy"
|
||||
:isCollapsible="true"
|
||||
alertClass="alert-warning" />
|
||||
<appointmentTypeQuestion
|
||||
v-if="!requiresInshopRecalibration && isServiceableMobile"
|
||||
ref="appointmentTypeQuestion"
|
||||
v-model="selectedAppointmentType"
|
||||
groupName="appointmentTypeQuestion"
|
||||
cmsWidgetName="AppointmentTypeQuestionWidget"
|
||||
validationRules="option-required" />
|
||||
</div>
|
||||
<div
|
||||
v-if="isInshop">
|
||||
<alert
|
||||
v-if="displayLowAvailabilityInshop"
|
||||
ref="alertLowAvailabilityInshop"
|
||||
cmsWidgetName="AlertLowAvailabilityInshopWidget"
|
||||
:isCollapsible="true"
|
||||
alertClass="alert-warning" />
|
||||
<shopAddress
|
||||
ref="shopAddress"
|
||||
v-model="selectedProvider"
|
||||
:serviceZipcode="zipCode"
|
||||
:selectedAppointmentType="selectedAppointmentType"
|
||||
modalWidgetName="ChangeLocationModalWidget"
|
||||
cmsWidgetName="ShopAddressWidget"
|
||||
@zip-updated="handleInShopZipUpdated" />
|
||||
<!-- INTEGRATION TODO: Put this right under the calendar -->
|
||||
<alert
|
||||
v-if="selectedProvider === null"
|
||||
ref="alertNoAvailableShops"
|
||||
cmsWidgetName="AlertNoAvailableShopsWidget"
|
||||
:isCollapsible="true"
|
||||
alertClass="alert-danger" />
|
||||
</div>
|
||||
<div
|
||||
v-if="isMobile">
|
||||
<div class="expandable-link-container">
|
||||
<a
|
||||
v-if="displayMilitaryZipAlert && !militaryBaseWarningExpanded"
|
||||
href="#"
|
||||
class="expandable-link"
|
||||
@click.prevent="militaryBaseWarningExpanded = true">
|
||||
{{ militaryBaseWarningLinkText }}
|
||||
</a>
|
||||
<div
|
||||
v-if="displayMilitaryZipAlert && militaryBaseWarningExpanded"
|
||||
class="expandable-link-text">
|
||||
{{ militaryBaseWarningText }}
|
||||
</div>
|
||||
</div>
|
||||
<serviceZipQuestion
|
||||
ref="mobileServiceZipCodeQuestion"
|
||||
v-model="mobileZipCode"
|
||||
customInputId="mobileServiceZipCode"
|
||||
class="mobile-service-zip-question"
|
||||
:placeholderText="mobileZipPlaceholder"
|
||||
:serviceZipFormatErrorMessage="errorMessages.MOBILE_SERVICE_ZIP_FORMAT"
|
||||
:hasError="mobileZipError !== ''"
|
||||
cmsWidgetName="MobileZipWidget" />
|
||||
<div
|
||||
v-if="mobileZipError"
|
||||
ref="errorMessageDiv"
|
||||
class="row my-1 form-test-error">
|
||||
<span
|
||||
class="d-inline-flex mt-0"
|
||||
role="alert">{{ mobileZipError }}</span>
|
||||
</div>
|
||||
<textBlock
|
||||
v-if="displayMobileFeeDisclaimer"
|
||||
cmsWidgetName="MobileFeeDisclaimerWidget"
|
||||
typeStyle="disclaimer" />
|
||||
</div>
|
||||
</Form>
|
||||
<contentGroupModal
|
||||
:ref="RECAL_MODAL_REF_NAME"
|
||||
cssModalHeadlineClass="text-center"
|
||||
cmsWidgetName="RecalModal" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// Import Supporting Files
|
||||
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import errorMessages from '@/constants/error-messages';
|
||||
import { useMainStore } from '@/store';
|
||||
import {
|
||||
getAvailabilityRating,
|
||||
getPricedMobileFeePart,
|
||||
getServiceabilityDetails,
|
||||
getZipCodeData,
|
||||
getMobileZipCodeData
|
||||
} from '@/helpers/service-location-helper';
|
||||
import { toTitleCase } from '@/helpers/text-helper.js';
|
||||
import { getAvailabilityRating } from '@/helpers/service-location-helper';
|
||||
|
||||
// Import Component
|
||||
import alert from '@/ux-components/alert/alert.vue';
|
||||
import textBlock from '@/digital-components/text-block/text-block.vue';
|
||||
import appointmentTypeQuestion from '@/layouts/service-location/appointment-type-question/appointment-type-question.vue';
|
||||
import appointmentTypeQuestion from '@/layouts/schedule-page/service-location/appointment-type-question/appointment-type-question.vue';
|
||||
import baseFormMixin from '@/mixins/base-form-mixin';
|
||||
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
|
||||
import { Form, defineRule } from 'vee-validate';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import shopAddress from '@/layouts/service-location/shop-address/shop-address.vue';
|
||||
import serviceZipQuestion from '@/layouts/service-location/service-zip-question/service-zip-question.vue';
|
||||
import shopAddress from '@/layouts/schedule-page/service-location/shop-address/shop-address.vue';
|
||||
import serviceZipQuestion from '@/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue';
|
||||
import widgetFields from '@/constants/cms-widget-fields';
|
||||
|
||||
const RECAL_MODAL_REF_NAME = 'RecalModal';
|
||||
|
|
@ -173,66 +149,11 @@ export default {
|
|||
textBlock,
|
||||
appointmentTypeQuestion,
|
||||
contentGroupModal,
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form,
|
||||
shopAddress,
|
||||
serviceZipQuestion
|
||||
},
|
||||
mixins: [baseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
const serviceZipCode = useMainStore().order.serviceLocation.zipCode || useMainStore().order.customer.address.zipCode;
|
||||
const zipCodeData = getZipCodeData(serviceZipCode);
|
||||
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
|
||||
const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
|
||||
const getGlassFeesPromise = useMainStore().getGlassFees();
|
||||
const providersPromise = useMainStore().getProviders(serviceZipCode);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'mobileFeePart',
|
||||
promise: mobileFeePartPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'glassFees',
|
||||
promise: getGlassFeesPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'serviceabilityDetails',
|
||||
promise: serviceabilityDetailsPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'zipCodeData',
|
||||
promise: zipCodeData
|
||||
},
|
||||
{
|
||||
resultKey: 'providers',
|
||||
promise: providersPromise
|
||||
}
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
useMainStore().updateIsSafeliteProvider(true);
|
||||
next(async (vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
await vm.setData(
|
||||
resultMap.zipCodeData,
|
||||
resultMap.serviceabilityDetails,
|
||||
resultMap.mobileFeePart,
|
||||
resultMap.glassFees,
|
||||
resultMap.providers
|
||||
);
|
||||
});
|
||||
},
|
||||
emits: ['service-location-updated', 'appointment-type-changed', 'mobile-zip-updated', 'provider-changed'],
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
return { mainStore };
|
||||
|
|
@ -284,10 +205,7 @@ export default {
|
|||
},
|
||||
isServiceableInshop() {
|
||||
if (this.isRecalibrationServiceableInshop !== null) {
|
||||
return (
|
||||
this.isGlassServiceableInshop
|
||||
&& this.isRecalibrationServiceableInshop
|
||||
);
|
||||
return (this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop);
|
||||
}
|
||||
|
||||
return this.isGlassServiceableInshop;
|
||||
|
|
@ -299,7 +217,7 @@ export default {
|
|||
);
|
||||
},
|
||||
isMobile() {
|
||||
return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
|
||||
return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE;
|
||||
},
|
||||
requiresInshopRecalibration() {
|
||||
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
|
||||
|
|
@ -355,11 +273,10 @@ export default {
|
|||
return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
|
||||
},
|
||||
scheduleRecalText() {
|
||||
if(this.requiresInshopRecalibration) {
|
||||
if (this.requiresInshopRecalibration) {
|
||||
return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
|
||||
} else {
|
||||
return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
}
|
||||
return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
},
|
||||
inShopOnlyCopy() {
|
||||
let content = this.getCmsContent('AlertInshopOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
|
||||
|
|
@ -375,11 +292,45 @@ export default {
|
|||
return this.mainStore.hasRecalibrationPart;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mobileZipCode(newZip) {
|
||||
console.log('Mobile Zip Changed:', newZip);
|
||||
if (newZip !== '') {
|
||||
this.updateMobileZip();
|
||||
this.$emit('mobile-zip-updated', newZip);
|
||||
}
|
||||
},
|
||||
selectedAppointmentType() {
|
||||
console.log('Appointment Type Changed:', this.selectedAppointmentType);
|
||||
this.mobileZipCode = '';
|
||||
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.$emit('appointment-type-changed', this.selectedAppointmentType);
|
||||
},
|
||||
selectedProvider(newProvider, oldProvider) {
|
||||
if (newProvider !== oldProvider) {
|
||||
console.log('Selected Provider Changed:', newProvider);
|
||||
this.$emit('provider-changed', newProvider);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return (
|
||||
useMainStore().order.serviceLocation.zipCode !== null
|
||||
);
|
||||
initializeComponent(initialData) {
|
||||
this.setData(initialData);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
let provider = this.selectedProvider;
|
||||
|
|
@ -411,11 +362,6 @@ export default {
|
|||
appointmentType: this.selectedAppointmentType,
|
||||
provider
|
||||
});
|
||||
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route
|
||||
);
|
||||
},
|
||||
openModalAction(modalName) {
|
||||
this.$refs[modalName].openModal();
|
||||
|
|
@ -451,50 +397,45 @@ export default {
|
|||
setCtuForMobile(val) {
|
||||
this.zipCodeCtu = val;
|
||||
},
|
||||
async setData(
|
||||
zipCodeData,
|
||||
serviceabilityDetails,
|
||||
mobileFeePart,
|
||||
glassFees,
|
||||
providers
|
||||
) {
|
||||
if (zipCodeData) {
|
||||
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
|
||||
this.zipCodeCtu = zipCodeData.zipCodeCtu;
|
||||
this.city = zipCodeData.city;
|
||||
setData(initialData) {
|
||||
if (initialData.zipCodeData) {
|
||||
this.zipContainsMilitaryBase = initialData.zipCodeData.containsMilitaryBase;
|
||||
this.zipCodeCtu = initialData.zipCodeData.zipCodeCtu;
|
||||
this.city = initialData.zipCodeData.city;
|
||||
}
|
||||
|
||||
if (serviceabilityDetails) {
|
||||
this.setServiceabilityDetails(serviceabilityDetails);
|
||||
if (initialData.serviceabilityDetails) {
|
||||
this.setServiceabilityDetails(initialData.serviceabilityDetails);
|
||||
}
|
||||
|
||||
if (mobileFeePart) {
|
||||
this.mobileFeePart = mobileFeePart;
|
||||
if (initialData.mobileFeePart) {
|
||||
this.mobileFeePart = initialData.mobileFeePart;
|
||||
}
|
||||
|
||||
if (providers) {
|
||||
this.setMobileProviderNumber(providers.mobileProviderNumber);
|
||||
if (initialData.providers) {
|
||||
this.setMobileProviderNumber(initialData.providers.mobileProviderNumber);
|
||||
let foundMatch = false;
|
||||
if(this.selectedProvider && this.selectedProvider.providerNumber) {
|
||||
const matchedProvider = providers.shopProviders.find(
|
||||
(provider) => provider.providerNumber === this.selectedProvider.providerNumber
|
||||
);
|
||||
if (this.selectedProvider && this.selectedProvider.providerNumber) {
|
||||
// eslint-disable-next-line max-len
|
||||
const matchedProvider = initialData.providers.shopProviders.find((provider) => provider.providerNumber === this.selectedProvider.providerNumber);
|
||||
if (matchedProvider) {
|
||||
foundMatch = true;
|
||||
this.selectedProvider = matchedProvider;
|
||||
}
|
||||
}
|
||||
if(providers.shopProviders.length > 0 && !foundMatch) {
|
||||
this.selectedProvider = providers.shopProviders[0];
|
||||
}
|
||||
else if(providers.shopProviders.length === 0) {
|
||||
if (initialData.providers.shopProviders.length > 0 && !foundMatch) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
this.selectedProvider = initialData.providers.shopProviders[0];
|
||||
} else if (initialData.providers.shopProviders.length === 0) {
|
||||
this.selectedProvider = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (glassFees) {
|
||||
const pricedGlassFees = await useMainStore().getCombinedQuote(glassFees);
|
||||
this.setGlassFeeItems(pricedGlassFees);
|
||||
if (initialData.glassFees) {
|
||||
useMainStore().getCombinedQuote(initialData.glassFees)
|
||||
.then((combinedQuote) => {
|
||||
this.setGlassFeeItems(combinedQuote);
|
||||
});
|
||||
}
|
||||
},
|
||||
setContainsMilitaryBase(val) {
|
||||
|
|
@ -512,14 +453,10 @@ export default {
|
|||
this.mobileProviderNumber = providerNumber;
|
||||
},
|
||||
setServiceabilityDetails(serviceabilityDetails) {
|
||||
this.isGlassServiceableInshop =
|
||||
serviceabilityDetails.isGlassServiceableInshop;
|
||||
this.isRecalibrationServiceableInshop =
|
||||
serviceabilityDetails.isRecalibrationServiceableInshop;
|
||||
this.isGlassServiceableMobile =
|
||||
serviceabilityDetails.isGlassServiceableMobile;
|
||||
this.isRecalibrationServiceableMobile =
|
||||
serviceabilityDetails.isRecalibrationServiceableMobile;
|
||||
this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
|
||||
this.isRecalibrationServiceableInshop = serviceabilityDetails.isRecalibrationServiceableInshop;
|
||||
this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
|
||||
this.isRecalibrationServiceableMobile = serviceabilityDetails.isRecalibrationServiceableMobile;
|
||||
if (!this.isServiceableMobile) {
|
||||
this.selectedAppointmentType = AppointmentTypeStrings.IN_SHOP;
|
||||
}
|
||||
|
|
@ -552,10 +489,10 @@ export default {
|
|||
const providers = result.data;
|
||||
if (providers) {
|
||||
this.setMobileProviderNumber(providers.mobileProviderNumber);
|
||||
if(providers.shopProviders.length > 0) {
|
||||
if (providers.shopProviders.length > 0) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
this.selectedProvider = providers.shopProviders[0];
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.selectedProvider = null;
|
||||
}
|
||||
}
|
||||
|
|
@ -577,66 +514,42 @@ export default {
|
|||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mobileZipCode(newZip) {
|
||||
if(newZip !== '') {
|
||||
this.updateMobileZip();
|
||||
}
|
||||
},
|
||||
selectedAppointmentType() {
|
||||
this.mobileZipCode = '';
|
||||
if(this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && this.selectedProvider) {
|
||||
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;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$page-side-padding: 1.5rem;
|
||||
.iss-heritage-container-width {
|
||||
.service-location-container {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: .9375rem;
|
||||
padding-right: .9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.service-location-container {
|
||||
.subheader {
|
||||
margin: 1.25rem 0;
|
||||
.service-location {
|
||||
> div {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-test-error {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
:deep(.alert-header) {
|
||||
button {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
.appointment-type-question-text {
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.625rem;
|
||||
flex-direction: column;
|
||||
.recal-text {
|
||||
margin-bottom: 1.25rem;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
.mobile-service-zip-question {
|
||||
:deep(.input-wrapper.has-text-button) {
|
||||
button {
|
||||
background-color: #1574a1;
|
||||
}
|
||||
}
|
||||
:deep(.form-test-error span) {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import crypto from 'crypto';
|
||||
import serviceZipModalQuestion from '@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue';
|
||||
import serviceZipModalQuestion from '@/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.vue';
|
||||
|
||||
global.crypto = crypto;
|
||||
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
<script>
|
||||
import textLink from '@/ux-components/text-link/text-link.vue';
|
||||
import serviceZipQuestion from '@/layouts/service-location/service-zip-question/service-zip-question.vue';
|
||||
import serviceZipQuestion from '@/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue';
|
||||
import modal from '@/digital-components/modal/modal.vue';
|
||||
import alert from '@/ux-components/alert/alert.vue';
|
||||
|
||||
|
|
@ -177,6 +177,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/ux-variables-svg-strings.scss";
|
||||
a#serviceZipLinkPromptId {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
|
@ -186,7 +187,7 @@ a#serviceZipLinkPromptId {
|
|||
display: inline-block;
|
||||
width: 13px;
|
||||
height: 16px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.49635 1.00142e-07C5.64734 -0.000153295 4.80722 0.175918 4.0274 0.517444C3.24757 0.858969 2.54443 1.35877 1.96099 1.98626C0.765713 3.27588 0.0999756 4.98141 0.0999756 6.75394C0.0999756 8.52646 0.765713 10.232 1.96099 11.5216L5.98324 15.777C6.04954 15.8475 6.12918 15.9036 6.21736 15.9419C6.30555 15.9802 6.40045 16 6.49635 16C6.59225 16 6.68716 15.9802 6.77534 15.9419C6.86353 15.9036 6.94317 15.8475 7.00946 15.777L11.0317 11.52C12.2391 10.2383 12.909 8.52914 12.8999 6.75394C12.9094 4.97818 12.2394 3.26832 11.0317 1.98626C10.4481 1.35899 9.74493 0.859347 8.96514 0.517839C8.18535 0.176331 7.34532 0.000130509 6.49635 1.00142e-07V1.00142e-07ZM6.49635 9.13131C6.02507 9.13131 5.56437 8.98913 5.17251 8.72275C4.78065 8.45637 4.47524 8.07776 4.29488 7.63479C4.11453 7.19181 4.06734 6.70438 4.15928 6.23412C4.25123 5.76387 4.47817 5.33191 4.81142 4.99287C5.14467 4.65384 5.56925 4.42295 6.03148 4.32941C6.49371 4.23587 6.97282 4.28388 7.40823 4.46736C7.84364 4.65085 8.21579 4.96157 8.47762 5.36023C8.73945 5.7589 8.87921 6.2276 8.87921 6.70707C8.87921 7.34974 8.62837 7.96611 8.18185 8.4207C7.73532 8.87528 7.12964 9.13088 6.49794 9.13131H6.49635Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
||||
background-image: url($svg-update-zip-text-link);
|
||||
background-size: contain;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5em;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { shallowMount } from '@vue/test-utils';
|
||||
import serviceZipQuestion from '@/layouts/service-location/service-zip-question/service-zip-question.vue';
|
||||
import serviceZipQuestion from '@/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue';
|
||||
|
||||
describe('service-zip-question.vue', () => {
|
||||
it('Should get the modelValue', async () => {
|
||||
|
|
@ -8,8 +8,8 @@
|
|||
mask="#####"
|
||||
isRequired
|
||||
:hasError="hasError"
|
||||
@clickEvent="updateModelValue"
|
||||
:validationRules="`zip-required|${cmsWidgetName}-zip-format`" />
|
||||
:validationRules="`zip-required|${cmsWidgetName}-zip-format`"
|
||||
@clickEvent="updateModelValue" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -41,16 +41,11 @@ export default {
|
|||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
return {
|
||||
internalZipcode: this.modelValue
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
methods: {
|
||||
updateModelValue() {
|
||||
this.$emit('update:modelValue', this.internalZipcode);
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
modelValue(newValue) {
|
||||
|
|
@ -59,6 +54,12 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
defineRule(`${this.cmsWidgetName}-zip-format`, regex(/^\d{5}$/, this.serviceZipFormatErrorMessage));
|
||||
},
|
||||
methods: {
|
||||
updateModelValue() {
|
||||
console.log('Service Zip Updated:', this.internalZipcode);
|
||||
this.$emit('update:modelValue', this.internalZipcode);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -5,15 +5,19 @@
|
|||
<div
|
||||
class="shop-address"
|
||||
aria-live="polite">
|
||||
<div class="address-header">{{ questionText }}</div>
|
||||
<div
|
||||
<div class="address-header">
|
||||
{{ questionText }}
|
||||
</div>
|
||||
<div
|
||||
v-if="modelValue"
|
||||
class="current-address">
|
||||
<div class="address-line">
|
||||
<span class="shop-name">{{ displayedShopName }}</span>
|
||||
<span class="shop-distance">{{ modelValue.distanceInMiles?.toFixed(2) }} mi</span>
|
||||
</div>
|
||||
<div class="address-line">{{ getProviderAddress(modelValue) }}</div>
|
||||
<div class="address-line">
|
||||
{{ getProviderAddress(modelValue) }}
|
||||
</div>
|
||||
<div class="address-line">
|
||||
{{ getProviderCityZipState(modelValue) }}
|
||||
</div>
|
||||
|
|
@ -29,9 +33,9 @@
|
|||
:variant="'primary'"
|
||||
@clickEvent="openModal" />
|
||||
<alert
|
||||
class="alert-shop-distance"
|
||||
v-if="modelValue?.distanceInMiles > 30"
|
||||
ref="alertShopDistance"
|
||||
class="alert-shop-distance"
|
||||
cmsWidgetName="AlertShopDistanceWidget"
|
||||
alertClass="alert-warning" />
|
||||
<modal
|
||||
|
|
@ -48,9 +52,9 @@
|
|||
:markers="providerAddresses"
|
||||
:zipCode="internalZipcode" />
|
||||
<dropdownQuestion
|
||||
inputId="searchRadiusDropdown"
|
||||
ref="searchRadiusQuestion"
|
||||
v-model="searchRadiusInMiles"
|
||||
inputId="searchRadiusDropdown"
|
||||
:cmsWidgetName="searchRadiusQuestionWidgetName"
|
||||
:variant="dropdownVariants.compact"
|
||||
:options="searchRadiusOptions" />
|
||||
|
|
@ -93,7 +97,7 @@
|
|||
import alert from '@/ux-components/alert/alert.vue';
|
||||
import buttonMain from '@/ux-components/button-main/button-main.vue';
|
||||
import modal from '@/digital-components/modal/modal.vue';
|
||||
import serviceZipQuestion from '@/layouts/service-location/service-zip-question/service-zip-question.vue';
|
||||
import serviceZipQuestion from '@/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue';
|
||||
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
||||
import shopListButton from '@/iss-components/shop-list-button/shop-list-button.vue';
|
||||
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
||||
|
|
@ -136,8 +140,9 @@ export default {
|
|||
cmsWidgetName: String,
|
||||
validationRules: String,
|
||||
modalWidgetName: String,
|
||||
selectedAppointmentType: String,
|
||||
selectedAppointmentType: String
|
||||
},
|
||||
emits: ['update:modelValue', 'zip-updated'],
|
||||
data() {
|
||||
return {
|
||||
toTitleCase,
|
||||
|
|
@ -147,7 +152,7 @@ export default {
|
|||
searchRadiusQuestionWidgetName: 'SearchRadiusQuestionWidget',
|
||||
textboxQuestionWidgetName: 'ChangeLocationZipQuestionWidget',
|
||||
shopListButton: markRaw(shopListButton),
|
||||
searchRadiusInMiles: "25",
|
||||
searchRadiusInMiles: '25',
|
||||
nearbyShops: [],
|
||||
modalPositions,
|
||||
dropdownVariants,
|
||||
|
|
@ -157,7 +162,6 @@ export default {
|
|||
SERVICE_ZIP_QUESTION_REF_NAME
|
||||
};
|
||||
},
|
||||
emits: ['update:modelValue', 'zip-updated'],
|
||||
computed: {
|
||||
questionText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
|
||||
|
|
@ -166,12 +170,13 @@ export default {
|
|||
return this.getCmsContent('ShowMoreShopsLinkWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
|
||||
},
|
||||
displayedShopName() {
|
||||
if(this.modelValue.isSafeliteShop) {
|
||||
if (this.modelValue.isSafeliteShop) {
|
||||
return this.getCmsContent('SafeliteShopNameWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
|
||||
}
|
||||
return toTitleCase(this.modelValue.companyName);
|
||||
},
|
||||
modalHeaderText() {
|
||||
// eslint-disable-next-line max-len
|
||||
return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT).replaceAll('{custom:serviceZipcode}', this.internalZipcode);
|
||||
},
|
||||
modalFooterText() {
|
||||
|
|
@ -193,7 +198,7 @@ export default {
|
|||
availabilityRatingCallback: getAvailabilityRating,
|
||||
startDate: formattedStartDate,
|
||||
endDate: formattedEndDate,
|
||||
shopAppointmentType: "InshopOrDropoff"
|
||||
shopAppointmentType: 'InshopOrDropoff'
|
||||
};
|
||||
},
|
||||
serviceZipPrompt() {
|
||||
|
|
@ -218,8 +223,8 @@ export default {
|
|||
},
|
||||
searchRadiusOptions() {
|
||||
const optionsObj = {};
|
||||
if(this.searchRadiusArray) {
|
||||
this.searchRadiusArray.forEach(option => {
|
||||
if (this.searchRadiusArray) {
|
||||
this.searchRadiusArray.forEach((option) => {
|
||||
optionsObj[option.Name] = option.Text;
|
||||
});
|
||||
}
|
||||
|
|
@ -231,11 +236,11 @@ export default {
|
|||
fullAddress: this.getFullProviderAddress(provider),
|
||||
addressLines: [this.getProviderAddress(provider), this.getProviderCityZipState(provider)]
|
||||
})) ?? [];
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
async internalZipcode() {
|
||||
if(this.openingModal) {
|
||||
if (this.openingModal) {
|
||||
return;
|
||||
}
|
||||
const shopsUpdated = await this.updateShops();
|
||||
|
|
@ -245,27 +250,28 @@ export default {
|
|||
}
|
||||
},
|
||||
async searchRadiusInMiles() {
|
||||
if(this.openingModal) {
|
||||
if (this.openingModal) {
|
||||
return;
|
||||
}
|
||||
await this.updateShops();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// eslint-disable-next-line consistent-return
|
||||
async updateShops(autoExpand = false) {
|
||||
this.errorMessage = '';
|
||||
let result = await this.getNearbyShops(this.searchRadiusInMiles);
|
||||
let currentSearchIndex = this.searchRadiusArray.findIndex(option => option.Name === this.searchRadiusInMiles);
|
||||
let currentSearchIndex = this.searchRadiusArray.findIndex((option) => option.Name === this.searchRadiusInMiles);
|
||||
while (autoExpand && result.length === 0 && currentSearchIndex < this.searchRadiusArray.length - 1) {
|
||||
const newSearchRadius = this.searchRadiusArray[currentSearchIndex + 1].Name;
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
result = await this.getNearbyShops(newSearchRadius);
|
||||
currentSearchIndex++;
|
||||
currentSearchIndex += 1;
|
||||
}
|
||||
if (result.length === 0) {
|
||||
this.errorMessage = errorMessages.ZIP_CODE_NOT_SERVICED_FOR_VEHICLE;
|
||||
}
|
||||
else {
|
||||
if (!result.find(shop => shop.providerNumber === this.internalProviderNumber)) {
|
||||
} else {
|
||||
if (!result.find((shop) => shop.providerNumber === this.internalProviderNumber)) {
|
||||
this.internalProviderNumber = '';
|
||||
await this.$nextTick();
|
||||
}
|
||||
|
|
@ -283,7 +289,7 @@ export default {
|
|||
onModalOpened() {
|
||||
this.openingModal = true;
|
||||
this.internalZipcode = this.serviceZipcode;
|
||||
this.searchRadiusInMiles = "25";
|
||||
this.searchRadiusInMiles = '25';
|
||||
this.nearbyShops = [];
|
||||
this.updateShops(true).then(() => {
|
||||
this.internalProviderNumber = this.nearbyShops[0]?.providerNumber;
|
||||
|
|
@ -295,7 +301,7 @@ export default {
|
|||
this.forceServiceZipRerender();
|
||||
},
|
||||
async updateSelectedProvider() {
|
||||
const selectedShop = this.nearbyShops.find(shop => shop.providerNumber === this.internalProviderNumber);
|
||||
const selectedShop = this.nearbyShops.find((shop) => shop.providerNumber === this.internalProviderNumber);
|
||||
if (selectedShop) {
|
||||
this.$emit('update:modelValue', selectedShop);
|
||||
this.$emit('zip-updated', this.internalZipcode);
|
||||
|
|
@ -303,7 +309,7 @@ export default {
|
|||
}
|
||||
},
|
||||
async getNearbyShops(radiusInMiles) {
|
||||
const result = await useMainStore().getProviders(this.internalZipcode, radiusInMiles);
|
||||
const result = await useMainStore().getProviders(this.internalZipcode, radiusInMiles);
|
||||
return result.data.shopProviders;
|
||||
},
|
||||
getFullProviderAddress(provider) {
|
||||
|
|
@ -341,7 +347,7 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.renderServiceZip = true;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -354,7 +354,7 @@ describe('vehicle-questions-mixin', () => {
|
|||
const testCases = [
|
||||
[issPageValues.PART_QUESTIONS, issPageValues.VEHICLE_PARTS, false],
|
||||
[issPageValues.VEHICLE_PARTS, issPageValues.VEHICLE_PARTS, false],
|
||||
[issPageValues.VEHICLE_PARTS, issPageValues.SERVICE_LOCATION, true],
|
||||
[issPageValues.VEHICLE_PARTS, issPageValues.SCHEDULE_PAGE, true],
|
||||
[issPageValues.VEHICLE_PARTS, issPageValues.PART_QUESTIONS, true],
|
||||
[issPageValues.PART_QUESTIONS, issPageValues.CAPABILITY_QUESTIONS, false],
|
||||
[issPageValues.MOLDING_QUESTIONS, issPageValues.CAPABILITY_QUESTIONS, false]
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ const issPageValues = Object.freeze({
|
|||
POLICY_HOLDER_DETAILS: 'policy-holder-details',
|
||||
PROVIDER_PREFERENCE: 'provider-preference',
|
||||
REVEAL: 'reveal',
|
||||
SERVICE_LOCATION: 'service-location',
|
||||
TPA_CONFIRMATION: 'tpa-confirmation',
|
||||
SERVICE_PACKAGES: 'service-packages',
|
||||
SCHEDULE_PAGE: 'schedule-page',
|
||||
|
|
|
|||
|
|
@ -534,7 +534,7 @@ const routingTable = () => [
|
|||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
|
||||
destinationIssPageValue: issPageValues.SERVICE_LOCATION
|
||||
destinationIssPageValue: issPageValues.SCHEDULE_PAGE
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
|
||||
|
|
@ -559,7 +559,7 @@ const routingTable = () => [
|
|||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
|
||||
destinationIssPageValue: issPageValues.SERVICE_LOCATION
|
||||
destinationIssPageValue: issPageValues.SCHEDULE_PAGE
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED,
|
||||
|
|
@ -572,7 +572,7 @@ const routingTable = () => [
|
|||
]
|
||||
},
|
||||
{
|
||||
issPageValue: issPageValues.SERVICE_LOCATION,
|
||||
issPageValue: issPageValues.SCHEDULE_PAGE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW,
|
||||
|
|
@ -582,26 +582,9 @@ const routingTable = () => [
|
|||
scenario: navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW,
|
||||
destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationIssPageValue: issPageValues.SCHEDULE_PAGE
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
issPageValue: issPageValues.SCHEDULE_PAGE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationIssPageValue: issPageValues.SERVICE_LOCATION
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationIssPageValue: issPageValues.CONTACT_DETAILS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_CHANGE_LOCATION,
|
||||
destinationIssPageValue: issPageValues.SERVICE_LOCATION
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -750,7 +733,7 @@ const routingTable = () => [
|
|||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP,
|
||||
destinationIssPageValue: issPageValues.SERVICE_LOCATION
|
||||
destinationIssPageValue: issPageValues.SCHEDULE_PAGE
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
|
||||
|
|
|
|||
Loading…
Reference in a new issue