From b18c151dd5795201b9fbf8b69b3faca5232f375e Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 2 Aug 2023 14:19:27 -0400
Subject: [PATCH] push changes in case i lose them fixing repo

---
 src/constants/error-messages.js               |  10 +-
 src/constants/global-rules.js                 |  11 +-
 src/helpers/global-rule-definer.js            |  39 ++-
 .../site-sub-header/site-sub-header.vue       | 109 ++++----
 src/layouts/bailout-page/bailout-page.vue     | 233 ++++++++++++++++--
 src/layouts/welcome-page/welcome-page.vue     |  22 +-
 src/router/index.js                           |  36 ++-
 .../router-constants/navigation-scenarios.js  |   3 +-
 src/router/router-constants/routing-table.js  |  48 +++-
 9 files changed, 393 insertions(+), 118 deletions(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 123cf07e..b03dba2f 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -21,18 +21,21 @@ const errorMessages = {
     SERVICE_ZIP_REQUIRED: 'Please enter your service ZIP',
     SERVICE_ZIP_FORMAT: 'Please enter a valid service ZIP',
     VIN_REQUIRED: 'Please enter your VIN',
-    VIN_FORMAT: 'Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q',
+    VIN_FORMAT:
+        'Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q',
     OPTION_REQUIRED: 'Please select an option',
     VEHICLE_REQUIRED: 'Please select a vehicle',
     POLICY_NUMBER_REQUIRED: 'Please enter your policy number',
     PHONE_NUMBER_REQUIRED: 'Please enter phone number',
     PHONE_NUMBER_FORMAT: 'Please enter your phone number. The format must be ###-###-####',
+    PHONE_NUMBER_FORMAT_SHORT: 'Please enter a valid phone number',
     POLICY_ZIP_REQUIRED: 'Please enter your policy ZIP',
     POLICY_ZIP_FORMAT: 'Please enter a valid ZIP',
     LOSS_CAUSE_REQUIRED: 'Please enter loss cause',
     LOSS_CITY_REQUIRED: 'Please enter a city',
     LOSS_STATE_REQUIRED: 'Please select an option',
-    LOSS_DATE_REQUIRED: 'Please select a date. Format must be MM/DD/YYYY and the date must be not in the future',
+    LOSS_DATE_REQUIRED:
+        'Please select a date. Format must be MM/DD/YYYY and the date must be not in the future',
     DAMAGE_OPTION_REQUIRED: 'Please select an option',
 
     POLICYHOLDER_FIRST_NAME_REQUIRED: 'Please enter the policyholder first name',
@@ -43,7 +46,6 @@ const errorMessages = {
     MAKE_REQUIRED: 'Please select your vehicle make',
     MODEL_REQUIRED: 'Please select your vehicle model',
     STYLE_REQUIRED: 'Please select your vehicle style'
-
 };
 
-export { errorMessages };
\ No newline at end of file
+export { errorMessages };
diff --git a/src/constants/global-rules.js b/src/constants/global-rules.js
index c78cd07e..aa65a5da 100644
--- a/src/constants/global-rules.js
+++ b/src/constants/global-rules.js
@@ -1,8 +1,8 @@
 /**
-* @file global-rules.js
-* @author MB
-* @copyright Safelite
-*/
+ * @file global-rules.js
+ * @author MB
+ * @copyright Safelite
+ */
 
 /**
  * @summary Contains all the globally defined rules.
@@ -12,10 +12,11 @@ const globalRules = {
     POLICYHOLDER_LAST_NAME_REQUIRED: 'policyholder-last-name-required',
     FIRST_NAME_REQUIRED: 'first-name-required',
     LAST_NAME_REQUIRED: 'last-name-required',
-    PHONE_NUMBER_REQUIRED: 'phone-number-required',
     EMAIL_ADDRESS_REQUIRED: 'email-required',
     EMAIL_ADDRESS_FORMAT: 'email-address-format',
+    PHONE_NUMBER_REQUIRED: 'phone-number-required',
     PHONE_NUMBER_FORMAT: 'phone-number-format',
+    PHONE_NUMBER_FORMAT_SHORT: 'phone-number-format-short',
     OPTION_REQUIRED: 'option-required'
 };
 
diff --git a/src/helpers/global-rule-definer.js b/src/helpers/global-rule-definer.js
index 4763d8e6..4a33990b 100644
--- a/src/helpers/global-rule-definer.js
+++ b/src/helpers/global-rule-definer.js
@@ -9,10 +9,14 @@ import { required, regex } from '@/helpers/validation-rules';
 function defineGlobalNameRules() {
     defineRule(globalRules.FIRST_NAME_REQUIRED, required(errorMessages.FIRST_NAME_REQUIRED));
     defineRule(globalRules.LAST_NAME_REQUIRED, required(errorMessages.LAST_NAME_REQUIRED));
-    defineRule(globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
-        required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
-    defineRule(globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
-        required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
+    defineRule(
+        globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
+        required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED)
+    );
+    defineRule(
+        globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
+        required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED)
+    );
 }
 
 /**
@@ -20,9 +24,13 @@ function defineGlobalNameRules() {
  */
 function defineGlobalEmailRules() {
     defineRule(globalRules.EMAIL_ADDRESS_REQUIRED, required(errorMessages.EMAIL_ADDRESS_REQUIRED));
-    defineRule(globalRules.EMAIL_ADDRESS_FORMAT,
-        regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
-            errorMessages.EMAIL_ADDRESS_FORMAT));
+    defineRule(
+        globalRules.EMAIL_ADDRESS_FORMAT,
+        regex(
+            /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
+            errorMessages.EMAIL_ADDRESS_FORMAT
+        )
+    );
 }
 
 /**
@@ -30,9 +38,20 @@ function defineGlobalEmailRules() {
  */
 function defineGlobalPhoneNumberRules() {
     defineRule(globalRules.PHONE_NUMBER_REQUIRED, required(errorMessages.PHONE_NUMBER_REQUIRED));
-    defineRule(globalRules.PHONE_NUMBER_FORMAT,
-        regex(/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
-            errorMessages.PHONE_NUMBER_FORMAT));
+    defineRule(
+        globalRules.PHONE_NUMBER_FORMAT,
+        regex(
+            /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
+            errorMessages.PHONE_NUMBER_FORMAT
+        )
+    );
+    defineRule(
+        globalRules.PHONE_NUMBER_FORMAT_SHORT,
+        regex(
+            /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
+            errorMessages.PHONE_NUMBER_FORMAT_SHORT
+        )
+    );
 }
 
 /**
diff --git a/src/iss-components/site-sub-header/site-sub-header.vue b/src/iss-components/site-sub-header/site-sub-header.vue
index c0f0ef77..eea079d9 100644
--- a/src/iss-components/site-sub-header/site-sub-header.vue
+++ b/src/iss-components/site-sub-header/site-sub-header.vue
@@ -1,35 +1,31 @@
 <template>
     <div>
-      <div class="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 }}
-          </span>
-          <buttonBack
-            v-if="hasBackButton"
-            :backButtonAccessibleText="backButtonAccessibleText"
-            @click-event="clickEvent" />
-        </h5>
-      </div>
-      <div
-        class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden"
-        :class="justifySubheader">
-            <p
-                class="fw-normal mb-0"
-                :class="alternateFormatting">
-                <span v-html="subText">
+        <div
+            class="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 }}
                 </span>
+                <buttonBack
+                    v-if="hasBackButton"
+                    :backButtonAccessibleText="backButtonAccessibleText"
+                    @click-event="clickEvent" />
+            </h5>
+        </div>
+        <div
+            class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden"
+            :class="justifySubheader">
+            <p class="fw-normal mb-0" :class="alternateFormatting">
+                <span v-html="subText"> </span>
             </p>
         </div>
     </div>
-  </template>
+</template>
 
 <script>
 import buttonBack from '@/iss-components/site-sub-header/button-back/button-back';
 
-export default ({
+export default {
     name: 'site-sub-header',
     components: { buttonBack },
     props: {
@@ -55,7 +51,7 @@ export default ({
             return this.subText ? 'dark-header' : 'light-header';
         },
         justifySubheader() {
-            return (this.justification?.toLowerCase() === 'left')
+            return this.justification?.toLowerCase() === 'left'
                 ? 'justify-content-left'
                 : 'justify-content-center';
         },
@@ -72,53 +68,52 @@ export default ({
             this.$emit('click-event');
         }
     }
-});
+};
 </script>
 
 <style lang="scss" scoped>
-    .dark-header {
-        color: $black;
-    }
+.dark-header {
+    color: $black;
+}
 
-    .light-header {
-        color: $gray-550;
-    }
+.light-header {
+    color: $gray-550;
+}
 
-    h5 {
-      line-height: 32px;
+h5 {
+    line-height: 32px;
 
-      button {
+    button {
         color: inherit;
-      }
-      span{
+    }
+    span {
         color: $black;
-      }
-    }
-    p.light-gray {
-        color: $gray-550;
     }
+}
+p.light-gray {
+    color: $gray-550;
+}
 
-    p.dark-gray {
-        color: $darker-gray;
-    }
+p.dark-gray {
+    color: $darker-gray;
+}
 
-    p.service-packages-subtext {
-        font-weight: 500 !important;
-        line-height: 24px;
-    }
+p.service-packages-subtext {
+    font-weight: 500 !important;
+    line-height: 24px;
+}
 
-    .subheader-secondary {
-        &.justify-content-center{
-            p {
-                text-align: center;
-            }
-        }
-
-        &.justify-content-left{
-            p {
-                text-align: left;
-            }
+.subheader-secondary {
+    &.justify-content-center {
+        p {
+            text-align: center;
         }
     }
 
+    &.justify-content-left {
+        p {
+            text-align: left;
+        }
+    }
+}
 </style>
diff --git a/src/layouts/bailout-page/bailout-page.vue b/src/layouts/bailout-page/bailout-page.vue
index b1f28816..274648ff 100644
--- a/src/layouts/bailout-page/bailout-page.vue
+++ b/src/layouts/bailout-page/bailout-page.vue
@@ -1,21 +1,57 @@
 <template>
-    <Form
-        ref="theForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalid-submit="onInvalidSubmit">
+    <Form ref="theForm" v-slot="{ meta }" @submit="onSubmit" @invalid-submit="onInvalidSubmit">
         <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 bailout page</p>
-                    <siteFooter
-                    ref="siteFooter"
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <div class="main-content-container">
+                <siteSubHeader
+                    v-if="!isNoTpa"
+                    cmsWidgetName="SiteSubHeaderWidget"
+                    class="sub-header-content"
+                    justification="left" />
+                <siteSubHeader
+                    v-if="isNoTpa"
+                    cmsWidgetName="SiteSubHeaderNoTPAWidget"
+                    class="sub-header-content"
+                    justification="left" />
+                <textboxQuestion
+                    inputId="firstNameField"
+                    cmsWidgetName="FirstNameQuestion"
+                    v-model="bailoutPageModel.firstName"
+                    isRequired
+                    ref="firstName"
+                    disableAutoFill
+                    :validationRules="rules.firstName" />
+                <textboxQuestion
+                    inputId="lastNameField"
+                    cmsWidgetName="LastNameQuestion"
+                    v-model="bailoutPageModel.lastName"
+                    isRequired
+                    ref="lastName"
+                    disableAutoFill
+                    :validationRules="rules.lastName" />
+                <textboxQuestion
+                    inputId="phoneNumberField"
+                    cmsWidgetName="PhoneNumberQuestion"
+                    v-model="bailoutPageModel.phoneNumber"
+                    isRequired
+                    ref="phoneNumber"
+                    mask="###-###-####"
+                    disableAutoFill
+                    :validationRules="rules.phoneNumber" />
+                <textboxQuestion
+                    inputId="emailAddressField"
+                    cmsWidgetName="EmailAddressQuestion"
+                    v-model="bailoutPageModel.email"
+                    isRequired
+                    ref="emailAddress"
+                    disableAutoFill
+                    :validationRules="rules.email" />
+                <siteFooter
+                    class="footer-content-container"
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @back-clicked="backButtonAction" />
-                </div>
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
             </div>
         </div>
     </Form>
@@ -23,19 +59,24 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
 import siteFooter from '@/iss-components/site-footer/site-footer';
+import textboxQuestion from '@/digital-components/textbox-question/textbox-question';
 // 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 globalRules from '@/constants/global-rules';
 import { useMainStore } from '@/store';
 
 export default {
     name: 'bailout-page',
     components: {
         siteHeader,
+        siteSubHeader,
         siteFooter,
+        textboxQuestion,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -48,9 +89,85 @@ export default {
             {
                 resultKey: 'cmsContent',
                 promise: cmsContentPromise
-            }];
-            // use resultMap to populate layout content.
+            }
+        ];
+        // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
+        const cmsMoq = {
+            SiteHeaderWidget: {
+                Answers: [
+                    {
+                        ClientName: 'Generic',
+                        AccountNumber: '0',
+                        ImageId: '4912b7b6-e403-450e-a837-44b6e30539fa',
+                        AnswerImageUrl:
+                            'https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/generic.svg?sfvrsn=4f01888b_1',
+                        AltText: 'Logo',
+                        HexCode: '#FFFFFF'
+                    },
+                    {
+                        ClientName: 'Liberty Mutual',
+                        AccountNumber: '550036',
+                        ImageId: '4503e012-aa30-4cf8-9210-3f2f6ba63436',
+                        AnswerImageUrl:
+                            'https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/liberty-mutual.svg?sfvrsn=49878147_4',
+                        AltText: 'Liberty Mutual Logo',
+                        HexCode: '#FFD100'
+                    },
+                    {
+                        ClientName: 'Bear River',
+                        AccountNumber: '569316',
+                        ImageId: 'b64b261c-bcf4-4e35-9969-e9909b1b1160',
+                        AnswerImageUrl:
+                            'https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/bearriver_logo341d77a6d7b94441af0658338118994c.png?sfvrsn=bba433ab_0',
+                        AltText: 'Bear River Logo',
+                        HexCode: '#FFFFFF'
+                    },
+                    {
+                        ClientName: 'CSE',
+                        AccountNumber: '460196',
+                        ImageId: 'ce1faddf-d9dd-410e-8564-bfb6893285de',
+                        AnswerImageUrl:
+                            'https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/cse_logob36dba292db8489398993dd21c0170d6.png?sfvrsn=a3d5f26c_0',
+                        AltText: 'CSE Logo',
+                        HexCode: '#FFFFFF'
+                    }
+                ]
+            },
+            SiteSubHeaderWidget: {
+                SubHeaderText: 'Request a callback',
+                SecondaryText: `Please provide your contact details and we'll get back to you soon.`
+            },
+            FirstNameQuestion: {
+                QuestionText: 'First name',
+                ButtonText: '',
+                Answers: []
+            },
+            LastNameQuestion: {
+                QuestionText: 'Last name',
+                ButtonText: '',
+                Answers: []
+            },
+            PhoneNumberQuestion: {
+                QuestionText: 'Phone number',
+                ButtonText: '',
+                Answers: []
+            },
+            EmailAddressQuestion: {
+                QuestionText: 'Email address',
+                ButtonText: '',
+                Answers: []
+            },
+            SiteFooterWidget: {
+                BackButtonText: 'Back',
+                ForwardButtonText: 'Send callback request',
+                FooterImageId: 'b7bb829f-14a3-41c5-91e5-1f4f5dfafc0d',
+                FooterImageURL: ''
+            }
+        };
+
+        console.log(resultMap);
+
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
         });
@@ -60,16 +177,82 @@ export default {
         return { mainStore };
     },
     data() {
-    },
-    methods:
-        {
-            backButtonAction() {
-            },
-            forwardButtonAction() {
-                return this.navigateForward();
-            },
-            navigateForward() {
+        return {
+            bailoutPageModel: this.getBailoutPageModelFromStore(),
+            rules: {
+                firstName: globalRules.FIRST_NAME_REQUIRED,
+                lastName: globalRules.LAST_NAME_REQUIRED,
+                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT_SHORT}`,
+                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`
             }
+        };
+    },
+    computed: {
+        isNoTpa() {
+            return false; // not sure what in the data flags this.
         }
+    },
+    methods: {
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK_PREVIOUS, this.$route);
+        },
+        forwardButtonAction() {
+            return this.navigateForward();
+        },
+        navigateForward() {},
+        getBailoutPageModelFromStore() {
+            console.log(this.mainStore);
+            return {
+                firstName: this.mainStore.order.customer.firstName,
+                lastName: this.mainStore.order.customer.lastName,
+                phoneNumber: this.mainStore.order.customer.phoneNumber,
+                email: this.mainStore.order.customer.emailAddress
+            };
+        }
+    }
 };
 </script>
+
+<style lang="scss">
+$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-secondary {
+                margin-top: 0.5rem;
+                padding: 0;
+
+                p {
+                    line-height: 1.5rem;
+                }
+
+                span {
+                    font-size: 0.875rem;
+
+                    &.new-paragraph {
+                        display: block;
+                        margin-top: 0.25rem;
+                        line-height: 1.5rem;
+                    }
+                }
+            }
+        }
+
+        div.textbox-question {
+            margin-top: 1rem;
+        }
+
+        div.footer-content-container {
+            margin: 1.5rem 0;
+        }
+    }
+}
+</style>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 4faea3e9..50c0cf50 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -74,7 +74,7 @@
                             placeHolderText="Select an option" />
                         </div>
                     </div>
-                    <div class="row mt-4 ">
+                    <div class="row mt-4">
                         <div class="col">
                             <textboxQuestion
                             ref="phoneNumber"
@@ -151,11 +151,11 @@
                         class="row position-sticky top-100">
                         <div class="col">
                             <siteFooter
-                            class="mt-3"
-                            cmsWidgetName="SiteFooterWidget"
-                            :isForwardActionDisabled="!meta.valid"
-                            @back-clicked="backButtonAction"
-                            @ForwardClicked="forwardButtonAction" />
+                                class="mt-3"
+                                cmsWidgetName="SiteFooterWidget"
+                                :isForwardActionDisabled="!meta.valid"
+                                @back-clicked="backButtonAction"
+                                @ForwardClicked="forwardButtonAction" />
                         </div>
                     </div>
                 </div>
@@ -192,7 +192,10 @@ defineRule('loss-state-required', required(errorMessages.LOSS_STATE_REQUIRED));
 defineRule('loss-city-required', required(errorMessages.LOSS_CITY_REQUIRED));
 defineRule('damage-option-required', required(errorMessages.DAMAGE_OPTION_REQUIRED));
 defineRule('policy-zip-required', required(errorMessages.POLICY_ZIP_REQUIRED));
-defineRule('policy-zip-format', regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT));
+defineRule(
+    'policy-zip-format',
+    regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT)
+);
 
 export default {
     name: 'welcome-page',
@@ -224,6 +227,8 @@ export default {
         const resultMap = await settleAllPromises(promiseResultMap);
 
         next((vm) => {
+            console.log(resultMap);
+            console.log(resultMap.cmsContent);
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
@@ -322,7 +327,8 @@ export default {
                 const policy = policyInfo.policies?.[0];
                 if (policy) {
                     // populate policy holder details from policy lookup
-                    this.mainStore.order.customer.address.streetAddress = policy.insureds?.[0]?.address;
+                    this.mainStore.order.customer.address.streetAddress =
+                        policy.insureds?.[0]?.address;
                     this.mainStore.order.customer.address.city = policy.insureds?.[0]?.city;
                     this.mainStore.order.customer.address.state = policy.insureds?.[0]?.state;
                     this.mainStore.order.customer.address.zipCode = policy.insureds?.[0]?.zipCode;
diff --git a/src/router/index.js b/src/router/index.js
index b39e5852..c27b55bb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,6 +15,7 @@ import { experimentTriggers } from '@/constants/experiments';
 import { applicationConfig } from '@/constants/application-config';
 
 import analyticsMixin from '@/mixins/analytics-mixin';
+import { navigationScenarios } from './router-constants/navigation-scenarios';
 
 const routes = [
     {
@@ -22,7 +23,9 @@ const routes = [
         name: 'root',
         async beforeEnter(to, from, next) {
             try {
-                to.query.issPage = !to.query.issPage ? issPageValues.WELCOME_PAGE : to.query.issPage;
+                to.query.issPage = !to.query.issPage
+                    ? issPageValues.WELCOME_PAGE
+                    : to.query.issPage;
 
                 // Do not run these for the main entry page - as it is not part of the user flow.
                 if (to.query.issPage !== issPageValues.ENTRY_PAG) {
@@ -67,18 +70,20 @@ const routes = [
             }
             return null;
         }
-    }];
+    }
+];
 
 const router = createRouter({
     history: createWebHistory('/'),
     routes,
     scrollBehavior(to, from, savedPosition) {
-    // always scroll to top
+        // always scroll to top
         return { top: 0 };
     }
 });
 
-router.afterEach((to, from) => {    /*eslint-disable-line*/
+router.afterEach((to, from) => {
+    /*eslint-disable-line*/
 
     const store = useMainStore();
     // Update lastPageVisited in the store
@@ -130,12 +135,25 @@ router.overrideNavigation = (scenario,
     next();
 };
 
-router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
+router.navigate = (
+    scenario,
+    currentRoute,
+    optionalQuery = {},
+    optionalParams = {},
+    optionalPageData = {}
+) => {
     navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
 };
 
 // Navigate to the next route, depending on the scenario.
-function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) {  /*eslint-disable-line*/
+function navigate(
+    scenario,
+    currentRoute,
+    optionalQuery = {},
+    optionalParams = {},
+    optionalPageData = {}
+) {
+    /*eslint-disable-line*/
     if (!scenario) {
         console.error('No scenario provided. Please review the routing table.');
         return;
@@ -149,7 +167,11 @@ function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams =
         return;
     }
 
-    if (matchingScenarioMap.destinationIssPageValue) {
+    if (scenario === navigationScenarios.CLICKED_BACK_PREVIOUS) {
+        // Update page to the prevous page in the router.
+        // If we need to worry about typing this in from outside of the app, we'll need to pre check history.length or if there is a previous page stored in state.
+        router.go(-1);
+    } else 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(matchingScenarioMap.destinationIssPageValue,
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 9f3881e9..934065c1 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -1,6 +1,7 @@
 const navigationScenarios = {
     // General
     CLICKED_BACK: 'CLICKED_BACK',
+    CLICKED_BACK_PREVIOUS: 'CLICKED_BACK_PREVIOUS',
     CLICKED_FORWARD: 'CLICKED_FORWARD',
 
     // Entry
@@ -65,4 +66,4 @@ const navigationScenarios = {
     CLICKED_FORWARD_WITH_BAILOUT: 'CLICKED_FORWARD_WITH_BAILOUT'
 };
 
-export { navigationScenarios };
\ No newline at end of file
+export { navigationScenarios };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 1f874952..3f391026 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -593,5 +593,51 @@ const routingTable = () => [
     }
 ];
 
-export { routingTable };
+        {
+            issPageValue: issPageValues.TPA_SUBMIT,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationIssPageValue: issPageValues.TPA_SEARCH
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationIssPageValue: issPageValues.TPA_CONFIRMATION
+                }
+            ]
+        },
+        {
+            issPageValue: issPageValues.ORDER_CONFIRMATION,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationIssPageValue: issPageValues.WELCOME_PAGE
+                }
+            ]
+        },
+        {
+            issPageValue: issPageValues.TPA_SEARCH,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationIssPageValue: issPageValues.TPA_SUBMIT
+                }
+            ]
+        },
+        {
+            issPageValue: issPageValues.BAILOUT_PAGE,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK_PREVIOUS,
+                    destinationIssPageValue: issPageValues.BAILOUT_PAGE
+                }
+            ]
+        }
+    ];
+};
 
+export { routingTable };