Merge branch 'develop' into feature/jnou/fix-iss-regression
This commit is contained in:
JennyNou
commit
1385f9ed94
17 changed files with 288 additions and 148 deletions
BIN
src/assets/img/icons/select-disabled.png
Normal file
BIN
src/assets/img/icons/select-disabled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -68,7 +68,9 @@ const errorMessages = Object.freeze({
|
|||
BAILOUT_EMAIL_ADDRESS_REQUIRED: 'Email address is required.',
|
||||
TPA_SEARCH_ZIP_FORMAT: 'Please enter a valid Zip code.',
|
||||
TPA_SEARCH_SHOP_FORMAT: 'Please enter a valid shop name.',
|
||||
TPA_SEARCH_REQUIRED: 'Please enter a shop name or ZIP code.'
|
||||
TPA_SEARCH_REQUIRED: 'Please enter a shop name or ZIP code.',
|
||||
SERVICE_ADDRESS_REQUIRED: 'Service street address is required.',
|
||||
SERVICE_CITY_REQUIRED: 'Service city is required.'
|
||||
});
|
||||
|
||||
export default errorMessages;
|
||||
|
|
|
|||
|
|
@ -99,9 +99,9 @@
|
|||
</div>
|
||||
<template
|
||||
v-for="timeSlot in selectableTimeSlotsData"
|
||||
:key="timeSlot.startTime">
|
||||
:key="`${timeSlot.startTime}-${timeSlot.isDropoff}`">
|
||||
<input
|
||||
:id="`timeslot${timeSlot.startTime}`"
|
||||
:id="`timeslot${timeSlot.startTime}-${timeSlot.isDropoff}`"
|
||||
v-model="selectedTime"
|
||||
type="radio"
|
||||
name="time-slot"
|
||||
|
|
@ -114,9 +114,14 @@
|
|||
class="time-slot-button"
|
||||
:class="[checkIsSelectedTimeSlot(timeSlot) ? 'selected-time-slot' : ''
|
||||
, {'has-date-error': showTimeSlotError}]"
|
||||
@click="selectTimeSlotForDay(timeSlot)">
|
||||
{{ displayTimeSlotTime(timeSlot) }}
|
||||
@click="selectTimeSlotForDay(timeSlot)"
|
||||
v-html="displayTimeSlotTime(timeSlot)">
|
||||
</label>
|
||||
<div
|
||||
v-if="timeSlot.isDropoff"
|
||||
class="time-slot-drop-off-information"
|
||||
v-html="displayDropOffInformation(timeSlot)">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="row form-test-error">
|
||||
|
|
@ -256,6 +261,10 @@ export default {
|
|||
appointmentEstimate() {
|
||||
return getDisplayTextForDurationLength(this.appointmentDurationMinutesMinimum, this.appointmentDurationMinutesMaximum);
|
||||
},
|
||||
calendarViewDirection() {
|
||||
if (this.selectableDatesSetting === 'custom') return 'future';
|
||||
return 'past';
|
||||
},
|
||||
daysToAdd() {
|
||||
return this.isMobileView ? this.daysInViewMobile : this.daysInViewStandard;
|
||||
},
|
||||
|
|
@ -284,10 +293,6 @@ export default {
|
|||
this.todayOverrideDateString
|
||||
|| convertDateToDateString(new Date())
|
||||
);
|
||||
},
|
||||
calendarViewDirection() {
|
||||
if (this.selectableDatesSetting === 'custom') return 'future';
|
||||
return 'past';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -301,16 +306,16 @@ export default {
|
|||
this.findFirstAvailableDateInView();
|
||||
}
|
||||
},
|
||||
selectedDate(newValue, oldValue) {
|
||||
if (newValue !== oldValue) {
|
||||
this.$emit('dateSelected', newValue);
|
||||
}
|
||||
},
|
||||
selectedTimeSlot(newValue, oldValue) {
|
||||
if (newValue !== oldValue) {
|
||||
const testObj = this.getSelectedTimeSlotInfoObject(newValue);
|
||||
this.$emit('timeSlotSelected', testObj);
|
||||
}
|
||||
},
|
||||
selectedDate(newValue, oldValue) {
|
||||
if (newValue !== oldValue) {
|
||||
this.$emit('dateSelected', newValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -340,50 +345,44 @@ export default {
|
|||
addPremiumFlagToInput(routeCode) {
|
||||
return (`${routeCode}${PREMIUM_TIME_SLOT_ID_FLAG}`);
|
||||
},
|
||||
removePremiumFlagFromInput(routeCode) {
|
||||
return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, '');
|
||||
checkIsSelectedDay(index, timeOfDayGrouping) {
|
||||
const dateToShowString = this.getDateToShowString(index);
|
||||
return this.selectedDate === dateToShowString && this.selectedTimeOfDayGrouping === timeOfDayGrouping;
|
||||
},
|
||||
getSelectedTimeSlotInfoObject(timeSlot) {
|
||||
const routeCode = timeSlot?.id;
|
||||
let routeCodeToUse = routeCode;
|
||||
const routeCodeIncludesPremium = routeCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
|
||||
if (routeCodeIncludesPremium) {
|
||||
routeCodeToUse = this.removePremiumFlagFromInput(routeCode);
|
||||
checkIsSelectedTimeSlot(timeSlot) {
|
||||
if (!this.selectedTimeSlot) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const fullTimeSlot = this.selectableTimeSlotsData?.find((ts) => ts.id === routeCodeToUse);
|
||||
|
||||
if (fullTimeSlot) {
|
||||
return {
|
||||
timeSlot: {
|
||||
date: this.selectedDate,
|
||||
routeCode: fullTimeSlot.id,
|
||||
startTime: fullTimeSlot.startTime,
|
||||
endTime: fullTimeSlot.endTime,
|
||||
jobMaxMinutes: this.appointmentDurationMinutesMaximum.toString(),
|
||||
jobMinMinutes: this.appointmentDurationMinutesMinimum.toString()
|
||||
},
|
||||
isPremiumAppointment: !!routeCodeIncludesPremium
|
||||
};
|
||||
return (this.selectedTimeSlot.isDropoff === timeSlot.isDropoff
|
||||
&& this.selectedTimeSlot.startTime === timeSlot.startTime
|
||||
&& this.selectedTimeSlot.timeOfDay === timeSlot.timeOfDay);
|
||||
},
|
||||
displayDropOffInformation(timeSlot) {
|
||||
if (timeSlot.isDropoff) {
|
||||
if (timeSlot.timeOfDay === 'morning') {
|
||||
return this.getCmsContent(
|
||||
'DropOffTimeSlotModal',
|
||||
'BodyText'
|
||||
);
|
||||
}
|
||||
return this.getCmsContent(
|
||||
'OvernightDropOffTimeSlotModal',
|
||||
'BodyText'
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
timeSlot: {
|
||||
date: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
routeCode: null,
|
||||
jobMaxMinutes: null,
|
||||
jobMinMinutes: null
|
||||
},
|
||||
isPremiumAppointment: null
|
||||
};
|
||||
return '';
|
||||
},
|
||||
displayTimeSlotTime(timeSlot) {
|
||||
const appointmentType = this.activeAppointmentType || AppointmentTypeStrings.IN_SHOP;
|
||||
if (appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
|
||||
return `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime(timeSlot.endTime)}`;
|
||||
}
|
||||
if (timeSlot.isDropoff) {
|
||||
if (timeSlot.timeOfDay === 'morning') {
|
||||
return '<span class="dropoff-label">Drop & Go<sup>™</sup></span>';
|
||||
}
|
||||
return '<span class="dropoff-label">Overnight drop off</span>';
|
||||
}
|
||||
return militaryToTwelveHourTime(timeSlot.startTime);
|
||||
},
|
||||
findFirstAvailableDateInView() {
|
||||
|
|
@ -436,8 +435,7 @@ export default {
|
|||
if (!initialTimeSlot || !initialTimeSlot.startTime) {
|
||||
return;
|
||||
}
|
||||
const initialStartTime = initialTimeSlot.startTime;
|
||||
const foundTimeSlot = timeSlots.find((ts) => ts.startTime === initialStartTime);
|
||||
const foundTimeSlot = timeSlots.find((ts) => ts.startTime === initialTimeSlot.startTime && ts.endTime === initialTimeSlot.endTime);
|
||||
if (foundTimeSlot) {
|
||||
this.selectTimeSlotForDay(foundTimeSlot);
|
||||
}
|
||||
|
|
@ -452,6 +450,44 @@ export default {
|
|||
const dateToShow = this.getDateToShow(index);
|
||||
return convertDateToDateString(dateToShow);
|
||||
},
|
||||
getSelectedTimeSlotInfoObject(timeSlot) {
|
||||
const routeCode = timeSlot?.id;
|
||||
let routeCodeToUse = routeCode;
|
||||
const routeCodeIncludesPremium = routeCode?.includes(PREMIUM_TIME_SLOT_ID_FLAG);
|
||||
if (routeCodeIncludesPremium) {
|
||||
routeCodeToUse = this.removePremiumFlagFromInput(routeCode);
|
||||
}
|
||||
|
||||
const fullTimeSlot = this.selectableTimeSlotsData?.find((ts) => ts.id === routeCodeToUse);
|
||||
|
||||
if (fullTimeSlot) {
|
||||
return {
|
||||
timeSlot: {
|
||||
date: this.selectedDate,
|
||||
routeCode: fullTimeSlot.id,
|
||||
startTime: fullTimeSlot.startTime,
|
||||
endTime: fullTimeSlot.endTime,
|
||||
isDropoff: fullTimeSlot.isDropoff,
|
||||
jobMaxMinutes: this.appointmentDurationMinutesMaximum.toString(),
|
||||
jobMinMinutes: this.appointmentDurationMinutesMinimum.toString()
|
||||
},
|
||||
isPremiumAppointment: !!routeCodeIncludesPremium
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
timeSlot: {
|
||||
date: null,
|
||||
routeCode: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
isDropoff: null,
|
||||
jobMaxMinutes: null,
|
||||
jobMinMinutes: null
|
||||
},
|
||||
isPremiumAppointment: null
|
||||
};
|
||||
},
|
||||
async gotoNextPage() {
|
||||
const maxPageIndex = Math.floor((this.daysLoaded - 1) / this.daysToAdd);
|
||||
if (this.activePageIndex >= maxPageIndex) {
|
||||
|
|
@ -479,15 +515,15 @@ export default {
|
|||
this.selectedTimeSlot = null;
|
||||
this.findFirstAvailableDateInView();
|
||||
},
|
||||
checkIsSelectedDay(index, timeOfDayGrouping) {
|
||||
const dateToShowString = this.getDateToShowString(index);
|
||||
return this.selectedDate === dateToShowString && this.selectedTimeOfDayGrouping === timeOfDayGrouping;
|
||||
mapTimeSlot(timeSlot, timeOfDay) {
|
||||
return {
|
||||
...timeSlot,
|
||||
isDropoff: timeSlot.id.endsWith('DROP OFF'),
|
||||
timeOfDay
|
||||
};
|
||||
},
|
||||
checkIsSelectedTimeSlot(timeSlot) {
|
||||
if (!this.selectedTimeSlot) {
|
||||
return false;
|
||||
}
|
||||
return this.selectedTimeSlot.startTime === timeSlot.startTime;
|
||||
removePremiumFlagFromInput(routeCode) {
|
||||
return routeCode.replace(PREMIUM_TIME_SLOT_ID_FLAG, '');
|
||||
},
|
||||
selectTimeSlotForDay(timeSlot) {
|
||||
if (timeSlot) {
|
||||
|
|
@ -567,13 +603,28 @@ export default {
|
|||
morningTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
|
||||
const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
|
||||
return timeHour < 12;
|
||||
}),
|
||||
}).map((timeSlot) => this.mapTimeSlot(timeSlot, 'morning')),
|
||||
afternoonTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
|
||||
const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
|
||||
return timeHour >= 12;
|
||||
}),
|
||||
}).map((timeSlot) => this.mapTimeSlot(timeSlot, 'afternoon')),
|
||||
isSelected: false
|
||||
};
|
||||
|
||||
if (dateObjectToPush.morningTimeSlots.length > 0) {
|
||||
const findIndex = dateObjectToPush.morningTimeSlots.findIndex((timeSlot) => timeSlot.id.endsWith('DROP OFF'));
|
||||
if (findIndex !== -1) {
|
||||
const dropOffSlot = dateObjectToPush.morningTimeSlots.splice(findIndex, 1)[0];
|
||||
dateObjectToPush.morningTimeSlots.unshift(dropOffSlot);
|
||||
}
|
||||
}
|
||||
if (dateObjectToPush.afternoonTimeSlots.length > 0) {
|
||||
const findIndex = dateObjectToPush.afternoonTimeSlots.findIndex((timeSlot) => timeSlot.id.endsWith('DROP OFF'));
|
||||
if (findIndex !== -1) {
|
||||
const dropOffSlot = dateObjectToPush.afternoonTimeSlots.splice(findIndex, 1)[0];
|
||||
dateObjectToPush.afternoonTimeSlots.push(dropOffSlot);
|
||||
}
|
||||
}
|
||||
this.selectableDatesData.push(dateObjectToPush);
|
||||
});
|
||||
|
||||
|
|
@ -635,14 +686,28 @@ export default {
|
|||
morningTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
|
||||
const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
|
||||
return timeHour < 12;
|
||||
}),
|
||||
}).map((timeSlot) => this.mapTimeSlot(timeSlot, 'morning')),
|
||||
afternoonTimeSlots: selectableDate.timeSlots.filter((timeSlot) => {
|
||||
const timeHour = parseInt(timeSlot.startTime.split(':')[0], 10);
|
||||
return timeHour >= 12;
|
||||
}),
|
||||
}).map((timeSlot) => this.mapTimeSlot(timeSlot, 'afternoon')),
|
||||
isSelected: false
|
||||
};
|
||||
|
||||
if (dateObjectToPush.morningTimeSlots.length > 0) {
|
||||
const findIndex = dateObjectToPush.morningTimeSlots.findIndex((timeSlot) => timeSlot.id.endsWith('DROP OFF'));
|
||||
if (findIndex !== -1) {
|
||||
const dropOffSlot = dateObjectToPush.morningTimeSlots.splice(findIndex, 1)[0];
|
||||
dateObjectToPush.morningTimeSlots.unshift(dropOffSlot);
|
||||
}
|
||||
}
|
||||
if (dateObjectToPush.afternoonTimeSlots.length > 0) {
|
||||
const findIndex = dateObjectToPush.afternoonTimeSlots.findIndex((timeSlot) => timeSlot.id.endsWith('DROP OFF'));
|
||||
if (findIndex !== -1) {
|
||||
const dropOffSlot = dateObjectToPush.afternoonTimeSlots.splice(findIndex, 1)[0];
|
||||
dateObjectToPush.afternoonTimeSlots.push(dropOffSlot);
|
||||
}
|
||||
}
|
||||
this.selectableDatesData.push(dateObjectToPush);
|
||||
}
|
||||
});
|
||||
|
|
@ -832,16 +897,55 @@ export default {
|
|||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
:deep(.dropoff-label) {
|
||||
sup {
|
||||
top: -0.375rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
& + .time-slot-drop-off-information {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.75s ease-in-out;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
color: $darker-gray;
|
||||
|
||||
:deep(ul) {
|
||||
margin: 0;
|
||||
margin-bottom: 0.375rem;
|
||||
|
||||
> li {
|
||||
padding-left: 0.625rem;
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected-time-slot {
|
||||
background-color: $background-color-selected;
|
||||
border: solid 1px #0070d1;
|
||||
color:#000;
|
||||
font-weight: 500;
|
||||
|
||||
:deep(.dropoff-label) {
|
||||
sup {
|
||||
top: .25rem;
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
& + .time-slot-drop-off-information {
|
||||
max-height: 12rem;
|
||||
transition: max-height 0.75s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-date-error {
|
||||
border: 1px solid #d93025;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -156,8 +156,8 @@ export default {
|
|||
&:disabled,
|
||||
&.disabled {
|
||||
background-color: $gray-100;
|
||||
color: $gray-500;
|
||||
filter: grayscale(100%);
|
||||
background-image: url(~@/assets/img/icons/select-disabled.png);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
&.dropdown-compact {
|
||||
|
|
|
|||
|
|
@ -402,6 +402,7 @@ input::-webkit-date-and-time-value {
|
|||
&:disabled,
|
||||
&.disabled {
|
||||
background-color: $gray-100;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -133,3 +133,20 @@ export function formatDate(date, formatter) {
|
|||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* @function toPossessive
|
||||
* @param {string | null} input
|
||||
* @returns {string}
|
||||
*/
|
||||
export function toPossessive(input) {
|
||||
if (input == null || input.trim().length === 0) {
|
||||
return input;
|
||||
}
|
||||
|
||||
if (input.toLowerCase().endsWith("s")) {
|
||||
return `${input}'`
|
||||
}
|
||||
|
||||
return `${input}'s`
|
||||
}
|
||||
|
|
@ -49,7 +49,7 @@ export default {
|
|||
vehicles: Array,
|
||||
vehicleSelected: Object,
|
||||
modelValue: String,
|
||||
cmsWidgetName: String,
|
||||
questionText: String,
|
||||
validationRules: String,
|
||||
isCarIdDifferent: Boolean,
|
||||
displayMatchedDifferentVehicleAlert: Boolean,
|
||||
|
|
@ -89,9 +89,6 @@ export default {
|
|||
.replaceAll('{custom:vinYmmsFound}', vinYmmsFound)
|
||||
.replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected);
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent('VehicleConfirmationQuestion', 'QuestionText');
|
||||
},
|
||||
selectedVehicleVin: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
|
|
@ -123,4 +120,8 @@ export default {
|
|||
#address-vehicles-question-alert p {
|
||||
margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
|
||||
}
|
||||
|
||||
:deep(div.list-button-content > span:first-child) {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -100,6 +100,9 @@ function setupMocks({
|
|||
if (contentName === 'ProvideVinAlert') {
|
||||
return 'ProvideVinAlertTestReturn';
|
||||
}
|
||||
if (contentName === 'VehicleConfirmationQuestion') {
|
||||
return 'VehicleConfirmationQuestionTestReturn';
|
||||
}
|
||||
return null;
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,15 +13,6 @@
|
|||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
class="mt-4" />
|
||||
<alert
|
||||
id="multiple-vehicles-alert"
|
||||
ref="alertFoundMultipleVehicles"
|
||||
cmsWidgetName="FoundMultipleVehicles"
|
||||
class="my-5"
|
||||
alertClass="alert-warning"
|
||||
:manualHeadline="AlertFoundMultipleVehiclesHeader"
|
||||
manualCopy=""
|
||||
:isDismissible="false" />
|
||||
<alert
|
||||
v-if="displayNoServiceAlert"
|
||||
ref="AlertNoService"
|
||||
|
|
@ -32,7 +23,7 @@
|
|||
<addressVehiclesQuestion
|
||||
ref="addressVehiclesQuestion"
|
||||
v-model="selectedVehicleVin"
|
||||
cmsWidgetName="VehicleConfirmationQuestion"
|
||||
:questionText="questionText"
|
||||
:vehicles="VehiclesForQuestions"
|
||||
:vehicleSelected="VehicleSelected"
|
||||
validationRules="vehicle-required"
|
||||
|
|
@ -164,10 +155,10 @@ export default {
|
|||
vehicleCount() {
|
||||
return this.VehiclesForQuestions.length;
|
||||
},
|
||||
AlertFoundMultipleVehiclesHeader() {
|
||||
questionText() {
|
||||
return this.getCmsContent(
|
||||
'FoundMultipleVehicles',
|
||||
'HeadlineText'
|
||||
'VehicleConfirmationQuestion',
|
||||
'QuestionText'
|
||||
).replaceAll('{custom:vehicleCount}', this.vehicleCount);
|
||||
},
|
||||
isTwoIdenticalYMMVehicleFound() {
|
||||
|
|
@ -186,7 +177,7 @@ export default {
|
|||
// Map API result data, to address-vehicles data structure
|
||||
const mappedData = this.VehiclesFromApi.map((v) => {
|
||||
const maskSymbol = '*';
|
||||
const vinStart = maskSymbol.repeat(v.vin.length - 6);
|
||||
const vinStart = maskSymbol.repeat(6);
|
||||
const vinEnd = v.vin.substring(v.vin.length - 6);
|
||||
return {
|
||||
vin: v.vin,
|
||||
|
|
@ -234,13 +225,6 @@ export default {
|
|||
} else {
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
}
|
||||
this.$refs.siteFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} `
|
||||
+ `${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model} ${this.forwardButtonCarStyle}`);
|
||||
} else {
|
||||
this.$refs.siteFooter.updateButtonText(this.getCmsContent(
|
||||
'SiteFooterWidget',
|
||||
'ForwardButtonText'
|
||||
));
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
inputId="state"
|
||||
class="form-group"
|
||||
:cmsWidgetName="widget.stateQuestion"
|
||||
:options="states"
|
||||
:options="getStates"
|
||||
isDisabled />
|
||||
<textboxQuestion
|
||||
ref="zipCodeQuestion"
|
||||
|
|
@ -135,8 +135,8 @@ import widgetFields from '@/constants/cms-widget-fields';
|
|||
import states from '@/constants/states';
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule('street-address-required', required(errorMessages.STREET_ADDRESS_REQUIRED));
|
||||
defineRule('city-required', required(errorMessages.CITY_REQUIRED));
|
||||
defineRule('street-address-required', required(errorMessages.SERVICE_ADDRESS_REQUIRED));
|
||||
defineRule('city-required', required(errorMessages.SERVICE_CITY_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: 'contact-details',
|
||||
|
|
@ -218,7 +218,13 @@ export default {
|
|||
},
|
||||
vehicleProtectedQuestionAnswers() {
|
||||
return this.getCmsContent(this.widget.vehicleProtectedQuestion, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS) || [];
|
||||
}
|
||||
},
|
||||
getStates() {
|
||||
return Object.keys(states).reduce((acc, key) => {
|
||||
acc[key] = states[key].toUpperCase();
|
||||
return acc;
|
||||
}, {});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isSameAsPolicyAddress(newValue) {
|
||||
|
|
|
|||
|
|
@ -144,6 +144,7 @@ describe('entry-page.vue', () => {
|
|||
TPAEnabled: true,
|
||||
ClientFullName: 'Full Name',
|
||||
ClientDisplayName: 'Display Name',
|
||||
ClientPossessiveName: 'Display Name\'s',
|
||||
ClaimRegistrationRequired: true,
|
||||
EnableNoCompQuote: true
|
||||
})
|
||||
|
|
@ -153,6 +154,7 @@ describe('entry-page.vue', () => {
|
|||
expect(issConfig.clientName).toBe('TestClient');
|
||||
expect(issConfig.clientFullName).toBe('Full Name');
|
||||
expect(issConfig.clientDisplayName).toBe('Display Name');
|
||||
expect(issConfig.clientPossessiveName).toBe('Display Name\'s');
|
||||
expect(issConfig.parentAccountNumber).toBe('12345');
|
||||
expect(issConfig.styleSheet).toBe('test-style');
|
||||
expect(issConfig.isCoverageEnabled).toBe(true);
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { getISSCookie, updateOrCreateISSCookie } from '@/helpers/cookie-helper.j
|
|||
import { useMainStore } from '@/store';
|
||||
import showIssLoadingModal from '@/helpers/loading-modal-helper';
|
||||
import applicationConfig from '@/constants/application-config';
|
||||
import { toPossessive } from '@/helpers/text-helper';
|
||||
|
||||
export default {
|
||||
name: 'entry-page',
|
||||
|
|
@ -144,6 +145,7 @@ export default {
|
|||
this.mainStore.issConfig.clientName = data.accountName;
|
||||
this.mainStore.issConfig.clientFullName = data.accountName; // Defaults to use the client name.
|
||||
this.mainStore.issConfig.clientDisplayName = data.accountName; // Defaults to use the client name.
|
||||
this.mainStore.issConfig.clientPossessiveName = toPossessive(data.accountName); // Defaults to use the client name.
|
||||
this.mainStore.issConfig.parentAccountNumber = data.parentAccountNumber;
|
||||
this.mainStore.issConfig.styleSheet = data.styleSheet;
|
||||
this.mainStore.issConfig.isCoverageEnabled = data.coverageEnabled;
|
||||
|
|
@ -163,6 +165,11 @@ export default {
|
|||
|
||||
if (clientFlags.ClientDisplayName != null) {
|
||||
this.mainStore.issConfig.clientDisplayName = clientFlags.ClientDisplayName;
|
||||
this.mainStore.issConfig.clientPossessiveName = toPossessive(clientFlags.ClientDisplayName);
|
||||
}
|
||||
|
||||
if (clientFlags.ClientPossessiveName != null) {
|
||||
this.mainStore.issConfig.clientPossessiveName = clientFlags.ClientPossessiveName;
|
||||
}
|
||||
|
||||
if (clientFlags.ClaimRegistrationRequired) {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<div class="fade-on-route-transition">
|
||||
<div class="justify-content-center">
|
||||
<siteHeader
|
||||
class="header"
|
||||
cmsWidgetName="SiteHeaderWidget" />
|
||||
</div>
|
||||
<div class="iss-heritage-container-width">
|
||||
|
|
@ -176,9 +175,7 @@ const getAvailableDates = async (
|
|||
storeAction.payload.endDate,
|
||||
storeAction.payload.shopAppointmentType,
|
||||
storeAction.payload.providerNumber
|
||||
).catch(() => {
|
||||
console.warn('Error fetching shop time slots...');
|
||||
});
|
||||
);
|
||||
} else if (storeAction.payload?.zipCodeOverride) {
|
||||
timeSlotsResponse = await useMainStore().getMobileTimeSlots(
|
||||
storeAction.payload.startDate,
|
||||
|
|
@ -343,7 +340,7 @@ export default {
|
|||
&& (((this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
|
||||
|| this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)
|
||||
&& serviceLocationToUse.mobileProviderNumber)
|
||||
|| (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP
|
||||
|| ((this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP || this.selectedAppointmentType === AppointmentTypeStrings.DROP_OFF)
|
||||
&& (this.selectedProvider?.providerNumber || serviceLocationToUse.provider?.providerNumber)));
|
||||
|
||||
const damageInfo = useMainStore().order.damage.isRepair
|
||||
|
|
@ -652,8 +649,13 @@ export default {
|
|||
return;
|
||||
}
|
||||
|
||||
// Save service location then schedule and navigate forward
|
||||
await this.$refs.serviceLocation.forwardButtonAction();
|
||||
let appointmentTypeToUse = this.selectedAppointmentType;
|
||||
if (appointmentTypeToUse === AppointmentTypeStrings.IN_SHOP && this.selectedTimeSlotInfo.timeSlot?.isDropoff === true) {
|
||||
appointmentTypeToUse = AppointmentTypeStrings.DROP_OFF;
|
||||
}
|
||||
|
||||
// Save service location then save schedule then navigate forward
|
||||
await this.$refs.serviceLocation.forwardButtonAction(appointmentTypeToUse);
|
||||
this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
|
|
|
|||
|
|
@ -308,7 +308,7 @@ export default {
|
|||
}
|
||||
},
|
||||
selectedAppointmentType(newValue, oldValue) {
|
||||
if (this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && this.selectedProvider && this.availabilityRating === null) {
|
||||
if (this.isInshop && this.selectedProvider && this.availabilityRating === null) {
|
||||
this.refreshAvailabilityRating();
|
||||
|
||||
const appointmenTypeServiceLocationObj = {
|
||||
|
|
@ -336,7 +336,7 @@ export default {
|
|||
},
|
||||
selectedProvider(newProvider, oldProvider) {
|
||||
if (newProvider?.providerNumber !== oldProvider?.providerNumber || this.availabilityRating === null) {
|
||||
const appointmentIsInshop = this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP;
|
||||
const appointmentIsInshop = this.isInshop;
|
||||
const returnedProvider = {
|
||||
provider: newProvider,
|
||||
refreshDatePicker: appointmentIsInshop && oldProvider?.providerNumber !== null
|
||||
|
|
@ -358,7 +358,7 @@ export default {
|
|||
await this.setData(initialData);
|
||||
this.initializingData = false;
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
async forwardButtonAction(appointmentType) {
|
||||
let provider = this.selectedProvider;
|
||||
this.mainStore.updateMobileFee(null);
|
||||
if (this.isMobile) {
|
||||
|
|
@ -382,7 +382,7 @@ export default {
|
|||
state: this.state,
|
||||
zipCode: this.zipCode,
|
||||
zipCodeCtu: this.zipCodeCtu,
|
||||
appointmentType: this.selectedAppointmentType,
|
||||
appointmentType: appointmentType || this.selectedAppointmentType,
|
||||
provider
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -61,7 +61,6 @@ export default {
|
|||
.vin-toggle {
|
||||
&::after {
|
||||
content: "";
|
||||
transition: all 0.5s ease;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
margin-left: 0.5rem;
|
||||
|
|
@ -72,9 +71,6 @@ export default {
|
|||
&.active::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
a {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#vin-location-detail-wrapper {
|
||||
|
|
|
|||
|
|
@ -247,6 +247,7 @@ export const getDefaultState = () => ({
|
|||
clientName: 'Generic Insurance', // this is the default and will be overriden by the client's name
|
||||
clientFullName: 'Generic Insurance', // this is the default and will be overriden by the client's name or client's full name.
|
||||
clientDisplayName: 'Generic Insurance', // this is the default and will be overridden by the client's name or client display name.
|
||||
clientPossessiveName: 'Generic Insurance\'s', // this is the default and will be overridden by the client's name or client display name converted to possessive or the clients possessive name.
|
||||
clientHeader: {},
|
||||
styleSheet: '', // Stylesheet used by the client.
|
||||
parentAccountNumber: 0, // Parent account number used by the client.
|
||||
|
|
@ -965,7 +966,8 @@ export const useMainStore = defineStore({
|
|||
providerNumber,
|
||||
startDate,
|
||||
endDate,
|
||||
shopAppointmentType,
|
||||
shopAppointmentType: (shopAppointmentType === AppointmentTypeStrings.IN_SHOP
|
||||
|| shopAppointmentType === AppointmentTypeStrings.DROP_OFF) ? 'InShopOrDropoff' : shopAppointmentType,
|
||||
applicationName: applicationConfig.APPLICATION_NAME,
|
||||
billToAccountNumber: this.billToAccountNumber,
|
||||
parentAccountNumber: this.order.parentAccountNumber, // this.payment.parentAccountNumber,
|
||||
|
|
@ -1605,7 +1607,7 @@ export const useMainStore = defineStore({
|
|||
order.customer.firstName = data?.customer?.firstName;
|
||||
order.customer.lastName = data?.customer?.lastName;
|
||||
order.customer.emailAddress = data?.customer?.emailAddress;
|
||||
|
||||
|
||||
order.contactInfo.extension = data?.customer?.homePhone?.slice(10);
|
||||
order.contactInfo.homePhone = data?.customer?.homePhone?.slice(0, 10);
|
||||
order.contactInfo.servicePhone = data?.customer?.servicePhone;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,12 @@
|
|||
alertClass,
|
||||
cssClassNameForCmsWidget,
|
||||
]">
|
||||
<div class="alert-header">
|
||||
<div
|
||||
class="alert-header"
|
||||
:class="{
|
||||
'collapsible-header': isCollapsible
|
||||
}"
|
||||
@click="toggleCollapse">
|
||||
<div class="alert-icon-container">
|
||||
<svg
|
||||
class="alert-icon"
|
||||
|
|
@ -35,8 +40,7 @@
|
|||
<button
|
||||
v-if="isCollapsible"
|
||||
class="btn-collapse"
|
||||
type="button"
|
||||
@click="toggleCollapse">
|
||||
type="button">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
|
|
@ -73,41 +77,44 @@
|
|||
<div
|
||||
v-show="alertCopy"
|
||||
:id="collapseId"
|
||||
class="alert-body show">
|
||||
<template
|
||||
v-for="paragraph in splitAlertCopyForParagraphTag"
|
||||
:key="paragraph">
|
||||
<p
|
||||
v-if="!doesCopyContainRouterLink(paragraph) && !doesCopyContainTextLink(paragraph)"
|
||||
class="m-0 text-body"
|
||||
v-html="paragraph"></p>
|
||||
<p
|
||||
v-else
|
||||
class="m-0 text-body">
|
||||
<template v-if="doesCopyContainRouterLink(paragraph)">
|
||||
<textBlock
|
||||
:customText="paragraph"
|
||||
class="mb-1"
|
||||
:marginTopSizeOverride="0" />
|
||||
</template>
|
||||
<template
|
||||
v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)"
|
||||
class="collapse"
|
||||
:class="{ 'show': !startCollapsed }">
|
||||
<div class="alert-body">
|
||||
<template
|
||||
v-for="paragraph in splitAlertCopyForParagraphTag"
|
||||
:key="paragraph">
|
||||
<p
|
||||
v-if="!doesCopyContainRouterLink(paragraph) && !doesCopyContainTextLink(paragraph)"
|
||||
class="m-0 text-body"
|
||||
v-html="paragraph"></p>
|
||||
<p
|
||||
v-else
|
||||
:key="copy">
|
||||
<span v-if="doesCopyContainTextLink(copy)">
|
||||
<textLink
|
||||
linkType="text"
|
||||
:text="getRouterLinkDisplayTextFromCopy(copy)"
|
||||
href="#!"
|
||||
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
|
||||
@clickEvent="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))" />
|
||||
</span>
|
||||
<span
|
||||
class="m-0 text-body">
|
||||
<template v-if="doesCopyContainRouterLink(paragraph)">
|
||||
<textBlock
|
||||
:customText="paragraph"
|
||||
class="mb-1"
|
||||
:marginTopSizeOverride="0" />
|
||||
</template>
|
||||
<template
|
||||
v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)"
|
||||
v-else
|
||||
v-html="copy"></span>
|
||||
</template>
|
||||
</p>
|
||||
</template>
|
||||
:key="copy">
|
||||
<span v-if="doesCopyContainTextLink(copy)">
|
||||
<textLink
|
||||
linkType="text"
|
||||
:text="getRouterLinkDisplayTextFromCopy(copy)"
|
||||
href="#!"
|
||||
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
|
||||
@clickEvent="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))" />
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
v-html="copy"></span>
|
||||
</template>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -208,7 +215,7 @@ export default {
|
|||
mounted() {
|
||||
this.ensureAlertIsInViewPort();
|
||||
if (this.isCollapsible) {
|
||||
this.collapseElement = Collapse.getOrCreateInstance(document.getElementById(this.collapseId), { toggle: this.startCollapsed });
|
||||
this.collapseElement = Collapse.getOrCreateInstance(document.getElementById(this.collapseId), { toggle: false });
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -236,6 +243,9 @@ export default {
|
|||
);
|
||||
},
|
||||
toggleCollapse() {
|
||||
if (!this.isCollapsible) {
|
||||
return;
|
||||
}
|
||||
this.collapsed = !this.collapsed;
|
||||
if (this.collapsed) {
|
||||
this.collapseElement.hide();
|
||||
|
|
@ -268,6 +278,9 @@ export default {
|
|||
padding: .75rem 1rem .75rem 1rem;
|
||||
font-weight: 600;
|
||||
color: $black;
|
||||
&.collapsible-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.alert-icon-container {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in a new issue