fix(storefront): BCTHEME-325 Apple pay button displaying needs to be fixed

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Apple pay button displaying needs to be fixed. [#2043](https://github.com/bigcommerce/cornerstone/pull/2043)
 - Incorrect focus order for product carousels. [#2034](https://github.com/bigcommerce/cornerstone/pull/2034)
 - Removed duplicates of main tag.[#2032](https://github.com/bigcommerce/cornerstone/pull/2032)
 - Hamburger Menu Icon missing on Google AMP Pages. [#2022](https://github.com/bigcommerce/cornerstone/pull/2022)

assets/js/theme/cart.js

@@ -10,6 +10,7 @@ import CartItemDetails from './common/cart-item-details';
 export default class Cart extends PageManager {
     onReady() {
         this.$modal = null;
+        this.$cartPageContent = $('[data-cart]');
         this.$cartContent = $('[data-cart-content]');
         this.$cartMessages = $('[data-cart-status]');
         this.$cartTotals = $('[data-cart-totals]');
@@ -18,9 +19,16 @@ export default class Cart extends PageManager {
         this.$activeCartItemId = null;
         this.$activeCartItemBtnAction = null;
 
+        this.setApplePaySupport();
         this.bindEvents();
     }
 
+    setApplePaySupport() {
+        if (window.ApplePaySession) {
+            this.$cartPageContent.addClass('apple-pay-supported');
+        }
+    }
+
     cartUpdate($target) {
         const itemId = $target.data('cartItemid');
         this.$activeCartItemId = itemId;

assets/js/theme/common/product-details.js

@@ -376,6 +376,10 @@ export default class ProductDetails extends ProductDetailsBase {
             if (this.previewModal) {
                 this.previewModal.open();
 
+                if (window.ApplePaySession) {
+                    this.previewModal.$modal.addClass('apple-pay-supported');
+                }
+
                 if ($addToCartBtn.parents('.quickView').length === 0) this.previewModal.$preModalFocusedEl = $addToCartBtn;
                 this.updateCartContent(this.previewModal, response.data.cart_item.id, () => this.previewModal.setupFocusTrap());
             } else {

assets/js/theme/global/cart-preview.js

@@ -15,6 +15,10 @@ export default function (secureBaseUrl, cartId) {
 
     const $body = $('body');
 
+    if (window.ApplePaySession) {
+        $cartDropdown.addClass('apple-pay-supported');
+    }
+
     $body.on('cart-quantity-update', (event, quantity) => {
         $cart.attr('aria-label', (_, prevValue) => prevValue.replace(/\d+/, quantity));
 

assets/scss/components/stencil/applePay/_applePay.scss

@@ -25,23 +25,14 @@
     }
 }
 
-.cart-additionalCheckoutButtons {
-    .apple-pay-checkout-button {
-        margin-top: spacing("half");
-    }
-}
-
 .apple-pay-supported {
     .apple-pay-checkout-button {
         display: block;
         float: right;
     }
-}
 
-.previewCartCheckout {
-    .apple-pay-checkout-button {
+    & .previewCartCheckout .apple-pay-checkout-button {
         display: inline-block;
         float: none;
-        margin-top: spacing("half");
     }
 }

assets/scss/components/stencil/cart/_cart.scss

@@ -43,18 +43,6 @@ $card-preview-zoom-bottom-offset:       6rem;
             float: right;
         }
     }
-
-    .CheckoutButton {
-        margin-bottom: spacing("base");
-
-        &:first-child {
-            margin-top: spacing("single");
-        }
-
-        &:last-child {
-            margin-bottom: spacing("single");
-        }
-    }
 }
 
 // Cart layout
@@ -557,7 +545,8 @@ $card-preview-zoom-bottom-offset:       6rem;
 
 .previewCart-additionalCheckoutButtons {
     @extend %additionalCheckoutButtons;
-    padding-right: 1.5rem;
+    padding-right: spacing('single');
+    padding-bottom: spacing('single');
 }
 
 // Cart Preview
@@ -608,7 +597,7 @@ $card-preview-zoom-bottom-offset:       6rem;
     }
 
     @include lazy-loaded-padding('productthumb_size');
-    
+
     &:after {
         @include breakpoint("xxsmall") {
             padding-bottom: 75%;

assets/scss/components/stencil/previewCart/_previewCart.scss

@@ -56,10 +56,13 @@
         width: 100%;
 
         // scss-lint:disable NestingDepth
-        + .button,
         + p {
             margin-top: spacing("half");
         }
+
+        &:not(:last-child) {
+            margin-bottom: spacing("half");
+        }
     }
 }