From 10d0f24f5a9ac7379c5fb59d170e66d514ecbd67 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 9 May 2023 15:14:06 -0400
Subject: [PATCH] WIP update computed and other code.

---
 .../textarea-question/textarea-question.vue   | 57 +++++++++++++++++--
 .../customer-details/customer-details.vue     |  2 +-
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/digital-components/textarea-question/textarea-question.vue b/src/digital-components/textarea-question/textarea-question.vue
index ffea9a713..fbe0e1f78 100644
--- a/src/digital-components/textarea-question/textarea-question.vue
+++ b/src/digital-components/textarea-question/textarea-question.vue
@@ -1,6 +1,8 @@
 <template>
     <div class="textarea-question">
-        <label for="textarea-comments" class="fw-bold mb-1">{{ labelText }} <span v-if="isRequired" class="fw-normal">(Optional)</span></label>
+        <div class="label-wrapper mb-1" :aria-label="TextAreaContentWidget"><!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
+            <label for="textarea-comments" class="fw-bold" v-html="TextAreaContentWidget"></label> <span v-if="isRequired" class="fw-normal ms-1">(Optional)</span>
+        </div>
         <textarea
             id="textarea-comments"
             class="p-4"
@@ -25,6 +27,49 @@ export default {
         modelValue: String,
         labelText: String,
     },
+    setup(props) {
+        const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
+
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+        let initialValue;
+
+        switch (typeof modelValue) {
+            case "number":
+                initialValue = modelValue;
+                break;
+            default:
+                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
+                break;
+        }
+
+        const fieldOptions = {
+            type: "text",
+            value: modelValue,
+            initialValue: initialValue,
+        };
+    },
+    computed: {
+        TextAreaContentWidget() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    value: {
+        get: function () {
+            return this.modelValue;
+        },
+        set: function (newValue) {
+            this.$emit("update:modelValue", newValue);
+        },
+    },
     mounted: function () {
         const my_textarea = document.getElementById("textarea-comments");
         const remaining = document.getElementById("charactersremaining");
@@ -44,9 +89,13 @@ export default {
 .textarea-question {
     display: flex;
     flex-direction: column;
-    label {
-        span {
-            color: $gray-500;
+    .label-wrapper {
+        display: flex;
+        align-items: center;
+        label {
+            span {
+                color: $gray-500;
+            }
         }
     }
     textarea {
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 1f77f2f1c..61cad4e20 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -1,6 +1,6 @@
 <template>
     <textareaquestion
-        cmsWidgetName="CustomerDetailsTextAreaLabelText"
+        cmsWidgetName="TextAreaContentWidget"
         :labelText="textAreaLabelCopy"
         maxLength=250
         isRequired