Merge pull request #706 from Safelite/feature/CSR-795

CSR-795 | Refactor modal etc.

src/common-components/modal/modal.vue

@@ -1,16 +1,16 @@
 <template>
   <!-- Modal -->
-  <div class="modal fade quote-modal" id="quoteModal" tabindex="-1" aria-labelledby="quoteModalLabel" aria-hidden="true">
+  <div class="modal fade modal-component" :id="this.cmsWidgetName" tabindex="-1" aria-labelledby="ModalComponentLabel" 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>
+          <h5 class="mb-4" v-html="this.ModalHeadline"></h5>
-          <p class="fw-bold mb-2">{{this.ModalSubheadertext}}</p>
+          <p class="fw-bold mb-2" v-html="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>
+          <button class="btn btn-secondary w-100" data-bs-dismiss="modal" v-html="this.ModalCloseButtonText"></button>
         </div>
       </div>
     </div>
@@ -43,13 +43,16 @@ export default {
       ModalImage(){
         return this.getCmsContent(this.cmsWidgetName, "Image");
       },
+      ModalCloseButtonText(){
+        return this.getCmsContent(this.cmsWidgetName, "FooterText");
+      }
   },
 }
 </script>
 
 <style lang="scss">
 .modal {
-  &.quote-modal {
+  &.modal-component {
     .modal-dialog {
       .modal-content {
         max-width: 327px;

src/layouts/quote/quote.vue

@@ -11,11 +11,17 @@
     <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/>
       <textBlock
       cmsWidgetName="footerTest"
       justifyText="left"
-      typeStyle="small"
+      typeStyle="caption"
       fontWeight=""
       />
       <funnel-footer
@@ -26,9 +32,6 @@
       @ForwardClicked="forwardButtonAction"
       />
     </div>
-    <modal
-    cmsWidgetName="EstimateRainDefenseModal"
-    />
   </div>
 </Form>
 </template>
@@ -40,7 +43,6 @@ 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 textBlock from "@/common-components/text-block/text-block";
 
@@ -59,6 +61,11 @@ export default {
       vm.setCmsContent(cmsContent);
     });
   },
+  data(){
+    return {
+      isInsurance: false,
+    }
+  },
   methods: {
     arePagePrerequisitesValid() {
       return true;
@@ -87,8 +94,8 @@ export default {
     funnelSubHeader,
     Form,
     radioServicePackage,
-    modal,
     textBlock,
+    cashOrInsuranceQuestion
   },
 
 };

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

@@ -1,6 +1,5 @@
 <template>
   <div class="package-main">
-    <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 +21,7 @@
           <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="#quoteModal" aria-label="Modal window" /></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>Nationwide lifetime warranty</li>
             <li>New wiper blades</li>
           </ul>
@@ -44,11 +43,15 @@
         </div>
       </label>
     </div>
+    <modal
+    cmsWidgetName="EstimateRainDefenseModal"
+    />
   </div>
 </template>
 
 <script>
 import textLink from "@/ux-components/text-link/text-link";
+import modal from "@/common-components/modal/modal";
 export default {
   name: "radioServicePackage",
   data() {
@@ -63,7 +66,8 @@ export default {
     }
   },
   components: {
-    textLink
+    textLink,
+    modal
   }
 }
 </script>