few more updates for the second line of headline text

start alert collapsed

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));
@@ -494,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);
@@ -584,7 +603,23 @@ $page-side-padding: 1.5rem;
 
         :deep(.alert-header) {
             button.btn-collapse {
-                align-self: center;
+                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;
             }
         }
     }

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 }}
+                {{ questionText }}
-</div>
+            </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) }}
+                    {{ getProviderAddress(modelValue) }}
-</div>
+                </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">
+            <template v-if="alertHeadline">
-                {{ alertHeadline }}
+                <div class="alert-headline-text-container">
-            </span>
+                    <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;