front end for endorsements page

src/layouts/endorsements-page/endorsements-page.vue

@@ -0,0 +1,70 @@
+<template>
+    <Form
+        ref="theForm"
+        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="container-fluid pb-2">
+                    <siteFooter
+                    ref="siteFooter"
+                    cmsWidgetName="SiteFooterWidget"
+                    :isForwardActionDisabled="!meta.valid"
+                    @ForwardClicked="forwardButtonAction"
+                    @backClicked="backButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+// 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';
+
+export default {
+    name: 'endorsements-page',
+    components: {
+        siteHeader,
+        siteFooter,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form
+    },
+    mixins: [BaseFormMixin],
+    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.
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    methods:
+        {
+            backButtonAction() {
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+            },
+            forwardButtonAction() {
+                return this.navigateForward();
+            },
+            navigateForward() {
+                this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD,
+                    this.$route);
+            }
+        }
+};
+</script>

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

@@ -8,6 +8,7 @@ const issPageValues = Object.freeze({
     BAILOUT_PAGE: 'bailout-page',
     CAPABILITY_QUESTIONS: 'capability-questions',
     CONTACT_DETAILS: 'contact-details',
+    ENDORSEMENTS_PAGE: 'endorsements-page',
     ESTIMATE: 'estimate',
     COVERAGE_STATEMENT: 'coverage-statement',
     LICENSE_PLATE_LOOKUP: 'license-plate-lookup',

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

@@ -603,7 +603,21 @@ const routingTable = () => [
                 destinationIssPageValue: issPageValues.BAILOUT_CONFIRMATION
             }
         ]
-    }
+    },
+    {
+        issPageValue: issPageValues.ENDORSEMENTS_PAGE,
+        maps: [
+            {
+                scenario: navigationScenarios.CLICKED_BACK,
+                destinationIssPageValue: issPageValues.POLICY_VEHICLES
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD,
+                destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+            }
+        ]
+    },
+
 ];
 
 export { routingTable };