WIP add to customer-details page.

src/constants/error-messages.js

@@ -27,6 +27,8 @@ const errorMessages = {
     VEHICLE_REQUIRED: "Please select a vehicle",
     MOBILE_LOCATION_REQUIRED: "Please enter your service address",
     DATE_REQUIRED: "Please select a date",
+    PHONE_REQUIRED: "Please enter your phone number",
+    PHONE_FORMAT: "Phone number must be 10 digits",
 };
 
 export { errorMessages };

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

@@ -1,24 +1,33 @@
 <template>
     <div class="phonenumber-question d-flex flex-column">
-        <label for="phone" class="mb-1 fw-bold">Phone Number:</label>
+        <label for="phone-number" class="mb-1 fw-bold" v-html="phoneNumberQuestionWidget"></label>
         <input
-        class="form-control"
+            class="form-control"
-        id="phone"
+            id="phone-number"
-        v-model="phoneNumber"
+            v-model="phoneNumber"
-        @input="formatPhoneNumber"
+            @input="formatPhoneNumber"
-        @blur="validatePhoneNumber"
+            :maxlength="phoneNumberMaxLength"
-        :maxlength="phoneNumberMaxLength"
+            pattern="[0-9\-]+"
-        pattern="[0-9\-]+"
+            :aria-required="isRequired"
-        :aria-required="isRequired"
+            :validationRules="validationRules" />
-        >
+        <div v-show="errorMessage" class="row my-1 form-test-error">
+            <span
+                class="d-inline-flex small mt-0"
+                role="alert"
+                :class="[centerErrorMessage ? 'center-error-message' : '']"
+                >{{ errorMessage }}</span
+            >
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-    name: "phonenumberquestion",
+    name: "phoneNumberQuestion",
     props: {
-        isRequired: Boolean
+        cmsWidgetName: String,
+        isRequired: Boolean,
+        validationRules: String,
     },
     setup(props) {
         const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
@@ -29,11 +38,11 @@ export default {
 
         switch (typeof modelValue) {
             case "number":
-            initialValue = modelValue;
+                initialValue = modelValue;
-            break;
+                break;
             default:
-            initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
+                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
-            break;
+                break;
         }
 
         const fieldOptions = {
@@ -44,62 +53,62 @@ export default {
     },
     data() {
         return {
-            phoneNumber: '',
+            phoneNumber: "",
             phoneNumberMaxLength: 12,
         };
     },
+    computed: {
+        phoneNumberQuestionWidget() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+    },
     methods: {
         formatPhoneNumber() {
             // Remove all non-digit characters from the phone number
-            let formattedNumber = this.phoneNumber.replace(/\D/g, '');
+            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);
+                formattedNumber = formattedNumber.slice(0, 3) + "-" + formattedNumber.slice(3);
             }
             if (formattedNumber.length > 7) {
-                formattedNumber = formattedNumber.slice(0, 7) + '-' + formattedNumber.slice(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');
+            const inputElement = document.getElementById("phone-number");
-            inputElement.addEventListener('keydown', (event) => {
+            inputElement.addEventListener("keydown", (event) => {
-                if (inputElement.selectionStart === 0 && event.key === '1') {
+                if (inputElement.selectionStart === 0 && event.key === "1") {
                     event.preventDefault();
                 }
             });
         });
-    }
+    },
 };
 </script>
 
 <style lang="scss">
-    .phonenumber-question {
+.phonenumber-question {
-        label {
+    label {
-            color: $black;
+        color: $black;
+    }
+    input {
+        border-radius: 0.5rem;
+        border: 1px solid $gray-500;
+        height: 48px;
+        &:hover {
+            box-shadow: 0 0 0 4px #9fcee6;
         }
-        input {
+        &:focus {
-            border-radius: 0.5rem;
+            box-shadow: 0 0 0 2.5px $blue;
-            border: 1px solid $gray-550;
+            outline: none;
-            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

@@ -27,7 +27,7 @@
 
 <script>
 export default {
-    name: "textareaquestion",
+    name: "textareaQuestion",
     props: {
         cmsWidgetName: String,
         isRequired: Boolean,
@@ -107,7 +107,7 @@ export default {
     }
     textarea {
         border-radius: 0.5rem;
-        border: 1px solid $gray-550;
+        border: 1px solid $gray-500;
         height: 88px;
         &:hover {
             box-shadow: 0 0 0 4px #9fcee6;

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

@@ -1,22 +1,70 @@
 <template>
-    <textareaquestion
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        v-model="techNotes"
+        <div class="page-container-grouped-styles">
-        cmsWidgetName="TextAreaContentWidget"
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-        maxLength="250" />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
-
+            <!-- <textboxQuestion
-    <phonenumberquestion
+                cmsWidgetName="FirstNameQuestionWidget"
-        v-model="phoneNumber"
+                v-model="customerModel.firstName"
-        isRequired />
+                ref="firstName"
+                inputId="08497a2efd9a4a73a70360ab47b4838d"
+                validationRules="first-name-required" /> -->
+            <textboxQuestion
+                class="mb-4"
+                cmsWidgetName="emailQuestionWidget"
+                v-model="email"
+                inputId="email"
+                validationRules="email-address-required|email-address-format" />
+            <phoneNumberQuestion
+                cmsWidgetName="phoneNumberQuestionWidget"
+                class="mb-4"
+                v-model="phoneNumber"
+                isRequired
+                validationRules="phone-number-required" />
+            <textareaQuestion
+                class="mb-5"
+                v-model="techNotes"
+                cmsWidgetName="TextAreaContentWidget"
+                maxLength="250" />
+            <funnel-footer
+                cmsWidgetName="FunnelFooterWidget"
+                ref="funnelFooter"
+                :isForwardActionDisabled="!meta.valid"
+                @back-clicked="backButtonAction"
+                @ForwardClicked="forwardButtonAction" />
+        </div>
+    </Form>
 </template>
 
 <script>
-import textareaquestion from "@/digital-components/textarea-question/textarea-question";
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import phonenumberquestion from "@/digital-components/phonenumber-question/phonenumber-question";
+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";
+//Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
+import { errorMessages } from "@/constants/error-messages";
 import { routerParams } from "@/router/router-constants/router-params";
-import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
+import { required, regex } from "@/helpers/validation-rules";
+import { Form, defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+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("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(
+    "email-address-format",
+    regex(
+        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
+        errorMessages.EMAIL_ADDRESS_FORMAT
+    )
+);
+
 export default {
     name: "customer-details",
     async beforeRouteEnter(to, from, next) {
@@ -49,8 +97,13 @@ export default {
         },
     },
     components: {
-        textareaquestion,
+        funnelHeader,
-        phonenumberquestion,
+        funnelSubHeader,
+        textareaQuestion,
+        phoneNumberQuestion,
+        textboxQuestion,
+        funnelFooter,
+        Form,
     },
 };
 </script>