From 5e5a1ff58a98a051982947a5bd5481f1423dcfc3 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Fri, 13 Oct 2023 16:55:18 -0400
Subject: [PATCH] Make field required

---
 .../payment-method-question/payment-method-question.vue   | 2 ++
 src/layouts/payment-method/payment-method.vue             | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
index 473e36114..1544cede7 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue
+++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue
@@ -8,6 +8,7 @@
             :questionText="paymentMethodQuestionText"
             :answers="paymentMethodAnswerData"
             isRequired
+            :validationRules="validationRules"
             v-model="selectedMethod"
             textPosition="text-start" />
     </div>
@@ -27,6 +28,7 @@ export default {
     },
     props: {
         modelValue: String,
+        validationRules: String,
     },
     methods: {
         getAnswersNullSafe(widgetName) {
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 7123a9267..071af5138 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -42,7 +42,8 @@
                     <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <paymentMethodQuestion
                         v-if="!isPiaDisabled"
-                        v-model="paymentMethodInternalModel" />
+                        v-model="paymentMethodInternalModel"
+                        validationRules="option-required" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -79,8 +80,13 @@ import { paymentMethods } from "@/constants/payment-method-constants";
 import { experimentSettings } from "@/constants/experiments";
 
 import { Form } from "vee-validate";
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+
 export default {
     name: "paymentMethod",
     async beforeRouteEnter(to, from, next) {