Merge pull request #393 from Safelite/feature/richardson/SSR-582.1

SSR-582 Bailout Confirmation Front End initial creation

src/iss-components/site-sub-header/site-sub-header.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div
-            class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+            class="subheader-primary d-flex align-items-center justify-content-center container-fluid overflow-hidden">
             <h5 class="text-center fw-normal mb-0 subheader-primary" :class="headerColor">
                 <span>
                     {{ content }}

src/layouts/bailout-confirmation/bailout-confirmation.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="page-container-grouped-styles">
+        <siteHeader cmsWidgetName="SiteHeaderWidget" />
+        <div class="main-content-container">
+            <siteSubHeader
+                cmsWidgetName="SiteSubHeaderWidget"
+                class="sub-header-content"
+                justification="left" />
+        </div>
+    </div>
+</template>
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
+// Supporting files
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { issPageValues } from '@/router/router-constants/issPage-values.js';
+import { settleAllPromises } from '@/helpers/layout-helper';
+import { useMainStore } from '@/store';
+
+export default {
+    name: 'bailout-confirmation',
+    components: {
+        siteHeader,
+        siteSubHeader
+    },
+    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);
+        });
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
+    data() {
+        const bailoutConfirmationData = useMainStore().pageData(issPageValues.BAILOUT_CONFIRMATION);
+        return {
+            bailoutConfirmationModel: bailoutConfirmationData
+        };
+    },
+    computed: {},
+    methods: {}
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/bailout-common.scss';
+</style>

src/layouts/bailout-page/bailout-page.vue

@@ -129,7 +129,15 @@ export default {
         forwardButtonAction() {
             return this.navigateForward();
         },
-        navigateForward() {},
+        navigateForward() {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.$route,
+                {},
+                {},
+                this.bailoutPageModel
+            );
+        },
         getBailoutPageModelFromStore() {
             return {
                 firstName: this.mainStore.order.customer.firstName,
@@ -143,42 +151,5 @@ export default {
 </script>
 
 <style lang="scss">
-$page-side-padding: 1.5rem;
+@import '@/styles/bailout-common.scss';
-
-.page-container-grouped-styles {
-    > div.main-content-container {
-        overflow: auto;
-        padding: 0 $page-side-padding !important;
-
-        > div.sub-header-content {
-            margin-top: 1rem;
-            padding: 0;
-
-            div.subheader-secondary {
-                margin-top: 0.5rem;
-                padding: 0;
-
-                p {
-                    line-height: 1.5rem;
-
-                    &:last-child {
-                        margin-bottom: 0;
-                    }
-                }
-
-                span {
-                    font-size: 0.875rem;
-                }
-            }
-        }
-
-        div.textbox-question {
-            margin-top: 1rem;
-        }
-
-        div.footer-content-container {
-            margin: 1.5rem 0;
-        }
-    }
-}
 </style>

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

@@ -4,6 +4,7 @@ export const issPageValues = {
 
     ADDRESS_LOOKUP: 'address-lookup',
     ADDRESS_VEHICLES: 'address-vehicles',
+    BAILOUT_CONFIRMATION: 'bailout-confirmation',
     BAILOUT_PAGE: 'bailout-page',
     CAPABILITY_QUESTIONS: 'capability-questions',
     CONTACT_DETAILS: 'contact-details',

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

@@ -597,6 +597,10 @@ const routingTable = () => [
             {
                 scenario: navigationScenarios.CLICKED_BACK_PREVIOUS,
                 destinationIssPageValue: issPageValues.BAILOUT_PAGE
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD,
+                destinationIssPageValue: issPageValues.BAILOUT_CONFIRMATION
             }
         ]
     }

src/styles/bailout-common.scss

@@ -0,0 +1,41 @@
+$page-side-padding: 1.5rem;
+
+.page-container-grouped-styles {
+  > div.main-content-container {
+    overflow: auto;
+    padding: 0 $page-side-padding !important;
+    
+    > div.sub-header-content {
+      margin-top: 1rem;
+      padding: 0;
+
+      div.subheader-primary {
+        padding: 0;
+      }
+
+      div.subheader-secondary {
+        margin-top: 0.5rem;
+        padding: 0;
+
+        p {
+          line-height: 1.5rem;
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+        
+        span {
+          font-size: 0.875rem;
+        }
+      }
+    }
+    
+    div.textbox-question {
+      margin-top: 1rem;
+    }
+
+    div.footer-content-container {
+      margin: 1.5rem 0;
+    }
+  }
+}