From 7b66329327e8ad2adb23c238a05d5ceb35005c25 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 18 Jul 2023 09:15:30 -0400
Subject: [PATCH] Add error validation to date-picker

---
 .../date-picker/date-picker.vue               | 44 +++++++++++++++++++
 src/layouts/schedule/schedule.vue             |  1 +
 2 files changed, 45 insertions(+)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index b691f575d..2f42ebd16 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -56,6 +56,9 @@
                 :class="[!isLoading ? 'date-picker-hidden' : '']"
                 loaderColor="blue"
                 loaderPosition="center" />
+            <div class="row form-test-error">
+                <ErrorMessage name="date-of-month" class="small mt-1"></ErrorMessage>
+            </div>
             <button
                 v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
                 type="button"
@@ -79,6 +82,7 @@ import {
     convertDateToDateString,
     convertDateStringToDate,
 } from "@/layouts/schedule/helpers/schedule-helper";
+import { useField, ErrorMessage } from "vee-validate";
 
 export default {
     name: "datePicker",
@@ -113,6 +117,32 @@ export default {
                 return [];
             },
         },
+        validationRules: {
+            type: String,
+            default: "",
+        },
+    },
+    setup(props) {
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue: modelValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
+            useField("date-of-month", props.validationRules, fieldOptions);
+
+        return {
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+            resetField,
+        };
     },
     computed: {
         todayString() {
@@ -639,8 +669,16 @@ export default {
             window.requestAnimationFrame(step);
         },
     },
+    watch: {
+        modelValue(newValue, oldValue) {
+            this.resetField({
+                value: newValue,
+            });
+        },
+    },
     components: {
         loader,
+        ErrorMessage,
     },
 };
 </script>
@@ -979,4 +1017,10 @@ export default {
     text-underline-offset: 4px;
     z-index: 2;
 }
+
+.form-test-error {
+    margin: 0 auto 2rem auto;
+    max-width: 414px;
+    text-align: left;
+}
 </style>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index e40dd13ba..d14a3345f 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -18,6 +18,7 @@
                 v-model="selectedDate"
                 class="text-link-small"
                 :customSelectableDatesCallback="getAvailableDatesMethod"
+                validationRules="date-required"
                 @date-clicked="openInshopTimeSlotsModal" />
             <time-slot-modal-question
                 ref="timeSlotModalQuestion"