From 00d26e18743ba0ac4f1263896c2efcf5ba386711 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 23 Feb 2023 11:11:56 -0500
Subject: [PATCH 01/12] remove vehicle-banner from coverage-statement page

---
 src/layouts/coverage-statement/coverage-statement.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index e73ff61b..a73c836a 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -8,11 +8,6 @@
       <siteHeader
         cmsWidgetName="SiteHeaderWidget"
       />
-      <vehicleBanner
-        cmsWidgetName="VehicleBannerWidget"
-        :displayGenericVehicleImage="false"
-        class="mb-0"
-      />
       <div class="fade-on-route-transition sub-container make-tall">
         <textBlock
             cmsWidgetName="verifyingCoverageStatement"

From f463992367e4733e36e93bdd4f35047c26291e42 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Fri, 24 Feb 2023 14:15:03 -0500
Subject: [PATCH 02/12] pull in content group widget for bold font

---
 .../coverage-statement/coverage-statement.vue        | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index a73c836a..7305b2b4 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -15,10 +15,9 @@
             justifyText="center"
             class="mt-4 mb-4"
         />
-        <textBlock
-            cmsWidgetName="continueWithSchedulingCopy"
-            typeStyle="body"
-            class="mt-0"
+        <div
+            v-html="continueWithSchedulingBodyText"
+            class="mt-0" 
         />
         <textBlock
             cmsWidgetName="whatHappensNextCopy"
@@ -72,6 +71,11 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    continueWithSchedulingBodyText() {
+      return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
+    }
+  },
   async beforeRouteEnter(to, from, next) {
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 

From 5f693ad3ea066a5b3612880ad0b28492f3f2383a Mon Sep 17 00:00:00 2001
From: katie <katie.kroell@safelite.com>
Date: Fri, 24 Feb 2023 14:18:53 -0500
Subject: [PATCH 03/12] styling change from ssr-249

---
 src/layouts/coverage-statement/coverage-statement.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 7305b2b4..a83db8f2 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -8,7 +8,7 @@
       <siteHeader
         cmsWidgetName="SiteHeaderWidget"
       />
-      <div class="fade-on-route-transition sub-container make-tall">
+      <div class="fade-on-route-transition sub-container make-tall px-5">
         <textBlock
             cmsWidgetName="verifyingCoverageStatement"
             typeStyle="h5"

From 442405e8a246ef319e0d5f29d096c1926725b302 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Fri, 24 Feb 2023 16:11:50 -0500
Subject: [PATCH 04/12] start of logic for displaying coverage statement

---
 .../coverage-statement/coverage-statement.vue | 45 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index a83db8f2..77efc968 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -26,6 +26,17 @@
         <textBlock
             cmsWidgetName="UnverifiedADASNextStepsWidget"
             typeStyle="body"
+            v-if="unverifiedADASNextSteps"
+        />
+        <textBlock
+            cmsWidgetName="UnverifiedNonADASNextStepsWidget"
+            typeStyle="body"
+            v-if="unverifiedNonADASNextSteps"
+        />
+        <textBlock
+            cmsWidgetName="UnverifiedNonADASRepairWidget"
+            typeStyle="body"
+            v-if="unverifiedNonADASRepair"
         />
         <a href="#!" data-bs-toggle="modal" data-bs-target="#RecalModal" aria-label="Modal window">Recalibration</a>
         <modal cmsWidgetName="RecalModal" />
@@ -55,6 +66,7 @@ import modal from "@/digital-components/modal/modal";
 // Import Supporting Files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
+import { useMainStore } from "@/store"
 
 export default {
   name: 'coverage-statement',
@@ -69,7 +81,11 @@ export default {
     modal,
   },
   data() {
-    return {};
+    return {
+      unverifiedADASNextSteps: false,
+      unverifiedNonADASNextSteps: false,
+      unverifiedNonADASRepair: false,
+    };
   },
   computed: {
     continueWithSchedulingBodyText() {
@@ -77,6 +93,7 @@ export default {
     }
   },
   async beforeRouteEnter(to, from, next) {
+    // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
     // Settle promises and get results
@@ -93,6 +110,9 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);
     });
   },
