From 5ab0d527b28a41744b730170187fc11fdfb1e141 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 12 May 2022 16:39:41 -0400
Subject: [PATCH 1/4] CSR-408 | Refactor alerts and alertcopy interaction

---
 src/ux-components/alert/alert.vue | 34 ++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 8170a69a6..8d04d2972 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -5,15 +5,17 @@
     :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
   >
     <p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
-    <p v-if="splitAlertCopyForLink.length">
-      <template v-for="copy in splitAlertCopyForLink" :key="copy">
-        <span v-if="copy.includes('routerLink:')" class="m-0 text-body">
-          <router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
-        </span>
-        <span v-else class="m-0 text-body" v-html="copy"></span>
-      </template>
-    </p>
-    <p v-else class="m-0 text-body" v-html="alertCopy"></p>
+    <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
+      <p class="m-0 text-body small" v-if="!paragraph.includes('routerLink:')" v-html="paragraph"></p>
+      <p class="m-0 text-body small" v-else>
+        <template v-for="copy in splitParagraphForRouterLink(paragraph)" :key="copy">
+          <span v-if="!copy.includes('routerLink:')" v-html="copy"></span>
+          <span v-else>
+            <router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
+          </span>
+        </template>
+      </p>
+    </template>
     <button
       type="button"
       class="btn-close p-2"
@@ -57,10 +59,18 @@ export default {
     },
     alertCopy(){
       return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
+      //return "<p style='display:none'>This is just a long string. {routerLink:estimate,provide your VIN} This is just a long string.</p>How Did you Even manage this?<p>This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.</p>";
     },
-    splitAlertCopyForLink(){
-      // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
-      return this.alertCopy.split(/{(.*?)}/g);
+    splitAlertCopyForParagraphTag(){
+      // splits the alertCopy on <p ... > (with or without attributes) and </p>
+      // filter removes empty strings that are a result of string.split with regex
+      return this.alertCopy.split(/(?:<p(?:.*?)>)|(?:<\/p>)/g).filter(paragraph => paragraph !== "");
+    },
+  },
+  methods: {
+    splitParagraphForRouterLink(paragraph){
+      // splits paragraph on { ... } such as {routerlink: ...}
+      return paragraph.split(/{(.*?)}/g);
     }
   },
 };

From 255e3710309067577b6ea5bb0683929e669ab901 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 13 May 2022 09:55:07 -0400
Subject: [PATCH 2/4] CSR-417: small fix to aria-required attribute on
 button-question

---
 src/common-components/button-question/button-question.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 369bf1c06..a2e3f9625 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -5,8 +5,8 @@
       <span class="fs-5 fw-bold w-100">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
-        <legend class="sr-only" :data-focus-target="groupName" tabindex="-1">
+      <fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName">
+        <legend class="sr-only" :data-focus-target="groupName" :id="groupName" tabindex="-1">
           {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
         </legend>
           <div :class="getComponentWrapperClasses">

From 4ec5217daeb8c56370c5af8f2f7962690de3c1a8 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Fri, 13 May 2022 10:44:43 -0400
Subject: [PATCH 3/4] CSR-408 | Refactor and Fix Unrelated Bugs

Bugs fixed:
-Compile time error regarding logic done in "computed"
-Forward button now updates correctly on license-plate-lookup when VIN is changed.

Refactored alert.vue to make it more readable
---
 src/layouts/vin-lookup/vin-lookup.vue | 16 +++++++++++---
 src/ux-components/alert/alert.vue     | 30 ++++++++++++++++++++-------
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index f6c3b5ecb..27be92781 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -192,12 +192,17 @@ export default {
       vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
     };
   },
+  watch: {
+    vin() {
+      this.$refs.funnelFooter.updateButtonText(
+        this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
+      );
+    }
+  },
   computed: {
     perfectMatchNewVinAlert() {
         const isVinPerfectMatch = this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore();
-        if (isVinPerfectMatch) {
-          this.isCarIdDifferent = false;
-        }
+        this.updateIsCarIdDifferent(isVinPerfectMatch);
         return isVinPerfectMatch;
     },
     MatchedDifferentVehicleAlertHeader(){
@@ -269,6 +274,11 @@ export default {
         );
       });
     },
