WIP claim and coverage page additions.

src/digital-components/textbox-question/textbox-question.vue

@@ -46,7 +46,7 @@
                 :maxlength="maxLength ? maxLength : '999'"
                 @focus="$emit('focus', $event.target.value)"
                 @keydown="keyDownHandler" />
-            <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
+            <button v-if="includeSearchIcon" type="submit" aria-label="Search button" @click="focusSearchInput" />
             <template v-if="includeImageQuestion">
                 <template v-if="!isDisabled">
                     <label class="camera-icon-input" v-show="!isImageProcessing">
@@ -164,6 +164,10 @@ export default {
         };
     },
     methods: {
+        focusSearchInput() { //Focus cursor in input when search icon is clicked
+            const field = document.querySelector('input');
+            field.focus();
+        },
         async imageChanged(e) {
             let file = e.target.files[0];
 

src/fmg-components/funnel-header/menu-modal/menu-modal.vue

@@ -120,7 +120,7 @@ export default {
 <style lang="scss" scoped>
 .menu-modal-container {
     position: absolute;
-    padding: 1.47rem 1rem 1.47rem 1.47rem;
+    padding: 1.47rem 0 1.47rem 1.47rem;
     right: 0;
     button {
         border: none;
@@ -186,7 +186,7 @@ export default {
         }
         .menu-modal-container {
             position: absolute;
-            padding: 1.47rem 1rem 1.47rem 1.47rem;
+            padding: 1.47rem 0 1.47rem 1.47rem;
             right: 0;
             top: -5rem;
             button {

src/layouts/insurance/insurance.vue

@@ -9,111 +9,16 @@
             </div>
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
-                    <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
 
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                    <funnelSubHeader
+                    cmsWidgetName="FunnelSubHeaderWidget"
+                    class="mt-4" />
 
                     <textboxQuestion
                         class="mb-2 mt-5"
-                        cmsWidgetName="VinNumberQuestionWidget"
+                        cmsWidgetName="InsuranceCoQuestionWidget"
-                        v-model="vin"
+                        includeSearchIcon
-                        customInputId="vin"
+                        cornerStyle="rounded" />
-                        isRequired
-                        :validationRules="!vinPopulatedOnPageLoad ? 'vin-required|vin-format' : ''"
-                        :isDisabled="vinPopulatedOnPageLoad"
-                        maxLength="17"
-                        :mask="vinMask"
-                        includeImageQuestion
-                        :imageQuestionSubmitHandler="getVinFromImage"
-                        :maxFileSize="imageUploadMaxFileSize"
-                        @image-lookup-error="displayVinScanAlert"
-                        @image-validity-error="displayVinScanAlert"
-                        data-test="vin-lookup-field"
-                        ref="vinLookupQuestion" />
-
-                    <alert
-                        cmsWidgetName="AlertVinScanFailed"
-                        v-if="displayVinScanFailedAlert"
-                        alertClass="alert-danger" />
-
-                    <vinInformation class="mb-4" />
-
-                    <textboxQuestion
-                        class="mb-4"
-                        cmsWidgetName="ServiceZipQuestionWidget"
-                        v-model="serviceZipCode"
-                        customInputId="serviceZipCode"
-                        mask="#####"
-                        isRequired
-                        validationRules="zip-required|zip-format" />
-
-                    <textboxQuestion
-                        cmsWidgetName="EmailAddressQuestionWidget"
-                        v-model="emailAddress"
-                        customInputId="emailAddress"
-                        isRequired
-                        validationRules="email-address-required|email-address-format" />
-
-                    <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
-
-                    <alert
-                        ref="alertInvalidZip"
-                        v-if="displayInvalidZipAlert"
-                        class="my-4"
-                        cmsWidgetName="AlertInvalidZipWidget"
-                        alertClass="alert-danger"
-                        v-bind:isDismissible="false" />
-
-                    <alert
-                        class="my-4"
-                        :manualHeadline="AlertPerfectMatchInsuranceVerifiedHeader"
-                        :manualCopy="AlertPerfectMatchInsuranceVerifiedBody"
-                        v-model="customAlertData"
-                        v-if="
-                            vinPopulatedOnPageLoad &&
-                            isInsuranceVerified &&
-                            !displayInvalidZipAlert &&
-                            !displayNonServiceableZipAlert
-                        "
-                        alertClass="alert-success" />
-
-                    <alert
-                        class="my-4"
-                        :manualHeadline="AlertMatchedDifferentVehicleHeader"
-                        :manualCopy="AlertMatchedDifferentVehicleBody"
-                        v-model="customAlertData"
-                        v-if="displayMatchedDifferentVehicleAlert"
-                        alertClass="alert-warning" />
-
-                    <alert
-                        class="my-4"
-                        :manualHeadline="AlertNonServiceableZipHeader"
-                        :manualCopy="AlertNonServiceableZipBody"
-                        v-model="customAlertData"
-                        v-if="displayNonServiceableZipAlert"
-                        alertClass="alert-danger" />
-
-                    <alert
-                        class="my-4"
-                        v-model="customAlertData"
-                        v-if="displayVinNotFoundAlert"
-                        alertClass="alert-danger"
-                        cmsWidgetName="AlertVinNotFoundWidget" />
-
-                    <alert
-                        class="my-4"
-                        :manualHeadline="AlertPerfectMatchInsuranceNotVerifiedHeader"
-                        :manualCopy="AlertPerfectMatchInsuranceNotVerifiedBody"
-                        v-model="customAlertData"
-                        v-if="
-                            vinPopulatedOnPageLoad &&
-                            !isInsuranceVerified &&
-                            !displayInvalidZipAlert &&
-                            !displayNonServiceableZipAlert
-                        "
-                        alertClass="alert-success" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -131,12 +36,8 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
-import textBlock from "@/digital-components/text-block/text-block";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
 // Supporting files
@@ -234,17 +135,8 @@ export default {
             });
         },
         backButtonAction() {
-            if (this.$store.getters.vehicle.vin) {
+            // route to move backwards
-                this.$router.navigateWithoutSaving(
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
-                    this.navigationScenarios.CLICKED_BACK_WITH_VIN,
-                    this.$route
-                );
-            } else {
-                this.$router.navigateWithoutSaving(
-                    this.navigationScenarios.CLICKED_BACK,
-                    this.$route
-                );
-            }
         },
         async forwardButtonAction() {
             this.resetAlerts();
@@ -425,88 +317,11 @@ export default {
     mounted() {
         this.attachCustomEvents();
     },
-    computed: {
-        AlertMatchedDifferentVehicleHeader() {
-            return this.getCmsContent(
-                "AlertMatchedDifferentVehicleWidget",
-                "HeadlineText"
-            ).replaceAll("{custom:damage}", getDamageString());
-        },
-        AlertMatchedDifferentVehicleBody() {
-            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
-                .replaceAll("{custom:damage}", getDamageString())
-                .replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year)
-                .replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make)
-                .replaceAll("{custom:vinlookupModel}", this.customAlertData?.vehicleInfo?.model);
-        },
-        AlertNonServiceableZipHeader() {
-            return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll(
-                "{custom:serviceZip}",
-                this.serviceZipCode
-            );
-        },
-        AlertNonServiceableZipBody() {
-            return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
-        },
-        AlertPerfectMatchInsuranceNotVerifiedHeader() {
-            return this.getCmsContent("AlertPerfectMatchInsuranceNotVerified", "HeadlineText");
-        },
-        AlertPerfectMatchInsuranceNotVerifiedBody() {
-            return this.getCmsContent(
-                "AlertPerfectMatchInsuranceNotVerified",
-                "BodyText"
-            ).replaceAll("{custom:damage}", getDamageString());
-        },
-        AlertPerfectMatchInsuranceVerifiedHeader() {
-            return this.getCmsContent("AlertPerfectMatchInsuranceVerified", "HeadlineText");
-        },
-        AlertPerfectMatchInsuranceVerifiedBody() {
-            return this.getCmsContent("AlertPerfectMatchInsuranceVerified", "BodyText").replaceAll(
-                "{custom:damage}",
-                getIsWindshieldOnly()
-            );
-        },
-        isInsuranceVerified() {
-            return (
-                store.getters.payment.insuranceCoverage.isVerified ||
-                getFunnelCookie().HasDelayedClaimRegistration
-            );
-        },
-        vinMask() {
-            if (this.vinPopulatedOnPageLoad) {
-                const lastSixChars = this.vin.substring(11, this.vin.length);
-                return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
-            } else {
-                return "XXXXXXXXXXXXXXXXX";
-            }
-        },
-        imageUploadMaxFileSize() {
-            let kiloBytes = 5140;
-
-            return kiloBytes * 1028;
-        },
-    },
-    watch: {
-        vin() {
-            this.displayVinNotFoundAlert = false;
-            this.displayVinScanFailedAlert = false;
-            this.$refs.navbar.updateButtonText(
-                this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
-            );
-        },
-        serviceZipCode() {
-            this.displayNonServiceableZipAlert = false;
-        },
-    },
     components: {
         funnelHeader,
         navbar,
-        vehicleBanner,
         funnelSubHeader,
         textboxQuestion,
-        alert,
-        vinInformation,
-        textBlock,
         Form,
         loadingModal,
     },

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

@@ -394,6 +394,18 @@ const routingTable = function (store) {
                     destinationFmgPageValue: fmgPageValues.INSURANCE,
                 },
             ],
+        },{
+            fmgPageValue: fmgPageValues.INSURANCE,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationFmgPageValue: fmgPageValues.QUOTE,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationFmgPageValue: fmgPageValues.SCHEDULE,
+                },
+            ],
         },
         {
             fmgPageValue: fmgPageValues.SERVICE_LOCATION,