Merge pull request #690 from Safelite/csr-795-modal-for-add-ons

CSR-795 add modal for quote page.

src/common-components/funnel-header/menu-modal/menu-modal.vue

@@ -7,7 +7,7 @@
     </button>
   </div>
   <!-- Modal -->
-  <div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
+  <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
     <div class="menu-modal-container">
       <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
         <div class="bar1"></div>
@@ -62,7 +62,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .menu-modal-container {
   position: absolute;
   padding: 1.47rem 1rem 1.47rem 1.47rem;
@@ -81,7 +81,7 @@ export default {
       justify-content: center;
       align-items: center;
       padding: 0;//Required to prevent 'squish' on iPhone
-      z-index: 1056;
+      z-index: 1050;
       .bar1,
       .bar2,
       .bar3 {
@@ -102,6 +102,7 @@ export default {
   }
 }
 .modal {
+  &.menu-modal {
     max-width: 576px;
     left: auto;
     height: calc(100% - 72px);
@@ -164,4 +165,5 @@ export default {
     }
     //.modal-backdrop styles are in common-styles.scss
   }
+}
 </style>

src/common-components/modal/modal.vue

@@ -0,0 +1,75 @@
+<template>
+  <!-- Modal -->
+  <div class="modal fade quote-modal" id="quoteModal" tabindex="-1" aria-labelledby="quoteModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-body px-4 py-5">
+          <img :src="this.ModalImage" class="w-100 mb-4" alt="" />
+          <h5 class="mb-4">{{this.ModalHeadline}}</h5>
+          <p class="fw-bold mb-2">{{this.ModalSubheadertext}}</p>
+          <p class="mb-0" v-html="this.ModalBodyText"></p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary w-100" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+export default {
+  name: 'modal',
+  props: {
+    headlineText: String,
+    cmsWidgetName: String,
+  },
+  data() {
+    return {
+      isActive: false,
+    };
+  },
+  computed: {
+      ModalHeadline(){
+        return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+      },
+      ModalSubheadertext(){
+        return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+      },
+      ModalBodyText(){
+        return this.getCmsContent(this.cmsWidgetName, "BodyText");
+      },
+      ModalImage(){
+        return this.getCmsContent(this.cmsWidgetName, "Image");
+      },
+  },
+}
+</script>
+
+<style lang="scss">
+.modal {
+  &.quote-modal {
+    .modal-dialog {
+      .modal-content {
+        max-width: 327px;
+        margin: 0 auto;
+        box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
+        .modal-body {
+          ul {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+    .modal-footer {
+      border-top: none;
+    }
+  }
+}
+.modal-backdrop {
+  &.show {
+    opacity: .4;
+  }
+}
+</style>

src/layouts/quote/quote.vue

@@ -11,12 +11,6 @@
     <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
     <div class="fade-on-route-transition sub-container make-tall">
-          <cashOrInsuranceQuestion
-            ref="cashOrInsurance"
-            cmsWidgetName="CashOrInsuranceQuestionWidget"
-            v-model="isInsurance"
-            groupName="CashOrInsuranceQuestion"
-          />
       <radioServicePackage/>
       <funnel-footer
       cmsWidgetName="FunnelFooterWidget"
@@ -26,6 +20,9 @@
       @ForwardClicked="forwardButtonAction"
       />
     </div>
+    <modal
+    cmsWidgetName="EstimateRainDefenseModal"
+    />
   </div>
 </Form>
 </template>
@@ -37,6 +34,7 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import radioServicePackage from "@/ux-components/radio-service-package/radio-service-package";
+import modal from "@/common-components/modal/modal.vue";
 import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -54,24 +52,35 @@ export default {
       vm.setCmsContent(cmsContent);
     });
   },
-    data(){
-      return {
-        isInsurance: false,
-      }
-    },
   methods: {
     arePagePrerequisitesValid() {
       return true;
     }
   },
+  computed: {
+    years() {
+      return ["2011", "2012"];
+    },
+    answersFromCms() {
+      return ["Pay on my own", "Pay with insurance"];
+    },
+    selectedChipCountValues: {
+      get: function() {
+        return this.modelValue;
+      },
+      set: function(newValue) {
+        this.$emit("update:modelValue", newValue);
+      },
+    },
+  },
   components: {
     funnelHeader,
     funnelFooter,
     vehicleBanner,
     funnelSubHeader,
     Form,
-      cashOrInsuranceQuestion,
+    radioServicePackage,
-      radioServicePackage
+    modal,
   },
 
 };

src/ux-components/button-main/button-main.vue

@@ -110,6 +110,7 @@ export default {
     color: $blue;
     font-weight: 500;
     transition: all 150ms linear;
+    height: 3rem;
     &:hover {
       color: $white;
       @include blue-gradient;

src/ux-components/radio-service-package/radio-service-package.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="package-main">
-    <a href="#!" class="justify-content-end w-100" :class="[isActive ? 'active' : '']" @click="toggleClass()">Compare packages</a>
+    <textLink class="justify-content-end w-100" linkType="text" text="Compare packages" href="#!" :class="[isActive ? 'active' : '', hasArrow ? 'arrow' : '']" @click="toggleClass()" />
     <div class="package-wrapper">
       <input type="radio" name="test-radio" id="testradio">
       <label for="testradio">
@@ -22,7 +22,7 @@
           <p class="sub-label m-0">most popular</p>
           <ul>
             <li>New replacement windshield</li>
-            <li>Expert installation</li>
+            <li>Expert installation and <textLink linkType="dashedUnderline" text="recalibration" href="#!" data-bs-toggle="modal" data-bs-target="#quoteModal" aria-label="Modal window" /></li>
             <li>Nationwide lifetime warranty</li>
             <li>New wiper blades</li>
           </ul>
@@ -39,7 +39,7 @@
             <li>Expert installation</li>
             <li>Nationwide lifetime warranty</li>
             <li>New wiper blades</li>
-            <li>Rain Defense&trade; treatment</li>
+            <li>Rain Defense</li>
           </ul>
         </div>
       </label>
@@ -48,50 +48,28 @@
 </template>
 
 <script>
+import textLink from "@/ux-components/text-link/text-link";
 export default {
   name: "radioServicePackage",
   data() {
     return {
       isActive: false,
+      hasArrow: true,
     };
   },
   methods: {
     toggleClass: function(event){
       this.isActive = !this.isActive;
     }
+  },
+  components: {
+    textLink
   }
 }
 </script>
 
 <style lang="scss">
 .package-main {
-  a {
-    &:after {
-      content: "";
-      transition: all .5s ease;
-      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
-      background-repeat: no-repeat;
-      background-position: right center;
-      margin-left: .5rem;
-      width: 16px;
-      height: auto;
-    }
-    &.active {
-      ~ .package-wrapper {
-          .package-specs {
-            max-height: 1000px !important;
-          }
-      }
-      &.active:after {
-        transform: rotate(180deg);
-      }
-      &.active + .vin-info {
-        max-height: 500px;
-        transition: all 250ms ease-in;
-        opacity: 1;
-      }
-    }
-  }
   .package-wrapper {
     margin: 0.5rem 0;
     input[type="radio"] {

src/ux-components/text-link/text-link.vue

@@ -2,6 +2,7 @@
   <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
   <a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
   <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}</a>
+  <a v-else-if="linkType === 'dashedUnderline'" @click="handleClick" class="dashed-underline" :href="href">{{text}}</a>
   <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
 </template>
 
@@ -58,5 +59,35 @@ a {
       text-decoration: underline;
     }
   }
+  &.dashed-underline {
+    text-decoration: underline dashed 1px;
+  }
+  &.arrow {
+    &:after {
+      content: "";
+      transition: all .5s ease;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right center;
+      margin-left: .5rem;
+      width: 16px;
+      height: auto;
+    }
+    &.active {
+      ~ .package-wrapper {
+          .package-specs {
+            max-height: 1000px !important;
+          }
+      }
+      &.active:after {
+        transform: rotate(180deg);
+      }
+      &.active + .vin-info {
+        max-height: 500px;
+        transition: all 250ms ease-in;
+        opacity: 1;
+      }
+    }
+  }
 }
 </style>