From 4156eb281b7e3095df292356e2ec410cfcb3dc2f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 24 Aug 2022 09:43:34 -0400
Subject: [PATCH] CSR-795 add modal for quote page.

---
 .../funnel-header/menu-modal/menu-modal.vue   | 122 +++++++++---------
 src/layouts/quote/quote-modal/quote-modal.vue |  75 +++++++++++
 src/layouts/quote/quote.vue                   |  12 +-
 src/ux-components/button-main/button-main.vue |   1 +
 .../radio-service-package.vue                 |  38 ++----
 src/ux-components/text-link/text-link.vue     |  31 +++++
 6 files changed, 187 insertions(+), 92 deletions(-)
 create mode 100644 src/layouts/quote/quote-modal/quote-modal.vue

diff --git a/src/common-components/funnel-header/menu-modal/menu-modal.vue b/src/common-components/funnel-header/menu-modal/menu-modal.vue
index bd13e46a8..308f0cb0d 100644
--- a/src/common-components/funnel-header/menu-modal/menu-modal.vue
+++ b/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,66 +102,68 @@ export default {
   }
 }
 .modal {
-  max-width: 576px;
-  left: auto;
-  height: calc(100% - 72px);
-  top: 72px;
-  border-top: 1px solid $gray-300;
-  overflow-x: visible;
-  overflow-y: visible;
-  .modal-body {
-    padding: 2rem;
-  }
-    .modal-fullscreen {
-      width: 100vw;
-      max-width: 576px;
-  }
-  .navigation-link {
-    margin-bottom: 1.5rem;
-  }
-  .modal-footer {
-    border-top: none;
-    padding: 2rem;
-  }
-  .menu-modal-container {
-    position: absolute;
-    padding: 1.47rem 1rem 1.47rem 1.47rem;
-    right: 0;
-    top: -4.5rem;
-    button {
-      border: none;
-      &.menu-button {
-        width: 1.5rem;
-        height: 1.5rem;
-        border-radius: 50%;
-        box-shadow: none;
-        background-color: $white;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding: 0;//Required to prevent 'squish' on iPhone
-        z-index: 1056;
-        .bar1,
-        .bar2,
-        .bar3 {
-          width: 14px;
-          height: 2px;
-          background-color: $blue;
-          margin: 1px 0;
-          transition: 0.25s;
-        }
-        &.active .bar1 {
-          transform: rotate(-45deg) translate(-3px, 3px);
-        }
-        &.active .bar2 {opacity: 0;}
-        &.active .bar3 {
-          transform: rotate(45deg) translate(-3px, -3px);
+  &.menu-modal {
+    max-width: 576px;
+    left: auto;
+    height: calc(100% - 72px);
+    top: 72px;
+    border-top: 1px solid $gray-300;
+    overflow-x: visible;
+    overflow-y: visible;
+    .modal-body {
+      padding: 2rem;
+    }
+      .modal-fullscreen {
+        width: 100vw;
+        max-width: 576px;
+    }
+    .navigation-link {
+      margin-bottom: 1.5rem;
+    }
+    .modal-footer {
+      border-top: none;
+      padding: 2rem;
+    }
+    .menu-modal-container {
+      position: absolute;
+      padding: 1.47rem 1rem 1.47rem 1.47rem;
+      right: 0;
+      top: -4.5rem;
+      button {
+        border: none;
+        &.menu-button {
+          width: 1.5rem;
+          height: 1.5rem;
+          border-radius: 50%;
+          box-shadow: none;
+          background-color: $white;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          padding: 0;//Required to prevent 'squish' on iPhone
+          z-index: 1056;
+          .bar1,
+          .bar2,
+          .bar3 {
+            width: 14px;
+            height: 2px;
+            background-color: $blue;
+            margin: 1px 0;
+            transition: 0.25s;
+          }
+          &.active .bar1 {
+            transform: rotate(-45deg) translate(-3px, 3px);
+          }
+          &.active .bar2 {opacity: 0;}
+          &.active .bar3 {
+            transform: rotate(45deg) translate(-3px, -3px);
+          }
         }
       }
     }
+    //.modal-backdrop styles are in common-styles.scss
   }
-  //.modal-backdrop styles are in common-styles.scss
 }
 </style>
diff --git a/src/layouts/quote/quote-modal/quote-modal.vue b/src/layouts/quote/quote-modal/quote-modal.vue
new file mode 100644
index 000000000..3867522ae
--- /dev/null
+++ b/src/layouts/quote/quote-modal/quote-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: 'quoteModal',
+  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>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 2b8969d30..aa84411e5 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -35,6 +35,9 @@
             @ForwardClicked="forwardButtonAction"
           />
         </div>
+        <quoteModal
+          cmsWidgetName="EstimateRainDefenseModal"
+        />
       </div>
     </Form>
 </template>
@@ -47,6 +50,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 quoteModal from "@/layouts/quote/quote-modal/quote-modal.vue";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -90,7 +94,10 @@ export default {
         },
         set: function(newValue) {
             this.$emit("update:modelValue", newValue);
-        }
+        },
+        QuoteRecalImage(){
+          return this.getCmsContent("EstimateRecalModal", "Image");
+        },
     },
       },
     components: {
@@ -100,7 +107,8 @@ export default {
       funnelSubHeader,
       Form,
       buttonQuestion,
-      radioServicePackage
+      radioServicePackage,
+      quoteModal,
     },
 
 };
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 82afdf4ef..8396351f8 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/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;
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 8a00a0b68..581aefc6d 100644
--- a/src/ux-components/radio-service-package/radio-service-package.vue
+++ b/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"] {
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index d338b9d44..94a6a6bf8 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/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>