From 4d7f01d87e129f023ba2f73c7003b4c5fea3eb83 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 3 Nov 2023 09:38:40 -0400
Subject: [PATCH 01/16] WIP - Cart Styling

---
 src/fmg-components/cart/cart.vue              | 70 +++++++++++++++++--
 src/layouts/payment-method/payment-method.vue |  5 +-
 2 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index ce43971d8..b5fdb4e97 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -46,13 +46,30 @@
 
                 <!-- Fees -->
                 <div v-if="recycleFeeCartItem">
-                    <span>{{ recycleFeeCartItem.name }}</span
-                    ><span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
+                    <textLink
+                        linkType="text"
+                        :text="recycleFeeCartItem.name"
+                        href="#!"
+                        @click-event="openModal(recyclingModal)" />
+                    <span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
                 </div>
                 <div v-if="mobileFeeCartItem">
                     <span>{{ mobileFeeCartItem.name }}</span
                     ><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
                 </div>
+                
+                <div v-if="premiumAppointmentDiscountCartItem">
+                    <span>{{ premiumAppointmentDiscountCartItem.name }}</span>
+                    <textLink
+                        ref="removeLink"
+                        linkType="text"
+                        :text="removeLinkText"
+                        href="#!"
+                        @click-event="removeItem(PREMIUM_FEE_PART_TYPE, 'supportingItems')" />
+                    <span>{{ currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal) }}</span>
+                    
+                </div>
+                <!-- promos here -->
 
                 <!-- Sub total, sales tax, total columns -->
                 <div class="sub-total">
@@ -86,6 +103,7 @@ import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/serv
 
 // Constants
 import { partTypeStrings } from "@/constants/part-type-strings";
+import { PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
 import { cartItemCategories } from "@/constants/cart-item-categories";
 import { cartItemTypes } from "@/constants/cart-item-types";
 
@@ -216,6 +234,10 @@ export default {
                     cartItems.push(cartItem);
                 });
 
+                if (this.premiumAppointmentDiscountCartItem) {
+                    cartItems.push(this.premiumAppointmentDiscountCartItem);
+                }
+
                 return cartItems;
             },
         },
