SSR-586 - Save Bailout & Callback

src/constants/bailoutCode.js

@@ -0,0 +1,12 @@
+const bailoutCode = Object.freeze({
+    Unknown: 0,
+    SaveSessionError: 1,
+    VehicleNotFound: 2,
+    VehicleLookupError: 3,
+    CoverageStatementInvalidState: 4,
+    DoNotSeeMyShop: 5,
+    PricingResponseError: 6,
+    TPANotEnabled: 7
+});
+
+export default bailoutCode;

src/helpers/bailout-helper.js

@@ -0,0 +1,21 @@
+import { useMainStore } from '@/store';
+import BailoutCode from '@/constants/bailoutCode';
+
+function canBailoutNavigateBack() {
+    const code = useMainStore().order.bailout.bailoutCode;
+    if (code == null) {
+        return true;
+    }
+
+    switch (code) {
+        case BailoutCode.VehicleNotFound:
+        case BailoutCode.DoNotSeeMyShop:
+        case BailoutCode.TPANotEnabled:
+            return false;
+
+        default:
+            return false;
+    }
+}
+
+export default canBailoutNavigateBack;

src/layouts/bailout-page/__snapshots__/bailout-page.spec.js.snap

@@ -2,13 +2,13 @@
 
 exports[`Bailout page returns the initial data 1`] = `
 Object {
+  "bailoutCode": null,
   "bailoutPageModel": Object {
     "email": "alexander.hamilton45@gmail.com",
     "firstName": "Alexander",
     "lastName": "Hamilton",
     "phoneNumber": "6145550909",
   },
-  "notSeeingPreferredShop": false,
   "rules": Object {
     "email": "email-required|email-address-format",
     "firstName": "first-name-required",

src/layouts/bailout-page/bailout-page.spec.js

@@ -9,6 +9,7 @@ import routerParams from '@/router/router-constants/router-params';
 import { useMainStore } from '@/store';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper.js';
+import BailoutCode from '@/constants/bailoutCode';
 
 // Mock fetchCmsContentForPage
 jest.mock('@/helpers/cms-content-helper', () => ({
@@ -146,30 +147,35 @@ describe('Bailout page', () => {
     });
     describe('computed', () => {
         describe('subHeaderCmsWidgetName', () => {
-            test.each([true, false])(
+            test('returns noTpa widget name when bailout code is BailoutCode.TPANotEnabled', () => {
-                'returns noTpa widget name when tpa flow not enabled',
-                (notSeeingPreferredShop) => {
-                    // Arrange
-                    const mainInitialState = {
-                        issConfig: { enableTPAFlow: false }
-                    };
-                    const initialData = { notSeeingPreferredShop };
-                    const { wrapper } = getMountedComponent(mainInitialState, initialData);
-                    const expected = 'ContentGroupNoTPAWidget';
-
-                    // Act
-                    const name = wrapper.vm.subHeaderCmsWidgetName;
-
-                    // Assert
-                    expect(name).toBe(expected);
-                }
-            );
-            test('returns notSeeingPreferredShop widget name when tpa enabled and notSeeingPreferredShop true', () => {
                 // Arrange
                 const mainInitialState = {
-                    issConfig: { enableTPAFlow: true }
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.TPANotEnabled
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: true };
+                const initialData = { };
+                const { wrapper } = getMountedComponent(mainInitialState, initialData);
+                const expected = 'ContentGroupNoTPAWidget';
+
+                // Act
+                const name = wrapper.vm.subHeaderCmsWidgetName;
+
+                // Assert
+                expect(name).toBe(expected);
+            });
+            test('returns notSeeingPreferredShop widget name when bailout code is BailoutCode.DoNotSeeMyShop', () => {
+                // Arrange
+                const mainInitialState = {
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.DoNotSeeMyShop
+                        }
+                    }
+                };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'ContentGroupNotSeeingPreferredShop';
 
@@ -179,12 +185,16 @@ describe('Bailout page', () => {
                 // Assert
                 expect(name).toBe(expected);
             });
-            test('returns default widget name when tpa enabled and notSeeingPreferredShop false', () => {
+            test('returns default widget name when BailoutCode does not match any other content bailout codes', () => {
                 // Arrange
                 const mainInitialState = {
-                    issConfig: { enableTPAFlow: true }
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.Unknown
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: false };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'SiteSubHeaderWidget';
 
@@ -196,12 +206,16 @@ describe('Bailout page', () => {
             });
         });
         describe('subHeaderContentProperty', () => {
-            test('returns "SubHeaderText" when tpa flow enabled and not seeing preferred shop flag false', () => {
+            test('returns "SubHeaderText" when BailoutCode does not match any other content bailout codes', () => {
                 // Arrange
                 const mainInitialState = {
-                    issConfig: { enableTPAFlow: true }
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.Unknown
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: false };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'SubHeaderText';
 
@@ -211,30 +225,35 @@ describe('Bailout page', () => {
                 // Assert
                 expect(name).toBe(expected);
             });
-            test.each([true, false])(
+            test('returns "HeaderText" when BailoutCode is BailoutCode.TPANotEnabled', () => {
-                'returns "HeaderText" when tpa flow not enabled',
-                (notSeeingPreferredShop) => {
-                    // Arrange
-                    const mainInitialState = {
-                        issConfig: { enableTPAFlow: false }
-                    };
-                    const initialData = { notSeeingPreferredShop };
-                    const { wrapper } = getMountedComponent(mainInitialState, initialData);
-                    const expected = 'HeaderText';
-
-                    // Act
-                    const name = wrapper.vm.subHeaderContentProperty;
-
-                    // Assert
-                    expect(name).toBe(expected);
-                }
-            );
-            test('returns "HeaderText" when tpa flow enabled and not seeing preferred shop flag true', () => {
                 // Arrange
                 const mainInitialState = {
-                    issConfig: { enableTPAFlow: false }
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.TPANotEnabled
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: true };
+                const initialData = { };
+                const { wrapper } = getMountedComponent(mainInitialState, initialData);
+                const expected = 'HeaderText';
+
+                // Act
+                const name = wrapper.vm.subHeaderContentProperty;
+
+                // Assert
+                expect(name).toBe(expected);
+            });
+            test('returns "HeaderText" when BailoutCode is BailoutCode.DoNotSeeMyShop', () => {
+                // Arrange
+                const mainInitialState = {
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.DoNotSeeMyShop
+                        }
+                    }
+                };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'HeaderText';
 
@@ -246,12 +265,16 @@ describe('Bailout page', () => {
             });
         });
         describe('subContentProperty', () => {
-            test('returns "SecondaryText" when tpa flow enabled and not seeing preferred shop flag false', () => {
+            test('returns "SecondaryText" when BailoutCode does not match any other content bailout codes', () => {
                 // Arrange
                 const mainInitialState = {
-                    issConfig: { enableTPAFlow: true }
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.Unknown
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: false };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'SecondaryText';
 
@@ -261,30 +284,35 @@ describe('Bailout page', () => {
                 // Assert
                 expect(name).toBe(expected);
             });
-            test.each([true, false])(
+            test('returns "BodyText" when BailoutCode is BailoutCode.TPANotEnabled', () => {
-                'returns "BodyText" when tpa flow not enabled',
-                (notSeeingPreferredShop) => {
-                    // Arrange
-                    const mainInitialState = {
-                        issConfig: { enableTPAFlow: false }
-                    };
-                    const initialData = { notSeeingPreferredShop };
-                    const { wrapper } = getMountedComponent(mainInitialState, initialData);
-                    const expected = 'BodyText';
-
-                    // Act
-                    const name = wrapper.vm.subContentProperty;
-
-                    // Assert
-                    expect(name).toBe(expected);
-                }
-            );
-            test('returns "BodyText" when tpa flow enabled and not seeing preferred shop flag true', () => {
                 // Arrange
                 const mainInitialState = {
-                    issConfig: { enableTPAFlow: true }
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.TPANotEnabled
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: true };
+                const initialData = { };
+                const { wrapper } = getMountedComponent(mainInitialState, initialData);
+                const expected = 'BodyText';
+
+                // Act
+                const name = wrapper.vm.subContentProperty;
+
+                // Assert
+                expect(name).toBe(expected);
+            });
+            test('returns "BodyText" when BailoutCode is BailoutCode.DoNotSeeMyShop', () => {
+                // Arrange
+                const mainInitialState = {
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.DoNotSeeMyShop
+                        }
+                    }
+                };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'BodyText';
 
@@ -296,12 +324,16 @@ describe('Bailout page', () => {
             });
         });
         describe('stripRteStyle', () => {
-            test('returns false when tpa flow enabled and not seeing preferred shop flag false', () => {
+            test('returns false when BailoutCode does not match any other content bailout codes', () => {
                 // Arrange
                 const mainInitialState = {
-                    issConfig: { enableTPAFlow: true }
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.Unknown
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: false };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = false;
 
@@ -311,12 +343,16 @@ describe('Bailout page', () => {
                 // Assert
                 expect(flag).toBe(expected);
             });
-            test('returns true when tpa flow not enabled and not seeing preferred shop flag false', () => {
+            test('returns true when BailoutCode is BailoutCode.TPANotEnabled', () => {
                 // Arrange
                 const mainInitialState = {
-                    issConfig: { enableTPAFlow: false }
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.TPANotEnabled
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: false };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = true;
 
@@ -326,12 +362,16 @@ describe('Bailout page', () => {
                 // Assert
                 expect(flag).toBe(expected);
             });
-            test('returns true when tpa flow enabled and not seeing preferred shop flag true', () => {
+            test('returns true when  when BailoutCode is BailoutCode.DoNotSeeMyShop', () => {
                 // Arrange
                 const mainInitialState = {
-                    issConfig: { enableTPAFlow: true }
+                    order: {
+                        bailout: {
+                            bailoutCode: BailoutCode.DoNotSeeMyShop
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: true };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = true;
 
@@ -342,24 +382,6 @@ describe('Bailout page', () => {
                 expect(flag).toBe(expected);
             });
         });
-        describe('isTpaEnabled', () => {
-            test.each([true, false])(
-                'matches enableTPAFlow in store',
-                (enableTPAFlow) => {
-                    // Arrange
-                    const mainInitialState = {
-                        issConfig: { enableTPAFlow }
-                    };
-                    const { wrapper } = getMountedComponent(mainInitialState);
-
-                    // Act
-                    const flag = wrapper.vm.isTpaEnabled;
-
-                    // Assert
-                    expect(flag).toBe(enableTPAFlow);
-                }
-            );
-        });
     });
     describe('method', () => {
         describe('backButtonAction', () => {
@@ -390,8 +412,7 @@ describe('Bailout page', () => {
                     wrapper.vm.navigationScenarios.CLICKED_FORWARD,
                     wrapper.vm.$route,
                     {},
-                    {},
+                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                    wrapper.vm.bailoutPageModel
                 );
             });
         });
@@ -426,62 +447,5 @@ describe('Bailout page', () => {
                 });
             });
         });
-        describe('setNotSeeingPreferShop', () => {
-            test.each([true, false])(
-                'updates notSeeingPreferredShop value',
-                (flag) => {
-                    // Arrange
-                    const { wrapper } = getMountedComponent();
-
-                    // Act
-                    wrapper.vm.setNotSeeingPreferShop(flag);
-
-                    // Assert
-                    expect(wrapper.vm.notSeeingPreferredShop).toBe(flag);
-                }
-            );
-            test('sets notSeeingPreferredShop to true when null is passed', () => {
-                // Arrange
-                const { wrapper } = getMountedComponent();
-
-                // Act
-                wrapper.vm.setNotSeeingPreferShop(null);
-
-                // Assert
-                expect(wrapper.vm.notSeeingPreferredShop).toBe(false);
-            });
-        });
-    });
-
-    describe('before entering the route', () => {
-        test.each([true, false])(
-            'sets notSeeingPreferredShop flag based value returned by store method pageData',
-            async (notSeeingPreferredShop) => {
-                // Arrange
-                const page = 'bailout-page';
-                const initialStoreState = {
-                    applicationUser: {
-                        pageData: {
-                            [page]: {
-                                [routerParams.NOT_SEEING_PREFERRED_SHOP]: notSeeingPreferredShop,
-                                turtle: 5
-                            }
-                        }
-                    }
-                };
-                const { wrapper } = getMountedComponent(initialStoreState);
-
-                // Act
-                await bailoutPage.beforeRouteEnter.call(
-                    wrapper.vm,
-                    { query: { issPage: page } },
-                    undefined,
-                    (c) => c(wrapper.vm)
-                );
-
-                // Assert
-                expect(wrapper.vm.notSeeingPreferredShop).toBe(notSeeingPreferredShop);
-            }
-        );
     });
 });

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

@@ -55,6 +55,7 @@
                     class="footer-content-container"
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
+                    :isBackButtonHidden="!canNavigateBack"
                     @backClicked="backButtonAction"
                     @ForwardClicked="forwardButtonAction" />
             </div>
@@ -76,6 +77,8 @@ import settleAllPromises from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import routerParams from '@/router/router-constants/router-params';
+import canNavigateBackFromBailout from '@/helpers/bailout-helper';
+import BailoutCode from '@/constants/bailoutCode';
 
 export default {
     name: 'bailout-page',
@@ -101,18 +104,18 @@ export default {
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
 
-        const pageData = useMainStore().pageData(to.query.issPage);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            if (pageData && pageData[routerParams.NOT_SEEING_PREFERRED_SHOP]) {
-                vm.setNotSeeingPreferShop(pageData[routerParams.NOT_SEEING_PREFERRED_SHOP]);
-            }
         });
     },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
     data() {
         return {
-            notSeeingPreferredShop: false,
             bailoutPageModel: this.getBailoutPageModelFromStore(),
+            bailoutCode: this.mainStore.order.bailout.bailoutCode,
             widget: {
                 defaultSiteHeader: 'SiteSubHeaderWidget',
                 noTpa: 'ContentGroupNoTPAWidget',
@@ -128,43 +131,64 @@ export default {
     },
     computed: {
         subHeaderCmsWidgetName() {
-            if (!this.isTpaEnabled) {
+            switch (this.bailoutCode) {
-                return this.widget.noTpa;
+                case BailoutCode.TPANotEnabled:
+                    return this.widget.noTpa;
+
+                case BailoutCode.DoNotSeeMyShop:
+                    return this.widget.notSeeingPreferredShop;
+
+                default:
+                    return this.widget.defaultSiteHeader;
             }
-            if (this.notSeeingPreferredShop) {
-                return this.widget.notSeeingPreferredShop;
-            }
-            return this.widget.defaultSiteHeader;
         },
         subHeaderContentProperty() {
-            return !this.isTpaEnabled || this.notSeeingPreferredShop
+            switch (this.bailoutCode) {
-                ? widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
+                case BailoutCode.TPANotEnabled:
-                : widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT;
+                case BailoutCode.DoNotSeeMyShop:
+                    return widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT;
+
+                default:
+                    return widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT;
+            }
         },
         subContentProperty() {
-            return !this.isTpaEnabled || this.notSeeingPreferredShop
+            switch (this.bailoutCode) {
-                ? widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+                case BailoutCode.TPANotEnabled:
-                : widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT;
+                case BailoutCode.DoNotSeeMyShop:
+                    return widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT;
+
+                default:
+                    return widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT;
+            }
         },
         stripRteStyle() {
-            return !this.isTpaEnabled || this.notSeeingPreferredShop;
+            switch (this.bailoutCode) {
+                case BailoutCode.TPANotEnabled:
+                case BailoutCode.DoNotSeeMyShop:
+                    return true;
+
+                default:
+                    return false;
+            }
         },
-        isTpaEnabled() {
+        canNavigateBack() {
-            return useMainStore().issConfig.enableTPAFlow;
+            return canNavigateBackFromBailout();
         }
     },
     methods: {
         backButtonAction() {
             // route to move backwards
+            this.mainStore.resetBailout();
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK_PREVIOUS, this.$route);
         },
         forwardButtonAction() {
+            this.mainStore.setBailoutContactInfo(this.bailoutPageModel);
             this.$router.navigate(
                 this.navigationScenarios.CLICKED_FORWARD,
                 this.$route,
                 {},
-                {},
+                { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                this.bailoutPageModel
             );
         },
         getBailoutPageModelFromStore() {
@@ -174,9 +198,6 @@ export default {
                 phoneNumber: useMainStore().order.customer.phoneNumber,
                 email: useMainStore().order.customer.emailAddress
             };
-        },
-        setNotSeeingPreferShop(value) {
-            this.notSeeingPreferredShop = value ?? false;
         }
     }
 };

src/layouts/coverage-statement/coverage-statement.vue

@@ -128,6 +128,7 @@ import baseFormMixin from '@/mixins/base-form-mixin.js';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
 import routerParams from '@/router/router-constants/router-params';
 import issPageValues from '@/router/router-constants/issPage-values';
+import bailoutCode from '@/constants/bailoutCode';
 
 export default {
     name: 'coverage-statement',
@@ -175,17 +176,9 @@ export default {
             await useMainStore().getFinalDeductible();
             pricingResults = await useMainStore().getPriceOrderItems(availableLineItems)
                 .catch((err) => {
-                    const errorPageData = {
+                    this.mainStore.setBailout(this.$router, bailoutCode.PricingResponseError, 'An error occurred in getPriceOrderItems.'
-                        errorData: err.data,
+                        + `</ br> ${availableLineItems.join(', ')}`
-                        functionLocation: 'beforeRouteEnter',
+                        + `</ br> ${err.data}`);
-                        functionName: 'getPriceOrderItems',
-                        functionParameters: {
-                            availableLineItems
-                        },
-                        routeFrom: from,
-                        routeTo: to
-                    };
-                    useMainStore().updatePageData({ page: issPageValues.BAILOUT_PAGE, data: errorPageData });
                     next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
                 });
         }
@@ -394,6 +387,7 @@ export default {
                         { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
                     );
                 } else {
+                    this.mainStore.setBailout(this.$router, bailoutCode.TPANotEnabled, 'User selected TPA when TPA is not enabled for this client');
                     this.$router.navigate(
                         navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED,
                         this.$route,
@@ -402,6 +396,7 @@ export default {
                     );
                 }
             } else {
+                this.mainStore.setBailout(this.$router, bailoutCode.CoverageStatementInvalidState, 'Coverage Statement has entered an invalid state');
                 this.$router.navigate(
                     navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE,
                     this.$route,

src/layouts/policy-vehicles/policy-vehicles.spec.js

@@ -10,6 +10,7 @@ import { getRandomString, getRandomInt } from '@/helpers/data-generation';
 import endorsementOptions from '@/constants/endorsement-options';
 import { createTestingPinia } from '@pinia/testing';
 import vehicleSelectionOptions from '@/constants/vehicle-selection-options';
+import bailoutCode from "@/constants/bailoutCode";
 
 // Mock fetchCmsContentForPage
 jest.mock('@/helpers/cms-content-helper', () => ({
@@ -73,6 +74,10 @@ function setupMocks() {
     return { wrapper };
 }
 
+beforeEach(() => {
+    useMainStore().order.bailout.bailoutCode = null;
+});
+
 describe('policy-vehicles.vue', () => {
     test('Should navigate to CLICKED_BACK if backButtonAction is run', async () => {
         // Arrange
@@ -100,7 +105,6 @@ describe('policy-vehicles.vue', () => {
                     policyVehicles: [
                         { vin }
                     ],
-                    bailout: false,
                     policyVinFound: true
                 });
 
@@ -241,19 +245,25 @@ describe('policy-vehicles.vue', () => {
             async () => {
             // Arrange
                 const { wrapper } = setupMocks({});
-                wrapper.vm.lookupVehicleByVin = jest.fn().mockReturnValue({ error: true, status: 500 });
+                const lookupReturnValue = { error: true, status: 500, data: 'error' };
+                wrapper.vm.lookupVehicleByVin = jest.fn().mockReturnValue(lookupReturnValue);
 
                 const vin = getRandomString(17, 17);
                 await wrapper.setData({
                     selectedVehicleVin: vin,
-                    bailout: false
+                    policyVehicles: [
+                        {
+                            vin
+                        }
+                    ]
                 });
 
                 // Act
+                wrapper.vm.mainStore.order.bailout.bailoutCode = bailoutCode.VehicleLookupError;
                 await wrapper.vm.forwardButtonAction();
 
                 // Assert
-                expect(wrapper.vm.bailout).toBeTruthy();
+                expect(wrapper.vm.mainStore.setBailout).toHaveBeenCalledWith(wrapper.vm.$router, bailoutCode.VehicleLookupError, `An error occurred looking up Vin: ${vin}. Error: ${lookupReturnValue.data}`);
                 expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
                     navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
                     undefined,
@@ -274,7 +284,6 @@ describe('policy-vehicles.vue', () => {
                 const vin = getRandomString(17, 17);
                 await wrapper.setData({
                     selectedVehicleVin: vin,
-                    bailout: false,
                     policyVinFound: true,
                     policyVehicles: [{
                         vin,

src/layouts/policy-vehicles/policy-vehicles.vue

@@ -53,6 +53,7 @@ import vehicleSelectionOptions from '@/constants/vehicle-selection-options.js';
 import endorsementOptions from '@/constants/endorsement-options.js';
 import globalRules from '@/constants/global-rules.js';
 import { useMainStore } from '@/store/index.js';
+import bailoutCode from '@/constants/bailoutCode';
 
 export default {
     name: 'policy-vehicles',
@@ -71,6 +72,10 @@ export default {
             vm.setCmsContent(cmsContentPromise);
         });
     },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
     data() {
         const policyVehicles = useMainStore().order.policy.vehicles;
         return {
@@ -78,7 +83,6 @@ export default {
             selectedVehicleVin: '',
             displayGeneric: true,
             policyVinFound: true,
-            bailout: false,
             rules: {
                 optionRequired: globalRules.OPTION_REQUIRED
             }
@@ -197,7 +201,7 @@ export default {
                             return this.navigateForward();
                         }
 
-                        this.bailout = true;
+                        this.mainStore.setBailout(this.$router, bailoutCode.VehicleLookupError, `An error occurred looking up Vin: ${vehicle.vin}. Error: ${vehicleLookupResponse.data}`);
                         return this.navigateForward();
                     }
 
@@ -215,7 +219,7 @@ export default {
                 return this.navigateForward();
             },
             navigateForward() {
-                if (this.bailout) {
+                if (this.mainStore.isBailout) {
                     this.$router
                         .navigate(
                             this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
@@ -260,7 +264,8 @@ export default {
                 } catch (responseError) {
                     return {
                         error: true,
-                        status: responseError.status
+                        status: responseError.status,
+                        data: responseError.data
                     };
                 }
             }

src/layouts/provider-preference/provider-preference.vue

@@ -68,6 +68,7 @@ import steeringModal from '@/layouts/provider-preference/steering-modal/steering
 import shopPreferenceModal from '@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue';
 import tpaRecalModal from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue';
 import globalRules from '@/constants/global-rules';
+import bailoutCode from '@/constants/bailoutCode';
 
 const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
 
@@ -197,6 +198,7 @@ export default {
                             }
                             scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
                         } else {
+                            this.mainStore.setBailout(this.$router, bailoutCode.TPANotEnabled, 'User selected TPA when TPA is not enabled for this client');
                             scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
                         }
                         break;

src/layouts/tpa-search/tpa-search.vue

@@ -134,6 +134,7 @@ import widgetFields from '@/constants/cms-widget-fields.js';
 import { shallowRef } from 'vue';
 import routerParams from '@/router/router-constants/router-params';
 import { toTitleCase, toDisplayPhoneNumber } from '@/helpers/text-helper.js';
+import bailoutCode from '@/constants/bailoutCode';
 
 const radiusFilterPairs = [
     { radius: 15, filter: '15 miles' },
@@ -325,12 +326,10 @@ export default {
             return getTpaProvidersResult?.data?.shopProviders ?? [];
         },
         doNotSeeMyShopLinkClick() {
+            this.mainStore.setBailout(this.$router, bailoutCode.DoNotSeeMyShop, 'User does not see their shop.');
             this.$router.navigate(
                 this.navigationScenarios.CLICKED_DO_NOT_SEE_MY_SHOP_LINK,
-                this.$route,
+                this.$route
-                {},
-                {},
-                { [routerParams.NOT_SEEING_PREFERRED_SHOP]: true }
             );
         },
         async searchClick() {

src/layouts/vin-lookup/vin-lookup.vue

@@ -63,6 +63,7 @@ import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import vinLocationInformation from '@/layouts/vin-lookup/vin-location-information/vin-location-information.vue';
 import vinLookupAlerts from '@/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue';
 import vinQuestion from '@/layouts/vin-lookup/vin-question/vin-question.vue';
+import bailoutCode from '@/constants/bailoutCode';
 
 export default {
     name: 'vin-lookup',
@@ -183,14 +184,18 @@ export default {
 
                 if (vehicleLookupResponse.error) {
                     this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
+                    this.mainStore.setBailout(this.$router, bailoutCode.VehicleNotFound, `Failed to find vehicle in system with vin: ${this.vin}`);
                     this.resetVehicleFromLookup();
                     this.$refs.siteFooter.removeLoader();
                     // Temp solution to turn on 'disabled' style on the Continue button
                     //  because the form itself actually passes its client-side validation.
                     //  SSR-189 Scenario #4.
                     this.$refs.siteFooter.enableForwardAction();
+                    return;
                 }
 
+                this.mainStore.resetBailout();
+
                 // Add vin bcs the response from the service doesn't contain vin
                 this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
             }

src/router/index.js

@@ -15,7 +15,10 @@ import applicationConfig from '@/constants/application-config';
 import analyticsMixin from '@/mixins/analytics-mixin';
 import { saveSession } from '@/helpers/order-helper.js';
 import routerParams from '@/router/router-constants/router-params';
+import bailoutCode from '@/constants/bailoutCode';
+import IssPageValues from '@/router/router-constants/issPage-values';
 import navigationScenarios from './router-constants/navigation-scenarios';
+import canBailoutNavigateBack from "@/helpers/bailout-helper";
 
 const routes = [
     {
@@ -118,6 +121,15 @@ const router = createRouter({
     }
 });
 
+router.beforeEach(async (to, from) => {
+    const store = useMainStore();
+    // Prevent navigating backwards if we enter a bailout that we are not allowed to go back on
+    if (store.isBailout && from.name === IssPageValues.BAILOUT_PAGE && to.name !== IssPageValues.CONTACT_CONFIRMATION
+        && !canBailoutNavigateBack()) {
+        return false;
+    }
+});
+
 router.afterEach(async (to, from) => {
     /*eslint-disable-line*/
     const store = useMainStore();
@@ -131,6 +143,7 @@ router.afterEach(async (to, from) => {
     const saveSessionSynchronous = !!from.params[routerParams.SAVE_SESSION_SYNCHRONOUS];
     await saveSession({ shouldAwaitSaveSessionQueue: saveSessionSynchronous }).catch((error) => {
         if (from.name === issPageValues.WELCOME_PAGE) {
+            store.setBailout(router, bailoutCode.SaveSessionError, error.data);
             router.navigate(
                 navigationScenarios.SAVE_SESSION_FAILED,
                 { query: { issPage: issPageValues.WELCOME_PAGE } }

src/router/router-constants/router-params.js

@@ -1,7 +1,6 @@
 const routerParams = Object.freeze({
     DISPLAY_VEHICLE_CHANGE_ALERT: 'displayVehicleChangeAlert',
-    SAVE_SESSION_SYNCHRONOUS: 'saveSessionSynchronous',
+    SAVE_SESSION_SYNCHRONOUS: 'saveSessionSynchronous'
-    NOT_SEEING_PREFERRED_SHOP: 'notSeeingPreferredShop'
 });
 
 export default routerParams;

src/store/index.js

@@ -163,6 +163,13 @@ const getDefaultState = () => ({
             jobMaxMinutes: null,
             jobMinMinutes: null
         },
+        bailout: {
+            page: null,
+            url: null,
+            bailoutCode: null,
+            errorMessage: null,
+            submit: false
+        },
         referralNumber: null,
         referralDate: null,
         referralCorrelationId: '00000000-0000-0000-0000-000000000000',
@@ -221,6 +228,7 @@ export const useMainStore = defineStore({
             || state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP,
         isDropOffAppointment: (state) => state.order.serviceLocation.appointmentType === AppointmentTypeStrings.DROP_OFF,
         isClaimRegistrationRequired: (state) => state.issConfig.isClaimRegistrationRequired,
+        isBailout: (state) => state.order.bailout.bailoutCode !== null,
         eventBusItem: (state) => (eventCategory, eventSubCategory) => {
             const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventCategory && subCategory === eventSubCategory);
             return matchedEvent?.eventValue;
@@ -1148,6 +1156,12 @@ export const useMainStore = defineStore({
                             jobMaxMinutes: schedule.jobMaxMinutes,
                             jobMinMinutes: schedule.jobMinMinutes
                         },
+                        bailout: this.order.bailout.submit ? {
+                            page: this.order.bailout.page,
+                            url: this.order.bailout.url,
+                            bailoutCode: this.order.bailout.bailoutCode,
+                            errorMessage: this.order.bailout.errorMessage
+                        } : null,
                         referralDate: this.order.referralDate,
                         referralNumber: this.order.referralNumber?.toString(),
                         referralCorrelationId: this.order.referralCorrelationId,
@@ -1404,6 +1418,14 @@ export const useMainStore = defineStore({
             this.order.serviceLocation.isVehicleProtected = null;
         },
 
+        resetBailout() {
+            this.order.bailout.url = null;
+            this.order.bailout.page = null;
+            this.order.bailout.bailoutCode = null;
+            this.order.bailout.errorMessage = null;
+            this.order.bailout.submit = false;
+        },
+
         updateSupportingItems(partsData) {
             this.order.lineItems.supportingItems = partsData;
         },
@@ -2047,6 +2069,21 @@ export const useMainStore = defineStore({
             this.updateRegistration(registrationInfo);
         },
 
+        setBailout(router, code, errorMessage) {
+            this.order.bailout.url = window.location.href;
+            this.order.bailout.page = router.currentRoute.value.name;
+            this.order.bailout.bailoutCode = code;
+            this.order.bailout.errorMessage = errorMessage;
+        },
+
+        setBailoutContactInfo(contact) {
+            this.order.customer.firstName = contact.firstName;
+            this.order.customer.lastName = contact.lastName;
+            this.order.customer.phoneNumber = contact.phoneNumber;
+            this.order.customer.emailAddress = contact.email;
+            this.order.bailout.submit = true;
+        },
+
         resetRegistrationAndDependencies() {
             this.resetRegistrationState();
             this.resetGlassPartsState();
@@ -2087,6 +2124,7 @@ export const useMainStore = defineStore({
             this.order.customer.address.streetAddress2 = null;
             this.resetVehicleState();
             this.resetDamageState();
+            this.resetBailout();
         }
 
     },