From 355c41f8e3a8944372280107e28d7a48a2c025dc Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Tue, 2 May 2023 12:51:55 -0400
Subject: [PATCH] error styling and refactor of showing steering modal

---
 .../button-question/button-question.vue        |  4 ++--
 .../provider-pref-radio.vue                    | 18 +++++++++++++++++-
 .../provider-preference.vue                    | 18 +++++++++++-------
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 0ff3c52e..5679e96c 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -67,8 +67,8 @@
                 </div>
             </fieldset>
         </div>
-        <div v-if="!suppressError" >
-            <error-message class="row form-test-error mt-1"
+        <div v-if="!suppressError" class="row form-test-error mt-1">
+            <error-message 
                 :name="formatString(groupName)"
                 ></error-message>
         </div>
diff --git a/src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.vue b/src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.vue
index fd692a7c..ac71e229 100644
--- a/src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.vue
+++ b/src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.vue
@@ -1,6 +1,6 @@
 <template>
     <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
-        <div class="option-label mb-4"
+        <div class="option-label"
              :class="[this.buttonLabelSubCopy ? 'has-subheader' : '']"
              for="testradio">
             <div class="option-specs">
@@ -72,6 +72,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+    .option-wrapper:last-child .option-label{
+        margin-bottom: .25rem;
+    }
+
+    .option-wrapper .option-label{
+        margin-bottom: 1rem;
+    }
+
     .ml-n4 {
         margin-left: -$spacer * 2;
     }
@@ -79,6 +87,14 @@ export default {
         margin-right: $spacer * 1.5;
     }
     .option-main {
+
+        .has-error > .option-label {
+            border: 1px solid $red !important;
+            &:hover {
+                box-shadow: 0 0 0 4px $red-200 !important;
+                z-index: 5 !important;
+            }
+        }
         .option-wrapper {
             margin: 0.5rem 0;
 
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 39aa6650..7970dc6f 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -34,7 +34,7 @@
         cmsWidgetName="ShopPreferenceDrawer" 
         ref="ShopPreferenceDrawer" 
         @openSteering="openStateSteeringModal"
-        showSteeringLink=""/>
+        :showSteeringLink="showSteeringLink"/>
     
 
    
@@ -81,6 +81,7 @@ export default {
     data() {
         return {
             selectedProvider : null,
+            showSteeringLink: false
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -123,11 +124,7 @@ export default {
                 }
             ));
             return modifiedAnswers;
-        },
-        showSteeringLink() {
-            const bodyText = this.getCmsContent("StateSteeringModal", "BodyText");
-            return !!bodyText; 
-        },
+        }
     },
     methods: {
         getHeaderTextFromCms(cmsWidgetName) {
@@ -164,10 +161,17 @@ export default {
         },
         openStateSteeringModal() {
             this.$refs["StateSteeringModal"].openModal();
-        }
+        },
+        setShowSteeringLink() {
+            const bodyText = this.$refs["StateSteeringModal"]?.ModalBodyText;
+            console.log(bodyText)
+            console.log(!!bodyText)
+            this.showSteeringLink = !!bodyText; 
+        },
     },
     mounted() {
         setupModalLinks(this);
+        this.setShowSteeringLink();
         if(this.showSteeringLink) {
             this.openStateSteeringModal();
         }