+  mounted() {
+    this.coverageStatementToDisplay();
+  },
   methods: {
     arePagePrerequisiteValid() {
       return true;
@@ -103,6 +123,29 @@ export default {
        */
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
+    coverageStatementToDisplay() {
+      // check if repair or replace
+      const isRepair = useMainStore().order.damage.isRepair; 
+
+      if (isRepair) {
+        this.unverifiedNonADASRepair === true
+      }
+      else {
+        // get array of parts
+        let parts = useMainStore().order.lineItems.glassParts;
+  
+        // loop through parts to check for ADAS
+        for (let part of parts) {
+          if (part.requiresRecalibration) {
+            this.unverifiedADASNextSteps === true
+          }
+          else {
+            this.unverifiedNonADASNextSteps === true
+          }
+        }
+      }
+    },
+
     async forwardButtonAction() {},
     resetDependentState() {},
   },

From 1898949565c8211f19b39d250762d8a6e5024b6d Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Mon, 27 Feb 2023 11:33:19 -0500
Subject: [PATCH 05/12] logic to display correct coverage statement

---
 .../coverage-statement/coverage-statement.vue | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 77efc968..dc1d5bae 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -82,11 +82,21 @@ export default {
   },
   data() {
     return {
+      isRepair: useMainStore().order.damage.isRepair,
       unverifiedADASNextSteps: false,
       unverifiedNonADASNextSteps: false,
       unverifiedNonADASRepair: false,
     };
   },
+  created() {
+    // check if repair or replace, if repair, display NonADASRepair
+    if (this.isRepair) {
+      this.unverifiedNonADASRepair = true;
+    }
+    else {
+      this.coverageStatementToDisplay();
+    }
+  },
   computed: {
     continueWithSchedulingBodyText() {
       return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
@@ -110,9 +120,6 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);
     });
   },
