Merge branch 'release/submit-cash' into rlsmerge/submit-cash-to-develop-7.17

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

@@ -56,10 +56,14 @@
                 :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
@@ -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>
@@ -911,16 +940,15 @@ export default {
             margin-bottom: 0;
             overflow: hidden;
         }
-        &.last-available-month:not(&.month-hidden) {
-            margin-bottom: 14rem;
-        }
     }
 
     .btn-link {
         font-weight: 500;
         text-underline-offset: 4px;
-        position: absolute;
+        flex-grow: 0;
-        bottom: 0;
+        &:focus {
+            box-shadow: none;
+        }
     }
 
     .past {
@@ -992,4 +1020,10 @@ export default {
     text-underline-offset: 4px;
     z-index: 2;
 }
+
+.form-test-error {
+    margin: 0 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/quote/quote.spec.js

@@ -162,6 +162,11 @@ describe("quote.vue", () => {
                 },
                 referralNumber: "1234567",
             },
+            payment: {
+                insuranceCoverage: {
+                    isVerified: false,
+                },
+            },
         };
 
         let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
@@ -185,6 +190,11 @@ describe("quote.vue", () => {
                     glassParts: ["item", "item2"],
                 },
             },
+            payment: {
+                insuranceCoverage: {
+                    isVerified: false,
+                },
+            },
         };
 
         let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();

src/layouts/quote/quote.vue

@@ -150,7 +150,7 @@ export default {
                 (store.getters.order.damage.isRepair ||
                     (store.getters.order.lineItems?.glassParts != null &&
                         store.getters.order.lineItems.glassParts.length > 0)) &&
-                store.getters.order.referralNumber?.length !== 6
+                !store.getters.payment.insuranceCoverage.isVerified
             );
         },
         getDefaultIsInsuranceSelectedValue(availableLineItems) {
@@ -166,7 +166,7 @@ export default {
                 return availableLineItems
                     ? baseMixin.methods.getTierOnePackagePrice(
                           baseMixin.methods.filterOutFees(availableLineItems)
-                      ) > 500
+                      ) > 300
                     : null;
             }
         },

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"
@@ -93,7 +94,7 @@ const getAvailableDates = async (
     const timeSlotsData = {};
     timeSlotsData.days = [];
     let apiStartDate = startDateString;
-    let apiEndDate = apiEndDateLimit;
+    let apiEndDate = endDateString;
 
     for (let i = 1; i <= apiCallsCount; i++) {
         let storeActionConfig;
@@ -105,6 +106,10 @@ const getAvailableDates = async (
             if (i === apiCallsCount) {
                 apiEndDate = endDateString;
             }
+        } else {
+            if (apiEndDate > apiEndDateLimit) {
+                apiEndDate = apiEndDateLimit;
+            }
         }
 
         if (appointmentType === AppointmentTypeStrings.MOBILE) {
@@ -126,13 +131,13 @@ const getAvailableDates = async (
                 },
             };
         }
-        storeActionConfigs.push(storeActionConfig);
+        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
     }
 
-    // ASYNC METHOD
     const timeSlotsResponsesData = {
         days: [],
     };
+
     function compareDayStrings(a, b) {
         if (a.date < b.date) return -1;
         if (a.date > b.date) return 1;

src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue

@@ -319,15 +319,19 @@ export default {
             return `${hours}:${minutes} ${meridianNotation}`;
         },
         getDisplayTextForDurationLength(durationMinimum, durationMaximum) {
-            let displayTextForDurationLength;
+            const isLongAppointment = durationMaximum >= 120;
-            if (durationMaximum >= 120) {
+            const isDurationRange = durationMinimum !== durationMaximum;
-                displayTextForDurationLength = `${durationMinimum / 60} - ${
+
-                    durationMaximum / 60
+            const adjustedMinimum = isLongAppointment ? durationMinimum / 60 : durationMinimum;
-                } hours`;
+            const adjustedMaximum = isLongAppointment ? durationMaximum / 60 : durationMaximum;
-            } else {
+
-                displayTextForDurationLength = `${durationMinimum} - ${durationMaximum} minutes`;
+            const durationText = isDurationRange
-            }
+                ? `${adjustedMinimum} - ${adjustedMaximum}`
-            return displayTextForDurationLength;
+                : adjustedMinimum;
+
+            const unitText = isLongAppointment ? "hours" : "minutes";
+
+            return `${durationText} ${unitText}`;
         },
         getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
             selectedTimeSlotId,

src/mixins/vehicle-questions-mixin.js

@@ -446,9 +446,7 @@ export default {
 
                 const payment = store.getters.payment;
 
-                if (store.getters.order.referralNumber?.length === 6) {
+                if (payment.isInsurance && payment.insuranceCoverage.isVerified) {
-                    navigateToHeritageFunnel({ loadingModal: self.$refs.loadingModal });
-                } else if (payment.isInsurance && payment.insuranceCoverage.isVerified) {
                     navigateToHeritageFunnel({ loadingModal: self.$refs.loadingModal });
                 } else {
                     self.$router.navigateWithSaving(

src/ux-components/list-card/list-card.vue

@@ -96,6 +96,7 @@ export default {
             outline: none;
             display: flex;
             position: relative;
+            justify-content: space-between;
 
             p {
                 color: $gray-600;