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

Merge branch 'develop' into feature/digital/SSR-402

Browse source
This commit is contained in:
Jason Wheeler 2023-04-19 15:26:54 -04:00
commit 58194f58e1
9 changed files with 249 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/layouts/contact-details/contact-details.vue Normal file
View file

@ -0,0 +1,81 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid pb-2">
<p>Placeholder for contact details page</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
ref="siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@back-clicked="backButtonAction"
/>
</div>
</div>
</div>
</Form>
</template>
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header';
import siteFooter from "@/iss-components/site-footer/site-footer";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { Form } from "vee-validate";
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
export default {
name: "contact-details",
mixins: [BaseFormMixin],
data() {
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
async beforeRouteEnter(to, from, next)
{
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},];
//use resultMap to populate layout content.
let resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods:
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
},
navigateForward() {
},
},
components: {
siteHeader,
siteFooter,
Form,
},
}
</script>
<style lang="scss">
</style>

81
src/layouts/schedule-page/schedule-page.vue Normal file
View file

@ -0,0 +1,81 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid pb-2">
<p>Placeholder for schedule page</p>
<siteFooter
cmsWidgetName="SiteFooterWidget"
ref="siteFooter"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@back-clicked="backButtonAction"
/>
</div>
</div>
</div>
</Form>
</template>
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header';
import siteFooter from "@/iss-components/site-footer/site-footer";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { Form } from "vee-validate";
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
export default {
name: "schedule-page",
mixins: [BaseFormMixin],
data() {
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
async beforeRouteEnter(to, from, next)
{
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},];
//use resultMap to populate layout content.
let resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods:
{
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
},
navigateForward() {
},
},
components: {
siteHeader,
siteFooter,
Form,
},
}
</script>
<style lang="scss">
</style>

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

