CASH-2563

src/constants/bailout-codes.js

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

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

@@ -57,13 +57,15 @@ export async function saveSession({
     shouldAwaitSaveSessionQueue = false,
     submitAfterSave = false,
     createUnscheduledStatusWorkOrderForPIA = false,
+    bailoutCode = null,
 }) {
     // Add next save session to end of queue
     const saveSessionPromise = flushSaveSessionQueue().then(() => {
         return saveSessionHelper(
             pageNameToLog,
             submitAfterSave,
-            createUnscheduledStatusWorkOrderForPIA
+            createUnscheduledStatusWorkOrderForPIA,
+            bailoutCode
         );
     });
 
@@ -106,6 +108,15 @@ export async function saveQuote({ pageNameToLog }) {
     return;
 }
 
+export async function submitBailout({ pageNameToLog, bailoutCode }) {
+    await saveSession({
+        pageNameToLog: pageNameToLog,
+        shouldAwaitSaveSessionQueue: true,
+        submitAfterSave: false,
+        bailoutCode: bailoutCode,
+    });
+}
+
 // PRIVATE FUNCTIONS //
 
 /*
@@ -147,13 +158,15 @@ async function loadSession(
 async function saveSessionHelper(
     pageNameToLog,
     submitAfterSave = false,
-    createUnscheduledStatusWorkOrderForPIA = false
+    createUnscheduledStatusWorkOrderForPIA = false,
+    bailoutCode = null
 ) {
     const savedSessionInfo = await baseMixin.methods.dispatchStoreActionWithLogging(
         storeActions.SAVE_SESSION,
         {
             submitAfterSave: submitAfterSave,
             createUnscheduledStatusWorkOrderForPIA: createUnscheduledStatusWorkOrderForPIA,
+            bailoutCode: bailoutCode,
         },
         pageNameToLog
     );

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,
+                "bailout-success"
+            );
+        },
+        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.vue

@@ -1,21 +1,63 @@
 <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" />
+
+                    <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 +65,56 @@
 </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 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
+    )
+);
+
 export default {
     name: "bailout",
+    mixins: [],
+    data() {
+        return {
+            bailoutCode: this.getBailoutCodeFromStore(),
+            firstName: this.getFirstNameFromStore(),
+            lastName: this.getLastNameFromStore(),
+            emailAddress: this.getEmailAddressFromStore(),
+            phoneNumber: this.getPhoneNumberFromStore(),
+            isSmsOptIn: this.getIsSmsOptInFromStore(),
+        };
+    },
+
     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 +124,79 @@ 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 bailoutCodes.PARTS_NOT_FOUND;
+        },
+        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;
+        },
+        getIsSmsOptInFromStore() {
+            return store.getters.order.customer.isSmsOptIn;
+        },
+        async backButtonAction() {
+            this.$router.go(-1);
+        },
+        async forwardButtonAction() {
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_CUSTOMER_DETAILS,
+                {
+                    firstName: this.firstName,
+                    lastName: this.lastName,
+                    emailAddress: this.emailAddress,
+                    phoneNumber: this.phoneNumber,
+                    isSmsOptIn: this.isSmsOptIn,
+                },
+                false
+            ).then(() => {
+                this.$router.navigateWithPageData(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName,
+                    {
+                        bailoutCode: this.bailoutCode,
+                    }
+                );
+            });
+        },
         arePagePrerequisitesValid() {
             return true;
         },
-        backButtonAction() {
+    },
-            this.$router.go(-1);
+
+    computed: {
+        getSubHeaderWidget() {
+            if (this.bailoutCode === bailoutCodes.PARTS_NOT_FOUND) {
+                return "PartsNotFoundSubHeaderWidget";
+            } else {
+                return "FunnelSubHeaderWidget";
+            }
         },
     },
+
     components: {
+        Form,
         funnelHeader,
-        navbar,
         funnelSubHeader,
-        loadingModal,
+        navbar,
+        textBlock,
+        phoneNumberQuestion,
+        checkboxQuestion,
+        textboxQuestion,
     },
 };
 </script>

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

@@ -802,6 +802,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.VEHICLE,
+                },
+            ],
+        },
     ];
 };
 

src/router/methods/navigate.js

@@ -7,7 +7,13 @@ import store from "@/store";
 
 import { handleSoftError } from "@/router/methods/error";
 
-async function navigate(scenario, currentPageName, withSaving = false, forceTopLevelNav = false) {
+async function navigate(
+    scenario,
+    currentPageName,
+    withSaving = false,
+    forceTopLevelNav = false,
+    bailoutCode = null
+) {
     // Check to see if calling page is same as current page.
     // If not, cancel navigation before it begins.
     const callingRoute = currentPageName;
@@ -39,7 +45,7 @@ async function navigate(scenario, currentPageName, withSaving = false, forceTopL
             store.getters?.applicationUser?.savedSessionId ||
             store.getters?.order?.customer?.emailAddress
         ) {
-            await saveSession({ pageNameToLog: nextPage.name });
+            await saveSession({ pageNameToLog: nextPage.name, bailoutCode: bailoutCode });
         }
     }
 
@@ -70,9 +76,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) {
-
+        await savePageData(currentPageName, pageData);
-    return await navigate(scenario, currentPageName, true);
+        return await navigate(scenario, currentPageName, true, false, pageData.bailoutCode);
+    } else {
+        await savePageData(nextPage.name, pageData);
+        return await navigate(scenario, currentPageName, true);
+    }
 }
 
 export async function navigateAndForceTopLevelNavigation(

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),