From 4f6f6242a0884bddac594730307aa1957cd1ed54 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 15 Mar 2022 18:52:36 -0400
Subject: [PATCH] CSR-319: expand Alert component to allow for multiple
 paragraphs

---
 src/layouts/component-test/component-test.vue | 10 ++++++
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 .../windshield-options/windshield-options.vue |  2 +-
 src/ux-components/alert/alert.spec.js         | 31 ++++++++++++++++++-
 src/ux-components/alert/alert.vue             | 17 ++++++++--
 5 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 5ff4141fd..e14899d56 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1129,6 +1129,16 @@
       />
     </div>
   </div>
+  <div class="row my-2">
+    <div class="col">
+      <alert
+      alertClass="alert-success"
+      alertHeadline="Multi-Paragraph Alert"
+      :alertCopy="['This is an example of a MULTI-PARAGRAPH alert, which takes an array of strings instead of a single string value for alertCopy.', 'This is the second item in the array of strings.']"
+      v-bind:isDismissible="false"
+      />
+    </div>
+  </div>
   </div>
   </template>
 
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 20df6fb57..8520e568c 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -26,7 +26,7 @@
             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."
+            :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
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 30f8c15d7..edfe09dd3 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -12,7 +12,7 @@
             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."
+            :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 ref="windshieldChipCountQuestion" 
diff --git a/src/ux-components/alert/alert.spec.js b/src/ux-components/alert/alert.spec.js
index 3d0843e10..be6dc8df7 100644
--- a/src/ux-components/alert/alert.spec.js
+++ b/src/ux-components/alert/alert.spec.js
@@ -1 +1,30 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import alert from "./alert";
+
+describe("alert.vue", () => {
+
+  it("Should set isMultiParagraph to true if alertCopy is an array of strings", async () => {
+    // Arrange
+    const wrapper = shallowMount(alert, {
+      propsData: {
+        alertCopy: ["one", "two"]
+      },
+    });
+
+    // Assert
+    expect(wrapper.vm.isMultiParagraph).toBe(true);
+  });
+
+  it("Should set isMultiParagraph to false if alertCopy is a single string", async () => {
+    // Arrange
+    const wrapper = shallowMount(alert, {
+      propsData: {
+        alertCopy: "three"
+      },
+    });
+
+    // Assert
+    expect(wrapper.vm.isMultiParagraph).toBe(false);
+  });
+
+});
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 89bd366a3..56e97cb4d 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -5,7 +5,12 @@
     :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
   >
     <p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
-    <p class="m-0 text-body small">{{ alertCopy }}</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>
     <button
       type="button"
       class="btn-close p-2"
@@ -30,7 +35,7 @@ export default {
   name: "alert",
   props: {
     alertHeadline: String,
-    alertCopy: String,
+    alertCopy: [Array, String],
     isDismissible: Boolean,
     /*
     alertClass class names:
@@ -41,6 +46,14 @@ export default {
     */
     alertClass: String,
   },
+  computed: {
+    isMultiParagraph() {
+      if (typeof this.alertCopy == "string") {
+        return false;
+      }
+      return true;
+    }
+  },
 };
 </script>