-  mounted() {
-    this.coverageStatementToDisplay();
-  },
   methods: {
     arePagePrerequisiteValid() {
       return true;
@@ -124,31 +131,24 @@ export default {
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
     coverageStatementToDisplay() {
-      // check if repair or replace
-      const isRepair = useMainStore().order.damage.isRepair; 
-
-      if (isRepair) {
-        this.unverifiedNonADASRepair === true
-      }
-      else {
-        // get array of parts
-        let parts = useMainStore().order.lineItems.glassParts;
+      // get array of parts for vehicle
+      let parts = useMainStore().order.lineItems.glassParts;
   
-        // loop through parts to check for ADAS
-        for (let part of parts) {
-          if (part.requiresRecalibration) {
-            this.unverifiedADASNextSteps === true
-          }
-          else {
-            this.unverifiedNonADASNextSteps === true
-          }
+      // loop through parts to check for ADAS
+      for (let part of parts) {
+        // if ADAS, display ADASNextSteps
+        if (part.requiresRecalibration) {
+          this.unverifiedADASNextSteps = true
+        }
+        // if non-ADAS, display NonADASNextSteps
+        else {
+          this.unverifiedNonADASNextSteps = true
         }
       }
-    },
-
+    }
+  },
     async forwardButtonAction() {},
     resetDependentState() {},
-  },
 };
 </script>
 

From d720533b84f30b765ed224b368b1641f07d1419d Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Mon, 27 Feb 2023 15:40:40 -0500
Subject: [PATCH 06/12] start of linking to recal modal

---
 src/constants/dynamic-strings.js              |  3 +-
 src/helpers/cms-content-helper.js             |  6 +-
 .../coverage-statement/coverage-statement.vue | 56 +++++++++++++++----
 3 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/src/constants/dynamic-strings.js b/src/constants/dynamic-strings.js
index c526e45a..fdadc6f1 100644
--- a/src/constants/dynamic-strings.js
+++ b/src/constants/dynamic-strings.js
@@ -1,7 +1,8 @@
 const dynamicStrings = {
     GLOBAL_STATE: "globalState",
     CUSTOM: "custom",
-    ROUTER_LINK: "routerLink:"
+    ROUTER_LINK: "routerLink:",
+    TEXT_LINK: "textLink:"
   };
   
   export { dynamicStrings };
\ No newline at end of file
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 9a9250ab..95fb1850 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -181,10 +181,14 @@ function mapStringToState(str) {
     return stringBuilder.trimStart();
   }
 
-  export function doesCopyContainRouterLink(copy) {
+export function doesCopyContainRouterLink(copy) {
     return copy.includes(this.dynamicStrings.ROUTER_LINK);
 }
 
+export function doesCopyContainTextLink(copy) {
+  return copy.includes(this.dynamicStrings.TEXT_LINK);
+}
+
 export function splitCopyOnCMSPlaceHolder(copy) {
     // splits copy on { ... } such as {routerlink: ...}
     return copy.split(/{(.*?)}/g);
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index dc1d5bae..41d7e197 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -23,11 +23,24 @@
             cmsWidgetName="whatHappensNextCopy"
             class="mt-4 mb-2 fw-bold"
         />
-        <textBlock
-            cmsWidgetName="UnverifiedADASNextStepsWidget"
-            typeStyle="body"
-            v-if="unverifiedADASNextSteps"
-        />
+        <div v-if="unverifiedADASNextSteps">
+          <div v-for="copy in splitADASCoverageStatementCopy" :key="copy">
+          <span 
+            v-if="!doesCopyContainTextLink(copy)" 
+            v-html="copy">
+          </span>
+          <span v-else>
+              <text-link
+                linkType="text"
+                :text="getRouterLinkDisplayTextFromCopy(copy)"
+                href="#!"
+                data-bs-toggle="modal"
+                data-bs-target="#RecalModal"
+                aria-label="Modal window"
+              />
+          </span>
+          />
+        </div>
         <textBlock
             cmsWidgetName="UnverifiedNonADASNextStepsWidget"
             typeStyle="body"
@@ -38,8 +51,6 @@
             typeStyle="body"
             v-if="unverifiedNonADASRepair"
         />
-        <a href="#!" data-bs-toggle="modal" data-bs-target="#RecalModal" aria-label="Modal window">Recalibration</a>
-        <modal cmsWidgetName="RecalModal" />
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -49,6 +60,7 @@
         />
       </div>
     </div>
+    </div>
   </Form>
 </template>
 <script>
@@ -62,11 +74,19 @@ import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'
 import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import textBlock from "@/digital-components/text-block/text-block";
 import modal from "@/digital-components/modal/modal";
+import textLink from '@/ux-components/text-link/text-link.vue';
 
 // Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { 
+  fetchCmsContentForPage,
+  doesCopyContainTextLink,
+  splitCopyOnCMSPlaceHolder,
+  getRouterLinkDisplayTextFromCopy,
+  getRouterLinkRouteFromCopy
+} from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
-import { useMainStore } from "@/store"
+import { useMainStore } from "@/store";
+import { regex } from "@/helpers/validation-rules";
 
 export default {
   name: 'coverage-statement',
@@ -79,6 +99,7 @@ export default {
     vehicleBanner,
     textBlock,
     modal,
+    textLink,
   },
   data() {
     return {
@@ -94,12 +115,19 @@ export default {
       this.unverifiedNonADASRepair = true;
     }
     else {
-      this.coverageStatementToDisplay();
+      this.displayReplaceCoverageStatement();
     }
   },
   computed: {
     continueWithSchedulingBodyText() {
       return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
+    },
+    unverifiedADASNextStepsBodyText() {
+      return this.getCmsContent('UnverifiedADASNextStepsWidget', 'Text');
+    },
+    splitADASCoverageStatementCopy() {
+      // Splits content when brackets are found in text so that text can be looped through and text-link can be injected when needed
+      return this.splitCopyOnCMSPlaceHolder(this.unverifiedADASNextStepsBodyText);
     }
   },
   async beforeRouteEnter(to, from, next) {
@@ -121,6 +149,10 @@ export default {
     });
   },
   methods: {
+    doesCopyContainTextLink,
+    splitCopyOnCMSPlaceHolder,
+    getRouterLinkDisplayTextFromCopy,
+    getRouterLinkRouteFromCopy,
     arePagePrerequisiteValid() {
       return true;
     },
@@ -130,7 +162,7 @@ export default {
        */
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
-    coverageStatementToDisplay() {
+    displayReplaceCoverageStatement() {
       // get array of parts for vehicle
       let parts = useMainStore().order.lineItems.glassParts;
   
@@ -145,7 +177,7 @@ export default {
           this.unverifiedNonADASNextSteps = true
         }
       }
-    }
+    },
   },
     async forwardButtonAction() {},
     resetDependentState() {},

From f4230c58580083269b60ca95f6a0b6f323e604d7 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Tue, 28 Feb 2023 21:23:37 +0530
Subject: [PATCH 07/12] SSR-231

UI Capability page
---
 src/constants/endpoints.js                    |  4 ++++
 .../capability-questions.spec.js              | 11 +++++------
 src/store/index.js                            | 19 +++++++++++++++++++
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index 19400bc2..36d21a69 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -43,6 +43,10 @@ const endpoints = {
     url: "/parts/api/v1/parts/capability-questions",
     method: "GET",
   },
+  GetPartFromCapabilityAnswer: {
+    url: "/parts/api/v1/parts/part-from-capability-answer",
+    method: "POST",
+},
   GetVehicle: {
     url: "/vehicle/api/v1/vehicle/lookup",
     method: "GET",
diff --git a/src/layouts/capability-questions/capability-questions.spec.js b/src/layouts/capability-questions/capability-questions.spec.js
index 0e488e9e..5447597f 100644
--- a/src/layouts/capability-questions/capability-questions.spec.js
+++ b/src/layouts/capability-questions/capability-questions.spec.js
@@ -259,7 +259,7 @@ describe("capabilityQuestions.vue", () => {
             expect(wrapper.vm.saveCapabilityQuestionAnswers).toHaveBeenCalled;
             wrapper.unmount();
         });
-        test("Should call GET_PARTS_OR_QUESTIONS API", async () => {
+        test("Should call GET_PART_FROM_CAPABILITY_QUESTION_ANSWER API", async () => {
             // Arrange
             const { wrapper } = setupMocks({});
 
@@ -279,13 +279,12 @@ describe("capabilityQuestions.vue", () => {
                     ],
                 },
             ];
-            useMainStore().getPartsOrQuestions = jest.fn(() => {
+            wrapper.vm.dispatchStoreAction = jest.fn(() => {
                 return {
-                    data: {
-                        partsOrQuestions: [],
-                    },
+                    data: [],
                 };
             });
+            
 
             // Act
             wrapper.vm.forwardButtonAction();
@@ -293,7 +292,7 @@ describe("capabilityQuestions.vue", () => {
             await nextTick();
 
             //Assert
-            expect(wrapper.vm.getPartsOrQuestions).toHaveBeenCalled;
+            expect(wrapper.vm.getPartFromCapabilityQuestionAnswer).toHaveBeenCalled;
 
             wrapper.unmount();
         });
diff --git a/src/store/index.js b/src/store/index.js
index 65f26992..19aff5c1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -395,6 +395,25 @@ export const useMainStore = defineStore({
         });
       },
 
+      getPartFromCapabilityQuestionAnswer(glassLocation) {
+        const pageData =this.pageData(issPageValues.CAPABILITY_QUESTIONS);
+
+        const part = pageData.partsOrQuestions.find((x) => x.glassLocation === glassLocation)
+            .parts[0];
+        const capabilityQuestionAnswers = this.order.damage.capabilityQuestionAnswers;
+        const capabilityQuestionAnswersForPart = capabilityQuestionAnswers.find(
+            (x) => x.glassLocation === glassLocation
+        );
+
+        return globalMethods.callHttpClient({
+            method: endpoints.GetPartFromCapabilityAnswer.method,
+            endpoint: endpoints.GetPartFromCapabilityAnswer.url,
+            payload: {
+                part,
+                capabilityAnswerResults: capabilityQuestionAnswersForPart,
+            },
+        });
+    },
       lookupVehicleByVin(vin) {
         return globalMethods.callHttpClient({
           method: endpoints.LookupVehicleByVin.method,

From 85e4d0252c606678cc32cf2803e9b177b3025289 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 28 Feb 2023 11:00:13 -0500
Subject: [PATCH 08/12] recal modal link

---
 .../coverage-statement/coverage-statement.vue | 58 +++++++++++++------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 41d7e197..bba95c7c 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -23,23 +23,31 @@
             cmsWidgetName="whatHappensNextCopy"
             class="mt-4 mb-2 fw-bold"
         />
-        <div v-if="unverifiedADASNextSteps">
-          <div v-for="copy in splitADASCoverageStatementCopy" :key="copy">
-          <span 
-            v-if="!doesCopyContainTextLink(copy)" 
-            v-html="copy">
-          </span>
-          <span v-else>
-              <text-link
-                linkType="text"
-                :text="getRouterLinkDisplayTextFromCopy(copy)"
-                href="#!"
-                data-bs-toggle="modal"
-                data-bs-target="#RecalModal"
-                aria-label="Modal window"
-              />
-          </span>
-          />
+        <div> 
+          <ol>
+            <li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
+              <!-- no textLink -->
+              <span 
+                v-if="!doesCopyContainTextLink(listItem)"
+                v-html="listItem"></span>
+              <!-- with textLink-->
+              <template
+                v-else
+                v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
+                :key="copy">
+                <span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
+                <span v-else>
+                  <textLink
+                      linkType="text"
+                      :text="getRouterLinkDisplayTextFromCopy(copy)"
+                      href="#!"
+                      data-bs-toggle="modal"
+                      data-bs-target="#RecalModal"
+                      aria-label="Modal window" />
+                </span>
+              </template>
+            </li>
+          </ol>
         </div>
         <textBlock
             cmsWidgetName="UnverifiedNonADASNextStepsWidget"
@@ -51,6 +59,7 @@
             typeStyle="body"
             v-if="unverifiedNonADASRepair"
         />
+        <modal cmsWidgetName="RecalModal" />
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -60,7 +69,6 @@
         />
       </div>
     </div>
-    </div>
   </Form>
 </template>
 <script>
@@ -86,7 +94,6 @@ import {
 } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { useMainStore } from "@/store";
-import { regex } from "@/helpers/validation-rules";
 
 export default {
   name: 'coverage-statement',
@@ -128,6 +135,9 @@ export default {
     splitADASCoverageStatementCopy() {
       // Splits content when brackets are found in text so that text can be looped through and text-link can be injected when needed
       return this.splitCopyOnCMSPlaceHolder(this.unverifiedADASNextStepsBodyText);
+    },
+    arrayOfListItemsFromBodyText() {
+      return this.getArrayOfListItemsFromRawCmsCopy(this.unverifiedADASNextStepsBodyText);
     }
   },
   async beforeRouteEnter(to, from, next) {
@@ -178,6 +188,16 @@ export default {
         }
       }
     },
+    stripOlTagFromCopy(copy) {
+      const regex = /(?:<ol(?:.*?)>)|(?:<\/ol>)/g;
+      return copy.replace(regex, "");
+    },
+    getArrayOfListItemsFromRawCmsCopy(copy) {
+      const withoutOlTags = this.stripOlTagFromCopy(copy);
+      return withoutOlTags
+          .split(/(?:<li(?:.*?)>)|(?:<\/li>)/g)
+          .filter((lineItem) => lineItem);
+    },
   },
     async forwardButtonAction() {},
     resetDependentState() {},

From 87c7009a50e9ee845cf179e7fe9a602e3b72386a Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 28 Feb 2023 11:20:40 -0500
Subject: [PATCH 09/12] add missing v-if for ADAS replace

---
 src/layouts/coverage-statement/coverage-statement.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index bba95c7c..4ba4f5eb 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -23,7 +23,7 @@
             cmsWidgetName="whatHappensNextCopy"
             class="mt-4 mb-2 fw-bold"
         />
-        <div> 
+        <div v-if="unverifiedADASNextSteps"> 
           <ol>
             <li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
               <!-- no textLink -->

From 6fece25716ed0f92d8e39cd1e3a7e99d2234b7e3 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 28 Feb 2023 15:42:28 -0500
Subject: [PATCH 10/12] update property to match CMS changes

---
 src/layouts/coverage-statement/coverage-statement.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 4ba4f5eb..381a1913 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -130,7 +130,7 @@ export default {
       return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
     },
     unverifiedADASNextStepsBodyText() {
-      return this.getCmsContent('UnverifiedADASNextStepsWidget', 'Text');
+      return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText');
     },
     splitADASCoverageStatementCopy() {
       // Splits content when brackets are found in text so that text can be looped through and text-link can be injected when needed

From 564d4db313870d4e8dd3ba63164b145e7f6f50a5 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 28 Feb 2023 16:01:30 -0500
Subject: [PATCH 11/12] create new component for recal modal to match mocks

---
 .../coverage-statement/coverage-statement.vue |   4 +-
 .../recal-modal/recal-modal.vue               | 144 ++++++++++++++++++
 2 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 src/layouts/coverage-statement/recal-modal/recal-modal.vue

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 381a1913..8bc6e488 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -59,7 +59,7 @@
             typeStyle="body"
             v-if="unverifiedNonADASRepair"
         />
-        <modal cmsWidgetName="RecalModal" />
+        <recalModal cmsWidgetName="RecalModal" />
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -83,6 +83,7 @@ import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import textBlock from "@/digital-components/text-block/text-block";
 import modal from "@/digital-components/modal/modal";
 import textLink from '@/ux-components/text-link/text-link.vue';
+import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
 
 // Import Supporting Files
 import { 
@@ -107,6 +108,7 @@ export default {
     textBlock,
     modal,
     textLink,
+    recalModal
   },
   data() {
     return {
diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
new file mode 100644
index 00000000..dc8566b8
--- /dev/null
+++ b/src/layouts/coverage-statement/recal-modal/recal-modal.vue
@@ -0,0 +1,144 @@
+<template>
+    <!-- Modal -->
+    <div
+        class="modal fade modal-component"
+        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
+        :id="cmsWidgetName"
+        tabindex="-1"
+        aria-labelledby="ModalComponentLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+                </div>
+                <div class="modal-body ps-4 pe-4 pt-4 pb-4">
+                    <h5 class="mb-4 text-center" v-html="ModalHeadline"></h5>
+                    <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
+                    <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
+                    <p class="mb-0" v-html="ModalBodyText"></p>
+                    <p
+                        class="my-4 caption modal-sub-body"
+                        v-if="ModalSubBodyText"
+                        v-html="ModalSubBodyText"></p>
+                </div>
+                <div class="modal-footer px-5 py-4">
+                    <buttonMain
+                        isPrimary
+                        class="w-100"
+                        ref="buttonMain"
+                        suppressLoader
+                        :buttonText="ModalCloseButtonText"
+                        @click-event="buttonClick"
+                        data-bs-dismiss="modal" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import buttonMain from "@/ux-components/button-main/button-main";
+
+export default {
+    name: "modal",
+    props: {
+        cmsWidgetName: String,
+    },
+    computed: {
+        ModalHeadline() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        ModalSubheadertext() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        ModalBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },
+        ModalSubBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
+        },
+        ModalImage() {
+            return this.getCmsContent(this.cmsWidgetName, "Image");
+        },
+        ModalCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+    },
+    methods: {
+        resetButtonStyle() {
+            this.$refs.buttonMain.resetButtonStyle();
+        },
+    },
+    components: {
+        buttonMain,
+    },
+};
+</script>
+
+<style lang="scss">
+.modal {
+    top: auto;
+    bottom: 0;
+    h5,
+    strong,
+    .subheader-text {
+        color: $black;
+    }
+    .modal-header {
+        border-bottom: none;
+        .btn-close {
+            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+            opacity: 1;
+        }
+    }
+    &.modal-component {
+        .modal-dialog {
+            max-width: 576px;
+            margin: 0 auto;
+            .modal-content {
+                margin: 0 auto;
+                box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
+                border-radius: 1.5rem 1.5rem 0 0;
+                .modal-body {
+                    .modal-sub-body {
+                        color: $gray-600;
+                    }
+                    ul {
+                        margin-bottom: 0;
+                    }
+                    p {
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+            }
+            &.modal-dialog-centered {
+                align-items: flex-end;
+                min-height: 100%;
+            }
+        }
+        .modal-footer {
+            border-top: none;
+            background-color: $gray-100;
+            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
+            button {
+                margin: 0;
+            }
+        }
+    }
+}
+body {
+    .modal-backdrop {
+        height: 100%;
+        &.show {
+            opacity: 0.4;
+        }
+    }
+}
+</style>
\ No newline at end of file

From 7f1be1feeb1f12a513542af8e1272d1fa2d75b5e Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 28 Feb 2023 16:32:53 -0500
Subject: [PATCH 12/12] pull in damageString to display on statement

---
 .../coverage-statement/coverage-statement.vue | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 8bc6e488..22dde734 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -49,16 +49,14 @@
             </li>
           </ol>
         </div>
-        <textBlock
-            cmsWidgetName="UnverifiedNonADASNextStepsWidget"
-            typeStyle="body"
-            v-if="unverifiedNonADASNextSteps"
-        />
-        <textBlock
-            cmsWidgetName="UnverifiedNonADASRepairWidget"
-            typeStyle="body"
-            v-if="unverifiedNonADASRepair"
-        />
+        <div
+          v-if="unverifiedNonADASNextSteps"
+          v-html="unverifiedNonADASNextStepsBodyText" >
+        </div>
+        <div
+          v-if="unverifiedNonADASRepair"  
+          v-html="unverifiedNonADASRepairBodyText" >
+        </div>
         <recalModal cmsWidgetName="RecalModal" />
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
@@ -94,6 +92,7 @@ import {
   getRouterLinkRouteFromCopy
 } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
+import { getDamageString } from '@/helpers/damage-helper.js';
 import { useMainStore } from "@/store";
 
 export default {
@@ -132,7 +131,13 @@ export default {
       return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
     },
     unverifiedADASNextStepsBodyText() {
-      return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText');
+      return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText').replaceAll("{custom:damage}", getDamageString());
+    },
+    unverifiedNonADASNextStepsBodyText() {
+      return this.getCmsContent('UnverifiedNonADASNextStepsWidget', 'BodyText').replaceAll("{custom:damage}", getDamageString());
+    },
+    unverifiedNonADASRepairBodyText() {
+      return this.getCmsContent('UnverifiedNonADASRepairWidget', 'BodyText');
     },
     splitADASCoverageStatementCopy() {
       // Splits content when brackets are found in text so that text can be looped through and text-link can be injected when needed