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

@@ -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 {

src/common-components/text-block/text-block.vue

@@ -34,5 +34,5 @@ export default {
       font-weight: 500;
     }
   }
-  
+
 </style>

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"

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);
 }
 

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 {

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>