@@ -294,7 +316,7 @@ export default {
             const nonpackageCartItems = [];
 
             this.cartItems.forEach((cartItem) => {
-                if (cartItem == this.recycleFeeCartItem || cartItem == this.mobileFeeCartItem) {
+                if (cartItem == this.recycleFeeCartItem || cartItem == this.mobileFeeCartItem || cartItem == this.premiumAppointmentDiscountCartItem) {
                     return;
                 }
 
@@ -470,8 +492,8 @@ export default {
                     lineItems: [],
                 };
 
-                //recycleFeeLineItem.cartItemType = cartItem.cartItemType;
-                //cartItem.lineItems.push(recycleFeeLineItem);
+                recycleFeeLineItem.cartItemType = cartItem.cartItemType;
+                cartItem.lineItems.push(recycleFeeLineItem);
 
                 cartItem.subTotal +=
                     (recycleFeeLineItem.kitPrice ?? 0) +
@@ -552,6 +574,40 @@ export default {
 
             return cartItem;
         },
+        premiumAppointmentDiscountCartItemName() {
+            return "Early bird appointment"; // TODO: get from CMS
+        },
+        premiumAppointmentDiscountCartItem() {
+            let cartItem = null;
+
+            const premiumAppointmentDiscountLineItem = this.supportingItems.find(
+                (lineItem) => lineItem.partNumber == PREMIUM_FEE_PART_TYPE
+            );
+
+            if (premiumAppointmentDiscountLineItem) {
+                cartItem = {
+                    name: this.premiumAppointmentDiscountCartItemName,
+                    category: cartItemCategories.SUPPORTING_ITEMS,
+                    cartItemType: PREMIUM_FEE_PART_TYPE,
+                    isDisplayed: true,
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                premiumAppointmentDiscountLineItem.cartItemType = cartItem.cartItemType;
+                cartItem.lineItems.push(premiumAppointmentDiscountLineItem);
+
+                cartItem.subTotal +=
+                    (premiumAppointmentDiscountLineItem.kitPrice ?? 0) +
+                    (premiumAppointmentDiscountLineItem.laborAmount ?? 0) +
+                    (premiumAppointmentDiscountLineItem.sellingPrice ?? 0);
+
+                cartItem.salesTax += premiumAppointmentDiscountLineItem.salesTax ?? 0;
+            }
+
+            return cartItem;
+        },
         removeLinkText() {
             return this.getCmsContent("RemoveCartItemTextWidget", "Text");
         },
@@ -625,7 +681,7 @@ export default {
         div {
             display: flex;
             justify-content: space-between;
-            padding: 0.5rem 1.5rem;
+            padding: 0.5rem 1.5rem;   
             &:nth-child(odd) {
                 background-color: #f5f5f5;
             }
@@ -643,7 +699,7 @@ export default {
             align-items: center;
             span {
                 display: flex;
-                width: 33.33333%;
+                font-size: 0.875rem;
                 &:nth-child(2) {
                     justify-content: flex-end;
                 }
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index ef0a17a19..eda5fa529 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -15,8 +15,7 @@
 
                     <funnelSubHeader
                         class="mb-5 mt-4"
-                        cmsWidgetName="FunnelSubHeaderWidget"
-                        leftAlignHeader />
+                        cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <p v-if="isPiaDisabled" class="fw-normal no-pia-disclaimer">
                         <span>{{ noPiaDisclaimer }}</span>
@@ -31,6 +30,8 @@
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         @cart-remove="cartRemove" />
 
+                    <hr />
+
                     <div>
                         <alert
                             ref="piaErrorAlert"

From 8cb06c096f9aa9e48e7c47bde611ef6859264e43 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 3 Nov 2023 10:21:21 -0400
Subject: [PATCH 02/16] WIP Update Nonpackaged Cart Items for Leah

---
 src/fmg-components/cart/cart.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index b5fdb4e97..1e19bd561 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -33,7 +33,7 @@
 
                 <!-- Nonpackaged Cart Items -->
                 <hr style="background: red" />
-                <div v-for="(cartItem, i) in nonpackageCartItems" :key="i">
+                <div class="premium-appt-cart-item" v-for="(cartItem, i) in nonpackageCartItems" :key="i">
                     <span>{{ cartItem.name }}</span>
                     <textLink
                         ref="removeLink"
@@ -57,7 +57,7 @@
                     <span>{{ mobileFeeCartItem.name }}</span
                     ><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
                 </div>
-                
+
                 <div v-if="premiumAppointmentDiscountCartItem">
                     <span>{{ premiumAppointmentDiscountCartItem.name }}</span>
                     <textLink
@@ -67,7 +67,7 @@
                         href="#!"
                         @click-event="removeItem(PREMIUM_FEE_PART_TYPE, 'supportingItems')" />
                     <span>{{ currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal) }}</span>
-                    
+
                 </div>
                 <!-- promos here -->
 
@@ -681,7 +681,7 @@ export default {
         div {
             display: flex;
             justify-content: space-between;
-            padding: 0.5rem 1.5rem;   
+            padding: 0.5rem 1.5rem;
             &:nth-child(odd) {
                 background-color: #f5f5f5;
             }
@@ -729,6 +729,17 @@ export default {
                 padding: 0;
             }
         }
+        // Custom order/wrap for nonpackaged Cart Items
+        .premium-appt-cart-item {
+            flex-wrap: wrap;
+            span {
+                display: flex;
+                justify-content: space-between;
+            }
+            a {
+                order: 3;
+            }
+        }
     }
     .vin-toggle {
         &:after {

From ec431ecd59cc9290bc8d3bb4eabadc9ce5d27b3b Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 3 Nov 2023 14:01:08 -0400
Subject: [PATCH 03/16] Prettified

---
 src/fmg-components/cart/cart.vue              | 16 ++++++++++++----
 src/layouts/payment-method/payment-method.vue |  4 +---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 1e19bd561..064a2c2b1 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -33,7 +33,10 @@
 
                 <!-- Nonpackaged Cart Items -->
                 <hr style="background: red" />
-                <div class="premium-appt-cart-item" v-for="(cartItem, i) in nonpackageCartItems" :key="i">
+                <div
+                    class="premium-appt-cart-item"
+                    v-for="(cartItem, i) in nonpackageCartItems"
+                    :key="i">
                     <span>{{ cartItem.name }}</span>
                     <textLink
                         ref="removeLink"
@@ -66,8 +69,9 @@
                         :text="removeLinkText"
                         href="#!"
                         @click-event="removeItem(PREMIUM_FEE_PART_TYPE, 'supportingItems')" />
-                    <span>{{ currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal) }}</span>
-
+                    <span>{{
+                        currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal)
+                    }}</span>
                 </div>
                 <!-- promos here -->
 
@@ -316,7 +320,11 @@ export default {
             const nonpackageCartItems = [];
 
             this.cartItems.forEach((cartItem) => {
-                if (cartItem == this.recycleFeeCartItem || cartItem == this.mobileFeeCartItem || cartItem == this.premiumAppointmentDiscountCartItem) {
+                if (
+                    cartItem == this.recycleFeeCartItem ||
+                    cartItem == this.mobileFeeCartItem ||
+                    cartItem == this.premiumAppointmentDiscountCartItem
+                ) {
                     return;
                 }
 
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index eda5fa529..dd6f0afc3 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -13,9 +13,7 @@
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
 
-                    <funnelSubHeader
-                        class="mb-5 mt-4"
-                        cmsWidgetName="FunnelSubHeaderWidget" />
+                    <funnelSubHeader class="mb-5 mt-4" cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <p v-if="isPiaDisabled" class="fw-normal no-pia-disclaimer">
                         <span>{{ noPiaDisclaimer }}</span>

From 738ffbe8433a679c0ebe4b7c2fd3abf33be01ee8 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 6 Nov 2023 08:21:28 -0500
Subject: [PATCH 04/16] Fixed some calculation issues

---
 src/constants/cart-item-types.js   |  1 +
 src/constants/part-type-strings.js |  2 ++
 src/fmg-components/cart/cart.vue   | 18 ++++++++----------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/constants/cart-item-types.js b/src/constants/cart-item-types.js
index 858aa1e8e..7db2ac312 100644
--- a/src/constants/cart-item-types.js
+++ b/src/constants/cart-item-types.js
@@ -7,6 +7,7 @@ const cartItemTypes = {
     RECYCLE_FEE: "RECYCLE FEE",
     MOBILE_FEE: "MOBILE FEE",
     PROMOS: "PROMOS",
+    EARLY_BIRD: "EARLY BIRD",
 };
 
 export { cartItemTypes };
diff --git a/src/constants/part-type-strings.js b/src/constants/part-type-strings.js
index 50d92832c..d7cc11414 100644
--- a/src/constants/part-type-strings.js
+++ b/src/constants/part-type-strings.js
@@ -5,6 +5,8 @@ const partTypeStrings = {
     RECALIBRATION: "RECALIBRATION",
     RECYCLE_FEE: "RECYCLE FEE",
     MOBILE_FEE: "MOBILE FEE",
+    REPAIR_FEE: "REPAIR FEE",
+    EARLY_BIRD: "EARLY BIRD"
 };
 
 export { partTypeStrings };
diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 064a2c2b1..195e7090e 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -68,7 +68,7 @@
                         linkType="text"
                         :text="removeLinkText"
                         href="#!"
-                        @click-event="removeItem(PREMIUM_FEE_PART_TYPE, 'supportingItems')" />
+                        @click-event="removeItem(premiumAppointmentDiscountCartItem.cartItemType, 'supportingItems')" />
                     <span>{{
                         currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal)
                     }}</span>
@@ -107,7 +107,6 @@ import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/serv
 
 // Constants
 import { partTypeStrings } from "@/constants/part-type-strings";
-import { PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
 import { cartItemCategories } from "@/constants/cart-item-categories";
 import { cartItemTypes } from "@/constants/cart-item-types";
 
@@ -177,6 +176,8 @@ export default {
             return vapsTypeName.Text;
         },
         removeItem(cartItemType, category) {
+            console.log("removeItem")
+            console.log(`cartItemType: ${cartItemType}, category: ${category}`)
             this.lineItems[category] = this.lineItems[category].filter(
                 (lineItemsToKeep) => lineItemsToKeep.cartItemType != cartItemType
             );
@@ -520,7 +521,7 @@ export default {
             let cartItem = null;
 
             const mobileFeeLineItem = this.supportingItems.find(
-                (lineItem) => lineItem.partNumber == partTypeStrings.MOBILE_FEE
+                (lineItem) => lineItem.partType == partTypeStrings.MOBILE_FEE
             );
 
             if (mobileFeeLineItem) {
@@ -550,11 +551,8 @@ export default {
         otherSupportingItemsCartItem() {
             let cartItem = null;
 
-            const otherSupportingItemsLineItems = this.supportingItems.filter(
-                (lineItem) =>
-                    lineItem.partNumber != partTypeStrings.MOBILE_FEE &&
-                    lineItem.partNumber != partTypeStrings.RECYCLE_FEE
-            );
+            let otherSupportingItemsLineItems = baseMixin.methods.filterOutFees(this.supportingItems);
+            otherSupportingItemsLineItems = otherSupportingItemsLineItems.filter(lineItem => lineItem.partType != partTypeStrings.EARLY_BIRD);
 
             if (otherSupportingItemsLineItems.length > 0) {
                 cartItem = {
@@ -589,14 +587,14 @@ export default {
             let cartItem = null;
 
             const premiumAppointmentDiscountLineItem = this.supportingItems.find(
-                (lineItem) => lineItem.partNumber == PREMIUM_FEE_PART_TYPE
+                (lineItem) => lineItem.partType == partTypeStrings.EARLY_BIRD
             );
 
             if (premiumAppointmentDiscountLineItem) {
                 cartItem = {
                     name: this.premiumAppointmentDiscountCartItemName,
                     category: cartItemCategories.SUPPORTING_ITEMS,
-                    cartItemType: PREMIUM_FEE_PART_TYPE,
+                    cartItemType: cartItemTypes.EARLY_BIRD,
                     isDisplayed: true,
                     subTotal: 0,
                     salesTax: 0,

From 3471b6e51413087ed50952460fcfe6d70fede35b Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 6 Nov 2023 08:21:35 -0500
Subject: [PATCH 05/16] Fixed some calculation issues 2

---
 src/fmg-components/cart/cart.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 195e7090e..169a3e0a9 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -176,8 +176,6 @@ export default {
             return vapsTypeName.Text;
         },
         removeItem(cartItemType, category) {
-            console.log("removeItem")
-            console.log(`cartItemType: ${cartItemType}, category: ${category}`)
             this.lineItems[category] = this.lineItems[category].filter(
                 (lineItemsToKeep) => lineItemsToKeep.cartItemType != cartItemType
             );

From d3d334f666fca47a01ca4521456345a7747175c6 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 6 Nov 2023 08:39:46 -0500
Subject: [PATCH 06/16] Fixed unit test and Prettified

---
 src/constants/part-type-strings.js   |  2 +-
 src/fmg-components/cart/cart.spec.js |  2 +-
 src/fmg-components/cart/cart.vue     | 15 ++++++++++++---
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/constants/part-type-strings.js b/src/constants/part-type-strings.js
index d7cc11414..fd1f4e781 100644
--- a/src/constants/part-type-strings.js
+++ b/src/constants/part-type-strings.js
@@ -6,7 +6,7 @@ const partTypeStrings = {
     RECYCLE_FEE: "RECYCLE FEE",
     MOBILE_FEE: "MOBILE FEE",
     REPAIR_FEE: "REPAIR FEE",
-    EARLY_BIRD: "EARLY BIRD"
+    EARLY_BIRD: "EARLY BIRD",
 };
 
 export { partTypeStrings };
diff --git a/src/fmg-components/cart/cart.spec.js b/src/fmg-components/cart/cart.spec.js
index bfe1dbb55..ae84083e6 100644
--- a/src/fmg-components/cart/cart.spec.js
+++ b/src/fmg-components/cart/cart.spec.js
@@ -268,7 +268,7 @@ describe("cart.vue", () => {
                         kitPrice: 0,
                         laborAmount: 34.98,
                         partNumber: "MOBILE FEE",
-                        partType: "REPLACE FEE",
+                        partType: "MOBILE FEE",
                         salesTax: 2.62,
                         sellingPrice: 0,
                     },
diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 169a3e0a9..55516010f 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -68,7 +68,12 @@
                         linkType="text"
                         :text="removeLinkText"
                         href="#!"
-                        @click-event="removeItem(premiumAppointmentDiscountCartItem.cartItemType, 'supportingItems')" />
+                        @click-event="
+                            removeItem(
+                                premiumAppointmentDiscountCartItem.cartItemType,
+                                'supportingItems'
+                            )
+                        " />
                     <span>{{
                         currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal)
                     }}</span>
@@ -549,8 +554,12 @@ export default {
         otherSupportingItemsCartItem() {
             let cartItem = null;
 
-            let otherSupportingItemsLineItems = baseMixin.methods.filterOutFees(this.supportingItems);
-            otherSupportingItemsLineItems = otherSupportingItemsLineItems.filter(lineItem => lineItem.partType != partTypeStrings.EARLY_BIRD);
+            let otherSupportingItemsLineItems = baseMixin.methods.filterOutFees(
+                this.supportingItems
+            );
+            otherSupportingItemsLineItems = otherSupportingItemsLineItems.filter(
+                (lineItem) => lineItem.partType != partTypeStrings.EARLY_BIRD
+            );
 
             if (otherSupportingItemsLineItems.length > 0) {
                 cartItem = {

From a6a4a302b280d06a4345a9d2a6cce60b1630649c Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 6 Nov 2023 13:37:41 -0500
Subject: [PATCH 07/16] CSR-1384: add some space under cart component

---
 src/fmg-components/cart/cart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 440823f67..1efd1e8a5 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="cart">
+    <div class="cart mb-4">
         <div class="px-0">
             <div
                 class="row vin-toggle flex align-items-center"

From 39c33aabc1d09970afe90251b11ce246867ffec3 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 6 Nov 2023 13:39:08 -0500
Subject: [PATCH 08/16] CSR-1384: add a ref to funnelHeader on any pages where
 it's missing

---
 .../layouts/questions-page-layout/questions-page-layout.vue     | 2 +-
 src/layouts/address-vehicles/address-vehicles.vue               | 2 +-
 src/layouts/confirmation/confirmation.vue                       | 2 +-
 src/layouts/customer-details/customer-details.vue               | 2 +-
 src/layouts/estimate/estimate.vue                               | 2 +-
 src/layouts/license-plate-lookup/license-plate-lookup.vue       | 2 +-
 src/layouts/payment-method/payment-method.vue                   | 2 +-
 src/layouts/payment/payment.vue                                 | 2 +-
 src/layouts/quote/quote.vue                                     | 2 +-
 src/layouts/review/review.vue                                   | 2 +-
 src/layouts/schedule/schedule.vue                               | 2 +-
 src/layouts/service-location/service-location.vue               | 2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue                   | 2 +-
 src/layouts/vehicle-parts/vehicle-parts.vue                     | 2 +-
 src/layouts/vehicle/vehicle.vue                                 | 2 +-
 src/layouts/vin-lookup/vin-lookup.vue                           | 2 +-
 16 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index 0bacf3f01..156b050c1 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -4,7 +4,7 @@
         <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 88d182980..7bc59a716 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -3,7 +3,7 @@
         <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index 505f41bf0..351353ad9 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="page-container-grouped-styles position-relative">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
             <div>
                 <div class="container-fluid pb-2">
                     <div class="row justify-content-center">
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index cd6cc17b0..668bd0495 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -3,7 +3,7 @@
         <div class="container-fluid">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index 00bea471f..410c4d325 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -4,7 +4,7 @@
         <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index fc3756b6d..811dbea7b 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -3,7 +3,7 @@
         <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index b147ec73f..d0ea3da47 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -4,7 +4,7 @@
         <div class="container-fluid page-container-grouped-styles">
             <div class="row">
                 <div class="col">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index 2b4121c98..1ef2265fd 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -4,7 +4,7 @@
         <div class="container-fluid">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
 
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 507532f4e..a48df5acd 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -4,7 +4,7 @@
         <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index f77e2b193..0011e79f7 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -4,7 +4,7 @@
         <div class="container-fluid">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index ff1961465..48202ba0a 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -4,7 +4,7 @@
         <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 2a17766f9..a2aa0813b 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -4,7 +4,7 @@
         <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index e4c1d44ed..866567101 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -3,7 +3,7 @@
         <div class="container-fluid page-container-grouped-styles vehicle-damage">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 3ce2cee18..3455de18e 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -5,7 +5,7 @@
             <div class="container-fluid page-container-grouped-styles">
                 <div class="row justify-content-center">
                     <div class="col-md-6">
-                        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                     </div>
                 </div>
                 <div class="row justify-content-center">
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 1754a3a91..3fafd5688 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -3,7 +3,7 @@
         <div class="container-fluid">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index e28359724..c809bae70 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -4,7 +4,7 @@
         <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
             <div class="row justify-content-center">

From 4e1f246ae35edf9bf14b55c2364de944e67c44d0 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 6 Nov 2023 13:41:03 -0500
Subject: [PATCH 09/16] CSR-1384: remove unused prop

---
 src/digital-components/button-question/button-question.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 0ac7e2863..f0442eee1 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -133,7 +133,6 @@ export default {
         suppressError: Boolean,
         useTextForValue: Boolean,
         valueToLogType: String,
-        additionalButtonData: Object,
         isSmallQuestionText: Boolean,
         customButtonQuestionId: String,
         logDisplayedValuesEvent: {

From 20cda7ef69607e32fd980323485620f81cb30d82 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 6 Nov 2023 13:42:50 -0500
Subject: [PATCH 10/16] CSR-1384: work to add a auto-dismissing alert / 'toast'
 message for adding vap to cart

---
 .../funnel-header/funnel-header.vue           | 39 +++++++++---
 .../add-vaps-modal-buttons.vue                | 63 ++++++++++++++++---
 src/layouts/payment-method/payment-method.vue |  6 +-
 src/ux-components/alert/alert.vue             | 37 ++++++-----
 4 files changed, 113 insertions(+), 32 deletions(-)

diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index b5775e649..d9c598bb4 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -5,14 +5,18 @@
         <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
         <menuModal />
     </div>
-    <alert
-        v-if="displayGlobalAlert"
-        class="rounded-0 w-100 border-0 shadow-sm"
-        cmsWidgetName="GlobalAlert"
-        :manualHeadline="globalAlertMessage.messageHeadline"
-        :manualCopy="globalAlertMessage.messageCopy"
-        :alertClass="globalAlertMessage.type"
-        v-bind:isDismissible="globalAlertMessage.isDismissible" />
+
+    <transition name="fade" mode="out-in">
+        <alert
+            v-if="displayGlobalAlert"
+            class="rounded-0 w-100 border-0 shadow-sm"
+            cmsWidgetName="GlobalAlert"
+            :manualHeadline="globalAlertMessage.messageHeadline"
+            :manualCopy="globalAlertMessage.messageCopy"
+            :alertClass="globalAlertMessage.type"
+            :onAlertCloseCallback="onAlertClose"
+            v-bind:isDismissible="globalAlertMessage.isDismissible" />
+    </transition>
 </template>
 
 <script>
@@ -21,6 +25,9 @@ import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
 import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
 
+// Constants
+const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
+
 export default {
     name: "funnel-header",
     data() {
@@ -32,6 +39,7 @@ export default {
                 messageHeadline: "",
                 type: "",
             },
+            countdownTimer: () => {},
         };
     },
     props: {
@@ -42,6 +50,21 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "LogoImage");
         },
     },
+    methods: {
+        triggerGlobalAlert(alertEvent, isAutoDismissing) {
+            clearTimeout(this.countdownTimer);
+            this.displayGlobalAlert = true;
+            this.globalAlertMessage = alertEvent;
+            if (isAutoDismissing) {
+                this.countdownTimer = setTimeout(() => {
+                    this.displayGlobalAlert = false;
+                }, ALERT_DURATION);
+            }
+        },
+        onAlertClose() {
+            this.displayGlobalAlert = false;
+        },
+    },
     components: {
         alert,
         menuModal,
diff --git a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
index c502fb165..bb378c619 100644
--- a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
+++ b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
@@ -37,8 +37,7 @@
                         v-model="selectedWipers"
                         isMultiSelect
                         isRequired
-                        validationRules="checkbox-required"
-                        :additionalButtonData="additionalButtonData" />
+                        validationRules="checkbox-required" />
                 </div>
                 <div v-else-if="wipersOffered === wipersOfferedStrings.FRONT" class="wiper-options">
                     <p class="price">+${{ wipersModal.totalFrontPrice }}</p>
@@ -62,6 +61,7 @@ import { partTypeStrings } from "@/constants/part-type-strings";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import { processIfStatements } from "@/helpers/cms-content-helper";
 
 // DEFINE VALIDATION RULES
 defineRule("checkbox-required", required(errorMessages.OPTION_REQUIRED));
@@ -88,20 +88,23 @@ export default {
         };
     },
     methods: {
+        processIfStatements,
         openModal(modalName) {
+            this.selectedWipers = this.getSelectedWipers(); // reset selectedWipers to null upon modal open
             this.$refs[modalName].openModal();
         },
         closeModal(modalName) {
             this.$refs[modalName].closeModal();
         },
         addRainDefenseToCart(modalName, part) {
-            const alreadyInCart = this.currentCartItems.vaps.some((item) => {
-                return item.partType === part.partType;
-            });
-            if (!alreadyInCart) {
-                this.currentCartItems.vaps.push(part);
-            }
+            this.currentCartItems.vaps.push(part);
             this.closeModal(modalName);
+            const message = this.getRainDefenseAddedMessage();
+            this.$emit("added-to-cart", {
+                messageHeadline: message,
+                type: "alert-success",
+                isDismissible: true,
+            });
         },
         addWipersToCart(modalName, part) {
             const itemsForCart = [];
@@ -123,9 +126,11 @@ export default {
                     this.wipersOffered === wipersOfferedStrings.FRONT
                 ) {
                     itemsForCart.push(wipersOfferedStrings.FRONT);
+                    this.selectedWipers = ["FRONT"];
                 }
                 if (!rearWipersAlreadyInCart && this.wipersOffered === wipersOfferedStrings.REAR) {
                     itemsForCart.push(wipersOfferedStrings.REAR);
+                    this.selectedWipers = ["REAR"];
                 }
             }
 
@@ -143,7 +148,13 @@ export default {
             });
 
             this.closeModal(modalName);
-            this.selectedWipers;
+
+            const message = this.getWipersAddedMessage();
+            this.$emit("added-to-cart", {
+                messageHeadline: message,
+                type: "alert-success",
+                isDismissible: true,
+            });
         },
         updateWipersOffered(value) {
             this.wipersOffered = value;
@@ -151,6 +162,34 @@ export default {
         getSelectedWipers() {
             return null;
         },
+        getRainDefenseAddedMessage() {
+            return this.AddRainDefenseSuccessMessageFromCms;
+        },
+        getWipersAddedMessage() {
+            return this.processIfStatements(
+                this.AddWipersSuccessMessageFromCms,
+                "custom",
+                this.getCustomValueFromString
+            );
+        },
+        getCustomValueFromString(str) {
+            switch (str) {
+                case "vapsAddedIsFrontWipers":
+                    return (
+                        this.selectedWipers?.length === 1 &&
+                        this.selectedWipers[0] === wipersOfferedStrings.FRONT
+                    );
+                case "vapsAddedIsRearWipers":
+                    return (
+                        this.selectedWipers?.length === 1 &&
+                        this.selectedWipers[0] === wipersOfferedStrings.REAR
+                    );
+                case "vapsAddedIsBothWipers":
+                    return this.selectedWipers?.length > 1;
+                default:
+                    return null;
+            }
+        },
     },
     computed: {
         currentCartItems() {
@@ -302,6 +341,12 @@ export default {
 
             return wipersOptions;
         },
+        AddRainDefenseSuccessMessageFromCms() {
+            return this.getCmsContent("AddRainDefenseSuccessMessageWidget", "Text");
+        },
+        AddWipersSuccessMessageFromCms() {
+            return this.getCmsContent("AddWipersSuccessMessageWidget", "Text");
+        },
     },
     components: {
         buttonQuestion,
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index d0ea3da47..96fc9265d 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -44,7 +44,8 @@
                     <add-vaps-modal-buttons
                         v-model="lineItems"
                         :availableLineItems="availableLineItems"
-                        vapsTilesCmsName="VapsProductTiles" />
+                        vapsTilesCmsName="VapsProductTiles"
+                        @added-to-cart="showAlert" />
 
                     <paymentMethodQuestion
                         v-if="!isPiaDisabled"
@@ -321,6 +322,9 @@ export default {
                 this.$route
             );
         },
+        showAlert(alert) {
+            this.$refs.funnelHeader.triggerGlobalAlert(alert, true);
+        },
     },
     computed: {
         damageInfo() {
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index ce4e6b60f..cd403061c 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -2,18 +2,19 @@
     <div
         class="alert fade show text-center mb-0 py-2 px-4 border-0"
         role="alert"
+        v-on="{ 'close.bs.alert': onAlertClose }"
         :class="[
             isDismissible ? 'alert-dismissible' : '',
             this.alertClass,
             this.cssClassNameForCmsWidget,
         ]">
-        <p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
+        <p class="mx-6 my-0 fw-bold alert-heading">{{ alertHeadline }}</p>
         <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
             <p
-                class="m-0 text-body small"
+                class="mx-4 mt-1 text-body small"
                 v-if="!doesCopyContainRouterLink(paragraph) && !doesCopyContainTextLink(paragraph)"
                 v-html="paragraph"></p>
-            <p class="m-0 text-body small" v-else>
+            <p class="mx-4 mt-1 text-body small" v-else>
                 <template v-if="doesCopyContainRouterLink(paragraph)">
                     <textBlock :customText="paragraph" class="mb-1" marginTopSizeOverride="0" />
                 </template>
@@ -32,7 +33,7 @@
                 </template>
             </p>
         </template>
-        <button type="button" class="btn-close p-2" data-bs-dismiss="alert" aria-label="Close">
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.7 23.7" xml:space="preserve">
                 <path
                     d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
@@ -58,14 +59,14 @@ export default {
     name: "alert",
     props: {
         isDismissible: Boolean,
-        /*
-    alertClass class names:
-    alert-success (green)
-    alert-danger (red)
-    alert-warning (yellow)
-    alert-info (blue)
-    */
         alertClass: String,
+        /*
+            alertClass class names:
+            alert-success (green)
+            alert-danger (red)
+            alert-warning (yellow)
+            alert-info (blue)
+        */
         cmsWidgetName: {
             type: String,
             default(rawProps) {
@@ -81,6 +82,9 @@ export default {
             type: Boolean,
             default: true,
         },
+        onAlertCloseCallback: {
+            type: Function,
+        },
     },
     computed: {
         pageQueryString() {
@@ -124,6 +128,9 @@ export default {
                         document.documentElement.clientHeight - footerHeight)
             );
         },
+        onAlertClose() {
+            this.onAlertCloseCallback?.();
+        },
     },
     mounted() {
         this.ensureAlertIsInViewPort();
@@ -137,6 +144,8 @@ export default {
 
 <style lang="scss">
 .alert {
+    padding: 0.675rem 0;
+
     button {
         display: none;
     }
@@ -145,12 +154,13 @@ export default {
         opacity: 1;
         width: 0.75rem;
         height: 0.75rem;
+        padding: 0;
     }
     &.alert-dismissible {
         button {
             display: flex;
-            top: 2px;
-            right: 2px;
+            top: 0.875rem;
+            right: 1rem;
         }
     }
     &.alert-info {
@@ -199,7 +209,6 @@ export default {
     }
     & p {
         font-size: 0.875rem;
-        margin-bottom: 0.25rem;
     }
 }
 </style>

From 374fc95342a1bc30131cf870a5331977c60dda0d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 6 Nov 2023 15:27:42 -0500
Subject: [PATCH 11/16] CSR-1384: small css fix

---
 src/ux-components/alert/alert.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index cd403061c..7274ae487 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -11,10 +11,10 @@
         <p class="mx-6 my-0 fw-bold alert-heading">{{ alertHeadline }}</p>
         <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
             <p
-                class="mx-4 mt-1 text-body small"
+                class="mx-4 mt-1 mb-0 text-body small"
                 v-if="!doesCopyContainRouterLink(paragraph) && !doesCopyContainTextLink(paragraph)"
                 v-html="paragraph"></p>
-            <p class="mx-4 mt-1 text-body small" v-else>
+            <p class="mx-4 mt-1 mb-0 text-body small" v-else>
                 <template v-if="doesCopyContainRouterLink(paragraph)">
                     <textBlock :customText="paragraph" class="mb-1" marginTopSizeOverride="0" />
                 </template>

From 03a07c9c62c44c232f67bbd9c50518c85569285a Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 6 Nov 2023 15:43:06 -0500
Subject: [PATCH 12/16] CSR-1396 add recycle modal to cart page.

---
 src/fmg-components/cart/cart.vue              | 18 +++++++++++++++++-
 src/layouts/payment-method/payment-method.vue |  5 +++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 55516010f..3d46e420f 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/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%;
             }
         }
     }
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index a457e81b5..1b10a1db3 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/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" />
@@ -26,7 +26,8 @@
                         :availableLineItems="availableLineItems"
                         v-model="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
-                        @cart-remove="cartRemove" />
+                        @cart-remove="cartRemove"
+                        recyclingModalCmsWidgetName="RecycleModal" />
 
                     <hr />
 

From fc190cebae55af59c96fb85551af4c37e4739399 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 6 Nov 2023 15:45:11 -0500
Subject: [PATCH 13/16] Format code.

---
 src/fmg-components/cart/cart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 3d46e420f..3c4634979 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -95,7 +95,7 @@
                 </div>
             </div>
         </div>
-        <contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal" >
+        <contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal">
             <textBlock cmsWidgetName="RecycleTextBlock" />
         </contentGroupModal>
     </div>

From 45c9279333be2ca01beadf19643b16cb6bda6e09 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 7 Nov 2023 06:35:09 -0500
Subject: [PATCH 14/16] Added allowItemRemoval prop to cart

---
 src/layouts/payment-method/payment-method.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index a457e81b5..9020e5b62 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -24,6 +24,7 @@
                     <cart
                         :damage="damageInfo"
                         :availableLineItems="availableLineItems"
+                        :allowItemRemoval="true"
                         v-model="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         @cart-remove="cartRemove" />

From 4cc415af6dd870e6548c5a77de2555c564671907 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 7 Nov 2023 06:36:04 -0500
Subject: [PATCH 15/16] Added allowItemRemoval prop to cart 2

---
 src/fmg-components/cart/cart.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 55516010f..2a0f265a2 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -24,6 +24,7 @@
                     :class="[this.packageCartItems ? 'vaps' : '']">
                     <span>{{ cartItem.name }}</span>
                     <textLink
+                        v-if="allowItemRemoval"
                         ref="removeLink"
                         linkType="text"
                         :text="removeLinkText"
@@ -39,6 +40,7 @@
                     :key="i">
                     <span>{{ cartItem.name }}</span>
                     <textLink
+                        v-if="allowItemRemoval"
                         ref="removeLink"
                         linkType="text"
                         :text="removeLinkText"
@@ -64,6 +66,7 @@
                 <div v-if="premiumAppointmentDiscountCartItem">
                     <span>{{ premiumAppointmentDiscountCartItem.name }}</span>
                     <textLink
+                        v-if="allowItemRemoval"
                         ref="removeLink"
                         linkType="text"
                         :text="removeLinkText"
@@ -122,6 +125,7 @@ export default {
         damage: Object,
         servicePackageOptionsCmsName: String,
         availableLineItems: Object,
+        allowItemRemoval: Boolean,
     },
     data() {
         return {

From 23b03a81182fdf63f6b0c71bf3238394ee86e5a4 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 7 Nov 2023 07:10:16 -0500
Subject: [PATCH 16/16] Prettified

---
 src/fmg-components/cart/cart.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index b2c3642c2..a6290e46c 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -63,7 +63,7 @@
                     ><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
                 </div>
 
-                <div v-if="premiumAppointmentDiscountCartItem">
+                <div v-if="premiumAppointmentDiscountCartItem" class="premium-appt-cart-item">
                     <span>{{ premiumAppointmentDiscountCartItem.name }}</span>
                     <textLink
                         v-if="allowItemRemoval"
@@ -739,6 +739,9 @@ export default {
                     justify-content: flex-end;
                 }
             }
+            a {
+                font-size: 0.875rem;
+            }
         }
         .package-type,
         .service-type {