+    updateIsCarIdDifferent(isVinPerfectMatch){
+      if (isVinPerfectMatch) {
+        this.isCarIdDifferent = false;
+      }
+    },
     backButtonAction() {
       if (store.getters.vehicle.vin) {
         this.$router.navigate(this.navigationScenarios.CLICKED_BACK_WITH_VIN, this.$route);
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 8d04d2972..faff0861c 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -6,12 +6,12 @@
   >
     <p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
     <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
-      <p class="m-0 text-body small" v-if="!paragraph.includes('routerLink:')" v-html="paragraph"></p>
+      <p class="m-0 text-body small" v-if="!doesCopyContainRouterLink(paragraph)" v-html="paragraph"></p>
       <p class="m-0 text-body small" v-else>
-        <template v-for="copy in splitParagraphForRouterLink(paragraph)" :key="copy">
-          <span v-if="!copy.includes('routerLink:')" v-html="copy"></span>
+        <template v-for="copy in splitCopyForRouterLink(paragraph)" :key="copy">
+          <span v-if="!doesCopyContainRouterLink(copy)" v-html="copy"></span>
           <span v-else>
-            <router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
+            <router-link :to="{query: {fmgPage: `${getRouterLinkRouteFromCopy(copy)}`}, name: 'root'}">{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link>
           </span>
         </template>
       </p>
@@ -59,7 +59,6 @@ export default {
     },
     alertCopy(){
       return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
-      //return "<p style='display:none'>This is just a long string. {routerLink:estimate,provide your VIN} This is just a long string.</p>How Did you Even manage this?<p>This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.</p>";
     },
     splitAlertCopyForParagraphTag(){
       // splits the alertCopy on <p ... > (with or without attributes) and </p>
@@ -68,9 +67,24 @@ export default {
     },
   },
   methods: {
-    splitParagraphForRouterLink(paragraph){
-      // splits paragraph on { ... } such as {routerlink: ...}
-      return paragraph.split(/{(.*?)}/g);
+    doesCopyContainRouterLink(copy) {
+      return copy.includes('routerLink:');
+    },
+    splitCopyForRouterLink(copy){
+      // splits copy on { ... } such as {routerlink: ...}
+      return copy.split(/{(.*?)}/g);
+    },
+    getRouterLinkRouteFromCopy(copy){
+      // sample input:      {routerLink:estimate,provide your VIN}
+      // first split would return      'estimate,provide your VIN'
+      // second split would return     'estimate'
+      return copy.split(':')[1].split(',')[0];
+    },
+    getRouterLinkDisplayTextFromCopy(copy){
+      // sample input:     {routerLink:estimate,provide your VIN}
+      // first split would return     'estimate,provide your VIN'
+      // second split would return             'provide your VIN'
+      return copy.split(':')[1].split(',')[1];
     }
   },
 };

From 3c7f79571219f1723de9bf22d3a53c53862b48c0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 13 May 2022 14:24:02 -0400
Subject: [PATCH 4/4] CSR-564, CSR-552 QA bug fixes.

Update vinInformation line spacing, image size, spacing. Update error message letter case. Update alert color.
---
 src/constants/error-messages.js                            | 4 ++--
 src/layouts/vin-lookup/vin-information/vin-information.vue | 4 ++++
 src/layouts/vin-lookup/vin-lookup.vue                      | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index a064cfecb..b4d073496 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -18,8 +18,8 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
-    SERVICE_ZIP_REQUIRED: "Please enter your Service ZIP",
-    SERVICE_ZIP_FORMAT: "Please enter a valid Service ZIP",
+    SERVICE_ZIP_REQUIRED: "Please enter your service ZIP",
+    SERVICE_ZIP_FORMAT: "Please enter a valid service ZIP",
     VIN_REQUIRED: "Please enter your VIN",
     VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
     OPTION_REQUIRED: "Please select an option",
diff --git a/src/layouts/vin-lookup/vin-information/vin-information.vue b/src/layouts/vin-lookup/vin-information/vin-information.vue
index 3e5b67a91..91cee616f 100644
--- a/src/layouts/vin-lookup/vin-information/vin-information.vue
+++ b/src/layouts/vin-lookup/vin-information/vin-information.vue
@@ -41,6 +41,9 @@ export default {
     font-size: .875rem;
     color: $gray-600;
   }
+  li {
+    line-height: 26px;
+  }
   a {
     font-size: .875rem;
   }
@@ -70,6 +73,7 @@ export default {
     overflow: hidden;
     opacity: 0;
     img {
+      max-width: 420px;
       width: 117%;
       height: auto;
     }
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 27be92781..6e3a83653 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -27,7 +27,7 @@
             />
           </div>
         </div>
-        <div class="row my-2">
+        <div class="row mb-2">
           <div class="col">
             <vinInformation />
           </div>
@@ -92,7 +92,7 @@
           class="my-3"
           v-model="customAlertData"
           v-if="vinNotFound"
-          alertClass="alert-warning"
+          alertClass="alert-danger"
           cmsWidgetName="VinNotFound"
         />
         <alert