Merge pull request #328 from Safelite/adjusting-alert-widget

Adding new cms content retrieval method to alert component

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -26,24 +26,21 @@
       </div>
       <alert
         class="my-3"
+        cmsWidgetName="NoServiceZipWidget"
         v-if="newServiceZipRequired"
         alertClass="alert-danger"
-        :alertHeadline="noServiceZipWidget.headline"
-        :alertCopy="noServiceZipWidget.copy"
       />
       <alert
         class="my-3"
+        cmsWidgetName="NoMatchAlertWidget"
         v-if="vinNotValid"
         alertClass="alert-danger"
-        :alertHeadline="noMatchAlertWidget.headline"
-        :alertCopy="noMatchAlertWidget.copy"
       />
       <alert
         class="my-3"
+        cmsWidgetName="MatchedDifferentVehicleAlertWidget"
         v-if="vinDoesNotMatchCarId"
         alertClass="alert-warning"
-        :alertHeadline="matchedDifferentVehicleAlertWidget.headline"
-        :alertCopy="matchedDifferentVehicleAlertWidget.copy"
       />
       <div class="row my-2">
         <div class="col">
@@ -107,18 +104,6 @@ export default {
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
       vm.setCmsContent(resultMap.cmsContent);
-      vm.noServiceZipWidget = {
-        headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
-        copy: resultMap.cmsContent.NoServiceZipWidget.BodyText,
-      };
-      vm.noMatchAlertWidget = {
-        headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
-        copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
-      };
-      vm.matchedDifferentVehicleAlertWidget = {
-        headline: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.HeadlineText,
-        copy: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.BodyText
-      };
     });
   },
   props: {

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

@@ -24,10 +24,9 @@
           />
           <alert
             class="my-3"
+            cmsWidgetName="HasReplacementConflict"
             v-show="hasRepairReplaceConflict"
             alertClass="alert-danger"
-            alertHeadline="You'll need to schedule separate appointments"
-            :alertCopy="['Vehicle service requiring both glass repair and replacement must be scheduled separately, as they\'re performed by different technicians.', 'Continue scheduling your first service now, and then come back to schedule the second service.']"
             :isDismissible="false"
           />
           <sideDoorOptions

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

@@ -9,10 +9,9 @@
         />
         <alert
             class="my-3"
+            cmsWidgetName="NoReplacementAvailableError"
             v-show="showNoReplacementAvailableError"
             alertClass="alert-danger"
-            alertHeadline="Service not available"
-            :alertCopy="['We\'re sorry, but we currently offer only repair service for your vehicle type.', 'Need help with next steps? Call us at 800-394-0288.']"
             :isDismissible="false"
           />
         <windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion" 
@@ -31,10 +30,9 @@
         />
         <alert
             class="my-3"
+            cmsWidgetName="SplitSingleConflict"
             v-show="hasSplitSingleConflict"
             alertClass="alert-danger"
-            alertHeadline="Single-piece or split?"
-            alertCopy="Please select just one windshield option: single-piece or split."
             :isDismissible="false"
           />
     </div>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -9,8 +9,7 @@
           <alert
             class="rounded border-0 shadow-sm"
             alertClass="alert-warning"
-            :alertHeadline="alertWidgetData.headline"
-            :alertCopy="alertWidgetData.copy"
+            cmsWidgetName="AlertWidget"
             :isDismissible="false"
           />
         </div>
@@ -74,13 +73,6 @@ export default {
                         FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
                     })
                 );
-
-      // Set alertData for the page alert. These use props so we don't call
-      // initializeComponent here.
-      vm.alertWidgetData = {
-        copy: resultMap.cmsContent.AlertWidget.BodyText,
-        headline: resultMap.cmsContent.AlertWidget.HeadlineText,
-      };
     });
   },
   data() {

src/ux-components/alert/alert.spec.js

@@ -3,28 +3,40 @@ import alert from "./alert";
 
 describe("alert.vue", () => {
 
-  it("Should set isMultiParagraph to true if alertCopy is an array of strings", async () => {
+  it("Should add class 'alert-dismissible' if isDismissible is true", async () => {
     // Arrange
     const wrapper = shallowMount(alert, {
       propsData: {
-        alertCopy: ["one", "two"]
+        isDismissible: true
       },
+      mixins: [mockMixin]
     });
 
+    const wrapperDiv = wrapper.find('div');
+
     // Assert
-    expect(wrapper.vm.isMultiParagraph).toBe(true);
+    expect(wrapperDiv.classes()).toContain('alert-dismissible')
   });
 
-  it("Should set isMultiParagraph to false if alertCopy is a single string", async () => {
+  it("Should add specified alert class", async () => {
     // Arrange
     const wrapper = shallowMount(alert, {
       propsData: {
-        alertCopy: "three"
+        alertClass: 'warning'
       },
+      mixins: [mockMixin]
     });
 
+    const wrapperDiv = wrapper.find('div');
+
     // Assert
-    expect(wrapper.vm.isMultiParagraph).toBe(false);
+    expect(wrapperDiv.classes()).toContain('warning')
   });
 
 });
+
+const mockMixin = {
+  methods: {
+    getCmsContent: jest.fn()
+  }
+}

src/ux-components/alert/alert.vue

@@ -5,12 +5,7 @@
     :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
   >
     <p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
-    <span v-if="isMultiParagraph">
-      <p class="m-1 text-body small" v-for="(para, index) in alertCopy" :key="index">
-        {{ para }}
-      </p>
-    </span>
-    <p class="m-0 text-body small" v-else>{{ alertCopy }}</p>
+    <p class="m-0 text-body small">{{ alertCopy }}</p>
     <button
       type="button"
       class="btn-close p-2"
@@ -34,8 +29,6 @@
 export default {
   name: "alert",
   props: {
-    alertHeadline: String,
-    alertCopy: [Array, String],
     isDismissible: Boolean,
     /*
     alertClass class names:
@@ -45,14 +38,15 @@ export default {
     alert-info (blue)
     */
     alertClass: String,
+    cmsWidgetName: String,
   },
   computed: {
-    isMultiParagraph() {
-      if (typeof this.alertCopy == "string") {
-        return false;
-      }
-      return true;
-    }
+    alertHeadline(){
+      return this.getCmsContent(this.cmsWidgetName, 'HeadlineText');
+    },
+    alertCopy(){
+      return this.getCmsContent(this.cmsWidgetName, 'BodyText');
+    },
   },
 };
 </script>