From 8180cb5d7400128e506704cf868183275ec08eae Mon Sep 17 00:00:00 2001
From: Anthoula Wojczak <awojczak@adobe.com>
Date: Mon, 11 Nov 2024 12:56:20 -0600
Subject: [PATCH] USF-1510: Cart Summary has a Footer Slot

- add Footer slot to the Cart Summary
---
 blocks/commerce-cart/commerce-cart.js | 36 +++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/blocks/commerce-cart/commerce-cart.js b/blocks/commerce-cart/commerce-cart.js
index f49b8dfa8d..9075db654c 100644
--- a/blocks/commerce-cart/commerce-cart.js
+++ b/blocks/commerce-cart/commerce-cart.js
@@ -3,13 +3,14 @@ import { render as provider } from '@dropins/storefront-cart/render.js';
 import * as Cart from '@dropins/storefront-cart/api.js';
 
 // Dropin Containers
-import CartSummaryList from '@dropins/storefront-cart/containers/CartSummaryList.js';
-import OrderSummary from '@dropins/storefront-cart/containers/OrderSummary.js';
-import EstimateShipping from '@dropins/storefront-cart/containers/EstimateShipping.js';
-import EmptyCart from '@dropins/storefront-cart/containers/EmptyCart.js';
+import CartSummaryList from "@dropins/storefront-cart/containers/CartSummaryList.js";
+import OrderSummary from "@dropins/storefront-cart/containers/OrderSummary.js";
+import EstimateShipping from "@dropins/storefront-cart/containers/EstimateShipping.js";
+import EmptyCart from "@dropins/storefront-cart/containers/EmptyCart.js";
+import Coupons from "@dropins/storefront-cart/containers/Coupons.js";
 
 // Initializers
-import '../../scripts/initializers/cart.js';
+import "../../scripts/initializers/cart.js";
 
 import { readBlockConfig } from '../../scripts/aem.js';
 
@@ -96,6 +97,23 @@ export default async function decorate(block) {
       quantityType: 'dropdown',
       dropdownOptions,
       slots: {
+        Footer: (ctx) => {
+          // Runs on mount
+          const wrapper = document.createElement("div");
+          ctx.appendChild(wrapper);
+
+          // Append Product Promotions on every update
+          ctx.onChange((next) => {
+            wrapper.innerHTML = "";
+
+            next.item?.discount?.label?.forEach((label) => {
+              const discount = document.createElement("div");
+              discount.style.color = "#3d3d3d";
+              discount.innerText = label;
+              wrapper.appendChild(discount);
+            });
+          });
+        },
         ProductAttributes: (ctx) => {
           // Prepend Product Attributes
           const productAttributes = ctx.item?.productAttributes;
@@ -137,6 +155,14 @@ export default async function decorate(block) {
             ctx.replaceWith(wrapper);
           }
         },
+        Coupons: (ctx) => {
+          // Prepend Coupons
+          const coupons = document.createElement("div");
+
+          provider.render(Coupons)(coupons);
+
+          ctx.appendChild(coupons);
+        },
       },
     })($summary),