CSR-1129: create schedule page, put date picker on it
This commit is contained in:
Adam Caouette
parent
6c8438beac
commit
fb0280fa18
7 changed files with 260 additions and 235 deletions
|
|
@ -15,9 +15,10 @@ module.exports = {
|
||||||
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
|
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
|
||||||
"!src/layouts/reveal/**/*.vue",
|
"!src/layouts/reveal/**/*.vue",
|
||||||
"!src/ux-components/text-link/**/*.vue",
|
"!src/ux-components/text-link/**/*.vue",
|
||||||
"!src/common-components/date-picker/**/*.vue", // Temp until unit tests completed
|
"!src/common-components/date-picker/**/*.vue", // git statuTemp until unit tests completed
|
||||||
"!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
|
"!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
|
||||||
"!src/common-components/funnel-header/menu-modal/**/*.vue",
|
"!src/common-components/funnel-header/menu-modal/**/*.vue",
|
||||||
|
"!src/layouts/schedule/*.vue", // Temp test exclusion while in development
|
||||||
// END
|
// END
|
||||||
], // ! means exclude from coverage.
|
], // ! means exclude from coverage.
|
||||||
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@ const errorMessages = {
|
||||||
OPTION_REQUIRED: "Please select an option",
|
OPTION_REQUIRED: "Please select an option",
|
||||||
VEHICLE_REQUIRED: "Please select a vehicle",
|
VEHICLE_REQUIRED: "Please select a vehicle",
|
||||||
MOBILE_LOCATION_REQUIRED: "Please enter your service address",
|
MOBILE_LOCATION_REQUIRED: "Please enter your service address",
|
||||||
|
DATE_REQUIRED: "Please select a date",
|
||||||
};
|
};
|
||||||
|
|
||||||
export { errorMessages };
|
export { errorMessages };
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="date-picker" :class="calendarViewDirection">
|
<div class="date-picker text-center" :class="calendarViewDirection">
|
||||||
<fieldset v-if="months">
|
<fieldset v-if="months">
|
||||||
<legend class="sr-only">Date Picker</legend>
|
<legend class="sr-only">Date Picker</legend>
|
||||||
<div
|
<div
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
<button
|
<button
|
||||||
v-if="calendarViewDirection === 'future'"
|
v-if="calendarViewDirection === 'future'"
|
||||||
type="button"
|
type="button"
|
||||||
class="btn-link"
|
class="btn btn-link"
|
||||||
@click="goForward">
|
@click="goForward">
|
||||||
View more dates
|
View more dates
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -371,92 +371,106 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.calendar-grid-container {
|
.date-picker {
|
||||||
margin: 0 auto;
|
.calendar-grid-container {
|
||||||
max-width: 414px;
|
margin: 0 auto;
|
||||||
display: grid;
|
max-width: 414px;
|
||||||
grid-template-columns: repeat(7, 1fr);
|
display: grid;
|
||||||
justify-content: center;
|
grid-template-columns: repeat(7, 1fr);
|
||||||
align-items: center;
|
|
||||||
padding: 4px;
|
|
||||||
|
|
||||||
.grid-item {
|
|
||||||
text-align: center;
|
|
||||||
margin: 10%;
|
|
||||||
|
|
||||||
&.first-day-,
|
|
||||||
&.first-day-0 {
|
|
||||||
grid-column-start: 1;
|
|
||||||
}
|
|
||||||
&.first-day-1 {
|
|
||||||
grid-column-start: 2;
|
|
||||||
}
|
|
||||||
&.first-day-2 {
|
|
||||||
grid-column-start: 3;
|
|
||||||
}
|
|
||||||
&.first-day-3 {
|
|
||||||
grid-column-start: 4;
|
|
||||||
}
|
|
||||||
&.first-day-4 {
|
|
||||||
grid-column-start: 5;
|
|
||||||
}
|
|
||||||
&.first-day-5 {
|
|
||||||
grid-column-start: 6;
|
|
||||||
}
|
|
||||||
&.first-day-6 {
|
|
||||||
grid-column-start: 7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-year {
|
|
||||||
grid-area: 1 / 1 / 2 / 5;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 300;
|
|
||||||
letter-spacing: 0.75px;
|
|
||||||
}
|
|
||||||
.legend {
|
|
||||||
grid-area: 1 / 5 / 2 / 8;
|
|
||||||
.legend-circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background-color: $blue-100;
|
|
||||||
border: 1px solid $blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nav-back,
|
|
||||||
.nav-forward {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
outline: none;
|
padding: 4px;
|
||||||
|
|
||||||
input[type="radio"] {
|
.grid-item {
|
||||||
position: absolute; //override bootstrap
|
text-align: center;
|
||||||
height: 0;
|
margin: 10%;
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
&:focus-visible + label {
|
&.first-day-,
|
||||||
box-shadow: 0 0 0 2.5px $blue;
|
&.first-day-0 {
|
||||||
|
grid-column-start: 1;
|
||||||
}
|
}
|
||||||
|
&.first-day-1 {
|
||||||
|
grid-column-start: 2;
|
||||||
|
}
|
||||||
|
&.first-day-2 {
|
||||||
|
grid-column-start: 3;
|
||||||
|
}
|
||||||
|
&.first-day-3 {
|
||||||
|
grid-column-start: 4;
|
||||||
|
}
|
||||||
|
&.first-day-4 {
|
||||||
|
grid-column-start: 5;
|
||||||
|
}
|
||||||
|
&.first-day-5 {
|
||||||
|
grid-column-start: 6;
|
||||||
|
}
|
||||||
|
&.first-day-6 {
|
||||||
|
grid-column-start: 7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:focus + label,
|
.month-year {
|
||||||
&:checked:focus + label {
|
grid-area: 1 / 1 / 2 / 5;
|
||||||
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
|
text-transform: uppercase;
|
||||||
background-color: $blue;
|
font-weight: 300;
|
||||||
color: $white;
|
letter-spacing: 0.75px;
|
||||||
&.past-day {
|
}
|
||||||
box-shadow: none;
|
.legend {
|
||||||
background-color: transparent;
|
grid-area: 1 / 5 / 2 / 8;
|
||||||
color: $gray-500;
|
.legend-circle {
|
||||||
font-weight: normal;
|
border-radius: 50%;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: $blue-100;
|
||||||
|
border: 1px solid $blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-back,
|
||||||
|
.nav-forward {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
input[type="radio"] {
|
||||||
|
position: absolute; //override bootstrap
|
||||||
|
height: 0;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&:focus-visible + label {
|
||||||
|
box-shadow: 0 0 0 2.5px $blue;
|
||||||
}
|
}
|
||||||
&.current-day {
|
|
||||||
|
&:focus + label,
|
||||||
|
&:checked:focus + label {
|
||||||
|
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
|
||||||
|
background-color: $blue;
|
||||||
|
color: $white;
|
||||||
|
&.past-day {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: $gray-500;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
&.current-day {
|
||||||
|
&:after {
|
||||||
|
background-color: $white;
|
||||||
|
}
|
||||||
|
.first-day {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked + label {
|
||||||
|
color: $white;
|
||||||
|
background: $blue;
|
||||||
|
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue;
|
||||||
&:after {
|
&:after {
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
}
|
}
|
||||||
|
|
@ -466,169 +480,162 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:checked + label {
|
.first-day {
|
||||||
color: $white;
|
position: absolute;
|
||||||
background: $blue;
|
font-size: 9px;
|
||||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue;
|
font-weight: 500;
|
||||||
&:after {
|
color: $gray-600;
|
||||||
background-color: $white;
|
top: 0;
|
||||||
}
|
z-index: 1;
|
||||||
.first-day {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.first-day {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 9px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: $gray-600;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
min-width: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
span {
|
|
||||||
&.small {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: $gray-550;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:checked {
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
box-shadow: 0 0 0 4px transparent;
|
|
||||||
background-color: $blue;
|
|
||||||
color: $white;
|
|
||||||
&:after {
|
|
||||||
background-color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
cursor: pointer;
|
|
||||||
&.current-day {
|
|
||||||
+ .first-day {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.first-day {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+ p {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selectable-day {
|
|
||||||
label {
|
label {
|
||||||
color: $blue;
|
|
||||||
background-color: $blue-100;
|
|
||||||
border: 1px solid $blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.past-day,
|
|
||||||
&.future-day,
|
|
||||||
&.unavailable-day {
|
|
||||||
label {
|
|
||||||
color: $gray-500;
|
|
||||||
background-color: transparent;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.current-day {
|
|
||||||
label {
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
width: 0.25rem;
|
|
||||||
height: 0.25rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: $blue;
|
|
||||||
position: absolute;
|
|
||||||
top: 28px;
|
|
||||||
}
|
|
||||||
.first-day {
|
|
||||||
color: $blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.initial-view {
|
|
||||||
&.month-hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.day-hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.past {
|
|
||||||
.calendar-grid-container {
|
|
||||||
.month-year {
|
|
||||||
grid-area: 1 / 1 / 2 / 6;
|
|
||||||
}
|
|
||||||
.nav-forward {
|
|
||||||
grid-area: 1 / 7 / 2 / 8;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
button {
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 7px;
|
|
||||||
height: 12px;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nav-back {
|
|
||||||
grid-area: 1 / 6 / 2 / 7;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
button {
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 7px;
|
|
||||||
height: 12px;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nav-back,
|
|
||||||
.nav-forward {
|
|
||||||
button {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 50%;
|
cursor: pointer;
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
background-color: $blue-100;
|
|
||||||
border: 1px solid $blue;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
&:focus,
|
width: 40px;
|
||||||
&:focus-visible {
|
height: 40px;
|
||||||
border: 2.5px solid $blue;
|
min-width: 40px;
|
||||||
box-shadow: none;
|
border-radius: 50%;
|
||||||
|
|
||||||
|
span {
|
||||||
|
&.small {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: $gray-550;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:checked {
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
box-shadow: 0 0 0 4px transparent;
|
||||||
|
background-color: $blue;
|
||||||
|
color: $white;
|
||||||
|
&:after {
|
||||||
|
background-color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cursor: pointer;
|
||||||
|
&.current-day {
|
||||||
|
+ .first-day {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.first-day {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
+ p {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selectable-day {
|
||||||
|
label {
|
||||||
|
color: $blue;
|
||||||
background-color: $blue-100;
|
background-color: $blue-100;
|
||||||
color: $white;
|
border: 1px solid $blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.past-day,
|
||||||
|
&.future-day,
|
||||||
|
&.unavailable-day {
|
||||||
|
label {
|
||||||
|
color: $gray-500;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.current-day {
|
||||||
|
label {
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
width: 0.25rem;
|
||||||
|
height: 0.25rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: $blue;
|
||||||
|
position: absolute;
|
||||||
|
top: 28px;
|
||||||
|
}
|
||||||
|
.first-day {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.initial-view {
|
||||||
|
&.month-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.day-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-link {
|
||||||
|
font-weight: 500;
|
||||||
|
text-underline-offset: 4px;
|
||||||
|
}
|
||||||
|
.past {
|
||||||
|
.calendar-grid-container {
|
||||||
|
.month-year {
|
||||||
|
grid-area: 1 / 1 / 2 / 6;
|
||||||
|
}
|
||||||
|
.nav-forward {
|
||||||
|
grid-area: 1 / 7 / 2 / 8;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
button {
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 7px;
|
||||||
|
height: 12px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-back {
|
||||||
|
grid-area: 1 / 6 / 2 / 7;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
button {
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 7px;
|
||||||
|
height: 12px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-back,
|
||||||
|
.nav-forward {
|
||||||
|
button {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: $blue-100;
|
||||||
|
border: 1px solid $blue;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&:focus,
|
||||||
|
&:focus-visible {
|
||||||
|
border: 2.5px solid $blue;
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: $blue-100;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,6 @@ import { experimentTriggers } from "../constants/experiments";
|
||||||
import { applicationConfig } from "../constants/application-config";
|
import { applicationConfig } from "../constants/application-config";
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import quote from "@/layouts/quote/quote.vue";
|
|
||||||
import datePicker from "@/digital-components/date-picker/date-picker.vue";
|
import datePicker from "@/digital-components/date-picker/date-picker.vue";
|
||||||
import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
|
import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ const fmgPageValues = {
|
||||||
QUOTE: "quote",
|
QUOTE: "quote",
|
||||||
SERVICE_LOCATION: "service-location",
|
SERVICE_LOCATION: "service-location",
|
||||||
HERITAGE: "heritage",
|
HERITAGE: "heritage",
|
||||||
|
SCHEDULE: "schedule",
|
||||||
};
|
};
|
||||||
|
|
||||||
export { fmgPageValues };
|
export { fmgPageValues };
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,9 @@ const navigationScenarios = {
|
||||||
CLICKED_BACK_WITH_CAPABILITY_QUESTIONS: "CLICKED_BACK_WITH_CAPABILITY_QUESTIONS",
|
CLICKED_BACK_WITH_CAPABILITY_QUESTIONS: "CLICKED_BACK_WITH_CAPABILITY_QUESTIONS",
|
||||||
CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: "CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS",
|
CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: "CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS",
|
||||||
CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: "CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS",
|
CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: "CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS",
|
||||||
|
|
||||||
|
// Scheduling
|
||||||
|
SELECTED_LOCATION: "SELECTED_LOCATION",
|
||||||
};
|
};
|
||||||
|
|
||||||
export { navigationScenarios };
|
export { navigationScenarios };
|
||||||
|
|
|
||||||
|
|
@ -420,6 +420,19 @@ const routingTable = function (store) {
|
||||||
scenario: navigationScenarios.CLICKED_BACK,
|
scenario: navigationScenarios.CLICKED_BACK,
|
||||||
destinationFmgPageValue: fmgPageValues.QUOTE,
|
destinationFmgPageValue: fmgPageValues.QUOTE,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
scenario: navigationScenarios.SELECTED_LOCATION,
|
||||||
|
destinationFmgPageValue: fmgPageValues.SCHEDULE,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fmgPageValue: fmgPageValues.SCHEDULE,
|
||||||
|
maps: [
|
||||||
|
{
|
||||||
|
scenario: navigationScenarios.CLICKED_BACK,
|
||||||
|
destinationFmgPageValue: fmgPageValues.SERVICE_LOCATION,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue