CSR-1357 tech review updates.

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

@@ -5,7 +5,16 @@
             (errors && errors.length) || hasError ? 'has-error' : '',
             hideInput ? 'hide-input' : '',
         ]">
-        <label for="phone-number" class="mb-1 fw-bold" v-html="phoneNumberQuestionWidget"></label>
+        <textboxQuestion
+            maxLength="12"
+            v-model="selectedValue"
+            :isRequired="isRequired"
+            :validationRules="validationRules"
+            pattern="[0-9\-]+"
+            :keyDownHandler="onKeyDown"
+            cmsWidgetName="phoneNumberQuestionWidget"
+         />
+        <!-- <label for="phone-number" class="mb-1 fw-bold" v-html="phoneNumberQuestionWidget"></label>
         <input
             class="form-control"
             id="phone-number"
@@ -17,7 +26,7 @@
             :maxlength="phoneNumberMaxLength"
             pattern="[0-9\-]+"
             :aria-required="isRequired"
-            :validationRules="validationRules" />
+            :validationRules="validationRules" /> -->
         <div v-show="errorMessage" class="row my-1 form-test-error">
             <span
                 class="d-inline-flex small mt-0"
@@ -30,7 +39,17 @@
 </template>
 
 <script>
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+//Supporting files
+import { errorMessages } from "@/constants/error-messages";
+import { required, regex } from "@/helpers/validation-rules";
+import { Form, defineRule } from "vee-validate";
 import { useField, validate } from "vee-validate";
+//Validation
+defineRule(
+    "phone-number-format",
+    regex(/^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/, errorMessages.PHONE_FORMAT)
+);
 export default {
     name: "phoneNumberQuestion",
     props: {
@@ -39,6 +58,7 @@ export default {
         validationRules: String,
         hasError: Boolean,
         centerErrorMessage: Boolean,
+        modelValue: String,
     },
     setup(props) {
         const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
@@ -80,7 +100,6 @@ export default {
     },
     data() {
         return {
-            phoneNumber: "",
             phoneNumberMaxLength: 12,
         };
     },
@@ -88,11 +107,20 @@ export default {
         phoneNumberQuestionWidget() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                const formattedNumber = this.formatPhoneNumber(newValue);
+                this.$emit("update:modelValue", formattedNumber);
+            },
+        },
     },
     methods: {
-        formatPhoneNumber() {
+        formatPhoneNumber(value) {
             // Remove all non-digit characters from the phone number
-            let formattedNumber = this.phoneNumber.replace(/\D/g, "");
+            let formattedNumber = value.replace(/\D/g, "");
 
             // Insert hyphens after the first three and the next three digits
             if (formattedNumber.length > 3) {
@@ -103,19 +131,14 @@ export default {
             }
 
             // Update the phone number with the formatted version
-            this.phoneNumber = formattedNumber;
+            return formattedNumber;
         },
-    },
-    mounted() {
-        this.$nextTick(() => {
-            // Prevent "1" as the first number
-            const inputElement = document.getElementById("phone-number");
-            inputElement.addEventListener("keydown", (event) => {
-                if (inputElement.selectionStart === 0 && event.key === "1") {
-                    event.preventDefault();
-                }
-            });
-        });
+        onKeyDown(event) {
+            if (this.selectedValue.length === 0 && event.key === "1") {
+                event.preventDefault();
+            }
+            this.formatPhoneNumber(event.target.value + event.key);
+        }
     },
     watch: {
         async value(newValue) {
@@ -125,6 +148,9 @@ export default {
             }
         },
     },
+    components: {
+        textboxQuestion
+    }
 };
 </script>
 

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

@@ -44,7 +44,8 @@
                 @change="handleChange"
                 @blur="handleChange"
                 :maxlength="maxLength ? maxLength : '999'"
-                @focus="$emit('focus', $event.target.value)" />
+                @focus="$emit('focus', $event.target.value)"
+                @keydown="keyDownHandler"/>
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
             <template v-if="includeImageQuestion">
                 <template v-if="!isDisabled">
@@ -118,6 +119,7 @@ export default {
         maxFileSize: Number,
         hideInput: Boolean,
         centerErrorMessage: Boolean,
+        keyDownHandler: Function,
     },
     setup(props) {
         const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;

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

@@ -6,28 +6,30 @@
             <textboxQuestion
                 class="mb-4"
                 cmsWidgetName="FirstNameWidget"
-                v-model="customerModel.firstName"
+                v-model="firstName"
                 ref="firstName"
                 inputId="08497a2efd9a4a73a70360ab47b4838d"
                 validationRules="first-name-required" />
             <textboxQuestion
                 class="mb-4"
                 cmsWidgetName="LastNameWidget"
-                v-model="customerModel.lastName"
+                v-model="lastName"
                 ref="lastName"
                 inputId="0030e56a57e74a4ab92de7fb8e97fec5"
                 validationRules="last-name-required" />
             <textboxQuestion
                 class="mb-4"
                 cmsWidgetName="emailQuestionWidget"
-                v-model="customerModel.emailAddress"
+                v-model="emailAddress"
                 inputId="email"
                 validationRules="email-address-required|email-address-format" />
             <phoneNumberQuestion
-                cmsWidgetName="phoneNumberQuestionWidget"
                 class="mb-4"
-                v-model="customerModel.phoneNumber"
+                cmsWidgetName="phoneNumberQuestionWidget"
+                v-model="phoneNumber"
+                inputId="phone"
                 isRequired
+                maxLength="12"
                 validationRules="phone-number-required|phone-number-format" />
             <textareaQuestion
                 class="mb-4"
@@ -50,8 +52,8 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 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 phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question";
 import textBlock from "@/digital-components/text-block/text-block";
 //Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -67,10 +69,6 @@ import { useField, validate } from "vee-validate";
 defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
 defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
 defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
-defineRule(
-    "phone-number-format",
-    regex(/^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/, errorMessages.PHONE_FORMAT)
-);
 defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
 defineRule(
     "email-address-format",
@@ -104,45 +102,26 @@ export default {
     data() {
         return {
             techNotes: "",
+            firstName: "",
+            lastName: "",
+            emailAddress: "",
+            phoneNumber: "",
         };
     },
-    emits: ["update:modelValue"], // The component emits an event
-    props: {
-        modelValue: {
-            type: Object,
-            default: () => ({
-                customerQuestions: {
-                    firstName: "",
-                    lastName: "",
-                    emailAddress: "",
-                    phoneNumber: "",
-                },
-            }),
-        },
-        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,
         funnelSubHeader,
         textareaQuestion,
-        phoneNumberQuestion,
         textboxQuestion,
         funnelFooter,
         Form,
         textBlock,
+        phoneNumberQuestion,
     },
 };
 </script>