USF 1629 - Add coupon container in cart (#162)

* Add coupon container in cart * fix lint * Add coupon slot to checkout * Fix lint --------- Co-authored-by: Eric Oeur <[email protected]>
hlxsites · Nov 14, 2024 · c143dde · c143dde
1 parent 827bced
commit c143dde
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git a/blocks/commerce-cart/commerce-cart.js b/blocks/commerce-cart/commerce-cart.js
@@ -7,6 +7,7 @@ import CartSummaryList from '@dropins/storefront-cart/containers/CartSummaryList
 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';
@@ -90,6 +91,13 @@ export default async function decorate(block) {
             ctx.replaceWith(wrapper);
           }
         },
+        Coupons: (ctx) => {
+          const coupons = document.createElement('div');
+
+          provider.render(Coupons)(coupons);
+
+          ctx.appendChild(coupons);
+        },
       },
     })($summary),
 

diff --git a/blocks/commerce-checkout/commerce-checkout.css b/blocks/commerce-checkout/commerce-checkout.css
@@ -116,6 +116,15 @@
   padding: var(--spacing-medium);
 }
 
+/* Order Summary Coupon */
+.dropin-accordion-section__heading {
+  margin: var(--spacing-medium) auto;
+}
+
+.cart-coupons__accordion {
+  margin-top: var(--spacing-xsmall);
+}
+
 /* temporary fix to hide the default cart heading */
 [data-testid='default-cart-heading'] {
   display: none;

diff --git a/blocks/commerce-checkout/commerce-checkout.js b/blocks/commerce-checkout/commerce-checkout.js
@@ -34,6 +34,7 @@ import CartSummaryList from '@dropins/storefront-cart/containers/CartSummaryList
 import EmptyCart from '@dropins/storefront-cart/containers/EmptyCart.js';
 import { OrderSummary } from '@dropins/storefront-cart/containers/OrderSummary.js';
 import { render as CartProvider } from '@dropins/storefront-cart/render.js';
+import Coupons from '@dropins/storefront-cart/containers/Coupons.js';
 
 // Checkout Dropin
 import * as checkoutApi from '@dropins/storefront-checkout/api.js';
@@ -278,6 +279,13 @@ export default async function decorate(block) {
           CheckoutProvider.render(EstimateShipping)(estimateShippingForm);
           esCtx.appendChild(estimateShippingForm);
         },
+        Coupons: (ctx) => {
+          const coupons = document.createElement('div');
+
+          CartProvider.render(Coupons)(coupons);
+
+          ctx.appendChild(coupons);
+        },
       },
     })($orderSummary),