Merge pull request #529 from Safelite/feature/digital/SSR-586

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/constants/bailoutMessage.js

@@ -0,0 +1,50 @@
+import bailoutCode from '@/constants/bailoutCode';
+
+function getItemData(data) {
+    if (data === undefined || data == null) {
+        return 'null';
+    }
+
+    if (typeof data === 'string') {
+        return data;
+    }
+
+    return JSON.stringify(data);
+}
+
+const bailoutMessage = Object.freeze({
+    unknown: (error) => ({
+        code: bailoutCode.Unknown,
+        message: `An unknown bailout occurred: ${getItemData(error)}`
+    }),
+    saveSessionError: (error) => ({
+        code: bailoutCode.SaveSessionError,
+        message: `An error occurred during save session: ${getItemData(error)}`
+    }),
+    vehicleNotFound: (vin) => ({
+        code: bailoutCode.VehicleNotFound,
+        message: `Failed to find vehicle in system with vin: ${vin}`
+    }),
+    vehicleLookupError: (vin, error) => ({
+        code: bailoutCode.VehicleLookupError,
+        message: `An error occurred looking up Vin: ${vin}. Error: ${getItemData(error)}`
+    }),
+    coverageStatementInvalidState: () => ({
+        code: bailoutCode.CoverageStatementInvalidState,
+        message: 'Coverage Statement has entered an invalid state'
+    }),
+    doNotSeeMyShop: () => ({
+        code: bailoutCode.DoNotSeeMyShop,
+        message: 'User does not see their shop.'
+    }),
+    pricingResponseError: (lineItems, error) => ({
+        code: bailoutCode.PricingResponseError,
+        message: `An error occurred in getPriceOrderItems. Line Items: ${getItemData(lineItems)} Error: ${getItemData(error)}`
+    }),
+    TPANotEnabled: () => ({
+        code: bailoutCode.TPANotEnabled,
+        message: 'User selected TPA when TPA is not enabled for this client'
+    })
+});
+
+export default bailoutMessage;

src/helpers/bailout-helper.js

@@ -0,0 +1,22 @@
+import { useMainStore } from '@/store';
+import BailoutCode from '@/constants/bailoutCode';
+import issPageValues from "@/router/router-constants/issPage-values";
+
+function canBailoutNavigateBack() {
+    const code = useMainStore().pageData(issPageValues.BAILOUT_PAGE)?.bailoutCode;
+    if (code == null) {
+        return true;
+    }
+
+    switch (code) {
+        case BailoutCode.VehicleNotFound:
+        case BailoutCode.DoNotSeeMyShop:
+        case BailoutCode.TPANotEnabled:
+            return true;
+
+        default:
+            return false;
+    }
+}
+
+export default canBailoutNavigateBack;

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

