From 183e183987093317e0582acdb4cea6a25522990a Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 15 Aug 2023 16:40:45 -0400
Subject: [PATCH] Add form validation

---
 .../customer-details-modal-question.spec.js   |  2 +-
 .../customer-details-modal-question.vue       | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.spec.js b/src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.spec.js
index 0368effff..a8e0a6f7b 100644
--- a/src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.spec.js
+++ b/src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.spec.js
@@ -14,7 +14,7 @@ const testConstants = {
     newValues: {
         firstName: "New First",
         lastName: "New Last",
-        emailAddress: "builddigitaltest@safelite.com - new",
+        emailAddress: "builddigitaltest2@safelite.com",
         phoneNumber: "222-222-2222",
         isSmsOptIn: true,
     },
diff --git a/src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.vue b/src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.vue
index 3ce86e39b..0b08abee7 100644
--- a/src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.vue
+++ b/src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.vue
@@ -16,28 +16,28 @@
                         v-model="firstName"
                         ref="firstName"
                         customInputId="firstName"
-                        validation-rules="" />
+                        validation-rules="first-name-required" />
                     <textboxQuestion
                         class="mb-4"
                         cmsWidgetName="CustomerLastNameWidget"
                         v-model="lastName"
                         ref="lastName"
                         customInputId="lastName"
-                        validation-rules="" />
+                        validation-rules="last-name-required" />
                     <textboxQuestion
                         class="mb-4"
                         cmsWidgetName="CustomerEmailWidget"
                         v-model="emailAddress"
                         ref="emailAddress"
                         customInputId="emailAddress"
-                        validation-rules="" />
+                        validation-rules="email-address-required|email-address-format" />
                     <phoneNumberQuestion
                         class="mb-4"
                         cmsWidgetName="CustomerPhoneWidget"
                         v-model="phoneNumber"
                         ref="phoneNumber"
                         isRequired
-                        validation-rules="" />
+                        validation-rules="phone-number-required" />
                     <checkboxQuestion
                         class="mb-5"
                         cmsWidgetName="CustomerTextMeWidget"
@@ -55,6 +55,22 @@ import textboxQuestion from "@/digital-components/textbox-question/textbox-quest
 import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
 import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
 import textBlock from "@/digital-components/text-block/text-block";
+import { errorMessages } from "@/constants/error-messages";
+import { required, regex } from "@/helpers/validation-rules";
+import { 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-modal-question",