Recyling Fee Modal

Stub for Link inside cart
Modal
CMS updated
Noticed the modal overlay doesnt cover the whole app, looked weird.
Added slot to content group modal

src/iss-components/cart-dropdown/cart-dropdown.vue

@@ -38,12 +38,30 @@
                     <span id="base-price-value">{{ getDisplayed(baseServicePrice) }}</span>
                 </div>
             </div>
+            <!-- This next block of code will go inside the cart -->
+            <!-- *********************************************** -->
+            <br />
+            <textLink
+                linkType="text"
+                text="Recycling"
+                href="javascript:void(0)"
+                @clickEvent="openModal(recyclingModalCmsWidgetName)" />
+            <!-- *********************************************** -->
+            <!-- This block of code above, will go inside the cart -->
+            <contentGroupModal
+                ref="RecycleModal"
+                cmsWidgetName="RecycleModal">
+                <textBlock cmsWidgetName="RecycleTextBlock" />
+            </contentGroupModal>
         </div>
     </div>
 </template>
 
 <script>
 import { useMainStore } from '@/store';
+import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
+import textLink from '@/ux-components/text-link/text-link.vue';
 import getPriceOfLineItems from '@/helpers/price-calculator.js';
 import { formatAmountInDollars } from '@/helpers/text-helper.js';
 
@@ -51,12 +69,12 @@ const VERIFYING_COVERAGE = 'Verifying coverage';
 
 export default {
     name: 'cart-dropdown',
-    components: {},
+    components: { contentGroupModal,
+        textBlock,
+        textLink },
     props: {
         showAsPaid: Boolean,
-        amountDueLabel: String,
-        deductibleLabel: String,
-        basePriceLabel: String
+        amountDueLabel: String
     },
     data() {
         const { currentDeductible } = useMainStore().order;
@@ -97,6 +115,9 @@ export default {
         }
     },
     methods: {
+        openModal(modalName) {
+            this.$refs[modalName].openModal();
+        },
         toggleIsExpanded() {
             this.isExpanded = !this.isExpanded;
         },
@@ -131,6 +152,20 @@ export default {
     visibility: hidden;
 }
 
+:deep(.modal-content a.external-text) {
+    text-underline-offset: 0.25rem;
+    line-height: 2;
+    padding: 0 0 0.25rem 0;
+    font-weight: 500;
+    max-width: -webkit-fit-content;
+    max-width: -moz-fit-content;
+    max-width: fit-content;
+}
+
+:deep(#RecycleModal h5) {
+    text-align: center;
+}
+
 .cart-toggle {
     &:after {
         content: "";

src/iss-components/content-group-modal/content-group-modal.vue

@@ -21,6 +21,7 @@
             v-if="ModalSubBodyText"
             class="my-4 caption modal-sub-body"
             v-html="ModalSubBodyText"></p>
+        <slot></slot>
     </modal>
 </template>
 

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

@@ -23,7 +23,8 @@
                     :showAsPaid="false"
                     :amountDueLabel="amountDueText"
                     :deductibleLabel="deductibleLabel"
-                    :basePriceLabel="basePriceLabel" />
+                    :basePriceLabel="basePriceLabel"
+                    recyclingModalCmsWidgetName="RecycleModal" />
                 <hr class="mt-0 mb-5" />
                 <div>Pia Alert Placeholder</div>
                 <paymentMethodQuestion

src/styles/common-styles.scss

@@ -64,7 +64,6 @@ body {
         left: 50%;
         transform: translateX(-50%);
         max-width: 576px;
-        height: calc(100% - 72px);
 
         &.show {
             opacity: 0.4;