Merge pull request #727 from Safelite/bug/brydon/SSR-1304

Bug/brydon/ssr 1304

src/iss-components/site-footer/site-footer.vue

@@ -1,6 +1,8 @@
 <template>
     <div>
-        <footer id="infoBox" class="footer container-fluid g-5 my-5 px-0">
+        <footer
+id="infoBox"
+class="footer container-fluid g-5 my-5 px-0">
             <div
                 class="row d-flex vw-100 mx-0"
                 :class="[
@@ -8,7 +10,9 @@
                         ? 'flex-column align-items-stretch'
                         : 'flex-row-reverse align-items-center',
                 ]">
-                <div id="stacked" class="col button-col d-flex px-0">
+                <div
+id="stacked"
+class="col button-col d-flex px-0">
                     <buttonMain
                         v-if="!isForwardButtonHidden"
                         ref="buttonMain"
@@ -19,8 +23,8 @@
                             (disableForwardAction || isForwardActionDisabled) &&
                             'form-test-invalid'
                         "
-                        :aria-disabled="isForwardActionDisabled"
-                        :isDisabled="isForwardActionDisabled"
+                        :aria-disabled="disableForwardAction || isForwardActionDisabled"
+                        :isDisabled="disableForwardAction || isForwardActionDisabled"
                         data-bs-target="#footerModal"
                         data-bs-dismiss="modal"
                         data-test-id="site-footer-main-button"
@@ -52,21 +56,21 @@ export default {
     name: 'site-footer',
     components: {
         textLink,
-        buttonMain,
+        buttonMain
     },
     props: {
         isForwardActionDisabled: Boolean,
         isBackButtonHidden: { type: Boolean, default: false },
         isForwardButtonHidden: { type: Boolean, default: false },
         cmsWidgetName: String,
-        isStackedVertically: { type: Boolean, default: false },
+        isStackedVertically: { type: Boolean, default: false }
     },
     emits: ['backClicked', 'forwardClicked'],
     data() {
         return {
             paddingHeight: 0,
             customButtontext: '',
-            disableForwardAction: false,
+            disableForwardAction: false
         };
     },
     computed: {
@@ -88,7 +92,7 @@ export default {
         includeFooterImage() {
             const currentPageName = this.getPageNameByQueryString();
             return currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE;
-        },
+        }
     },
     mounted() {
         this.paddingHeight = this.includeFooterImage
@@ -128,8 +132,8 @@ export default {
         },
         enableForwardAction() {
             this.disableForwardAction = false;
-        },
-    },
+        }
+    }
 };
 </script>
 

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -99,7 +99,7 @@ function setupMocks({
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
     wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
-    wrapper.vm.$refs.siteFooter.enableForwardButton = jest.fn();
+    wrapper.vm.$refs.siteFooter.enableForwardAction = jest.fn();
 
     return { wrapper };
 }

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

@@ -16,7 +16,10 @@
                         class="mt-2 mb-4"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
-                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                    <siteSubHeader
+                        cmsWidgetName="SiteSubHeaderWidget"
+                        class="mb-5"
+                        subHeaderMarginClasses="mt-1" />
                     <alert
                         v-if="displayVinNotFoundAlert"
                         ref="alertVinNotFound"
@@ -83,7 +86,7 @@ import { required } from '@/helpers/validation-rules';
 import { defineRule, Form } from 'vee-validate';
 import {
     getDamageString,
-    isGlassAvailableForCarId,
+    isGlassAvailableForCarId
 } from '@/helpers/damage-helper.js';
 import routerParams from '@/router/router-constants/router-params.js';
 import states from '@/constants/states';
@@ -118,7 +121,7 @@ export default {
         vehicleBanner,
         textboxQuestion,
         dropdownQuestion,
-        alert,
+        alert
     },
     mixins: [baseFormMixin, vinPagesMixin],
     async beforeRouteEnter(to, from, next) {
@@ -129,8 +132,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise,
-            },
+                promise: cmsContentPromise
+            }
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -153,7 +156,7 @@ export default {
             isCarIdDifferent: false,
             customAlertData: {},
             isSelectedGlassAvailableForVehicle: true,
-            forwardButtonCarStyle: '',
+            forwardButtonCarStyle: ''
         };
     },
     computed: {
@@ -209,20 +212,17 @@ export default {
         stateOptions: {
             get() {
                 return states;
-            },
-        },
+            }
+        }
     },
     watch: {
         licensePlate() {
-            this.$refs.siteFooter.updateButtonText(
-                this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
-            );
+            this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
+            this.$refs.siteFooter.enableForwardAction();
         },
         registrationZipCode() {
-            this.$refs.siteFooter.updateButtonText(
-                this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
-            );
-        },
+            this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
+        }
     },
     mounted() {
         this.attachCustomEvents();
@@ -260,8 +260,8 @@ export default {
             const promiseResultMap = [
                 {
                     resultKey: 'vinLookupResponse',
-                    promise: vinLookupResponse,
-                },
+                    promise: vinLookupResponse
+                }
             ];
 
             const resultMap = await settleAllPromises(promiseResultMap);
@@ -281,8 +281,8 @@ export default {
                 vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
             // Handle changing car
             if (
-                this.isCarIdDifferent &&
-                vehicleFromLookup.carId !== this.previouslyEnteredCarId
+                this.isCarIdDifferent
+                && vehicleFromLookup.carId !== this.previouslyEnteredCarId
             ) {
                 // Display Alert
                 this.previouslyEnteredCarId = vehicleFromLookup.carId;
@@ -301,9 +301,7 @@ export default {
                 // Update button "Continue with..."
                 this.$refs.siteFooter
                     // eslint-disable-next-line max-len
-                    .updateButtonText(
-                        `Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`
-                    );
+                    .updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
                 return this.$refs.siteFooter.removeLoader();
             }
 
@@ -313,12 +311,12 @@ export default {
                     isSelectedGlassAvailableForVehicle:
                         this.isSelectedGlassAvailableForVehicle,
                     vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, {
-                        vin: vinLookupResponse.data.vin,
+                        vin: vinLookupResponse.data.vin
                     }),
                     registrationInfo: {
                         licensePlate: this.licensePlate,
-                        state: this.licenseState,
-                    },
+                        state: this.licenseState
+                    }
                 },
                 false
             );
@@ -330,8 +328,8 @@ export default {
             // not available for that vehicle then navigate back to "vehicle-damage"
             // display vehicle changed alert on that page.
             if (
-                this.isCarIdDifferent &&
-                !this.isSelectedGlassAvailableForVehicle
+                this.isCarIdDifferent
+                && !this.isSelectedGlassAvailableForVehicle
             ) {
                 this.$router.navigate(
                     this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
@@ -346,8 +344,8 @@ export default {
         resetWarningsAndErrors() {
             this.displayVinNotFoundAlert = false;
             this.displayMatchedDifferentVehicleAlert = false;
-        },
-    },
+        }
+    }
 };
 </script>