Fix merge conflicts

src/common-components/button-question/button-question.spec.js

@@ -117,8 +117,7 @@ describe("buttonQuestion.vue", () => {
     const wrapper = shallowMount(buttonQuestion, setupMocks({propsData: {groupName: "group-name"}}));
     await wrapper.setProps({
       answers: ["2022", "2021", "2020"],
-      isMultiSelect: false,
+      isMultiSelect: false
-      modelValue: []
     });
     const val = { checkValue: true, value: "2021", }
     wrapper.vm.handleCheckedChanged(val);

src/common-components/button-question/button-question.vue

@@ -35,7 +35,6 @@
               data-test="button"
               :validationRules="validationRules"
               :class="[suppressError ? 'alertError' : '']"
-              :clearOnUnmount="clearOnUnmount"
             />
             <!-- For nested questions --> 
             <transition name="fade" mode="out-in">
@@ -169,7 +168,6 @@ export default {
         this.selectedValues = val.value;
       } else {
         if(Array.isArray(this.selectedValues)) {
-          const newSelectedValues = this.selectedValues;
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;
         }

src/common-components/funnel-header/funnel-header.vue

@@ -7,11 +7,12 @@
     <menuModal/>
   </div>
   <alert
-    class="position-absolute rounded-0 w-100 border-0 shadow-sm"
     v-if="displayGlobalAlert"
-    :alertClass="globalAlertMessage.type"
+    class="position-absolute rounded-0 w-100 border-0 shadow-sm"
+    cmsWidgetName="GlobalAlert"
     :manualHeadline="globalAlertMessage.messageHeadline"
     :manualCopy="globalAlertMessage.messageCopy"
+    :alertClass="globalAlertMessage.type"
     v-bind:isDismissible="globalAlertMessage.isDismissible"
   />
 </template>

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -55,13 +55,15 @@
 			</div>
 		</div>
 	</transition>		
-	<alert ref="alertVerificationWarning" v-if="displayVerificationWarning"
+	<alert ref="alertVerificationWarning" 
+		v-if="displayVerificationWarning"
 		class="mb-4"
 		cmsWidgetName="AlertVerificationWarningWidget"
 		alertClass="alert-warning"
 		v-bind:isDismissible="false"
 	/>
-	<alert ref="alertNoMatchWarning" v-if="displayNoMatchWarning"
+	<alert ref="alertNoMatchWarning" 
+		v-if="displayNoMatchWarning"
 		class="mb-4"
 		cmsWidgetName="AlertNoMatchWarningWidget"
 		alertClass="alert-warning"

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

@@ -9,13 +9,13 @@
     isRequired
     :validation-rules="validationRules"
   />
-  <alert 
+  <alert ref="differentVehicleAlert"
-    ref="differentVehicleAlert"
     v-if="isCarIdDifferent"
     class="my-3"
-    alertClass="alert-warning"
+    cmsWidgetName="FoundWindshield"
     :manualHeadline="differentVehicleAlertHeader"
     :manualCopy="differentVehicleAlertBody"
+    alertClass="alert-warning"
     v-bind:isDismissible="false"
   />
 </template>

src/layouts/estimate/estimate.vue

@@ -11,11 +11,10 @@
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall">
         <alert
-        class="vinLookupMethodHeading"
+          class="vinLookupMethodHeading"
-        v-model="customAlertData"
+          cmsWidgetName="AlertVinLookupQuestion"
-        alertClass=""
+          alertClass=""
-        cmsWidgetName="AlertVinLookupQuestion"
+        />
-      />
         <buttonQuestion
           cmsWidgetName="VinLookupMethod"
           :answers="answersFromCms"

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -257,7 +257,7 @@ describe("vehicle-damage.vue", () => {
   });
 
   describe("alert", () => {
-    test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be visible", () => {
+    test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be rendered", () => {
       // Arrange & Act
       const { wrapper } = setupMocks({
         mountOptionsMockData: {
@@ -269,10 +269,10 @@ describe("vehicle-damage.vue", () => {
         }
       });
       // Assert
-      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(true);
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).exists()).toBe(true);
     });
 
-    test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be visible", () => {
+    test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be rendered", () => {
       // Arrange & Act
       const { wrapper } = setupMocks({
         mountOptionsMockData: {
@@ -284,10 +284,10 @@ describe("vehicle-damage.vue", () => {
         }
       });
       // Assert
-      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).exists()).toBe(false);
     });
 
-    test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be visible", () => {
+    test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be rednered", () => {
       // Arrange & Act
       const { wrapper } = setupMocks({
         mountOptionsMockData: {
@@ -299,7 +299,7 @@ describe("vehicle-damage.vue", () => {
         }
       });
       // Assert
-      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).exists()).toBe(false);
     })
   });
 

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -10,11 +10,10 @@
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
         <div class="fade-on-route-transition sub-container make-tall">
