From 9a1d66382c8c2fe00605e5999db5f41f19751cc7 Mon Sep 17 00:00:00 2001
From: Chris Redelinghuys <chris.redelinghuys@safelite.com>
Date: Fri, 18 Jul 2025 13:01:40 -0400
Subject: [PATCH] CASH-1125: Cart heritage parity

---
 .../img/icons/question-mark-icon-blue.svg     |  3 +
 src/fmg-components/cart/cart.vue              | 68 ++++++-------------
 2 files changed, 22 insertions(+), 49 deletions(-)
 create mode 100644 src/assets/img/icons/question-mark-icon-blue.svg

diff --git a/src/assets/img/icons/question-mark-icon-blue.svg b/src/assets/img/icons/question-mark-icon-blue.svg
new file mode 100644
index 000000000..6b75c70d6
--- /dev/null
+++ b/src/assets/img/icons/question-mark-icon-blue.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6.3201e-10C6.01675 -2.49147e-05 4.1042 0.736615 2.63337 2.06701C1.16255 3.3974 0.238325 5.22669 0.04 7.2C0.0144 7.4624 0 7.7296 0 8C0 8.2704 0.0144 8.5376 0.04 8.8C0.194814 10.3404 0.793246 11.8027 1.76272 13.0097C2.73219 14.2167 4.03105 15.1165 5.50178 15.6C6.9725 16.0834 8.5519 16.1297 10.0484 15.7333C11.5449 15.3368 12.8943 14.5147 13.9328 13.3666C14.9714 12.2185 15.6544 10.7937 15.8992 9.26502C16.1441 7.73636 15.9401 6.16951 15.312 4.75449C14.6839 3.33948 13.6588 2.13709 12.3609 1.29316C11.063 0.449234 9.54814 1.94497e-05 8 6.32009e-10V6.3201e-10ZM8.3312 11.68C8.27055 11.737 8.19865 11.7807 8.12012 11.8082C8.04159 11.8358 7.95816 11.8466 7.8752 11.84C7.79544 11.8483 7.71483 11.8391 7.63899 11.8131C7.56316 11.787 7.49394 11.7446 7.43618 11.689C7.37842 11.6334 7.33351 11.5658 7.3046 11.491C7.27569 11.4162 7.26347 11.336 7.2688 11.256C7.26648 11.0995 7.32367 10.9479 7.4288 10.832C7.48751 10.7721 7.55859 10.7257 7.63708 10.6962C7.71556 10.6666 7.79956 10.6545 7.8832 10.6608C7.96706 10.6547 8.05124 10.6669 8.12996 10.6964C8.20867 10.726 8.28006 10.7722 8.3392 10.832C8.44547 10.9473 8.50283 11.0993 8.4992 11.256C8.50107 11.3343 8.48716 11.4122 8.4583 11.4851C8.42944 11.5579 8.38621 11.6242 8.3312 11.68ZM9.3552 8.1744L8.7488 8.7744C8.54248 9.01481 8.41218 9.31105 8.3744 9.6256C8.35965 9.74981 8.30021 9.86441 8.20718 9.94802C8.11415 10.0316 7.99387 10.0785 7.8688 10.08C7.79446 10.0802 7.72097 10.0643 7.65339 10.0333C7.58581 10.0024 7.52575 9.95709 7.47738 9.90065C7.429 9.8442 7.39345 9.77794 7.37318 9.70641C7.35292 9.63489 7.34842 9.55983 7.36 9.4864C7.38057 9.33018 7.41648 9.17637 7.4672 9.0272C7.60032 8.7102 7.79315 8.42177 8.0352 8.1776L8.7648 7.4272C9.05746 7.1218 9.22428 6.71732 9.232 6.2944C9.25213 5.96201 9.14193 5.63487 8.9248 5.3824C8.80862 5.26708 8.66916 5.17788 8.51575 5.12076C8.36234 5.06365 8.19851 5.03993 8.0352 5.0512C7.6576 5.0512 7.3392 5.136 7.1232 5.352C6.9072 5.568 6.8144 6.0128 6.7904 6.3744C6.78584 6.44174 6.76797 6.5075 6.73783 6.56789C6.70768 6.62828 6.66586 6.68208 6.61478 6.7262C6.5637 6.77032 6.50438 6.80386 6.44025 6.8249C6.37612 6.84593 6.30845 6.85404 6.24116 6.84875C6.17388 6.84346 6.10831 6.82488 6.04825 6.79408C5.9882 6.76328 5.93485 6.72088 5.89129 6.66932C5.84773 6.61777 5.81483 6.55808 5.79449 6.49373C5.77415 6.42937 5.76678 6.36162 5.7728 6.2944C5.8176 5.7584 5.9552 5.1408 6.392 4.704C6.7872 4.3088 7.352 4.1504 8.0352 4.1504C8.736 4.1504 9.28213 4.33867 9.6736 4.7152C10.0656 5.0896 10.2608 5.6064 10.2608 6.2608C10.2608 6.9152 9.9552 7.5472 9.3552 8.1776V8.1744Z" fill="#0070D1"/>
+</svg>
diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 17e73c03e..fa2401952 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -10,7 +10,7 @@
                     href="javascript:void(0)"
                     class="col d-flex justify-content-between py-0">
                     <span class="label">{{ OrderDetailsText }}</span>
