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

Merge pull request #648 from Safelite/SSR-1201-style-updates

Browse source 
SSR-1201 style updates.
This commit is contained in:
bmauger 2024-04-26 09:08:59 -04:00 committed by GitHub
commit 9ca2c7b240
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 225 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,21 +2,21 @@
<div <div
class="date-picker text-center" class="date-picker text-center"
:class="[calendarViewDirection, { 'has-error': errors.length > 0 }]"> :class="[calendarViewDirection, { 'has-error': errors.length > 0 }]">
<fieldset <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
id="date-picker-fieldset" <legend class="sr-only">Select a day and time</legend>
ref="datePickerFieldset">
<legend class="sr-only">
Select a day and time
</legend>
<div <div
v-for="month in months" v-for="month in months"
:id="`${month.monthLabel}-${month.yearNum?.toString()}`" :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
:key="`${month.monthLabel}-${month.yearNum?.toString()}`" :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
class="calendar-grid-container" class="calendar-grid-container"
:class="[ :class="[
hideSomeDaysForInitialView ? 'partial-month-initial-view' : '', hideSomeDaysForInitialView
month.monthClass,]"> ? 'partial-month-initial-view'
<div class="month-year body-small d-flex align-items-center small"> : '',
month.monthClass
]">
<div
class="month-year body-small d-flex align-items-center small">
{{ month.monthLabel }} {{ month.yearNum?.toString() }} {{ month.monthLabel }} {{ month.yearNum?.toString() }}
</div> </div>
<div <div
@ -58,9 +58,12 @@
:key="date.inputValue" :key="date.inputValue"
class="grid-item radio-wrapper" class="grid-item radio-wrapper"
:class="[ :class="[
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '', date.dateNum === 1
? 'first-day-' + month.startDateDayIndex
: '',
date.dayClasses, date.dayClasses,
date.isSelectable ? 'selectable-day' : '',]"> date.isSelectable ? 'selectable-day' : ''
]">
<input <input
:id="`${month.monthLabel}-${date.dateNum.toString()}`" :id="`${month.monthLabel}-${date.dateNum.toString()}`"
v-model="selectedDate" v-model="selectedDate"
@ -70,7 +73,8 @@
:value="date.inputValue" :value="date.inputValue"
@click="fireDateSelectedEvent" @click="fireDateSelectedEvent"
@keypress.enter="fireDateSelectedEvent" /> @keypress.enter="fireDateSelectedEvent" />
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`"> <label
:for="`${month.monthLabel}-${date.dateNum.toString()}`">
<span>{{ date.dateNum.toString() }}</span> <span>{{ date.dateNum.toString() }}</span>
</label> </label>
</div> </div>
@ -79,16 +83,15 @@
:class="[!isLoading ? 'date-picker-hidden' : '']" :class="[!isLoading ? 'date-picker-hidden' : '']"
loaderColor="blue" loaderColor="blue"
loaderPosition="center" /> loaderPosition="center" />
<div <div id="date-of-month-error" class="row form-test-error">
id="date-of-month-error" <ErrorMessage :name="customComponentId" class="small mt-1">
class="row form-test-error">
<ErrorMessage
:name="customComponentId"
class="small mt-1">
</ErrorMessage> </ErrorMessage>
</div> </div>
<button <button
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton" v-if="
calendarViewDirection === 'future' &&
!disableViewMoreDatesButton
"
id="viewMoreDates" id="viewMoreDates"
type="button" type="button"
class="btn btn-link" class="btn btn-link"
@ -106,8 +109,15 @@ import loader from '@/ux-components/loader/loader.vue';
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
import { useField, ErrorMessage } from 'vee-validate'; import { useField, ErrorMessage } from 'vee-validate';
import { deepClone } from '@/helpers/object-helper'; import { deepClone } from '@/helpers/object-helper';
import { convertDateStringToDate, convertDateToDateString } from '@/helpers/date-helper'; import {
import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from './mixins/constants'; convertDateStringToDate,
convertDateToDateString
} from '@/helpers/date-helper';
import {
TIMINGFUNC_MAP,
BUFFER_OFFSET,
MONTHS_OF_YEAR
} from './mixins/constants';
import { selectableDaysOptions, requiredParameter } from './mixins/helpers'; import { selectableDaysOptions, requiredParameter } from './mixins/helpers';
export default { export default {
@ -161,8 +171,15 @@ export default {
initialValue initialValue
}; };
const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } = const {
useField(componentId, props.validationRules, fieldOptions); errorMessage,
handleBlur,
handleChange,
meta,
validate,
errors,
resetField
} = useField(componentId, props.validationRules, fieldOptions);
return { return {
componentId, componentId,
@ -187,7 +204,10 @@ export default {
}, },
computed: { computed: {
todayString() { todayString() {
return this.todayOverrideDateString || convertDateToDateString(new Date()); return (
this.todayOverrideDateString ||
convertDateToDateString(new Date())
);
}, },
todayDayIndex() { todayDayIndex() {
return convertDateStringToDate(this.todayString).getDay(); return convertDateStringToDate(this.todayString).getDay();
@ -268,17 +288,27 @@ export default {
}, },
getMonthEnd(dateStr) { getMonthEnd(dateStr) {
// convert string to date, do date calc, then return a string back // convert string to date, do date calc, then return a string back
const date = new Date(dateStr.split('-')[0], parseInt(dateStr.split('-')[1], 10), 0); const date = new Date(
dateStr.split('-')[0],
parseInt(dateStr.split('-')[1], 10),
0
);
return convertDateToDateString(date); return convertDateToDateString(date);
}, },
getInitialViewWeeks(todayString, initialViewRowsToShow, preSelectedDateString) { getInitialViewWeeks(
todayString,
initialViewRowsToShow,
preSelectedDateString
) {
// TODO: this only is for future direction; need to create logic for past direction // TODO: this only is for future direction; need to create logic for past direction
const weeks = []; const weeks = [];
let weekStartDate = this.getWeekStartDate(todayString); let weekStartDate = this.getWeekStartDate(todayString);
let weekEndDate = this.getWeekEndDate(todayString); let weekEndDate = this.getWeekEndDate(todayString);
if (preSelectedDateString) { if (preSelectedDateString) {
const preSelectedDateMonthEnd = this.getMonthEnd(preSelectedDateString); const preSelectedDateMonthEnd = this.getMonthEnd(
preSelectedDateString
);
let weekIncludesPreSelectedMonthEnd = false; let weekIncludesPreSelectedMonthEnd = false;
let i = 0; let i = 0;
while (!weekIncludesPreSelectedMonthEnd) { while (!weekIncludesPreSelectedMonthEnd) {
@ -287,10 +317,10 @@ export default {
weekEndDate = this.getWeekEndDate(weekStartDate); weekEndDate = this.getWeekEndDate(weekStartDate);
if ( if (
(preSelectedDateMonthEnd > weekStartDate (preSelectedDateMonthEnd > weekStartDate &&
&& preSelectedDateMonthEnd < weekEndDate) preSelectedDateMonthEnd < weekEndDate) ||
|| preSelectedDateMonthEnd === weekStartDate preSelectedDateMonthEnd === weekStartDate ||
|| preSelectedDateMonthEnd === weekEndDate preSelectedDateMonthEnd === weekEndDate
) { ) {
weekEndDate = preSelectedDateMonthEnd; weekEndDate = preSelectedDateMonthEnd;
weekIncludesPreSelectedMonthEnd = true; weekIncludesPreSelectedMonthEnd = true;
@ -317,7 +347,9 @@ export default {
} }
// If any of these weeks is split between two months, then make them 2 separate "weeks" // If any of these weeks is split between two months, then make them 2 separate "weeks"
// (a week split between two months is considered 2 weeks per business requirements) // (a week split between two months is considered 2 weeks per business requirements)
const hasSplitWeek = (week) => (week.weekStartDate.split('-')[1] !== week.weekEndDate.split('-')[1]); const hasSplitWeek = (week) =>
week.weekStartDate.split('-')[1] !==
week.weekEndDate.split('-')[1];
const splitWeekIndex = weeks.findIndex(hasSplitWeek); const splitWeekIndex = weeks.findIndex(hasSplitWeek);
if (splitWeekIndex > -1) { if (splitWeekIndex > -1) {
@ -326,7 +358,9 @@ export default {
let switchToWeek2 = false; let switchToWeek2 = false;
for (let j = 0; j < 7; j++) { for (let j = 0; j < 7; j++) {
const newDate = convertDateStringToDate(weeks[splitWeekIndex].weekStartDate); const newDate = convertDateStringToDate(
weeks[splitWeekIndex].weekStartDate
);
newDate.setDate(newDate.getDate() + j); newDate.setDate(newDate.getDate() + j);
if (newDate.getDate() === 1) switchToWeek2 = true; if (newDate.getDate() === 1) switchToWeek2 = true;
if (switchToWeek2) { if (switchToWeek2) {
@ -377,8 +411,10 @@ export default {
} else { } else {
todayDateString = convertDateToDateString(new Date()); todayDateString = convertDateToDateString(new Date());
} }
if (config.selectableDatesSetting === 'past') calendarViewDirection = 'past'; if (config.selectableDatesSetting === 'past')
if (config.selectableDatesSetting === 'custom') calendarViewDirection = 'future'; calendarViewDirection = 'past';
if (config.selectableDatesSetting === 'custom')
calendarViewDirection = 'future';
const currentMonthEnd = this.getMonthEnd(todayDateString); const currentMonthEnd = this.getMonthEnd(todayDateString);
// TODO - set up currentMonthStart if direction is PAST: // TODO - set up currentMonthStart if direction is PAST:
@ -389,18 +425,24 @@ export default {
config.preSelectedDate config.preSelectedDate
); );
const initialViewStartDate = todayDateString; const initialViewStartDate = todayDateString;
const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate; const initialViewEndDate =
initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
if (!config.preSelectedDate) { if (!config.preSelectedDate) {
const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.split('-')[1]; const firstSaturdayMonth =
initialViewWeeks[0].weekEndDate.split('-')[1];
const lastSundayMonth = const lastSundayMonth =
initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.split('-')[1]; initialViewWeeks[
initialViewWeeks.length - 1
].weekStartDate.split('-')[1];
if (calendarViewDirection === 'future') { if (calendarViewDirection === 'future') {
if (firstSaturdayMonth !== lastSundayMonth) { if (firstSaturdayMonth !== lastSundayMonth) {
hideSomeDaysForInitialView = true; hideSomeDaysForInitialView = true;
} }
if (initialViewStartDate.split('-')[1] === lastSundayMonth) { if (
initialViewStartDate.split('-')[1] === lastSundayMonth
) {
hideSecondMonth = true; hideSecondMonth = true;
if (currentMonthEnd > initialViewEndDate) { if (currentMonthEnd > initialViewEndDate) {
// should part of 1st month be hidden? // should part of 1st month be hidden?
@ -441,9 +483,11 @@ export default {
const direction = config.calendarViewDirection; const direction = config.calendarViewDirection;
const monthsAfterToLoadOffset = 6; const monthsAfterToLoadOffset = 6;
const monthsBeforeToLoadOffset = 36; const monthsBeforeToLoadOffset = 36;
config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => { config.initialShopTimeSlotsResponse.days.forEach(
this.selectableDatesData.push(selectableDate); (selectableDate) => {
}); this.selectableDatesData.push(selectableDate);
}
);
// GENERATE MONTHS AND PUSH THEM INTO ARRAY // GENERATE MONTHS AND PUSH THEM INTO ARRAY
const months = []; const months = [];
@ -479,10 +523,11 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
// Advance to month // Advance to month
const monthToShow = this.months.find((month) => const monthToShow = this.months.find((month) =>
month.monthClass.includes('month-preselected')); month.monthClass.includes('month-preselected')
);
if ( if (
monthToShow.monthClass.includes('month-preselected') monthToShow.monthClass.includes('month-preselected') &&
&& monthToShow.monthClass.includes('last-available-month') monthToShow.monthClass.includes('last-available-month')
) { ) {
// disable View More dates button if the preSelectedDate in the last available month // disable View More dates button if the preSelectedDate in the last available month
this.disableViewMoreDatesButton = true; this.disableViewMoreDatesButton = true;
@ -506,8 +551,13 @@ export default {
this.hideSomeDaysForInitialView (string) this.hideSomeDaysForInitialView (string)
*/ */
let monthNum = convertDateStringToDate(this.todayString).getMonth() + offset + 1; let monthNum =
let yearNum = convertDateStringToDate(this.todayString).getFullYear(); convertDateStringToDate(this.todayString).getMonth() +
offset +
1;
let yearNum = convertDateStringToDate(
this.todayString
).getFullYear();
const { calendarViewDirection } = options; const { calendarViewDirection } = options;
if (calendarViewDirection === 'future' && offset > 0) { if (calendarViewDirection === 'future' && offset > 0) {
while (monthNum > 12) { while (monthNum > 12) {
@ -532,7 +582,11 @@ export default {
offset === 0 && calendarViewDirection === 'future' offset === 0 && calendarViewDirection === 'future'
? this.currentWeekStartDateNum ? this.currentWeekStartDateNum
: 1; : 1;
const monthStartDate = new Date(yearNum, monthNum - 1, monthStartDateNum); const monthStartDate = new Date(
yearNum,
monthNum - 1,
monthStartDateNum
);
const startDateDayIndex = monthStartDate.getDay(); const startDateDayIndex = monthStartDate.getDay();
let monthClass = ''; let monthClass = '';
@ -540,17 +594,18 @@ export default {
let monthEndDateNum = monthEndDate.getDate(); let monthEndDateNum = monthEndDate.getDate();
if ( if (
offset === 0 offset === 0 &&
&& calendarViewDirection === 'past' calendarViewDirection === 'past' &&
&& monthEndDateNum > this.currentWeekEndDateNum monthEndDateNum > this.currentWeekEndDateNum
) { ) {
monthEndDateNum = this.currentWeekEndDateNum; monthEndDateNum = this.currentWeekEndDateNum;
} }
if (options.preSelectedDate) { if (options.preSelectedDate) {
if ( if (
monthStartDate.getFullYear() === preSelectedDateObj.getFullYear() monthStartDate.getFullYear() ===
&& monthStartDate.getMonth() === preSelectedDateObj.getMonth() preSelectedDateObj.getFullYear() &&
monthStartDate.getMonth() === preSelectedDateObj.getMonth()
) { ) {
monthClass += ' month-preselected'; monthClass += ' month-preselected';
} else if (monthStartDate > preSelectedDateObj) { } else if (monthStartDate > preSelectedDateObj) {
@ -563,14 +618,14 @@ export default {
} }
if ( if (
Math.abs(offset) === options.monthsAfterToLoadOffset Math.abs(offset) === options.monthsAfterToLoadOffset &&
&& calendarViewDirection === 'future' calendarViewDirection === 'future'
) { ) {
monthClass += ' last-available-month'; monthClass += ' last-available-month';
} }
if ( if (
Math.abs(offset) === options.monthsBeforeToLoadOffset Math.abs(offset) === options.monthsBeforeToLoadOffset &&
&& calendarViewDirection === 'past' calendarViewDirection === 'past'
) { ) {
// TODO - re-check this logic if past direction // TODO - re-check this logic if past direction
monthClass += ' last-available-month'; monthClass += ' last-available-month';
@ -579,29 +634,36 @@ export default {
// populate dates array // populate dates array
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) { for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
let dayClasses = ''; let dayClasses = '';
const dateString = const dateString = `${yearNum.toString()}-${`0${monthNum}`.slice(
`${yearNum.toString() -2
}-${ )}-${`0${i}`.slice(-2)}`;
(`0${monthNum}`).slice(-2)
}-${
(`0${i}`).slice(-2)}`;
if (offset === 0 && i === this.todayDateNum) { if (offset === 0 && i === this.todayDateNum) {
dayClasses += ' current-day'; dayClasses += ' current-day';
} }
if (offset === 0 && i < this.todayDateNum && calendarViewDirection === 'future') { if (
offset === 0 &&
i < this.todayDateNum &&
calendarViewDirection === 'future'
) {
dayClasses += ' unavailable-day'; dayClasses += ' unavailable-day';
} }
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === 'past') { if (
offset === 0 &&
i > this.todayDateNum &&
calendarViewDirection === 'past'
) {
dayClasses += ' unavailable-day'; dayClasses += ' unavailable-day';
} }
if (convertDateStringToDate(dateString).getDay() === 0) { if (convertDateStringToDate(dateString).getDay() === 0) {
dayClasses += ' sunday'; dayClasses += ' sunday';
} }
if ( if (
this.hideSomeDaysForInitialView this.hideSomeDaysForInitialView &&
&& convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum convertDateStringToDate(initialViewEndDate).getMonth() +
&& convertDateStringToDate(initialViewEndDate).getDate() < i 1 ===
monthNum &&
convertDateStringToDate(initialViewEndDate).getDate() < i
) { ) {
dayClasses += ' day-hidden'; dayClasses += ' day-hidden';
isMonthThatHidesSomeDaysForInitialView = true; isMonthThatHidesSomeDaysForInitialView = true;
@ -611,7 +673,9 @@ export default {
dayClasses, dayClasses,
inputValue: dateString, inputValue: dateString,
isSelectable: isSelectable:
this.selectableDatesData.findIndex((date) => date.date === dateString) > -1 this.selectableDatesData.findIndex(
(date) => date.date === dateString
) > -1
}; };
dates.push(dateObject); dates.push(dateObject);
} }
@ -619,7 +683,9 @@ export default {
const monthToAdd = { const monthToAdd = {
monthLabel: MONTHS_OF_YEAR[monthNum - 1], monthLabel: MONTHS_OF_YEAR[monthNum - 1],
monthIndex: monthNum, monthIndex: monthNum,
monthString: `${MONTHS_OF_YEAR[monthNum - 1]}-${yearNum?.toString()}`, monthString: `${
MONTHS_OF_YEAR[monthNum - 1]
}-${yearNum?.toString()}`,
yearNum, yearNum,
dates, dates,
startDateDayIndex, startDateDayIndex,
@ -634,21 +700,26 @@ export default {
let monthStartDateNum = 0; let monthStartDateNum = 0;
if (this.hideSomeDaysForInitialView) { if (this.hideSomeDaysForInitialView) {
monthToShow = this.months.find(({ isMonthThatHidesSomeDaysForInitialView }) => monthToShow = this.months.find(
isMonthThatHidesSomeDaysForInitialView); ({ isMonthThatHidesSomeDaysForInitialView }) =>
isMonthThatHidesSomeDaysForInitialView
);
// find the first day-hidden to become the next api call start date // find the first day-hidden to become the next api call start date
monthStartDateNum = monthStartDateNum =
monthToShow.dates.find(({ dayClasses }) => dayClasses.includes('day-hidden')) monthToShow.dates.find(({ dayClasses }) =>
.dateNum - 1; dayClasses.includes('day-hidden')
).dateNum - 1;
} else { } else {
if (this.calendarViewDirection === 'future') { if (this.calendarViewDirection === 'future') {
monthToShow = this.months.find((month) => monthToShow = this.months.find((month) =>
month.monthClass.includes('month-hidden')); month.monthClass.includes('month-hidden')
);
} }
if (this.calendarViewDirection === 'past') { if (this.calendarViewDirection === 'past') {
// TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC // TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
monthToShow = this.months.find((month) => monthToShow = this.months.find((month) =>
month.monthClass.includes('month-hidden')); month.monthClass.includes('month-hidden')
);
} }
} }
if (monthToShow) { if (monthToShow) {
@ -659,22 +730,29 @@ export default {
); );
this.isLoading = false; this.isLoading = false;
this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
monthToShow.monthClass = monthToShow.monthClass.replace(' month-hidden', ''); monthToShow.monthClass = monthToShow.monthClass.replace(
' month-hidden',
''
);
this.scrollToElement(monthToShow.monthString); this.scrollToElement(monthToShow.monthString);
if (monthToShow.monthClass.includes('last-available-month')) this.disableViewMoreDatesButton = true; if (monthToShow.monthClass.includes('last-available-month'))
this.disableViewMoreDatesButton = true;
} }
}, },
async updateSelectableDates(monthStart, monthEnd) { async updateSelectableDates(monthStart, monthEnd) {
const moreSelectableDates = await this.customSelectableDatesCallback( const moreSelectableDates =
monthStart, await this.customSelectableDatesCallback(
monthEnd, monthStart,
this.mainStore.order.serviceLocation.appointmentType, monthEnd,
this.mainStore.order.serviceLocation.provider.providerNumber this.mainStore.order.serviceLocation.appointmentType,
); this.mainStore.order.serviceLocation.provider.providerNumber
);
moreSelectableDates.days.forEach((selectableDate) => { moreSelectableDates.days.forEach((selectableDate) => {
const index = this.selectableDatesData.findIndex((dateObj) => dateObj.date === selectableDate.date); const index = this.selectableDatesData.findIndex(
(dateObj) => dateObj.date === selectableDate.date
);
if (index === -1) this.selectableDatesData.push(selectableDate); if (index === -1) this.selectableDatesData.push(selectableDate);
this.months.forEach((month) => { this.months.forEach((month) => {
// TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above? // TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
@ -687,7 +765,7 @@ export default {
}); });
}, },
scrollToElement(elementId, duration = 800, easing = 'ease-in-out') { scrollToElement(elementId, duration = 800, easing = 'ease-in-out') {
const wrapper = document.querySelector('.page-container-grouped-styles'); const wrapper = document.querySelector('.fade-on-route-transition');
const target = document.getElementById(elementId); const target = document.getElementById(elementId);
const initY = wrapper.scrollTop; const initY = wrapper.scrollTop;
const wrapperRect = wrapper.getBoundingClientRect(); const wrapperRect = wrapper.getBoundingClientRect();
@ -713,7 +791,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/styles/ux-variables-svg-strings.scss"; @import '@/styles/ux-variables-svg-strings.scss';
.date-picker-hidden { .date-picker-hidden {
opacity: 0; opacity: 0;
@ -821,7 +899,7 @@ export default {
opacity: 1; opacity: 1;
transition: height ease 250ms, opacity ease 250ms; transition: height ease 250ms, opacity ease 250ms;
input[type="radio"] { input[type='radio'] {
position: absolute; //override bootstrap position: absolute; //override bootstrap
height: 0; height: 0;
opacity: 0; opacity: 0;
@ -929,7 +1007,7 @@ export default {
&.unavailable-day:not(&.sunday) { &.unavailable-day:not(&.sunday) {
label { label {
&::before { &::before {
content: ""; content: '';
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: -1rem; left: -1rem;
@ -945,7 +1023,7 @@ export default {
color: $black; color: $black;
&:after { &:after {
content: ""; content: '';
width: 0.25rem; width: 0.25rem;
height: 0.25rem; height: 0.25rem;
border-radius: 50%; border-radius: 50%;
@ -997,7 +1075,7 @@ export default {
justify-content: flex-end; justify-content: flex-end;
button { button {
&:after { &:after {
content: ""; content: '';
position: absolute; position: absolute;
width: 7px; width: 7px;
height: 12px; height: 12px;
@ -1011,7 +1089,7 @@ export default {
justify-content: flex-end; justify-content: flex-end;
button { button {
&:after { &:after {
content: ""; content: '';
position: absolute; position: absolute;
width: 7px; width: 7px;
height: 12px; height: 12px;

20
src/digital-components/modal/modal.vue
View file

@ -8,7 +8,7 @@
aria-hidden="true" aria-hidden="true"
v-on="{ v-on="{
'hidden.bs.modal': onModalClosed, 'hidden.bs.modal': onModalClosed,
'shown.bs.modal': onModalOpened, 'shown.bs.modal': onModalOpened
}"> }">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
@ -56,19 +56,19 @@ export default {
// eslint-disable-next-line vue/multi-word-component-names // eslint-disable-next-line vue/multi-word-component-names
name: 'modal', name: 'modal',
components: { components: {
modalButtonMain, modalButtonMain
}, },
props: { props: {
modalId: String, modalId: String,
headerText: String, headerText: String,
footerButtonText: String, footerButtonText: String,
onModalOpenedCallback: { onModalOpenedCallback: {
type: Function, type: Function
}, },
onModalClosedCallback: { onModalClosedCallback: {
type: Function, type: Function
}, },
isButtonDisabled: Boolean, isButtonDisabled: Boolean
}, },
emits: ['footer-button-event', 'isModalOpened'], emits: ['footer-button-event', 'isModalOpened'],
setup(props) { setup(props) {
@ -83,7 +83,7 @@ export default {
modalId, modalId,
meta, meta,
validate, validate,
resetForm, resetForm
}; };
}, },
computed: { computed: {
@ -92,7 +92,7 @@ export default {
return !this.meta.valid; return !this.meta.valid;
} }
return !this.meta.dirty || !this.meta.valid; return !this.meta.dirty || !this.meta.valid;
}, }
}, },
methods: { methods: {
async validateAndEmit() { async validateAndEmit() {
@ -126,8 +126,8 @@ export default {
); );
modal?.hide(); modal?.hide();
this.$emit('isModalOpened', false); this.$emit('isModalOpened', false);
}, }
}, }
}; };
</script> </script>
@ -163,6 +163,8 @@ export default {
width: 100%; width: 100%;
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
border-radius: 0;
background-color: $gray-100;
} }
&.modal-component { &.modal-component {
.modal-dialog { .modal-dialog {

6
src/iss-components/site-header/site-header.vue
View file

@ -12,7 +12,7 @@
</div> </div>
<alert <alert
v-if="displayGlobalAlert" v-if="displayGlobalAlert"
class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0" class="rounded-0 w-100 border-0 shadow-sm start-0 my-3"
cmsWidgetName="GlobalAlert" cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlertMessage.messageHeadline" :manualHeadline="globalAlertMessage.messageHeadline"
:manualCopy="globalAlertMessage.messageCopy" :manualCopy="globalAlertMessage.messageCopy"
@ -134,10 +134,6 @@ export default {
height: 56px; height: 56px;
position: relative; position: relative;
} }
.alert {
left: 0;
top: 72px;
}
#siteHeaderImage { #siteHeaderImage {
width: 7.125rem; width: 7.125rem;
height: auto; height: auto;

30
src/layouts/order-confirmation/order-confirmation.vue
View file

@ -4,10 +4,14 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="page-container-grouped-styles"> <div class="container-fluid fade-on-route-transition">
<div class="fade-on-route-transition position-relative"> <div class="row justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="col-md-6 px-0 px-md-2">
<div class="main-content-container"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="text-center text-color--black pt-5 pb-5 fs-5"> <div class="text-center text-color--black pt-5 pb-5 fs-5">
<img :src="orderConfirmationImage" /> <img :src="orderConfirmationImage" />
<span <span
@ -86,7 +90,7 @@ import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
// Supporting files // Supporting files
import { import {
fetchCmsContentForPage, fetchCmsContentForPage,
processIfStatements, processIfStatements
} from '@/helpers/cms-content-helper'; } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate'; import { Form } from 'vee-validate';
@ -96,7 +100,7 @@ import {
get12HourTimeFormat, get12HourTimeFormat,
get12HourTimeMobileFormat, get12HourTimeMobileFormat,
convertDateStringToDate, convertDateStringToDate,
getDisplayTextForDurationLength, getDisplayTextForDurationLength
} from '@/helpers/date-helper.js'; } from '@/helpers/date-helper.js';
import { toTitleCase } from '@/helpers/text-helper.js'; import { toTitleCase } from '@/helpers/text-helper.js';
import { AppointmentTypeStrings } from '@/constants/schedule-constants'; import { AppointmentTypeStrings } from '@/constants/schedule-constants';
@ -111,7 +115,7 @@ export default {
vehicleBanner, vehicleBanner,
siteFooter, siteFooter,
addToCalendar, addToCalendar,
cartDropdown, cartDropdown
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -123,8 +127,8 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, }
]; ];
// use resultMap to populate layout content. // use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -186,7 +190,7 @@ export default {
return dateObject.toLocaleDateString('en-us', { return dateObject.toLocaleDateString('en-us', {
weekday: 'long', weekday: 'long',
month: 'long', month: 'long',
day: 'numeric', day: 'numeric'
}); });
}, },
appointmentTimeFormatted() { appointmentTimeFormatted() {
@ -328,7 +332,7 @@ export default {
}, },
selectedVaps() { selectedVaps() {
return this.submittedOrder.lineItems.vaps; return this.submittedOrder.lineItems.vaps;
}, }
}, },
mounted() { mounted() {
if (this.carrierUrl) { if (this.carrierUrl) {
@ -444,8 +448,8 @@ export default {
default: default:
return null; return null;
} }
}, }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -125,7 +125,7 @@ import { useMainStore } from '@/store';
import { import {
getPricedMobileFeePart, getPricedMobileFeePart,
getServiceabilityDetails, getServiceabilityDetails,
getZipCodeData, getZipCodeData
} from '@/helpers/service-location-helper'; } from '@/helpers/service-location-helper';
// Import Component // Import Component
@ -168,7 +168,7 @@ export default {
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
serviceZipModalQuestion, serviceZipModalQuestion,
shopQuestion, shopQuestion
}, },
mixins: [baseFormMixin], mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -190,24 +190,24 @@ export default {
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, },
{ {
resultKey: 'mobileFeePart', resultKey: 'mobileFeePart',
promise: mobileFeePartPromise, promise: mobileFeePartPromise
}, },
{ {
resultKey: 'serviceabilityDetails', resultKey: 'serviceabilityDetails',
promise: serviceabilityDetailsPromise, promise: serviceabilityDetailsPromise
}, },
{ {
resultKey: 'shopQuestionInitialData', resultKey: 'shopQuestionInitialData',
promise: shopQuestionInitialDataPromise, promise: shopQuestionInitialDataPromise
}, },
{ {
resultKey: 'zipCodeData', resultKey: 'zipCodeData',
promise: zipCodeData, promise: zipCodeData
}, }
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -245,7 +245,7 @@ export default {
mobileFeePart: null, mobileFeePart: null,
mobileProviderNumber: null, mobileProviderNumber: null,
zipContainsMilitaryBase: false, zipContainsMilitaryBase: false,
zipCodeCtu: null, zipCodeCtu: null
}; };
}, },
computed: { computed: {
@ -262,7 +262,7 @@ export default {
get() { get() {
return { return {
state: this.state, state: this.state,
zipCode: this.zipCode, zipCode: this.zipCode
}; };
}, },
set(newValue) { set(newValue) {
@ -277,7 +277,7 @@ export default {
// eslint-disable-next-line vue/valid-next-tick // eslint-disable-next-line vue/valid-next-tick
this.$nextTick(); this.$nextTick();
}, }
}, },
mobileLocationQuestions: { mobileLocationQuestions: {
get() { get() {
@ -287,9 +287,9 @@ export default {
streetAddress2: this.streetAddress2, streetAddress2: this.streetAddress2,
city: this.city, city: this.city,
state: this.state, state: this.state,
zipCode: this.zipCode, zipCode: this.zipCode
}, },
isVehicleProtected: this.isVehicleProtected, isVehicleProtected: this.isVehicleProtected
}; };
}, },
set(newValue) { set(newValue) {
@ -313,7 +313,7 @@ export default {
} }
this.selectedProvider = null; this.selectedProvider = null;
} }
}, }
}, },
isServiceableMobile() { isServiceableMobile() {
if (this.isRecalibrationServiceableMobile !== null) { if (this.isRecalibrationServiceableMobile !== null) {
@ -383,7 +383,7 @@ export default {
return isNoComp || isITAC return isNoComp || isITAC
? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW ? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW
: this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW; : this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW;
}, }
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
@ -410,8 +410,8 @@ export default {
city: null, city: null,
state: null, state: null,
zipCode: null, zipCode: null,
zipCodeCtu: null, zipCodeCtu: null
}, }
}; };
} }
@ -424,7 +424,7 @@ export default {
zipCodeCtu: this.zipCodeCtu, zipCodeCtu: this.zipCodeCtu,
appointmentType: this.selectedAppointmentType, appointmentType: this.selectedAppointmentType,
isVehicleProtected: this.isVehicleProtected, isVehicleProtected: this.isVehicleProtected,
provider, provider
}); });
this.$router.navigate( this.$router.navigate(
@ -516,15 +516,15 @@ export default {
serviceabilityDetails.isGlassServiceableMobile; serviceabilityDetails.isGlassServiceableMobile;
this.isRecalibrationServiceableMobile = this.isRecalibrationServiceableMobile =
serviceabilityDetails.isRecalibrationServiceableMobile; serviceabilityDetails.isRecalibrationServiceableMobile;
}, }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$page-side-padding: 1.5rem; $page-side-padding: 1.5rem;
.page-container-grouped-styles { .fade-on-route-transition {
overflow: auto; overflow: auto;
.main-content-container { .main-content-container {

4
src/mixins/base-mixin.js
View file

@ -93,11 +93,11 @@ export default {
return ((amountDue * 100) / 100).toFixed(2); return ((amountDue * 100) / 100).toFixed(2);
}, },
scrollToPageTop() { scrollToPageTop() {
const container = document.getElementsByClassName('page-container-grouped-styles')[0]; const container = document.getElementsByClassName('fade-on-route-transition')[0];
container.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); container.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
}, },
scrollToPageBottom() { scrollToPageBottom() {
const container = document.getElementsByClassName('page-container-grouped-styles')[0]; const container = document.getElementsByClassName('fade-on-route-transition')[0];
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: 'smooth' }); container.scrollTo({ top: container.scrollHeight, left: 0, behavior: 'smooth' });
} }
}, },

2
src/styles/bailout-common.scss
View file

@ -1,7 +1,7 @@
$page-side-padding: 1.5rem; $page-side-padding: 1.5rem;
$font-size: 0.875rem; $font-size: 0.875rem;
.page-container-grouped-styles { .fade-on-route-transition {
> div.main-content-container { > div.main-content-container {
overflow: auto; overflow: auto;
padding: 0 $page-side-padding !important; padding: 0 $page-side-padding !important;

5
src/styles/common-styles.scss
View file

@ -14,9 +14,8 @@ body {
.prevent-squish { .prevent-squish {
overflow-x: unset; overflow-x: unset;
} }
&.fade-on-route-transition {
&.page-container-grouped-styles { height: 100vh;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }