Merge branch 'develop' into feature/INSR-8130

package.json

@@ -56,7 +56,8 @@
     "babel-jest": "^27.0.6",
     "concurrently": "^9.1.2",
     "dotenv-safe": "^9.1.0",
-    "eslint": "^9.26.0",    
+    "eslint": "^9.39.2",
+    "eslint-plugin-vue": "^9.15.1",
     "form-data": "^4.0.4",
     "jest": "^27.0.5",
     "jest-junit": "^13.0.0",

src/layouts/schedule-page/schedule-page.vue

@@ -176,7 +176,7 @@ const getAvailableDates = async (
                     storeAction.payload.shopAppointmentType,
                     storeAction.payload.providerNumber
                 );
-            } else {
+            } else if (storeAction.payload?.zipCodeOverride) {
                 timeSlotsResponse = await useMainStore().getMobileTimeSlots(
                     storeAction.payload.startDate,
                     storeAction.payload.endDate,
@@ -461,7 +461,7 @@ export default {
             const initialEndDate = new Date();
             initialEndDate.setDate(initialEndDate.getDate() + (initialDays - 1));
             let initialViewEndDate = convertDateToDateString(initialEndDate);
-            const preSelectedDate = this.mainStore.order.schedule.date;
+            const preSelectedDate = this.selectedDate;
 
             const endDateObject = this.getEndDateForExistingDate(
                 todayDateObject,
@@ -609,12 +609,18 @@ export default {
             }
         },
         async refreshDatePicker() {
+            this.resetLocalFlags();
             await this.getDatePickerInitialData().then((data) => {
                 this.selectableDatesData = data.initialShopTimeSlotsResponse;
                 this.$refs.datePicker.initializeComponent(data);
                 showIssLoadingModal(false);
             });
         },
+        resetLocalFlags() {
+            this.selectedDate = null;
+            this.selectedTimeSlotInfo = null;
+            this.showDatePickerError = false;
+        },
         timeSlotSelectedFromPicker(timeSlot) {
             this.selectedTimeSlotInfo = timeSlot;
             this.showDatePickerError = false;

src/layouts/schedule-page/service-location/service-location.vue

@@ -47,8 +47,21 @@
                 v-if="displayLowAvailabilityInshop"
                 ref="alertLowAvailabilityInshop"
                 cmsWidgetName="AlertLowAvailabilityInshopWidget"
+                :manualHeadlineLineTwo="getLowAvailabilityHeadlineLineTwoText"
                 :isCollapsible="true"
-                alertClass="alert-warning" />
+                :startCollapsed="true"
+                alertClass="alert-warning">
+                <template #headline-line-two>
+                    <button
+                        class="m-0 alert-header-text d-block looka-likea-link"
+                        type="button"
+                        @click="triggerShopAddressModal">
+                        <span class="m-0">
+                            {{ getLowAvailabilityHeadlineLineTwoText }}
+                        </span>
+                    </button>
+                </template>
+            </alert>
             <shopAddress
                 ref="shopAddress"
                 v-model="selectedProvider"
@@ -201,6 +214,9 @@ export default {
         displayServiceableMobileOnly() {
             return this.isServiceableMobile && this.recalibrationRequired && !this.isServiceableInshop;
         },
+        getLowAvailabilityHeadlineLineTwoText() {
+            return 'Try a different location';
+        },
         inShopOnlyCopy() {
             let content = this.getCmsContent('AlertInshopOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
             content = content.replace('{custom:city}', toTitleCase(this.city));
@@ -314,7 +330,7 @@ export default {
             }
         },
         selectedProvider(newProvider, oldProvider) {
-            if (newProvider?.providerNumber !== oldProvider?.providerNumber) {
+            if (newProvider?.providerNumber !== oldProvider?.providerNumber || this.availabilityRating === null) {
                 const appointmentIsInshop = this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP;
                 const returnedProvider = {
                     provider: newProvider,
@@ -325,7 +341,9 @@ export default {
                     this.refreshAvailabilityRating();
                 }
 
-                this.$emit('provider-changed', returnedProvider);
+                if (newProvider?.providerNumber !== oldProvider?.providerNumber) {
+                    this.$emit('provider-changed', returnedProvider);
+                }
             }
         }
     },
@@ -492,6 +510,9 @@ export default {
                 this.selectedAppointmentType = AppointmentTypeStrings.IN_SHOP;
             }
         },
+        triggerShopAddressModal() {
+            this.$refs.shopAddress.openModal();
+        },
         async updateMobileZip() {
             this.mobileZipError = '';
             const zipCodeData = await getMobileZipCodeData(this.mobileZipCode);
@@ -577,5 +598,30 @@ $page-side-padding: 1.5rem;
             text-decoration: underline;
         }
     }
+    div.alert {
+        margin-top: 0.625rem;
+
+        :deep(.alert-header) {
+            button.btn-collapse {
+                display: block;
+            }
+        }
+
+        button.looka-likea-link {
+            background: none;
+            border: none;
+            font-weight: 500;
+            font-size: 1rem;
+            padding: 0;
+            color: $heritage-blue-primary;
+            text-decoration: none;
+            cursor: pointer;
+
+            &:hover {
+                color: #125b7e;
+                text-decoration: underline;
+            }
+        }
+    }
 }
 </style>

src/layouts/schedule-page/service-location/shop-address/shop-address.vue

@@ -6,8 +6,8 @@
             class="shop-address"
             aria-live="polite">
             <div class="address-header">
-{{ questionText }}
-</div>
+                {{ questionText }}
+            </div>
             <div
                 v-if="modelValue"
                 class="current-address">
@@ -16,8 +16,8 @@
                     <span class="shop-distance">{{ modelValue.distanceInMiles?.toFixed(2) }} mi</span>
                 </div>
                 <div class="address-line">
-{{ getProviderAddress(modelValue) }}
-</div>
+                    {{ getProviderAddress(modelValue) }}
+                </div>
                 <div class="address-line">
                     {{ getProviderCityZipState(modelValue) }}
                 </div>

src/ux-components/alert/alert.vue

@@ -23,9 +23,14 @@
                         0 0 0-.127-.37.489.489 0 0 0-.388-.205z" />
                 </svg>
             </div>
-            <span class="m-0 alert-header-text">
-                {{ alertHeadline }}
-            </span>
+            <template v-if="alertHeadline">
+                <div class="alert-headline-text-container">
+                    <span class="m-0 alert-header-text d-block">
+                        {{ alertHeadline }}
+                    </span>
+                    <slot name="headline-line-two"></slot>
+                </div>
+            </template>
             <button
                 v-if="isCollapsible"
                 class="btn-collapse"
@@ -65,7 +70,7 @@
         <div
             v-show="alertCopy"
             :id="collapseId"
-            class="alert-body">
+            class="alert-body show">
             <template
                 v-for="paragraph in splitAlertCopyForParagraphTag"
                 :key="paragraph">
@@ -146,12 +151,19 @@ export default {
             }
         },
         manualHeadline: String,
+        manualHeadlineLineTwo: {
+            type: String,
+            default: ''
+        },
         manualCopy: String,
         shouldScrollToOnMount: {
             type: Boolean,
             default: true
         },
-        startCollapsed: Boolean
+        startCollapsed: {
+            type: Boolean,
+            default: false
+        }
     },
     emits: ['textLinkClicked'],
     data() {
@@ -169,11 +181,19 @@ export default {
                 ? this.manualHeadline
                 : this.getCmsContent(this.cmsWidgetName, 'HeadlineText');
         },
+        alertHeadlineLineTwo() {
+            return this.manualHeadlineLineTwo
+                ? this.manualHeadlineLineTwo
+                : '';
+        },
         alertCopy() {
             return this.manualCopy
                 ? this.manualCopy
                 : this.getCmsContent(this.cmsWidgetName, 'BodyText');
         },
+        hasManualHeadlineLineTwo() {
+            return this.manualHeadlineLineTwo !== '';
+        },
         splitAlertCopyForParagraphTag() {
             return splitCMSCopyOnParagraphTag(this.alertCopy);
         },
@@ -186,7 +206,7 @@ export default {
     mounted() {
         this.ensureAlertIsInViewPort();
         if (this.isCollapsible) {
-            this.collapseElement = Collapse.getOrCreateInstance(document.getElementById(this.collapseId));
+            this.collapseElement = Collapse.getOrCreateInstance(document.getElementById(this.collapseId), { toggle: this.startCollapsed });
         }
     },
     methods: {
@@ -230,6 +250,14 @@ export default {
     border: 1px solid;
     padding: 0rem;
     margin-bottom: 2rem;
+    .alert-headline-text-container {
+        flex-grow: 1;
+        padding: 0rem 0.625rem;
+
+        .alert-header-text {
+            padding: 0;
+        }
+    }
     .alert-header {
         display: flex;
         align-items: flex-start;