From 143a00e315a79e304e0223beaf5d224d4addfd86 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 19 Sep 2022 13:06:10 -0400
Subject: [PATCH] CSR-848

*Put all package variation modal on test Quote page.
*Fix font color.
*Fix text wrap on cash/insurance button.
*Re-add router info for test page.
---
 src/common-components/modal/modal.vue         |  7 +-
 .../text-block/text-block.vue                 |  2 +-
 src/layouts/quote/quote.vue                   | 70 +++++++++++++++++++
 src/router/index.js                           |  7 +-
 .../list-button-horizontal.vue                |  8 ++-
 .../radio-service-package.vue                 | 14 +++-
 6 files changed, 103 insertions(+), 5 deletions(-)

diff --git a/src/common-components/modal/modal.vue b/src/common-components/modal/modal.vue
index 1352fa2f2..8c36cc5ea 100644
--- a/src/common-components/modal/modal.vue
+++ b/src/common-components/modal/modal.vue
@@ -6,7 +6,7 @@
         <div class="modal-body px-4 py-5">
           <img :src="this.ModalImage" class="w-100 mb-4" alt="" />
           <h5 class="mb-4" v-html="this.ModalHeadline"></h5>
-          <p class="fw-bold mb-2" v-html="this.ModalSubheadertext"></p>
+          <p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p>
           <p class="mb-0" v-html="this.ModalBodyText"></p>
         </div>
         <div class="modal-footer">
@@ -45,6 +45,11 @@ export default {
 
 <style lang="scss">
 .modal {
+  h5,
+  strong,
+  .subheader-text {
+    color: $black;
+  }
   &.modal-component {
     .modal-dialog {
       .modal-content {
diff --git a/src/common-components/text-block/text-block.vue b/src/common-components/text-block/text-block.vue
index 7c7557b25..88f3bda2a 100644
--- a/src/common-components/text-block/text-block.vue
+++ b/src/common-components/text-block/text-block.vue
@@ -34,5 +34,5 @@ export default {
       font-weight: 500;
     }
   }
-  
+
 </style>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 62d2aa2f8..c5779a7f2 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -30,6 +30,76 @@
       typeStyle="caption"
       class="mt-4"
       />
+      <h3 style="m-0">h1</h3>
+      <textBlock
+      cmsWidgetName="quoteDisclaimer"
+      justifyText="left"
+      typeStyle="h1"
+      class="mt-4"
+      />
+      <h3 style="m-0">h2</h3>
+      <textBlock
+      cmsWidgetName="quoteDisclaimer"
+      justifyText="left"
+      typeStyle="h2"
+      class="mt-4"
+      />
+      <h3 style="m-0">h3</h3>
+      <textBlock
+      cmsWidgetName="quoteDisclaimer"
+      justifyText="left"
+      typeStyle="h3"
+      class="mt-4"
+      />
+      <h3 style="m-0">h4</h3>
+      <textBlock
+      cmsWidgetName="quoteDisclaimer"
+      justifyText="left"
+      typeStyle="h4"
+      class="mt-4"
+      />
+      <h3 style="m-0">h5</h3>
+      <textBlock
+      cmsWidgetName="quoteDisclaimer"
+      justifyText="left"
+      typeStyle="h5"
+      class="mt-4"
+      />
+      <h3 style="m-0">h6</h3>
+      <textBlock
+      cmsWidgetName="quoteDisclaimer"
+      justifyText="left"
+      typeStyle="h6"
+      class="mt-4"
+      />
+      <h3 style="m-0">Body</h3>
+      <textBlock
+      cmsWidgetName="quoteDisclaimer"
+      justifyText="left"
+      typeStyle="body"
+      class="mt-4"
+      />
+      <h3 style="m-0">Label</h3>
+      <textBlock
+      cmsWidgetName="quoteDisclaimer"
+      justifyText="left"
+      typeStyle="label"
+      class="mt-4"
+      />
+      <h3 style="m-0">Small</h3>
+      <textBlock
+      cmsWidgetName="quoteDisclaimer"
+      justifyText="left"
+      typeStyle="small"
+      class="mt-4"
+      />
+      <h3 style="m-0">Caption</h3>
+      <textBlock
+      cmsWidgetName="quoteDisclaimer"
+      justifyText="left"
+      typeStyle="caption"
+      class="mt-4"
+      />
       <funnel-footer
       cmsWidgetName="FunnelFooterWidget"
       :isForwardActionDisabled="!meta.valid"
diff --git a/src/router/index.js b/src/router/index.js
index 6983356fd..4daa23613 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,6 +25,11 @@ import { applicationConfig } from "../constants/application-config";
 import quote from "@/layouts/quote/quote.vue";
 
 const routes = [
+  {
+    path: "/quote", // This is a temporary route for testing.
+    name: "quote",
+    component: quote,
+  },
   {
     path: "/",
     name: "root",
@@ -227,7 +232,7 @@ function navigateToUrl(url, optionalQuery = {}) {
   for (const queryKey in optionalQuery) {
     externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
   }
-  
+
   window.location.assign(externalUrl);
 }
 
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index cc867053f..79228bcc3 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -153,7 +153,7 @@ export default {
       handleChange,
       errors,
       value
-    } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions); 
+    } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
 
     const validateValue = value;
     return {
@@ -282,6 +282,12 @@ export default {
       }
     }
   }
+  &.list-button-horizontal {
+    height: 100%;
+    label {
+      height: 100%;
+    }
+  }
 }
 
 .col {
diff --git a/src/ux-components/radio-service-package/radio-service-package.vue b/src/ux-components/radio-service-package/radio-service-package.vue
index cd1ddb844..b04163266 100644
--- a/src/ux-components/radio-service-package/radio-service-package.vue
+++ b/src/ux-components/radio-service-package/radio-service-package.vue
@@ -21,7 +21,10 @@
           <p class="sub-label m-0">most popular</p>
           <ul>
             <li>New replacement windshield</li>
-            <li>Expert installation and <textLink linkType="dashedUnderline" text="recalibration" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateRainDefenseModal" aria-label="Modal window" /></li>
+            <li><textLink linkType="dashedUnderline" text="Rain Defense" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateRainDefenseModal" aria-label="Modal window" /> treatment</li>
+            <li>New <textLink linkType="dashedUnderline" text="front wiper blades" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateFrontWiperModal" aria-label="Modal window" /></li>
+            <li>New <textLink linkType="dashedUnderline" text="rear wiper blade" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateRearWiperModal" aria-label="Modal window" /></li>
+            <li>Expert <textLink linkType="dashedUnderline" text="recalibration" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateRecalModal" aria-label="Modal window" /></li>
             <li>Nationwide lifetime warranty</li>
             <li>New wiper blades</li>
           </ul>
@@ -46,6 +49,15 @@
     <modal
     cmsWidgetName="EstimateRainDefenseModal"
     />
+    <modal
+    cmsWidgetName="EstimateFrontWiperModal"
+    />
+    <modal
+    cmsWidgetName="EstimateRearWiperModal"
+    />
+    <modal
+    cmsWidgetName="EstimateRecalModal"
+    />
   </div>
 </template>