Merge pull request #1493 from Safelite/CSR-1396-recycling-fee-modal

CSR-1396 add recycle modal to cart page.

src/fmg-components/cart/cart.vue

@@ -53,7 +53,7 @@
                         linkType="text"
                         :text="recycleFeeCartItem.name"
                         href="#!"
-                        @click-event="openModal(recyclingModal)" />
+                        @click-event="openModal(recyclingModalCmsWidgetName)" />
                     <span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
                 </div>
                 <div v-if="mobileFeeCartItem">
@@ -95,6 +95,9 @@
                 </div>
             </div>
         </div>
+        <contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal">
+            <textBlock cmsWidgetName="RecycleTextBlock" />
+        </contentGroupModal>
     </div>
 </template>
 
@@ -102,6 +105,7 @@
 // Components
 import textLink from "@/ux-components/text-link/text-link";
 import textBlock from "@/digital-components/text-block/text-block";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 
 // Mixins
 import baseMixin from "@/mixins/base-mixin.js";
@@ -122,6 +126,7 @@ export default {
         damage: Object,
         servicePackageOptionsCmsName: String,
         availableLineItems: Object,
+        recyclingModalCmsWidgetName: String,
     },
     data() {
         return {
@@ -135,6 +140,9 @@ export default {
         };
     },
     methods: {
+        openModal(modalName) {
+            this.$refs[modalName].openModal();
+        },
         toggleClass: function (event) {
             this.isActive = !this.isActive;
         },
@@ -668,6 +676,7 @@ export default {
     components: {
         textBlock,
         textLink,
+        contentGroupModal,
     },
 };
 </script>
@@ -678,6 +687,12 @@ export default {
         border-bottom: 1px solid $gray-500;
         color: $black;
     }
+    .modal-body {
+        h5 {
+            text-align: center;
+            border-bottom: none;
+        }
+    }
     .border-bottom {
         color: $gray;
     }
@@ -751,6 +766,7 @@ export default {
             }
             a {
                 order: 3;
+                margin-right: 100%;
             }
         }
     }

src/layouts/payment-method/payment-method.vue

@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal notFullScreen ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container-fluid">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -26,7 +26,8 @@
                         :availableLineItems="availableLineItems"
                         v-model="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
-                        @cart-remove="cartRemove" />
+                        @cart-remove="cartRemove"
+                        recyclingModalCmsWidgetName="RecycleModal" />
 
                     <hr />