Merge branch 'develop' into feature/SSR-795

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/contact-details/contact-details.spec.js

@@ -248,13 +248,25 @@ describe('contactDetails.vue', () => {
             expect(wrapper.vm.$router.navigateWithSpinner)
                 .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
         });
-        test('Forward button clicked triggers navigation', () => {
+        test('Forward button clicked triggers appropriate navigation when safelite shop', () => {
             // Arrange
-            const wrapper = shallowMount(contactDetails, getMountOptions({
+            const mountOptions = getMountOptions({
                 router: {
                     navigate: jest.fn()
+                },
+                navigationScenarios
+            });
+            const mainInitialState = {
+                order: {
+                    serviceLocation: { IsSafeliteProvider: true }
                 }
-            }));
+            };
+            mountOptions.global.plugins = [createTestingPinia({
+                initialState: {
+                    main: mainInitialState
+                }
+            })];
+            const wrapper = shallowMount(contactDetails, mountOptions);
 
             // Act
             wrapper.vm.forwardButtonAction();
@@ -262,7 +274,35 @@ describe('contactDetails.vue', () => {
             // Assert
             expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
             expect(wrapper.vm.$router.navigate)
-                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP, undefined);
+        });
+        test('Forward button clicked triggers appropriate navigation when TPA shop', () => {
+            // Arrange
+            const mountOptions = getMountOptions({
+                router: {
+                    navigate: jest.fn()
+                },
+                navigationScenarios
+            });
+            const mainInitialState = {
+                order: {
+                    serviceLocation: { IsSafeliteProvider: false }
+                }
+            };
+            mountOptions.global.plugins = [createTestingPinia({
+                initialState: {
+                    main: mainInitialState
+                }
+            })];
+            const wrapper = shallowMount(contactDetails, mountOptions);
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP, undefined);
         });
         test('Forward button click updates contact info', () => {
             // Arrange

src/layouts/contact-details/contact-details.vue

@@ -196,10 +196,10 @@ export default {
                 notesForTechnician: this.notesForTechnician
             };
             useMainStore().updateContactInfo(contactInfo);
-            this.$router.navigate(
+            const scenario = useMainStore().order.serviceLocation.IsSafeliteProvider === false
-                this.navigationScenarios.CLICKED_FORWARD,
+                ? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
-                this.$route
+                : this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
-            );
+            this.$router.navigate(scenario, this.$route);
         }
     }
 };

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();
@@ -342,8 +338,8 @@ export default {
         },
         nextStepsBody(newValue, oldValue) {
             if (newValue !== oldValue) {
-                setupModalLink(this, 'RecalModal');
+                setupModalLinks(this, 'RecalModal');
-                setupModalLink(this, 'DeductibleModal');
+                setupModalLinks(this, 'DeductibleModal');
             }
         }
     },
@@ -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/__snapshots__/tpa-search.spec.js.snap

@@ -7,7 +7,7 @@ Object {
   },
   "dataLoaded": false,
   "filter": "",
