Merge branch 'release/2023.07.27' into defect/CSR-1510

src/digital-components/date-picker/date-picker.vue

@@ -56,15 +56,19 @@
                 :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"
+                class="btn btn-link"
+                id="viewMoreDates"
+                :disabled="isLoading"
+                @click="showAnotherMonth">
+                View more dates
+            </button>
         </fieldset>
-        <button
-            v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
-            type="button"
-            class="btn btn-link"
-            :disabled="isLoading"
-            @click="showAnotherMonth">
-            View more dates
-        </button>
     </div>
 </template>
 
@@ -78,6 +82,7 @@ import {
     convertDateToDateString,
     convertDateStringToDate,
 } from "@/layouts/schedule/helpers/schedule-helper";
+import { useField, ErrorMessage } from "vee-validate";
 
 export default {
     name: "datePicker",
@@ -112,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() {
@@ -615,41 +646,39 @@ export default {
                 });
             });
         },
-        scrollToElement(elementId, speed, easing) {
+        scrollToElement(elementId, duration = 800, easing = "ease-in-out") {
-            // TODO - needs to be cleaned up & refactored
+            const wrapper = document.querySelector(".page-container-grouped-styles");
-            function scrollTopSmooth(wrapper, target, duration = 300, timingName = "linear") {
+            const target = document.getElementById(elementId);
-                const initY = wrapper.scrollTop;
+            const initY = wrapper.scrollTop;
-                const wrapperRect = wrapper.getBoundingClientRect();
+            const wrapperRect = wrapper.getBoundingClientRect();
-                const targetRect = target.getBoundingClientRect();
+            const targetRect = target.getBoundingClientRect();
-                const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
+            const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
-                const timingFunc = TIMINGFUNC_MAP[timingName];
+            const timingFunc = TIMINGFUNC_MAP[easing];
-                let start = null;
+            let start = null;
-
+            const step = (timestamp) => {
-                const step = (timestamp) => {
+                start = start || timestamp;
-                    start = start || timestamp;
+                const time = Math.min(1, (timestamp - start) / duration);
-                    const progress = timestamp - start,
+                const percentageNew = timingFunc(time);
-                        // Growing from 0 to 1
+                const distanceToGo = targetY;
-                        time = Math.min(1, (timestamp - start) / duration);
+                const thisDistance = percentageNew * distanceToGo;
-                    const percentageNew = timingFunc(time);
+                wrapper.scrollTo(0, initY + thisDistance);
-                    const distanceToGo = targetY;
+                if (percentageNew < 1) {
-                    const thisDistance = percentageNew * distanceToGo;
+                    window.requestAnimationFrame(step);
-
+                }
-                    wrapper.scrollTo(0, initY + thisDistance);
+            };
-                    if (percentageNew < 1) {
+            window.requestAnimationFrame(step);
-                        window.requestAnimationFrame(step);
+        },
-                    }
+    },
-                };
+    watch: {
-                window.requestAnimationFrame(step);
+        modelValue(newValue, oldValue) {
-            }
+            this.resetField({
-
+                value: newValue,
-            const wrapper = document.getElementById("date-picker-fieldset");
+            });
-            const targetMonth = document.getElementById(elementId);
-
-            scrollTopSmooth(wrapper, targetMonth, 800, "ease-in-out");
         },
     },
     components: {
         loader,
+        ErrorMessage,
     },
 };
 </script>
@@ -660,27 +689,22 @@ export default {
     max-height: 0;
 }
 .date-picker {
-    overflow: hidden;
     position: relative;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 
     fieldset {
-        overflow-y: auto;
         flex-grow: 1;
         position: relative;
-        padding-bottom: 6rem; // arbitrary amount to provide enough spacing for scroll animation
-        max-height: 21.25rem; // 340px... arbitrary amount to not push View More link out of view on iphones
     }
     .loader {
-        position: absolute;
         height: 2rem;
-        width: 2rem;
+        width: calc(100% - 1.5rem);
 
         &::after {
-            width: 100%;
+            width: 1.5rem;
-            height: 100%;
+            height: 1.5rem;
         }
     }
     .calendar-grid-container {
@@ -813,9 +837,9 @@ export default {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                width: 3rem;
+                min-width: 2.5rem;
+                width: 2.5rem;
                 height: 2.5rem;
-                min-width: 3rem;
 
                 span {
                     &.small {
@@ -916,9 +940,6 @@ export default {
             margin-bottom: 0;
             overflow: hidden;
         }
-        &.last-available-month:not(&.month-hidden) {
-            margin-bottom: 14rem;
-        }
     }
 
     .btn-link {
@@ -996,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>

src/fmg-components/funnel-sub-header/funnel-sub-header.vue

@@ -2,7 +2,7 @@
     <div class="funnel-sub-header">
         <div
             class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
-            <h5 class="text-center fw-normal mb-2" :class="headerColor">
+            <h5 class="text-center fw-normal mb-0" :class="headerColor">
                 <span>
                     {{ text }}
                 </span>

src/layouts/schedule/schedule.vue

@@ -18,6 +18,7 @@
                 v-model="selectedDate"
                 class="text-link-small"
                 :customSelectableDatesCallback="getAvailableDatesMethod"
+                validationRules="date-required"
                 @date-clicked="openInshopTimeSlotsModal" />
             <timeSlotModalQuestion
                 ref="timeSlotModalQuestion"

src/layouts/vin-lookup/vin-lookup.vue

@@ -79,7 +79,12 @@
                     :manualHeadline="AlertPerfectMatchInsuranceVerifiedHeader"
                     :manualCopy="AlertPerfectMatchInsuranceVerifiedBody"
                     v-model="customAlertData"
-                    v-if="vinPopulatedOnPageLoad && isInsuranceVerified && !displayInvalidZipAlert"
+                    v-if="
+                        vinPopulatedOnPageLoad &&
+                        isInsuranceVerified &&
+                        !displayInvalidZipAlert &&
+                        !displayNonServiceableZipAlert
+                    "
                     alertClass="alert-success" />
                 <alert
                     class="my-4"
@@ -106,7 +111,12 @@
                     :manualHeadline="AlertPerfectMatchInsuranceNotVerifiedHeader"
                     :manualCopy="AlertPerfectMatchInsuranceNotVerifiedBody"
                     v-model="customAlertData"
-                    v-if="vinPopulatedOnPageLoad && !isInsuranceVerified && !displayInvalidZipAlert"
+                    v-if="
+                        vinPopulatedOnPageLoad &&
+                        !isInsuranceVerified &&
+                        !displayInvalidZipAlert &&
+                        !displayNonServiceableZipAlert
+                    "
                     alertClass="alert-success" />
                 <funnelFooter
                     cmsWidgetName="FunnelFooterWidget"