WIP add phonenumber-question.

src/digital-components/phonenumber-question/phonenumber-question.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

src/digital-components/phonenumber-question/phonenumber-question.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="phonenumber-question d-flex flex-column">
+        <label for="phone" class="mb-1 fw-bold">Phone Number:</label>
+        <input
+        class="form-control"
+        id="phone"
+        v-model="phoneNumber"
+        @input="formatPhoneNumber"
+        @blur="validatePhoneNumber"
+        :maxlength="phoneNumberMaxLength"
+        pattern="[0-9\-]+"
+        :aria-required="isRequired"
+        >
+    </div>
+</template>
+
+<script>
+export default {
+    name: "phonenumberquestion",
+    props: {
+        isRequired: Boolean
+    },
+    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,
+        };
+    },
+    data() {
+        return {
+            phoneNumber: '',
+            phoneNumberMaxLength: 12,
+        };
+    },
+    methods: {
+        formatPhoneNumber() {
+            // Remove all non-digit characters from the phone number
+            let formattedNumber = this.phoneNumber.replace(/\D/g, '');
+
+            // Insert hyphens after the first three and the next three digits
+            if (formattedNumber.length > 3) {
+                formattedNumber = formattedNumber.slice(0, 3) + '-' + formattedNumber.slice(3);
+            }
+            if (formattedNumber.length > 7) {
+                formattedNumber = formattedNumber.slice(0, 7) + '-' + formattedNumber.slice(7);
+            }
+
+            // Update the phone number with the formatted version
+            this.phoneNumber = formattedNumber;
+        },
+        validatePhoneNumber() {
+            if (this.phoneNumber.length !== this.phoneNumberMaxLength) {
+                alert('Phone number must be 10 digits');
+            }
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            // Prevent "1" as the first number
+            const inputElement = document.getElementById('phone');
+            inputElement.addEventListener('keydown', (event) => {
+                if (inputElement.selectionStart === 0 && event.key === '1') {
+                    event.preventDefault();
+                }
+            });
+        });
+    }
+};
+</script>
+
+<style lang="scss">
+    .phonenumber-question {
+        label {
+            color: $black;
+        }
+        input {
+            border-radius: 0.5rem;
+            border: 1px solid $gray-550;
+            height: 48px;
+            &:hover {
+                box-shadow: 0 0 0 4px #9fcee6;
+            }
+            &:focus {
+                box-shadow: 0 0 0 2.5px $blue;
+                outline: none;
+            }
+        }
+    }
+</style>

src/digital-components/textarea-question/textarea-question.vue

@@ -93,6 +93,9 @@ export default {
 .textarea-question {
     display: flex;
     flex-direction: column;
+    label {
+        color: $black;
+    }
     .label-wrapper {
         display: flex;
         align-items: center;

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

@@ -1,9 +1,17 @@
 <template>
-    <textareaquestion v-model="techNotes" cmsWidgetName="TextAreaContentWidget" maxLength="250" />
+    <textareaquestion
+        v-model="techNotes"
+        cmsWidgetName="TextAreaContentWidget"
+        maxLength="250" />
+
+    <phonenumberquestion
+        v-model="phoneNumber"
+        isRequired />
 </template>
 
 <script>
 import textareaquestion from "@/digital-components/textarea-question/textarea-question";
+import phonenumberquestion from "@/digital-components/phonenumber-question/phonenumber-question";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
@@ -11,9 +19,6 @@ import { routerParams } from "@/router/router-constants/router-params";
 import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
 export default {
     name: "customer-details",
-    components: {
-        textareaquestion,
-    },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@@ -43,5 +48,9 @@ export default {
             return this.getCmsContent("TextAreaContentWidget", "QuestionText");
         },
     },
+    components: {
+        textareaquestion,
+        phonenumberquestion,
+    },
 };
 </script>