Merge branch 'develop' into feature/CSR-347

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

@@ -186,6 +186,7 @@ export default {
 				this.customerQuestions.addressQuestions.state
 			);
 
+			// Verify if the service zip code or registration zip code provided is serviceable
 			const zipValidation = this.serviceZipCode ? this.validateZip(this.serviceZipCode) : this.validateZip(this.customerQuestions.addressQuestions.zipCode);
 
 			const vinLookupResponse = await vinLookup;
@@ -198,12 +199,16 @@ export default {
 				return;
 			}
 			
-			// Validate if the original or service zip provided is serviceable
+			// if the neither the registration zip code or service zip code are not serviceable
 			this.isZipServicable = zipValidationResponse.data.isServiceable;
-			if (!this.isZipServicable) {
+			if (!this.isZipServicable) {				
 				this.displayNonServiceableZipAlert = true;
 				this.showServiceZipField = true;
 				this.$refs.funnelFooter.removeLoader();		
+			} else if (!this.serviceZipCode) {
+				// if the registration zip code is servicable and nothing was entered for the service zip code
+				// then set the service zip code to the registration zip code
+				this.serviceZipCode = this.customerQuestions.addressQuestions.zipCode;
 			} 
 
 			const carEntered = store.getters.vehicle;

src/layouts/estimate/estimate.vue

@@ -11,7 +11,7 @@
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall">
         <alert
-        class=""
+        class="vinLookupMethodHeading"
         v-model="customAlertData"
         alertClass=""
         cmsWidgetName="AlertVinLookupQuestion"
@@ -138,12 +138,12 @@ export default {
 </script>
 
 <style lang="scss">
-  .alert p{
+  .vinLookupMethodHeading p {
     font-size: 1rem;
     font-weight: 500; 
     color: $black; 
   }
-  div .current_car_info-text{
+  div .current_car_info-text {
     padding-bottom: 16px; 
   }
 </style>

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

@@ -79,13 +79,6 @@
           alertClass="alert-warning"
           cmsWidgetName="VinNotFound"
         />
-        <alert
-          class="my-3"
-          v-model="customAlertData"
-          v-if="perfectMatchNewVinAlert"
-          alertClass="alert-warning"
-          cmsWidgetName="PerfectMatchNewVinAlert"
-        />
         <alert
           class="my-3"
           :manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
@@ -94,44 +87,44 @@
           v-if="isVinFieldReadOnly"
           alertClass="alert-success"
         />
+        <alert
+          class="my-3"
+          :manualHeadline="MatchedDifferentVehicleAlertHeader"
+          :manualCopy="MatchedDifferentVehicleAlertBody"
+          v-model="customAlertData"
+          v-if="isCarIdDifferent"
+          alertClass="alert-danger"
+        />
+        <alert
+          class="my-3"
+          :manualHeadline="NoServiceZipHeader"
+          :manualCopy="NoServiceZipBody"
+          v-model="customAlertData"
+          v-if="noServiceZip"
+          alertClass="alert-warning"
+        />
+        <alert
+          class="my-3"
+          v-model="customAlertData"
+          v-if="vinNotFound"
+          alertClass="alert-warning"
+          cmsWidgetName="VinNotFound"
+        />
+        <alert
+          class="my-3"
+          v-model="customAlertData"
+          v-if="perfectMatchNewVinAlert"
+          alertClass="alert-success"
+          cmsWidgetName="PerfectMatchNewVinAlert"
+        />
+        <funnelFooter
+          cmsWidgetName="FunnelFooterWidget"
+          ref="funnelFooter"
+          :isForwardActionDisabled="!meta.valid"
+          @back-clicked="backButtonAction"
+          @ForwardClicked="forwardButtonAction"
+        />
       </div>
-      <alert
-        class="my-3"
-        :manualHeadline="MatchedDifferentVehicleAlertHeader"
-        :manualCopy="MatchedDifferentVehicleAlertBody"
-        v-model="customAlertData"
-        v-if="isCarIdDifferent"
-        alertClass="alert-danger"
-      />
-      <alert
-        class="my-3"
-        :manualHeadline="NoServiceZipHeader"
-        :manualCopy="NoServiceZipBody"
-        v-model="customAlertData"
-        v-if="noServiceZip"
-        alertClass="alert-warning"
-      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="vinNotFound"
-        alertClass="alert-warning"
-        cmsWidgetName="VinNotFound"
-      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="perfectMatchNewVinAlert"
-        alertClass="alert-success"
-        cmsWidgetName="PerfectMatchNewVinAlert"
-      />
-      <funnelFooter
-        cmsWidgetName="FunnelFooterWidget"
-        ref="funnelFooter"
-        :isForwardActionDisabled="!meta.valid"
-        @back-clicked="backButtonAction"
-        @ForwardClicked="forwardButtonAction"
-      />
     </div>
   </Form>
 </template>

src/styles/common-error-styles.scss

@@ -1,7 +1,8 @@
 html {
   .has-error {
     &.list-button,
-    &.list-card {
+    &.list-card, 
+    &.list-card.list-button {
       border: 1px solid $red;
       color: $red;
       input[type=checkbox]:focus + label,
@@ -15,6 +16,14 @@ html {
         box-shadow: 0px 0px 0px 4px $red-200;
         border-radius: 10px;
       }
+      label {
+        border: 1px solid transparent; 
+      }
+      label:hover {
+        box-shadow: 0px 0px 0px 4px $red-200;
+        border-radius: 10px;
+        border: 1px solid $red; 
+      }
     }
     &.list-button-horizontal {
       color: $red;

src/ux-components/list-button/list-button.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="list-group list-button d-flex flex-column w-100 mb-2"
+    class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
     :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
     @keyup.space="triggerButton()"
     @keyup.up="handleKeyupArrow()"