From 8e98b62b2e421dd32ae640a7281797bc9ff1f96a Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 30 May 2023 15:07:51 -0400
Subject: [PATCH] WIP update countdown color, add text update checkbox.

---
 .../textarea-question/textarea-question.vue        | 12 +++++++-----
 src/layouts/customer-details/customer-details.vue  | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/digital-components/textarea-question/textarea-question.vue b/src/digital-components/textarea-question/textarea-question.vue
index 4e26ff048..b5bbbf89f 100644
--- a/src/digital-components/textarea-question/textarea-question.vue
+++ b/src/digital-components/textarea-question/textarea-question.vue
@@ -19,7 +19,7 @@
             tabindex="0"
             class="caption mt-2 mb-0"
             id="charactersremaining"
-            :style="{ color: countdownColor }">
+            :class="[urgentCountdown ? 'urgent-countdown' : '']">
             {{ remainingCount }}/{{ maxLength }} characters remaining
         </p>
     </div>
@@ -74,10 +74,9 @@ export default {
         remainingCount() {
             return this.maxLength - this.value.length;
         },
-        countdownColor() {
-            // Chanage text color to red when 10% of max remain
-            return this.remainingCount <= this.maxLength * 0.1 ? "red" : "";
-        },
+        urgentCountdown() {
+            return this.remainingCount <= this.maxLength * 0.1 ? true : false;
+        }
     },
     methods: {
         updateCount() {
@@ -119,6 +118,9 @@ export default {
     }
     p {
         color: $gray-500;
+        &.urgent-countdown {
+            color: $red;
+        }
     }
 }
 </style>
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 4ee30eb66..73ea57153 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -28,8 +28,12 @@
                 cmsWidgetName="phoneNumberQuestionWidget"
                 v-model="phoneNumber"
                 isRequired
-                validationRules="phone-number-required"
-                 />
+                validationRules="phone-number-required" />
+            <checkbox
+                class="mb-5"
+                cmsWidgetName="TextMeQuestionWidget"
+                :checkboxLabel="checkboxLabelCopy"
+                v-model="textMeUpdates"/>
             <textareaQuestion
                 class="mb-4"
                 v-model="techNotes"
@@ -54,6 +58,7 @@ import textareaQuestion from "@/digital-components/textarea-question/textarea-qu
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 import phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question";
 import textBlock from "@/digital-components/text-block/text-block";
+import checkbox from "@/ux-components/checkbox/checkbox";
 //Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -105,12 +110,16 @@ export default {
             lastName: "",
             emailAddress: "",
             phoneNumber: "",
+            textMeUpdates: "",
         };
     },
     computed: {
         textAreaLabelCopy() {
             return this.getCmsContent("TextAreaContentWidget", "QuestionText");
         },
+        checkboxLabelCopy() {
+            return this.getCmsContent("TextMeQuestionWidget", "QuestionText");
+        },
     },
     components: {
         funnelHeader,
@@ -121,6 +130,7 @@ export default {
         Form,
         textBlock,
         phoneNumberQuestion,
+        checkbox
     },
 };
 </script>