big truck bailout WIP

src/constants/bailoutMessage.js

@@ -63,7 +63,7 @@ const bailoutMessage = Object.freeze({
     }),
     HeavyTruckVehicle: (carId) => ({
         code: bailoutCode.HeavyTruckVehicle,
-        message: `User selected a heavy truck vehicle. Car ID: ${carId}`
+        message: `User selected a big truck that Safelite cannot service. Car ID: ${carId}`
     }),
     NoPartsAvailable: () => ({
         code: bailoutCode.NoPartsAvailable,

src/helpers/bailout-helper.js

@@ -12,6 +12,8 @@ function canBailoutNavigateBack() {
         case BailoutCode.VehicleNotFound:
         case BailoutCode.RequestCallback:
         case BailoutCode.TPANotEnabled:
+        case BailoutCode.CoverageCancelledByUser:
+        case BailoutCode.HeavyTruckVehicle:
             return true;
 
         default:

src/layouts/address-lookup/address-lookup.vue

@@ -55,14 +55,6 @@
                         alertClass="alert-danger"
                         :isCollapsible="true"
                         :isDismissible="false" />
-                    <alert
-                        v-if="displayNoServiceAlert"
-                        ref="alertNoService"
-                        class="mt-5"
-                        cmsWidgetName="AlertNoServiceWidget"
-                        alertClass="alert-danger"
-                        :isCollapsible="true"
-                        :isDismissable="false" />
                     <siteFooter
                         ref="siteFooter"
                         class="mt-5"
@@ -142,8 +134,7 @@ export default {
             isCarIdDifferent: false,
             isSelectedGlassAvailableForVehicle: true,
             customAlertData: {},
-            forwardButtonCarStyle: '',
+            forwardButtonCarStyle: ''
-            displayNoServiceAlert: false
         };
     },
     computed: {
@@ -261,9 +252,7 @@ export default {
                 const carFound = carsFound[0].vehicle;
 
                 if (!carFound.canSafeliteService) {
-                    this.displayNoServiceAlert = true;
+                    return this.mainStore.setBailout(bailoutMessage.HeavyTruckVehicle(carFound.carId));
-                    showIssLoadingModal(false);
-                    return this.$refs.siteFooter.disableForwardButton();
                 }
 
                 this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -59,13 +59,6 @@
                         :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
                         alertClass="alert-warning"
                         :isDismissible="false" />
-                    <alert
-                        v-if="displayNoServiceAlert"
-                        ref="alertNoService"
-                        class="mt-5"
-                        cmsWidgetName="AlertNoServiceWidget"
-                        alertClass="alert-danger"
-                        :isDismissable="false" />
                     <siteFooter
                         ref="siteFooter"
                         class="mt-5"
@@ -156,8 +149,7 @@ export default {
             isCarIdDifferent: false,
             customAlertData: {},
             isSelectedGlassAvailableForVehicle: true,
-            forwardButtonCarStyle: '',
+            forwardButtonCarStyle: ''
-            displayNoServiceAlert: false
         };
     },
     computed: {
@@ -265,9 +257,7 @@ export default {
             // Vehicle found from VIN lookup
             const vehicleFromLookup = vinLookupResponse.data.vehicle;
             if (!vehicleFromLookup.canSafeliteService) {
-                this.displayNoServiceAlert = true;
+                return this.mainStore.setBailout(bailoutMessage.HeavyTruckVehicle(vehicleFromLookup.carId));
-                showIssLoadingModal(false);
-                return this.$refs.siteFooter.disableForwardButton();
             }
 
             // Check if the CarId has changed
@@ -326,7 +316,6 @@ export default {
         resetWarningsAndErrors() {
             this.displayVinNotFoundAlert = false;
             this.displayMatchedDifferentVehicleAlert = false;
-            this.displayNoServiceAlert = false;
         }
     }
 };

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

@@ -27,17 +27,10 @@
                             buttonText="Add another vehicle"
                             class="w-100"
                             @clickEvent="addAnotherVehicle" />
-                        <alert
-                            v-if="displayNoServiceAlert"
-                            ref="AlertNoService"
-                            class="mt-3"
-                            cmsWidgetName="AlertVehicleSelection"
-                            alertClass="alert-danger"
-                            :isDismissable="false" />
                         <siteFooter
                             ref="siteFooter"
                             cmsWidgetName="SiteFooterWidget"
-                            :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
+                            :isForwardActionDisabled="!meta.valid"
                             @ForwardClicked="forwardButtonAction"
                             @backClicked="backButtonAction" />
                     </div>
@@ -67,10 +60,10 @@ import {
 } from '@/helpers/policy-vehicle-helper';
 import coverageType from '@/constants/coverage-type';
 import coverageStatuses from '@/constants/coverage-statuses';
-import alert from '@/ux-components/alert/alert.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import buttonMain from '@/ux-components/button-main/button-main.vue';
 import { buttonVariants } from '@/constants/component-variants';
+import bailoutMessage from '@/constants/bailoutMessage';
 
 export default {
     name: 'policy-vehicles',
@@ -80,8 +73,7 @@ export default {
         siteHeader,
         siteFooter,
         policyVehiclesQuestion,
-        Form,
+        Form
-        alert
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -103,7 +95,6 @@ export default {
             rules: {
                 optionRequired: globalRules.OPTION_REQUIRED
             },
-            displayNoServiceAlert: false,
             buttonVariants
         };
     },
@@ -147,7 +138,6 @@ export default {
     },
     watch: {
         async selectedVehicleVin(value) {
-            this.displayNoServiceAlert = false;
             if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
                 // clear previously selected vehicle and image
                 this.mainStore.resetVehicleState();
@@ -157,10 +147,6 @@ export default {
             // get vehicle details from selected VIN
             try {
                 const vehicle = await this.lookupVehicleByVin(value);
-                if (!vehicle?.data.canSafeliteService) {
-                    this.displayNoServiceAlert = true;
-                    return;
-                }
                 if (vehicle) {
                     // save selected vehicle to the store
                     useMainStore().updateVehicle({
@@ -201,6 +187,9 @@ export default {
             try {
                 const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin);
 
+                if (!vehicleLookupResponse?.data.canSafeliteService) {
+                    this.mainStore.setBailout(bailoutMessage.HeavyTruckVehicle(this.mainStore.order.vehicle.carId));
+                }
                 useMainStore().updateVehicle({
                     ...vehicleLookupResponse.data,
                     policyVehicleId: vehicle.id,
@@ -242,6 +231,11 @@ export default {
                     {},
                     {}
                 );
+            } else if (this.mainStore.isBailout) {
+                this.$router.navigate(
+                    this.navigationScenarios.BAILOUT,
+                    this.$route
+                );
             } else if (this.endorsementsForSelectedVehicle?.length > 0
                 && (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD)
                     || this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))

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

@@ -46,18 +46,11 @@
                         :updateValues="updateStyleValues"
                         validationRules="style-required"
                         inputId="styleQuestionField" />
-                    <alert
-                        v-if="displayNoServiceAlert"
-                        ref="AlertNoService"
-                        class="mt-5"
-                        cmsWidgetName="AlertVehicleSelection"
-                        alertClass="alert-danger"
-                        :isDismissable="false" />
                     <siteFooter
                         ref="siteFooter"
                         class="mt-5"
                         cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
+                        :isForwardActionDisabled="!meta.valid"
                         @ForwardClicked="forwardButtonAction"
                         @backClicked="navigateBack" />
                 </div>
@@ -72,7 +65,6 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import vehicleQuestion from '@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue';
-import alert from '@/ux-components/alert/alert.vue';
 import { useMainStore } from '@/store';
 
 // Supporting files
@@ -97,8 +89,7 @@ export default {
         siteSubHeader,
         siteFooter,
         Form,
-        vehicleQuestion,
+        vehicleQuestion
-        alert
     },
     mixins: [baseFormMixin],
 
@@ -131,15 +122,13 @@ export default {
             selectedYear: year,
             selectedMake: make,
             selectedModel: model,
-            selectedStyle: style,
+            selectedStyle: style
-            displayNoServiceAlert: false
         };
     },
     computed: {
     },
     watch: {
         selectedYear(value) {
-            this.resetAlert();
             this.mainStore.updateVehicleYear(value);
             this.$refs.vehicleMakeQuestion.clearValues();
             if (value) {
@@ -147,7 +136,6 @@ export default {
             }
         },
         selectedMake(value) {
-            this.resetAlert();
             this.mainStore.updateVehicleMake(value);
             this.$refs.vehicleModelQuestion.clearValues();
             if (value) {
@@ -155,7 +143,6 @@ export default {
             }
         },
         selectedModel(value) {
-            this.resetAlert();
             this.mainStore.updateVehicleModel(value);
             this.$refs.vehicleStyleQuestion.clearValues();
             if (value) {
@@ -164,16 +151,7 @@ export default {
         },
         selectedStyle(value) {
             if (value) {
-                this.resetAlert();
                 this.mainStore.updateVehicleStyle(value);
-                this.mainStore.setVehicle(
-                    this.selectedYear,
-                    this.selectedMake,
-                    this.selectedModel,
-                    this.selectedStyle
-                ).then((result) => {
-                    this.displayNoServiceAlert = !result.data.canSafeliteService;
-                });
             }
         }
     },
@@ -188,16 +166,6 @@ export default {
         if (this.selectedModel) {
             this.$refs.vehicleStyleQuestion.getNewValues();
         }
-        if (this.selectedStyle) {
-            this.mainStore.setVehicle(
-                this.selectedYear,
-                this.selectedMake,
-                this.selectedModel,
-                this.selectedStyle
-            ).then((result) => {
-                this.displayNoServiceAlert = !result.data.canSafeliteService;
-            });
-        }
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -208,12 +176,23 @@ export default {
         },
 
         navigateForward() {
-            this.mainStore.setVehicle().then(() => {
+            this.mainStore.setVehicle().then((result) => {
+                if (!result.data.canSafeliteService) {
+                    this.mainStore.setBailout(bailoutMessage.HeavyTruckVehicle(this.mainStore.order.vehicle.carId));
+                }
+
+                if (this.mainStore.isBailout) {
                     this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD,
+                        this.navigationScenarios.BAILOUT,
                         this.$route
                     );
                 }
+
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.$route
+                );
+                }
             );
         },
         async updateYearValues() {

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

@@ -179,10 +179,8 @@ export default {
                     const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
 
                     if (!vehicleLookupResponse.data.canSafeliteService) {
-                        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NO_SERVICE;
+                        this.mainStore.setBailout(bailoutMessage.HeavyTruckVehicle(vehicleLookupResponse.data.carId));
                         this.resetVehicleFromLookup();
-                        this.$refs.siteFooter.disableForwardButton();
-                        showIssLoadingModal(false);
                         return;
                     }
 

src/layouts/welcome-page/welcome-page.vue

@@ -304,6 +304,7 @@ export default {
     },
     methods: {
         async forwardButtonAction() {
+            this.mainStore.resetVehicleState();
             this.mainStore.updatePolicyData(this.welcomePageModel);
 
             // We want to await this separately. It's quick and if this has an invalid zip we don't want to be waiting on the slower API calls

src/mixins/vehicle-questions-mixin.js

@@ -361,6 +361,14 @@ export default {
             const self = vm ?? this;
             const currentPage = self.$route.query.issPage;
 
+            if (self.mainStore.isBailout) {
+                self.$router.navigate(
+                    self.navigationScenarios.BAILOUT,
+                    self.$route
+                );
+                return;
+            }
+
             const hasPartQuestions = this.hasPartQuestions(partsOrQuestions);
             const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions);
             const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions);

src/router/router-constants/routing-table.js

@@ -14,6 +14,10 @@ const routingTable = () => [
             {
                 scenario: navigationScenarios.CLICKED_FORWARD,
                 destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
+            },
+            {
+                scenario: navigationScenarios.BAILOUT,
+                destinationIssPageValue: issPageValues.BAILOUT_PAGE
             }
         ]
     },