-  "mapZipCode": "12663",
+  "mapZipCode": null,
   "providers": Array [],
   "reloadingProviders": false,
   "rules": Object {
@@ -202,6 +202,6 @@ Object {
     "siteHeader": "SiteHeaderWidget",
     "tpaSearchQuestion": "TPASearchQuestion",
   },
-  "zipCode": "12663",
+  "zipCode": null,
 }
 `;

src/layouts/tpa-search/tpa-search.spec.js

@@ -807,11 +807,30 @@ describe('TPA search page', () => {
         });
         // TODO confirm tests appropriate. Also should this method be async?
         describe('on providers', () => {
+            test('does not update provider number when dataLoaded false', () => {
+                // Arrange
+                const initialValue = 1234;
+                const { wrapper } = getMountedComponent({}, {
+                    dataLoaded: false,
+                    selectedProviderNumber: initialValue,
+                });
+                const value = 'some other value';
+                const newProviders = [{ providerNumber: value }];
+
+                // Act
+                wrapper.vm.$options.watch.providers.call(wrapper.vm, newProviders);
+
+                // Assert
+                expect(wrapper.vm.selectedProviderNumber).toBe(initialValue);
+            });
             test.each([null, undefined, []])(
                 'sets selected provider number to "" when there are no providers',
                 (newProviders) => {
                     // Arrange
-                    const { wrapper } = getMountedComponent();
+                    const { wrapper } = getMountedComponent({}, {
+                        dataLoaded: true,
+                        selectedProviderNumber: null
+                    });
 
                     // Act
                     wrapper.vm.$options.watch.providers.call(wrapper.vm, newProviders);
@@ -822,7 +841,10 @@ describe('TPA search page', () => {
             );
             test('sets selected provider number to value of provider when there is one provider', () => {
                 // Arrange
-                const { wrapper } = getMountedComponent();
+                const { wrapper } = getMountedComponent({}, {
+                    dataLoaded: true,
+                    selectedProviderNumber: null
+                });
                 const value = 'some value';
                 const newProviders = [{ providerNumber: value }];
 
@@ -834,7 +856,10 @@ describe('TPA search page', () => {
             });
             test('sets selected provider number to "" when there are more than one provider', () => {
                 // Arrange
-                const { wrapper } = getMountedComponent();
+                const { wrapper } = getMountedComponent({}, {
+                    dataLoaded: true,
+                    selectedProviderNumber: null
+                });
                 const newProviders = [{ value: 'val1' }, { value: 'val2' }];
 
                 // Act
@@ -846,10 +871,36 @@ describe('TPA search page', () => {
         });
         describe('selectedProviderNumber', () => {
             describe('does not call updateServiceLocation when', () => {
+                test('dataLoaded is false', () => {
+                    // Arrange
+                    const providerNumber = 38447;
+                    const { wrapper } = getMountedComponent({}, {
+                        providers: [{
+                            providerNumber,
+                            address: {
+                                streetAddress: '143 Average Lane',
+                                city: 'Cambridge',
+                                state: 'OH',
+                                zipCode: '72983',
+                                zipCodeCtu: '0390'
+                            },
+                            companyName: "Sally's Auto",
+                            phoneNumber: '1234567890'
+                        }],
+                        dataLoaded: false
+                    });
+
+                    // Act
+                    wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, providerNumber);
+
+                    // Assert
+                    expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled();
+                });
                 test('providers list is null ', () => {
                     // Arrange
                     const { wrapper } = getMountedComponent({}, {
-                        providers: null
+                        providers: null,
+                        dataLoaded: true
                     });
                     const newProviderNumber = 11235;
 
@@ -862,7 +913,8 @@ describe('TPA search page', () => {
                 test('providers list is empty ', () => {
                     // Arrange
                     const { wrapper } = getMountedComponent({}, {
-                        providers: []
+                        providers: [],
+                        dataLoaded: true
                     });
                     const newProviderNumber = 11235;
 
@@ -886,7 +938,8 @@ describe('TPA search page', () => {
                             },
                             companyName: "Sally's Auto",
                             phoneNumber: '1234567890'
-                        }]
+                        }],
+                        dataLoaded: true
                     });
                     const newProviderNumber = 11235;
 
@@ -919,18 +972,26 @@ describe('TPA search page', () => {
                     companyName,
                     phoneNumber
                 };
+                const filter = '10 miles';
+                const serviceZipCode = 10098;
                 const { wrapper } = getMountedComponent({}, {
                     providers: [
                         provider,
                         { providerNumber: 328949832 }
-                    ]
+                    ],
+                    filter,
+                    zipCode: serviceZipCode,
+                    dataLoaded: true
                 });
 
                 // Act
                 wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber);
 
                 // Assert
+                expect(wrapper.vm.mainStore.updateServiceLocation).toHaveBeenCalledTimes(1);
                 expect(wrapper.vm.mainStore.updateServiceLocation).toHaveBeenCalledWith({
+                    searchFilter: filter,
+                    zipCode: serviceZipCode,
                     provider: {
                         providerNumber: newProviderNumber,
                         address: {
@@ -1292,11 +1353,89 @@ describe('TPA search page', () => {
         });
     });
     describe('before route enter', () => {
+        test('when service location zipCode set in store, it is used', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+            const customerZipCode = '18394';
+            const serviceZipCode = '43982';
+            useMainStore().order.customer.address.zipCode = customerZipCode;
+            useMainStore().order.serviceLocation.zipCode = serviceZipCode;
+
+            // Act
+            await tpaSearch.beforeRouteEnter.call(
+                wrapper.vm,
+                { query: { issPage: 'tpa-search' } },
+                undefined,
+                (c) => c(wrapper.vm)
+            );
+
+            await wrapper.vm.$nextTick();
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.zipCode).toBe(serviceZipCode);
+        });
+        test('when service location zipCode not set in store, customer zipCode used', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+            const customerZipCode = '18394';
+            useMainStore().order.customer.address.zipCode = customerZipCode;
+            useMainStore().order.serviceLocation.zipCode = null;
+
+            // Act
+            await tpaSearch.beforeRouteEnter.call(
+                wrapper.vm,
+                { query: { issPage: 'tpa-search' } },
+                undefined,
+                (c) => c(wrapper.vm)
+            );
+
+            await wrapper.vm.$nextTick();
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.zipCode).toBe(customerZipCode);
+        });
+        test('when search filter set in store, expected filter and provider number returned', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+            const customerZipCode = '18394';
+            const searchFilter = '25 miles';
+            const providerNumber = 749321;
+            useMainStore().order.customer.address.zipCode = customerZipCode;
+            useMainStore().order.serviceLocation.zipCode = null;
+            useMainStore().order.serviceLocation.searchFilter = searchFilter;
+            useMainStore().order.serviceLocation.provider.providerNumber = providerNumber;
+            const providers = [{ companyName: 'some provider' }];
+            const expectedRadius = 25;
+            useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) =>
+                ({ data: { shopProviders: radius === expectedRadius ? providers : [] } }));
+
+            // Act
+            await tpaSearch.beforeRouteEnter.call(
+                wrapper.vm,
+                { query: { issPage: 'tpa-search' } },
+                undefined,
+                (c) => c(wrapper.vm)
+            );
+
+            await wrapper.vm.$nextTick();
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.filter).toBe(searchFilter);
+            expect(wrapper.vm.providers).toEqual(providers);
+            expect(wrapper.vm.selectedProviderNumber).toBe(providerNumber);
+            expect(useMainStore().getTpaProviders).toBeCalledTimes(1);
+            expect(useMainStore().getTpaProviders).toBeCalledWith(customerZipCode, expectedRadius);
+        });
         test('when providers exist at 15 mile radius, filter is set to "15 miles" and providers set to expected', async () => {
             // Arrange
             const { wrapper } = getMountedComponent();
             const zipCode = '18394';
-            useMainStore().order.customer.address.zipCode = zipCode;
+            useMainStore().order.customer.address.zipCode = '00001';
+            useMainStore().order.serviceLocation.zipCode = zipCode;
+            useMainStore().order.serviceLocation.searchFilter = null;
             const providers = [{ companyName: 'provider' }];
             useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) =>
                 ({ data: { shopProviders: radius === 15 ? providers : [] } }));
@@ -1314,15 +1453,19 @@ describe('TPA search page', () => {
             await wrapper.vm.$nextTick();
 
             // Assert
+            expect(wrapper.vm.zipCode).toBe(zipCode);
             expect(wrapper.vm.filter).toBe(expectedFilter);
             expect(wrapper.vm.providers).toEqual(providers);
+            expect(wrapper.vm.selectedProviderNumber).toBeNull();
             expect(useMainStore().getTpaProviders).toBeCalledTimes(1);
         });
         test('when providers exist at 25 mile radius, filter is set to "25 miles" and providers set to expected', async () => {
             // Arrange
             const { wrapper } = getMountedComponent();
             const zipCode = '18394';
-            useMainStore().order.customer.address.zipCode = zipCode;
+            useMainStore().order.customer.address.zipCode = '00001';
+            useMainStore().order.serviceLocation.zipCode = zipCode;
+            useMainStore().order.serviceLocation.searchFilter = null;
             const providers = [{ companyName: 'provider' }];
             useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) =>
                 ({ data: { shopProviders: radius === 25 ? providers : [] } }));
@@ -1340,15 +1483,19 @@ describe('TPA search page', () => {
             await wrapper.vm.$nextTick();
 
             // Assert
+            expect(wrapper.vm.zipCode).toBe(zipCode);
             expect(wrapper.vm.filter).toBe(expectedFilter);
             expect(wrapper.vm.providers).toEqual(providers);
+            expect(wrapper.vm.selectedProviderNumber).toBeNull();
             expect(useMainStore().getTpaProviders).toBeCalledTimes(2);
         });
         test('when providers exist at 50 mile radius but not 25, filter is set to "50 miles" and providers set to expected', async () => {
             // Arrange
             const { wrapper } = getMountedComponent();
             const zipCode = '18394';
-            useMainStore().order.customer.address.zipCode = zipCode;
+            useMainStore().order.customer.address.zipCode = '00001';
+            useMainStore().order.serviceLocation.zipCode = zipCode;
+            useMainStore().order.serviceLocation.searchFilter = null;
             const providers = [{ companyName: 'provider' }];
             useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) =>
                 ({ data: { shopProviders: radius === 50 ? providers : [] } }));
@@ -1366,8 +1513,10 @@ describe('TPA search page', () => {
             await wrapper.vm.$nextTick();
 
             // Assert
+            expect(wrapper.vm.zipCode).toBe(zipCode);
             expect(wrapper.vm.filter).toBe(expectedFilter);
             expect(wrapper.vm.providers).toEqual(providers);
+            expect(wrapper.vm.selectedProviderNumber).toBeNull();
             expect(useMainStore().getTpaProviders).toBeCalledTimes(3);
         });
         test(
@@ -1377,6 +1526,8 @@ describe('TPA search page', () => {
                 const { wrapper } = getMountedComponent();
                 const zipCode = '18394';
                 useMainStore().order.customer.address.zipCode = zipCode;
+                useMainStore().order.serviceLocation.zipCode = null;
+                useMainStore().order.serviceLocation.searchFilter = null;
                 const providers = [{ companyName: 'provider' }];
                 useMainStore().getTpaProviders = jest.fn().mockImplementation((_, radius) =>
                     ({ data: { shopProviders: radius === 100 ? providers : [] } }));
@@ -1394,8 +1545,10 @@ describe('TPA search page', () => {
                 await wrapper.vm.$nextTick();
 
                 // Assert
+                expect(wrapper.vm.zipCode).toBe(zipCode);
                 expect(wrapper.vm.filter).toBe(expectedFilter);
                 expect(wrapper.vm.providers).toEqual(providers);
+                expect(wrapper.vm.selectedProviderNumber).toBeNull();
                 expect(useMainStore().getTpaProviders).toBeCalledTimes(4);
             }
         );
@@ -1405,7 +1558,9 @@ describe('TPA search page', () => {
                 // Arrange
                 const { wrapper } = getMountedComponent();
                 const zipCode = '18394';
-                useMainStore().order.customer.address.zipCode = zipCode;
+                useMainStore().order.customer.address.zipCode = '00001';
+                useMainStore().order.serviceLocation.zipCode = zipCode;
+                useMainStore().order.serviceLocation.searchFilter = null;
                 useMainStore().getTpaProviders = jest.fn().mockImplementation(() => ([]));
                 const expectedFilter = '100 miles';
 
@@ -1421,8 +1576,10 @@ describe('TPA search page', () => {
                 await wrapper.vm.$nextTick();
 
                 // Assert
+                expect(wrapper.vm.zipCode).toBe(zipCode);
                 expect(wrapper.vm.filter).toBe(expectedFilter);
                 expect(wrapper.vm.providers).toEqual([]);
+                expect(wrapper.vm.selectedProviderNumber).toBeNull();
                 expect(useMainStore().getTpaProviders).toBeCalledTimes(4);
             }
         );

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

@@ -131,8 +131,8 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import globalRules from '@/constants/global-rules.js';
 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 bailoutMessage from '@/constants/bailoutMessage';
 
 const radiusFilterPairs = [
     { radius: 15, filter: '15 miles' },
@@ -141,15 +141,35 @@ const radiusFilterPairs = [
     { radius: 100, filter: '100 miles' }
 ];
 
-async function getInitialFilterAndProviders() {
+function convertRadiusFilterToInteger(filter) {
-    const { zipCode } = useMainStore().order.customer.address;
+    const pair = radiusFilterPairs.find((p) => p.filter === filter);
+    return pair?.radius ?? 0;
+}
+
+async function getInitialSearchData() {
+    const customerZipCode = useMainStore().order.customer.address.zipCode;
+    const serviceLocationZipCode = useMainStore().order.serviceLocation.zipCode;
+    const zipCode = serviceLocationZipCode ?? customerZipCode;
+
+    const { searchFilter } = useMainStore().order.serviceLocation;
+    let { providerNumber } = useMainStore().order.serviceLocation.provider;
 
-    let pairIndex = 0;
     let providers = [];
+    let radius = 0;
+    if (searchFilter) {
+        radius = convertRadiusFilterToInteger(searchFilter);
+        const result = await useMainStore().getTpaProviders(zipCode, radius);
+        providers = result?.data?.shopProviders ?? [];
+
+        return { zipCode, filter: searchFilter, providers, providerNumber };
+    }
+
+    providerNumber = null;
+    let pairIndex = 0;
     let filter = '';
     while (providers.length === 0 && pairIndex < radiusFilterPairs.length) {
         const pair = radiusFilterPairs[pairIndex];
-        const { radius } = pair;
+        radius = pair.radius;
         filter = pair.filter;
         // eslint-disable-next-line no-await-in-loop
         const result = await useMainStore().getTpaProviders(zipCode, radius);
@@ -158,7 +178,7 @@ async function getInitialFilterAndProviders() {
         pairIndex += 1;
     }
 
-    return { filter, providers };
+    return { zipCode, filter, providers, providerNumber };
 }
 
 export default {
@@ -178,21 +198,19 @@ export default {
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-        const { filter, providers } = await getInitialFilterAndProviders();
+        const { zipCode, filter, providers, providerNumber } = await getInitialSearchData();
         const cmsContent = await fetchCmsContentForPage(to.query.issPage);
 
         next(async (vm) => {
             vm.setCmsContent(cmsContent);
-            vm.setFilter(filter);
+            vm.setInitialSearchData(zipCode, filter, providers, providerNumber);
-            vm.setProviders(providers);
         });
     },
     data() {
-        const { zipCode } = useMainStore().order.customer.address;
         return {
             dataLoaded: false,
-            zipCode,
+            zipCode: null,
-            mapZipCode: zipCode,
+            mapZipCode: null,
             filter: '',
             providers: [],
             selectedProviderNumber: '',
@@ -248,8 +266,7 @@ export default {
             );
         },
         radiusInMiles() {
-            const pair = radiusFilterPairs.find((p) => p.filter === this.filter);
+            return convertRadiusFilterToInteger(this.filter);
-            return pair?.radius ?? 0;
         },
         noNetworkShopsAlertHeaderText() {
             return this.getCmsContent(
@@ -277,14 +294,18 @@ export default {
             }
         },
         providers(newProviders) {
-            this.selectedProviderNumber = newProviders?.length === 1 ?? false
+            if (this.dataLoaded) {
-                ? newProviders[0]?.providerNumber ?? ''
+                this.selectedProviderNumber = newProviders?.length === 1 ?? false
-                : '';
+                    ? newProviders[0]?.providerNumber ?? ''
+                    : '';
+            }
         },
         selectedProviderNumber(newNumber) {
             const provider = this.providers?.find((p) => p.providerNumber === newNumber);
-            if (provider) {
+            if (provider && this.dataLoaded) {
                 useMainStore().updateServiceLocation({
+                    searchFilter: this.filter,
+                    zipCode: this.zipCode,
                     provider: {
                         providerNumber: provider?.providerNumber,
                         address: {
@@ -307,11 +328,12 @@ export default {
         }
     },
     methods: {
-        setFilter(filter) {
+        setInitialSearchData(zipCode, filter, providers, providerNumber) {
+            this.zipCode = zipCode;
+            this.mapZipCode = zipCode;
             this.filter = filter;
-        },
-        setProviders(providers) {
             this.providers = providers;
+            this.selectedProviderNumber = providerNumber;
         },
         getProviderAddress(provider) {
             const city = toTitleCase(provider?.address?.city);
@@ -343,12 +365,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/tpa-submit/tpa-submit.vue

@@ -208,7 +208,7 @@ export default {
             return [this.companyName ?? '', displayAddress, displayPhoneNumber];
         },
         getContactInfoLines() {
-            const { firstName, lastName, emailAddress, phoneNumber } = useMainStore().order.contactInfo;
+            const { firstName, lastName, emailAddress, phoneNumber } = useMainStore().contactInfo;
             return [
                 `${firstName} ${lastName}`,
                 emailAddress ?? '',

src/layouts/vehicle-selection/vehicle-question/vehicle-question.vue

@@ -32,9 +32,9 @@ export default {
             get() {
                 return this.selectedIndex?.toString();
             },
-            set(newValue) {
+            set(newIndex) {
-                this.selectedIndex = newValue;
+                this.selectedIndex = newIndex;
-                newValue = newValue != null && newValue > -1 ? this.values[newValue] : null;
+                const newValue = newIndex != null && newIndex > -1 ? this.values[newIndex] : null;
                 this.$emit('update:modelValue', newValue);
             }
         }
@@ -46,7 +46,8 @@ export default {
             if (this.values.length === 1) {
                 this.selectedValue = 0;
             } else {
-                this.selectedValue = null;
+                const valueIndex = this.values.indexOf(this.modelValue);
+                this.selectedValue = valueIndex === -1 ? null : valueIndex;
             }
         },
         clearValues() {

src/layouts/vehicle-selection/vehicle-selection.vue

@@ -134,11 +134,12 @@ export default {
         validationRules: String
     },
     data() {
+        const { year, make, model, style } = useMainStore().order.vehicle;
         return {
-            selectedYear: null,
+            selectedYear: year,
-            selectedMake: null,
+            selectedMake: make,
-            selectedModel: null,
+            selectedModel: model,
-            selectedStyle: null
+            selectedStyle: style
         };
     },
     computed: {
@@ -176,6 +177,15 @@ export default {
     },
     mounted() {
         this.$refs.vehicleYearQuestion.getNewValues();
+        if (this.selectedYear) {
+            this.$refs.vehicleMakeQuestion.getNewValues();
+        }
+        if (this.selectedMake) {
+            this.$refs.vehicleModelQuestion.getNewValues();
+        }
+        if (this.selectedModel) {
+            this.$refs.vehicleStyleQuestion.getNewValues();
+        }
     },
     methods: {
         arePagePrerequisitesValid() {

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/router/router-constants/routing-table.js

@@ -581,8 +581,12 @@ const routingTable = () => [
                 destinationIssPageValue: issPageValues.SCHEDULE_PAGE
             },
             {
-                scenario: navigationScenarios.CLICKED_FORWARD,
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP,
                 destinationIssPageValue: issPageValues.SERVICE_PACKAGES
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
+                destinationIssPageValue: issPageValues.TPA_SUBMIT
             }
         ]
     },
@@ -671,7 +675,7 @@ const routingTable = () => [
             },
             {
                 scenario: navigationScenarios.EDIT_PREFERRED_SHOP,
-                destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
+                destinationIssPageValue: issPageValues.TPA_SEARCH
             },
             {
                 scenario: navigationScenarios.EDIT_CONTACT_DETAILS,

src/store/index.js

@@ -122,6 +122,7 @@ const getDefaultState = () => ({
             appointmentType: null,
             isVehicleProtected: null,
             IsSafeliteProvider: null,
+            searchFilter: null,
             provider: {
                 providerNumber: null,
                 address: {
@@ -224,6 +225,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;
@@ -1372,6 +1374,7 @@ export const useMainStore = defineStore({
                 companyName: serviceLocationInfo.provider?.companyName,
                 phoneNumber: serviceLocationInfo.provider?.phoneNumber
             };
+            this.order.serviceLocation.searchFilter = serviceLocationInfo.searchFilter;
         },
 
         resetRegistrationState() {
@@ -1411,6 +1414,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 +2064,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 +2125,7 @@ export const useMainStore = defineStore({
             this.order.customer.address.streetAddress2 = null;
             this.resetVehicleState();
             this.resetDamageState();
+            this.resetBailout();
         }
 
     },

src/styles/bailout-common.scss

@@ -10,6 +10,10 @@ $font-size: 0.875rem;
       margin-top: 1rem;
       padding: 0;
       
+      .container-fluid {
+        margin-bottom: 1rem;
+      }
+
       div.subheader-primary {
         padding: 0;
       }
@@ -21,6 +25,8 @@ $font-size: 0.875rem;
         p {
           line-height: 1.5rem;
           font-size: $font-size;
+          margin-bottom: 0.5rem;
+          color: $gray-600;
           &:last-child {
             margin-bottom: 0;
           }