INSR-7774: Added no vin option to vehicle lookup, and some style changes

src/constants/vin-lookup-methods.js

@@ -1,7 +1,8 @@
 const vinLookupMethodSelections = Object.freeze({
     MANUALVIN: 'ManualVin',
     LICENSEPLATE: 'LicensePlate',
-    HOMEADDRESS: 'HomeAddress'
+    HOMEADDRESS: 'HomeAddress',
+    NOVIN: 'NoVin'
 });
 
 export default vinLookupMethodSelections;

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -10,8 +10,8 @@
                 <div class="vehicle-lookup-container iss-heritage-content-container-width">
                     <SiteSubHeader
                         cmsWidgetName="SiteSubHeaderWidget"
-                        class="mt-4"
+                        class="subheader mt-4"
-                        subHeaderMarginClasses="mt-1" />
+                        subHeaderMarginClasses="mt-4" />
                     <VinLookupMethods
                         ref="VinLookupMethods"
                         v-model="selectedVinLookupMethod"
@@ -23,6 +23,9 @@
                         class="mt-5"
                         @backClicked="navigateBack"
                         @forwardClicked="forwardButtonAction" />
+                    <TextBlock
+                        cmsWidgetName="SecurityTextWidget"
+                        class="security-text" />
                 </div>
             </div>
         </div>
@@ -35,6 +38,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin';
+import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
 import vinLookupMethodSelections from '@/constants/vin-lookup-methods';
 
 // Import Component
@@ -42,6 +46,7 @@ import SiteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import SiteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue';
+import TextBlock from '@/digital-components/text-block/text-block.vue';
 
 export default {
     name: 'vehicle-lookup',
@@ -51,9 +56,10 @@ export default {
         SiteFooter,
         siteHeader,
         SiteSubHeader,
-        VinLookupMethods
+        VinLookupMethods,
+        TextBlock
     },
-    mixins: [BaseFormMixin],
+    mixins: [BaseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
@@ -86,7 +92,7 @@ export default {
         arePagePrerequisiteValid() {
             return true;
         },
-        forwardButtonAction() {
+        async forwardButtonAction() {
             switch (this.selectedVinLookupMethod) {
                 case vinLookupMethodSelections.MANUALVIN:
                     this.$router.navigate(
@@ -106,6 +112,24 @@ export default {
                         this.$route
                     );
                     break;
+                case vinLookupMethodSelections.NOVIN:
+                    const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+                    if (partsOrQuestionsResponse.error) {
+                        this.mainStore.setBailout(bailoutMessage.PartsServiceError(partsOrQuestionsResponse.error.data));
+                        window.console.error('Error on retrieving PartsOrQuestions');
+                        this.hasBailedOut = true;
+                        this.$router.navigate(
+                            this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+                            this.$route
+                        );
+                    }
+                    else {
+                        await this.navigateForward(
+                            partsOrQuestionsResponse.data.partsOrQuestions,
+                            this
+                        );
+                    }
+                    break;
                 default:
                     break;
             }
@@ -124,5 +148,23 @@ export default {
         padding-right: .9375rem;
     }
 }
-
+.subheader {
+    :deep(.all-caps) {
+        text-transform: uppercase;
+    }
+    :deep(.subheader-secondary>p) {
+        margin-bottom: 0;
+    }
+}
+.security-text {
+    text-align: center;
+    margin-bottom: 1.5rem;
+    :deep(a) {
+        font-weight: $font-weight-normal;
+        color: $heritage-blue-primary;
+        &:hover {
+            color: #125b7e;
+        }
+    }
+}
 </style>

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

@@ -1,11 +1,11 @@
 <template>
   <ButtonQuestion
+    class="vin-lookup-methods-question"
     v-model="selectedValue"
     :answers="answersFromCms"
     groupName="VinLookupMethodsOption"
     buttonTypeString="listButton"
     :questionText="questionTextFromCms"
-    :questionTextClasses="['text-center']"
     isRequired
     :validationRules="rules.optionRequired"
     data-test-id="vin-lookup-methods-button-question" />
@@ -83,3 +83,18 @@ export default {
     }
 };
 </script>
+<style lang="scss" scoped>
+.vin-lookup-methods-question {
+    :deep(.question-text) {
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+    }
+    :deep(.list-button) {
+        .list-button-content,
+        input[type="radio"]:checked + .list-button-content {
+            color: $black;
+            font-weight: $font-weight-semibold;
+        }
+    }
+}
+</style>

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

@@ -80,6 +80,26 @@ const routingTable = () => [
             {
                 scenario: navigationScenarios.SELECTED_HOME_ADDRESS,
                 destinationIssPageValue: issPageValues.ADDRESS_LOOKUP
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_PART_QUESTIONS,
+                destinationIssPageValue: issPageValues.PART_QUESTIONS
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
+                destinationIssPageValue: issPageValues.VEHICLE_PARTS
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
+                destinationIssPageValue: issPageValues.MOLDING_QUESTIONS
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
+                destinationIssPageValue: issPageValues.CAPABILITY_QUESTIONS
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
+                destinationIssPageValue: issPageValues.COVERAGE_STATEMENT
             }
         ]
     },