@ -1,30 +1,38 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" class="siteHeader"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
<div class="fade-on-route-transition position-relative px-5 choose-option">
<buttonQuestion
cmsWidgetName="ServiceTypeQuestionWidget"
:questionText="questionText"
:answers="answersFromCms"
buttonTypeString="listCard"
isRequired
v-model="selectedValues"
validationRules="selection-required"/>
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
<buttonQuestion
cmsWidgetName="ServiceTypeQuestionWidget"
:questionText="questionText"
:answers="answersFromCms"
buttonTypeString="listCard"
isRequired
v-model="selectedValues"
validationRules="selection-required"/>
<div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -35,7 +43,7 @@
</Form>
</template>
<script>
// Import Supporting Files
// Import Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { required } from "@/helpers/validation-rules";
@ -82,7 +90,7 @@ export default {
},
answersFromCms() {
return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
},
},
},
methods: {
arePagePrerequisiteValid() {
@ -90,8 +98,8 @@ export default {
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {},
@ -117,30 +125,30 @@ export default {
color: $black;
}
.question-text {
& > span {
& > span {
line-height: 1.500rem;
}
}
.list-card-content p {
&:first-of-type {
line-height: 1.5rem;
line-height: 1.5rem;
}
&:not(:nth-of-type(1)){
line-height: 1.250rem;
line-height: 1.250rem;
}
}
.siteHeader{
.site-header{
margin-bottom: 1.25rem !important;
}
}
.choose-option{
.button-question >div {
&:first-of-type {
margin-bottom: 0.95rem;
line-height: 1.500rem;
}
.button-question >div {
&:first-of-type {
margin-bottom: 0.95rem;
line-height: 1.500rem;
}
}
}
.button-question{
@ -149,4 +157,4 @@ export default {
padding-left: 0rem !important;
}
}
</style>
</style>

30
src/router/index.js
View file

@ -35,7 +35,7 @@ const routes = [
await runExperiments(to.query.issPage);
}
// Process ISS cookie.
updateOrCreateISSCookie();
@ -74,9 +74,13 @@ const routes = [
const router = createRouter({
history: createWebHistory("/"),
routes,
scrollBehavior(to, from, savedPosition) {
// always scroll to top
return { top: 0 }
},
});
router.afterEach((to, from) => {
router.afterEach((to, from) => {
const store = useMainStore();
// Update lastPageVisited in the store
@ -95,12 +99,12 @@ router.afterEach((to, from) => {
// Get route information by page name.
// This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
async function GetRouteInfoFromPageName(pageName) {
const response = await useMainStore().getRouteInfo(pageName);
const jsonFromResponse = JSON.parse(response.data.Result);
let routeData = [];
// Add our route data and return our array.
Object.keys(jsonFromResponse).forEach((key) => {
routeData.push({
@ -137,7 +141,7 @@ router.overrideNavigation = (
router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
}
// Navigate to the next route, depending on the scenario.
@ -152,11 +156,11 @@ function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams =
if (!matchingScenarioMap){
console.error("No matching scenario found. Please review the routing table.");
return;
}
return;
}
if (matchingScenarioMap.destinationIssPageValue) {
// Update page data to the store for next page if provided. Otherwise, keep existing page data or set to empty object
const existingPageDataForPage = useMainStore().pageData(matchingScenarioMap.destinationIssPageValue);
baseMixin.methods.savePageDataToStore(
@ -183,11 +187,11 @@ function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams =
function navigateToUrl(url, optionalQuery = {}) {
// possibly show some loading screen in the future here.
let externalUrl = new URL(url);
for (const queryKey in optionalQuery) {
externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
}
window.location.assign(externalUrl);
};
@ -204,14 +208,14 @@ function getNavigationMap (scenario, currentRoute) {
);
let maps = matchedQueryValue ? matchedQueryValue.map((m) => m.maps.filter((map) => map.scenario === scenario))[0] : undefined;
return maps ? maps.filter(x => x.filter === true || x.filter === undefined)[0] : undefined;
}
catch (e) {
console.error(e);
return undefined;
}
};
function GoToStartOn404(next) {
@ -260,4 +264,4 @@ async function runExperiments(nextPage) {
});
}
export default router;
export default router;

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

@ -19,6 +19,8 @@ export const issPageValues = {
COVERAGE_STATEMENT: "coverage-statement",
PROVIDER_PREFERENCE: "provider-preference",
SERVICE_LOCATION: "service-location",
SCHEDULE_PAGE: "schedule-page",
CONTACT_DETAILS: "contact-details",
REVEAL: "reveal",
ESTIMATE: "estimate",
ADDRESS_VEHICLES: "address-vehicles",

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

@ -450,6 +450,26 @@ const routingTable = function(store) {
],
},
{
issPageValue: issPageValues.SCHEDULE_PAGE,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.SERVICE_LOCATION,
},
],
},
{
issPageValue: issPageValues.CONTACT_DETAILS,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.SCHEDULE_PAGE,
},
],
},
];
};

4
src/styles/client-customizations.scss
View file

@ -33,9 +33,7 @@ $limu-button-color: #A9E3E9;
color: $limu-button-text-color !important;
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $limu-button-color !important;
}
&:focus {
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $limu-button-color !important;
}
}
}

7
src/ux-components/button-main/button-main.vue
View file

@ -68,10 +68,7 @@ export default {
@media (hover: hover) {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
}
&:focus {
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
}
&:focus, // Mouse, touch, stylus focus
// Mouse, touch, stylus focus
&:focus-visible {
// Keyboard focus for accessibility
outline: none;
@ -93,7 +90,7 @@ export default {
&.has-loader {
color: $white;
background: $blue-700;
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
}
&.delay {
// fixes flicker while transitioning between states

9
src/ux-components/modal-button-main/modal-button-main.vue
View file

@ -75,10 +75,8 @@ export default {
@media (hover: hover) {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
}
&:focus {
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
}
&:focus, // Mouse, touch, stylus focus
// Mouse, touch, stylus focus
&:focus-visible {
// Keyboard focus for accessibility
outline: none;
@ -99,8 +97,7 @@ export default {
}
&.has-loader {
color: $white;
background: $blue-700;
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
background: $blue-700;
pointer-events: none;
}
&.delay {