move alert from bottom of page

src/layouts/address-vehicles/address-vehicles.vue

@@ -20,7 +20,18 @@
         :manualHeadline="AlertFoundMultipleVehiclesHeader"
         manualCopy=""
         v-bind:isDismissible="false"
-        id="multiple-vehicles-alert"
+        id="address-vehicles-alert"
+      />
+      <alert
+        cmsWidgetName="FoundWindshield"
+        ref="alertFoundWindshield"
+        class="my-4"
+        alertClass="alert-warning"
+        :manualHeadline="AlertFoundWindshieldHeader"
+        :manualCopy="AlertFoundWindshieldBody"
+        v-if="isCarIdDifferent"
+        v-bind:isDismissible="false"
+        id="address-vehicles-alert"
       />
       <addressVehiclesQuestion
         ref="addressVehiclesQuestion"
@@ -28,7 +39,6 @@
         :vehicles="VehiclesForQuestions"
         validationRules="vehicle-required"
         v-model="selectedVehicleVin"
-        :isCarIdDifferent="isCarIdDifferent"
       />
       <div
         class="alert-provide-vin my-3"
@@ -67,7 +77,10 @@ import { issPageValues } from "@/router/router-constants/issPage-values";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
-import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
+import {
+  getDamageString,
+  isGlassAvailableForCarId,
+} from "@/helpers/damage-helper";
 import {
   doesCopyContainRouterLink,
   splitCopyOnCMSPlaceHolder,
@@ -129,6 +142,22 @@ export default {
         "HeadlineText"
       ).replaceAll("{custom:vehicleCount}", this.vehicleCount);
     },
+    AlertFoundWindshieldHeader() {
+      return this.getCmsContent("FoundWindshield", "HeadlineText").replaceAll(
+        "{custom:damage}",
+        getDamageString()
+      );
+    },
+    AlertFoundWindshieldBody() {
+      return this.getCmsContent(
+        "FoundWindshield",
+        "BodyText"
+      )
+        .replaceAll("{custom:damage}", getDamageString())
+        .replaceAll("{custom:vinlookupYear}", this.selectedVehicle.vehicle.year)
+        .replaceAll("{custom:vinlookupMake}", this.selectedVehicle.vehicle.make)
+        .replaceAll("{custom:vinlookupModel}", this.selectedVehicle.vehicle.model)
+    },
     AlertProvideVinBody() {
       return this.getCmsContent("ProvideVinAlert", "BodyText");
     },
@@ -181,18 +210,19 @@ export default {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     async forwardButtonAction() {
-      const vinLookup = await useMainStore().lookupVehicleByVin(
-        this.selectedVehicle.vin,
-      ).catch(() => {
-        this.$refs.siteFooter.removeLoader();
-      });
+      const vinLookup = await useMainStore()
+        .lookupVehicleByVin(this.selectedVehicle.vin)
+        .catch(() => {
+          this.$refs.siteFooter.removeLoader();
+        });
       if (!vinLookup) {
         return;
       }
       this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
         vinLookup.data.carId
       );
-      await useMainStore().saveVin({
+      await useMainStore().saveVin(
+        {
           vehicleInfo: Object.assign(this.selectedVehicle.vehicle, {
             vin: this.selectedVehicle.vin,
           }),
@@ -205,14 +235,14 @@ export default {
       return await this.navigateForward();
     },
     async navigateForward() {
-      // If the vehicle selected on this page is different from the one originally entered and the selected glass is not available 
+      // If the vehicle selected on this page is different from the one originally entered and the selected glass is not available
       // for that vehicle, then navigate back to "vehicle-damage" and display vehicle changed alert on that page.
       if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
         this.$router.navigate(
           this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
           this.$route,
           {},
-          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true },
+          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
         );
       } else {
         await this.navigateForwardWithSingleCarMatch();
@@ -252,16 +282,15 @@ export default {
 
 <style lang="scss">
 .alert-provide-vin {
-    font-size: 0.875rem;
-    line-height: 1.4;
-    margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body
-    a {
-        text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
-        line-height: inherit;
-    }
+  font-size: 0.875rem;
+  line-height: 1.4;
+  a {
+    text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
+    line-height: inherit;
+  }
 }
 
-#multiple-vehicles-alert p {
+#address-vehicles-alert p {
   margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body
 }
 </style>