Merge pull request #648 from Safelite/SSR-1201-style-updates
SSR-1201 style updates.
This commit is contained in:
bmauger
GitHub
commit
9ca2c7b240
8 changed files with 225 additions and 146 deletions
|
|
@ -2,21 +2,21 @@
|
|||
<div
|
||||
class="date-picker text-center"
|
||||
:class="[calendarViewDirection, { 'has-error': errors.length > 0 }]">
|
||||
<fieldset
|
||||
id="date-picker-fieldset"
|
||||
ref="datePickerFieldset">
|
||||
<legend class="sr-only">
|
||||
Select a day and time
|
||||
</legend>
|
||||
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
|
||||
<legend class="sr-only">Select a day and time</legend>
|
||||
<div
|
||||
v-for="month in months"
|
||||
:id="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
||||
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
||||
class="calendar-grid-container"
|
||||
:class="[
|
||||
hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
|
||||
month.monthClass,]">
|
||||
<div class="month-year body-small d-flex align-items-center small">
|
||||
hideSomeDaysForInitialView
|
||||
? 'partial-month-initial-view'
|
||||
: '',
|
||||
month.monthClass
|
||||
]">
|
||||
<div
|
||||
class="month-year body-small d-flex align-items-center small">
|
||||
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -58,9 +58,12 @@
|
|||
:key="date.inputValue"
|
||||
class="grid-item radio-wrapper"
|
||||
:class="[
|
||||
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
||||
date.dateNum === 1
|
||||
? 'first-day-' + month.startDateDayIndex
|
||||
: '',
|
||||
date.dayClasses,
|
||||
date.isSelectable ? 'selectable-day' : '',]">
|
||||
date.isSelectable ? 'selectable-day' : ''
|
||||
]">
|
||||
<input
|
||||
:id="`${month.monthLabel}-${date.dateNum.toString()}`"
|
||||
v-model="selectedDate"
|
||||
|
|
@ -70,7 +73,8 @@
|
|||
:value="date.inputValue"
|
||||
@click="fireDateSelectedEvent"
|
||||
@keypress.enter="fireDateSelectedEvent" />
|
||||
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
||||
<label
|
||||
:for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
||||
<span>{{ date.dateNum.toString() }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -79,16 +83,15 @@
|
|||
:class="[!isLoading ? 'date-picker-hidden' : '']"
|
||||
loaderColor="blue"
|
||||
loaderPosition="center" />
|
||||
<div
|
||||
id="date-of-month-error"
|
||||
class="row form-test-error">
|
||||
<ErrorMessage
|
||||
:name="customComponentId"
|
||||
class="small mt-1">
|
||||
<div id="date-of-month-error" class="row form-test-error">
|
||||
<ErrorMessage :name="customComponentId" class="small mt-1">
|
||||
</ErrorMessage>
|
||||
</div>
|
||||
<button
|
||||
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
|
||||
v-if="
|
||||
calendarViewDirection === 'future' &&
|
||||
!disableViewMoreDatesButton
|
||||
"
|
||||
id="viewMoreDates"
|
||||
type="button"
|
||||
class="btn btn-link"
|
||||
|
|
@ -106,8 +109,15 @@ import loader from '@/ux-components/loader/loader.vue';
|
|||
import { useMainStore } from '@/store';
|
||||
import { useField, ErrorMessage } from 'vee-validate';
|
||||
import { deepClone } from '@/helpers/object-helper';
|
||||
import { convertDateStringToDate, convertDateToDateString } from '@/helpers/date-helper';
|
||||
import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from './mixins/constants';
|
||||
import {
|
||||
convertDateStringToDate,
|
||||
convertDateToDateString
|
||||
} from '@/helpers/date-helper';
|
||||
import {
|
||||
TIMINGFUNC_MAP,
|
||||
BUFFER_OFFSET,
|
||||
MONTHS_OF_YEAR
|
||||
} from './mixins/constants';
|
||||
import { selectableDaysOptions, requiredParameter } from './mixins/helpers';
|
||||
|
||||
export default {
|
||||
|
|
@ -161,8 +171,15 @@ export default {
|
|||
initialValue
|
||||
};
|
||||
|
||||
const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
|
||||
useField(componentId, props.validationRules, fieldOptions);
|
||||
const {
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
meta,
|
||||
validate,
|
||||
errors,
|
||||
resetField
|
||||
} = useField(componentId, props.validationRules, fieldOptions);
|
||||
|
||||
return {
|
||||
componentId,
|
||||
|
|
@ -187,7 +204,10 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
todayString() {
|
||||
return this.todayOverrideDateString || convertDateToDateString(new Date());
|
||||
return (
|
||||
this.todayOverrideDateString ||
|
||||
convertDateToDateString(new Date())
|
||||
);
|
||||
},
|
||||
todayDayIndex() {
|
||||
return convertDateStringToDate(this.todayString).getDay();
|
||||
|
|
@ -268,17 +288,27 @@ export default {
|
|||
},
|
||||
getMonthEnd(dateStr) {
|
||||
// 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);
|
||||
},
|
||||
getInitialViewWeeks(todayString, initialViewRowsToShow, preSelectedDateString) {
|
||||
getInitialViewWeeks(
|
||||
todayString,
|
||||
initialViewRowsToShow,
|
||||
preSelectedDateString
|
||||
) {
|
||||
// TODO: this only is for future direction; need to create logic for past direction
|
||||
const weeks = [];
|
||||
let weekStartDate = this.getWeekStartDate(todayString);
|
||||
let weekEndDate = this.getWeekEndDate(todayString);
|
||||
|
||||
if (preSelectedDateString) {
|
||||
const preSelectedDateMonthEnd = this.getMonthEnd(preSelectedDateString);
|
||||
const preSelectedDateMonthEnd = this.getMonthEnd(
|
||||
preSelectedDateString
|
||||
);
|
||||
let weekIncludesPreSelectedMonthEnd = false;
|
||||
let i = 0;
|
||||
while (!weekIncludesPreSelectedMonthEnd) {
|
||||
|
|
@ -287,10 +317,10 @@ export default {
|
|||
weekEndDate = this.getWeekEndDate(weekStartDate);
|
||||
|
||||
if (
|
||||
(preSelectedDateMonthEnd > weekStartDate
|
||||
&& preSelectedDateMonthEnd < weekEndDate)
|
||||
|| preSelectedDateMonthEnd === weekStartDate
|
||||
|| preSelectedDateMonthEnd === weekEndDate
|
||||
(preSelectedDateMonthEnd > weekStartDate &&
|
||||
preSelectedDateMonthEnd < weekEndDate) ||
|
||||
preSelectedDateMonthEnd === weekStartDate ||
|
||||
preSelectedDateMonthEnd === weekEndDate
|
||||
) {
|
||||
weekEndDate = preSelectedDateMonthEnd;
|
||||
weekIncludesPreSelectedMonthEnd = true;
|
||||
|
|
@ -317,7 +347,9 @@ export default {
|
|||
}
|
||||
// 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)
|
||||
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);
|
||||
|
||||
if (splitWeekIndex > -1) {
|
||||
|
|
@ -326,7 +358,9 @@ export default {
|
|||
let switchToWeek2 = false;
|
||||
|
||||
for (let j = 0; j < 7; j++) {
|
||||
const newDate = convertDateStringToDate(weeks[splitWeekIndex].weekStartDate);
|
||||
const newDate = convertDateStringToDate(
|
||||
weeks[splitWeekIndex].weekStartDate
|
||||
);
|
||||
newDate.setDate(newDate.getDate() + j);
|
||||
if (newDate.getDate() === 1) switchToWeek2 = true;
|
||||
if (switchToWeek2) {
|
||||
|
|
@ -377,8 +411,10 @@ export default {
|
|||
} else {
|
||||
todayDateString = convertDateToDateString(new Date());
|
||||
}
|
||||
if (config.selectableDatesSetting === 'past') calendarViewDirection = 'past';
|
||||
if (config.selectableDatesSetting === 'custom') calendarViewDirection = 'future';
|
||||
if (config.selectableDatesSetting === 'past')
|
||||
calendarViewDirection = 'past';
|
||||
if (config.selectableDatesSetting === 'custom')
|
||||
calendarViewDirection = 'future';
|
||||
|
||||
const currentMonthEnd = this.getMonthEnd(todayDateString);
|
||||
// TODO - set up currentMonthStart if direction is PAST:
|
||||
|
|
@ -389,18 +425,24 @@ export default {
|
|||
config.preSelectedDate
|
||||
);
|
||||
const initialViewStartDate = todayDateString;
|
||||
const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
|
||||
const initialViewEndDate =
|
||||
initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
|
||||
|
||||
if (!config.preSelectedDate) {
|
||||
const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.split('-')[1];
|
||||
const firstSaturdayMonth =
|
||||
initialViewWeeks[0].weekEndDate.split('-')[1];
|
||||
const lastSundayMonth =
|
||||
initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.split('-')[1];
|
||||
initialViewWeeks[
|
||||
initialViewWeeks.length - 1
|
||||
].weekStartDate.split('-')[1];
|
||||
|
||||
if (calendarViewDirection === 'future') {
|
||||
if (firstSaturdayMonth !== lastSundayMonth) {
|
||||
hideSomeDaysForInitialView = true;
|
||||
}
|
||||
if (initialViewStartDate.split('-')[1] === lastSundayMonth) {
|
||||
if (
|
||||
initialViewStartDate.split('-')[1] === lastSundayMonth
|
||||
) {
|
||||
hideSecondMonth = true;
|
||||
if (currentMonthEnd > initialViewEndDate) {
|
||||
// should part of 1st month be hidden?
|
||||
|
|
@ -441,9 +483,11 @@ export default {
|
|||
const direction = config.calendarViewDirection;
|
||||
const monthsAfterToLoadOffset = 6;
|
||||
const monthsBeforeToLoadOffset = 36;
|
||||
config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
|
||||
this.selectableDatesData.push(selectableDate);
|
||||
});
|
||||
config.initialShopTimeSlotsResponse.days.forEach(
|
||||
(selectableDate) => {
|
||||
this.selectableDatesData.push(selectableDate);
|
||||
}
|
||||
);
|
||||
|
||||
// GENERATE MONTHS AND PUSH THEM INTO ARRAY
|
||||
const months = [];
|
||||
|
|
@ -479,10 +523,11 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
// Advance to month
|
||||
const monthToShow = this.months.find((month) =>
|
||||
month.monthClass.includes('month-preselected'));
|
||||
month.monthClass.includes('month-preselected')
|
||||
);
|
||||
if (
|
||||
monthToShow.monthClass.includes('month-preselected')
|
||||
&& monthToShow.monthClass.includes('last-available-month')
|
||||
monthToShow.monthClass.includes('month-preselected') &&
|
||||
monthToShow.monthClass.includes('last-available-month')
|
||||
) {
|
||||
// disable View More dates button if the preSelectedDate in the last available month
|
||||
this.disableViewMoreDatesButton = true;
|
||||
|
|
@ -506,8 +551,13 @@ export default {
|
|||
this.hideSomeDaysForInitialView (string)
|
||||
*/
|
||||
|
||||
let monthNum = convertDateStringToDate(this.todayString).getMonth() + offset + 1;
|
||||
let yearNum = convertDateStringToDate(this.todayString).getFullYear();
|
||||
let monthNum =
|
||||
convertDateStringToDate(this.todayString).getMonth() +
|
||||
offset +
|
||||
1;
|
||||
let yearNum = convertDateStringToDate(
|
||||
this.todayString
|
||||
).getFullYear();
|
||||
const { calendarViewDirection } = options;
|
||||
if (calendarViewDirection === 'future' && offset > 0) {
|
||||
while (monthNum > 12) {
|
||||
|
|
@ -532,7 +582,11 @@ export default {
|
|||
offset === 0 && calendarViewDirection === 'future'
|
||||
? this.currentWeekStartDateNum
|
||||
: 1;
|
||||
const monthStartDate = new Date(yearNum, monthNum - 1, monthStartDateNum);
|
||||
const monthStartDate = new Date(
|
||||
yearNum,
|
||||
monthNum - 1,
|
||||
monthStartDateNum
|
||||
);
|
||||
const startDateDayIndex = monthStartDate.getDay();
|
||||
|
||||
let monthClass = '';
|
||||
|
|
@ -540,17 +594,18 @@ export default {
|
|||
let monthEndDateNum = monthEndDate.getDate();
|
||||
|
||||
if (
|
||||
offset === 0
|
||||
&& calendarViewDirection === 'past'
|
||||
&& monthEndDateNum > this.currentWeekEndDateNum
|
||||
offset === 0 &&
|
||||
calendarViewDirection === 'past' &&
|
||||
monthEndDateNum > this.currentWeekEndDateNum
|
||||
) {
|
||||
monthEndDateNum = this.currentWeekEndDateNum;
|
||||
}
|
||||
|
||||
if (options.preSelectedDate) {
|
||||
if (
|
||||
monthStartDate.getFullYear() === preSelectedDateObj.getFullYear()
|
||||
&& monthStartDate.getMonth() === preSelectedDateObj.getMonth()
|
||||
monthStartDate.getFullYear() ===
|
||||
preSelectedDateObj.getFullYear() &&
|
||||
monthStartDate.getMonth() === preSelectedDateObj.getMonth()
|
||||
) {
|
||||
monthClass += ' month-preselected';
|
||||
} else if (monthStartDate > preSelectedDateObj) {
|
||||
|
|
@ -563,14 +618,14 @@ export default {
|
|||
}
|
||||
|
||||
if (
|
||||
Math.abs(offset) === options.monthsAfterToLoadOffset
|
||||
&& calendarViewDirection === 'future'
|
||||
Math.abs(offset) === options.monthsAfterToLoadOffset &&
|
||||
calendarViewDirection === 'future'
|
||||
) {
|
||||
monthClass += ' last-available-month';
|
||||
}
|
||||
if (
|
||||
Math.abs(offset) === options.monthsBeforeToLoadOffset
|
||||
&& calendarViewDirection === 'past'
|
||||
Math.abs(offset) === options.monthsBeforeToLoadOffset &&
|
||||
calendarViewDirection === 'past'
|
||||
) {
|
||||
// TODO - re-check this logic if past direction
|
||||
monthClass += ' last-available-month';
|
||||
|
|
@ -579,29 +634,36 @@ export default {
|
|||
// populate dates array
|
||||
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
|
||||
let dayClasses = '';
|
||||
const dateString =
|
||||
`${yearNum.toString()
|
||||
}-${
|
||||
(`0${monthNum}`).slice(-2)
|
||||
}-${
|
||||
(`0${i}`).slice(-2)}`;
|
||||
const dateString = `${yearNum.toString()}-${`0${monthNum}`.slice(
|
||||
-2
|
||||
)}-${`0${i}`.slice(-2)}`;
|
||||
|
||||
if (offset === 0 && i === this.todayDateNum) {
|
||||
dayClasses += ' current-day';
|
||||
}
|
||||
if (offset === 0 && i < this.todayDateNum && calendarViewDirection === 'future') {
|
||||
if (
|
||||
offset === 0 &&
|
||||
i < this.todayDateNum &&
|
||||
calendarViewDirection === 'future'
|
||||
) {
|
||||
dayClasses += ' unavailable-day';
|
||||
}
|
||||
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === 'past') {
|
||||
if (
|
||||
offset === 0 &&
|
||||
i > this.todayDateNum &&
|
||||
calendarViewDirection === 'past'
|
||||
) {
|
||||
dayClasses += ' unavailable-day';
|
||||
}
|
||||
if (convertDateStringToDate(dateString).getDay() === 0) {
|
||||
dayClasses += ' sunday';
|
||||
}
|
||||
if (
|
||||
this.hideSomeDaysForInitialView
|
||||
&& convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum
|
||||
&& convertDateStringToDate(initialViewEndDate).getDate() < i
|
||||
this.hideSomeDaysForInitialView &&
|
||||
convertDateStringToDate(initialViewEndDate).getMonth() +
|
||||
1 ===
|
||||
monthNum &&
|
||||
convertDateStringToDate(initialViewEndDate).getDate() < i
|
||||
) {
|
||||
dayClasses += ' day-hidden';
|
||||
isMonthThatHidesSomeDaysForInitialView = true;
|
||||
|
|
@ -611,7 +673,9 @@ export default {
|
|||
dayClasses,
|
||||
inputValue: dateString,
|
||||
isSelectable:
|
||||
this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
|
||||
this.selectableDatesData.findIndex(
|
||||
(date) => date.date === dateString
|
||||
) > -1
|
||||
};
|
||||
dates.push(dateObject);
|
||||
}
|
||||
|
|
@ -619,7 +683,9 @@ export default {
|
|||
const monthToAdd = {
|
||||
monthLabel: MONTHS_OF_YEAR[monthNum - 1],
|
||||
monthIndex: monthNum,
|
||||
monthString: `${MONTHS_OF_YEAR[monthNum - 1]}-${yearNum?.toString()}`,
|
||||
monthString: `${
|
||||
MONTHS_OF_YEAR[monthNum - 1]
|
||||
}-${yearNum?.toString()}`,
|
||||
yearNum,
|
||||
dates,
|
||||
startDateDayIndex,
|
||||
|
|
@ -634,21 +700,26 @@ export default {
|
|||
let monthStartDateNum = 0;
|
||||
|
||||
if (this.hideSomeDaysForInitialView) {
|
||||
monthToShow = this.months.find(({ isMonthThatHidesSomeDaysForInitialView }) =>
|
||||
isMonthThatHidesSomeDaysForInitialView);
|
||||
monthToShow = this.months.find(
|
||||
({ isMonthThatHidesSomeDaysForInitialView }) =>
|
||||
isMonthThatHidesSomeDaysForInitialView
|
||||
);
|
||||
// find the first day-hidden to become the next api call start date
|
||||
monthStartDateNum =
|
||||
monthToShow.dates.find(({ dayClasses }) => dayClasses.includes('day-hidden'))
|
||||
.dateNum - 1;
|
||||
monthToShow.dates.find(({ dayClasses }) =>
|
||||
dayClasses.includes('day-hidden')
|
||||
).dateNum - 1;
|
||||
} else {
|
||||
if (this.calendarViewDirection === 'future') {
|
||||
monthToShow = this.months.find((month) =>
|
||||
month.monthClass.includes('month-hidden'));
|
||||
month.monthClass.includes('month-hidden')
|
||||
);
|
||||
}
|
||||
if (this.calendarViewDirection === 'past') {
|
||||
// TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
|
||||
monthToShow = this.months.find((month) =>
|
||||
month.monthClass.includes('month-hidden'));
|
||||
month.monthClass.includes('month-hidden')
|
||||
);
|
||||
}
|
||||
}
|
||||
if (monthToShow) {
|
||||
|
|
@ -659,22 +730,29 @@ export default {
|
|||
);
|
||||
this.isLoading = false;
|
||||
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);
|
||||
|
||||
if (monthToShow.monthClass.includes('last-available-month')) this.disableViewMoreDatesButton = true;
|
||||
if (monthToShow.monthClass.includes('last-available-month'))
|
||||
this.disableViewMoreDatesButton = true;
|
||||
}
|
||||
},
|
||||
async updateSelectableDates(monthStart, monthEnd) {
|
||||
const moreSelectableDates = await this.customSelectableDatesCallback(
|
||||
monthStart,
|
||||
monthEnd,
|
||||
this.mainStore.order.serviceLocation.appointmentType,
|
||||
this.mainStore.order.serviceLocation.provider.providerNumber
|
||||
);
|
||||
const moreSelectableDates =
|
||||
await this.customSelectableDatesCallback(
|
||||
monthStart,
|
||||
monthEnd,
|
||||
this.mainStore.order.serviceLocation.appointmentType,
|
||||
this.mainStore.order.serviceLocation.provider.providerNumber
|
||||
);
|
||||
|
||||
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);
|
||||
this.months.forEach((month) => {
|
||||
// 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') {
|
||||
const wrapper = document.querySelector('.page-container-grouped-styles');
|
||||
const wrapper = document.querySelector('.fade-on-route-transition');
|
||||
const target = document.getElementById(elementId);
|
||||
const initY = wrapper.scrollTop;
|
||||
const wrapperRect = wrapper.getBoundingClientRect();
|
||||
|
|
@ -713,7 +791,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/ux-variables-svg-strings.scss";
|
||||
@import '@/styles/ux-variables-svg-strings.scss';
|
||||
|
||||
.date-picker-hidden {
|
||||
opacity: 0;
|
||||
|
|
@ -821,7 +899,7 @@ export default {
|
|||
opacity: 1;
|
||||
transition: height ease 250ms, opacity ease 250ms;
|
||||
|
||||
input[type="radio"] {
|
||||
input[type='radio'] {
|
||||
position: absolute; //override bootstrap
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
|
|
@ -929,7 +1007,7 @@ export default {
|
|||
&.unavailable-day:not(&.sunday) {
|
||||
label {
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
|
|
@ -945,7 +1023,7 @@ export default {
|
|||
color: $black;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
content: '';
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
border-radius: 50%;
|
||||
|
|
@ -997,7 +1075,7 @@ export default {
|
|||
justify-content: flex-end;
|
||||
button {
|
||||
&:after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
|
|
@ -1011,7 +1089,7 @@ export default {
|
|||
justify-content: flex-end;
|
||||
button {
|
||||
&:after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
aria-hidden="true"
|
||||
v-on="{
|
||||
'hidden.bs.modal': onModalClosed,
|
||||
'shown.bs.modal': onModalOpened,
|
||||
'shown.bs.modal': onModalOpened
|
||||
}">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
|
|
@ -56,19 +56,19 @@ export default {
|
|||
// eslint-disable-next-line vue/multi-word-component-names
|
||||
name: 'modal',
|
||||
components: {
|
||||
modalButtonMain,
|
||||
modalButtonMain
|
||||
},
|
||||
props: {
|
||||
modalId: String,
|
||||
headerText: String,
|
||||
footerButtonText: String,
|
||||
onModalOpenedCallback: {
|
||||
type: Function,
|
||||
type: Function
|
||||
},
|
||||
onModalClosedCallback: {
|
||||
type: Function,
|
||||
type: Function
|
||||
},
|
||||
isButtonDisabled: Boolean,
|
||||
isButtonDisabled: Boolean
|
||||
},
|
||||
emits: ['footer-button-event', 'isModalOpened'],
|
||||
setup(props) {
|
||||
|
|
@ -83,7 +83,7 @@ export default {
|
|||
modalId,
|
||||
meta,
|
||||
validate,
|
||||
resetForm,
|
||||
resetForm
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -92,7 +92,7 @@ export default {
|
|||
return !this.meta.valid;
|
||||
}
|
||||
return !this.meta.dirty || !this.meta.valid;
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async validateAndEmit() {
|
||||
|
|
@ -126,8 +126,8 @@ export default {
|
|||
);
|
||||
modal?.hide();
|
||||
this.$emit('isModalOpened', false);
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -163,6 +163,8 @@ export default {
|
|||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
border-radius: 0;
|
||||
background-color: $gray-100;
|
||||
}
|
||||
&.modal-component {
|
||||
.modal-dialog {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
<alert
|
||||
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"
|
||||
:manualHeadline="globalAlertMessage.messageHeadline"
|
||||
:manualCopy="globalAlertMessage.messageCopy"
|
||||
|
|
@ -134,10 +134,6 @@ export default {
|
|||
height: 56px;
|
||||
position: relative;
|
||||
}
|
||||
.alert {
|
||||
left: 0;
|
||||
top: 72px;
|
||||
}
|
||||
#siteHeaderImage {
|
||||
width: 7.125rem;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,14 @@
|
|||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="main-content-container">
|
||||
<div class="container-fluid fade-on-route-transition">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 px-0 px-md-2">
|
||||
<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">
|
||||
<img :src="orderConfirmationImage" />
|
||||
<span
|
||||
|
|
@ -86,7 +90,7 @@ import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
|
|||
// Supporting files
|
||||
import {
|
||||
fetchCmsContentForPage,
|
||||
processIfStatements,
|
||||
processIfStatements
|
||||
} from '@/helpers/cms-content-helper';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import { Form } from 'vee-validate';
|
||||
|
|
@ -96,7 +100,7 @@ import {
|
|||
get12HourTimeFormat,
|
||||
get12HourTimeMobileFormat,
|
||||
convertDateStringToDate,
|
||||
getDisplayTextForDurationLength,
|
||||
getDisplayTextForDurationLength
|
||||
} from '@/helpers/date-helper.js';
|
||||
import { toTitleCase } from '@/helpers/text-helper.js';
|
||||
import { AppointmentTypeStrings } from '@/constants/schedule-constants';
|
||||
|
|
@ -111,7 +115,7 @@ export default {
|
|||
vehicleBanner,
|
||||
siteFooter,
|
||||
addToCalendar,
|
||||
cartDropdown,
|
||||
cartDropdown
|
||||
},
|
||||
mixins: [BaseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -123,8 +127,8 @@ export default {
|
|||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
promise: cmsContentPromise
|
||||
}
|
||||
];
|
||||
// use resultMap to populate layout content.
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
|
@ -186,7 +190,7 @@ export default {
|
|||
return dateObject.toLocaleDateString('en-us', {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
day: 'numeric'
|
||||
});
|
||||
},
|
||||
appointmentTimeFormatted() {
|
||||
|
|
@ -328,7 +332,7 @@ export default {
|
|||
},
|
||||
selectedVaps() {
|
||||
return this.submittedOrder.lineItems.vaps;
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.carrierUrl) {
|
||||
|
|
@ -444,8 +448,8 @@ export default {
|
|||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ import { useMainStore } from '@/store';
|
|||
import {
|
||||
getPricedMobileFeePart,
|
||||
getServiceabilityDetails,
|
||||
getZipCodeData,
|
||||
getZipCodeData
|
||||
} from '@/helpers/service-location-helper';
|
||||
|
||||
// Import Component
|
||||
|
|
@ -168,7 +168,7 @@ export default {
|
|||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form,
|
||||
serviceZipModalQuestion,
|
||||
shopQuestion,
|
||||
shopQuestion
|
||||
},
|
||||
mixins: [baseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -190,24 +190,24 @@ export default {
|
|||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise,
|
||||
promise: cmsContentPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'mobileFeePart',
|
||||
promise: mobileFeePartPromise,
|
||||
promise: mobileFeePartPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'serviceabilityDetails',
|
||||
promise: serviceabilityDetailsPromise,
|
||||
promise: serviceabilityDetailsPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'shopQuestionInitialData',
|
||||
promise: shopQuestionInitialDataPromise,
|
||||
promise: shopQuestionInitialDataPromise
|
||||
},
|
||||
{
|
||||
resultKey: 'zipCodeData',
|
||||
promise: zipCodeData,
|
||||
},
|
||||
promise: zipCodeData
|
||||
}
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
|
@ -245,7 +245,7 @@ export default {
|
|||
mobileFeePart: null,
|
||||
mobileProviderNumber: null,
|
||||
zipContainsMilitaryBase: false,
|
||||
zipCodeCtu: null,
|
||||
zipCodeCtu: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -262,7 +262,7 @@ export default {
|
|||
get() {
|
||||
return {
|
||||
state: this.state,
|
||||
zipCode: this.zipCode,
|
||||
zipCode: this.zipCode
|
||||
};
|
||||
},
|
||||
set(newValue) {
|
||||
|
|
@ -277,7 +277,7 @@ export default {
|
|||
|
||||
// eslint-disable-next-line vue/valid-next-tick
|
||||
this.$nextTick();
|
||||
},
|
||||
}
|
||||
},
|
||||
mobileLocationQuestions: {
|
||||
get() {
|
||||
|
|
@ -287,9 +287,9 @@ export default {
|
|||
streetAddress2: this.streetAddress2,
|
||||
city: this.city,
|
||||
state: this.state,
|
||||
zipCode: this.zipCode,
|
||||
zipCode: this.zipCode
|
||||
},
|
||||
isVehicleProtected: this.isVehicleProtected,
|
||||
isVehicleProtected: this.isVehicleProtected
|
||||
};
|
||||
},
|
||||
set(newValue) {
|
||||
|
|
@ -313,7 +313,7 @@ export default {
|
|||
}
|
||||
this.selectedProvider = null;
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
isServiceableMobile() {
|
||||
if (this.isRecalibrationServiceableMobile !== null) {
|
||||
|
|
@ -383,7 +383,7 @@ export default {
|
|||
return isNoComp || isITAC
|
||||
? this.navigationScenarios.CLICKED_BACK_CANNOT_REACH_TPA_FLOW
|
||||
: this.navigationScenarios.CLICKED_BACK_CAN_REACH_TPA_FLOW;
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
|
|
@ -410,8 +410,8 @@ export default {
|
|||
city: null,
|
||||
state: null,
|
||||
zipCode: null,
|
||||
zipCodeCtu: null,
|
||||
},
|
||||
zipCodeCtu: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -424,7 +424,7 @@ export default {
|
|||
zipCodeCtu: this.zipCodeCtu,
|
||||
appointmentType: this.selectedAppointmentType,
|
||||
isVehicleProtected: this.isVehicleProtected,
|
||||
provider,
|
||||
provider
|
||||
});
|
||||
|
||||
this.$router.navigate(
|
||||
|
|
@ -516,15 +516,15 @@ export default {
|
|||
serviceabilityDetails.isGlassServiceableMobile;
|
||||
this.isRecalibrationServiceableMobile =
|
||||
serviceabilityDetails.isRecalibrationServiceableMobile;
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$page-side-padding: 1.5rem;
|
||||
|
||||
.page-container-grouped-styles {
|
||||
.fade-on-route-transition {
|
||||
overflow: auto;
|
||||
|
||||
.main-content-container {
|
||||
|
|
|
|||
|
|
@ -93,11 +93,11 @@ export default {
|
|||
return ((amountDue * 100) / 100).toFixed(2);
|
||||
},
|
||||
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' });
|
||||
},
|
||||
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' });
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
$page-side-padding: 1.5rem;
|
||||
$font-size: 0.875rem;
|
||||
|
||||
.page-container-grouped-styles {
|
||||
.fade-on-route-transition {
|
||||
> div.main-content-container {
|
||||
overflow: auto;
|
||||
padding: 0 $page-side-padding !important;
|
||||
|
|
|
|||
|
|
@ -14,9 +14,8 @@ body {
|
|||
.prevent-squish {
|
||||
overflow-x: unset;
|
||||
}
|
||||
|
||||
&.page-container-grouped-styles {
|
||||
overflow: hidden;
|
||||
&.fade-on-route-transition {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue