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

src/layouts/contact-details/contact-details.vue

@@ -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>

src/layouts/schedule-page/schedule-page.vue

@@ -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>

src/layouts/service-location/service-location.vue

@@ -1,30 +1,38 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-        <div class="page-container-grouped-styles">  
+        <div class="page-container-grouped-styles">
-            <siteHeader cmsWidgetName="SiteHeaderWidget" class="siteHeader"/>
+            <div class="fade-on-route-transition position-relative">
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" /> 
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <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="select-car">
                     <div class="container-fluid pb-2">
                         <div class="row px-3">
                             <div class="col">
                                 <div class="select-car-form rounded">
-                                    <siteFooter
+                                    <buttonQuestion
-                                    cmsWidgetName="SiteFooterWidget"
+                                    cmsWidgetName="ServiceTypeQuestionWidget"
-                                    :isForwardActionDisabled="!meta.valid"
+                                    :questionText="questionText"
-                                    @backClicked="backButtonAction"
+                                    :answers="answersFromCms"
-                                    @forwardClicked="forwardButtonAction"
+                                    buttonTypeString="listCard"
-                                    ref="siteFooter"
+                                    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 {
+    .button-question >div {
-            &:first-of-type {
+        &:first-of-type {
-        margin-bottom: 0.95rem;
+            margin-bottom: 0.95rem;
-        line-height: 1.500rem;
+            line-height: 1.500rem;
-            }
+        }
     }
 }
 .button-question{
@@ -149,4 +157,4 @@ export default {
         padding-left: 0rem !important;
     }
 }
-</style>
+</style>

src/router/index.js

@@ -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;

src/router/router-constants/issPage-values.js

@@ -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",

src/router/router-constants/routing-table.js

@@ -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,
+        },
+        
+      ],
+    },
 
   ];
 };

src/styles/client-customizations.scss

@@ -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;
-            }
         }
     }
 

src/ux-components/button-main/button-main.vue

@@ -68,10 +68,7 @@ export default {
         @media (hover: hover) {
             background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
         }
-        &:focus {
+         // Mouse, touch, stylus focus
-            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
-        }
-        &: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

src/ux-components/modal-button-main/modal-button-main.vue

@@ -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;
+       // Mouse, touch, stylus focus
-        }
-        &: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;
+            background: $blue-700;           
-            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
             pointer-events: none;
         }
         &.delay {