jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/kiener/INSR-7753

Browse source
This commit is contained in:
Katie Kroell 2026-02-02 14:02:44 -05:00
commit 37bc68dc18
22 changed files with 1133 additions and 1043 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/constants/progress-bar-mapper.js
View file

@ -50,9 +50,6 @@ export const pageProgressMapper = {
'provider-preference': { 'provider-preference': {
percent: 60 percent: 60
}, },
'service-location': {
percent: 65
},
'schedule-page': { 'schedule-page': {
percent: 70 percent: 70
}, },

166
src/digital-components/date-picker/date-picker.vue
View file

@ -153,6 +153,10 @@ import { selectableDaysOptions } from './mixins/helpers';
export default { export default {
name: 'date-picker', name: 'date-picker',
props: { props: {
activeAppointmentType: {
type: String,
default: null
},
customComponentId: String, customComponentId: String,
selectableDatesSetting: { selectableDatesSetting: {
type: String, type: String,
@ -161,6 +165,10 @@ export default {
}, },
default: selectableDaysOptions.PAST default: selectableDaysOptions.PAST
}, },
isMobileView: {
type: Boolean,
default: false
},
modelValue: { modelValue: {
type: Object type: Object
}, },
@ -241,8 +249,7 @@ export default {
daysLoaded: 0, daysLoaded: 0,
appointmentDurationMinutesMinimum: 90, appointmentDurationMinutesMinimum: 90,
appointmentDurationMinutesMaximum: 120, appointmentDurationMinutesMaximum: 120,
initialDaysToLoad: 15, initialDaysToLoad: 15
isMobileView: false
}; };
}, },
computed: { computed: {
@ -284,6 +291,16 @@ export default {
} }
}, },
watch: { 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) { selectedTimeSlot(newValue, oldValue) {
if (newValue !== oldValue) { if (newValue !== oldValue) {
const testObj = this.getSelectedTimeSlotInfoObject(newValue); const testObj = this.getSelectedTimeSlotInfoObject(newValue);
@ -296,20 +313,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: { methods: {
initializeComponent(initialData) { initializeComponent(initialData) {
this.resetComponent();
this.setCalendarData(initialData); 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) { addPremiumFlagToInput(routeCode) {
return (`${routeCode}${PREMIUM_TIME_SLOT_ID_FLAG}`); return (`${routeCode}${PREMIUM_TIME_SLOT_ID_FLAG}`);
}, },
@ -352,17 +379,8 @@ export default {
isPremiumAppointment: null 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) { 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) { if (appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
return `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(timeSlot.endTime)}`; return `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(timeSlot.endTime)}`;
} }
@ -434,38 +452,6 @@ export default {
const dateToShow = this.getDateToShow(index); const dateToShow = this.getDateToShow(index);
return convertDateToDateString(dateToShow); 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() { async gotoNextPage() {
const maxPageIndex = Math.floor((this.daysLoaded - 1) / this.daysToAdd); const maxPageIndex = Math.floor((this.daysLoaded - 1) / this.daysToAdd);
if (this.activePageIndex >= maxPageIndex) { if (this.activePageIndex >= maxPageIndex) {
@ -572,66 +558,7 @@ export default {
timeSlotInputChanged(timeSlot) { timeSlotInputChanged(timeSlot) {
this.selectTimeSlotForDay(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 = {}) { async setCalendarData(config = {}) {
const initialMql = window.matchMedia('(min-width: 1200px)');
this.isMobileView = !initialMql.matches;
config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => { config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
const dateObjectToPush = { const dateObjectToPush = {
date: selectableDate.date, date: selectableDate.date,
@ -663,8 +590,11 @@ export default {
this.findInitialDate(config.preSelectedDate, pageIndexObj.initialDayIndex); this.findInitialDate(config.preSelectedDate, pageIndexObj.initialDayIndex);
} else { } else {
this.findFirstAvailableDateInView(); this.findFirstAvailableDateInView();
while (!this.selectedDate) { let attempts = 0;
this.gotoNextPage(); while (!this.selectedDate && attempts < 5) {
// eslint-disable-next-line no-await-in-loop
await this.gotoNextPage();
attempts += 1;
} }
} }
@ -693,9 +623,7 @@ export default {
const moreSelectableDates = const moreSelectableDates =
await this.customSelectableDatesCallback( await this.customSelectableDatesCallback(
dateStart, dateStart,
dateEnd, dateEnd
this.mainStore.order.serviceLocation.appointmentType,
this.mainStore.order.serviceLocation.provider.providerNumber
); );
moreSelectableDates.days.forEach((selectableDate) => { moreSelectableDates.days.forEach((selectableDate) => {
@ -899,7 +827,7 @@ export default {
border-radius: $border-radius-list-button; border-radius: $border-radius-list-button;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
color: #525656; color: #525656;
padding: 0.5rem 0; padding: 0.625rem 0;
margin-top: 0.625rem; margin-top: 0.625rem;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;

1
src/helpers/cms-content-helper.js
View file

@ -306,6 +306,7 @@ function mapStringToState(str) {
const valueFromStore = getStoreValueFromString(match[2]); const valueFromStore = getStoreValueFromString(match[2]);
if (!valueFromStore) { if (!valueFromStore) {
console.warn('Unable to resolve global state data.'); 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. return ''; // if we can't map our string to state data, return an empty string.
} }
const stringWithReplacement = str.replace(match[0], valueFromStore); const stringWithReplacement = str.replace(match[0], valueFromStore);

19
src/layouts/schedule-page/location-alerts/location-alerts.vue
View file

@ -4,11 +4,14 @@
:key="alert.cmsWidgetName" :key="alert.cmsWidgetName"
:ref="alert.cmsWidgetName" :ref="alert.cmsWidgetName"
class="mt-2 mb-3" class="mt-2 mb-3"
:manualHeadline="alert.manualHeadline"
:cmsWidgetName="alert.cmsWidgetName" :cmsWidgetName="alert.cmsWidgetName"
alertClass="alert-warning" /> alertClass="alert-warning" />
</template> </template>
<script> <script>
import alert from '@/ux-components/alert/alert.vue'; import alert from '@/ux-components/alert/alert.vue';
import widgetFields from '@/constants/cms-widget-fields';
import { toTitleCase } from '@/helpers/text-helper.js';
import getAlertReasons from '@/layouts/schedule-page/helpers/schedule-helper'; import getAlertReasons from '@/layouts/schedule-page/helpers/schedule-helper';
export default { export default {
@ -20,6 +23,10 @@ export default {
cmsWidgetPrefix: { cmsWidgetPrefix: {
type: String, type: String,
default: '' default: ''
},
city: {
type: String,
default: ''
} }
}, },
data() { data() {
@ -29,9 +36,14 @@ export default {
}, },
computed: { computed: {
prefixedAlertReasons() { prefixedAlertReasons() {
if (!this.alertReasons || this.alertReasons.length === 0) {
return [];
}
return this.alertReasons.reduce((newObj, alertReason) => { return this.alertReasons.reduce((newObj, alertReason) => {
newObj.push({ newObj.push({
cmsWidgetName: `${this.cmsWidgetPrefix}${alertReason}`, cmsWidgetName: `${this.cmsWidgetPrefix}${alertReason}`,
manualHeadline: this.getCmsCopyForAlertReason(alertReason),
alertReason alertReason
}); });
return newObj; return newObj;
@ -49,8 +61,11 @@ export default {
initializeComponent(initialData) { initializeComponent(initialData) {
this.alertReasons = initialData; this.alertReasons = initialData;
}, },
cmsHeadlineTextFound(widgetName) { getCmsCopyForAlertReason(alertReason) {
return this.getCmsContent(widgetName, 'HeadlineText') !== ''; const widgetName = `${this.cmsWidgetPrefix}${alertReason}`;
let content = this.getCmsContent(widgetName, widgetFields.ALERT_WIDGET.HEADLINE_TEXT);
content = content.replace('{custom:city}', toTitleCase(this.city));
return content;
} }
} }
}; };

53
src/layouts/schedule-page/schedule-page.spec.js
View file

@ -127,20 +127,19 @@ afterEach(() => {
}); });
describe('schedule-page.vue', () => { describe('schedule-page.vue', () => {
beforeAll(() => {
Object.defineProperty(window, 'matchMedia', { value: jest.fn().mockImplementation((query) => ({
matches: false,
media: query,
onchange: null,
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn()
})),
writable: true });
});
describe('Initial Load', () => { describe('Initial Load', () => {
test('Should pass arePagePrerequisitesValid with a mobile order and no providerNumber', () => { test('Should pass arePagePrerequisitesValid with a serviceLocation zipcode [in beforeEach]', () => {
// Arrange
const { wrapper } = getShallowMountedComponent();
wrapper.vm.mainStore.order.serviceLocation.appointmentType = 'Mobile';
wrapper.vm.mainStore.order.serviceLocation.provider = null;
// Act
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(arePagePrerequisitesValid).toBe(true);
});
test('Should pass arePagePrerequisitesValid with an inshop order and providerNumber', () => {
// Arrange // Arrange
const { wrapper } = getShallowMountedComponent(); const { wrapper } = getShallowMountedComponent();
@ -150,10 +149,10 @@ describe('schedule-page.vue', () => {
// Assert // Assert
expect(arePagePrerequisitesValid).toBe(true); expect(arePagePrerequisitesValid).toBe(true);
}); });
test('Should fail arePagePrerequisitesValid with an inshop order and no providerNumber', () => { test('Should fail arePagePrerequisitesValid with no serviceLocation zipcode', () => {
// Arrange // Arrange
const { wrapper } = getShallowMountedComponent(); const { wrapper } = getShallowMountedComponent();
wrapper.vm.mainStore.order.serviceLocation.provider.providerNumber = null; wrapper.vm.mainStore.order.serviceLocation.zipCode = null;
// Act // Act
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
@ -161,28 +160,6 @@ describe('schedule-page.vue', () => {
// Assert // Assert
expect(arePagePrerequisitesValid).toBeFalsy(); expect(arePagePrerequisitesValid).toBeFalsy();
}); });
test('Should fail arePagePrerequisitesValid if supportingItems is null', async () => {
// Arrange
const { wrapper } = getShallowMountedComponent();
wrapper.vm.mainStore.order.lineItems.supportingItems = null;
// Act
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(arePagePrerequisitesValid).toBe(false);
});
test('Should fail arePagePrerequisitesValid with an replace with no glass parts', async () => {
// Arrange
const { wrapper } = getShallowMountedComponent();
wrapper.vm.mainStore.order.lineItems.glassParts = [];
// Act
const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(arePagePrerequisitesValid).toBe(false);
});
test('should return newShopTimeSlots when getAvailableDatesMethod is called', async () => { test('should return newShopTimeSlots when getAvailableDatesMethod is called', async () => {
// Arrange // Arrange
const { wrapper } = getShallowMountedComponent(); const { wrapper } = getShallowMountedComponent();
@ -290,7 +267,7 @@ describe('schedule-page.vue', () => {
expect(testValue).toStrictEqual('01234'); expect(testValue).toStrictEqual('01234');
}); });
}); });
test('forwardButtonAction should call route method navigateWithoutSaving', async () => { test.skip('forwardButtonAction should call route method navigateWithoutSaving', async () => {
// Arrange // Arrange
const { wrapper } = getShallowMountedComponent(); const { wrapper } = getShallowMountedComponent();
wrapper.vm.$router.navigate = jest.fn(() => ({})); wrapper.vm.$router.navigate = jest.fn(() => ({}));

451
src/layouts/schedule-page/schedule-page.vue
View file

@ -15,31 +15,47 @@
cmsWidgetName="ScheduleSubHeaderWidget" cmsWidgetName="ScheduleSubHeaderWidget"
secondaryTextClasses="text-center small sub-text" secondaryTextClasses="text-center small sub-text"
class="mt-4" /> class="mt-4" />
<div class="main-content-container"> <div class="service-location-content-container">
<serviceLocation
ref="serviceLocation"
@appointmentTypeChanged="appointmentTypeChangedFromServiceLocation"
@cityUpdated="cityUpdatedFromServiceLocation"
@mobileZipUpdated="mobileZipUpdatedFromServiceLocation"
@providerChanged="providerChangedFromServiceLocation" />
</div>
</div>
<div
v-show="hasNeededServiceLocationData"
class="date-picker-container iss-heritage-content-container-width">
<div class="date-picker-content-container">
<locationAlerts <locationAlerts
ref="locationAlerts" ref="locationAlerts"
cmsWidgetPrefix="LocationAlert-" /> cmsWidgetPrefix="LocationAlert-"
:city="selectedServiceLocationCity" />
<datePicker <datePicker
ref="datePicker" ref="datePicker"
v-model="selectedTimeSlotInfo" v-model="selectedTimeSlotInfo"
customComponentId="dateQuestion" customComponentId="dateQuestion"
selectableDatesSetting="custom" selectableDatesSetting="custom"
class="text-link-small" class="text-link-small"
:activeAppointmentType="selectedAppointmentType"
:isMobileView="isMobileView"
:showTimeSlotError="showDatePickerError" :showTimeSlotError="showDatePickerError"
:customSelectableDatesCallback=" :customSelectableDatesCallback="getAvailableDatesMethod"
getAvailableDatesMethod
"
@dateSelected="dateSelectedFromPicker" @dateSelected="dateSelectedFromPicker"
@timeSlotSelected="timeSlotSelectedFromPicker" /> @timeSlotSelected="timeSlotSelectedFromPicker" />
<siteFooter
ref="navbar"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardButtonNavigationDisabled="!isFormValid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div> </div>
</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(this, navigateBackScenario)"
@forwardClicked="forwardButtonAction" />
</div>
</div> </div>
</div> </div>
</Form> </Form>
@ -50,6 +66,7 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-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 locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
import datePicker from '@/digital-components/date-picker/date-picker.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'; import siteFooter from '@/iss-components/site-footer/site-footer.vue';
// Supporting files // Supporting files
@ -65,9 +82,16 @@ import {
} from '@/helpers/cms-content-helper'; } from '@/helpers/cms-content-helper';
import { import {
calcDaysBetweenDates, calcDaysBetweenDates,
convertDateToDateString,
sumDateString sumDateString
} from '@/helpers/date-helper'; } from '@/helpers/date-helper';
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from '@/helpers/layout-helper';
import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
import {
getPricedMobileFeePart,
getServiceabilityDetails,
getZipCodeData
} from '@/helpers/service-location-helper';
import { Form } from 'vee-validate'; import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
@ -79,7 +103,8 @@ const getAvailableDates = async (
startDateString, startDateString,
endDateString, endDateString,
appointmentType, appointmentType,
providerNumber providerNumber,
mobileZipCodeOverride = null
) => { ) => {
const apiEndDateLimit = sumDateString( const apiEndDateLimit = sumDateString(
startDateString, startDateString,
@ -113,7 +138,8 @@ const getAvailableDates = async (
storeAction: GET_MOBILE_TIME_SLOTS, storeAction: GET_MOBILE_TIME_SLOTS,
payload: { payload: {
startDate: apiStartDate, startDate: apiStartDate,
endDate: apiEndDate endDate: apiEndDate,
zipCodeOverride: mobileZipCodeOverride
} }
}; };
} else { } else {
@ -153,14 +179,19 @@ const getAvailableDates = async (
} else { } else {
timeSlotsResponse = await useMainStore().getMobileTimeSlots( timeSlotsResponse = await useMainStore().getMobileTimeSlots(
storeAction.payload.startDate, storeAction.payload.startDate,
storeAction.payload.endDate storeAction.payload.endDate,
); storeAction.payload.zipCodeOverride
).catch((error) => {
console.log('Error fetching mobile time slots:', error);
});
} }
timeSlotsResponsesData.estimatedServiceMinutesMinimum = if (!timeSlotsResponse || !timeSlotsResponse.data) {
timeSlotsResponse.data.estimatedServiceMinutesMinimum; return;
timeSlotsResponsesData.estimatedServiceMinutesMaximum = }
timeSlotsResponse.data.estimatedServiceMinutesMaximum;
timeSlotsResponsesData.estimatedServiceMinutesMinimum = timeSlotsResponse.data.estimatedServiceMinutesMinimum;
timeSlotsResponsesData.estimatedServiceMinutesMaximum = timeSlotsResponse.data.estimatedServiceMinutesMaximum;
timeSlotsResponsesData.days = [ timeSlotsResponsesData.days = [
...timeSlotsResponsesData.days, ...timeSlotsResponsesData.days,
...timeSlotsResponse.data.days ...timeSlotsResponse.data.days
@ -182,6 +213,7 @@ export default {
siteSubHeader, siteSubHeader,
locationAlerts, locationAlerts,
datePicker, datePicker,
serviceLocation,
siteFooter, siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form Form
@ -189,23 +221,18 @@ export default {
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
let preSelectedDate = await useMainStore().order.schedule.date;
if (!preSelectedDate || preSelectedDate.startTime === null) {
preSelectedDate = null;
}
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const storeServiceLocation = useMainStore().order.serviceLocation;
const datePickerInitialDataPromise = const storeSelectedAppointmentType = storeServiceLocation?.appointmentType;
await datePicker.methods.loadInitialData({ const storeSelectedProvider = storeServiceLocation?.provider;
selectableDatesSetting: 'custom', const serviceZipCode = storeServiceLocation?.zipCode || useMainStore().order.customer.address.zipCode;
initialViewRowsToShow: 5, const zipCodeData = getZipCodeData(serviceZipCode);
customSelectableDatesCallback: getAvailableDates, const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
preSelectedDate const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
}); const getGlassFeesPromise = useMainStore().getGlassFees();
const providersPromise = useMainStore().getProviders(serviceZipCode);
const premiumFeePromise = useMainStore().getMobilePremiumFee(); const premiumFeePromise = useMainStore().getMobilePremiumFee();
const premiumFeeWithPricePromise = premiumFeePromise.then((result) => { const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
if (result.data) { if (result.data) {
return useMainStore().getCombinedQuote(result.data); return useMainStore().getCombinedQuote(result.data);
@ -213,11 +240,6 @@ export default {
return result.data; return result.data;
}); });
const alertReasonsPromise = locationAlerts.methods.loadInitialData(
useMainStore().order.serviceLocation.zipCodeCtu,
useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
@ -225,12 +247,24 @@ export default {
promise: cmsContentPromise promise: cmsContentPromise
}, },
{ {
resultKey: 'alertReasons', resultKey: 'mobileFeePart',
promise: alertReasonsPromise promise: mobileFeePartPromise
}, },
{ {
resultKey: 'datePickerInitialData', resultKey: 'glassFees',
promise: datePickerInitialDataPromise promise: getGlassFeesPromise
},
{
resultKey: 'serviceabilityDetails',
promise: serviceabilityDetailsPromise
},
{
resultKey: 'zipCodeData',
promise: zipCodeData
},
{
resultKey: 'providers',
promise: providersPromise
}, },
{ {
resultKey: 'premiumFeeWithPrice', resultKey: 'premiumFeeWithPrice',
@ -240,14 +274,32 @@ export default {
// use resultMap to populate layout content. // use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap); 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 providerToUse = resultMap.providers?.shopProviders
.find((provider) => provider.providerNumber === storeSelectedProvider?.providerNumber) || resultMap.providers?.shopProviders[0];
const isMobileAppointment = storeSelectedAppointmentType === AppointmentTypeStrings.MOBILE
|| storeSelectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
const initialServiceLocationObj = {
mobileProviderNumber: isMobileAppointment
? storeSelectedProvider?.providerNumber
: null,
provider: isMobileAppointment ? null : providerToUse,
zipCode: useMainStore().order.serviceLocation.zipCode || useMainStore().order.customer.address.zipCode,
zipCodeCtu: resultMap.zipCodeData?.zipCodeCtu
};
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData); vm.$refs.serviceLocation.initializeComponent(serviceLocationData);
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons); await vm.setData(resultMap.premiumFeeWithPrice, initialServiceLocationObj);
vm.setData( showIssLoadingModal(false);
resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
resultMap.premiumFeeWithPrice
);
}); });
}, },
setup() { setup() {
@ -256,64 +308,133 @@ export default {
}, },
data() { data() {
return { return {
selectedDate: this.getSelectedDate(), inShopDatesData: [],
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(), isMobileView: false,
mobileDatesData: [],
mobileFeePart: null,
mobilePremiumAppointmentFee: null,
mobileProviderNumber: null,
mobileZipCodeOverride: null,
selectableDatesData: [], selectableDatesData: [],
showDatePickerError: false, selectedAppointmentType: this.getAppointmentType(),
mobilePremiumAppointmentFee: null selectedDate: this.getSelectedDate(),
selectedProvider: this.getSelectedProvider(),
selectedServiceLocation: this.getServiceLocation(),
selectedServiceLocationCity: this.getServiceLocationCity(),
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
showDatePickerError: false
}; };
}, },
computed: { computed: {
ChangeShopLinkText() { hasNeededServiceLocationData() {
return this.getCmsContent('ChangeShopLink', 'Text'); const serviceLocationToUse = this.selectedServiceLocation;
}, if (!serviceLocationToUse || !this.selectedAppointmentType) {
ChangeShopLink() { return false;
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText); }
},
appointmentType() { const serviceLocationPreReqs = serviceLocationToUse.zipCode !== null
return useMainStore().order.serviceLocation.appointmentType; && serviceLocationToUse.zipCodeCtu !== null
&& serviceLocationToUse.appointmentType !== null
&& (((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;
return (serviceLocationPreReqs && supportingItems && damageInfo);
}, },
isFormValid() { isFormValid() {
const hasTimeSlotSelected = this.selectedTimeSlotInfo?.timeSlot?.routeCode != null; const hasTimeSlotSelected = this.selectedTimeSlotInfo?.timeSlot?.routeCode != null;
return hasTimeSlotSelected; return hasTimeSlotSelected;
}, },
navigateBackScenario() {
const { isNoComp, isITAC } = useMainStore();
return isNoComp || isITAC
? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW
: this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW;
},
supportingItems() { supportingItems() {
return useMainStore().lineItems.supportingItems; return useMainStore().lineItems.supportingItems;
} }
}, },
mounted() {
showIssLoadingModal(true);
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: { methods: {
splitCopyOnCMSPlaceHolder, splitCopyOnCMSPlaceHolder,
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
const { serviceLocation } = useMainStore().order; return useMainStore().order.serviceLocation.zipCode !== null;
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;
}, },
setData(initialShopTimeSlotsResponse, premiumFeeWithPriceResponse) { async setData(premiumFeeWithPriceResponse, initialServiceLocationObj) {
this.selectableDatesData = initialShopTimeSlotsResponse; this.selectedServiceLocation = initialServiceLocationObj;
this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
? premiumFeeWithPriceResponse[0] ? premiumFeeWithPriceResponse[0]
: null; : null;
if (initialServiceLocationObj?.zipCodeCtu) {
this.$refs.locationAlerts.loadInitialData(
initialServiceLocationObj.zipCodeCtu,
initialServiceLocationObj.provider?.ctu
).then((alertReasons) => {
this.$refs.locationAlerts.initializeComponent(alertReasons.data);
});
}
if (this.selectedAppointmentType !== AppointmentTypeStrings.MOBILE
&& this.selectedAppointmentType !== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
await this.getDatePickerInitialData(initialServiceLocationObj.provider?.providerNumber).then((initialData) => {
this.selectableDatesData = initialData.initialShopTimeSlotsResponse;
this.$refs.datePicker.setCalendarData(initialData);
});
} else {
this.mobileProviderNumber = initialServiceLocationObj.mobileProviderNumber;
await this.getDatePickerInitialData().then((initialData) => {
this.selectableDatesData = initialData.initialShopTimeSlotsResponse;
this.$refs.datePicker.setCalendarData(initialData);
});
}
},
appointmentTypeChangedFromServiceLocation(newAppointmentType) {
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 if (this.mobileDatesData?.initialShopTimeSlotsResponse?.days?.length > 0) {
this.selectableDatesData = this.mobileDatesData.initialShopTimeSlotsResponse;
this.$refs.datePicker.initializeComponent(this.mobileDatesData);
}
},
cityUpdatedFromServiceLocation(newCity) {
this.selectedServiceLocationCity = newCity;
},
dateSelectedFromPicker(date) {
this.selectedDate = date;
this.showDatePickerError = false;
},
getAppointmentType() {
return this.mainStore.order?.serviceLocation?.appointmentType;
}, },
async getAvailableDatesMethod(startDate, endDate) { async getAvailableDatesMethod(startDate, endDate) {
const newShopTimeSlots = await getAvailableDates( const newShopTimeSlots = await getAvailableDates(
startDate, startDate,
endDate, endDate,
this.appointmentType, this.selectedAppointmentType,
this.mainStore.order.serviceLocation.provider.providerNumber this.selectedProvider.providerNumber
); );
// ADD API CALL RESULTS TO EXISTING DATE DATA // ADD API CALL RESULTS TO EXISTING DATE DATA
this.selectableDatesData.days = this.selectableDatesData.days =
@ -321,12 +442,131 @@ export default {
return newShopTimeSlots; return newShopTimeSlots;
}, },
getAvailableDates, getAvailableDates,
async getDatePickerInitialData(defaultProviderNumber = null) {
this.inShopDatesData = [];
this.mobileDatesData = [];
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;
}
let mobileProviderNumberToUse = defaultProviderNumber;
if (this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
|| this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
mobileProviderNumberToUse = this.selectedServiceLocation.mobileProviderNumber;
}
const initialData = await getAvailableDates(
initialViewStartDate,
initialViewEndDate,
this.selectedAppointmentType || AppointmentTypeStrings.IN_SHOP,
this.selectedProvider?.providerNumber || mobileProviderNumberToUse,
this.selectedServiceLocation.zipCode
).then((response) => ({
todayDate: todayDateString,
initialViewStartDate,
initialViewEndDate,
calendarViewDirection,
initialShopTimeSlotsResponse: response,
preSelectedDate,
initialDaysLoaded: endDateObject.newDaysLoaded || initialDays,
daysFromStart: endDateObject.daysFromStart || null
}));
if (this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
|| this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
this.mobileDatesData = initialData;
if (this.selectedProvider?.providerNumber) {
const inShopData = await getAvailableDates(
initialViewStartDate,
initialViewEndDate,
AppointmentTypeStrings.IN_SHOP,
this.selectedProvider?.providerNumber || defaultProviderNumber,
this.selectedServiceLocation.zipCode
).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;
},
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() { getServiceZipCtuCodeFromStore() {
return this.mainStore.order.serviceLocation.zipCodeCtu; return this.mainStore.order.serviceLocation.zipCodeCtu;
}, },
getSelectedDate() { getSelectedDate() {
return this.mainStore.order.schedule.date; return this.mainStore.order.schedule.date;
}, },
getSelectedProvider() {
return this.mainStore.order.serviceLocation.provider;
},
getSelectedTimeSlotInfo() { getSelectedTimeSlotInfo() {
const isPremiumAppointment = const isPremiumAppointment =
!!( !!(
@ -341,20 +581,52 @@ export default {
return selectedTimeSlotInfo; return selectedTimeSlotInfo;
}, },
dateSelectedFromPicker(date) { getServiceLocation() {
this.selectedDate = date; return this.mainStore.order.serviceLocation;
this.showDatePickerError = false; },
getServiceLocationCity() {
return this.mainStore.order.serviceLocation?.city;
},
handleMqlChange(e) {
this.isMobileView = !e.matches;
},
mobileZipUpdatedFromServiceLocation(mobileZipServiceLocation) {
if (mobileZipServiceLocation) {
this.mobileProviderNumber = mobileZipServiceLocation.mobileProviderNumber;
this.selectedServiceLocation = mobileZipServiceLocation;
if (mobileZipServiceLocation.refreshDatePicker) {
this.refreshDatePicker();
}
}
},
providerChangedFromServiceLocation(newProvider) {
this.selectedProvider = newProvider?.provider;
if (newProvider?.refreshDatePicker) {
showIssLoadingModal(true);
this.refreshDatePicker();
}
},
async refreshDatePicker() {
await this.getDatePickerInitialData().then((data) => {
this.selectableDatesData = data.initialShopTimeSlotsResponse;
this.$refs.datePicker.initializeComponent(data);
showIssLoadingModal(false);
});
}, },
timeSlotSelectedFromPicker(timeSlot) { timeSlotSelectedFromPicker(timeSlot) {
this.selectedTimeSlotInfo = timeSlot; this.selectedTimeSlotInfo = timeSlot;
this.showDatePickerError = false; this.showDatePickerError = false;
}, },
forwardButtonAction() { async forwardButtonAction() {
if (!this.isFormValid) { if (!this.isFormValid) {
this.showDatePickerError = true; this.showDatePickerError = true;
return; return;
} }
// Save service location then schedule and navigate forward
await this.$refs.serviceLocation.forwardButtonAction();
this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot); this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD, this.navigationScenarios.CLICKED_FORWARD,
@ -369,11 +641,12 @@ export default {
$page-side-padding: 1.5rem; $page-side-padding: 1.5rem;
.iss-heritage-container-width { .iss-heritage-container-width {
padding-right: 0.9375rem;
padding-left: 0.9375rem;
.schedule-page-container { .schedule-page-container {
position: relative; position: relative;
min-height: 1px; min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
} }
} }

11
src/layouts/service-location/appointment-type-question/appointment-type-question.vue → src/layouts/schedule-page/service-location/appointment-type-question/appointment-type-question.vue
View file

@ -19,12 +19,10 @@
</template> </template>
<script> <script>
import { useMainStore } from '@/store';
import buttonQuestion from '@/digital-components/button-question/button-question.vue'; import buttonQuestion from '@/digital-components/button-question/button-question.vue';
// Constants // Constants
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js'; import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
import { experimentSettings } from '@/constants/experiments';
export default { export default {
name: 'appointment-type-question', name: 'appointment-type-question',
@ -63,12 +61,17 @@ export default {
this.$emit('update:modelValue', newValue); this.$emit('update:modelValue', newValue);
} }
} }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.appointment-type-question { .appointment-type-question {
margin-bottom: 1.25rem; margin-top: .625rem;
:deep(.list-button-content) {
padding-top: .625rem;
padding-bottom: .625rem;
}
} }
</style> </style>

7
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue → src/layouts/schedule-page/service-location/mobile-location-modal-question/mobile-location-modal-questions.vue
View file

@ -79,8 +79,6 @@ import modal from '@/digital-components/modal/modal.vue';
import alert from '@/ux-components/alert/alert.vue'; import alert from '@/ux-components/alert/alert.vue';
import { useField } from 'vee-validate'; import { useField } from 'vee-validate';
import addressQuestions from '@/iss-components/address-questions/address-questions.vue'; 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 // Constants
import { experimentSettings } from '@/constants/experiments'; import { experimentSettings } from '@/constants/experiments';
@ -90,10 +88,11 @@ import { useMainStore } from '@/store';
import { import {
getMobileZipCodeData, getMobileZipCodeData,
getPricedMobileFeePart, getPricedMobileFeePart,
getServiceabilityDetails, getServiceabilityDetails
getZipCodeData
} from '@/helpers/service-location-helper'; } from '@/helpers/service-location-helper';
import { deepClone } from '@/helpers/object-helper.js'; 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 { export default {
name: 'mobile-location-modal-questions', name: 'mobile-location-modal-questions',

0
src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue → src/layouts/schedule-page/service-location/mobile-location-modal-question/vehicle-protected-question/vehicle-protected-question.vue
View file

81
src/layouts/service-location/service-location.spec.js → src/layouts/schedule-page/service-location/service-location.spec.js
View file

@ -1,13 +1,12 @@
/* eslint-env jest */ /* eslint-env jest */
import baseMixin from '@/mixins/base-mixin'; 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 { createTestingPinia } from '@pinia/testing';
import { AppointmentTypeStrings } from '@/constants/schedule-constants'; import { AppointmentTypeStrings } from '@/constants/schedule-constants';
import navigationScenarios from '@/router/router-constants/navigation-scenarios'; import navigationScenarios from '@/router/router-constants/navigation-scenarios';
import routerParams from '@/router/router-constants/router-params'; import routerParams from '@/router/router-constants/router-params';
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
import serviceLocation from '@/layouts/service-location/service-location.vue'; import serviceLocation from '@/layouts/schedule-page/service-location/service-location.vue';
import { getZipCodeData } from '@/helpers/service-location-helper';
const mockGetServiceabilityDetails = () => { const mockGetServiceabilityDetails = () => {
const serviceabilityDetails = { const serviceabilityDetails = {
@ -50,43 +49,41 @@ const mockZipcodeData = (zip) => {
state: null, state: null,
zipCodeCtu: null zipCodeCtu: null
}); });
} };
const mockProviders = () => { const mockProviders = () => Promise.resolve([
return Promise.resolve([ {
{ address: {
"address": { city: 'COLUMBUS',
"city": "COLUMBUS", country: 'US',
"country": "US", state: 'OH',
"state": "OH", streetAddress: '6826 Sawmill Rd',
"streetAddress": "6826 Sawmill Rd", streetAddress2: '',
"streetAddress2": "", zipCode: '43235',
"zipCode": "43235", zipCodeCtu: '03357'
"zipCodeCtu": "03357"
},
"distanceInMiles": 4.136335989015438,
"providerNumber": "003357",
"companyName": "SAFELITE AUTOGLASS - COLUMBUS, OH",
"phoneNumber": "6142336400",
"isSafeliteShop": true
}, },
{ distanceInMiles: 4.136335989015438,
"address": { providerNumber: '003357',
"city": "Lewis Center", companyName: 'SAFELITE AUTOGLASS - COLUMBUS, OH',
"country": "US", phoneNumber: '6142336400',
"state": "OH", isSafeliteShop: true
"streetAddress": "1343 Cameron Ave", },
"streetAddress2": "", {
"zipCode": "43035", address: {
"zipCodeCtu": "03357" city: 'Lewis Center',
}, country: 'US',
"distanceInMiles": 8.193072412262042, state: 'OH',
"providerNumber": "003417", streetAddress: '1343 Cameron Ave',
"companyName": "SAFELITE AUTOGLASS - LEWIS CENTER, OH", streetAddress2: '',
"phoneNumber": "6147815433", zipCode: '43035',
"isSafeliteShop": true zipCodeCtu: '03357'
} },
]) distanceInMiles: 8.193072412262042,
} providerNumber: '003417',
companyName: 'SAFELITE AUTOGLASS - LEWIS CENTER, OH',
phoneNumber: '6147815433',
isSafeliteShop: true
}
]);
jest.mock( jest.mock(
'@/helpers/service-location-helper', '@/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({ mountOptions.global.plugins = [createTestingPinia({
initialState: { initialState: {
main: { main: {
order: { order: {
serviceLocation: { serviceLocation: {
appointmentType: appointmentType appointmentType
} }
} }
} }
@ -204,7 +201,7 @@ describe('service-location.vue', () => {
expect(wrapper.vm.zipContainsMilitaryBase).toBe(false); expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
const newMobileServiceZipCode = '45433' const newMobileServiceZipCode = '45433';
// Act // Act
mobileServiceZipCodeQuestion.vm.$emit('update:modelValue', newMobileServiceZipCode); mobileServiceZipCodeQuestion.vm.$emit('update:modelValue', newMobileServiceZipCode);

581
src/layouts/schedule-page/service-location/service-location.vue Normal file
View file

@ -0,0 +1,581 @@
<template>
<div class="service-location">
<alert
v-if="displayRecalibrationWarning"
ref="alertRecalNoMobile"
cmsWidgetName="AlertRecalNoMobileWidget"
alertClass="alert-warning"
@textLinkClicked="openModalAction" />
<alert
v-if="displayBigTruckNoShops"
ref="alertBigTruckNoShops"
cmsWidgetName="AlertBigTruckNoShopsWidget"
alertClass="alert-warning" />
<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>
<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"
@zipUpdated="handleInShopZipUpdated" />
<!-- INTEGRATION TODO: Put this right under the calendar -->
<alert
v-if="selectedProvider === null"
ref="alertNoAvailableShops"
cmsWidgetName="AlertNoAvailableShopsWidget"
:isCollapsible="false"
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" />
</div>
</template>
<script>
// Import Supporting Files
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,
getServiceabilityDetails,
getZipCodeData,
getMobileZipCodeData
} from '@/helpers/service-location-helper';
import { toTitleCase } from '@/helpers/text-helper.js';
// Import Component
import alert from '@/ux-components/alert/alert.vue';
import textBlock from '@/digital-components/text-block/text-block.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 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';
export default {
name: 'service-location',
components: {
alert,
textBlock,
appointmentTypeQuestion,
contentGroupModal,
shopAddress,
serviceZipQuestion
},
mixins: [baseFormMixin],
emits: ['appointment-type-changed', 'city-updated', 'mobile-zip-updated', 'provider-changed'],
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
return {
streetAddress: this.getServiceAddressFromStore(),
streetAddress2: this.getServiceAddress2FromStore(),
city: this.getServiceCityFromStore(),
state: this.getServiceStateFromStore(),
zipCode: this.getServiceZipCodeFromStore(),
isGlassServiceableInshop: null,
isRecalibrationServiceableInshop: null,
isGlassServiceableMobile: null,
isRecalibrationServiceableMobile: null,
selectedAppointmentType: this.getSelectedAppointmentType(),
selectedProvider: this.getSelectedProvider(),
mobileFeePart: null,
mobileProviderNumber: null,
zipContainsMilitaryBase: false,
zipCodeCtu: null,
mobileZipCode: '',
mobileZipError: '',
militaryBaseWarningExpanded: false,
availabilityRating: null,
RECAL_MODAL_REF_NAME,
errorMessages
};
},
computed: {
appointmentQuestionText() {
return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
},
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;
},
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 (
this.selectedAppointmentType === 'Inshop'
|| this.selectedAppointmentType === 'Dropoff'
);
},
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);
},
recalibrationRequired() {
return this.mainStore.hasRecalibrationPart;
},
requiresInshopRecalibration() {
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
return (
this.isServiceableInshop
&& this.isGlassServiceableMobile
&& this.isRecalibrationServiceableMobile === false
);
},
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);
}
},
watch: {
city(newCity, oldCity) {
if (newCity !== oldCity) {
this.$emit('city-updated', newCity);
}
},
async mobileZipCode(newZip, oldZip) {
if (newZip !== '' && newZip !== oldZip) {
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(newValue, oldValue) {
if (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && this.selectedProvider && this.availabilityRating === null) {
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);
}
},
selectedProvider(newProvider, oldProvider) {
if (newProvider?.providerNumber !== oldProvider?.providerNumber) {
const appointmentIsInshop = this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP;
const returnedProvider = {
provider: newProvider,
refreshDatePicker: appointmentIsInshop && oldProvider?.providerNumber !== null
};
if (appointmentIsInshop && newProvider?.providerNumber != null) {
this.refreshAvailabilityRating();
}
this.$emit('provider-changed', returnedProvider);
}
}
},
methods: {
initializeComponent(initialData) {
this.setData(initialData);
},
async forwardButtonAction() {
let provider = this.selectedProvider;
this.mainStore.updateMobileFee(null);
if (this.isMobile) {
if (this.mainStore.isNoComp || this.mainStore.isITAC) {
this.mainStore.updateMobileFee(this.mobileFeePart);
}
provider = {
providerNumber: this.mobileProviderNumber,
address: {
streetAddress: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null
}
};
}
this.mainStore.saveServiceLocation({
address: this.streetAddress,
address2: this.streetAddress2,
city: this.city,
state: this.state,
zipCode: this.zipCode,
zipCodeCtu: this.zipCodeCtu,
appointmentType: this.selectedAppointmentType,
provider
});
},
openModalAction(modalName) {
this.$refs[modalName].openModal();
},
resetDependentState() {},
getServiceAddressFromStore() {
return useMainStore().order.serviceLocation.address;
},
getServiceAddress2FromStore() {
return useMainStore().order.serviceLocation.address2;
},
getServiceCityFromStore() {
return useMainStore().order.serviceLocation.city;
},
getServiceStateFromStore() {
return (
useMainStore().order.serviceLocation.state
|| useMainStore().order.customer.address.state
);
},
getServiceZipCodeFromStore() {
return (
useMainStore().order.serviceLocation.zipCode
|| useMainStore().order.customer.address.zipCode
);
},
getSelectedAppointmentType() {
return useMainStore().order.serviceLocation.appointmentType;
},
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;
}).catch(() => {
this.availabilityRating = null;
});
},
setCtuForMobile(val) {
this.zipCodeCtu = val;
},
setData(initialData) {
if (initialData.zipCodeData) {
this.zipContainsMilitaryBase = initialData.zipCodeData.containsMilitaryBase;
this.zipCodeCtu = initialData.zipCodeData.zipCodeCtu;
this.city = initialData.zipCodeData.city;
}
if (initialData.serviceabilityDetails) {
this.setServiceabilityDetails(initialData.serviceabilityDetails);
}
if (initialData.mobileFeePart) {
this.mobileFeePart = initialData.mobileFeePart;
}
if (initialData.providers) {
this.setMobileProviderNumber(initialData.providers.mobileProviderNumber);
let foundMatch = false;
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 (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 (initialData.glassFees) {
useMainStore().getCombinedQuote(initialData.glassFees)
.then((combinedQuote) => {
this.setGlassFeeItems(combinedQuote);
});
}
},
setContainsMilitaryBase(val) {
if (this.zipContainsMilitaryBase !== val) {
this.zipContainsMilitaryBase = val;
}
},
setGlassFeeItems(newGlassFeeItems) {
this.mainStore.updateGlassFees(newGlassFeeItems);
},
setMobileProviderNumber(providerNumber) {
this.mobileProviderNumber = providerNumber;
},
setServiceabilityDetails(serviceabilityDetails) {
this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
this.isRecalibrationServiceableInshop = serviceabilityDetails.isRecalibrationServiceableInshop;
this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
this.isRecalibrationServiceableMobile = serviceabilityDetails.isRecalibrationServiceableMobile;
if (!this.isServiceableMobile) {
this.selectedAppointmentType = AppointmentTypeStrings.IN_SHOP;
}
},
async updateMobileZip() {
this.mobileZipError = '';
const zipCodeData = await getMobileZipCodeData(this.mobileZipCode);
if (!zipCodeData.isValid) {
this.mobileZipError = errorMessages.INVALID_ZIP;
} else if (!zipCodeData.isServiceable) {
this.mobileZipError = errorMessages.NO_SERVICE_IN_AREA(toTitleCase(zipCodeData.city));
} else {
this.city = zipCodeData.city;
this.zipCode = this.mobileZipCode;
this.setCtuForMobile(zipCodeData.zipCodeCtu);
this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
const serviceabilityDetailsPromise = getServiceabilityDetails(this.mobileZipCode);
await serviceabilityDetailsPromise.then((result) => {
const details = result.data;
if (details) {
this.setServiceabilityDetails(details);
}
});
const providersPromise = useMainStore().getProviders(this.mobileZipCode);
await providersPromise.then((result) => {
const providers = result.data;
if (providers) {
this.setMobileProviderNumber(providers.mobileProviderNumber);
if (providers.shopProviders.length > 0) {
// eslint-disable-next-line prefer-destructuring
this.selectedProvider = providers.shopProviders[0];
} else {
this.selectedProvider = null;
}
}
});
}
}
}
};
</script>
<style lang="scss" scoped>
$page-side-padding: 1.5rem;
.service-location {
> div {
margin-top: 1.25rem;
margin-bottom: 0;
}
.form-test-error {
font-weight: $font-weight-bold;
}
.appointment-type-question-text {
color: $black;
font-weight: 600;
font-size: 1rem;
line-height: 1.625rem;
flex-direction: column;
.recal-text {
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;
}
}
.expandable-link-container {
margin-bottom: 1rem;
}
.expandable-link {
font-style: italic;
font-weight: $font-weight-bold;
text-decoration: none;
color: $heritage-blue-primary;
line-height: 1.375rem;
&:hover {
text-decoration: underline;
}
}
}
</style>

2
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js → src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.spec.js
View file

@ -1,6 +1,6 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import crypto from 'crypto'; 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; global.crypto = crypto;

5
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue → src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -35,7 +35,7 @@
<script> <script>
import textLink from '@/ux-components/text-link/text-link.vue'; 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 modal from '@/digital-components/modal/modal.vue';
import alert from '@/ux-components/alert/alert.vue'; import alert from '@/ux-components/alert/alert.vue';
@ -177,6 +177,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/styles/ux-variables-svg-strings.scss";
a#serviceZipLinkPromptId { a#serviceZipLinkPromptId {
line-height: 26px; line-height: 26px;
} }
@ -186,7 +187,7 @@ a#serviceZipLinkPromptId {
display: inline-block; display: inline-block;
width: 13px; width: 13px;
height: 16px; 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; background-size: contain;
vertical-align: middle; vertical-align: middle;
margin-right: 0.5em; margin-right: 0.5em;

2
src/layouts/service-location/service-zip-question/service-zip-question.spec.js → src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.spec.js
View file

@ -1,5 +1,5 @@
import { shallowMount } from '@vue/test-utils'; 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', () => { describe('service-zip-question.vue', () => {
it('Should get the modelValue', async () => { it('Should get the modelValue', async () => {

22
src/layouts/service-location/service-zip-question/service-zip-question.vue → src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue
View file

@ -8,8 +8,8 @@
mask="#####" mask="#####"
isRequired isRequired
:hasError="hasError" :hasError="hasError"
@clickEvent="updateModelValue" :validationRules="`zip-required|${cmsWidgetName}-zip-format`"
:validationRules="`zip-required|${cmsWidgetName}-zip-format`" /> @clickEvent="updateModelValue" />
</template> </template>
<script> <script>
@ -41,24 +41,26 @@ export default {
default: false default: false
} }
}, },
emits: ['update:modelValue'],
data() { data() {
return { return {
internalZipcode: this.modelValue internalZipcode: this.modelValue
} };
},
emits: ['update:modelValue'],
methods: {
updateModelValue() {
this.$emit('update:modelValue', this.internalZipcode);
}
}, },
watch: { watch: {
modelValue(newValue) { modelValue(newValue) {
this.internalZipcode = newValue; if (newValue !== this.internalZipcode) {
this.internalZipcode = newValue;
}
} }
}, },
mounted() { mounted() {
defineRule(`${this.cmsWidgetName}-zip-format`, regex(/^\d{5}$/, this.serviceZipFormatErrorMessage)); defineRule(`${this.cmsWidgetName}-zip-format`, regex(/^\d{5}$/, this.serviceZipFormatErrorMessage));
},
methods: {
updateModelValue() {
this.$emit('update:modelValue', this.internalZipcode);
}
} }
}; };
</script> </script>

59
src/layouts/service-location/shop-address/shop-address.vue → src/layouts/schedule-page/service-location/shop-address/shop-address.vue
View file

@ -5,15 +5,19 @@
<div <div
class="shop-address" class="shop-address"
aria-live="polite"> aria-live="polite">
<div class="address-header">{{ questionText }}</div> <div class="address-header">
<div {{ questionText }}
</div>
<div
v-if="modelValue" v-if="modelValue"
class="current-address"> class="current-address">
<div class="address-line"> <div class="address-line">
<span class="shop-name">{{ displayedShopName }}</span> <span class="shop-name">{{ displayedShopName }}</span>
<span class="shop-distance">{{ modelValue.distanceInMiles?.toFixed(2) }} mi</span> <span class="shop-distance">{{ modelValue.distanceInMiles?.toFixed(2) }} mi</span>
</div> </div>
<div class="address-line">{{ getProviderAddress(modelValue) }}</div> <div class="address-line">
{{ getProviderAddress(modelValue) }}
</div>
<div class="address-line"> <div class="address-line">
{{ getProviderCityZipState(modelValue) }} {{ getProviderCityZipState(modelValue) }}
</div> </div>
@ -29,9 +33,9 @@
:variant="'primary'" :variant="'primary'"
@clickEvent="openModal" /> @clickEvent="openModal" />
<alert <alert
class="alert-shop-distance"
v-if="modelValue?.distanceInMiles > 30" v-if="modelValue?.distanceInMiles > 30"
ref="alertShopDistance" ref="alertShopDistance"
class="alert-shop-distance"
cmsWidgetName="AlertShopDistanceWidget" cmsWidgetName="AlertShopDistanceWidget"
alertClass="alert-warning" /> alertClass="alert-warning" />
<modal <modal
@ -48,9 +52,9 @@
:markers="providerAddresses" :markers="providerAddresses"
:zipCode="internalZipcode" /> :zipCode="internalZipcode" />
<dropdownQuestion <dropdownQuestion
inputId="searchRadiusDropdown"
ref="searchRadiusQuestion" ref="searchRadiusQuestion"
v-model="searchRadiusInMiles" v-model="searchRadiusInMiles"
inputId="searchRadiusDropdown"
:cmsWidgetName="searchRadiusQuestionWidgetName" :cmsWidgetName="searchRadiusQuestionWidgetName"
:variant="dropdownVariants.compact" :variant="dropdownVariants.compact"
:options="searchRadiusOptions" /> :options="searchRadiusOptions" />
@ -93,7 +97,7 @@
import alert from '@/ux-components/alert/alert.vue'; import alert from '@/ux-components/alert/alert.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue'; import buttonMain from '@/ux-components/button-main/button-main.vue';
import modal from '@/digital-components/modal/modal.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 buttonQuestion from '@/digital-components/button-question/button-question.vue';
import shopListButton from '@/iss-components/shop-list-button/shop-list-button.vue'; import shopListButton from '@/iss-components/shop-list-button/shop-list-button.vue';
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue'; import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
@ -136,8 +140,9 @@ export default {
cmsWidgetName: String, cmsWidgetName: String,
validationRules: String, validationRules: String,
modalWidgetName: String, modalWidgetName: String,
selectedAppointmentType: String, selectedAppointmentType: String
}, },
emits: ['update:modelValue', 'zip-updated'],
data() { data() {
return { return {
toTitleCase, toTitleCase,
@ -147,7 +152,7 @@ export default {
searchRadiusQuestionWidgetName: 'SearchRadiusQuestionWidget', searchRadiusQuestionWidgetName: 'SearchRadiusQuestionWidget',
textboxQuestionWidgetName: 'ChangeLocationZipQuestionWidget', textboxQuestionWidgetName: 'ChangeLocationZipQuestionWidget',
shopListButton: markRaw(shopListButton), shopListButton: markRaw(shopListButton),
searchRadiusInMiles: "25", searchRadiusInMiles: '25',
nearbyShops: [], nearbyShops: [],
modalPositions, modalPositions,
dropdownVariants, dropdownVariants,
@ -157,7 +162,6 @@ export default {
SERVICE_ZIP_QUESTION_REF_NAME SERVICE_ZIP_QUESTION_REF_NAME
}; };
}, },
emits: ['update:modelValue', 'zip-updated'],
computed: { computed: {
questionText() { questionText() {
return this.getCmsContent(this.cmsWidgetName, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT); 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); return this.getCmsContent('ShowMoreShopsLinkWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
}, },
displayedShopName() { displayedShopName() {
if(this.modelValue.isSafeliteShop) { if (this.modelValue.isSafeliteShop) {
return this.getCmsContent('SafeliteShopNameWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT); return this.getCmsContent('SafeliteShopNameWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
} }
return toTitleCase(this.modelValue.companyName); return toTitleCase(this.modelValue.companyName);
}, },
modalHeaderText() { modalHeaderText() {
// eslint-disable-next-line max-len
return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT).replaceAll('{custom:serviceZipcode}', this.internalZipcode); return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT).replaceAll('{custom:serviceZipcode}', this.internalZipcode);
}, },
modalFooterText() { modalFooterText() {
@ -193,7 +198,7 @@ export default {
availabilityRatingCallback: getAvailabilityRating, availabilityRatingCallback: getAvailabilityRating,
startDate: formattedStartDate, startDate: formattedStartDate,
endDate: formattedEndDate, endDate: formattedEndDate,
shopAppointmentType: "InshopOrDropoff" shopAppointmentType: 'InshopOrDropoff'
}; };
}, },
serviceZipPrompt() { serviceZipPrompt() {
@ -218,8 +223,8 @@ export default {
}, },
searchRadiusOptions() { searchRadiusOptions() {
const optionsObj = {}; const optionsObj = {};
if(this.searchRadiusArray) { if (this.searchRadiusArray) {
this.searchRadiusArray.forEach(option => { this.searchRadiusArray.forEach((option) => {
optionsObj[option.Name] = option.Text; optionsObj[option.Name] = option.Text;
}); });
} }
@ -231,11 +236,11 @@ export default {
fullAddress: this.getFullProviderAddress(provider), fullAddress: this.getFullProviderAddress(provider),
addressLines: [this.getProviderAddress(provider), this.getProviderCityZipState(provider)] addressLines: [this.getProviderAddress(provider), this.getProviderCityZipState(provider)]
})) ?? []; })) ?? [];
}, }
}, },
watch: { watch: {
async internalZipcode() { async internalZipcode() {
if(this.openingModal) { if (this.openingModal) {
return; return;
} }
const shopsUpdated = await this.updateShops(); const shopsUpdated = await this.updateShops();
@ -245,27 +250,28 @@ export default {
} }
}, },
async searchRadiusInMiles() { async searchRadiusInMiles() {
if(this.openingModal) { if (this.openingModal) {
return; return;
} }
await this.updateShops(); await this.updateShops();
} }
}, },
methods: { methods: {
// eslint-disable-next-line consistent-return
async updateShops(autoExpand = false) { async updateShops(autoExpand = false) {
this.errorMessage = ''; this.errorMessage = '';
let result = await this.getNearbyShops(this.searchRadiusInMiles); 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) { while (autoExpand && result.length === 0 && currentSearchIndex < this.searchRadiusArray.length - 1) {
const newSearchRadius = this.searchRadiusArray[currentSearchIndex + 1].Name; const newSearchRadius = this.searchRadiusArray[currentSearchIndex + 1].Name;
// eslint-disable-next-line no-await-in-loop
result = await this.getNearbyShops(newSearchRadius); result = await this.getNearbyShops(newSearchRadius);
currentSearchIndex++; currentSearchIndex += 1;
} }
if (result.length === 0) { if (result.length === 0) {
this.errorMessage = errorMessages.ZIP_CODE_NOT_SERVICED_FOR_VEHICLE; this.errorMessage = errorMessages.ZIP_CODE_NOT_SERVICED_FOR_VEHICLE;
} } else {
else { if (!result.find((shop) => shop.providerNumber === this.internalProviderNumber)) {
if (!result.find(shop => shop.providerNumber === this.internalProviderNumber)) {
this.internalProviderNumber = ''; this.internalProviderNumber = '';
await this.$nextTick(); await this.$nextTick();
} }
@ -283,7 +289,7 @@ export default {
onModalOpened() { onModalOpened() {
this.openingModal = true; this.openingModal = true;
this.internalZipcode = this.serviceZipcode; this.internalZipcode = this.serviceZipcode;
this.searchRadiusInMiles = "25"; this.searchRadiusInMiles = '25';
this.nearbyShops = []; this.nearbyShops = [];
this.updateShops(true).then(() => { this.updateShops(true).then(() => {
this.internalProviderNumber = this.nearbyShops[0]?.providerNumber; this.internalProviderNumber = this.nearbyShops[0]?.providerNumber;
@ -295,7 +301,7 @@ export default {
this.forceServiceZipRerender(); this.forceServiceZipRerender();
}, },
async updateSelectedProvider() { async updateSelectedProvider() {
const selectedShop = this.nearbyShops.find(shop => shop.providerNumber === this.internalProviderNumber); const selectedShop = this.nearbyShops.find((shop) => shop.providerNumber === this.internalProviderNumber);
if (selectedShop) { if (selectedShop) {
this.$emit('update:modelValue', selectedShop); this.$emit('update:modelValue', selectedShop);
this.$emit('zip-updated', this.internalZipcode); this.$emit('zip-updated', this.internalZipcode);
@ -303,7 +309,7 @@ export default {
} }
}, },
async getNearbyShops(radiusInMiles) { async getNearbyShops(radiusInMiles) {
const result = await useMainStore().getProviders(this.internalZipcode, radiusInMiles); const result = await useMainStore().getProviders(this.internalZipcode, radiusInMiles);
return result.data.shopProviders; return result.data.shopProviders;
}, },
getFullProviderAddress(provider) { getFullProviderAddress(provider) {
@ -341,7 +347,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.renderServiceZip = true; this.renderServiceZip = true;
}); });
}, }
} }
}; };
</script> </script>
@ -364,10 +370,11 @@ export default {
margin: .625rem 0; margin: .625rem 0;
} }
.no-shops-found { .no-shops-found {
font-size: .75rem; font-size: .8125rem;
margin: .75rem 0rem; margin: .75rem 0rem;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
line-height: 1.375rem; line-height: 1.375rem;
color: #4d4e53;
} }
.more-shops-button { .more-shops-button {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;

658
src/layouts/service-location/service-location.vue
View file

@ -1,658 +0,0 @@
<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>
<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" />
</div>
</div>
</div>
</Form>
</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 {
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 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 widgetFields from '@/constants/cms-widget-fields';
const RECAL_MODAL_REF_NAME = 'RecalModal';
const SITE_FOOTER_REF_NAME = 'siteFooter';
export default {
name: 'service-location',
components: {
alert,
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
);
});
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
return {
streetAddress: this.getServiceAddressFromStore(),
streetAddress2: this.getServiceAddress2FromStore(),
city: this.getServiceCityFromStore(),
state: this.getServiceStateFromStore(),
zipCode: this.getServiceZipCodeFromStore(),
isGlassServiceableInshop: null,
isRecalibrationServiceableInshop: null,
isGlassServiceableMobile: null,
isRecalibrationServiceableMobile: null,
selectedAppointmentType: this.getSelectedAppointmentType(),
selectedProvider: this.getSelectedProvider(),
mobileFeePart: null,
mobileProviderNumber: null,
zipContainsMilitaryBase: false,
zipCodeCtu: null,
mobileZipCode: '',
mobileZipError: '',
militaryBaseWarningExpanded: false,
availabilityRating: null,
RECAL_MODAL_REF_NAME,
SITE_FOOTER_REF_NAME,
errorMessages
};
},
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;
},
isServiceableInshop() {
if (this.isRecalibrationServiceableInshop !== null) {
return (
this.isGlassServiceableInshop
&& this.isRecalibrationServiceableInshop
);
}
return this.isGlassServiceableInshop;
},
isInshop() {
return (
this.selectedAppointmentType === 'Inshop'
|| this.selectedAppointmentType === 'Dropoff'
);
},
isMobile() {
return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
},
requiresInshopRecalibration() {
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
return (
this.isServiceableInshop
&& this.isGlassServiceableMobile
&& 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);
} else {
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;
}
},
methods: {
arePagePrerequisitesValid() {
return (
useMainStore().order.serviceLocation.zipCode !== null
);
},
async forwardButtonAction() {
let provider = this.selectedProvider;
this.mainStore.updateMobileFee(null);
if (this.isMobile) {
if (this.mainStore.isNoComp || this.mainStore.isITAC) {
this.mainStore.updateMobileFee(this.mobileFeePart);
}
provider = {
providerNumber: this.mobileProviderNumber,
address: {
streetAddress: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null
}
};
}
this.mainStore.saveServiceLocation({
address: this.streetAddress,
address2: this.streetAddress2,
city: this.city,
state: this.state,
zipCode: this.zipCode,
zipCodeCtu: this.zipCodeCtu,
appointmentType: this.selectedAppointmentType,
provider
});
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
},
openModalAction(modalName) {
this.$refs[modalName].openModal();
},
resetDependentState() {},
getServiceAddressFromStore() {
return useMainStore().order.serviceLocation.address;
},
getServiceAddress2FromStore() {
return useMainStore().order.serviceLocation.address2;
},
getServiceCityFromStore() {
return useMainStore().order.serviceLocation.city;
},
getServiceStateFromStore() {
return (
useMainStore().order.serviceLocation.state
|| useMainStore().order.customer.address.state
);
},
getServiceZipCodeFromStore() {
return (
useMainStore().order.serviceLocation.zipCode
|| useMainStore().order.customer.address.zipCode
);
},
getSelectedAppointmentType() {
return useMainStore().order.serviceLocation.appointmentType;
},
getSelectedProvider() {
return useMainStore().order.serviceLocation.provider;
},
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;
}
if (serviceabilityDetails) {
this.setServiceabilityDetails(serviceabilityDetails);
}
if (mobileFeePart) {
this.mobileFeePart = mobileFeePart;
}
if (providers) {
this.setMobileProviderNumber(providers.mobileProviderNumber);
let foundMatch = false;
if(this.selectedProvider && this.selectedProvider.providerNumber) {
const matchedProvider = 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) {
this.selectedProvider = null;
}
}
if (glassFees) {
const pricedGlassFees = await useMainStore().getCombinedQuote(glassFees);
this.setGlassFeeItems(pricedGlassFees);
}
},
setContainsMilitaryBase(val) {
if (this.zipContainsMilitaryBase !== val) {
this.zipContainsMilitaryBase = val;
}
},
setGlassFeeItems(newGlassFeeItems) {
this.mainStore.updateGlassFees(newGlassFeeItems);
},
setMobileFeePart(mobileFeePart) {
this.mobileFeePart = mobileFeePart;
},
setMobileProviderNumber(providerNumber) {
this.mobileProviderNumber = providerNumber;
},
setServiceabilityDetails(serviceabilityDetails) {
this.isGlassServiceableInshop =
serviceabilityDetails.isGlassServiceableInshop;
this.isRecalibrationServiceableInshop =
serviceabilityDetails.isRecalibrationServiceableInshop;
this.isGlassServiceableMobile =
serviceabilityDetails.isGlassServiceableMobile;
this.isRecalibrationServiceableMobile =
serviceabilityDetails.isRecalibrationServiceableMobile;
if (!this.isServiceableMobile) {
this.selectedAppointmentType = AppointmentTypeStrings.IN_SHOP;
}
},
async updateMobileZip() {
this.mobileZipError = '';
const zipCodeData = await getMobileZipCodeData(this.mobileZipCode);
if (!zipCodeData.isValid) {
this.mobileZipError = errorMessages.INVALID_ZIP;
} else if (!zipCodeData.isServiceable) {
this.mobileZipError = errorMessages.NO_SERVICE_IN_AREA(toTitleCase(zipCodeData.city));
} else {
this.city = zipCodeData.city;
this.zipCode = this.mobileZipCode;
this.setCtuForMobile(zipCodeData.zipCodeCtu);
this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
const serviceabilityDetailsPromise = getServiceabilityDetails(this.mobileZipCode);
serviceabilityDetailsPromise.then((result) => {
const details = result.data;
if (details) {
this.setServiceabilityDetails(details);
}
});
const providersPromise = useMainStore().getProviders(this.mobileZipCode);
providersPromise.then((result) => {
const providers = result.data;
if (providers) {
this.setMobileProviderNumber(providers.mobileProviderNumber);
if(providers.shopProviders.length > 0) {
this.selectedProvider = providers.shopProviders[0];
}
else {
this.selectedProvider = null;
}
}
});
}
},
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);
}
});
}
},
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;
}
.form-test-error {
font-weight: $font-weight-bold;
}
.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(.form-test-error span) {
font-weight: $font-weight-bold;
}
}
.expandable-link-container {
margin-bottom: 1rem;
}
.expandable-link {
font-style: italic;
font-weight: $font-weight-bold;
text-decoration: none;
color: $heritage-blue-primary;
line-height: 1.375rem;
&:hover {
text-decoration: underline;
}
}
}
</style>

2
src/mixins/vehicle-questions-mixin.spec.js
View file

@ -354,7 +354,7 @@ describe('vehicle-questions-mixin', () => {
const testCases = [ const testCases = [
[issPageValues.PART_QUESTIONS, issPageValues.VEHICLE_PARTS, false], [issPageValues.PART_QUESTIONS, issPageValues.VEHICLE_PARTS, false],
[issPageValues.VEHICLE_PARTS, 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.VEHICLE_PARTS, issPageValues.PART_QUESTIONS, true],
[issPageValues.PART_QUESTIONS, issPageValues.CAPABILITY_QUESTIONS, false], [issPageValues.PART_QUESTIONS, issPageValues.CAPABILITY_QUESTIONS, false],
[issPageValues.MOLDING_QUESTIONS, issPageValues.CAPABILITY_QUESTIONS, false] [issPageValues.MOLDING_QUESTIONS, issPageValues.CAPABILITY_QUESTIONS, false]

1
src/router/router-constants/issPage-values.js
View file

@ -23,7 +23,6 @@ const issPageValues = Object.freeze({
POLICY_HOLDER_DETAILS: 'policy-holder-details', POLICY_HOLDER_DETAILS: 'policy-holder-details',
PROVIDER_PREFERENCE: 'provider-preference', PROVIDER_PREFERENCE: 'provider-preference',
REVEAL: 'reveal', REVEAL: 'reveal',
SERVICE_LOCATION: 'service-location',
TPA_CONFIRMATION: 'tpa-confirmation', TPA_CONFIRMATION: 'tpa-confirmation',
SERVICE_PACKAGES: 'service-packages', SERVICE_PACKAGES: 'service-packages',
SCHEDULE_PAGE: 'schedule-page', SCHEDULE_PAGE: 'schedule-page',

7
src/router/router-constants/navigation-scenarios.js
View file

@ -64,7 +64,8 @@ const navigationScenarios = Object.freeze({
CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: 'CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS', CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: 'CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS',
// Schedule // Schedule
CLICKED_CHANGE_LOCATION: 'CLICKED_CHANGE_LOCATION', CLICKED_BACK_CANNOT_REACH_TPA_FLOW: 'CLICKED_BACK_CANNOT_REACH_TPA_FLOW',
CLICKED_BACK_CAN_REACH_TPA_FLOW: 'CLICKED_BACK_CAN_REACH_TPA_FLOW',
// Coverage Statement // Coverage Statement
CLICKED_BACK_WITH_REPAIR: 'CLICKED_BACK_WITH_REPAIR', CLICKED_BACK_WITH_REPAIR: 'CLICKED_BACK_WITH_REPAIR',
@ -83,10 +84,6 @@ const navigationScenarios = Object.freeze({
EDIT_PREFERRED_SHOP: 'EDIT_PREFERRED_SHOP', EDIT_PREFERRED_SHOP: 'EDIT_PREFERRED_SHOP',
EDIT_CONTACT_DETAILS: 'EDIT_CONTACT_DETAILS', EDIT_CONTACT_DETAILS: 'EDIT_CONTACT_DETAILS',
// Service location
CLICKED_BACK_CANNOT_REACH_TPA_FLOW: 'CLICKED_BACK_CANNOT_REACH_TPA_FLOW',
CLICKED_BACK_CAN_REACH_TPA_FLOW: 'CLICKED_BACK_CAN_REACH_TPA_FLOW',
// Provider Preference // Provider Preference
CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE', CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE',
CLICKED_FORWARD_WITH_TPA_ENABLED: 'CLICKED_FORWARD_WITH_TPA_ENABLED', CLICKED_FORWARD_WITH_TPA_ENABLED: 'CLICKED_FORWARD_WITH_TPA_ENABLED',

25
src/router/router-constants/routing-table.js
View file

@ -534,7 +534,7 @@ const routingTable = () => [
}, },
{ {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
destinationIssPageValue: issPageValues.SERVICE_LOCATION destinationIssPageValue: issPageValues.SCHEDULE_PAGE
}, },
{ {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP, scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
@ -559,7 +559,7 @@ const routingTable = () => [
}, },
{ {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
destinationIssPageValue: issPageValues.SERVICE_LOCATION destinationIssPageValue: issPageValues.SCHEDULE_PAGE
}, },
{ {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED, scenario: navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED,
@ -572,7 +572,7 @@ const routingTable = () => [
] ]
}, },
{ {
issPageValue: issPageValues.SERVICE_LOCATION, issPageValue: issPageValues.SCHEDULE_PAGE,
maps: [ maps: [
{ {
scenario: navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW, scenario: navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW,
@ -582,26 +582,9 @@ const routingTable = () => [
scenario: navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW, scenario: navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW,
destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE 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, scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.CONTACT_DETAILS 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, scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP,
destinationIssPageValue: issPageValues.SERVICE_LOCATION destinationIssPageValue: issPageValues.SCHEDULE_PAGE
}, },
{ {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP, scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,

20
src/store/index.js
View file

@ -885,7 +885,7 @@ export const useMainStore = defineStore({
logApiCall: true logApiCall: true
}); });
}, },
getMobileTimeSlots(startDate, endDate) { getMobileTimeSlots(startDate, endDate, zipCodeOverride = null) {
const { order } = this; const { order } = this;
const { vehicle } = this.order; const { vehicle } = this.order;
let lineItems = [ let lineItems = [
@ -931,8 +931,9 @@ export const useMainStore = defineStore({
style: vehicle.style, style: vehicle.style,
vin: vehicle.vin ?? '' vin: vehicle.vin ?? ''
}, },
zipCode: order.serviceLocation.zipCode zipCode: zipCodeOverride ?? order.serviceLocation.zipCode
}; };
return globalMethods.callHttpClient({ return globalMethods.callHttpClient({
method: endpoints.GetMobileTimeSlots.method, method: endpoints.GetMobileTimeSlots.method,
endpoint: endpoints.GetMobileTimeSlots.url, endpoint: endpoints.GetMobileTimeSlots.url,
@ -941,7 +942,7 @@ export const useMainStore = defineStore({
additionalSuccessEventDataHandler: (response) => additionalSuccessEventDataHandler: (response) =>
getTimeSlotsAdditionalEventData( getTimeSlotsAdditionalEventData(
response.data.provisionalTriggers, response.data.provisionalTriggers,
order.serviceLocation.zipCode, zipCodeOverride ?? order.serviceLocation.zipCode,
response.data.days?.[0]?.date response.data.days?.[0]?.date
) )
}); });
@ -2734,19 +2735,6 @@ export const useMainStore = defineStore({
}, },
saveServiceLocation(serviceLocationInfo) { saveServiceLocation(serviceLocationInfo) {
if (this.order.serviceLocation) {
if (
serviceLocationInfo.zipCode !== this.order.serviceLocation.zipCode
|| !providersEqual(
serviceLocationInfo.provider,
this.order.serviceLocation.provider
)
|| serviceLocationInfo.appointmentType
!== this.order.serviceLocation.appointmentType
) {
this.resetSchedule();
}
}
this.updateServiceLocation(serviceLocationInfo); this.updateServiceLocation(serviceLocationInfo);
}, },