Merge pull request #557 from Safelite/feature/CSR-652

Feature/csr 652

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/address-lookup.vue

@@ -12,27 +12,33 @@
 			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
 			<div class="fade-on-route-transition sub-container make-tall">
 				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
-				<alert ref="alertVinNotFound" v-if="displayVinNotFoundAlert"
+				<alert ref="alertVinNotFound" 
+					v-if="displayVinNotFoundAlert"
 					class="mb-4"
 					cmsWidgetName="AlertVinNotFoundWidget"
 					alertClass="alert-danger"
 					v-bind:isDismissible="false"
 				/>
-				<alert ref="alertMatchedDifferentVehicle" v-if="displayMatchedDifferentVehicleAlert"
+				<alert ref="alertMatchedDifferentVehicle" 
+					v-if="displayMatchedDifferentVehicleAlert"
 					class="mb-4"
+					cmsWidgetName="AlertMatchedDifferentVehicleWidget"
 					:manualHeadline="AlertMatchedDifferentVehicleHeader"
 					:manualCopy="AlertMatchedDifferentVehicleBody"
 					alertClass="alert-warning"
 					v-bind:isDismissible="false"		
 				/>			
-				<alert ref="alertNonServiceableZip" v-if="displayNonServiceableZipAlert"
+				<alert ref="alertNonServiceableZip" 
+					v-if="displayNonServiceableZipAlert"
 					class="mb-4"
-					alertClass="alert-danger"
+					cmsWidgetName="AlertNonServiceableZipWidget"
 					:manualHeadline="AlertNonServiceableZipHeader"
 					:manualCopy="AlertNonServiceableZipBody"
+					alertClass="alert-danger"
 					v-bind:isDismissible="false"
 				/>			
-				<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-if="displayVinLookupByHomeAddressNotAllowedAlert"
+				<alert ref="alertVinLookupsByHomeAddressNotAllowed" 
+					v-if="displayVinLookupByHomeAddressNotAllowedAlert"
 					class="mb-4"
 					cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
 					alertClass="alert-danger"

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

@@ -57,13 +57,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=true
     :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/address-vehicles/address-vehicles.vue

@@ -10,16 +10,15 @@
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-      <alert
+      <alert ref="alertFoundMultipleVehicles"
-        ref="alertFoundMultipleVehicles"
 				class="my-5"
-				alertClass="alert-warning"
+        cmsWidgetName="FoundMultipleVehicles"
-				:manualHeadline="AlertFoundMultipleVehiclesHeader"
+        :manualHeadline="AlertFoundMultipleVehiclesHeader"
         manualCopy=""
+				alertClass="alert-warning"
 				v-bind:isDismissible="false"
 			/>
-      <addressVehiclesQuestion
+      <addressVehiclesQuestion ref="addressVehiclesQuestion"
-        ref="addressVehiclesQuestion"
         cmsWidgetName="VehicleConfirmationQuestion"
         :vehicles="VehiclesForQuestions"
         validationRules="vehicle-required"

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/license-plate-lookup/license-plate-lookup.vue

@@ -40,10 +40,11 @@
           </div>
         </div>
         <alert
+          v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
           class="my-3"
+          cmsWidgetName="NoServiceZipWidget"
           :manualHeadline="NoServiceZipHeader"
           :manualCopy="NoServiceZipBody"
-          v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
           alertClass="alert-danger"
         />
         <div class="row my-2">
@@ -58,14 +59,17 @@
             />
           </div>
         </div>
-        <alert class="my-3" 
+        <alert 
-          cmsWidgetName="NoMatchAlertWidget" 
           v-if="!isVinValid" 
+          class="my-3" 
+          cmsWidgetName="NoMatchAlertWidget" 
           alertClass="alert-warning" />
-        <alert class="my-3"
+        <alert 
+          v-if="isCarIdDifferent"
+          class="my-3"
+          cmsWidgetName="MatchedDifferentVehicleAlertWidget"
           :manualHeadline="MatchedDifferentVehicleAlertHeader"
           :manualCopy="MatchedDifferentVehicleAlertBody"
-          v-if="isCarIdDifferent"
           alertClass="alert-warning"
         />
         <funnelFooter

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

@@ -260,7 +260,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: {
@@ -272,10 +272,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: {
@@ -287,10 +287,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: {
@@ -302,7 +302,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/layouts/vehicle-parts/vehicle-parts.vue

@@ -9,8 +9,8 @@
           <div class="col">
             <alert
               class="rounded border-0 shadow-sm"
-              alertClass="alert-warning"
               cmsWidgetName="AlertWidget"
+              alertClass="alert-warning"
               :isDismissible="false"
             />
           </div>

src/layouts/vin-lookup/vin-lookup.vue

@@ -60,49 +60,47 @@
           </div>
         </div>
         <alert
-          class="my-4"
-          v-model="customAlertData"
           v-if="noMatchAlert"
-          alertClass="alert-warning"
+          class="my-4"
           cmsWidgetName="NoMatchAlertWidget"
+          alertClass="alert-warning"
         />
         <alert
+          v-if="isVinFieldReadOnly" 
           class="my-4"
+          cmsWidgetName="PerfectMatchNewVinAlertReadOnly"
           :manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
           :manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
-          v-model="customAlertData"
-          v-if="isVinFieldReadOnly" 
           alertClass="alert-success"
         />
         <alert
+          v-if="isCarIdDifferent && !vinNotFound && !perfectMatchNewVinAlert"
           class="my-4"
+          cmsWidgetName="MatchedDifferentVehicle"
           :manualHeadline="MatchedDifferentVehicleAlertHeader"
           :manualCopy="MatchedDifferentVehicleAlertBody"
-          v-model="customAlertData"
-          v-if="isCarIdDifferent && !vinNotFound && !perfectMatchNewVinAlert"
           alertClass="alert-warning"
         />
         <alert
+          v-if="noServiceZip"
           class="my-4"
+          cmsWidgetName="NoServiceZipWidget"
           :manualHeadline="NoServiceZipHeader"
           :manualCopy="NoServiceZipBody"
-          v-model="customAlertData"
-          v-if="noServiceZip"
           alertClass="alert-danger"
         />
         <alert
-          class="my-4"
-          v-model="customAlertData"
           v-if="vinNotFound"
-          alertClass="alert-danger"
+          class="my-4"
           cmsWidgetName="VinNotFound"
+          alertClass="alert-danger"
         />
         <alert
+          v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
           class="my-4"
+          cmsWidgetName="PerfectMatchNewVinAlert"
           :manualHeadline="PerfectMatchNewVinAlertHeader"
           :manualCopy="PerfectMatchNewVinAlertBody"
-          v-model="customAlertData"
-          v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
           alertClass="alert-success"
         />
         <funnelFooter

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);