-                    <span class="label amount-due">
+                    <span class="label amount-due larger">
                         {{ getLineItemAmount(amountDue, showCoverageAsPending) }}
                     </span>
                 </a>
@@ -83,16 +83,13 @@
                             :text="removeLinkText"
                             href="javascript:void(0)"
                             @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
-                        <textLink
-                            v-else-if="
-                                cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName
-                            "
-                            linkType="text"
-                            :text="recycleFeeCartItem.name"
-                            href="javascript:void(0)"
-                            @click-event="openModal(recyclingModalCmsWidgetName)" />
                         <span v-else-if="cartItem == recycleFeeCartItem">
                             {{ recycleFeeCartItem.name }}
+                            <a
+                                href="javascript:void(0)"
+                                @click="openModal(recyclingModalCmsWidgetName)">
+                                <img :src="infoIcon" alt="Info Icon" class="info-icon" />
+                            </a>
                         </span>
                         <span
                             v-if="
@@ -1150,6 +1147,9 @@ export default {
             var amtPaid = +this.subTotal + +this.salesTax;
             return amtPaid;
         },
+        infoIcon() {
+            return require(`@/assets/img/icons/question-mark-icon-blue.svg`);
+        },
     },
     components: {
         textBlock,
@@ -1184,6 +1184,10 @@ export default {
     }
     .amount-due {
         color: $green;
+
+        &.larger {
+            font-size: 1.25rem;
+        }
     }
     .cart-panel {
         max-height: 0;
@@ -1197,29 +1201,13 @@ export default {
             display: flex;
             justify-content: space-between;
             padding: 0.5rem 1.5rem;
-            &:nth-last-child(-n + 3) {
-                background-color: $green-100;
-            }
             &:last-child {
-                background-color: $green;
-                color: #ffffff;
+                background-color: $gray-100;
+                > span:last-of-type {
+                    color: $green;
+                }
             }
         }
-        .deductible {
-            background-color: $gray-100;
-        }
-        .service-type {
-            background-color: $gray-100;
-        }
-        .deductible ~ .service-type {
-            background: $white;
-        }
-        .service-type ~ .packaged-cart-item {
-            background-color: $gray-100;
-        }
-        .deductible ~ .packaged-cart-item {
-            background: $white;
-        }
         .struck-out-price {
             text-decoration: line-through;
             padding-left: 0.5rem;
@@ -1247,28 +1235,11 @@ export default {
             }
         }
         .non-packaged-cart-item {
-            &.odd {
-                background: $gray-100;
-            }
-        }
-        .deductible ~ .non-packaged-cart-item {
-            &.odd {
-                background: $white;
-            }
-        }
-        .non-packaged-cart-item {
-            &.even {
-                background-color: $white;
-            }
             a {
                 line-height: 1.625;
             }
         }
-        .deductible ~ .non-packaged-cart-item {
-            &.even {
-                background-color: $gray-100;
-            }
-        }
+
         // Custom order/wrap for removable nonpackaged Cart Items
         .removable-cart-item {
             flex-wrap: wrap;
@@ -1296,8 +1267,7 @@ export default {
             color: $black;
         }
         .sub-total {
-            border-top: 1px solid $green;
-            background-color: $green-100;
+            border-top: 1px solid $gray-600;
         }
         .service-type,
         .deductible {