WIP add first and last name textboxes.

src/layouts/customer-details/customer-details.vue

@@ -3,12 +3,20 @@
         <div class="page-container-grouped-styles">
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
-            <!-- <textboxQuestion
-                cmsWidgetName="FirstNameQuestionWidget"
+            <textboxQuestion
+                class="mb-4"
+                cmsWidgetName="FirstNameWidget"
                 v-model="customerModel.firstName"
                 ref="firstName"
                 inputId="08497a2efd9a4a73a70360ab47b4838d"
-                validationRules="first-name-required" /> -->
+                validationRules="first-name-required" />
+            <textboxQuestion
+                class="mb-4"
+                cmsWidgetName="LastNameWidget"
+                v-model="customerModel.lastName"
+                ref="lastName"
+                inputId="0030e56a57e74a4ab92de7fb8e97fec5"
+                validationRules="last-name-required" />
             <textboxQuestion
                 class="mb-4"
                 cmsWidgetName="emailQuestionWidget"
@@ -22,10 +30,13 @@
                 isRequired
                 validationRules="phone-number-required" />
             <textareaQuestion
-                class="mb-5"
+                class="mb-4"
                 v-model="techNotes"
                 cmsWidgetName="TextAreaContentWidget"
                 maxLength="250" />
+            <textBlock
+                cmsWidgetName="DisclaimerCopyWidget"
+                typeStyle="caption" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
@@ -43,6 +54,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import textareaQuestion from "@/digital-components/textarea-question/textarea-question";
 import phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import textBlock from "@/digital-components/text-block/text-block";
 //Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -106,10 +118,38 @@ export default {
             techNotes: "",
         };
     },
+    emits: ["update:modelValue"], // The component emits an event
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({
+                customerQuestions: {
+                    addressQuestions: {
+                        streetAddress: "",
+                        city: "",
+                        state: "",
+                        zipCode: "",
+                    },
+                    firstName: "",
+                    lastName: "",
+                    emailAddress: "",
+                },
+            }),
+        },
+        validationRules: String,
+    },
     computed: {
         textAreaLabelCopy() {
             return this.getCmsContent("TextAreaContentWidget", "QuestionText");
         },
+        customerModel: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
     },
     components: {
         funnelHeader,
@@ -119,6 +159,7 @@ export default {
         textboxQuestion,
         funnelFooter,
         Form,
+        textBlock,
     },
 };
 </script>