@@ -2,13 +2,15 @@
 
 exports[`Bailout page returns the initial data 1`] = `
 Object {
+  "bailout": Object {
+    "bailoutCode": 0,
+  },
   "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', () => ({
@@ -28,7 +29,16 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
 
     const testingPinia = createTestingPinia({
         initialState: {
-            main: mainInitialState
+            main: {
+                applicationUser: {
+                    pageData: {
+                        'bailout-page': {
+                            bailoutCode: bailoutCode.Unknown
+                        }
+                    }
+                },
+                ...mainInitialState
+            }
         }
     });
     useMainStore(testingPinia);
@@ -146,30 +156,39 @@ 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 }
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                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 = {
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                bailoutCode: bailoutCode.DoNotSeeMyShop
+                            }
+                        }
+                    }
+                };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'ContentGroupNotSeeingPreferredShop';
 
@@ -179,12 +198,18 @@ 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 }
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                bailoutCode: bailoutCode.Unknown
+                            }
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: false };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'SiteSubHeaderWidget';
 
@@ -196,12 +221,18 @@ 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 }
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                bailoutCode: bailoutCode.Unknown
+                            }
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: false };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'SubHeaderText';
 
@@ -211,30 +242,39 @@ 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 }
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                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 = {
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                bailoutCode: bailoutCode.DoNotSeeMyShop
+                            }
+                        }
+                    }
+                };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'HeaderText';
 
@@ -246,12 +286,18 @@ 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 }
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                bailoutCode: bailoutCode.Unknown
+                            }
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: false };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'SecondaryText';
 
@@ -261,30 +307,39 @@ 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 }
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                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 = {
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                bailoutCode: bailoutCode.DoNotSeeMyShop
+                            }
+                        }
+                    }
+                };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = 'BodyText';
 
@@ -296,12 +351,18 @@ 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 }
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                bailoutCode: bailoutCode.Unknown
+                            }
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: false };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = false;
 
@@ -311,12 +372,18 @@ 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 }
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                bailoutCode: bailoutCode.TPANotEnabled
+                            }
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: false };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = true;
 
@@ -326,12 +393,18 @@ 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 }
+                    applicationUser: {
+                        pageData: {
+                            'bailout-page': {
+                                bailoutCode: bailoutCode.DoNotSeeMyShop
+                            }
+                        }
+                    }
                 };
-                const initialData = { notSeeingPreferredShop: true };
+                const initialData = { };
                 const { wrapper } = getMountedComponent(mainInitialState, initialData);
                 const expected = true;
 
@@ -342,24 +415,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 +445,7 @@ describe('Bailout page', () => {
                     wrapper.vm.navigationScenarios.CLICKED_FORWARD,
                     wrapper.vm.$route,
                     {},
-                    {},
+                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                    wrapper.vm.bailoutPageModel
                 );
             });
         });
@@ -426,62 +480,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,9 @@ 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';
+import issPageValues from '@/router/router-constants/issPage-values';
 
 export default {
     name: 'bailout-page',
@@ -101,18 +105,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(),
+            bailout: this.mainStore.pageData(issPageValues.BAILOUT_PAGE),
             widget: {
                 defaultSiteHeader: 'SiteSubHeaderWidget',
                 noTpa: 'ContentGroupNoTPAWidget',
@@ -128,43 +132,64 @@ export default {
     },
     computed: {
         subHeaderCmsWidgetName() {
-            if (!this.isTpaEnabled) {
+            switch (this.bailout.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.bailout.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.bailout.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.bailout.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 +199,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,8 @@ 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';
+import bailoutMessage from '@/constants/bailoutMessage';
 
 export default {
     name: 'coverage-statement',
@@ -170,35 +172,29 @@ export default {
             ...(clonedGlassParts ?? [])
         ];
 
+        let hasBailedOut = false;
         let pricingResults = [];
         if (useMainStore().order.policy.policyLookupSuccessful && useMainStore().order.vehicle.policyVehicleId >= 0) {
             await useMainStore().getFinalDeductible();
             pricingResults = await useMainStore().getPriceOrderItems(availableLineItems)
                 .catch((err) => {
-                    const errorPageData = {
+                    useMainStore().setBailout(to, bailoutMessage.pricingResponseError(availableLineItems.map((li) => li.partNumber), { code: err.code, message: err.message, data: err.data }));
-                        errorData: err.data,
+                    hasBailedOut = true;
-                        functionLocation: 'beforeRouteEnter',
-                        functionName: 'getPriceOrderItems',
-                        functionParameters: {
-                            availableLineItems
-                        },
-                        routeFrom: from,
-                        routeTo: to
-                    };
-                    useMainStore().updatePageData({ page: issPageValues.BAILOUT_PAGE, data: errorPageData });
                     next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
                 });
         }
 
-        // Call the "next" function to complete the transition to this page.
+        if (!hasBailedOut) {
-        next((vm) => {
+            // Call the "next" function to complete the transition to this page.
-            vm.setCmsContent(resultMap.cmsContent);
+            next((vm) => {
-            vm.setSupportingItems(resultMap.supportingItems);
+                vm.setCmsContent(resultMap.cmsContent);
-            // eslint-disable-next-line no-param-reassign
+                vm.setSupportingItems(resultMap.supportingItems);
-            vm.availableLineItems = pricingResults;
+                // eslint-disable-next-line no-param-reassign
-            vm.$refs.loadingModal.showModal();
+                vm.availableLineItems = pricingResults;
-            vm.initializeComponent(availableLineItems);
+                vm.$refs.loadingModal.showModal();
-        });
+                vm.initializeComponent(availableLineItems);
+            });
+        }
     },
     setup() {
         const mainStore = useMainStore();
@@ -394,6 +390,7 @@ export default {
                         { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
                     );
                 } else {
+                    this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.TPANotEnabled());
                     this.$router.navigate(
                         navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED,
                         this.$route,
@@ -402,6 +399,7 @@ export default {
                     );
                 }
             } else {
+                this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.coverageStatementInvalidState());
                 this.$router.navigate(
                     navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE,
                     this.$route,

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

@@ -10,6 +10,9 @@ 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';
+import bailoutMessage from '@/constants/bailoutMessage';
+import issPageValues from '@/router/router-constants/issPage-values';
 
 // Mock fetchCmsContentForPage
 jest.mock('@/helpers/cms-content-helper', () => ({
@@ -73,6 +76,10 @@ function setupMocks() {
     return { wrapper };
 }
 
+beforeEach(() => {
+    useMainStore().applicationUser.pageData[issPageValues.BAILOUT_PAGE] = null;
+});
+
 describe('policy-vehicles.vue', () => {
     test('Should navigate to CLICKED_BACK if backButtonAction is run', async () => {
         // Arrange
@@ -100,7 +107,6 @@ describe('policy-vehicles.vue', () => {
                     policyVehicles: [
                         { vin }
                     ],
-                    bailout: false,
                     policyVinFound: true
                 });
 
@@ -241,19 +247,30 @@ 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.applicationUser.pageData[issPageValues.BAILOUT_PAGE] = {
+                    'bailout-page': {
+                        bailoutCode: bailoutCode.VehicleLookupError
+                    }
+                };
                 await wrapper.vm.forwardButtonAction();
 
                 // Assert
-                expect(wrapper.vm.bailout).toBeTruthy();
+                // eslint-disable-next-line max-len
+                expect(wrapper.vm.mainStore.setBailout).toHaveBeenCalledWith(wrapper.vm.$router.currentRoute, bailoutMessage.vehicleLookupError(vin, lookupReturnValue.data));
                 expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
                     navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
                     undefined,
@@ -274,7 +291,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,8 @@ 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';
+import bailoutMessage from '@/constants/bailoutMessage';
 
 export default {
     name: 'policy-vehicles',
@@ -71,6 +73,10 @@ export default {
             vm.setCmsContent(cmsContentPromise);
         });
     },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
     data() {
         const policyVehicles = useMainStore().order.policy.vehicles;
         return {
@@ -78,7 +84,6 @@ export default {
             selectedVehicleVin: '',
             displayGeneric: true,
             policyVinFound: true,
-            bailout: false,
             rules: {
                 optionRequired: globalRules.OPTION_REQUIRED
             }
@@ -197,7 +202,7 @@ export default {
                             return this.navigateForward();
                         }
 
-                        this.bailout = true;
+                        this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.vehicleLookupError(vehicle.vin, vehicleLookupResponse.data));
                         return this.navigateForward();
                     }
 
@@ -215,7 +220,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 +265,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,8 @@ 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';
+import bailoutMessage from "@/constants/bailoutMessage";
 
 const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
 
@@ -194,6 +196,7 @@ export default {
                             }
                             scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
                         } else {
+                            this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.TPANotEnabled());
                             scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
                         }
                         break;

src/layouts/service-packages/service-packages.vue

@@ -66,6 +66,8 @@ import allGlassPartsAndItemsHavePrices from '@/layouts/service-packages/service-
 import globalRules from '@/constants/global-rules';
 import servicePackageQuestion from '@/layouts/service-packages/service-package-question/service-package-question.vue';
 import issPageValues from '@/router/router-constants/issPage-values';
+import bailoutCode from "@/constants/bailoutCode";
+import bailoutMessage from "@/constants/bailoutMessage";
 
 const store = useMainStore();
 
@@ -119,29 +121,23 @@ export default {
             ...clonedGlassParts
         ];
 
+        let hasBailedOut = false;
         const pricingResults = await store.getPriceOrderItems(availableLineItems)
             .catch((err) => {
-                const errorPageData = {
+                useMainStore().setBailout(to, bailoutMessage.pricingResponseError(availableLineItems.map((li) => li.partNumber), { code: err.code, message: err.message, data: err.data }));
-                    errorData: err.data,
+                hasBailedOut = true;
-                    functionLocation: 'beforeRouteEnter',
-                    functionName: 'getPriceOrderItems',
-                    functionParameters: {
-                        availableLineItems
-                    },
-                    routeFrom: from,
-                    routeTo: to
-                };
-                useMainStore().updatePageData({ page: issPageValues.BAILOUT_PAGE, data: errorPageData });
                 next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
             });
 
         // Call the "next" function to complete the transition to this page.
-        next((vm) => {
+        if (!hasBailedOut) {
-            vm.setCmsContent(resultMap.cmsContent);
+            next((vm) => {
-            vm.pricedGlassParts = clonedGlassParts;
+                vm.setCmsContent(resultMap.cmsContent);
-            vm.supportingItems = resultMap.supportingItems;
+                vm.pricedGlassParts = clonedGlassParts;
-            vm.availableLineItems = pricingResults;
+                vm.supportingItems = resultMap.supportingItems;
-        });
+                vm.availableLineItems = pricingResults;
+            });
+        }
     },
     data() {
         return {

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

@@ -133,6 +133,8 @@ 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';
+import bailoutMessage from "@/constants/bailoutMessage";
 
 const radiusFilterPairs = [
     { radius: 15, filter: '15 miles' },
@@ -343,12 +345,10 @@ export default {
             return getTpaProvidersResult?.data?.shopProviders ?? [];
         },
         doNotSeeMyShopLinkClick() {
+            this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.doNotSeeMyShop());
             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,8 @@ 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';
+import bailoutMessage from "@/constants/bailoutMessage";
 
 export default {
     name: 'vin-lookup',
@@ -177,14 +179,18 @@ export default {
 
                 if (vehicleLookupResponse.error) {
                     this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
+                    this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.vehicleNotFound(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

@@ -16,7 +16,11 @@ import showIssLoadingModal from '@/helpers/loading-modal-helper';
 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";
+import bailoutMessage from "@/constants/bailoutMessage";
 
 const routes = [
     {
@@ -119,13 +123,20 @@ const router = createRouter({
     }
 });
 
-router.beforeEach(async (to, from, next) => {
+router.beforeEach(async (to, from) => {
     const fromQueryPage = from.query?.issPage;
     if (fromQueryPage === undefined) {
         showIssLoadingModal(true);
     }
 
-    next();
+    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 !== 'root' && to.name !== IssPageValues.CONTACT_CONFIRMATION
+        && !canBailoutNavigateBack()) {
+        return false;
+    }
+
+    return true;
 });
 
 router.afterEach(async (to, from) => {
@@ -143,6 +154,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, bailoutMessage.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

@@ -224,6 +224,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.applicationUser.pageData[issPageValues.BAILOUT_PAGE] != null,
         eventBusItem: (state) => (eventCategory, eventSubCategory) => {
             const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventCategory && subCategory === eventSubCategory);
             return matchedEvent?.eventValue;
@@ -1411,6 +1412,13 @@ export const useMainStore = defineStore({
             this.order.serviceLocation.isVehicleProtected = null;
         },
 
+        resetBailout() {
+            this.updatePageData({
+                page: issPageValues.BAILOUT_PAGE,
+                data: null
+            });
+        },
+
         updateSupportingItems(partsData) {
             this.order.lineItems.supportingItems = partsData;
         },
@@ -2054,6 +2062,27 @@ export const useMainStore = defineStore({
             this.updateRegistration(registrationInfo);
         },
 
+        setBailout(currentRoute, bailoutData) {
+            this.updatePageData({
+                page: issPageValues.BAILOUT_PAGE,
+                data: {
+                    url: window.location.href,
+                    page: currentRoute.value?.name ?? currentRoute.name,
+                    bailoutCode: bailoutData.code,
+                    errorMessage: bailoutData.message,
+                    submit: false
+                }
+            });
+        },
+
+        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.pageData(issPageValues.BAILOUT_PAGE).submit = true;
+        },
+
         resetRegistrationAndDependencies() {
             this.resetRegistrationState();
             this.resetGlassPartsState();
@@ -2094,6 +2123,7 @@ export const useMainStore = defineStore({
             this.order.customer.address.streetAddress2 = null;
             this.resetVehicleState();
             this.resetDamageState();
+            this.resetBailout();
         }
 
     },