-          <alert
+          <alert ref="vehicleChangeAlert"
-            ref="vehicleChangeAlert"
+            v-if="shouldDisplayVehicleChangeAlert"
             class="mt-5 mb-0"
             cmsWidgetName="VehicleChangeAlert"
-            v-show="shouldDisplayVehicleChangeAlert"
             alertClass="alert-warning"
             :isDismissible="false"
           />
@@ -32,9 +31,9 @@
             :selectedDamageLocations="selectedDamageLocations"
           />
           <alert
+            v-if="hasRepairReplaceConflict"
             class="my-5"
             cmsWidgetName="HasReplacementConflict"
-            v-show="hasRepairReplaceConflict"
             alertClass="alert-danger"
             :isDismissible="false"
           />

src/layouts/vehicle-damage/windshield-options/windshield-options.vue

@@ -8,9 +8,9 @@
             :validationRules="windshieldDamageTypeQuestionValidationRules"
         />
         <alert
+            v-if="showNoReplacementAvailableError"
             class="my-3"
             cmsWidgetName="NoReplacementAvailableError"
-            v-if="showNoReplacementAvailableError"
             alertClass="alert-danger"
             :isDismissible="false"
           />
@@ -30,9 +30,9 @@
             isRequired
         />
         <alert
+            v-if="hasSplitSingleConflict"
             class="mt-5"
             cmsWidgetName="SplitSingleConflict"
-            v-if="hasSplitSingleConflict"
             alertClass="alert-danger"
             :isDismissible="false"
           />

src/mixins/base-mixin.js

@@ -69,7 +69,10 @@ export default {
     },
     dynamicStrings(){
       return dynamicStrings;
-    }
+    },
+    cssClassNameForCmsWidget(){
+      return "widget-name-" + this.cmsWidgetName;
+    },
   },
 };
 

src/ux-components/alert/alert.vue

@@ -2,7 +2,7 @@
   <div
     class="alert fade show text-center mb-0 py-2 px-4"
     role="alert"
-    :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
+    :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass, this.cssClassNameForCmsWidget]"
   >
     <p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
     <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
@@ -54,7 +54,15 @@ export default {
     alert-info (blue)
     */
     alertClass: String,
-    cmsWidgetName: String,
+    cmsWidgetName: {
+      type: String,
+      default(rawProps) {
+        if (!rawProps.cmsWidgetName) {
+          console.log('Error: Missing a CMS Widget Name (required field)');
+        }
+        return 'widgetUndefined';
+      },
+    },
     manualHeadline: String,
     manualCopy: String,
     shouldScrollToOnMount: {
@@ -64,10 +72,10 @@ export default {
   },
   computed: {
     alertHeadline(){
-      return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'HeadlineText') : this.manualHeadline;
+      return this.manualHeadline ? this.manualHeadline : this.getCmsContent(this.cmsWidgetName, 'HeadlineText');
     },
     alertCopy(){
-      return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
+      return this.manualCopy ? this.manualCopy : this.getCmsContent(this.cmsWidgetName, 'BodyText');
     },
     splitAlertCopyForParagraphTag(){
       return splitCMSCopyOnParagraphTag(this.alertCopy);

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -78,10 +78,6 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
-    clearOnUnmount: {
-      type: Boolean,
-      default: true
-    }
   },
   data() {
     return {
@@ -96,11 +92,9 @@ export default {
         : this.selectedValues[0];
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
+  unmounted() { // needed to clear this button's selectedValues if it is removed
-    if (this.clearOnUnmount) {
+    this.checkValue = false;
-      this.checkValue = false;
+    this.handleCheckChange();
-      this.handleCheckChange();
-    }
   },
   methods: {
     displayLoader() {

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

@@ -77,10 +77,6 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
-    clearOnUnmount: {
-      type: Boolean,
-      default: true
-    }
   },
   data() {
     return {
@@ -95,11 +91,9 @@ export default {
         : this.selectedValues[0];
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
+  unmounted() { // needed to clear this button's selectedValues if it is removed
-    if (this.clearOnUnmount) {
+    this.checkValue = false;
-      this.checkValue = false;
+    this.handleCheckChange();
-      this.handleCheckChange();
-    }
   },
   methods: {
     displayLoader() {

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

@@ -89,10 +89,6 @@ export default {
     selectedValues: [Array, String],
     modelValue: Object,
     hasError: Boolean,
-    clearOnUnmount: {
-      type: Boolean,
-      default: true
-    }
   },
   data() {
     return {
@@ -114,11 +110,9 @@ export default {
       this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
+  unmounted() { // needed to clear this button's selectedValues if it is removed
-    if (this.clearOnUnmount) {
+    this.checkValue = false;
-      this.checkValue = false;
+    this.handleCheckChange();
-      this.handleCheckChange();
-    }
   },
   computed: {
     getLabelClasses() {