Merge pull request #3172 from Safelite/feature/CASH-2563

feature/CASH-2563

src/constants/bailout-codes.js

@@ -0,0 +1,5 @@
+const bailoutCodes = {
+    PARTS_NOT_FOUND: 10,
+};
+
+export { bailoutCodes };

src/constants/store-actions.js

@@ -132,6 +132,8 @@ const storeActions = {
     UPDATE_HAS_TRIGGERED_ERROR: "updateHasTriggeredError",
     GET_VALID_IDEMPOTENCY_KEY: "getValidIdempotencyKey",
     CORRECT_IDEMPOTENCY_KEY_EXPIRY: "correctIdempotencyKeyExpiry",
+
+    SAVE_BAILOUT_CODE: "saveBailoutCode",
 };
 
 export { storeActions };

src/constants/store-mutations.js

@@ -115,6 +115,9 @@ const storeMutations = {
     UPDATE_EXPERIMENTS: "updateExperiments",
     UPDATE_TRIGGERED_SITE_ENTRY: "updateTriggeredSiteEntry",
 
+    // BAILOUT MUTATIONS
+    UPDATE_BAILOUT_CODE: "updateBailoutCode",
+
     // EXTERNAL_PARAMETER MUTATIONS
     UPDATE_IS_EXTERNAL_PARAMETER: "updateIsExternalParameter",
     UPDATE_EXTERNAL_PARAMETER_YEAR: "updateExternalParameterYear",

src/helpers/heritage-integration/order-helper.js

@@ -106,6 +106,14 @@ export async function saveQuote({ pageNameToLog }) {
     return;
 }
 
+export async function submitBailout({ pageNameToLog }) {
+    await saveSession({
+        pageNameToLog: pageNameToLog,
+        shouldAwaitSaveSessionQueue: true,
+        submitAfterSave: false,
+    });
+}
+
 // PRIVATE FUNCTIONS //
 
 /*

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

@@ -0,0 +1,56 @@
+// Components
+import bailoutSuccess from "@/layouts/bailout-success/bailout-success.vue";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("bailout-success.vue", () => {
+    test("renders funnelHeader component", () => {
+        const { wrapper } = setupMocks();
+        expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+    });
+
+    test("renders funnelSubHeader component", () => {
+        const { wrapper } = setupMocks();
+        expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+    });
+
+    test("renders Form component", () => {
+        const { wrapper } = setupMocks();
+        expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+    });
+
+    test("renders buttonMain component", () => {
+        const { wrapper } = setupMocks();
+        expect(wrapper.findComponent({ name: "buttonMain" }).exists()).toBe(true);
+    });
+});
+
+function setupMocks() {
+    const mountOptions = getMountOptions({});
+
+    //Mock props
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn(),
+        },
+    };
+
+    mountOptions.mixins = [mockMixin];
+    const wrapper = shallowMount(bailoutSuccess, mountOptions);
+
+    wrapper.vm.setCmsContent = jest.fn();
+
+    return { wrapper };
+}

src/layouts/bailout-success/bailout-success.vue

@@ -0,0 +1,91 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <div class="container ymm-return">
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <funnelSubHeader
+                        class="mb-5"
+                        cmsWidgetName="FunnelSubHeaderWidget"
+                        :alignLeft="true" />
+
+                    <buttonMain
+                        id="btn-vehicle-not-listed"
+                        :isPrimary="true"
+                        :buttonText="ReturnToHomeButtonText"
+                        class="mb-3"
+                        @click-event="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+import { Form } from "vee-validate";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import buttonMain from "@/ux-components/button-main/button-main";
+import store from "@/store";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "bailout-success",
+    mixins: [],
+    data() {
+        return {};
+    },
+
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.name);
+
+        // Settle API calls in parallel before handling results.
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Hydrate page with results
+        next(async (vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        async forwardButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK_TO_HOMEPAGE,
+                this.pageName
+            );
+        },
+        arePagePrerequisitesValid() {
+            return (
+                store.getters.order.customer.firstName &&
+                store.getters.order.customer.lastName &&
+                store.getters.order.customer.emailAddress &&
+                store.getters.order.customer.phoneNumber
+            );
+        },
+    },
+
+    computed: {
+        ReturnToHomeButtonText() {
+            return this.getCmsContent("ReturnToHomeButtonText", "Text");
+        },
+    },
+
+    components: {
+        Form,
+        funnelHeader,
+        funnelSubHeader,
+        buttonMain,
+    },
+};
+</script>

src/layouts/bailout/bailout.spec.js

@@ -16,6 +16,26 @@ jest.mock("@/helpers/cms-content-helper", () => ({
 }));
 
 describe("bailout.vue", () => {
+    test("renders funnelHeader component", () => {
+        const { wrapper } = setupMocks();
+        expect(wrapper.findComponent({ name: "funnelHeader" }).exists()).toBe(true);
+    });
+
+    test("renders funnelSubHeader component", () => {
+        const { wrapper } = setupMocks();
+        expect(wrapper.findComponent({ name: "funnelSubHeader" }).exists()).toBe(true);
+    });
+
+    test("renders Form component", () => {
+        const { wrapper } = setupMocks();
+        expect(wrapper.findComponent({ name: "Form" }).exists()).toBe(true);
+    });
+
+    test("renders navbar component", () => {
+        const { wrapper } = setupMocks();
+        expect(wrapper.findComponent({ name: "navbar" }).exists()).toBe(true);
+    });
+
     test("arePagePrerequisitesValid should be true ", async () => {
         //Arrange
         const { wrapper } = setupMocks();

src/layouts/bailout/bailout.vue

@@ -1,21 +1,80 @@
 <template>
-    <Form>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <loadingModal ref="loadingModal" />
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container ymm-return">
-            <div class="row justify-content-center">
+            <div class="row">
-                <div class="col-md-6">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                    <funnelSubHeader
-                </div>
+                        class="mb-5"
-            </div>
+                        :cmsWidgetName="getSubHeaderWidget"
-            <div class="row justify-content-center">
+                        :alignLeft="true" />
-                <div class="col-md-6 col-xl-4 mt-4">
+
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="FirstNameQuestionWidget"
+                        v-model="firstName"
+                        ref="firstName"
+                        customInputId="firstName"
+                        validationRules="first-name-required" />
+
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="LastNameQuestionWidget"
+                        v-model="lastName"
+                        ref="lastName"
+                        customInputId="lastName"
+                        validationRules="last-name-required" />
+
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="EmailQuestionWidget"
+                        v-model="emailAddress"
+                        inputId="email"
+                        validationRules="email-address-required|email-address-format" />
+
+                    <phoneNumberQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="PhoneNumberQuestionWidget"
+                        v-model="phoneNumber"
+                        validationRules="phone-number-required" />
+
+                    <textboxQuestion
+                        class="mb-4"
+                        cmsWidgetName="ServiceZipQuestionWidget"
+                        v-model="serviceZipCode"
+                        ref="serviceZip"
+                        customInputId="serviceZip"
+                        mask="#####"
+                        validationRules="service-zip-required|service-zip-format" />
+
+                    <alert
+                        ref="alertInvalidZip"
+                        v-if="displayInvalidZipAlert"
+                        class="mb-4"
+                        cmsWidgetName="AlertInvalidZipWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+
+                    <checkboxQuestion
+                        class="mb-5"
+                        cmsWidgetName="TextMeQuestionWidget"
+                        v-model="isSmsOptIn" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
-                        isForwardActionDisabled="true"
+                        ref="navbar"
-                        isSubmitHidden="true"
+                        :isForwardActionDisabled="!meta.valid"
-                        @back-clicked="backButtonAction" />
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+
+                    <textBlock
+                        class="mb-5"
+                        cmsWidgetName="DisclaimerCopyWidget"
+                        typeStyle="caption" />
                 </div>
             </div>
         </div>
@@ -23,23 +82,64 @@
 </template>
 
 <script>
-// Components
+import { Form, defineRule } from "vee-validate";
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import alert from "@/ux-components/alert/alert";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
+import textBlock from "@/digital-components/text-block/text-block";
+import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
+import { routeData } from "@/router/constants/routes";
+import { bailoutCodes } from "@/constants/bailout-codes";
 
-// Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 
+import store from "@/store";
+import { errorMessages } from "@/constants/error-messages";
+import { required, regex } from "@/helpers/validation-rules";
+
+// DEFINE VALIDATION RULES
+defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
+defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
+defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(
+    "email-address-format",
+    regex(
+        /^([a-zA-Z0-9_.+]+)@([a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*\.)+([a-zA-Z]{2,})$/,
+        errorMessages.EMAIL_ADDRESS_FORMAT
+    )
+);
+defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
+defineRule(
+    "service-zip-format",
+    regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)
+);
+
 export default {
     name: "bailout",
+    mixins: [],
+    data() {
+        return {
+            bailoutCode: this.getBailoutCodeFromStore(),
+            firstName: this.getFirstNameFromStore(),
+            lastName: this.getLastNameFromStore(),
+            emailAddress: this.getEmailAddressFromStore(),
+            phoneNumber: this.getPhoneNumberFromStore(),
+            serviceZipCode: this.getServiceZipFromStore(),
+            isSmsOptIn: this.getIsSmsOptInFromStore(),
+            displayInvalidZipAlert: false,
+        };
+    },
+
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.name);
 
-        // Settle promises and get results
+        // Settle API calls in parallel before handling results.
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
@@ -49,25 +149,124 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
-        // Call the "next" function to complete the transition to this page.
+        // Hydrate page with results
-        next((vm) => {
+        next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
 
     methods: {
+        getBailoutCodeFromStore() {
+            return store.getters.applicationUser.bailoutCode;
+        },
+        getFirstNameFromStore() {
+            return store.getters.order.customer.firstName;
+        },
+        getLastNameFromStore() {
+            return store.getters.order.customer.lastName;
+        },
+        getEmailAddressFromStore() {
+            return store.getters.order.customer.emailAddress;
+        },
+        getPhoneNumberFromStore() {
+            return store.getters.order.customer.phoneNumber;
+        },
+        getServiceZipFromStore() {
+            return store.getters.order.serviceLocation.zipCode;
+        },
+        getIsSmsOptInFromStore() {
+            return store.getters.order.customer.isSmsOptIn;
+        },
+        async backButtonAction() {
+            this.$router.go(-1);
+        },
+        async forwardButtonAction() {
+            this.displayInvalidZipAlert = false;
+
+            const validateZipResponse = this.dispatchStoreActionWithLogging(
+                this.storeActions.VALIDATE_ZIP,
+                {
+                    zip: this.serviceZipCode,
+                },
+                this.pageName
+            );
+
+            const saveCustomerDetailsResponse = this.dispatchStoreAction(
+                this.storeActions.SAVE_CUSTOMER_DETAILS,
+                {
+                    firstName: this.firstName,
+                    lastName: this.lastName,
+                    emailAddress: this.emailAddress,
+                    phoneNumber: this.phoneNumber,
+                    isSmsOptIn: this.isSmsOptIn,
+                },
+                false
+            );
+
+            const promiseResultMap = [
+                {
+                    resultKey: "validateZipResponse",
+                    promise: validateZipResponse,
+                },
+                {
+                    resultKey: "saveCustomerDetailsResponse",
+                    promise: saveCustomerDetailsResponse,
+                },
+            ];
+
+            const resultMap = await settleAllPromises(promiseResultMap);
+            const isZipValid = resultMap.validateZipResponse.isValid;
+
+            if (isZipValid) {
+                await this.dispatchStoreActionWithLogging(
+                    this.storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
+                    {
+                        zipCode: this.serviceZipCode,
+                        state: resultMap.validateZipResponse.state,
+                        zipCodeCtu: resultMap.validateZipResponse.zipCodeCtu,
+                    },
+                    false
+                ).then(() => {
+                    this.$router.navigateWithPageData(
+                        this.navigationScenarios.CLICKED_FORWARD,
+                        this.pageName,
+                        {
+                            bailoutCode: this.bailoutCode,
+                            submit: true,
+                        }
+                    );
+                });
+            } else {
+                this.displayInvalidZipAlert = true;
+                return this.$refs.navbar.removeLoader();
+            }
+        },
         arePagePrerequisitesValid() {
             return true;
         },
-        backButtonAction() {
+    },
-            this.$router.go(-1);
+
+    computed: {
+        getSubHeaderWidget() {
+            switch (this.bailoutCode) {
+                case bailoutCodes.PARTS_NOT_FOUND:
+                    return "PartsNotFoundSubHeaderWidget";
+                default:
+                    return "FunnelSubHeaderWidget";
+            }
         },
     },
+
     components: {
+        Form,
         funnelHeader,
-        navbar,
         funnelSubHeader,
-        loadingModal,
+        alert,
+        navbar,
+        textBlock,
+        phoneNumberQuestion,
+        checkboxQuestion,
+        textboxQuestion,
     },
 };
 </script>

src/mixins/bailout-mixin.js

@@ -0,0 +1,13 @@
+import { navigationScenarios } from "@/router/constants/navigation-scenarios";
+
+export default {
+    methods: {
+        navigateToBailoutPage(vm, bailoutCode) {
+            const self = vm ?? this;
+
+            self.dispatchStoreAction(self.storeActions.SAVE_BAILOUT_CODE, bailoutCode).then(() => {
+                self.$router.navigateWithoutSaving(navigationScenarios.BAILOUT, self.pageName);
+            });
+        },
+    },
+};

src/mixins/bailout-mixin.spec.js

@@ -0,0 +1,103 @@
+import bailoutMixin from "@/mixins/bailout-mixin";
+import { storeActions } from "@/constants/store-actions.js";
+import { navigationScenarios } from "@/router/constants/navigation-scenarios";
+import { bailoutCodes } from "@/constants/bailout-codes.js";
+
+describe("bailout-mixin.js", () => {
+    test("navigateToBailoutPage: dispatches SAVE_BAILOUT_CODE action with bailout code", async () => {
+        // Arrange
+        const mockVm = createMockVm();
+        const bailoutCode = bailoutCodes.PARTS_NOT_FOUND;
+
+        // Act
+        await bailoutMixin.methods.navigateToBailoutPage(mockVm, bailoutCode);
+
+        // Assert
+        expect(mockVm.dispatchStoreAction).toHaveBeenCalledWith(
+            storeActions.SAVE_BAILOUT_CODE,
+            bailoutCode
+        );
+    });
+
+    test("navigateToBailoutPage: navigates to bailout page after saving bailout code", async () => {
+        // Arrange
+        const mockVm = createMockVm();
+        const bailoutCode = bailoutCodes.PARTS_NOT_FOUND;
+
+        // Act
+        await bailoutMixin.methods.navigateToBailoutPage(mockVm, bailoutCode);
+
+        // Assert
+        expect(mockVm.$router.navigateWithoutSaving).toHaveBeenCalledWith(
+            navigationScenarios.BAILOUT,
+            mockVm.pageName
+        );
+    });
+
+    test("navigateToBailoutPage: uses current context (this) when vm is not provided", async () => {
+        // Arrange
+        const mockRouter = {
+            navigateWithoutSaving: jest.fn().mockResolvedValue(undefined),
+        };
+        const mockThis = {
+            dispatchStoreAction: jest.fn().mockResolvedValue(undefined),
+            $router: mockRouter,
+            storeActions: storeActions,
+            pageName: "test-page",
+        };
+
+        const bailoutCode = bailoutCodes.PARTS_NOT_FOUND;
+
+        // Act
+        await bailoutMixin.methods.navigateToBailoutPage.call(mockThis, undefined, bailoutCode);
+
+        // Assert
+        expect(mockThis.dispatchStoreAction).toHaveBeenCalledWith(
+            storeActions.SAVE_BAILOUT_CODE,
+            bailoutCode
+        );
+    });
+
+    test("navigateToBailoutPage: passes correct bailout code to store", async () => {
+        // Arrange
+        const mockVm = createMockVm();
+        const customBailoutCode = 999;
+
+        // Act
+        await bailoutMixin.methods.navigateToBailoutPage(mockVm, customBailoutCode);
+
+        // Assert
+        expect(mockVm.dispatchStoreAction).toHaveBeenCalledWith(
+            storeActions.SAVE_BAILOUT_CODE,
+            customBailoutCode
+        );
+    });
+
+    test("navigateToBailoutPage: calls navigateWithoutSaving with correct parameters", async () => {
+        // Arrange
+        const mockVm = createMockVm();
+        const mockPageName = "vehicle-damage";
+        mockVm.pageName = mockPageName;
+        const bailoutCode = bailoutCodes.PARTS_NOT_FOUND;
+
+        // Act
+        await bailoutMixin.methods.navigateToBailoutPage(mockVm, bailoutCode);
+
+        // Assert
+        expect(mockVm.$router.navigateWithoutSaving).toHaveBeenCalledWith(
+            navigationScenarios.BAILOUT,
+            mockPageName
+        );
+    });
+});
+
+function createMockVm() {
+    return {
+        dispatchStoreAction: jest.fn().mockResolvedValue(undefined),
+        $router: {
+            navigateWithoutSaving: jest.fn().mockResolvedValue(undefined),
+        },
+        storeActions,
+        pageName: "test-page",
+    };
+}

src/mixins/vin-pages-mixin.js

@@ -1,9 +1,11 @@
 import { storeActions } from "@/constants/store-actions.js";
 import store from "@/store";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import bailoutMixin from "@/mixins/bailout-mixin";
 import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
 import { experimentSettings } from "@/constants/experiments";
 import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
+import { bailoutCodes } from "@/constants/bailout-codes";
 
 export default {
     computed: {
@@ -34,6 +36,11 @@ export default {
             const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS, {
                 pageNameToLog: pageName,
             });
+
+            if (result.PartsNotFound) {
+                bailoutMixin.methods.navigateToBailoutPage(this, bailoutCodes.PARTS_NOT_FOUND);
+            }
+
             const partsOrQuestions = result.data.partsOrQuestions;
 
             vehicleQuestionsMixin.methods.navigateForward(partsOrQuestions, this);

src/router/constants/navigation-scenarios.js

@@ -13,6 +13,11 @@ const navigationScenarios = {
     CLICKED_FORWARD_WITH_CASH: "CLICKED_FORWARD_WITH_CASH",
     CLICKED_FORWARD_WITH_INSURANCE: "CLICKED_FORWARD_WITH_INSURANCE",
 
+    // Bailout
+    BAILOUT: "BAILOUT",
+    BAILOUT_SUCCESS: "BAILOUT_SUCCESS",
+    CLICKED_BACK_TO_HOMEPAGE: "CLICKED_BACK_TO_HOMEPAGE",
+
     // TODO: use virtual page?
     // Vin selection
     CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN",

src/router/constants/routes.js

@@ -171,6 +171,14 @@ export const routeData = {
         path: "/virtual/restart",
         virtual: true,
     },
+    BAILOUT: {
+        name: "bailout",
+        path: "/bailout",
+    },
+    BAILOUT_SUCCESS: {
+        name: "bailout-success",
+        path: "/bailout-success",
+    },
 };
 
 export const FUNNEL_START_PAGE = routeData.VEHICLE;

src/router/constants/routing-table.js

@@ -274,6 +274,10 @@ const routingTable = function () {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
                     destinationPageData: routeData.QUOTE,
                 },
+                {
+                    scenario: navigationScenarios.BAILOUT,
+                    destinationPageData: routeData.BAILOUT,
+                },
             ],
         },
         {
@@ -802,6 +806,24 @@ const routingTable = function () {
                 },
             ],
         },
+        {
+            pageName: routeData.BAILOUT.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.BAILOUT_SUCCESS,
+                },
+            ],
+        },
+        {
+            pageName: routeData.BAILOUT_SUCCESS.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK_TO_HOMEPAGE,
+                    destinationPageData: routeData.RESTART,
+                },
+            ],
+        },
     ];
 };
 

src/router/methods/navigate.js

@@ -70,7 +70,13 @@ export async function navigateWithSaving(scenario, currentPageName) {
 
 export async function navigateWithPageData(scenario, currentPageName, pageData = {}) {
     const nextPage = getDestination(currentPageName, scenario);
-    await savePageData(nextPage.name, pageData);
+
+    if (pageData && pageData.bailoutCode) {
+        pageData.AppName = "FixMyGlass";
+        await savePageData(currentPageName, pageData);
+    } else {
+        await savePageData(nextPage.name, pageData);
+    }
 
     return await navigate(scenario, currentPageName, true);
 }

src/router/methods/routes.js

@@ -51,6 +51,8 @@ export const routes = [
     createRoute(routeData.RECALIBRATION_INFO),
     createRoute(routeData.COVERAGE_STATEMENT),
     createRoute(routeData.VERIFY_DETAILS),
+    createRoute(routeData.BAILOUT),
+    createRoute(routeData.BAILOUT_SUCCESS),
     // Virtual pages (resolve to a non-virtual page.)
     createVirtualRoute(routeData.LANDING, landingBeforeEnter),
     createVirtualRoute(routeData.HERITAGE, heritageBeforeEnter),

src/store/index.js

@@ -217,6 +217,7 @@ const getDefaultState = () => {
             affiliateCookies: [],
             loggingOption: false,
             hasAlreadyTriggeredError: false,
+            bailoutCode: null,
         },
         idempotencyKeyFields: {
             referralCorrelationId: null,
@@ -486,9 +487,11 @@ export const mutations = {
         state.order.vehicle.registration.licensePlate = registrationInfo?.licensePlate;
     },
     updateServiceZip(state, serviceZipInfo) {
-        state.order.serviceLocation.state = serviceZipInfo.state;
+        state.order.serviceLocation.state = serviceZipInfo.state || serviceZipInfo.payload?.state;
-        state.order.serviceLocation.zipCode = serviceZipInfo.zipCode;
+        state.order.serviceLocation.zipCode =
-        state.order.serviceLocation.zipCodeCtu = serviceZipInfo.zipCodeCtu;
+            serviceZipInfo.zipCode || serviceZipInfo.payload?.zipCode;
+        state.order.serviceLocation.zipCodeCtu =
+            serviceZipInfo.zipCodeCtu || serviceZipInfo.payload?.zipCodeCtu;
     },
     updateServiceLocation(state, serviceLocationInfo) {
         state.order.serviceLocation.address = serviceLocationInfo.address;
@@ -973,6 +976,9 @@ export const mutations = {
         state.idempotencyKeyFields.totalInCents = totalInCents;
         state.idempotencyKeyFields.expiryTime = expiryTime;
     },
+    updateBailoutCode(state, bailoutCode) {
+        state.applicationUser.bailoutCode = bailoutCode;
+    },
 };
 
 // Export Getters
@@ -1926,21 +1932,38 @@ export const actions = {
         // create a new array to avoid mutating state
         const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
 
-        const response = await globalMethods.callHttpClient({
+        const response = await globalMethods
-            method: endpoints.GetPartsOrQuestions.method,
+            .callHttpClient({
-            endpoint: endpoints.GetPartsOrQuestions.url,
+                method: endpoints.GetPartsOrQuestions.method,
-            payload: {
+                endpoint: endpoints.GetPartsOrQuestions.url,
-                carId: carId,
+                payload: {
-                glassPieces: glassArrayForPayload,
+                    carId: carId,
-                zip: zipCode,
+                    glassPieces: glassArrayForPayload,
-                vin: vin,
+                    zip: zipCode,
-                serviceType: serviceType,
+                    vin: vin,
-                referralSeqNumber: referralSeqNumber,
+                    serviceType: serviceType,
-                parentAccountNumber: parentAccountNumber,
+                    referralSeqNumber: referralSeqNumber,
-            },
+                    parentAccountNumber: parentAccountNumber,
-            logApiCall: true,
+                },
-            pageNameToLog: pageNameToLog,
+                logApiCall: true,
-        });
+                pageNameToLog: pageNameToLog,
+            })
+            .catch((error) => {
+                if (error.status == 500) {
+                    return { PartsNotFound: true };
+                }
+            });
+
+        // Triggers bailout
+        if (response.PartsNotFound) {
+            return response;
+        }
+
+        // Check if we only have MISC parts to trigger bailout
+        const miscPartsResponse = checkIfMiscParts(response.data.partsOrQuestions);
+        if (miscPartsResponse.PartsNotFound) {
+            return miscPartsResponse;
+        }
 
         // Flatten location and name properties
         response.data.partsOrQuestions = convertGlassPieceNamingFromApi(
@@ -3846,6 +3869,10 @@ export const actions = {
             context.commit(storeMutations.UPDATE_IDEMPOTENCY_KEY, newKey);
         }
     },
+
+    saveBailoutCode(context, bailoutCode) {
+        context.commit(storeMutations.UPDATE_BAILOUT_CODE, bailoutCode);
+    },
 };
 
 export default createStore({
@@ -4387,3 +4414,17 @@ const timeSlotCallFlags = {
     shop: false,
     mobile: false,
 };
+
+function checkIfMiscParts(partsOrQuestions) {
+    if (!partsOrQuestions || partsOrQuestions.length === 0) {
+        return { PartsNotFound: true };
+    } else if (
+        partsOrQuestions.length === 1 &&
+        partsOrQuestions[0].parts &&
+        partsOrQuestions[0].parts.length === 1 &&
+        partsOrQuestions[0].parts[0].partNumber.startsWith("MISC")
+    ) {
+        return { PartsNotFound: true };
+    }
+    return { PartsNotFound: false };
+}