Merge pull request #443 from Safelite/feature/CSR-408

CSR-408 | Fix alert paragraphs w/ router-link and other bug fixes

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.updateIsCarIdDifferent(isVinPerfectMatch);
-          this.isCarIdDifferent = false;
-        }
         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);

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="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
-      <template v-for="copy in splitAlertCopyForLink" :key="copy">
+      <p class="m-0 text-body small" v-if="!doesCopyContainRouterLink(paragraph)" v-html="paragraph"></p>
-        <span v-if="copy.includes('routerLink:')" class="m-0 text-body">
+      <p class="m-0 text-body small" v-else>
-          <router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
+        <template v-for="copy in splitCopyForRouterLink(paragraph)" :key="copy">
-        </span>
+          <span v-if="!doesCopyContainRouterLink(copy)" v-html="copy"></span>
-        <span v-else class="m-0 text-body" v-html="copy"></span>
+          <span v-else>
-      </template>
+            <router-link :to="{query: {fmgPage: `${getRouterLinkRouteFromCopy(copy)}`}, name: 'root'}">{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link>
-    </p>
+          </span>
-    <p v-else class="m-0 text-body" v-html="alertCopy"></p>
+        </template>
+      </p>
+    </template>
     <button
       type="button"
       class="btn-close p-2"
@@ -58,9 +60,31 @@ export default {
     alertCopy(){
       return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
     },
-    splitAlertCopyForLink(){
+    splitAlertCopyForParagraphTag(){
-      // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
+      // splits the alertCopy on <p ... > (with or without attributes) and </p>
-      return this.alertCopy.split(/{(.*?)}/g);
+      // filter removes empty strings that are a result of string.split with regex
+      return this.alertCopy.split(/(?:<p(?:.*?)>)|(?:<\/p>)/g).filter(paragraph => paragraph !== "");
+    },
+  },
+  methods: {
+    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];
     }
   },
 };